@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+/* =====================
+    HORIZONTAL RULE
+    ===================== */
+.tiptap.ProseMirror hr {
+  @apply border-0 h-px bg-gray-200 dark:bg-gray-700;
+}
+
+.tiptap.ProseMirror [data-type="horizontalRule"] {
+  @apply pt-3 pb-3;
+}

package/src/components/tiptap-node/image-node/image-node-extension.ts

@@ -0,0 +1,169 @@
+import type { ImageOptions } from "@tiptap/extension-image";
+import { Image as TiptapImage } from "@tiptap/extension-image";
+import type { Node } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import { ImageNodeView } from "./image-node-view";
+import "./image-node.css";
+
+interface ImageAttributes {
+  src: string | null;
+  alt?: string | null;
+  title?: string | null;
+  width?: string | null;
+  height?: string | null;
+  "data-align"?: string | null;
+}
+
+const parseImageAttributes = (img: Element): Partial<ImageAttributes> => ({
+  src: img.getAttribute("src"),
+  alt: img.getAttribute("alt"),
+  title: img.getAttribute("title"),
+  width: img.getAttribute("width"),
+  height: img.getAttribute("height"),
+});
+
+function buildImageHTMLAttributes(attrs: ImageAttributes): Record<string, string> {
+  const result: Record<string, string> = { src: attrs.src || "" };
+
+  if (attrs.alt) result.alt = attrs.alt;
+  if (attrs.title) result.title = attrs.title;
+  if (attrs.width) result.width = attrs.width;
+  if (attrs.height) result.height = attrs.height;
+
+  return result;
+}
+
+export const Image = TiptapImage.extend<ImageOptions>({
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      "data-align": {
+        default: null,
+      },
+      showCaption: {
+        default: false,
+        parseHTML: (element) => {
+          return element.tagName === "FIGURE" || element.getAttribute("data-show-caption") === "true";
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.showCaption) return {};
+          return { "data-show-caption": "true" };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "figure",
+        getAttrs: (node) => {
+          const img = node.querySelector("img");
+          if (!img) return false;
+
+          return {
+            ...parseImageAttributes(img),
+            "data-align": node.getAttribute("data-align"),
+            showCaption: true,
+          };
+        },
+        contentElement: "figcaption",
+      },
+      {
+        tag: "img[src]",
+        getAttrs: (node) => {
+          if (node.closest("figure")) return false;
+
+          return {
+            ...parseImageAttributes(node),
+            "data-align": node.getAttribute("data-align"),
+            showCaption: false,
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const { src, alt, title, width, height, showCaption } = node.attrs;
+    const align = node.attrs["data-align"];
+
+    const imgAttrs = buildImageHTMLAttributes({
+      src,
+      alt,
+      title,
+      width,
+      height,
+    });
+
+    const hasContent = node.content.size > 0;
+
+    if (showCaption || hasContent) {
+      const figureAttrs: Record<string, string> = {
+        "data-url": src || "",
+      };
+      if (showCaption) figureAttrs["data-show-caption"] = "true";
+      if (align) figureAttrs["data-align"] = align;
+
+      return ["figure", figureAttrs, ["img", imgAttrs], ["figcaption", {}, 0]];
+    }
+
+    if (align) imgAttrs["data-align"] = align;
+    return ["img", imgAttrs];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-a": ({ editor }) => {
+        const { state, view } = editor;
+        const { selection } = state;
+        const { $from } = selection;
+
+        let imagePos: number | null = null;
+        let imageNode: Node | null = null;
+
+        for (let depth = $from.depth; depth >= 0; depth--) {
+          const nodeAtDepth = $from.node(depth);
+          if (nodeAtDepth.type === this.type) {
+            imageNode = nodeAtDepth;
+            // posBefore is the resolved position *before* this node
+            imagePos = depth === 0 ? 0 : $from.before(depth);
+            break;
+          }
+        }
+
+        // Not inside an Image → let default behavior happen
+        if (!imageNode || imagePos == null) {
+          return false;
+        }
+
+        // If the caption/content is empty, allow the default progressive select-all
+        const contentIsEmpty = imageNode.content.size === 0 || imageNode.textContent.length === 0;
+
+        if (contentIsEmpty) {
+          return false;
+        }
+
+        // Compute the content range of the image node:
+        // content starts at (nodePos + 1) and ends at (nodePos + node.nodeSize - 1)
+        const start = imagePos + 1;
+        const end = imagePos + imageNode.nodeSize - 1;
+
+        const tr = state.tr.setSelection(TextSelection.create(state.doc, start, end));
+        view.dispatch(tr);
+
+        return true;
+      },
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageNodeView);
+  },
+});
+
+export default Image;

package/src/components/tiptap-node/image-node/image-node-floating.tsx

@@ -0,0 +1,41 @@
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isNodeTypeSelected } from "../../../lib/tiptap-utils";
+import { RefreshCcwIcon } from "../../tiptap-icons/refresh-ccw-icon";
+// --- Tiptap UI ---
+import { DeleteNodeButton } from "../../tiptap-ui/delete-node-button";
+import { ImageAlignButton } from "../../tiptap-ui/image-align-button";
+import { ImageCaptionButton } from "../../tiptap-ui/image-caption-button";
+import { ImageDownloadButton } from "../../tiptap-ui/image-download-button";
+import { ImageUploadButton } from "../../tiptap-ui/image-upload-button";
+// --- UI Primitive ---
+import { Separator } from "../../tiptap-ui-primitive/separator";
+
+export function ImageNodeFloating({ editor: providedEditor }: { editor?: Editor | null }) {
+  const { editor } = useTiptapEditor(providedEditor);
+  const visible = isNodeTypeSelected(editor, ["image"]);
+  const { t } = useTranslation();
+
+  if (!editor || !visible) {
+    return null;
+  }
+
+  return (
+    <>
+      <ImageAlignButton align="left" />
+      <ImageAlignButton align="center" />
+      <ImageAlignButton align="right" />
+      <Separator />
+      <ImageCaptionButton />
+      <Separator />
+      <ImageDownloadButton />
+      <ImageUploadButton icon={RefreshCcwIcon} tooltip={t("Replace")} />
+      <Separator />
+      <DeleteNodeButton />
+    </>
+  );
+}

package/src/components/tiptap-node/image-node/image-node-view.css

@@ -0,0 +1,60 @@
+@import "tailwindcss";
+
+.tiptap.ProseMirror .ProseMirror-selectednode .tiptap-image .tiptap-image-container {
+  @apply rounded-sm;
+  outline: 0.125rem solid transparent;
+  outline-color: theme("colors.indigo.500");
+}
+
+.tiptap.ProseMirror .tiptap-image {
+  @apply flex w-full;
+}
+
+.tiptap.ProseMirror .tiptap-image[data-align="right"] {
+  @apply text-right justify-end;
+}
+
+.tiptap.ProseMirror .tiptap-image[data-align="center"] {
+  @apply text-center justify-center;
+}
+
+.tiptap.ProseMirror .tiptap-image-container {
+  @apply cursor-pointer select-none flex flex-col;
+}
+
+.tiptap.ProseMirror .tiptap-image-content {
+  @apply flex items-center max-w-full relative;
+}
+
+.tiptap.ProseMirror .tiptap-image-img {
+  @apply w-full rounded-sm;
+}
+
+.tiptap.ProseMirror .tiptap-image-handle {
+  @apply absolute top-1/2 -translate-y-1/2 bg-indigo-600 dark:bg-indigo-400 rounded-full cursor-ew-resize z-10;
+  width: 0.375rem;
+  height: 3rem;
+  border-radius: 1.875rem;
+}
+
+.tiptap.ProseMirror .tiptap-image-handle.tiptap-image-handle-left {
+  left: 4px;
+}
+
+.tiptap.ProseMirror .tiptap-image-handle.tiptap-image-handle-right {
+  right: 4px;
+}
+
+.tiptap.ProseMirror .tiptap-image-caption {
+  @apply cursor-text text-center max-w-full w-full break-words mt-4 outline-none relative;
+  font-size: 15px;
+  white-space: break-spaces;
+  word-break: break-word;
+}
+
+.tiptap.ProseMirror
+  .tiptap-image-caption:has(> [data-node-view-content-react] > .ProseMirror-trailingBreak:only-child)::before,
+.tiptap.ProseMirror .tiptap-image-caption:has(> [data-node-view-content-react]:empty)::before {
+  @apply text-gray-400 pointer-events-none absolute left-0 right-0;
+  content: attr(data-placeholder);
+}

package/src/components/tiptap-node/image-node/image-node-view.tsx

@@ -0,0 +1,316 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+import type { Editor, NodeViewProps } from "@tiptap/react";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+
+import { isValidPosition } from "../../../lib/tiptap-utils";
+
+import "./image-node-view.css";
+import { useTranslation } from "react-i18next";
+
+export interface ResizeParams {
+  handleUsed: "left" | "right";
+  initialWidth: number;
+  initialClientX: number;
+}
+
+export interface ResizableImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+  alt?: string;
+  editor?: Editor;
+  minWidth?: number;
+  maxWidth?: number;
+  align?: "left" | "center" | "right";
+  initialWidth?: number;
+  showCaption?: boolean;
+  hasContent?: boolean;
+  onImageResize?: (width?: number) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onUpdateAttributes?: (attrs: Record<string, any>) => void;
+  getPos: () => number | undefined;
+  nodeSize?: number;
+}
+
+export function ImageNodeView(props: NodeViewProps) {
+  const { editor, node, updateAttributes, getPos } = props;
+  const hasContent = node.content.size > 0;
+
+  return (
+    <ResizableImage
+      align={node.attrs["data-align"]}
+      alt={node.attrs.alt || ""}
+      editor={editor}
+      getPos={getPos}
+      hasContent={hasContent}
+      initialWidth={node.attrs.width}
+      nodeSize={node.nodeSize}
+      onImageResize={(width) => updateAttributes({ width })}
+      onUpdateAttributes={updateAttributes}
+      showCaption={node.attrs.showCaption}
+      src={node.attrs.src}
+    />
+  );
+}
+
+export const ResizableImage: React.FC<ResizableImageProps> = ({
+  src,
+  alt = "",
+  editor,
+  minWidth = 96,
+  maxWidth = 800,
+  align = "left",
+  initialWidth,
+  showCaption = false,
+  hasContent = false,
+  nodeSize,
+  onImageResize,
+  onUpdateAttributes,
+  getPos,
+}) => {
+  const { t } = useTranslation();
+  const [resizeParams, setResizeParams] = useState<ResizeParams | undefined>();
+  const [width, setWidth] = useState<number | undefined>(initialWidth);
+  const [showHandles, setShowHandles] = useState(false);
+  const isResizingRef = useRef(false);
+  const isMountedRef = useRef(true);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const leftResizeHandleRef = useRef<HTMLDivElement>(null);
+  const rightResizeHandleRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Listen to editor selection changes to detect when focus leaves the caption
+  useEffect(() => {
+    if (!editor || !showCaption) return;
+
+    const handleSelectionUpdate = () => {
+      const pos = getPos();
+      if (!isValidPosition(pos) || !nodeSize) return;
+
+      const { from, to } = editor.state.selection;
+      const nodeStart = pos;
+      const nodeEnd = pos + nodeSize;
+
+      // Check if selection is outside this image node
+      const isOutsideNode = to < nodeStart || from > nodeEnd;
+
+      if (isOutsideNode && !hasContent && onUpdateAttributes) {
+        onUpdateAttributes({ showCaption: false });
+      }
+    };
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, showCaption, hasContent, getPos, nodeSize, onUpdateAttributes]);
+
+  // Had to manually set the node selection on image click because
+  // We treat the image-node-extension.ts as content: "inline*"
+  const handleImageClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (!editor || !getPos || resizeParams) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const pos = getPos();
+      if (isValidPosition(pos)) {
+        editor.chain().focus().setNodeSelection(pos).run();
+      }
+    },
+    [editor, getPos, resizeParams],
+  );
+
+  const windowMouseMoveHandler = useCallback(
+    (event: MouseEvent | TouchEvent): void => {
+      if (!resizeParams || !editor || !isMountedRef.current) return;
+
+      const clientX = "touches" in event ? (event.touches[0]?.clientX ?? 0) : event.clientX;
+      const isLeftHandle = resizeParams.handleUsed === "left";
+      const multiplier = align === "center" ? 2 : 1;
+
+      const delta = isLeftHandle
+        ? (resizeParams.initialClientX - clientX) * multiplier
+        : (clientX - resizeParams.initialClientX) * multiplier;
+
+      const newWidth = resizeParams.initialWidth + delta;
+      const effectiveMaxWidth = editor.view.dom?.firstElementChild?.clientWidth || maxWidth;
+      const clampedWidth = Math.min(Math.max(newWidth, minWidth), effectiveMaxWidth);
+
+      setWidth(clampedWidth);
+      if (wrapperRef.current) {
+        wrapperRef.current.style.width = `${clampedWidth}px`;
+      }
+    },
+    [editor, align, maxWidth, minWidth, resizeParams],
+  );
+
+  const windowMouseUpHandler = useCallback(
+    (event: MouseEvent | TouchEvent): void => {
+      if (!editor || !isMountedRef.current) return;
+
+      const target =
+        "touches" in event
+          ? document.elementFromPoint(event.changedTouches[0]?.clientX ?? 0, event.changedTouches[0]?.clientY ?? 0)
+          : event.target;
+
+      const isInsideWrapper = target && wrapperRef.current?.contains(target as Node);
+
+      if ((!isInsideWrapper || !editor.isEditable) && showHandles && isMountedRef.current) {
+        setShowHandles(false);
+      }
+
+      if (!resizeParams) return;
+
+      const wasNodeSelection =
+        editor.state.selection instanceof NodeSelection && editor.state.selection.node.type.name === "image";
+
+      if (isMountedRef.current) {
+        setResizeParams(undefined);
+      }
+      onImageResize?.(width);
+
+      // Restore the node selection after resizing
+      // This because we treat the image-node-extension.ts as content: "inline*"
+      const pos = getPos();
+
+      // Had to use isResizingRef flag because during resizing,
+      // the selection gets lost and cannot be detected here
+      // Its because image-node-extension.ts contain content: "inline*"
+      if (isValidPosition(pos) && wasNodeSelection && isMountedRef.current) {
+        editor.chain().focus().setNodeSelection(pos).run();
+      }
+
+      isResizingRef.current = false;
+    },
+    [editor, getPos, onImageResize, resizeParams, showHandles, width],
+  );
+
+  const startResize = useCallback(
+    (handleUsed: "left" | "right", clientX: number) => {
+      setResizeParams({
+        handleUsed,
+        initialWidth: wrapperRef.current?.clientWidth ?? minWidth,
+        initialClientX: clientX,
+      });
+      isResizingRef.current = true;
+    },
+    [minWidth],
+  );
+
+  const leftResizeHandleMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    startResize("left", event.clientX);
+  };
+
+  const leftResizeHandleTouchStartHandler = (event: React.TouchEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const touch = event.touches[0];
+    if (touch) startResize("left", touch.clientX);
+  };
+
+  const rightResizeHandleMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    startResize("right", event.clientX);
+  };
+
+  const rightResizeHandleTouchStartHandler = (event: React.TouchEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const touch = event.touches[0];
+    if (touch) startResize("right", touch.clientX);
+  };
+
+  const wrapperMouseEnterHandler = () => {
+    if (editor?.isEditable && isMountedRef.current) setShowHandles(true);
+  };
+
+  const wrapperMouseLeaveHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!isMountedRef.current) return;
+
+    if (
+      event.relatedTarget === leftResizeHandleRef.current ||
+      event.relatedTarget === rightResizeHandleRef.current ||
+      resizeParams
+    )
+      return;
+
+    if (editor?.isEditable) setShowHandles(false);
+  };
+
+  const wrapperTouchStartHandler = () => {
+    if (editor?.isEditable && isMountedRef.current) setShowHandles(true);
+  };
+
+  useEffect(() => {
+    window.addEventListener("mousemove", windowMouseMoveHandler);
+    window.addEventListener("mouseup", windowMouseUpHandler);
+    window.addEventListener("touchmove", windowMouseMoveHandler, {
+      passive: false,
+    });
+    window.addEventListener("touchend", windowMouseUpHandler);
+
+    return () => {
+      window.removeEventListener("mousemove", windowMouseMoveHandler);
+      window.removeEventListener("mouseup", windowMouseUpHandler);
+      window.removeEventListener("touchmove", windowMouseMoveHandler);
+      window.removeEventListener("touchend", windowMouseUpHandler);
+    };
+  }, [windowMouseMoveHandler, windowMouseUpHandler]);
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  const shouldShowCaption = showCaption || hasContent;
+
+  return (
+    <NodeViewWrapper
+      className="tiptap-image"
+      data-align={align}
+      data-width={width}
+      onMouseEnter={wrapperMouseEnterHandler}
+      onMouseLeave={wrapperMouseLeaveHandler}
+      onTouchStart={wrapperTouchStartHandler}
+    >
+      <div className="tiptap-image-container" ref={wrapperRef} style={{ width: width ? `${width}px` : "fit-content" }}>
+        <div className="tiptap-image-content">
+          <img
+            alt={alt}
+            className="tiptap-image-img"
+            contentEditable={false}
+            draggable={false}
+            onClick={handleImageClick}
+            ref={imageRef}
+            src={src}
+            style={{ cursor: editor?.isEditable ? "pointer" : "default" }}
+          />
+
+          {showHandles && editor?.isEditable && (
+            <>
+              <div
+                className="tiptap-image-handle tiptap-image-handle-left"
+                onMouseDown={leftResizeHandleMouseDownHandler}
+                onTouchStart={leftResizeHandleTouchStartHandler}
+                ref={leftResizeHandleRef}
+              />
+              <div
+                className="tiptap-image-handle tiptap-image-handle-right"
+                onMouseDown={rightResizeHandleMouseDownHandler}
+                onTouchStart={rightResizeHandleTouchStartHandler}
+                ref={rightResizeHandleRef}
+              />
+            </>
+          )}
+        </div>
+
+        {editor?.isEditable && shouldShowCaption && (
+          <NodeViewContent as="div" className="tiptap-image-caption" data-placeholder={t("添加标题...")} />
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+};

package/src/components/tiptap-node/image-node/image-node.css

@@ -0,0 +1,28 @@
+@import "tailwindcss";
+
+.tiptap.ProseMirror img {
+  @apply max-w-full h-auto block;
+}
+
+.tiptap.ProseMirror > img:not([data-type="emoji"] img) {
+  @apply my-8 rounded-sm;
+  outline: 0.125rem solid transparent;
+}
+
+.tiptap.ProseMirror img:not([data-type="emoji"] img).ProseMirror-selectednode {
+  @apply outline-indigo-500;
+}
+
+/* Thread image handling */
+.tiptap.ProseMirror .tiptap-thread:has(> img) {
+  @apply my-8;
+}
+
+.tiptap.ProseMirror .tiptap-thread:has(> img) img {
+  @apply rounded-sm;
+  outline: 0.125rem solid transparent;
+}
+
+.tiptap.ProseMirror .tiptap-thread img {
+  @apply m-0;
+}