@modusoperandi/licit 0.1.4 → 0.1.8

package/dist/client/Licit.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _prosemirrorDevTools = _interopRequireDefault(require("prosemirror-dev-tools"));
-
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorModel = require("prosemirror-model");
@@ -17,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"));
@@ -47,39 +49,40 @@ var _EditorNodes = _interopRequireDefault(require("../EditorNodes"));
 
 var _Types = require("../Types");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 {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.
- *  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;
@@ -105,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);
 
@@ -137,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) {
@@ -201,23 +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) {
-        window.debugProseMirror = () => {
-          (0, _prosemirrorDevTools.default)(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
@@ -236,31 +250,7 @@ class Licit extends React.Component {
       this.setState(props);
     });
 
-    this.state = {
-      loaded: false
-    };
-    setTimeout(p => this.loadStyles(p), 100, _props);
-  }
-  /**
-   * Ensures that custom styles are loaded from server before the underlying
-   * editor is rendered.  This is a band-aid method, and is necessary here
-   * because other parts of the editor attempt to use styles synchronously.
-   *
-   * @param {*} props Editor properties passed to constructor
-   */
-
-
-  async loadStyles(props) {
-    // Only load styles if there's a method to load them.
-    if (props.runtime && props.runtime.getStylesAsync) {
-      // Force preload of styles before every editor instance is created.
-      await props.runtime.getStylesAsync().catch(error => {
-        // Log the failure, but proceed to display editor without any styles.
-        console.warn('Failed to load custom styles:', error);
-      });
-    }
-
-    this.initialize(props);
+    this.initialize(_props);
   }
 
   initialize(props) {
@@ -270,11 +260,16 @@ class Licit extends React.Component {
 
     const noop = function () {}; // [FS] IRAD-981 2020-06-10
     // Component's configurations.
+    // [FS] IRAD-1552 2021-08-26
+    // Collaboration server / client should allow string values for document identifiers.
 
 
-    const docID = props.docID || 0; // 0 < means collaborative.
+    const docID = props.docID || ''; // Empty means collaborative.
 
-    const collaborative = 0 < docID;
+    const collaborative = docID !== ''; // [FS] IRAD-1553 2021-08-26
+    // Configurable Collaboration Service URL.
+
+    const collabServiceURL = props.collabServiceURL || '/collaboration-service';
     const debug = props.debug || false; // Default width and height to undefined
 
     const width = props.width || undefined;
@@ -305,13 +300,15 @@ class Licit extends React.Component {
 
     const setState = this.setState.bind(this);
     this._connector = collaborative ? new _CollabConnector.default(editorState, setState, {
-      docID
-    }, this._defaultEditorSchema, this._defaultEditorPlugins) : new _SimpleConnector.default(editorState, setState);
-    const loaded = true; // FS IRAD-989 2020-18-06
+      docID,
+      collabServiceURL
+    }, 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.setState({
+    this.state = {
       docID,
+      collabServiceURL,
       data,
       editorState,
       width,
@@ -322,15 +319,27 @@ class Licit extends React.Component {
       debug,
       disabled,
       embedded,
-      runtime,
-      loaded
-    }); // FS IRAD-1040 2020-26-08
+      runtime
+    }; // FS IRAD-1040 2020-26-08
     // Get the modified schema from editorstate and send it to collab server
 
     if (this._connector.updateSchema) {
       // 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
 
@@ -420,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) {
@@ -437,16 +447,17 @@ class Licit extends React.Component {
 
       if (this.state.docID !== nextState.docID) {
         // Collaborative mode changed
-        const collabEditing = nextState.docID != 0;
-
-        const editorState = this._connector.getState();
-
+        const collabEditing = nextState.docID !== '';
+        const editorState = this._editorView.state;
         const setState = this.setState.bind(this);
-        const docID = nextState.docID || 1; // create new connector
+        const docID = nextState.docID || '';
+        const collabServiceURL = nextState.collabServiceURL || '/collaboration-service'; // create new connector
 
         this._connector = collabEditing ? new _CollabConnector.default(editorState, setState, {
-          docID
-        }, this._defaultEditorSchema, this._defaultEditorPlugins) : new _SimpleConnector.default(editorState, setState);
+          docID,
+          collabServiceURL
+        }, this._defaultEditorSchema, this._defaultEditorPlugins, // [FS] IRAD-1578 2021-09-27
+        this.onReady.bind(this)) : new _SimpleConnector.default(editorState, setState);
       }
     }
 
@@ -454,33 +465,29 @@ class Licit extends React.Component {
   }
 
   render() {
-    if (this.state.loaded) {
-      const {
-        editorState,
-        width,
-        height,
-        readOnly,
-        disabled,
-        embedded,
-        runtime
-      } = this.state; // [FS] IRAD-978 2020-06-05
-      // Using 100vw & 100vh (100% viewport) is not ideal for a component which is expected to be a part of a page,
-      // so changing it to 100%  width & height which will occupy the area relative to its parent.
-
-      return /*#__PURE__*/React.createElement(_RichTextEditor.default, {
-        disabled: disabled,
-        editorState: editorState,
-        embedded: embedded,
-        height: height,
-        onChange: this._onChange,
-        onReady: this._onReady,
-        readOnly: readOnly,
-        runtime: runtime,
-        width: width
-      });
-    } else {
-      return /*#__PURE__*/React.createElement("div", null, "Loading Styles...");
-    }
+    const {
+      editorState,
+      width,
+      height,
+      readOnly,
+      disabled,
+      embedded,
+      runtime
+    } = this.state; // [FS] IRAD-978 2020-06-05
+    // Using 100vw & 100vh (100% viewport) is not ideal for a component which is expected to be a part of a page,
+    // so changing it to 100%  width & height which will occupy the area relative to its parent.
+
+    return /*#__PURE__*/React.createElement(_RichTextEditor.default, {
+      disabled: disabled,
+      editorState: editorState,
+      embedded: embedded,
+      height: height,
+      onChange: this._onChange,
+      onReady: this._onReady,
+      readOnly: readOnly,
+      runtime: runtime,
+      width: width
+    });
   }
 
   // [FS] IRAD-1173 2021-02-25
@@ -493,6 +500,79 @@ class Licit extends React.Component {
     }
   }
 
+  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._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());
+    }
+  }
+
+  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.
+   */
+
+
 }
 
 var _default = Licit;