@meta-1/editor 0.0.27

package/src/editor/extension/trailing-node/trailing-node.ts

@@ -0,0 +1,70 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+// @ts-expect-error
+function nodeEqualsType({ types, node }) {
+  return (Array.isArray(types) && types.includes(node.type)) || node.type === types;
+}
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+  node: string;
+  notAfter: string[];
+}
+
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+  name: "trailingNode",
+
+  addOptions() {
+    return {
+      node: "paragraph",
+      notAfter: ["paragraph"],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    const disabledNodes = Object.entries(this.editor.schema.nodes)
+      .map(([, value]) => value)
+      .filter((node) => this.options.notAfter.includes(node.name));
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state;
+          const shouldInsertNodeAtEnd = plugin.getState(state);
+          const endPosition = doc.content.size;
+          const type = schema.nodes[this.options.node];
+
+          if (!shouldInsertNodeAtEnd) {
+            return;
+          }
+
+          return tr.insert(endPosition, type.create());
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild;
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value;
+            }
+
+            const lastNode = tr.doc.lastChild;
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/editor/extension/unique-id/index.ts

@@ -0,0 +1 @@
+export { UniqueId } from "./uniqueId";

package/src/editor/extension/unique-id/uniqueId.ts

@@ -0,0 +1,123 @@
+import {
+  combineTransactionSteps,
+  Extension,
+  findChildrenInRange,
+  findDuplicates,
+  getChangedRanges,
+} from "@tiptap/core";
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { nanoid } from "nanoid";
+
+export interface UniqueIdOptions {
+  attributeName: string;
+  types: string[];
+  generateID: () => string;
+  injectNodeName: boolean;
+}
+
+const pluginKey = new PluginKey("uniqueId");
+
+export const UniqueId = Extension.create<UniqueIdOptions>({
+  name: "uniqueId",
+  addOptions() {
+    return {
+      attributeName: "id",
+      types: ["paragraph"],
+      generateID: nanoid,
+      injectNodeName: true,
+    };
+  },
+  addGlobalAttributes() {
+    const { attributeName, types } = this.options;
+
+    return [
+      {
+        types,
+        attributes: {
+          [attributeName!]: {
+            default: null,
+            rendered: true,
+            isRequired: true,
+            keepOnSplit: false,
+            parseHTML: (element) => element.getAttribute(`data-${attributeName}`),
+            renderHTML: (attributes) => {
+              return {
+                [`data-${attributeName}`]: attributes[attributeName!],
+              };
+            },
+          },
+        },
+      },
+      {
+        types: this.options.injectNodeName ? types : [],
+        attributes: {
+          "data-node-name": {
+            default: null,
+            rendered: true,
+            isRequired: true,
+            keepOnSplit: false,
+            parseHTML: (element) => element.getAttribute("data-node-name"),
+            renderHTML: (attributes) => {
+              return {
+                "data-node-name": attributes["data-node-name"],
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+  onCreate() {
+    const { tr, doc } = this.editor.state;
+    const { attributeName, types, generateID, injectNodeName } = this.options;
+
+    doc.descendants((node, pos) => {
+      if (node.type.name === "text" || !types?.includes(node.type.name)) return;
+
+      if (injectNodeName) tr.setNodeAttribute(pos, "data-node-name", node.type.name);
+
+      if (!node.attrs[attributeName!]) tr.setNodeAttribute(pos, attributeName!, generateID?.());
+    });
+
+    this.editor.view.dispatch(tr);
+  },
+  addProseMirrorPlugins() {
+    const { attributeName, types, generateID, injectNodeName } = this.options;
+
+    return [
+      new Plugin({
+        key: pluginKey,
+        appendTransaction(trs, { doc: oldDoc }, { doc: newDoc, tr }) {
+          if (!trs.some((tr) => tr.docChanged) || oldDoc.eq(newDoc)) return;
+
+          const transform = combineTransactionSteps(oldDoc, trs as Transaction[]);
+
+          for (const { newRange } of getChangedRanges(transform)) {
+            const newNodes = findChildrenInRange(newDoc, newRange, (node) => types?.includes(node.type.name));
+
+            const newIds = newNodes.map(({ node }) => node.attrs[attributeName!]).filter((item) => !!item);
+            for (const { node, pos } of newNodes) {
+              if (injectNodeName && !node.attrs["data-node-name"])
+                tr.setNodeAttribute(pos, "data-node-name", node.type.name);
+
+              const uniqueId = node.attrs[attributeName!];
+
+              if (!uniqueId) {
+                tr.setNodeAttribute(pos, attributeName!, generateID?.());
+                continue;
+              }
+
+              if (tr.mapping.invert().mapResult(pos) && findDuplicates(newIds).includes(uniqueId))
+                tr.setNodeAttribute(pos, attributeName!, generateID?.());
+            }
+          }
+
+          if (!transform.steps.length) return null;
+
+          return tr;
+        },
+      }),
+    ];
+  },
+});

package/src/editor/hooks.ts

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useRef } from "react";
+import type { EditorEvents, Editor as EditorInstance, Extensions, JSONContent } from "@tiptap/core";
+import CharacterCount from "@tiptap/extension-character-count";
+import Placeholder from "@tiptap/extension-placeholder";
+import Typography from "@tiptap/extension-typography";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { useEditor as useBaseEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { common, createLowlight } from "lowlight";
+
+import { type NodeData, useData } from "./control/drag-handle/use.data";
+import { useHandleId } from "./control/drag-handle/use.handle.id";
+import {
+  BlockquoteFigure,
+  CodeBlockLowlight,
+  Color,
+  Column,
+  Columns,
+  Document,
+  Dropcursor,
+  Figcaption,
+  Focus,
+  FontFamily,
+  FontSize,
+  Heading,
+  Highlight,
+  History,
+  HorizontalRule,
+  ImageBlock,
+  ImageUpload,
+  Link,
+  Selection,
+  Subscript,
+  Superscript,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  TaskItem,
+  TaskList,
+  TextAlign,
+  TextStyle,
+  Underline,
+  UniqueId,
+} from "./extension";
+import GlobalDragHandle from "./extension/global-drag-handle";
+import type { UploadImageFunction } from "./extension/image-upload/ImageUpload";
+import SlashCommand, { type SlashCommandProps } from "./extension/slash-command";
+import { i18n } from "./utils/locale";
+
+export type UseEditorProps = {
+  limit?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  onReadOnlyChange?: (value: string) => void;
+  editable?: boolean;
+  onCreate?: (props: EditorEvents["create"]) => void;
+  extensions?: Extensions;
+  slashCommandProps?: SlashCommandProps;
+  uploadImage?: UploadImageFunction;
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <updateAttrById>
+const updateAttrById = (json: JSONContent, id: string, attr: string, value: any) => {
+  if (!json.content) return;
+  for (const node of json.content) {
+    if (node.attrs?.id === id) {
+      node.attrs[attr] = value;
+    }
+    if (node.content) {
+      updateAttrById(node, id, attr, value);
+    }
+  }
+};
+
+const JSON_EXCLUDE = ["imageUpload"];
+
+export const getJSONString = (editor: EditorInstance): string => {
+  const json = editor.getJSON();
+  // biome-ignore lint/suspicious/noExplicitAny: <node>
+  json.content = json.content?.filter((node: any) => !JSON_EXCLUDE.includes(node.type));
+  return JSON.stringify(json);
+};
+
+const UNIQUE_ATTRIBUTE_NAME = "id";
+
+export const useEditor = (props: UseEditorProps): [EditorInstance, NodeData, string] => {
+  const {
+    onReadOnlyChange,
+    value,
+    onCreate,
+    onChange,
+    limit,
+    editable = true,
+    extensions = [],
+    slashCommandProps,
+    uploadImage,
+  } = props;
+  const handleId = useHandleId();
+  const data = useData();
+
+  const onReadOnlyChecked = useCallback(
+    (node: ProseMirrorNode, checked: boolean) => {
+      const jsonValue = editor?.getJSON();
+      updateAttrById(jsonValue!, node.attrs.id, "checked", checked);
+      editor?.commands.setContent(jsonValue!, false);
+      onReadOnlyChange?.(JSON.stringify(jsonValue));
+      return true;
+    },
+    [onReadOnlyChange],
+  );
+
+  const editor = useBaseEditor(
+    {
+      editable,
+      extensions: [
+        Document,
+        Columns,
+        TaskList,
+        TaskItem.configure({
+          nested: true,
+          onReadOnlyChecked,
+        }),
+        Column,
+        Selection,
+        Heading.configure({
+          levels: [1, 2, 3, 4, 5, 6],
+        }),
+        HorizontalRule,
+        StarterKit.configure({
+          document: false,
+          dropcursor: false,
+          heading: false,
+          horizontalRule: false,
+          blockquote: false,
+          history: false,
+          codeBlock: false,
+        }),
+        CharacterCount.configure({
+          limit,
+        }),
+        GlobalDragHandle.configure({
+          dragHandleSelector: `#${handleId}`,
+          onNodeChange: data.handleNodeChange,
+          onShow: () => data.setHidden(false),
+          onHide: () => data.setHidden(true),
+          uniqueId: UNIQUE_ATTRIBUTE_NAME,
+        }),
+        CodeBlockLowlight.configure({
+          lowlight: createLowlight(common),
+          defaultLanguage: null,
+        }),
+        TextStyle,
+        FontSize,
+        FontFamily,
+        Color,
+        // TrailingNode,
+        Link.configure({
+          openOnClick: false,
+        }),
+        Highlight.configure({ multicolor: true }),
+        Underline,
+        TextAlign.extend({
+          addKeyboardShortcuts() {
+            return {};
+          },
+        }).configure({
+          types: ["heading", "paragraph"],
+        }),
+        Subscript,
+        Superscript,
+        Table,
+        TableCell,
+        TableHeader,
+        TableRow,
+        Typography,
+        Placeholder.configure({
+          includeChildren: true,
+          showOnlyCurrent: false,
+          placeholder: ({ node }) => {
+            if (node.type.name === "blockquoteFigure") {
+              return "";
+            }
+            if (node.type.name === "quoteCaption") {
+              return i18n("placeholder.quoteCaption");
+            }
+            if (node.type.name === "quote") {
+              return i18n("placeholder.quote");
+            }
+            return i18n("placeholder.default");
+          },
+        }),
+        SlashCommand.configure(slashCommandProps),
+        Focus,
+        Figcaption,
+        BlockquoteFigure,
+        Dropcursor.configure({
+          width: 2,
+          class: "!bg-primary",
+        }),
+        ImageBlock,
+        ImageUpload.configure({
+          uploadImage,
+        }),
+        UniqueId.configure({
+          attributeName: UNIQUE_ATTRIBUTE_NAME,
+          types: [
+            "paragraph",
+            "heading",
+            "blockquoteFigure",
+            "codeBlock",
+            "bulletList",
+            "listItem",
+            "orderedList",
+            "taskList",
+            "taskItem",
+            "imageBlock",
+            "table",
+            "horizontalRule",
+            "imageUpload",
+          ],
+          injectNodeName: false,
+        }),
+        History,
+        ...extensions,
+      ],
+      immediatelyRender: false,
+      content: value ? JSON.parse(value) : value,
+      onUpdate: ({ editor }) => {
+        if (editor.isInitialized) {
+          onChange?.(getJSONString(editor));
+        }
+      },
+      onCreate,
+    },
+    [onChange, onReadOnlyChecked, onCreate],
+  );
+
+  const isUpdate = useRef(false);
+
+  // 监听 value 变化，必要时 setContent
+  useEffect(() => {
+    if (!(editor && value)) return;
+    const current = JSON.stringify(editor.getJSON());
+    if (current !== value && !isUpdate.current) {
+      editor.commands.setContent(JSON.parse(value), false);
+    }
+  }, [value, editor]);
+
+  // onUpdate 里判断是否是外部 setContent
+  useEffect(() => {
+    if (!editor) return;
+    const handler = () => {
+      isUpdate.current = true;
+      onChange?.(getJSONString(editor));
+    };
+    editor.on("update", handler);
+    return () => {
+      editor.off("update", handler);
+    };
+  }, [editor, onChange]);
+
+  return [editor!, data, handleId];
+};

package/src/editor/index.tsx

@@ -0,0 +1,53 @@
+import "./container.css";
+import "./editor.css";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import type { EditorEvents, Editor as EditorInstance, Extensions } from "@tiptap/core";
+import { EditorContent } from "@tiptap/react";
+
+import { EditorController } from "./control";
+import type { UploadImageFunction } from "./extension/image-upload/ImageUpload";
+import type { SlashCommandProps } from "./extension/slash-command";
+import { useEditor } from "./hooks";
+
+export type EditorProps = {
+  limit?: number;
+  value?: string;
+  onChange?: (value: string) => void;
+  onCreate?: (props: EditorEvents["create"]) => void;
+  extensions?: Extensions;
+  slashCommandProps?: SlashCommandProps;
+  uploadImage?: UploadImageFunction;
+};
+
+export type EditorRef = {
+  editor: EditorInstance | null;
+};
+
+export const Editor = forwardRef<EditorRef, EditorProps>((props, ref) => {
+  const { limit, value, onChange, onCreate, extensions, slashCommandProps, uploadImage } = props;
+  const menuContainerRef = useRef<HTMLDivElement>(null);
+  const [editor, data, handleId] = useEditor({
+    limit,
+    value,
+    onChange,
+    onCreate,
+    extensions,
+    slashCommandProps,
+    uploadImage,
+  });
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      editor,
+    }),
+    [editor],
+  );
+
+  return (
+    <div className="editor-container" ref={menuContainerRef}>
+      <EditorContent className="editor" editor={editor} />
+      <EditorController appendTo={menuContainerRef} data={data} editor={editor} handleId={handleId} limit={limit} />
+    </div>
+  );
+});

package/src/editor/menus/LinkMenu/LinkMenu.tsx

@@ -0,0 +1,75 @@
+import { type ReactElement, useCallback, useState } from "react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
+
+import { LinkEditorPanel, LinkPreviewPanel } from "../../panels";
+import type { MenuProps } from "../types";
+
+export const LinkMenu = ({ editor, appendTo }: MenuProps): ReactElement => {
+  const [showEdit, setShowEdit] = useState(false);
+
+  const shouldShow = useCallback(() => {
+    return editor.isActive("link");
+  }, [editor]);
+
+  const { href: link, target } = editor.getAttributes("link");
+
+  const handleEdit = useCallback(() => {
+    setShowEdit(true);
+  }, []);
+
+  const onSetLink = useCallback(
+    (url: string, openInNewTab?: boolean) => {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: url, target: openInNewTab ? "_blank" : "" })
+        .run();
+      setShowEdit(false);
+    },
+    [editor],
+  );
+
+  const onUnsetLink = useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setShowEdit(false);
+    return null;
+  }, [editor]);
+
+  // const onShowEdit = useCallback(() => {
+  //   setShowEdit(true)
+  // }, [])
+
+  // const onHideEdit = useCallback(() => {
+  //   setShowEdit(false)
+  // }, [])
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey="textMenu"
+      shouldShow={shouldShow}
+      tippyOptions={{
+        zIndex: 40,
+        popperOptions: {
+          modifiers: [{ name: "flip", enabled: false }],
+        },
+        appendTo: () => {
+          return appendTo?.current;
+        },
+        onHidden: () => {
+          setShowEdit(false);
+        },
+      }}
+      updateDelay={0}
+    >
+      {showEdit ? (
+        <LinkEditorPanel initialOpenInNewTab={target === "_blank"} initialUrl={link} onSetLink={onSetLink} />
+      ) : (
+        <LinkPreviewPanel onClear={onUnsetLink} onEdit={handleEdit} url={link} />
+      )}
+    </BaseBubbleMenu>
+  );
+};
+
+export default LinkMenu;

package/src/editor/menus/LinkMenu/index.tsx

@@ -0,0 +1 @@
+export { LinkMenu } from "./LinkMenu";