basic support for rng should be completed

src/components/AttDatatype.js

@@ -6,6 +6,7 @@ import { _i18n } from '../localization/i18n'
 export default class AttDatatype extends Component {
   render() {
     const i18n = _i18n(this.props.language, 'AttDatatype')
+    const rngContent = this.props.attribute.datatype.rngContent
     const refType = this.props.attribute.datatype.dataRef.key
       ? 'key'
       : 'name'
@@ -25,6 +26,7 @@ export default class AttDatatype extends Component {
           refType={refType}
           memberType={this.props.memberType}
           datatype={datatype}
+          rngContent={rngContent}
           available={available}
           restriction={restriction}
           attribute={this.props.attribute.ident}

src/components/Blockly.js

@@ -195,6 +195,8 @@ export default class BlocklyRomaJsEditor extends Component {
       ],
     }
     const handleXmlChange = (xml) => {
+      // Only update if XML is different.
+      if (xml === this.state.initialXml) {return}
       const blocklyXml = xmlParser.parseFromString(xml, 'text/xml')
       const contentObject = []
       let valid = true

src/components/ContentModel.js

@@ -4,6 +4,7 @@ import ModelClassPicker from '../containers/ModelClassPicker'
 import BlocklyContainer from '../containers/BlocklyContainer'
 import { Link } from 'react-router-dom'
 import { _i18n } from '../localization/i18n'
+import Rng from './Rng'
 
 export default class ContentModel extends Component {
   render() {
@@ -53,7 +54,10 @@ export default class ContentModel extends Component {
             dangerouslySetInnerHTML={{__html: i18n('ExtendedHelperText')}} />
         </div>
         <div className="mdc-layout-grid__cell--span-8">
-          <BlocklyContainer element={this.props.element}/>
+          {this.props.element.content[0].type === 'rng'
+            ? <Rng language={this.props.language} rngContent={this.props.element.content[0].rngContent}/>
+            : <BlocklyContainer element={this.props.element}/>
+          }
         </div>
       </div>
     </div>)

src/components/DataRef.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import DatatypePicker from '../containers/DatatypePicker'
+import Rng from './Rng'
 import { Link } from 'react-router-dom'
 import { _i18n } from '../localization/i18n'
 
@@ -22,6 +23,15 @@ export default class DataRef extends Component {
         </div>
       </div>)
     }
+
+    if (this.props.rngContent) {
+      return (<div className="mdc-layout-grid__inner romajs-formrow" key="dtp">
+        <div className="mdc-layout-grid__cell--span-12">
+          <Rng language={this.props.language} rngContent={this.props.rngContent}/>
+        </div>
+      </div>)
+    }
+
     return [
       <div className="mdc-layout-grid__inner romajs-formrow" key="dtp">
         <div className="mdc-layout-grid__cell--span-1">
@@ -48,6 +58,7 @@ DataRef.propTypes = {
   member: PropTypes.object.isRequired,
   memberType: PropTypes.string.isRequired,
   datatype: PropTypes.string.isRequired,
+  rngContent: PropTypes.bool,
   available: PropTypes.bool,
   restriction: PropTypes.string,
   attribute: PropTypes.string,

src/components/DatatypeContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import DataRef from './DataRef'
 import ValList from './ValList'
 import { _i18n } from '../localization/i18n'
+import Rng from './Rng'
 
 export default class DatatypeContent extends Component {
   constructor(props) {
@@ -32,6 +33,14 @@ export default class DatatypeContent extends Component {
     let contentType = null
     let grouping = null
     if (content[0]) {
+      if (content[0].type === 'rng') {
+        return (<div className="mdc-layout-grid__inner romajs-formrow">
+          <div className="mdc-layout-grid__cell--span-3"/>
+          <div className="mdc-layout-grid__cell--span-8">
+            <Rng language={this.props.language} rngContent={content[0].rngContent}/>
+          </div>
+        </div>)
+      }
       contentType = content[0].type !== 'sequence' && content[0].type !== 'alternate' ? null : content[0].type
       // Go down to sequence or alternate if needed.
       // We assume there is only one level, though more are possible.

src/components/Rng.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import AceEditor from 'react-ace'
+import ReactResizeDetector from 'react-resize-detector'
+import { _i18n } from '../localization/i18n'
+
+import 'brace/mode/xml'
+import 'brace/theme/tomorrow'
+
+export default class Rng extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  onResize() {
+    this.ace.editor.resize()
+  }
+
+  render() {
+    const i18n = _i18n(this.props.language, 'Rng')
+    return (
+      <div className="mdc-layout-grid__cell--span-8">{
+        <div className="mdc-layout-grid__cell--span-10" style={{resize: 'both'}}>
+          <p className="mdc-typography--body1" style={{fontWeight: 'bold'}}>
+            {i18n('RelaxNG elements cannot be edited in Roma.')}
+          </p>
+          <AceEditor
+            style={{resize: 'both'}}
+            ref={(ae) => { ae ? this.ace = ae : null }}
+            mode="xml"
+            theme="tomorrow"
+            name={`ace_rng`}
+            fontSize={14}
+            showPrintMargin={false}
+            showGutter
+            value={this.props.rngContent}
+            height="100px"
+            width="80%"
+            readOnly
+            editorProps={{
+              $blockScrolling: Infinity
+            }}/>
+          <ReactResizeDetector handleWidth handleHeight onResize={() => {this.onResize()}} />
+        </div>
+      }
+      </div>
+    )
+  }
+}
+
+// Omitting desc delete button for now until different languages get implemented.
+/*
+<div className="mdc-layout-grid__cell--span-1">
+  <i className="material-icons romajs-clickable" onClick={() => { this.props.delete(pos) }}>clear</i>
+</div>
+*/
+
+Rng.propTypes = {
+  rngContent: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
+}

src/localization/i18n.json

@@ -2020,5 +2020,15 @@
       "pt-notchecked": "Gerado com a versão RomaJS",
       "zh-notchecked": "用RomaJS版本生成的"
     }
+  },
+  "Rng": {
+    "RelaxNG elements cannot be edited in Roma.": {
+      "it": "Gli elementi RelaxNG non possono essere modificati con Roma.",
+      "fr-notchecked": "Les éléments RelaxNG ne peuvent pas être modifiés avec Roma.",
+      "es-notchecked": "Los elementos RelaxNG no pueden editarse con Roma.",
+      "de-notchecked": "RelaxNG-Elemente können nicht mit Roma bearbeitet werden.",
+      "pt-notchecked": "Os elementos RelaxNG não podem ser editados com Roma.",
+      "zh-notchecked": "RelaxNG 元素無法使用Roma編輯。"
+    }
   }
 }

src/reducers/index.js

@@ -120,12 +120,12 @@ function customization(state = {
         msg = i18n('This does not appear to be a TEI document.')
         throw Error(msg)
       }
-      for (const el of Array.from(schemaSpec.getElementsByTagNameNS('http://relaxng.org/ns/structure/1.0', '*'))) {
-        if (!el.closest('egXML')) {
-          msg = i18n('ODD Documents with RELAX NG elements are not supported.')
-          throw Error(msg)
-        }
-      }
+      // for (const el of Array.from(schemaSpec.getElementsByTagNameNS('http://relaxng.org/ns/structure/1.0', '*'))) {
+      //   if (!el.closest('egXML')) {
+      //     msg = i18n('ODD Documents with RELAX NG elements are not supported.')
+      //     throw Error(msg)
+      //   }
+      // }
       let hasSource = false
       for (const el of Array.from(schemaSpec.getElementsByTagNameNS('http://www.tei-c.org/ns/1.0', '*'))) {
         if (!el.closest('egXML') && el.getAttribute('source')) {

src/utils/urls.js

@@ -5,8 +5,11 @@
    Set custom URLs values here.
 */
 
-export const TEIGARAGE_PROTOCOL = 'https'
-export const TEIGARAGE_LOCATION = 'teigarage.tei-c.org'
+// export const TEIGARAGE_PROTOCOL = 'https'
+// export const TEIGARAGE_LOCATION = 'teigarage.tei-c.org'
+
+export const TEIGARAGE_PROTOCOL = 'http'
+export const TEIGARAGE_LOCATION = 'localhost:8080'
 
 export const DATASOURCES_PROTOCOL = 'https'
 export const DATASOURCES_LOCATION = 'tei-c.org/Vault/P5/current/xml/tei/odd'