@modusoperandi/licit 0.13.1 → 0.13.10

package/dist/client/Licit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.DataType = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
@@ -31,9 +31,7 @@ var _CollabConnector = _interopRequireDefault(require("./CollabConnector"));
 
 var _createEmptyEditorState = require("../createEmptyEditorState");
 
-var _createPopUp = _interopRequireDefault(require("../ui/createPopUp"));
-
-var _PopUpPosition = require("../ui/PopUpPosition");
+var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
 
 var _AlertInfo = _interopRequireDefault(require("../ui/AlertInfo"));
 
@@ -47,6 +45,8 @@ var _EditorMarks = _interopRequireDefault(require("../EditorMarks"));
 
 var _EditorNodes = _interopRequireDefault(require("../EditorNodes"));
 
+var _convertFromHTML = _interopRequireDefault(require("../convertFromHTML"));
+
 var _Types = require("../Types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,32 +57,37 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const ATTR_OBJID = 'objectId';
-const ATTR_OBJMETADATA = 'objectMetaData';
-/**
- * LICIT properties:
- *  docID {string} [] Collaborative Doument ID
- *  collabServiceURL {string} [/collaboration-service] Collaboration Service URL
- *  debug {boolean} [false] To enable/disable ProseMirror Debug Tools, available only in development.
- *  width {string} [100%] Width of the editor.
- *  height {string} [100%] Height of the editor.
- *  readOnly {boolean} [false] To enable/disable editing mode.
- *  onChange {@callback} [null] Fires after each significant change.
- *      @param data {JSON} Modified document data.
- *  onReady {@callback} [null] Fires when the editor is fully ready.
- *      @param ref {LICIT} Rerefence of the editor.
- *  data {JSON} [null] Document data to be loaded into the editor.
- *  disabled {boolean} [false] Disable the editor.
- *  embedded {boolean} [false] Disable/Enable inline behaviour.
- *  plugins [plugins] External Plugins into the editor.
+const DataType = Object.freeze({
+  JSON: Symbol('json'),
+  HTML: Symbol('html')
+});
+/**
+ * LICIT properties:
+ *  docID {string} [] Collaborative Doument ID
+ *  collabServiceURL {string} [/collaboration-service] Collaboration Service URL
+ *  debug {boolean} [false] To enable/disable ProseMirror Debug Tools, available only in development.
+ *  width {string} [100%] Width of the editor.
+ *  height {string} [100%] Height of the editor.
+ *  readOnly {boolean} [false] To enable/disable editing mode.
+ *  onChange {@callback} [null] Fires after each significant change.
+ *      @param data {JSON} Modified document data.
+ *  onReady {@callback} [null] Fires when the editor is fully ready.
+ *      @param ref {LICIT} Rerefence of the editor.
+ *  data {JSON|HTML} [null] Document data to be loaded into the editor.
+ *  dataType {JSON|HTML} [JSON] Document data to be loaded into the editor.
+ *  disabled {boolean} [false] Disable the editor.
+ *  embedded {boolean} [false] Disable/Enable inline behaviour.
+ *  plugins [plugins] External Plugins into the editor.
  */
 
+exports.DataType = DataType;
+
 class Licit extends React.Component {
   // This will be handy in updating document's content.
   // Flag to decide whether to skip shouldComponentUpdate
 
-  /**
-   * Provides access to prosemirror view.
+  /**
+   * Provides access to prosemirror view.
    */
   get editorView() {
     return this._editorView;
@@ -117,7 +122,7 @@ class Licit extends React.Component {
     _defineProperty(this, "setContent", function () {
       let content = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       // [FS] IRAD-1571 2021-09-27
-      // dispatch a transaction that MUST start from the view�s current state;
+      // dispatch a transaction that MUST start from the view’s current state;
       const editorState = _this._editorView.state;
       const {
         doc,
@@ -126,15 +131,20 @@ class Licit extends React.Component {
       let {
         tr
       } = editorState;
-      const document = schema.nodeFromJSON(content ? content : _createEmptyEditorState.EMPTY_DOC_JSON);
+      const document = schema.nodeFromJSON(content ? content : _createEmptyEditorState.EMPTY_DOC_JSON); // [FS] IRAD-1593 2021-10-12
+      // Reset lastKeyCode since the content is set dynamically and so lastKeyCode is invalid now.
+
+      _this._editorView.lastKeyCode = null;
 
       const selection = _prosemirrorState.TextSelection.create(doc, 0, doc.content.size);
 
       tr = tr.setSelection(selection).replaceSelectionWith(document, false); // [FS] IRAD-1092 2020-12-03
       // set the value for object metadata  and objectId
+      // Should update all document attributes.
 
-      tr = _this.isNodeHasAttribute(document, ATTR_OBJMETADATA) ? tr.step(new _licitDocAttrsStep.SetDocAttrStep(ATTR_OBJMETADATA, document.attrs.objectMetaData)) : tr;
-      tr = _this.isNodeHasAttribute(document, ATTR_OBJID) ? tr.step(new _licitDocAttrsStep.SetDocAttrStep(ATTR_OBJID, document.attrs.objectId)) : tr;
+      Object.keys(document.attrs).forEach(attr => {
+        tr = tr.step(new _licitDocAttrsStep.SetDocAttrStep(attr, document.attrs[attr]));
+      });
       _this._skipSCU = true;
 
       _this._editorView.dispatch(tr);
@@ -144,10 +154,10 @@ class Licit extends React.Component {
       const {
         transaction
       } = data;
-      /*
-       ** ProseMirror Debug Tool's Snapshot creates a new state and sets that to editor view's state.
-       ** This results in the connector's state as an orphan and thus transaction mismatch error.
-       ** To resolve check and update the connector's state to keep in sync.
+      /*
+       ** ProseMirror Debug Tool's Snapshot creates a new state and sets that to editor view's state.
+       ** This results in the connector's state as an orphan and thus transaction mismatch error.
+       ** To resolve check and update the connector's state to keep in sync.
        */
 
       if (this._editorView) {
@@ -277,7 +287,8 @@ class Licit extends React.Component {
     const onChangeCB = typeof props.onChange === 'function' ? props.onChange : noop;
     const onReadyCB = typeof props.onReady === 'function' ? props.onReady : noop;
     const readOnly = props.readOnly || false;
-    const data = props.data || null;
+    let data = props.data || null;
+    const dataType = props.dataType || DataType.JSON;
     const disabled = props.disabled || false;
     const embedded = props.embedded || false; // [FS] IRAD-996 2020-06-30
     // [FS] 2020-07-03
@@ -290,14 +301,8 @@ class Licit extends React.Component {
       marks: _EditorMarks.default
     });
     this._defaultEditorPlugins = new _buildEditorPlugins.default(this._defaultEditorSchema).get();
-    let editorState = (0, _convertFromJSON.default)(data, null, this._defaultEditorSchema, plugins, this._defaultEditorPlugins); // [FS] IRAD-1067 2020-09-19
-    // The editorState will return null if the doc Json is mal-formed
-
-    if (null === editorState) {
-      editorState = (0, _convertFromJSON.default)(_createEmptyEditorState.EMPTY_DOC_JSON, null, this._defaultEditorSchema, plugins, this._defaultEditorPlugins);
-      this.showAlert();
-    }
-
+    const editorState = this.initEditorState(plugins, dataType, data);
+    data = editorState.doc;
     const setState = this.setState.bind(this);
     this._connector = collaborative ? new _CollabConnector.default(editorState, setState, {
       docID,
@@ -325,8 +330,52 @@ class Licit extends React.Component {
 
     if (this._connector.updateSchema) {
       // Use known editorState to update schema.
-      this._connector.updateSchema(editorState.schema);
+      this._connector.updateSchema(editorState.schema, data);
+    }
+  }
+
+  initEditorState(plugins, dataType, data) {
+    let editorState = null;
+    const effectivePlugins = this.getEffectivePlugins(this._defaultEditorSchema, this._defaultEditorPlugins, plugins);
+
+    if (DataType.JSON === dataType) {
+      editorState = (0, _convertFromJSON.default)(data, null, effectivePlugins.schema, effectivePlugins.plugins); // [FS] IRAD-1067 2020-09-19
+      // The editorState will return null if the doc Json is mal-formed
+
+      if (null === editorState) {
+        editorState = (0, _convertFromJSON.default)(_createEmptyEditorState.EMPTY_DOC_JSON, null, effectivePlugins.schema, effectivePlugins.plugins);
+        this.showAlert();
+      }
+    } else {
+      editorState = (0, _convertFromHTML.default)(data, effectivePlugins.schema, effectivePlugins.plugins);
+    }
+
+    return editorState;
+  }
+
+  getEffectivePlugins(schema, defaultPlugins, plugins) {
+    const effectivePlugins = defaultPlugins;
+
+    if (plugins) {
+      for (const p of plugins) {
+        if (!effectivePlugins.includes(p)) {
+          effectivePlugins.push(p);
+
+          if (p.getEffectiveSchema) {
+            schema = p.getEffectiveSchema(schema);
+          }
+
+          if (p.initKeyCommands) {
+            effectivePlugins.push(p.initKeyCommands());
+          }
+        }
+      }
     }
+
+    return {
+      plugins: effectivePlugins,
+      schema
+    };
   } // [FS] IRAD-1578 2021-09-27
 
 
@@ -346,9 +395,9 @@ class Licit extends React.Component {
 
   showAlert() {
     const anchor = null;
-    this._popUp = (0, _createPopUp.default)(_AlertInfo.default, null, {
+    this._popUp = (0, _licitUiCommands.createPopUp)(_AlertInfo.default, null, {
       anchor,
-      position: _PopUpPosition.atViewportCenter,
+      position: _licitUiCommands.atViewportCenter,
       onClose: val => {
         if (this._popUp) {
           this._popUp = null;
@@ -425,45 +474,70 @@ class Licit extends React.Component {
     return node.attrs && node.attrs[attrName];
   }
 
+  hasDataChanged(nextData) {
+    let dataChanged = false; // [FS] IRAD-1571 2021-09-27
+    // dispatch a transaction that MUST start from the view’s current state;
+    // [FS] IRAD-1589 2021-10-04
+    // Do a proper circular JSON comparison.
+
+    if ((0, _flatted.stringify)(this.state.data) !== (0, _flatted.stringify)(nextData)) {
+      const editorState = this._editorView.state;
+      const nextDoc = editorState.schema.nodeFromJSON(nextData ? nextData : _createEmptyEditorState.EMPTY_DOC_JSON);
+      dataChanged = !nextDoc.eq(editorState.doc);
+    }
+
+    return dataChanged;
+  }
+
+  changeContent(data) {
+    if (this.hasDataChanged(data)) {
+      // FS IRAD-1592 2021-11-10
+      // Release here quickly, so that update doesn't care about at this point.
+      // data changed, so update document content
+      setTimeout(this.setContent.bind(this, data), 1);
+    }
+  }
+
   shouldComponentUpdate(nextProps, nextState) {
     // Only interested if properties are set from outside.
     if (!this._skipSCU) {
       this._skipSCU = false;
-      let dataChanged = false; // [FS] IRAD-1571 2021-09-27
-      // dispatch a transaction that MUST start from the view�s current state;
-      // [FS] IRAD-1589 2021-10-04
-      // Do a proper circular JSON comparison.
-
-      if ((0, _flatted.stringify)(this.state.data) !== (0, _flatted.stringify)(nextState.data)) {
-        const editorState = this._editorView.state;
-        const nextDoc = editorState.schema.nodeFromJSON(nextState.data ? nextState.data : _createEmptyEditorState.EMPTY_DOC_JSON);
-        dataChanged = !nextDoc.eq(editorState.doc);
-      }
-
-      if (dataChanged) {
-        // data changed, so update document content
-        this.setContent(nextState.data);
-      }
+      this.changeContent(nextState.data);
 
       if (this.state.docID !== nextState.docID) {
-        // Collaborative mode changed
-        const collabEditing = nextState.docID !== '';
-        const editorState = this._editorView.state;
-        const setState = this.setState.bind(this);
-        const docID = nextState.docID || '';
-        const collabServiceURL = nextState.collabServiceURL || '/collaboration-service'; // create new connector
-
-        this._connector = collabEditing ? new _CollabConnector.default(editorState, setState, {
-          docID,
-          collabServiceURL
-        }, this._defaultEditorSchema, this._defaultEditorPlugins, // [FS] IRAD-1578 2021-09-27
-        this.onReady.bind(this)) : new _SimpleConnector.default(editorState, setState);
+        setTimeout(this.setDocID.bind(this, nextState), 1);
       }
     }
 
     return true;
   }
 
+  setDocID(nextState) {
+    // Collaborative mode changed
+    const collabEditing = nextState.docID !== '';
+    const editorState = this._editorView.state;
+    const setState = this.setState.bind(this);
+    const docID = nextState.docID || '';
+    const collabServiceURL = nextState.collabServiceURL || '/collaboration-service';
+
+    if (this._connector) {
+      this._connector.cleanUp();
+    } // create new connector
+
+
+    this._connector = collabEditing ? new _CollabConnector.default(editorState, setState, {
+      docID,
+      collabServiceURL
+    }, this._defaultEditorSchema, this._defaultEditorPlugins, // [FS] IRAD-1578 2021-09-27
+    this.onReady.bind(this)) : new _SimpleConnector.default(editorState, setState); // FS IRAD-1592 2021-11-10
+    // Notify collab server
+
+    if (this._connector.updateSchema) {
+      // Use known editorState to update schema.
+      this._connector.updateSchema(editorState.schema);
+    }
+  }
+
   render() {
     const {
       editorState,
@@ -556,20 +630,20 @@ class Licit extends React.Component {
   componentWillUnmount() {
     this.destroyDevTool();
   }
-  /**
-   * LICIT properties:
-   *  docID {number} [0] Collaborative Doument ID
-   *  debug {boolean} [false] To enable/disable ProseMirror Debug Tools, available only in development.
-   *  width {string} [100%] Width of the editor.
-   *  height {height} [100%] Height of the editor.
-   *  readOnly {boolean} [false] To enable/disable editing mode.
-   *  onChange {@callback} [null] Fires after each significant change.
-   *      @param data {JSON} Modified document data.
-   *  onReady {@callback} [null] Fires when the editor is fully ready.
-   *      @param ref {LICIT} Rerefence of the editor.
-   *  data {JSON} [null] Document data to be loaded into the editor.
-   *  disabled {boolean} [false] Disable the editor.
-   *  embedded {boolean} [false] Disable/Enable inline behaviour.
+  /**
+   * LICIT properties:
+   *  docID {number} [0] Collaborative Doument ID
+   *  debug {boolean} [false] To enable/disable ProseMirror Debug Tools, available only in development.
+   *  width {string} [100%] Width of the editor.
+   *  height {height} [100%] Height of the editor.
+   *  readOnly {boolean} [false] To enable/disable editing mode.
+   *  onChange {@callback} [null] Fires after each significant change.
+   *      @param data {JSON} Modified document data.
+   *  onReady {@callback} [null] Fires when the editor is fully ready.
+   *      @param ref {LICIT} Rerefence of the editor.
+   *  data {JSON} [null] Document data to be loaded into the editor.
+   *  disabled {boolean} [false] Disable the editor.
+   *  embedded {boolean} [false] Disable/Enable inline behaviour.
    */