@elia-ori/editor 0.1.18 → 0.1.20

package/dist/index.cjs

@@ -37,8 +37,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/tiptap-templates/simple/simple-editor.tsx
-var import_react85 = require("react");
-var import_react86 = require("@tiptap/react");
+var import_react86 = require("react");
+var import_react87 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
 var import_extension_list = require("@tiptap/extension-list");
 var import_extension_text_align = require("@tiptap/extension-text-align");
@@ -2029,7 +2029,7 @@ var DropdownMenuSubContent = (0, import_react27.forwardRef)(({ className, portal
   return portal ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuPortal, { ...typeof portal === "object" ? portal : {}, children: content }) : content;
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = (0, import_react27.forwardRef)(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
+var DropdownMenuContent = (0, import_react27.forwardRef)(({ className, sideOffset = 4, portal = true, ...props }, ref) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     DropdownMenuPrimitive.Content,
     {
@@ -2118,7 +2118,7 @@ var HeadingDropdownMenu = (0, import_react29.forwardRef)(
     editor: providedEditor,
     levels = [1, 2, 3, 4, 5, 6],
     hideWhenUnavailable = false,
-    portal = false,
+    portal = true,
     onOpenChange,
     ...buttonProps
   }, ref) => {
@@ -3016,7 +3016,7 @@ function ListDropdownMenu({
   types = ["bulletList", "orderedList", "taskList"],
   hideWhenUnavailable = false,
   onOpenChange,
-  portal = false,
+  portal = true,
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
@@ -5545,7 +5545,7 @@ var CALLOUT_OPTIONS = [
   { type: "error", label: "\u932F\u8AA4\u63D0\u793A", className: "callout-option--error" },
   { type: "info", label: "\u8CC7\u8A0A\u63D0\u793A", className: "callout-option--info" }
 ];
-function CalloutButton({ portal = false }) {
+function CalloutButton({ portal = true }) {
   const { editor } = useTiptapEditor();
   const [isOpen, setIsOpen] = React.useState(false);
   const [isVisible, setIsVisible] = React.useState(true);
@@ -5614,7 +5614,7 @@ var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var GRID_SIZE = 6;
 var TOTAL_CELLS = GRID_SIZE * GRID_SIZE;
-function TableButton({ portal = false }) {
+function TableButton({ portal = true }) {
   const { editor } = useTiptapEditor();
   const [isOpen, setIsOpen] = React2.useState(false);
   const [isVisible, setIsVisible] = React2.useState(true);
@@ -5754,7 +5754,7 @@ var TEXT_COLORS = [
   { color: "var(--tt-color-text-pink)", label: "\u7C89\u7D05", className: "text-color--pink" },
   { color: "var(--tt-color-text-red)", label: "\u7D05\u8272", className: "text-color--red" }
 ];
-function TextColorButton({ portal = false }) {
+function TextColorButton({ portal = true }) {
   const { editor } = useTiptapEditor();
   const [isOpen, setIsOpen] = React3.useState(false);
   const [isVisible, setIsVisible] = React3.useState(true);
@@ -6061,6 +6061,35 @@ function useCursorVisibility({
   return rect;
 }
 
+// src/hooks/use-auto-height.ts
+var import_react85 = require("react");
+function useAutoHeight(containerRef, options) {
+  const { enabled, bottomOffset = 24, minHeight = 200 } = options;
+  const [height, setHeight] = (0, import_react85.useState)(void 0);
+  const calculateHeight = (0, import_react85.useCallback)(() => {
+    if (!enabled || !containerRef.current) {
+      setHeight(void 0);
+      return;
+    }
+    const rect = containerRef.current.getBoundingClientRect();
+    const availableHeight = window.innerHeight - rect.top - bottomOffset;
+    const finalHeight = Math.max(availableHeight, minHeight);
+    setHeight(finalHeight);
+  }, [enabled, bottomOffset, minHeight, containerRef]);
+  (0, import_react85.useEffect)(() => {
+    if (!enabled) {
+      setHeight(void 0);
+      return;
+    }
+    calculateHeight();
+    window.addEventListener("resize", calculateHeight);
+    return () => {
+      window.removeEventListener("resize", calculateHeight);
+    };
+  }, [enabled, calculateHeight]);
+  return height;
+}
+
 // src/components/tiptap-templates/simple/simple-editor.tsx
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
@@ -6159,24 +6188,33 @@ function EliaEditor({
   editorClassName,
   autofocus = false,
   readOnly = false,
-  embedded = false
+  embedded = false,
+  autoHeight = false,
+  bottomOffset = 24,
+  minHeight = 200
 }) {
   const isMobile = useIsBreakpoint();
   const { height } = useWindowSize();
-  const [mobileView, setMobileView] = (0, import_react85.useState)(
+  const [mobileView, setMobileView] = (0, import_react86.useState)(
     "main"
   );
-  const toolbarRef = (0, import_react85.useRef)(null);
-  const isInternalUpdate = (0, import_react85.useRef)(false);
+  const toolbarRef = (0, import_react86.useRef)(null);
+  const containerRef = (0, import_react86.useRef)(null);
+  const isInternalUpdate = (0, import_react86.useRef)(false);
+  const computedHeight = useAutoHeight(containerRef, {
+    enabled: embedded && autoHeight,
+    bottomOffset,
+    minHeight
+  });
   const uploadFn = onImageUpload || handleImageUpload;
-  const handleUpdate = (0, import_react85.useCallback)(
+  const handleUpdate = (0, import_react86.useCallback)(
     ({ editor: editor2 }) => {
       isInternalUpdate.current = true;
       onChange?.(editor2.getHTML());
     },
     [onChange]
   );
-  const editor = (0, import_react86.useEditor)({
+  const editor = (0, import_react87.useEditor)({
     immediatelyRender: false,
     editorProps: {
       attributes: {
@@ -6237,58 +6275,66 @@ function EliaEditor({
     editor,
     overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0
   });
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (!isMobile && mobileView !== "main") {
       setMobileView("main");
     }
   }, [isMobile, mobileView]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (editor && !isInternalUpdate.current && content !== editor.getHTML()) {
       editor.commands.setContent(content);
     }
     isInternalUpdate.current = false;
   }, [content, editor]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (editor) {
       editor.setEditable(!readOnly);
     }
   }, [readOnly, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cn("simple-editor-wrapper", embedded && "simple-editor-embedded", className), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react86.EditorContext.Provider, { value: { editor }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      Toolbar,
-      {
-        ref: toolbarRef,
-        style: {
-          ...isMobile && !embedded ? {
-            bottom: `calc(100% - ${height - rect.y}px)`
-          } : {}
-        },
-        children: mobileView === "main" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          MainToolbarContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("simple-editor-wrapper", embedded && "simple-editor-embedded", className),
+      style: computedHeight ? { height: computedHeight } : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react87.EditorContext.Provider, { value: { editor }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          Toolbar,
           {
-            onHighlighterClick: () => setMobileView("highlighter"),
-            onLinkClick: () => setMobileView("link"),
-            isMobile,
-            toolbar
+            ref: toolbarRef,
+            style: {
+              ...isMobile && !embedded ? {
+                bottom: `calc(100% - ${height - rect.y}px)`
+              } : {}
+            },
+            children: mobileView === "main" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              MainToolbarContent,
+              {
+                onHighlighterClick: () => setMobileView("highlighter"),
+                onLinkClick: () => setMobileView("link"),
+                isMobile,
+                toolbar
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              MobileToolbarContent,
+              {
+                type: mobileView === "highlighter" ? "highlighter" : "link",
+                onBack: () => setMobileView("main")
+              }
+            )
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          MobileToolbarContent,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          import_react87.EditorContent,
           {
-            type: mobileView === "highlighter" ? "highlighter" : "link",
-            onBack: () => setMobileView("main")
+            editor,
+            role: "presentation",
+            className: "simple-editor-content"
           }
         )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      import_react86.EditorContent,
-      {
-        editor,
-        role: "presentation",
-        className: "simple-editor-content"
-      }
-    )
-  ] }) });
+      ] })
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {