@modusoperandi/licit 0.1.7 → 0.1.8

package/dist/client/Licit.js

@@ -15,6 +15,10 @@ var _prosemirrorView = require("prosemirror-view");
 
 var React = _interopRequireWildcard(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _flatted = require("flatted");
+
 var _convertFromJSON = _interopRequireDefault(require("../convertFromJSON"));
 
 var _RichTextEditor = _interopRequireDefault(require("../ui/RichTextEditor"));
@@ -55,30 +59,30 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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.
+/**
+ * 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.
  */
 
 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;
@@ -104,21 +108,25 @@ class Licit extends React.Component {
 
     _defineProperty(this, "_defaultEditorPlugins", void 0);
 
+    _defineProperty(this, "_devTools", void 0);
+
+    _defineProperty(this, "_applyDevTools", void 0);
+
     _defineProperty(this, "_popUp", null);
 
     _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;
+      const editorState = _this._editorView.state;
       const {
         doc,
         schema
-      } = _this._connector.getState();
-
+      } = editorState;
       let {
         tr
-      } = _this._connector.getState();
-
-      const document = content ? schema.nodeFromJSON(content) : schema.nodeFromJSON(_createEmptyEditorState.EMPTY_DOC_JSON);
+      } = editorState;
+      const document = schema.nodeFromJSON(content ? content : _createEmptyEditorState.EMPTY_DOC_JSON);
 
       const selection = _prosemirrorState.TextSelection.create(doc, 0, doc.content.size);
 
@@ -136,10 +144,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) {
@@ -200,26 +208,30 @@ class Licit extends React.Component {
       const tr = state.tr;
       const doc = state.doc;
       const trx = tr.setSelection(_prosemirrorState.TextSelection.create(doc, 0, doc.content.size));
-      dispatch(trx.scrollIntoView());
-      editorView.focus();
+      dispatch(trx.scrollIntoView()); // [FS] IRAD-1578 2021-09-27
+      // In collab mode, fire onRead only after getting the response from collab server.
 
-      if (this.state.onReadyCB) {
+      if (this.state.onReadyCB && this.state.docID === '') {
+        editorView.focus();
         this.state.onReadyCB(this);
       }
 
-      if (this.state.debug) {
-        // import dynamically
-        Promise.resolve().then(() => _interopRequireWildcard(require('prosemirror-dev-tools'))).then(prosemirrorDevTools => {
-          window.debugProseMirror = () => {
-            prosemirrorDevTools.applyDevTools(editorView);
-          };
-
-          window.debugProseMirror();
-        });
-      }
+      this.initDevTool(this.state.debug, editorView);
     });
 
     _defineProperty(this, "setProps", props => {
+      // [FS] IRAD-1571 2021-10-08
+      // Since the debug lies outside the editor,
+      // any change to debug tool must be refreshed here.
+      if (this.state.debug !== props.debug) {
+        // change in debug flag.
+        if (props.debug) {
+          this.initDevTool(true, this._editorView);
+        } else {
+          this.destroyDevTool();
+        }
+      }
+
       if (this.state.readOnly) {
         // It should be possible to load content into the editor in readonly as well.
         // It should not be necessary to make the component writable any time during the process
@@ -290,7 +302,8 @@ class Licit extends React.Component {
     this._connector = collaborative ? new _CollabConnector.default(editorState, setState, {
       docID,
       collabServiceURL
-    }, this._defaultEditorSchema, this._defaultEditorPlugins) : new _SimpleConnector.default(editorState, setState); // FS IRAD-989 2020-18-06
+    }, this._defaultEditorSchema, this._defaultEditorPlugins, // [FS] IRAD-1578 2021-09-27
+    this.onReady.bind(this)) : new _SimpleConnector.default(editorState, setState); // FS IRAD-989 2020-18-06
     // updating properties should automatically render the changes
 
     this.state = {
@@ -314,6 +327,19 @@ class Licit extends React.Component {
       // Use known editorState to update schema.
       this._connector.updateSchema(editorState.schema);
     }
+  } // [FS] IRAD-1578 2021-09-27
+
+
+  onReady(state) {
+    const collabEditing = this.state.docID !== '';
+
+    if (collabEditing) {
+      this._editorView && this._editorView.focus();
+
+      if (this.state.onReadyCB) {
+        this.state.onReadyCB(this);
+      }
+    }
   } // [FS] IRAD-1067 2020-09-19
   // Alert funtion to show document is corrupted
 
@@ -403,14 +429,15 @@ class Licit extends React.Component {
     // Only interested if properties are set from outside.
     if (!this._skipSCU) {
       this._skipSCU = false;
-      let dataChanged = false; // Compare data, if found difference, update editorState
-
-      if (this.state.data !== nextState.data) {
-        dataChanged = true;
-      } else if (null === nextState.data) {
-        if (this.state.editorState.doc.textContent && 0 < this.state.editorState.doc.textContent.trim().length) {
-          dataChanged = true;
-        }
+      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) {
@@ -421,9 +448,7 @@ class Licit extends React.Component {
       if (this.state.docID !== nextState.docID) {
         // Collaborative mode changed
         const collabEditing = nextState.docID !== '';
-
-        const editorState = this._connector.getState();
-
+        const editorState = this._editorView.state;
         const setState = this.setState.bind(this);
         const docID = nextState.docID || '';
         const collabServiceURL = nextState.collabServiceURL || '/collaboration-service'; // create new connector
@@ -431,7 +456,8 @@ class Licit extends React.Component {
         this._connector = collabEditing ? new _CollabConnector.default(editorState, setState, {
           docID,
           collabServiceURL
-        }, this._defaultEditorSchema, this._defaultEditorPlugins) : new _SimpleConnector.default(editorState, setState);
+        }, this._defaultEditorSchema, this._defaultEditorPlugins, // [FS] IRAD-1578 2021-09-27
+        this.onReady.bind(this)) : new _SimpleConnector.default(editorState, setState);
       }
     }
 
@@ -474,29 +500,76 @@ class Licit extends React.Component {
     }
   }
 
-  componentWillUnmount() {
+  initDevTool(debug, editorView) {
+    // [FS] IRAD-1575 2021-09-27
+    if (debug) {
+      if (!this._devTools) {
+        this._devTools = new Promise(async (resolve, reject) => {
+          try {
+            // Method is exported as both the default and named, Using named
+            // for clarity and future proofing.
+            const {
+              applyDevTools
+            } = await Promise.resolve().then(() => _interopRequireWildcard(require('prosemirror-dev-tools'))); // got the pm dev tools instance.
+
+            this._applyDevTools = applyDevTools; // Attach debug tools to current editor instance.
+
+            this._applyDevTools(editorView);
+
+            resolve(() => {
+              // [FS] IRAD-1571 2021-10-08
+              // Prosemirror Dev Tools handles as if one only instance is used in a page and
+              // hence handling removal here gracefully.
+              const place = document.querySelector('.'.concat('__prosemirror-dev-tools__'));
+
+              if (place) {
+                _reactDom.default.unmountComponentAtNode(place);
+
+                place.innerHTML = '';
+              }
+            });
+          } catch (error) {
+            reject();
+          }
+        });
+      } // Attach debug tools to current editor instance.
+
+
+      if (this._devTools && this._applyDevTools) {
+        this._applyDevTools(editorView);
+      }
+    }
+  }
+
+  destroyDevTool() {
     // [FS] IRAD-1569 2021-09-15
     // Unmount dev tools when component is destroyed,
     // so that toggle effect is not occuring when the document is retrieved each time.
-    if (this.state.debug) {
-      // unmount dev
-      window.debugProseMirror();
+    if (this._devTools) {
+      // Call the applyDevTools method again to trigger DOM removal
+      // prosemirror-dev-tools has outstanding pull-requests that affect
+      // dom removal. this may need to be addressed once those have been merged.
+      this._devTools.then(removeDevTools => removeDevTools());
     }
   }
-  /**
-   * 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.
+
+  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.
    */