@meta-1/editor 0.0.29 → 1.0.0

package/src/contexts/user-context.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { getAvatar } from "../lib/tiptap-collab-utils";
+
+export type User = {
+  id: string;
+  name: string;
+  color: string;
+  avatar: string;
+};
+
+export type UserContextValue = {
+  user: User;
+};
+
+export const UserContext = createContext<UserContextValue>({
+  user: { color: "", id: "", name: "", avatar: "" },
+});
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const [user] = useState<User>({
+    color: getColorFromLocalStorage(),
+    name: getUsernameFromLocalStorage(),
+    id: getUserIdFromLocalStorage(),
+    avatar: getAvatar(getUsernameFromLocalStorage()),
+  });
+
+  useEffect(() => {
+    window.localStorage.setItem("_tiptap_username", user.name);
+    window.localStorage.setItem("_tiptap_color", user.color);
+    window.localStorage.setItem("_tiptap_user_id", user.id);
+  }, [user]);
+
+  return <UserContext.Provider value={{ user }}>{children}</UserContext.Provider>;
+}
+
+export const useUser = () => useContext(UserContext);
+
+export const FIRST_NAMES = [
+  "John",
+  "Jane",
+  "Alice",
+  "Bob",
+  "Eve",
+  "Charlie",
+  "David",
+  "Frank",
+  "Grace",
+  "Helen",
+  "Rob Lowe",
+  "Rob",
+];
+
+export const LAST_NAMES = [
+  "Smith",
+  "Johnson",
+  "Williams",
+  "Jones",
+  "Brown",
+  "Davis",
+  "Miller",
+  "Wilson",
+  "Moore",
+  "Taylor",
+  "Anderson",
+  "Thomas",
+  "Lowe",
+];
+
+export const USER_COLORS = [
+  "#fb7185",
+  "#fdba74",
+  "#d9f99d",
+  "#a7f3d0",
+  "#a5f3fc",
+  "#a5b4fc",
+  "#f0abfc",
+  "#fda58d",
+  "#f2cc8f",
+  "#9ae6b4",
+];
+
+const uuid = (): string => {
+  const template = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+  return template.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+const getRandomArrayItem = (array: string[]) => {
+  if (array.length === 0) {
+    throw new Error("Cannot get random item from empty array");
+  }
+  return array[Math.floor(Math.random() * array.length)]!;
+};
+
+const generateRandomUsername = (): string => {
+  const names = [getRandomArrayItem(FIRST_NAMES)];
+
+  if (Math.random() > 0.85) {
+    names.push(getRandomArrayItem(FIRST_NAMES));
+  }
+  names.push(getRandomArrayItem(LAST_NAMES));
+
+  return names.join(" ");
+};
+
+const generateRandomColor = (): string => {
+  return getRandomArrayItem(USER_COLORS) ?? "#9ae6b4";
+};
+
+const getFromLocalStorage = (
+  key: string,
+  fallback: () => string,
+  isServer: boolean = typeof window === "undefined",
+): string => {
+  if (isServer) {
+    return fallback();
+  }
+  const value = window.localStorage.getItem(key);
+  return value !== null ? value : fallback();
+};
+
+const getUsernameFromLocalStorage = (): string => {
+  return getFromLocalStorage("_tiptap_username", generateRandomUsername);
+};
+
+const getColorFromLocalStorage = (): string => {
+  return getFromLocalStorage("_tiptap_color", generateRandomColor);
+};
+
+const getUserIdFromLocalStorage = (): string => {
+  return getFromLocalStorage("_tiptap_user_id", () => uuid());
+};

package/src/editor/collaboration/index.tsx

@@ -0,0 +1,64 @@
+import { FC, useEffect, useMemo } from "react";
+import Collaboration from "@tiptap/extension-collaboration";
+import CollaborationCaret from "@tiptap/extension-collaboration-caret";
+import { WebsocketProvider } from "y-websocket";
+import * as Y from "yjs";
+
+import { Meta1Editor } from "..";
+
+export type User = {
+  name: string;
+  color: string;
+};
+
+export type Meta1CollaborationEditorProps = {
+  currentUser: User;
+  providerConfig: {
+    url: string;
+    room: string;
+  };
+  onUsersChange?: (users: Map<number, User>) => void;
+};
+
+export const Meta1CollaborationEditor: FC<Meta1CollaborationEditorProps> = (props) => {
+  const { currentUser, providerConfig, onUsersChange } = props;
+  const ydoc = useMemo(() => new Y.Doc(), []);
+
+  const provider = useMemo(() => new WebsocketProvider(providerConfig.url, providerConfig.room, ydoc), [ydoc]);
+
+  useEffect(() => {
+    const awareness = provider.awareness;
+
+    const updateUsers = () => {
+      const users = new Map<number, User>();
+      awareness.getStates().forEach((state, clientId) => {
+        if (state.user) {
+          users.set(clientId, state.user as User);
+        }
+      });
+      onUsersChange?.(users);
+    };
+
+    awareness.on("change", updateUsers);
+    updateUsers();
+
+    return () => {
+      awareness.off("change", updateUsers);
+      provider.destroy();
+    };
+  }, [provider]);
+
+  return (
+    <Meta1Editor
+      extensions={[
+        Collaboration.configure({
+          document: ydoc,
+        }),
+        CollaborationCaret.configure({
+          provider,
+          user: currentUser,
+        }),
+      ]}
+    />
+  );
+};

package/src/editor/index.tsx

@@ -1,53 +1,155 @@
-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;
-};
+"use client";
+
+import { FC, useContext, useEffect } from "react";
+import { EditorContent, EditorContext } from "@tiptap/react";
+
+import { TableCellHandleMenu } from "../components/tiptap-node/table-node/ui/table-cell-handle-menu";
+import { TableExtendRowColumnButtons } from "../components/tiptap-node/table-node/ui/table-extend-row-column-button";
+import { TableHandle } from "../components/tiptap-node/table-node/ui/table-handle/table-handle";
+import { TableSelectionOverlay } from "../components/tiptap-node/table-node/ui/table-selection-overlay";
+import { useScrollToHash } from "../components/tiptap-ui/copy-anchor-link-button/use-scroll-to-hash";
+import { useUiEditorState } from "../hooks/use-ui-editor-state";
+import "../components/tiptap-node/table-node/styles/prosemirror-table.css";
+import "../components/tiptap-node/table-node/styles/table-node.css";
+
+import "../styles/variables.css";
+import "../components/tiptap-node/blockquote-node/blockquote-node.css";
+import "../components/tiptap-node/code-block-node/code-block-node.css";
+import "../components/tiptap-node/list-node/list-node.css";
+import "../components/tiptap-node/heading-node/heading-node.css";
+import "../components/tiptap-node/paragraph-node/paragraph-node.css";
+
+import { NotionToolbarFloating } from "../components/notion-like/notion-like-editor-toolbar-floating";
+import type { UploadFunction } from "../components/tiptap-node/image-upload-node/image-upload-node-extension";
+import { DragContextMenu } from "../components/tiptap-ui/drag-context-menu";
+import { MentionDropdownMenu } from "../components/tiptap-ui/mention-dropdown-menu";
+import { SlashDropdownMenu } from "../components/tiptap-ui/slash-dropdown-menu";
+import { AppProvider } from "../contexts/app-context";
+import {
+  type ImageUploadOptions,
+  type Meta1EditorInstance,
+  type Meta1EditorOptions,
+  type Meta1EditorValue,
+  useEditorInstance,
+  useMeta1Editor,
+} from "../hooks/use-editor";
+
+export type { ImageUploadOptions, Meta1EditorInstance, Meta1EditorValue, UploadFunction };
+
+/**
+ * EditorContent component that renders the actual editor
+ */
+export function EditorContentArea() {
+  const { editor } = useContext(EditorContext)!;
+  const { isDragging } = useUiEditorState(editor);
+
+  useScrollToHash();
+
+  if (!editor) {
+    return null;
+  }
 
-export type EditorRef = {
-  editor: EditorInstance | null;
+  return (
+    <EditorContent
+      className="notion-like-editor-content"
+      editor={editor}
+      role="presentation"
+      style={{
+        cursor: isDragging ? "grabbing" : "auto",
+      }}
+    >
+      <DragContextMenu />
+      <MentionDropdownMenu />
+      <SlashDropdownMenu />
+      <NotionToolbarFloating />
+    </EditorContent>
+  );
+}
+
+export type Meta1EditorProps = Meta1EditorOptions & {
+  /** Editor instance created by Meta1Editor.useEditor() */
+  editor?: Meta1EditorInstance;
+  /** Controlled value - works with FormItem */
+  value?: Meta1EditorValue;
+  /** onChange callback - works with FormItem */
+  onChange?: (content: Meta1EditorValue) => void;
 };
 
-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,
+const Meta1EditorInner: FC<Meta1EditorProps> = (props) => {
+  const { editor: editorInstance, value, onChange, ...options } = props;
+
+  // Create the actual tiptap editor with value/onChange support
+  const tiptapEditor = useMeta1Editor({
+    ...options,
     value,
     onChange,
-    onCreate,
-    extensions,
-    slashCommandProps,
-    uploadImage,
   });
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      editor,
-    }),
-    [editor],
-  );
+  // Update the instance reference when editor changes
+  useEffect(() => {
+    if (editorInstance?._setEditor) {
+      editorInstance._setEditor(tiptapEditor);
+      if (options.contentType) {
+        editorInstance._contentType = options.contentType;
+      }
+    }
+    return () => {
+      editorInstance?._setEditor?.(null);
+    };
+  }, [tiptapEditor, editorInstance, options.contentType]);
+
+  if (!tiptapEditor) {
+    return null;
+  }
 
   return (
-    <div className="editor-container" ref={menuContainerRef}>
-      <EditorContent className="editor" editor={editor} />
-      <EditorController appendTo={menuContainerRef} data={data} editor={editor} handleId={handleId} limit={limit} />
-    </div>
+    <AppProvider>
+      <div className="notion-like-editor-wrapper">
+        <EditorContext.Provider value={{ editor: tiptapEditor }}>
+          <EditorContentArea />
+
+          <TableExtendRowColumnButtons />
+          <TableHandle />
+          <TableSelectionOverlay
+            cellMenu={(props) => (
+              <TableCellHandleMenu editor={props.editor} onMouseDown={(e) => props.onResizeStart?.("br")(e)} />
+            )}
+            showResizeHandles={true}
+          />
+        </EditorContext.Provider>
+      </div>
+    </AppProvider>
   );
+};
+
+/**
+ * Meta1Editor component with useEditor hook attached.
+ *
+ * @example
+ * // Basic usage with FormItem (value/onChange injected automatically)
+ * <FormItem name="content">
+ *   <Meta1Editor placeholder="Enter text..." />
+ * </FormItem>
+ *
+ * @example
+ * // With editor instance for programmatic access
+ * const editor = Meta1Editor.useEditor();
+ *
+ * const handleSave = () => {
+ *   const json = editor.getJSON();
+ *   console.log(json);
+ * };
+ *
+ * <FormItem name="content">
+ *   <Meta1Editor editor={editor} placeholder="Enter text..." />
+ * </FormItem>
+ *
+ * @example
+ * // Controlled mode without Form
+ * const [value, setValue] = useState({});
+ *
+ * <Meta1Editor value={value} onChange={setValue} />
+ */
+export const Meta1Editor = Object.assign(Meta1EditorInner, {
+  useEditor: useEditorInstance,
 });

package/src/hooks/use-composed-ref.ts

@@ -0,0 +1,47 @@
+"use client"
+
+import { useCallback, useRef } from "react"
+
+// basically Exclude<React.ClassAttributes<T>["ref"], string>
+type UserRef<T> =
+  | ((instance: T | null) => void)
+  | React.RefObject<T | null>
+  | null
+  | undefined
+
+const updateRef = <T>(ref: NonNullable<UserRef<T>>, value: T | null) => {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    // Safe assignment without MutableRefObject
+    ;(ref as { current: T | null }).current = value
+  }
+}
+
+export const useComposedRef = <T extends HTMLElement>(
+  libRef: React.RefObject<T | null>,
+  userRef: UserRef<T>
+) => {
+  const prevUserRef = useRef<UserRef<T>>(null)
+
+  return useCallback(
+    (instance: T | null) => {
+      if (libRef && "current" in libRef) {
+        ;(libRef as { current: T | null }).current = instance
+      }
+
+      if (prevUserRef.current) {
+        updateRef(prevUserRef.current, null)
+      }
+
+      prevUserRef.current = userRef
+
+      if (userRef) {
+        updateRef(userRef, instance)
+      }
+    },
+    [libRef, userRef]
+  )
+}
+
+export default useComposedRef

package/src/hooks/use-cursor-visibility.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect } from "react";
+import type { Editor } from "@tiptap/react";
+
+import { useBodyRect } from "./use-element-rect";
+import { useWindowSize } from "./use-window-size";
+
+export interface CursorVisibilityOptions {
+  /**
+   * The Tiptap editor instance
+   */
+  editor?: Editor | null;
+  /**
+   * Reference to the toolbar element that may obscure the cursor
+   */
+  overlayHeight?: number;
+}
+
+/**
+ * Custom hook that ensures the cursor remains visible when typing in a Tiptap editor.
+ * Automatically scrolls the window when the cursor would be hidden by the toolbar.
+ *
+ * @param options.editor The Tiptap editor instance
+ * @param options.overlayHeight Toolbar height to account for
+ * @returns The bounding rect of the body
+ */
+export function useCursorVisibility({ editor, overlayHeight = 0 }: CursorVisibilityOptions) {
+  const { height: windowHeight } = useWindowSize();
+  const rect = useBodyRect({
+    enabled: true,
+    throttleMs: 100,
+    useResizeObserver: true,
+  });
+
+  useEffect(() => {
+    const ensureCursorVisibility = () => {
+      if (!editor) return;
+
+      const { state, view } = editor;
+      if (!view.hasFocus()) return;
+
+      // Get current cursor position coordinates
+      const { from } = state.selection;
+      const cursorCoords = view.coordsAtPos(from);
+
+      if (windowHeight < rect.height && cursorCoords) {
+        const availableSpace = windowHeight - cursorCoords.top;
+
+        // If the cursor is hidden behind the overlay or offscreen, scroll it into view
+        if (availableSpace < overlayHeight) {
+          const targetCursorY = Math.max(windowHeight / 2, overlayHeight);
+          const currentScrollY = window.scrollY;
+          const cursorAbsoluteY = cursorCoords.top + currentScrollY;
+          const newScrollY = cursorAbsoluteY - targetCursorY;
+
+          window.scrollTo({
+            top: Math.max(0, newScrollY),
+            behavior: "smooth",
+          });
+        }
+      }
+    };
+
+    ensureCursorVisibility();
+  }, [editor, overlayHeight, windowHeight, rect.height]);
+
+  return rect;
+}