@modusoperandi/licit 0.14.18 → 1.0.0

package/src/ui/MathEditor.js

@@ -1,78 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import MathQuillEditor from './mathquill-editor/MathQuillEditor';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-import uuid from './uuid';
-
-import './czi-form.css';
-
-class MathEditor extends React.PureComponent<any, any> {
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    initialValue: PropTypes.string,
-    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 string'
-        );
-      }
-      return null;
-    },
-  };
-
-  state = {
-    initialValue: this.props.initialValue,
-    value: this.props.initialValue || '',
-  };
-
-  _id = uuid();
-  _unmounted = false;
-
-  render(): React.Element<any> {
-    const { initialValue, value } = this.state;
-    return (
-      <div className="czi-math-editor">
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Insert Math</legend>
-            <MathQuillEditor onChange={this._onChange} value={value} />
-          </fieldset>
-          <div className="czi-form-buttons">
-            <CustomButton label="Cancel" onClick={this._cancel} />
-            <CustomButton
-              active={true}
-              disabled={!this.state.value}
-              label={initialValue ? 'Update' : 'Insert'}
-              onClick={this._insert}
-            />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  _onChange = (value: string): void => {
-    this.setState({ value });
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-
-  _insert = (): void => {
-    this.props.close(this.state.value);
-  };
-}
-
-export default MathEditor;

package/src/ui/MathInlineEditor.js

@@ -1,102 +0,0 @@
-// @flow
-
-import './czi-inline-editor.css';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import CustomEditorView from './CustomEditorView';
-import MathEditor from './MathEditor';
-import * as React from 'react';
-import { createPopUp } from '@modusoperandi/licit-ui-commands';
-
-const MathAlignValues = {
-  NONE: {
-    value: null,
-    text: 'Inline',
-  },
-  CENTER: {
-    value: 'center',
-    text: 'Break text',
-  },
-};
-
-export type MathInlineEditorValue = {
-  align: ?string,
-  latex: string,
-};
-
-class MathInlineEditor extends React.PureComponent<any, any> {
-  props: {
-    onEditEnd: () => void,
-    onEditStart: () => void,
-    onSelect: (val: any) => void,
-    value: ?MathInlineEditorValue,
-    editorView: ?CustomEditorView,
-  };
-
-  _popUp = null;
-
-  componentWillUnmount(): void {
-    this._popUp && this._popUp.close();
-  }
-
-  render(): React.Element<any> {
-    const { align, latex } = this.props.value || {};
-    const onClick = this._onClick;
-    const buttons = Object.keys(MathAlignValues).map((key) => {
-      const { value, text } = MathAlignValues[key];
-      return (
-        <CustomButton
-          active={align === value}
-          key={key}
-          label={text}
-          onClick={onClick}
-          value={value}
-        />
-      );
-    });
-
-    return (
-      <div className="czi-inline-editor">
-        {buttons}
-        <CustomButton
-          key="edit"
-          label="Edit"
-          onClick={this._editLatex}
-          value={latex || ''}
-        />
-      </div>
-    );
-  }
-
-  _onClick = (align: ?string): void => {
-    const value = this.props.value || {};
-    this.props.onSelect({ ...value, align });
-  };
-
-  _editLatex = (latex: string): void => {
-    if (this._popUp) {
-      return;
-    }
-    const { editorView, value } = this.props;
-    const props = {
-      runtime: editorView ? editorView.runtime : null,
-      initialValue: (value && value.latex) || '',
-    };
-    this._popUp = createPopUp(MathEditor, props, {
-      autoDismiss: false,
-      modal: true,
-      onClose: (latex) => {
-        if (this._popUp) {
-          this._popUp = null;
-          if (latex !== undefined) {
-            const value = this.props.value || {};
-            this.props.onSelect({ ...value, latex });
-          }
-          this.props.onEditEnd();
-        }
-      },
-    });
-    this.props.onEditStart();
-  };
-}
-
-export default MathInlineEditor;

package/src/ui/MathNodeView.js

@@ -1,175 +0,0 @@
-// @flow
-
-import './czi-math-view.css';
-import CustomNodeView from './CustomNodeView';
-import MathInlineEditor from './MathInlineEditor';
-import * as React from 'react';
-import { createPopUp } from '@modusoperandi/licit-ui-commands';
-import cx from 'classnames';
-import renderLaTeXAsHTML from './renderLaTeXAsHTML';
-import uuid from './uuid';
-import { Decoration } from 'prosemirror-view';
-import { FRAMESET_BODY_CLASSNAME } from './EditorFrameset';
-import { Node } from 'prosemirror-model';
-import { atAnchorBottomCenter } from '@modusoperandi/licit-ui-commands';
-import { NodeSelection } from 'prosemirror-state';
-
-import type { NodeViewProps } from './CustomNodeView';
-
-const EMPTY_SRC =
-  'data:image/gif;base64,' +
-  'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-
-class MathViewBody extends React.PureComponent<any, any> {
-  props: NodeViewProps;
-
-  state = {
-    isEditing: false,
-  };
-
-  _inlineEditor = null;
-  _id = uuid();
-  _mounted = false;
-
-  componentDidMount(): void {
-    this._mounted = true;
-    this._renderInlineEditor();
-  }
-
-  componentWillUnmount(): void {
-    this._mounted = false;
-  }
-
-  componentDidUpdate(prevProps: NodeViewProps): void {
-    this._renderInlineEditor();
-  }
-
-  render(): React.Element<any> {
-    // TODO: Resolve `readOnly`;
-    const readOnly = false;
-    const { node, selected, focused } = this.props;
-    const { attrs } = node;
-    const { latex } = attrs;
-    const { isEditing } = this.state;
-
-    const active = (focused || isEditing) && !readOnly;
-    const className = cx('czi-math-view-body', { active, selected });
-    const html = renderLaTeXAsHTML(latex);
-    return (
-      <span
-        className={className}
-        data-active={active ? 'true' : null}
-        data-latex={latex || ''}
-        id={this._id}
-        title={latex}
-      >
-        <img
-          alt={latex}
-          className="czi-math-view-body-img"
-          src={EMPTY_SRC}
-          title={latex}
-        />
-        <span
-          className="czi-math-view-body-content"
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
-      </span>
-    );
-  }
-
-  _renderInlineEditor(): void {
-    const el = document.getElementById(this._id);
-    if (!el || el.getAttribute('data-active') !== 'true') {
-      this._inlineEditor && this._inlineEditor.close();
-      return;
-    }
-    const { node } = this.props;
-    const editorProps = {
-      value: node.attrs,
-      onSelect: this._onChange,
-      onEditStart: this._onEditStart,
-      onEditEnd: this._onEditEnd,
-    };
-    if (this._inlineEditor) {
-      this._inlineEditor.update(editorProps);
-    } else {
-      this._inlineEditor = createPopUp(MathInlineEditor, editorProps, {
-        anchor: el,
-        autoDismiss: false,
-        container: el.closest(`.${FRAMESET_BODY_CLASSNAME}`),
-        position: atAnchorBottomCenter,
-        onClose: () => {
-          this._inlineEditor = null;
-        },
-      });
-    }
-  }
-
-  _onEditStart = (): void => {
-    this.setState({ isEditing: true });
-  };
-
-  _onEditEnd = (): void => {
-    this.setState({ isEditing: false });
-  };
-
-  _onChange = (value: ?{ align: ?string, latex: string }): void => {
-    if (!this._mounted) {
-      return;
-    }
-
-    const align = value ? value.align : null;
-    const latex = value ? value.latex : null;
-
-    const { getPos, node, editorView } = this.props;
-    const pos = getPos();
-    const attrs = {
-      ...node.attrs,
-      latex,
-      align,
-    };
-
-    let tr = editorView.state.tr;
-    const { selection } = editorView.state;
-    tr = tr.setNodeMarkup(pos, null, attrs);
-    // [FS] IRAD-1005 2020-07-23
-    // Upgrade outdated packages.
-    // reset selection to original using the latest doc.
-    const origSelection = NodeSelection.create(tr.doc, selection.from);
-    tr = tr.setSelection(origSelection);
-    editorView.dispatch(tr);
-  };
-}
-
-class MathNodeView extends CustomNodeView {
-  // @override
-  createDOMElement(): HTMLElement {
-    const el = document.createElement('span');
-    el.className = 'czi-math-view';
-    this._updateDOM(el);
-    return el;
-  }
-
-  // @override
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    super.update(node, decorations);
-    this._updateDOM(this.dom);
-    return true;
-  }
-
-  // @override
-  renderReactComponent(): React.Element<any> {
-    return <MathViewBody {...this.props} />;
-  }
-
-  _updateDOM(el: HTMLElement): void {
-    const { align } = this.props.node.attrs;
-    let className = 'czi-math-view';
-    if (align) {
-      className += ' align-' + align;
-    }
-    el.className = className;
-  }
-}
-
-export default MathNodeView;

package/src/ui/PasteMenu.js

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import { EditorView } from 'prosemirror-view';
-import uuid from './uuid';
-import './listType.css';
-
-// [FS] IRAD-1076 2020-10-15
-// Popup menu UI with paste options.
-
-class PasteMenu extends React.PureComponent<any, any> {
-  _activeCommand: ?UICommand = null;
-  props: {
-    view: EditorView,
-    close: (?string) => void,
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render() {
-    const children = [];
-    children.push(
-      <button
-        className="pastemenu"
-        id="paste"
-        key="paste"
-        onClick={(e) => this._onUIEnter('paste')}
-        value="paste"
-      >
-        Paste
-      </button>
-    );
-    children.push(
-      <button
-        className="pastemenu"
-        id="keepTextOnly"
-        key="keepTextOnly"
-        onClick={(e) => this._onUIEnter('keepTextOnly')}
-        value="keepTextOnly"
-      >
-        Keep Text Only
-      </button>
-    );
-
-    return <div className="container">{children}</div>;
-  }
-
-  _onUIEnter = (id: string) => {
-    this.props.close(id);
-  };
-}
-
-export default PasteMenu;

package/src/ui/ResizeObserver.js

@@ -1,106 +0,0 @@
-// @flow
-
-import ResizeObserver from 'resize-observer-polyfill';
-import nullthrows from 'nullthrows';
-
-// flow type copied from
-// https://github.com/que-etc/resize-observer-polyfill/blob/master/src/index.js.flow
-
-type ClientRectLikeReadOnly = {
-  +x: number,
-  +y: number,
-  +width: number,
-  +height: number,
-  +top: number,
-  +right: number,
-  +bottom: number,
-  +left: number,
-};
-
-type ResizeCallback = (r: ResizeObserverEntry) => void;
-
-type Entries = $ReadOnlyArray<ResizeObserverEntry>;
-
-// Lightweight utilities to make observing resize of DOM element easier
-// with `ResizeObserver`.
-// See https://developers.google.com/web/updates/2016/10/resizeobserver
-// Usage:
-//   `ResizeObserver.observe(element, (entry) => console.log(entry))`
-//   `ResizeObserver.unobserve(element)`
-
-export type ResizeObserverEntry = {
-  +target: Element,
-  +contentRect: ClientRectLikeReadOnly,
-};
-
-let instance: ?ResizeObserver = null;
-
-const nodesObserving: Map<Element, Array<ResizeCallback>> = new Map<any, any>();
-
-function onResizeObserve(entries: Entries): void {
-  entries.forEach(handleResizeObserverEntry);
-}
-
-function handleResizeObserverEntry(entry: ResizeObserverEntry): void {
-  const node = entry.target;
-  const callbacks = nodesObserving.get(node);
-  const executeCallback = (cb) => cb(entry);
-  callbacks && callbacks.forEach(executeCallback);
-}
-
-export function observe(
-  node: HTMLElement,
-  callback: (ResizeObserverEntry) => void
-): void {
-  const el: any = node;
-  const observer = instance || (instance = new ResizeObserver(onResizeObserve));
-  if (nodesObserving.has(el)) {
-    // Already observing node.
-    const callbacks = nullthrows(nodesObserving.get(el));
-    callbacks.push(callback);
-  } else {
-    const callbacks = [callback];
-    nodesObserving.set(el, callbacks);
-    observer.observe(el);
-  }
-}
-
-export function unobserve(node: HTMLElement, callback?: ResizeCallback): void {
-  const observer = instance;
-  if (!observer) {
-    return;
-  }
-  const el: any = node;
-  observer.unobserve(el);
-
-  if (callback) {
-    // Remove the passed in callback from the callbacks of the observed node
-    // And, if no more callbacks then stop observing the node
-    const callbacks = nodesObserving.has(el)
-      ? nullthrows(nodesObserving.get(el)).filter((cb) => cb !== callback)
-      : null;
-    if (callbacks && callbacks.length) {
-      nodesObserving.set(el, callbacks);
-    } else {
-      nodesObserving.delete(el);
-    }
-  } else {
-    // Delete all callbacks for the node.
-    nodesObserving.delete(el);
-  }
-
-  if (!nodesObserving.size) {
-    // We have nothing to observe. Stop observing, which stops the
-    // ResizeObserver instance from receiving notifications of
-    // DOM resizing. Until the observe() method is used again.
-    // According to specification a ResizeObserver is deleted by the garbage
-    // collector if the target element is deleted.
-    observer.disconnect();
-    instance = null;
-  }
-}
-
-export default {
-  observe,
-  unobserve,
-};

package/src/ui/RichTextEditor.js

@@ -1,133 +0,0 @@
-// @flow
-
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import createEmptyEditorState from '../createEmptyEditorState';
-import Editor from './Editor';
-import EditorFrameset from './EditorFrameset';
-import EditorToolbar from './EditorToolbar';
-import Frag from './Frag';
-import uuid from './uuid';
-
-import type { EditorFramesetProps } from './EditorFrameset';
-import type { EditorProps } from './Editor';
-
-type Props = EditorFramesetProps & EditorProps & { children?: ?any };
-
-type State = {
-  editorView: ?EditorView,
-};
-
-const EMPTY_EDITOR_RUNTIME = {};
-
-class RichTextEditor extends React.PureComponent<any, any> {
-  props: Props;
-
-  state: State;
-
-  _id: string;
-
-  constructor(props: any, context: any) {
-    super(props, context);
-    this._id = uuid();
-    this.state = {
-      contentHeight: NaN,
-      contentOverflowHidden: false,
-      editorView: null,
-    };
-  }
-
-  render(): React.Element<any> {
-    const {
-      autoFocus,
-      children,
-      className,
-      disabled,
-      embedded,
-      header,
-      height,
-      onChange,
-      nodeViews,
-      placeholder,
-      readOnly,
-      width,
-    } = this.props;
-
-    let { editorState, runtime } = this.props;
-
-    editorState = editorState || createEmptyEditorState();
-    runtime = runtime || EMPTY_EDITOR_RUNTIME;
-
-    const { editorView } = this.state;
-
-    const toolbar =
-      !!readOnly === true ? null : (
-        <EditorToolbar
-          disabled={disabled}
-          dispatchTransaction={this._dispatchTransaction}
-          editorState={editorState || Editor.EDITOR_EMPTY_STATE}
-          editorView={editorView}
-          readOnly={readOnly}
-        />
-      );
-
-    const body = (
-      <Frag>
-        <Editor
-          autoFocus={autoFocus}
-          disabled={disabled}
-          dispatchTransaction={this._dispatchTransaction}
-          editorState={editorState}
-          embedded={embedded}
-          id={this._id}
-          nodeViews={nodeViews}
-          onChange={onChange}
-          onReady={this._onReady}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          runtime={runtime}
-        />
-        {children}
-      </Frag>
-    );
-
-    return (
-      <EditorFrameset
-        body={body}
-        className={className}
-        embedded={embedded}
-        header={header}
-        height={height}
-        toolbar={toolbar}
-        width={width}
-      />
-    );
-  }
-
-  _dispatchTransaction = (tr: Transform): void => {
-    const { onChange, editorState } = this.props;
-    // [FS] IRAD-1171 2021-02-04
-    // To bring selection on editor in read-only mode.
-    // Removed force return when readOnly flag is true
-    if (onChange) {
-      // [FS-AFQ][20-FEB-2020]
-      // Collaboration
-      onChange({
-        state: editorState || Editor.EDITOR_EMPTY_STATE,
-        transaction: tr,
-      });
-    }
-  };
-
-  _onReady = (editorView: EditorView): void => {
-    if (editorView !== this.state.editorView) {
-      this.setState({ editorView });
-      const { onReady } = this.props;
-      onReady && onReady(editorView);
-    }
-  };
-}
-
-export default RichTextEditor;