@modusoperandi/licit 0.14.18 → 1.0.0

package/src/ui/ImageInlineEditor.js

@@ -1,67 +0,0 @@
-// @flow
-
-import './czi-inline-editor.css';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import * as React from 'react';
-
-export type PropValue = {
-  value: ?string,
-  text: ?string,
-};
-
-type Key = 'NONE' | 'LEFT' | 'CENTER' | 'RIGHT';
-
-const ImageAlignValues: { [key: Key]: PropValue } = {
-  NONE: {
-    value: null,
-    text: 'Inline',
-  },
-  LEFT: {
-    value: 'left',
-    text: 'Float left',
-  },
-  CENTER: {
-    value: 'center',
-    text: 'Break text',
-  },
-  RIGHT: {
-    value: 'right',
-    text: 'Float right',
-  },
-};
-
-export type ImageInlineEditorValue = {
-  align: ?string,
-};
-
-class ImageInlineEditor extends React.PureComponent<any, any> {
-  props: {
-    onSelect: (val: ImageInlineEditorValue) => void,
-    value: ?ImageInlineEditorValue,
-  };
-
-  render(): React.Element<any> {
-    const align = this.props.value ? this.props.value.align : null;
-    const onClick = this._onClick;
-    const buttons = Object.keys(ImageAlignValues).map((key) => {
-      const { value, text } = ImageAlignValues[key];
-      return (
-        <CustomButton
-          active={align === value}
-          key={key}
-          label={text}
-          onClick={onClick}
-          value={value}
-        />
-      );
-    });
-
-    return <div className="czi-inline-editor">{buttons}</div>;
-  }
-
-  _onClick = (align: ?string): void => {
-    this.props.onSelect({ align: align });
-  };
-}
-
-export default ImageInlineEditor;

package/src/ui/KeyCodes.js

@@ -1,12 +0,0 @@
-// @flow
-
-// https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
-
-export const BACKSPACE = 8;
-export const DELETE = 46;
-export const DOWN_ARROW = 40;
-export const ENTER = 13;
-export const LEFT_ARROW = 37;
-export const RIGHT_ARROW = 39;
-export const TAB = 9;
-export const UP_ARROW = 38;

package/src/ui/LinkTooltip.js

@@ -1,85 +0,0 @@
-// @flow
-
-import { EditorView } from 'prosemirror-view';
-import * as React from 'react';
-import scrollIntoView from 'smooth-scroll-into-view-if-needed';
-
-import sanitizeURL from '../sanitizeURL';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-
-import './czi-link-tooltip.css';
-
-function isBookMarkHref(href: string): boolean {
-  return !!href && href.indexOf('#') === 0 && href.length >= 2;
-}
-
-class LinkTooltip extends React.PureComponent<any, any> {
-  props: {
-    editorView: EditorView,
-    href: string,
-    onCancel: (view: EditorView) => void,
-    onEdit: (view: EditorView) => void,
-    onRemove: (view: EditorView) => void,
-  };
-
-  _unmounted = false;
-
-  state = {
-    hidden: false,
-  };
-
-  render(): React.Element<any> {
-    const { href, editorView, onEdit, onRemove } = this.props;
-    // [FS] IRAD-1013 2020-07-09
-    // Change button in "Apply Link" missing in LICIT.
-
-    return (
-      <div className="czi-link-tooltip">
-        <div className="czi-link-tooltip-body">
-          <div className="czi-link-tooltip-row">
-            <CustomButton
-              className="czi-link-tooltip-href"
-              label={href}
-              onClick={this._openLink}
-              target="new"
-              title={href}
-              value={href}
-            />
-            <CustomButton label="Change" onClick={onEdit} value={editorView} />
-            <CustomButton
-              label="Remove"
-              onClick={onRemove}
-              value={editorView}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  _openLink = (href: string): void => {
-    if (isBookMarkHref(href)) {
-      const id = href.substr(1);
-      const el = document.getElementById(id);
-      if (el) {
-        const { onCancel, editorView } = this.props;
-        onCancel(editorView);
-        (async () => {
-          // https://www.npmjs.com/package/smooth-scroll-into-view-if-needed
-          await scrollIntoView(el, {
-            scrollMode: 'if-needed',
-            // block: 'nearest',
-            // inline: 'nearest',
-            behavior: 'smooth',
-          });
-        })();
-      }
-      return;
-    }
-    if (href) {
-      window.open(sanitizeURL(href));
-    }
-  };
-}
-
-export default LinkTooltip;

package/src/ui/LinkURLEditor.js

@@ -1,111 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import sanitizeURL from '../sanitizeURL';
-import { CustomButton } from '@modusoperandi/licit-ui-commands';
-import { ENTER } from './KeyCodes';
-import { preventEventDefault } from '@modusoperandi/licit-ui-commands';
-
-import './czi-form.css';
-import './czi-image-url-editor.css';
-
-const BAD_CHARACTER_PATTER = /\s/;
-
-class LinkURLEditor extends React.PureComponent<any, any> {
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
-  // To take care of the property type declaration.
-  static propsTypes = {
-    href: 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 = {
-    url: this.props.href,
-  };
-
-  render(): React.Element<any> {
-    const { href } = this.props;
-    const { url } = this.state;
-
-    const error = url ? BAD_CHARACTER_PATTER.test(url) : false;
-
-    let label = 'Apply';
-    let disabled = !!error;
-    if (href) {
-      label = url ? 'Apply' : 'Remove';
-      disabled = error;
-    } else {
-      disabled = error || !url;
-    }
-
-    return (
-      <div className="czi-image-url-editor">
-        <form className="czi-form" onSubmit={preventEventDefault}>
-          <fieldset>
-            <legend>Add a Link</legend>
-            <input
-              autoFocus={true}
-              onChange={this._onURLChange}
-              onKeyDown={this._onKeyDown}
-              placeholder="Paste a URL"
-              spellCheck={false}
-              type="text"
-              value={url || ''}
-            />
-          </fieldset>
-          <div className="czi-form-buttons">
-            <CustomButton label="Cancel" onClick={this._cancel} />
-            <CustomButton
-              active={true}
-              disabled={disabled}
-              label={label}
-              onClick={this._apply}
-            />
-          </div>
-        </form>
-      </div>
-    );
-  }
-
-  _onKeyDown = (e: any) => {
-    if (e.keyCode === ENTER) {
-      e.preventDefault();
-      this._apply();
-    }
-  };
-
-  _onURLChange = (e: SyntheticInputEvent<>) => {
-    const url = e.target.value;
-    this.setState({
-      url,
-    });
-  };
-
-  _cancel = (): void => {
-    this.props.close();
-  };
-
-  _apply = (): void => {
-    const { url } = this.state;
-    if (url && !BAD_CHARACTER_PATTER.test(url)) {
-      this.props.close(sanitizeURL(url));
-    }
-  };
-}
-
-export default LinkURLEditor;

package/src/ui/ListItemNodeView.js

@@ -1,98 +0,0 @@
-// @flow
-
-import { Node } from 'prosemirror-model';
-import { Decoration, EditorView } from 'prosemirror-view';
-import { MARK_TEXT_COLOR, MARK_FONT_SIZE } from '../MarkNames';
-
-// This implements the `NodeView` interface
-// https://prosemirror.net/docs/ref/#view.NodeView
-class ListItemNodeView {
-  // This implements the `NodeView` interface
-  // The outer DOM node that represents the list item element.
-  dom: HTMLLIElement;
-
-  // This implements the `NodeView` interface.
-  // The DOM node that should hold the node's content.
-  contentDOM: HTMLLIElement;
-
-  _nodeUpdated: ?Node;
-
-  constructor(
-    node: Node,
-    editorView: EditorView,
-    getPos: () => number,
-    decorations: Array<Decoration>
-  ) {
-    const dom = document.createElement('li');
-    this.dom = dom;
-    this.contentDOM = dom;
-    this._updateDOM(node);
-  }
-
-  // This implements the `NodeView` interface.
-  update(node: Node, decorations: Array<Decoration>): boolean {
-    return this._updateDOM(node);
-  }
-
-  _updateDOM(node: Node): boolean {
-    if (this._nodeUpdated === node) {
-      return false;
-    }
-
-    this._nodeUpdated = node;
-
-    const dom = this.dom;
-    // According to `ListItemNodeSpec`, a valid list item has the following
-    // structure: `li > paragraph > text`.
-    const paragraph = node.firstChild;
-    const initialContent = paragraph ? paragraph.firstChild : null;
-
-    // This resolves the styles for the counter by examines the marks for the
-    // first text node of the list item.
-    const marks =
-      initialContent && initialContent.isText && initialContent.textContent
-        ? initialContent.marks
-        : null;
-
-    let cssColor;
-    let cssFontSize;
-    let cssText = '';
-    if (Array.isArray(marks)) {
-      marks.forEach((mark) => {
-        const { attrs, type } = mark;
-        switch (type.name) {
-          case MARK_TEXT_COLOR:
-            cssColor = attrs.color;
-            break;
-          case MARK_FONT_SIZE:
-            cssFontSize = attrs.pt;
-            break;
-        }
-      });
-    }
-
-    // The counter of the list item is a pseudo-element that uses
-    // the CSS variables (e.g `--czi-list-style-color`) for styling.
-    // This defines the CSS variables scoped for the pseudo-element.
-    // See `src/ui/czi-list.css` for more details.
-    if (cssColor) {
-      cssText += `--czi-list-style-color: ${cssColor};`;
-    }
-
-    if (cssFontSize) {
-      cssText += `--czi-list-style-font-size: ${cssFontSize}pt;`;
-    }
-
-    dom.style.cssText = cssText;
-
-    const { align } = node.attrs;
-    if (align) {
-      dom.setAttribute('data-align', align);
-    } else {
-      dom.removeAttribute('data-align');
-    }
-    return true;
-  }
-}
-
-export default ListItemNodeView;

package/src/ui/ListTypeButton.js

@@ -1,131 +0,0 @@
-// @flow
-// [FS] IRAD-1039 2020-09-23
-// Command button to handle different type of list types
-// Need to add Icons instead of label
-
-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 { 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 ListTypeMenu from './ListTypeMenu';
-import './czi-custom-menu-button.css';
-
-class ListTypeButton 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,
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render(): React.Element<any> {
-    // editorState,
-    // editorView,
-    const {
-      className,
-      label,
-      commandGroups,
-      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 = false;
-            //   !editorView || !command.isEnabled(editorState, editorView);
-          } 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(ListTypeMenu, 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 ListTypeButton;

package/src/ui/ListTypeCommandButton.js

@@ -1,85 +0,0 @@
-// [FS] IRAD-1039 2020-09-23
-// Command button to handle different type of list types
-// Need to add Icons instead of label
-import * as React from 'react';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import {
-  ListToggleCommand,
-  hasImageNode,
-} from '../ListToggleCommand';
-import ListTypeButton from './ListTypeButton';
-
-const LIST_TYPE_NAMES = [
-  {
-    name: 'decimal',
-    label: '1.',
-  },
-  {
-    name: 'x.x.x',
-    label: '1.1.1',
-  },
-  {
-    name: 'num_bracket',
-    label: '1)',
-  },
-  {
-    name: 'num_bracket_closed',
-    label: '(1)',
-  },
-  {
-    name: 'upper_alpha_bracket',
-    label: 'A)',
-  },
-  {
-    name: 'lower_alpha_bracket',
-    label: 'a)',
-  },
-  {
-    name: 'lower_alpha_bracket_closed',
-    label: '(a)',
-  },
-];
-const LIST_TYPE_COMMANDS: Object = {
-  ['decimal']: new ListToggleCommand(true, 'decimal'),
-};
-LIST_TYPE_NAMES.forEach((obj) => {
-  LIST_TYPE_COMMANDS[obj.name] = new ListToggleCommand(true, obj.name);
-  LIST_TYPE_COMMANDS[obj.name].label = obj.label;
-});
-
-const COMMAND_GROUPS = [LIST_TYPE_COMMANDS];
-
-class ListTypeCommandButton extends React.PureComponent<any, any> {
-  props: {
-    dispatch: (tr: Transform) => void,
-    editorState: EditorState,
-    editorView: ?EditorView,
-  };
-
-  render(): React.Element<any> {
-    const { dispatch, editorState, editorView } = this.props;
-    let disabled = false;
-    if (editorState && editorView) {
-      // [FS] IRAD-1317 2021-05-06
-      // To disable the list menu when select an image
-      disabled =
-       hasImageNode(editorState);
-      disabled = editorView.disabled || disabled ? true : false;
-    }
-    return (
-      <ListTypeButton
-        className="width-50 czi-icon format_list_numbered"
-        commandGroups={COMMAND_GROUPS}
-        disabled={disabled}
-        dispatch={dispatch}
-        editorState={editorState}
-        editorView={editorView}
-        icon={'format_list_numbered'}
-      />
-    );
-  }
-}
-
-export default ListTypeCommandButton;

package/src/ui/ListTypeMenu.js

@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
-import { EditorState } from 'prosemirror-state';
-import { Transform } from 'prosemirror-transform';
-import { EditorView } from 'prosemirror-view';
-import uuid from './uuid';
-import './listType.css';
-
-// [FS] IRAD-1039 2020-09-24
-// UI to show the list buttons
-
-class ListTypeMenu extends React.PureComponent<any, any> {
-  _activeCommand: ?UICommand = null;
-  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,
-  };
-
-  _menu = null;
-  _id = uuid();
-
-  state = {
-    expanded: false,
-  };
-
-  render() {
-    const { commandGroups } = this.props;
-    const children = [];
-
-    commandGroups.forEach((group, ii) => {
-      Object.keys(group).forEach((label) => {
-        const command = group[label];
-        children.push(
-          <button
-            className="buttonsize"
-            id={label}
-            key={label}
-            onClick={(e) => this._onUIEnter(command, e)}
-            value={command}
-          >
-            {command.label}
-          </button>
-        );
-      });
-    });
-    return <div className="container">{children}</div>;
-  }
-
-  _onUIEnter = (command: UICommand, event: SyntheticEvent<*>) => {
-    this._activeCommand && this._activeCommand.cancel();
-    this._activeCommand = command;
-    this._execute(command, event);
-  };
-
-  _execute = (command, e) => {
-    const { dispatch, editorState, editorView, onCommand } = this.props;
-    if (command.execute(editorState, dispatch, editorView, e)) {
-      onCommand && onCommand();
-    }
-  };
-}
-
-export default ListTypeMenu;

package/src/ui/LoadingIndicator.js

@@ -1,20 +0,0 @@
-// @flow
-
-import './czi-loading-indicator.css';
-import * as React from 'react';
-
-// https://loading.io/css/
-class LoadingIndicator extends React.PureComponent<any, any> {
-  render(): React.Element<any> {
-    return (
-      <div className="czi-loading-indicator">
-        <div className="frag czi-loading-indicator-frag-1" />
-        <div className="frag czi-loading-indicator-frag-2" />
-        <div className="frag czi-loading-indicator-frag-3" />
-        <div className="frag czi-loading-indicator-frag-4" />
-      </div>
-    );
-  }
-}
-
-export default LoadingIndicator;