@nodeject/ui-components
Version:
UI library for non-trivial components
153 lines (152 loc) • 9.54 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { message, Popconfirm, Tooltip } from 'antd';
import * as React from 'react';
import { useState } from 'react';
import { RichTextEditor, RichTextViewer } from './';
import * as styles from './EditableRichText.module.less';
var editorModeDefault = 'view';
var UserCantEditMessage = "You don't have the permission to edit this.";
export var useEditor = function (initialEditorMode, options) {
var _a = useState(initialEditorMode || 'view'), editorMode = _a[0], setEditorMode = _a[1];
return {
editorMode: editorMode,
setEditorMode: setEditorMode
};
};
export var useEditableRichText = function (props) {
var actions = props.actions, options = props.options, state = props.state, title = props.title, titlePosition = props.titlePosition;
// initial values
var canEdit = options && options.canEdit !== undefined ? options.canEdit : false;
var initialContent = state ? state.content : '';
var initialEditorMode = initialContent === '' ? 'view' : 'edit';
initialEditorMode =
options && options.initialMode ? options.initialMode : initialEditorMode;
var _a = useState(initialEditorMode), editorMode = _a[0], setEditorMode = _a[1];
var _b = useState(function () { return initialContent; }), content = _b[0], setContent = _b[1];
React.useEffect(function () {
setContent(state.content);
}, [state && state.content]);
var onSave = function (value) {
if (actions && actions.onSave) {
var newContentCleaned = cleanContent(value);
setContent(value);
setEditorMode('view');
actions.onSave(newContentCleaned);
}
else {
console.warn('Please provide an "onSave" method');
}
};
var setToViewMode = function () {
setEditorMode('view');
};
var setToEditMode = function () {
if (canEdit) {
setEditorMode('edit');
}
else {
message.error(UserCantEditMessage);
}
};
return {
actions: {
onSave: onSave,
setToEditMode: setToEditMode,
setToViewMode: setToViewMode
},
options: options,
state: {
content: content,
editorMode: editorMode
},
title: title,
titlePosition: titlePosition
};
};
/**
* const props = useEditableRichText(editableRichTextProps)
* onst { setToEditMode } = props.actions
* <EditableRichText {...props} />
* <Button onClick={setToEditMode}>Edit</Button>
* @param props
*/
export var EditableRichText = function (props) {
var actions = props.actions, editorInitialized = props.editorInitialized, options = props.options, state = props.state, titlePosition = props.titlePosition, toolbarButtons = props.toolbarButtons, toolbarPosition = props.toolbarPosition;
var _a = useState(false), popConfirmVisible = _a[0], setPopConfirmVisible = _a[1];
// Edit on click
var onRichTextViewerClick = function () {
if (options.editOnClick && options.canEdit) {
actions.setToEditMode
? actions.setToEditMode()
: console.log('WARNING: You should pass setToEditoMode to EditableRichText');
}
};
var onCancel = function (newContent) {
if (cleanContent(newContent) !== state.content) {
setPopConfirmVisible(true);
}
else {
actions.setToViewMode
? actions.setToViewMode()
: console.log('WARNING: You should pass setToViewMode to EditableRichText');
}
};
var onCancelPop = function () {
setPopConfirmVisible(false);
};
var onConfirm = function () {
setPopConfirmVisible(false);
actions.setToViewMode
? actions.setToViewMode()
: console.log('WARNING: You should pass setToViewMode to EditableRichText');
};
var onSave = function (content) {
var savedContent = cleanContent(content);
actions.onSave(savedContent);
};
var richTextViewerProps = {
content: state.content,
getTributeComponent: options && options.getTributeComponent
};
var richTextViewer = (React.createElement("div", { className: styles.viewer, onClick: onRichTextViewerClick },
React.createElement(RichTextViewer, __assign({}, richTextViewerProps))));
var richTextEditor = (React.createElement(Popconfirm, { title: "Are you sure? All changes will be lost.", visible: popConfirmVisible, onConfirm: onConfirm, onCancel: onCancelPop, okText: "Yes", cancelText: "No" },
React.createElement("div", { className: styles.editor },
React.createElement(RichTextEditor, { toolbarButtons: toolbarButtons, editorInitialized: editorInitialized, content: state.content, getTributeComponent: options === null || options === void 0 ? void 0 : options.getTributeComponent, onCancel: onCancel, onSave: onSave, tributes: options === null || options === void 0 ? void 0 : options.tributes, focusOnOpen: options === null || options === void 0 ? void 0 : options.focusOnOpen, toolbarPosition: toolbarPosition }))));
if (!(options === null || options === void 0 ? void 0 : options.canEdit)) {
richTextViewer = (React.createElement(Tooltip, { mouseEnterDelay: 0.3, title: UserCantEditMessage }, richTextViewer));
}
var richText = state.editorMode === 'edit' ? richTextEditor : richTextViewer;
var editableRichTextWrapperClassName = styles.editableRichTextWrapper;
if (props.title) {
editableRichTextWrapperClassName =
titlePosition === 'left'
? styles.editableRichTextWrapperTitleLeft
: styles.editableRichTextWrapperTitleTop;
}
var title = props.title ? (React.createElement("div", { className: styles.title }, props.title)) : null;
return (React.createElement("div", { className: editableRichTextWrapperClassName },
title,
richText));
};
EditableRichText.defaultProps = {
options: { canEdit: false, focusOnOpen: true },
titlePosition: 'left',
toolbarPosition: 'top'
};
var cleanContent = function (content) {
var cleanedContent = content
.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>', '');
return cleanedContent;
};