@modusoperandi/licit 0.14.17 → 1.0.0

package/LinkTooltipPlugin.js.flow

@@ -0,0 +1,190 @@
+// @flow
+
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import { MARK_LINK } from './MarkNames.js';
+import { hideSelectionPlaceholder } from './SelectionPlaceholderPlugin.js';
+import { applyMark } from '@modusoperandi/licit-ui-commands';
+import { findNodesWithSameMark } from '@modusoperandi/licit-ui-commands';
+import lookUpElement from './lookUpElement.js';
+import LinkTooltip from './ui/LinkTooltip.js';
+import LinkURLEditor from './ui/LinkURLEditor.js';
+import { atAnchorTopCenter } from '@modusoperandi/licit-ui-commands';
+import { createPopUp } from '@modusoperandi/licit-ui-commands';
+
+import '@modusoperandi/licit-ui-commands/ui/czi-pop-up.css';
+
+// https://prosemirror.net/examples/tooltip/
+const SPEC = {
+  // [FS] IRAD-1005 2020-07-07
+  // Upgrade outdated packages.
+  key: new PluginKey('LinkTooltipPlugin'),
+  view(editorView: EditorView) {
+    return new LinkTooltipView(editorView);
+  },
+};
+
+class LinkTooltipPlugin extends Plugin {
+  constructor() {
+    super(SPEC);
+  }
+}
+
+class LinkTooltipView {
+  _anchorEl = null;
+  _popup = null;
+  _editor = null;
+
+  constructor(editorView: EditorView) {
+    this.update(editorView, null);
+  }
+
+  update(view: EditorView, lastState: EditorState): void {
+    if (view.readOnly) {
+      this.destroy();
+      return;
+    }
+
+    const { state } = view;
+    const { doc, selection, schema } = state;
+    const markType = schema.marks[MARK_LINK];
+    if (!markType) {
+      return;
+    }
+    const { from, to } = selection;
+    const result = findNodesWithSameMark(doc, from, to, markType);
+
+    if (!result) {
+      this.destroy();
+      return;
+    }
+    const domFound = view.domAtPos(from);
+    if (!domFound) {
+      this.destroy();
+      return;
+    }
+    const anchorEl = lookUpElement(domFound.node, (el) => el.nodeName === 'A');
+    if (!anchorEl) {
+      this.destroy();
+      return;
+    }
+
+    const popup = this._popup;
+    const viewPops = {
+      editorState: state,
+      editorView: view,
+      href: result.mark.attrs.href,
+      onCancel: this._onCancel,
+      onEdit: this._onEdit,
+      onRemove: this._onRemove,
+    };
+
+    if (popup && anchorEl === this._anchorEl) {
+      popup.update(viewPops);
+    } else {
+      popup && popup.close();
+      this._anchorEl = anchorEl;
+      this._popup = createPopUp(LinkTooltip, viewPops, {
+        anchor: anchorEl,
+        autoDismiss: false,
+        onClose: this._onClose,
+        position: atAnchorTopCenter,
+      });
+    }
+  }
+
+  destroy() {
+    this._popup && this._popup.close();
+    this._editor && this._editor.close();
+  }
+
+  _onCancel = (view: EditorView): void => {
+    this.destroy();
+    view.focus();
+  };
+
+  _onClose = (): void => {
+    this._anchorEl = null;
+    this._editor = null;
+    this._popup = null;
+  };
+
+  _onEdit = (view: EditorView): void => {
+    if (this._editor) {
+      return;
+    }
+
+    const { state } = view;
+    const { schema, doc, selection } = state;
+    const { from, to } = selection;
+    const markType = schema.marks[MARK_LINK];
+    const result = findNodesWithSameMark(doc, from, to, markType);
+    if (!result) {
+      return;
+    }
+
+    const href = result.mark.attrs.href;
+    this._editor = createPopUp(
+      LinkURLEditor,
+      { href },
+      {
+        onClose: (value) => {
+          this._editor = null;
+          this._onEditEnd(view, selection, value);
+        },
+      }
+    );
+  };
+
+  _onRemove = (view: EditorView): void => {
+    this._onEditEnd(view, view.state.selection, null);
+  };
+
+  _onEditEnd = (
+    view: EditorView,
+    initialSelection: TextSelection,
+    href: ?string
+  ): void => {
+    const { state, dispatch } = view;
+    let tr = hideSelectionPlaceholder(state);
+
+    if (href !== undefined) {
+      const { schema } = state;
+      const markType = schema.marks[MARK_LINK];
+      if (markType) {
+        const result = findNodesWithSameMark(
+          tr.doc,
+          initialSelection.from,
+          initialSelection.to,
+          markType
+        );
+        if (result) {
+          const linkSelection = TextSelection.create(
+            tr.doc,
+            result.from.pos,
+            result.to.pos + 1
+          );
+          tr = tr.setSelection(linkSelection);
+          const attrs = href ? { href } : null;
+          tr = applyMark(tr, schema, markType, attrs);
+
+          // [FS] IRAD-1005 2020-07-09
+          // Upgrade outdated packages.
+          // reset selection to original using the latest doc.
+          const origSelection = TextSelection.create(
+            tr.doc,
+            initialSelection.from,
+            initialSelection.to
+          );
+          tr = tr.setSelection(origSelection);
+        }
+      }
+    }
+    dispatch(tr);
+    view.focus();
+  };
+}
+
+export default LinkTooltipPlugin;

package/ListItemInsertNewLineCommand.js

@@ -0,0 +1,87 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Fragment, Schema } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { HARD_BREAK, LIST_ITEM } from './NodeNames.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+// This handles the case when user press SHIFT + ENTER key to insert a new line
+// into list item.
+function insertNewLine(tr, schema) {
+  var _tr = tr,
+    selection = _tr.selection;
+  if (!selection) {
+    return tr;
+  }
+  var from = selection.from,
+    empty = selection.empty;
+  if (!empty) {
+    return tr;
+  }
+  var br = schema.nodes[HARD_BREAK];
+  if (!br) {
+    return tr;
+  }
+  var blockquote = schema.nodes[LIST_ITEM];
+  var result = findParentNodeOfType(blockquote)(selection);
+  if (!result) {
+    return tr;
+  }
+  tr = tr.insert(from, Fragment.from(br.create()));
+  tr = tr.setSelection(TextSelection.create(tr.doc, from + 1, from + 1));
+  return tr;
+}
+var ListItemInsertNewLineCommand = /*#__PURE__*/function (_UICommand) {
+  _inherits(ListItemInsertNewLineCommand, _UICommand);
+  function ListItemInsertNewLineCommand() {
+    var _this;
+    _classCallCheck(this, ListItemInsertNewLineCommand);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ListItemInsertNewLineCommand, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "execute", function (state, dispatch, view) {
+      var schema = state.schema,
+        selection = state.selection;
+      var tr = insertNewLine(state.tr.setSelection(selection), schema);
+      if (tr.docChanged) {
+        dispatch && dispatch(tr);
+        return true;
+      } else {
+        return false;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "waitForUserInput", function (_state, _dispatch, _view, _event) {
+      return Promise.resolve(undefined);
+    });
+    _defineProperty(_assertThisInitialized(_this), "executeWithUserInput", function (_state, _dispatch, _view, _inputs) {
+      return false;
+    });
+    return _this;
+  }
+  _createClass(ListItemInsertNewLineCommand, [{
+    key: "cancel",
+    value: function cancel() {
+      return null;
+    }
+  }]);
+  return ListItemInsertNewLineCommand;
+}(UICommand);
+export default ListItemInsertNewLineCommand;

package/ListItemInsertNewLineCommand.js.flow

@@ -0,0 +1,77 @@
+// @flow
+
+import { Fragment, Schema } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { HARD_BREAK, LIST_ITEM } from './NodeNames.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+
+// This handles the case when user press SHIFT + ENTER key to insert a new line
+// into list item.
+function insertNewLine(tr: Transform, schema: Schema): Transform {
+  const { selection } = tr;
+  if (!selection) {
+    return tr;
+  }
+  const { from, empty } = selection;
+  if (!empty) {
+    return tr;
+  }
+  const br = schema.nodes[HARD_BREAK];
+  if (!br) {
+    return tr;
+  }
+  const blockquote = schema.nodes[LIST_ITEM];
+  const result = findParentNodeOfType(blockquote)(selection);
+  if (!result) {
+    return tr;
+  }
+  tr = tr.insert(from, Fragment.from(br.create()));
+  tr = tr.setSelection(TextSelection.create(tr.doc, from + 1, from + 1));
+  return tr;
+}
+
+class ListItemInsertNewLineCommand extends UICommand {
+  execute = (
+    state: EditorState,
+    dispatch: ?(tr: Transform) => void,
+    view: ?EditorView
+  ): boolean => {
+    const { schema, selection } = state;
+    const tr = insertNewLine(state.tr.setSelection(selection), schema);
+    if (tr.docChanged) {
+      dispatch && dispatch(tr);
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  waitForUserInput = (
+    _state: EditorState,
+    _dispatch: ?(tr: Transform) => void,
+    _view: ?EditorView,
+    _event: ?React.SyntheticEvent
+  ): Promise<undefined> => {
+    return Promise.resolve(undefined);
+  };
+
+  executeWithUserInput = (
+    _state: EditorState,
+    _dispatch: ?(tr: Transform) => void,
+    _view: ?EditorView,
+    _inputs: ?string
+  ): boolean => {
+    return false;
+  };
+
+  cancel(): void {
+    return null;
+  }
+}
+
+export default ListItemInsertNewLineCommand;

package/ListItemMergeCommand.js

@@ -0,0 +1,191 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import nullthrows from 'nullthrows';
+import { Fragment, Schema } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { HEADING, LIST_ITEM, PARAGRAPH } from './NodeNames.js';
+import nodeAt from './nodeAt.js';
+import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
+function mergeListItemUp(tr, schema) {
+  // This merge a list item to is previous list item of the selection is at the
+  // beginning of the list item.
+  var _tr = tr,
+    selection = _tr.selection;
+  if (!selection) {
+    return tr;
+  }
+  var nodeType = schema.nodes[LIST_ITEM];
+  if (!nodeType) {
+    return tr;
+  }
+  var from = selection.from,
+    empty = selection.empty;
+  if (!empty) {
+    // Selection is collapsed.
+    return tr;
+  }
+  var result = findParentNodeOfType(nodeType)(selection);
+  if (!result) {
+    return tr;
+  }
+  var pos = result.pos,
+    node = result.node;
+  if (from !== pos + 2) {
+    // Selection is not at the begining of the list item.
+    return tr;
+  }
+  var $pos = tr.doc.resolve(pos);
+  var prevNode = $pos.nodeBefore;
+  if (!prevNode || prevNode.type !== nodeType) {
+    return tr;
+  }
+  if (node.childCount !== 1) {
+    // list item should only have one child (paragraph).
+    return tr;
+  }
+  var paragraphNode = node.firstChild;
+  var textNode = schema.text(' ');
+
+  // Delete the list item
+  tr = tr["delete"](pos - 2, pos + node.nodeSize);
+  // Append extra space character to its previous list item.
+  tr = tr.insert(pos - 2, Fragment.from(textNode));
+  // Move the content to its previous list item.
+  tr = tr.insert(pos - 1, Fragment.from(paragraphNode.content));
+  tr = tr.setSelection(TextSelection.create(tr.doc, pos - 1, pos - 1));
+  return tr;
+}
+function mergeListItemDown(tr, schema) {
+  // This merge a list item to is next list item of the selection is at the
+  // beginning of the list item.
+  var _tr2 = tr,
+    selection = _tr2.selection;
+  if (!selection) {
+    return tr;
+  }
+  var listItem = schema.nodes[LIST_ITEM];
+  if (!listItem) {
+    return tr;
+  }
+  var from = selection.from,
+    empty = selection.empty;
+  if (!empty) {
+    // Selection is collapsed.
+    return tr;
+  }
+  var result = findParentNodeOfType(listItem)(selection);
+  if (!result) {
+    return tr;
+  }
+  var pos = result.pos,
+    node = result.node;
+  if (from !== pos + node.content.size) {
+    // Selection is not at the begining of the list item.
+    return tr;
+  }
+  var $pos = tr.doc.resolve(pos);
+  var list = $pos.parent.type;
+  var listResult = findParentNodeOfType(list)(selection);
+  if (!listResult) {
+    return tr;
+  }
+  var nextFrom = pos + node.nodeSize;
+  var nextNode = nodeAt(tr.doc, nextFrom);
+  var deleteFrom = nextFrom;
+  if (listResult.start + listResult.node.content.size === nextFrom) {
+    // It's at the end of the last list item. It shall bring the content of the
+    // block after the list.
+    nextNode = nodeAt(tr.doc, nextFrom + 1);
+    deleteFrom += 1;
+  }
+  if (!nextNode) {
+    return tr;
+  }
+  var nextContent;
+  switch (nextNode.type) {
+    case listItem:
+      // List item should only have one child (paragraph).
+      var paragraphNode = nullthrows(nextNode.firstChild);
+      nextContent = Fragment.from(paragraphNode.content);
+      break;
+    case schema.nodes[HEADING]:
+    case schema.nodes[PARAGRAPH]:
+      // Will bring in the content of the next block.
+      nextContent = Fragment.from(nextNode.content);
+      break;
+  }
+  if (!nextContent) {
+    return tr;
+  }
+  var textNode = schema.text(' ');
+  // Delete the next node.
+  tr = tr["delete"](deleteFrom, deleteFrom + nextNode.nodeSize);
+  // Append extra space character to its previous list item.
+  tr = tr.insert(nextFrom - 2, nextContent);
+  // Move the content to the list item.
+  tr = tr.insert(nextFrom - 2, Fragment.from(textNode));
+  tr = tr.setSelection(TextSelection.create(tr.doc, nextFrom - 2, nextFrom - 2));
+  return tr;
+}
+var ListItemMergeCommand = /*#__PURE__*/function (_UICommand) {
+  _inherits(ListItemMergeCommand, _UICommand);
+  function ListItemMergeCommand(_direction) {
+    var _this;
+    _classCallCheck(this, ListItemMergeCommand);
+    _this = _callSuper(this, ListItemMergeCommand);
+    _defineProperty(_assertThisInitialized(_this), "_direction", '');
+    _defineProperty(_assertThisInitialized(_this), "isActive", function (state) {
+      return false;
+    });
+    _defineProperty(_assertThisInitialized(_this), "execute", function (state, dispatch, view) {
+      var selection = state.selection,
+        schema = state.schema;
+      var tr = state.tr;
+      var direction = _this._direction;
+      if (direction === 'down') {
+        tr = mergeListItemDown(tr.setSelection(selection), schema);
+      } else if (direction === 'up') {
+        tr = mergeListItemUp(tr.setSelection(selection), schema);
+      }
+      if (tr.docChanged) {
+        dispatch && dispatch(tr);
+        return true;
+      } else {
+        return false;
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "waitForUserInput", function (_state, _dispatch, _view, _event) {
+      return Promise.resolve(undefined);
+    });
+    _defineProperty(_assertThisInitialized(_this), "executeWithUserInput", function (_state, _dispatch, _view, _inputs) {
+      return false;
+    });
+    _this._direction = _direction;
+    return _this;
+  }
+  _createClass(ListItemMergeCommand, [{
+    key: "cancel",
+    value: function cancel() {
+      return null;
+    }
+  }]);
+  return ListItemMergeCommand;
+}(UICommand);
+export default ListItemMergeCommand;