reactjs-tiptap-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
144 lines (140 loc) • 3.46 kB
JavaScript
import { E as b } from "./clsx-DaPvp9ji.js";
import { jsx as f, Fragment as v } from "react/jsx-runtime";
import { u as y, d as x, A as E } from "./index-RcSPeQHn.js";
import "react";
import "./theme.js";
function P(o, i) {
var m;
const t = document.createElement("iframe");
t.setAttribute(
"style",
"position: absolute; width: 0; height: 0; top: 0; left: 0;"
), document.body.appendChild(t);
const e = t.contentDocument || ((m = t.contentWindow) == null ? void 0 : m.document);
if (!e) return;
const {
paperSize: s,
title: n = "React Tiptap Editor",
margins: {
top: a,
right: d,
bottom: r,
left: c
}
} = i, p = `
<!DOCTYPE html>
<html lang="en">
<head>
<title>${n}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media print {
@page {
size: ${s};
margin: ${a} ${d} ${r} ${c}; /* top, right, bottom, left */
}
body {
background: none;
margin: 0;
padding: 0;
}
.print-container {
width: 100%;
box-sizing: border-box;
}
.no-print {
display: none;
}
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reactjs-tiptap-editor@latest/lib/style.css">
</head>
<body>
<div class="print-container">
${o}
</div>
</body>
</html>
`;
e.open(), e.write(p), e.close(), t.addEventListener("load", () => {
setTimeout(() => {
var l, u;
try {
(l = t.contentWindow) == null || l.focus(), (u = t.contentWindow) == null || u.print();
} catch (g) {
console.error("Print failed", g);
}
setTimeout(() => {
document.body.removeChild(t);
}, 100);
}, 50);
});
}
function h(o, i) {
const t = o.getHTML();
return t ? (P(t, i), !0) : !1;
}
function L() {
const o = y(T.name), {
icon: i = void 0,
tooltip: t = void 0,
shortcutKeys: e = void 0,
tooltipOptions: s = {},
action: n = void 0,
isActive: a = void 0
} = (o == null ? void 0 : o.componentProps) ?? {}, { dataState: d, disabled: r, update: c } = x(a), p = () => {
r || n && (n(), c());
};
return o ? /* @__PURE__ */ f(
E,
{
action: p,
dataState: d,
disabled: r,
icon: i,
shortcutKeys: e,
tooltip: t,
tooltipOptions: s
}
) : /* @__PURE__ */ f(v, {});
}
const T = /* @__PURE__ */ b.create({
name: "exportPdf",
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-expect-error
addOptions() {
var o;
return {
...(o = this.parent) == null ? void 0 : o.call(this),
paperSize: "Letter",
title: "Echo Editor",
margins: {
top: "0.4in",
right: "0.4in",
bottom: "0.4in",
left: "0.4in"
},
button: ({ editor: i, extension: t, t: e }) => ({
componentProps: {
action: () => {
h(i, t.options);
},
icon: "ExportPdf",
tooltip: e("editor.exportPdf.tooltip"),
isActive: () => !1,
disabled: !1
}
})
};
},
addCommands() {
return {
exportToPdf: () => ({ editor: o }) => h(o, this.options)
};
}
});
export {
T as ExportPdf,
L as RichTextExportPdf
};