@modusoperandi/licit 0.13.3 → 0.13.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modusoperandi/licit",
-  "version": "0.13.3",
+  "version": "0.13.20",
   "subversion": "1",
   "description": "Rich text editor built with React and ProseMirror",
   "main": "dist/index.js",
@@ -9,11 +9,8 @@
     "type": "git",
     "url": "git+https://github.com/MO-Movia/licit.git"
   },
-  "bundleDependencies": [
-    "prosemirror-utils"
-  ],
   "scripts": {
-    "test": "jest",
+    "test": "jest --coverage",
     "build:bom": "cyclonedx-bom -o dist/bom.xml",
     "build:clean": "rm -rf dist/ && rm -f modusoperandi-licit-*.*.*.tgz",
     "build:css": "cp src/ui/*.css dist/ui && cp src/ui/mathquill-editor/*.css dist/ui/mathquill-editor && cp src/client/*.css dist/client && cp src/*.css dist",
@@ -92,9 +89,8 @@
     "write-file-webpack-plugin": "4.5.1"
   },
   "dependencies": {
-    "@modusoperandi/licit-comment": "^0.0.2-1",
-    "@modusoperandi/licit-doc-attrs-step": "^0.1.2",
-    "@modusoperandi/licit-ui-commands": "^0.1.5",
+    "@modusoperandi/licit-doc-attrs-step": "^0.1.3",
+    "@modusoperandi/licit-ui-commands": "^0.1.6",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "body-parser": "^1.19.0",
     "browserkeymap": "2.0.2",
@@ -123,14 +119,13 @@
     "prosemirror-state": "^1.3.4",
     "prosemirror-tables": "^1.1.1",
     "prosemirror-transform": "^1.2.9",
-    "prosemirror-utils": "file:prosemirror-utils-1.0.0-0.tgz",
+    "prosemirror-utils": "^1.0.0-0",
     "prosemirror-view": "^1.17.3",
     "query-string": "6.13.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "resize-observer-polyfill": "1.5.1",
     "smooth-scroll-into-view-if-needed": "1.1.28",
-    "stable": "0.1.8",
     "style-loader": "^1.2.1",
     "uuid": "8.2.0",
     "webfontloader": "1.6.28"

package/src/ListItemNodeSpec.js

@@ -29,7 +29,7 @@ const ListItemNodeSpec: NodeSpec = {
   // This spec does not support nested lists (e.g. `'paragraph block*'`)
   // as content because of the complexity of dealing with indentation
   // (context: https://github.com/ProseMirror/prosemirror/issues/92).
-  content: 'paragraph',
+  content: '(bullet_list|paragraph)+',
 
   parseDOM: [{ tag: 'li', getAttrs }],
 

package/src/client/CollabConnector.js

@@ -14,7 +14,7 @@ type IdStrict = string;
 class CollabConnector extends SimpleConnector {
   _clientID: string;
   _connected: boolean;
-  _connection: any;
+  _connection: EditorConnection;
   _docID: IdStrict;
   _stepKeys: Object;
 
@@ -79,7 +79,11 @@ class CollabConnector extends SimpleConnector {
   // FS IRAD-1040 2020-09-02
   // Send the modified schema to server
   updateSchema = (schema: Schema, data: any) => {
-    this._connection.updateSchema(schema, data);
+    this._connection.updateSchema(schema, data, this._dataDefined);
+  };
+
+  updateContent = (data: any) => {
+    this._connection.start(data, this._dataDefined);
   };
 }
 

package/src/client/EditorConnection.js

@@ -10,7 +10,7 @@ import { Plugin, EditorState } from 'prosemirror-state';
 import { Step } from 'prosemirror-transform';
 import { EditorView } from 'prosemirror-view';
 import uuid from '../uuid';
-import { GET, POST } from './http';
+import { GET, POST, PUT } from './http';
 // [FS] IRAD-1040 2020-09-02
 import { Schema } from 'prosemirror-model';
 import { stringify } from 'flatted';
@@ -144,8 +144,13 @@ class EditorConnection {
   }
 
   // Load the document from the server and start up
-  start(): void {
-    this.run(GET(this.url)).then(
+  start(input: any, dataDefined: boolean): void {
+    const query = '?dataDefined=' + dataDefined;
+    this.run(
+      input
+        ? PUT(this.url + query, JSON.stringify(input), 'application/json')
+        : GET(this.url, 'application/json')
+    ).then(
       (data) => {
         data = JSON.parse(data);
         this.report.success();
@@ -253,7 +258,7 @@ class EditorConnection {
 
   // [FS] IRAD-1040 2020-09-02
   // Send the modified schema to server
-  updateSchema(schema: Schema, input: any) {
+  updateSchema(schema: Schema, input: any, dataDefined: boolean) {
     // to avoid cyclic reference error, use flatted string.
     const schemaFlatted = stringify(schema);
     this.run(POST(this.url + '/schema/', schemaFlatted, 'text/plain')).then(
@@ -261,7 +266,7 @@ class EditorConnection {
         console.log("collab server's schema updated");
         // [FS] IRAD-1040 2020-09-08
         this.schema = schema;
-        this.start(input);
+        this.start(input, dataDefined);
       },
       (err) => {
         this.report.failure(err);

package/src/client/Licit.js

@@ -1,6 +1,6 @@
 // @flow
 import { EditorState, TextSelection, Plugin } from 'prosemirror-state';
-import { Node } from 'prosemirror-model';
+import { Node, Schema } from 'prosemirror-model';
 import { Transform } from 'prosemirror-transform';
 import { EditorView } from 'prosemirror-view';
 import * as React from 'react';
@@ -14,18 +14,23 @@ import SimpleConnector from './SimpleConnector';
 import CollabConnector from './CollabConnector';
 import { EMPTY_DOC_JSON } from '../createEmptyEditorState';
 import type { EditorRuntime } from '../Types';
-import { createPopUp } from '@modusoperandi/licit-ui-commands';
-import { atViewportCenter } from '@modusoperandi/licit-ui-commands';
+import {
+  createPopUp,
+  atViewportCenter,
+} from '@modusoperandi/licit-ui-commands';
 import AlertInfo from '../ui/AlertInfo';
 import { SetDocAttrStep } from '@modusoperandi/licit-doc-attrs-step';
 import './licit.css';
 import DefaultEditorPlugins from '../buildEditorPlugins';
-import { Schema } from 'prosemirror-model';
 import EditorMarks from '../EditorMarks';
 import EditorNodes from '../EditorNodes';
+import convertFromHTML from '../convertFromHTML';
+
+export const DataType = Object.freeze({
+  JSON: Symbol('json'),
+  HTML: Symbol('html'),
+});
 
-const ATTR_OBJID = 'objectId';
-const ATTR_OBJMETADATA = 'objectMetaData';
 /**
  * LICIT properties:
  *  docID {string} [] Collaborative Doument ID
@@ -38,14 +43,15 @@ const ATTR_OBJMETADATA = 'objectMetaData';
  *      @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.
+ *  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.
  */
 class Licit extends React.Component<any, any> {
   _runtime: EditorRuntime;
-  _connector: any;
+  _connector: SimpleConnector;
   _clientID: string;
   _editorView: EditorView; // This will be handy in updating document's content.
   _skipSCU: boolean; // Flag to decide whether to skip shouldComponentUpdate
@@ -93,13 +99,17 @@ class Licit extends React.Component<any, any> {
     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
     // Handle Image Upload from Angular App
     const runtime = props.runtime || null;
     const plugins = props.plugins || null;
+    // This flag decides whether DataType.HTML check is needed when
+    // changing document. If it forcefully done, it is not needed, otherwise needed.
+    this.skipDataTypeCheck = false;
 
     this._defaultEditorSchema = new Schema({
       nodes: EditorNodes,
@@ -109,25 +119,8 @@ class Licit extends React.Component<any, any> {
       this._defaultEditorSchema
     ).get();
 
-    let editorState = convertFromJSON(
-      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 = convertFromJSON(
-        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
@@ -145,6 +138,8 @@ class Licit extends React.Component<any, any> {
         )
       : new SimpleConnector(editorState, setState);
 
+    this._connector._dataDefined = !!props.data;
+
     // FS IRAD-989 2020-18-06
     // updating properties should automatically render the changes
 
@@ -162,6 +157,7 @@ class Licit extends React.Component<any, any> {
       disabled,
       embedded,
       runtime,
+      dataType,
     };
 
     // FS IRAD-1040 2020-26-08
@@ -172,6 +168,66 @@ class Licit extends React.Component<any, any> {
     }
   }
 
+  initEditorState(plugins: Array<Plugin>, dataType: DataType, data: any) {
+    let editorState = null;
+    const effectivePlugins = this.getEffectivePlugins(
+      this._defaultEditorSchema,
+      this._defaultEditorPlugins,
+      plugins
+    );
+    if (DataType.JSON === dataType) {
+      editorState = convertFromJSON(
+        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 = convertFromJSON(
+          EMPTY_DOC_JSON,
+          null,
+          effectivePlugins.schema,
+          effectivePlugins.plugins
+        );
+        this.showAlert();
+      }
+    } else {
+      editorState = convertFromHTML(
+        data,
+        effectivePlugins.schema,
+        effectivePlugins.plugins
+      );
+    }
+
+    return editorState;
+  }
+
+  getEffectivePlugins(
+    schema: Schema,
+    defaultPlugins: Array<Plugin>,
+    plugins: Array<Plugin>
+  ): { plugins: Array<Plugin>, schema: Schema } {
+    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
   onReady(state: EditorState) {
     const collabEditing = this.state.docID !== '';
@@ -263,13 +319,33 @@ class Licit extends React.Component<any, any> {
     return node.attrs && node.attrs[attrName];
   }
 
-  setContent = (content: any = {}): void => {
+  getDocument(content: any, editorState: EditorState, dataType: DataType) {
+    let document = null;
+    const { schema } = editorState;
+
+    if (DataType.JSON === dataType || this.skipDataTypeCheck) {
+      document = schema.nodeFromJSON(content ? content : EMPTY_DOC_JSON);
+    } else {
+      const tempEState = convertFromHTML(
+        content ? content : '',
+        schema,
+        editorState.plugins
+      );
+      document = tempEState.doc;
+    }
+
+    return document;
+  }
+
+  setContent = (content: any = {}, dataType: DataType): void => {
+    this.skipDataTypeCheck = false;
     // [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 } = editorState;
+    const { doc } = editorState;
     let { tr } = editorState;
-    const document = schema.nodeFromJSON(content ? content : EMPTY_DOC_JSON);
+    const document = this.getDocument(content, editorState, dataType);
+    this.skipDataTypeCheck = true;
 
     // [FS] IRAD-1593 2021-10-12
     // Reset lastKeyCode since the content is set dynamically and so lastKeyCode is invalid now.
@@ -280,20 +356,16 @@ class Licit extends React.Component<any, any> {
     tr = tr.setSelection(selection).replaceSelectionWith(document, false);
     // [FS] IRAD-1092 2020-12-03
     // set the value for object metadata  and objectId
-    tr = this.isNodeHasAttribute(document, ATTR_OBJMETADATA)
-      ? tr.step(
-          new SetDocAttrStep(ATTR_OBJMETADATA, document.attrs.objectMetaData)
-        )
-      : tr;
-    tr = this.isNodeHasAttribute(document, ATTR_OBJID)
-      ? tr.step(new SetDocAttrStep(ATTR_OBJID, document.attrs.objectId))
-      : tr;
+    // Should update all document attributes.
+    Object.keys(document.attrs).forEach((attr) => {
+      tr = tr.step(new SetDocAttrStep(attr, document.attrs[attr]));
+    });
 
     this._skipSCU = true;
     this._editorView.dispatch(tr);
   };
 
-  hasDataChanged(nextData: any) {
+  hasDataChanged(nextData: any, nextDataType: DataType) {
     let dataChanged = false;
 
     // [FS] IRAD-1571 2021-09-27
@@ -302,21 +374,19 @@ class Licit extends React.Component<any, any> {
     // Do a proper circular JSON comparison.
     if (stringify(this.state.data) !== stringify(nextData)) {
       const editorState = this._editorView.state;
-      const nextDoc = editorState.schema.nodeFromJSON(
-        nextData ? nextData : EMPTY_DOC_JSON
-      );
+      const nextDoc = this.getDocument(nextData, editorState, nextDataType);
       dataChanged = !nextDoc.eq(editorState.doc);
     }
 
     return dataChanged;
   }
 
-  changeContent(data: any) {
-    if (this.hasDataChanged(data)) {
+  changeContent(data: any, dataType: DataType) {
+    if (this.hasDataChanged(data, dataType)) {
       // 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);
+      setTimeout(this.setContent.bind(this, data, dataType), 1);
     }
   }
 
@@ -325,13 +395,15 @@ class Licit extends React.Component<any, any> {
     if (!this._skipSCU) {
       this._skipSCU = false;
 
-      this.changeContent(nextState.data);
+      this.changeContent(nextState.data, nextState.dataType);
 
       if (this.state.docID !== nextState.docID) {
         setTimeout(this.setDocID.bind(this, nextState), 1);
       }
     }
 
+    this.skipDataTypeCheck = true;
+
     return true;
   }
 
@@ -582,6 +654,7 @@ class Licit extends React.Component<any, any> {
       delete propsCopy.data;
       this.setState(propsCopy);
     }
+    this.skipDataTypeCheck = false;
     // Need to go through shouldComponentUpdate lifecycle here, when updated from outside,
     // so that content is modified gracefully using transaction so that undo/redo works too.
     this._skipSCU = false;

package/src/client/Licit.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import Licit from './Licit';
+import Licit, { DataType } from './Licit';
 import RichTextEditor from '../ui/RichTextEditor';
 import { noop } from '@modusoperandi/licit-ui-commands';
 
@@ -34,7 +34,11 @@ describe('<Licit />', () => {
     state: {
       doc: {
         content: { size: 10 },
-        resolve: () => ({ min: () => 0, max: () => 10 }),
+        resolve: () => ({
+          min: () => 0,
+          max: () => 10,
+          parent: { inlineContent: true },
+        }),
         toJSON: () => data,
       },
       tr: {
@@ -65,3 +69,30 @@ describe('<Licit />', () => {
     });
   });
 });
+
+describe('<Licit with HTML input/>', () => {
+  let wrapper;
+  let licit;
+
+  const HELLO = 'Hello ';
+  const WORLD = 'World';
+  const data =
+    '<p stylename="None">' +
+    HELLO +
+    '<strong overridden="false">' +
+    WORLD +
+    '</strong></p>';
+
+  beforeEach(() => {
+    wrapper = shallow(<Licit data={data} dataType={DataType.HTML} />);
+    licit = wrapper.instance();
+  });
+
+  it('should render a <RichTextEditor /> ', () => {
+    expect(wrapper.find(RichTextEditor)).toBeTruthy();
+  });
+
+  it('should match state text content with the passed in text ', () => {
+    expect(licit.state.editorState.doc.textContent).toBe(HELLO + WORLD);
+  });
+});

package/src/client/SimpleConnector.js

@@ -14,6 +14,10 @@ export type SetStateCall = (
 class SimpleConnector {
   _setState: SetStateCall;
   _editorState: EditorState;
+  // This flag is used to deteremine if data passed in or not
+  // If not passed in, use the data from collab server when in collab mode.
+  // else use empty content.
+  _dataDefined: boolean;
 
   constructor(editorState: EditorState, setState: SetStateCall) {
     this._editorState = editorState;
@@ -49,6 +53,8 @@ class SimpleConnector {
   // Send the modified schema to server
   updateSchema = (schema: Schema, data: any) => {};
 
+  updateContent = (data: any) => {};
+
   cleanUp = () => {};
 }
 

package/src/client/http.js

@@ -53,6 +53,10 @@ export function POST(url, body, type) {
   return req({ url, method: 'POST', body, headers: { 'Content-Type': type } });
 }
 
+export function PUT(url, body, type) {
+  return req({ url, method: 'PUT', body, headers: { 'Content-Type': type } });
+}
+
 // [FS] IRAD-1128 2021-02-03
 // http DELETE request overrided
 export function DELETE(url, type) {

package/src/convertFromDOMElement.js

@@ -11,8 +11,8 @@ import EditorSchema from './EditorSchema';
 
 export default function convertFromDOMElement(
   el: HTMLElement,
-  schema: ?Schema,
-  plugins: ?Array<Plugin>
+  schema: Schema,
+  plugins: Array<Plugin>
 ): EditorState {
   const effectiveSchema = schema || EditorSchema;
   const effectivePlugins = plugins || EditorPlugins;

package/src/convertFromHTML.js

@@ -5,15 +5,13 @@ import { EditorState } from 'prosemirror-state';
 import { Plugin } from 'prosemirror-state';
 
 import convertFromDOMElement from './convertFromDOMElement';
-import normalizeHTML from './normalizeHTML';
 
 export default function convertFromHTML(
   html: string,
-  schema: ?Schema,
-  plugins: ?Array<Plugin>
+  schema: Schema,
+  plugins: Array<Plugin>
 ): EditorState {
   const root = document.createElement('html');
-  const newHTML = normalizeHTML(html);
-  root.innerHTML = newHTML;
+  root.innerHTML = html ? html : ' ';
   return convertFromDOMElement(root, schema, plugins);
 }

package/src/convertFromJSON.js

@@ -9,54 +9,32 @@ export default function convertFromJSON(
   json: Object | string,
   schema: ?Schema,
   defaultSchema: Schema,
-  plugins: ?Array<Plugin>,
-  defaultPlugins: Array<Plugin>
+  effectivePlugins: Array<Plugin>
 ): EditorState {
-  let editorSchema = schema || defaultSchema;
+  const editorSchema = schema || defaultSchema;
+  let error = false;
 
-  // [FS][IRAD-???? 2020-08-17]
-  // Loads plugins and its corresponding schema in editor
-  const effectivePlugins = defaultPlugins;
-
-  if (plugins) {
-    for (const p of plugins) {
-      if (!effectivePlugins.includes(p)) {
-        effectivePlugins.push(p);
-        if (p.getEffectiveSchema) {
-          editorSchema = p.getEffectiveSchema(editorSchema);
-        }
-
-        if (p.initKeyCommands) {
-          effectivePlugins.push(p.initKeyCommands());
-        }
-      }
-    }
-  }
   if (typeof json === 'string') {
     try {
       json = JSON.parse(json);
     } catch (ex) {
       console.error('convertFromJSON:', ex);
-      // [FS] IRAD-1455 2021-06-16
-      // Use the effectivePlugins, editor hangs, b'coz of missing default core plugins
-      return createEmptyEditorState(
-        schema,
-        defaultSchema,
-        plugins,
-        defaultPlugins
-      );
+      error = true;
     }
   }
 
   if (!json || typeof json !== 'object') {
     console.error('convertFromJSON: invalid object', json);
+    error = true;
+  }
+
+  if(error) {
     // [FS] IRAD-1455 2021-06-16
     // Use the effectivePlugins, editor hangs, b'coz of missing default core plugins
     return createEmptyEditorState(
       schema,
       defaultSchema,
-      plugins,
-      defaultPlugins
+      effectivePlugins
     );
   }
 

package/src/createEmptyEditorState.js

@@ -3,7 +3,6 @@
 import { Schema } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import { Plugin } from 'prosemirror-state';
-import DefaultEditorPlugins from './buildEditorPlugins';
 
 import convertFromJSON from './convertFromJSON';
 import EditorSchema from './EditorSchema';
@@ -12,24 +11,21 @@ export const EMPTY_DOC_JSON = {
   type: 'doc',
   content: [
     {
-      type: 'paragraph'
-    },// [FS] IRAD-1710 2022-03-04 - No text content needed
+      type: 'paragraph',
+    }, // [FS] IRAD-1710 2022-03-04 - No text content needed
   ],
 };
 
 export default function createEmptyEditorState(
   schema: ?Schema,
   defaultSchema: ?Schema,
-  plugins: ?Array<Plugin>,
-  defaultPlugins: ?Array<Plugin>
+  plugins: Array<Plugin>
 ): EditorState {
-  const newSchema = schema || (defaultSchema ? defaultSchema : EditorSchema);
   // TODO: Check if schema support doc and paragraph nodes.
   return convertFromJSON(
     EMPTY_DOC_JSON,
     schema,
     defaultSchema ? defaultSchema : EditorSchema,
-    plugins,
-    defaultPlugins ? defaultPlugins : new DefaultEditorPlugins(newSchema).get()
+    plugins
   );
 }

package/src/index.js

@@ -5,6 +5,6 @@ export { default as isEditorStateEmpty } from './isEditorStateEmpty';
 export { default as uuid } from './ui/uuid';
 // [FS] IRAD-978 2020-06-05
 // Export Licit as a component
-export { default as Licit } from './client/Licit.js';
+export { default as Licit, DataType } from './client/Licit.js';
 export { ImageLike, EditorRuntime } from './Types';
 export { GET, POST, DELETE, PATCH } from './client/http';

package/src/patchStyleElements.js

@@ -1,6 +1,5 @@
 // @flow
 
-import stable from 'stable';
 import toCSSColor from './ui/toCSSColor';
 import { toCSSLineSpacing } from '@modusoperandi/licit-ui-commands';
 
@@ -94,7 +93,8 @@ export default function patchStyleElements(doc: Document): void {
   });
 
   // Sort selector by
-  stable(selectorTextToCSSTexts, sortBySpecificity)
+  selectorTextToCSSTexts
+    .sort(sortBySpecificity)
     .reduce(buildElementToCSSTexts.bind(null, doc), new Map<any, any>())
     .forEach(applyInlineStyleSheetCSSTexts);
 }

package/src/ui/czi-link-tooltip.css

@@ -1,4 +1,4 @@
-@import '../../node_modules/@modusoperandi/licit-ui-commands/dist/ui/czi-custom-button.css';
+@import '~@modusoperandi/licit-ui-commands/dist/ui/czi-custom-button.css';
 @import './czi-vars.css';
 
 .czi-link-tooltip {

package/src/ui/czi-vars.css

@@ -1,2 +1,2 @@
-@import '../../node_modules/@modusoperandi/licit-ui-commands/dist/ui/czi-vars.css';
+@import '~@modusoperandi/licit-ui-commands/dist/ui/czi-vars.css';