analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
399 lines (382 loc) • 17.7 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunkKXW6LTRVjs = require('./chunk-KXW6LTRV.js');
var _chunkULCHG6PKjs = require('./chunk-ULCHG6PK.js');
var _chunkWMFTHNRZjs = require('./chunk-WMFTHNRZ.js');
require('./chunk-23TTOILX.js');
require('./chunk-ZHWRUIVE.js');
var _chunkAKAHADV7js = require('./chunk-AKAHADV7.js');
require('./chunk-SZD7L65Q.js');
require('./chunk-MPQZUD42.js');
require('./chunk-LGPTKTMP.js');
require('./chunk-TCLRDUMF.js');
require('./chunk-QFG6ZOOT.js');
var _chunk34ST3MKOjs = require('./chunk-34ST3MKO.js');
var _chunkANT66KVKjs = require('./chunk-ANT66KVK.js');
require('./chunk-TN3AYOMV.js');
require('./chunk-DNGOIXIW.js');
require('./chunk-YFHORWTN.js');
require('./chunk-B27BOQ2E.js');
require('./chunk-AOUX6XXN.js');
require('./chunk-YQ3JVMVB.js');
// src/components/RichEditor/RichEditorCore.tsx
var _react = require('@tiptap/react');
// src/components/RichEditor/components/extensions.ts
var _starterkit = require('@tiptap/starter-kit'); var _starterkit2 = _interopRequireDefault(_starterkit);
var _extensionunderline = require('@tiptap/extension-underline'); var _extensionunderline2 = _interopRequireDefault(_extensionunderline);
var _extensiontextalign = require('@tiptap/extension-text-align'); var _extensiontextalign2 = _interopRequireDefault(_extensiontextalign);
var _extensioncolor = require('@tiptap/extension-color');
var _extensiontextstyle = require('@tiptap/extension-text-style');
var _extensionhighlight = require('@tiptap/extension-highlight'); var _extensionhighlight2 = _interopRequireDefault(_extensionhighlight);
var _extensionsubscript = require('@tiptap/extension-subscript'); var _extensionsubscript2 = _interopRequireDefault(_extensionsubscript);
var _extensionsuperscript = require('@tiptap/extension-superscript'); var _extensionsuperscript2 = _interopRequireDefault(_extensionsuperscript);
var _extensionlink = require('@tiptap/extension-link'); var _extensionlink2 = _interopRequireDefault(_extensionlink);
var _extensionplaceholder = require('@tiptap/extension-placeholder'); var _extensionplaceholder2 = _interopRequireDefault(_extensionplaceholder);
var _extensionimage = require('@tiptap/extension-image'); var _extensionimage2 = _interopRequireDefault(_extensionimage);
function createRichEditorExtensions(placeholder) {
return [
_starterkit2.default,
_extensionunderline2.default,
_extensiontextstyle.TextStyle,
_extensioncolor.Color,
_extensionhighlight2.default.configure({ multicolor: true }),
_extensionsubscript2.default,
_extensionsuperscript2.default,
_extensiontextalign2.default.configure({ types: ["heading", "paragraph"] }),
_extensionlink2.default.configure({ openOnClick: false }),
_extensionplaceholder2.default.configure({ placeholder }),
_extensionimage2.default.configure({ inline: false, allowBase64: false }),
_chunkULCHG6PKjs.MathNode
];
}
// src/components/RichEditor/RichEditorCore.tsx
require('katex/dist/katex.min.css');
var _TextB = require('@phosphor-icons/react/dist/csr/TextB');
var _TextItalic = require('@phosphor-icons/react/dist/csr/TextItalic');
var _TextUnderline = require('@phosphor-icons/react/dist/csr/TextUnderline');
var _TextStrikethrough = require('@phosphor-icons/react/dist/csr/TextStrikethrough');
var _TextAlignLeft = require('@phosphor-icons/react/dist/csr/TextAlignLeft');
var _TextAlignCenter = require('@phosphor-icons/react/dist/csr/TextAlignCenter');
var _TextAlignRight = require('@phosphor-icons/react/dist/csr/TextAlignRight');
var _TextAlignJustify = require('@phosphor-icons/react/dist/csr/TextAlignJustify');
var _Link = require('@phosphor-icons/react/dist/csr/Link');
var _ListBullets = require('@phosphor-icons/react/dist/csr/ListBullets');
var _ListNumbers = require('@phosphor-icons/react/dist/csr/ListNumbers');
var _Quotes = require('@phosphor-icons/react/dist/csr/Quotes');
var _Minus = require('@phosphor-icons/react/dist/csr/Minus');
var _Code = require('@phosphor-icons/react/dist/csr/Code');
var _TextHOne = require('@phosphor-icons/react/dist/csr/TextHOne');
var _TextHTwo = require('@phosphor-icons/react/dist/csr/TextHTwo');
var _TextHThree = require('@phosphor-icons/react/dist/csr/TextHThree');
var _MathOperations = require('@phosphor-icons/react/dist/csr/MathOperations');
var _Image = require('@phosphor-icons/react/dist/csr/Image');
var _react3 = require('react');
var _jsxruntime = require('react/jsx-runtime');
var ToolbarBtn = ({ onClick, active, title, children }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
onClick,
title,
size: "small",
className: `bg-transparent border-transparent h-7 w-7 p-0 flex items-center justify-center rounded hover:bg-background-100 ${active ? "bg-background-200 text-primary-700" : "text-text-700"}`,
children
}
);
var Divider = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-px h-5 bg-border-200 mx-0.5" });
var prepareContent = (content) => _chunkWMFTHNRZjs.processLatexInHtml.call(void 0, _chunkAKAHADV7js.normalizeLineBreaksInHtml.call(void 0, content || ""));
function RichEditor({
content,
onChange,
placeholder = "Digite aqui...",
onGenerateLatexWithAI,
onUploadImage
}) {
const [formulaOpen, setFormulaOpen] = _react3.useState.call(void 0, false);
const [imageOpen, setImageOpen] = _react3.useState.call(void 0, false);
const lastContentRef = _react3.useRef.call(void 0, content);
const editor = _react.useEditor.call(void 0, {
extensions: createRichEditorExtensions(placeholder),
content: prepareContent(content),
// External updates do not reach this callback: the sync effect below calls
// setContent with `emitUpdate: false`.
onUpdate: ({ editor: editor2 }) => {
const html = editor2.getHTML();
lastContentRef.current = html;
_optionalChain([onChange, 'optionalCall', _ => _({
json: editor2.getJSON(),
html
})]);
},
editorProps: {
attributes: {
class: "min-h-[120px] outline-none prose prose-sm max-w-none px-4 py-3 focus:outline-none"
}
}
});
_react3.useEffect.call(void 0, () => {
if (editor && content !== void 0 && content !== lastContentRef.current) {
editor.commands.setContent(prepareContent(content), {
emitUpdate: false
});
lastContentRef.current = content;
}
}, [content, editor]);
const insertFormula = (latex) => {
if (!latex || !editor) return;
editor.chain().focus().insertContent({
type: "mathInline",
attrs: { latex }
}).run();
setFormulaOpen(false);
};
const insertImage = (src, alt) => {
if (!src || !editor) return;
editor.chain().focus().setImage({ src, alt }).run();
setImageOpen(false);
};
const setLink = () => {
const url = globalThis.window.prompt("URL do link:");
if (url === null || !editor) return;
if (url === "") {
editor.chain().focus().extendMarkRange("link").unsetLink().run();
return;
}
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
};
if (!editor) return null;
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-border-200 rounded-xl overflow-hidden bg-background-0", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-0.5 border-b border-border-200 bg-background-50 px-2 py-1.5 flex-wrap", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
active: editor.isActive("heading", { level: 1 }),
title: "T\xEDtulo 1",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextHOne.TextHOneIcon, { size: 16, weight: "bold" })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
active: editor.isActive("heading", { level: 2 }),
title: "T\xEDtulo 2",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextHTwo.TextHTwoIcon, { size: 16, weight: "bold" })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
active: editor.isActive("heading", { level: 3 }),
title: "T\xEDtulo 3",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextHThree.TextHThreeIcon, { size: 16, weight: "bold" })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleBold().run(),
active: editor.isActive("bold"),
title: "Negrito (Ctrl+B)",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextB.TextBolderIcon, { size: 16, weight: "bold" })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleItalic().run(),
active: editor.isActive("italic"),
title: "It\xE1lico (Ctrl+I)",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextItalic.TextItalicIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleUnderline().run(),
active: editor.isActive("underline"),
title: "Sublinhado (Ctrl+U)",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextUnderline.TextUnderlineIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleStrike().run(),
active: editor.isActive("strike"),
title: "Tachado",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextStrikethrough.TextStrikethroughIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleSubscript().run(),
active: editor.isActive("subscript"),
title: "Subscrito",
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-xs font-medium", children: [
"X",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "sub", { className: "text-[8px]", children: "2" })
] })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleSuperscript().run(),
active: editor.isActive("superscript"),
title: "Sobrescrito",
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-xs font-medium", children: [
"X",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "sup", { className: "text-[8px]", children: "2" })
] })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleCode().run(),
active: editor.isActive("code"),
title: "C\xF3digo inline",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Code.CodeIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().setTextAlign("left").run(),
active: editor.isActive({ textAlign: "left" }),
title: "Alinhar \xE0 esquerda",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextAlignLeft.TextAlignLeftIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().setTextAlign("center").run(),
active: editor.isActive({ textAlign: "center" }),
title: "Centralizar",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextAlignCenter.TextAlignCenterIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().setTextAlign("right").run(),
active: editor.isActive({ textAlign: "right" }),
title: "Alinhar \xE0 direita",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextAlignRight.TextAlignRightIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().setTextAlign("justify").run(),
active: editor.isActive({ textAlign: "justify" }),
title: "Justificar",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _TextAlignJustify.TextAlignJustifyIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleBulletList().run(),
active: editor.isActive("bulletList"),
title: "Lista com marcadores",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListBullets.ListBulletsIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleOrderedList().run(),
active: editor.isActive("orderedList"),
title: "Lista numerada",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListNumbers.ListNumbersIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().toggleBlockquote().run(),
active: editor.isActive("blockquote"),
title: "Cita\xE7\xE3o",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Quotes.QuotesIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => editor.chain().focus().setHorizontalRule().run(),
active: false,
title: "Linha horizontal",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Minus.MinusIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, {}),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: setLink,
active: editor.isActive("link"),
title: "Inserir link",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Link.LinkIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
ToolbarBtn,
{
onClick: () => setImageOpen(true),
active: editor.isActive("image"),
title: "Inserir imagem",
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Image.ImageIcon, { size: 16 })
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
_chunk34ST3MKOjs.Button_default,
{
type: "button",
onClick: () => setFormulaOpen(true),
title: "Inserir f\xF3rmula LaTeX",
size: "extra-small",
variant: "link",
children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MathOperations.MathOperationsIcon, { size: 16 }),
"LaTeX"
]
}
)
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.EditorContent, { editor }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-t border-border-200 px-4 py-2 bg-background-50", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkANT66KVKjs.Text_default, { size: "xs", color: "text-text-400", children: [
"Dica: use",
" ",
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "code", { className: "bg-background-200 px-1 rounded", children: "$f\xF3rmula$" }),
" para inserir LaTeX inline diretamente."
] }) }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkWMFTHNRZjs.FormulaDialog,
{
open: formulaOpen,
onClose: () => setFormulaOpen(false),
onInsert: insertFormula,
onGenerateWithAI: onGenerateLatexWithAI
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkKXW6LTRVjs.ImageDialog,
{
open: imageOpen,
onClose: () => setImageOpen(false),
onInsert: insertImage,
onUploadImage
}
)
] });
}
exports.RichEditor = RichEditor;
//# sourceMappingURL=RichEditorCore-Q7FQAPEE.js.map