@bikdotai/bik-component-library 0.0.850-beta.1 → 0.0.850-beta.3

package/dist/esm/editor/BikEditor.js

@@ -1,56 +1,57 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { getMarkRange as xt } from "../node_modules/@tiptap/core/dist/index.js";
-import { useEditor as vt, EditorContent as X } from "@tiptap/react";
-import { forwardRef as bt, useState as A, useRef as a, useEffect as Et, useImperativeHandle as At } from "react";
+import { jsxs as u, jsx as d } from "react/jsx-runtime";
+import { getMarkRange as vt } from "../node_modules/@tiptap/core/dist/index.js";
+import { useEditor as bt, EditorContent as X } from "@tiptap/react";
+import { forwardRef as Et, useState as A, useRef as a, useEffect as At, useImperativeHandle as Tt } from "react";
 import { BodyCaption as Y } from "../components/TypographyStyle.js";
-import { BikEditorShell as Tt, BikJsonHeader as Rt, BikJsonBody as It, BikJsonEmptyState as Jt, BikJsonError as Lt } from "./BikEditor.styles.js";
+import { BikEditorShell as It, BikJsonHeader as Rt, BikJsonBody as Jt, BikJsonEmptyState as Lt, BikJsonError as Mt } from "./BikEditor.styles.js";
 import { DEFAULT_FORMAT_STATE as tt } from "./BikEditor.types.js";
-import { buildJsonCodeBlockHtml as Mt, buildSectionedContent as et, normalizeHtml as i, extractActiveFormats as nt, extractContent as ot, getCodeBlockText as g, parseJson as p, extractBodyContent as Ot, extractSectionContent as Ft, setCodeBlockText as x, findSectionEndPos as rt, findSectionStartPos as zt, setSectionContentInEditor as T, insertInlineHtml as Nt } from "./BikEditor.utils.js";
-import { buildExtensions as jt } from "./extensions/buildExtensions.js";
-import { LinkBubbleMenu as Ht } from "./floating/LinkBubbleMenu.js";
-import wt from "../icons/BIK AI specific/WandSparkles.js";
-import Pt from "../icons/Actions/Formatting/Copy.js";
-import Dt from "../icons/Actions/Common actions/Code.js";
-import qt from "../icons/Informational/General/Info.js";
-function Ut(k) {
+import { buildJsonCodeBlockHtml as Ot, buildSectionedContent as et, normalizeHtml as s, extractActiveFormats as nt, extractContent as ot, getCodeBlockText as g, parseJson as p, extractBodyContent as Ft, extractSectionContent as zt, setCodeBlockText as x, findSectionEndPos as rt, findSectionStartPos as Nt, setSectionContentInEditor as T, insertInlineHtml as jt } from "./BikEditor.utils.js";
+import { buildExtensions as Ht } from "./extensions/buildExtensions.js";
+import { LinkBubbleMenu as wt } from "./floating/LinkBubbleMenu.js";
+import Pt from "../icons/BIK AI specific/WandSparkles.js";
+import Dt from "../icons/Actions/Formatting/Copy.js";
+import qt from "../icons/Actions/Common actions/Code.js";
+import Ut from "../icons/Informational/General/Info.js";
+function $t(k) {
   return Object.entries(k).map(
     ([v, C]) => `${v.replace(/([A-Z])/g, (y) => `-${y.toLowerCase()}`)}:${C}`
   ).join(";");
 }
-const $t = (k, v) => {
+const Wt = (k, v) => {
   const {
     initialContent: C,
     sections: y,
     features: B,
-    disabled: st,
-    maxCharacters: R,
-    characterLimit: it,
-    shortcuts: ct,
-    sendShortcut: at,
-    mentions: d,
+    disabled: it,
+    maxCharacters: I,
+    characterLimit: st,
+    characterLimitHard: ct,
+    shortcuts: at,
+    sendShortcut: lt,
+    mentions: l,
     slashCommands: S,
-    link: lt,
-    onPaste: dt,
-    onReady: I,
+    link: dt,
+    onPaste: ut,
+    onReady: R,
     onChange: J,
     onSend: b,
     onFocus: L,
     onBlur: M,
     onSelectionChange: O,
-    minHeight: ut,
-    maxHeight: mt,
-    style: ft,
-    className: gt,
+    minHeight: mt,
+    maxHeight: ft,
+    style: gt,
+    className: ht,
     editorClassName: F,
     editorStyle: z,
     renderJsonError: N
-  } = k, m = !!B?.jsonMode, [f, j] = A(null), [ht, H] = A(!1), [pt, w] = A(
+  } = k, m = !!B?.jsonMode, [f, j] = A(null), [pt, H] = A(!1), [Ct, w] = A(
     m && !(C ?? "").trim()
-  ), Ct = m ? Mt(C ?? "") : y?.length ? et(
-    i(C ?? ""),
-    y.map((t) => ({ ...t, content: i(t.content) }))
-  ) : i(C ?? ""), E = a([]), P = a(!1), D = a(I);
-  D.current = I;
+  ), St = m ? Ot(C ?? "") : y?.length ? et(
+    s(C ?? ""),
+    y.map((t) => ({ ...t, content: s(t.content) }))
+  ) : s(C ?? ""), E = a([]), P = a(!1), D = a(R);
+  D.current = R;
   const q = a(J);
   q.current = J;
   const U = a(O);
@@ -61,44 +62,46 @@ const $t = (k, v) => {
   V.current = M;
   const _ = a(b);
   _.current = b;
-  const Q = a(d?.agents ?? []);
-  Q.current = d?.agents ?? [];
-  const Z = a(d?.teams ?? []);
-  Z.current = d?.teams ?? [];
+  const Q = a(l?.agents ?? []);
+  Q.current = l?.agents ?? [];
+  const Z = a(l?.teams ?? []);
+  Z.current = l?.teams ?? [];
   const G = a(S?.items ?? []);
   G.current = S?.items ?? [];
-  const n = vt({
-    extensions: jt({
+  const n = bt({
+    extensions: Ht({
       features: B,
       placeholder: k.placeholder,
-      maxCharacters: R,
-      characterLimit: it,
+      maxCharacters: I,
+      characterLimit: st,
+      characterLimitHard: ct,
       hasSections: (y?.length ?? 0) > 0,
       mentions: {
-        agents: d ? Q : void 0,
-        teams: d ? Z : void 0
+        agents: l ? Q : void 0,
+        teams: l ? Z : void 0
       },
       slashCommands: S ? G : void 0,
-      onPaste: dt,
+      onPaste: ut,
       onSend: b ? (t) => _.current?.(t) : void 0,
-      sendShortcut: at,
-      shortcuts: ct,
-      onMentionSelected: d?.onSelect,
+      sendShortcut: lt,
+      shortcuts: at,
+      onMentionSelected: l?.onSelect,
       onSlashCommandSelected: S?.onSelect,
-      renderMentionItem: d?.renderItem,
-      renderMentionDropdown: d?.renderDropdown,
-      removeMentionTriggerOnDismiss: d?.removeTriggerOnDismiss,
+      renderMentionItem: l?.renderItem,
+      renderMentionDropdown: l?.renderDropdown,
+      removeMentionTriggerOnDismiss: l?.removeTriggerOnDismiss,
+      renderMentionChipIcon: l?.renderChipIcon,
       renderSlashCommandItem: S?.renderItem,
       renderSlashCommandDropdown: S?.renderDropdown
     }),
-    content: Ct,
-    editable: !st,
+    content: St,
+    editable: !it,
     immediatelyRender: !1,
     // SSR-safe — NEVER remove this
     editorProps: {
       attributes: {
         ...F ? { class: F } : {},
-        ...z ? { style: Ut(z) } : {}
+        ...z ? { style: $t(z) } : {}
       }
     },
     onUpdate: ({ editor: t }) => {
@@ -114,46 +117,46 @@ const $t = (k, v) => {
     onFocus: () => W.current?.(),
     onBlur: () => V.current?.()
   });
-  function s(t) {
+  function i(t) {
     n ? t(n) : E.current.push(t);
   }
-  Et(() => {
+  At(() => {
     if (n && (E.current.length > 0 && E.current.splice(0).forEach((e) => e(n)), P.current || (P.current = !0, D.current?.()), m)) {
       const t = g(n), e = p(t);
       j(e.valid ? null : e), w(!t.trim());
     }
-  }, [n, m]), At(
+  }, [n, m]), Tt(
     v,
     () => ({
       // ── Focus ────────────────────────────────────────────────────────
-      focus: (t) => s((e) => e.commands.focus(t)),
-      blur: () => s((t) => t.commands.blur()),
+      focus: (t) => i((e) => e.commands.focus(t)),
+      blur: () => i((t) => t.commands.blur()),
       // ── Content ──────────────────────────────────────────────────────
-      clearContent: () => s((t) => t.commands.clearContent(!0)),
+      clearContent: () => i((t) => t.commands.clearContent(!0)),
       setContent: (t) => {
-        const e = i(t);
-        s((o) => o.commands.setContent(e, { emitUpdate: !0 }));
+        const e = s(t);
+        i((o) => o.commands.setContent(e, { emitUpdate: !0 }));
       },
       insertContent: (t) => {
-        const e = i(t);
-        s((o) => o.commands.insertContent(e));
+        const e = s(t);
+        i((o) => o.commands.insertContent(e));
       },
       insertInlineContent: (t) => {
-        s((e) => Nt(e, t));
+        i((e) => jt(e, t));
       },
       insertAtStart: (t) => {
-        const e = i(t);
-        s((o) => o.commands.insertContentAt(1, e));
+        const e = s(t);
+        i((o) => o.commands.insertContentAt(1, e));
       },
       insertBlock: (t) => {
-        const e = i(t);
-        s(
+        const e = s(t);
+        i(
           (o) => o.commands.insertContentAt(o.state.doc.content.size, e)
         );
       },
       appendInline: (t) => {
-        const e = i(t);
-        s(
+        const e = s(t);
+        i(
           (o) => o.commands.insertContentAt(o.state.doc.content.size - 1, e)
         );
       },
@@ -179,8 +182,8 @@ const $t = (k, v) => {
         return { from: t, to: e };
       },
       insertAtPosition: (t, e) => {
-        const o = i(e);
-        s((r) => r.commands.insertContentAt(t, o));
+        const o = s(e);
+        i((r) => r.commands.insertContentAt(t, o));
       },
       getSelectedText: () => {
         if (!n) return "";
@@ -189,7 +192,7 @@ const $t = (k, v) => {
           return t.doc.textBetween(e, o, " ");
         const c = t.schema.marks.link;
         if (c) {
-          const h = xt(t.doc.resolve(e), c);
+          const h = vt(t.doc.resolve(e), c);
           if (h)
             return t.doc.textBetween(h.from, h.to, " ");
         }
@@ -198,16 +201,16 @@ const $t = (k, v) => {
       // ── Character count ───────────────────────────────────────────────
       getCharacterCount: () => ({
         count: n?.storage.characterCount?.characters?.() ?? n?.getText().length ?? 0,
-        limit: R ?? null
+        limit: I ?? null
       }),
       // ── Sections ─────────────────────────────────────────────────────
-      getSectionContent: (t) => n ? Ft(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getSectionContent: (t) => n ? zt(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setSectionContent: (t, e) => {
-        const o = i(e);
-        s((r) => T(r, t, o));
+        const o = s(e);
+        i((r) => T(r, t, o));
       },
       focusSection: (t) => {
-        s((e) => {
+        i((e) => {
           if (t === "body") {
             let r = e.state.doc.content.size - 1;
             e.state.doc.descendants((c, h) => (c.type.name === "sectionDivider" && r === e.state.doc.content.size - 1 && (r = h - 1), r === e.state.doc.content.size - 1)), r < 1 && (r = 1), e.chain().focus().setTextSelection(r).run();
@@ -221,27 +224,27 @@ const $t = (k, v) => {
         });
       },
       clearSection: (t) => {
-        s((e) => T(e, t, "<p></p>"));
+        i((e) => T(e, t, "<p></p>"));
       },
       // ── Convenience body shorthands ───────────────────────────────────
-      getBodyContent: () => n ? Ot(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getBodyContent: () => n ? Ft(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setBodyContent: (t) => {
-        const e = i(t);
-        s((o) => T(o, "body", e));
+        const e = s(t);
+        i((o) => T(o, "body", e));
       },
       setBodyAndSections: (t, e) => {
         const o = et(
-          i(t),
+          s(t),
           e.map((r) => ({
             id: r.id,
-            content: i(r.content)
+            content: s(r.content)
           }))
         );
-        s((r) => r.commands.setContent(o, { emitUpdate: !0 }));
+        i((r) => r.commands.setContent(o, { emitUpdate: !0 }));
       },
       appendBodyContent: (t) => {
-        const e = i(t);
-        s((o) => {
+        const e = s(t);
+        i((o) => {
           const r = rt(o, "body");
           o.commands.insertContentAt(r - 1, e, {
             parseOptions: { preserveWhitespace: !0 }
@@ -249,17 +252,17 @@ const $t = (k, v) => {
         });
       },
       insertAtSectionStart: (t, e) => {
-        const o = i(e);
-        s((r) => {
-          const c = zt(r, t);
+        const o = s(e);
+        i((r) => {
+          const c = Nt(r, t);
           c !== -1 && r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       insertAtSectionEnd: (t, e) => {
-        const o = i(e);
-        s((r) => {
+        const o = s(e);
+        i((r) => {
           const c = rt(r, t);
           r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
@@ -288,17 +291,17 @@ const $t = (k, v) => {
           n && (e !== void 0 ? n.chain().focus().extendMarkRange("link").command(({ tr: o, state: r }) => {
             const { from: c, to: h } = o.selection, K = r.schema.marks.link;
             if (!K) return !1;
-            const yt = r.schema.text(e, [
+            const Bt = r.schema.text(e, [
               K.create({ href: t })
-            ]), Bt = r.schema.text(" ");
-            return o.replaceWith(c, h, [yt, Bt]), !0;
+            ]), xt = r.schema.text(" ");
+            return o.replaceWith(c, h, [Bt, xt]), !0;
           }).run() : n.chain().focus().extendMarkRange("link").setLink({ href: t }).insertContent(" ").run());
         },
         updateLink: (t) => n?.chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
         removeLink: () => n?.chain().focus().extendMarkRange("link").unsetLink().run(),
         insertEmoji: (t) => n?.chain().focus().insertContent(t).run(),
         insertVariable: (t) => n?.chain().focus().insertContent(`{{${t}}}`).run(),
-        insertHtml: (t) => n?.commands.insertContent(i(t)),
+        insertHtml: (t) => n?.commands.insertContent(s(t)),
         undo: () => n?.chain().focus().undo().run(),
         redo: () => n?.chain().focus().redo().run(),
         canUndo: () => n?.can().undo() ?? !1,
@@ -310,14 +313,14 @@ const $t = (k, v) => {
       // ── JSON body ─────────────────────────────────────────────────────
       json: B?.jsonMode ? {
         getText: () => n ? g(n) : "",
-        setText: (t) => s((e) => x(e, t)),
+        setText: (t) => i((e) => x(e, t)),
         parse: () => p(n ? g(n) : ""),
         isValid: () => p(n ? g(n) : "").valid,
-        format: (t = 2) => s((e) => {
+        format: (t = 2) => i((e) => {
           const { valid: o, value: r } = p(g(e));
           !o || r === null || x(e, JSON.stringify(r, null, t));
         }),
-        minify: () => s((t) => {
+        minify: () => i((t) => {
           const { valid: e, value: o } = p(g(t));
           !e || o === null || x(t, JSON.stringify(o));
         })
@@ -326,55 +329,55 @@ const $t = (k, v) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [n]
   );
-  const St = () => {
+  const kt = () => {
     if (!n) return;
     const { valid: t, value: e } = p(g(n));
     !t || e === null || x(n, JSON.stringify(e, null, 2));
-  }, kt = () => {
+  }, yt = () => {
     n && (navigator.clipboard?.writeText(g(n)), H(!0), setTimeout(() => H(!1), 1500));
   };
   return n ? /* @__PURE__ */ u(
-    Tt,
+    It,
     {
-      minHeight: ut,
-      maxHeight: mt,
+      minHeight: mt,
+      maxHeight: ft,
       tightParagraphs: !B?.richPaste,
       jsonMode: m,
-      style: ft,
-      className: gt,
+      style: gt,
+      className: ht,
       children: [
         m && /* @__PURE__ */ u(Rt, { children: [
-          /* @__PURE__ */ l("span", { className: "bik-json-header-label", children: "JSON" }),
+          /* @__PURE__ */ d("span", { className: "bik-json-header-label", children: "JSON" }),
           /* @__PURE__ */ u("div", { className: "bik-json-header-actions", children: [
             /* @__PURE__ */ u(
               "button",
               {
                 type: "button",
-                onClick: St,
+                onClick: kt,
                 disabled: !!f,
                 title: "Format JSON",
                 children: [
-                  /* @__PURE__ */ l(wt, { size: 16 }),
-                  /* @__PURE__ */ l(Y, { children: "Beautify" })
+                  /* @__PURE__ */ d(Pt, { size: 16 }),
+                  /* @__PURE__ */ d(Y, { children: "Beautify" })
                 ]
               }
             ),
-            /* @__PURE__ */ u("button", { type: "button", onClick: kt, title: "Copy JSON", children: [
-              /* @__PURE__ */ l(Pt, { size: 16 }),
-              ht && /* @__PURE__ */ l(Y, { children: "Copied" })
+            /* @__PURE__ */ u("button", { type: "button", onClick: yt, title: "Copy JSON", children: [
+              /* @__PURE__ */ d(Dt, { size: 16 }),
+              pt && /* @__PURE__ */ d(Y, { children: "Copied" })
             ] })
           ] })
         ] }),
-        m ? /* @__PURE__ */ u(It, { $error: !!f, children: [
-          /* @__PURE__ */ l(X, { editor: n }),
-          pt && /* @__PURE__ */ u(Jt, { "aria-hidden": !0, children: [
-            /* @__PURE__ */ l(Dt, { size: 20 }),
-            /* @__PURE__ */ l("span", { children: k.placeholder ?? "Type or paste JSON here" })
+        m ? /* @__PURE__ */ u(Jt, { $error: !!f, children: [
+          /* @__PURE__ */ d(X, { editor: n }),
+          Ct && /* @__PURE__ */ u(Lt, { "aria-hidden": !0, children: [
+            /* @__PURE__ */ d(qt, { size: 20 }),
+            /* @__PURE__ */ d("span", { children: k.placeholder ?? "Type or paste JSON here" })
           ] })
-        ] }) : /* @__PURE__ */ l(X, { editor: n }),
-        /* @__PURE__ */ l(Ht, { editor: n, renderLinkTooltip: lt?.renderTooltip }),
-        m && f ? N ? N(f) : /* @__PURE__ */ u(Lt, { children: [
-          /* @__PURE__ */ l(qt, { size: 16 }),
+        ] }) : /* @__PURE__ */ d(X, { editor: n }),
+        /* @__PURE__ */ d(wt, { editor: n, renderLinkTooltip: dt?.renderTooltip }),
+        m && f ? N ? N(f) : /* @__PURE__ */ u(Mt, { children: [
+          /* @__PURE__ */ d(Ut, { size: 16 }),
           /* @__PURE__ */ u("span", { children: [
             f.line != null && /* @__PURE__ */ u("strong", { children: [
               "Line ",
@@ -389,11 +392,11 @@ const $t = (k, v) => {
       ]
     }
   ) : null;
-}, Wt = bt(
-  $t
+}, Vt = Et(
+  Wt
 );
-Wt.displayName = "BikEditor";
+Vt.displayName = "BikEditor";
 export {
-  Wt as BikEditor
+  Vt as BikEditor
 };
 //# sourceMappingURL=BikEditor.js.map