@modusoperandi/licit 0.14.18 → 1.0.1

package/ui/TableGridSizeEditor.js

@@ -0,0 +1,212 @@
+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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import cx from 'classnames';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { clamp } from '@modusoperandi/licit-ui-commands';
+import htmlElementToRect from './htmlElementToRect.js';
+import { fromHTMlElement, fromXY, isIntersected } from '@modusoperandi/licit-ui-commands';
+import './czi-table-grid-size-editor.css';
+var bpfrpt_proptype_TableGridSizeEditorValue = {
+  "cols": PropTypes.number.isRequired,
+  "rows": PropTypes.number.isRequired
+};
+var GUTTER_SIZE = 5;
+var CELL_SIZE = 16;
+// [FS] IRAD-1012 2020-07-14
+// Fix: Limited Table Grid size from 20 to 7
+var MAX_SIZE = 7;
+var GridCell = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(GridCell, _React$PureComponent);
+  function GridCell() {
+    _classCallCheck(this, GridCell);
+    return _callSuper(this, GridCell, arguments);
+  }
+  _createClass(GridCell, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        x = _this$props.x,
+        y = _this$props.y,
+        selected = _this$props.selected;
+      var style = {
+        left: x + 'px',
+        top: y + 'px',
+        width: CELL_SIZE + 'px',
+        height: CELL_SIZE + 'px'
+      };
+      var className = cx('czi-table-grid-size-editor-cell', {
+        selected: selected
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        style: style
+      });
+    }
+  }]);
+  return GridCell;
+}(React.PureComponent);
+var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
+  _inherits(TableGridSizeEditor, _React$PureComponent2);
+  function TableGridSizeEditor() {
+    var _this;
+    _classCallCheck(this, TableGridSizeEditor);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TableGridSizeEditor, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_ex", 0);
+    _defineProperty(_assertThisInitialized(_this), "_ey", 0);
+    _defineProperty(_assertThisInitialized(_this), "_mx", 0);
+    _defineProperty(_assertThisInitialized(_this), "_my", 0);
+    _defineProperty(_assertThisInitialized(_this), "_rafID", 0);
+    _defineProperty(_assertThisInitialized(_this), "_ref", null);
+    _defineProperty(_assertThisInitialized(_this), "_entered", false);
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      rows: 1,
+      cols: 1
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onRef", function (ref) {
+      _this._ref = ref;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function (e) {
+      var node = e.currentTarget;
+      if (node instanceof HTMLElement) {
+        var rect = fromHTMlElement(node);
+        var mx = Math.round(e.clientX);
+        var my = Math.round(e.clientY);
+        _this._ex = rect.x;
+        _this._ey = rect.y;
+        _this._mx = mx;
+        _this._my = my;
+        if (!_this._entered) {
+          _this._entered = true;
+          document.addEventListener('mousemove', _this._onMouseMove, true);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseMove", function (e) {
+      var el = _this._ref && ReactDOM.findDOMNode(_this._ref);
+      var elRect = el ? htmlElementToRect(el) : null;
+      var mouseRect = fromXY(e.screenX, e.screenY, 10);
+      if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
+        // This prevents `PopUpManager` from collapsing the editor.
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+      var mx = Math.round(e.clientX);
+      var my = Math.round(e.clientY);
+      if (mx !== _this._mx || my !== _this._my) {
+        _this._mx = mx;
+        _this._my = my;
+        _this._rafID && cancelAnimationFrame(_this._rafID);
+        _this._rafID = requestAnimationFrame(_this._updateGridSize);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_updateGridSize", function () {
+      _this._rafID = 0;
+      var mx = _this._mx;
+      var my = _this._my;
+      var x = mx - _this._ex;
+      var y = my - _this._ey;
+      var rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+      var cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+      var _this$state = _this.state,
+        rows = _this$state.rows,
+        cols = _this$state.cols;
+      if (rows !== rr || cols !== cc) {
+        _this.setState({
+          rows: rr,
+          cols: cc
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseDown", function (e) {
+      e.preventDefault();
+      _this.props.close(_this.state);
+    });
+    return _this;
+  }
+  _createClass(TableGridSizeEditor, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._entered) {
+        document.removeEventListener('mousemove', this._onMouseMove, true);
+      }
+      this._rafID && cancelAnimationFrame(this._rafID);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        rows = _this$state2.rows,
+        cols = _this$state2.cols;
+      var rr = Math.max(5, rows);
+      var cc = Math.max(5, cols);
+      if (rr === rows) {
+        rr = Math.min(MAX_SIZE, rr + 1);
+      }
+      if (cc === cols) {
+        cc = Math.min(MAX_SIZE, cc + 1);
+      }
+      var cells = [];
+      var ii = 0;
+      var y = 0;
+      var w = 0;
+      var h = 0;
+      while (ii < rr) {
+        y += GUTTER_SIZE;
+        var jj = 0;
+        var x = 0;
+        while (jj < cc) {
+          x += GUTTER_SIZE;
+          var selected = ii < rows && jj < cols;
+          cells.push( /*#__PURE__*/React.createElement(GridCell, {
+            key: "".concat(String(ii), "-").concat(String(jj)),
+            selected: selected,
+            x: x,
+            y: y
+          }));
+          x += CELL_SIZE;
+          w = x + GUTTER_SIZE;
+          jj++;
+        }
+        y += CELL_SIZE;
+        h = y + GUTTER_SIZE;
+        ii++;
+      }
+      var bodyStyle = {
+        width: w + 'px',
+        height: h + 'px'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor",
+        ref: this._onRef
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor-body",
+        onMouseDown: this._onMouseDown,
+        onMouseEnter: this._onMouseEnter,
+        style: bodyStyle
+      }, cells), /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor-footer"
+      }, rows, " X ", cols));
+    }
+  }]);
+  return TableGridSizeEditor;
+}(React.PureComponent);
+export default TableGridSizeEditor;
+import PropTypes from "prop-types";
+export { bpfrpt_proptype_TableGridSizeEditorValue };

package/ui/TableGridSizeEditor.js.flow

@@ -0,0 +1,184 @@
+// @flow
+
+import cx from 'classnames';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import { clamp } from '@modusoperandi/licit-ui-commands';
+import htmlElementToRect from './htmlElementToRect.js';
+import { fromHTMlElement, fromXY, isIntersected } from '@modusoperandi/licit-ui-commands';
+
+import './czi-table-grid-size-editor.css';
+
+export type TableGridSizeEditorValue = {
+  cols: number,
+  rows: number,
+};
+
+const GUTTER_SIZE = 5;
+const CELL_SIZE = 16;
+// [FS] IRAD-1012 2020-07-14
+// Fix: Limited Table Grid size from 20 to 7
+const MAX_SIZE = 7;
+
+class GridCell extends React.PureComponent<any, any> {
+  render(): React.Element<any> {
+    const { x, y, selected } = this.props;
+    const style = {
+      left: x + 'px',
+      top: y + 'px',
+      width: CELL_SIZE + 'px',
+      height: CELL_SIZE + 'px',
+    };
+    const className = cx('czi-table-grid-size-editor-cell', {
+      selected,
+    });
+    return <div className={className} style={style} />;
+  }
+}
+
+class TableGridSizeEditor extends React.PureComponent<any, any> {
+  _ex = 0;
+  _ey = 0;
+  _mx = 0;
+  _my = 0;
+  _rafID = 0;
+  _ref = null;
+  _entered = false;
+
+  props: {
+    close: (val: TableGridSizeEditorValue) => void,
+  };
+
+  state: TableGridSizeEditorValue = {
+    rows: 1,
+    cols: 1,
+  };
+
+  componentWillUnmount(): void {
+    if (this._entered) {
+      document.removeEventListener('mousemove', this._onMouseMove, true);
+    }
+    this._rafID && cancelAnimationFrame(this._rafID);
+  }
+
+  render(): React.Element<any> {
+    const { rows, cols } = this.state;
+    let rr = Math.max(5, rows);
+    let cc = Math.max(5, cols);
+    if (rr === rows) {
+      rr = Math.min(MAX_SIZE, rr + 1);
+    }
+    if (cc === cols) {
+      cc = Math.min(MAX_SIZE, cc + 1);
+    }
+    const cells = [];
+    let ii = 0;
+    let y = 0;
+    let w = 0;
+    let h = 0;
+    while (ii < rr) {
+      y += GUTTER_SIZE;
+      let jj = 0;
+      let x = 0;
+      while (jj < cc) {
+        x += GUTTER_SIZE;
+        const selected = ii < rows && jj < cols;
+        cells.push(
+          <GridCell
+            key={`${String(ii)}-${String(jj)}`}
+            selected={selected}
+            x={x}
+            y={y}
+          />
+        );
+        x += CELL_SIZE;
+        w = x + GUTTER_SIZE;
+        jj++;
+      }
+      y += CELL_SIZE;
+      h = y + GUTTER_SIZE;
+      ii++;
+    }
+    const bodyStyle = { width: w + 'px', height: h + 'px' };
+
+    return (
+      <div className="czi-table-grid-size-editor" ref={this._onRef}>
+        <div
+          className="czi-table-grid-size-editor-body"
+          onMouseDown={this._onMouseDown}
+          onMouseEnter={this._onMouseEnter}
+          style={bodyStyle}
+        >
+          {cells}
+        </div>
+        <div className="czi-table-grid-size-editor-footer">
+          {rows} X {cols}
+        </div>
+      </div>
+    );
+  }
+
+  _onRef = (ref: any): void => {
+    this._ref = ref;
+  };
+
+  _onMouseEnter = (e: MouseEvent): void => {
+    const node = e.currentTarget;
+    if (node instanceof HTMLElement) {
+      const rect = fromHTMlElement(node);
+      const mx = Math.round(e.clientX);
+      const my = Math.round(e.clientY);
+      this._ex = rect.x;
+      this._ey = rect.y;
+      this._mx = mx;
+      this._my = my;
+      if (!this._entered) {
+        this._entered = true;
+        document.addEventListener('mousemove', this._onMouseMove, true);
+      }
+    }
+  };
+
+  _onMouseMove = (e: MouseEvent): void => {
+    const el = this._ref && ReactDOM.findDOMNode(this._ref);
+    const elRect = el ? htmlElementToRect(el) : null;
+    const mouseRect = fromXY(e.screenX, e.screenY, 10);
+
+    if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
+      // This prevents `PopUpManager` from collapsing the editor.
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+
+    const mx = Math.round(e.clientX);
+    const my = Math.round(e.clientY);
+    if (mx !== this._mx || my !== this._my) {
+      this._mx = mx;
+      this._my = my;
+      this._rafID && cancelAnimationFrame(this._rafID);
+      this._rafID = requestAnimationFrame(this._updateGridSize);
+    }
+  };
+
+  _updateGridSize = (): void => {
+    this._rafID = 0;
+    const mx = this._mx;
+    const my = this._my;
+    const x = mx - this._ex;
+    const y = my - this._ey;
+    const rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+    const cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+    const { rows, cols } = this.state;
+    if (rows !== rr || cols !== cc) {
+      this.setState({ rows: rr, cols: cc });
+    }
+  };
+
+  _onMouseDown = (e: SyntheticEvent<>): void => {
+    e.preventDefault();
+    this.props.close(this.state);
+  };
+}
+
+export default TableGridSizeEditor;

package/ui/TableNodeView.js

@@ -0,0 +1,51 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { TableView } from 'prosemirror-tables';
+
+// A custom table view that renders the margin-left style.
+var TableNodeView = /*#__PURE__*/function (_TableView) {
+  _inherits(TableNodeView, _TableView);
+  function TableNodeView(node, colMinWidth, view) {
+    var _this;
+    _classCallCheck(this, TableNodeView);
+    _this = _callSuper(this, TableNodeView, [node, colMinWidth, view]);
+    _this._updateMargin(node);
+    return _this;
+  }
+  _createClass(TableNodeView, [{
+    key: "update",
+    value: function update(node) {
+      var updated = _get(_getPrototypeOf(TableNodeView.prototype), "update", this).call(this, node);
+      if (updated) {
+        this._updateMargin(node);
+      }
+      return updated;
+    }
+  }, {
+    key: "_updateMargin",
+    value: function _updateMargin(node) {
+      var marginLeft = node.attrs && node.attrs.marginLeft || 0;
+      this.table.style.marginLeft = marginLeft ? "".concat(marginLeft, "px") : '';
+      if (node.attrs && node.attrs.vignette) {
+        this.table.style.border = 'none';
+      }
+    }
+  }]);
+  return TableNodeView;
+}(TableView);
+export { TableNodeView as default };

package/ui/bindScrollHandler.js

@@ -0,0 +1,33 @@
+export default function bindScrollHandler(target, callback) {
+  var defaultView = target.ownerDocument.defaultView;
+  var els = [];
+  var rid = 0;
+  var onScroll = function onScroll() {
+    // Debounce the scroll handler.
+    rid && cancelAnimationFrame(rid);
+    rid = requestAnimationFrame(callback);
+  };
+  var el = target;
+
+  // Scroll event does not bubble, so we need to look up all the scrollable
+  // elements.
+  while (el) {
+    var overflow = defaultView.getComputedStyle(el).overflow;
+    if (onScroll && overflow === 'auto' || overflow === 'scroll') {
+      el.addEventListener('scroll', onScroll, false);
+      els.push(el);
+    }
+    el = el.parentElement;
+  }
+  return {
+    dispose: function dispose() {
+      while (onScroll && els.length) {
+        el = els.pop();
+        el && el.removeEventListener('scroll', onScroll, false);
+      }
+      onScroll = null;
+      rid && window.cancelAnimationFrame(rid);
+      rid = 0;
+    }
+  };
+}

package/ui/canUseCSSFont.js

@@ -0,0 +1,33 @@
+var cached = {};
+export default function canUseCSSFont(fontName) {
+  var doc = document;
+  if (cached.hasOwnProperty(fontName)) {
+    return Promise.resolve(cached[fontName]);
+  }
+  if (!doc.fonts || !doc.fonts.check || !doc.fonts.ready || !doc.fonts.status || !doc.fonts.values) {
+    // Feature is not supported, install the CSS anyway
+    // https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check#Browser_compatibility
+    // TODO: Polyfill this.
+    console.log('FontFaceSet is not supported');
+    return Promise.resolve(false);
+  }
+  return new Promise(function (resolve) {
+    // https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded
+    // All fonts in use by visible text have loaded.
+    var check = function check() {
+      if (doc.fonts.status !== 'loaded') {
+        setTimeout(check, 350);
+        return;
+      }
+      // Do not use `doc.fonts.check()` because it may return falsey result.
+      var fontFaces = Array.from(doc.fonts.values());
+      var matched = fontFaces.find(function (ff) {
+        return ff.family === fontName;
+      });
+      var result = !!matched;
+      cached[fontName] = result;
+      resolve(result);
+    };
+    doc.fonts.ready.then(check);
+  });
+}

package/ui/czi-link-tooltip.css

@@ -0,0 +1,71 @@
+@import '~@modusoperandi/licit-ui-commands/ui/czi-custom-button.css';
+@import './czi-vars.css';
+
+.czi-link-tooltip {
+  display: flex;
+  justify-content: center;
+  left: -150px;
+  pointer-events: none;
+  position: absolute;
+  top: -70px;
+  width: 400px;
+}
+
+.czi-link-tooltip .czi-custom-button {
+  margin: 0 3px;
+}
+
+.czi-link-tooltip-href {
+  border: none;
+  color: var(--czi-link-color);
+  display: inline-block;
+  flex: 1;
+  margin: 0 6px 0 0;
+  max-width: 200px;
+  overflow: hidden;
+  padding: 6px 0;
+  position: relative;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  z-index: 2;
+}
+
+.czi-link-tooltip-row {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  z-index: 2;
+}
+
+.czi-link-tooltip-body {
+  background: #fff;
+  border-radius: var(--czi-overlay-radius);
+  box-shadow: var(--czi-overlay-shadow);
+  box-sizing: border-box;
+  display: inline-block;
+  font-family: var(--czi-font-family);
+  font-size: var(--czi-font-size);
+  max-width: 400px;
+  padding: 10px;
+  pointer-events: auto;
+}
+
+.czi-link-tooltip-body::after {
+  background-color: #fff;
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.26);
+  content: '';
+  height: 20px;
+  left: 35%;
+  position: absolute;
+  top: 37px;
+  transform: rotate(45deg);
+  width: 20px;
+  z-index: 1;
+}
+
+@media only print {
+  .czi-link-tooltip {
+    display: none;
+  }
+}

package/ui/czi-table.css

@@ -0,0 +1,87 @@
+@import './czi-vars.css';
+
+/* Table Styles */
+
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+.ProseMirror .tableWrapper::-webkit-scrollbar{
+  height: 12px;
+ }
+.ProseMirror table {
+  border: 1px solid var(--czi-table-border-color);
+  border-collapse:collapse;
+  border-spacing: 0;
+  border: none;
+  margin: 0;
+  overflow: hidden;
+  page-break-inside: avoid;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+  background-color: #fff;
+  border: 1px solid var(--czi-table-border-color);
+  box-sizing: border-box;
+  min-width: 1em;
+  padding: 8px;
+  position: relative;
+  vertical-align: top;
+}
+
+.ProseMirror th {
+  background-color: var(--czi-table-header-background-color);
+  font-weight: bold;
+  text-align: left;
+}
+
+.ProseMirror .column-resize-handle {
+  background-color: #adf;
+  border: solid 1px #fff;
+  border-width: 0 1px;
+  bottom: 0;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+  z-index: 20;
+}
+
+.ProseMirror th:last-child > .column-resize-handle,
+.ProseMirror td:last-child > .column-resize-handle {
+  right: 0;
+}
+
+.ProseMirror .column-resize-handle.for-margin-left.for-margin-left {
+  left: 0;
+  right: auto;
+}
+
+/* [FS] IRAD-949 2020-05-27
+Rezie cursor position issue fixed. */
+.ProseMirror .column-resize-handle:focus,
+.ProseMirror .column-resize-handle:hover {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+/* Give selected cells a blue overlay */
+.ProseMirror .selectedCell::after {
+  background: var(--czi-selection-highlight-color);
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+
+@media only print {
+  .ProseMirror table {
+    width: 100% !important;
+  }
+}

package/ui/czi-vars.css

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