@modusoperandi/licit 1.0.4 → 1.0.7

package/ui/EditorToolbar.js.flow

@@ -1,218 +1,199 @@
-// @flow
-
-import cx from 'classnames';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import CommandButton from './CommandButton.js';
-import CommandMenuButton from './CommandMenuButton.js';
-import {
-  CustomButton
-} from '@modusoperandi/licit-ui-commands';
-import {
-  COMMAND_GROUPS,
-  parseLabel
-} from './EditorToolbarConfig.js';
-import Icon from './Icon.js';
-import ResizeObserver from './ResizeObserver.js';
-import {
-  UICommand
-} from '@modusoperandi/licit-doc-attrs-step';
-import isReactClass from './isReactClass.js';
-
-import './czi-editor-toolbar.css';
-
-class EditorToolbar extends React.PureComponent<any, any> {
-  _body = null;
-
-  props: {
-    disabled?: ?boolean,
-    dispatchTransaction?: ?(tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    onReady?: ?(view: EditorView) => void,
-    readOnly?: ?boolean,
-  };
-
-  state = {
-    expanded: false,
-    wrapped: null,
-  };
-
-  render(): React.Element<any> {
-    const { wrapped, expanded } = this.state;
-    const className = cx('czi-editor-toolbar', { expanded, wrapped });
-    const wrappedButton = wrapped ? (
-      <CustomButton
-        active={expanded}
-        className="czi-editor-toolbar-expand-button"
-        icon={Icon.get('more_horiz')}
-        key="expand"
-        onClick={this._toggleExpansion}
-        title="More"
-        value={expanded}
-      />
-    ) : null;
-
-    // Start with static button controls and append any button groups
-    // supplied by plugins
-    const commandGroups = COMMAND_GROUPS.concat(
-      (this.props.editorState.plugins || [])
-        // This should have been a simple property instead of a function:
-        //  p => p.buttonGroup
-        // but changing it now would mean finding every plugin that was
-        // implemented this way.
-        .map((p) => p.initButtonCommands && p.initButtonCommands())
-        .filter(Boolean)
-    )
-      .map(this._renderButtonsGroup)
-      .filter(Boolean);
-
-    return (
-      <div className={className}>
-        <div className="czi-editor-toolbar-flex">
-          <div className="czi-editor-toolbar-body">
-            <div
-              className="czi-editor-toolbar-body-content"
-              ref={this._onBodyRef}
-            >
-              <i className="czi-editor-toolbar-wrapped-anchor" />
-              {commandGroups}
-              <div className="czi-editor-toolbar-background">
-                <div className="czi-editor-toolbar-background-line" />
-                <div className="czi-editor-toolbar-background-line" />
-                <div className="czi-editor-toolbar-background-line" />
-                <div className="czi-editor-toolbar-background-line" />
-                <div className="czi-editor-toolbar-background-line" />
-              </div>
-              <i className="czi-editor-toolbar-wrapped-anchor" />
-            </div>
-            {wrappedButton}
-          </div>
-          <div className="czi-editor-toolbar-footer" />
-        </div>
-      </div>
-    );
-  }
-
-  _renderButtonsGroup = (group: Object, index: number): React.Element<any> => {
-    const buttons = Object.keys(group)
-      .map((label) => {
-        const obj = group[label];
-
-        if (isReactClass(obj)) {
-          // JSX requies the component to be named with upper camel case.
-          const ThatComponent = obj;
-          const { editorState, editorView, dispatchTransaction } = this.props;
-          return (
-            <ThatComponent
-              dispatch={dispatchTransaction}
-              editorState={editorState}
-              editorView={editorView}
-              key={label}
-            />
-          );
-        } else if (obj instanceof UICommand) {
-          return this._renderButton(label, obj);
-        } else if (Array.isArray(obj)) {
-          return this._renderMenuButton(label, obj);
-        } else {
-          return null;
-        }
-      })
-      .filter(Boolean);
-    return (
-      <div className="czi-custom-buttons" key={'g' + String(index)}>
-        {buttons}
-      </div>
-    );
-  };
-
-  _renderMenuButton = (
-    label: string,
-    commandGroups: Array<{ [string]: UICommand }>
-  ): React.Element<any> => {
-    const {
-      editorState,
-      editorView,
-      disabled,
-      dispatchTransaction,
-    } = this.props;
-    const { icon, title } = parseLabel(label);
-    return (
-      <CommandMenuButton
-        commandGroups={commandGroups}
-        disabled={disabled}
-        dispatch={dispatchTransaction}
-        editorState={editorState}
-        editorView={editorView}
-        icon={icon}
-        key={label}
-        label={icon ? null : title}
-        title={title}
-      />
-    );
-  };
-
-  _renderButton = (label: string, command: UICommand): React.Element<any> => {
-    const {
-      disabled,
-      editorState,
-      editorView,
-      dispatchTransaction,
-    } = this.props;
-    const { icon, title } = parseLabel(label);
-
-    return (
-      <CommandButton
-        command={command}
-        disabled={disabled}
-        dispatch={dispatchTransaction}
-        editorState={editorState}
-        editorView={editorView}
-        icon={icon}
-        key={label}
-        label={icon ? null : title}
-        title={title}
-      />
-    );
-  };
-
-  _onBodyRef = (ref: any): void => {
-    if (ref) {
-      this._body = ref;
-      // Mounting
-      const el = ReactDOM.findDOMNode(ref);
-      if (el instanceof HTMLElement) {
-        ResizeObserver.observe(el, this._checkIfContentIsWrapped);
-      }
-    } else {
-      // Unmounting.
-      const el = this._body && ReactDOM.findDOMNode(this._body);
-      if (el instanceof HTMLElement) {
-        ResizeObserver.unobserve(el);
-      }
-      this._body = null;
-    }
-  };
-
-  _checkIfContentIsWrapped = (): void => {
-    const ref = this._body;
-    const el: any = ref && ReactDOM.findDOMNode(ref);
-    const startAnchor = el && el.firstChild;
-    const endAnchor = el && el.lastChild;
-    if (startAnchor && endAnchor) {
-      const wrapped = startAnchor.offsetTop < endAnchor.offsetTop;
-      this.setState({ wrapped });
-    }
-  };
-
-  _toggleExpansion = (expanded: boolean): void => {
-    this.setState({ expanded: !expanded });
-  };
-}
-
-export default EditorToolbar;
+// @flow
+
+import cx from 'classnames';
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import CommandButton from './CommandButton.js';
+import CommandMenuButton from './CommandMenuButton.js';
+import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import { COMMAND_GROUPS, parseLabel } from './EditorToolbarConfig.js';
+import Icon from './Icon.js';
+import ResizeObserver from './ResizeObserver.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import isReactClass from './isReactClass.js';
+
+import './czi-editor-toolbar.css';
+
+class EditorToolbar extends React.PureComponent<any, any> {
+  _body = null;
+
+  props: {
+    disabled?: ?boolean,
+    dispatchTransaction?: ?(tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+    onReady?: ?(view: EditorView) => void,
+    readOnly?: ?boolean,
+  };
+
+  state = {
+    expanded: false,
+    wrapped: null,
+  };
+
+  render(): React.Element<any> {
+    const { wrapped, expanded } = this.state;
+    const className = cx('czi-editor-toolbar', { expanded, wrapped });
+    const wrappedButton = wrapped ? (
+      <CustomButton
+        active={expanded}
+        className="czi-editor-toolbar-expand-button"
+        icon={Icon.get('more_horiz')}
+        key="expand"
+        onClick={this._toggleExpansion}
+        title="More"
+        value={expanded}
+      />
+    ) : null;
+
+    // Start with static button controls and append any button groups
+    // supplied by plugins
+    const commandGroups = COMMAND_GROUPS.concat(
+      (this.props.editorState.plugins || [])
+        // This should have been a simple property instead of a function:
+        //  p => p.buttonGroup
+        // but changing it now would mean finding every plugin that was
+        // implemented this way.
+        .map((p) => p.initButtonCommands?.())
+        .filter(Boolean)
+    )
+      .map(this._renderButtonsGroup)
+      .filter(Boolean);
+
+    return (
+      <div className={className}>
+        <div className="czi-editor-toolbar-flex">
+          <div className="czi-editor-toolbar-body">
+            <div
+              className="czi-editor-toolbar-body-content"
+              ref={this._onBodyRef}
+            >
+              <i className="czi-editor-toolbar-wrapped-anchor" />
+              {commandGroups}
+              <div className="czi-editor-toolbar-background">
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+              </div>
+              <i className="czi-editor-toolbar-wrapped-anchor" />
+            </div>
+            {wrappedButton}
+          </div>
+          <div className="czi-editor-toolbar-footer" />
+        </div>
+      </div>
+    );
+  }
+
+  _renderButtonsGroup = (group: Object, index: number): React.Element<any> => {
+    const buttons = Object.keys(group)
+      .map((label) => {
+        const obj = group[label];
+
+        if (isReactClass(obj)) {
+          // JSX requies the component to be named with upper camel case.
+          const ThatComponent = obj;
+          const { editorState, editorView, dispatchTransaction } = this.props;
+          return (
+            <ThatComponent
+              dispatch={dispatchTransaction}
+              editorState={editorState}
+              editorView={editorView}
+              key={label}
+            />
+          );
+        } else if (obj instanceof UICommand) {
+          return this._renderButton(label, obj);
+        } else if (Array.isArray(obj)) {
+          return this._renderMenuButton(label, obj);
+        } else {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    return (
+      <div className="czi-custom-buttons" key={'g' + String(index)}>
+        {buttons}
+      </div>
+    );
+  };
+
+  _renderMenuButton = (
+    label: string,
+    commandGroups: Array<{ [string]: UICommand }>
+  ): React.Element<any> => {
+    const { editorState, editorView, disabled, dispatchTransaction } =
+      this.props;
+    const { icon, title } = parseLabel(label);
+    return (
+      <CommandMenuButton
+        commandGroups={commandGroups}
+        disabled={disabled}
+        dispatch={dispatchTransaction}
+        editorState={editorState}
+        editorView={editorView}
+        icon={icon}
+        key={label}
+        label={icon ? null : title}
+        title={title}
+      />
+    );
+  };
+
+  _renderButton = (label: string, command: UICommand): React.Element<any> => {
+    const { disabled, editorState, editorView, dispatchTransaction } =
+      this.props;
+    const { icon, title } = parseLabel(label);
+
+    return (
+      <CommandButton
+        command={command}
+        disabled={disabled}
+        dispatch={dispatchTransaction}
+        editorState={editorState}
+        editorView={editorView}
+        icon={icon}
+        key={label}
+        label={icon ? null : title}
+        title={title}
+      />
+    );
+  };
+
+  _onBodyRef = (ref: HTMLElement): void => {
+    if (ref) {
+      this._body = ref;
+      // Mounting
+      ResizeObserver.observe(ref, this._checkIfContentIsWrapped);
+    } else if (this._body) {
+      // Unmounting
+      ResizeObserver.unobserve(this._body);
+      this._body = null;
+    }
+  };
+
+  _checkIfContentIsWrapped = (): void => {
+    const ref = this._body;
+
+    if (ref) {
+      const startAnchor = ref.firstChild;
+      const endAnchor = ref.lastChild;
+
+      if (startAnchor && endAnchor) {
+        const wrapped = startAnchor.offsetTop < endAnchor.offsetTop;
+        this.setState({ wrapped });
+      }
+    }
+  };
+
+  _toggleExpansion = (expanded: boolean): void => {
+    this.setState({ expanded: !expanded });
+  };
+}
+
+export default EditorToolbar;

package/ui/EditorToolbarConfig.js

@@ -1,9 +1,9 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // eslint-disable-next-line no-unused-vars
 import * as React from 'react';
 import * as EditorCommands from '../EditorCommands.js';
@@ -13,7 +13,7 @@ import ListTypeCommandButton from './ListTypeCommandButton.js';
 import Icon from './Icon.js';
 var ICON_LABEL_PATTERN = /\[([A-Za-z_\d]+)\](.*)/;
 export function parseLabel(input) {
-  var matched = input.match(ICON_LABEL_PATTERN);
+  var matched = ICON_LABEL_PATTERN.exec(input);
   if (matched) {
     var _matched = _slicedToArray(matched, 3),
       // eslint-disable-next-line no-unused-vars