@modusoperandi/licit 0.14.18 → 1.0.0

package/src/BlockquoteInsertNewLineCommand.js

@@ -1,55 +0,0 @@
-// @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 { BLOCKQUOTE, HARD_BREAK } from './NodeNames';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-// This handles the case when user press SHIFT + ENTER key to insert a new line
-// into blockquote.
-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[BLOCKQUOTE];
-  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 BlockquoteInsertNewLineCommand 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;
-    }
-  };
-}
-
-export default BlockquoteInsertNewLineCommand;

package/src/BlockquoteNodeSpec.js

@@ -1,30 +0,0 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-
-import ParagraphNodeSpec from './ParagraphNodeSpec';
-import { getParagraphNodeAttrs, toParagraphDOM } from './ParagraphNodeSpec';
-
-import type { NodeSpec } from './Types';
-
-// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
-// :: NodeSpec A plain paragraph textblock. Represented in the DOM
-// as a `<p>` element.
-const BlockquoteNodeSpec: NodeSpec = {
-  ...ParagraphNodeSpec,
-  defining: true,
-  parseDOM: [{ tag: 'blockquote', getAttrs }],
-  toDOM,
-};
-
-function toDOM(node: Node): Array<any> {
-  const dom = toParagraphDOM(node);
-  dom[0] = 'blockquote';
-  return dom;
-}
-
-function getAttrs(dom: HTMLElement): Object {
-  return getParagraphNodeAttrs(dom);
-}
-
-export default BlockquoteNodeSpec;

package/src/BlockquoteToggleCommand.js

@@ -1,34 +0,0 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { findParentNodeOfType } from 'prosemirror-utils';
-import { EditorView } from 'prosemirror-view';
-
-import { BLOCKQUOTE } from './NodeNames';
-import toggleBlockquote from './toggleBlockquote';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class BlockquoteToggleCommand extends UICommand {
-  isActive = (state: EditorState): boolean => {
-    const blockquote = state.schema.nodes[BLOCKQUOTE];
-    return !!(blockquote && findParentNodeOfType(blockquote)(state.selection));
-  };
-
-  execute = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView
-  ): boolean => {
-    const { schema, selection } = state;
-    const tr = toggleBlockquote(state.tr.setSelection(selection), schema);
-    if (tr.docChanged) {
-      dispatch && dispatch(tr);
-      return true;
-    } else {
-      return false;
-    }
-  };
-}
-
-export default BlockquoteToggleCommand;

package/src/BookmarkNodeSpec.js

@@ -1,39 +0,0 @@
-// @flow
-
-import type { NodeSpec } from './Types';
-
-export const ATTRIBUTE_BOOKMARK_ID = 'data-bookmark-id';
-export const ATTRIBUTE_BOOKMARK_VISIBLE = 'data-bookmark-visible';
-
-function getAttrs(dom: HTMLElement) {
-  const id = dom.getAttribute(ATTRIBUTE_BOOKMARK_ID);
-  const visible = dom.getAttribute(ATTRIBUTE_BOOKMARK_VISIBLE) === 'true';
-  return {
-    id,
-    visible,
-  };
-}
-
-const BookmarkNodeSpec: NodeSpec = {
-  inline: true,
-  attrs: {
-    id: { default: null },
-    visible: { default: null },
-  },
-  group: 'inline',
-  draggable: true,
-  parseDOM: [{ tag: `a[${ATTRIBUTE_BOOKMARK_ID}]`, getAttrs }],
-  toDOM(node) {
-    const { id, visible } = node.attrs;
-    const attrs = id
-      ? {
-          [ATTRIBUTE_BOOKMARK_ID]: id,
-          [ATTRIBUTE_BOOKMARK_VISIBLE]: visible,
-          id,
-        }
-      : {};
-    return ['a', attrs];
-  },
-};
-
-export default BookmarkNodeSpec;

package/src/BulletListNodeSpec.js

@@ -1,61 +0,0 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-
-import { ATTRIBUTE_LIST_STYLE_TYPE } from './ListItemNodeSpec';
-import { LIST_ITEM } from './NodeNames';
-import { ATTRIBUTE_INDENT, MIN_INDENT_LEVEL } from './ParagraphNodeSpec';
-
-import type { NodeSpec } from './Types';
-
-const AUTO_LIST_STYLE_TYPES = ['disc', 'square', 'circle'];
-
-const BulletListNodeSpec: NodeSpec = {
-  attrs: {
-    id: { default: null },
-    indent: { default: 0 },
-    listStyleType: { default: null },
-  },
-  group: 'block',
-  content: LIST_ITEM + '+',
-  parseDOM: [
-    {
-      tag: 'ul',
-      getAttrs(dom: HTMLElement) {
-        const listStyleType =
-          dom.getAttribute(ATTRIBUTE_LIST_STYLE_TYPE) || null;
-
-        const indent = dom.hasAttribute(ATTRIBUTE_INDENT)
-          ? parseInt(dom.getAttribute(ATTRIBUTE_INDENT), 10)
-          : MIN_INDENT_LEVEL;
-        return {
-          indent,
-          listStyleType,
-        };
-      },
-    },
-  ],
-
-  toDOM(node: Node) {
-    const { indent, listStyleType } = node.attrs;
-    const attrs = {};
-    // [FS] IRAD-947 2020-05-26
-    // Bullet list type changing fix
-    attrs[ATTRIBUTE_INDENT] = indent;
-    if (listStyleType) {
-      attrs[ATTRIBUTE_LIST_STYLE_TYPE] = listStyleType;
-    }
-
-    let htmlListStyleType = listStyleType;
-
-    if (!htmlListStyleType || htmlListStyleType === 'disc') {
-      htmlListStyleType =
-        AUTO_LIST_STYLE_TYPES[indent % AUTO_LIST_STYLE_TYPES.length];
-    }
-
-    attrs.type = htmlListStyleType;
-    return ['ul', attrs, 0];
-  },
-};
-
-export default BulletListNodeSpec;

package/src/CZIProseMirror.js

@@ -1,90 +0,0 @@
-// @flow
-
-import { EditorView } from 'prosemirror-view';
-
-import convertToJSON from './convertToJSON';
-import CustomEditorView from './ui/CustomEditorView';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-const commandsRegistery = new Map<any, any>();
-const viewsRegistery = new Map<any, any>();
-
-// This file exports methods to help developer to debug editor from web
-// inspector. To use this, add the following lines to export the utility.
-//
-//   import * as CZIProseMirror from 'czi-prosemirror/dist/CZIProseMirror';
-//   window.CZIProseMirror = CZIProseMirror;
-
-export function registeryKeys(): Array<string> {
-  return Array.from(viewsRegistery.keys());
-}
-
-export function exportJSON(id: ?string): Object {
-  if (!id && viewsRegistery.size) {
-    id = registeryKeys()[0];
-    console.log(`use default editor id "${id}"`);
-  }
-  const view = viewsRegistery.get(String(id));
-  if (!view) {
-    if (!id) {
-      id = '';
-    }
-    throw new Error(`view ${id} does not exist`);
-  }
-  return convertToJSON(view.state);
-}
-
-export function registerEditorView(id: string, view: EditorView): void {
-  if (viewsRegistery.has(id)) {
-    throw new Error(`view ${id} already registered`);
-  }
-  if (!(view instanceof CustomEditorView)) {
-    throw new Error(`invalid view ${id}`);
-  }
-  if (!id) {
-    throw new Error('id is required');
-  }
-  viewsRegistery.set(id, view);
-}
-
-export function releaseEditorView(id: string): void {
-  if (!viewsRegistery.has(id)) {
-    throw new Error(`view ${id} was released`);
-  }
-  viewsRegistery.delete(id);
-}
-
-export function findEditorView(id: string): ?EditorView {
-  return viewsRegistery.get(id) || null;
-}
-
-export function executeCommand(name: string, viewID: ?string): boolean {
-  const command = commandsRegistery.get(name);
-  if (command) {
-    const view = viewID
-      ? viewsRegistery.get(viewID)
-      : Array.from(viewsRegistery.values())[0];
-    if (view) {
-      try {
-        return command.execute(view.state, view.dispatch, view, null);
-      } catch (ex) {
-        console.warn(ex);
-        return false;
-      }
-    }
-  }
-  return false;
-}
-
-export function registerCommand(name: string, command: UICommand): void {
-  if (!(command instanceof UICommand)) {
-    throw new Error(`invalid command ${name}`);
-  }
-  if (!name) {
-    throw new Error('invalid command name');
-  }
-  if (commandsRegistery.has(name)) {
-    throw new Error(`command ${name} already registered`);
-  }
-  commandsRegistery.set(name, command);
-}

package/src/CodeBlockCommand.js

@@ -1,43 +0,0 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { findParentNodeOfType } from 'prosemirror-utils';
-import { EditorView } from 'prosemirror-view';
-
-import { CODE_BLOCK } from './NodeNames';
-import { noop } from '@modusoperandi/licit-ui-commands';
-import toggleCodeBlock from './toggleCodeBlock';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CodeBlockCommand extends UICommand {
-  isActive = (state: EditorState): boolean => {
-    const result = this._findCodeBlock(state);
-    return !!(result && result.node);
-  };
-
-  execute = (
-    state: EditorState,
-    dispatch: ?(tr: Transform) => void,
-    view: ?EditorView
-  ): boolean => {
-    const { selection, schema } = state;
-    let { tr } = state;
-    tr = tr.setSelection(selection);
-    tr = toggleCodeBlock(tr, schema);
-    if (tr.docChanged) {
-      dispatch && dispatch(tr);
-      return true;
-    } else {
-      return false;
-    }
-  };
-
-  _findCodeBlock(state: EditorState): ?Object {
-    const codeBlock = state.schema.nodes[CODE_BLOCK];
-    const findCodeBlock = codeBlock ? findParentNodeOfType(codeBlock) : noop;
-    return findCodeBlock(state.selection);
-  }
-}
-
-export default CodeBlockCommand;

package/src/CodeBlockNodeSpec.js

@@ -1,24 +0,0 @@
-// @flow
-
-const PRE_DOM = ['pre', ['code', 0]];
-
-// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
-// :: NodeSpec A code listing. Disallows marks or non-text inline
-// nodes by default. Represented as a `<pre>` element with a
-// `<code>` element inside of it.
-const CodeBlockNodeSpec = {
-  attrs: {
-    id: { default: null },
-  },
-  content: 'inline*',
-  group: 'block',
-  marks: '_',
-  code: true,
-  defining: true,
-  parseDOM: [{ tag: 'pre', preserveWhitespace: 'full' }],
-  toDOM() {
-    return PRE_DOM;
-  },
-};
-
-export default CodeBlockNodeSpec;

package/src/CodeMarkSpec.js

@@ -1,14 +0,0 @@
-// @flow
-
-import type { MarkSpec } from './Types';
-
-const CODE_DOM = ['code', 0];
-
-const CodeMarkSpec: MarkSpec = {
-  parseDOM: [{ tag: 'code' }],
-  toDOM() {
-    return CODE_DOM;
-  },
-};
-
-export default CodeMarkSpec;

package/src/ContentPlaceholderPlugin.js

@@ -1,187 +0,0 @@
-// @flow
-
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import isEditorStateEmpty from './isEditorStateEmpty';
-
-import './ui/czi-editor.css';
-
-const CLASS_NAME_HAS_PLACEHOLDER = 'czi-has-placeholder';
-
-class ContentPlaceholderView {
-  _el = null;
-  _focused = null;
-  _view = null;
-  _visible = null;
-
-  constructor(editorView: EditorView) {
-    const el: any = document.createElement('div');
-
-    this._el = el;
-    this._view = editorView;
-
-    el.className = 'czi-editor-content-placeholder';
-    editorView.dom.parentNode.appendChild(el);
-    document.addEventListener('focusin', this._checkFocus, true);
-    document.addEventListener('focusout', this._checkFocus, false);
-
-    this.update(editorView);
-
-    // We don't know whether view is focused at this moment yet. Manually
-    // calls `this._checkFocus` which will set `_focused` accordingly.
-    this._checkFocus();
-  }
-
-  update(view: EditorView): void {
-    this._view = view;
-
-    const el = this._el;
-    if (!el || !view) {
-      return;
-    }
-
-    if (this._focused || !isEditorStateEmpty(view.state)) {
-      this._hide();
-      return;
-    }
-
-    const parentEl = el.parentNode;
-    const bodyEl = this._getBodyElement();
-    const placeholder = view.placeholder;
-    if (!parentEl || !bodyEl || !placeholder) {
-      return;
-    }
-
-    this._visible = true;
-    view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
-
-    const parentElRect = parentEl.getBoundingClientRect();
-    const bodyRect = bodyEl.getBoundingClientRect();
-    const bodyStyle = window.getComputedStyle(bodyEl);
-
-    const left = bodyRect.left - parentElRect.left;
-    const top = bodyRect.top - parentElRect.top;
-
-    el.style.left = left + 'px';
-    el.style.top = top + 'px';
-    el.style.padding = bodyStyle.padding;
-    el.style.display = 'block';
-    el.style.width = bodyEl.offsetWidth + 'px';
-
-    ReactDOM.render(<div>{placeholder}</div>, el);
-  }
-
-  destroy() {
-    this._hide();
-
-    const el = this._el;
-    if (el) {
-      el.parentNode && el.parentNode.removeChild(el);
-      ReactDOM.unmountComponentAtNode(el);
-    }
-    document.removeEventListener('focusin', this._checkFocus, true);
-    document.removeEventListener('focusout', this._checkFocus, false);
-    this._view = null;
-    this._el = null;
-    this._focused = false;
-    this._visible = false;
-  }
-
-  _checkFocus = (): void => {
-    const el = this._el;
-    const view = this._view;
-    if (!view || !el) {
-      return;
-    }
-    const doc = document;
-    const activeElement = doc.activeElement;
-    const bodyEl = this._getBodyElement();
-
-    if (!activeElement || !bodyEl || (doc.hasFocus && !doc.hasFocus())) {
-      this._onBlur();
-    } else {
-      if (
-        activeElement === bodyEl ||
-        bodyEl.contains(activeElement) ||
-        activeElement === bodyEl.parentNode
-      ) {
-        this._onFocus();
-      } else {
-        this._onBlur();
-      }
-    }
-  };
-
-  _onFocus(): void {
-    if (this._focused !== true) {
-      this._focused = true;
-      this._hide();
-    }
-  }
-
-  _onBlur(): void {
-    const view = this._view;
-    if (this._focused !== false) {
-      this._focused = false;
-      if (view && isEditorStateEmpty(view.state)) {
-        this._show();
-      } else {
-        this._hide();
-      }
-    }
-  }
-
-  _getBodyElement(): ?HTMLElement {
-    const view = this._view;
-    return (
-      view && view.docView && view.docView.dom && view.docView.dom.firstChild
-    );
-  }
-
-  _show(): void {
-    if (this._visible !== true) {
-      const el = this._el;
-      const view = this._view;
-      this._visible = true;
-      if (el) {
-        el.style.display = 'block';
-      }
-      if (view) {
-        this.update(view);
-        view.dom.classList.add(CLASS_NAME_HAS_PLACEHOLDER);
-      }
-    }
-  }
-
-  _hide(): void {
-    if (this._visible !== false) {
-      const el = this._el;
-      const view = this._view;
-      this._visible = false;
-      if (el) {
-        el.style.display = 'none';
-      }
-      if (view) {
-        view.dom.classList.remove(CLASS_NAME_HAS_PLACEHOLDER);
-      }
-    }
-  }
-}
-
-class ContentPlaceholderPlugin extends Plugin {
-  constructor() {
-    super({
-      // [FS] IRAD-1005 2020-07-07
-      // Upgrade outdated packages.
-      key: new PluginKey('ContentPlaceholderPlugin'),
-      view(editorView: EditorView) {
-        return new ContentPlaceholderView(editorView);
-      },
-    });
-  }
-}
-
-export default ContentPlaceholderPlugin;

package/src/CursorPlaceholderPlugin.js

@@ -1,115 +0,0 @@
-// @flow
-
-import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-
-import './ui/czi-cursor-placeholder.css';
-
-const PLACE_HOLDER_ID = { name: 'CursorPlaceholderPlugin' };
-
-let singletonInstance = null;
-
-// https://prosemirror.net/examples/upload/
-const SPEC = {
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  key: new PluginKey('CursorPlaceholderPlugin'),
-  state: {
-    init() {
-      return DecorationSet.empty;
-    },
-    apply(tr, set) {
-      set = set.map(tr.mapping, tr.doc);
-      const action = tr.getMeta(this);
-      if (!action) {
-        return set;
-      }
-      if (action.add) {
-        const widget = document.createElement('czi-cursor-placeholder');
-        widget.className = 'czi-cursor-placeholder';
-        const deco = Decoration.widget(action.add.pos, widget, {
-          id: PLACE_HOLDER_ID,
-        });
-        set = set.add(tr.doc, [deco]);
-      } else if (action.remove) {
-        const found = set.find(null, null, specFinder);
-        set = set.remove(found);
-      }
-
-      return set;
-    },
-  },
-  props: {
-    decorations: (state) => {
-      const plugin = singletonInstance;
-      return plugin ? plugin.getState(state) : null;
-    },
-  },
-};
-
-class CursorPlaceholderPlugin extends Plugin {
-  constructor() {
-    super(SPEC);
-    if (singletonInstance) {
-      return singletonInstance;
-    }
-    singletonInstance = this;
-  }
-}
-
-function specFinder(spec: Object): boolean {
-  return spec.id === PLACE_HOLDER_ID;
-}
-
-function findCursorPlaceholderPos(state: EditorState): ?number {
-  if (!singletonInstance) {
-    return null;
-  }
-  const decos = singletonInstance.getState(state);
-  const found = decos.find(null, null, specFinder);
-  const pos = found.length ? found[0].from : null;
-  return pos || null;
-}
-
-export function showCursorPlaceholder(state: EditorState): Transform {
-  const plugin = singletonInstance;
-  let { tr } = state;
-  if (!plugin || !tr.selection) {
-    return tr;
-  }
-
-  const pos = findCursorPlaceholderPos(state);
-  if (pos === null) {
-    if (!tr.selection.empty) {
-      // Replace the selection with a placeholder.
-      tr = tr.deleteSelection();
-    }
-    tr = tr.setMeta(plugin, {
-      add: {
-        pos: tr.selection.from,
-      },
-    });
-  }
-
-  return tr;
-}
-
-export function hideCursorPlaceholder(state: EditorState): Transform {
-  const plugin = singletonInstance;
-  let { tr } = state;
-  if (!plugin) {
-    return tr;
-  }
-
-  const pos = findCursorPlaceholderPos(state);
-  if (pos !== null) {
-    tr = tr.setMeta(plugin, {
-      remove: {},
-    });
-  }
-
-  return tr;
-}
-
-export default CursorPlaceholderPlugin;