sccoreui
Version:
ui-sccore
130 lines (129 loc) • 6.08 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");
// import SvgComponent from '../../directives/svg-component';
// import { Bold, Italic } from '../../assets/svg/svg';
const FroalaTextEditor = ({ onChange, value, placeholderText, id, className, toolbar = false, licenceKey = "5OA4gB3A3B3E3B5D3E3F-11SLJCKHXOSLMc1YGSGb1ZXHSe1CgB5A4D4G4E3C2A12A19A6B4==" }) => {
const editorRef = (0, react_1.useRef)(null);
// const html = ``;
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]);
// const handleKeyUp = () => {
// // Access the current content of the editor
// debugger
// const content = editorRef.current.editor.html.get();
// // Implement logic to recognize special words or patterns in 'content'
// // For example, if you want to detect the word 'special':
// if (content.toLowerCase().includes('special')) {
// // Do something special
// console.log('Special word detected!');
// }
// };
(0, react_1.useEffect)(() => {
var _a, _b, _c, _d, _e, _f;
if (editorRef.current) {
(_c = (_b = (_a = editorRef === null || editorRef === void 0 ? void 0 : editorRef.current) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.$el) === null || _c === void 0 ? void 0 : _c.on("focus", () => {
document.getElementById(id).classList.add("focus-text-editor");
});
(_f = (_e = (_d = editorRef === null || editorRef === void 0 ? void 0 : editorRef.current) === null || _d === void 0 ? void 0 : _d.editor) === null || _e === void 0 ? void 0 : _e.$el) === null || _f === void 0 ? void 0 : _f.on("focusout", () => {
document.getElementById(id).classList.remove("focus-text-editor");
});
}
}, []);
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 is the editor instance.
this.toolbar.hide();
}
: null,
},
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,
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;