@modusoperandi/licit 0.1.4 → 0.1.8

package/src/MathEditCommand.js

@@ -1,110 +1,110 @@
-// @flow
-
-import { Fragment, Schema } from 'prosemirror-model';
-import { EditorState } from 'prosemirror-state';
-import { TextSelection } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-// eslint-disable-next-line no-unused-vars
-import * as React from 'react';
-
-import {
-  hideCursorPlaceholder,
-  showCursorPlaceholder,
-} from './CursorPlaceholderPlugin';
-import { MATH } from './NodeNames';
-import MathEditor from './ui/MathEditor';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import createPopUp from './ui/createPopUp';
-
-function insertMath(tr: Transform, schema: Schema, latex: ?string): Transform {
-  const { selection } = tr;
-  if (!selection) {
-    return tr;
-  }
-  const { from, to } = selection;
-  if (from !== to) {
-    return tr;
-  }
-
-  const image = schema.nodes[MATH];
-  if (!image) {
-    return tr;
-  }
-
-  const attrs = {
-    latex,
-  };
-
-  const node = image.create(attrs, null, null);
-  const frag = Fragment.from(node);
-  tr = tr.insert(from, frag);
-  return tr;
-}
-
-class MathEditCommand extends UICommand {
-  _popUp = null;
-
-  isEnabled = (state: EditorState, view: ?EditorView): boolean => {
-    const tr = state;
-    const { selection } = tr;
-    if (selection instanceof TextSelection) {
-      return selection.from === selection.to;
-    }
-    return false;
-  };
-
-  waitForUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    event: ?SyntheticEvent<>
-  ): Promise<any> => {
-    if (this._popUp) {
-      return Promise.resolve(undefined);
-    }
-
-    if (dispatch) {
-      dispatch(showCursorPlaceholder(state));
-    }
-
-    return new Promise((resolve) => {
-      const props = {
-        runtime: view ? view.runtime : null,
-        initialValue: null,
-      };
-      this._popUp = createPopUp(MathEditor, props, {
-        modal: true,
-        onClose: (val) => {
-          if (this._popUp) {
-            this._popUp = null;
-            resolve(val);
-          }
-        },
-      });
-    });
-  };
-
-  executeWithUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    latex: ?string
-  ): boolean => {
-    if (dispatch) {
-      const { selection, schema } = state;
-      let { tr } = state;
-      tr = view ? hideCursorPlaceholder(view.state) : tr;
-      tr = tr.setSelection(selection);
-      if (latex) {
-        tr = insertMath(tr, schema, latex);
-      }
-      dispatch(tr);
-      view && view.focus();
-    }
-
-    return false;
-  };
-}
-
-export default MathEditCommand;
+// @flow
+
+import { Fragment, Schema } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+// eslint-disable-next-line no-unused-vars
+import * as React from 'react';
+
+import {
+  hideCursorPlaceholder,
+  showCursorPlaceholder,
+} from './CursorPlaceholderPlugin';
+import { MATH } from './NodeNames';
+import MathEditor from './ui/MathEditor';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import createPopUp from './ui/createPopUp';
+
+function insertMath(tr: Transform, schema: Schema, latex: ?string): Transform {
+  const { selection } = tr;
+  if (!selection) {
+    return tr;
+  }
+  const { from, to } = selection;
+  if (from !== to) {
+    return tr;
+  }
+
+  const image = schema.nodes[MATH];
+  if (!image) {
+    return tr;
+  }
+
+  const attrs = {
+    latex,
+  };
+
+  const node = image.create(attrs, null, null);
+  const frag = Fragment.from(node);
+  tr = tr.insert(from, frag);
+  return tr;
+}
+
+class MathEditCommand extends UICommand {
+  _popUp = null;
+
+  isEnabled = (state: EditorState, view: ?EditorView): boolean => {
+    const tr = state;
+    const { selection } = tr;
+    if (selection instanceof TextSelection) {
+      return selection.from === selection.to;
+    }
+    return false;
+  };
+
+  waitForUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    event: ?SyntheticEvent<>
+  ): Promise<any> => {
+    if (this._popUp) {
+      return Promise.resolve(undefined);
+    }
+
+    if (dispatch) {
+      dispatch(showCursorPlaceholder(state));
+    }
+
+    return new Promise((resolve) => {
+      const props = {
+        runtime: view ? view.runtime : null,
+        initialValue: null,
+      };
+      this._popUp = createPopUp(MathEditor, props, {
+        modal: true,
+        onClose: (val) => {
+          if (this._popUp) {
+            this._popUp = null;
+            resolve(val);
+          }
+        },
+      });
+    });
+  };
+
+  executeWithUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    latex: ?string
+  ): boolean => {
+    if (dispatch) {
+      const { selection, schema } = state;
+      let { tr } = state;
+      tr = view ? hideCursorPlaceholder(view.state) : tr;
+      tr = tr.setSelection(selection);
+      if (latex) {
+        tr = insertMath(tr, schema, latex);
+      }
+      dispatch(tr);
+      view && view.focus();
+    }
+
+    return false;
+  };
+}
+
+export default MathEditCommand;

package/src/MathNodeSpec.js

@@ -1,46 +1,46 @@
-// @flow
-
-import type { NodeSpec } from './Types';
-
-function getAttrs(dom: HTMLElement) {
-  let align = dom.getAttribute('data-align') || dom.getAttribute('align');
-  if (align) {
-    align = /(left|right|center)/.test(align) ? align : null;
-  }
-
-  return {
-    align,
-    latex: dom.getAttribute('data-latex') || null,
-  };
-}
-
-const MathNodeSpec: NodeSpec = {
-  inline: true,
-  attrs: {
-    align: { default: null },
-    latex: { default: '' },
-  },
-  group: 'inline',
-  draggable: true,
-  parseDOM: [
-    { tag: 'math[data-latex]', getAttrs },
-    { tag: 'span[data-latex]', getAttrs },
-  ],
-  toDOM(node) {
-    // Normally, the DOM structure of the math node is rendered by
-    // `MathNodeView`. This method is only called when user selects a
-    // math node and copies it, which triggers the "serialize to HTML" flow that
-    // calles this method.
-    const { align, latex } = node.attrs;
-    const domAttrs = {};
-    if (align) {
-      domAttrs.align = align;
-    }
-    if (latex) {
-      domAttrs['data-latex'] = latex;
-    }
-    return ['span', domAttrs];
-  },
-};
-
-export default MathNodeSpec;
+// @flow
+
+import type { NodeSpec } from './Types';
+
+function getAttrs(dom: HTMLElement) {
+  let align = dom.getAttribute('data-align') || dom.getAttribute('align');
+  if (align) {
+    align = /(left|right|center)/.test(align) ? align : null;
+  }
+
+  return {
+    align,
+    latex: dom.getAttribute('data-latex') || null,
+  };
+}
+
+const MathNodeSpec: NodeSpec = {
+  inline: true,
+  attrs: {
+    align: { default: null },
+    latex: { default: '' },
+  },
+  group: 'inline',
+  draggable: true,
+  parseDOM: [
+    { tag: 'math[data-latex]', getAttrs },
+    { tag: 'span[data-latex]', getAttrs },
+  ],
+  toDOM(node) {
+    // Normally, the DOM structure of the math node is rendered by
+    // `MathNodeView`. This method is only called when user selects a
+    // math node and copies it, which triggers the "serialize to HTML" flow that
+    // calles this method.
+    const { align, latex } = node.attrs;
+    const domAttrs = {};
+    if (align) {
+      domAttrs.align = align;
+    }
+    if (latex) {
+      domAttrs['data-latex'] = latex;
+    }
+    return ['span', domAttrs];
+  },
+};
+
+export default MathNodeSpec;

package/src/NodeNames.js

@@ -1,23 +1,23 @@
-// @flow
-
-// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
-export const BLOCKQUOTE = 'blockquote';
-export const BOOKMARK = 'bookmark';
-export const BULLET_LIST = 'bullet_list';
-export const CODE_BLOCK = 'code_block';
-export const DOC = 'doc';
-export const HARD_BREAK = 'hard_break';
-export const HEADING = 'heading';
-export const HORIZONTAL_RULE = 'horizontal_rule';
-export const IMAGE = 'image';
-export const LINK = 'link';
-export const LIST_ITEM = 'list_item';
-export const MATH = 'math';
-export const ORDERED_LIST = 'ordered_list';
-export const PARAGRAPH = 'paragraph';
-export const TABLE = 'table';
-export const TABLE_CELL = 'table_cell';
-export const TABLE_HEADER = 'table_header';
-export const TABLE_ROW = 'table_row';
-export const TEXT = 'text';
-export const UNDERLINE = 'underline';
+// @flow
+
+// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
+export const BLOCKQUOTE = 'blockquote';
+export const BOOKMARK = 'bookmark';
+export const BULLET_LIST = 'bullet_list';
+export const CODE_BLOCK = 'code_block';
+export const DOC = 'doc';
+export const HARD_BREAK = 'hard_break';
+export const HEADING = 'heading';
+export const HORIZONTAL_RULE = 'horizontal_rule';
+export const IMAGE = 'image';
+export const LINK = 'link';
+export const LIST_ITEM = 'list_item';
+export const MATH = 'math';
+export const ORDERED_LIST = 'ordered_list';
+export const PARAGRAPH = 'paragraph';
+export const TABLE = 'table';
+export const TABLE_CELL = 'table_cell';
+export const TABLE_HEADER = 'table_header';
+export const TABLE_ROW = 'table_row';
+export const TEXT = 'text';
+export const UNDERLINE = 'underline';

package/src/OrderedListNodeSpec.js

@@ -1,132 +1,132 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-
-import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec';
-import { LIST_ITEM } from './NodeNames';
-import { ATTRIBUTE_INDENT, MIN_INDENT_LEVEL, RESERVED_STYLE_NONE } from './ParagraphNodeSpec';
-
-import type { NodeSpec } from './Types';
-
-export const ATTRIBUTE_COUNTER_RESET = 'data-counter-reset';
-export const ATTRIBUTE_FOLLOWING = 'data-following';
-const AUTO_LIST_STYLE_TYPES = ['decimal', 'lower-alpha', 'lower-roman'];
-
-const OrderedListNodeSpec: NodeSpec = {
-  attrs: {
-    id: { default: null },
-    counterReset: { default: null },
-    indent: { default: MIN_INDENT_LEVEL },
-    following: { default: null },
-    listStyleType: { default: null },
-    name: { default: null },
-    start: { default: 1 },
-    type: { default: 'decimal' },
-    styleName: { default: RESERVED_STYLE_NONE },
-  },
-  group: 'block',
-  content: LIST_ITEM + '+',
-  parseDOM: [
-    {
-      tag: 'ol',
-      getAttrs(dom: HTMLElement) {
-        const listStyleType = dom.getAttribute(ATTRIBUTE_LIST_STYLE_TYPE);
-        const counterReset =
-          dom.getAttribute(ATTRIBUTE_COUNTER_RESET) || undefined;
-
-        const start = dom.hasAttribute('start')
-          ? parseInt(dom.getAttribute('start'), 10)
-          : 1;
-
-        const indent = dom.hasAttribute(ATTRIBUTE_INDENT)
-          ? parseInt(dom.getAttribute(ATTRIBUTE_INDENT), 10)
-          : MIN_INDENT_LEVEL;
-
-        const name = dom.getAttribute('name') || undefined;
-
-        const following = dom.getAttribute(ATTRIBUTE_FOLLOWING) || undefined;
-        const type = dom.getAttribute('type') || undefined;
-
-        return {
-          counterReset,
-          following,
-          indent,
-          listStyleType,
-          name,
-          start,
-          type,
-        };
-      },
-    },
-  ],
-  toDOM(node: Node) {
-    const {
-      start,
-      indent,
-      listStyleType,
-      counterReset,
-      following,
-      name,
-      type,
-    } = node.attrs;
-    const attrs: Object = {
-      [ATTRIBUTE_INDENT]: indent,
-    };
-
-    if (counterReset === 'none') {
-      attrs[ATTRIBUTE_COUNTER_RESET] = counterReset;
-    }
-
-    if (following) {
-      attrs[ATTRIBUTE_FOLLOWING] = following;
-    }
-
-    if (listStyleType) {
-      attrs[ATTRIBUTE_LIST_STYLE_TYPE] = listStyleType;
-    }
-
-    if (start !== 1) {
-      attrs.start = start;
-    }
-
-    if (name) {
-      attrs.name = name;
-    }
-    let htmlListStyleType = listStyleType;
-
-    if (!htmlListStyleType || htmlListStyleType === 'decimal') {
-      htmlListStyleType =
-        AUTO_LIST_STYLE_TYPES[indent % AUTO_LIST_STYLE_TYPES.length];
-    }
-
-    const cssCounterName = `czi-counter-${indent}`;
-    if ('x.x.x' === type) {
-      if (RESERVED_STYLE_NONE !== node.attrs.styleName) {
-        attrs.style = buildStyleClass(indent, node.attrs.start);
-      } else {
-        attrs.style =
-          `--czi-counter-name: ${cssCounterName};` +
-          `--czi-counter-reset: ${following ? 'none' : start - 1};` +
-          `--czi-list-style-type: ${htmlListStyleType}`;
-      }
-    } else {
-      attrs.style =
-        `--czi-counter-name: ${cssCounterName};` +
-        `--czi-counter-reset: ${following ? 'none' : start - 1};` +
-        `--czi-list-style-type: ${htmlListStyleType}`;
-    }
-    attrs.type = type;
-
-    return ['ol', attrs, 0];
-  },
-};
-
-function buildStyleClass(indent, start) {
-  const cssCounterName = `czi-counter-${indent}`;
-  let cssCounterReset = `czi-counter-${indent} ${start - 1} `;
-  for (let index = 0; index < indent; index++) {
-    cssCounterReset += `czi-counter-${index} 1 `;
-  }
-  return `--czi-counter-name: ${cssCounterName}; counter-reset: ${cssCounterReset};`;
-}
-export default OrderedListNodeSpec;
+// @flow
+
+import { Node } from 'prosemirror-model';
+
+import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec';
+import { LIST_ITEM } from './NodeNames';
+import { ATTRIBUTE_INDENT, MIN_INDENT_LEVEL, RESERVED_STYLE_NONE } from './ParagraphNodeSpec';
+
+import type { NodeSpec } from './Types';
+
+export const ATTRIBUTE_COUNTER_RESET = 'data-counter-reset';
+export const ATTRIBUTE_FOLLOWING = 'data-following';
+const AUTO_LIST_STYLE_TYPES = ['decimal', 'lower-alpha', 'lower-roman'];
+
+const OrderedListNodeSpec: NodeSpec = {
+  attrs: {
+    id: { default: null },
+    counterReset: { default: null },
+    indent: { default: MIN_INDENT_LEVEL },
+    following: { default: null },
+    listStyleType: { default: null },
+    name: { default: null },
+    start: { default: 1 },
+    type: { default: 'decimal' },
+    styleName: { default: RESERVED_STYLE_NONE },
+  },
+  group: 'block',
+  content: LIST_ITEM + '+',
+  parseDOM: [
+    {
+      tag: 'ol',
+      getAttrs(dom: HTMLElement) {
+        const listStyleType = dom.getAttribute(ATTRIBUTE_LIST_STYLE_TYPE);
+        const counterReset =
+          dom.getAttribute(ATTRIBUTE_COUNTER_RESET) || undefined;
+
+        const start = dom.hasAttribute('start')
+          ? parseInt(dom.getAttribute('start'), 10)
+          : 1;
+
+        const indent = dom.hasAttribute(ATTRIBUTE_INDENT)
+          ? parseInt(dom.getAttribute(ATTRIBUTE_INDENT), 10)
+          : MIN_INDENT_LEVEL;
+
+        const name = dom.getAttribute('name') || undefined;
+
+        const following = dom.getAttribute(ATTRIBUTE_FOLLOWING) || undefined;
+        const type = dom.getAttribute('type') || undefined;
+
+        return {
+          counterReset,
+          following,
+          indent,
+          listStyleType,
+          name,
+          start,
+          type,
+        };
+      },
+    },
+  ],
+  toDOM(node: Node) {
+    const {
+      start,
+      indent,
+      listStyleType,
+      counterReset,
+      following,
+      name,
+      type,
+    } = node.attrs;
+    const attrs: Object = {
+      [ATTRIBUTE_INDENT]: indent,
+    };
+
+    if (counterReset === 'none') {
+      attrs[ATTRIBUTE_COUNTER_RESET] = counterReset;
+    }
+
+    if (following) {
+      attrs[ATTRIBUTE_FOLLOWING] = following;
+    }
+
+    if (listStyleType) {
+      attrs[ATTRIBUTE_LIST_STYLE_TYPE] = listStyleType;
+    }
+
+    if (start !== 1) {
+      attrs.start = start;
+    }
+
+    if (name) {
+      attrs.name = name;
+    }
+    let htmlListStyleType = listStyleType;
+
+    if (!htmlListStyleType || htmlListStyleType === 'decimal') {
+      htmlListStyleType =
+        AUTO_LIST_STYLE_TYPES[indent % AUTO_LIST_STYLE_TYPES.length];
+    }
+
+    const cssCounterName = `czi-counter-${indent}`;
+    if ('x.x.x' === type) {
+      if (RESERVED_STYLE_NONE !== node.attrs.styleName) {
+        attrs.style = buildStyleClass(indent, node.attrs.start);
+      } else {
+        attrs.style =
+          `--czi-counter-name: ${cssCounterName};` +
+          `--czi-counter-reset: ${following ? 'none' : start - 1};` +
+          `--czi-list-style-type: ${htmlListStyleType}`;
+      }
+    } else {
+      attrs.style =
+        `--czi-counter-name: ${cssCounterName};` +
+        `--czi-counter-reset: ${following ? 'none' : start - 1};` +
+        `--czi-list-style-type: ${htmlListStyleType}`;
+    }
+    attrs.type = type;
+
+    return ['ol', attrs, 0];
+  },
+};
+
+function buildStyleClass(indent, start) {
+  const cssCounterName = `czi-counter-${indent}`;
+  let cssCounterReset = `czi-counter-${indent} ${start - 1} `;
+  for (let index = 0; index < indent; index++) {
+    cssCounterReset += `czi-counter-${index} 1 `;
+  }
+  return `--czi-counter-name: ${cssCounterName}; counter-reset: ${cssCounterReset};`;
+}
+export default OrderedListNodeSpec;