@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

package/src/components/EditableHtml.jsx

@@ -0,0 +1,440 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash-es/debounce';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { styled } from '@mui/material/styles';
+import StarterKit from '@tiptap/starter-kit';
+import { TextStyleKit } from '@tiptap/extension-text-style';
+import { CharacterCount } from '@tiptap/extension-character-count';
+import SuperScript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import { normalizeInitialMarkup } from '../utils/helper';
+
+import ExtendedTable from '../extensions/extended-table';
+import { ExtendedTableCell, ExtendedTableHeader } from '../extensions/extended-table-cell';
+import { DivNode } from '../extensions/div-node';
+import { EnsureEmptyRootIsDiv } from '../extensions/ensure-empty-root-div';
+import { EnsureListItemContentIsDiv } from '../extensions/ensure-list-item-content-is-div';
+import { TableRow } from '@tiptap/extension-table-row';
+import {
+  DragInTheBlankNode,
+  ExplicitConstructedResponseNode,
+  InlineDropdownNode,
+  MathTemplatedNode,
+  ResponseAreaExtension,
+} from '../extensions/responseArea';
+import { MathNode } from '../extensions/math';
+import { ImageUploadNode } from '../extensions/image';
+import { Media } from '../extensions/media';
+import { CSSMark } from '../extensions/css';
+import { ExtendedListItem } from '../extensions/extended-list-item';
+import { HeadingParagraph } from '../extensions/heading-paragraph';
+
+import EditorContainer from './TiptapContainer';
+import { valueToSize } from '../utils/size';
+import { buildExtensions, PLUGINS_MAP } from '../extensions';
+
+const defaultToolbarOpts = {
+  position: 'bottom',
+  alignment: 'left',
+  alwaysVisible: false,
+  showDone: true,
+  doneOn: 'blur',
+};
+
+const defaultResponseAreaProps = {
+  options: {},
+  respAreaToolbar: () => {},
+  onHandleAreaChange: () => {},
+};
+
+const DEFAULT_ACTIVE_PLUGINS = [
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'code',
+  'bulleted-list',
+  'numbered-list',
+  'image',
+  'math',
+  'languageCharacters',
+  'text-align',
+  'table',
+  'video',
+  'audio',
+  'responseArea',
+  'superscript',
+  'subscript',
+  'css',
+  'h3',
+  'undo',
+  'redo',
+];
+
+const cssVariables = {
+  '--white': '#fff',
+  '--black': '#2e2b29',
+  '--black-contrast': '#110f0e',
+  '--gray-1': 'rgba(61, 37, 20, .05)',
+  '--gray-2': 'rgba(61, 37, 20, .08)',
+  '--gray-3': 'rgba(61, 37, 20, .12)',
+  '--gray-4': 'rgba(53, 38, 28, .3)',
+  '--gray-5': 'rgba(28, 25, 23, .6)',
+  '--green': '#22c55e',
+  '--purple': '#6a00f5',
+  '--purple-contrast': '#5800cc',
+  '--purple-light': 'rgba(88, 5, 255, .05)',
+  '--yellow-contrast': '#facc15',
+  '--yellow': 'rgba(250, 204, 21, .4)',
+  '--yellow-light': '#fffae5',
+  '--red': '#ff5c33',
+  '--red-light': '#ffebe5',
+  '--shadow': `0px 12px 33px 0px rgba(0, 0, 0, .06),
+               0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)`,
+};
+
+export const EditableHtml = (props) => {
+  const { showParagraphs, separateParagraphs } = props.pluginProps || {};
+  const [pendingImages, setPendingImages] = useState([]);
+  const [scheduled, setScheduled] = useState(false);
+  const { toolbarOpts } = props;
+
+  const removePendingImage = useCallback(
+    (imagePos) => {
+      setPendingImages((prev) => {
+        const next = prev.filter((img) => img.pos !== imagePos);
+        if (next.length === 0) {
+          setScheduled(false);
+        }
+        return next;
+      });
+    },
+    [setPendingImages],
+  );
+
+  const toolbarOptsToUse = {
+    ...defaultToolbarOpts,
+    ...toolbarOpts,
+  };
+
+  const activePluginsToUse = useMemo(() => {
+    let { customPlugins, ...otherPluginProps } = props.pluginProps || {};
+
+    customPlugins = customPlugins || [];
+
+    const filteredActivePlugins = (props.activePlugins || DEFAULT_ACTIVE_PLUGINS)?.filter((pluginName) => {
+      const nameToUse = PLUGINS_MAP[pluginName] || pluginName;
+      const pluginInfo = otherPluginProps[nameToUse] || {};
+
+      return !pluginInfo || !pluginInfo.disabled;
+    });
+
+    return buildExtensions(filteredActivePlugins, customPlugins, {
+      math: {},
+      textAlign: props.textAlign,
+      html: {},
+      extraCSSRules: props.extraCSSRules || {},
+      image: {
+        ...props.imageSupport,
+      },
+      toolbar: {},
+      table: {},
+      responseArea: {
+        type: props.responseAreaProps?.type,
+      },
+      languageCharacters: props.languageCharactersProps,
+      keyPadCharacterRef: {},
+      setKeypadInteraction: {},
+      media: {},
+    });
+  }, [props]);
+
+  const extensions = [
+    TextAlign.configure({
+      types: ['heading', 'paragraph', 'div', 'headingParagraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
+      alignments: ['left', 'right', 'center', 'justify'],
+    }),
+    TextStyleKit,
+    CharacterCount.configure({
+      limit: props.charactersLimit || 1000000,
+    }),
+    StarterKit.configure({
+      trailingNode: {
+        node: 'paragraph',
+        notAfter: ['paragraph', 'div'],
+      },
+    }),
+    ExtendedListItem,
+    DivNode,
+    HeadingParagraph,
+    EnsureEmptyRootIsDiv,
+    EnsureListItemContentIsDiv,
+    Placeholder.configure({
+      placeholder: props.placeholder,
+      // show placeholder even when editor is focused
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: false, // show on all empty nodes, not only the current one
+      includeChildren: true,
+    }),
+    ExtendedTable,
+    TableRow,
+    ExtendedTableHeader,
+    ExtendedTableCell,
+    ResponseAreaExtension.configure(props.responseAreaProps),
+    ExplicitConstructedResponseNode.configure(props.responseAreaProps),
+    DragInTheBlankNode.configure(props.responseAreaProps),
+    InlineDropdownNode.configure(props.responseAreaProps),
+    MathTemplatedNode.configure(props.responseAreaProps),
+    MathNode.configure({
+      toolbarOpts: toolbarOptsToUse,
+      math: props.pluginProps?.math || {},
+    }),
+    SubScript,
+    SuperScript,
+    Image,
+    ImageUploadNode.configure({
+      toolbarOpts: toolbarOptsToUse,
+      imageHandling: {
+        disableImageAlignmentButtons: props.disableImageAlignmentButtons,
+        onDone: (editor) => props.onDone?.(editor.getHTML()),
+        onDelete:
+          props.imageSupport &&
+          props.imageSupport.delete &&
+          ((node) => {
+            const { src } = node.attrs;
+
+            props.imageSupport.delete(src, (e) => {
+              removePendingImage(node.pos);
+            });
+          }),
+        insertImageRequested:
+          props.imageSupport &&
+          ((editor, imageInfo, getHandler) => {
+            const [addedImage, pos] = imageInfo;
+
+            const onFinish = (result) => {
+              let cb;
+
+              if (scheduled && result) {
+                // finish editing only on success
+                cb = props.onChange;
+              }
+
+              removePendingImage(pos);
+              cb?.(editor.getHTML());
+            };
+
+            const callback = () => {
+              /**
+               * The handler is the object through which the outer context
+               * communicates file upload events like: fileChosen, cancel, progress
+               */
+              const handler = getHandler(onFinish);
+
+              // If the user closes the file picker without choosing a file, the window regains
+              // focus while _insertingImage is still true — drop the stale pending entry.
+              const focusHandler = debounce(() => {
+                const detach = () => window.removeEventListener('focus', focusHandler);
+
+                if (!editor._insertingImage) {
+                  detach();
+                  return;
+                }
+
+                removePendingImage(pos);
+                editor._insertingImage = false;
+                detach();
+              }, 500);
+
+              window.addEventListener('focus', focusHandler);
+
+              props.imageSupport.add(handler);
+            };
+
+            editor._insertingImage = true;
+            setPendingImages((prev) => [...prev, addedImage]);
+            callback();
+          }),
+        maxImageWidth: props.maxImageWidth,
+        maxImageHeight: props.maxImageHeight,
+      },
+      limit: 3,
+    }),
+    Media.configure({
+      uploadSoundSupport: props.uploadSoundSupport,
+    }),
+    CSSMark.configure({
+      extraCSSRules: props.extraCSSRules,
+    }),
+  ];
+
+  const editor = useEditor(
+    {
+      extensions,
+      immediatelyRender: false,
+      editorProps: {
+        handleKeyDown(view, event) {
+          if (props.onKeyDown) {
+            return props.onKeyDown(event);
+          }
+
+          // Return false to let default behavior continue
+          return false;
+        },
+      },
+      editable: !props.disabled,
+      content: normalizeInitialMarkup(props.markup),
+      onUpdate: ({ editor, transaction }) => {
+        if (transaction.isDone) {
+          props.onChange?.(editor.getHTML());
+        }
+      },
+      onBlur: ({ editor }) => {
+        const otherToolbarOpened =
+          editor._insertingImage ||
+          editor._toolbarOpened ||
+          editor.isActive('inline_dropdown') ||
+          editor.isActive('explicit_constructed_response');
+
+        if (otherToolbarOpened || !editor.schema) {
+          return;
+        }
+
+        const html = editor.getHTML();
+
+        if (props.markup !== html) {
+          props.onChange?.(html);
+        }
+
+        if (toolbarOptsToUse.doneOn === 'blur') {
+          props.onDone?.(html);
+        }
+      },
+    },
+    [props.charactersLimit],
+  );
+
+  useEffect(() => {
+    if (props.editorRef) {
+      props.editorRef(editor);
+    }
+  }, [props.editorRef, editor]);
+
+  useEffect(() => {
+    editor?.setEditable(!props.disabled);
+  }, [props.disabled, editor]);
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    const nextMarkup = normalizeInitialMarkup(props.markup);
+
+    if (nextMarkup !== editor.getHTML()) {
+      editor.commands.setContent(nextMarkup, false);
+    }
+  }, [props.markup, editor]);
+
+  useEffect(() => {
+    Object.entries(cssVariables).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+  }, []);
+
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => ({
+      isFocused: ctx.editor?.isFocused,
+    }),
+  });
+
+  const sizeStyle = useMemo(() => {
+    const { minWidth, width, maxWidth, minHeight, height, maxHeight } = props;
+
+    return {
+      width: valueToSize(width),
+      minWidth: valueToSize(minWidth),
+      maxWidth: valueToSize(maxWidth),
+      height: valueToSize(height),
+      minHeight: valueToSize(minHeight),
+      maxHeight: valueToSize(maxHeight),
+    };
+  }, [props]);
+
+  return (
+    <EditorContainer
+      {...{
+        ...props,
+        activePlugins: activePluginsToUse,
+        toolbarOpts: toolbarOptsToUse,
+      }}
+      editorState={editorState}
+      editor={editor}
+    >
+      {editor && (
+        <StyledEditorContent
+          style={{
+            minHeight: sizeStyle.minHeight,
+            height: sizeStyle.height,
+            maxHeight: sizeStyle.maxHeight,
+          }}
+          showParagraph={showParagraphs && !showParagraphs.disabled}
+          separateParagraph={separateParagraphs && !separateParagraphs.disabled}
+          editor={editor}
+        />
+      )}
+    </EditorContainer>
+  );
+};
+
+const StyledEditorContent = styled(EditorContent, {
+  shouldForwardProp: (prop) => !['showParagraph', 'separateParagraph'].includes(prop),
+})(({ showParagraph, separateParagraph }) => ({
+  display: 'flex',
+  outline: 'none !important',
+  '& .ProseMirror': {
+    flex: 1,
+    padding: '5px',
+    maxHeight: '500px',
+    outline: 'none !important',
+    position: 'initial',
+
+    // reset default margins for all block paragraphs/divs in the editor
+    '& > p, & > div': {
+      margin: '0',
+    },
+
+    // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
+    '& p.is-editor-empty, & div.is-editor-empty': {
+      position: 'relative',
+    },
+    '& p.is-editor-empty::before, & div.is-editor-empty::before': {
+      content: 'attr(data-placeholder)',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      color: '#9CA3AF',
+      pointerEvents: 'none',
+      whiteSpace: 'pre-wrap',
+    },
+
+    ...(showParagraph && {
+      '& > p:has(+ p)::after, & > div:has(+ div)::after': {
+        display: 'block',
+        content: '"¶"',
+        fontSize: '1em',
+        color: '#146EB3',
+      },
+    }),
+    ...(separateParagraph && {
+      '& > p:has(+ p)': {
+        marginBottom: '1em',
+      },
+    }),
+  },
+}));
+
+export default EditableHtml;