@milkdown/crepe 7.3.6 → 7.5.0

package/lib/index-BoI246Ti.js

@@ -1,507 +0,0 @@
-import { I as X, i as F } from "./schema-ywm7RaKF.js";
-import { w as C, h, e as q, a as U, c as M, u as P } from "./meta-tAGyVRPE.js";
-import { h as J, v as Q, $ as S, j as A, i as ee } from "./index-Ls2I7eOW.js";
-import { i as V, a as ie } from "./icons-HYkfuR-O.js";
-import { u as f } from "./hooks-82sqkbtE.js";
-import { c as _, u as D, $ as O } from "./index-cteyPSwp.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: () => V,
-  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 = S(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 = _`
-  :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 = M(Z);
-customElements.define("milkdown-image-block", le);
-const K = O(F.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,
-  F,
-  K,
-  N
-].flat(), me = {
-  imageIcon: () => V,
-  uploadButton: () => h`Upload`,
-  confirmButton: () => h`⏎`,
-  uploadPlaceholderText: "/Paste",
-  onUpload: (n) => Promise.resolve(URL.createObjectURL(n))
-}, H = S(me, "inlineImageConfigCtx");
-C(H, {
-  displayName: "Config<image-inline>",
-  group: "ImageInline"
-});
-const se = _`
-  :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 = M(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}", j = 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: () => j,
-      confirmButton: () => ge,
-      uploadPlaceholderText: "or paste link"
-    })), a.update(N.key, (l) => ({
-      ...l,
-      imageIcon: () => j,
-      captionIcon: () => ue,
-      confirmButton: () => h`Confirm`,
-      captionPlaceholderText: "Write Image Caption"
-    }));
-  }).use(re).use(ce);
-};
-export {
-  be as defineFeature
-};