@modusoperandi/licit 0.1.4 → 0.1.8

package/dist/ui/ListItemNodeView.js.flow

@@ -1,98 +1,98 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-import { Decoration, EditorView } from 'prosemirror-view';
-import { MARK_TEXT_COLOR, MARK_FONT_SIZE } from '../MarkNames';
-
-// This implements the `NodeView` interface
-// https://prosemirror.net/docs/ref/#view.NodeView
-class ListItemNodeView {
-  // This implements the `NodeView` interface
-  // The outer DOM node that represents the list item element.
-  dom: HTMLLIElement;
-
-  // This implements the `NodeView` interface.
-  // The DOM node that should hold the node's content.
-  contentDOM: HTMLLIElement;
-
-  _nodeUpdated: ?Node;
-
-  constructor(
-    node: Node,
-    editorView: EditorView,
-    getPos: () => number,
-    decorations: Array<Decoration>
-  ) {
-    const dom = document.createElement('li');
-    this.dom = dom;
-    this.contentDOM = dom;
-    this._updateDOM(node);
-  }
-
-  // This implements the `NodeView` interface.
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    return this._updateDOM(node);
-  }
-
-  _updateDOM(node: Node): boolean {
-    if (this._nodeUpdated === node) {
-      return false;
-    }
-
-    this._nodeUpdated = node;
-
-    const dom = this.dom;
-    // According to `ListItemNodeSpec`, a valid list item has the following
-    // structure: `li > paragraph > text`.
-    const paragraph = node.firstChild;
-    const initialContent = paragraph ? paragraph.firstChild : null;
-
-    // This resolves the styles for the counter by examines the marks for the
-    // first text node of the list item.
-    const marks =
-      initialContent && initialContent.isText && initialContent.textContent
-        ? initialContent.marks
-        : null;
-
-    let cssColor;
-    let cssFontSize;
-    let cssText = '';
-    if (Array.isArray(marks)) {
-      marks.forEach((mark) => {
-        const { attrs, type } = mark;
-        switch (type.name) {
-          case MARK_TEXT_COLOR:
-            cssColor = attrs.color;
-            break;
-          case MARK_FONT_SIZE:
-            cssFontSize = attrs.pt;
-            break;
-        }
-      });
-    }
-
-    // The counter of the list item is a pseudo-element that uses
-    // the CSS variables (e.g `--czi-list-style-color`) for styling.
-    // This defines the CSS variables scoped for the pseudo-element.
-    // See `src/ui/czi-list.css` for more details.
-    if (cssColor) {
-      cssText += `--czi-list-style-color: ${cssColor};`;
-    }
-
-    if (cssFontSize) {
-      cssText += `--czi-list-style-font-size: ${cssFontSize}pt;`;
-    }
-
-    dom.style.cssText = cssText;
-
-    const { align } = node.attrs;
-    if (align) {
-      dom.setAttribute('data-align', align);
-    } else {
-      dom.removeAttribute('data-align');
-    }
-    return true;
-  }
-}
-
-export default ListItemNodeView;
+// @flow
+
+import { Node } from 'prosemirror-model';
+import { Decoration, EditorView } from 'prosemirror-view';
+import { MARK_TEXT_COLOR, MARK_FONT_SIZE } from '../MarkNames';
+
+// This implements the `NodeView` interface
+// https://prosemirror.net/docs/ref/#view.NodeView
+class ListItemNodeView {
+  // This implements the `NodeView` interface
+  // The outer DOM node that represents the list item element.
+  dom: HTMLLIElement;
+
+  // This implements the `NodeView` interface.
+  // The DOM node that should hold the node's content.
+  contentDOM: HTMLLIElement;
+
+  _nodeUpdated: ?Node;
+
+  constructor(
+    node: Node,
+    editorView: EditorView,
+    getPos: () => number,
+    decorations: Array<Decoration>
+  ) {
+    const dom = document.createElement('li');
+    this.dom = dom;
+    this.contentDOM = dom;
+    this._updateDOM(node);
+  }
+
+  // This implements the `NodeView` interface.
+  update(node: Node, decorations: Array<Decoration>): boolean {
+    return this._updateDOM(node);
+  }
+
+  _updateDOM(node: Node): boolean {
+    if (this._nodeUpdated === node) {
+      return false;
+    }
+
+    this._nodeUpdated = node;
+
+    const dom = this.dom;
+    // According to `ListItemNodeSpec`, a valid list item has the following
+    // structure: `li > paragraph > text`.
+    const paragraph = node.firstChild;
+    const initialContent = paragraph ? paragraph.firstChild : null;
+
+    // This resolves the styles for the counter by examines the marks for the
+    // first text node of the list item.
+    const marks =
+      initialContent && initialContent.isText && initialContent.textContent
+        ? initialContent.marks
+        : null;
+
+    let cssColor;
+    let cssFontSize;
+    let cssText = '';
+    if (Array.isArray(marks)) {
+      marks.forEach((mark) => {
+        const { attrs, type } = mark;
+        switch (type.name) {
+          case MARK_TEXT_COLOR:
+            cssColor = attrs.color;
+            break;
+          case MARK_FONT_SIZE:
+            cssFontSize = attrs.pt;
+            break;
+        }
+      });
+    }
+
+    // The counter of the list item is a pseudo-element that uses
+    // the CSS variables (e.g `--czi-list-style-color`) for styling.
+    // This defines the CSS variables scoped for the pseudo-element.
+    // See `src/ui/czi-list.css` for more details.
+    if (cssColor) {
+      cssText += `--czi-list-style-color: ${cssColor};`;
+    }
+
+    if (cssFontSize) {
+      cssText += `--czi-list-style-font-size: ${cssFontSize}pt;`;
+    }
+
+    dom.style.cssText = cssText;
+
+    const { align } = node.attrs;
+    if (align) {
+      dom.setAttribute('data-align', align);
+    } else {
+      dom.removeAttribute('data-align');
+    }
+    return true;
+  }
+}
+
+export default ListItemNodeView;

package/dist/ui/ListTypeButton.js.flow

@@ -1,131 +1,131 @@
-// @flow
-// [FS] IRAD-1039 2020-09-23
-// Command button to handle different type of list types
-// Need to add Icons instead of label
-
-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 CustomButton from './CustomButton';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import createPopUp from './createPopUp';
-import uuid from './uuid';
-import ListTypeMenu from './ListTypeMenu';
-import './czi-custom-menu-button.css';
-
-class ListTypeButton 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,
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render(): React.Element<any> {
-    // editorState,
-    // editorView,
-    const {
-      className,
-      label,
-      commandGroups,
-      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 = false;
-            //   !editorView || !command.isEnabled(editorState, editorView);
-          } catch (ex) {
-            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 && menu.close();
-  };
-
-  _showMenu = (): void => {
-    const menu = this._menu;
-    const menuProps = {
-      ...this.props,
-      onCommand: this._onCommand,
-    };
-    if (menu) {
-      menu.update(menuProps);
-    } else {
-      this._menu = createPopUp(ListTypeMenu, 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 ListTypeButton;
+// @flow
+// [FS] IRAD-1039 2020-09-23
+// Command button to handle different type of list types
+// Need to add Icons instead of label
+
+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 CustomButton from './CustomButton';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import createPopUp from './createPopUp';
+import uuid from './uuid';
+import ListTypeMenu from './ListTypeMenu';
+import './czi-custom-menu-button.css';
+
+class ListTypeButton 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,
+  };
+
+  _menu = null;
+  _id = uuid();
+
+  state = {
+    expanded: false,
+  };
+
+  render(): React.Element<any> {
+    // editorState,
+    // editorView,
+    const {
+      className,
+      label,
+      commandGroups,
+      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 = false;
+            //   !editorView || !command.isEnabled(editorState, editorView);
+          } catch (ex) {
+            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 && menu.close();
+  };
+
+  _showMenu = (): void => {
+    const menu = this._menu;
+    const menuProps = {
+      ...this.props,
+      onCommand: this._onCommand,
+    };
+    if (menu) {
+      menu.update(menuProps);
+    } else {
+      this._menu = createPopUp(ListTypeMenu, 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 ListTypeButton;

package/dist/ui/ListTypeCommandButton.js

@@ -74,7 +74,7 @@ class ListTypeCommandButton extends React.PureComponent {
     if (editorState && editorView) {
       // [FS] IRAD-1317 2021-05-06
       // To disable the list menu when select an image
-      disabled = (0, _ListToggleCommand.hasCustomNumberedList)(editorState) || (0, _ListToggleCommand.hasImageNode)(editorState);
+      disabled = (0, _ListToggleCommand.hasImageNode)(editorState);
       disabled = editorView.disabled || disabled ? true : false;
     }
 

package/dist/ui/ListTypeCommandButton.js.flow

@@ -1,86 +1,85 @@
-// [FS] IRAD-1039 2020-09-23
-// Command button to handle different type of list types
-// Need to add Icons instead of label
-import * as React from 'react';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import {
-  ListToggleCommand,
-  hasCustomNumberedList,
-  hasImageNode,
-} from '../ListToggleCommand';
-import ListTypeButton from './ListTypeButton';
-
-const LIST_TYPE_NAMES = [
-  {
-    name: 'decimal',
-    label: '1.',
-  },
-  {
-    name: 'x.x.x',
-    label: '1.1.1',
-  },
-  {
-    name: 'num_bracket',
-    label: '1)',
-  },
-  {
-    name: 'num_bracket_closed',
-    label: '(1)',
-  },
-  {
-    name: 'upper_alpha_bracket',
-    label: 'A)',
-  },
-  {
-    name: 'lower_alpha_bracket',
-    label: 'a)',
-  },
-  {
-    name: 'lower_alpha_bracket_closed',
-    label: '(a)',
-  },
-];
-const LIST_TYPE_COMMANDS: Object = {
-  ['decimal']: new ListToggleCommand(true, 'decimal'),
-};
-LIST_TYPE_NAMES.forEach((obj) => {
-  LIST_TYPE_COMMANDS[obj.name] = new ListToggleCommand(true, obj.name);
-  LIST_TYPE_COMMANDS[obj.name].label = obj.label;
-});
-
-const COMMAND_GROUPS = [LIST_TYPE_COMMANDS];
-
-class ListTypeCommandButton extends React.PureComponent<any, any> {
-  props: {
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-  };
-
-  render(): React.Element<any> {
-    const { dispatch, editorState, editorView } = this.props;
-    let disabled = false;
-    if (editorState && editorView) {
-      // [FS] IRAD-1317 2021-05-06
-      // To disable the list menu when select an image
-      disabled =
-        hasCustomNumberedList(editorState) || hasImageNode(editorState);
-      disabled = editorView.disabled || disabled ? true : false;
-    }
-    return (
-      <ListTypeButton
-        className="width-50 czi-icon format_list_numbered"
-        commandGroups={COMMAND_GROUPS}
-        disabled={disabled}
-        dispatch={dispatch}
-        editorState={editorState}
-        editorView={editorView}
-        icon={'format_list_numbered'}
-      />
-    );
-  }
-}
-
-export default ListTypeCommandButton;
+// [FS] IRAD-1039 2020-09-23
+// Command button to handle different type of list types
+// Need to add Icons instead of label
+import * as React from 'react';
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import {
+  ListToggleCommand,
+  hasImageNode,
+} from '../ListToggleCommand';
+import ListTypeButton from './ListTypeButton';
+
+const LIST_TYPE_NAMES = [
+  {
+    name: 'decimal',
+    label: '1.',
+  },
+  {
+    name: 'x.x.x',
+    label: '1.1.1',
+  },
+  {
+    name: 'num_bracket',
+    label: '1)',
+  },
+  {
+    name: 'num_bracket_closed',
+    label: '(1)',
+  },
+  {
+    name: 'upper_alpha_bracket',
+    label: 'A)',
+  },
+  {
+    name: 'lower_alpha_bracket',
+    label: 'a)',
+  },
+  {
+    name: 'lower_alpha_bracket_closed',
+    label: '(a)',
+  },
+];
+const LIST_TYPE_COMMANDS: Object = {
+  ['decimal']: new ListToggleCommand(true, 'decimal'),
+};
+LIST_TYPE_NAMES.forEach((obj) => {
+  LIST_TYPE_COMMANDS[obj.name] = new ListToggleCommand(true, obj.name);
+  LIST_TYPE_COMMANDS[obj.name].label = obj.label;
+});
+
+const COMMAND_GROUPS = [LIST_TYPE_COMMANDS];
+
+class ListTypeCommandButton extends React.PureComponent<any, any> {
+  props: {
+    dispatch: (tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+  };
+
+  render(): React.Element<any> {
+    const { dispatch, editorState, editorView } = this.props;
+    let disabled = false;
+    if (editorState && editorView) {
+      // [FS] IRAD-1317 2021-05-06
+      // To disable the list menu when select an image
+      disabled =
+       hasImageNode(editorState);
+      disabled = editorView.disabled || disabled ? true : false;
+    }
+    return (
+      <ListTypeButton
+        className="width-50 czi-icon format_list_numbered"
+        commandGroups={COMMAND_GROUPS}
+        disabled={disabled}
+        dispatch={dispatch}
+        editorState={editorState}
+        editorView={editorView}
+        icon={'format_list_numbered'}
+      />
+    );
+  }
+}
+
+export default ListTypeCommandButton;