@liveblocks/react-tiptap 3.9.1 → 3.9.2-tiptap2

package/dist/ai/AiToolbar.js

@@ -57,43 +57,43 @@ function flipToolbar() {
   };
 }
 const AiToolbarDropdownSeparator = forwardRef(({ className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsx(Command.Separator, {
-    className: cn("lb-dropdown-separator", className),
-    ...props,
-    ref: forwardedRef
-  });
+  return /* @__PURE__ */ jsx(
+    Command.Separator,
+    {
+      className: cn("lb-dropdown-separator", className),
+      ...props,
+      ref: forwardedRef
+    }
+  );
 });
 const AiToolbarSuggestionsSeparator = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(AiToolbarDropdownSeparator, {
-    ref: forwardedRef,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(AiToolbarDropdownSeparator, { ref: forwardedRef, ...props });
 });
 const AiToolbarDropdownItem = forwardRef(({ children, onSelect, icon, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsxs(Command.Item, {
-    className: cn("lb-dropdown-item", className),
-    onSelect,
-    ...props,
-    ref: forwardedRef,
-    children: [
-      icon ? /* @__PURE__ */ jsx("span", {
-        className: "lb-icon-container",
-        children: icon
-      }) : null,
-      children ? /* @__PURE__ */ jsx("span", {
-        className: "lb-dropdown-item-label",
-        children
-      }) : null
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    Command.Item,
+    {
+      className: cn("lb-dropdown-item", className),
+      onSelect,
+      ...props,
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "lb-icon-container", children: icon }) : null,
+        children ? /* @__PURE__ */ jsx("span", { className: "lb-dropdown-item-label", children }) : null
+      ]
+    }
+  );
 });
 const AiToolbarSuggestionsLabel = forwardRef(({ children, className, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ jsx("span", {
-    ref: forwardedRef,
-    className: cn("lb-dropdown-label", className),
-    ...props,
-    children
-  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: forwardedRef,
+      className: cn("lb-dropdown-label", className),
+      ...props,
+      children
+    }
+  );
 });
 const AiToolbarSuggestion = forwardRef(({ prompt: manualPrompt, ...props }, forwardedRef) => {
   const editor = useCurrentEditor("Suggestion", "AiToolbar");
@@ -105,56 +105,73 @@ const AiToolbarSuggestion = forwardRef(({ prompt: manualPrompt, ...props }, forw
     },
     [editor, manualPrompt]
   );
-  return /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
-    ...props,
-    onSelect: handleSelect,
-    ref: forwardedRef
-  });
+  return /* @__PURE__ */ jsx(
+    AiToolbarDropdownItem,
+    {
+      ...props,
+      onSelect: handleSelect,
+      ref: forwardedRef
+    }
+  );
 });
 function AiToolbarReviewingSuggestions() {
   const editor = useCurrentEditor("ReviewingSuggestions", "AiToolbar");
   const { state } = useAiToolbarContext();
   const { response } = state;
   if (isContextualPromptDiffResponse(response)) {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(CheckIcon, {}),
           onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Accept"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(UndoIcon, {}),
           onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(CrossIcon, {}),
           onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
-        })
-      ]
-    });
+        }
+      )
+    ] });
   } else {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(ArrowCornerDownRightIcon, {}),
           onSelect: editor.commands.$acceptAiToolbarResponse,
           children: "Insert below"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(UndoIcon, {}),
           onSelect: editor.commands.$startAiToolbarThinking,
           children: "Try again"
-        }),
-        /* @__PURE__ */ jsx(AiToolbarDropdownItem, {
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AiToolbarDropdownItem,
+        {
           icon: /* @__PURE__ */ jsx(CrossIcon, {}),
           onSelect: editor.commands.$closeAiToolbar,
           children: "Discard"
-        })
-      ]
-    });
+        }
+      )
+    ] });
   }
 }
 function AiToolbarCustomPromptContent() {
@@ -182,6 +199,7 @@ function AiToolbarCustomPromptContent() {
       });
     },
     []
+    // eslint-disable-line react-hooks/exhaustive-deps
   );
   const handlePromptKeyDown = (event) => {
     if (event.key === "Enter") {
@@ -223,66 +241,57 @@ function AiToolbarCustomPromptContent() {
       state.phase === "reviewing"
     );
   }, [editor, customPrompt, isCustomPromptEmpty, state.phase]);
-  return /* @__PURE__ */ jsxs("div", {
-    className: "lb-tiptap-ai-toolbar-content",
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-        children: /* @__PURE__ */ jsx(SparklesIcon, {})
-      }),
-      /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsxs("div", { className: "lb-tiptap-ai-toolbar-content", children: [
+    /* @__PURE__ */ jsx("span", { className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container", children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
         className: "lb-tiptap-ai-toolbar-custom-prompt-container",
         "data-value": customPrompt,
-        children: /* @__PURE__ */ jsx(Command.Input, {
-          value: customPrompt,
-          onValueChange: handleCustomPromptChange,
-          asChild: true,
-          children: /* @__PURE__ */ jsx("textarea", {
-            ref: textAreaRef,
-            className: "lb-tiptap-ai-toolbar-custom-prompt",
-            placeholder: `Ask ${aiName} anything\u2026`,
-            onKeyDown: handlePromptKeyDown,
-            rows: 1,
-            autoFocus: true
-          })
-        })
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: "lb-tiptap-ai-toolbar-actions",
-        children: /* @__PURE__ */ jsx(ShortcutTooltip, {
-          content: `Ask ${aiName}`,
-          shortcut: "Enter",
-          children: /* @__PURE__ */ jsx(Button, {
-            className: "lb-tiptap-ai-toolbar-action",
-            variant: "primary",
-            "aria-label": `Ask ${aiName}`,
-            icon: /* @__PURE__ */ jsx(SendIcon, {}),
-            disabled: isCustomPromptEmpty,
-            onClick: handleSendClick
-          })
-        })
-      })
-    ]
-  });
+        children: /* @__PURE__ */ jsx(
+          Command.Input,
+          {
+            value: customPrompt,
+            onValueChange: handleCustomPromptChange,
+            asChild: true,
+            children: /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: textAreaRef,
+                className: "lb-tiptap-ai-toolbar-custom-prompt",
+                placeholder: `Ask ${aiName} anything\u2026`,
+                onKeyDown: handlePromptKeyDown,
+                rows: 1,
+                autoFocus: true
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-actions", children: /* @__PURE__ */ jsx(ShortcutTooltip, { content: `Ask ${aiName}`, shortcut: "Enter", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "lb-tiptap-ai-toolbar-action",
+        variant: "primary",
+        "aria-label": `Ask ${aiName}`,
+        icon: /* @__PURE__ */ jsx(SendIcon, {}),
+        disabled: isCustomPromptEmpty,
+        onClick: handleSendClick
+      }
+    ) }) })
+  ] });
 }
 function AiToolbarAsking() {
   const { state } = useAiToolbarContext();
   const { error } = state;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {}),
-      error ? /* @__PURE__ */ jsxs("div", {
-        className: "lb-tiptap-ai-toolbar-error",
-        children: [
-          /* @__PURE__ */ jsx("span", {
-            className: "lb-icon-container",
-            children: /* @__PURE__ */ jsx(WarningIcon, {})
-          }),
-          "There was a problem with your request."
-        ]
-      }) : null
-    ]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {}),
+    error ? /* @__PURE__ */ jsxs("div", { className: "lb-tiptap-ai-toolbar-error", children: [
+      /* @__PURE__ */ jsx("span", { className: "lb-icon-container", children: /* @__PURE__ */ jsx(WarningIcon, {}) }),
+      "There was a problem with your request."
+    ] }) : null
+  ] });
 }
 function AiToolbarThinking() {
   const editor = useCurrentEditor("AiToolbarThinking", "AiToolbar");
@@ -295,56 +304,39 @@ function AiToolbarThinking() {
     contentRef.current?.focus();
     window.getSelection()?.removeAllRanges();
   }, []);
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
       className: "lb-tiptap-ai-toolbar-content",
       tabIndex: 0,
       ref: contentRef,
       children: [
-        /* @__PURE__ */ jsx("span", {
-          className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container",
-          children: /* @__PURE__ */ jsx(SparklesIcon, {})
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          className: "lb-tiptap-ai-toolbar-thinking",
-          children: [
-            aiName,
-            " is thinking\u2026"
-          ]
-        }),
-        /* @__PURE__ */ jsx("div", {
-          className: "lb-tiptap-ai-toolbar-actions",
-          children: /* @__PURE__ */ jsx(ShortcutTooltip, {
-            content: "Abort response",
-            shortcut: "Escape",
-            children: /* @__PURE__ */ jsx(Button, {
-              className: "lb-tiptap-ai-toolbar-action",
-              variant: "secondary",
-              "aria-label": "Abort response",
-              icon: /* @__PURE__ */ jsx(StopIcon, {}),
-              onClick: handleAbort
-            })
-          })
-        })
+        /* @__PURE__ */ jsx("span", { className: "lb-icon-container lb-tiptap-ai-toolbar-icon-container", children: /* @__PURE__ */ jsx(SparklesIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "lb-tiptap-ai-toolbar-thinking", children: [
+          aiName,
+          " is thinking\u2026"
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-actions", children: /* @__PURE__ */ jsx(ShortcutTooltip, { content: "Abort response", shortcut: "Escape", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "lb-tiptap-ai-toolbar-action",
+            variant: "secondary",
+            "aria-label": "Abort response",
+            icon: /* @__PURE__ */ jsx(StopIcon, {}),
+            onClick: handleAbort
+          }
+        ) }) })
       ]
-    })
-  });
+    }
+  ) });
 }
 function AiToolbarReviewing() {
   const { state } = useAiToolbarContext();
   const { response } = state;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      response.type === "other" ? /* @__PURE__ */ jsx("div", {
-        className: "lb-tiptap-ai-toolbar-response-container",
-        children: /* @__PURE__ */ jsx("div", {
-          className: "lb-tiptap-ai-toolbar-response",
-          children: response.text
-        })
-      }) : null,
-      /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {})
-    ]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    response.type === "other" ? /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-response-container", children: /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-response", children: response.text }) }) : null,
+    /* @__PURE__ */ jsx(AiToolbarCustomPromptContent, {})
+  ] });
 }
 function AiToolbarContainer({
   state,
@@ -382,80 +374,95 @@ function AiToolbarContainer({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [editor, state.phase]);
-  return /* @__PURE__ */ jsxs(AiToolbarContext.Provider, {
-    value: {
-      state,
-      toolbarRef,
-      dropdownRef,
-      isDropdownHidden
-    },
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        className: "lb-tiptap-ai-toolbar-container",
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            className: "lb-elevation lb-tiptap-ai-toolbar",
-            children: state.phase === "asking" ? /* @__PURE__ */ jsx(AiToolbarAsking, {}) : state.phase === "thinking" ? /* @__PURE__ */ jsx(AiToolbarThinking, {}) : state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewing, {}) : null
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            className: "lb-tiptap-ai-toolbar-halo",
-            "data-active": state.phase === "thinking" ? "" : void 0,
-            "aria-hidden": true,
-            children: [
-              /* @__PURE__ */ jsx("div", {
-                className: "lb-tiptap-ai-toolbar-halo-horizontal"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                className: "lb-tiptap-ai-toolbar-halo-vertical"
-              })
-            ]
-          })
-        ]
-      }),
-      state.phase === "asking" || state.phase === "reviewing" ? /* @__PURE__ */ jsx(Command.List, {
-        className: "lb-elevation lb-dropdown lb-tiptap-ai-toolbar-dropdown",
-        "data-hidden": isDropdownHidden ? "" : void 0,
-        ref: dropdownRef,
-        children: state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewingSuggestions, {}) : children
-      }) : null
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    AiToolbarContext.Provider,
+    {
+      value: {
+        state,
+        toolbarRef,
+        dropdownRef,
+        isDropdownHidden
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "lb-tiptap-ai-toolbar-container", children: [
+          /* @__PURE__ */ jsx("div", { className: "lb-elevation lb-tiptap-ai-toolbar", children: state.phase === "asking" ? /* @__PURE__ */ jsx(AiToolbarAsking, {}) : state.phase === "thinking" ? /* @__PURE__ */ jsx(AiToolbarThinking, {}) : state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewing, {}) : null }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "lb-tiptap-ai-toolbar-halo",
+              "data-active": state.phase === "thinking" ? "" : void 0,
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-halo-horizontal" }),
+                /* @__PURE__ */ jsx("div", { className: "lb-tiptap-ai-toolbar-halo-vertical" })
+              ]
+            }
+          )
+        ] }),
+        state.phase === "asking" || state.phase === "reviewing" ? /* @__PURE__ */ jsx(
+          Command.List,
+          {
+            className: "lb-elevation lb-dropdown lb-tiptap-ai-toolbar-dropdown",
+            "data-hidden": isDropdownHidden ? "" : void 0,
+            ref: dropdownRef,
+            children: state.phase === "reviewing" ? /* @__PURE__ */ jsx(AiToolbarReviewingSuggestions, {}) : children
+          }
+        ) : null
+      ]
+    }
+  );
 }
-const defaultSuggestions = /* @__PURE__ */ jsxs(Fragment, {
-  children: [
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+const defaultSuggestions = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(EditIcon, {}),
       prompt: "Improve the quality of the text",
       children: "Improve writing"
-    }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(CheckIcon, {}),
       prompt: "Fix spelling & grammar errors in the text",
       children: "Fix mistakes"
-    }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(ShortenIcon, {}),
       prompt: "Shorten the text, simplifying it",
       children: "Simplify"
-    }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(LengthenIcon, {}),
       prompt: "Lengthen the text, going into more detail",
       children: "Add more detail"
-    }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestionsSeparator, {}),
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+    }
+  ),
+  /* @__PURE__ */ jsx(AiToolbarSuggestionsSeparator, {}),
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(SparklesTextIcon, {}),
       prompt: "Continue writing from the text's end",
       children: "Continue writing"
-    }),
-    /* @__PURE__ */ jsx(AiToolbarSuggestion, {
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    AiToolbarSuggestion,
+    {
       icon: /* @__PURE__ */ jsx(QuestionMarkIcon, {}),
       prompt: "Explain what the text is about",
       children: "Explain"
-    })
-  ]
-});
+    }
+  )
+] });
 const AiToolbar = Object.assign(
   forwardRef(
     ({
@@ -612,45 +619,59 @@ const AiToolbar = Object.assign(
         return null;
       }
       return createPortal(
-        /* @__PURE__ */ jsx(TooltipProvider, {
-          children: /* @__PURE__ */ jsx(EditorProvider, {
-            editor,
-            children: /* @__PURE__ */ jsx(Command, {
-              role: "toolbar",
-              label: "AI toolbar",
-              "aria-orientation": "horizontal",
-              className: cn(
-                "lb-root lb-portal lb-tiptap-ai-toolbar-portal",
-                className
-              ),
-              ref: mergedRefs,
-              style: {
-                position: strategy,
-                top: 0,
-                left: 0,
-                transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)"
-              },
-              value: selectedDropdownValue,
-              onValueChange: setSelectedDropdownValue,
-              ...props,
-              children: /* @__PURE__ */ jsx(AiToolbarContainer, {
+        /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EditorProvider, { editor, children: /* @__PURE__ */ jsx(
+          Command,
+          {
+            role: "toolbar",
+            label: "AI toolbar",
+            "aria-orientation": "horizontal",
+            className: cn(
+              "lb-root lb-portal lb-tiptap-ai-toolbar-portal",
+              className
+            ),
+            ref: mergedRefs,
+            style: {
+              position: strategy,
+              top: 0,
+              left: 0,
+              transform: isPositioned ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : "translate3d(0, -200%, 0)"
+            },
+            value: selectedDropdownValue,
+            onValueChange: setSelectedDropdownValue,
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              AiToolbarContainer,
+              {
                 state,
                 dropdownRef,
                 toolbarRef,
-                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsx(Suggestions, {
-                  children: defaultSuggestions
-                }) : Suggestions
-              })
-            })
-          })
-        }),
+                children: typeof Suggestions === "function" ? /* @__PURE__ */ jsx(Suggestions, { children: defaultSuggestions }) : Suggestions
+              }
+            )
+          }
+        ) }) }),
         document.body
       );
     }
   ),
   {
+    /**
+     * @beta
+     *
+     * A prompt suggestion displayed in the AI toolbar.
+     */
     Suggestion: AiToolbarSuggestion,
+    /**
+     * @beta
+     *
+     * A label to describe a group of prompt suggestions displayed in the AI toolbar.
+     */
     SuggestionsLabel: AiToolbarSuggestionsLabel,
+    /**
+     * @beta
+     *
+     * A separator between groups of prompt suggestions displayed in the AI toolbar.
+     */
     SuggestionsSeparator: AiToolbarSuggestionsSeparator
   }
 );