@modusoperandi/licit 0.14.17 → 1.0.0

package/ui/MathNodeView.js.flow

@@ -0,0 +1,186 @@
+// @flow
+
+import './czi-math-view.css';
+import CustomNodeView from './CustomNodeView.js';
+import MathInlineEditor from './MathInlineEditor.js';
+import * as React from 'react';
+import { createPopUp } from '@modusoperandi/licit-ui-commands';
+import cx from 'classnames';
+import renderLaTeXAsHTML from './renderLaTeXAsHTML.js';
+import uuid from './uuid.js';
+import {
+  Decoration
+} from 'prosemirror-view';
+import {
+  FRAMESET_BODY_CLASSNAME
+} from './EditorFrameset.js';
+import {
+  Node
+} from 'prosemirror-model';
+import {
+  atAnchorBottomCenter
+} from '@modusoperandi/licit-ui-commands';
+import {
+  NodeSelection
+} from 'prosemirror-state';
+
+import type {
+  NodeViewProps
+} from './CustomNodeView.js';
+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/ui/PasteMenu.js

@@ -0,0 +1,74 @@
+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 * 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.
+var PasteMenu = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(PasteMenu, _React$PureComponent);
+  function PasteMenu() {
+    var _this;
+    _classCallCheck(this, PasteMenu);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, PasteMenu, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_activeCommand", null);
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_menu", null);
+    _defineProperty(_assertThisInitialized(_this), "_id", uuid());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      expanded: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onUIEnter", function (id) {
+      _this.props.close(id);
+    });
+    return _this;
+  }
+  _createClass(PasteMenu, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var children = [];
+      children.push( /*#__PURE__*/React.createElement("button", {
+        className: "pastemenu",
+        id: "paste",
+        key: "paste",
+        onClick: function onClick(e) {
+          return _this2._onUIEnter('paste');
+        },
+        value: "paste"
+      }, "Paste"));
+      children.push( /*#__PURE__*/React.createElement("button", {
+        className: "pastemenu",
+        id: "keepTextOnly",
+        key: "keepTextOnly",
+        onClick: function onClick(e) {
+          return _this2._onUIEnter('keepTextOnly');
+        },
+        value: "keepTextOnly"
+      }, "Keep Text Only"));
+      return /*#__PURE__*/React.createElement("div", {
+        className: "container"
+      }, children);
+    }
+  }]);
+  return PasteMenu;
+}(React.PureComponent);
+export default PasteMenu;

package/ui/ResizeObserver.js

@@ -0,0 +1,89 @@
+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
+var bpfrpt_proptype_ResizeObserverEntry = {
+  "target": function target() {
+    return (typeof Element === "function" ? PropTypes.instanceOf(Element).isRequired : PropTypes.any.isRequired).apply(this, arguments);
+  },
+  "contentRect": PropTypes.shape({
+    x: PropTypes.number.isRequired,
+    y: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    right: PropTypes.number.isRequired,
+    bottom: PropTypes.number.isRequired,
+    left: PropTypes.number.isRequired
+  }).isRequired
+}; // 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)`
+var instance = null;
+var nodesObserving = new Map();
+function onResizeObserve(entries) {
+  entries.forEach(handleResizeObserverEntry);
+}
+function handleResizeObserverEntry(entry) {
+  var node = entry.target;
+  var callbacks = nodesObserving.get(node);
+  var executeCallback = function executeCallback(cb) {
+    return cb(entry);
+  };
+  callbacks && callbacks.forEach(executeCallback);
+}
+export function observe(node, callback) {
+  var el = node;
+  var observer = instance || (instance = new ResizeObserver(onResizeObserve));
+  if (nodesObserving.has(el)) {
+    // Already observing node.
+    var callbacks = nullthrows(nodesObserving.get(el));
+    callbacks.push(callback);
+  } else {
+    var _callbacks = [callback];
+    nodesObserving.set(el, _callbacks);
+    observer.observe(el);
+  }
+}
+export function unobserve(node, callback) {
+  var observer = instance;
+  if (!observer) {
+    return;
+  }
+  var el = 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
+    var callbacks = nodesObserving.has(el) ? nullthrows(nodesObserving.get(el)).filter(function (cb) {
+      return 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: observe,
+  unobserve: unobserve
+};
+import PropTypes from "prop-types";
+export { bpfrpt_proptype_ResizeObserverEntry };

package/ui/RichTextEditor.js

@@ -0,0 +1,125 @@
+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 { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+import createEmptyEditorState from '../createEmptyEditorState.js';
+import Editor from './Editor.js';
+import EditorFrameset from './EditorFrameset.js';
+import EditorToolbar from './EditorToolbar.js';
+import Frag from './Frag.js';
+import uuid from './uuid.js';
+var EMPTY_EDITOR_RUNTIME = {};
+var RichTextEditor = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(RichTextEditor, _React$PureComponent);
+  function RichTextEditor(props, context) {
+    var _this;
+    _classCallCheck(this, RichTextEditor);
+    _this = _callSuper(this, RichTextEditor, [props, context]);
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    _defineProperty(_assertThisInitialized(_this), "state", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_id", void 0);
+    _defineProperty(_assertThisInitialized(_this), "_dispatchTransaction", function (tr) {
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        editorState = _this$props.editorState;
+      // [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
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onReady", function (editorView) {
+      if (editorView !== _this.state.editorView) {
+        _this.setState({
+          editorView: editorView
+        });
+        var onReady = _this.props.onReady;
+        onReady && onReady(editorView);
+      }
+    });
+    _this._id = uuid();
+    _this.state = {
+      contentHeight: NaN,
+      contentOverflowHidden: false,
+      editorView: null
+    };
+    return _this;
+  }
+  _createClass(RichTextEditor, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        autoFocus = _this$props2.autoFocus,
+        children = _this$props2.children,
+        className = _this$props2.className,
+        disabled = _this$props2.disabled,
+        embedded = _this$props2.embedded,
+        header = _this$props2.header,
+        height = _this$props2.height,
+        onChange = _this$props2.onChange,
+        nodeViews = _this$props2.nodeViews,
+        placeholder = _this$props2.placeholder,
+        readOnly = _this$props2.readOnly,
+        width = _this$props2.width;
+      var _this$props3 = this.props,
+        editorState = _this$props3.editorState,
+        runtime = _this$props3.runtime;
+      editorState = editorState || createEmptyEditorState();
+      runtime = runtime || EMPTY_EDITOR_RUNTIME;
+      var editorView = this.state.editorView;
+      var toolbar = !!readOnly === true ? null : /*#__PURE__*/React.createElement(EditorToolbar, {
+        disabled: disabled,
+        dispatchTransaction: this._dispatchTransaction,
+        editorState: editorState || Editor.EDITOR_EMPTY_STATE,
+        editorView: editorView,
+        readOnly: readOnly
+      });
+      var body = /*#__PURE__*/React.createElement(Frag, null, /*#__PURE__*/React.createElement(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);
+      return /*#__PURE__*/React.createElement(EditorFrameset, {
+        body: body,
+        className: className,
+        embedded: embedded,
+        header: header,
+        height: height,
+        toolbar: toolbar,
+        width: width
+      });
+    }
+  }]);
+  return RichTextEditor;
+}(React.PureComponent);
+export default RichTextEditor;
+import { bpfrpt_proptype_EditorFramesetProps } from "./EditorFrameset.js";
+import { bpfrpt_proptype_EditorProps } from "./Editor.js";

package/ui/RichTextEditor.js.flow

@@ -0,0 +1,133 @@
+// @flow
+
+import { Transform } from 'prosemirror-transform';
+import { EditorView } from 'prosemirror-view';
+import * as React from 'react';
+
+import createEmptyEditorState from '../createEmptyEditorState.js';
+import Editor from './Editor.js';
+import EditorFrameset from './EditorFrameset.js';
+import EditorToolbar from './EditorToolbar.js';
+import Frag from './Frag.js';
+import uuid from './uuid.js';
+
+import type { EditorFramesetProps } from './EditorFrameset.js';
+import type { EditorProps } from './Editor.js';
+
+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;