reactjs-tiptap-editor/lib/ImportWord.js

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

import { E as M } from "./clsx-DaPvp9ji.js";
import { jsx as g, Fragment as I, jsxs as P } from "react/jsx-runtime";
import { useState as R, useRef as N } from "react";
import k from "mammoth";
import { h as q, u as z, d as D, q as K, r as U, A as G, s as J, t as Q } from "./index-RcSPeQHn.js";
import "./theme.js";
import { u as V } from "./index-C07N8gA1.js";
function X(e, t) {
  const s = atob(e.split(",")[1]), c = Array.from({ length: s.length });
  for (let i = 0; i < s.length; i++)
    c[i] = s.charCodeAt(i);
  const l = new Uint8Array(c);
  return new Blob([l], { type: t });
}
function Y(e, t) {
  return new File([e], t, { type: e.type });
}
function it() {
  const e = q(), t = z(w.name), {
    icon: s = void 0,
    tooltip: c = void 0,
    tooltipOptions: l = {},
    isActive: i = void 0,
    mammothOptions: T,
    limit: x,
    convert: h
  } = (t == null ? void 0 : t.componentProps) ?? {}, { editorDisabled: C } = D(i), u = K(w.name), { toast: E } = U(), { t: W } = V(), [B, y] = R(!1), b = N(null);
  function L() {
    var o;
    (o = b.current) == null || o.click();
  }
  function O(o) {
    const n = o.target.files[0];
    if (n) {
      if (n.size > x) {
        E({
          variant: "destructive",
          title: W("editor.importWord.limitSize")
        });
        return;
      }
      j(n);
    }
  }
  async function S(o) {
    const a = new DOMParser().parseFromString(o, "text/html"), p = a.querySelectorAll("img");
    if (p.length === 0)
      return a.body.innerHTML;
    if (J(e, Q.name)) {
      const d = u == null ? void 0 : u.options;
      if (d && typeof d.upload == "function") {
        const A = [];
        for (const f of p) {
          const m = f.getAttribute("src"), r = X(m, "image/jpeg"), H = Y(r, "image.jpeg");
          A.push(H);
        }
        const F = await d.upload(A);
        for (const [f, m] of p.entries()) {
          m.setAttribute("src", F[f].src);
          const r = m.parentElement;
          (r == null ? void 0 : r.tagName) === "P" && (r.insertAdjacentElement("beforebegin", m), !r.hasChildNodes() && r.textContent === "" && r.remove());
        }
        return a.body.innerHTML;
      } else
        return console.warn("Image Upload method found, skip image conversion"), a.body.innerHTML;
    } else
      return console.error("Image extension not found, unable to convert image"), a.body.innerHTML;
  }
  async function j(o) {
    y(!0);
    try {
      if (h) {
        const n = await h(o);
        v(n);
      } else {
        const n = await o.arrayBuffer(), { value: a } = await k.convertToHtml(
          { arrayBuffer: n },
          T
        );
        v(a);
      }
    } finally {
      y(!1);
    }
  }
  async function v(o) {
    const n = await S(o);
    e.chain().setContent(n, !0).run();
  }
  return t ? /* @__PURE__ */ P(I, { children: [
    /* @__PURE__ */ g(
      G,
      {
        action: L,
        disabled: C,
        icon: s,
        loading: B,
        tooltip: c,
        tooltipOptions: l
      }
    ),
    /* @__PURE__ */ g(
      "input",
      {
        accept: ".docx",
        onChange: O,
        ref: b,
        type: "file",
        style: {
          display: "none"
        }
      }
    )
  ] }) : /* @__PURE__ */ g(I, {});
}
const w = /* @__PURE__ */ M.create({
  name: "importWord",
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var e;
    return {
      ...(e = this.parent) == null ? void 0 : e.call(this),
      upload: void 0,
      convert: void 0,
      limit: 1024 * 1024 * 10,
      // 10 MB
      button: ({ extension: t, t: s }) => {
        const { convert: c, limit: l, mammothOptions: i } = t.options;
        return {
          componentProps: {
            convert: c,
            limit: l,
            mammothOptions: i,
            // action: () => editor.commands.setHorizontalRule(),
            // disabled: !editor.can().setHorizontalRule(),
            icon: "Word",
            shortcutKeys: t.options.shortcutKeys ?? ["alt", "mod", "S"],
            tooltip: s("editor.importWord.tooltip")
          }
        };
      }
    };
  }
});
export {
  w as ImportWord,
  it as RichTextImportWord
};