@modusoperandi/licit 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@modusoperandi/licit",
-  "version": "1.1.0",
+  "version": "1.1.2",
+  "license": "MIT",
   "type": "module",
   "subversion": "1",
   "description": "Rich text editor built with React and ProseMirror",
@@ -25,7 +26,6 @@
     "build:licit": "node utils/build_bin.js",
     "ci:bom": "cyclonedx-npm --ignore-npm-errors --short-PURLs --output-format XML --output-file dist/bom.xml",
     "ci:build": "npm run build:clean && npm run build:babel && npm run build:flow && npm run build:css && npm run build:fonts && npm run build:bom && copyfiles --up 1 \"src/**/*.d.ts\" dist/ && copyfiles --up 1 \"src/**/*.css\" dist && copyfiles package.json LICENSE dist",
-    "flow": "flow --show-all-errors",
     "lint:css": "stylelint \"**/*.css\"",
     "lint:js": "eslint \"src/**/*.js\"",
     "lint": "npm run lint:css & npm run lint:js",
@@ -34,6 +34,22 @@
     "build:style-service-docker": "docker build . -f style-service.Dockerfile -t style-service:latest",
     "verify": "npm run lint -- --fix && npm run ci:build && npm run test:coverage && echo 'All Tests Passed!'"
   },
+  "peerDependencies": {
+    "@modusoperandi/licit-ui-commands": "^1.0.8",
+    "prosemirror-collab": "^1.2.2",
+    "prosemirror-tables": "^1.2.5"
+  },
+  "dependencies": {
+    "@modusoperandi/color-picker": "^1.0.4",
+    "browserkeymap": "^2.0.2",
+    "flatted": "^3.1.0",
+    "jquery": "^3.5.1",
+    "react-tooltip": "^5.28.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "smooth-scroll-into-view-if-needed": "^2.0.2",
+    "url": "^0.11.0",
+    "webfontloader": "^1.6.28"
+  },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.3",
@@ -85,7 +101,6 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^9.0.10",
     "identity-obj-proxy": "^3.0.0",
-    "invariant": "^2.2.4",
     "jest": "^29.2.0",
     "jest-environment-jsdom": "^29.3.1",
     "jest-junit": "^16.0.0",
@@ -97,7 +112,7 @@
     "prettier": "^3.2.5",
     "style-loader": "^4.0.0",
     "stylelint": "^16.2.1",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^37.0.0",
     "stylelint-prettier": "^5.0.0",
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.1.2",
@@ -109,32 +124,8 @@
     "webpack-dev-server": "^5.0.2",
     "write-file-webpack-plugin": "^4.5.1"
   },
-  "dependencies": {
-    "@modusoperandi/color-picker": "^1.0.4",
-    "body-parser": "^1.19.0",
-    "browserkeymap": "^2.0.2",
-    "flatted": "^3.1.0",
-    "flow-typed": "^4.0.0",
-    "formidable": "^3.5.1",
-    "invariant": "^2.2.4",
-    "jquery": "^3.5.1",
-    "react-tooltip": "^5.28.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "smooth-scroll-into-view-if-needed": "^2.0.2",
-    "style-loader": "^4.0.0",
-    "url": "^0.11.0",
-    "webfontloader": "^1.6.28"
-  },
-  "peerDependencies": {
-    "@modusoperandi/licit-ui-commands": "^1.0.8",
-    "jquery": "^3.5.1",
-    "prosemirror-collab": "^1.2.2",
-    "prosemirror-tables": "^1.2.5"
-  },
   "overrides": {
-    "libxmljs2": "^1.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "libxmljs2": "^1.0.0"
   },
   "importSort": {
     ".js": {

package/ui/CustomRadioButton.js

@@ -1,8 +1,8 @@
 var _excluded = ["title", "className", "checked", "label", "inline", "name", "onSelect", "disabled"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }

package/ui/LinkTooltip.js

@@ -102,6 +102,7 @@ var LinkTooltip = /*#__PURE__*/function (_React$PureComponent) {
         onRemove = _this$props2.onRemove,
         tocItemPos_ = _this$props2.tocItemPos_,
         selectionId_ = _this$props2.selectionId_;
+      var canEdit = editorView.editable;
       // [FS] IRAD-1013 2020-07-09
       var getLabel = function getLabel() {
         if (tocItemPos_ && selectionId_) {
@@ -131,11 +132,11 @@ var LinkTooltip = /*#__PURE__*/function (_React$PureComponent) {
         target: "new",
         title: label,
         value: label
-      }), /*#__PURE__*/React.createElement(CustomButton, {
+      }), canEdit && /*#__PURE__*/React.createElement(CustomButton, {
         label: "Change",
         onClick: onEdit,
         value: editorView
-      }), /*#__PURE__*/React.createElement(CustomButton, {
+      }), canEdit && /*#__PURE__*/React.createElement(CustomButton, {
         label: "Remove",
         onClick: onRemove,
         value: editorView

package/ui/LinkTooltip.js.flow

@@ -24,6 +24,7 @@ class LinkTooltip extends React.PureComponent<any, any> {
   render(): React.Element<any> {
     const { href, editorView, onEdit, onRemove, tocItemPos_, selectionId_ } =
       this.props;
+      const canEdit = editorView.editable;
     // [FS] IRAD-1013 2020-07-09
     const getLabel = () => {
       if (tocItemPos_ && selectionId_) {
@@ -53,8 +54,16 @@ class LinkTooltip extends React.PureComponent<any, any> {
               title={label}
               value={label}
             />
-            <CustomButton label="Change" onClick={onEdit} value={editorView} />
-            <CustomButton label="Remove" onClick={onRemove} value={editorView} />
+            {canEdit && (
+              <CustomButton label="Change" onClick={onEdit} value={editorView} />
+            )}
+            {canEdit && (
+              <CustomButton
+                label="Remove"
+                onClick={onRemove}
+                value={editorView}
+              />
+            )}
           </div>
         </div>
       </div>

package/ui/LinkURLEditor.js

@@ -1,4 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -63,14 +65,15 @@ var LinkURLEditor = /*#__PURE__*/function (_React$PureComponent) {
       if (!(TocNode !== null && TocNode !== void 0 && (_TocNode$attrs = TocNode.attrs) !== null && _TocNode$attrs !== void 0 && _TocNode$attrs.innerLink)) {
         var nodeUUID = uuid();
         var texthash = '#';
-        var nodeAttrs = TocNode.attrs;
+        var nodeAttrs = _objectSpread({}, TocNode.attrs);
         var nodeconcat_UUID = texthash.concat(nodeUUID);
         nodeAttrs.innerLink = nodeconcat_UUID;
-        tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
+        tr = tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
         textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
       } else {
         textContent = TocNode.attrs.innerLink.concat(INNER_LINK, textContent_);
       }
+      view.dispatch(tr);
       _this.props.close(textContent);
     });
     _defineProperty(_this, "_onKeyDown", function (e) {

package/ui/LinkURLEditor.js.flow

@@ -64,8 +64,7 @@ class LinkURLEditor extends React.PureComponent<any, any> {
   };
 
   render(): React.Element<any> {
-    const { url, TOCselectedNode_, view_, selectionId } =
-      this.state;
+    const { url, TOCselectedNode_, view_, selectionId } = this.state;
 
     const isTOCValid = () => {
       if (!TOCselectedNode_ || TOCselectedNode_.length === 0) {
@@ -73,7 +72,7 @@ class LinkURLEditor extends React.PureComponent<any, any> {
       }
 
       return TOCselectedNode_.some(
-        item => item.node_ && item.node_.textContent.trim() !== ''
+        (item) => item.node_ && item.node_.textContent.trim() !== ''
       );
     };
     const isValid = isTOCValid();
@@ -92,7 +91,7 @@ class LinkURLEditor extends React.PureComponent<any, any> {
 
     return (
       <div className="czi-image-url-editor">
-        <div className="czi-form" style={{padding:'10px', display:'flex'}}>
+        <div className="czi-form" style={{ padding: '10px', display: 'flex' }}>
           <div className="tab">
             <button
               className="tablinks"
@@ -138,7 +137,7 @@ class LinkURLEditor extends React.PureComponent<any, any> {
             </form>
           </div>
           {!isValid ? (
-            <div className="tabcontent" id="innerlink" >
+            <div className="tabcontent" id="innerlink">
               <p>No TOC styles</p>
               <div className="czi-form-buttons">
                 <CustomButton label="Cancel" onClick={this._cancel} />
@@ -151,13 +150,19 @@ class LinkURLEditor extends React.PureComponent<any, any> {
                 <br></br>
                 <select
                   defaultValue={
-                    TOCselectedNode_.some(res => res.node_.textContent === url) ? url : null
+                    TOCselectedNode_.some(
+                      (res) => res.node_.textContent === url
+                    )
+                      ? url
+                      : null
                   }
                   id="toc"
                   name="toccontents"
                   size="3"
                 >
-                  {TOCselectedNode_?.filter(res => res.node_.textContent.trim() !== '').map((res, index) => (
+                  {TOCselectedNode_?.filter(
+                    (res) => res.node_.textContent.trim() !== ''
+                  ).map((res, index) => (
                     <option
                       data-tooltip-content={res.node_.textContent}
                       data-tooltip-id="select-toc-tooltip"
@@ -193,20 +198,21 @@ class LinkURLEditor extends React.PureComponent<any, any> {
   }
 
   handleOptionChange = (textContent_, tocNodePosition_, view: EditorView) => {
-    const tr = view.state.tr;
+    let tr = view.state.tr;
     const TocNode = view.state.doc.nodeAt(tocNodePosition_);
     let textContent;
     if (!TocNode?.attrs?.innerLink) {
       const nodeUUID = uuid();
       const texthash = '#';
-      const nodeAttrs = TocNode.attrs;
+      const nodeAttrs = { ...TocNode.attrs };
       const nodeconcat_UUID = texthash.concat(nodeUUID);
       nodeAttrs.innerLink = nodeconcat_UUID;
-      tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
+      tr = tr.setNodeMarkup(tocNodePosition_, undefined, nodeAttrs);
       textContent = nodeconcat_UUID.concat(INNER_LINK, textContent_);
     } else {
       textContent = TocNode.attrs.innerLink.concat(INNER_LINK, textContent_);
     }
+    view.dispatch(tr);
     this.props.close(textContent);
   };
 

package/ui/czi-editor.css

@@ -126,6 +126,9 @@
   line-height: var(--czi-content-line-height);
   margin: 0;
 }
+.prosemirror-editor-wrapper.readOnly a {
+  pointer-events: none; /* Disable interaction */
+}
 
 .ProseMirror a:link,
 .ProseMirror a:visited,