reactjs-tiptap-editor-pro 0.2.31 → 0.2.33

package/src/extensions/SearchAndReplace/components/SearchAndReplaceButton.tsx

@@ -1,190 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import deepEqual from 'deep-equal';
-
-import { ActionButton, Button, IconComponent, Input, Label, Popover, PopoverContent, PopoverTrigger, Switch } from 'reactjs-tiptap-editor-pro/components';
-import {  SearchAndReplace } from 'reactjs-tiptap-editor-pro/extensions/SearchAndReplace/SearchAndReplace';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-import { listenEvent } from 'reactjs-tiptap-editor-pro/utils/customEvents/customEvents';
-import { EVENTS } from 'reactjs-tiptap-editor-pro/utils/customEvents/events.constant';
-
-function SearchAndReplaceButton({ editor, ...props }: any) {
-  const { t } = useLocale();
-
-  const [currentIndex, setCurrentIndex] = useState(-1);
-  const [results, setResults] = useState([]);
-  const [searchValue, setSearchValue] = useState('');
-  const [replaceValue, setReplaceValue] = useState('');
-  const [visible, setVisible] = useState(false);
-  const [caseSensitive, setCaseSensitive] = useState(false);
-
-  useEffect(() => {
-    if (!visible) {
-      setSearchValue('');
-      setReplaceValue('');
-      setCurrentIndex(-1);
-      setResults([]);
-
-      editor.commands.setSearchTerm('');
-      editor.commands.setReplaceTerm('');
-    }
-  }, [editor, visible]);
-
-  useEffect(() => {
-    if (!visible)
-      return;
-    if (editor && editor.commands && editor.commands.setSearchTerm) {
-      editor.commands.setSearchTerm(searchValue);
-    }
-  }, [visible, searchValue, editor]);
-
-  useEffect(() => {
-    if (!visible)
-      return;
-    if (editor && editor.commands && editor.commands.setReplaceTerm) {
-      editor.commands.setReplaceTerm(replaceValue);
-    }
-  }, [visible, replaceValue, editor]);
-
-  useEffect(() => {
-    if (!editor)
-      return;
-
-    const searchExtension = editor.extensionManager.extensions.find((ext: any) => ext.name === SearchAndReplace.name);
-
-    if (!searchExtension)
-      return;
-
-    const listener = () => {
-      if (!visible)
-        return;
-
-      const currentIndex = searchExtension ? searchExtension.storage.currentIndex : -1;
-      const results = searchExtension ? searchExtension.storage.results : [];
-      setCurrentIndex(preIndex => (preIndex !== currentIndex ? currentIndex : preIndex));
-      setResults(prevResults => (deepEqual(prevResults, results) ? prevResults : results));
-    };
-
-    listenEvent(EVENTS.SEARCH_REPLCE, listener);
-
-    return () => {
-      if (!searchExtension)
-        return;
-      listenEvent(EVENTS.SEARCH_REPLCE, listener);
-    };
-  }, [visible, editor]);
-
-  return (
-    <Popover
-      onOpenChange={setVisible}
-      open={visible}
-    >
-      <PopoverTrigger
-        asChild
-        disabled={props?.disabled}
-      >
-        <ActionButton
-          disabled={props?.disabled}
-          isActive={props?.isActive}
-          tooltip={props?.tooltip}
-        >
-          <IconComponent name={props?.icon} />
-        </ActionButton>
-      </PopoverTrigger>
-
-      <PopoverContent
-        align="start"
-        className="w-full"
-        hideWhenDetached
-        side="bottom"
-      >
-
-        <div className="mb-[6px] flex items-center justify-between">
-          <Label>
-            {t('editor.search.dialog.text')}
-          </Label>
-
-          <span className="font-semibold">
-            {results.length > 0 ? `${currentIndex + 1}/${results.length}` : '0/0'}
-          </span>
-        </div>
-
-        <div className="mb-[10px] flex w-full max-w-sm items-center gap-1.5">
-          <Input
-            autoFocus
-            className="w-full"
-            onChange={e => setSearchValue(e.target.value)}
-            placeholder="Text"
-            required
-            type="text"
-            value={searchValue}
-          />
-
-          <Button className="flex-1"
-            disabled={results.length === 0}
-            onClick={editor.commands.goToPrevSearchResult}
-          >
-            <IconComponent name="ChevronUp" />
-          </Button>
-
-          <Button className="flex-1"
-            disabled={results.length === 0}
-            onClick={editor.commands.goToNextSearchResult}
-          >
-            <IconComponent name="ChevronDown" />
-          </Button>
-
-        </div>
-
-        <Label className="mb-[6px]">
-          {t('editor.replace.dialog.text')}
-        </Label>
-
-        <div className="mb-[5px] flex w-full max-w-sm items-center gap-1.5">
-          <div className="relative w-full max-w-sm items-center">
-            <Input
-              className="w-80"
-              onChange={e => setReplaceValue(e.target.value)}
-              placeholder="Text"
-              required
-              type="text"
-              value={replaceValue}
-            />
-          </div>
-        </div>
-
-        <div className="mb-[10px] flex items-center space-x-2">
-          <Switch
-            checked={caseSensitive}
-            onCheckedChange={(e: any) => {
-              setCaseSensitive(e);
-              editor.commands.setCaseSensitive(e);
-            }}
-          />
-
-          <Label>
-            {t('editor.replace.caseSensitive')}
-          </Label>
-        </div>
-
-        <div className="flex items-center gap-[10px]">
-          <Button className="flex-1"
-            disabled={results.length === 0}
-            onClick={editor.commands.replace}
-          >
-            {t('editor.replace.dialog.text')}
-          </Button>
-
-          <Button className="flex-1"
-            disabled={results.length === 0}
-            onClick={editor.commands.replaceAll}
-          >
-            {t('editor.replaceAll.dialog.text')}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export default SearchAndReplaceButton;

package/src/extensions/SearchAndReplace/index.ts

@@ -1 +0,0 @@
-export * from './SearchAndReplace';

package/src/extensions/Selection/Selection.ts

@@ -1,32 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Decoration, DecorationSet } from '@tiptap/pm/view';
-
-export const Selection = Extension.create({
-  name: 'selection',
-  addProseMirrorPlugins() {
-    const { editor } = this;
-    return [
-      new Plugin({
-        key: new PluginKey('selection'),
-        props: {
-          decorations(state) {
-            if (state.selection.empty) {
-              return null;
-            }
-            if (editor.isFocused === true) {
-              return null;
-            }
-            return DecorationSet.create(state.doc, [
-              Decoration.inline(state.selection.from, state.selection.to, {
-                class: 'selection',
-              }),
-            ]);
-          },
-        },
-      }),
-    ];
-  },
-});
-
-export default Selection;

package/src/extensions/Selection/index.ts

@@ -1 +0,0 @@
-export * from './Selection';

package/src/extensions/SlashCommand/SlashCommand.ts

@@ -1,255 +0,0 @@
-import type { Editor, Extensions, Range } from '@tiptap/core';
-import { Extension } from '@tiptap/core';
-import { PluginKey } from '@tiptap/pm/state';
-import { ReactRenderer } from '@tiptap/react';
-import type { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
-import Suggestion from '@tiptap/suggestion';
-import tippy from 'tippy.js';
-
-import CommandsList from 'reactjs-tiptap-editor-pro/extensions/SlashCommand/components/CommandsList';
-
-import { renderGroups } from './groups';
-import { type Group } from './types';
-
-export interface SlashCommandOptions {
-  renderGroupItem?: (extension: Extensions[number], groups:Group[]) => void
-}
-
-const extensionName = 'slashCommand';
-let popup: any;
-export const SlashCommand = Extension.create<SlashCommandOptions>({
-  name: extensionName,
-  priority: 200,
-  onCreate() {
-    popup = tippy('body', {
-      interactive: true,
-      trigger: 'manual',
-      placement: 'bottom-start',
-      theme: 'slash-command',
-      maxWidth: '16rem',
-      offset: [16, 8],
-      popperOptions: {
-        strategy: 'fixed',
-        modifiers: [
-          {
-            name: 'flip',
-            enabled: false,
-          },
-        ],
-      },
-    });
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        char: '/',
-        allowSpaces: true,
-        startOfLine: true,
-        pluginKey: new PluginKey(extensionName),
-        allow: ({ state, range }) => {
-          const $from = state.doc.resolve(range.from);
-          const isRootDepth = $from.depth === 1;
-          const isParagraph = $from.parent.type.name === 'paragraph';
-          const isStartOfNode = $from.parent.textContent?.charAt(0) === '/';
-          // TODO 行列内
-          const isInColumn = this.editor.isActive('column');
-          const afterContent = $from.parent.textContent?.slice(
-            Math.max(0, $from.parent.textContent?.indexOf('/')),
-          );
-          const isValidAfterContent = !afterContent?.endsWith('  ');
-
-          return (
-            ((isRootDepth && isParagraph && isStartOfNode)
-              || (isInColumn && isParagraph && isStartOfNode))
-            && isValidAfterContent
-          );
-        },
-        command: ({ editor, range, props }: { editor: Editor, range: Range, props: any }) => {
-          const { view } = editor;
-          props.action({ editor, range });
-          view.focus();
-        },
-        items: ({ query, editor }: { query: string, editor: Editor }) => {
-          // get options
-          // Filter commands
-          const groups = renderGroups(editor.extensionManager.extensions, this.options.renderGroupItem);
-          const withFilteredCommands = groups.map(group => ({
-            ...group,
-            commands: group.commands
-              .filter((item) => {
-                const labelNormalized = item.label.toLowerCase().trim();
-                const queryNormalized = query.toLowerCase().trim();
-
-                if (item.aliases) {
-                  const aliases = item.aliases.map(alias => alias.toLowerCase().trim());
-                  const labelMatch = labelNormalized.match(queryNormalized);
-                  const aliasMatch = aliases.some(alias => alias.match(queryNormalized));
-
-                  return labelMatch || aliasMatch;
-                }
-
-                return labelNormalized.match(queryNormalized);
-              })
-              .filter(command =>
-                command.shouldBeHidden ? !command.shouldBeHidden(this.editor) : true,
-              ),
-          }));
-          // Remove empty groups
-          const withoutEmptyGroups = withFilteredCommands.filter((group) => {
-            if (group.commands.length > 0) {
-              return true;
-            }
-
-            return false;
-          });
-          const withEnabledSettings = withoutEmptyGroups.map(group => ({
-            ...group,
-            commands: group.commands.map(command => ({
-              ...command,
-              isEnabled: true,
-            })),
-          }));
-
-          return withEnabledSettings;
-        },
-        render: () => {
-          let component: any;
-          let scrollHandler: (() => void) | null = null;
-          return {
-            onStart: (props: SuggestionProps) => {
-              component = new ReactRenderer(CommandsList, {
-                props,
-                editor: props.editor,
-              });
-              const { view } = props.editor;
-              // const editorNode = view.dom as HTMLElement;
-              const getReferenceClientRect = () => {
-                if (!props.clientRect) {
-                  return props.editor.storage[extensionName].rect;
-                }
-
-                const rect = props.clientRect();
-
-                if (!rect) {
-                  return props.editor.storage[extensionName].rect;
-                }
-
-                let yPos = rect.y;
-
-                if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
-                  const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40;
-                  yPos = rect.y - diff;
-                }
-
-                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
-                // const editorXOffset = editorNode.getBoundingClientRect().x;
-                return new DOMRect(rect.x, yPos, rect.width, rect.height);
-              };
-
-              scrollHandler = () => {
-                popup?.[0].setProps({
-                  getReferenceClientRect,
-                });
-              };
-
-              view.dom.parentElement?.addEventListener('scroll', scrollHandler);
-
-              popup?.[0].setProps({
-                getReferenceClientRect,
-                appendTo: () => document.body,
-                content: component.element,
-              });
-
-              popup?.[0].show();
-            },
-
-            onUpdate(props: SuggestionProps) {
-              component.updateProps(props);
-
-              const { view } = props.editor;
-
-              // const editorNode = view.dom as HTMLElement;
-
-              const getReferenceClientRect = () => {
-                if (!props.clientRect) {
-                  return props.editor.storage[extensionName].rect;
-                }
-
-                const rect = props.clientRect();
-
-                if (!rect) {
-                  return props.editor.storage[extensionName].rect;
-                }
-
-                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
-                return new DOMRect(rect.x, rect.y, rect.width, rect.height);
-              };
-
-              const scrollHandler = () => {
-                popup?.[0].setProps({
-                  getReferenceClientRect,
-                });
-              };
-
-              view.dom.parentElement?.addEventListener('scroll', scrollHandler);
-
-              props.editor.storage[extensionName].rect = props.clientRect
-                ? getReferenceClientRect()
-                : {
-                  width: 0,
-                  height: 0,
-                  left: 0,
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                };
-              popup?.[0].setProps({
-                getReferenceClientRect,
-              });
-            },
-
-            onKeyDown(props: SuggestionKeyDownProps) {
-              if (props.event.key === 'Escape') {
-                popup?.[0].hide();
-
-                return true;
-              }
-
-              if (!popup?.[0].state.isShown) {
-                popup?.[0].show();
-              }
-
-              return component.ref?.onKeyDown(props);
-            },
-
-            onExit(props) {
-              popup?.[0].hide();
-              if (scrollHandler) {
-                const { view } = props.editor;
-                view.dom.parentElement?.removeEventListener('scroll', scrollHandler);
-              }
-              component.destroy();
-            },
-          };
-        },
-      }),
-    ];
-  },
-
-  addStorage() {
-    return {
-      rect: {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-      },
-    };
-  },
-});
-
-export default SlashCommand;

package/src/extensions/SlashCommand/components/CommandsList.tsx

@@ -1,180 +0,0 @@
-import React, {
-  Fragment,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from 'react';
-
-import { IconComponent } from 'reactjs-tiptap-editor-pro/components';
-import { cn } from 'reactjs-tiptap-editor-pro/lib/utils';
-import { useLocale } from 'reactjs-tiptap-editor-pro/locales';
-
-function CommandsList(props: any, ref: any) {
-  // 选中的索引
-  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
-  const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
-  // 滚动ref
-  const scrollContainer = useRef<HTMLDivElement | null>(null);
-
-  const { t } = useLocale();
-
-  const activeItemRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  useImperativeHandle(ref, () => {
-    return {
-      onKeyDown,
-    };
-  });
-
-  useEffect(() => {
-    if (!scrollContainer.current) {
-      return;
-    }
-    const activeItemIndex = selectedGroupIndex * 1000 + selectedCommandIndex;
-    const activeItem = activeItemRefs.current[activeItemIndex];
-    if (activeItem) {
-      activeItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-      });
-    }
-  }, [selectedCommandIndex, selectedGroupIndex]);
-
-  function onKeyDown({ event }: any) {
-    if (event.key === 'ArrowUp') {
-      upHandler();
-      return true;
-    }
-
-    if (event.key === 'ArrowDown') {
-      downHandler();
-      return true;
-    }
-
-    if (event.key === 'Enter') {
-      enterHandler();
-      return true;
-    }
-
-    return false;
-  }
-
-  function upHandler() {
-    if (props.items.length === 0) {
-      return false;
-    }
-    let newCommandIndex = selectedCommandIndex - 1;
-    let newGroupIndex = selectedGroupIndex;
-
-    if (newCommandIndex < 0) {
-      newGroupIndex = selectedGroupIndex - 1;
-      newCommandIndex = props.items[newGroupIndex]?.commands.length - 1 || 0;
-    }
-
-    if (newGroupIndex < 0) {
-      newGroupIndex = props.items.length - 1;
-      newCommandIndex = props.items[newGroupIndex].commands.length - 1;
-    }
-
-    setSelectedCommandIndex(newCommandIndex);
-    setSelectedGroupIndex(newGroupIndex);
-  }
-
-  function downHandler() {
-    if (props.items.length === 0) {
-      return false;
-    }
-    const commands = props.items[selectedGroupIndex].commands;
-    let newCommandIndex = selectedCommandIndex + 1;
-    let newGroupIndex = selectedGroupIndex;
-
-    if (commands.length - 1 < newCommandIndex) {
-      newCommandIndex = 0;
-      newGroupIndex = selectedGroupIndex + 1;
-    }
-    if (props.items.length - 1 < newGroupIndex) {
-      newGroupIndex = 0;
-    }
-    setSelectedCommandIndex(newCommandIndex);
-    setSelectedGroupIndex(newGroupIndex);
-  }
-
-  function enterHandler() {
-    if (props.items.length === 0 || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
-      return false;
-    }
-
-    selectItem(selectedGroupIndex, selectedCommandIndex);
-  }
-
-  function selectItem(groupIndex: number, commandIndex: number) {
-    const command = props.items[groupIndex].commands[commandIndex];
-    props.command(command);
-  }
-
-  function createCommandClickHandler(groupIndex: number, commandIndex: number) {
-    selectItem(groupIndex, commandIndex);
-  }
-  function setActiveItemRef(groupIndex: number, commandIndex: number, el: any) {
-    activeItemRefs.current[groupIndex * 1000 + commandIndex] = el;
-  }
-
-  return (
-    <div
-      className="mb-8 max-h-[min(80vh,24rem)] flex-wrap overflow-auto rounded-lg !border !border-neutral-200 !bg-white p-1 !text-black shadow-sm dark:!border-neutral-800 dark:!bg-black"
-      ref={scrollContainer}
-    >
-      {props?.items?.length
-        ? (
-          <div className="grid min-w-48 grid-cols-1 gap-0.5">
-            {props?.items?.map((group: any, groupIndex: any) => {
-              return (
-                <Fragment key={`slash-${group.title}`}>
-                  <div className="col-[1/-1] mx-2 mt-2 select-none text-[0.65rem] font-semibold uppercase tracking-wider !text-neutral-500 first:mt-0.5">
-                    {group.title}
-                  </div>
-
-                  {group.commands.map((command: any, commandIndex: any) => {
-                    return (
-                      <button
-                        key={`command-${commandIndex}`}
-                        onClick={() => createCommandClickHandler(groupIndex, commandIndex)}
-                        ref={el => setActiveItemRef(groupIndex, commandIndex, el)}
-                        className={cn('flex items-center gap-3 px-2 py-1.5 text-sm !text-neutral-800 dark:!text-neutral-200 text-left w-full rounded-sm outline-none transition-colors !bg-transparent hover:!bg-accent ', {
-                          'slash-command-active': selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
-                        })}
-                      >
-                        {command.iconUrl && <img alt=""
-                          className="size-6"
-                          src={command.iconUrl}
-                        />}
-
-                        {command.iconName && (
-                          <IconComponent className="!mr-1 !text-lg"
-                            name={command.iconName}
-                          />
-                        )}
-
-                        {command.label}
-                      </button>
-                    );
-                  })}
-                </Fragment>
-              );
-            })}
-          </div>
-        )
-        : (
-          <div className="p-3">
-            <span className="text-xs text-gray-800 dark:text-gray-100">
-              {t('editor.slash.empty')}
-            </span>
-          </div>
-        )}
-    </div>
-  );
-}
-
-export default forwardRef(CommandsList);