laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
170 lines (169 loc) • 7.49 kB
JavaScript
"use client";
import { jsx as r, jsxs as e, Fragment as s } from "react/jsx-runtime";
import { ListNode as S, ListItemNode as T } from "../../node_modules/@lexical/list/LexicalList.prod.js";
import { $convertToMarkdownString as L, $convertFromMarkdownString as k, TRANSFORMERS as A } from "../../node_modules/@lexical/markdown/LexicalMarkdown.prod.js";
import { CheckListPlugin as j } from "../../node_modules/@lexical/react/LexicalCheckListPlugin.prod.js";
import { ClearEditorPlugin as O } from "../../node_modules/@lexical/react/LexicalClearEditorPlugin.prod.js";
import { LexicalComposer as $ } from "../../node_modules/@lexical/react/LexicalComposer.prod.js";
import { useLexicalComposerContext as B } from "../../node_modules/@lexical/react/LexicalComposerContext.prod.js";
import { LexicalErrorBoundary as D } from "../../node_modules/@lexical/react/LexicalErrorBoundary.prod.js";
import { HistoryPlugin as H } from "../../node_modules/@lexical/react/LexicalHistoryPlugin.prod.js";
import { ListPlugin as I } from "../../node_modules/@lexical/react/LexicalListPlugin.prod.js";
import { OnChangePlugin as M } from "../../node_modules/@lexical/react/LexicalOnChangePlugin.prod.js";
import { RichTextPlugin as U } from "../../node_modules/@lexical/react/LexicalRichTextPlugin.prod.js";
import { HeadingNode as z, QuoteNode as Q } from "../../node_modules/@lexical/rich-text/LexicalRichText.prod.js";
import { ParagraphNode as d, TextNode as f, $getRoot as p } from "../../node_modules/lexical/Lexical.prod.js";
import { useState as _, useEffect as J } from "react";
import { ContentEditable as q } from "../editor/editor-ui/content-editable.js";
import { ActionsPlugin as G } from "../editor/plugins/actions/actions-plugin.js";
import { ClearEditorActionPlugin as K } from "../editor/plugins/actions/clear-editor-plugin.js";
import { CounterCharacterPlugin as W } from "../editor/plugins/actions/counter-character-plugin.js";
import { FormatBulletedList as X } from "../editor/plugins/toolbar/block-format/format-bulleted-list.js";
import { FormatCheckList as Y } from "../editor/plugins/toolbar/block-format/format-check-list.js";
import { FormatHeading as Z } from "../editor/plugins/toolbar/block-format/format-heading.js";
import { FormatNumberedList as V } from "../editor/plugins/toolbar/block-format/format-numbered-list.js";
import { FormatParagraph as rr } from "../editor/plugins/toolbar/block-format/format-paragraph.js";
import { FormatQuote as or } from "../editor/plugins/toolbar/block-format/format-quote.js";
import { BlockFormatDropDown as er } from "../editor/plugins/toolbar/block-format-toolbar-plugin.js";
import { FontFormatToolbarPlugin as l } from "../editor/plugins/toolbar/font-format-toolbar-plugin.js";
import { ToolbarPlugin as c } from "../editor/plugins/toolbar/toolbar-plugin.js";
import { editorTheme as tr } from "../editor/themes/editor-theme.js";
import { TooltipProvider as ir } from "./tooltip.js";
import { HistoryToolbarPlugin as nr } from "../editor/plugins/toolbar/history-toolbar-plugin.js";
import { cn as ar } from "../../lib/utils.js";
const lr = "Start typing...", mr = {
format: ["underline"],
tag: "++",
type: "text-format"
}, v = [
...A,
mr
], sr = (o) => o.replace(/<u>(.*?)<\/u>/g, "++$1++"), cr = (o) => o.replace(/\+\+(.+?)\+\+/g, "<u>$1</u>");
function dr({
defaultValue: o,
onlyMarkdown: i
}) {
const [n] = B();
return J(() => {
o && n.update(() => {
i ? k(
sr(o),
v
) : p().append(
new d().append(new f(o))
);
const a = p();
(a.getFirstChild() ?? a).selectStart();
});
}, [n, o, i]), null;
}
function _r({
defaultValue: o,
onMarkdownEdit: i,
plugins: n = [],
toolbars: a = [],
placeholder: F = lr,
onlyMarkdown: h = !0,
className: C = "rounded-lg border border-d-border",
wrpClassName: E = ""
}) {
const [, P] = _(null), w = {
namespace: "AppEditor",
theme: tr,
nodes: [
z,
d,
f,
Q,
S,
T
],
onError: (t) => {
console.error(t);
},
...o && !h ? {
editorState: () => {
p().append(
new d().append(new f(o))
);
}
} : {}
}, u = (t) => n.includes(t), m = (t) => a.includes(t), g = u("clear"), x = u("counter"), b = m("block-format"), y = m("font-format"), N = m("history");
return /* @__PURE__ */ r("div", { className: ar("bg-d-background flex h-96 flex-col", E), children: /* @__PURE__ */ r($, { initialConfig: w, children: /* @__PURE__ */ e(ir, { children: [
o && /* @__PURE__ */ r(
dr,
{
defaultValue: o,
onlyMarkdown: h
}
),
/* @__PURE__ */ e("div", { className: "border-d-border flex items-center border-b", children: [
N && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ r(nr, {}) }) }),
b && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: /* @__PURE__ */ e(er, { children: [
/* @__PURE__ */ r(rr, {}),
/* @__PURE__ */ r(Z, { levels: ["h1", "h2", "h3"] }),
/* @__PURE__ */ r(V, {}),
/* @__PURE__ */ r(X, {}),
/* @__PURE__ */ r(Y, {}),
/* @__PURE__ */ r(or, {})
] }) }) }) }),
y && /* @__PURE__ */ r(c, { children: () => /* @__PURE__ */ e("div", { className: "vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto p-1", children: [
/* @__PURE__ */ r(l, { format: "bold" }),
/* @__PURE__ */ r(l, { format: "italic" }),
/* @__PURE__ */ r(l, { format: "underline" }),
/* @__PURE__ */ r(l, { format: "strikethrough" })
] }) })
] }),
/* @__PURE__ */ e("div", { className: "relative flex min-h-0 w-full flex-1 flex-col", children: [
N && /* @__PURE__ */ r(H, {}),
/* @__PURE__ */ r(
U,
{
ErrorBoundary: D,
contentEditable: /* @__PURE__ */ r(
"div",
{
ref: P,
className: "flex min-h-0 w-full flex-1 overflow-auto",
children: /* @__PURE__ */ r(
q,
{
placeholder: F,
className: `border-d-border w-full rounded-none border-b ${C}`
}
)
}
)
}
),
b && /* @__PURE__ */ e(s, { children: [
/* @__PURE__ */ r(I, {}),
/* @__PURE__ */ r(j, {})
] }),
(g || x) && /* @__PURE__ */ r(G, { children: /* @__PURE__ */ e("div", { className: "clear-both flex items-center justify-between gap-2 p-1", children: [
/* @__PURE__ */ r("div", { className: "flex flex-1 justify-start" }),
/* @__PURE__ */ r("div", { children: x && /* @__PURE__ */ r(W, { charset: "UTF-16" }) }),
/* @__PURE__ */ r("div", { className: "flex flex-1 justify-end gap-2", children: g && /* @__PURE__ */ e(s, { children: [
/* @__PURE__ */ r(K, {}),
/* @__PURE__ */ r(O, {})
] }) })
] }) })
] }),
/* @__PURE__ */ r(
M,
{
ignoreSelectionChange: !0,
onChange: (t) => {
if (!i) return;
const R = t.read(
() => L(v)
);
i(cr(R));
}
}
)
] }) }) });
}
export {
_r as AppEditor
};