ritext 1.0.19 → 1.0.25

package/dist/index.d.mts

@@ -6,8 +6,10 @@ interface Props$2 {
     children?: ReactNode;
     extensions?: Extensions;
     className?: string;
+    dragHandler?: boolean;
+    showBubbleMenu?: boolean;
 }
-declare const Editor: ({ children, extensions, className }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const Editor: ({ children, extensions, className, dragHandler, showBubbleMenu }: Props$2) => react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     className?: string;

package/dist/index.d.ts

@@ -6,8 +6,10 @@ interface Props$2 {
     children?: ReactNode;
     extensions?: Extensions;
     className?: string;
+    dragHandler?: boolean;
+    showBubbleMenu?: boolean;
 }
-declare const Editor: ({ children, extensions, className }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const Editor: ({ children, extensions, className, dragHandler, showBubbleMenu }: Props$2) => react_jsx_runtime.JSX.Element;
 
 interface Props$1 {
     className?: string;

package/dist/index.js

@@ -1,10 +1,39 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,43 +64,287 @@ __export(src_exports, {
   Toolbar: () => Toolbar_default
 });
 module.exports = __toCommonJS(src_exports);
+var import_dist = require("@siamf/react-color-pick/dist/index.css");
 
 // src/lib/Editor.tsx
-var import_react2 = require("react");
-var import_react3 = require("@tiptap/react");
-var import_extension_document = __toESM(require("@tiptap/extension-document"));
-var import_extension_paragraph = __toESM(require("@tiptap/extension-paragraph"));
-var import_extension_text = __toESM(require("@tiptap/extension-text"));
+var import_react7 = require("react");
+var import_react8 = require("@tiptap/react");
 
-// src/lib/context/editor.context.tsx
-var import_react = require("react");
+// src/lib/internal_com/RiDragHandler.tsx
+var import_extension_drag_handle_react = __toESM(require("@tiptap/extension-drag-handle-react"));
+var import_react4 = require("@tiptap/react");
+var import_state = require("@tiptap/pm/state");
+
+// src/lib/icons/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var EditorContext = (0, import_react.createContext)({ editor: null });
+var DragVerticalIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "5", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "19", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "5", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "19", r: "1" })
+      ]
+    })
+  );
+};
+var PlusIcon = (_a) => {
+  var _b = _a, { size = 17, className } = _b, props = __objRest(_b, ["size", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      width: size,
+      height: size,
+      className
+    }, props), {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
+      ]
+    })
+  );
+};
+
+// src/lib/components/_com/Tooltip.tsx
+var import_react = require("react");
+var import_react2 = require("@floating-ui/react");
+var import_react3 = require("motion/react");
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Tooltip = ({ placement = "top", children, content, className }) => {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const { x, y, refs, strategy, context, placement: resolvedPlacement } = (0, import_react2.useFloating)({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    middleware: [(0, import_react2.offset)(8), (0, import_react2.flip)(), (0, import_react2.shift)({ padding: 8 })],
+    whileElementsMounted: import_react2.autoUpdate
+  });
+  const hover = (0, import_react2.useHover)(context);
+  const dismiss = (0, import_react2.useDismiss)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react2.useInteractions)([hover, dismiss]);
+  const id = (0, import_react.useId)();
+  function mergeRefs(...refsToMerge) {
+    return (node) => {
+      for (const r of refsToMerge) {
+        if (!r) continue;
+        if (typeof r === "function") r(node);
+        else r.current = node;
+      }
+    };
+  }
+  const side = resolvedPlacement.split("-")[0];
+  const enterOffset = 6;
+  const getInitial = () => {
+    switch (side) {
+      case "top":
+        return { opacity: 0, y: enterOffset };
+      case "bottom":
+        return { opacity: 0, y: -enterOffset };
+      case "left":
+        return { opacity: 0, x: enterOffset };
+      case "right":
+        return { opacity: 0, x: -enterOffset };
+      default:
+        return { opacity: 0 };
+    }
+  };
+  const getExit = () => __spreadProps(__spreadValues({}, getInitial()), { opacity: 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Fragment, { children: [
+    (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(children, __spreadProps(__spreadValues({}, getReferenceProps({
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      "aria-describedby": open ? id : void 0
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+    })), {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      ref: mergeRefs(children.props.ref, refs.setReference)
+    })) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react3.motion.div,
+      __spreadProps(__spreadValues({
+        ref: refs.setFloating
+      }, getFloatingProps({
+        role: "tooltip",
+        id,
+        style: {
+          position: strategy,
+          top: y != null ? y : 0,
+          left: x != null ? x : 0,
+          pointerEvents: "none"
+        }
+      })), {
+        initial: getInitial(),
+        animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+        exit: getExit(),
+        transition: { type: "spring", stiffness: 420, damping: 30, mass: 0.6 },
+        className: (0, import_tailwind_merge.twMerge)("bg-white border border-solid border-gray-200/50 py-1 px-3 rounded-lg text-sm shadow-lg shadow-gray-50 text-center", className),
+        children: content
+      }),
+      "tooltip"
+    ) }) })
+  ] });
+};
+var Tooltip_default = Tooltip;
+
+// src/lib/internal_com/RiDragHandler.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var isDocEmpty = (editor) => {
+  var _a;
+  const doc = editor.state.doc;
+  return doc.childCount === 1 && ((_a = doc.firstChild) == null ? void 0 : _a.isTextblock) === true && doc.firstChild.content.size === 0;
+};
+var RiDragHandler = ({ editor }) => {
+  const empty = (0, import_react4.useEditorState)({
+    editor,
+    selector: ({ editor: editor2 }) => isDocEmpty(editor2)
+  });
+  const insertSlash = () => {
+    editor.chain().focus().command(({ tr, state }) => {
+      const { $from } = state.selection;
+      let blockDepth = $from.depth;
+      while (blockDepth > 0 && !$from.node(blockDepth).isBlock) blockDepth--;
+      const blockNode = $from.node(blockDepth);
+      const isEmptyBlock = blockNode.isTextblock && blockNode.content.size === 0;
+      if (isEmptyBlock) {
+        tr.insertText("/", state.selection.from, state.selection.to);
+        tr.setSelection(import_state.TextSelection.create(tr.doc, state.selection.from + 1));
+        return true;
+      }
+      const insertPos = $from.after(blockDepth);
+      const paragraph = state.schema.nodes.paragraph;
+      const text = state.schema.text("/");
+      if (!paragraph) return false;
+      tr.insert(insertPos, paragraph.create(null, text));
+      tr.setSelection(import_state.TextSelection.create(tr.doc, insertPos + 2));
+      return true;
+    }).run();
+  };
+  if (empty) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_extension_drag_handle_react.default, { editor, nested: empty, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-x-1.5 mt-1.5 -translate-x-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip_default, { content: "Insert Content", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        draggable: false,
+        onDragStart: (e) => e.preventDefault(),
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          insertSlash();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlusIcon, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Tooltip_default, { content: "Drag for move", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DragVerticalIcon, { size: 16 }) }) })
+  ] }) });
+};
+var RiDragHandler_default = RiDragHandler;
+
+// src/lib/internal_com/BubbleMenu.tsx
+var import_react5 = require("react");
+var import_menus = require("@tiptap/react/menus");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BubbleMenu = ({ editor }) => {
+  const entries = editor.extensionManager.extensions.map((ext) => {
+    var _a, _b, _c;
+    const anyExt = ext;
+    const renderButton = (_a = anyExt.options) == null ? void 0 : _a.component;
+    if (!renderButton || !((_b = anyExt.options) == null ? void 0 : _b.showInBubbleMenu)) return null;
+    return {
+      name: anyExt.name,
+      renderButton,
+      options: anyExt.options,
+      buttonClassName: anyExt.buttonClassName,
+      dropdownContainerClassName: anyExt.dropdownContainerClassName,
+      dropdownItemClassName: anyExt.dropdownItemClassName,
+      bubbleMenuPosition: (_c = anyExt.options) == null ? void 0 : _c.bubbleMenuPosition
+    };
+  }).filter(Boolean);
+  const desiredOrder = new Map(
+    editor.options.extensions.map((ext, i) => [ext.name, i])
+  );
+  entries.sort((a, b) => {
+    var _a, _b;
+    const ap = typeof a.bubbleMenuPosition === "number" ? a.bubbleMenuPosition : Number.POSITIVE_INFINITY;
+    const bp = typeof b.bubbleMenuPosition === "number" ? b.bubbleMenuPosition : Number.POSITIVE_INFINITY;
+    if (ap !== bp) return ap - bp;
+    const ai = (_a = desiredOrder.get(a.name)) != null ? _a : Number.MAX_SAFE_INTEGER;
+    const bi = (_b = desiredOrder.get(b.name)) != null ? _b : Number.MAX_SAFE_INTEGER;
+    if (ai !== bi) return ai - bi;
+    return a.name.localeCompare(b.name);
+  });
+  if (!entries.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menus.BubbleMenu, { editor, options: { placement: "top", offset: 10, flip: true }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-white flex gap-x-1 py-2 px-2 rounded-md border border-gray-200", children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Fragment, { children: renderButton({
+    editor,
+    options,
+    buttonClassName: "",
+    dropdownContainerClassName: "",
+    dropdownItemClassName: ""
+  }) }, name)) }) });
+};
+var BubbleMenu_default = BubbleMenu;
+
+// src/lib/context/editor.context.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var EditorContext = (0, import_react6.createContext)({ editor: null });
 var useEditor = () => {
-  const ctx = (0, import_react.useContext)(EditorContext);
+  const ctx = (0, import_react6.useContext)(EditorContext);
   if (!ctx) throw new Error("<Toolbar/> & <Content/> component must be used inside <Editor>...</Editor/>");
   return ctx;
 };
 var EditorProvider = ({ children, value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(EditorContext.Provider, { value, children });
 };
 
 // src/lib/Editor.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Editor = ({ children, extensions = [], className }) => {
-  const editor = (0, import_react3.useEditor)({
-    extensions: [import_extension_document.default, import_extension_paragraph.default, import_extension_text.default, ...extensions],
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Editor = ({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true }) => {
+  const editor = (0, import_react8.useEditor)({
+    extensions: [...extensions],
     immediatelyRender: false
   });
-  const value = (0, import_react2.useMemo)(() => ({ editor }), [editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorProvider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children }) });
+  const value = (0, import_react7.useMemo)(() => ({ editor }), [editor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(EditorProvider, { value: __spreadProps(__spreadValues({}, value), { dragHandler }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, children }),
+    value.editor && dragHandler && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RiDragHandler_default, { editor: value.editor }),
+    value.editor && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BubbleMenu_default, { editor: value.editor })
+  ] });
 };
 var Editor_default = Editor;
 
 // src/lib/Toolbar.tsx
 var React = __toESM(require("react"));
-var import_tailwind_merge = require("tailwind-merge");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Toolbar = ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }) => {
   const { editor } = useEditor();
   if (!editor) return null;
@@ -91,7 +364,16 @@ var Toolbar = ({ className, buttonClassName, dropdownContainerClassName, dropdow
       dropdownItemClassName: anyExt.dropdownItemClassName
     } : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_tailwind_merge.twMerge)("flex gap-x-1", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(React.Fragment, { children: renderButton({
+  const desiredOrder = new Map(
+    editor.options.extensions.map((ext, i) => [ext.name, i])
+  );
+  entries.sort((a, b) => {
+    var _a, _b;
+    const ai = (_a = desiredOrder.get(a.name)) != null ? _a : Number.MAX_SAFE_INTEGER;
+    const bi = (_b = desiredOrder.get(b.name)) != null ? _b : Number.MAX_SAFE_INTEGER;
+    return ai - bi;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_tailwind_merge2.twMerge)("flex gap-x-1 flex-wrap", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(React.Fragment, { children: renderButton({
     editor,
     options,
     buttonClassName: buttonClassName || "",
@@ -102,12 +384,12 @@ var Toolbar = ({ className, buttonClassName, dropdownContainerClassName, dropdow
 var Toolbar_default = Toolbar;
 
 // src/lib/Content.tsx
-var import_react4 = require("@tiptap/react");
-var import_tailwind_merge2 = require("tailwind-merge");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react9 = require("@tiptap/react");
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var Content = ({ className }) => {
-  const { editor } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.EditorContent, { editor, className: (0, import_tailwind_merge2.twMerge)("focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-[200px] [&_.tiptap]:p-[10px_20px]", className) });
+  const { editor, dragHandler } = useEditor();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react9.EditorContent, { editor, className: (0, import_tailwind_merge3.twMerge)(`focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-50 ${dragHandler ? "[&_.tiptap]:p-[10px_20px_10px_50px]" : "[&_.tiptap]:p-[10px_20px]"}`, className) });
 };
 var Content_default = Content;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -2,29 +2,148 @@ import {
   EditorProvider,
   useEditor
 } from "./chunk-VYDH6BZE.mjs";
-import "./chunk-FWCSY2DS.mjs";
+import {
+  DragVerticalIcon,
+  PlusIcon,
+  Tooltip_default
+} from "./chunk-EN4BPI7N.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-WNQUEZJF.mjs";
+
+// src/index.ts
+import "@siamf/react-color-pick/dist/index.css";
 
 // src/lib/Editor.tsx
 import { useMemo } from "react";
 import { useEditor as useEditor2 } from "@tiptap/react";
-import Document from "@tiptap/extension-document";
-import Paragraph from "@tiptap/extension-paragraph";
-import Text from "@tiptap/extension-text";
-import { jsx } from "react/jsx-runtime";
-var Editor = ({ children, extensions = [], className }) => {
+
+// src/lib/internal_com/RiDragHandler.tsx
+import DragHandle from "@tiptap/extension-drag-handle-react";
+import { useEditorState } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import { jsx, jsxs } from "react/jsx-runtime";
+var isDocEmpty = (editor) => {
+  var _a;
+  const doc = editor.state.doc;
+  return doc.childCount === 1 && ((_a = doc.firstChild) == null ? void 0 : _a.isTextblock) === true && doc.firstChild.content.size === 0;
+};
+var RiDragHandler = ({ editor }) => {
+  const empty = useEditorState({
+    editor,
+    selector: ({ editor: editor2 }) => isDocEmpty(editor2)
+  });
+  const insertSlash = () => {
+    editor.chain().focus().command(({ tr, state }) => {
+      const { $from } = state.selection;
+      let blockDepth = $from.depth;
+      while (blockDepth > 0 && !$from.node(blockDepth).isBlock) blockDepth--;
+      const blockNode = $from.node(blockDepth);
+      const isEmptyBlock = blockNode.isTextblock && blockNode.content.size === 0;
+      if (isEmptyBlock) {
+        tr.insertText("/", state.selection.from, state.selection.to);
+        tr.setSelection(TextSelection.create(tr.doc, state.selection.from + 1));
+        return true;
+      }
+      const insertPos = $from.after(blockDepth);
+      const paragraph = state.schema.nodes.paragraph;
+      const text = state.schema.text("/");
+      if (!paragraph) return false;
+      tr.insert(insertPos, paragraph.create(null, text));
+      tr.setSelection(TextSelection.create(tr.doc, insertPos + 2));
+      return true;
+    }).run();
+  };
+  if (empty) return null;
+  return /* @__PURE__ */ jsx(DragHandle, { editor, nested: empty, children: /* @__PURE__ */ jsxs("div", { className: "flex gap-x-1.5 mt-1.5 -translate-x-1.5", children: [
+    /* @__PURE__ */ jsx(Tooltip_default, { content: "Insert Content", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        draggable: false,
+        onDragStart: (e) => e.preventDefault(),
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          insertSlash();
+        },
+        children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip_default, { content: "Drag for move", children: /* @__PURE__ */ jsx("button", { type: "button", children: /* @__PURE__ */ jsx(DragVerticalIcon, { size: 16 }) }) })
+  ] }) });
+};
+var RiDragHandler_default = RiDragHandler;
+
+// src/lib/internal_com/BubbleMenu.tsx
+import { Fragment } from "react";
+import { BubbleMenu as TiptapBubbleMenu } from "@tiptap/react/menus";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BubbleMenu = ({ editor }) => {
+  const entries = editor.extensionManager.extensions.map((ext) => {
+    var _a, _b, _c;
+    const anyExt = ext;
+    const renderButton = (_a = anyExt.options) == null ? void 0 : _a.component;
+    if (!renderButton || !((_b = anyExt.options) == null ? void 0 : _b.showInBubbleMenu)) return null;
+    return {
+      name: anyExt.name,
+      renderButton,
+      options: anyExt.options,
+      buttonClassName: anyExt.buttonClassName,
+      dropdownContainerClassName: anyExt.dropdownContainerClassName,
+      dropdownItemClassName: anyExt.dropdownItemClassName,
+      bubbleMenuPosition: (_c = anyExt.options) == null ? void 0 : _c.bubbleMenuPosition
+    };
+  }).filter(Boolean);
+  const desiredOrder = new Map(
+    editor.options.extensions.map((ext, i) => [ext.name, i])
+  );
+  entries.sort((a, b) => {
+    var _a, _b;
+    const ap = typeof a.bubbleMenuPosition === "number" ? a.bubbleMenuPosition : Number.POSITIVE_INFINITY;
+    const bp = typeof b.bubbleMenuPosition === "number" ? b.bubbleMenuPosition : Number.POSITIVE_INFINITY;
+    if (ap !== bp) return ap - bp;
+    const ai = (_a = desiredOrder.get(a.name)) != null ? _a : Number.MAX_SAFE_INTEGER;
+    const bi = (_b = desiredOrder.get(b.name)) != null ? _b : Number.MAX_SAFE_INTEGER;
+    if (ai !== bi) return ai - bi;
+    return a.name.localeCompare(b.name);
+  });
+  if (!entries.length) return null;
+  return /* @__PURE__ */ jsx2(TiptapBubbleMenu, { editor, options: { placement: "top", offset: 10, flip: true }, children: /* @__PURE__ */ jsx2("div", { className: "bg-white flex gap-x-1 py-2 px-2 rounded-md border border-gray-200", children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ jsx2(Fragment, { children: renderButton({
+    editor,
+    options,
+    buttonClassName: "",
+    dropdownContainerClassName: "",
+    dropdownItemClassName: ""
+  }) }, name)) }) });
+};
+var BubbleMenu_default = BubbleMenu;
+
+// src/lib/Editor.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Editor = ({ children, extensions = [], className, dragHandler = true, showBubbleMenu = true }) => {
   const editor = useEditor2({
-    extensions: [Document, Paragraph, Text, ...extensions],
+    extensions: [...extensions],
     immediatelyRender: false
   });
   const value = useMemo(() => ({ editor }), [editor]);
-  return /* @__PURE__ */ jsx(EditorProvider, { value, children: /* @__PURE__ */ jsx("div", { className, children }) });
+  return /* @__PURE__ */ jsxs2(EditorProvider, { value: __spreadProps(__spreadValues({}, value), { dragHandler }), children: [
+    /* @__PURE__ */ jsx3("div", { className, children }),
+    value.editor && dragHandler && /* @__PURE__ */ jsx3(RiDragHandler_default, { editor: value.editor }),
+    value.editor && showBubbleMenu && /* @__PURE__ */ jsx3(BubbleMenu_default, { editor: value.editor })
+  ] });
 };
 var Editor_default = Editor;
 
 // src/lib/Toolbar.tsx
 import * as React from "react";
 import { twMerge } from "tailwind-merge";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Toolbar = ({ className, buttonClassName, dropdownContainerClassName, dropdownItemClassName }) => {
   const { editor } = useEditor();
   if (!editor) return null;
@@ -44,7 +163,16 @@ var Toolbar = ({ className, buttonClassName, dropdownContainerClassName, dropdow
       dropdownItemClassName: anyExt.dropdownItemClassName
     } : null;
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx2("div", { className: twMerge("flex gap-x-1", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ jsx2(React.Fragment, { children: renderButton({
+  const desiredOrder = new Map(
+    editor.options.extensions.map((ext, i) => [ext.name, i])
+  );
+  entries.sort((a, b) => {
+    var _a, _b;
+    const ai = (_a = desiredOrder.get(a.name)) != null ? _a : Number.MAX_SAFE_INTEGER;
+    const bi = (_b = desiredOrder.get(b.name)) != null ? _b : Number.MAX_SAFE_INTEGER;
+    return ai - bi;
+  });
+  return /* @__PURE__ */ jsx4("div", { className: twMerge("flex gap-x-1 flex-wrap", className), children: entries.map(({ name, renderButton, options }) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderButton({
     editor,
     options,
     buttonClassName: buttonClassName || "",
@@ -57,10 +185,10 @@ var Toolbar_default = Toolbar;
 // src/lib/Content.tsx
 import { EditorContent } from "@tiptap/react";
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Content = ({ className }) => {
-  const { editor } = useEditor();
-  return /* @__PURE__ */ jsx3(EditorContent, { editor, className: twMerge2("focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-[200px] [&_.tiptap]:p-[10px_20px]", className) });
+  const { editor, dragHandler } = useEditor();
+  return /* @__PURE__ */ jsx5(EditorContent, { editor, className: twMerge2(`focus:outline-none [&_.tiptap]:focus:outline-none [&_.tiptap]:min-h-50 ${dragHandler ? "[&_.tiptap]:p-[10px_20px_10px_50px]" : "[&_.tiptap]:p-[10px_20px]"}`, className) });
 };
 var Content_default = Content;
 export {

package/dist/tiptap-ext.type-B3TtT7-J.d.mts

@@ -0,0 +1,43 @@
+import { ReactNode, CSSProperties } from 'react';
+import { Placement } from '@floating-ui/react';
+import { Editor } from '@tiptap/react';
+
+type ExtButtonBaseOptions = {
+    className?: string;
+    activeClassName?: string;
+    icon?: ReactNode;
+    style?: CSSProperties;
+    tooltip?: boolean | string;
+    tooltipClassName?: string;
+    tooltipPlacement?: Placement;
+};
+type ExtDropdownBaseOptions = {
+    className?: string;
+    showArrow?: boolean;
+    content?: ReactNode;
+    dropdownClassName?: string;
+    itemClassName?: string;
+    activeClassName?: string;
+    style?: CSSProperties;
+    tooltip?: boolean | string;
+    tooltipClassName?: string;
+    tooltipPlacement?: Placement;
+};
+type ExtButtonComponentArgs<O, Extra extends object = {}> = {
+    options: O;
+    editor: Editor;
+    buttonClassName: string;
+} & Extra;
+type ExtDropdownComponentArgs<O, Extra extends object = {}> = {
+    options: O;
+    editor: Editor;
+} & Extra;
+type ExtButtonOptions<RootExtra extends object = {}, ComponentExtra extends object = {}, Base extends object = ExtButtonBaseOptions> = Base & RootExtra & {
+    component: (args: ExtButtonComponentArgs<Base & RootExtra, ComponentExtra>) => ReactNode;
+};
+type ExtDropdownOptions<RootExtra extends object = {}, ComponentExtra extends object = {}, Base extends object = ExtDropdownBaseOptions> = Base & RootExtra & {
+    component: (args: ExtDropdownComponentArgs<Base & RootExtra, ComponentExtra>) => ReactNode;
+};
+type ExtWithoutActiveOptions<RootExtra extends object = {}, ComponentExtra extends object = {}> = ExtButtonOptions<RootExtra, ComponentExtra, Omit<ExtButtonBaseOptions, "activeClassName">>;
+
+export type { ExtButtonOptions as E, ExtDropdownOptions as a, ExtWithoutActiveOptions as b };