@modusoperandi/licit 1.4.2 → 1.4.6

package/SpacerMarkSpec.js.flow

@@ -1,47 +1,47 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-
-import type { MarkSpec } from './Types.js';
-
-export const DOM_ATTRIBUTE_SIZE = 'data-spacer-size';
-export const SPACER_SIZE_TAB = 'tab';
-export const SPACER_SIZE_TAB_LARGE = 'tab-large';
-
-// See http://jkorpela.fi/chars/spaces.html
-export const HAIR_SPACE_CHAR = '\u200A';
-
-const SpacerMarkSpec: MarkSpec = {
-  attrs: {
-    size: { default: SPACER_SIZE_TAB },
-  },
-  defining: true,
-  draggable: false,
-  excludes: '_',
-  group: 'inline',
-  inclusive: false,
-  inline: true,
-  spanning: false,
-  parseDOM: [
-    {
-      tag: `span[${DOM_ATTRIBUTE_SIZE}]`,
-      getAttrs: (el) => {
-        return {
-          size: el.getAttribute(DOM_ATTRIBUTE_SIZE) || SPACER_SIZE_TAB,
-        };
-      },
-    },
-  ],
-  toDOM(node: Node) {
-    const { size } = node.attrs;
-    return [
-      'span',
-      {
-        [DOM_ATTRIBUTE_SIZE]: size,
-      },
-      0,
-    ];
-  },
-};
-
-export default SpacerMarkSpec;
+// @flow
+
+import { Node } from 'prosemirror-model';
+
+import type { MarkSpec } from './Types.js';
+
+export const DOM_ATTRIBUTE_SIZE = 'data-spacer-size';
+export const SPACER_SIZE_TAB = 'tab';
+export const SPACER_SIZE_TAB_LARGE = 'tab-large';
+
+// See http://jkorpela.fi/chars/spaces.html
+export const HAIR_SPACE_CHAR = '\u200A';
+
+const SpacerMarkSpec: MarkSpec = {
+  attrs: {
+    size: { default: SPACER_SIZE_TAB },
+  },
+  defining: true,
+  draggable: false,
+  excludes: '_',
+  group: 'inline',
+  inclusive: false,
+  inline: true,
+  spanning: false,
+  parseDOM: [
+    {
+      tag: `span[${DOM_ATTRIBUTE_SIZE}]`,
+      getAttrs: (el) => {
+        return {
+          size: el.getAttribute(DOM_ATTRIBUTE_SIZE) || SPACER_SIZE_TAB,
+        };
+      },
+    },
+  ],
+  toDOM(node: Node) {
+    const { size } = node.attrs;
+    return [
+      'span',
+      {
+        [DOM_ATTRIBUTE_SIZE]: size,
+      },
+      0,
+    ];
+  },
+};
+
+export default SpacerMarkSpec;

package/StrikeMarkSpec.js.flow

@@ -1,24 +1,24 @@
-// @flow
-
-import type { MarkSpec } from './Types.js';
-
-// https://bitbucket.org/atlassian/atlaskit/src/34facee3f461/packages/editor-core/src/schema/nodes/?at=master
-const StrikeMarkSpec: MarkSpec = {
-  attrs: {
-    overridden: { default: false }, // Optional attribute for additional logic
-  },
-  parseDOM: [
-    {
-      tag: 'strike',
-      getAttrs: (dom: HTMLElement) => {
-        const _overridden = dom.getAttribute('overridden');
-        return { overridden: _overridden === 'true' };
-      }
-    },
-  ],
-  toDOM(mark) {
-    return ['strike', { overridden: mark.attrs.overridden }, 0];
-  },
-};
-
-export default StrikeMarkSpec;
+// @flow
+
+import type { MarkSpec } from './Types.js';
+
+// https://bitbucket.org/atlassian/atlaskit/src/34facee3f461/packages/editor-core/src/schema/nodes/?at=master
+const StrikeMarkSpec: MarkSpec = {
+  attrs: {
+    overridden: { default: false }, // Optional attribute for additional logic
+  },
+  parseDOM: [
+    {
+      tag: 'strike',
+      getAttrs: (dom: HTMLElement) => {
+        const _overridden = dom.getAttribute('overridden');
+        return { overridden: _overridden === 'true' };
+      }
+    },
+  ],
+  toDOM(mark) {
+    return ['strike', { overridden: mark.attrs.overridden }, 0];
+  },
+};
+
+export default StrikeMarkSpec;

package/StrongMarkSpec.js.flow

@@ -1,39 +1,39 @@
-// @flow
-
-import type { MarkSpec } from './Types.js';
-
-const StrongMarkSpec: MarkSpec = {
-  attrs: {
-    overridden: { default: false }
-  },
-  parseDOM: [
-
-    {
-      tag: 'strong',
-      getAttrs: (dom: HTMLElement) => {
-        const _overridden = dom.getAttribute('overridden');
-        return { overridden: _overridden === 'true' };
-      }
-    },
-    {
-      tag: 'b',
-      getAttrs: (dom: HTMLElement) => {
-        const _overridden = dom.getAttribute('overridden');
-        return { overridden: _overridden === 'true' };
-      }
-    },
-    {
-      tag: 'span[style*=font-weight]',
-      getAttrs: (value, dom: HTMLElement) => {
-        const _overridden = dom.getAttribute('overridden');
-        return { overridden: _overridden === 'true' };
-
-      },
-    },
-  ],
-  toDOM(mark) {
-    return ['strong', { overridden: mark.attrs.overridden }, 0];
-  },
-};
-
-export default StrongMarkSpec;
+// @flow
+
+import type { MarkSpec } from './Types.js';
+
+const StrongMarkSpec: MarkSpec = {
+  attrs: {
+    overridden: { default: false }
+  },
+  parseDOM: [
+
+    {
+      tag: 'strong',
+      getAttrs: (dom: HTMLElement) => {
+        const _overridden = dom.getAttribute('overridden');
+        return { overridden: _overridden === 'true' };
+      }
+    },
+    {
+      tag: 'b',
+      getAttrs: (dom: HTMLElement) => {
+        const _overridden = dom.getAttribute('overridden');
+        return { overridden: _overridden === 'true' };
+      }
+    },
+    {
+      tag: 'span[style*=font-weight]',
+      getAttrs: (value, dom: HTMLElement) => {
+        const _overridden = dom.getAttribute('overridden');
+        return { overridden: _overridden === 'true' };
+
+      },
+    },
+  ],
+  toDOM(mark) {
+    return ['strong', { overridden: mark.attrs.overridden }, 0];
+  },
+};
+
+export default StrongMarkSpec;

package/StyleView.js.flow

@@ -1,18 +1,18 @@
-// temp view for custom style have to check this view is needed?
-
-import { EditorView } from 'prosemirror-view';
-import { EditorState } from 'prosemirror-state';
-
-export class StyleView {
-  constructor(editorView: EditorView) {
-    this.update(editorView, null);
-  }
-
-  update(view: EditorView, lastState: EditorState): void {
-    if (view.readOnly) {
-      this.destroy();
-    }
-  }
-
-  destroy() {}
-}
+// temp view for custom style have to check this view is needed?
+
+import { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+
+export class StyleView {
+  constructor(editorView: EditorView) {
+    this.update(editorView, null);
+  }
+
+  update(view: EditorView, lastState: EditorState): void {
+    if (view.readOnly) {
+      this.destroy();
+    }
+  }
+
+  destroy() {}
+}

package/TableBackgroundColorCommand.js.flow

@@ -1,79 +1,79 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { setCellAttr } from 'prosemirror-tables';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import { atAnchorRight, createPopUp, findNodesWithSameMark, MARK_TEXT_COLOR } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import { ColorEditor } from '@modusoperandi/color-picker';
-
-const setCellBackgroundBlack = setCellAttr('background', '#000000');
-
-class TableBackgroundColorCommand extends UICommand {
-  _popUp = null;
-
-  shouldRespondToUIEvent = (e: SyntheticEvent<> | MouseEvent): boolean => {
-    return e.type === UICommand.EventType.MOUSEENTER;
-  };
-
-  isEnabled = (state: EditorState): boolean => {
-    return setCellBackgroundBlack(state.tr);
-  };
-
-  waitForUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    event: ?SyntheticEvent<>
-  ): Promise<any> => {
-    if (this._popUp) {
-      return Promise.resolve(undefined);
-    }
-    const target = event?.currentTarget;
-    if (!(target instanceof HTMLElement)) {
-      return Promise.resolve(undefined);
-    }
-    const { doc, selection, schema } = state;
-    const markType = schema.marks[MARK_TEXT_COLOR];
-    const { from, to } = selection;
-    const result = findNodesWithSameMark(doc, from, to, markType);
-    const anchor = event ? event.currentTarget : null;
-    const hex = result ? result.mark.attrs.color : null;
-
-    return new Promise((resolve) => {
-      this._popUp = createPopUp(ColorEditor, { hex, runtime: view.runtime },
-        {
-          anchor,
-          autoDismiss: false,
-          position: atAnchorRight,
-          onClose: (val) => {
-            if (this._popUp) {
-              this._popUp = null;
-              resolve(val);
-            }
-          },
-        });
-    });
-  };
-
-  executeWithUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    hex: ?{ color: string, selectedPosition?: string }
-  ): boolean => {
-    if (dispatch && hex !== undefined) {
-      const cmd = setCellAttr('background', hex.color);
-      cmd(state, dispatch, view);
-      return true;
-    }
-    return false;
-  };
-
-  cancel(): void {
-    this._popUp?.close(undefined);
-  }
-}
-
-export default TableBackgroundColorCommand;
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { setCellAttr } from 'prosemirror-tables';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import { atAnchorRight, createPopUp, findNodesWithSameMark, MARK_TEXT_COLOR } from '@modusoperandi/licit-ui-commands';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+import { ColorEditor } from '@modusoperandi/color-picker';
+
+const setCellBackgroundBlack = setCellAttr('background', '#000000');
+
+class TableBackgroundColorCommand extends UICommand {
+  _popUp = null;
+
+  shouldRespondToUIEvent = (e: SyntheticEvent<> | MouseEvent): boolean => {
+    return e.type === UICommand.EventType.MOUSEENTER;
+  };
+
+  isEnabled = (state: EditorState): boolean => {
+    return setCellBackgroundBlack(state.tr);
+  };
+
+  waitForUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    event: ?SyntheticEvent<>
+  ): Promise<any> => {
+    if (this._popUp) {
+      return Promise.resolve(undefined);
+    }
+    const target = event?.currentTarget;
+    if (!(target instanceof HTMLElement)) {
+      return Promise.resolve(undefined);
+    }
+    const { doc, selection, schema } = state;
+    const markType = schema.marks[MARK_TEXT_COLOR];
+    const { from, to } = selection;
+    const result = findNodesWithSameMark(doc, from, to, markType);
+    const anchor = event ? event.currentTarget : null;
+    const hex = result ? result.mark.attrs.color : null;
+
+    return new Promise((resolve) => {
+      this._popUp = createPopUp(ColorEditor, { hex, runtime: view.runtime },
+        {
+          anchor,
+          autoDismiss: false,
+          position: atAnchorRight,
+          onClose: (val) => {
+            if (this._popUp) {
+              this._popUp = null;
+              resolve(val);
+            }
+          },
+        });
+    });
+  };
+
+  executeWithUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    hex: ?{ color: string, selectedPosition?: string[] }
+  ): boolean => {
+    if (dispatch && hex !== undefined) {
+      const cmd = setCellAttr('background', hex.color);
+      cmd(state, dispatch, view);
+      return true;
+    }
+    return false;
+  };
+
+  cancel(): void {
+    this._popUp?.close(undefined);
+  }
+}
+
+export default TableBackgroundColorCommand;

package/TableBorderColorCommand.js

@@ -93,7 +93,7 @@ var TableBorderColorCommand = /*#__PURE__*/function (_UICommand) {
     }
   }, {
     key: "setCellBorder",
-    value: function setCellBorder(view, pos, side, color) {
+    value: function setCellBorder(view, pos, sides, color) {
       var width = '0.25px';
       var style = 'solid';
       var state = view.state,
@@ -102,8 +102,10 @@ var TableBorderColorCommand = /*#__PURE__*/function (_UICommand) {
       if (!node || !['table_cell', 'table_header'].includes(node.type.name)) return;
       var newAttrs = _objectSpread({}, node.attrs);
       var cssValue = "".concat(width, " ").concat(style, " ").concat(color);
-      var attrName = "border".concat(side.charAt(0).toUpperCase() + side.slice(1));
-      newAttrs[attrName] = cssValue;
+      sides.forEach(function (side) {
+        var attrName = "border".concat(side.charAt(0).toUpperCase() + side.slice(1));
+        newAttrs[attrName] = cssValue;
+      });
       dispatch(state.tr.setNodeMarkup(pos, null, newAttrs));
     }
   }, {

package/TableBorderColorCommand.js.flow

@@ -1,107 +1,109 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { setCellAttr } from 'prosemirror-tables';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import { ColorEditor } from '@modusoperandi/color-picker';
-import { atAnchorRight, createPopUp, findNodesWithSameMark, MARK_TEXT_COLOR } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-const setCellBorderBlack = setCellAttr('borderColor', '#000000');
-
-class TableBorderColorCommand extends UICommand {
-  _popUp = null;
-
-  shouldRespondToUIEvent = (e: SyntheticEvent<> | MouseEvent): boolean => {
-    return e.type === UICommand.EventType.MOUSEENTER;
-  };
-
-  isEnabled = (state: EditorState): boolean => {
-    return setCellBorderBlack(state.tr);
-  };
-
-  waitForUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    event: ?SyntheticEvent<>
-  ): Promise<any> => {
-    if (this._popUp) {
-      return Promise.resolve(undefined);
-    }
-    const target = event?.currentTarget;
-    if (!(target instanceof HTMLElement)) {
-      return Promise.resolve(undefined);
-    }
-    const { doc, selection, schema } = state;
-    const markType = schema.marks[MARK_TEXT_COLOR];
-    const { from, to } = selection;
-    const result = findNodesWithSameMark(doc, from, to, markType);
-
-    const anchor = event ? event.currentTarget : null;
-    const hex = result ? result.mark.attrs.color : null;
-
-    return new Promise((resolve) => {
-      this._popUp = createPopUp(ColorEditor, { hex, runtime: view.runtime, showCheckbox: true },
-        {
-          anchor,
-          autoDismiss: false,
-          position: atAnchorRight,
-          onClose: (val) => {
-            if (this._popUp) {
-              this._popUp = null;
-              resolve(val);
-            }
-          },
-        });
-    });
-  };
-
-  executeWithUserInput = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView,
-    color: ?{ color: string, selectedPosition?: string }
-  ): boolean => {
-    if (dispatch && color !== undefined) {
-      const pos = this.findCellPosFromSelection(view.state);
-      if (pos !== null) {
-        this.setCellBorder(view, pos, color.selectedPosition, color.color);
-      }
-      return true;
-    }
-    return false;
-  };
-
-  cancel(): void {
-    this._popUp?.close(undefined);
-  }
-
-  setCellBorder(view: ?EditorView, pos: Number, side: string, color: string) {
-    const width = '0.25px';
-    const style = 'solid';
-    const { state, dispatch } = view;
-    const node = state.doc.nodeAt(pos);
-    if (!node || !['table_cell', 'table_header'].includes(node.type.name)) return;
-
-    const newAttrs = { ...node.attrs };
-    const cssValue = `${width} ${style} ${color}`;
-    const attrName = `border${side.charAt(0).toUpperCase() + side.slice(1)}`;
-    newAttrs[attrName] = cssValue;
-    dispatch(state.tr.setNodeMarkup(pos, null, newAttrs));
-  }
-
-  findCellPosFromSelection(state: EditorState) {
-    const { $from } = state.selection;
-    for (let d = $from.depth; d > 0; d--) {
-      const node = $from.node(d);
-      if (['cell', 'header_cell'].includes(node.type.spec.tableRole)) {
-        return $from.before(d);
-      }
-    }
-    return null;
-  }
-}
-
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { setCellAttr } from 'prosemirror-tables';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import { ColorEditor } from '@modusoperandi/color-picker';
+import { atAnchorRight, createPopUp, findNodesWithSameMark, MARK_TEXT_COLOR } from '@modusoperandi/licit-ui-commands';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+const setCellBorderBlack = setCellAttr('borderColor', '#000000');
+
+class TableBorderColorCommand extends UICommand {
+  _popUp = null;
+
+  shouldRespondToUIEvent = (e: SyntheticEvent<> | MouseEvent): boolean => {
+    return e.type === UICommand.EventType.MOUSEENTER;
+  };
+
+  isEnabled = (state: EditorState): boolean => {
+    return setCellBorderBlack(state.tr);
+  };
+
+  waitForUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    event: ?SyntheticEvent<>
+  ): Promise<any> => {
+    if (this._popUp) {
+      return Promise.resolve(undefined);
+    }
+    const target = event?.currentTarget;
+    if (!(target instanceof HTMLElement)) {
+      return Promise.resolve(undefined);
+    }
+    const { doc, selection, schema } = state;
+    const markType = schema.marks[MARK_TEXT_COLOR];
+    const { from, to } = selection;
+    const result = findNodesWithSameMark(doc, from, to, markType);
+
+    const anchor = event ? event.currentTarget : null;
+    const hex = result ? result.mark.attrs.color : null;
+
+    return new Promise((resolve) => {
+      this._popUp = createPopUp(ColorEditor, { hex, runtime: view.runtime, showCheckbox: true },
+        {
+          anchor,
+          autoDismiss: false,
+          position: atAnchorRight,
+          onClose: (val) => {
+            if (this._popUp) {
+              this._popUp = null;
+              resolve(val);
+            }
+          },
+        });
+    });
+  };
+
+  executeWithUserInput = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView,
+    color: ?{ color: string, selectedPosition?: string[] }
+  ): boolean => {
+    if (dispatch && color !== undefined) {
+      const pos = this.findCellPosFromSelection(view.state);
+      if (pos !== null) {
+        this.setCellBorder(view, pos, color.selectedPosition, color.color);
+      }
+      return true;
+    }
+    return false;
+  };
+
+  cancel(): void {
+    this._popUp?.close(undefined);
+  }
+
+  setCellBorder(view: ?EditorView, pos: Number, sides: string, color: string) {
+    const width = '0.25px';
+    const style = 'solid';
+    const { state, dispatch } = view;
+    const node = state.doc.nodeAt(pos);
+    if (!node || !['table_cell', 'table_header'].includes(node.type.name)) return;
+
+    const newAttrs = { ...node.attrs };
+    const cssValue = `${width} ${style} ${color}`;
+    sides.forEach(side => {
+      const attrName = `border${side.charAt(0).toUpperCase() + side.slice(1)}`;
+      newAttrs[attrName] = cssValue;
+    });
+    dispatch(state.tr.setNodeMarkup(pos, null, newAttrs));
+  }
+
+  findCellPosFromSelection(state: EditorState) {
+    const { $from } = state.selection;
+    for (let d = $from.depth; d > 0; d--) {
+      const node = $from.node(d);
+      if (['cell', 'header_cell'].includes(node.type.spec.tableRole)) {
+        return $from.before(d);
+      }
+    }
+    return null;
+  }
+}
+
 export default TableBorderColorCommand;