silk-compose 0.0.1 → 0.0.2

package/dist/silk.js

@@ -1,44 +1,43 @@
 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 { useEffect as x, createContext as Se, useContext as we, useState as C, useRef as F, useCallback as w, useLayoutEffect as he, useMemo as _e, forwardRef as Me, useImperativeHandle as Ee } from "react";
+import { LexicalComposer as Le } 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, {});
-}
+import { HorizontalRulePlugin as Te } from "@lexical/react/LexicalHorizontalRulePlugin";
+import { TabIndentationPlugin as De } from "@lexical/react/LexicalTabIndentationPlugin";
+import { $createHeadingNode as le, $createQuoteNode as Ie, HeadingNode as Oe, QuoteNode as Re } from "@lexical/rich-text";
+import { CodeNode as pe, $isCodeNode as ne, $createCodeNode as Fe, CodeHighlightNode as Ae } from "@lexical/code";
+import { INSERT_UNORDERED_LIST_COMMAND as $e, INSERT_ORDERED_LIST_COMMAND as Pe, registerList as ze, ListNode as Be, ListItemNode as He } from "@lexical/list";
+import { $createHorizontalRuleNode as Ue, HorizontalRuleNode as We } from "@lexical/react/LexicalHorizontalRuleNode";
+import { TOGGLE_LINK_COMMAND as Ke, $toggleLink as ae, $createLinkNode as Ge, $isLinkNode as ce, LinkNode as Ve } from "@lexical/link";
+import { $getNodeByKey as H, ElementNode as Ye, $createParagraphNode as G, COMMAND_PRIORITY_LOW as $, $getSelection as E, $isRangeSelection as L, $setSelection as je, $createTextNode as Je, createCommand as Qe, $isParagraphNode as me, SELECTION_CHANGE_COMMAND as ge, FORMAT_TEXT_COMMAND as Xe, $getNearestNodeFromDOMNode as qe, $applyNodeReplacement as Ze, DecoratorNode as et, CLICK_COMMAND as tt, KEY_BACKSPACE_COMMAND as nt, KEY_DELETE_COMMAND as ot, PASTE_COMMAND as it, COMMAND_PRIORITY_HIGH as X, DROP_COMMAND as rt, DRAGOVER_COMMAND as st, $isNodeSelection as lt, $getRoot as de } from "lexical";
+import { useLexicalNodeSelection as at } from "@lexical/react/useLexicalNodeSelection";
+import { $getSelectionStyleValueForProperty as q, $patchStyleText as Z, $setBlocksType as ct } from "@lexical/selection";
+import { RichTextPlugin as dt } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable as ut } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary as ft } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as ht } from "@lexical/react/LexicalHistoryPlugin";
+import { registerDragonSupport as pt } from "@lexical/dragon";
+import { registerCodeHighlighting as mt, ShikiTokenizer as gt, getCodeLanguageOptions as kt } from "@lexical/code-shiki";
+import { ListPlugin as bt } from "@lexical/react/LexicalListPlugin";
+import { registerMarkdownShortcuts as yt, TEXT_FORMAT_TRANSFORMERS as vt, UNORDERED_LIST as Nt, ORDERED_LIST as Ct } from "@lexical/markdown";
+import { createPortal as xt } from "react-dom";
+import { useBasicTypeaheadTriggerMatch as St, LexicalTypeaheadMenuPlugin as wt, MenuOption as _t } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 function Mt() {
+  return /* @__PURE__ */ t(ht, {});
+}
+function Et() {
   return /* @__PURE__ */ t("div", { style: { position: "relative" }, children: /* @__PURE__ */ t(
-    ct,
+    dt,
     {
-      contentEditable: /* @__PURE__ */ t(dt, { className: "silk-content-editable" }),
+      contentEditable: /* @__PURE__ */ t(ut, { className: "silk-content-editable" }),
       placeholder: /* @__PURE__ */ t("div", { className: "silk-placeholder", children: "Start writing…" }),
-      ErrorBoundary: ut
+      ErrorBoundary: ft
     }
   ) });
 }
-function Et() {
+function Lt() {
   const [e] = _();
-  return x(() => ht(e), [e]), null;
+  return x(() => pt(e), [e]), null;
 }
 const ke = Se({
   current: null
@@ -46,24 +45,24 @@ const ke = Se({
 function oe() {
   return we(ke);
 }
-function Lt() {
-  return gt().map(([e, n]) => ({ value: e, label: n }));
+function Tt() {
+  return kt().map(([e, n]) => ({ value: e, label: n }));
 }
-const Tt = 32;
-function Dt({
+const Dt = 32;
+function It({
   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 [o] = _(), s = oe(), [r, h] = C(!1), [l, a] = C(() => o.isEditable()), c = F(null), [u, b] = C({ top: 0, left: 0, width: 0 });
+  x(() => o.registerEditableListener(a), [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,
+      top: k.top - g.top - Dt,
       left: k.left - g.left,
       width: k.width
     });
@@ -75,31 +74,31 @@ function Dt({
   }, [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(
+  const S = Tt(), f = ((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);
+      }), h(!1);
     },
     [o, n]
   );
   return x(() => {
     if (!r) return;
     const d = (k) => {
-      l.current && !l.current.contains(k.target) && f(!1);
+      c.current && !c.current.contains(k.target) && h(!1);
     };
     return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
   }, [r]), /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: c,
       className: "silk-code-header",
       style: {
         position: "absolute",
-        top: h.top,
-        left: h.left,
-        width: h.width,
+        top: u.top,
+        left: u.left,
+        width: u.width,
         pointerEvents: "auto"
       },
       children: [
@@ -107,17 +106,17 @@ function Dt({
           "button",
           {
             className: "silk-code-language-select",
-            onClick: () => a && f(!r),
-            style: { cursor: a ? "pointer" : "default" },
+            onClick: () => l && h(!r),
+            style: { cursor: l ? "pointer" : "default" },
             onMouseDown: (d) => d.preventDefault(),
             type: "button",
             children: [
-              u,
-              a && /* @__PURE__ */ t("span", { className: "silk-code-language-chevron", "aria-hidden": !0, children: "▾" })
+              f,
+              l && /* @__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(
+        r && l && /* @__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" : ""}`,
@@ -132,51 +131,51 @@ function Dt({
     }
   );
 }
-function It() {
+function Ot() {
   const [e] = _(), [n, i] = C(
     /* @__PURE__ */ new Map()
   );
-  return x(() => pt(e, {
-    ...mt,
+  return x(() => mt(e, {
+    ...gt,
     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
+        const l = /* @__PURE__ */ new Map();
+        for (const a of o) {
+          const c = H(a);
+          if (ne(c)) {
+            const u = e.getElementByKey(a);
+            u && l.set(a, {
+              language: c.getLanguage() ?? "typescript",
+              elem: u
             });
           }
         }
-        i(a);
+        i(l);
       });
     }, r = e.registerMutationListener(
       pe,
-      (a) => {
-        for (const [c, l] of a)
-          l === "destroyed" ? o.delete(c) : o.add(c);
+      (l) => {
+        for (const [a, c] of l)
+          c === "destroyed" ? o.delete(a) : o.add(a);
         s();
       },
       { skipInitialization: !1 }
-    ), f = e.registerUpdateListener(({ dirtyElements: a }) => {
-      let c = !1;
-      for (const l of o)
-        if (a.has(l)) {
-          c = !0;
+    ), h = e.registerUpdateListener(({ dirtyElements: l }) => {
+      let a = !1;
+      for (const c of o)
+        if (l.has(c)) {
+          a = !0;
           break;
         }
-      c && s();
+      a && s();
     });
     return () => {
-      r(), f();
+      r(), h();
     };
   }, [e]), /* @__PURE__ */ t(te, { children: Array.from(n.entries()).map(([o, { language: s, elem: r }]) => /* @__PURE__ */ t(
-    Dt,
+    It,
     {
       language: s,
       codeNodeKey: o,
@@ -185,7 +184,7 @@ function It() {
     o
   )) });
 }
-class W extends Ve {
+class W extends Ye {
   static getType() {
     return "note";
   }
@@ -237,12 +236,12 @@ function be(e = "info") {
 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);
+const ie = Qe("SHOW_LINK_DIALOG");
+function Rt() {
+  const [e] = _(), [n, i] = C(!1), [o, s] = C(""), [r, h] = C(""), [l, a] = C(!1), c = F(null), u = F(null);
   x(() => {
-    const u = e.registerCommand(
-      We,
+    const f = e.registerCommand(
+      Ke,
       (p) => (ae(p, {
         target: "_blank",
         rel: "noopener noreferrer"
@@ -253,45 +252,45 @@ function Ot() {
       (p) => {
         const d = E();
         if (L(d)) {
-          h.current = d.clone();
+          u.current = d.clone();
           const k = d.isCollapsed();
-          c(!k), k || f(d.getTextContent());
+          a(!k), k || h(d.getTextContent());
         }
-        return (p == null ? void 0 : p.text) !== void 0 && f(p.text), i(!0), !0;
+        return (p == null ? void 0 : p.text) !== void 0 && h(p.text), i(!0), !0;
       },
       $
     );
     return () => {
-      u(), v();
+      f(), v();
     };
   }, [e]), x(() => {
     n && setTimeout(() => {
-      var u;
-      return (u = l.current) == null ? void 0 : u.focus();
+      var f;
+      return (f = c.current) == null ? void 0 : f.focus();
     }, 0);
   }, [n]);
   const b = w(() => {
-    i(!1), s(""), f(""), c(!1), h.current = null, e.focus();
+    i(!1), s(""), h(""), a(!1), u.current = null, e.focus();
   }, [e]), m = w(() => {
     o && (e.update(() => {
-      if (h.current && Ye(h.current.clone()), a)
+      if (u.current && je(u.current.clone()), l)
         ae(o, {
           target: "_blank",
           rel: "noopener noreferrer"
         });
       else {
-        const u = Ke(o, {
+        const f = Ge(o, {
           target: "_blank",
           rel: "noopener noreferrer"
-        }), v = je(r || o);
-        u.append(v);
+        }), v = Je(r || o);
+        f.append(v);
         const p = E();
-        L(p) && p.insertNodes([u]);
+        L(p) && p.insertNodes([f]);
       }
     }), b());
-  }, [e, o, r, a, b]), S = w(
-    (u) => {
-      u.key === "Enter" && (u.preventDefault(), m()), u.key === "Escape" && b();
+  }, [e, o, r, l, b]), S = w(
+    (f) => {
+      f.key === "Enter" && (f.preventDefault(), m()), f.key === "Escape" && b();
     },
     [m, b]
   );
@@ -299,8 +298,8 @@ function Ot() {
     "div",
     {
       className: "silk-link-dialog-backdrop",
-      onMouseDown: (u) => {
-        u.target === u.currentTarget && b();
+      onMouseDown: (f) => {
+        f.target === f.currentTarget && b();
       },
       children: /* @__PURE__ */ y("div", { className: "silk-link-dialog", onKeyDown: S, children: [
         /* @__PURE__ */ y("div", { className: "silk-link-dialog-field", children: [
@@ -308,11 +307,11 @@ function Ot() {
           /* @__PURE__ */ t(
             "input",
             {
-              ref: l,
+              ref: c,
               className: "silk-link-dialog-input",
               type: "text",
               value: o,
-              onChange: (u) => s(u.target.value),
+              onChange: (f) => s(f.target.value),
               placeholder: "https://example.com"
             }
           )
@@ -322,12 +321,12 @@ function Ot() {
           /* @__PURE__ */ t(
             "input",
             {
-              className: `silk-link-dialog-input${a ? " silk-link-dialog-input--readonly" : ""}`,
+              className: `silk-link-dialog-input${l ? " silk-link-dialog-input--readonly" : ""}`,
               type: "text",
               value: r,
-              onChange: (u) => f(u.target.value),
+              onChange: (f) => h(f.target.value),
               placeholder: "Link text",
-              readOnly: a
+              readOnly: l
             }
           )
         ] }),
@@ -356,10 +355,10 @@ function Ot() {
     }
   ) : null;
 }
-const Rt = 18;
+const Ft = 18;
 function O({
   children: e,
-  size: n = Rt,
+  size: n = Ft,
   className: i
 }) {
   return /* @__PURE__ */ t(
@@ -378,7 +377,7 @@ function O({
     }
   );
 }
-function Ft(e) {
+function At(e) {
   return /* @__PURE__ */ y(O, { ...e, children: [
     /* @__PURE__ */ t("path", { d: "M4 12h8" }),
     /* @__PURE__ */ t("path", { d: "M4 18V6" }),
@@ -386,7 +385,7 @@ function Ft(e) {
     /* @__PURE__ */ t("path", { d: "M17 12l3-2v8" })
   ] });
 }
-function At(e) {
+function $t(e) {
   return /* @__PURE__ */ y(O, { ...e, children: [
     /* @__PURE__ */ t("path", { d: "M4 12h8" }),
     /* @__PURE__ */ t("path", { d: "M4 18V6" }),
@@ -394,7 +393,7 @@ function At(e) {
     /* @__PURE__ */ t("path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" })
   ] });
 }
-function $t(e) {
+function Pt(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" })
@@ -407,7 +406,7 @@ function ve(e) {
     /* @__PURE__ */ t("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
   ] });
 }
-function Pt(e) {
+function zt(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(
@@ -426,20 +425,20 @@ function Pt(e) {
     )
   ] });
 }
-function zt(e) {
+function Bt(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) {
+function Ht(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) {
+function Ut(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" }),
@@ -449,7 +448,7 @@ function Ht(e) {
     /* @__PURE__ */ t("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
   ] });
 }
-function Ut(e) {
+function Wt(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" }),
@@ -459,7 +458,7 @@ function Ut(e) {
     /* @__PURE__ */ t("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
   ] });
 }
-function Wt(e) {
+function Kt(e) {
   return /* @__PURE__ */ t(O, { ...e, children: /* @__PURE__ */ t("line", { x1: "2", y1: "12", x2: "22", y2: "12" }) });
 }
 function J(e) {
@@ -468,10 +467,10 @@ function J(e) {
   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 = [
+const Gt = [
   {
     name: "Heading 1",
-    icon: /* @__PURE__ */ t(Ft, {}),
+    icon: /* @__PURE__ */ t(At, {}),
     description: "Large section heading",
     execute: () => {
       const e = J(() => le("h1"));
@@ -480,7 +479,7 @@ const Kt = [
   },
   {
     name: "Heading 2",
-    icon: /* @__PURE__ */ t(At, {}),
+    icon: /* @__PURE__ */ t($t, {}),
     description: "Medium section heading",
     execute: () => {
       const e = J(() => le("h2"));
@@ -489,10 +488,10 @@ const Kt = [
   },
   {
     name: "Code Block",
-    icon: /* @__PURE__ */ t($t, {}),
+    icon: /* @__PURE__ */ t(Pt, {}),
     description: "Code with syntax highlighting",
     execute: () => {
-      const e = J(() => Re("typescript"));
+      const e = J(() => Fe("typescript"));
       e == null || e.node.selectStart();
     }
   },
@@ -511,44 +510,44 @@ const Kt = [
   },
   {
     name: "Bulleted List",
-    icon: /* @__PURE__ */ t(Ut, {}),
+    icon: /* @__PURE__ */ t(Wt, {}),
     description: "Unordered bulleted list",
     execute: (e) => {
-      e.dispatchCommand(Ae, void 0);
+      e.dispatchCommand($e, void 0);
     }
   },
   {
     name: "Numbered List",
-    icon: /* @__PURE__ */ t(Ht, {}),
+    icon: /* @__PURE__ */ t(Ut, {}),
     description: "Ordered numbered list",
     execute: (e) => {
-      e.dispatchCommand($e, void 0);
+      e.dispatchCommand(Pe, void 0);
     }
   },
   {
     name: "Divider",
-    icon: /* @__PURE__ */ t(Wt, {}),
+    icon: /* @__PURE__ */ t(Kt, {}),
     description: "Horizontal line separator",
     execute: () => {
-      const e = J(() => He());
+      const e = J(() => Ue());
       e == null || e.trailing.selectStart();
     }
   },
   {
     name: "Link",
-    icon: /* @__PURE__ */ t(Bt, {}),
+    icon: /* @__PURE__ */ t(Ht, {}),
     description: "Insert a masked link",
     execute: (e) => {
       e.dispatchCommand(ie, void 0);
     }
   }
 ];
-class Gt extends wt {
+class Vt extends _t {
   constructor(n) {
     super(n.name), this.entry = n;
   }
 }
-function Vt({
+function Yt({
   option: e,
   isSelected: n,
   onClick: i,
@@ -574,67 +573,67 @@ function Vt({
     }
   );
 }
-function Yt() {
+function jt() {
   const [e] = _(), [n, i] = C(() => e.isEditable()), [o, s] = C(null);
   x(() => e.registerEditableListener(i), [e]);
-  const r = xt("/", {
+  const r = St("/", {
     minLength: 0,
     allowWhitespace: !0
-  }), f = _e(() => {
+  }), h = _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();
+    const c = o.toLowerCase();
+    return Gt.filter(
+      (b) => b.name.toLowerCase().includes(c) || b.description.toLowerCase().includes(c)
+    ).map((b) => new Vt(b));
+  }, [o]), l = w(
+    (c, u, b) => {
+      u && u.remove(), c.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,
+  ), a = w(
+    (c, u, b) => c.current == null || u.options.length === 0 ? null : xt(
+      /* @__PURE__ */ t("div", { className: "silk-slash-menu", children: u.options.map((m, S) => /* @__PURE__ */ t(
+        Yt,
         {
           option: m,
-          isSelected: h.selectedIndex === S,
-          onClick: () => h.selectOptionAndCleanUp(m),
-          onMouseEnter: () => h.setHighlightedIndex(S)
+          isSelected: u.selectedIndex === S,
+          onClick: () => u.selectOptionAndCleanUp(m),
+          onMouseEnter: () => u.setHighlightedIndex(S)
         },
         m.key
       )) }),
-      l.current
+      c.current
     ),
     []
   );
   return n ? /* @__PURE__ */ t(
-    St,
+    wt,
     {
-      options: f,
+      options: h,
       onQueryChange: s,
-      onSelectOption: a,
+      onSelectOption: l,
       triggerFn: r,
-      menuRenderFn: c,
+      menuRenderFn: a,
       anchorClassName: "silk-slash-anchor"
     }
   ) : null;
 }
-const jt = [
+const Jt = [
   { value: "info", label: "Info", Icon: ve },
-  { value: "warning", label: "Question", Icon: Pt },
-  { value: "error", label: "Error", Icon: zt }
+  { value: "warning", label: "Question", Icon: zt },
+  { value: "error", label: "Error", Icon: Bt }
 ];
-function Jt({
+function Qt({
   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 [o] = _(), s = oe(), [r, h] = C(() => o.isEditable()), [l, a] = C(!1), c = F(null), [u, b] = C({ top: 0, left: 0 });
+  x(() => o.registerEditableListener(h), [o]);
   const m = w(() => {
-    const u = s.current;
-    if (!u) return;
-    const v = i.getBoundingClientRect(), p = u.getBoundingClientRect();
+    const f = s.current;
+    if (!f) return;
+    const v = i.getBoundingClientRect(), p = f.getBoundingClientRect();
     b({
       top: v.top - p.top + 13,
       left: v.left - p.left + 17
@@ -642,32 +641,32 @@ function Jt({
   }, [i, s]);
   he(() => {
     m();
-    const u = new ResizeObserver(m);
-    return u.observe(i), () => u.disconnect();
+    const f = new ResizeObserver(m);
+    return f.observe(i), () => f.disconnect();
   }, [i, m]), x(() => o.registerUpdateListener(() => m()), [o, m]);
   const S = w(
-    (u) => {
+    (f) => {
       o.update(() => {
         const v = H(n);
-        ye(v) && v.setNoteType(u);
-      }), c(!1);
+        ye(v) && v.setNoteType(f);
+      }), a(!1);
     },
     [o, n]
   );
   return x(() => {
-    if (!a) return;
-    const u = (v) => {
-      l.current && !l.current.contains(v.target) && c(!1);
+    if (!l) return;
+    const f = (v) => {
+      c.current && !c.current.contains(v.target) && a(!1);
     };
-    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
-  }, [a]), r ? /* @__PURE__ */ y(
+    return document.addEventListener("mousedown", f), () => document.removeEventListener("mousedown", f);
+  }, [l]), r ? /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: c,
       style: {
         position: "absolute",
-        top: h.top,
-        left: h.left,
+        top: u.top,
+        left: u.left,
         zIndex: 1
       },
       children: [
@@ -675,72 +674,72 @@ function Jt({
           "button",
           {
             className: `silk-note-icon-trigger silk-note-icon-trigger--${e}`,
-            onClick: () => c(!a),
-            onMouseDown: (u) => u.preventDefault(),
+            onClick: () => a(!l),
+            onMouseDown: (f) => f.preventDefault(),
             type: "button",
             "aria-label": "Change note type"
           }
         ),
-        a && /* @__PURE__ */ t("div", { className: "silk-note-icon-dropdown", children: jt.map((u) => /* @__PURE__ */ y(
+        l && /* @__PURE__ */ t("div", { className: "silk-note-icon-dropdown", children: Jt.map((f) => /* @__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),
+            className: `silk-note-type-option silk-note-type-option--${f.value}${e === f.value ? " silk-note-type-option--active" : ""}`,
+            onClick: () => S(f.value),
             onMouseDown: (v) => v.preventDefault(),
             type: "button",
             children: [
-              /* @__PURE__ */ t(u.Icon, { size: 14 }),
-              u.label
+              /* @__PURE__ */ t(f.Icon, { size: 14 }),
+              f.label
             ]
           },
-          u.value
+          f.value
         )) })
       ]
     }
   ) : null;
 }
-function Qt() {
+function Xt() {
   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
+        const l = /* @__PURE__ */ new Map();
+        for (const a of o) {
+          const c = H(a);
+          if (ye(c)) {
+            const u = e.getElementByKey(a);
+            u && l.set(a, {
+              noteType: c.getNoteType(),
+              elem: u
             });
           }
         }
-        i(a);
+        i(l);
       });
     }, r = e.registerMutationListener(
       W,
-      (a) => {
-        for (const [c, l] of a)
-          l === "destroyed" ? o.delete(c) : o.add(c);
+      (l) => {
+        for (const [a, c] of l)
+          c === "destroyed" ? o.delete(a) : o.add(a);
         s();
       },
       { skipInitialization: !1 }
-    ), f = e.registerUpdateListener(({ dirtyElements: a }) => {
-      let c = !1;
-      for (const l of o)
-        if (a.has(l)) {
-          c = !0;
+    ), h = e.registerUpdateListener(({ dirtyElements: l }) => {
+      let a = !1;
+      for (const c of o)
+        if (l.has(c)) {
+          a = !0;
           break;
         }
-      c && s();
+      a && s();
     });
     return () => {
-      r(), f();
+      r(), h();
     };
   }, [e]), /* @__PURE__ */ t(te, { children: Array.from(n.entries()).map(([o, { noteType: s, elem: r }]) => /* @__PURE__ */ t(
-    Jt,
+    Qt,
     {
       noteType: s,
       nodeKey: o,
@@ -749,14 +748,14 @@ function Qt() {
     o
   )) });
 }
-const Xt = [
-  ...yt,
-  vt,
-  Nt
+const qt = [
+  ...vt,
+  Nt,
+  Ct
 ];
-function qt() {
+function Zt() {
   const [e] = _();
-  return x(() => bt(e, Xt), [e]), null;
+  return x(() => yt(e, qt), [e]), null;
 }
 const Ne = [
   { value: null, label: "Default" },
@@ -778,14 +777,14 @@ const Ne = [
     css: '"Space Grotesk", sans-serif'
   }
 ];
-function Zt(e) {
+function en(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(
+  const [e] = _(), [n, i] = C(/* @__PURE__ */ new Set()), [o, s] = C(ue), [r, h] = C(null), [l, a] = C(
     null
-  ), l = w(() => {
+  ), c = w(() => {
     e.getEditorState().read(() => {
       const p = E();
       if (!L(p)) return;
@@ -802,23 +801,23 @@ function Ce() {
         "color",
         ""
       );
-      f(g || null);
+      h(g || null);
       const M = q(
         p,
         "font-family",
         ""
       );
-      c(Zt(M || null));
+      a(en(M || null));
     });
   }, [e]);
   x(() => e.registerCommand(
     ge,
-    () => (l(), !1),
+    () => (c(), !1),
     $
-  ), [e, l]), x(() => e.registerUpdateListener(() => l()), [e, l]);
-  const h = w(
+  ), [e, c]), x(() => e.registerUpdateListener(() => c()), [e, c]);
+  const u = w(
     (p) => {
-      e.dispatchCommand(Qe, p);
+      e.dispatchCommand(Xe, p);
     },
     [e]
   ), b = w(
@@ -849,7 +848,7 @@ function Ce() {
       });
     },
     [e]
-  ), u = w(() => {
+  ), f = w(() => {
     e.getEditorState().read(() => {
       const p = E();
       if (L(p)) {
@@ -860,30 +859,30 @@ function Ce() {
   }, [e]), v = w(() => {
     e.update(() => {
       const p = E();
-      L(p) && at(p, () => De());
+      L(p) && ct(p, () => Ie());
     });
   }, [e]);
   return {
     formats: n,
     fontSize: o,
     currentColor: r,
-    currentFontFamily: a,
-    toggleFormat: h,
+    currentFontFamily: l,
+    toggleFormat: u,
     changeFontSize: b,
     applyColor: m,
     applyFontFamily: S,
-    openLinkDialog: u,
+    openLinkDialog: f,
     insertQuote: v
   };
 }
-const en = 8;
-function tn() {
+const tn = 8;
+function nn() {
   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), {
+  const [e] = _(), n = oe(), i = F(null), [o, s] = C(!1), [r, h] = C({ top: 0, left: 0 }), [l, a] = C(!1), [c, u] = C(!1), {
     formats: b,
     fontSize: m,
     currentColor: S,
-    currentFontFamily: u,
+    currentFontFamily: f,
     toggleFormat: v,
     changeFontSize: p,
     applyColor: d,
@@ -921,8 +920,8 @@ function tn() {
     }
     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,
+    I = Math.max(T / 2 + 4, I), I = Math.min(D.width - T / 2 - 4, I), h({
+      top: z.top - D.top - tn,
       left: I
     }), s(!0);
   }, [e, n]);
@@ -931,12 +930,12 @@ function tn() {
     () => (M(), !1),
     $
   ), [e, M]), x(() => e.registerUpdateListener(() => M()), [e, M]), x(() => {
-    if (!a && !l) return;
+    if (!l && !c) return;
     const N = (A) => {
-      i.current && !i.current.contains(A.target) && (c(!1), h(!1));
+      i.current && !i.current.contains(A.target) && (a(!1), u(!1));
     };
     return document.addEventListener("mousedown", N), () => document.removeEventListener("mousedown", N);
-  }, [a, l]), o ? /* @__PURE__ */ y(
+  }, [l, c]), o ? /* @__PURE__ */ y(
     "div",
     {
       ref: i,
@@ -1046,9 +1045,9 @@ function tn() {
           /* @__PURE__ */ t(
             "button",
             {
-              className: `silk-ft-btn silk-ft-btn--color${a ? " silk-ft-btn--active" : ""}`,
+              className: `silk-ft-btn silk-ft-btn--color${l ? " silk-ft-btn--active" : ""}`,
               onClick: () => {
-                c(!a), h(!1);
+                a(!l), u(!1);
               },
               type: "button",
               title: "Text color",
@@ -1062,12 +1061,12 @@ function tn() {
               )
             }
           ),
-          a && /* @__PURE__ */ t("div", { className: "silk-ft-color-grid", children: Ne.map((N) => /* @__PURE__ */ t(
+          l && /* @__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);
+                d(N.value), a(!1);
               },
               type: "button",
               title: N.label,
@@ -1096,26 +1095,26 @@ function tn() {
           /* @__PURE__ */ t(
             "button",
             {
-              className: `silk-ft-btn${l ? " silk-ft-btn--active" : ""}`,
+              className: `silk-ft-btn${c ? " silk-ft-btn--active" : ""}`,
               onClick: () => {
-                h(!l), c(!1);
+                u(!c), a(!1);
               },
               type: "button",
               title: "Font family",
               style: {
-                fontFamily: ((Y = U.find((N) => N.value === u)) == null ? void 0 : Y.css) ?? '"Inter", sans-serif',
+                fontFamily: ((Y = U.find((N) => N.value === f)) == 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(
+          c && /* @__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" : ""}`,
+              className: `silk-ft-font-option${f === N.value ? " silk-ft-font-option--active" : ""}`,
               onClick: () => {
-                k(N.value), h(!1);
+                k(N.value), u(!1);
               },
               onMouseDown: (A) => A.preventDefault(),
               type: "button",
@@ -1129,27 +1128,27 @@ function tn() {
     }
   ) : null;
 }
-function nn() {
+function on() {
   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,
+  const [e] = _(), [n, i] = C(() => e.isEditable()), o = F(null), [s, r] = C(!1), [h, l] = C(!1), {
+    formats: a,
+    fontSize: c,
+    currentColor: u,
     currentFontFamily: b,
     toggleFormat: m,
     changeFontSize: S,
-    applyColor: u,
+    applyColor: f,
     applyFontFamily: v,
     openLinkDialog: p,
     insertQuote: d
   } = Ce();
   return x(() => e.registerEditableListener(i), [e]), x(() => {
-    if (!s && !f) return;
+    if (!s && !h) return;
     const g = (M) => {
-      o.current && !o.current.contains(M.target) && (r(!1), a(!1));
+      o.current && !o.current.contains(M.target) && (r(!1), l(!1));
     };
     return document.addEventListener("mousedown", g), () => document.removeEventListener("mousedown", g);
-  }, [s, f]), /* @__PURE__ */ y(
+  }, [s, h]), /* @__PURE__ */ y(
     "div",
     {
       ref: o,
@@ -1160,7 +1159,7 @@ function nn() {
         /* @__PURE__ */ t(
           "button",
           {
-            className: `silk-ft-btn${c.has("bold") ? " silk-ft-btn--active" : ""}`,
+            className: `silk-ft-btn${a.has("bold") ? " silk-ft-btn--active" : ""}`,
             onClick: () => m("bold"),
             type: "button",
             title: "Bold",
@@ -1170,7 +1169,7 @@ function nn() {
         /* @__PURE__ */ t(
           "button",
           {
-            className: `silk-ft-btn${c.has("italic") ? " silk-ft-btn--active" : ""}`,
+            className: `silk-ft-btn${a.has("italic") ? " silk-ft-btn--active" : ""}`,
             onClick: () => m("italic"),
             type: "button",
             title: "Italic",
@@ -1180,7 +1179,7 @@ function nn() {
         /* @__PURE__ */ t(
           "button",
           {
-            className: `silk-ft-btn${c.has("underline") ? " silk-ft-btn--active" : ""}`,
+            className: `silk-ft-btn${a.has("underline") ? " silk-ft-btn--active" : ""}`,
             onClick: () => m("underline"),
             type: "button",
             title: "Underline",
@@ -1190,7 +1189,7 @@ function nn() {
         /* @__PURE__ */ t(
           "button",
           {
-            className: `silk-ft-btn silk-ft-btn--mono${c.has("code") ? " silk-ft-btn--active" : ""}`,
+            className: `silk-ft-btn silk-ft-btn--mono${a.has("code") ? " silk-ft-btn--active" : ""}`,
             onClick: () => m("code"),
             type: "button",
             title: "Inline code",
@@ -1258,19 +1257,19 @@ function nn() {
             {
               className: "silk-ft-btn silk-ft-btn--sm",
               onClick: () => S(-1),
-              disabled: l <= re,
+              disabled: c <= re,
               type: "button",
               title: "Decrease font size",
               children: "−"
             }
           ),
-          /* @__PURE__ */ t("span", { className: "silk-ft-font-size-value", children: l }),
+          /* @__PURE__ */ t("span", { className: "silk-ft-font-size-value", children: c }),
           /* @__PURE__ */ t(
             "button",
             {
               className: "silk-ft-btn silk-ft-btn--sm",
               onClick: () => S(1),
-              disabled: l >= se,
+              disabled: c >= se,
               type: "button",
               title: "Increase font size",
               children: "+"
@@ -1284,7 +1283,7 @@ function nn() {
             {
               className: `silk-ft-btn silk-ft-btn--color${s ? " silk-ft-btn--active" : ""}`,
               onClick: () => {
-                r(!s), a(!1);
+                r(!s), l(!1);
               },
               type: "button",
               title: "Text color",
@@ -1292,7 +1291,7 @@ function nn() {
                 "span",
                 {
                   className: "silk-ft-color-indicator",
-                  style: { borderBottomColor: h || "#1a1a1a" },
+                  style: { borderBottomColor: u || "#1a1a1a" },
                   children: "A"
                 }
               )
@@ -1301,9 +1300,9 @@ function nn() {
           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" : ""}`,
+              className: `silk-ft-color-swatch${u === g.value || !u && g.value === null ? " silk-ft-color-swatch--active" : ""}`,
               onClick: () => {
-                u(g.value), r(!1);
+                f(g.value), r(!1);
               },
               type: "button",
               title: g.label,
@@ -1332,9 +1331,9 @@ function nn() {
           /* @__PURE__ */ t(
             "button",
             {
-              className: `silk-ft-btn${f ? " silk-ft-btn--active" : ""}`,
+              className: `silk-ft-btn${h ? " silk-ft-btn--active" : ""}`,
               onClick: () => {
-                a(!f), r(!1);
+                l(!h), r(!1);
               },
               type: "button",
               title: "Font family",
@@ -1346,12 +1345,12 @@ function nn() {
               children: "Aa"
             }
           ),
-          f && /* @__PURE__ */ t("div", { className: "silk-ft-font-dropdown", children: U.map((g) => /* @__PURE__ */ t(
+          h && /* @__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);
+                v(g.value), l(!1);
               },
               onMouseDown: (M) => M.preventDefault(),
               type: "button",
@@ -1365,71 +1364,71 @@ function nn() {
     }
   );
 }
-function on() {
+function rn() {
   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"));
+      const h = o.target.closest("a");
+      !h || !n.contains(h) || e.getEditorState().read(() => {
+        const l = qe(h);
+        if (!l) return;
+        const a = l.getParent(), c = ce(l) ? l : ce(a) ? a : null;
+        if (c) {
+          const u = c.getURL();
+          u && (o.preventDefault(), window.open(u, "_blank", "noopener,noreferrer"));
         }
       });
     };
     return n.addEventListener("click", i), () => n.removeEventListener("click", i);
   }, [e]), null;
 }
-function rn() {
+function sn() {
   const [e] = _();
-  return x(() => Pe(e), [e]), /* @__PURE__ */ t(kt, {});
+  return x(() => ze(e), [e]), /* @__PURE__ */ t(bt, {});
 }
-const sn = ["nw", "ne", "sw", "se"];
-function ln({
+const ln = ["nw", "ne", "sw", "se"];
+function an({
   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 [r] = _(), h = F(null), l = F(null), [a, c, u] = at(s), [b, m] = C(!1), S = w(
+    (d) => h.current && h.current.contains(d.target) ? (u(), c(!0), !0) : !1,
+    [u, c]
+  ), f = w(
+    (d) => a && !b ? (d.preventDefault(), r.update(() => {
       const k = H(s);
       k && k.remove();
     }), !0) : !1,
-    [r, c, b, s]
+    [r, a, b, s]
   );
   x(() => {
     const d = r.registerCommand(
-      et,
+      tt,
       S,
       $
     ), k = r.registerCommand(
-      tt,
-      u,
+      nt,
+      f,
       $
     ), g = r.registerCommand(
-      nt,
-      u,
+      ot,
+      f,
       $
     );
     return () => {
       d(), k(), g();
     };
-  }, [r, S, u]);
+  }, [r, S, f]);
   const v = w(
     (d, k) => {
       k.preventDefault(), k.stopPropagation(), m(!0);
-      const g = a.current;
+      const g = l.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;
@@ -1449,7 +1448,7 @@ function ln({
         const D = g.offsetWidth, R = g.offsetHeight;
         r.update(() => {
           const T = H(s);
-          if (T && an(T)) {
+          if (T && cn(T)) {
             const I = T.getWritable();
             I.__width = D, I.__height = R;
           }
@@ -1462,13 +1461,13 @@ function ln({
   return /* @__PURE__ */ y(
     "div",
     {
-      ref: f,
-      className: `silk-image-container${c ? " silk-image-container--selected" : ""}`,
+      ref: h,
+      className: `silk-image-container${a ? " silk-image-container--selected" : ""}`,
       children: [
         /* @__PURE__ */ t(
           "img",
           {
-            ref: a,
+            ref: l,
             src: e,
             alt: n,
             width: i,
@@ -1477,7 +1476,7 @@ function ln({
             draggable: !1
           }
         ),
-        c && p && /* @__PURE__ */ t(te, { children: sn.map((d) => /* @__PURE__ */ t(
+        a && p && /* @__PURE__ */ t(te, { children: ln.map((d) => /* @__PURE__ */ t(
           "div",
           {
             className: `silk-image-handle silk-image-handle--${d}`,
@@ -1489,7 +1488,7 @@ function ln({
     }
   );
 }
-class V extends Ze {
+class V extends et {
   static getType() {
     return "image";
   }
@@ -1559,7 +1558,7 @@ class V extends Ze {
   }
   decorate(n) {
     return /* @__PURE__ */ t(
-      ln,
+      an,
       {
         src: this.__src,
         altText: this.__altText,
@@ -1571,63 +1570,63 @@ class V extends Ze {
   }
 }
 function ee(e, n = "", i, o) {
-  return qe(new V(e, n, i, o));
+  return Ze(new V(e, n, i, o));
 }
-function an(e) {
+function cn(e) {
   return e instanceof V;
 }
 function fe(e) {
   return e.type.startsWith("image/");
 }
-function cn(e) {
+function dn(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() {
+function un() {
   const [e] = _();
   return x(() => {
     const n = (r) => {
-      for (const f of r)
-        cn(f).then((a) => {
+      for (const h of r)
+        dn(h).then((l) => {
           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);
+            const a = ee(l, h.name), c = E();
+            if (L(c))
+              c.focus.getNode().getTopLevelElementOrThrow().insertAfter(a);
+            else if (lt(c)) {
+              const u = c.getNodes(), m = u[u.length - 1].getTopLevelElement();
+              m ? m.insertAfter(a) : de().append(a);
             } else
-              de().append(c);
+              de().append(a);
           });
         });
     }, i = e.registerCommand(
-      ot,
+      it,
       (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);
+        var a;
+        const h = (a = r.clipboardData) == null ? void 0 : a.files;
+        if (!h || h.length === 0) return !1;
+        const l = Array.from(h).filter(fe);
+        return l.length === 0 ? !1 : (r.preventDefault(), n(l), !0);
       },
       X
     ), o = e.registerCommand(
-      it,
+      rt,
       (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);
+        var a;
+        const h = (a = r.dataTransfer) == null ? void 0 : a.files;
+        if (!h || h.length === 0) return !1;
+        const l = Array.from(h).filter(fe);
+        return l.length === 0 ? !1 : (r.preventDefault(), n(l), !0);
       },
       X
     ), s = e.registerCommand(
-      rt,
+      st,
       (r) => {
-        var a;
-        const f = (a = r.dataTransfer) == null ? void 0 : a.types;
-        return f && f.includes("Files") ? (r.preventDefault(), !0) : !1;
+        var l;
+        const h = (l = r.dataTransfer) == null ? void 0 : l.types;
+        return h && h.includes("Files") ? (r.preventDefault(), !0) : !1;
       },
       X
     );
@@ -1636,7 +1635,7 @@ function dn() {
     };
   }, [e]), null;
 }
-const un = {
+const fn = {
   root: "silk-root",
   paragraph: "silk-paragraph",
   link: "silk-link",
@@ -1659,17 +1658,17 @@ const un = {
     strikethrough: "silk-text-strikethrough",
     code: "silk-text-code"
   }
-}, fn = {
+}, hn = {
   heading: {
     h1: "silk-heading-h1",
     h2: "silk-heading-h2",
     h3: "silk-heading-h3"
   },
   quote: "silk-quote"
-}, hn = {
+}, pn = {
   code: "silk-code-block"
 };
-function pn(...e) {
+function mn(...e) {
   const n = {};
   for (const i of e)
     for (const [o, s] of Object.entries(i)) {
@@ -1678,87 +1677,94 @@ function pn(...e) {
     }
   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, n) {
+  const i = [fn];
+  return e.richText !== !1 && i.push(hn), e.code !== !1 && i.push(pn), n && i.push(n), mn(...i);
 }
-function gn(e) {
+function kn(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;
+  return e.richText !== !1 && n.push(Oe, Re), e.code !== !1 && n.push(pe, Ae), e.lists !== !1 && n.push(Be, He), n.push(W, We, Ve, V), n;
 }
-function kn({ editable: e }) {
+function bn({ editable: e }) {
   const [n] = _();
   return x(() => {
     n.setEditable(e);
   }, [n, e]), null;
 }
-const bn = {
+function yn({
+  handleRef: e
+}) {
+  const [n] = _();
+  return Ee(
+    e,
+    () => ({
+      getState: () => JSON.stringify(n.getEditorState().toJSON())
+    }),
+    [n]
+  ), null;
+}
+const vn = {
   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, {})
-      ]
-    }
-  ) }) });
-}
+}, Yn = Me(
+  function({
+    features: n,
+    namespace: i = "silk-editor",
+    className: o,
+    theme: s,
+    editable: r = !0,
+    onError: h,
+    initialEditorState: l
+  }, a) {
+    const c = F(null), u = {
+      ...vn,
+      ...n
+    }, b = gn(u, s), m = kn(u);
+    return /* @__PURE__ */ t(Le, { initialConfig: {
+      namespace: i,
+      theme: b,
+      nodes: m,
+      editable: r,
+      editorState: l ?? void 0,
+      onError: h ?? ((f) => console.error(f))
+    }, children: /* @__PURE__ */ t(ke.Provider, { value: c, children: /* @__PURE__ */ y(
+      "div",
+      {
+        ref: c,
+        className: `silk-editor-container${o ? ` ${o}` : ""}`,
+        children: [
+          /* @__PURE__ */ t(on, {}),
+          u.richText && /* @__PURE__ */ t(Et, {}),
+          u.history && /* @__PURE__ */ t(Mt, {}),
+          u.dragon && /* @__PURE__ */ t(Lt, {}),
+          u.code && /* @__PURE__ */ t(Ot, {}),
+          u.lists && /* @__PURE__ */ t(sn, {}),
+          /* @__PURE__ */ t(De, {}),
+          /* @__PURE__ */ t(Te, {}),
+          /* @__PURE__ */ t(Xt, {}),
+          /* @__PURE__ */ t(Rt, {}),
+          /* @__PURE__ */ t(Zt, {}),
+          /* @__PURE__ */ t(rn, {}),
+          /* @__PURE__ */ t(un, {}),
+          /* @__PURE__ */ t(bn, { editable: r }),
+          /* @__PURE__ */ t(yn, { handleRef: a }),
+          /* @__PURE__ */ t(jt, {}),
+          /* @__PURE__ */ t(nn, {})
+        ]
+      }
+    ) }) });
+  }
+);
 export {
   ee as $createImageNode,
   be as $createNoteNode,
-  an as $isImageNode,
+  cn as $isImageNode,
   ye as $isNoteNode,
   V as ImageNode,
   W as NoteNode,
-  Vn as SilkEditor,
-  Vn as default
+  Yn as SilkEditor,
+  Yn as default
 };