@modusoperandi/licit 0.14.17 → 1.0.0

package/dist/ui/Editor.js.flow

@@ -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;

package/dist/ui/EditorFrameset.js

@@ -1,86 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.bpfrpt_proptype_EditorFramesetProps = exports.FRAMESET_BODY_CLASSNAME = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var React = _interopRequireWildcard(require("react"));
-require("./czi-editor-frameset.css");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var bpfrpt_proptype_EditorFramesetProps = {
-  "body": _propTypes.default.node,
-  "className": _propTypes.default.string,
-  "embedded": _propTypes.default.bool,
-  "header": _propTypes.default.node,
-  "height": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  "toolbarPlacement": _propTypes.default.oneOf(["header", "body"]),
-  "toolbar": _propTypes.default.node,
-  "width": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-};
-exports.bpfrpt_proptype_EditorFramesetProps = bpfrpt_proptype_EditorFramesetProps;
-const FRAMESET_BODY_CLASSNAME = 'czi-editor-frame-body';
-exports.FRAMESET_BODY_CLASSNAME = FRAMESET_BODY_CLASSNAME;
-function toCSS(val) {
-  if (!val || val === 'auto') {
-    // '', 0, null, false, 'auto' are all treated as undefined
-    // instead of auto...
-    return undefined;
-  }
-  if (isNaN(val)) {
-    return `${val}`;
-  }
-  return `${val}px`;
-}
-class EditorFrameset extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "props", void 0);
-  }
-  render() {
-    const {
-      body,
-      className,
-      embedded,
-      header,
-      height,
-      toolbarPlacement,
-      toolbar,
-      width
-    } = this.props;
-    const mainStyle = {
-      width: toCSS(width),
-      height: toCSS(height)
-    };
-    const mainClassName = (0, _classnames.default)(className, {
-      'czi-editor-frameset': true,
-      // Layout is fixed when either width or height is set.
-      'with-fixed-layout': mainStyle.width || mainStyle.height,
-      embedded: embedded
-    });
-    const toolbarHeader = toolbarPlacement === 'header' || !toolbarPlacement ? toolbar : null;
-    const toolbarBody = toolbarPlacement === 'body' && toolbar;
-    return /*#__PURE__*/React.createElement("div", {
-      className: mainClassName,
-      style: mainStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-frame-main"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-frame-head"
-    }, header, toolbarHeader), /*#__PURE__*/React.createElement("div", {
-      className: FRAMESET_BODY_CLASSNAME
-    }, toolbarBody, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-frame-body-scroll"
-    }, body)), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-frame-footer"
-    })));
-  }
-}
-var _default = EditorFrameset;
-exports.default = _default;

package/dist/ui/EditorToolbar.js

@@ -1,206 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _prosemirrorState = require("prosemirror-state");
-var _prosemirrorTransform = require("prosemirror-transform");
-var _prosemirrorView = require("prosemirror-view");
-var React = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _CommandButton = _interopRequireDefault(require("./CommandButton"));
-var _CommandMenuButton = _interopRequireDefault(require("./CommandMenuButton"));
-var _licitUiCommands = require("@modusoperandi/licit-ui-commands");
-var _EditorToolbarConfig = require("./EditorToolbarConfig");
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _ResizeObserver = _interopRequireDefault(require("./ResizeObserver"));
-var _licitDocAttrsStep = require("@modusoperandi/licit-doc-attrs-step");
-var _isReactClass = _interopRequireDefault(require("./isReactClass"));
-require("./czi-editor-toolbar.css");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-class EditorToolbar extends React.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "_body", null);
-    _defineProperty(this, "props", void 0);
-    _defineProperty(this, "state", {
-      expanded: false,
-      wrapped: null
-    });
-    _defineProperty(this, "_renderButtonsGroup", (group, index) => {
-      const buttons = Object.keys(group).map(label => {
-        const obj = group[label];
-        if ((0, _isReactClass.default)(obj)) {
-          // JSX requies the component to be named with upper camel case.
-          const ThatComponent = obj;
-          const {
-            editorState,
-            editorView,
-            dispatchTransaction
-          } = this.props;
-          return /*#__PURE__*/React.createElement(ThatComponent, {
-            dispatch: dispatchTransaction,
-            editorState: editorState,
-            editorView: editorView,
-            key: label
-          });
-        } else if (obj instanceof _licitDocAttrsStep.UICommand) {
-          return this._renderButton(label, obj);
-        } else if (Array.isArray(obj)) {
-          return this._renderMenuButton(label, obj);
-        } else {
-          return null;
-        }
-      }).filter(Boolean);
-      return /*#__PURE__*/React.createElement("div", {
-        className: "czi-custom-buttons",
-        key: 'g' + String(index)
-      }, buttons);
-    });
-    _defineProperty(this, "_renderMenuButton", (label, commandGroups) => {
-      const {
-        editorState,
-        editorView,
-        disabled,
-        dispatchTransaction
-      } = this.props;
-      const {
-        icon,
-        title
-      } = (0, _EditorToolbarConfig.parseLabel)(label);
-      return /*#__PURE__*/React.createElement(_CommandMenuButton.default, {
-        commandGroups: commandGroups,
-        disabled: disabled,
-        dispatch: dispatchTransaction,
-        editorState: editorState,
-        editorView: editorView,
-        icon: icon,
-        key: label,
-        label: icon ? null : title,
-        title: title
-      });
-    });
-    _defineProperty(this, "_renderButton", (label, command) => {
-      const {
-        disabled,
-        editorState,
-        editorView,
-        dispatchTransaction
-      } = this.props;
-      const {
-        icon,
-        title
-      } = (0, _EditorToolbarConfig.parseLabel)(label);
-      return /*#__PURE__*/React.createElement(_CommandButton.default, {
-        command: command,
-        disabled: disabled,
-        dispatch: dispatchTransaction,
-        editorState: editorState,
-        editorView: editorView,
-        icon: icon,
-        key: label,
-        label: icon ? null : title,
-        title: title
-      });
-    });
-    _defineProperty(this, "_onBodyRef", ref => {
-      if (ref) {
-        this._body = ref;
-        // Mounting
-        const el = _reactDom.default.findDOMNode(ref);
-        if (el instanceof HTMLElement) {
-          _ResizeObserver.default.observe(el, this._checkIfContentIsWrapped);
-        }
-      } else {
-        // Unmounting.
-        const el = this._body && _reactDom.default.findDOMNode(this._body);
-        if (el instanceof HTMLElement) {
-          _ResizeObserver.default.unobserve(el);
-        }
-        this._body = null;
-      }
-    });
-    _defineProperty(this, "_checkIfContentIsWrapped", () => {
-      const ref = this._body;
-      const el = ref && _reactDom.default.findDOMNode(ref);
-      const startAnchor = el && el.firstChild;
-      const endAnchor = el && el.lastChild;
-      if (startAnchor && endAnchor) {
-        const wrapped = startAnchor.offsetTop < endAnchor.offsetTop;
-        this.setState({
-          wrapped
-        });
-      }
-    });
-    _defineProperty(this, "_toggleExpansion", expanded => {
-      this.setState({
-        expanded: !expanded
-      });
-    });
-  }
-  render() {
-    const {
-      wrapped,
-      expanded
-    } = this.state;
-    const className = (0, _classnames.default)('czi-editor-toolbar', {
-      expanded,
-      wrapped
-    });
-    const wrappedButton = wrapped ? /*#__PURE__*/React.createElement(_licitUiCommands.CustomButton, {
-      active: expanded,
-      className: "czi-editor-toolbar-expand-button",
-      icon: _Icon.default.get('more_horiz'),
-      key: "expand",
-      onClick: this._toggleExpansion,
-      title: "More",
-      value: expanded
-    }) : null;
-
-    // Start with static button controls and append any button groups
-    // supplied by plugins
-    const commandGroups = _EditorToolbarConfig.COMMAND_GROUPS.concat((this.props.editorState.plugins || []
-    // This should have been a simple property instead of a function:
-    //  p => p.buttonGroup
-    // but changing it now would mean finding every plugin that was
-    // implemented this way.
-    ).map(p => p.initButtonCommands && p.initButtonCommands()).filter(Boolean)).map(this._renderButtonsGroup).filter(Boolean);
-    return /*#__PURE__*/React.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-flex"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-body-content",
-      ref: this._onBodyRef
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "czi-editor-toolbar-wrapped-anchor"
-    }), commandGroups, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background-line"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background-line"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background-line"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background-line"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-background-line"
-    })), /*#__PURE__*/React.createElement("i", {
-      className: "czi-editor-toolbar-wrapped-anchor"
-    })), wrappedButton), /*#__PURE__*/React.createElement("div", {
-      className: "czi-editor-toolbar-footer"
-    })));
-  }
-}
-var _default = EditorToolbar;
-exports.default = _default;