@milkdown/crepe 7.3.3

package/lib/index-8S8qcncB.js

@@ -0,0 +1,507 @@
+import { I as X, i as M } from "./schema-tKk3m1fu.js";
+import { w as C, h, e as q, a as U, c as S, u as P } from "./meta-tAGyVRPE.js";
+import { g as J, v as Q, $ as V, h as A, i as ee } from "./index-XiXSFLmI.js";
+import { i as _, a as ie } from "./icons-HYkfuR-O.js";
+import { u as f } from "./hooks-82sqkbtE.js";
+import { c as j, u as D, $ as O } from "./use-css-light-dom-EKWZDmbJ.js";
+import { c as k } from "./clsx-7d8NmkQq.js";
+function te(n) {
+  return Q(n, "paragraph", (a, l, d) => {
+    var m, w;
+    if (((m = a.children) == null ? void 0 : m.length) !== 1)
+      return;
+    const e = (w = a.children) == null ? void 0 : w[0];
+    if (!e || e.type !== "image")
+      return;
+    const { url: i, alt: o, title: t } = e, p = {
+      type: "image-block",
+      url: i,
+      alt: o,
+      title: t
+    };
+    d.children.splice(l, 1, p);
+  });
+}
+const R = J("remark-image-block", () => () => te);
+C(R.plugin, {
+  displayName: "Remark<remarkImageBlock>",
+  group: "ImageBlock"
+});
+C(R.options, {
+  displayName: "RemarkConfig<remarkImageBlock>",
+  group: "ImageBlock"
+});
+const ne = {
+  imageIcon: () => _,
+  captionIcon: () => ie,
+  uploadButton: () => h`Upload file`,
+  confirmButton: () => h`Confirm ⏎`,
+  uploadPlaceholderText: "or paste the image link ...",
+  captionPlaceholderText: "Image caption",
+  onUpload: (n) => Promise.resolve(URL.createObjectURL(n))
+}, N = V(ne, "imageBlockConfigCtx");
+C(N, {
+  displayName: "Config<image-block>",
+  group: "ImageBlock"
+});
+function oe({
+  image: n,
+  resizeHandle: a,
+  ratio: l,
+  setRatio: d,
+  src: e
+}) {
+  const i = q();
+  U(() => {
+    const o = n.current;
+    o && (delete o.dataset.origin, delete o.dataset.height, o.style.height = "");
+  }, [e]), U(() => {
+    const o = a.current, t = n.current;
+    if (!o || !t)
+      return;
+    const p = (c) => {
+      c.preventDefault();
+      const g = t.getBoundingClientRect().top, u = c.clientY - g, v = Number(u < 100 ? 100 : u).toFixed(2);
+      t.dataset.height = v, t.style.height = `${v}px`;
+    }, m = () => {
+      document.removeEventListener("pointermove", p), document.removeEventListener("pointerup", m);
+      const c = Number(t.dataset.origin), g = Number(t.dataset.height), u = Number.parseFloat(Number(g / c).toFixed(2));
+      Number.isNaN(u) || d(u);
+    }, w = (c) => {
+      c.preventDefault(), document.addEventListener("pointermove", p), document.addEventListener("pointerup", m);
+    }, y = (c) => {
+      const g = i.current.getBoundingClientRect().width;
+      if (!g)
+        return;
+      const u = c.target, v = u.height, x = u.width, I = x < g ? v : g * (v / x), s = (I * l).toFixed(2);
+      t.dataset.origin = I.toFixed(2), t.dataset.height = s, t.style.height = `${s}px`;
+    };
+    return t.addEventListener("load", y), o.addEventListener("pointerdown", w), () => {
+      t.removeEventListener("load", y), o.removeEventListener("pointerdown", w);
+    };
+  }, []);
+}
+const ae = j`
+  :host {
+    outline: none;
+    margin: 16px 0;
+    display: block;
+  }
+
+  :host > .image-wrapper {
+    position: relative;
+    width: fit-content;
+    margin: 0 auto;
+    min-width: 100px;
+  }
+
+  :host > .image-wrapper .operation {
+    position: absolute;
+    display: flex;
+  }
+
+  :host > .image-wrapper .operation > .operation-item {
+    cursor: pointer;
+  }
+
+  :host > .image-wrapper img {
+    max-width: 100%;
+    min-height: 100px;
+    display: block;
+    object-fit: cover;
+  }
+
+  :host > .image-wrapper > .image-resize-handle {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host > .image-wrapper > .image-resize-handle:hover {
+    cursor: row-resize;
+  }
+
+  :host input {
+    background: transparent;
+    outline: none;
+    border: 0;
+  }
+
+  :host > .caption-input {
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  :host > .image-edit {
+    display: flex;
+  }
+
+  :host > .image-edit .confirm {
+    cursor: pointer;
+  }
+
+  :host > .image-edit .link-importer {
+    position: relative;
+    flex: 1;
+  }
+
+  :host > .image-edit .link-importer > .link-input-area {
+    width: 100%;
+  }
+
+  :host > .image-edit .link-importer .placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    cursor: text;
+  }
+
+  :host > .image-edit .link-importer .placeholder .uploader {
+    cursor: pointer;
+    display: flex;
+  }
+
+  :host .hidden {
+    display: none !important;
+  }
+`, Z = ({
+  src: n = "",
+  caption: a = "",
+  ratio: l = 1,
+  selected: d = !1,
+  setAttr: e,
+  config: i
+}) => {
+  const o = P(), t = P(), p = P(), [m, w] = f(a.length > 0), [y, c] = f(n.length !== 0), [g] = f(crypto.randomUUID()), [u, v] = f(!1), [x, I] = f(n);
+  D(ae), oe({
+    image: o,
+    resizeHandle: t,
+    ratio: l,
+    setRatio: (r) => e == null ? void 0 : e("ratio", r),
+    src: n
+  }), U(() => {
+    d || w(a.length > 0);
+  }, [d]);
+  const s = (r) => {
+    const $ = r.target.value;
+    e == null || e("caption", $);
+  }, L = (r) => {
+    const $ = r.target.value;
+    c($.length !== 0), I($);
+  }, b = async (r) => {
+    var z;
+    const E = (z = r.target.files) == null ? void 0 : z[0];
+    if (!E)
+      return;
+    const $ = await (i == null ? void 0 : i.onUpload(E));
+    $ && (e == null || e("src", $), c(!0));
+  }, B = () => {
+    w((r) => !r);
+  }, T = () => {
+    var r;
+    e == null || e("src", ((r = p.current) == null ? void 0 : r.value) ?? "");
+  }, G = (r) => {
+    r.key === "Enter" && T();
+  };
+  return h`<host class=${k(d && "selected")}>
+    <div class=${k("image-edit", n.length > 0 && "hidden")}>
+      <div class="image-icon">
+        ${i == null ? void 0 : i.imageIcon()}
+      </div>
+      <div class=${k("link-importer", u && "focus")}>
+        <input
+          ref=${p}
+          class="link-input-area"
+          value=${x}
+          oninput=${L}
+          onkeydown=${G}
+          onfocus=${() => v(!0)}
+          onblur=${() => v(!1)}
+        />
+        <div class=${k("placeholder", y && "hidden")}>
+          <input class="hidden" id=${g} type="file" accept="image/*" onchange=${b} />
+          <label class="uploader" for=${g}>
+            ${i == null ? void 0 : i.uploadButton()}
+          </label>
+          <span class="text" onclick=${() => {
+    var r;
+    return (r = p.current) == null ? void 0 : r.focus();
+  }}>
+            ${i == null ? void 0 : i.uploadPlaceholderText}
+          </span>
+        </div>
+      </div>
+      <div
+        class=${k("confirm", x.length === 0 && "hidden")}
+        onclick=${() => T()}
+      >
+        ${i == null ? void 0 : i.confirmButton()}
+      </div>
+    </div>
+    <div class=${k("image-wrapper", n.length === 0 && "hidden")}>
+      <div class="operation">
+        <div class="operation-item" onmousedown=${B}>${i == null ? void 0 : i.captionIcon()}</div>
+      </div>
+      <img ref=${o} data-type=${X} src=${n} alt=${a} ratio=${l} />
+      <div ref=${t} class="image-resize-handle"></div>
+    </div>
+    <input
+      class=${k("caption-input", !m && "hidden")}
+      placeholder=${i == null ? void 0 : i.captionPlaceholderText}
+      oninput=${s}
+      value=${a}
+    />
+  </host>`;
+};
+Z.props = {
+  src: String,
+  caption: String,
+  ratio: Number,
+  selected: Boolean,
+  setAttr: Function,
+  config: Object
+};
+const le = S(Z);
+customElements.define("milkdown-image-block", le);
+const K = O(M.node, (n) => (a, l, d) => {
+  const e = document.createElement("milkdown-image-block"), i = n.get(N.key), o = (t) => {
+    e.src = t.attrs.src, e.ratio = t.attrs.ratio, e.caption = t.attrs.caption;
+  };
+  return o(a), e.selected = !1, e.setAttr = (t, p) => {
+    const m = d();
+    m != null && l.dispatch(l.state.tr.setNodeAttribute(m, t, p));
+  }, e.config = i, {
+    dom: e,
+    update: (t) => t.type !== a.type ? !1 : (o(t), !0),
+    stopEvent: (t) => !!(e.selected && t.target instanceof HTMLInputElement),
+    selectNode: () => {
+      e.selected = !0;
+    },
+    deselectNode: () => {
+      e.selected = !1;
+    },
+    destroy: () => {
+      e.remove();
+    }
+  };
+});
+C(K, {
+  displayName: "NodeView<image-block>",
+  group: "ImageBlock"
+});
+const re = [
+  R,
+  M,
+  K,
+  N
+].flat(), me = {
+  imageIcon: () => _,
+  uploadButton: () => h`Upload`,
+  confirmButton: () => h`⏎`,
+  uploadPlaceholderText: "/Paste",
+  onUpload: (n) => Promise.resolve(URL.createObjectURL(n))
+}, H = V(me, "inlineImageConfigCtx");
+C(H, {
+  displayName: "Config<image-inline>",
+  group: "ImageInline"
+});
+const se = j`
+  :host {
+    outline: none;
+    display: inline;
+  }
+
+  :host input {
+    background: transparent;
+    outline: none;
+    border: 0;
+  }
+
+  :host.empty {
+    vertical-align: bottom;
+  }
+
+  :host > .empty-image-inline {
+    display: inline-flex;
+  }
+
+  :host > .empty-image-inline .confirm {
+    cursor: pointer;
+  }
+
+  :host > .empty-image-inline .link-importer {
+    position: relative;
+    flex: 1;
+  }
+
+  :host > .empty-image-inline .link-importer > .link-input-area {
+    width: 208px;
+  }
+
+  :host > .empty-image-inline .link-importer .placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    cursor: text;
+  }
+
+  :host > .empty-image-inline .link-importer .placeholder .uploader {
+    cursor: pointer;
+    display: flex;
+  }
+
+  :host .hidden {
+    display: none !important;
+  }
+`, W = ({
+  src: n = "",
+  selected: a = !1,
+  alt: l,
+  title: d,
+  setAttr: e,
+  config: i
+}) => {
+  const o = P(), [t] = f(crypto.randomUUID()), [p, m] = f(!1), [w, y] = f(n.length !== 0), [c, g] = f(n);
+  D(se);
+  const u = (s) => {
+    const b = s.target.value;
+    y(b.length !== 0), g(b);
+  }, v = async (s) => {
+    var B;
+    const L = (B = s.target.files) == null ? void 0 : B[0];
+    if (!L)
+      return;
+    const b = await (i == null ? void 0 : i.onUpload(L));
+    b && (e == null || e("src", b), y(!0));
+  }, x = () => {
+    var s;
+    e == null || e("src", ((s = o.current) == null ? void 0 : s.value) ?? "");
+  }, I = (s) => {
+    s.key === "Enter" && x();
+  };
+  return h`<host class=${k(a && "selected", !n && "empty")}>
+    ${n ? h`<img class="image-inline" src=${n} alt=${l} title=${d} />` : h`<div class="empty-image-inline">
+        <div class="image-icon">
+          ${i == null ? void 0 : i.imageIcon()}
+        </div>
+        <div class=${k("link-importer", p && "focus")}>
+          <input
+            ref=${o}
+            class="link-input-area"
+            value=${c}
+            oninput=${u}
+            onkeydown=${I}
+            onfocus=${() => m(!0)}
+            onblur=${() => m(!1)}
+          />
+          <div class=${k("placeholder", w && "hidden")}>
+            <input class="hidden" id=${t} type="file" accept="image/*" onchange=${v} />
+            <label class="uploader" for=${t}>
+              ${i == null ? void 0 : i.uploadButton()}
+            </label>
+            <span class="text" onclick=${() => {
+    var s;
+    return (s = o.current) == null ? void 0 : s.focus();
+  }}>
+              ${i == null ? void 0 : i.uploadPlaceholderText}
+            </span>
+          </div>
+        </div>
+        <div
+          class=${k("confirm", c.length === 0 && "hidden")}
+          onclick=${() => x()}
+        >
+          ${i == null ? void 0 : i.confirmButton()}
+        </div>
+      </div>`}
+  </host>`;
+};
+W.props = {
+  src: String,
+  alt: String,
+  title: String,
+  selected: Boolean,
+  setAttr: Function,
+  config: Object
+};
+const pe = S(W);
+customElements.define("milkdown-image-inline", pe);
+const Y = O(A.node, (n) => (a, l, d) => {
+  const e = document.createElement("milkdown-image-inline"), i = n.get(H.key), o = (t) => {
+    e.src = t.attrs.src, e.alt = t.attrs.alt, e.title = t.attrs.title;
+  };
+  return o(a), e.selected = !1, e.setAttr = (t, p) => {
+    const m = d();
+    m != null && l.dispatch(l.state.tr.setNodeAttribute(m, t, p));
+  }, e.config = i, {
+    dom: e,
+    update: (t) => t.type !== a.type ? !1 : (o(t), !0),
+    stopEvent: (t) => !!(e.selected && t.target instanceof HTMLInputElement),
+    selectNode: () => {
+      e.selected = !0;
+    },
+    deselectNode: () => {
+      e.selected = !1;
+    },
+    destroy: () => {
+      e.remove();
+    }
+  };
+});
+C(Y, {
+  displayName: "NodeView<image-inline>",
+  group: "ImageInline"
+});
+const ce = [
+  H,
+  Y
+], de = ".milkdown milkdown-image-inline.empty.selected{background:none;outline:none}.milkdown milkdown-image-inline.empty.selected .empty-image-inline{box-shadow:var(--crepe-shadow-1)}.milkdown milkdown-image-inline.selected{background:none;outline:1px solid var(--crepe-color-primary)}.milkdown milkdown-image-inline.selected ::selection{background:transparent}.milkdown milkdown-image-inline img.image-inline{vertical-align:text-bottom}.milkdown milkdown-image-inline .empty-image-inline{align-items:center;padding:4px 10px;gap:10px;background:var(--crepe-color-surface);font-family:var(--crepe-font-default);border-radius:8px}.milkdown milkdown-image-inline .empty-image-inline .image-icon{padding:3px;width:24px;height:24px}.milkdown milkdown-image-inline .empty-image-inline .image-icon svg{width:18px;height:18px}.milkdown milkdown-image-inline .empty-image-inline .link-importer{height:24px}.milkdown milkdown-image-inline .empty-image-inline .link-importer .placeholder{color:color-mix(in srgb,var(--crepe-color-on-background),transparent 60%)}.milkdown milkdown-image-inline .empty-image-inline .link-importer .placeholder ::selection{background:transparent}.milkdown milkdown-image-inline .empty-image-inline .link-importer .link-input-area{line-height:24px}.milkdown milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader{gap:8px;color:var(--crepe-color-primary);justify-content:center;transition:color .2s;font-family:var(--crepe-font-default)}.milkdown milkdown-image-inline .empty-image-inline .link-importer.focus .placeholder .uploader{color:unset}.milkdown milkdown-image-inline .empty-image-inline .link-importer .placeholder .uploader:hover{color:var(--crepe-color-primary)}.milkdown milkdown-image-inline .empty-image-inline .link-importer .placeholder .text{margin-left:8px}.milkdown milkdown-image-inline .empty-image-inline .confirm{width:24px;height:24px;padding:3px;border-radius:8px;color:var(--crepe-color-primary)}.milkdown milkdown-image-inline .empty-image-inline .confirm svg{width:18px;height:18px}.milkdown milkdown-image-inline .empty-image-inline .confirm:hover{background:var(--crepe-color-hover)}.milkdown milkdown-image-block.selected>.image-edit{outline:1px solid var(--crepe-color-outline)}.milkdown milkdown-image-block.selected>.image-wrapper img{outline:1px solid var(--crepe-color-outline)}.milkdown milkdown-image-block.selected ::selection{background:transparent}.milkdown milkdown-image-block .image-wrapper{display:flex;justify-content:center;align-items:center}.milkdown milkdown-image-block .image-wrapper .operation{gap:16px;right:16px;top:16px;opacity:0;transition:all .2s}.milkdown milkdown-image-block:hover>.image-wrapper .operation{opacity:1}.milkdown milkdown-image-block .image-wrapper .operation>.operation-item{color:var(--crepe-color-on-inverse);padding:8px;background:var(--crepe-color-inverse);opacity:.6;border-radius:50%;width:40px;height:40px}.milkdown milkdown-image-block .image-wrapper .operation>.operation-item svg{width:24px;height:24px}.milkdown milkdown-image-block .image-wrapper .image-resize-handle{height:4px;bottom:-3px;max-width:160px;width:100%;background:var(--crepe-color-outline);opacity:0;transition:all .2s;border-radius:4px}.milkdown milkdown-image-block:hover>.image-wrapper .image-resize-handle{opacity:1}.milkdown milkdown-image-block .caption-input{margin:16px auto;font-family:var(--crepe-font-default)}.milkdown milkdown-image-block .image-edit{align-items:center;padding:16px 24px;gap:16px;background:var(--crepe-color-surface);height:56px}.milkdown milkdown-image-block .image-edit .image-icon{color:var(--crepe-color-outline)}.milkdown milkdown-image-block .image-edit .image-icon svg{width:24px;height:24px}.milkdown milkdown-image-block .image-edit .link-importer .placeholder{color:color-mix(in srgb,var(--crepe-color-on-background),transparent 60%)}.milkdown milkdown-image-block .image-edit .link-importer .placeholder ::selection{background:transparent}.milkdown milkdown-image-block .image-edit .link-importer .link-input-area{line-height:24px}.milkdown milkdown-image-block .image-edit .link-importer .placeholder .uploader{gap:8px;color:var(--crepe-color-primary);justify-content:center;transition:color .2s}.milkdown milkdown-image-block .image-edit .link-importer.focus .placeholder .uploader{color:unset}.milkdown milkdown-image-block .image-edit .link-importer .placeholder .uploader:hover{color:var(--crepe-color-primary)}.milkdown milkdown-image-block .image-edit .link-importer .placeholder .text{margin-left:8px}.milkdown milkdown-image-block .image-edit .confirm{background:var(--crepe-color-secondary);color:var(--crepe-color-on-secondary);line-height:40px;padding:0 24px;border-radius:100px;font-size:14px}", F = h`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_1013_1596)">
+      <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1596">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`, ge = h`
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <g clip-path="url(#clip0_1013_1606)">
+      <path d="M9.00012 16.1998L5.50012 12.6998C5.11012 12.3098 4.49012 12.3098 4.10012 12.6998C3.71012 13.0898 3.71012 13.7098 4.10012 14.0998L8.29012 18.2898C8.68012 18.6798 9.31012 18.6798 9.70012 18.2898L20.3001 7.69982C20.6901 7.30982 20.6901 6.68982 20.3001 6.29982C19.9101 5.90982 19.2901 5.90982 18.9001 6.29982L9.00012 16.1998Z" fill="#817567"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_1013_1606">
+        <rect width="24" height="24" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`, ue = h`
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M9 22a1 1 0 0 1-1-1v-3H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6.1l-3.7 3.71c-.2.19-.45.29-.7.29zm1-6v3.08L13.08 16H20V4H4v12z"/></svg>
+`, be = (n) => {
+  n.config(ee(de)).config((a) => {
+    a.update(H.key, (l) => ({
+      ...l,
+      imageIcon: () => F,
+      confirmButton: () => ge,
+      uploadPlaceholderText: "or paste link"
+    })), a.update(N.key, (l) => ({
+      ...l,
+      imageIcon: () => F,
+      captionIcon: () => ue,
+      confirmButton: () => h`Confirm`,
+      captionPlaceholderText: "Write Image Caption"
+    }));
+  }).use(re).use(ce);
+};
+export {
+  be as defineFeature
+};