@explita/editor
Version:
`@explita/editor` is a versatile, modern rich-text editor built on TipTap for seamless integration into React applications. It provides extensive customization options and advanced features to cater to diverse content creation needs.
75 lines (74 loc) • 3.02 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from "react";
import { EditorInterface } from "./EditorInterface";
import { Toolbar } from "./Toolbar";
import { useEditorStore } from "../store/useEditorState";
import { Footer } from "./Footer";
export function FullEditor({ readOnly = false, initialContent, getTextContent, getJSONContent, getHTMLContent, onSave, onClose, onCreateNew, toolbarRight, editorOpts, getEditorOpts, hideToolbar = false, hideFooter = false, }) {
const { editor, editorOpts: editorOptions, setEditorOpts } = useEditorStore();
useEffect(() => {
if (editor) {
editor.setEditable(!readOnly);
}
}, [editor, readOnly]);
useEffect(() => {
if (editor && getEditorOpts) {
getEditorOpts(editorOptions);
}
}, [editorOptions, getEditorOpts, editor?.getHTML()]);
useEffect(() => {
if (editor && editorOpts) {
setEditorOpts(editorOpts);
}
}, [editor, editorOpts]);
useEffect(() => {
if (editor && initialContent) {
if (typeof initialContent === "object") {
const { editorContent, editorOpts } = initialContent;
if (editorOpts && Object.keys(editorOpts).length > 0) {
setEditorOpts(editorOpts);
}
if (editorContent) {
editor.commands.setContent(editorContent);
}
}
else if (typeof initialContent === "string") {
editor.commands.setContent(initialContent);
}
}
}, [editor, initialContent]);
useEffect(() => {
if (getTextContent) {
getTextContent(editor?.getText() || "");
}
if (getJSONContent) {
getJSONContent({
editorOpts: editorOptions,
editorContent: editor?.getJSON(),
});
}
if (getHTMLContent) {
getHTMLContent(editor?.getHTML() || "");
}
}, [editor?.getText(), editor?.getJSON(), editor?.getHTML(), getTextContent]);
return (_jsxs("section", { className: "explita-editor", style: {
width: editorOptions.containerWidth,
height: editorOptions.containerHeight,
}, children: [!hideToolbar && (_jsx("header", { className: "editor-header", children: !hideToolbar && (_jsx(Toolbar, { onCreateNew: onCreateNew, onSave: onSave, onClose: onClose, toolbarRight: toolbarRight })) })), _jsx(EditorInterface, {}), !hideFooter && _jsx(Footer, {})] }));
}
FullEditor.defaultProps = {
initialContent: "",
readOnly: false,
toolbarRight: null,
getHTMLContent: () => { },
getJSONContent: () => { },
getTextContent: () => { },
onClose: () => { },
onSave: () => { },
onCreateNew: () => { },
getEditorOpts: () => { },
editorOpts: { padding: { top: 0, bottom: 0, left: 0, right: 0 } },
hideToolbar: false,
hideFooter: false,
};