@meta-1/editor 0.0.28 → 1.0.0

package/package.json

@@ -1,73 +1,62 @@
 {
   "name": "@meta-1/editor",
-  "version": "0.0.28",
+  "version": "1.0.0",
   "keywords": [
-    "easykit",
+    "meta",
     "tailwindcss",
     "react",
     "editor",
     "tiptap"
   ],
-  "description": "Easy kit editor",
+  "description": "Meta-1 editor",
   "author": "Grant <284885069@qq.com>",
-  "homepage": "https://github.com/zkit-org",
+  "homepage": "https://editor.meta1.top",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/zkit-org/packages.git"
+    "url": "https://github.com/meta1top/Support.git"
   },
   "type": "module",
   "dependencies": {
-    "@tiptap/core": "2.9.1",
-    "@tiptap/extension-bubble-menu": "2.9.1",
-    "@tiptap/extension-bullet-list": "2.9.1",
-    "@tiptap/extension-character-count": "2.9.1",
-    "@tiptap/extension-code-block": "2.9.1",
-    "@tiptap/extension-code-block-lowlight": "2.9.1",
-    "@tiptap/extension-color": "2.9.1",
-    "@tiptap/extension-document": "2.9.1",
-    "@tiptap/extension-dropcursor": "2.9.1",
-    "@tiptap/extension-focus": "2.9.1",
-    "@tiptap/extension-font-family": "2.9.1",
-    "@tiptap/extension-heading": "2.9.1",
-    "@tiptap/extension-highlight": "2.9.1",
-    "@tiptap/extension-horizontal-rule": "2.9.1",
-    "@tiptap/extension-image": "2.9.1",
-    "@tiptap/extension-link": "2.9.1",
-    "@tiptap/extension-ordered-list": "2.9.1",
-    "@tiptap/extension-paragraph": "2.9.1",
-    "@tiptap/extension-placeholder": "2.9.1",
-    "@tiptap/extension-subscript": "2.9.1",
-    "@tiptap/extension-superscript": "2.9.1",
-    "@tiptap/extension-table": "2.9.1",
-    "@tiptap/extension-table-header": "2.9.1",
-    "@tiptap/extension-table-row": "2.9.1",
-    "@tiptap/extension-text": "2.9.1",
-    "@tiptap/extension-text-align": "2.9.1",
-    "@tiptap/extension-text-style": "2.9.1",
-    "@tiptap/extension-typography": "2.9.1",
-    "@tiptap/extension-underline": "2.9.1",
-    "@tiptap/extension-history": "2.9.1",
-    "@tiptap/pm": "2.9.1",
-    "@tiptap/react": "2.9.1",
-    "@tiptap/starter-kit": "2.9.1",
-    "@tiptap/suggestion": "2.9.1",
-    "lowlight": "3.1.0",
-    "tippy.js": "6.3.7",
-    "uuid": "10.0.0",
-    "lucide-react": "0.400.0",
-    "@radix-ui/react-dropdown-menu": "2.1.1",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "rb-tippyjs-react": "4.3.1",
-    "nanoid": "5.0.9",
-    "react-colorful": "5.6.1",
-    "clsx": "2.1.1",
-    "interactjs": "^1.10.27",
-    "tailwind-merge": "2.3.0"
+    "@floating-ui/react": "^0.27.16",
+    "@radix-ui/react-dropdown-menu": "2.1.2",
+    "@radix-ui/react-popover": "1.1.2",
+    "@tiptap/core": "3.13.0",
+    "@tiptap/extensions": "^3.14.0",
+    "@tiptap/extension-bubble-menu": "3.13.0",
+    "@tiptap/extension-collaboration": "^3.13.0",
+    "@tiptap/extension-collaboration-caret": "^3.13.0",
+    "@tiptap/extension-color": "^3.14.0",
+    "@tiptap/extension-drag-handle-react": "^3.14.0",
+    "@tiptap/extension-floating-menu": "3.13.0",
+    "@tiptap/extension-highlight": "^3.14.0",
+    "@tiptap/extension-list": "^3.14.0",
+    "@tiptap/extension-table": "^3.14.0",
+    "@tiptap/extension-text-style": "^3.14.0",
+    "@tiptap/extension-unique-id": "^3.14.0",
+    "@tiptap/extension-horizontal-rule": "^3.14.0",
+    "@tiptap/extension-text-align": "^3.14.0",
+    "@tiptap/pm": "3.13.0",
+    "@tiptap/react": "3.13.0",
+    "@tiptap/starter-kit": "3.13.0",
+    "@tiptap/y-tiptap": "^3.0.1",
+    "@tiptap/extension-emoji": "^3.14.0",
+    "@tiptap/extension-image": "^3.14.0",
+    "@tiptap/extension-mathematics": "^3.14.0",
+    "@tiptap/extension-mention": "^3.14.0",
+    "@tiptap/extension-subscript": "^3.14.0",
+    "@tiptap/extension-superscript": "^3.14.0",
+    "@tiptap/extension-typography": "^3.14.0",
+    "@tiptap/markdown": "^3.14.0",
+    "@tiptap/suggestion": "^3.14.0",
+    "react-hotkeys-hook": "^5.2.1",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.28",
+    "lodash.throttle": "^4.1.1"
   },
-  "devDependencies": {
-    "@types/uuid": "10.0.0"
+  "peerDependencies": {
+    "react-i18next": "16.5.0",
+    "i18next": "25.7.3"
   },
   "module": "./src/index.ts",
   "types": "./src/index.ts",
@@ -76,18 +65,9 @@
       "types": "./src/index.ts",
       "default": "./src/index.ts"
     },
-    "./locales/zh-cn": {
-      "types": "./src/locales/zh-cn.ts",
-      "default": "./src/locales/zh-cn.ts"
-    },
-    "./locales/zh-tw": {
-      "types": "./src/locales/zh-tw.ts",
-      "default": "./src/locales/zh-tw.ts"
-    },
-    "./locales/en-us": {
-      "types": "./src/locales/en-us.ts",
-      "default": "./src/locales/en-us.ts"
-    }
+    "./locales/zh-CN": "./src/locales/zh-CN.json",
+    "./locales/zh-TW": "./src/locales/zh-TW.json",
+    "./locales/en": "./src/locales/en.json"
   },
   "publishConfig": {
     "access": "public"
@@ -96,5 +76,10 @@
     "/src",
     "package.json",
     "README.md"
-  ]
+  ],
+  "devDependencies": {
+    "@ariakit/react": "^0.4.20",
+    "sass": "^1.97.1",
+    "sass-embedded": "^1.97.1"
+  }
 }

package/src/components/notion-like/notion-like-editor-toolbar-floating.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from "react";
+import { type Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+import { useFloatingToolbarVisibility } from "../../hooks/use-floating-toolbar-visibility";
+import { useIsBreakpoint } from "../../hooks/use-is-breakpoint";
+// --- Hooks ---
+import { useTiptapEditor } from "../../hooks/use-tiptap-editor";
+import { useUiEditorState } from "../../hooks/use-ui-editor-state";
+// --- Utils ---
+import { isSelectionValid } from "../../lib/tiptap-collab-utils";
+// --- Icons ---
+import { MoreVerticalIcon } from "../tiptap-icons/more-vertical-icon";
+// --- Node ---
+import { ImageNodeFloating } from "../tiptap-node/image-node/image-node-floating";
+// --- UI ---
+import { ColorTextPopover } from "../tiptap-ui/color-text-popover";
+import { LinkPopover } from "../tiptap-ui/link-popover";
+import type { Mark } from "../tiptap-ui/mark-button";
+import { canToggleMark, MarkButton } from "../tiptap-ui/mark-button";
+import type { TextAlign } from "../tiptap-ui/text-align-button";
+import { canSetTextAlign, TextAlignButton } from "../tiptap-ui/text-align-button";
+import { TurnIntoDropdown } from "../tiptap-ui/turn-into-dropdown";
+// --- Primitive UI Components ---
+import type { ButtonProps } from "../tiptap-ui-primitive/button";
+import { Button } from "../tiptap-ui-primitive/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../tiptap-ui-primitive/popover";
+import { Toolbar, ToolbarGroup, ToolbarSeparator } from "../tiptap-ui-primitive/toolbar";
+// --- UI Utils ---
+import { FloatingElement } from "../tiptap-ui-utils/floating-element";
+
+export function NotionToolbarFloating() {
+  const { editor } = useTiptapEditor();
+  const isMobile = useIsBreakpoint("max", 480);
+  const { lockDragHandle, aiGenerationActive, commentInputVisible } = useUiEditorState(editor);
+
+  const { shouldShow } = useFloatingToolbarVisibility({
+    editor,
+    isSelectionValid,
+    extraHideWhen: Boolean(aiGenerationActive || commentInputVisible),
+  });
+
+  if (lockDragHandle || isMobile) return null;
+
+  return (
+    <FloatingElement shouldShow={shouldShow}>
+      <Toolbar variant="floating">
+        <ToolbarGroup>
+          <TurnIntoDropdown hideWhenUnavailable={true} />
+        </ToolbarGroup>
+
+        <ToolbarSeparator />
+
+        <ToolbarGroup>
+          <MarkButton hideWhenUnavailable={true} type="bold" />
+          <MarkButton hideWhenUnavailable={true} type="italic" />
+          <MarkButton hideWhenUnavailable={true} type="underline" />
+          <MarkButton hideWhenUnavailable={true} type="strike" />
+          <MarkButton hideWhenUnavailable={true} type="code" />
+        </ToolbarGroup>
+
+        <ToolbarSeparator />
+
+        <ToolbarGroup>
+          <ImageNodeFloating />
+        </ToolbarGroup>
+
+        <ToolbarGroup>
+          <LinkPopover autoOpenOnLinkActive={false} hideWhenUnavailable={true} />
+          <ColorTextPopover hideWhenUnavailable={true} />
+        </ToolbarGroup>
+
+        <MoreOptions hideWhenUnavailable={true} />
+      </Toolbar>
+    </FloatingElement>
+  );
+}
+
+function canMoreOptions(editor: Editor | null): boolean {
+  if (!editor) {
+    return false;
+  }
+
+  const canTextAlignAny = ["left", "center", "right", "justify"].some((align) =>
+    canSetTextAlign(editor, align as TextAlign),
+  );
+
+  const canMarkAny = ["superscript", "subscript"].some((type) => canToggleMark(editor, type as Mark));
+
+  return canMarkAny || canTextAlignAny;
+}
+
+function shouldShowMoreOptions(params: { editor: Editor | null; hideWhenUnavailable: boolean }): boolean {
+  const { editor, hideWhenUnavailable } = params;
+
+  if (!editor) {
+    return false;
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canMoreOptions(editor);
+  }
+
+  return Boolean(editor?.isEditable);
+}
+
+export interface MoreOptionsProps extends Omit<ButtonProps, "type"> {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether to hide the dropdown when no options are available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+}
+
+export function MoreOptions({ editor: providedEditor, hideWhenUnavailable = false, ...props }: MoreOptionsProps) {
+  const { editor } = useTiptapEditor(providedEditor);
+  const [show, setShow] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setShow(
+        shouldShowMoreOptions({
+          editor,
+          hideWhenUnavailable,
+        }),
+      );
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+
+  if (!show || !editor || !editor.isEditable) {
+    return null;
+  }
+
+  return (
+    <>
+      <ToolbarSeparator />
+      <ToolbarGroup>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button data-style="ghost" role="button" tabIndex={-1} tooltip={t("更多选项")} type="button" {...props}>
+              <MoreVerticalIcon className="tiptap-button-icon" />
+            </Button>
+          </PopoverTrigger>
+
+          <PopoverContent align="end" alignOffset={4} asChild side="top" sideOffset={4}>
+            <Toolbar tabIndex={0} variant="floating">
+              <ToolbarGroup>
+                <MarkButton type="superscript" />
+                <MarkButton type="subscript" />
+              </ToolbarGroup>
+
+              <ToolbarSeparator />
+
+              <ToolbarGroup>
+                <TextAlignButton align="left" />
+                <TextAlignButton align="center" />
+                <TextAlignButton align="right" />
+                <TextAlignButton align="justify" />
+              </ToolbarGroup>
+            </Toolbar>
+          </PopoverContent>
+        </Popover>
+      </ToolbarGroup>
+    </>
+  );
+}

package/src/components/tiptap-extension/list-normalization-extension.ts

@@ -0,0 +1,112 @@
+import type { Editor } from "@tiptap/core"
+import { Extension } from "@tiptap/core"
+import { canJoin } from "@tiptap/pm/transform"
+import { TextSelection } from "@tiptap/pm/state"
+
+/**
+ * ListNormalization Extension
+ *
+ * This extension solves the "stuck vertical spacing" problem that occurs when working
+ * with lists in Tiptap editor.
+ *
+ * ## The Problem
+ *
+ * By default, Tiptap treats each list as a separate structural node. When a user
+ * presses Enter twice at the end of a list item, they exit the list and a new
+ * paragraph is created between two list blocks:
+ *
+ * ```html
+ * <ul>
+ *   <li>Task A</li>
+ * </ul>
+ *
+ * <p></p>   <!-- Empty paragraph created on double-enter -->
+ *
+ * <ul>
+ *   <li>Task B</li>
+ * </ul>
+ * ```
+ *
+ * When the user tries to backspace this empty paragraph, Tiptap deletes the paragraph
+ * but does NOT automatically merge the two <ul> blocks back into one list. This results
+ * in visual "stuck" vertical spacing that users cannot remove, which feels broken.
+ */
+export const ListNormalizationExtension = Extension.create({
+  name: "listNormalization",
+
+  addKeyboardShortcuts() {
+    const listTypes = ["bulletList", "orderedList", "taskList"]
+
+    const handleBackspace = ({ editor }: { editor: Editor }) => {
+      const { state, view } = editor
+      const { selection } = state
+      const { $from, empty } = selection
+
+      if (!empty) return false
+      if ($from.parentOffset !== 0) return false
+
+      const currentNode = $from.parent
+
+      if (
+        currentNode.type.name !== "paragraph" ||
+        currentNode.content.size > 0
+      ) {
+        return false
+      }
+
+      const parentDepth = $from.depth - 1
+      if (parentDepth < 0) return false
+
+      const parent = $from.node(parentDepth)
+      const indexInParent = $from.index(parentDepth)
+
+      if (indexInParent === 0 || indexInParent >= parent.childCount - 1) {
+        return false
+      }
+
+      const nodeBefore = parent.child(indexInParent - 1)
+      const nodeAfter = parent.child(indexInParent + 1)
+
+      const isBeforeList = listTypes.includes(nodeBefore.type.name)
+      const isAfterList = listTypes.includes(nodeAfter.type.name)
+
+      if (!isBeforeList || !isAfterList) {
+        return false
+      }
+
+      if (nodeBefore.type.name !== nodeAfter.type.name) {
+        return false
+      }
+
+      const startOfPara = $from.before(parentDepth + 1)
+      const endOfPara = $from.after(parentDepth + 1)
+
+      const $insideFirstList = state.doc.resolve(startOfPara - 1)
+      const targetSelection = TextSelection.findFrom($insideFirstList, -1, true)
+
+      if (!targetSelection) {
+        return false
+      }
+
+      const cursorTargetPos = targetSelection.from
+
+      const tr = state.tr
+
+      tr.delete(startOfPara, endOfPara)
+
+      if (canJoin(tr.doc, startOfPara)) {
+        tr.join(startOfPara)
+      }
+
+      const mappedPos = tr.mapping.map(cursorTargetPos)
+      tr.setSelection(TextSelection.create(tr.doc, mappedPos))
+
+      view.dispatch(tr)
+      return true
+    }
+
+    return {
+      Backspace: handleBackspace,
+    }
+  },
+})