@tempots/beatui 0.95.0 → 1.0.0

package/dist/prosemirror/index.es.js

@@ -1,6 +1,638 @@
-import { D as a, P as s, b as e } from "../index-vowHNIPH.js";
+import { prop as U, Fragment as pe, OnDispose as x, Ensure as F, signal as z, Use as O, When as w, Repeat as fe, Value as p, computedOf as K, html as G, Task as ke, attr as g, WithElement as he } from "@tempots/dom";
+import { a as be, T as ge, b as ye } from "../toolbar-DY0ax2Qd.js";
+import { toggleMark as T, setBlockType as V, lift as $e, wrapIn as Me, baseKeymap as Le } from "prosemirror-commands";
+import { E as b, a as S } from "../editor-toolbar-group-Crlu1QJw.js";
+import { T as _e } from "../text-input-DfqXolVe.js";
+import { B as Be } from "../translations-B1_yyDUK.js";
+import { L as Se } from "../link-portal-Cr2l9f3k.js";
+import { EditorState as J, Plugin as Te } from "prosemirror-state";
+import { EditorView as Ee } from "prosemirror-view";
+import { Schema as ve } from "prosemirror-model";
+import { schema as qe } from "prosemirror-schema-basic";
+import { defaultMarkdownSerializer as P, MarkdownParser as Ce, defaultMarkdownParser as D } from "prosemirror-markdown";
+import Ie from "markdown-it";
+import { history as Pe, redo as Q, undo as Ae } from "prosemirror-history";
+import { keymap as A } from "prosemirror-keymap";
+import { ticker as Re } from "@tempots/ui";
+import { T as xe } from "../theme-kQZEeusG.js";
+function ee(e, t) {
+  return te(e, t) != null;
+}
+function te(e, t) {
+  const { from: o, $from: r, to: l, empty: s } = e.selection;
+  if (!t) return null;
+  if (s) {
+    if (e.storedMarks) {
+      const m = e.storedMarks.find(
+        (y) => y.type.name === t.name
+      );
+      if (m != null) return m;
+    }
+    const n = r.marks().find((m) => m.type.name === t.name);
+    if (n != null) return n;
+    const a = r.nodeAfter;
+    if (a && a.marks) {
+      const m = a.marks.find((y) => y.type.name === t.name);
+      if (m != null) return m;
+    }
+    return null;
+  }
+  let i = null;
+  return e.doc.nodesBetween(o, l, (c) => {
+    if (i != null) return !1;
+    if (c.marks) {
+      const n = c.marks.find((a) => a.type.name === t.name);
+      if (n != null)
+        return i = n, !1;
+    }
+  }), i;
+}
+function E(e, t, o) {
+  return e.map(() => {
+    const r = t.value, l = r.state.schema.marks[o];
+    return ee(r.state, l);
+  });
+}
+function Fe(e, t, o) {
+  const { $from: r } = e.selection;
+  for (let s = r.depth; s > 0; s--) {
+    const i = r.node(s);
+    if (i.type.name === t.name)
+      return o != null ? Object.keys(o).every((c) => i.attrs[c] === o[c]) : !0;
+  }
+  const l = e.doc.nodeAt(r.pos);
+  return l && l.type.name === t.name ? o != null ? Object.keys(o).every((s) => l.attrs[s] === o[s]) : !0 : !1;
+}
+function M(e, t, o, r) {
+  return e.map(() => {
+    const l = t.value, s = l.state.schema.nodes[o];
+    return s ? Fe(l.state, s, r) : !1;
+  });
+}
+function ze(e, t) {
+  const o = e.state.schema.marks.link;
+  if (o == null) return;
+  const { from: r, to: l } = e.state.selection, s = e.state.tr.addMark(
+    r,
+    l,
+    o.create({ href: t, title: null })
+  );
+  e.dispatch(s), e.focus();
+}
+function oe(e) {
+  const { state: t } = e, { $from: o, $to: r } = t.selection;
+  if (!ne(t)) return null;
+  let l = o.pos, s = r.pos;
+  const i = t.doc;
+  for (; l > 0 && i.resolve(l - 1).nodeAfter?.marks?.some((a) => a.type.name === "link"); )
+    l--;
+  for (; s < i.content.size && i.resolve(s).nodeAfter?.marks?.some((a) => a.type.name === "link"); )
+    s++;
+  return { start: l, end: s };
+}
+function Ve(e, t) {
+  const o = e.state.schema.marks.link;
+  if (o == null) return;
+  const r = oe(e);
+  if (r == null) return;
+  const { start: l, end: s } = r, i = e.state.tr.removeMark(l, s, o).addMark(l, s, o.create({ href: t, title: null }));
+  e.dispatch(i);
+}
+function De(e) {
+  const t = e.state.schema.marks.link;
+  if (t == null) return;
+  const o = oe(e);
+  if (o == null) return;
+  const { start: r, end: l } = o, s = e.state.tr.removeMark(r, l, t);
+  e.dispatch(s), e.focus();
+}
+function ne(e) {
+  return ee(e, e.schema.marks.link);
+}
+function He({
+  stateUpdate: e,
+  view: t,
+  isReadOnly: o,
+  label: r,
+  // linkDialogTitle,
+  linkUrlPlaceholder: l,
+  // linkDialogSave,
+  // linkDialogCancel,
+  // linkDialogRemoveLink,
+  size: s
+}) {
+  const i = U(null);
+  i.on((n) => {
+    n != null && Ve(t.value, n);
+  });
+  const c = e.on(() => {
+    const n = te(
+      t.value.state,
+      t.value.state.schema.marks.link
+    );
+    n != null ? i.set(n.attrs.href ?? "") : i.set(null);
+  });
+  return pe(
+    x(c),
+    be(
+      {},
+      b({
+        display: z(!0),
+        active: E(e, t, "link"),
+        disabled: o,
+        label: r,
+        icon: "mdi:link-variant",
+        size: s,
+        onClick: () => {
+          const n = t.value.state;
+          ne(n) ? (De(t.value), i.set(null)) : (ze(t.value, ""), i.set(""));
+        }
+      }),
+      F(
+        i,
+        (n) => _e({
+          value: n,
+          autofocus: !0,
+          onInput: (a) => i.set(a),
+          placeholder: l,
+          size: s
+        })
+      )
+    ),
+    F(
+      i,
+      (n) => ge(
+        {
+          disabled: n.map((a) => a.trim() === ""),
+          variant: "text",
+          onClick: () => {
+            const a = i.value;
+            a && window.open(a, "_blank");
+          },
+          size: s
+        },
+        "go"
+      )
+    )
+  );
+}
+function Ne({
+  view: e,
+  stateUpdate: t,
+  features: o,
+  readOnly: r = z(!1),
+  size: l = "sm"
+}) {
+  return F(
+    e,
+    (s) => O(Be, (i) => {
+      const c = i.$.prosemirror, n = s;
+      return ye(
+        {},
+        // Text formatting group
+        S(
+          { display: [o.$.bold, o.$.italic, o.$.code] },
+          b({
+            active: E(t, n, "strong"),
+            display: o.$.bold,
+            onClick: () => R(n.value, "strong"),
+            disabled: r,
+            label: c.$.bold,
+            icon: "mdi:format-bold",
+            size: l
+          }),
+          b({
+            active: E(t, n, "em"),
+            display: o.$.italic,
+            onClick: () => R(n.value, "em"),
+            disabled: r,
+            label: c.$.italic,
+            icon: "mdi:format-italic",
+            size: l
+          }),
+          b({
+            active: E(t, n, "code"),
+            display: o.$.code,
+            onClick: () => R(n.value, "code"),
+            disabled: r,
+            label: c.$.code,
+            icon: "mdi:code-tags",
+            size: l
+          })
+        ),
+        // Headings group
+        S(
+          { display: [o.$.headings] },
+          fe(
+            o.$.headerLevels.map(
+              (a) => Math.min(Math.max(a, 1), 6)
+            ),
+            ({ counter: a }) => b({
+              active: M(t, n, "heading", {
+                level: a
+              }),
+              display: o.$.headings,
+              onClick: () => je(n.value, a),
+              disabled: r,
+              label: c.map((m) => m.heading(a)),
+              icon: `mdi:format-header-${a}`,
+              size: l
+            })
+          )
+        ),
+        // Lists group
+        S(
+          { display: [o.$.bulletList, o.$.orderedList] },
+          b({
+            active: M(t, n, "bullet_list"),
+            display: o.$.bulletList,
+            onClick: () => X(n.value, "bullet_list"),
+            disabled: r,
+            label: c.$.bulletList,
+            icon: "mdi:format-list-bulleted",
+            size: l
+          }),
+          b({
+            active: M(t, n, "ordered_list"),
+            display: o.$.orderedList,
+            onClick: () => X(n.value, "ordered_list"),
+            disabled: r,
+            label: c.$.orderedList,
+            icon: "mdi:format-list-numbered",
+            size: l
+          })
+        ),
+        // Block formatting group
+        S(
+          {
+            display: [
+              o.$.blockquote,
+              o.$.codeBlock,
+              o.$.horizontalRule
+            ]
+          },
+          b({
+            active: M(t, n, "blockquote"),
+            display: o.$.blockquote,
+            onClick: () => We(n.value),
+            disabled: r,
+            label: c.$.blockquote,
+            icon: "mdi:format-quote-close",
+            size: l
+          }),
+          b({
+            active: M(t, n, "code_block"),
+            display: o.$.codeBlock,
+            onClick: () => Ke(n.value),
+            disabled: r,
+            label: c.$.codeBlock,
+            icon: "mdi:code-braces",
+            size: l
+          }),
+          b({
+            active: z(!1),
+            display: o.$.horizontalRule,
+            onClick: () => Ge(n.value),
+            disabled: r,
+            label: c.$.horizontalRule,
+            icon: "mdi:minus",
+            size: l
+          })
+        ),
+        w(
+          o.$.links,
+          () => He({
+            stateUpdate: t,
+            view: n,
+            isReadOnly: r,
+            label: c.$.link,
+            // linkDialogTitle: pmt.$.linkDialogTitle,
+            linkUrlPlaceholder: c.$.linkUrlPlaceholder,
+            // linkDialogSave: pmt.$.linkDialogSave,
+            // linkDialogCancel: pmt.$.linkDialogCancel,
+            // linkDialogRemoveLink: pmt.$.linkDialogRemoveLink,
+            size: l
+          })
+        )
+      );
+    })
+  );
+}
+function R(e, t) {
+  const o = e.state.schema.marks[t];
+  o != null && (T(o)(e.state, e.dispatch), e.focus());
+}
+function je(e, t) {
+  const o = e.state.schema.nodes.heading;
+  o != null && (V(o, { level: t })(e.state, e.dispatch), e.focus());
+}
+async function X(e, t) {
+  const { wrapInList: o, liftListItem: r } = await import("prosemirror-schema-list"), l = e.state.schema.nodes[t], s = e.state.schema.nodes.list_item;
+  if (l == null || s == null) return;
+  const { state: i } = e, { $from: c } = i.selection;
+  let n = null;
+  for (let a = c.depth; a > 0; a--) {
+    const m = c.node(a);
+    if (m.type.name === "bullet_list" || m.type.name === "ordered_list") {
+      n = m.type.name;
+      break;
+    }
+  }
+  n === t ? r(s)(i, e.dispatch) : n != null ? r(s)(e.state, e.dispatch) && o(l)(e.state, e.dispatch) : o(l)(i, e.dispatch), e.focus();
+}
+function We(e) {
+  const t = e.state.schema.nodes.blockquote;
+  if (t == null) return;
+  const { state: o } = e, { $from: r } = o.selection;
+  let l = !1;
+  for (let s = r.depth; s > 0; s--)
+    if (r.node(s).type.name === "blockquote") {
+      l = !0;
+      break;
+    }
+  l ? $e(o, e.dispatch) : Me(t)(o, e.dispatch), e.focus();
+}
+function Ke(e) {
+  const t = e.state.schema.nodes.code_block, o = e.state.schema.nodes.paragraph;
+  if (t == null || o == null) return;
+  const { state: r } = e, { $from: l } = r.selection;
+  let s = !1;
+  for (let i = l.depth; i > 0; i--)
+    if (l.node(i).type.name === "code_block") {
+      s = !0;
+      break;
+    }
+  s ? V(o)(r, e.dispatch) : V(t)(r, e.dispatch), e.focus();
+}
+function Ge(e) {
+  const t = e.state.schema.nodes.horizontal_rule;
+  if (t != null) {
+    const o = e.state.tr.replaceSelectionWith(t.create());
+    e.dispatch(o), e.focus();
+  }
+}
+const Je = new Ce(
+  D.schema,
+  Ie("commonmark", { breaks: !0 }),
+  D.tokens
+);
+function Qe(e) {
+  return e.split(`
+`).map((o, r, l) => o.trim() === "" && r < l.length - 1 ? " " : o).join(`  
+`);
+}
+function Y(e, t) {
+  const o = t ? Je : D;
+  let r = e ?? "";
+  return t && (r = Qe(r)), o.parse(r);
+}
+const Z = {
+  headings: !0,
+  bold: !0,
+  italic: !0,
+  code: !0,
+  links: !0,
+  bulletList: !0,
+  orderedList: !0,
+  blockquote: !0,
+  codeBlock: !0,
+  horizontalRule: !0,
+  hardBreak: !0,
+  headerLevels: 3
+};
+function Xe(e) {
+  return new Te({
+    view: () => ({
+      update: () => {
+        e();
+      }
+    }),
+    filterTransaction: () => (e(), !0)
+  });
+}
+const kt = (e) => {
+  const {
+    value: t,
+    onChange: o,
+    onInput: r,
+    onBlur: l,
+    class: s,
+    id: i,
+    name: c,
+    hasError: n,
+    disabled: a,
+    autofocus: m = !1,
+    readOnly: y = !1,
+    placeholder: H,
+    showToolbar: re = !1,
+    features: le,
+    preserveLineBreaks: N = !1
+  } = e, L = p.toSignal(y), v = p.toSignal(a ?? !1), se = p.toSignal(re), j = K(le ?? Z)((q) => ({
+    ...Z,
+    ...q
+  })), _ = U(null), W = Re();
+  return O(
+    xe,
+    ({ appearance: q }) => G.div(
+      x(() => _.value?.destroy()),
+      (e.cssInjection ?? "none") === "none" ? null : ke(
+        () => import("../styles-url-hKxIOumK.js"),
+        ({ default: u }) => Se({ id: "beatui-prosemirror-css", href: u })
+      ),
+      g.class("bc-prosemirror-editor-container"),
+      g.class(s),
+      g.class(
+        p.map(
+          n ?? !1,
+          (u) => u ? "bc-input-container--error" : ""
+        )
+      ),
+      g.id(i),
+      g.name(c),
+      // Optional toolbar
+      w(
+        K(
+          se,
+          _
+        )((u, f) => u && f != null),
+        () => Ne({
+          view: _,
+          stateUpdate: W,
+          features: j,
+          readOnly: L
+        })
+      ),
+      // Editor mount point
+      G.div(
+        g.class("bc-prosemirror-editor"),
+        he((u) => {
+          const f = [];
+          return (() => {
+            try {
+              const $ = p.get(t) ?? "", C = p.get(L) ?? !1, ie = p.get(v) ?? !1, ae = p.get(j), I = Ze(
+                ve,
+                qe,
+                ae
+              ), ce = Y($, N), de = Ye(I), ue = J.create({
+                doc: ce,
+                schema: I,
+                plugins: [
+                  Pe(),
+                  A({
+                    "Mod-z": Ae,
+                    "Mod-y": Q,
+                    "Mod-Shift-z": Q
+                  }),
+                  A(de),
+                  A(Le),
+                  Xe(W.tick)
+                ]
+              }), k = new Ee(u, {
+                state: ue,
+                editable: () => !C && !ie,
+                dispatchTransaction(d) {
+                  const h = k.state.apply(d);
+                  if (k.updateState(h), d.docChanged && r != null) {
+                    const B = P.serialize(
+                      h.doc
+                    );
+                    r(B);
+                  }
+                }
+              });
+              if (_.set(k), p.get(m) && k.focus(), H != null && f.push(
+                p.on(H, (d) => {
+                  d != null && d !== "" ? u.setAttribute("data-placeholder", d) : u.removeAttribute("data-placeholder");
+                })
+              ), f.push(
+                p.on(L, (d) => {
+                  const h = p.get(v);
+                  k.setProps({ editable: () => !d && !h });
+                })
+              ), f.push(
+                p.on(v, (d) => {
+                  const h = p.get(L);
+                  k.setProps({ editable: () => !h && !d });
+                })
+              ), f.push(
+                p.on(t, (d) => {
+                  const h = P.serialize(
+                    k.state.doc
+                  );
+                  if (d !== h) {
+                    const B = Y(d, N);
+                    if (B != null) {
+                      const me = J.create({
+                        doc: B,
+                        schema: I,
+                        plugins: k.state.plugins
+                      });
+                      k.updateState(me);
+                    }
+                  }
+                })
+              ), o != null) {
+                const d = () => {
+                  const h = P.serialize(
+                    k.state.doc
+                  );
+                  o(h);
+                };
+                u.addEventListener("blur", d, !0), f.push(
+                  () => u.removeEventListener("blur", d, !0)
+                );
+              }
+              if (l != null) {
+                const d = () => {
+                  l();
+                };
+                u.addEventListener("blur", d, !0), f.push(
+                  () => u.removeEventListener("blur", d, !0)
+                );
+              }
+              f.push(
+                q.on((d) => {
+                  d === "dark" ? u.classList.add("bc-prosemirror-editor--dark") : u.classList.remove("bc-prosemirror-editor--dark");
+                })
+              ), f.push(() => k.destroy());
+            } catch ($) {
+              console.error(
+                "[BeatUI] Failed to initialize ProseMirror editor:",
+                $
+              );
+              const C = u;
+              C.textContent = "Failed to load ProseMirror Editor. Please ensure prosemirror packages are installed.";
+            }
+          })(), x(() => {
+            f.forEach(($) => $());
+          });
+        })
+      )
+    )
+  );
+};
+function Ye(e) {
+  const t = {}, o = e.marks.strong;
+  o != null && (t["Mod-b"] = (s, i) => T(o)(s, i));
+  const r = e.marks.em;
+  r != null && (t["Mod-i"] = (s, i) => T(r)(s, i));
+  const l = e.marks.code;
+  return l != null && (t["Mod-`"] = (s, i) => T(l)(s, i)), t;
+}
+function Ze(e, t, o) {
+  const r = {}, l = {}, s = t.spec.nodes.get("doc"), i = t.spec.nodes.get("text");
+  if (s == null || i == null)
+    throw new Error("Basic schema missing required doc or text nodes");
+  r.doc = { ...s, content: "block+" }, r.text = i;
+  const c = t.spec.nodes.get("paragraph");
+  if (c != null && (r.paragraph = { ...c, content: "inline*" }), o.headings) {
+    const n = t.spec.nodes.get("heading");
+    n != null && (r.heading = { ...n, content: "inline*" });
+  }
+  if (o.bulletList) {
+    const n = t.spec.nodes.get("bullet_list"), a = t.spec.nodes.get("list_item");
+    n != null && (r.bullet_list = { ...n, content: "list_item+" }), a != null && (r.list_item = { ...a, content: "paragraph block*" });
+  }
+  if (o.orderedList) {
+    const n = t.spec.nodes.get("ordered_list"), a = t.spec.nodes.get("list_item");
+    n != null && (r.ordered_list = { ...n, content: "list_item+" }), a != null && !r.list_item && (r.list_item = { ...a, content: "paragraph block*" });
+  }
+  if (o.blockquote) {
+    const n = t.spec.nodes.get("blockquote");
+    n != null && (r.blockquote = { ...n, content: "block+" });
+  }
+  if (o.codeBlock) {
+    const n = t.spec.nodes.get("code_block");
+    n != null && (r.code_block = n);
+  }
+  if (o.horizontalRule) {
+    const n = t.spec.nodes.get("horizontal_rule");
+    n != null && (r.horizontal_rule = n);
+  }
+  if (o.hardBreak) {
+    const n = t.spec.nodes.get("hard_break");
+    n != null && (r.hard_break = n);
+  }
+  if (o.bold) {
+    const n = t.spec.marks.get("strong");
+    n != null && (l.strong = n);
+  }
+  if (o.italic) {
+    const n = t.spec.marks.get("em");
+    n != null && (l.em = n);
+  }
+  if (o.code) {
+    const n = t.spec.marks.get("code");
+    n != null && (l.code = n);
+  }
+  if (o.links) {
+    const n = t.spec.marks.get("link");
+    n != null && (l.link = n);
+  }
+  return new e({ nodes: r, marks: l });
+}
 export {
-  a as DEFAULT_FEATURES,
-  s as ProseMirrorMarkdownInput,
-  e as ProseMirrorToolbar
+  Z as DEFAULT_FEATURES,
+  kt as ProseMirrorMarkdownInput,
+  Ne as ProseMirrorToolbar
 };