@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui-utils/suggestion-menu/suggestion-menu-utils.ts

@@ -0,0 +1,87 @@
+import type { Node } from "@tiptap/pm/model"
+import type { SuggestionItem } from "./suggestion-menu-types"
+
+/**
+ * Calculates the start position of a suggestion command in the text.
+ *
+ * @param cursorPosition Current cursor position
+ * @param previousNode Node before the cursor
+ * @param triggerChar Character that triggers the suggestion
+ * @returns The position where the command starts
+ */
+export function calculateStartPosition(
+  cursorPosition: number,
+  previousNode: Node | null,
+  triggerChar?: string
+): number {
+  if (!previousNode?.text || !triggerChar) {
+    return cursorPosition
+  }
+
+  const commandText = previousNode.text
+  const triggerCharIndex = commandText.lastIndexOf(triggerChar)
+
+  if (triggerCharIndex === -1) {
+    return cursorPosition
+  }
+
+  const textLength = commandText.substring(triggerCharIndex).length
+
+  return cursorPosition - textLength
+}
+
+/**
+ * Filters and sorts suggestion items based on a search query.
+ *
+ * @param items List of suggestion items to filter
+ * @param query Search query string
+ * @returns Filtered and sorted list of suggestions
+ */
+export function filterSuggestionItems(items: SuggestionItem[], query: string) {
+  const normalizedQuery = query.trim().toLowerCase()
+
+  if (!normalizedQuery) {
+    return items
+  }
+
+  return items
+    .filter((item) => {
+      if (item.title.toLowerCase().includes(normalizedQuery)) {
+        return true
+      }
+
+      if (item.subtext?.toLowerCase().includes(normalizedQuery)) {
+        return true
+      }
+
+      if (
+        item.keywords?.some((keyword) =>
+          keyword.toLowerCase().includes(normalizedQuery)
+        )
+      ) {
+        return true
+      }
+
+      return false
+    })
+    .sort((a, b) => {
+      // Prioritize exact matches and "starts with" matches
+      const aTitle = a.title.toLowerCase()
+      const bTitle = b.title.toLowerCase()
+
+      if (aTitle === normalizedQuery && bTitle !== normalizedQuery) return -1
+      if (bTitle === normalizedQuery && aTitle !== normalizedQuery) return 1
+      if (
+        aTitle.startsWith(normalizedQuery) &&
+        !bTitle.startsWith(normalizedQuery)
+      )
+        return -1
+      if (
+        bTitle.startsWith(normalizedQuery) &&
+        !aTitle.startsWith(normalizedQuery)
+      )
+        return 1
+
+      return 0
+    })
+}

package/src/components/tiptap-ui-utils/suggestion-menu/suggestion-menu.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flip, offset, shift, size } from "@floating-ui/react";
+import { PluginKey } from "@tiptap/pm/state";
+// --- Tiptap Editor ---
+import type { Range } from "@tiptap/react";
+// --- Tiptap UI ---
+// --- UI Primitives ---
+import { Suggestion, type SuggestionKeyDownProps, SuggestionPluginKey, type SuggestionProps } from "@tiptap/suggestion";
+
+// --- Hooks ---
+import { useFloatingElement } from "../../../hooks/use-floating-element";
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation";
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+import type { SuggestionItem, SuggestionMenuProps } from "./suggestion-menu-types";
+import { calculateStartPosition } from "./suggestion-menu-utils";
+
+/**
+ * A component that renders a suggestion menu for Tiptap editors.
+ * Displays a floating menu when a trigger character is typed.
+ */
+export const SuggestionMenu = ({
+  editor: providedEditor,
+  floatingOptions,
+  selector = "tiptap-suggestion-menu",
+  children,
+  maxHeight = 384,
+  pluginKey = SuggestionPluginKey,
+  ...internalSuggestionProps
+}: SuggestionMenuProps) => {
+  const { editor } = useTiptapEditor(providedEditor);
+
+  const [show, setShow] = useState<boolean>(false);
+
+  // If later we want the floating stick to the position while browser is scrolling,
+  // we can uncomment this part and pass the getBoundingClientRect prop to FloatingElement instead of referenceElement.
+  // const [internalClientRect, setInternalClientRect] = useState<DOMRect | null>(
+  //   null
+  // )
+  const [internalDecorationNode, setInternalDecorationNode] = useState<HTMLElement | null>(null);
+  const [internalCommand, setInternalCommand] = useState<((item: SuggestionItem) => void) | null>(null);
+  const [internalItems, setInternalItems] = useState<SuggestionItem[]>([]);
+  const [internalQuery, setInternalQuery] = useState<string>("");
+  const [, setInternalRange] = useState<Range | null>(null);
+
+  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(show, internalDecorationNode, 1000, {
+    placement: "bottom-start",
+    middleware: [
+      offset(10),
+      flip({
+        mainAxis: true,
+        crossAxis: false,
+      }),
+      shift(),
+      size({
+        apply({ availableHeight, elements }) {
+          if (elements.floating) {
+            const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
+
+            elements.floating.style.setProperty("--suggestion-menu-max-height", `${maxHeightValue}px`);
+          }
+        },
+      }),
+    ],
+    onOpenChange(open) {
+      if (!open) {
+        setShow(false);
+      }
+    },
+    ...floatingOptions,
+  });
+
+  const internalSuggestionPropsRef = useRef(internalSuggestionProps);
+
+  useEffect(() => {
+    internalSuggestionPropsRef.current = internalSuggestionProps;
+  }, [internalSuggestionProps]);
+
+  const closePopup = useCallback(() => {
+    setShow(false);
+  }, []);
+
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) {
+      return;
+    }
+
+    const existingPlugin = editor.state.plugins.find((plugin) => plugin.spec.key === pluginKey);
+    if (existingPlugin) {
+      editor.unregisterPlugin(pluginKey);
+    }
+
+    const suggestion = Suggestion({
+      pluginKey: pluginKey instanceof PluginKey ? pluginKey : new PluginKey(pluginKey),
+      editor,
+
+      allow(props) {
+        const $from = editor.state.doc.resolve(props.range.from);
+
+        // Check if we're inside an image node
+        for (let depth = $from.depth; depth > 0; depth--) {
+          if ($from.node(depth).type.name === "image") {
+            return false; // Don't allow slash command inside image (since we support captions)
+          }
+        }
+
+        return true;
+      },
+
+      command({ editor, range, props }) {
+        if (!range) {
+          return;
+        }
+
+        const { view, state } = editor;
+        const { selection } = state;
+
+        const isMention = editor.extensionManager.extensions.some((extension) => {
+          const name = extension.name;
+          return name === "mention" && extension.options?.suggestion?.char === internalSuggestionPropsRef.current.char;
+        });
+
+        if (!isMention) {
+          const cursorPosition = selection.$from.pos;
+          const previousNode = selection.$head?.nodeBefore;
+
+          const startPosition = previousNode
+            ? calculateStartPosition(cursorPosition, previousNode, internalSuggestionPropsRef.current.char)
+            : selection.$from.start();
+
+          const transaction = state.tr.deleteRange(startPosition, cursorPosition);
+          view.dispatch(transaction);
+        }
+
+        const nodeAfter = view.state.selection.$to.nodeAfter;
+        const overrideSpace = nodeAfter?.text?.startsWith(" ");
+
+        const rangeToUse = { ...range };
+
+        if (overrideSpace) {
+          rangeToUse.to += 1;
+        }
+
+        props.onSelect({ editor, range: rangeToUse, context: props.context });
+      },
+
+      render: () => {
+        return {
+          onStart: (props: SuggestionProps<SuggestionItem>) => {
+            setInternalDecorationNode((props.decorationNode as HTMLElement) ?? null);
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            // setInternalClientRect(props.clientRect?.() ?? null)
+            setShow(true);
+          },
+
+          onUpdate: (props: SuggestionProps<SuggestionItem>) => {
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            // setInternalClientRect(props.clientRect?.() ?? null)
+            setInternalDecorationNode((props.decorationNode as HTMLElement) ?? null);
+          },
+
+          onKeyDown: (props: SuggestionKeyDownProps) => {
+            if (props.event.key === "Escape") {
+              closePopup();
+              return true;
+            }
+            return false;
+          },
+
+          onExit: () => {
+            setInternalDecorationNode(null);
+            setInternalCommand(null);
+            setInternalItems([]);
+            setInternalQuery("");
+            setInternalRange(null);
+            // setInternalClientRect(null)
+            setShow(false);
+          },
+        };
+      },
+      ...internalSuggestionPropsRef.current,
+    });
+
+    editor.registerPlugin(suggestion);
+
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    };
+  }, [editor, pluginKey, closePopup]);
+
+  const onSelect = useCallback(
+    (item: SuggestionItem) => {
+      closePopup();
+
+      if (internalCommand) {
+        internalCommand(item);
+      }
+    },
+    [closePopup, internalCommand],
+  );
+
+  const { selectedIndex } = useMenuNavigation({
+    editor: editor,
+    query: internalQuery,
+    items: internalItems,
+    onSelect,
+  });
+
+  if (!isMounted || !show || !editor) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      style={style}
+      {...getFloatingProps()}
+      aria-label="Suggestions"
+      className="tiptap-suggestion-menu"
+      data-selector={selector}
+      onPointerDown={(e) => e.preventDefault()}
+      role="listbox"
+    >
+      {children({
+        items: internalItems,
+        selectedIndex,
+        onSelect,
+      })}
+    </div>
+  );
+};

package/src/content/index.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { FC } from "react";
+import { EditorContent } from "@tiptap/react";
+
+import { type UseMeta1EditorProps, useMeta1Editor } from "../hooks/use-editor";
+import "./style.css";
+
+export type Meta1ContentProps = Pick<UseMeta1EditorProps, "value" | "contentType">;
+
+export const Meta1Content: FC<Meta1ContentProps> = (props) => {
+  const editor = useMeta1Editor({
+    ...props,
+    editable: false,
+    className: "meta1-content",
+  });
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="meta1-content-wrapper">
+      <EditorContent className="meta1-content" editor={editor} />
+    </div>
+  );
+};

package/src/content/style.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+.meta1-content .tiptap [data-content-type="table"] .tableWrapper {
+  @apply p-0;
+}
+
+.meta1-content .tiptap [data-content-type="table"] .tableWrapper table::before,
+.meta1-content .tiptap [data-content-type="table"] .tableWrapper table::after {
+  display: none;
+}
+
+

package/src/contexts/ai-context.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+import { fetchAiToken, getUrlParam } from "../lib/tiptap-collab-utils";
+
+export type AiContextValue = {
+  aiToken: string | null;
+  hasAi: boolean;
+};
+
+export const AiContext = createContext<AiContextValue>({
+  hasAi: false,
+  aiToken: null,
+});
+
+export const AiConsumer = AiContext.Consumer;
+export const useAi = (): AiContextValue => {
+  const context = useContext(AiContext);
+  if (!context) {
+    throw new Error("useAi must be used within an AiProvider");
+  }
+  return context;
+};
+
+export const useAiToken = () => {
+  const [aiToken, setAiToken] = useState<string | null>(null);
+  const [hasAi, setHasAi] = useState<boolean>(true);
+
+  useEffect(() => {
+    const noAiParam = getUrlParam("noAi");
+    setHasAi(parseInt(noAiParam || "0") !== 1);
+  }, []);
+
+  useEffect(() => {
+    if (!hasAi) return;
+
+    const getToken = async () => {
+      const token = await fetchAiToken();
+      setAiToken(token);
+    };
+
+    getToken();
+  }, [hasAi]);
+
+  return { aiToken, hasAi };
+};
+
+export function AiProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const { hasAi, aiToken } = useAiToken();
+
+  const value = useMemo<AiContextValue>(
+    () => ({
+      hasAi,
+      aiToken,
+    }),
+    [hasAi, aiToken],
+  );
+
+  return <AiContext.Provider value={value}>{children}</AiContext.Provider>;
+}

package/src/contexts/app-context.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+
+export type AppContextValue = {
+  activeThread: string | null
+  setActiveThread: (threadId: string | null) => void
+
+  /**
+   * A map of thread ids to their respective bubble elements
+   */
+  threadBubbles: Record<string, HTMLElement[]>
+
+  /**
+   * Add new thread bubbles to the map
+   * @param threadIds The thread IDs attached to the bubble
+   * @param element The bubble element
+   * @returns void
+   */
+  addThreadBubble: (threadIds: string | string[], element: HTMLElement) => void
+
+  /**
+   * Remove a thread bubble from the map
+   * @param threadId The thread ID to remove
+   * @returns void
+   */
+  removeThreadBubble: (threadIdOrElement: string | HTMLElement) => void
+}
+
+export const AppContext = createContext<AppContextValue>({
+  activeThread: null,
+  setActiveThread: () => {},
+  threadBubbles: {},
+  addThreadBubble: () => {},
+  removeThreadBubble: () => {},
+})
+
+export const AppConsumer = AppContext.Consumer
+
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+  const [activeThread, setActiveThread] = useState<string | null>(null)
+  const [threadBubbles, setThreadBubbles] = useState<
+    Record<string, HTMLElement[]>
+  >({})
+  const threadBubblesRef = useRef(threadBubbles)
+
+  const addThreadBubble = useCallback(
+    (threadIds: string | string[], element: HTMLElement) => {
+      const ids = Array.isArray(threadIds) ? threadIds : [threadIds]
+
+      ids.forEach((id) => {
+        const hasThread = threadBubblesRef.current[id]
+        const hasElement = threadBubblesRef.current[id]?.includes(element)
+
+        if (hasThread && hasElement) {
+          return
+        }
+
+        if (!threadBubblesRef.current[id]) {
+          threadBubblesRef.current[id] = [element]
+          return
+        }
+
+        threadBubblesRef.current[id] = [
+          ...threadBubblesRef.current[id],
+          element,
+        ]
+      })
+      setThreadBubbles({ ...threadBubblesRef.current })
+    },
+    []
+  )
+
+  const removeThreadBubble = useCallback(
+    (threadIdOrElement: string | HTMLElement) => {
+      const isElement = typeof threadIdOrElement !== "string"
+      const isString = typeof threadIdOrElement === "string"
+
+      if (isString) {
+        delete threadBubblesRef.current[threadIdOrElement]
+        setThreadBubbles({ ...threadBubblesRef.current })
+        return
+      }
+
+      if (isElement) {
+        const element = threadIdOrElement as HTMLElement
+
+        Object.keys(threadBubblesRef.current).forEach((id) => {
+          const threadBubble = threadBubblesRef.current[id]
+
+          // if the element is included in the thread bubble
+          // we'll remove it from the array
+          if (threadBubble && threadBubble.includes(element)) {
+            threadBubblesRef.current[id] = threadBubble.filter(
+              (el) => el !== element
+            )
+          }
+
+          // if there are no more elements in the thread bubble
+          // we'll remove the thread bubble data
+          if (
+            threadBubblesRef.current[id] &&
+            threadBubblesRef.current[id].length === 0
+          ) {
+            delete threadBubblesRef.current[id]
+          }
+        })
+        setThreadBubbles({ ...threadBubblesRef.current })
+        return
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    threadBubblesRef.current = threadBubbles
+  }, [threadBubbles])
+
+  const providerValue = useMemo(
+    () => ({
+      activeThread,
+      setActiveThread,
+      threadBubbles,
+      addThreadBubble,
+      removeThreadBubble,
+    }),
+    [
+      activeThread,
+      setActiveThread,
+      threadBubbles,
+      addThreadBubble,
+      removeThreadBubble,
+    ]
+  )
+
+  return (
+    <AppContext.Provider value={providerValue}>{children}</AppContext.Provider>
+  )
+}
+
+/**
+ * Hook to access the app state.
+ * @returns {AppContextValue}
+ */
+export const useAppState = (): AppContextValue => {
+  const context = useContext(AppContext)
+  if (!context) {
+    throw new Error("useAppState must be used within an AppProvider")
+  }
+  return context
+}