@meta-1/editor 0.0.28 → 1.0.0

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

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

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

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

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

@@ -1,264 +0,0 @@
-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/menus/LinkMenu/LinkMenu.tsx

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

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