silk-compose 0.0.1

package/dist/silk.js

@@ -0,0 +1,1764 @@
+import { jsx as t, Fragment as te, jsxs as y } from "react/jsx-runtime";
+import { useEffect as x, createContext as Se, useContext as we, useState as C, useRef as F, useCallback as w, useLayoutEffect as he, useMemo as _e } from "react";
+import { LexicalComposer as Me } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext as _ } from "@lexical/react/LexicalComposerContext";
+import { OnChangePlugin as Ee } from "@lexical/react/LexicalOnChangePlugin";
+import { HorizontalRulePlugin as Le } from "@lexical/react/LexicalHorizontalRulePlugin";
+import { TabIndentationPlugin as Te } from "@lexical/react/LexicalTabIndentationPlugin";
+import { $createHeadingNode as le, $createQuoteNode as De, HeadingNode as Ie, QuoteNode as Oe } from "@lexical/rich-text";
+import { CodeNode as pe, $isCodeNode as ne, $createCodeNode as Re, CodeHighlightNode as Fe } from "@lexical/code";
+import { INSERT_UNORDERED_LIST_COMMAND as Ae, INSERT_ORDERED_LIST_COMMAND as $e, registerList as Pe, ListNode as ze, ListItemNode as Be } from "@lexical/list";
+import { $createHorizontalRuleNode as He, HorizontalRuleNode as Ue } from "@lexical/react/LexicalHorizontalRuleNode";
+import { TOGGLE_LINK_COMMAND as We, $toggleLink as ae, $createLinkNode as Ke, $isLinkNode as ce, LinkNode as Ge } from "@lexical/link";
+import { $getNodeByKey as H, ElementNode as Ve, $createParagraphNode as G, COMMAND_PRIORITY_LOW as $, $getSelection as E, $isRangeSelection as L, $setSelection as Ye, $createTextNode as je, createCommand as Je, $isParagraphNode as me, SELECTION_CHANGE_COMMAND as ge, FORMAT_TEXT_COMMAND as Qe, $getNearestNodeFromDOMNode as Xe, $applyNodeReplacement as qe, DecoratorNode as Ze, CLICK_COMMAND as et, KEY_BACKSPACE_COMMAND as tt, KEY_DELETE_COMMAND as nt, PASTE_COMMAND as ot, COMMAND_PRIORITY_HIGH as X, DROP_COMMAND as it, DRAGOVER_COMMAND as rt, $isNodeSelection as st, $getRoot as de } from "lexical";
+import { useLexicalNodeSelection as lt } from "@lexical/react/useLexicalNodeSelection";
+import { $getSelectionStyleValueForProperty as q, $patchStyleText as Z, $setBlocksType as at } from "@lexical/selection";
+import { RichTextPlugin as ct } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as dt } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary as ut } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as ft } from "@lexical/react/LexicalHistoryPlugin";
+import { registerDragonSupport as ht } from "@lexical/dragon";
+import { registerCodeHighlighting as pt, ShikiTokenizer as mt, getCodeLanguageOptions as gt } from "@lexical/code-shiki";
+import { ListPlugin as kt } from "@lexical/react/LexicalListPlugin";
+import { registerMarkdownShortcuts as bt, TEXT_FORMAT_TRANSFORMERS as yt, UNORDERED_LIST as vt, ORDERED_LIST as Nt } from "@lexical/markdown";
+import { createPortal as Ct } from "react-dom";
+import { useBasicTypeaheadTriggerMatch as xt, LexicalTypeaheadMenuPlugin as St, MenuOption as wt } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+function _t() {
+  return /* @__PURE__ */ t(ft, {});
+}
+function Mt() {
+  return /* @__PURE__ */ t("div", { style: { position: "relative" }, children: /* @__PURE__ */ t(
+    ct,
+    {
+      contentEditable: /* @__PURE__ */ t(dt, { className: "silk-content-editable" }),
+      placeholder: /* @__PURE__ */ t("div", { className: "silk-placeholder", children: "Start writing…" }),
+      ErrorBoundary: ut
+    }
+  ) });
+}
+function Et() {
+  const [e] = _();
+  return x(() => ht(e), [e]), null;
+}
+const ke = Se({
+  current: null
+});
+function oe() {
+  return we(ke);
+}
+function Lt() {
+  return gt().map(([e, n]) => ({ value: e, label: n }));
+}
+const Tt = 32;
+function Dt({
+  language: e,
+  codeNodeKey: n,
+  codeElem: i
+}) {
+  var p;
+  const [o] = _(), s = oe(), [r, f] = C(!1), [a, c] = C(() => o.isEditable()), l = F(null), [h, b] = C({ top: 0, left: 0, width: 0 });
+  x(() => o.registerEditableListener(c), [o]);
+  const m = w(() => {
+    const d = s.current;
+    if (!d) return;
+    const k = i.getBoundingClientRect(), g = d.getBoundingClientRect();
+    b({
+      top: k.top - g.top - Tt,
+      left: k.left - g.left,
+      width: k.width
+    });
+  }, [i, s]);
+  he(() => {
+    m();
+    const d = new ResizeObserver(m);
+    return d.observe(i), () => d.disconnect();
+  }, [i, m]), x(() => o.registerUpdateListener(() => {
+    m();
+  }), [o, m]);
+  const S = Lt(), u = ((p = S.find((d) => d.value === e)) == null ? void 0 : p.label) ?? e ?? "Plain Text", v = w(
+    (d) => {
+      o.update(() => {
+        const k = H(n);
+        ne(k) && k.setLanguage(d);
+      }), f(!1);
+    },
+    [o, n]
+  );
+  return x(() => {
+    if (!r) return;
+    const d = (k) => {
+      l.current && !l.current.contains(k.target) && f(!1);
+    };
+    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
+  }, [r]), /* @__PURE__ */ y(
+    "div",
+    {
+      ref: l,
+      className: "silk-code-header",
+      style: {
+        position: "absolute",
+        top: h.top,
+        left: h.left,
+        width: h.width,
+        pointerEvents: "auto"
+      },
+      children: [
+        /* @__PURE__ */ y(
+          "button",
+          {
+            className: "silk-code-language-select",
+            onClick: () => a && f(!r),
+            style: { cursor: a ? "pointer" : "default" },
+            onMouseDown: (d) => d.preventDefault(),
+            type: "button",
+            children: [
+              u,
+              a && /* @__PURE__ */ t("span", { className: "silk-code-language-chevron", "aria-hidden": !0, children: "▾" })
+            ]
+          }
+        ),
+        r && a && /* @__PURE__ */ t("div", { className: "silk-code-language-dropdown", children: S.map((d) => /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-code-language-option${e === d.value ? " silk-code-language-option--active" : ""}`,
+            onClick: () => v(d.value),
+            onMouseDown: (k) => k.preventDefault(),
+            type: "button",
+            children: d.label
+          },
+          d.value
+        )) })
+      ]
+    }
+  );
+}
+function It() {
+  const [e] = _(), [n, i] = C(
+    /* @__PURE__ */ new Map()
+  );
+  return x(() => pt(e, {
+    ...mt,
+    defaultTheme: "dark-plus"
+  }), [e]), x(() => {
+    const o = /* @__PURE__ */ new Set(), s = () => {
+      e.getEditorState().read(() => {
+        const a = /* @__PURE__ */ new Map();
+        for (const c of o) {
+          const l = H(c);
+          if (ne(l)) {
+            const h = e.getElementByKey(c);
+            h && a.set(c, {
+              language: l.getLanguage() ?? "typescript",
+              elem: h
+            });
+          }
+        }
+        i(a);
+      });
+    }, r = e.registerMutationListener(
+      pe,
+      (a) => {
+        for (const [c, l] of a)
+          l === "destroyed" ? o.delete(c) : o.add(c);
+        s();
+      },
+      { skipInitialization: !1 }
+    ), f = e.registerUpdateListener(({ dirtyElements: a }) => {
+      let c = !1;
+      for (const l of o)
+        if (a.has(l)) {
+          c = !0;
+          break;
+        }
+      c && s();
+    });
+    return () => {
+      r(), f();
+    };
+  }, [e]), /* @__PURE__ */ t(te, { children: Array.from(n.entries()).map(([o, { language: s, elem: r }]) => /* @__PURE__ */ t(
+    Dt,
+    {
+      language: s,
+      codeNodeKey: o,
+      codeElem: r
+    },
+    o
+  )) });
+}
+class W extends Ve {
+  static getType() {
+    return "note";
+  }
+  static clone(n) {
+    return new W(n.__noteType, n.__key);
+  }
+  constructor(n = "info", i) {
+    super(i), this.__noteType = n;
+  }
+  createDOM(n) {
+    const i = document.createElement("div");
+    return i.className = `silk-note silk-note--${this.__noteType}`, i;
+  }
+  updateDOM(n, i) {
+    return n.__noteType !== this.__noteType && (i.className = `silk-note silk-note--${this.__noteType}`), !1;
+  }
+  setNoteType(n) {
+    const i = this.getWritable();
+    return i.__noteType = n, i;
+  }
+  getNoteType() {
+    return this.getLatest().__noteType;
+  }
+  insertNewAfter(n, i) {
+    const o = n.anchor.getNode(), s = this.getLastDescendant();
+    if (s === null || o === s || o === this && n.anchor.offset === this.getChildrenSize()) {
+      const r = G();
+      return this.insertAfter(r, i), r;
+    }
+    return super.insertNewAfter(n, i);
+  }
+  collapseAtStart() {
+    const n = G(), i = this.getChildren();
+    return i.length > 0 && i.forEach((o) => n.append(o)), this.replace(n), !0;
+  }
+  static importJSON(n) {
+    return be(n.noteType);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      noteType: this.__noteType
+    };
+  }
+}
+function be(e = "info") {
+  return new W(e);
+}
+function ye(e) {
+  return e instanceof W;
+}
+const ie = Je("SHOW_LINK_DIALOG");
+function Ot() {
+  const [e] = _(), [n, i] = C(!1), [o, s] = C(""), [r, f] = C(""), [a, c] = C(!1), l = F(null), h = F(null);
+  x(() => {
+    const u = e.registerCommand(
+      We,
+      (p) => (ae(p, {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }), !0),
+      $
+    ), v = e.registerCommand(
+      ie,
+      (p) => {
+        const d = E();
+        if (L(d)) {
+          h.current = d.clone();
+          const k = d.isCollapsed();
+          c(!k), k || f(d.getTextContent());
+        }
+        return (p == null ? void 0 : p.text) !== void 0 && f(p.text), i(!0), !0;
+      },
+      $
+    );
+    return () => {
+      u(), v();
+    };
+  }, [e]), x(() => {
+    n && setTimeout(() => {
+      var u;
+      return (u = l.current) == null ? void 0 : u.focus();
+    }, 0);
+  }, [n]);
+  const b = w(() => {
+    i(!1), s(""), f(""), c(!1), h.current = null, e.focus();
+  }, [e]), m = w(() => {
+    o && (e.update(() => {
+      if (h.current && Ye(h.current.clone()), a)
+        ae(o, {
+          target: "_blank",
+          rel: "noopener noreferrer"
+        });
+      else {
+        const u = Ke(o, {
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }), v = je(r || o);
+        u.append(v);
+        const p = E();
+        L(p) && p.insertNodes([u]);
+      }
+    }), b());
+  }, [e, o, r, a, b]), S = w(
+    (u) => {
+      u.key === "Enter" && (u.preventDefault(), m()), u.key === "Escape" && b();
+    },
+    [m, b]
+  );
+  return n ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: "silk-link-dialog-backdrop",
+      onMouseDown: (u) => {
+        u.target === u.currentTarget && b();
+      },
+      children: /* @__PURE__ */ y("div", { className: "silk-link-dialog", onKeyDown: S, children: [
+        /* @__PURE__ */ y("div", { className: "silk-link-dialog-field", children: [
+          /* @__PURE__ */ t("label", { className: "silk-link-dialog-label", children: "URL" }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              ref: l,
+              className: "silk-link-dialog-input",
+              type: "text",
+              value: o,
+              onChange: (u) => s(u.target.value),
+              placeholder: "https://example.com"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ y("div", { className: "silk-link-dialog-field", children: [
+          /* @__PURE__ */ t("label", { className: "silk-link-dialog-label", children: "Display text" }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              className: `silk-link-dialog-input${a ? " silk-link-dialog-input--readonly" : ""}`,
+              type: "text",
+              value: r,
+              onChange: (u) => f(u.target.value),
+              placeholder: "Link text",
+              readOnly: a
+            }
+          )
+        ] }),
+        /* @__PURE__ */ y("div", { className: "silk-link-dialog-actions", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-link-dialog-cancel",
+              onClick: b,
+              type: "button",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-link-dialog-insert",
+              onClick: m,
+              disabled: !o,
+              type: "button",
+              children: "Insert"
+            }
+          )
+        ] })
+      ] })
+    }
+  ) : null;
+}
+const Rt = 18;
+function O({
+  children: e,
+  size: n = Rt,
+  className: i
+}) {
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      width: n,
+      height: n,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: i,
+      children: e
+    }
+  );
+}
+function Ft(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("path", { d: "M4 12h8" }),
+    /* @__PURE__ */ t("path", { d: "M4 18V6" }),
+    /* @__PURE__ */ t("path", { d: "M12 18V6" }),
+    /* @__PURE__ */ t("path", { d: "M17 12l3-2v8" })
+  ] });
+}
+function At(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("path", { d: "M4 12h8" }),
+    /* @__PURE__ */ t("path", { d: "M4 18V6" }),
+    /* @__PURE__ */ t("path", { d: "M12 18V6" }),
+    /* @__PURE__ */ t("path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" })
+  ] });
+}
+function $t(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("polyline", { points: "16 18 22 12 16 6" }),
+    /* @__PURE__ */ t("polyline", { points: "8 6 2 12 8 18" })
+  ] });
+}
+function ve(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ t("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ t("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function Pt(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+    /* @__PURE__ */ t(
+      "text",
+      {
+        x: "12",
+        y: "17",
+        textAnchor: "middle",
+        fill: "currentColor",
+        stroke: "none",
+        fontSize: "12",
+        fontWeight: "700",
+        fontFamily: "Inter, sans-serif",
+        children: "?"
+      }
+    )
+  ] });
+}
+function zt(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ t("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ t("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
+}
+function Bt(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }),
+    /* @__PURE__ */ t("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })
+  ] });
+}
+function Ht(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("line", { x1: "10", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ t("line", { x1: "10", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ t("line", { x1: "10", y1: "18", x2: "21", y2: "18" }),
+    /* @__PURE__ */ t("path", { d: "M4 6h1v4" }),
+    /* @__PURE__ */ t("path", { d: "M4 10h2" }),
+    /* @__PURE__ */ t("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+  ] });
+}
+function Ut(e) {
+  return /* @__PURE__ */ y(O, { ...e, children: [
+    /* @__PURE__ */ t("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ t("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ t("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+    /* @__PURE__ */ t("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+    /* @__PURE__ */ t("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+    /* @__PURE__ */ t("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+  ] });
+}
+function Wt(e) {
+  return /* @__PURE__ */ t(O, { ...e, children: /* @__PURE__ */ t("line", { x1: "2", y1: "12", x2: "22", y2: "12" }) });
+}
+function J(e) {
+  const n = E();
+  if (!L(n)) return;
+  const o = n.anchor.getNode().getTopLevelElementOrThrow(), s = e(), r = G();
+  return o.insertAfter(s), s.insertAfter(r), me(o) && o.getTextContentSize() === 0 && o.remove(), { node: s, trailing: r };
+}
+const Kt = [
+  {
+    name: "Heading 1",
+    icon: /* @__PURE__ */ t(Ft, {}),
+    description: "Large section heading",
+    execute: () => {
+      const e = J(() => le("h1"));
+      e == null || e.node.selectStart();
+    }
+  },
+  {
+    name: "Heading 2",
+    icon: /* @__PURE__ */ t(At, {}),
+    description: "Medium section heading",
+    execute: () => {
+      const e = J(() => le("h2"));
+      e == null || e.node.selectStart();
+    }
+  },
+  {
+    name: "Code Block",
+    icon: /* @__PURE__ */ t($t, {}),
+    description: "Code with syntax highlighting",
+    execute: () => {
+      const e = J(() => Re("typescript"));
+      e == null || e.node.selectStart();
+    }
+  },
+  {
+    name: "Note",
+    icon: /* @__PURE__ */ t(ve, {}),
+    description: "Info, warning, or error callout",
+    execute: () => {
+      const e = E();
+      if (!L(e)) return;
+      const i = e.anchor.getNode().getTopLevelElementOrThrow(), o = be("info"), s = G();
+      o.append(s);
+      const r = G();
+      i.insertAfter(o), o.insertAfter(r), me(i) && i.getTextContentSize() === 0 && i.remove(), s.selectStart();
+    }
+  },
+  {
+    name: "Bulleted List",
+    icon: /* @__PURE__ */ t(Ut, {}),
+    description: "Unordered bulleted list",
+    execute: (e) => {
+      e.dispatchCommand(Ae, void 0);
+    }
+  },
+  {
+    name: "Numbered List",
+    icon: /* @__PURE__ */ t(Ht, {}),
+    description: "Ordered numbered list",
+    execute: (e) => {
+      e.dispatchCommand($e, void 0);
+    }
+  },
+  {
+    name: "Divider",
+    icon: /* @__PURE__ */ t(Wt, {}),
+    description: "Horizontal line separator",
+    execute: () => {
+      const e = J(() => He());
+      e == null || e.trailing.selectStart();
+    }
+  },
+  {
+    name: "Link",
+    icon: /* @__PURE__ */ t(Bt, {}),
+    description: "Insert a masked link",
+    execute: (e) => {
+      e.dispatchCommand(ie, void 0);
+    }
+  }
+];
+class Gt extends wt {
+  constructor(n) {
+    super(n.name), this.entry = n;
+  }
+}
+function Vt({
+  option: e,
+  isSelected: n,
+  onClick: i,
+  onMouseEnter: o
+}) {
+  return /* @__PURE__ */ y(
+    "button",
+    {
+      className: `silk-slash-menu-item${n ? " silk-slash-menu-item--active" : ""}`,
+      ref: (s) => e.setRefElement(s),
+      onMouseDown: (s) => {
+        s.preventDefault(), i();
+      },
+      onMouseEnter: o,
+      type: "button",
+      children: [
+        /* @__PURE__ */ t("span", { className: "silk-slash-menu-icon", children: e.entry.icon }),
+        /* @__PURE__ */ y("div", { className: "silk-slash-menu-text", children: [
+          /* @__PURE__ */ t("span", { className: "silk-slash-menu-name", children: e.entry.name }),
+          /* @__PURE__ */ t("span", { className: "silk-slash-menu-description", children: e.entry.description })
+        ] })
+      ]
+    }
+  );
+}
+function Yt() {
+  const [e] = _(), [n, i] = C(() => e.isEditable()), [o, s] = C(null);
+  x(() => e.registerEditableListener(i), [e]);
+  const r = xt("/", {
+    minLength: 0,
+    allowWhitespace: !0
+  }), f = _e(() => {
+    if (o === null) return [];
+    const l = o.toLowerCase();
+    return Kt.filter(
+      (b) => b.name.toLowerCase().includes(l) || b.description.toLowerCase().includes(l)
+    ).map((b) => new Gt(b));
+  }, [o]), a = w(
+    (l, h, b) => {
+      h && h.remove(), l.entry.execute(e), b();
+    },
+    [e]
+  ), c = w(
+    (l, h, b) => l.current == null || h.options.length === 0 ? null : Ct(
+      /* @__PURE__ */ t("div", { className: "silk-slash-menu", children: h.options.map((m, S) => /* @__PURE__ */ t(
+        Vt,
+        {
+          option: m,
+          isSelected: h.selectedIndex === S,
+          onClick: () => h.selectOptionAndCleanUp(m),
+          onMouseEnter: () => h.setHighlightedIndex(S)
+        },
+        m.key
+      )) }),
+      l.current
+    ),
+    []
+  );
+  return n ? /* @__PURE__ */ t(
+    St,
+    {
+      options: f,
+      onQueryChange: s,
+      onSelectOption: a,
+      triggerFn: r,
+      menuRenderFn: c,
+      anchorClassName: "silk-slash-anchor"
+    }
+  ) : null;
+}
+const jt = [
+  { value: "info", label: "Info", Icon: ve },
+  { value: "warning", label: "Question", Icon: Pt },
+  { value: "error", label: "Error", Icon: zt }
+];
+function Jt({
+  noteType: e,
+  nodeKey: n,
+  elem: i
+}) {
+  const [o] = _(), s = oe(), [r, f] = C(() => o.isEditable()), [a, c] = C(!1), l = F(null), [h, b] = C({ top: 0, left: 0 });
+  x(() => o.registerEditableListener(f), [o]);
+  const m = w(() => {
+    const u = s.current;
+    if (!u) return;
+    const v = i.getBoundingClientRect(), p = u.getBoundingClientRect();
+    b({
+      top: v.top - p.top + 13,
+      left: v.left - p.left + 17
+    });
+  }, [i, s]);
+  he(() => {
+    m();
+    const u = new ResizeObserver(m);
+    return u.observe(i), () => u.disconnect();
+  }, [i, m]), x(() => o.registerUpdateListener(() => m()), [o, m]);
+  const S = w(
+    (u) => {
+      o.update(() => {
+        const v = H(n);
+        ye(v) && v.setNoteType(u);
+      }), c(!1);
+    },
+    [o, n]
+  );
+  return x(() => {
+    if (!a) return;
+    const u = (v) => {
+      l.current && !l.current.contains(v.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
+  }, [a]), r ? /* @__PURE__ */ y(
+    "div",
+    {
+      ref: l,
+      style: {
+        position: "absolute",
+        top: h.top,
+        left: h.left,
+        zIndex: 1
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-note-icon-trigger silk-note-icon-trigger--${e}`,
+            onClick: () => c(!a),
+            onMouseDown: (u) => u.preventDefault(),
+            type: "button",
+            "aria-label": "Change note type"
+          }
+        ),
+        a && /* @__PURE__ */ t("div", { className: "silk-note-icon-dropdown", children: jt.map((u) => /* @__PURE__ */ y(
+          "button",
+          {
+            className: `silk-note-type-option silk-note-type-option--${u.value}${e === u.value ? " silk-note-type-option--active" : ""}`,
+            onClick: () => S(u.value),
+            onMouseDown: (v) => v.preventDefault(),
+            type: "button",
+            children: [
+              /* @__PURE__ */ t(u.Icon, { size: 14 }),
+              u.label
+            ]
+          },
+          u.value
+        )) })
+      ]
+    }
+  ) : null;
+}
+function Qt() {
+  const [e] = _(), [n, i] = C(
+    /* @__PURE__ */ new Map()
+  );
+  return x(() => {
+    const o = /* @__PURE__ */ new Set(), s = () => {
+      e.getEditorState().read(() => {
+        const a = /* @__PURE__ */ new Map();
+        for (const c of o) {
+          const l = H(c);
+          if (ye(l)) {
+            const h = e.getElementByKey(c);
+            h && a.set(c, {
+              noteType: l.getNoteType(),
+              elem: h
+            });
+          }
+        }
+        i(a);
+      });
+    }, r = e.registerMutationListener(
+      W,
+      (a) => {
+        for (const [c, l] of a)
+          l === "destroyed" ? o.delete(c) : o.add(c);
+        s();
+      },
+      { skipInitialization: !1 }
+    ), f = e.registerUpdateListener(({ dirtyElements: a }) => {
+      let c = !1;
+      for (const l of o)
+        if (a.has(l)) {
+          c = !0;
+          break;
+        }
+      c && s();
+    });
+    return () => {
+      r(), f();
+    };
+  }, [e]), /* @__PURE__ */ t(te, { children: Array.from(n.entries()).map(([o, { noteType: s, elem: r }]) => /* @__PURE__ */ t(
+    Jt,
+    {
+      noteType: s,
+      nodeKey: o,
+      elem: r
+    },
+    o
+  )) });
+}
+const Xt = [
+  ...yt,
+  vt,
+  Nt
+];
+function qt() {
+  const [e] = _();
+  return x(() => bt(e, Xt), [e]), null;
+}
+const Ne = [
+  { value: null, label: "Default" },
+  { value: "#9c9a94", label: "Muted" },
+  { value: "#ac3521", label: "Alert" },
+  { value: "#5a6340", label: "Emphasis" },
+  { value: "#7e572e", label: "Accent" },
+  { value: "#4a5568", label: "Secondary" }
+], U = [
+  { value: null, label: "Inter", css: '"Inter", sans-serif' },
+  {
+    value: '"SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace',
+    label: "SF Mono",
+    css: '"SF Mono", monospace'
+  },
+  {
+    value: '"Space Grotesk", "Inter", sans-serif',
+    label: "Space Grotesk",
+    css: '"Space Grotesk", sans-serif'
+  }
+];
+function Zt(e) {
+  return e ? e.includes("SF Mono") || e.includes("Fira Code") ? U[1].value : e.includes("Space Grotesk") ? U[2].value : null : null;
+}
+const re = 10, se = 36, ue = 16;
+function Ce() {
+  const [e] = _(), [n, i] = C(/* @__PURE__ */ new Set()), [o, s] = C(ue), [r, f] = C(null), [a, c] = C(
+    null
+  ), l = w(() => {
+    e.getEditorState().read(() => {
+      const p = E();
+      if (!L(p)) return;
+      const d = /* @__PURE__ */ new Set();
+      p.hasFormat("bold") && d.add("bold"), p.hasFormat("italic") && d.add("italic"), p.hasFormat("underline") && d.add("underline"), p.hasFormat("code") && d.add("code"), i(d);
+      const k = q(
+        p,
+        "font-size",
+        ""
+      );
+      s(k ? parseInt(k, 10) : ue);
+      const g = q(
+        p,
+        "color",
+        ""
+      );
+      f(g || null);
+      const M = q(
+        p,
+        "font-family",
+        ""
+      );
+      c(Zt(M || null));
+    });
+  }, [e]);
+  x(() => e.registerCommand(
+    ge,
+    () => (l(), !1),
+    $
+  ), [e, l]), x(() => e.registerUpdateListener(() => l()), [e, l]);
+  const h = w(
+    (p) => {
+      e.dispatchCommand(Qe, p);
+    },
+    [e]
+  ), b = w(
+    (p) => {
+      const d = Math.max(
+        re,
+        Math.min(se, o + p)
+      );
+      e.update(() => {
+        const k = E();
+        L(k) && Z(k, { "font-size": `${d}px` });
+      });
+    },
+    [e, o]
+  ), m = w(
+    (p) => {
+      e.update(() => {
+        const d = E();
+        L(d) && Z(d, { color: p });
+      });
+    },
+    [e]
+  ), S = w(
+    (p) => {
+      e.update(() => {
+        const d = E();
+        L(d) && Z(d, { "font-family": p });
+      });
+    },
+    [e]
+  ), u = w(() => {
+    e.getEditorState().read(() => {
+      const p = E();
+      if (L(p)) {
+        const d = p.getTextContent();
+        e.dispatchCommand(ie, { text: d });
+      }
+    });
+  }, [e]), v = w(() => {
+    e.update(() => {
+      const p = E();
+      L(p) && at(p, () => De());
+    });
+  }, [e]);
+  return {
+    formats: n,
+    fontSize: o,
+    currentColor: r,
+    currentFontFamily: a,
+    toggleFormat: h,
+    changeFontSize: b,
+    applyColor: m,
+    applyFontFamily: S,
+    openLinkDialog: u,
+    insertQuote: v
+  };
+}
+const en = 8;
+function tn() {
+  var Y;
+  const [e] = _(), n = oe(), i = F(null), [o, s] = C(!1), [r, f] = C({ top: 0, left: 0 }), [a, c] = C(!1), [l, h] = C(!1), {
+    formats: b,
+    fontSize: m,
+    currentColor: S,
+    currentFontFamily: u,
+    toggleFormat: v,
+    changeFontSize: p,
+    applyColor: d,
+    applyFontFamily: k,
+    openLinkDialog: g
+  } = Ce(), M = w(() => {
+    if (!e.isEditable()) {
+      s(!1);
+      return;
+    }
+    let A = !1;
+    if (e.getEditorState().read(() => {
+      const K = E();
+      !L(K) || K.isCollapsed() || K.getNodes().some((xe) => {
+        let j = xe.getParent();
+        for (; j; ) {
+          if (ne(j)) return !0;
+          j = j.getParent();
+        }
+        return !1;
+      }) || (A = !0);
+    }), !A) {
+      s(!1);
+      return;
+    }
+    const P = window.getSelection();
+    if (!P || P.rangeCount === 0) {
+      s(!1);
+      return;
+    }
+    const z = P.getRangeAt(0).getBoundingClientRect(), B = n.current;
+    if (!B) {
+      s(!1);
+      return;
+    }
+    const D = B.getBoundingClientRect(), R = i.current, T = (R == null ? void 0 : R.offsetWidth) ?? 300;
+    let I = z.left - D.left + z.width / 2;
+    I = Math.max(T / 2 + 4, I), I = Math.min(D.width - T / 2 - 4, I), f({
+      top: z.top - D.top - en,
+      left: I
+    }), s(!0);
+  }, [e, n]);
+  return x(() => e.registerCommand(
+    ge,
+    () => (M(), !1),
+    $
+  ), [e, M]), x(() => e.registerUpdateListener(() => M()), [e, M]), x(() => {
+    if (!a && !l) return;
+    const N = (A) => {
+      i.current && !i.current.contains(A.target) && (c(!1), h(!1));
+    };
+    return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
+  }, [a, l]), o ? /* @__PURE__ */ y(
+    "div",
+    {
+      ref: i,
+      className: "silk-floating-toolbar",
+      style: {
+        top: r.top,
+        left: r.left,
+        transform: "translate(-50%, -100%)"
+      },
+      onMouseDown: (N) => N.preventDefault(),
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${b.has("bold") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => v("bold"),
+            type: "button",
+            title: "Bold",
+            children: /* @__PURE__ */ t("strong", { children: "B" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${b.has("italic") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => v("italic"),
+            type: "button",
+            title: "Italic",
+            children: /* @__PURE__ */ t("em", { children: "I" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${b.has("underline") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => v("underline"),
+            type: "button",
+            title: "Underline",
+            children: /* @__PURE__ */ t("span", { style: { textDecoration: "underline" }, children: "U" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn silk-ft-btn--mono${b.has("code") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => v("code"),
+            type: "button",
+            title: "Inline code",
+            children: "</>"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: "silk-ft-btn",
+            onClick: g,
+            type: "button",
+            title: "Insert link",
+            children: /* @__PURE__ */ y(
+              "svg",
+              {
+                width: "15",
+                height: "15",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ t("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }),
+                  /* @__PURE__ */ t("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-font-size", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-ft-btn silk-ft-btn--sm",
+              onClick: () => p(-1),
+              disabled: m <= re,
+              type: "button",
+              title: "Decrease font size",
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "silk-ft-font-size-value", children: m }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-ft-btn silk-ft-btn--sm",
+              onClick: () => p(1),
+              disabled: m >= se,
+              type: "button",
+              title: "Increase font size",
+              children: "+"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-color-wrap", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-btn silk-ft-btn--color${a ? " silk-ft-btn--active" : ""}`,
+              onClick: () => {
+                c(!a), h(!1);
+              },
+              type: "button",
+              title: "Text color",
+              children: /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "silk-ft-color-indicator",
+                  style: { borderBottomColor: S || "#1a1a1a" },
+                  children: "A"
+                }
+              )
+            }
+          ),
+          a && /* @__PURE__ */ t("div", { className: "silk-ft-color-grid", children: Ne.map((N) => /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-color-swatch${S === N.value || !S && N.value === null ? " silk-ft-color-swatch--active" : ""}`,
+              onClick: () => {
+                d(N.value), c(!1);
+              },
+              type: "button",
+              title: N.label,
+              style: N.value ? { backgroundColor: N.value } : void 0,
+              children: N.value === null && /* @__PURE__ */ y(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: [
+                    /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" }),
+                    /* @__PURE__ */ t("line", { x1: "4", y1: "4", x2: "20", y2: "20" })
+                  ]
+                }
+              )
+            },
+            N.value ?? "default"
+          )) })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-font-wrap", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-btn${l ? " silk-ft-btn--active" : ""}`,
+              onClick: () => {
+                h(!l), c(!1);
+              },
+              type: "button",
+              title: "Font family",
+              style: {
+                fontFamily: ((Y = U.find((N) => N.value === u)) == null ? void 0 : Y.css) ?? '"Inter", sans-serif',
+                fontSize: 12,
+                fontWeight: 500
+              },
+              children: "Aa"
+            }
+          ),
+          l && /* @__PURE__ */ t("div", { className: "silk-ft-font-dropdown", children: U.map((N) => /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-font-option${u === N.value ? " silk-ft-font-option--active" : ""}`,
+              onClick: () => {
+                k(N.value), h(!1);
+              },
+              onMouseDown: (A) => A.preventDefault(),
+              type: "button",
+              style: { fontFamily: N.css },
+              children: N.label
+            },
+            N.label
+          )) })
+        ] })
+      ]
+    }
+  ) : null;
+}
+function nn() {
+  var k;
+  const [e] = _(), [n, i] = C(() => e.isEditable()), o = F(null), [s, r] = C(!1), [f, a] = C(!1), {
+    formats: c,
+    fontSize: l,
+    currentColor: h,
+    currentFontFamily: b,
+    toggleFormat: m,
+    changeFontSize: S,
+    applyColor: u,
+    applyFontFamily: v,
+    openLinkDialog: p,
+    insertQuote: d
+  } = Ce();
+  return x(() => e.registerEditableListener(i), [e]), x(() => {
+    if (!s && !f) return;
+    const g = (M) => {
+      o.current && !o.current.contains(M.target) && (r(!1), a(!1));
+    };
+    return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
+  }, [s, f]), /* @__PURE__ */ y(
+    "div",
+    {
+      ref: o,
+      className: "silk-toolbar",
+      style: n ? void 0 : { display: "none" },
+      onMouseDown: (g) => g.preventDefault(),
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${c.has("bold") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => m("bold"),
+            type: "button",
+            title: "Bold",
+            children: /* @__PURE__ */ t("strong", { children: "B" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${c.has("italic") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => m("italic"),
+            type: "button",
+            title: "Italic",
+            children: /* @__PURE__ */ t("em", { children: "I" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn${c.has("underline") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => m("underline"),
+            type: "button",
+            title: "Underline",
+            children: /* @__PURE__ */ t("span", { style: { textDecoration: "underline" }, children: "U" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: `silk-ft-btn silk-ft-btn--mono${c.has("code") ? " silk-ft-btn--active" : ""}`,
+            onClick: () => m("code"),
+            type: "button",
+            title: "Inline code",
+            children: "</>"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: "silk-ft-btn",
+            onClick: p,
+            type: "button",
+            title: "Insert link",
+            children: /* @__PURE__ */ y(
+              "svg",
+              {
+                width: "15",
+                height: "15",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ t("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }),
+                  /* @__PURE__ */ t("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: "silk-ft-btn",
+            onClick: d,
+            type: "button",
+            title: "Block quote",
+            children: /* @__PURE__ */ y(
+              "svg",
+              {
+                width: "15",
+                height: "15",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                children: [
+                  /* @__PURE__ */ t("line", { x1: "3", y1: "6", x2: "3", y2: "18" }),
+                  /* @__PURE__ */ t("line", { x1: "8", y1: "8", x2: "21", y2: "8" }),
+                  /* @__PURE__ */ t("line", { x1: "8", y1: "12", x2: "18", y2: "12" }),
+                  /* @__PURE__ */ t("line", { x1: "8", y1: "16", x2: "15", y2: "16" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-font-size", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-ft-btn silk-ft-btn--sm",
+              onClick: () => S(-1),
+              disabled: l <= re,
+              type: "button",
+              title: "Decrease font size",
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ t("span", { className: "silk-ft-font-size-value", children: l }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "silk-ft-btn silk-ft-btn--sm",
+              onClick: () => S(1),
+              disabled: l >= se,
+              type: "button",
+              title: "Increase font size",
+              children: "+"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-color-wrap", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-btn silk-ft-btn--color${s ? " silk-ft-btn--active" : ""}`,
+              onClick: () => {
+                r(!s), a(!1);
+              },
+              type: "button",
+              title: "Text color",
+              children: /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "silk-ft-color-indicator",
+                  style: { borderBottomColor: h || "#1a1a1a" },
+                  children: "A"
+                }
+              )
+            }
+          ),
+          s && /* @__PURE__ */ t("div", { className: "silk-ft-color-grid", children: Ne.map((g) => /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-color-swatch${h === g.value || !h && g.value === null ? " silk-ft-color-swatch--active" : ""}`,
+              onClick: () => {
+                u(g.value), r(!1);
+              },
+              type: "button",
+              title: g.label,
+              style: g.value ? { backgroundColor: g.value } : void 0,
+              children: g.value === null && /* @__PURE__ */ y(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: [
+                    /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" }),
+                    /* @__PURE__ */ t("line", { x1: "4", y1: "4", x2: "20", y2: "20" })
+                  ]
+                }
+              )
+            },
+            g.value ?? "default"
+          )) })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "silk-ft-sep" }),
+        /* @__PURE__ */ y("div", { className: "silk-ft-font-wrap", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-btn${f ? " silk-ft-btn--active" : ""}`,
+              onClick: () => {
+                a(!f), r(!1);
+              },
+              type: "button",
+              title: "Font family",
+              style: {
+                fontFamily: ((k = U.find((g) => g.value === b)) == null ? void 0 : k.css) ?? '"Inter", sans-serif',
+                fontSize: 12,
+                fontWeight: 500
+              },
+              children: "Aa"
+            }
+          ),
+          f && /* @__PURE__ */ t("div", { className: "silk-ft-font-dropdown", children: U.map((g) => /* @__PURE__ */ t(
+            "button",
+            {
+              className: `silk-ft-font-option${b === g.value ? " silk-ft-font-option--active" : ""}`,
+              onClick: () => {
+                v(g.value), a(!1);
+              },
+              onMouseDown: (M) => M.preventDefault(),
+              type: "button",
+              style: { fontFamily: g.css },
+              children: g.label
+            },
+            g.label
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+function on() {
+  const [e] = _();
+  return x(() => {
+    const n = e.getRootElement();
+    if (!n) return;
+    const i = (o) => {
+      if (e.isEditable() && !(o.metaKey || o.ctrlKey)) return;
+      const f = o.target.closest("a");
+      !f || !n.contains(f) || e.getEditorState().read(() => {
+        const a = Xe(f);
+        if (!a) return;
+        const c = a.getParent(), l = ce(a) ? a : ce(c) ? c : null;
+        if (l) {
+          const h = l.getURL();
+          h && (o.preventDefault(), window.open(h, "_blank", "noopener,noreferrer"));
+        }
+      });
+    };
+    return n.addEventListener("click", i), () => n.removeEventListener("click", i);
+  }, [e]), null;
+}
+function rn() {
+  const [e] = _();
+  return x(() => Pe(e), [e]), /* @__PURE__ */ t(kt, {});
+}
+const sn = ["nw", "ne", "sw", "se"];
+function ln({
+  src: e,
+  altText: n,
+  width: i,
+  height: o,
+  nodeKey: s
+}) {
+  const [r] = _(), f = F(null), a = F(null), [c, l, h] = lt(s), [b, m] = C(!1), S = w(
+    (d) => f.current && f.current.contains(d.target) ? (h(), l(!0), !0) : !1,
+    [h, l]
+  ), u = w(
+    (d) => c && !b ? (d.preventDefault(), r.update(() => {
+      const k = H(s);
+      k && k.remove();
+    }), !0) : !1,
+    [r, c, b, s]
+  );
+  x(() => {
+    const d = r.registerCommand(
+      et,
+      S,
+      $
+    ), k = r.registerCommand(
+      tt,
+      u,
+      $
+    ), g = r.registerCommand(
+      nt,
+      u,
+      $
+    );
+    return () => {
+      d(), k(), g();
+    };
+  }, [r, S, u]);
+  const v = w(
+    (d, k) => {
+      k.preventDefault(), k.stopPropagation(), m(!0);
+      const g = a.current;
+      if (!g) return;
+      const M = k.clientX, Y = k.clientY, N = g.offsetWidth, A = g.offsetHeight, P = N / A, Q = (B) => {
+        let D = B.clientX - M;
+        const R = B.clientY - Y;
+        (d === "nw" || d === "sw") && (D = -D);
+        let T;
+        if (Math.abs(D) > Math.abs(R))
+          T = Math.max(100, N + D);
+        else {
+          const K = d === "nw" || d === "ne" ? -R : R;
+          T = Math.max(100, N + K * P);
+        }
+        const I = T / P;
+        g.style.width = `${Math.round(T)}px`, g.style.height = `${Math.round(I)}px`;
+      }, z = (B) => {
+        document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", z), m(!1);
+        const D = g.offsetWidth, R = g.offsetHeight;
+        r.update(() => {
+          const T = H(s);
+          if (T && an(T)) {
+            const I = T.getWritable();
+            I.__width = D, I.__height = R;
+          }
+        });
+      };
+      document.addEventListener("mousemove", Q), document.addEventListener("mouseup", z);
+    },
+    [r, s]
+  ), p = r.isEditable();
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      ref: f,
+      className: `silk-image-container${c ? " silk-image-container--selected" : ""}`,
+      children: [
+        /* @__PURE__ */ t(
+          "img",
+          {
+            ref: a,
+            src: e,
+            alt: n,
+            width: i,
+            height: o,
+            className: "silk-image",
+            draggable: !1
+          }
+        ),
+        c && p && /* @__PURE__ */ t(te, { children: sn.map((d) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: `silk-image-handle silk-image-handle--${d}`,
+            onMouseDown: (k) => v(d, k)
+          },
+          d
+        )) })
+      ]
+    }
+  );
+}
+class V extends Ze {
+  static getType() {
+    return "image";
+  }
+  static clone(n) {
+    return new V(
+      n.__src,
+      n.__altText,
+      n.__width,
+      n.__height,
+      n.__key
+    );
+  }
+  constructor(n, i, o, s, r) {
+    super(r), this.__src = n, this.__altText = i, this.__width = o, this.__height = s;
+  }
+  createDOM() {
+    const n = document.createElement("div");
+    return n.className = "silk-image-wrapper", n;
+  }
+  updateDOM() {
+    return !1;
+  }
+  isInline() {
+    return !1;
+  }
+  isKeyboardSelectable() {
+    return !0;
+  }
+  static importJSON(n) {
+    return ee(
+      n.src,
+      n.altText,
+      n.width,
+      n.height
+    );
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      src: this.__src,
+      altText: this.__altText,
+      width: this.__width,
+      height: this.__height
+    };
+  }
+  exportDOM() {
+    const n = document.createElement("img");
+    return n.src = this.__src, n.alt = this.__altText, this.__width && (n.width = this.__width), this.__height && (n.height = this.__height), { element: n };
+  }
+  static importDOM() {
+    return {
+      img: () => ({
+        conversion: (n) => {
+          const i = n;
+          return {
+            node: ee(
+              i.src,
+              i.alt || "",
+              i.naturalWidth || void 0,
+              i.naturalHeight || void 0
+            )
+          };
+        },
+        priority: 0
+      })
+    };
+  }
+  decorate(n) {
+    return /* @__PURE__ */ t(
+      ln,
+      {
+        src: this.__src,
+        altText: this.__altText,
+        width: this.__width,
+        height: this.__height,
+        nodeKey: this.__key
+      }
+    );
+  }
+}
+function ee(e, n = "", i, o) {
+  return qe(new V(e, n, i, o));
+}
+function an(e) {
+  return e instanceof V;
+}
+function fe(e) {
+  return e.type.startsWith("image/");
+}
+function cn(e) {
+  return new Promise((n, i) => {
+    const o = new FileReader();
+    o.onload = () => n(o.result), o.onerror = () => i(o.error), o.readAsDataURL(e);
+  });
+}
+function dn() {
+  const [e] = _();
+  return x(() => {
+    const n = (r) => {
+      for (const f of r)
+        cn(f).then((a) => {
+          e.update(() => {
+            const c = ee(a, f.name), l = E();
+            if (L(l))
+              l.focus.getNode().getTopLevelElementOrThrow().insertAfter(c);
+            else if (st(l)) {
+              const h = l.getNodes(), m = h[h.length - 1].getTopLevelElement();
+              m ? m.insertAfter(c) : de().append(c);
+            } else
+              de().append(c);
+          });
+        });
+    }, i = e.registerCommand(
+      ot,
+      (r) => {
+        var c;
+        const f = (c = r.clipboardData) == null ? void 0 : c.files;
+        if (!f || f.length === 0) return !1;
+        const a = Array.from(f).filter(fe);
+        return a.length === 0 ? !1 : (r.preventDefault(), n(a), !0);
+      },
+      X
+    ), o = e.registerCommand(
+      it,
+      (r) => {
+        var c;
+        const f = (c = r.dataTransfer) == null ? void 0 : c.files;
+        if (!f || f.length === 0) return !1;
+        const a = Array.from(f).filter(fe);
+        return a.length === 0 ? !1 : (r.preventDefault(), n(a), !0);
+      },
+      X
+    ), s = e.registerCommand(
+      rt,
+      (r) => {
+        var a;
+        const f = (a = r.dataTransfer) == null ? void 0 : a.types;
+        return f && f.includes("Files") ? (r.preventDefault(), !0) : !1;
+      },
+      X
+    );
+    return () => {
+      i(), o(), s();
+    };
+  }, [e]), null;
+}
+const un = {
+  root: "silk-root",
+  paragraph: "silk-paragraph",
+  link: "silk-link",
+  hr: "silk-hr",
+  list: {
+    ul: "silk-list-ul",
+    ol: "silk-list-ol",
+    listitem: "silk-list-item",
+    nested: {
+      listitem: "silk-list-item-nested"
+    },
+    listitemChecked: "silk-list-item-checked",
+    listitemUnchecked: "silk-list-item-unchecked"
+  },
+  image: "silk-image-wrapper",
+  text: {
+    bold: "silk-text-bold",
+    italic: "silk-text-italic",
+    underline: "silk-text-underline",
+    strikethrough: "silk-text-strikethrough",
+    code: "silk-text-code"
+  }
+}, fn = {
+  heading: {
+    h1: "silk-heading-h1",
+    h2: "silk-heading-h2",
+    h3: "silk-heading-h3"
+  },
+  quote: "silk-quote"
+}, hn = {
+  code: "silk-code-block"
+};
+function pn(...e) {
+  const n = {};
+  for (const i of e)
+    for (const [o, s] of Object.entries(i)) {
+      const r = n[o];
+      r && typeof r == "object" && typeof s == "object" && !Array.isArray(r) && !Array.isArray(s) ? n[o] = { ...r, ...s } : n[o] = s;
+    }
+  return n;
+}
+function mn(e, n) {
+  const i = [un];
+  return e.richText !== !1 && i.push(fn), e.code !== !1 && i.push(hn), n && i.push(n), pn(...i);
+}
+function gn(e) {
+  const n = [];
+  return e.richText !== !1 && n.push(Ie, Oe), e.code !== !1 && n.push(pe, Fe), e.lists !== !1 && n.push(ze, Be), n.push(W, Ue, Ge, V), n;
+}
+function kn({ editable: e }) {
+  const [n] = _();
+  return x(() => {
+    n.setEditable(e);
+  }, [n, e]), null;
+}
+const bn = {
+  history: !0,
+  richText: !0,
+  dragon: !0,
+  code: !0,
+  lists: !0
+};
+function Vn({
+  features: e,
+  namespace: n = "silk-editor",
+  className: i,
+  theme: o,
+  editable: s = !0,
+  onError: r,
+  onChange: f,
+  initialEditorState: a
+}) {
+  const c = F(null), l = {
+    ...bn,
+    ...e
+  }, h = mn(l, o), b = gn(l), m = w(
+    (u) => {
+      f && f(JSON.stringify(u.toJSON()));
+    },
+    [f]
+  );
+  return /* @__PURE__ */ t(Me, { initialConfig: {
+    namespace: n,
+    theme: h,
+    nodes: b,
+    editable: s,
+    editorState: a ?? void 0,
+    onError: r ?? ((u) => console.error(u))
+  }, children: /* @__PURE__ */ t(ke.Provider, { value: c, children: /* @__PURE__ */ y(
+    "div",
+    {
+      ref: c,
+      className: `silk-editor-container${i ? ` ${i}` : ""}`,
+      children: [
+        /* @__PURE__ */ t(nn, {}),
+        l.richText && /* @__PURE__ */ t(Mt, {}),
+        l.history && /* @__PURE__ */ t(_t, {}),
+        l.dragon && /* @__PURE__ */ t(Et, {}),
+        l.code && /* @__PURE__ */ t(It, {}),
+        l.lists && /* @__PURE__ */ t(rn, {}),
+        /* @__PURE__ */ t(Te, {}),
+        /* @__PURE__ */ t(Le, {}),
+        /* @__PURE__ */ t(Qt, {}),
+        /* @__PURE__ */ t(Ot, {}),
+        /* @__PURE__ */ t(qt, {}),
+        /* @__PURE__ */ t(on, {}),
+        /* @__PURE__ */ t(dn, {}),
+        /* @__PURE__ */ t(kn, { editable: s }),
+        f && /* @__PURE__ */ t(Ee, { onChange: m, ignoreSelectionChange: !0 }),
+        /* @__PURE__ */ t(Yt, {}),
+        /* @__PURE__ */ t(tn, {})
+      ]
+    }
+  ) }) });
+}
+export {
+  ee as $createImageNode,
+  be as $createNoteNode,
+  an as $isImageNode,
+  ye as $isNoteNode,
+  V as ImageNode,
+  W as NoteNode,
+  Vn as SilkEditor,
+  Vn as default
+};