@nodeject/ui-components
Version:
UI library for non-trivial components
260 lines (259 loc) • 14.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultToolbarsButton = exports.RichTextEditor = void 0;
var antd_1 = require("antd");
var lodash_1 = require("lodash");
var React = require("react");
var react_1 = require("react");
// @ts-ignore
var SchedioEditor_1 = require("./react-editor/SchedioEditor");
// Require Editor JS files.
require("@averystupidtest/editor/js/froala_editor.pkgd.min.js");
require("@averystupidtest/editor/js/plugins.pkgd.min.js");
require("@averystupidtest/editor/js/third_party/embedly.min.js");
// Require Editor CSS files.
require("@averystupidtest/editor/css/froala_editor.pkgd.min.css");
require("@averystupidtest/editor/css/froala_style.min.css");
require("@averystupidtest/editor/css/third_party/embedly.min.css");
var parser_1 = require("./parser");
var SecondToolbar_1 = require("./SecondToolbar");
var styles = require("./RichTextEditor.module.less");
var useRichTextEditorInitialization = function (props) {
var content = props.content, editorInitialized = props.editorInitialized, focusOnOpen = props.focusOnOpen, getTributeComponent = props.getTributeComponent, tributes = props.tributes;
var ref = react_1.useRef({ editor: null });
var _a = react_1.useState(false), isSchedioInitialized = _a[0], setIsSchedioInitialized = _a[1];
var _b = react_1.useState(true), disableSendButton = _b[0], setDisableSendButton = _b[1];
var initialContent = parser_1.parser.dbToHtml(content, getTributeComponent) || '';
var _c = react_1.useState(initialContent), model = _c[0], setModel = _c[1];
var _d = react_1.useState(undefined), editor = _d[0], setEditor = _d[1];
react_1.useEffect(function () {
setModel(initialContent);
}, [initialContent]);
// Editor initialization
react_1.useEffect(function () {
setEditor(ref.current.editor);
editor && setIsSchedioInitialized(true);
}, [ref.current]);
// Do after initialization
react_1.useEffect(function () {
var _a;
if (isSchedioInitialized) {
editorInitialized && editorInitialized(isSchedioInitialized);
tributes &&
tributes.map(function (tribute) {
tribute.attach(editor.el);
});
editor.html && editor.html.set(model);
focusOnOpen && ((_a = editor === null || editor === void 0 ? void 0 : editor.events) === null || _a === void 0 ? void 0 : _a.focus());
}
}, [isSchedioInitialized, ref.current.editor, editor]);
// Second Toolbar Container initialization
// component will unmount
react_1.useEffect(function () {
return function () {
tributes &&
tributes.map(function (tribute) {
editor && tribute.detach(editor.el);
});
};
}, []);
react_1.useEffect(function () {
var newModel = model.toString();
newModel = model
.replace('<p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.Schedio.com/wysiwyg-editor?pb=1" title="Schedio Editor">Schedio Editor</a></p>', '')
.replace('<a id="fr-logo" href="https://Schedio.com/wysiwyg-editor" target="_blank" title="Schedio WYSIWYG HTML Editor"><span>Powered by</span><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 822.8 355.33"><defs><style>.fr-logo{fill:#b1b2b7;}</style></defs><title>Schedio</title><path class="fr-logo" d="M123.58,78.65A16.16,16.16,0,0,0,111.13,73H16.6C7.6,73,0,80.78,0,89.94V128.3a16.45,16.45,0,0,0,32.9,0V104.14h78.5A15.63,15.63,0,0,0,126.87,91.2,15.14,15.14,0,0,0,123.58,78.65Z"/><path class="fr-logo" d="M103.54,170a16.05,16.05,0,0,0-11.44-4.85H15.79A15.81,15.81,0,0,0,0,180.93v88.69a16.88,16.88,0,0,0,5,11.92,16,16,0,0,0,11.35,4.7h.17a16.45,16.45,0,0,0,16.41-16.6v-73.4H92.2A15.61,15.61,0,0,0,107.89,181,15.1,15.1,0,0,0,103.54,170Z"/><path class="fr-logo" d="M233,144.17c-5.29-6.22-16-7.52-24.14-7.52-16.68,0-28.72,7.71-36.5,23.47v-5.67a16.15,16.15,0,1,0-32.3,0v115.5a16.15,16.15,0,1,0,32.3,0v-38.7c0-19.09,3.5-63.5,35.9-63.5a44.73,44.73,0,0,1,5.95.27h.12c12.79,1.2,20.06-2.73,21.6-11.69C236.76,151.48,235.78,147.39,233,144.17Z"/><path class="fr-logo" d="M371.83,157c-13.93-13.11-32.9-20.33-53.43-20.33S279,143.86,265.12,157c-14.67,13.88-22.42,32.82-22.42,54.77,0,21.68,8,41.28,22.4,55.2,13.92,13.41,32.85,20.8,53.3,20.8s39.44-7.38,53.44-20.79c14.55-13.94,22.56-33.54,22.56-55.21S386.39,170.67,371.83,157Zm-9.73,54.77c0,25.84-18.38,44.6-43.7,44.6s-43.7-18.76-43.7-44.6c0-25.15,18.38-43.4,43.7-43.4S362.1,186.59,362.1,211.74Z"/><path class="fr-logo" d="M552.7,138.14a16.17,16.17,0,0,0-16,16.3v1C526.41,143.85,509,136.64,490,136.64c-19.83,0-38.19,7.24-51.69,20.4C424,171,416.4,190,416.4,212c0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,552.7,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C513.73,168.34,536.4,183.55,536.4,211.74Z"/><path class="fr-logo" d="M623.5,61.94a16.17,16.17,0,0,0-16,16.3v191.7a16.15,16.15,0,1,0,32.3,0V78.24A16.32,16.32,0,0,0,623.5,61.94Z"/><path class="fr-logo" d="M806.5,138.14a16.17,16.17,0,0,0-16,16.3v1c-10.29-11.63-27.74-18.84-46.7-18.84-19.83,0-38.19,7.24-51.69,20.4-14.33,14-21.91,33-21.91,55,0,21.61,7.78,41.16,21.9,55,13.56,13.33,31.92,20.67,51.7,20.67,18.83,0,36.29-7.41,46.7-19.37v1.57a16.15,16.15,0,1,0,32.3,0V154.44A16.32,16.32,0,0,0,806.5,138.14Zm-16.3,73.6c0,30.44-22.81,44.3-44,44.3-24.57,0-43.1-19-43.1-44.3s18.13-43.4,43.1-43.4C767.53,168.34,790.2,183.55,790.2,211.74Z"/></svg></a>', '');
setDisableSendButton(newModel === initialContent);
}, [model, initialContent]);
return {
isSchedioInitialized: isSchedioInitialized,
disableSendButton: disableSendButton,
editor: editor,
initialContent: initialContent,
model: model,
setModel: setModel,
ref: ref
};
};
var RichTextEditor = function (props) {
var content = props.content, focusOnOpen = props.focusOnOpen, editorInitialized = props.editorInitialized, getTributeComponent = props.getTributeComponent, onSave = props.onSave, placeholder = props.placeholder, SecondToolbar = props.SecondToolbar, toolbarPosition = props.toolbarPosition, tributes = props.tributes;
var saveButtonTitle = props.saveButtonTitle || 'Save';
var _a = useRichTextEditorInitialization({
content: content,
editorInitialized: editorInitialized,
focusOnOpen: focusOnOpen,
getTributeComponent: getTributeComponent,
tributes: tributes
}), disableSendButton = _a.disableSendButton, editor = _a.editor, isSchedioInitialized = _a.isSchedioInitialized, initialContent = _a.initialContent, model = _a.model, setModel = _a.setModel, ref = _a.ref;
// useKeyPress(['esc'], (event) => {
// onCancel()
// })
var toolbarButtons = props.toolbarButtons
? typeof props.toolbarButtons === 'string'
? lodash_1.merge({}, exports.defaultToolbarsButton, buttonsVisibleScreenSize[props.toolbarButtons])
: lodash_1.merge({}, exports.defaultToolbarsButton, props.toolbarButtons)
: exports.defaultToolbarsButton;
var handleModelChange = function (model) {
setModel(model);
};
var onCancel = function () {
props === null || props === void 0 ? void 0 : props.onCancel(parser_1.parser.htmlToDb(editor.html.get()));
};
var _b = react_1.useState(false), sent = _b[0], setSent = _b[1];
var saveContent = function (savedContent) {
var content = savedContent
? parser_1.parser.htmlToDb(savedContent)
: parser_1.parser.htmlToDb(editor.html.get());
onSave(content);
// reset
setModel(initialContent);
setSent(true);
};
var onSaveClicked = function () {
saveContent();
};
react_1.useEffect(function () {
if (sent) {
setModel(initialContent);
editor.html.set(null);
setSent(false);
}
}, [sent]);
return (React.createElement("div", { className: styles.richTextEditorContainer },
React.createElement("div", { className: styles.richTextEditor, key: isSchedioInitialized === true ? '1' : '0' },
React.createElement(SchedioEditor_1.SchedioEditor, { ref: ref, model: model, onModelChange: handleModelChange, tag: "textarea", config: {
saveInterval: 0,
attribution: false,
placeholder: placeholder || 'Start typing...',
toolbarBottom: toolbarPosition === 'bottom',
events: {
'paste.beforeCleanup': function (clipboard) {
var doc = new DOMParser().parseFromString(clipboard, 'text/html');
doc.body.innerHTML = clipboard;
return doc.body.innerHTML.replace(/> /gi, '><br/> ');
},
'commands.after': function (cmd) {
if (cmd === 'send') {
}
},
'save.before': function (content) {
saveContent(content);
editor.html.set(null);
setModel(initialContent);
}
},
toolbarButtons: toolbarButtons
} })),
toolbarPosition === 'top' && (React.createElement("div", { className: styles.secondToolbar }, SecondToolbar ? (React.createElement(SecondToolbar, { disableSendButton: disableSendButton, onCancel: onCancel, onSaveClicked: onSaveClicked })) : (React.createElement(SecondToolbarBottomDefault, { disableSendButton: disableSendButton, onCancel: onCancel, onSaveClicked: onSaveClicked, saveButtonTitle: saveButtonTitle }))))));
};
exports.RichTextEditor = RichTextEditor;
exports.RichTextEditor.defaultProps = {
focusOnOpen: true,
toolbarPosition: 'top'
};
var buttonsVisibleScreenSize = {
sm: {
moreText: { buttonsVisible: 4 },
moreParagraph: { buttonsVisible: 3 },
moreRich: { buttonsVisible: 1 },
moreMisc: { buttonsVisible: 0 },
moreSend: { buttonsVisible: 1 }
},
md: {
moreText: { buttonsVisible: 4 },
moreParagraph: { buttonsVisible: 6 },
moreRich: { buttonsVisible: 2 },
moreMisc: { buttonsVisible: 0 },
moreSend: { buttonsVisible: 1 }
},
lg: {
moreText: { buttonsVisible: 4 },
moreParagraph: { buttonsVisible: 7 },
moreRich: { buttonsVisible: 3 },
moreMisc: { buttonsVisible: 3 },
moreSend: { buttonsVisible: 1 }
}
};
exports.defaultToolbarsButton = {
moreText: {
buttons: [
'bold',
'italic',
'clearFormatting',
'fontSize',
'inlineClass',
'fontFamily',
'underline',
'strikeThrough',
'subscript',
'superscript',
'textColor',
'backgroundColor'
// 'inlineStyle'
],
buttonsVisible: 7
},
moreParagraph: {
buttons: [
'formatOLSimple',
'formatUL',
'codeBlock',
'paragraphFormat',
'alignLeft',
'alignCenter',
'alignRight',
'alignJustify',
'outdent',
'indent',
'formatOL',
'paragraphStyle',
'quote',
'lineHeight'
],
buttonsVisible: 9
},
moreRich: {
buttons: [
'insertLink',
'insertImage',
'insertVideo',
'insertTable',
'insertFile',
'emoticons',
'fontAwesome',
'specialCharacters',
'embedly',
'insertHR'
],
buttonsVisible: 7
},
moreMisc: {
buttons: [
'undo',
'redo',
'fullscreen',
'print',
'getPDF',
// 'spellChecker',
'selectAll',
'html'
// 'help'
],
// align: 'right',
buttonsVisible: 7
},
moreSend: { align: 'right', buttons: ['send'], buttonsVisible: 1 }
};
var SecondToolbarDefault = function (_a) {
var disableSendButton = _a.disableSendButton, onCancel = _a.onCancel, onSaveClicked = _a.onSaveClicked, saveButtonTitle = _a.saveButtonTitle;
var CancelButton = onCancel && (React.createElement(antd_1.Button, { className: "text-gray-500", size: "small", type: "link", onClick: onCancel }, "Cancel"));
return (React.createElement(SecondToolbar_1.SecondToolbar, { rightAlignedContent: React.createElement(React.Fragment, null,
CancelButton,
React.createElement(antd_1.Button, { type: "primary", disabled: disableSendButton, onClick: onSaveClicked, style: { marginLeft: '1rem' }, size: "small" }, saveButtonTitle)) }));
};
var SecondToolbarBottomDefault = function (_a) {
var disableSendButton = _a.disableSendButton, onCancel = _a.onCancel, onSaveClicked = _a.onSaveClicked, saveButtonTitle = _a.saveButtonTitle;
var CancelButton = onCancel && (React.createElement(antd_1.Button, { className: "text-gray-500", size: "small", type: "link", onClick: onCancel }, "Cancel"));
return (React.createElement("div", { style: { gridArea: 'extrabuttons' } },
CancelButton,
React.createElement(antd_1.Button, { type: "primary", disabled: disableSendButton, onClick: onSaveClicked, style: { marginLeft: '1rem' }, size: "small" }, saveButtonTitle)));
};