sccoreui
Version:
ui-sccore
125 lines (124 loc) • 5.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("froala-editor/css/froala_editor.pkgd.min.css");
require("froala-editor/css/froala_style.min.css");
const react_froala_wysiwyg_1 = tslib_1.__importDefault(require("react-froala-wysiwyg"));
require("froala-editor/js/plugins.pkgd.min.js");
const FroalaTextEditor = ({ onChange, value, placeholderText, id, className, toolbar = false, licenceKey = "" }) => {
const editorRef = (0, react_1.useRef)(null);
const [editorContent, setEditorContent] = (0, react_1.useState)(value);
// Callback function to handle content changes
const handleModelChange = (content) => {
setEditorContent(content);
onChange(content);
// onChange(editorRef.current.editor.el.getInnerHTML())
};
(0, react_1.useEffect)(() => {
setEditorContent(value);
}, [value]);
(0, react_1.useEffect)(() => {
var _a, _b;
if (!id || !((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.$el))
return null;
const host = document.getElementById(id);
if (!host)
return null;
const handleFocus = () => host.classList.add("focus-text-editor");
const handleBlur = () => host.classList.remove("focus-text-editor");
const $el = editorRef.current.editor.$el;
$el.on("focus", handleFocus);
$el.on("focusout", handleBlur);
return () => {
$el.off("focus", handleFocus);
$el.off("focusout", handleBlur);
};
}, [id]);
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `text-editor ${className}`, id: id }, { children: (0, jsx_runtime_1.jsx)(react_froala_wysiwyg_1.default, { tag: "textarea", config: {
events: {
initialized: toolbar
? function () {
this.toolbar.hide();
this.$el.blur();
}
: function () {
this.$el.blur();
},
},
fontFamilySelection: true,
fontFamily: {
"Arial,Helvetica,sans-serif": "sans-serif",
"Impact,Charcoal,sans-serif": "RobotoBold",
"RobotoItalic,Charcoal,sans-serif": "RobotoItalic",
// 'Tahoma,Geneva,sans-serif': 'Font 3'
},
fontFamilyDefaultSelection: "sans-serif",
placeholderText: placeholderText,
key: licenceKey,
licenseKey: licenceKey,
toolbarSticky: false,
quickInsertEnabled: false,
toolbarInline: false,
attribution: false,
heightMax: 160,
heightMin: 70,
toolbarButtons: {
fontFamily: {
buttons: ["fontFamily"],
class: "customCard",
},
moreText: {
buttons: [
"bold",
"italic",
"underline",
"strikeThrough",
"fontSize",
"subscript",
"superscript",
"textColor",
"backgroundColor",
"inlineClass",
"inlineStyle",
"clearFormatting",
],
buttonsVisible: 2,
},
moreParagraph: {
buttons: [
"formatOL",
"formatUL",
"alignLeft",
"alignCenter",
"formatOLSimple",
"alignRight",
"alignJustify",
"paragraphFormat",
"paragraphStyle",
"lineHeight",
"outdent",
"indent",
"quote",
],
buttonsVisible: 2,
},
moreRich: {
buttons: [
"insertLink",
"insertImage",
"insertHR",
"undo",
"redo",
"html",
],
buttonsVisible: 2,
},
fullscreen: {
button: "fullscreen",
},
},
}, model: editorContent, onModelChange: handleModelChange, ref: editorRef }) })));
};
exports.default = FroalaTextEditor;