@zextras/carbonio-shell-ui
Version:
The Zextras Carbonio web client
249 lines • 10.1 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileInput = void 0;
/*
* SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
const react_1 = __importStar(require("react"));
const tinymce_react_1 = require("@tinymce/tinymce-react");
const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
const styled_components_1 = __importDefault(require("styled-components"));
// TinyMCE so the global var exists
const tinymce_1 = __importDefault(require("tinymce/tinymce"));
require("tinymce/models/dom");
// Theme
require("tinymce/themes/silver");
// Toolbar icons
require("tinymce/icons/default");
// Editor styles
require("tinymce/skins/ui/oxide/skin.min.css");
// importing the plugin js.
require("tinymce/plugins/advlist");
require("tinymce/plugins/anchor");
require("tinymce/plugins/autolink");
require("tinymce/plugins/autoresize");
require("tinymce/plugins/charmap");
require("tinymce/plugins/code");
require("tinymce/plugins/directionality");
require("tinymce/plugins/fullscreen");
require("tinymce/plugins/help");
require("tinymce/plugins/image");
require("tinymce/plugins/insertdatetime");
require("tinymce/plugins/link");
require("tinymce/plugins/lists");
require("tinymce/plugins/media");
require("tinymce/plugins/preview");
require("tinymce/plugins/quickbars");
require("tinymce/plugins/searchreplace");
require("tinymce/plugins/table");
require("tinymce/plugins/visualblocks");
require("tinymce/plugins/wordcount");
const locales_1 = require("../../constants/locales");
const account_1 = require("../account");
const hooks_1 = require("../i18n/hooks");
const store_1 = require("../i18n/store");
exports.FileInput = styled_components_1.default.input `
display: none;
`;
const Composer = ({ onEditorChange, onFileSelect, inline = false, value, initialValue, customInitOptions, ...rest }) => {
const isControlledMode = (0, react_1.useMemo)(() => !!onEditorChange, [onEditorChange]);
const _onEditorChange = (0, react_1.useCallback)((newContent, editor) => {
onEditorChange?.([
editor.getContent({ format: 'text' }),
editor.getContent({ format: 'html' })
]);
}, [onEditorChange]);
const { prefs } = (0, account_1.useUserSettings)();
const defaultStyle = (0, react_1.useMemo)(() => ({
font: prefs?.zimbraPrefHtmlEditorDefaultFontFamily,
fontSize: prefs?.zimbraPrefHtmlEditorDefaultFontSize,
color: prefs?.zimbraPrefHtmlEditorDefaultFontColor
}), [prefs]);
const inputRef = (0, react_1.useRef)(null);
const onFileClick = (0, react_1.useCallback)(() => {
if (inputRef.current) {
inputRef.current.value = '';
inputRef.current.click();
}
}, []);
const t = (0, hooks_1.getT)();
const { locale } = store_1.useI18nStore.getState();
const language = (0, react_1.useMemo)(() => {
const localeObj = locale in locales_1.SUPPORTED_LOCALES && locales_1.SUPPORTED_LOCALES[locale];
return ((localeObj &&
(('tinymceLocale' in localeObj && localeObj?.tinymceLocale) || localeObj?.value)) ||
locale);
}, [locale]);
const inlineLabel = (0, react_1.useMemo)(() => t('label.add_inline_image', 'Add inline image'), [t]);
const setupCallback = (0, react_1.useCallback)((editor) => {
if (onFileSelect)
editor.ui.registry.addMenuButton('imageSelector', {
icon: 'gallery',
tooltip: t('label.select_image', 'Select image'),
fetch: (callback) => {
const items = [
{
type: 'menuitem',
text: inlineLabel,
onAction: () => {
onFileClick();
}
}
];
callback(items);
}
});
}, [inlineLabel, onFileClick, onFileSelect, t]);
const editorInitConfig = (0, react_1.useMemo)(() => ({
content_css: `${BASE_PATH}/tinymce/skins/content/default/content.css`,
language_url: `${BASE_PATH}tinymce/langs/${language}.js`,
language,
setup: setupCallback,
min_height: 350,
auto_focus: true,
menubar: false,
statusbar: false,
branding: false,
resize: true,
inline,
font_size_formats: '8pt 9pt 10pt 11pt 12pt 13pt 14pt 16pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt',
object_resizing: 'img',
style_formats: [
{
title: 'Headers',
items: [
{ title: 'h1', block: 'h1' },
{ title: 'h2', block: 'h2' },
{ title: 'h3', block: 'h3' },
{ title: 'h4', block: 'h4' },
{ title: 'h5', block: 'h5' },
{ title: 'h6', block: 'h6' }
]
},
{
title: 'Blocks',
items: [
{ title: 'p', block: 'p' },
{ title: 'div', block: 'div' },
{ title: 'pre', block: 'pre' }
]
},
{
title: 'Containers',
items: [
{ title: 'section', block: 'section', wrapper: true, merge_siblings: false },
{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
{ title: 'blockquote', block: 'blockquote', wrapper: true },
{ title: 'hgroup', block: 'hgroup', wrapper: true },
{ title: 'aside', block: 'aside', wrapper: true },
{ title: 'figure', block: 'figure', wrapper: true }
]
}
],
plugins: [
'advlist',
'autolink',
'lists',
'link',
'image',
'charmap',
'preview',
'anchor',
'searchreplace',
'code',
'fullscreen',
'insertdatetime',
'media',
'table',
'code',
'help',
'quickbars',
'directionality',
'autoresize',
'visualblocks'
],
toolbar: inline
? false
: [
'fontfamily fontsize styles visualblocks',
'bold italic underline strikethrough',
'removeformat code',
'alignleft aligncenter alignright alignjustify',
'forecolor backcolor',
'bullist numlist outdent indent',
'ltr rtl',
'link',
'insertfile image',
'imageSelector'
].join(' | '),
quickbars_insert_toolbar: inline ? 'bullist numlist' : '',
quickbars_selection_toolbar: inline
? 'bold italic underline | forecolor backcolor | removeformat | link'
: 'link',
contextmenu: '',
toolbar_mode: 'wrap',
content_style: `body { color: ${defaultStyle?.color}; font-size: ${defaultStyle?.fontSize}; font-family: ${defaultStyle?.font}; }`,
visualblocks_default_state: false,
end_container_on_empty_block: true,
relative_urls: false,
remove_script_host: false,
newline_behavior: 'default',
browser_spellcheck: true,
convert_unsafe_embeds: true,
...customInitOptions
}), [
language,
setupCallback,
inline,
defaultStyle?.color,
defaultStyle?.fontSize,
defaultStyle?.font,
customInitOptions
]);
const fileInputOnChange = (0, react_1.useCallback)(() => {
onFileSelect?.({ editor: tinymce_1.default, files: inputRef?.current?.files });
}, [onFileSelect]);
return (react_1.default.createElement(carbonio_design_system_1.Container, { height: "100%", crossAlignment: "baseline", mainAlignment: "flex-start", style: { overflowY: 'hidden' } },
react_1.default.createElement(exports.FileInput, { type: "file", ref: inputRef, accept: "image/*", onChange: fileInputOnChange, multiple: true }),
react_1.default.createElement(tinymce_react_1.Editor, { initialValue: initialValue, value: value, init: editorInitConfig, onEditorChange: isControlledMode ? _onEditorChange : undefined, ...rest })));
};
exports.default = Composer;
//# sourceMappingURL=composer.js.map