reactjs-tiptap-editor-pro 0.2.28 → 0.2.30

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

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+
+import deepEqual from 'deep-equal';
+
+import { ActionButton, Button, IconComponent, Input, Label, Popover, PopoverContent, PopoverTrigger, Switch } from '@/components';
+import {  SearchAndReplace } from '@/extensions/SearchAndReplace/SearchAndReplace';
+import { useLocale } from '@/locales';
+import { listenEvent } from '@/utils/customEvents/customEvents';
+import { EVENTS } from '@/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

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

package/src/extensions/Selection/Selection.ts

@@ -0,0 +1,32 @@
+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

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

package/src/extensions/SlashCommand/SlashCommand.ts

@@ -0,0 +1,255 @@
+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 '@/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

@@ -0,0 +1,180 @@
+import React, {
+  Fragment,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+
+import { IconComponent } from '@/components';
+import { cn } from '@/lib/utils';
+import { useLocale } from '@/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);