velaris-richtext-editor
Version:
A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React
652 lines (651 loc) • 23.4 kB
JavaScript
import { N as at, n as st, m as lt } from "./index-Drmyqk9P.js";
import { N as ut, c as q, R as ct, n as ft, g as $ } from "./dom-dataset-CJ7GyQ2E.js";
import { jsxs as B, jsx as g } from "react/jsx-runtime";
import it, { useState as O, useCallback as I, useEffect as G, useRef as pt } from "react";
import { w as dt, x as ht, A as Y, y as mt, z as bt, F as gt, B as yt, a2 as vt, p as _t, K as wt } from "./RichTextEditor-BbtoCmQU.js";
import { n as Et } from "./index-D9llIWB5.js";
import { Resizable as Tt } from "re-resizable";
import Ot from "react-dom";
let X;
function Q() {
try {
return X || (X = Et()), X;
} catch {
throw new Error("Error EventEmitter");
}
}
const J = "OPEN_EXCALIDRAW_SETTING_MODAL";
function xt(l, d) {
Q().on(l, d);
}
function Ct(l, d) {
Q().off(l, d);
}
function Gt(l) {
Q().emit(J, l);
}
const Dt = ({ editor: l }) => {
const [d, x] = O(null), [C, c] = O({}), [f, n] = O({ elements: [], appState: { isLoading: !1 }, files: null }), [e, r] = O(!1), [h, s] = O(!0), [b, i] = O(null), N = I(
(_) => {
_ && import("@excalidraw/excalidraw").then((T) => {
x(T.Excalidraw);
}).catch(i).finally(() => s(!1));
},
[s]
), W = I((_) => {
setTimeout(() => {
_.refresh();
});
}, []), E = I((_, T, S) => {
c({
elements: _,
appState: { isLoading: !1 },
files: S
});
}, []), V = I(() => {
if (!d) {
r(!1);
return;
}
l.chain().focus().setExcalidraw({ data: C }).run(), r(!1);
}, [d, l, C, r]);
return G(() => {
const _ = (T) => {
r(!0), T && n(T.data);
};
return xt(J, _), () => {
Ct(J, _);
};
}, [l, r]), /* @__PURE__ */ B(
dt,
{
onOpenChange: r,
open: e,
children: [
/* @__PURE__ */ g(ht, { asChild: !0, children: /* @__PURE__ */ g(
Y,
{
action: () => r(!0),
icon: "Excalidraw",
tooltip: "Excalidraw"
}
) }),
/* @__PURE__ */ B(mt, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
/* @__PURE__ */ g(bt, { children: "Excalidraw" }),
/* @__PURE__ */ B("div", { style: { height: "100%", borderWidth: 1 }, children: [
h && /* @__PURE__ */ g("p", { children: "Loading..." }),
b && /* @__PURE__ */ g("p", { children: b && b.message || "Error" }),
/* @__PURE__ */ g(
"div",
{
ref: N,
style: { width: "100%", height: 600 },
children: !h && !b && d ? /* @__PURE__ */ g(
d,
{
initialData: f,
langCode: "en",
onChange: E,
ref: W
}
) : null
}
)
] }),
/* @__PURE__ */ g(gt, { children: /* @__PURE__ */ g(
yt,
{
onClick: V,
type: "button",
children: "Save changes"
}
) })
] })
]
}
);
};
var H = { exports: {} }, Pt = H.exports, tt;
function St() {
return tt || (tt = 1, function(l, d) {
(function(C, c) {
l.exports = c(it, Ot);
})(Pt, function(x, C) {
return (
/******/
function(c) {
var f = {};
function n(e) {
if (f[e])
return f[e].exports;
var r = f[e] = {
/******/
i: e,
/******/
l: !1,
/******/
exports: {}
/******/
};
return c[e].call(r.exports, r, r.exports, n), r.l = !0, r.exports;
}
return n.m = c, n.c = f, n.d = function(e, r, h) {
n.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: h });
}, n.r = function(e) {
typeof Symbol < "u" && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 });
}, n.t = function(e, r) {
if (r & 1 && (e = n(e)), r & 8 || r & 4 && typeof e == "object" && e && e.__esModule) return e;
var h = /* @__PURE__ */ Object.create(null);
if (n.r(h), Object.defineProperty(h, "default", { enumerable: !0, value: e }), r & 2 && typeof e != "string") for (var s in e) n.d(h, s, (function(b) {
return e[b];
}).bind(null, s));
return h;
}, n.n = function(e) {
var r = e && e.__esModule ? (
/******/
function() {
return e.default;
}
) : (
/******/
function() {
return e;
}
);
return n.d(r, "a", r), r;
}, n.o = function(e, r) {
return Object.prototype.hasOwnProperty.call(e, r);
}, n.p = "", n(n.s = 4);
}([
/* 0 */
/***/
function(c, f, n) {
c.exports = n(5)();
},
/* 1 */
/***/
function(c, f) {
c.exports = x;
},
/* 2 */
/***/
function(c, f) {
c.exports = C;
},
/* 3 */
/***/
function(c, f) {
c.exports = function(n, e, r) {
var h = n.direction, s = n.value;
switch (h) {
case "top":
return r.top + s < e.top && r.bottom > e.bottom && r.left < e.left && r.right > e.right;
case "left":
return r.left + s < e.left && r.bottom > e.bottom && r.top < e.top && r.right > e.right;
case "bottom":
return r.bottom - s > e.bottom && r.left < e.left && r.right > e.right && r.top < e.top;
case "right":
return r.right - s > e.right && r.left < e.left && r.top < e.top && r.bottom > e.bottom;
}
};
},
/* 4 */
/***/
function(c, f, n) {
n.r(f), n.d(f, "default", function() {
return F;
});
var e = n(1), r = /* @__PURE__ */ n.n(e), h = n(2), s = /* @__PURE__ */ n.n(h), b = n(0), i = /* @__PURE__ */ n.n(b), N = n(3), W = /* @__PURE__ */ n.n(N);
function E(o) {
return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? E = function(u) {
return typeof u;
} : E = function(u) {
return u && typeof Symbol == "function" && u.constructor === Symbol && u !== Symbol.prototype ? "symbol" : typeof u;
}, E(o);
}
function V(o, a) {
if (!(o instanceof a))
throw new TypeError("Cannot call a class as a function");
}
function _(o, a) {
for (var u = 0; u < a.length; u++) {
var t = a[u];
t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), Object.defineProperty(o, t.key, t);
}
}
function T(o, a, u) {
return a && _(o.prototype, a), o;
}
function S(o, a) {
return a && (E(a) === "object" || typeof a == "function") ? a : p(o);
}
function R(o) {
return R = Object.setPrototypeOf ? Object.getPrototypeOf : function(u) {
return u.__proto__ || Object.getPrototypeOf(u);
}, R(o);
}
function p(o) {
if (o === void 0)
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return o;
}
function D(o, a) {
if (typeof a != "function" && a !== null)
throw new TypeError("Super expression must either be null or a function");
o.prototype = Object.create(a && a.prototype, { constructor: { value: o, writable: !0, configurable: !0 } }), a && M(o, a);
}
function M(o, a) {
return M = Object.setPrototypeOf || function(t, w) {
return t.__proto__ = w, t;
}, M(o, a);
}
function P(o, a, u) {
return a in o ? Object.defineProperty(o, a, { value: u, enumerable: !0, configurable: !0, writable: !0 }) : o[a] = u, o;
}
function ot(o) {
return o.width === void 0 && (o.width = o.right - o.left), o.height === void 0 && (o.height = o.bottom - o.top), o;
}
var F = /* @__PURE__ */ function(o) {
D(a, o);
function a(u) {
var t;
return V(this, a), t = S(this, R(a).call(this, u)), P(p(t), "getContainer", function() {
return t.props.containment || window;
}), P(p(t), "addEventListener", function(w, m, y, k) {
t.debounceCheck || (t.debounceCheck = {});
var v, j, L = function() {
v = null, t.check();
};
k > -1 ? j = function() {
v || (v = setTimeout(L, k || 0));
} : j = function() {
clearTimeout(v), v = setTimeout(L, y || 0);
};
var z = {
target: w,
fn: j,
getLastTimeout: function() {
return v;
}
};
w.addEventListener(m, z.fn), t.debounceCheck[m] = z;
}), P(p(t), "startWatching", function() {
t.debounceCheck || t.interval || (t.props.intervalCheck && (t.interval = setInterval(t.check, t.props.intervalDelay)), t.props.scrollCheck && t.addEventListener(t.getContainer(), "scroll", t.props.scrollDelay, t.props.scrollThrottle), t.props.resizeCheck && t.addEventListener(window, "resize", t.props.resizeDelay, t.props.resizeThrottle), !t.props.delayedCall && t.check());
}), P(p(t), "stopWatching", function() {
if (t.debounceCheck) {
for (var w in t.debounceCheck)
if (t.debounceCheck.hasOwnProperty(w)) {
var m = t.debounceCheck[w];
clearTimeout(m.getLastTimeout()), m.target.removeEventListener(w, m.fn), t.debounceCheck[w] = null;
}
}
t.debounceCheck = null, t.interval && (t.interval = clearInterval(t.interval));
}), P(p(t), "check", function() {
var w = t.node, m, y;
if (!w)
return t.state;
if (m = ot(t.roundRectDown(w.getBoundingClientRect())), t.props.containment) {
var k = t.props.containment.getBoundingClientRect();
y = {
top: k.top,
left: k.left,
bottom: k.bottom,
right: k.right
};
} else
y = {
top: 0,
left: 0,
bottom: window.innerHeight || document.documentElement.clientHeight,
right: window.innerWidth || document.documentElement.clientWidth
};
var v = t.props.offset || {}, j = E(v) === "object";
j && (y.top += v.top || 0, y.left += v.left || 0, y.bottom -= v.bottom || 0, y.right -= v.right || 0);
var L = {
top: m.top >= y.top,
left: m.left >= y.left,
bottom: m.bottom <= y.bottom,
right: m.right <= y.right
}, z = m.height > 0 && m.width > 0, A = z && L.top && L.left && L.bottom && L.right;
if (z && t.props.partialVisibility) {
var K = m.top <= y.bottom && m.bottom >= y.top && m.left <= y.right && m.right >= y.left;
typeof t.props.partialVisibility == "string" && (K = L[t.props.partialVisibility]), A = t.props.minTopValue ? K && m.top <= y.bottom - t.props.minTopValue : K;
}
typeof v.direction == "string" && typeof v.value == "number" && (console.warn("[notice] offset.direction and offset.value have been deprecated. They still work for now, but will be removed in next major version. Please upgrade to the new syntax: { %s: %d }", v.direction, v.value), A = W()(v, m, y));
var Z = t.state;
return t.state.isVisible !== A && (Z = {
isVisible: A,
visibilityRect: L
}, t.setState(Z), t.props.onChange && t.props.onChange(A)), Z;
}), t.state = {
isVisible: null,
visibilityRect: {}
}, t;
}
return T(a, [{
key: "componentDidMount",
value: function() {
this.node = s.a.findDOMNode(this), this.props.active && this.startWatching();
}
}, {
key: "componentWillUnmount",
value: function() {
this.stopWatching();
}
}, {
key: "componentDidUpdate",
value: function(t) {
this.node = s.a.findDOMNode(this), this.props.active && !t.active ? (this.setState({
isVisible: null,
visibilityRect: {}
}), this.startWatching()) : this.props.active || this.stopWatching();
}
}, {
key: "roundRectDown",
value: function(t) {
return {
top: Math.floor(t.top),
left: Math.floor(t.left),
bottom: Math.floor(t.bottom),
right: Math.floor(t.right)
};
}
/**
* Check if the element is within the visible viewport
*/
}, {
key: "render",
value: function() {
return this.props.children instanceof Function ? this.props.children({
isVisible: this.state.isVisible,
visibilityRect: this.state.visibilityRect
}) : r.a.Children.only(this.props.children);
}
}]), a;
}(r.a.Component);
P(F, "defaultProps", {
active: !0,
partialVisibility: !1,
minTopValue: 0,
scrollCheck: !1,
scrollDelay: 250,
scrollThrottle: -1,
resizeCheck: !1,
resizeDelay: 250,
resizeThrottle: -1,
intervalCheck: !0,
intervalDelay: 100,
delayedCall: !1,
offset: {},
containment: null,
children: r.a.createElement("span", null)
}), P(F, "propTypes", {
onChange: i.a.func,
active: i.a.bool,
partialVisibility: i.a.oneOfType([i.a.bool, i.a.oneOf(["top", "right", "bottom", "left"])]),
delayedCall: i.a.bool,
offset: i.a.oneOfType([
i.a.shape({
top: i.a.number,
left: i.a.number,
bottom: i.a.number,
right: i.a.number
}),
// deprecated offset property
i.a.shape({
direction: i.a.oneOf(["top", "right", "bottom", "left"]),
value: i.a.number
})
]),
scrollCheck: i.a.bool,
scrollDelay: i.a.number,
scrollThrottle: i.a.number,
resizeCheck: i.a.bool,
resizeDelay: i.a.number,
resizeThrottle: i.a.number,
intervalCheck: i.a.bool,
intervalDelay: i.a.number,
containment: typeof window < "u" ? i.a.instanceOf(window.Element) : i.a.any,
children: i.a.oneOfType([i.a.element, i.a.func]),
minTopValue: i.a.number
});
},
/* 5 */
/***/
function(c, f, n) {
var e = n(6);
function r() {
}
function h() {
}
h.resetWarningCache = r, c.exports = function() {
function s(N, W, E, V, _, T) {
if (T !== e) {
var S = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
);
throw S.name = "Invariant Violation", S;
}
}
s.isRequired = s;
function b() {
return s;
}
var i = {
array: s,
bool: s,
func: s,
number: s,
object: s,
string: s,
symbol: s,
any: s,
arrayOf: b,
element: s,
elementType: s,
instanceOf: b,
node: s,
objectOf: b,
oneOf: b,
oneOfType: b,
shape: b,
exact: b,
checkPropTypes: h,
resetWarningCache: r
};
return i.PropTypes = i, i;
};
},
/* 6 */
/***/
function(c, f, n) {
var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
c.exports = e;
}
/******/
])
);
});
}(H)), H.exports;
}
var Mt = St();
const Lt = /* @__PURE__ */ vt(Mt), At = "_wrap_15k3c_1", Wt = "_renderWrap_15k3c_7", kt = "_title_15k3c_14", Nt = "_handlerWrap_15k3c_30", U = {
wrap: At,
renderWrap: Wt,
title: kt,
handlerWrap: Nt
}, Vt = 10, It = 200, et = 15, rt = { width: "100%", height: "100%", maxWidth: "100%" };
function Rt({ editor: l, node: d, updateAttributes: x }) {
const C = pt(null), c = l.isActive(zt.name), { data: f, width: n, height: e } = d.attrs, [r, h] = O(null), [s, b] = O(!0), [i, N] = O(null), [W, E] = O(!1), [V, _] = O(100), T = I(
(p) => {
p && E(!0);
},
[E]
), S = I((p) => () => {
_(
(D) => wt(p === "minus" ? D - et : D + et, Vt, It)
);
}, []);
G(() => {
let p = !1;
return import("@excalidraw/excalidraw").then((D) => {
p || (C.current = D.exportToSvg);
}).catch((D) => !p && N(D)).finally(() => !p && b(!1)), () => {
p = !0;
};
}, [b, f]), G(() => {
let p = !1;
return (async () => {
if (p || s || i || !W || !f)
return;
const M = await C.current(f);
p || (M.setAttribute("width", "100%"), M.setAttribute("height", "100%"), M.setAttribute("display", "block"), h(M));
})(), () => {
p = !0;
};
}, [f, s, i, W]);
const R = (p) => {
x({ width: p.width, height: p.height });
};
return /* @__PURE__ */ g(ut, { className: q(U.wrap, c && U.isActive), children: /* @__PURE__ */ g(Lt, { onChange: T, children: /* @__PURE__ */ g(
Tt,
{
size: { width: Number.parseInt(n), height: Number.parseInt(e) },
onResizeStop: (p, D, M, P) => {
R({
width: Number.parseInt(n) + P.width,
height: Number.parseInt(e) + P.height
});
},
children: /* @__PURE__ */ B(
"div",
{
className: q(U.renderWrap, "render-wrapper"),
style: { ...rt, overflow: "hidden" },
children: [
i && /* @__PURE__ */ g("div", { style: rt, children: /* @__PURE__ */ g("p", { children: i.message || i }) }),
s && /* @__PURE__ */ g("p", { children: "Loading..." }),
!s && !i && W && /* @__PURE__ */ g(
"div",
{
dangerouslySetInnerHTML: { __html: (r == null ? void 0 : r.outerHTML) ?? "" },
style: {
height: "100%",
maxHeight: "100%",
padding: 24,
overflow: "hidden",
display: "flex",
justifyContent: "center",
alignItems: "center",
transform: `scale(${V / 100})`,
transition: "all ease-in-out .3s"
}
}
),
/* @__PURE__ */ g("div", { className: U.title }),
/* @__PURE__ */ B("div", { className: U.handlerWrap, children: [
/* @__PURE__ */ g(
Y,
{
action: S("minus"),
icon: "ZoomOut",
tooltip: "Zoom Out"
}
),
/* @__PURE__ */ g(
Y,
{
action: S("plus"),
icon: "ZoomIn",
tooltip: "Zoom In"
}
)
] })
]
}
)
}
) }) });
}
const jt = it.memo(Rt, (l, d) => !!_t(l.node.attrs, d.node.attrs)), nt = { elements: [] }, zt = /* @__PURE__ */ at.create({
name: "excalidraw",
group: "block",
selectable: !0,
atom: !0,
draggable: !0,
inline: !1,
addAttributes() {
return {
defaultShowPicker: {
default: !1
},
createUser: {
default: null
},
width: {
default: "100%",
parseHTML: $("width")
},
height: {
default: 240,
parseHTML: $("height")
},
data: {
default: nt,
parseHTML: $("data", !0)
}
};
},
addOptions() {
var l;
return {
...(l = this.parent) == null ? void 0 : l.call(this),
HTMLAttributes: {
class: "excalidraw"
},
button: ({ editor: d }) => ({
component: Dt,
componentProps: {
editor: d
}
})
};
},
parseHTML() {
return [
{
tag: "div[class=excalidraw]"
}
];
},
renderHTML({ HTMLAttributes: l, node: d }) {
return ["div", lt(this.options.HTMLAttributes, l, ft(d))];
},
addCommands() {
return {
setExcalidraw: (l) => ({ tr: d, commands: x, chain: C }) => {
var c, f, n;
return l = l || {}, l.data = l.data || nt, ((n = (f = (c = d.selection) == null ? void 0 : c.node) == null ? void 0 : f.type) == null ? void 0 : n.name) == this.name ? x.updateAttributes(this.name, l) : C().insertContent({
type: this.name,
attrs: l
}).run();
}
};
},
addNodeView() {
return ct(jt);
},
addInputRules() {
return [
st({
find: /^\$excalidraw\$$/,
type: this.type,
getAttributes: () => ({ width: "100%" })
})
];
}
});
export {
zt as E,
Gt as t
};