@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/src/components/MenuBar.jsx

@@ -1,561 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import classNames from 'classnames';
-import { styled, useTheme } from '@mui/material/styles';
-import { NodeSelection } from 'prosemirror-state';
-
-import Bold from '@mui/icons-material/FormatBold';
-import Italic from '@mui/icons-material/FormatItalic';
-import Strikethrough from '@mui/icons-material/FormatStrikethrough';
-import Code from '@mui/icons-material/Code';
-import GridOn from '@mui/icons-material/GridOn';
-import BulletedListIcon from '@mui/icons-material/FormatListBulleted';
-import NumberedListIcon from '@mui/icons-material/FormatListNumbered';
-import Underline from '@mui/icons-material/FormatUnderlined';
-import Functions from '@mui/icons-material/Functions';
-import ImageIcon from '@mui/icons-material/Image';
-import Redo from '@mui/icons-material/Redo';
-import Undo from '@mui/icons-material/Undo';
-import FormatQuote from '@mui/icons-material/FormatQuote';
-import TheatersIcon from '@mui/icons-material/Theaters';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import BorderAll from '@mui/icons-material/BorderAll';
-import Delete from '@mui/icons-material/Delete';
-
-import { useEditorState } from '@tiptap/react';
-
-import { PIE_TOOLBAR__CLASS } from '../constants';
-import { ToolbarIcon } from './respArea/ToolbarIcon';
-import { spanishConfig, specialConfig } from './characters/characterUtils';
-import TextAlignIcon from './icons/TextAlign';
-import CSSIcon from './icons/CssIcon';
-import { AddColumn, AddRow, RemoveColumn, RemoveRow, RemoveTable } from './icons/TableIcons';
-
-import { CharacterIcon, CharacterPicker } from './CharacterPicker';
-import { DoneButton } from './common/done-button';
-
-const SuperscriptIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
-    <path
-      d="M22,7h-2v1h3v1h-4V7c0-0.55,0.45-1,1-1h2V5h-3V4h3c0.55,0,1,0.45,1,1v1C23,6.55,22.55,7,22,7z M5.88,20h2.66l3.4-5.42h0.12 l3.4,5.42h2.66l-4.65-7.27L17.81,6h-2.68l-3.07,4.99h-0.12L8.85,6H6.19l4.32,6.73L5.88,20z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-const SubscriptIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none">
-    <path
-      d="M22,18h-2v1h3v1h-4v-2c0-0.55,0.45-1,1-1h2v-1h-3v-1h3c0.55,0,1,0.45,1,1v1C23,17.55,22.55,18,22,18z M5.88,18h2.66 l3.4-5.42h0.12l3.4,5.42h2.66l-4.65-7.27L17.81,4h-2.68l-3.07,4.99h-0.12L8.85,4H6.19l4.32,6.73L5.88,18z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-const HeadingIcon = () => (
-  <svg
-    width="30"
-    height="28"
-    viewBox="0 0 30 28"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ width: '20px', height: '18px' }}
-  >
-    <path
-      d="M27 4V24H29C29.5 24 30 24.5 30 25V27C30 27.5625 29.5 28 29 28H19C18.4375 28 18 27.5625 18 27V25C18 24.5 18.4375 24 19 24H21V16H9V24H11C11.5 24 12 24.5 12 25V27C12 27.5625 11.5 28 11 28H1C0.4375 28 0 27.5625 0 27V25C0 24.5 0.4375 24 1 24H3V4H1C0.4375 4 0 3.5625 0 3V1C0 0.5 0.4375 0 1 0H11C11.5 0 12 0.5 12 1V3C12 3.5625 11.5 4 11 4H9V12H21V4H19C18.4375 4 18 3.5625 18 3V1C18 0.5 18.4375 0 19 0H29C29.5 0 30 0.5 30 1V3C30 3.5625 29.5 4 29 4H27Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-function MenuBar({
-  editor,
-  classes,
-  activePlugins,
-  toolbarOpts: toolOpts,
-  responseAreaProps,
-  onChange,
-  autoWidthToolbar,
-}) {
-  const [showPicker, setShowPicker] = useState(false);
-  const toolbarOpts = toolOpts ?? {};
-
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      const { selection } = ctx.editor?.state || {};
-
-      let currentNode;
-
-      if (!ctx.editor?.commandManager) {
-        return {};
-      }
-
-      if (selection instanceof NodeSelection) {
-        currentNode = selection.node; // the selected node
-      }
-
-      const hideDefaultToolbar =
-        ctx.editor?.isActive('math') ||
-        ctx.editor?.isActive('explicit_constructed_response') ||
-        ctx.editor?.isActive('imageUploadNode') ||
-        ctx.editor?.isActive('drag_in_the_blank');
-
-      const hasTextSelectionInTable = selection && selection.empty === false && ctx.editor.isActive('table');
-
-      return {
-        currentNode,
-        hideDefaultToolbar,
-        hasTextSelectionInTable,
-        isFocused: ctx.editor?.isFocused,
-        toolbarOpened: ctx.editor?._toolbarOpened ?? false,
-        isBold: ctx.editor.isActive('bold') ?? false,
-        canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
-        isTable: ctx.editor.isActive('table') ?? false,
-        tableHasBorder: ctx.editor.getAttributes('table')?.border === '1' ?? false,
-        canTable: ctx.editor.can().chain().insertTable().run() ?? false,
-        isItalic: ctx.editor.isActive('italic') ?? false,
-        canItalic: ctx.editor.can().chain().toggleItalic().run() ?? false,
-        isStrike: ctx.editor.isActive('strike') ?? false,
-        canStrike: ctx.editor.can().chain().toggleStrike().run() ?? false,
-        isCode: ctx.editor.isActive('code') ?? false,
-        canCode: ctx.editor.can().chain().toggleCode().run() ?? false,
-        canClearMarks: ctx.editor.can().chain().unsetAllMarks().run() ?? false,
-        isUnderline: ctx.editor.isActive('underline') ?? false,
-        isSubScript: ctx.editor.isActive('subscript') ?? false,
-        isSuperScript: ctx.editor.isActive('superscript') ?? false,
-        isParagraph: ctx.editor.isActive('paragraph') ?? false,
-        isHeading1: ctx.editor.isActive('heading', { level: 1 }) ?? false,
-        isHeading2: ctx.editor.isActive('heading', { level: 2 }) ?? false,
-        isHeading3: ctx.editor.isActive('heading', { level: 3 }) ?? false,
-        isHeadingParagraph: ctx.editor.isActive('headingParagraph') ?? false,
-        isHeading4: ctx.editor.isActive('heading', { level: 4 }) ?? false,
-        isHeading5: ctx.editor.isActive('heading', { level: 5 }) ?? false,
-        isHeading6: ctx.editor.isActive('heading', { level: 6 }) ?? false,
-        isBulletList: ctx.editor.isActive('bulletList') ?? false,
-        isOrderedList: ctx.editor.isActive('orderedList') ?? false,
-        isCodeBlock: ctx.editor.isActive('codeBlock') ?? false,
-        isBlockquote: ctx.editor.isActive('blockquote') ?? false,
-        canUndo: ctx.editor.can().chain().undo().run() ?? false,
-        canRedo: ctx.editor.can().chain().redo().run() ?? false,
-      };
-    },
-  });
-
-  const hasDoneButton = false;
-  const autoWidth = !!autoWidthToolbar;
-
-  const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
-    [classes.toolbarWithNoDone]: !hasDoneButton,
-    [classes.toolbarTop]: toolbarOpts.position === 'top',
-    [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-    [classes.focused]:
-      toolbarOpts.alwaysVisible ||
-      (editorState.isFocused && !editorState.toolbarOpened && !editorState.hideDefaultToolbar),
-    [classes.autoWidth]: autoWidth,
-    [classes.fullWidth]: !autoWidth,
-    [classes.hidden]: toolbarOpts.isHidden === true,
-  });
-
-  const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
-
-  const handleMouseDown = (e) => {
-    e.preventDefault();
-  };
-
-  const toolbarButtons = useMemo(
-    () => [
-      {
-        icon: <GridOn />,
-        onClick: (editor) => editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: false }).run(),
-        hidden: (state) => !activePlugins?.includes('table') || state.isTable,
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <AddRow />,
-        onClick: (editor) => editor.chain().focus().addRowAfter().run(),
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <RemoveRow />,
-        onClick: (editor) => editor.chain().focus().deleteRow().run(),
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <AddColumn />,
-        onClick: (editor) => editor.chain().focus().addColumnAfter().run(),
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <RemoveColumn />,
-        onClick: (editor) => editor.chain().focus().deleteColumn().run(),
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <RemoveTable />,
-        onClick: (editor) => editor.chain().focus().deleteTable().run(),
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.isTable,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <BorderAll />,
-        onClick: (editor) => {
-          const tableAttrs = editor.getAttributes('table');
-
-          const update = {
-            ...tableAttrs,
-            border: tableAttrs.border !== '0' ? '0' : '1',
-          };
-
-          editor.commands.updateAttributes('table', update);
-        },
-        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
-        isActive: (state) => state.tableHasBorder,
-        isDisabled: (state) => !state.canTable,
-      },
-      {
-        icon: <Bold />,
-        onClick: (editor) => editor.chain().focus().toggleBold().run(),
-        hidden: () => !activePlugins?.includes('bold'),
-        isActive: (state) => state.isBold,
-        isDisabled: (state) => !state.canBold,
-      },
-      {
-        icon: <Italic />,
-        onClick: (editor) => editor.chain().focus().toggleItalic().run(),
-        hidden: () => !activePlugins?.includes('italic'),
-        isActive: (state) => state.isItalic,
-        isDisabled: (state) => !state.canItalic,
-      },
-      {
-        icon: <Strikethrough />,
-        onClick: (editor) => editor.chain().focus().toggleStrike().run(),
-        hidden: () => !activePlugins?.includes('strikethrough'),
-        isActive: (state) => state.isStrike,
-        isDisabled: (state) => !state.canStrike,
-      },
-      {
-        icon: <Code />,
-        onClick: (editor) => editor.chain().focus().toggleCode().run(),
-        hidden: () => !activePlugins?.includes('code'),
-        isActive: (state) => state.isCode,
-        isDisabled: (state) => !state.canCode,
-      },
-      {
-        icon: <Underline />,
-        onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
-        hidden: () => !activePlugins?.includes('underline'),
-        isActive: (state) => state.isUnderline,
-      },
-      {
-        icon: <SubscriptIcon />,
-        onClick: (editor) => editor.chain().focus().toggleSubscript().run(),
-        hidden: () => !activePlugins?.includes('subscript'),
-        isActive: (state) => state.isSubScript,
-      },
-      {
-        icon: <SuperscriptIcon />,
-        onClick: (editor) => editor.chain().focus().toggleSuperscript().run(),
-        hidden: () => !activePlugins?.includes('superscript'),
-        isActive: (state) => state.isSuperScript,
-      },
-      {
-        icon: <ImageIcon />,
-        hidden: () => !activePlugins?.includes('image'),
-        onClick: (editor) => editor.chain().focus().setImageUploadNode().run(),
-      },
-      {
-        icon: <TheatersIcon />,
-        hidden: () => !activePlugins?.includes('video'),
-        onClick: (editor) => editor.chain().focus().insertMedia({ type: 'video' }).run(),
-      },
-      {
-        icon: <VolumeUpIcon />,
-        hidden: () => !activePlugins?.includes('audio'),
-        onClick: (editor) => editor.chain().focus().insertMedia({ type: 'audio', tag: 'audio' }).run(),
-      },
-      {
-        icon: <CSSIcon />,
-        hidden: () => !activePlugins?.includes('css'),
-        onClick: (editor) => editor.commands.openCSSClassDialog(),
-      },
-      {
-        icon: <FormatQuote />,
-        hidden: () => !activePlugins?.includes('blockquote'),
-        onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
-        isActive: (state) => state.isBlockquote,
-      },
-      {
-        icon: <HeadingIcon />,
-        hidden: () => !activePlugins?.includes('h3'),
-        onClick: (editor) => editor.chain().focus().toggleHeadingParagraph().run(),
-        isActive: (state) => state.isHeadingParagraph,
-      },
-      {
-        icon: <Functions />,
-        hidden: () => !activePlugins?.includes('math'),
-        onClick: (editor) => editor.chain().focus().insertMath('').run(),
-      },
-      {
-        icon: <CharacterIcon letter="ñ" />,
-        hidden: () => !activePlugins?.includes('languageCharacters'),
-        onClick: () => setShowPicker(spanishConfig),
-      },
-      {
-        icon: <CharacterIcon letter="€" />,
-        hidden: () => activePlugins?.filter((p) => p === 'languageCharacters').length !== 2,
-        onClick: () => setShowPicker(specialConfig),
-      },
-      {
-        icon: <TextAlignIcon editor={editor} />,
-        hidden: () => !activePlugins?.includes('text-align'),
-        onClick: () => {},
-      },
-      {
-        icon: <BulletedListIcon />,
-        hidden: () => !activePlugins?.includes('bulleted-list'),
-        onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
-        isActive: (state) => state.isBulletList,
-      },
-      {
-        icon: <NumberedListIcon />,
-        hidden: () => !activePlugins?.includes('numbered-list'),
-        onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
-        isActive: (state) => state.isOrderedList,
-      },
-      {
-        icon: <Undo />,
-        hidden: () => !activePlugins?.includes('undo'),
-        onClick: (editor) => editor.chain().focus().undo().run(),
-        isDisabled: (state) => !state.canUndo,
-      },
-      {
-        icon: <Redo />,
-        hidden: () => !activePlugins?.includes('redo'),
-        onClick: (editor) => editor.chain().focus().redo().run(),
-        isDisabled: (state) => !state.canRedo,
-      },
-    ],
-    [activePlugins, editor],
-  );
-
-  const isDragInTheBlankSelected =
-    editorState.hideDefaultToolbar && editorState.currentNode?.type?.name === 'drag_in_the_blank';
-
-  return (
-    <div className={names} style={{ ...customStyles }} onMouseDown={handleMouseDown}>
-      {isDragInTheBlankSelected && (
-        <div className={classes.defaultToolbar} tabIndex="1">
-          <div className={classes.buttonsContainer}>
-            <button
-              type="button"
-              className={classes.button}
-              onClick={(e) => {
-                e.preventDefault();
-                editor.chain().focus().deleteSelection().run();
-                onChange?.(editor.getHTML());
-              }}
-              aria-label="Delete response area"
-            >
-              <Delete />
-            </button>
-          </div>
-        </div>
-      )}
-      {!editorState.hideDefaultToolbar && (
-        <div className={classes.defaultToolbar} tabIndex="1">
-          <div className={classes.buttonsContainer}>
-            {toolbarButtons
-              .filter((btn) => !btn.hidden?.(editorState))
-              .map((btn, index) => {
-                const disabled = btn.isDisabled?.(editorState);
-                const active = btn.isActive?.(editorState);
-
-                return (
-                  <button
-                    key={index}
-                    disabled={disabled}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      btn.onClick(editor);
-                    }}
-                    className={classNames(classes.button, { [classes.active]: active })}
-                  >
-                    {btn.icon}
-                  </button>
-                );
-              })}
-          </div>
-          {activePlugins?.includes('responseArea') && (
-            <button
-              onClick={() => {
-                editor.chain().focus().insertResponseArea(responseAreaProps.type).run();
-              }}
-              className={classes.button}
-            >
-              <ToolbarIcon />
-            </button>
-          )}
-
-          {toolbarOpts.showDone && (
-            <DoneButton
-              onClick={() => {
-                onChange?.(editor.getHTML());
-                editor.commands.blur();
-              }}
-            />
-          )}
-        </div>
-      )}
-      {showPicker && (
-        <CharacterPicker
-          editor={editor}
-          opts={{
-            ...showPicker,
-            renderPopOver: (ev, ch) => console.log('Show popover', ch),
-            closePopOver: () => console.log('Close popover'),
-          }}
-          onClose={() => setShowPicker(false)}
-        />
-      )}
-    </div>
-  );
-}
-
-// Wrapper component that provides classes object using styled API
-const StyledMenuBar = (props) => {
-  const theme = useTheme();
-
-  const classes = {
-    defaultToolbar: 'defaultToolbar',
-    buttonsContainer: 'buttonsContainer',
-    button: 'toolbarButton',
-    active: 'active',
-    disabled: 'disabled',
-    isActive: 'isActive',
-    toolbar: 'toolbar',
-    toolbarWithNoDone: 'toolbarWithNoDone',
-    toolbarTop: 'toolbarTop',
-    toolbarRight: 'toolbarRight',
-    fullWidth: 'fullWidth',
-    hidden: 'hidden',
-    autoWidth: 'autoWidth',
-    focused: 'focused',
-    iconRoot: 'iconRoot',
-    label: 'label',
-    shared: 'shared',
-  };
-
-  return (
-    <StyledMenuBarRoot>
-      <MenuBar {...props} classes={classes} />
-    </StyledMenuBarRoot>
-  );
-};
-
-const StyledMenuBarRoot = styled('div')(({ theme }) => ({
-  '& .defaultToolbar': {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-  },
-  '& .buttonsContainer': {
-    alignItems: 'center',
-    display: 'flex',
-    width: '100%',
-  },
-  '& .toolbarButton': {
-    color: 'grey',
-    display: 'inline-flex',
-    padding: '2px',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
-    '& svg': {
-      width: '24px',
-      height: '24px',
-    },
-    '&:hover': {
-      color: 'black',
-    },
-    '&:focus': {
-      outline: `2px solid ${theme.palette.grey[700]}`,
-    },
-  },
-  '& .active': {
-    color: 'black',
-  },
-  '& .disabled': {
-    opacity: 0.7,
-    cursor: 'not-allowed',
-    '& :hover': {
-      color: 'grey',
-    },
-  },
-  '& .isActive': {
-    background: 'var(--purple)',
-    color: 'var(--white)',
-  },
-  '& .toolbar': {
-    position: 'absolute',
-    zIndex: 20,
-    cursor: 'pointer',
-    justifyContent: 'space-between',
-    background: 'var(--editable-html-toolbar-bg, #efefef)',
-    minWidth: '280px',
-    margin: '5px 0 0 0',
-    padding: '2px',
-    boxShadow:
-      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-    boxSizing: 'border-box',
-    display: 'flex',
-    opacity: 0,
-    pointerEvents: 'none',
-  },
-  '& .toolbarWithNoDone': {
-    minWidth: '265px',
-  },
-  '& .toolbarTop': {
-    top: '-45px',
-  },
-  '& .toolbarRight': {
-    right: 0,
-  },
-  '& .fullWidth': {
-    width: '100%',
-  },
-  '& .hidden': {
-    visibility: 'hidden',
-  },
-  '& .autoWidth': {
-    width: 'auto',
-  },
-  '& .focused': {
-    opacity: 1,
-    pointerEvents: 'auto',
-  },
-  '& .iconRoot': {
-    width: '28px',
-    height: '28px',
-    padding: '4px',
-    verticalAlign: 'top',
-  },
-  '& .label': {
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-  },
-  '& .shared': {
-    display: 'flex',
-  },
-}));
-
-export default StyledMenuBar;