@modusoperandi/licit 0.14.18 → 1.0.1

package/src/ui/CustomNodeView.js

@@ -1,200 +0,0 @@
-// @xflow
-
-import { Node } from 'prosemirror-model';
-import { Decoration, EditorView } from 'prosemirror-view';
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import SelectionObserver from './SelectionObserver';
-
-export type NodeViewProps = {
-  editorView: EditorView,
-  getPos: () => number,
-  node: Node,
-  selected: boolean,
-  focused: boolean,
-};
-
-// Standard className for selected node.
-const SELECTED_NODE_CLASS_NAME = 'ProseMirror-selectednode';
-
-const mountedViews = new Set();
-const pendingViews = new Set();
-
-function onMutation(mutations: any, observer: MutationObserver): void {
-  const root = document.body;
-  if (!root) {
-    return;
-  }
-
-  const mountingViews = [];
-  for (const view of pendingViews) {
-    const el = view.dom;
-    if (root.contains(el)) {
-      pendingViews.delete(view);
-      mountingViews.push(view);
-      view.__renderReactComponent();
-    }
-  }
-
-  for (const view of mountedViews) {
-    const el = view.dom;
-    if (!root.contains(el)) {
-      mountedViews.delete(el);
-      ReactDOM.unmountComponentAtNode(el);
-    }
-  }
-
-  mountingViews.forEach((view) => mountedViews.add(view));
-
-  if (mountedViews.size === 0) {
-    observer.disconnect();
-  }
-}
-
-// Workaround to get in-selection views selected.
-// See https://discuss.prosemirror.net/t/copy-selection-issue-with-the-image-node/1673/2;
-function onSelection(entries: Array<any>, observer: SelectionObserver): void {
-  if (!window.getSelection) {
-    console.warn('window.getSelection() is not supported');
-    observer.disconnect();
-    return;
-  }
-
-  const selection = window.getSelection();
-  if (!selection.containsNode) {
-    console.warn('selection.containsNode() is not supported');
-    observer.disconnect();
-    return;
-  }
-
-  for (const view of mountedViews) {
-    const el = view.dom;
-    if (selection.containsNode(el)) {
-      view.selectNode();
-    } else {
-      view.deselectNode();
-    }
-  }
-
-  if (mountedViews.size === 0) {
-    observer.disconnect();
-  }
-}
-
-const selectionObserver = new SelectionObserver(onSelection);
-const mutationObserver = new MutationObserver(onMutation);
-
-// This implements the `NodeView` interface and renders a Node with a react
-// Component.
-// https://prosemirror.net/docs/ref/#view.NodeView
-// https://github.com/ProseMirror/prosemirror-view/blob/master/src/viewdesc.js#L429
-class CustomNodeView {
-  dom: HTMLElement;
-
-  props: NodeViewProps;
-
-  _selected: null;
-
-  constructor(
-    node: Node,
-    editorView: EditorView,
-    getPos: () => number,
-    decorations: Array<Decoration>
-  ) {
-    this.props = {
-      decorations,
-      editorView,
-      getPos,
-      node,
-      selected: false,
-      focused: false,
-    };
-
-    pendingViews.add(this);
-
-    // The editor will use this as the node's DOM representation
-    const dom = this.createDOMElement();
-    this.dom = dom;
-    dom.onClick = this._onClick;
-
-    if (pendingViews.size === 1) {
-      // [FS] IRAD-1060 2020-09-10
-      // Observe the editorview's dom insteadof root document so that
-      // if multiple instances of editor in a page shouldn't cross-talk
-      mutationObserver.observe(/*document*/ editorView.dom, {
-        childList: true,
-        subtree: true,
-      });
-      selectionObserver.observe(/*document*/ editorView.dom);
-    }
-  }
-
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    this.props = {
-      ...this.props,
-      node,
-    };
-    this.__renderReactComponent();
-    return true;
-  }
-
-  stopEvent(): boolean {
-    return false;
-  }
-
-  // Mark this node as being the selected node.
-  selectNode() {
-    this._selected = true;
-    this.dom.classList.add(SELECTED_NODE_CLASS_NAME);
-    this.__renderReactComponent();
-  }
-
-  // Remove selected node marking from this node.
-  deselectNode() {
-    this._selected = false;
-    this.dom.classList.remove(SELECTED_NODE_CLASS_NAME);
-    this.__renderReactComponent();
-  }
-
-  // This should be overwrite by subclass.
-  createDOMElement(): HTMLElement {
-    // The editor will use this as the node's DOM representation.
-    // return document.createElement('span');
-    throw new Error('not implemented');
-  }
-
-  // This should be overwrite by subclass.
-  renderReactComponent(): React.Element<any> {
-    // return <CustomNodeViewComponent {...this.props} />;
-    throw new Error('not implemented');
-  }
-
-  destroy(): void {
-    // Called when the node view is removed from the editor or the whole
-    // editor is destroyed.
-    // sub-class may override this method.
-    // [FS] IRAD-1555 2021-09-13
-    // When destroying the node view, remove from the set.
-    // FIX: This solves the image missing issue.
-    pendingViews.delete(this);
-  }
-
-  __renderReactComponent(): void {
-    const { editorView, getPos } = this.props;
-
-    if (editorView.state && editorView.state.selection) {
-      const { from } = editorView.state.selection;
-      const pos = getPos();
-      this.props.selected = this._selected;
-      this.props.focused = editorView.focused && pos === from;
-    } else {
-      this.props.selected = false;
-      this.props.focused = false;
-    }
-
-    ReactDOM.render(this.renderReactComponent(), this.dom);
-  }
-}
-
-export default CustomNodeView;

package/src/ui/CustomRadioButton.js

@@ -1,65 +0,0 @@
-// @flow
-
-import './czi-custom-radio-button.css';
-import { PointerSurface } from '@modusoperandi/licit-ui-commands';
-import * as React from 'react';
-import cx from 'classnames';
-import uuid from './uuid';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-
-import type { PointerSurfaceProps } from '@modusoperandi/licit-ui-commands';;
-
-class CustomRadioButton extends React.PureComponent<any, any> {
-  props: PointerSurfaceProps & {
-    checked?: ?boolean,
-    inline?: ?boolean,
-    label?: string | React.Element<any> | null,
-    name?: ?string,
-    onSelect?: ?(val: any, e: SyntheticEvent<>) => void,
-  };
-
-  _name = uuid();
-
-  render(): React.Element<any> {
-    const {
-      title,
-      className,
-      checked,
-      label,
-      inline,
-      name,
-      onSelect,
-      disabled,
-      ...pointerProps
-    } = this.props;
-
-    const klass = cx(className, 'czi-custom-radio-button', {
-      checked: checked,
-      inline: inline,
-    });
-
-    return (
-      <PointerSurface
-        {...pointerProps}
-        className={klass}
-        disabled={disabled}
-        onClick={onSelect}
-        title={title || label}
-      >
-        <input
-          checked={checked}
-          className="czi-custom-radio-button-input"
-          disabled={disabled}
-          name={name || this._name}
-          onChange={preventEventDefault}
-          tabIndex={disabled ? null : 0}
-          type="radio"
-        />
-        <span className="czi-custom-radio-button-icon" />
-        <span className="czi-custom-radio-button-label">{label}</span>
-      </PointerSurface>
-    );
-  }
-}
-
-export default CustomRadioButton;

package/src/ui/DocLayoutEditor.js

@@ -1,146 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { LAYOUT } from '../DocNodeSpec';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import CustomRadioButton from './CustomRadioButton';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-
-import './czi-body-layout-editor.css';
-import './czi-form.css';
-
-export type DocLayoutEditorValue = {
-  layout: ?string,
-  width: ?number,
-};
-
-type State = {
-  layout: ?string,
-  selectedValue: any,
-  width: ?number,
-};
-
-class DocLayoutEditor extends React.PureComponent<any, any> {
-  _unmounted = false;
-
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    // initialValue: PropTypes.shape({
-    //   layout: PropTypes.string,
-    //   width: PropTypes.number,
-    // }),
-
-    close: function (props: any, propName: string) {
-      const fn = props[propName];
-      if (
-        !fn.prototype ||
-        (typeof fn.prototype.constructor !== 'function' &&
-          fn.prototype.constructor.length !== 1)
-      ) {
-        return new Error(
-          propName +
-            'must be a function with 1 arg of type DocLayoutEditorValue'
-        );
-      }
-      return null;
-    },
-  };
-
-  state: State;
-
-  constructor(props: Object, context: Object) {
-    super(props, context);
-    const { width, layout } = this.props.initialValue || {};
-    this.state = {
-      width,
-      layout,
-      selectedValue: width || layout || LAYOUT.US_LETTER_PORTRAIT, // or LAYOUT.A4_PORTRAIT to define default layout
-    };
-  }
-
-  render(): React.Element<any> {
-    const { width, selectedValue } = this.state;
-    const customOption = width ? (
-      <CustomRadioButton
-        checked={selectedValue === width}
-        key="c"
-        label={`Custom width: ${width}pt`}
-        onSelect={this._onSelect}
-        value={width}
-      />
-    ) : null;
-
-    return (
-      <div className="czi-body-layout-editor">
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Page Layout</legend>
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.US_LETTER_PORTRAIT}
-              label="US Letter - Portrait"
-              onSelect={this._onSelect}
-              value={LAYOUT.US_LETTER_PORTRAIT}
-            />
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.US_LETTER_LANDSCAPE}
-              label="US Letter - Landscape"
-              onSelect={this._onSelect}
-              value={LAYOUT.US_LETTER_LANDSCAPE}
-            />
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.A4_PORTRAIT}
-              label="A4 - Portrait"
-              onSelect={this._onSelect}
-              value={LAYOUT.A4_PORTRAIT}
-            />
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.A4_LANDSCAPE}
-              label="A4 - Landscape"
-              onSelect={this._onSelect}
-              value={LAYOUT.A4_LANDSCAPE}
-            />
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.DESKTOP_SCREEN_4_3}
-              label="4:3 Desktop Screen"
-              onSelect={this._onSelect}
-              value={LAYOUT.DESKTOP_SCREEN_4_3}
-            />
-            <CustomRadioButton
-              checked={selectedValue === LAYOUT.DESKTOP_SCREEN_16_9}
-              label="16:9 Desktop Screen"
-              onSelect={this._onSelect}
-              value={LAYOUT.DESKTOP_SCREEN_16_9}
-            />
-            {customOption}
-          </fieldset>
-          <hr />
-          <div className="czi-form-buttons">
-            <CustomButton label="Cancel" onClick={this._cancel} />
-            <CustomButton active={true} label="Apply" onClick={this._apply} />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  _onSelect = (selectedValue: any): void => {
-    this.setState({ selectedValue });
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-
-  _apply = (): void => {
-    const { selectedValue } = this.state;
-    if (typeof selectedValue === 'string') {
-      this.props.close({ width: null, layout: selectedValue });
-    } else {
-      this.props.close({ width: selectedValue, layout: null });
-    }
-  };
-}
-
-export default DocLayoutEditor;

package/src/ui/Editor.js

@@ -1,288 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import { Schema } from 'prosemirror-model';
-import { EditorState, Transaction } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-import webfontloader from 'webfontloader';
-
-import 'prosemirror-gapcursor/style/gapcursor.css';
-import 'prosemirror-view/style/prosemirror.css';
-
-import {
-  exportJSON,
-  registerEditorView,
-  registeryKeys,
-  releaseEditorView,
-} from '../CZIProseMirror';
-import { BOOKMARK, LIST_ITEM, MATH } from '../NodeNames';
-import WebFontLoader from '../WebFontLoader';
-import { preLoadFonts } from '../FontTypeMarkSpec';
-import createEmptyEditorState from '../createEmptyEditorState';
-import normalizeHTML from '../normalizeHTML';
-import BookmarkNodeView from './BookmarkNodeView';
-import CustomEditorView from './CustomEditorView';
-import CustomNodeView from './CustomNodeView';
-import ListItemNodeView from './ListItemNodeView';
-import MathNodeView from './MathNodeView';
-import handleEditorDrop from './handleEditorDrop';
-import handleEditorKeyDown from './handleEditorKeyDown';
-import handleEditorPaste from './handleEditorPaste';
-import uuid from './uuid';
-import './czi-editor.css';
-import type { EditorRuntime } from '../Types';
-
-export type EditorProps = {
-  autoFocus?: ?boolean,
-  disabled?: ?boolean,
-  dispatchTransaction?: ?(tr: Transform) => void,
-  editorState?: ?EditorState,
-  embedded?: ?boolean,
-  onBlur?: ?() => void,
-  onChange?: ?(state: EditorState) => void,
-  onReady?: ?(view: EditorView) => void,
-  // Mapping for custom node views.
-  nodeViews?: ?{ [nodeName: string]: CustomNodeView },
-  placeholder?: ?(string | React.Element<any>),
-  readOnly?: ?boolean,
-  runtime?: ?EditorRuntime,
-  transformPastedHTML?: (html: string) => string,
-};
-
-// Export utilities for debugging.
-window.CZIProseMirror = {
-  exportJSON,
-  registeryKeys,
-};
-
-const AUTO_FOCUS_DELAY = 350;
-
-// Default custom node views.
-export const DEFAULT_NODE_VIEWS = Object.freeze({
-  [MATH]: MathNodeView,
-  [BOOKMARK]: BookmarkNodeView,
-  [LIST_ITEM]: ListItemNodeView,
-});
-
-const EDITOR_EMPTY_STATE = Object.freeze(createEmptyEditorState());
-
-// Monkey patch the `scrollIntoView` mathod of 'Transaction'.
-// Why this is necessary?
-// It appears that promse-mirror does call `scrollIntoView` extensively
-// from many of the built-in transformations, thus cause unwanted page
-// scrolls. To make the behavior more manageable, this patched method asks
-// developer to explicitly use `scrollIntoView(true)` to enforce page scroll.
-const scrollIntoView = Transaction.prototype.scrollIntoView;
-const scrollIntoViewPatched = function (forced: boolean): Transaction {
-  if (forced === true && scrollIntoView) {
-    return scrollIntoView.call(this);
-  } else {
-    return this;
-  }
-};
-Transaction.prototype.scrollIntoView = scrollIntoViewPatched;
-
-// Sets the implementation so that `FontTypeMarkSpec` can load custom fonts.
-WebFontLoader.setImplementation(webfontloader);
-// FS IRAD-988 2020-06-18
-preLoadFonts();
-
-const handleDOMEvents = {
-  drop: handleEditorDrop,
-  keydown: handleEditorKeyDown,
-  paste: handleEditorPaste,
-};
-
-function bindNodeView(NodeView: CustomNodeView): Function {
-  return (node, view, getPos, decorations) => {
-    return new NodeView(node, view, getPos, decorations);
-  };
-}
-
-function getSchema(editorState: ?EditorState): Schema {
-  return editorState ? editorState.schema : EDITOR_EMPTY_STATE.schema;
-}
-
-class Editor extends React.PureComponent<any, any> {
-  static EDITOR_EMPTY_STATE = EDITOR_EMPTY_STATE;
-
-  _autoFocusTimer = 0;
-  _id = uuid();
-  _editorView = null;
-
-  props: EditorProps;
-
-  state = {
-    isPrinting: false,
-  };
-
-  static defaultProps = {
-    transformPastedHTML: normalizeHTML,
-  };
-
-  componentDidMount(): void {
-    const {
-      onReady,
-      editorState,
-      readOnly,
-      runtime,
-      placeholder,
-      disabled,
-      dispatchTransaction,
-      nodeViews,
-      transformPastedHTML,
-    } = this.props;
-
-    const editorNode = document.getElementById(this._id);
-    if (editorNode) {
-      const effectiveNodeViews = Object.assign(
-        {},
-        DEFAULT_NODE_VIEWS,
-        nodeViews
-      );
-      const boundNodeViews = {};
-      const schema = getSchema(editorState);
-      const { nodes } = schema;
-
-      Object.keys(effectiveNodeViews).forEach((nodeName) => {
-        const nodeView = effectiveNodeViews[nodeName];
-        // Only valid and supported node views should be used.
-        if (nodes[nodeName]) {
-          boundNodeViews[nodeName] = bindNodeView(nodeView);
-        }
-      });
-
-      // Reference: http://prosemirror.net/examples/basic/
-      const view = (this._editorView = new CustomEditorView(editorNode, {
-        dispatchTransaction,
-        editable: this._isEditable,
-        nodeViews: boundNodeViews,
-        state: editorState || EDITOR_EMPTY_STATE,
-        transformPastedHTML,
-        handleDOMEvents,
-      }));
-
-      view.runtime = runtime;
-      view.placeholder = placeholder;
-      view.readOnly = !!readOnly;
-      view.disabled = !!disabled;
-      view.updateState(editorState || EDITOR_EMPTY_STATE);
-
-      // Expose the view to CZIProseMirror so developer could debug it.
-      registerEditorView(this._id, view);
-      this.onEditorReady(view, onReady);
-    }
-
-    window.addEventListener('beforeprint', this._onPrintStart, false);
-    window.addEventListener('afterprint', this._onPrintEnd, false);
-  }
-
-  onEditorReady(view: EditorView, onReady: Function) {
-    onReady && onReady(view);
-    this._autoFocusTimer && clearTimeout(this._autoFocusTimer);
-    this._autoFocusTimer = this.props.autoFocus
-      ? setTimeout(this.focus, AUTO_FOCUS_DELAY)
-      : 0;
-  }
-
-  componentDidUpdate(prevProps: EditorProps): void {
-    const view = this._editorView;
-    if (view) {
-      const prevSchema = getSchema(prevProps.editorState);
-      const currSchema = getSchema(this.props.editorState);
-      if (prevSchema !== currSchema) {
-        // schema should never change.
-        // TODO: re-create the editor view if schema changed.
-        console.error('editor schema changed.');
-      }
-
-      const {
-        runtime,
-        editorState,
-        placeholder,
-        readOnly,
-        disabled,
-      } = this.props;
-      const { isPrinting } = this.state;
-      const state = editorState || EDITOR_EMPTY_STATE;
-      view.runtime = runtime;
-      view.placeholder = placeholder;
-      view.readOnly = !!readOnly || isPrinting;
-      view.disabled = !!disabled;
-      view.updateState(state);
-
-      this._autoFocusTimer && clearTimeout(this._autoFocusTimer);
-      this._autoFocusTimer =
-        !prevProps.autoFocus && this.props.autoFocus
-          ? setTimeout(this.focus, AUTO_FOCUS_DELAY)
-          : 0;
-    }
-  }
-
-  componentWillUnmount(): void {
-    this._autoFocusTimer && clearTimeout(this._autoFocusTimer);
-    this._editorView && this._editorView.destroy();
-    this._editorView = null;
-    releaseEditorView(this._id);
-    window.removeEventListener('beforeprint', this._onPrintStart, false);
-    window.removeEventListener('afterprint', this._onPrintEnd, false);
-  }
-
-  render(): React.Element<any> {
-    const { embedded, readOnly } = this.props;
-    const className = cx('prosemirror-editor-wrapper', { embedded, readOnly });
-    return (
-      <div
-        className={className}
-        data-czi-prosemirror-editor-id={this._id}
-        id={this._id}
-        onBlur={this._onBlur}
-      />
-    );
-  }
-
-  _onBlur = (): void => {
-    const { onBlur } = this.props;
-    const view = this._editorView;
-    if (view && !view.disabled && !view.readOnly && onBlur) {
-      onBlur();
-    }
-  };
-
-  focus = (): void => {
-    const view = this._editorView;
-    if (view && !view.disabled && !view.readOnly) {
-      view.focus();
-    }
-  };
-  // [FS-AFQ][20-FEB-2020]
-  // Collaboration
-  _dispatchTransaction = (transaction: Transform): void => {
-    const { editorState, readOnly, onChange } = this.props;
-    if (readOnly === true || !onChange) {
-      return;
-    }
-    onChange({
-      transaction,
-      state: editorState || EDITOR_EMPTY_STATE,
-    });
-  };
-
-  _isEditable = (): boolean => {
-    const { disabled, readOnly } = this.props;
-    const { isPrinting } = this.state;
-    return !isPrinting && !!this._editorView && !readOnly && !disabled;
-  };
-
-  _onPrintStart = (): void => {
-    this.setState({ isPrinting: true });
-  };
-
-  _onPrintEnd = (): void => {
-    this.setState({ isPrinting: false });
-  };
-}
-
-export default Editor;