Merge pull request #305 from miikebar/fix/304-shared-slash-command-tunnel

fix: use per-editor instance of tunnel to render slash command popover

Author: andrewdoro

packages/headless/src/components/editor-command.tsx

@@ -1,15 +1,23 @@
 import { atom, useAtom, useSetAtom } from "jotai";
-import { useEffect, useRef, type ComponentPropsWithoutRef, forwardRef } from "react";
+import {
+  useEffect,
+  useRef,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  createContext,
+} from "react";
 import tunnel from "tunnel-rat";
 import { novelStore } from "./editor";
 import { Command } from "cmdk";
 import type { Range } from "@tiptap/core";
 
-const t = tunnel();
-
 export const queryAtom = atom("");
 export const rangeAtom = atom<Range | null>(null);
 
+export const EditorCommandTunnelContext = createContext(
+  {} as ReturnType<typeof tunnel>
+);
+
 export const EditorCommandOut = ({
   query,
   range,
@@ -37,7 +45,11 @@ export const EditorCommandOut = ({
 
         if (commandRef)
           commandRef.dispatchEvent(
-            new KeyboardEvent("keydown", { key: e.key, cancelable: true, bubbles: true })
+            new KeyboardEvent("keydown", {
+              key: e.key,
+              cancelable: true,
+              bubbles: true,
+            })
           );
 
         return false;
@@ -49,28 +61,42 @@ export const EditorCommandOut = ({
     };
   }, []);
 
-  return <t.Out />;
+  return (
+    <EditorCommandTunnelContext.Consumer>
+      {(tunnelInstance) => <tunnelInstance.Out />}
+    </EditorCommandTunnelContext.Consumer>
+  );
 };
 
-export const EditorCommand = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof Command>>(
-  ({ children, className, ...rest }, ref) => {
-    const commandListRef = useRef<HTMLDivElement>(null);
-    const [query, setQuery] = useAtom(queryAtom);
+export const EditorCommand = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof Command>
+>(({ children, className, ...rest }, ref) => {
+  const commandListRef = useRef<HTMLDivElement>(null);
+  const [query, setQuery] = useAtom(queryAtom);
 
-    return (
-      <t.In>
-        <Command
-          ref={ref}
-          onKeyDown={(e) => {
-            e.stopPropagation();
-          }}
-          id='slash-command'
-          className={className}
-          {...rest}>
-          <Command.Input value={query} onValueChange={setQuery} style={{ display: "none" }} />
-          <Command.List ref={commandListRef}>{children}</Command.List>
-        </Command>
-      </t.In>
-    );
-  }
-);
+  return (
+    <EditorCommandTunnelContext.Consumer>
+      {(tunnelInstance) => (
+        <tunnelInstance.In>
+          <Command
+            ref={ref}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+            }}
+            id="slash-command"
+            className={className}
+            {...rest}
+          >
+            <Command.Input
+              value={query}
+              onValueChange={setQuery}
+              style={{ display: "none" }}
+            />
+            <Command.List ref={commandListRef}>{children}</Command.List>
+          </Command>
+        </tunnelInstance.In>
+      )}
+    </EditorCommandTunnelContext.Consumer>
+  );
+});

packages/headless/src/components/editor.tsx

@@ -1,18 +1,43 @@
-import { useMemo, type ReactNode, useState, useEffect, useRef, forwardRef } from "react";
-import { EditorProvider, type EditorProviderProps, type JSONContent } from "@tiptap/react";
+import {
+  useMemo,
+  type ReactNode,
+  useState,
+  useEffect,
+  useRef,
+  forwardRef,
+} from "react";
+import {
+  EditorProvider,
+  type EditorProviderProps,
+  type JSONContent,
+} from "@tiptap/react";
 import { Provider, createStore } from "jotai";
 import { simpleExtensions } from "../extensions";
 import { startImageUpload } from "../plugins/upload-images";
 import { Editor } from "@tiptap/core";
+import tunnel from "tunnel-rat";
+import { EditorCommandTunnelContext } from "./editor-command";
 export interface EditorProps {
   children: ReactNode;
   className?: string;
 }
 
 export const novelStore = createStore();
 
-export const EditorRoot = ({ children }: { children: ReactNode }): JSX.Element => {
-  return <Provider store={novelStore}>{children}</Provider>;
+export const EditorRoot = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const tunnelInstance = useRef(tunnel()).current;
+
+  return (
+    <Provider store={novelStore}>
+      <EditorCommandTunnelContext.Provider value={tunnelInstance}>
+        {children}
+      </EditorCommandTunnelContext.Provider>
+    </Provider>
+  );
 };
 
 export type EditorContentProps = {
@@ -29,7 +54,11 @@ export const EditorContent = forwardRef<HTMLDivElement, EditorContentProps>(
 
     return (
       <div ref={ref} className={className}>
-        <EditorProvider {...rest} content={initialContent} extensions={extensions}>
+        <EditorProvider
+          {...rest}
+          content={initialContent}
+          extensions={extensions}
+        >
           {children}
         </EditorProvider>
       </div>
@@ -50,7 +79,11 @@ export const defaultEditorProps: EditorProviderProps["editorProps"] = {
     },
   },
   handlePaste: (view, event) => {
-    if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+    if (
+      event.clipboardData &&
+      event.clipboardData.files &&
+      event.clipboardData.files[0]
+    ) {
       event.preventDefault();
       const file = event.clipboardData.files[0];
       const pos = view.state.selection.from;
@@ -61,7 +94,12 @@ export const defaultEditorProps: EditorProviderProps["editorProps"] = {
     return false;
   },
   handleDrop: (view, event, _slice, moved) => {
-    if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+    if (
+      !moved &&
+      event.dataTransfer &&
+      event.dataTransfer.files &&
+      event.dataTransfer.files[0]
+    ) {
       event.preventDefault();
       const file = event.dataTransfer.files[0];
       const coordinates = view.posAtCoords({