silk-compose 0.0.2 → 0.0.3

package/dist/silk.js

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