@pie-lib/editable-html 10.0.0-beta.6 → 10.0.0

package/src/editor.jsx

@@ -1,380 +1,22 @@
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import {
-  Editor as OldSlateEditor,
-  findNode,
-  getEventRange,
-  getEventTransfer,
-} from 'slate-react';
-import RootRef from '@material-ui/core/RootRef';
+import { Editor as SlateEditor, findNode, getEventRange, getEventTransfer } from 'slate-react';
+import SlateTypes from 'slate-prop-types';
 
 import isEqual from 'lodash/isEqual';
-import * as serialization from './new-serialization';
+import * as serialization from './serialization';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { Value, Block, Inline } from 'slate';
-import { ALL_PLUGINS, DEFAULT_PLUGINS, buildPlugins, withPlugins } from './plugins';
+import { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';
 import debug from 'debug';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import { color } from '@pie-lib/render-ui';
 import Plain from 'slate-plain-serializer';
+import { AlertDialog } from '@pie-lib/config-ui';
 
-import { getBase64, htmlToValue, valueToHtml } from './new-serialization';
+import { getBase64 } from './serialization';
 import InsertImageHandler from './plugins/image/insert-image-handler';
 
-import isHotkey from 'is-hotkey';
-import { ReactEditor, useSlateStatic, Editable, useFocused, useSlate, Slate } from 'slate-react';
-import { Node as SlateNode, Path, Editor, Transforms, createEditor, Element as SlateElement } from 'slate';
-
-import { Button, Icon } from './components';
-import EditorAndToolbar from './plugins/toolbar/editor-and-toolbar';
-
-window.Path = Path;
-window.SlateNode = SlateNode;
-window.ReactEditor = ReactEditor;
-window.Editor = Editor;
-
-const HOTKEYS = {
-  'mod+b': 'bold',
-  'mod+i': 'italic',
-  'mod+u': 'underline',
-  'mod+`': 'code'
-};
-
-const LIST_TYPES = ['numbered-list', 'bulleted-list'];
-const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];
-
-const initialValue = [
-  {
-    type: 'paragraph',
-    children: [
-      {
-        type: 'math',
-        data: {
-          latex: '\\frac{1}{2}',
-          wrapper: 'round_brackets'
-        },
-        children: [
-          {
-            text: '\\(\\frac{1}{2}\\)'
-          }
-        ]
-      }
-    ]
-  }
-];
-
-const SlateEditor = editorProps => {
-  const mounted = useRef(false);
-  const { autoFocus, value, plugins, actionsRef, onEditingDone } = editorProps;
-  const renderElement = useCallback(props => <Element {...props} plugins={plugins} />, []);
-  const renderLeaf = useCallback(props => <Leaf {...props} />, []);
-  const editor = useMemo(() => withPlugins(createEditor(), plugins), []);
-  const [isFocused, setIsFocused] = useState(false);
-  const editorRef = useRef(null);
-
-  useEffect(() => {
-    mounted.current = true;
-
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (editorProps.onEditor) {
-      editorProps.onEditor(editor);
-    }
-
-    if (autoFocus) {
-      Transforms.select(editor, [0, 0]);
-      ReactEditor.focus(editor);
-
-      if (mounted.current) {
-        setIsFocused(true);
-      }
-    }
-  }, [editor]);
-
-  const slateValue = useMemo(() => {
-    // Slate throws an error if the value on the initial render is invalid
-    // so we directly set the value on the editor in order
-    // to be able to trigger normalization on the initial value before rendering
-    editor.children = value;
-    editor.marks = {};
-    Editor.normalize(editor, { force: true });
-    // We return the normalized internal value so that the rendering can take over from here
-    return editor.children;
-  }, [editor, value]);
-
-  window.editor = editor;
-
-  const onKeyDown = event => {
-    if (event.key === 'Enter' && event.shiftKey === true) {
-      editor.insertText('\n');
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    for (const hotkey in HOTKEYS) {
-      if (isHotkey(hotkey, event)) {
-        event.preventDefault();
-        const mark = HOTKEYS[hotkey];
-        toggleMark(editor, mark);
-      }
-    }
-  };
-  const onFocus = () => setIsFocused(true);
-  const onBlur = e => {
-    setTimeout(() => {
-      if (!editorRef.current || !editorRef.current.contains(document.activeElement)) {
-        if (editorProps.onBlur) {
-          editorProps.onBlur(e);
-        }
-
-        if (mounted.current) {
-          setIsFocused(false);
-        }
-      }
-    }, 50);
-  };
-  const actions = {
-    focus: (position, node) => {
-      const [, textPath] = node
-        ? Editor.leaf(editor, ReactEditor.findPath(editor, node), { edge: 'end' })
-        : Editor.leaf(editor, [0], { edge: 'end' });
-
-      Transforms.select(editor, textPath);
-      ReactEditor.focus(editor);
-    },
-    finishEditing: () => {
-      // if (!mounted.current) {
-      //   return;
-      // }
-
-      if (typeof onEditingDone === 'function') {
-        onEditingDone(editor);
-      }
-    }
-  };
-
-  if (actionsRef) {
-    actionsRef(actions);
-  }
-
-  return (
-    <Slate editor={editor} initialValue={slateValue}>
-      <RootRef rootRef={editorRef}>
-        <EditorAndToolbar
-          {...editorProps}
-          editor={editor}
-          isFocused={isFocused}
-          onDone={() => {
-            setIsFocused(false);
-            document.activeElement.blur();
-            editorProps.onDone(editor);
-          }}
-        >
-          <Editable
-            renderElement={renderElement}
-            renderLeaf={renderLeaf}
-            placeholder="Enter some rich text…"
-            spellCheck
-            onKeyDown={onKeyDown}
-            onFocus={onFocus}
-            onBlur={onBlur}
-          />
-        </EditorAndToolbar>
-      </RootRef>
-    </Slate>
-  );
-};
-
-const toggleBlock = (editor, format) => {
-  const isActive = isBlockActive(
-    editor,
-    format,
-    TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type'
-  );
-  const isList = LIST_TYPES.includes(format);
-
-  Transforms.unwrapNodes(editor, {
-    match: n =>
-      !Editor.isEditor(n) &&
-      SlateElement.isElement(n) &&
-      LIST_TYPES.includes(n.type) &&
-      !TEXT_ALIGN_TYPES.includes(format),
-    split: true
-  });
-  let newProperties;
-  if (TEXT_ALIGN_TYPES.includes(format)) {
-    newProperties = {
-      align: isActive ? undefined : format
-    };
-  } else {
-    newProperties = {
-      type: isActive ? 'paragraph' : isList ? 'list_item' : format
-    };
-  }
-  Transforms.setNodes(editor, newProperties);
-
-  if (!isActive && isList) {
-    const block = { type: format, children: [] };
-    Transforms.wrapNodes(editor, block);
-  }
-};
-
-const toggleMark = (editor, format) => {
-  const isActive = isMarkActive(editor, format);
-
-  if (isActive) {
-    Editor.removeMark(editor, format);
-  } else {
-    Editor.addMark(editor, format, true);
-  }
-};
-
-const isBlockActive = (editor, format, blockType = 'type') => {
-  const { selection } = editor;
-  if (!selection) return false;
-
-  const [match] = Array.from(
-    Editor.nodes(editor, {
-      at: Editor.unhangRange(editor, selection),
-      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format
-    })
-  );
-
-  return !!match;
-};
-
-const isMarkActive = (editor, format) => {
-  const marks = Editor.marks(editor);
-  return marks ? marks[format] === true : false;
-};
-
-const Element = props => {
-  const editor = useSlateStatic();
-  const focused = useFocused();
-  const { attributes, children, element, plugins } = props;
-  const style = { textAlign: element.align };
-
-  const nodeProps = { ...attributes, ...props, node: { ...element }, children };
-  const pluginToRender = plugins.find(
-    plugin => typeof plugin.supports === 'function' && plugin.supports(element)
-  );
-
-  if (pluginToRender) {
-    return pluginToRender.renderNode({ ...nodeProps, editor, focused });
-  }
-
-  switch (element.type) {
-    case 'block-quote':
-      return (
-        <blockquote style={style} {...attributes}>
-          {children}
-        </blockquote>
-      );
-    case 'bulleted-list':
-      return (
-        <ul style={style} {...attributes}>
-          {children}
-        </ul>
-      );
-    case 'heading-one':
-      return (
-        <h1 style={style} {...attributes}>
-          {children}
-        </h1>
-      );
-    case 'heading-two':
-      return (
-        <h2 style={style} {...attributes}>
-          {children}
-        </h2>
-      );
-    case 'list-item':
-      return (
-        <li style={style} {...attributes}>
-          {children}
-        </li>
-      );
-    case 'numbered-list':
-      return (
-        <ol style={style} {...attributes}>
-          {children}
-        </ol>
-      );
-    default:
-      return (
-        <div
-          style={{
-            ...style,
-            margin: 0
-          }}
-          {...attributes}
-        >
-          {children}
-        </div>
-      );
-  }
-};
-
-const Leaf = ({ attributes, children, leaf }) => {
-  if (leaf.bold) {
-    children = <strong>{children}</strong>;
-  }
-
-  if (leaf.code) {
-    children = <code>{children}</code>;
-  }
-
-  if (leaf.italic) {
-    children = <em>{children}</em>;
-  }
-
-  if (leaf.underline) {
-    children = <u>{children}</u>;
-  }
-
-  if (leaf.strikethrough) {
-    children = <del>{children}</del>;
-  }
-
-  return <span {...attributes}>{children}</span>;
-};
-
-const BlockButton = ({ format, icon }) => {
-  const editor = useSlate();
-  return (
-    <Button
-      active={isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type')}
-      onMouseDown={event => {
-        event.preventDefault();
-        toggleBlock(editor, format);
-      }}
-    >
-      <Icon>{icon}</Icon>
-    </Button>
-  );
-};
-
-const MarkButton = ({ format, icon }) => {
-  const editor = useSlate();
-  return (
-    <Button
-      active={isMarkActive(editor, format)}
-      onMouseDown={event => {
-        event.preventDefault();
-        toggleMark(editor, format);
-      }}
-    >
-      <Icon>{icon}</Icon>
-    </Button>
-  );
-};
-
-// old-editable
-
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
 
 const log = debug('editable-html:editor');
@@ -395,31 +37,27 @@ const defaultResponseAreaProps = {
 
 const defaultLanguageCharactersProps = [];
 
-const createToolbarOpts = (toolbarOpts, error) => {
+const createToolbarOpts = (toolbarOpts, error, isHtmlMode) => {
   return {
     ...defaultToolbarOpts,
     ...toolbarOpts,
     error,
+    isHtmlMode,
   };
 };
 
-export class EditorComponent extends React.Component {
+export class Editor extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
+    editorRef: PropTypes.func.isRequired,
     error: PropTypes.any,
     onRef: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
-    onEditor: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     onKeyDown: PropTypes.func,
-    value: PropTypes.arrayOf(
-      PropTypes.shape({
-        type: PropTypes.string,
-        children: PropTypes.array,
-        data: PropTypes.object
-      })
-    ),
+    focus: PropTypes.func.isRequired,
+    value: SlateTypes.value.isRequired,
     imageSupport: PropTypes.object,
     mathMlOptions: PropTypes.shape({
       mmlOutput: PropTypes.bool,
@@ -496,8 +134,15 @@ export class EditorComponent extends React.Component {
     this.state = {
       value: props.value,
       toolbarOpts: createToolbarOpts(props.toolbarOpts, props.error),
+      isHtmlMode: false,
+      isEdited: false,
+      dialog: {
+        open: false,
+      },
     };
 
+    this.toggleHtmlMode = this.toggleHtmlMode.bind(this);
+
     this.onResize = () => {
       props.onChange(this.state.value, true);
     };
@@ -505,12 +150,48 @@ export class EditorComponent extends React.Component {
     this.handlePlugins(this.props);
   }
 
+  handleAlertDialog = (open, extraDialogProps, callback) => {
+    this.setState(
+      {
+        dialog: {
+          open,
+          ...extraDialogProps,
+        },
+        isEdited: false,
+      },
+      callback,
+    );
+  };
+
+  toggleHtmlMode = () => {
+    this.setState(
+      (prevState) => ({
+        isHtmlMode: !prevState.isHtmlMode,
+      }),
+      () => {
+        const { error } = this.props;
+        const { toolbarOpts } = this.state;
+        const newToolbarOpts = createToolbarOpts(toolbarOpts, error, this.state.isHtmlMode);
+        this.setState({
+          toolbarOpts: newToolbarOpts,
+        });
+      },
+    );
+  };
+
   handlePlugins = (props) => {
     const normalizedResponseAreaProps = {
       ...defaultResponseAreaProps,
       ...props.responseAreaProps,
     };
 
+    const htmlPluginOpts = {
+      isHtmlMode: this.state.isHtmlMode,
+      isEdited: this.state.isEdited,
+      toggleHtmlMode: this.toggleHtmlMode,
+      handleAlertDialog: this.handleAlertDialog,
+    };
+
     this.plugins = buildPlugins(props.activePlugins, {
       math: {
         onClick: this.onMathClick,
@@ -518,6 +199,7 @@ export class EditorComponent extends React.Component {
         onBlur: this.onPluginBlur,
         ...props.mathMlOptions,
       },
+      html: htmlPluginOpts,
       image: {
         disableImageAlignmentButtons: props.disableImageAlignmentButtons,
         onDelete:
@@ -551,6 +233,21 @@ export class EditorComponent extends React.Component {
         disableScrollbar: !!props.disableScrollbar,
         disableUnderline: props.disableUnderline,
         autoWidth: props.autoWidthToolbar,
+        onDone: () => {
+          const { nonEmpty } = props;
+
+          log('[onDone]');
+          this.setState({ toolbarInFocus: false, focusedNode: null });
+          this.editor.blur();
+
+          if (nonEmpty && this.state.value.startText?.text?.length === 0) {
+            this.resetValue(true).then(() => {
+              this.onEditingDone();
+            });
+          } else {
+            this.onEditingDone();
+          }
+        },
       },
       table: {
         onFocus: () => {
@@ -581,6 +278,7 @@ export class EditorComponent extends React.Component {
       languageCharacters: props.languageCharactersProps,
       media: {
         focus: this.focus,
+        createChange: () => this.state.value.change(),
         onChange: this.onChange,
         uploadSoundSupport: props.uploadSoundSupport,
       },
@@ -592,6 +290,9 @@ export class EditorComponent extends React.Component {
   };
 
   componentDidMount() {
+    // onRef is needed to get the ref of the component because we export it using withStyles
+    this.props.onRef(this);
+
     window.addEventListener('resize', this.onResize);
 
     if (this.editor && this.props.autoFocus) {
@@ -599,6 +300,8 @@ export class EditorComponent extends React.Component {
         if (this.editor) {
           const editorDOM = document.querySelector(`[data-key="${this.editor.value.document.key}"]`);
 
+          this.editor.focus();
+
           if (editorDOM) {
             editorDOM.focus();
           }
@@ -608,8 +311,8 @@ export class EditorComponent extends React.Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    const { toolbarOpts } = this.state;
-    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error);
+    const { isHtmlMode, toolbarOpts } = this.state;
+    const newToolbarOpts = createToolbarOpts(nextProps.toolbarOpts, nextProps.error, isHtmlMode);
 
     if (!isEqual(newToolbarOpts, toolbarOpts)) {
       this.setState({
@@ -624,7 +327,7 @@ export class EditorComponent extends React.Component {
       this.handlePlugins(nextProps);
     }
 
-    if (!isEqual(nextProps.value, this.props.value)) {
+    if (!nextProps.value.document.equals(this.props.value.document)) {
       this.setState({
         focus: false,
         value: nextProps.value,
@@ -632,9 +335,14 @@ export class EditorComponent extends React.Component {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps, prevState) {
     // The cursor is on a zero width element and when that is placed near void elements, it is not visible
     // so we increase the width to at least 2px in order for the user to see it
+    if (this.state.isHtmlMode !== prevState.isHtmlMode || prevState.isEdited !== this.state.isEdited) {
+      this.handlePlugins(this.props);
+      this.onEditingDone();
+    }
+
     const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
 
     Array.from(zeroWidthEls).forEach((el) => {
@@ -670,23 +378,15 @@ export class EditorComponent extends React.Component {
   };
 
   onMathClick = (node) => {
+    this.editor.change((c) => c.collapseToStartOf(node));
     this.setState({ selectedNode: node });
   };
 
-  onEditingDone = editor => {
+  onEditingDone = () => {
     log('[onEditingDone]');
-    // this.setState({ stashedValue: null, focusedNode: null });
+    this.setState({ stashedValue: null, focusedNode: null });
     log('[onEditingDone] value: ', this.state.value);
-    this.props.onChange(editor, true);
-  };
-
-  onDone = editor => {
-    const { nonEmpty } = this.props;
-
-    log('[onDone]');
-    this.setState({ toolbarInFocus: false, focusedNode: null });
-
-    this.onEditingDone(editor);
+    this.props.onChange(this.state.value, true);
   };
 
   /**
@@ -705,6 +405,10 @@ export class EditorComponent extends React.Component {
 
     this.setState({ toolbarInFocus: false, focusedNode: null });
 
+    if (this.editor) {
+      this.editor.blur();
+    }
+
     if (doneOn === 'blur') {
       if (nonEmpty && this.state.value.startText?.text?.length === 0) {
         this.resetValue(true).then(() => {
@@ -719,11 +423,10 @@ export class EditorComponent extends React.Component {
   };
 
   onBlur = (event) => {
-    return this.props.onBlur(event);
     log('[onBlur]');
     const target = event.relatedTarget;
 
-    const node = ReactEditor.toSlateNode(editor, target);
+    const node = target ? findNode(target, this.state.value) : null;
 
     log('[onBlur] node: ', node);
 
@@ -846,17 +549,23 @@ export class EditorComponent extends React.Component {
     }
   };
 
-  onChange = (editor, done) => {
+  onChange = (change, done) => {
     log('[onChange]');
+
+    const { value } = change;
     const { charactersLimit } = this.props;
-    const allText = Editor.string(editor, []);
 
-    if (allText > charactersLimit) {
+    if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
       return;
     }
 
-    const html = valueToHtml(editor);
-    const value = htmlToValue(html);
+    if (!this.state.isHtmlMode) {
+      this.setState({ isEdited: false });
+    }
+
+    if (this.state.isHtmlMode && !isEqual(this.state.value.document.text, value.document.text)) {
+      this.setState({ isEdited: true });
+    }
 
     this.setState({ value }, () => {
       log('[onChange], call done()');
@@ -925,6 +634,25 @@ export class EditorComponent extends React.Component {
     return undefined;
   };
 
+  changeData = (key, data) => {
+    log('[changeData]. .. ', key, data);
+
+    /**
+     * HACK ALERT: We should be calling setState here and storing the change data:
+     *
+     * <code>this.setState({changeData: { key, data}})</code>
+     * However this is causing issues with the Mathquill instance. The 'input' event stops firing on the element and no
+     * more changes get through. The issues seem to be related to the promises in onBlur/onFocus. But removing these
+     * brings it's own problems. A major clean up is planned for this component so I've decided to temporarily settle
+     * on this hack rather than spend more time on this.
+     */
+
+    // Uncomment this line to see the bug described above.
+    // this.setState({changeData: {key, data}})
+
+    this.__TEMPORARY_CHANGE_DATA = { key, data };
+  };
+
   focus = (pos, node) => {
     const position = pos || 'end';
 
@@ -1025,7 +753,6 @@ export class EditorComponent extends React.Component {
 
   render() {
     const {
-      autoFocus,
       disabled,
       spellCheck,
       highlightShape,
@@ -1036,7 +763,7 @@ export class EditorComponent extends React.Component {
       onKeyDown,
     } = this.props;
 
-    const { value, focusedNode, toolbarOpts } = this.state;
+    const { value, focusedNode, toolbarOpts, dialog } = this.state;
 
     log('[render] value: ', value);
     const sizeStyle = this.buildSizeStyle();
@@ -1046,64 +773,19 @@ export class EditorComponent extends React.Component {
         [classes.toolbarOnTop]: toolbarOpts.alwaysVisible && toolbarOpts.position === 'top',
       },
       className,
-      classes.slateEditor,
     );
 
     return (
       <div ref={(ref) => (this.wrapperRef = ref)} style={{ width: sizeStyle.width }} className={names}>
         <SlateEditor
           plugins={this.plugins}
-          toolbarRef={(r) => {
+          innerRef={(r) => {
             if (r) {
-              this.toolbarRef = r;
+              this.slateEditor = r;
             }
           }}
-          autoFocus={autoFocus}
-          actionsRef={this.props.onRef}
-          onEditor={this.props.onEditor}
-          value={value}
-          focus={this.focus}
-          onKeyDown={onKeyDown}
-          onChange={this.onChange}
-          getFocusedValue={this.getFocusedValue}
-          onBlur={this.onBlur}
-          onDrop={(event, editor) => this.onDropPaste(event, editor, true)}
-          onPaste={(event, editor) => this.onDropPaste(event, editor)}
-          onFocus={this.onFocus}
-          onEditingDone={this.onEditingDone}
-          onDone={this.onDone}
-          focusedNode={focusedNode}
-          normalize={this.normalize}
-          readOnly={disabled}
-          spellCheck={spellCheck}
-          className={classNames(
-            {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
-            },
-            classes.slateEditor
-          )}
-          style={{
-            minHeight: sizeStyle.minHeight,
-            height: sizeStyle.height,
-            maxHeight: sizeStyle.maxHeight
-          }}
-          pluginProps={pluginProps}
-          toolbarOpts={toolbarOpts}
-          placeholder={placeholder}
-          renderPlaceholder={this.renderPlaceholder}
-        />
-      </div>
-    );
-
-    return (
-      <div
-        ref={ref => (this.wrapperRef = ref)}
-        style={{ width: sizeStyle.width }}
-        className={names}
-      >
-        <OldSlateEditor
-          plugins={this.plugins}
-          toolbarRef={r => {
+          ref={(r) => (this.editor = r && this.props.editorRef(r))}
+          toolbarRef={(r) => {
             if (r) {
               this.toolbarRef = r;
             }
@@ -1138,6 +820,14 @@ export class EditorComponent extends React.Component {
           toolbarOpts={toolbarOpts}
           placeholder={placeholder}
           renderPlaceholder={this.renderPlaceholder}
+          onDataChange={this.changeData}
+        />
+        <AlertDialog
+          open={dialog.open}
+          title={dialog.title}
+          text={dialog.text}
+          onClose={dialog.onClose}
+          onConfirm={dialog.onConfirm}
         />
       </div>
     );
@@ -1182,4 +872,4 @@ const styles = {
   },
 };
 
-export default withStyles(styles)(EditorComponent);
+export default withStyles(styles)(Editor);