@modusoperandi/licit 0.14.18 → 1.0.0

package/ui/EditorToolbar.js.flow

@@ -0,0 +1,218 @@
+// @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 ReactDOM from 'react-dom';
+
+import CommandButton from './CommandButton.js';
+import CommandMenuButton from './CommandMenuButton.js';
+import {
+  CustomButton
+} from '@modusoperandi/licit-ui-commands';
+import {
+  COMMAND_GROUPS,
+  parseLabel
+} from './EditorToolbarConfig.js';
+import Icon from './Icon.js';
+import ResizeObserver from './ResizeObserver.js';
+import {
+  UICommand
+} from '@modusoperandi/licit-doc-attrs-step';
+import isReactClass from './isReactClass.js';
+
+import './czi-editor-toolbar.css';
+
+class EditorToolbar extends React.PureComponent<any, any> {
+  _body = null;
+
+  props: {
+    disabled?: ?boolean,
+    dispatchTransaction?: ?(tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+    onReady?: ?(view: EditorView) => void,
+    readOnly?: ?boolean,
+  };
+
+  state = {
+    expanded: false,
+    wrapped: null,
+  };
+
+  render(): React.Element<any> {
+    const { wrapped, expanded } = this.state;
+    const className = cx('czi-editor-toolbar', { expanded, wrapped });
+    const wrappedButton = wrapped ? (
+      <CustomButton
+        active={expanded}
+        className="czi-editor-toolbar-expand-button"
+        icon={Icon.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 = 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 (
+      <div className={className}>
+        <div className="czi-editor-toolbar-flex">
+          <div className="czi-editor-toolbar-body">
+            <div
+              className="czi-editor-toolbar-body-content"
+              ref={this._onBodyRef}
+            >
+              <i className="czi-editor-toolbar-wrapped-anchor" />
+              {commandGroups}
+              <div className="czi-editor-toolbar-background">
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+                <div className="czi-editor-toolbar-background-line" />
+              </div>
+              <i className="czi-editor-toolbar-wrapped-anchor" />
+            </div>
+            {wrappedButton}
+          </div>
+          <div className="czi-editor-toolbar-footer" />
+        </div>
+      </div>
+    );
+  }
+
+  _renderButtonsGroup = (group: Object, index: number): React.Element<any> => {
+    const buttons = Object.keys(group)
+      .map((label) => {
+        const obj = group[label];
+
+        if (isReactClass(obj)) {
+          // JSX requies the component to be named with upper camel case.
+          const ThatComponent = obj;
+          const { editorState, editorView, dispatchTransaction } = this.props;
+          return (
+            <ThatComponent
+              dispatch={dispatchTransaction}
+              editorState={editorState}
+              editorView={editorView}
+              key={label}
+            />
+          );
+        } else if (obj instanceof UICommand) {
+          return this._renderButton(label, obj);
+        } else if (Array.isArray(obj)) {
+          return this._renderMenuButton(label, obj);
+        } else {
+          return null;
+        }
+      })
+      .filter(Boolean);
+    return (
+      <div className="czi-custom-buttons" key={'g' + String(index)}>
+        {buttons}
+      </div>
+    );
+  };
+
+  _renderMenuButton = (
+    label: string,
+    commandGroups: Array<{ [string]: UICommand }>
+  ): React.Element<any> => {
+    const {
+      editorState,
+      editorView,
+      disabled,
+      dispatchTransaction,
+    } = this.props;
+    const { icon, title } = parseLabel(label);
+    return (
+      <CommandMenuButton
+        commandGroups={commandGroups}
+        disabled={disabled}
+        dispatch={dispatchTransaction}
+        editorState={editorState}
+        editorView={editorView}
+        icon={icon}
+        key={label}
+        label={icon ? null : title}
+        title={title}
+      />
+    );
+  };
+
+  _renderButton = (label: string, command: UICommand): React.Element<any> => {
+    const {
+      disabled,
+      editorState,
+      editorView,
+      dispatchTransaction,
+    } = this.props;
+    const { icon, title } = parseLabel(label);
+
+    return (
+      <CommandButton
+        command={command}
+        disabled={disabled}
+        dispatch={dispatchTransaction}
+        editorState={editorState}
+        editorView={editorView}
+        icon={icon}
+        key={label}
+        label={icon ? null : title}
+        title={title}
+      />
+    );
+  };
+
+  _onBodyRef = (ref: any): void => {
+    if (ref) {
+      this._body = ref;
+      // Mounting
+      const el = ReactDOM.findDOMNode(ref);
+      if (el instanceof HTMLElement) {
+        ResizeObserver.observe(el, this._checkIfContentIsWrapped);
+      }
+    } else {
+      // Unmounting.
+      const el = this._body && ReactDOM.findDOMNode(this._body);
+      if (el instanceof HTMLElement) {
+        ResizeObserver.unobserve(el);
+      }
+      this._body = null;
+    }
+  };
+
+  _checkIfContentIsWrapped = (): void => {
+    const ref = this._body;
+    const el: any = ref && ReactDOM.findDOMNode(ref);
+    const startAnchor = el && el.firstChild;
+    const endAnchor = el && el.lastChild;
+    if (startAnchor && endAnchor) {
+      const wrapped = startAnchor.offsetTop < endAnchor.offsetTop;
+      this.setState({ wrapped });
+    }
+  };
+
+  _toggleExpansion = (expanded: boolean): void => {
+    this.setState({ expanded: !expanded });
+  };
+}
+
+export default EditorToolbar;

package/ui/EditorToolbarConfig.js

@@ -0,0 +1,141 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// eslint-disable-next-line no-unused-vars
+import * as React from 'react';
+import * as EditorCommands from '../EditorCommands.js';
+import FontSizeCommandMenuButton from './FontSizeCommandMenuButton.js';
+import FontTypeCommandMenuButton from './FontTypeCommandMenuButton.js';
+import ListTypeCommandButton from './ListTypeCommandButton.js';
+import Icon from './Icon.js';
+var ICON_LABEL_PATTERN = /\[([A-Za-z_\d]+)\](.*)/;
+export function parseLabel(input) {
+  var matched = input.match(ICON_LABEL_PATTERN);
+  if (matched) {
+    var _matched = _slicedToArray(matched, 3),
+      // eslint-disable-next-line no-unused-vars
+      all = _matched[0],
+      icon = _matched[1],
+      label = _matched[2];
+    return {
+      icon: icon ? Icon.get(icon) : null,
+      title: label || null
+    };
+  }
+  return {
+    icon: null,
+    title: input || null
+  };
+}
+var CLEAR_FORMAT = EditorCommands.CLEAR_FORMAT,
+  DOC_LAYOUT = EditorCommands.DOC_LAYOUT,
+  EM = EditorCommands.EM,
+  HISTORY_REDO = EditorCommands.HISTORY_REDO,
+  HISTORY_UNDO = EditorCommands.HISTORY_UNDO,
+  HR = EditorCommands.HR,
+  INDENT_LESS = EditorCommands.INDENT_LESS,
+  INDENT_MORE = EditorCommands.INDENT_MORE,
+  LINK_SET_URL = EditorCommands.LINK_SET_URL,
+  MATH_EDIT = EditorCommands.MATH_EDIT,
+  STRIKE = EditorCommands.STRIKE,
+  STRONG = EditorCommands.STRONG,
+  SUPER = EditorCommands.SUPER,
+  SUB = EditorCommands.SUB,
+  TABLE_ADD_COLUMN_AFTER = EditorCommands.TABLE_ADD_COLUMN_AFTER,
+  TABLE_ADD_COLUMN_BEFORE = EditorCommands.TABLE_ADD_COLUMN_BEFORE,
+  TABLE_ADD_ROW_AFTER = EditorCommands.TABLE_ADD_ROW_AFTER,
+  TABLE_ADD_ROW_BEFORE = EditorCommands.TABLE_ADD_ROW_BEFORE,
+  TABLE_BORDER_COLOR = EditorCommands.TABLE_BORDER_COLOR,
+  TABLE_BACKGROUND_COLOR = EditorCommands.TABLE_BACKGROUND_COLOR,
+  TABLE_DELETE_COLUMN = EditorCommands.TABLE_DELETE_COLUMN,
+  TABLE_DELETE_ROW = EditorCommands.TABLE_DELETE_ROW,
+  TABLE_DELETE_TABLE = EditorCommands.TABLE_DELETE_TABLE,
+  TABLE_INSERT_TABLE = EditorCommands.TABLE_INSERT_TABLE,
+  TABLE_MERGE_CELLS = EditorCommands.TABLE_MERGE_CELLS,
+  TABLE_SPLIT_ROW = EditorCommands.TABLE_SPLIT_ROW,
+  TABLE_TOGGLE_HEADER_CELL = EditorCommands.TABLE_TOGGLE_HEADER_CELL,
+  TABLE_TOGGLE_HEADER_COLUMN = EditorCommands.TABLE_TOGGLE_HEADER_COLUMN,
+  TABLE_TOGGLE_HEADER_ROW = EditorCommands.TABLE_TOGGLE_HEADER_ROW,
+  TEXT_ALIGN_CENTER = EditorCommands.TEXT_ALIGN_CENTER,
+  TEXT_ALIGN_JUSTIFY = EditorCommands.TEXT_ALIGN_JUSTIFY,
+  TEXT_ALIGN_LEFT = EditorCommands.TEXT_ALIGN_LEFT,
+  TEXT_ALIGN_RIGHT = EditorCommands.TEXT_ALIGN_RIGHT,
+  TEXT_COLOR = EditorCommands.TEXT_COLOR,
+  TEXT_HIGHLIGHT = EditorCommands.TEXT_HIGHLIGHT,
+  TEXT_LINE_SPACINGS = EditorCommands.TEXT_LINE_SPACINGS,
+  UL = EditorCommands.UL,
+  UNDERLINE = EditorCommands.UNDERLINE;
+export var TABLE_COMMANDS_GROUP = [{
+  'Insert Table...': TABLE_INSERT_TABLE
+}, {
+  'Fill Color...': TABLE_BACKGROUND_COLOR,
+  'Border Color....': TABLE_BORDER_COLOR
+}, {
+  'Insert Column Before': TABLE_ADD_COLUMN_BEFORE,
+  'Insert Column After': TABLE_ADD_COLUMN_AFTER,
+  'Delete Column': TABLE_DELETE_COLUMN
+}, {
+  'Insert Row Before': TABLE_ADD_ROW_BEFORE,
+  'Insert Row After': TABLE_ADD_ROW_AFTER,
+  'Delete Row': TABLE_DELETE_ROW
+}, {
+  'Merge Cells': TABLE_MERGE_CELLS,
+  'Split Row': TABLE_SPLIT_ROW
+},
+// Disable these commands cause user rarely use them.
+{
+  'Toggle Header Column': TABLE_TOGGLE_HEADER_COLUMN,
+  'Toggle Header Row': TABLE_TOGGLE_HEADER_ROW,
+  'Toggle Header Cells': TABLE_TOGGLE_HEADER_CELL
+}, {
+  'Delete Table': TABLE_DELETE_TABLE
+}];
+
+// [FS] IRAD-1012 2020-07-14
+// Fix: Toolbar is poorly organized.
+
+export var COMMAND_GROUPS = [{
+  '[font_download] Font Type': FontTypeCommandMenuButton
+}, {
+  '[format_size] Text Size': FontSizeCommandMenuButton
+}, {
+  '[format_bold] Bold': STRONG,
+  '[format_italic] Italic': EM,
+  '[format_underline] Underline': UNDERLINE,
+  '[format_strikethrough] Strike through': STRIKE,
+  '[superscript] Superscript': SUPER,
+  '[subscript] Subscript': SUB,
+  '[format_color_text] Text color': TEXT_COLOR,
+  '[border_color] Highlight color': TEXT_HIGHLIGHT,
+  '[format_clear] Clear formats': CLEAR_FORMAT
+}, {
+  '[format_align_left] Left align': TEXT_ALIGN_LEFT,
+  '[format_align_center] Center Align': TEXT_ALIGN_CENTER,
+  '[format_align_right] Right Align': TEXT_ALIGN_RIGHT,
+  '[format_align_justify] Justify': TEXT_ALIGN_JUSTIFY
+}, {
+  '[format_indent_increase] Indent more': INDENT_MORE,
+  '[format_indent_decrease] Indent less': INDENT_LESS,
+  '[format_line_spacing] Line spacing': TEXT_LINE_SPACINGS
+}, {
+  // [FS] IRAD-1039 2020-09-23
+  // Added new command button that brings a popup
+  '[format_list_numbered] Ordered list': ListTypeCommandButton,
+  '[format_list_bulleted] Bulleted list': UL
+}, {
+  '[link] Apply link': LINK_SET_URL,
+  '[grid_on] Table...': TABLE_COMMANDS_GROUP,
+  '[hr] Horizontal line': HR,
+  '[functions] Math': MATH_EDIT
+
+  // [FS][07-MAY-2020][IRAD-956]
+  // '[format_quote] Block quote': BLOCKQUOTE_TOGGLE,
+}, {
+  '[settings_overscan] Page layout': DOC_LAYOUT
+}, {
+  '[undo] Undo': HISTORY_UNDO,
+  '[redo] Redo': HISTORY_REDO
+}];

package/ui/EditorToolbarConfig.js.flow

@@ -0,0 +1,164 @@
+// @flow
+
+// eslint-disable-next-line no-unused-vars
+import * as React from 'react';
+
+import * as EditorCommands from '../EditorCommands.js';
+import FontSizeCommandMenuButton from './FontSizeCommandMenuButton.js';
+import FontTypeCommandMenuButton from './FontTypeCommandMenuButton.js';
+import ListTypeCommandButton from './ListTypeCommandButton.js';
+import Icon from './Icon.js';
+
+const ICON_LABEL_PATTERN = /\[([A-Za-z_\d]+)\](.*)/;
+
+export function parseLabel(input: string): Object {
+  const matched = input.match(ICON_LABEL_PATTERN);
+  if (matched) {
+    const [
+      // eslint-disable-next-line no-unused-vars
+      all,
+      icon,
+      label,
+    ] = matched;
+    return {
+      icon: icon ? Icon.get(icon) : null,
+      title: label || null,
+    };
+  }
+  return {
+    icon: null,
+    title: input || null,
+  };
+}
+
+const {
+  // [FS][07-MAY-2020][IRAD-956]
+  // BLOCKQUOTE_TOGGLE,
+  CLEAR_FORMAT,
+  DOC_LAYOUT,
+  EM,
+  HISTORY_REDO,
+  HISTORY_UNDO,
+  HR,
+  INDENT_LESS,
+  INDENT_MORE,
+  LINK_SET_URL,
+  MATH_EDIT,
+  STRIKE,
+  STRONG,
+  SUPER,
+  SUB,
+  TABLE_ADD_COLUMN_AFTER,
+  TABLE_ADD_COLUMN_BEFORE,
+  TABLE_ADD_ROW_AFTER,
+  TABLE_ADD_ROW_BEFORE,
+  TABLE_BORDER_COLOR,
+  TABLE_BACKGROUND_COLOR,
+  TABLE_DELETE_COLUMN,
+  TABLE_DELETE_ROW,
+  TABLE_DELETE_TABLE,
+  TABLE_INSERT_TABLE,
+  TABLE_MERGE_CELLS,
+  TABLE_SPLIT_ROW,
+  TABLE_TOGGLE_HEADER_CELL,
+  TABLE_TOGGLE_HEADER_COLUMN,
+  TABLE_TOGGLE_HEADER_ROW,
+  TEXT_ALIGN_CENTER,
+  TEXT_ALIGN_JUSTIFY,
+  TEXT_ALIGN_LEFT,
+  TEXT_ALIGN_RIGHT,
+  TEXT_COLOR,
+  TEXT_HIGHLIGHT,
+  TEXT_LINE_SPACINGS,
+  UL,
+  UNDERLINE,
+} = EditorCommands;
+
+export const TABLE_COMMANDS_GROUP = [
+  {
+    'Insert Table...': TABLE_INSERT_TABLE,
+  },
+  {
+    'Fill Color...': TABLE_BACKGROUND_COLOR,
+    'Border Color....': TABLE_BORDER_COLOR,
+  },
+  {
+    'Insert Column Before': TABLE_ADD_COLUMN_BEFORE,
+    'Insert Column After': TABLE_ADD_COLUMN_AFTER,
+    'Delete Column': TABLE_DELETE_COLUMN,
+  },
+  {
+    'Insert Row Before': TABLE_ADD_ROW_BEFORE,
+    'Insert Row After': TABLE_ADD_ROW_AFTER,
+    'Delete Row': TABLE_DELETE_ROW,
+  },
+  {
+    'Merge Cells': TABLE_MERGE_CELLS,
+    'Split Row': TABLE_SPLIT_ROW,
+  },
+  // Disable these commands cause user rarely use them.
+  {
+    'Toggle Header Column': TABLE_TOGGLE_HEADER_COLUMN,
+    'Toggle Header Row': TABLE_TOGGLE_HEADER_ROW,
+    'Toggle Header Cells': TABLE_TOGGLE_HEADER_CELL,
+  },
+  {
+    'Delete Table': TABLE_DELETE_TABLE,
+  },
+];
+
+// [FS] IRAD-1012 2020-07-14
+// Fix: Toolbar is poorly organized.
+
+export const COMMAND_GROUPS = [
+  {
+    '[font_download] Font Type': FontTypeCommandMenuButton,
+  },
+  {
+    '[format_size] Text Size': FontSizeCommandMenuButton,
+  },
+  {
+    '[format_bold] Bold': STRONG,
+    '[format_italic] Italic': EM,
+    '[format_underline] Underline': UNDERLINE,
+    '[format_strikethrough] Strike through': STRIKE,
+    '[superscript] Superscript': SUPER,
+    '[subscript] Subscript': SUB,
+    '[format_color_text] Text color': TEXT_COLOR,
+    '[border_color] Highlight color': TEXT_HIGHLIGHT,
+    '[format_clear] Clear formats': CLEAR_FORMAT,
+  },
+  {
+    '[format_align_left] Left align': TEXT_ALIGN_LEFT,
+    '[format_align_center] Center Align': TEXT_ALIGN_CENTER,
+    '[format_align_right] Right Align': TEXT_ALIGN_RIGHT,
+    '[format_align_justify] Justify': TEXT_ALIGN_JUSTIFY,
+  },
+  {
+    '[format_indent_increase] Indent more': INDENT_MORE,
+    '[format_indent_decrease] Indent less': INDENT_LESS,
+    '[format_line_spacing] Line spacing': TEXT_LINE_SPACINGS,
+  },
+  {
+    // [FS] IRAD-1039 2020-09-23
+    // Added new command button that brings a popup
+    '[format_list_numbered] Ordered list': ListTypeCommandButton,
+    '[format_list_bulleted] Bulleted list': UL,
+  },
+  {
+    '[link] Apply link': LINK_SET_URL,
+    '[grid_on] Table...': TABLE_COMMANDS_GROUP,
+    '[hr] Horizontal line': HR,
+    '[functions] Math': MATH_EDIT,
+
+    // [FS][07-MAY-2020][IRAD-956]
+    // '[format_quote] Block quote': BLOCKQUOTE_TOGGLE,
+  },
+  {
+    '[settings_overscan] Page layout': DOC_LAYOUT,
+  },
+  {
+    '[undo] Undo': HISTORY_UNDO,
+    '[redo] Redo': HISTORY_REDO,
+  },
+];

package/ui/FontSizeCommandMenuButton.js

@@ -0,0 +1,67 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import { FontSizeCommand } from '@modusoperandi/licit-ui-commands';
+import CommandMenuButton from './CommandMenuButton.js';
+import findActiveFontSize from './findActiveFontSize.js';
+export var FONT_PT_SIZES = [8, 9, 10, 11, 12, 14, 18, 24, 30, 36, 48, 60, 72, 90];
+var FONT_PT_SIZE_COMMANDS = FONT_PT_SIZES.reduce(function (memo, size) {
+  memo[" ".concat(size, " ")] = new FontSizeCommand(size);
+  return memo;
+}, {});
+var COMMAND_GROUPS = [{
+  Default: new FontSizeCommand(0)
+}, FONT_PT_SIZE_COMMANDS];
+var FontSizeCommandMenuButton = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(FontSizeCommandMenuButton, _React$PureComponent);
+  function FontSizeCommandMenuButton() {
+    var _this;
+    _classCallCheck(this, FontSizeCommandMenuButton);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, FontSizeCommandMenuButton, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    return _this;
+  }
+  _createClass(FontSizeCommandMenuButton, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        dispatch = _this$props.dispatch,
+        editorState = _this$props.editorState,
+        editorView = _this$props.editorView;
+      var fontSize = findActiveFontSize(editorState);
+      var className = String(fontSize).length <= 2 ? 'width-30' : 'width-60';
+      return /*#__PURE__*/React.createElement(CommandMenuButton, {
+        className: className
+        // [FS] IRAD-1008 2020-07-16
+        // Disable font size menu on editor disable state
+        ,
+        commandGroups: COMMAND_GROUPS,
+        disabled: editorView && editorView.disabled ? true : false,
+        dispatch: dispatch,
+        editorState: editorState,
+        editorView: editorView,
+        label: fontSize
+      });
+    }
+  }]);
+  return FontSizeCommandMenuButton;
+}(React.PureComponent);
+export default FontSizeCommandMenuButton;

package/ui/FontSizeCommandMenuButton.js.flow

@@ -0,0 +1,66 @@
+// @flow
+
+import { EditorState } from 'prosemirror-state';
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import {FontSizeCommand} from '@modusoperandi/licit-ui-commands';
+import CommandMenuButton from './CommandMenuButton.js';
+import findActiveFontSize from './findActiveFontSize.js';
+
+export const FONT_PT_SIZES = [
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  18,
+  24,
+  30,
+  36,
+  48,
+  60,
+  72,
+  90,
+];
+
+const FONT_PT_SIZE_COMMANDS = FONT_PT_SIZES.reduce((memo, size) => {
+  memo[` ${size} `] = new FontSizeCommand(size);
+  return memo;
+}, {});
+
+const COMMAND_GROUPS = [
+  { Default: new FontSizeCommand(0) },
+  FONT_PT_SIZE_COMMANDS,
+];
+
+class FontSizeCommandMenuButton extends React.PureComponent<any, any> {
+  props: {
+    dispatch: (tr: Transform) => void,
+    editorState: EditorState,
+    editorView: ?EditorView,
+  };
+
+  render(): React.Element<any> {
+    const { dispatch, editorState, editorView } = this.props;
+    const fontSize = findActiveFontSize(editorState);
+    const className = String(fontSize).length <= 2 ? 'width-30' : 'width-60';
+    return (
+      <CommandMenuButton
+        className={className}
+        // [FS] IRAD-1008 2020-07-16
+        // Disable font size menu on editor disable state
+        commandGroups={COMMAND_GROUPS}
+        disabled={editorView && editorView.disabled ? true : false}
+        dispatch={dispatch}
+        editorState={editorState}
+        editorView={editorView}
+        label={fontSize}
+      />
+    );
+  }
+}
+
+export default FontSizeCommandMenuButton;