@modusoperandi/licit 1.4.3 → 1.4.6

package/ui/CommandButton.js.flow

@@ -1,68 +1,68 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CommandButton extends React.PureComponent<any, any> {
-  props: {
-    className?: ?string,
-    command: UICommand,
-    disabled?: ?boolean,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    icon?: string | React.Element<any> | null,
-    label?: string | React.Element<any> | null,
-    title?: ?string,
-  };
-
-  render(): React.Element<any> {
-    const {
-      label,
-      className,
-      command,
-      editorState,
-      icon,
-      title,
-      editorView,
-    } = this.props;
-    let disabled = this.props.disabled;
-    if (!!disabled === false) {
-      disabled = !editorView || !command.isEnabled(editorState, editorView, '');
-    }
-    return (
-      <CustomButton
-        active={command.isActive(editorState)}
-        className={className}
-        disabled={disabled}
-        icon={icon}
-        label={label}
-        onClick={this._onUIEnter}
-        onMouseEnter={this._onUIEnter}
-        title={title}
-        value={command}
-      />
-    );
-  }
-
-  _onUIEnter = (
-    command: UICommand,
-    event: SyntheticEvent<HTMLButtonElement>
-  ): void => {
-    if (command.shouldRespondToUIEvent(event)) {
-      this._execute(command, event);
-    }
-  };
-
-  _execute = (value: any, event: SyntheticEvent<HTMLButtonElement>): void => {
-    const { command, editorState, dispatch, editorView } = this.props;
-    command.execute(editorState, dispatch, editorView, event);
-  };
-}
-
-export default CommandButton;
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+class CommandButton extends React.PureComponent<any, any> {
+  props: {
+    className?: ?string,
+    command: UICommand,
+    disabled?: ?boolean,
+    dispatch: (tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+    icon?: string | React.Element<any> | null,
+    label?: string | React.Element<any> | null,
+    title?: ?string,
+  };
+
+  render(): React.Element<any> {
+    const {
+      label,
+      className,
+      command,
+      editorState,
+      icon,
+      title,
+      editorView,
+    } = this.props;
+    let disabled = this.props.disabled;
+    if (!!disabled === false) {
+      disabled = !editorView || !command.isEnabled(editorState, editorView, '');
+    }
+    return (
+      <CustomButton
+        active={command.isActive(editorState)}
+        className={className}
+        disabled={disabled}
+        icon={icon}
+        label={label}
+        onClick={this._onUIEnter}
+        onMouseEnter={this._onUIEnter}
+        title={title}
+        value={command}
+      />
+    );
+  }
+
+  _onUIEnter = (
+    command: UICommand,
+    event: SyntheticEvent<HTMLButtonElement>
+  ): void => {
+    if (command.shouldRespondToUIEvent(event)) {
+      this._execute(command, event);
+    }
+  };
+
+  _execute = (value: any, event: SyntheticEvent<HTMLButtonElement>): void => {
+    const { command, editorState, dispatch, editorView } = this.props;
+    command.execute(editorState, dispatch, editorView, event);
+  };
+}
+
+export default CommandButton;

package/ui/CommandMenu.js.flow

@@ -1,74 +1,74 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import CustomMenu from './CustomMenu.js';
-import CustomMenuItem from './CustomMenuItem.js';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CommandMenu extends React.PureComponent<any, any> {
-  _activeCommand: ?UICommand = null;
-
-  props: {
-    commandGroups: Array<{ [string]: UICommand }>,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    onCommand: ?Function,
-  };
-
-  render(): React.Element<any> {
-    const { commandGroups, editorState, editorView } = this.props;
-    const children = [];
-    const jj = commandGroups.length - 1;
-
-    commandGroups.forEach((group, ii) => {
-      Object.keys(group).forEach((label) => {
-        const command = group[label];
-        let disabled = true;
-        try {
-          // Disable the Clear style menu when no styles applied to a paragraph
-          disabled =
-            !editorView || !command.isEnabled(editorState, editorView, label);
-        } catch {
-          disabled = false;
-        }
-        children.push(
-          <CustomMenuItem
-            active={command.isActive(editorState)}
-            disabled={disabled}
-            key={label}
-            label={command.renderLabel(editorState) || label}
-            onClick={this._onUIEnter}
-            onMouseEnter={this._onUIEnter}
-            value={command}
-          />
-        );
-      });
-      if (ii !== jj) {
-        children.push(<CustomMenuItem.Separator key={`${String(ii)}-hr`} />);
-      }
-    });
-    return <CustomMenu>{children}</CustomMenu>;
-  }
-
-  _onUIEnter = (command: UICommand, event: SyntheticEvent<>): void => {
-    if (command.shouldRespondToUIEvent(event)) {
-      this._activeCommand && this._activeCommand.cancel();
-      this._activeCommand = command;
-      this._execute(command, event);
-    }
-  };
-
-  _execute = (command: UICommand, e: SyntheticEvent<>) => {
-    const { dispatch, editorState, editorView, onCommand } = this.props;
-    if (command.execute(editorState, dispatch, editorView, e)) {
-      onCommand?.();
-    }
-  };
-}
-
-export default CommandMenu;
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import CustomMenu from './CustomMenu.js';
+import CustomMenuItem from './CustomMenuItem.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+class CommandMenu extends React.PureComponent<any, any> {
+  _activeCommand: ?UICommand = null;
+
+  props: {
+    commandGroups: Array<{ [string]: UICommand }>,
+    dispatch: (tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+    onCommand: ?Function,
+  };
+
+  render(): React.Element<any> {
+    const { commandGroups, editorState, editorView } = this.props;
+    const children = [];
+    const jj = commandGroups.length - 1;
+
+    commandGroups.forEach((group, ii) => {
+      Object.keys(group).forEach((label) => {
+        const command = group[label];
+        let disabled = true;
+        try {
+          // Disable the Clear style menu when no styles applied to a paragraph
+          disabled =
+            !editorView || !command.isEnabled(editorState, editorView, label);
+        } catch {
+          disabled = false;
+        }
+        children.push(
+          <CustomMenuItem
+            active={command.isActive(editorState)}
+            disabled={disabled}
+            key={label}
+            label={command.renderLabel(editorState) || label}
+            onClick={this._onUIEnter}
+            onMouseEnter={this._onUIEnter}
+            value={command}
+          />
+        );
+      });
+      if (ii !== jj) {
+        children.push(<CustomMenuItem.Separator key={`${String(ii)}-hr`} />);
+      }
+    });
+    return <CustomMenu>{children}</CustomMenu>;
+  }
+
+  _onUIEnter = (command: UICommand, event: SyntheticEvent<>): void => {
+    if (command.shouldRespondToUIEvent(event)) {
+      this._activeCommand && this._activeCommand.cancel();
+      this._activeCommand = command;
+      this._execute(command, event);
+    }
+  };
+
+  _execute = (command: UICommand, e: SyntheticEvent<>) => {
+    const { dispatch, editorState, editorView, onCommand } = this.props;
+    if (command.execute(editorState, dispatch, editorView, e)) {
+      onCommand?.();
+    }
+  };
+}
+
+export default CommandMenu;

package/ui/CommandMenuButton.js.flow

@@ -1,128 +1,128 @@
-// @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 CommandMenu from './CommandMenu.js';
-import { CustomButton, createPopUp } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import uuid from './uuid.js';
-
-class CommandMenuButton extends React.PureComponent<any, any> {
-  props: {
-    className?: ?string,
-    commandGroups: Array<{ [string]: UICommand }>,
-    disabled?: ?boolean,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    icon?: string | React.Element<any> | null,
-    label?: string | React.Element<any> | null,
-    title?: ?string,
-    parent?: ?React.Element<any>, // the parent command button
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render(): React.Element<any> {
-    const {
-      className,
-      label,
-      commandGroups,
-      editorState,
-      editorView,
-      icon,
-      disabled,
-      title,
-    } = this.props;
-    const enabled =
-      !disabled &&
-      commandGroups.some((group, ii) => {
-        return Object.keys(group).some((label) => {
-          const command = group[label];
-          let disabledVal = true;
-          try {
-            disabledVal =
-              !editorView || !command.isEnabled(editorState, editorView, label);
-          } catch {
-            disabledVal = false;
-          }
-          return !disabledVal;
-        });
-      });
-
-    const { expanded } = this.state;
-    const buttonClassName = cx(className, {
-      'czi-custom-menu-button': true,
-      expanded,
-    });
-
-    return (
-      <CustomButton
-        className={buttonClassName}
-        disabled={!enabled}
-        icon={icon}
-        id={this._id}
-        label={label}
-        onClick={this._onClick}
-        title={title}
-      />
-    );
-  }
-
-  componentWillUnmount(): void {
-    this._hideMenu();
-  }
-
-  _onClick = (): void => {
-    const expanded = !this.state.expanded;
-    this.setState({
-      expanded,
-    });
-    expanded ? this._showMenu() : this._hideMenu();
-  };
-
-  _hideMenu = (): void => {
-    const menu = this._menu;
-    this._menu = null;
-    menu?.close();
-  };
-
-  _showMenu = (): void => {
-    const menu = this._menu;
-    const menuProps = {
-      ...this.props,
-      onCommand: this._onCommand,
-    };
-    if (menu) {
-      menu.update(menuProps);
-    } else {
-      this._menu = createPopUp(CommandMenu, menuProps, {
-        anchor: document.getElementById(this._id),
-        onClose: this._onClose,
-      });
-    }
-  };
-
-  _onCommand = (): void => {
-    this.setState({ expanded: false });
-    this._hideMenu();
-  };
-
-  _onClose = (): void => {
-    if (this._menu) {
-      this.setState({ expanded: false });
-      this._menu = null;
-    }
-  };
-}
-
-export default CommandMenuButton;
+// @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 CommandMenu from './CommandMenu.js';
+import { CustomButton, createPopUp } from '@modusoperandi/licit-ui-commands';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import uuid from './uuid.js';
+
+class CommandMenuButton extends React.PureComponent<any, any> {
+  props: {
+    className?: ?string,
+    commandGroups: Array<{ [string]: UICommand }>,
+    disabled?: ?boolean,
+    dispatch: (tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+    icon?: string | React.Element<any> | null,
+    label?: string | React.Element<any> | null,
+    title?: ?string,
+    parent?: ?React.Element<any>, // the parent command button
+  };
+
+  _menu = null;
+  _id = uuid();
+
+  state = {
+    expanded: false,
+  };
+
+  render(): React.Element<any> {
+    const {
+      className,
+      label,
+      commandGroups,
+      editorState,
+      editorView,
+      icon,
+      disabled,
+      title,
+    } = this.props;
+    const enabled =
+      !disabled &&
+      commandGroups.some((group, ii) => {
+        return Object.keys(group).some((label) => {
+          const command = group[label];
+          let disabledVal = true;
+          try {
+            disabledVal =
+              !editorView || !command.isEnabled(editorState, editorView, label);
+          } catch {
+            disabledVal = false;
+          }
+          return !disabledVal;
+        });
+      });
+
+    const { expanded } = this.state;
+    const buttonClassName = cx(className, {
+      'czi-custom-menu-button': true,
+      expanded,
+    });
+
+    return (
+      <CustomButton
+        className={buttonClassName}
+        disabled={!enabled}
+        icon={icon}
+        id={this._id}
+        label={label}
+        onClick={this._onClick}
+        title={title}
+      />
+    );
+  }
+
+  componentWillUnmount(): void {
+    this._hideMenu();
+  }
+
+  _onClick = (): void => {
+    const expanded = !this.state.expanded;
+    this.setState({
+      expanded,
+    });
+    expanded ? this._showMenu() : this._hideMenu();
+  };
+
+  _hideMenu = (): void => {
+    const menu = this._menu;
+    this._menu = null;
+    menu?.close();
+  };
+
+  _showMenu = (): void => {
+    const menu = this._menu;
+    const menuProps = {
+      ...this.props,
+      onCommand: this._onCommand,
+    };
+    if (menu) {
+      menu.update(menuProps);
+    } else {
+      this._menu = createPopUp(CommandMenu, menuProps, {
+        anchor: document.getElementById(this._id),
+        onClose: this._onClose,
+      });
+    }
+  };
+
+  _onCommand = (): void => {
+    this.setState({ expanded: false });
+    this._hideMenu();
+  };
+
+  _onClose = (): void => {
+    if (this._menu) {
+      this.setState({ expanded: false });
+      this._menu = null;
+    }
+  };
+}
+
+export default CommandMenuButton;

package/ui/CustomEditorView.js.flow

@@ -1,29 +1,29 @@
-// @flow
-
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import type { DirectEditorProps, EditorRuntime } from '../Types.js';
-
-
-// https://github.com/ProseMirror/prosemirror-view/blob/master/src/index.js
-class CustomEditorView extends EditorView {
-  disabled: boolean;
-  placeholder: ?(string | React.Element<any>);
-  readOnly: boolean;
-  runtime: ?EditorRuntime;
-  constructor(place: HTMLElement, props: DirectEditorProps) {
-    super(place, props);
-    this.runtime = null;
-    this.readOnly = true;
-    this.disabled = true;
-    this.placeholder = null;
-  }
-
-  destroy() {
-    super.destroy();
-    this._props = {};
-  }
-}
-
-export default CustomEditorView;
+// @flow
+
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import type { DirectEditorProps, EditorRuntime } from '../Types.js';
+
+
+// https://github.com/ProseMirror/prosemirror-view/blob/master/src/index.js
+class CustomEditorView extends EditorView {
+  disabled: boolean;
+  placeholder: ?(string | React.Element<any>);
+  readOnly: boolean;
+  runtime: ?EditorRuntime;
+  constructor(place: HTMLElement, props: DirectEditorProps) {
+    super(place, props);
+    this.runtime = null;
+    this.readOnly = true;
+    this.disabled = true;
+    this.placeholder = null;
+  }
+
+  destroy() {
+    super.destroy();
+    this._props = {};
+  }
+}
+
+export default CustomEditorView;

package/ui/CustomMenu.js.flow

@@ -1,14 +1,14 @@
-// @flow
-
-import * as React from 'react';
-
-class CustomMenu extends React.Component<any, any> {
-  render(): React.Element<any> {
-    const { children } = this.props;
-    return (
-      <div className="czi-custom-menu czi-custom-scrollbar">{children}</div>
-    );
-  }
-}
-
-export default CustomMenu;
+// @flow
+
+import * as React from 'react';
+
+class CustomMenu extends React.Component<any, any> {
+  render(): React.Element<any> {
+    const { children } = this.props;
+    return (
+      <div className="czi-custom-menu czi-custom-scrollbar">{children}</div>
+    );
+  }
+}
+
+export default CustomMenu;