@modusoperandi/licit 0.14.18 → 1.0.1

package/src/toggleBlockquote.js

@@ -1,91 +0,0 @@
-// @flow
-
-import { Schema } from 'prosemirror-model';
-import { Transform } from 'prosemirror-transform';
-
-import { BLOCKQUOTE, HEADING, LIST_ITEM, PARAGRAPH } from './NodeNames';
-import { compareNumber } from '@modusoperandi/licit-ui-commands';
-import { isInsideListItem } from '@modusoperandi/licit-ui-commands';
-import { isListNode } from '@modusoperandi/licit-ui-commands';
-import { unwrapNodesFromList } from '@modusoperandi/licit-ui-commands';
-
-export default function toggleBlockquote(
-  tr: Transform,
-  schema: Schema
-): Transform {
-  const { nodes } = schema;
-  const { selection, doc } = tr;
-  const heading = nodes[HEADING];
-  const blockquote = nodes[BLOCKQUOTE];
-  const paragraph = nodes[PARAGRAPH];
-  const listItem = nodes[LIST_ITEM];
-
-  if (!selection || !doc || !heading || !paragraph || !listItem) {
-    return tr;
-  }
-
-  const { from, to } = tr.selection;
-  let startWithBlockQuote = null;
-  const poses = [];
-  doc.nodesBetween(from, to, (node, pos, parentNode) => {
-    const nodeType = node.type;
-    const parentNodeType = parentNode.type;
-
-    if (startWithBlockQuote === null) {
-      startWithBlockQuote = nodeType === blockquote;
-    }
-
-    if (parentNodeType !== listItem) {
-      poses.push(pos);
-    }
-    return !isListNode(node);
-  });
-  // Update from the bottom to avoid disruptive changes in pos.
-  poses
-    .sort(compareNumber)
-    .reverse()
-    .forEach((pos) => {
-      tr = setBlockquoteNode(tr, schema, pos);
-    });
-  return tr;
-}
-
-function setBlockquoteNode(
-  tr: Transform,
-  schema: Schema,
-  pos: number
-): Transform {
-  const { nodes } = schema;
-  const heading = nodes[HEADING];
-  const paragraph = nodes[PARAGRAPH];
-  const blockquote = nodes[BLOCKQUOTE];
-
-  if (pos >= tr.doc.content.size) {
-    // Workaround to handle the edge case that pos was shifted caused by `toggleList`.
-    return tr;
-  }
-  const node = tr.doc.nodeAt(pos);
-
-  if (!node || !heading || !paragraph) {
-    return tr;
-  }
-
-  const nodeType = node.type;
-  if (isInsideListItem(tr.doc, pos)) {
-    return tr;
-  } else if (isListNode(node)) {
-    // Toggle list
-    if (blockquote) {
-      tr = unwrapNodesFromList(tr, schema, pos, (paragraphNode) => {
-        const { content, marks, attrs } = paragraphNode;
-        return blockquote.create(attrs, content, marks);
-      });
-    }
-  } else if (nodeType === blockquote) {
-    // Toggle heading
-    tr = tr.setNodeMarkup(pos, paragraph, node.attrs, node.marks);
-  } else if (nodeType === paragraph || nodeType === heading) {
-    tr = tr.setNodeMarkup(pos, blockquote, node.attrs, node.marks);
-  }
-  return tr;
-}

package/src/toggleCodeBlock.js

@@ -1,102 +0,0 @@
-// @flow
-
-import { Schema } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-
-import { MARK_LINK } from './MarkNames';
-import { BLOCKQUOTE, CODE_BLOCK, HEADING, PARAGRAPH } from './NodeNames';
-import { clearMarks } from '@modusoperandi/licit-ui-commands';
-import { compareNumber } from '@modusoperandi/licit-ui-commands';
-import { isListNode } from '@modusoperandi/licit-ui-commands';
-
-export default function toggleCodeBlock(
-  tr: Transform,
-  schema: Schema
-): Transform {
-  const { nodes } = schema;
-  const { selection, doc } = tr;
-  const codeBlock = nodes[CODE_BLOCK];
-  const paragraph = nodes[PARAGRAPH];
-  const heading = nodes[HEADING];
-  const blockquote = nodes[BLOCKQUOTE];
-  if (!selection || !doc || !codeBlock || !paragraph) {
-    return tr;
-  }
-
-  const poses = [];
-  const { from, to } = tr.selection;
-  let allowed = true;
-  let startWithCodeBlock = null;
-  doc.nodesBetween(from, to, (node, pos) => {
-    const nodeType = node.type;
-    if (startWithCodeBlock === null) {
-      startWithCodeBlock = nodeType === codeBlock;
-    }
-    const { type, isBlock } = node;
-    if (isBlock) {
-      allowed =
-        allowed &&
-        (type === paragraph ||
-          type === codeBlock ||
-          type === heading ||
-          type === blockquote);
-      allowed && poses.push(pos);
-    }
-
-    return isBlock;
-  });
-
-  // Update from the bottom to avoid disruptive changes in pos.
-  allowed &&
-    poses
-      .sort(compareNumber)
-      .reverse()
-      .forEach((pos) => {
-        tr = setCodeBlockNodeEnabled(
-          tr,
-          schema,
-          pos,
-          startWithCodeBlock ? false : true
-        );
-      });
-  return tr;
-}
-
-function setCodeBlockNodeEnabled(
-  tr: Transform,
-  schema: Schema,
-  pos: number,
-  enabled: boolean
-): Transform {
-  const { doc } = tr;
-  if (!doc) {
-    return tr;
-  }
-
-  const node = doc.nodeAt(pos);
-  if (!node) {
-    return tr;
-  }
-  if (isListNode(node)) {
-    return tr;
-  }
-
-  const { nodes } = schema;
-  const codeBlock = nodes[CODE_BLOCK];
-  const paragraph = nodes[PARAGRAPH];
-
-  if (codeBlock && !enabled && node.type === codeBlock) {
-    tr = tr.setNodeMarkup(pos, paragraph, node.attrs, node.marks);
-  } else if (enabled && node.type !== codeBlock) {
-    const { selection } = tr;
-    tr = tr.setSelection(
-      TextSelection.create(tr.doc, pos, pos + node.nodeSize)
-    );
-    tr = clearMarks(tr, schema);
-    tr = tr.removeMark(pos, pos + node.nodeSize, schema.marks[MARK_LINK]);
-    tr = tr.setSelection(selection);
-    tr = tr.setNodeMarkup(pos, codeBlock, node.attrs, node.marks);
-  }
-  return tr;
-}

package/src/ui/AlertInfo.js

@@ -1,64 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import './czi-form.css';
-
-class AlertInfo extends React.PureComponent<any, any> {
-  _unmounted = false;
-
-  constructor(props: any) {
-    super(props);
-  }
-
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    initialValue: PropTypes.object,
-    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 ImageLike'
-        );
-      }
-      return null;
-    },
-  };
-
-  state = {
-    ...(this.props.initialValue || {}),
-    validValue: null,
-  };
-
-  componentWillUnmount(): void {
-    this._unmounted = true;
-  }
-
-  render(): React.Element<any> {
-    const title = this.props.title || 'Document Error!';
-    const content =
-      this.props.content ||
-      'Unable to load the document. Have issues in Json format, please verify...';
-    return (
-      <div className="licit-alert">
-        <span className="closebtn" onClick={this._cancel}>
-          &times;
-        </span>
-        <strong>{title}</strong>
-        <span>{content}</span>
-      </div>
-    );
-  }
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-}
-
-export default AlertInfo;

package/src/ui/BookmarkNodeView.js

@@ -1,66 +0,0 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-import { Decoration } from 'prosemirror-view';
-import * as React from 'react';
-
-import {
-  ATTRIBUTE_BOOKMARK_ID,
-  ATTRIBUTE_BOOKMARK_VISIBLE,
-} from './../BookmarkNodeSpec';
-import CustomNodeView from './CustomNodeView';
-import Icon from './Icon';
-
-import './czi-bookmark-view.css';
-
-import type { NodeViewProps } from './CustomNodeView';
-
-class BookmarkViewBody extends React.PureComponent<any, any> {
-  props: NodeViewProps;
-
-  render(): React.Element<any> {
-    const { id, visible } = this.props.node.attrs;
-    const icon = id && visible ? Icon.get('bookmark') : null;
-    return <span onClick={this._onClick}>{icon}</span>;
-  }
-
-  _onClick = (e: SyntheticEvent<>): void => {
-    e.preventDefault();
-    const { id } = this.props.node.attrs;
-    const hash = '#' + id;
-    if (window.location.hash !== hash) {
-      window.location.hash = hash;
-    }
-  };
-}
-
-class BookmarkNodeView extends CustomNodeView {
-  // @override
-  createDOMElement(): HTMLElement {
-    const el = document.createElement('a');
-    el.className = 'czi-bookmark-view';
-    this._updateDOM(el);
-    return el;
-  }
-
-  // @override
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    super.update(node, decorations);
-    return true;
-  }
-
-  // @override
-  renderReactComponent(): React.Element<any> {
-    return <BookmarkViewBody {...this.props} />;
-  }
-
-  _updateDOM(el: HTMLElement): void {
-    const { id, visible } = this.props.node.attrs;
-    el.setAttribute('id', id);
-    el.setAttribute('title', id);
-    el.setAttribute(ATTRIBUTE_BOOKMARK_ID, id);
-    visible && el.setAttribute(ATTRIBUTE_BOOKMARK_VISIBLE, 'true');
-  }
-}
-
-export default BookmarkNodeView;

package/src/ui/CommandButton.js

@@ -1,68 +0,0 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CommandButton extends React.PureComponent<any, any> {
-  props: {
-    className?: ?string,
-    command: UICommand,
-    disabled?: ?boolean,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    icon?: string | React.Element<any> | null,
-    label?: string | React.Element<any> | null,
-    title?: ?string,
-  };
-
-  render(): React.Element<any> {
-    const {
-      label,
-      className,
-      command,
-      editorState,
-      icon,
-      title,
-      editorView,
-    } = this.props;
-    let disabled = this.props.disabled;
-    if (!!disabled === false) {
-      disabled = !editorView || !command.isEnabled(editorState, editorView, '');
-    }
-    return (
-      <CustomButton
-        active={command.isActive(editorState)}
-        className={className}
-        disabled={disabled}
-        icon={icon}
-        label={label}
-        onClick={this._onUIEnter}
-        onMouseEnter={this._onUIEnter}
-        title={title}
-        value={command}
-      />
-    );
-  }
-
-  _onUIEnter = (
-    command: UICommand,
-    event: SyntheticEvent<HTMLButtonElement>
-  ): void => {
-    if (command.shouldRespondToUIEvent(event)) {
-      this._execute(command, event);
-    }
-  };
-
-  _execute = (value: any, event: SyntheticEvent<HTMLButtonElement>): void => {
-    const { command, editorState, dispatch, editorView } = this.props;
-    command.execute(editorState, dispatch, editorView, event);
-  };
-}
-
-export default CommandButton;

package/src/ui/CommandMenu.js

@@ -1,75 +0,0 @@
-// @flow
-
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import CustomMenu from './CustomMenu';
-import CustomMenuItem from './CustomMenuItem';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-
-class CommandMenu extends React.PureComponent<any, any> {
-  _activeCommand: ?UICommand = null;
-
-  props: {
-    commandGroups: Array<{ [string]: UICommand }>,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    onCommand: ?Function,
-  };
-
-  render(): React.Element<any> {
-    const { commandGroups, editorState, editorView } = this.props;
-    const children = [];
-    const jj = commandGroups.length - 1;
-
-    commandGroups.forEach((group, ii) => {
-      Object.keys(group).forEach((label) => {
-        const command = group[label];
-        let disabled = true;
-        try {
-          // [FS] IRAD-1053 2020-10-22
-          // Disable the Clear style menu when no styles applied to a paragraph
-          disabled =
-            !editorView || !command.isEnabled(editorState, editorView, label);
-        } catch (ex) {
-          disabled = false;
-        }
-        children.push(
-          <CustomMenuItem
-            active={command.isActive(editorState)}
-            disabled={disabled}
-            key={label}
-            label={command.renderLabel(editorState) || label}
-            onClick={this._onUIEnter}
-            onMouseEnter={this._onUIEnter}
-            value={command}
-          />
-        );
-      });
-      if (ii !== jj) {
-        children.push(<CustomMenuItem.Separator key={`${String(ii)}-hr`} />);
-      }
-    });
-    return <CustomMenu>{children}</CustomMenu>;
-  }
-
-  _onUIEnter = (command: UICommand, event: SyntheticEvent<>): void => {
-    if (command.shouldRespondToUIEvent(event)) {
-      this._activeCommand && this._activeCommand.cancel();
-      this._activeCommand = command;
-      this._execute(command, event);
-    }
-  };
-
-  _execute = (command: UICommand, e: SyntheticEvent<>) => {
-    const { dispatch, editorState, editorView, onCommand } = this.props;
-    if (command.execute(editorState, dispatch, editorView, e)) {
-      onCommand && onCommand();
-    }
-  };
-}
-
-export default CommandMenu;

package/src/ui/CommandMenuButton.js

@@ -1,131 +0,0 @@
-// @flow
-
-import cx from 'classnames';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import CommandMenu from './CommandMenu';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import { createPopUp } from '@modusoperandi/licit-ui-commands';
-import uuid from './uuid';
-
-import './czi-custom-menu-button.css';
-
-class CommandMenuButton extends React.PureComponent<any, any> {
-  props: {
-    className?: ?string,
-    commandGroups: Array<{ [string]: UICommand }>,
-    disabled?: ?boolean,
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-    icon?: string | React.Element<any> | null,
-    label?: string | React.Element<any> | null,
-    title?: ?string,
-    parent?: ?React.Element<any>, // the parent command button
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render(): React.Element<any> {
-    const {
-      className,
-      label,
-      commandGroups,
-      editorState,
-      editorView,
-      icon,
-      disabled,
-      title,
-    } = this.props;
-    const enabled =
-      !disabled &&
-      commandGroups.some((group, ii) => {
-        return Object.keys(group).some((label) => {
-          const command = group[label];
-          let disabledVal = true;
-          try {
-            disabledVal =
-              !editorView || !command.isEnabled(editorState, editorView, label);
-          } catch (ex) {
-            disabledVal = false;
-          }
-          return !disabledVal;
-        });
-      });
-
-    const { expanded } = this.state;
-    const buttonClassName = cx(className, {
-      'czi-custom-menu-button': true,
-      expanded,
-    });
-
-    return (
-      <CustomButton
-        className={buttonClassName}
-        disabled={!enabled}
-        icon={icon}
-        id={this._id}
-        label={label}
-        onClick={this._onClick}
-        title={title}
-      />
-    );
-  }
-
-  componentWillUnmount(): void {
-    this._hideMenu();
-  }
-
-  _onClick = (): void => {
-    const expanded = !this.state.expanded;
-    this.setState({
-      expanded,
-    });
-    expanded ? this._showMenu() : this._hideMenu();
-  };
-
-  _hideMenu = (): void => {
-    const menu = this._menu;
-    this._menu = null;
-    menu && menu.close();
-  };
-
-  _showMenu = (): void => {
-    const menu = this._menu;
-    const menuProps = {
-      ...this.props,
-      onCommand: this._onCommand,
-    };
-    if (menu) {
-      menu.update(menuProps);
-    } else {
-      this._menu = createPopUp(CommandMenu, menuProps, {
-        anchor: document.getElementById(this._id),
-        onClose: this._onClose,
-      });
-    }
-  };
-
-  _onCommand = (): void => {
-    this.setState({ expanded: false });
-    this._hideMenu();
-  };
-
-  _onClose = (): void => {
-    if (this._menu) {
-      this.setState({ expanded: false });
-      this._menu = null;
-    }
-  };
-}
-
-export default CommandMenuButton;

package/src/ui/CustomEditorView.js

@@ -1,28 +0,0 @@
-// @flow
-
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-
-import type { DirectEditorProps, EditorRuntime } from '../Types';
-
-// https://github.com/ProseMirror/prosemirror-view/blob/master/src/index.js
-class CustomEditorView extends EditorView {
-  disabled: boolean;
-  placeholder: ?(string | React.Element<any>);
-  readOnly: boolean;
-  runtime: ?EditorRuntime;
-  constructor(place: HTMLElement, props: DirectEditorProps) {
-    super(place, props);
-    this.runtime = null;
-    this.readOnly = true;
-    this.disabled = true;
-    this.placeholder = null;
-  }
-
-  destroy() {
-    super.destroy();
-    this._props = {};
-  }
-}
-
-export default CustomEditorView;

package/src/ui/CustomMenu.js

@@ -1,17 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import './czi-custom-menu.css';
-import './czi-custom-scrollbar.css';
-
-class CustomMenu extends React.Component<any, any> {
-  render(): React.Element<any> {
-    const { children } = this.props;
-    return (
-      <div className="czi-custom-menu czi-custom-scrollbar">{children}</div>
-    );
-  }
-}
-
-export default CustomMenu;

package/src/ui/CustomMenuItem.js

@@ -1,36 +0,0 @@
-// @flow
-
-import './czi-custom-menu-item.css';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import * as React from 'react';
-
-class CustomMenuItemSeparator extends React.PureComponent<any, any> {
-  render(): React.Element<any> {
-    return <div className="czi-custom-menu-item-separator" />;
-  }
-}
-
-class CustomMenuItem extends React.PureComponent<any, any> {
-  static Separator = CustomMenuItemSeparator;
-
-  props: {
-    label: string,
-    disabled?: ?boolean,
-    onClick: ?(value: any, e: SyntheticEvent<>) => void,
-    onMouseEnter: ?(value: any, e: SyntheticEvent<>) => void,
-    value: any,
-  };
-
-  render(): React.Element<any> {
-    // [FS] IRAD-1044 2020-09-22
-    // Added a new class to adjust the width of the custom style menu dropdown.
-
-    let className = 'czi-custom-menu-item';
-    if (this.props.value._customStyleName) {
-      className += ' custom-style-menu-item';
-    }
-    return <CustomButton {...this.props} className={className} />;
-  }
-}
-
-export default CustomMenuItem;