@modusoperandi/licit 0.14.3 → 0.14.14

package/dist/ui/TableCellMenu.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorView = require("prosemirror-view");
+var _prosemirrorModel = require("prosemirror-model");
 var React = _interopRequireWildcard(require("react"));
 var _CommandMenuButton = _interopRequireDefault(require("./CommandMenuButton"));
 var _EditorToolbarConfig = require("./EditorToolbarConfig");
@@ -26,11 +27,20 @@ class TableCellMenu extends React.PureComponent {
   render() {
     const {
       editorState,
-      editorView
+      editorView,
+      pluginView,
+      actionNode
     } = this.props;
+    let cmdGrps = null;
+    if (pluginView.getMenu) {
+      cmdGrps = pluginView.getMenu(editorState, actionNode, _EditorToolbarConfig.TABLE_COMMANDS_GROUP);
+    }
+    if (!cmdGrps) {
+      cmdGrps = _EditorToolbarConfig.TABLE_COMMANDS_GROUP;
+    }
     return /*#__PURE__*/React.createElement(_CommandMenuButton.default, {
       className: "czi-table-cell-menu",
-      commandGroups: _EditorToolbarConfig.TABLE_COMMANDS_GROUP,
+      commandGroups: cmdGrps,
       dispatch: editorView.dispatch,
       editorState: editorState,
       editorView: editorView,

package/dist/ui/TableCellMenu.js.flow

@@ -1,6 +1,7 @@
 // @flow
-import { EditorState } from 'prosemirror-state';
+import { EditorState, PluginView } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
 import * as React from 'react';
 
 import CommandMenuButton from './CommandMenuButton';
@@ -12,6 +13,8 @@ import './czi-table-cell-menu.css';
 type Props = {
   editorState: EditorState,
   editorView: EditorView,
+  pluginView: PluginView,
+  actionNode: Node,
 };
 
 class TableCellMenu extends React.PureComponent<any, any> {
@@ -20,11 +23,21 @@ class TableCellMenu extends React.PureComponent<any, any> {
   props: Props;
 
   render(): React.Element<any> {
-    const { editorState, editorView } = this.props;
+    const { editorState, editorView, pluginView, actionNode } = this.props;
+    let cmdGrps = null;
+
+    if (pluginView.getMenu) {
+      cmdGrps = pluginView.getMenu(editorState, actionNode, TABLE_COMMANDS_GROUP);
+    }
+
+    if (!cmdGrps) {
+      cmdGrps = TABLE_COMMANDS_GROUP;
+    }
+
     return (
       <CommandMenuButton
         className="czi-table-cell-menu"
-        commandGroups={TABLE_COMMANDS_GROUP}
+        commandGroups={cmdGrps}
         dispatch={editorView.dispatch}
         editorState={editorState}
         editorView={editorView}

package/dist/ui/isElementFullyVisible.js

@@ -12,8 +12,10 @@ function isElementFullyVisible(el) {
     w,
     h
   } = (0, _licitUiCommands.fromHTMlElement)(el);
+  // to handle the rounded border scenario.
+  const factor = '10px' === el.style.borderRadius ? 3 : 1;
   // Only checks the top-left point.
-  const nwEl = w && h ? el.ownerDocument.elementFromPoint(x + 1, y + 1) : null;
+  const nwEl = w && h ? el.ownerDocument.elementFromPoint(x + factor, y + factor) : null;
   if (!nwEl) {
     return false;
   }

package/dist/ui/isElementFullyVisible.js.flow

@@ -4,8 +4,11 @@ import { fromHTMlElement } from '@modusoperandi/licit-ui-commands';
 
 export default function isElementFullyVisible(el: HTMLElement): boolean {
   const { x, y, w, h } = fromHTMlElement(el);
+  // to handle the rounded border scenario.
+  const factor = '10px' === el.style.borderRadius ? 3 : 1;
   // Only checks the top-left point.
-  const nwEl = w && h ? el.ownerDocument.elementFromPoint(x + 1, y + 1) : null;
+  const nwEl =
+    w && h ? el.ownerDocument.elementFromPoint(x + factor, y + factor) : null;
 
   if (!nwEl) {
     return false;

package/licit/client/CustomLicitRuntime.js

@@ -3,7 +3,7 @@
 // This implements the interface of `EditorRuntime`.
 // To  run  editor directly:
 import type { ImageLike } from '../../src/Types';
-import { POST, req } from '../../src/client/http';
+import { POST } from '../../src/client/http';
 
 // When use it in a componet:
 
@@ -12,42 +12,201 @@ import { POST, req } from '../../src/client/http';
  import {POST } from '@modusoperandi/licit';
  */
 
+// const GLOSSARY_URI = 'http://greathints.com:3003';
+
+type Glossary = {
+  id: string,
+  term: string,
+  description: string,
+};
+
 class CustomLicitRuntime {
+  getAcronyms(abbreviation: string): Promise<Glossary[]> {
+    return new Promise((resolve, _reject) => {
+      resolve([
+        {
+          id: '1',
+          term: 'ASAP',
+          description:
+            'ASAP is an acronym for as soon as possible. This common phrase means you will do something when you have the chance.',
+        },
+        {
+          id: '2',
+          term: 'IMAX',
+          description:
+            'The IMAX in IMAX Theater actually stands for Image Maximum. This is a large-format movie theater.',
+        },
+        {
+          id: '3',
+          term: 'PIN',
+          description:
+            'When in all-caps, the word PIN stands for �personal identification number.� This is a secret number you create to access private documents, files and account information.',
+        },
+        {
+          id: '4',
+          term: 'RADAR',
+          description:
+            'RADAR stands for �radio detection and ranging.� This technology is rarely called anything other than its acronym.',
+        },
+        {
+          id: '5',
+          term: 'TASER',
+          description:
+            'The electrical weapon actually is an acronym for �Thomas A. Swift�s Electric Rifle.�',
+        },
+        {
+          id: '6',
+          term: 'SCUBA',
+          description:
+            'This piece of diving equipment is an acronym for �self-contained underwater breathing apparatus.�',
+        },
+        {
+          id: '7',
+          term: 'NASA',
+          description:
+            'NASA stands for �National Aeronautics and Space Administration,� and this organization once took a man to the moon.',
+        },
+        {
+          id: '8',
+          term: 'NAFTA',
+          description:
+            'NAFTA is the acronym or the �North American Free Trade Agreement.� This organization governs trade among North American countries.',
+        },
+        {
+          id: '9',
+          term: 'HIPAA',
+          description:
+            'The �Health Insurance Portability Accountability Act� is responsible for keeping medical information private.',
+        },
+        {
+          id: '10',
+          term: 'DARE',
+          description:
+            'Most people no longer remember that DARE stands for �Drug Abuse Resistance Education�',
+        },
+        { id: 11, term: 'AEF', description: 'air expeditionary force' },
+        { id: 12, term: 'AFDP', description: 'Air Force Doctrine Publication' },
+        {
+          id: 13,
+          term: 'AvFID',
+          description: 'aviation foreign internal defense',
+        },
+        { id: 14, term: 'BSZ', description: 'base security zone' },
+        { id: 15, term: 'CS', description: 'combat support' },
+        {
+          id: 16,
+          term: 'COMAFFOR',
+          description: 'commander, Air Force forces',
+        },
+        {
+          id: 17,
+          term: 'COMAFSOF',
+          description: 'commander, Air Force special operations forces',
+        },
+        { id: 18, term: 'CoL', description: 'continuum of learning' },
+        {
+          id: 19,
+          term: 'CTO',
+          description: 'counterthreat operations; cyber tasking order',
+        },
+        { id: 20, term: 'DFC', description: 'defense force commander' },
+        { id: 21, term: 'DCS', description: 'defensive counterspace' },
+        {
+          id: 22,
+          term: 'DIRSPACEFOR',
+          description: 'director of space forces',
+        },
+        {
+          id: 23,
+          term: 'EBAO',
+          description: 'effects-based approach to operations',
+        },
+        {
+          id: 24,
+          term: 'EWIR',
+          description: 'electronic warfare integrated reprogramming',
+        },
+        { id: 25, term: 'FPI', description: 'force protection intelligence' },
+        {
+          id: 26,
+          term: 'GAMSS',
+          description: 'Global Air Mobility Support System',
+        },
+        { id: 27, term: 'JPPA', description: 'joint planning process for air' },
+        { id: 28, term: 'OA', description: 'operational-level assessment' },
+        { id: 29, term: 'OCS', description: 'offensive counterspace' },
+        { id: 30, term: 'OWS', description: 'operational weather squadron' },
+      ]);
+    });
+  }
+
+  getGlossary(term: string): Promise<Glossary[]> {
+    return new Promise((resolve, _reject) => {
+      resolve([
+        { id: '1', term: 'IAS', description: 'Indian Administrative Service' },
+        { id: '2', term: 'IIT', description: 'Indian Institute of Technology' },
+        { id: '3', term: 'CAS', description: 'Close Air Support' },
+        { id: '4', term: 'CAS', description: 'Continuous Aerial Surveillance' },
+        {
+          id: '5',
+          term: 'Analysis of Variance (ANOVA)',
+          description:
+            'A statistical tool used to analyze the differences among means.',
+        },
+        {
+          id: '6',
+          term: 'Confidence Interval (CI)',
+          description:
+            'The mean of an estimate 4/- the variation in the estimate.',
+        },
+        {
+          id: '7',
+          term: 'Comma Separated Value (CSV)',
+          description:
+            'A text file that uses a comma (,) to separate each value inputted.',
+        },
+        {
+          id: '8',
+          term: 'Mean Squared Error (MSE)',
+          description:
+            'A measurement of how close a fitted line is to plotted data points.',
+        },
+        {
+          id: '9',
+          term: 'Odds Ratio (OR)',
+          description:
+            'A quantification of the strength of association between two events.',
+        },
+        {
+          id: '10',
+          term: 'Process Behavior Analysis (PBA)',
+          description: 'Written analysis of a Process Behavior Chart (PBC.)',
+        },
+        {
+          id: '11',
+          term: 'Quality Assurance (QA)',
+          description:
+            'Systematic monitoring and evaluation to ensure standards are met.',
+        },
+        {
+          id: '12',
+          term: 'Root Mean Square (RMC)',
+          description:
+            'The square root of the mean square, or the quadratic mean.',
+        },
+      ]);
+    });
+  }
+
   // Image Proxy
   canProxyImageSrc(): boolean {
     return false;
   }
 
-  getProxyImageSrc(id: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const token =
-        'Bearer <access_token>';
-      const endPoint = 'https://moviacloud.modusoperandi.com/movia/content';
-
-      (async () => {
-        // image that will be fetched and appended
-        const imageURL = endPoint + id;
-
-        // Fetch remote URL, getting contents as binary blob
-        const vidBlob = await (
-          await fetch(imageURL, { headers: { Authorization: token } })
-        ).blob();
-
-        const reader = new window.FileReader();
-        reader.addEventListener('error', () =>
-          reject(new Error('Failed to load image'))
-        );
-        reader.addEventListener('load', () =>
-          // Convert to ImageLike. Width and Height are unknown, and would
-          // require rendering into a hidden canvas to determine
-          resolve({
-            alt: vidBlob.name,
-            src: reader.result
-          })
-        );
-        reader.readAsDataURL(vidBlob);
-      })();
-    });
+  getProxyImageSrc(src: string): string {
+    // This simulate a fake proxy.
+    const suffix = 'proxied=1';
+    return src.indexOf('?') === -1 ? `${src}?${suffix}` : `${src}&${suffix}`;
   }
 
   // Image Upload
@@ -94,33 +253,8 @@ class CustomLicitRuntime {
   }
 
   getProxyVideoSrc(src: string): string {
-    // This simulate a fake proxy.
-    const suffix = 'proxied=1';
-    return src.indexOf('?') === -1 ? `${src}?${suffix}` : `${src}&${suffix}`;
-  }
-
-  getVideoSrc(id: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const token =
-        'Bearer <access_token>';
-      const endPoint = 'https://moviacloud.modusoperandi.com/movia/content';
-
-      (async () => {
-        // Video that will be fetched and appended
-        const remoteVidUrl = endPoint + '/id/' + id;
-
-        // Fetch remote URL, getting contents as binary blob
-        const vidBlob = await (
-          await fetch(remoteVidUrl, { headers: { Authorization: token } })
-        ).blob();
-
-        const videoEle = document.createElement('video');
-        videoEle.src = URL.createObjectURL(vidBlob);
-        videoEle.addEventListener('loadedmetadata', function () {
-          resolve(videoEle.src);
-        });
-      })();
-    });
+    // eslint-disable-next-line
+    return getProxyImageSrc(src);
   }
 
   // Video Upload
@@ -128,51 +262,36 @@ class CustomLicitRuntime {
     return true;
   }
 
-  uploadVideo(blob: Object, id: string): Promise<ImageLike> {
+  uploadVideo(blob: Object): Promise<ImageLike> {
     let img: ImageLike;
+    // Note: While looking at the uploadImage() function, it is found that a promise is resolved blindly after 3 seconds. Is it a
+    // requirement? If not, then I think it causes two issues, 1. Even if an image upload finishes in 700ms, it will take 3s for
+    // resolving the promise. 2. If the image upload takes more than 3s, then the promise will be incorrectly resolved before
+    // completing the upload.
+    // The following structure may be good to solve the issue.
     return new Promise((resolve, reject) => {
       // Use uploaded image URL.
-      const formData = new FormData();
-      formData.append('label', blob.name);
-      formData.append('file', blob);
-      const token =
-        'Bearer <access_token>';
-      const endPoint = 'https://moviacloud.modusoperandi.com/movia/content';
-      req({
-        url: endPoint,
-        method: 'POST',
-        body: formData,
-        headers: {
-          Authorization: token,
-        },
-      }).then((data) => {
-        const resp = JSON.parse(data);
-        const id = resp.entity.id.substring(
-          resp.entity.id.lastIndexOf('/') + 1
-        );
-
-        (async () => {
-          // Video that will be fetched and appended
-          const remoteVidUrl = endPoint + '/id/' + id;
-
-          // Fetch remote URL, getting contents as binary blob
-          const vidBlob = await (
-            await fetch(remoteVidUrl, { headers: { Authorization: token } })
-          ).blob();
-
-          const videoEle = document.createElement('video');
-          videoEle.src = URL.createObjectURL(vidBlob);
-          videoEle.addEventListener('loadedmetadata', function () {
-            img = {
-              id: id,
-              width: this.videoWidth,
-              height: this.videoHeight,
-              src: videoEle.src,
-            };
-            resolve(img);
-          });
-        })();
-      });
+      const url =
+        window.location.protocol +
+        '//' +
+        window.location.hostname +
+        ':3004/saveimage?fn=' +
+        blob.name;
+      POST(url, blob, 'application/octet-stream').then(
+        (data) => {
+          img = JSON.parse(data);
+          resolve(img);
+        },
+        (err) => {
+          img = {
+            id: '',
+            width: 0,
+            height: 0,
+            src: '',
+          };
+          reject(img);
+        }
+      );
     });
   }
 }

package/licit/client/index.js

@@ -335,7 +335,7 @@ function main(): void {
   // To pass prosemirror plugins to editor pass it to plugins property which accept array of plugin object.
   // null means no custom plugins to pass
   // the plugin object must contain a method getEffectiveSchema() which accept schema and returns schema.
-  const plugins = null;
+  const plugins = [];
   const runtime = new CustomLicitRuntime();
   ReactDOM.render(
     <Licit
@@ -343,7 +343,7 @@ function main(): void {
       data={docJSON}
       dataType={DataType.JSON}
       debug={true}
-      docID={'0000-0000-0000-0000'}
+      docID={''}
       embedded={false}
       height={'100vh'}
       onChange={onChangeCB}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modusoperandi/licit",
-  "version": "0.14.3",
+  "version": "0.14.14",
   "subversion": "1",
   "description": "Rich text editor built with React and ProseMirror",
   "main": "dist/index.js",
@@ -56,7 +56,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "3.6.0",
+    "css-loader": "6.7.3",
     "enzyme": "^3.11.0",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
@@ -70,12 +70,12 @@
     "flow-webpack-plugin": "1.2.0",
     "html-loader": "1.1.0",
     "html-webpack-inline-source-plugin": "1.0.0-beta.2",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.2.0",
     "jest-environment-jsdom": "^29.3.1",
-    "jest-prosemirror": "^2.0.6",
+    "jest-prosemirror": "^1.0.3",
     "jest-sonar-reporter": "^2.0.0",
     "lint-staged": "^13.0.3",
     "mkdirp": "^1.0.4",
@@ -105,9 +105,7 @@
     "node-mathquill": "0.10.2",
     "prosemirror-collab": "1.2.2",
     "prosemirror-dev-tools": "3.0.2",
-    "prosemirror-model": "~1.16.0",
     "prosemirror-tables": "1.2.5",
-    "prosemirror-view": "1.27.0",
     "query-string": "6.13.1",
     "resize-observer-polyfill": "1.5.1",
     "smooth-scroll-into-view-if-needed": "1.1.28",

package/src/TableCellMenuPlugin.js

@@ -13,6 +13,7 @@ import { createPopUp } from '@modusoperandi/licit-ui-commands';
 import isElementFullyVisible from './ui/isElementFullyVisible';
 
 import '@modusoperandi/licit-ui-commands/dist/ui/czi-pop-up.css';
+import { CellSelection } from 'prosemirror-tables';
 
 class TableCellTooltipView {
   _cellElement: null;
@@ -41,9 +42,15 @@ class TableCellTooltipView {
 
     let cellEl = domFound.node;
     const popUp = this._popUp;
+    let actionNode = null;
+    if (result && state.selection instanceof CellSelection) {
+      actionNode = state.selection.$anchorCell.node(-1);
+    }
     const viewPops = {
       editorState: state,
       editorView: view,
+      pluginView: this,
+      actionNode,
     };
 
     if (cellEl && !isElementFullyVisible(cellEl)) {

package/src/TableResizePlugin.js

@@ -595,9 +595,10 @@ export default class TableResizePlugin extends Plugin {
       key: PLUGIN_KEY,
       state: {
         init(_: any, state: EditorState): ResizeState {
-          this.spec.props.nodeViews[
-            tableNodeTypes(state.schema).table.name
-          ] = createTableView;
+          if (!this.spec.props.nodeViews['table']) {
+            this.spec.props.nodeViews[tableNodeTypes(state.schema).table.name] =
+              createTableView;
+          }
           return new ResizeState(-1, null);
         },
         apply(tr: Transform, prev: EditorState): EditorState {

package/src/ui/TableCellMenu.js

@@ -1,6 +1,7 @@
 // @flow
-import { EditorState } from 'prosemirror-state';
+import { EditorState, PluginView } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
 import * as React from 'react';
 
 import CommandMenuButton from './CommandMenuButton';
@@ -12,6 +13,8 @@ import './czi-table-cell-menu.css';
 type Props = {
   editorState: EditorState,
   editorView: EditorView,
+  pluginView: PluginView,
+  actionNode: Node,
 };
 
 class TableCellMenu extends React.PureComponent<any, any> {
@@ -20,11 +23,21 @@ class TableCellMenu extends React.PureComponent<any, any> {
   props: Props;
 
   render(): React.Element<any> {
-    const { editorState, editorView } = this.props;
+    const { editorState, editorView, pluginView, actionNode } = this.props;
+    let cmdGrps = null;
+
+    if (pluginView.getMenu) {
+      cmdGrps = pluginView.getMenu(editorState, actionNode, TABLE_COMMANDS_GROUP);
+    }
+
+    if (!cmdGrps) {
+      cmdGrps = TABLE_COMMANDS_GROUP;
+    }
+
     return (
       <CommandMenuButton
         className="czi-table-cell-menu"
-        commandGroups={TABLE_COMMANDS_GROUP}
+        commandGroups={cmdGrps}
         dispatch={editorView.dispatch}
         editorState={editorState}
         editorView={editorView}

package/src/ui/isElementFullyVisible.js

@@ -4,8 +4,11 @@ import { fromHTMlElement } from '@modusoperandi/licit-ui-commands';
 
 export default function isElementFullyVisible(el: HTMLElement): boolean {
   const { x, y, w, h } = fromHTMlElement(el);
+  // to handle the rounded border scenario.
+  const factor = '10px' === el.style.borderRadius ? 3 : 1;
   // Only checks the top-left point.
-  const nwEl = w && h ? el.ownerDocument.elementFromPoint(x + 1, y + 1) : null;
+  const nwEl =
+    w && h ? el.ownerDocument.elementFromPoint(x + factor, y + factor) : null;
 
   if (!nwEl) {
     return false;

package/webpack.config.js

@@ -60,15 +60,7 @@ var options = {
       },
       {
         test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
+        type: 'asset/resource',
       },
       {
         test: /\.css$/,
@@ -93,10 +85,8 @@ var options = {
       // jQuery (for Mathquill)
       'window.jQuery': 'jquery',
     }),
-    // type checker
-    // ...(isDev
-    //   ? [new FlowWebpackPlugin({ flowArgs: ['--show-all-errors'] })]
-    //   : []),
+    // type checker 
+    ... (isDev ? [new FlowWebpackPlugin({flowArgs: ['--show-all-errors']})] : []),
     // clean the web folder
     new CleanWebpackPlugin(),
     // expose and write the allowed env vars on the compiled bundle