@modusoperandi/licit 1.0.5 → 1.0.8

package/ui/TableGridSizeEditor.js

@@ -1,24 +1,21 @@
 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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 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); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 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';
+import { clamp, fromHTMlElement, fromXY, isIntersected } from '@modusoperandi/licit-ui-commands';
 var bpfrpt_proptype_TableGridSizeEditorValue = {
   "cols": PropTypes.number.isRequired,
   "rows": PropTypes.number.isRequired
@@ -97,7 +94,7 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
       }
     });
     _defineProperty(_this, "_onMouseMove", function (e) {
-      var el = _this._ref && ReactDOM.findDOMNode(_this._ref);
+      var el = _this._ref;
       var elRect = el ? htmlElementToRect(el) : null;
       var mouseRect = fromXY(e.screenX, e.screenY, 10);
       if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
@@ -173,7 +170,7 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
         while (jj < cc) {
           x += GUTTER_SIZE;
           var selected = ii < rows && jj < cols;
-          cells.push( /*#__PURE__*/React.createElement(GridCell, {
+          cells.push(/*#__PURE__*/React.createElement(GridCell, {
             key: "".concat(String(ii), "-").concat(String(jj)),
             selected: selected,
             x: x,

package/ui/TableGridSizeEditor.js.flow

@@ -2,13 +2,14 @@
 
 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';
+import {
+  clamp,
+  fromHTMlElement,
+  fromXY,
+  isIntersected,
+} from '@modusoperandi/licit-ui-commands';
 
 export type TableGridSizeEditorValue = {
   cols: number,
@@ -141,7 +142,7 @@ class TableGridSizeEditor extends React.PureComponent<any, any> {
   };
 
   _onMouseMove = (e: MouseEvent): void => {
-    const el = this._ref && ReactDOM.findDOMNode(this._ref);
+    const el = this._ref;
     const elRect = el ? htmlElementToRect(el) : null;
     const mouseRect = fromXY(e.screenX, e.screenY, 10);
 

package/ui/TableNodeView.js

@@ -1,18 +1,19 @@
 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 _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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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 _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
 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); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { TableView } from 'prosemirror-tables';
@@ -30,7 +31,7 @@ var TableNodeView = /*#__PURE__*/function (_TableView) {
   return _createClass(TableNodeView, [{
     key: "update",
     value: function update(node) {
-      var updated = _get(_getPrototypeOf(TableNodeView.prototype), "update", this).call(this, node);
+      var updated = _superPropGet(TableNodeView, "update", this, 3)([node]);
       if (updated) {
         this._updateMargin(node);
       }
@@ -39,9 +40,10 @@ var TableNodeView = /*#__PURE__*/function (_TableView) {
   }, {
     key: "_updateMargin",
     value: function _updateMargin(node) {
-      var marginLeft = node.attrs && node.attrs.marginLeft || 0;
+      var _node$attrs, _node$attrs2;
+      var marginLeft = ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.marginLeft) || 0;
       this.table.style.marginLeft = marginLeft ? "".concat(marginLeft, "px") : '';
-      if (node.attrs && node.attrs.vignette) {
+      if ((_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.vignette) {
         this.table.style.border = 'none';
       }
     }

package/ui/TableNodeView.js.flow

@@ -16,10 +16,10 @@ export default class TableNodeView extends TableView {
     return updated;
   }
   _updateMargin(node: Node): void {
-    const marginLeft = (node.attrs && node.attrs.marginLeft) || 0;
+    const marginLeft = node.attrs?.marginLeft || 0;
     this.table.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
-     if(node.attrs && node.attrs.vignette){
-      this.table.style.border='none' ;
+    if (node.attrs?.vignette) {
+      this.table.style.border = 'none';
     }
   }
 }

package/ui/bindScrollHandler.js

@@ -22,8 +22,9 @@ export default function bindScrollHandler(target, callback) {
   return {
     dispose: function dispose() {
       while (onScroll && els.length) {
+        var _el;
         el = els.pop();
-        el && el.removeEventListener('scroll', onScroll, false);
+        (_el = el) === null || _el === void 0 || _el.removeEventListener('scroll', onScroll, false);
       }
       onScroll = null;
       rid && window.cancelAnimationFrame(rid);

package/ui/bindScrollHandler.js.flow

@@ -36,7 +36,7 @@ export default function bindScrollHandler(
     dispose() {
       while (onScroll && els.length) {
         el = els.pop();
-        el && el.removeEventListener('scroll', onScroll, false);
+        el?.removeEventListener('scroll', onScroll, false);
       }
       onScroll = null;
       rid && window.cancelAnimationFrame(rid);

package/ui/canUseCSSFont.js

@@ -1,10 +1,11 @@
 var cached = {};
 export default function canUseCSSFont(fontName) {
+  var _doc$fonts, _doc$fonts2, _doc$fonts3, _doc$fonts4;
   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) {
+  if (!((_doc$fonts = doc.fonts) !== null && _doc$fonts !== void 0 && _doc$fonts.check) || !((_doc$fonts2 = doc.fonts) !== null && _doc$fonts2 !== void 0 && _doc$fonts2.ready) || !((_doc$fonts3 = doc.fonts) !== null && _doc$fonts3 !== void 0 && _doc$fonts3.status) || !((_doc$fonts4 = doc.fonts) !== null && _doc$fonts4 !== void 0 && _doc$fonts4.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.
@@ -14,9 +15,9 @@ export default function canUseCSSFont(fontName) {
   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() {
+    var _check = function check() {
       if (doc.fonts.status !== 'loaded') {
-        setTimeout(check, 350);
+        setTimeout(_check, 350);
         return;
       }
       // Do not use `doc.fonts.check()` because it may return falsey result.
@@ -28,6 +29,6 @@ export default function canUseCSSFont(fontName) {
       cached[fontName] = result;
       resolve(result);
     };
-    doc.fonts.ready.then(check);
+    doc.fonts.ready.then(_check);
   });
 }

package/ui/canUseCSSFont.js.flow

@@ -10,11 +10,10 @@ export default function canUseCSSFont(fontName: string): Promise<boolean> {
   }
 
   if (
-    !doc.fonts ||
-    !doc.fonts.check ||
-    !doc.fonts.ready ||
-    !doc.fonts.status ||
-    !doc.fonts.values
+    !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

package/ui/czi-editor.css

@@ -5,7 +5,6 @@
 @import './czi-vars.css';
 
 .czi-text-selection {
-  /* var(--czi-selection-highlight-color-dark); */
   background: red;
 }
 
@@ -45,8 +44,6 @@
 .ProseMirror .tableWrapper {
   /* [FS] IRAD-993 2020-06-26
   Fix:Table exceeds the canvas */
-
-  /* overflow-x: visible; */
   width: 100%;
 }
 
@@ -123,7 +120,7 @@
   box-shadow: unset;
   min-height: unset;
   padding: unset;
-  width: unset;
+  width: 78vw;
 }
 
 @media only print {

package/ui/czi-form.css

@@ -8,16 +8,29 @@
   margin: 0;
   padding: 20px;
   color: black;
-  height: auto !important;
   display: grid;
 }
+#select-toc-tooltip {
+  max-width: 400px;
+  margin-top: -5px;
+}
+.tab-container {
+  background: #fff;
+  border: none;
+  font-family: var(--czi-font-family);
+  font-size: var(--czi-font-size);
+  margin: 0;
+  padding: 10px;
+  color: black;
+  display: flex;
+}
 
 .czi-form legend {
   border: none;
   font-size: var(--czi-content-font-size-h2);
   margin-top: 0;
   margin-right: 0;
-  margin-bottom: 20px;
+  margin-bottom: 3px;
   margin-left: 0;
   padding: 0;
   user-select: none;
@@ -39,6 +52,7 @@
   border: none;
   margin: 0;
   padding: 0;
+  margin-top: 20px;
 }
 
 .czi-form input[type='text'] {
@@ -48,7 +62,7 @@
   display: block;
   font-family: var(--czi-font-family);
   font-size: var(--czi-font-size);
-  margin-top: 0;
+  margin-top: 5px;
   margin-right: 0;
   margin-bottom: 8px;
   margin-left: 0;
@@ -77,11 +91,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-}
-
-.czi-form-buttons .czi-custom-button {
-  margin: 0 5px;
-}
+} 
 
 .licit-alert {
   background-color: #f44336;
@@ -105,3 +115,87 @@
 .closebtn:hover {
   color: black;
 }
+
+/* Style the tab */
+.tab {
+  overflow: hidden;
+  float: left;
+  border: 1px solid #ccc;
+  background-color: #f1f1f1;
+  width: 30%;
+  height: 260px;
+}
+
+/* Style the buttons that are used to open the tab content */
+.tab button {
+  display: block;
+  background-color: inherit;
+  color: black;
+  padding: 23px 13px;
+  width: 100%;
+  border: none;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  transition: 0.3s;
+  height: 130px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+  background-color: #ddd;
+}
+
+/* Create an active/current "tab button" class */
+.tab button.active {
+  background-color: #ccc;
+}
+
+.tablinks.active {
+  background-color: #ccc; /* Style for the active button */
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  float: left;
+  padding: 0px 12px;
+  padding-top: inherit;
+  border: 1px solid #ccc;
+  width: 70%;
+  border-left: none;
+  height: 260px;
+}
+
+#toc {
+  margin-bottom: 10px;
+  margin-top: 10px;
+  outline: 0;
+  border: 4px solid lightslategray;
+  padding: 7px;
+  border-radius: 9px;
+  width: 100%;
+  height: 180px;
+}
+
+#toc option {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 3px;
+  background-color: white;
+  color: black;
+}
+
+.czi-form-buttons .czi-custom-button {
+  margin: 0 5px;
+}
+
+.highlighted {
+  color: yellow;
+}
+
+#toc option:checked {
+  background-color: #1967d2;
+  color: white;
+}

package/ui/czi-image-view.css

@@ -100,11 +100,7 @@
 .czi-image-view-body.active {
   background-color: transparent;
   box-shadow: 0 0 0 2px var(--czi-selection-highlight-color-dark);
-}
-
-.czi-image-view-body.error {
-  /* outline: var(--czi-border-red); */
-}
+} 
 
 @media only print {
   .czi-image-view-body.active {

package/ui/czi-link-tooltip.css

@@ -69,3 +69,44 @@
     display: none;
   }
 }
+
+.czi-link-tooltip-body-toc {
+  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: 16px;
+  max-width: 300px;
+  max-height: 300px;
+  padding: 10px;
+  pointer-events: auto;
+  overflow-y: auto;
+  margin-top: 30px;
+}
+.czi-link-tooltip-body-toc::after {
+  background-color: #fff;
+  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.26);
+  content: '';
+  height: 20px;
+  left: 35%;
+  position: absolute;
+  top: 22px;
+  transform: rotate(45deg);
+  width: 20px;
+  z-index: 1;
+}
+
+.czi-link-tooltip-row-toc {
+ 
+  z-index: 2;
+  background-color: #fff;
+  padding: 5px;
+  margin-top: 5px;
+  white-space: nowrap; 
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+

package/ui/czi-list.css

@@ -48,8 +48,6 @@ html {
 /* https://css-tricks.com/numbering-in-style/ */
 .ProseMirror ul li > p::before {
   color: var(--czi-list-style-color);
-
-  /* content: '\2022'; */
   display: inline-block;
   font-size: 1em;
   left: -5px;
@@ -62,8 +60,6 @@ html {
 }
 
 .ProseMirror ol {
-  /* counter-reset: czi-counter;
-  list-style-type: none; */
   --czi-counter-name: czi-counter-0;
   --czi-list-style-type: decimal;
   --czi-counter-reset: 0;

package/ui/czi-loading-indicator.css

@@ -63,49 +63,4 @@
   100% {
     transform: translate(19px, 0);
   }
-}
-
-/*
-
-.czi-loading-indicator {
-  display: inline-block;
-  position: relative;
-  width: 64px;
-  height: 64px;
-  vertical-align: middle;
-}
-
-.czi-loading-indicator .frag {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 51px;
-  height: 51px;
-  margin: 6px;
-  border: 6px solid #efefef;
-  border-radius: 50%;
-  animation: czi_loading_indicator_animation 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #efefef transparent transparent transparent;
-}
-
-.czi-loading-indicator-frag-1 {
-  animation-delay: -0.45s;
-}
-
-.czi-loading-indicator-frag-2 {
-  animation-delay: -0.3s;
-}
-
-.czi-loading-indicator-frag-3 {
-  animation-delay: -0.15s;
-}
-
-@keyframes czi_loading_indicator_animation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-*/
+} 

package/ui/czi-table-cell-menu.css

@@ -1,10 +1,12 @@
 .czi-table-cell-menu.use-icon {
+  position: fixed;
+  margin-left: -26px;
+  margin-top: 5px;
   box-shadow: 0 0 0 0.3px rgba(0, 0, 0, 0.35);
   font-size: 12px;
   font-weight: normal;
   height: 20px;
   line-height: 22px;
-  margin: 5px 5px 0 0;
   text-align: center;
   width: 20px;
 }

package/ui/findActiveFontSize.js

@@ -31,7 +31,8 @@ export default function findActiveFontSize(state) {
     to = selection.to,
     empty = selection.empty;
   if (empty) {
-    var storedMarks = tr.storedMarks || state.storedMarks || selection.$cursor && selection.$cursor.marks && selection.$cursor.marks() || [];
+    var _selection$$cursor, _selection$$cursor$ma;
+    var storedMarks = tr.storedMarks || state.storedMarks || ((_selection$$cursor = selection.$cursor) === null || _selection$$cursor === void 0 || (_selection$$cursor$ma = _selection$$cursor.marks) === null || _selection$$cursor$ma === void 0 ? void 0 : _selection$$cursor$ma.call(_selection$$cursor)) || [];
     var sm = storedMarks.find(function (m) {
       return m.type === markType;
     });

package/ui/findActiveFontSize.js.flow

@@ -34,10 +34,7 @@ export default function findActiveFontSize(state: EditorState): string {
     const storedMarks =
       tr.storedMarks ||
       state.storedMarks ||
-      (selection.$cursor &&
-        selection.$cursor.marks &&
-        selection.$cursor.marks()) ||
-      [];
+      selection.$cursor?.marks?.() || [];
     const sm = storedMarks.find((m) => m.type === markType);
     return sm ? String(sm.attrs.pt || defaultSize) : defaultSize;
   }

package/ui/findActiveFontType.js

@@ -17,14 +17,15 @@ export default function findActiveFontType(state) {
     to = selection.to,
     empty = selection.empty;
   if (empty) {
-    var storedMarks = tr.storedMarks || state.storedMarks || selection.$cursor && selection.$cursor.marks && selection.$cursor.marks() || [];
+    var _selection$$cursor, _selection$$cursor$ma;
+    var storedMarks = tr.storedMarks || state.storedMarks || ((_selection$$cursor = selection.$cursor) === null || _selection$$cursor === void 0 || (_selection$$cursor$ma = _selection$$cursor.marks) === null || _selection$$cursor$ma === void 0 ? void 0 : _selection$$cursor$ma.call(_selection$$cursor)) || [];
     var sm = storedMarks.find(function (m) {
       return m.type === markType;
     });
-    return sm && sm.attrs.name || FONT_TYPE_NAME_DEFAULT;
+    return (sm === null || sm === void 0 ? void 0 : sm.attrs.name) || FONT_TYPE_NAME_DEFAULT;
   }
   var mark = findActiveMark(doc, from, to, markType);
-  var fontName = mark && mark.attrs.name;
+  var fontName = mark === null || mark === void 0 ? void 0 : mark.attrs.name;
   if (!fontName) {
     return FONT_TYPE_NAME_DEFAULT;
   }

package/ui/findActiveFontType.js.flow

@@ -20,16 +20,13 @@ export default function findActiveFontType(state: EditorState): string {
     const storedMarks =
       tr.storedMarks ||
       state.storedMarks ||
-      (selection.$cursor &&
-        selection.$cursor.marks &&
-        selection.$cursor.marks()) ||
-      [];
+      selection.$cursor?.marks?.() || [];
     const sm = storedMarks.find((m) => m.type === markType);
-    return (sm && sm.attrs.name) || FONT_TYPE_NAME_DEFAULT;
+    return (sm?.attrs.name) || FONT_TYPE_NAME_DEFAULT;
   }
 
   const mark = findActiveMark(doc, from, to, markType);
-  const fontName = mark && mark.attrs.name;
+  const fontName = mark?.attrs.name;
   if (!fontName) {
     return FONT_TYPE_NAME_DEFAULT;
   }

package/ui/handleEditorDrop.js

@@ -8,7 +8,7 @@ export default function handleEditorDrop(view, event) {
     return false;
   }
   var files = dataTransfer.files;
-  if (!files || !files.length) {
+  if (!(files !== null && files !== void 0 && files.length)) {
     return false;
   }
   var filesList = Array.from(files);

package/ui/handleEditorDrop.js.flow

@@ -14,7 +14,7 @@ export default function handleEditorDrop(
     return false;
   }
   const { files } = dataTransfer;
-  if (!files || !files.length) {
+  if (!files?.length) {
     return false;
   }
 

package/ui/handleEditorKeyDown.js

@@ -13,7 +13,7 @@ export default function handleEditorKeyDown(view, event) {
       // An atomic node (e.g. Image) is selected.
       // Only whitelisted keyCode should be allowed, which prevents user
       // from typing letter after the atomic node selected.
-      return !AtomicNodeKeyCodes.has(event.keyCode);
+      return !AtomicNodeKeyCodes.has(event.key);
     }
   }
   return false;