@pie-lib/editable-html 11.1.1 → 11.2.1-beta.0

package/src/editor.jsx

@@ -1,21 +1,22 @@
+import React from 'react';
 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 './serialization';
-import PropTypes from 'prop-types';
-import React from 'react';
 import { Value, Block, Inline } from 'slate';
-import { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';
+import Plain from 'slate-plain-serializer';
+import PropTypes from 'prop-types';
+import isEqual from 'lodash/isEqual';
+import classNames from 'classnames';
 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 { PreviewPrompt } from '@pie-lib/render-ui';
 
-import { getBase64 } from './serialization';
+import { getBase64, htmlToValue } from './serialization';
 import InsertImageHandler from './plugins/image/insert-image-handler';
+import * as serialization from './serialization';
+import { buildPlugins, ALL_PLUGINS, DEFAULT_PLUGINS } from './plugins';
 
 export { ALL_PLUGINS, DEFAULT_PLUGINS, serialization };
 
@@ -46,6 +47,12 @@ const createToolbarOpts = (toolbarOpts, error, isHtmlMode) => {
   };
 };
 
+/**
+ * The maximum number of characters the editor can support
+ * @type {number}
+ */
+const MAX_CHARACTERS_LIMIT = 1000000;
+
 export class Editor extends React.Component {
   static propTypes = {
     autoFocus: PropTypes.bool,
@@ -70,6 +77,8 @@ export class Editor extends React.Component {
     }),
     charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -82,12 +91,33 @@ export class Editor extends React.Component {
     disableUnderline: PropTypes.bool,
     autoWidthToolbar: PropTypes.bool,
     pluginProps: PropTypes.any,
+    // customPlugins should be inside pluginProps (a property inside pluginProps)
+    //   customPlugins: PropTypes.arrayOf(
+    //       PropTypes.shape({
+    //         event: PropTypes.string,
+    //         icon: PropTypes.string,
+    //         iconType: PropTypes.string,
+    //         iconAlt: PropTypes.string
+    //       }),
+    //   ),
     placeholder: PropTypes.string,
+    isEditor: PropTypes.bool,
     responseAreaProps: PropTypes.shape({
-      type: PropTypes.oneOf(['explicit-constructed-response', 'inline-dropdown', 'drag-in-the-blank']),
+      type: PropTypes.oneOf([
+        'explicit-constructed-response',
+        'inline-dropdown',
+        'drag-in-the-blank',
+        'math-templated',
+      ]),
       options: PropTypes.object,
       respAreaToolbar: PropTypes.func,
       onHandleAreaChange: PropTypes.func,
+      maxResponseAreas: PropTypes.number,
+      error: PropTypes.any,
+    }),
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
     }),
     languageCharactersProps: PropTypes.arrayOf(
       PropTypes.shape({
@@ -103,6 +133,7 @@ export class Editor extends React.Component {
       alwaysVisible: PropTypes.bool,
       showDone: PropTypes.bool,
       doneOn: PropTypes.string,
+      minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     }),
     activePlugins: PropTypes.arrayOf((values) => {
       const allValid = values.every((v) => ALL_PLUGINS.includes(v));
@@ -127,6 +158,8 @@ export class Editor extends React.Component {
     toolbarOpts: defaultToolbarOpts,
     responseAreaProps: defaultResponseAreaProps,
     languageCharactersProps: defaultLanguageCharactersProps,
+    extraCSSRules: null,
+    isEditor: false,
   };
 
   constructor(props) {
@@ -136,29 +169,65 @@ export class Editor extends React.Component {
       toolbarOpts: createToolbarOpts(props.toolbarOpts, props.error),
       pendingImages: [],
       isHtmlMode: false,
-      isEdited: false,
+      isEditedInHtmlMode: false,
+      focusToolbar: false,
       dialog: {
         open: false,
       },
     };
 
+    this.keyPadCharacterRef = React.createRef();
+    this.doneButtonRef = React.createRef();
+    this.keypadInteractionDetected = false;
+
     this.toggleHtmlMode = this.toggleHtmlMode.bind(this);
+    this.handleToolbarFocus = this.handleToolbarFocus.bind(this);
+    this.handleToolbarBlur = this.handleToolbarBlur.bind(this);
 
     this.onResize = () => {
-      props.onChange(this.state.value, true);
+      if (!this.state.isHtmlMode && props.onChange) {
+        props.onChange(this.state.value, true);
+      }
     };
 
     this.handlePlugins(this.props);
   }
 
-  handleAlertDialog = (open, extraDialogProps, callback) => {
+  handleToolbarFocus() {
+    if (this.state.focusToolbar) {
+      return;
+    }
+
+    this.setState({ focusToolbar: true });
+  }
+
+  setKeypadInteraction = (interacted) => {
+    this.keypadInteractionDetected = interacted;
+  };
+
+  handleToolbarBlur() {
+    setTimeout(() => {
+      if (!this.toolbarContainsFocus()) {
+        this.setState({ focusToolbar: false });
+      }
+    }, 0);
+  }
+
+  toolbarContainsFocus() {
+    if (!this.toolbarRef) return false;
+    const toolbarElement = this.toolbarRef;
+    const activeElement = document.activeElement;
+
+    return toolbarElement && toolbarElement.contains(activeElement);
+  }
+
+  handleDialog = (open, extraDialogProps = {}, callback) => {
     this.setState(
       {
         dialog: {
           open,
           ...extraDialogProps,
         },
-        isEdited: false,
       },
       callback,
     );
@@ -168,6 +237,7 @@ export class Editor extends React.Component {
     this.setState(
       (prevState) => ({
         isHtmlMode: !prevState.isHtmlMode,
+        isEditedInHtmlMode: false,
       }),
       () => {
         const { error } = this.props;
@@ -187,28 +257,45 @@ export class Editor extends React.Component {
     };
 
     const htmlPluginOpts = {
+      currentValue: this.props.value,
       isHtmlMode: this.state.isHtmlMode,
-      isEdited: this.state.isEdited,
+      isEditedInHtmlMode: this.state.isEditedInHtmlMode,
       toggleHtmlMode: this.toggleHtmlMode,
-      handleAlertDialog: this.handleAlertDialog,
+      handleAlertDialog: this.handleDialog,
     };
+    let { customPlugins } = props.pluginProps || {};
+    customPlugins = customPlugins || [];
 
-    this.plugins = buildPlugins(props.activePlugins, {
+    this.plugins = buildPlugins(props.activePlugins, customPlugins, {
       math: {
         onClick: this.onMathClick,
         onFocus: this.onPluginFocus,
         onBlur: this.onPluginBlur,
         ...props.mathMlOptions,
       },
+      textAlign: {
+        getValue: () => this.state.value,
+        onChange: this.onChange,
+      },
       html: htmlPluginOpts,
+      extraCSSRules: props.extraCSSRules || {},
       image: {
         disableImageAlignmentButtons: props.disableImageAlignmentButtons,
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
-          ((src, done) => {
+          ((node, done) => {
+            const src = node.data.get('src');
+
             props.imageSupport.delete(src, (e) => {
-              done(e, this.state.value);
+              const newPendingImages = this.state.pendingImages.filter((img) => img.key !== node.key);
+              const { scheduled: oldScheduled } = this.state;
+              const newState = {
+                pendingImages: newPendingImages,
+                scheduled: oldScheduled && newPendingImages.length === 0 ? false : oldScheduled,
+              };
+
+              this.setState(newState, () => done(e, this.state.value));
             });
           }),
         insertImageRequested:
@@ -252,8 +339,8 @@ export class Editor extends React.Component {
           }),
         onFocus: this.onPluginFocus,
         onBlur: this.onPluginBlur,
-        maxImageWidth: this.props.maxImageWidth,
-        maxImageHeight: this.props.maxImageHeight,
+        maxImageWidth: props.maxImageWidth,
+        maxImageHeight: props.maxImageHeight,
       },
       toolbar: {
         /**
@@ -267,7 +354,7 @@ export class Editor extends React.Component {
           const { nonEmpty } = props;
 
           log('[onDone]');
-          this.setState({ toolbarInFocus: false, focusedNode: null });
+          this.setState({ toolbarInFocus: false, focusedNode: null, focusToolbar: false });
           this.editor.blur();
 
           if (nonEmpty && this.state.value.startText?.text?.length === 0) {
@@ -306,6 +393,8 @@ export class Editor extends React.Component {
         },
       },
       languageCharacters: props.languageCharactersProps,
+      keyPadCharacterRef: this.keyPadCharacterRef,
+      setKeypadInteraction: this.setKeypadInteraction,
       media: {
         focus: this.focus,
         createChange: () => this.state.value.change(),
@@ -325,6 +414,16 @@ export class Editor extends React.Component {
 
     window.addEventListener('resize', this.onResize);
 
+    const isResponseAreaEditor = this.props.className?.includes('response-area-editor');
+
+    if (isResponseAreaEditor && this.editor) {
+      const responseAreaEditor = document.querySelector(`[data-key="${this.editor.value.document.key}"]`);
+
+      if (responseAreaEditor) {
+        responseAreaEditor.setAttribute('aria-label', 'Answer');
+      }
+    }
+
     if (this.editor && this.props.autoFocus) {
       Promise.resolve().then(() => {
         if (this.editor) {
@@ -352,8 +451,11 @@ export class Editor extends React.Component {
 
     const differentCharacterProps = !isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps);
     const differentMathMlProps = !isEqual(nextProps.mathMlOptions, this.props.mathMlOptions);
+    const differentImageMaxDimensionsProps =
+      !isEqual(nextProps.maxImageWidth, this.props.maxImageWidth) ||
+      !isEqual(nextProps.maxImageHeight, this.props.maxImageHeight);
 
-    if (differentCharacterProps || differentMathMlProps) {
+    if (differentCharacterProps || differentMathMlProps || differentImageMaxDimensionsProps) {
       this.handlePlugins(nextProps);
     }
 
@@ -374,10 +476,9 @@ export class Editor extends React.Component {
     // 2. We're currently in 'isHtmlMode' and the editor value has been modified.
     if (
       this.state.isHtmlMode !== prevState.isHtmlMode ||
-      (this.state.isHtmlMode && !prevState.isEdited && this.state.isEdited)
+      (this.state.isHtmlMode && !prevState.isEditedInHtmlMode && this.state.isEditedInHtmlMode)
     ) {
       this.handlePlugins(this.props);
-      this.onEditingDone();
     }
 
     const zeroWidthEls = document.querySelectorAll('[data-slate-zero-width="z"]');
@@ -420,23 +521,88 @@ export class Editor extends React.Component {
   };
 
   onEditingDone = () => {
-    if (this.state.isHtmlMode) {
+    const { isHtmlMode, dialog, value, pendingImages } = this.state;
+
+    // Handling HTML mode and dialog state
+    if (isHtmlMode) {
+      // Early return if HTML mode is enabled
+      if (dialog?.open) return;
+
+      const currentValue = htmlToValue(value.document.text);
+      const previewText = this.renderHtmlPreviewContent();
+
+      this.openHtmlModeConfirmationDialog(currentValue, previewText);
       return;
     }
 
-    const { pendingImages } = this.state;
-
     if (pendingImages.length) {
+      // schedule image processing
       this.setState({ scheduled: true });
       return;
     }
 
+    // Finalizing editing
     log('[onEditingDone]');
     this.setState({ pendingImages: [], stashedValue: null, focusedNode: null });
     log('[onEditingDone] value: ', this.state.value);
     this.props.onChange(this.state.value, true);
   };
 
+  /**
+   * Renders the HTML preview content to be displayed inside the dialog.
+   * This content includes the edited HTML and a prompt for the user.
+   */
+  renderHtmlPreviewContent = () => {
+    const { classes } = this.props;
+    return (
+      <div ref={(ref) => (this.elementRef = ref)}>
+        <div>Preview of Edited Html:</div>
+        <PreviewPrompt defaultClassName={classes.previewText} prompt={this.state.value.document.text} />
+        <div>Would you like to save these changes ?</div>
+      </div>
+    );
+  };
+
+  /**
+   * Opens a confirmation dialog in HTML mode, displaying the preview of the current HTML content
+   * and offering options to save or continue editing.
+   */
+  openHtmlModeConfirmationDialog = (currentValue, previewText) => {
+    this.setState({
+      dialog: {
+        open: true,
+        title: 'Content Preview & Save',
+        text: previewText,
+        onConfirmText: 'Save changes',
+        onCloseText: 'Continue editing',
+        onConfirm: () => {
+          this.handleHtmlModeSaveConfirmation(currentValue);
+        },
+        onClose: this.htmlModeContinueEditing,
+      },
+    });
+  };
+
+  /**
+   * Handles the save confirmation action in HTML mode. This updates the value to the confirmed
+   * content, updates value on props, and exits the HTML mode.
+   * @param {string} currentValue - The confirmed value of the HTML content to save.
+   */
+  handleHtmlModeSaveConfirmation = (currentValue) => {
+    this.setState({ value: currentValue });
+    this.props.onChange(currentValue, true);
+    this.handleDialog(false);
+    this.toggleHtmlMode();
+  };
+
+  /**
+   * Closes the dialog in HTML mode and allows the user to continue editing the html content.
+   * This function is invoked when the user opts to not save the current changes.
+   */
+  htmlModeContinueEditing = () => {
+    this.handleDialog(false);
+  };
+
   /**
    * Remove onResize event listener
    */
@@ -472,17 +638,35 @@ export class Editor extends React.Component {
 
   onBlur = (event) => {
     log('[onBlur]');
-    const target = event.relatedTarget;
+    const relatedTarget = event.relatedTarget;
+    const toolbarElement = this.toolbarRef && relatedTarget?.closest(`[class*="${this.toolbarRef.className}"]`);
 
-    const node = target ? findNode(target, this.state.value) : null;
+    // Check if relatedTarget is a done button
+    const isRawDoneButton =
+      this.doneButtonRef && relatedTarget?.closest(`[class*="${this.doneButtonRef.current?.className}"]`);
+
+    // Skip onBlur handling if relatedTarget is a button from the KeyPad characters
+    this.skipBlurHandling = this.keypadInteractionDetected && relatedTarget !== null;
+
+    if (toolbarElement && !isRawDoneButton && !this.state.focusToolbar) {
+      this.setState({
+        focusToolbar: true,
+      });
+    }
+
+    const node = relatedTarget ? findNode(relatedTarget, this.state.value) : null;
 
     log('[onBlur] node: ', node);
 
     return new Promise((resolve) => {
-      this.setState(
-        { preBlurValue: this.state.value, focusedNode: !node ? null : node },
-        this.handleBlur.bind(this, resolve),
-      );
+      if (!this.skipBlurHandling) {
+        this.setKeypadInteraction(false);
+        this.setState(
+          { preBlurValue: this.state.value, focusedNode: !node ? null : node },
+          this.handleBlur.bind(this, resolve),
+        );
+      }
+
       this.props.onBlur(event);
     });
   };
@@ -519,12 +703,18 @@ export class Editor extends React.Component {
    *
    * Note: The use of promises has been causing issues with MathQuill
    * */
-  onFocus = () =>
+  onFocus = (event, change) =>
     new Promise((resolve) => {
       const editorDOM = document.querySelector(`[data-key="${this.state.value.document.key}"]`);
+      const isTouchDevice =
+        typeof window !== 'undefined' && ('ontouchstart' in window || navigator?.maxTouchPoints > 0);
 
       log('[onFocus]', document.activeElement);
 
+      if (this.keypadInteractionDetected && this.__TEMPORARY_CHANGE_DATA) {
+        this.__TEMPORARY_CHANGE_DATA = null;
+      }
+
       /**
        * This is a temporary hack - @see changeData below for some more information.
        */
@@ -534,7 +724,6 @@ export class Editor extends React.Component {
 
         if (domEl) {
           let change = this.state.value.change().setNodeByKey(key, { data });
-
           this.setState({ value: change.value }, () => {
             this.__TEMPORARY_CHANGE_DATA = null;
           });
@@ -555,11 +744,19 @@ export class Editor extends React.Component {
       this.stashValue();
       this.props.onFocus();
 
+      // Added for accessibility: Ensures the editor gains focus when tabbed to for improved keyboard navigation
+      const shouldFocusEditor = !this.keypadInteractionDetected && !isTouchDevice;
+
+      if (shouldFocusEditor) {
+        change?.focus();
+      }
+
       resolve();
     });
 
   stashValue = () => {
     log('[stashValue]');
+
     if (!this.state.stashedValue) {
       this.setState({ stashedValue: this.state.value });
     }
@@ -599,23 +796,32 @@ export class Editor extends React.Component {
 
   onChange = (change, done) => {
     log('[onChange]');
+    window.me = this;
 
     const { value } = change;
     const { charactersLimit } = this.props;
+    let limit = charactersLimit;
+    if (!limit || limit > MAX_CHARACTERS_LIMIT) {
+      limit = MAX_CHARACTERS_LIMIT;
+    }
 
-    if (value && value.document && value.document.text && value.document.text.length > charactersLimit) {
+    if (value && value.document && value.document.text && value.document.text.length > limit) {
       return;
     }
 
     // Mark the editor as edited when in HTML mode and its content has changed.
     // This status will later be used to decide whether to prompt a warning to the user when exiting HTML mode.
-    const isEdited = !this.state.isHtmlMode
+    const isEditedInHtmlMode = !this.state.isHtmlMode
       ? false
       : this.state.value.document.text !== value.document.text
       ? true
-      : this.state.isEdited;
+      : this.state.isEditedInHtmlMode;
+
+    if (isEditedInHtmlMode != this.state.isEditedInHtmlMode) {
+      this.handlePlugins(this.props);
+    }
 
-    this.setState({ value, isEdited }, () => {
+    this.setState({ value, isEditedInHtmlMode }, () => {
       log('[onChange], call done()');
 
       if (done) {
@@ -636,11 +842,19 @@ export class Editor extends React.Component {
     if (!v) {
       return;
     }
+    const calcRegex = /^calc\((.*)\)$/;
 
     if (typeof v === 'string') {
       if (v.endsWith('%')) {
         return undefined;
-      } else if (v.endsWith('px') || v.endsWith('vh') || v.endsWith('vw')) {
+      } else if (
+        v.endsWith('px') ||
+        v.endsWith('vh') ||
+        v.endsWith('vw') ||
+        v.endsWith('ch') ||
+        v.endsWith('em') ||
+        v.match(calcRegex)
+      ) {
         return v;
       } else {
         const value = parseInt(v, 10);
@@ -650,15 +864,15 @@ export class Editor extends React.Component {
     if (typeof v === 'number') {
       return `${v}px`;
     }
-
-    return;
   };
 
   buildSizeStyle() {
-    const { width, minHeight, height, maxHeight } = this.props;
+    const { minWidth, width, maxWidth, minHeight, height, maxHeight } = this.props;
 
     return {
       width: this.valueToSize(width),
+      minWidth: this.valueToSize(minWidth),
+      maxWidth: this.valueToSize(maxWidth),
       height: this.valueToSize(height),
       minHeight: this.valueToSize(minHeight),
       maxHeight: this.valueToSize(maxHeight),
@@ -696,7 +910,7 @@ export class Editor extends React.Component {
      */
 
     // Uncomment this line to see the bug described above.
-    // this.setState({changeData: {key, data}})
+    //    this.setState({changeData: {key, data}})
 
     this.__TEMPORARY_CHANGE_DATA = { key, data };
   };
@@ -783,7 +997,7 @@ export class Editor extends React.Component {
     const { editor } = props;
     const { document } = editor.value;
 
-    if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1) {
+    if (!editor.props.placeholder || document.text !== '' || document.nodes.size !== 1 || !document.isEmpty) {
       return false;
     }
 
@@ -812,10 +1026,16 @@ export class Editor extends React.Component {
       highlightShape,
       classes,
       className,
+      isEditor,
       placeholder,
       pluginProps,
       onKeyDown,
     } = this.props;
+    // We don't want to send customPlugins to slate.
+    // Not sure if they would do any harm, but I think it's better to not send them.
+    // We use custom plugins to be able to add custom buttons
+    // eslint-disable-next-line no-unused-vars
+    const { customPlugins, showParagraphs, separateParagraphs, ...otherPluginProps } = pluginProps || {};
 
     const { value, focusedNode, toolbarOpts, dialog, scheduled } = this.state;
 
@@ -831,7 +1051,12 @@ export class Editor extends React.Component {
     );
 
     return (
-      <div ref={(ref) => (this.wrapperRef = ref)} style={{ width: sizeStyle.width }} className={names}>
+      <div
+        ref={(ref) => (this.wrapperRef = ref)}
+        style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
+        className={names}
+        id={`editor-${value?.document?.key}`}
+      >
         {scheduled && <div className={classes.uploading}>Uploading image and then saving...</div>}
         <SlateEditor
           plugins={this.plugins}
@@ -846,7 +1071,11 @@ export class Editor extends React.Component {
               this.toolbarRef = r;
             }
           }}
+          doneButtonRef={this.doneButtonRef}
           value={value}
+          focusToolbar={this.state.focusToolbar}
+          onToolbarFocus={this.handleToolbarFocus}
+          onToolbarBlur={this.handleToolbarBlur}
           focus={this.focus}
           onKeyDown={onKeyDown}
           onChange={this.onChange}
@@ -863,7 +1092,9 @@ export class Editor extends React.Component {
           autoCorrect={spellCheck}
           className={classNames(
             {
-              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
+              [classes.noPadding]: toolbarOpts?.noPadding,
+              [classes.showParagraph]: showParagraphs && !showParagraphs.disabled,
+              [classes.separateParagraph]: separateParagraphs && !separateParagraphs.disabled,
             },
             classes.slateEditor,
           )}
@@ -872,7 +1103,7 @@ export class Editor extends React.Component {
             height: sizeStyle.height,
             maxHeight: sizeStyle.maxHeight,
           }}
-          pluginProps={pluginProps}
+          pluginProps={otherPluginProps}
           toolbarOpts={toolbarOpts}
           placeholder={placeholder}
           renderPlaceholder={this.renderPlaceholder}
@@ -884,6 +1115,8 @@ export class Editor extends React.Component {
           text={dialog.text}
           onClose={dialog.onClose}
           onConfirm={dialog.onConfirm}
+          onConfirmText={dialog.onConfirmText}
+          onCloseText={dialog.onCloseText}
         />
       </div>
     );
@@ -931,12 +1164,33 @@ const styles = {
       border: '1px solid #dfe2e5',
     },
   },
+  showParagraph: {
+    // a div that has a div after it
+    '& > div:has(+ div)::after': {
+      display: 'block',
+      content: '"¶"',
+      fontSize: '1em',
+      color: '#146EB3',
+    },
+  },
+  separateParagraph: {
+    // a div that has a div after it
+    '& > div:has(+ div)': {
+      marginBottom: '1em',
+    },
+  },
   toolbarOnTop: {
     marginTop: '45px',
   },
   noPadding: {
     padding: '0 !important',
   },
+  previewText: {
+    marginBottom: '36px',
+    marginTop: '6px',
+    padding: '20px',
+    backgroundColor: 'rgba(0,0,0,0.06)',
+  },
 };
 
 export default withStyles(styles)(Editor);