@modusoperandi/licit 1.4.2 → 1.4.6

package/ui/TableGridSizeEditor.js.flow

@@ -1,185 +1,185 @@
-// @flow
-
-import cx from 'classnames';
-import * as React from 'react';
-
-import htmlElementToRect from './htmlElementToRect.js';
-import {
-  clamp,
-  fromHTMlElement,
-  fromXY,
-  isIntersected,
-} from '@modusoperandi/licit-ui-commands';
-
-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;
-    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;
+// @flow
+
+import cx from 'classnames';
+import * as React from 'react';
+
+import htmlElementToRect from './htmlElementToRect.js';
+import {
+  clamp,
+  fromHTMlElement,
+  fromXY,
+  isIntersected,
+} from '@modusoperandi/licit-ui-commands';
+
+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;
+    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.flow

@@ -1,36 +1,36 @@
-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.
-export default class TableNodeView extends TableView {
-  constructor(node: Node, colMinWidth: number, view: EditorView) {
-    super(node, colMinWidth, view);
-    this._updateAttrs(node);
-  }
-  update(node: Node): boolean {
-    const updated = super.update(node);
-    if (updated) {
-      this._updateAttrs(node);
-    }
-    return updated;
-  }
-
-  _updateAttrs(node: Node): void {
-    // Handle marginLeft
-    const marginLeft = node.attrs?.marginLeft || 0;
-    this.table.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
-
-    // Handle vignette
-    if (node.attrs?.vignette) {
-      this.table.style.border = 'none';
-    }
-
-    // Handle dirty -> sets a data attribute for DOM/state sync
-    if (node.attrs?.dirty) {
-      this.table.setAttribute('dirty', 'true');
-    } else {
-      this.table.removeAttribute('dirty');
-    }
-  }
-}
+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.
+export default class TableNodeView extends TableView {
+  constructor(node: Node, colMinWidth: number, view: EditorView) {
+    super(node, colMinWidth, view);
+    this._updateAttrs(node);
+  }
+  update(node: Node): boolean {
+    const updated = super.update(node);
+    if (updated) {
+      this._updateAttrs(node);
+    }
+    return updated;
+  }
+
+  _updateAttrs(node: Node): void {
+    // Handle marginLeft
+    const marginLeft = node.attrs?.marginLeft || 0;
+    this.table.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
+
+    // Handle vignette
+    if (node.attrs?.vignette) {
+      this.table.style.border = 'none';
+    }
+
+    // Handle dirty -> sets a data attribute for DOM/state sync
+    if (node.attrs?.dirty) {
+      this.table.setAttribute('dirty', 'true');
+    } else {
+      this.table.removeAttribute('dirty');
+    }
+  }
+}

package/ui/bindScrollHandler.js.flow

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

package/ui/canUseCSSFont.js.flow

@@ -1,42 +1,42 @@
-// @flow
-
-const cached = {};
-
-export default function canUseCSSFont(fontName: string): Promise<boolean> {
-  const doc: any = document;
-
-  if (cached.hasOwnProperty(fontName)) {
-    return Promise.resolve(cached[fontName]);
-  }
-
-  if (
-    !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((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.
-    const check = () => {
-      if (doc.fonts.status !== 'loaded') {
-        setTimeout(check, 350);
-        return;
-      }
-      // Do not use `doc.fonts.check()` because it may return falsey result.
-      const fontFaces = Array.from(doc.fonts.values());
-      const matched = fontFaces.find((ff) => ff.family === fontName);
-      const result = !!matched;
-      cached[fontName] = result;
-      resolve(result);
-    };
-    doc.fonts.ready.then(check);
-  });
-}
+// @flow
+
+const cached = {};
+
+export default function canUseCSSFont(fontName: string): Promise<boolean> {
+  const doc: any = document;
+
+  if (cached.hasOwnProperty(fontName)) {
+    return Promise.resolve(cached[fontName]);
+  }
+
+  if (
+    !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((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.
+    const check = () => {
+      if (doc.fonts.status !== 'loaded') {
+        setTimeout(check, 350);
+        return;
+      }
+      // Do not use `doc.fonts.check()` because it may return falsey result.
+      const fontFaces = Array.from(doc.fonts.values());
+      const matched = fontFaces.find((ff) => ff.family === fontName);
+      const result = !!matched;
+      cached[fontName] = result;
+      resolve(result);
+    };
+    doc.fonts.ready.then(check);
+  });
+}

package/ui/czi-body-layout-editor.css

@@ -1,16 +1,16 @@
-@import './czi-vars.css';
-
-.czi-body-layout-editor {
-  background: #fff;
-  box-shadow: var(--czi-overlay-shadow);
-  font-family: var(--czi-font-family);
-  font-size: var(--czi-font-size);
-  padding-bottom: 4px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 4px;
-}
-
-.czi-body-layout-editor .czi-form {
-  width: 300px;
-}
+@import './czi-vars.css';
+
+.czi-body-layout-editor {
+  background: #fff;
+  box-shadow: var(--czi-overlay-shadow);
+  font-family: var(--czi-font-family);
+  font-size: var(--czi-font-size);
+  padding-bottom: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 4px;
+}
+
+.czi-body-layout-editor .czi-form {
+  width: 300px;
+}

package/ui/czi-bookmark-view.css

@@ -1,10 +1,10 @@
-.czi-bookmark-view {
-  color: #5e8adb;
-  display: inline-block;
-  margin-bottom: 0;
-  margin-left: 4px;
-  margin-right: 4px;
-  margin-top: 0;
-  vertical-align: middle;
-  width: 20px;
-}
+.czi-bookmark-view {
+  color: #5e8adb;
+  display: inline-block;
+  margin-bottom: 0;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 0;
+  vertical-align: middle;
+  width: 20px;
+}