From f4df487e82ff1f076674b890cc2c7c2184183139 Mon Sep 17 00:00:00 2001 From: Mathieu De Keyzer Date: Wed, 9 Oct 2024 17:44:51 +0200 Subject: [PATCH] ref: format --- EMS/admin-ui-bundle/assets/src/core/core.js | 247 ++++----- .../assets/src/core/helpers/editor.js | 520 +++++++++--------- .../assets/src/core/helpers/editor.ts | 339 ------------ .../assets/src/core/plugins/wysiwyg.js | 54 +- .../assets/src/core/plugins/wysiwyg.ts | 38 -- 5 files changed, 406 insertions(+), 792 deletions(-) delete mode 100644 EMS/admin-ui-bundle/assets/src/core/helpers/editor.ts delete mode 100644 EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.ts diff --git a/EMS/admin-ui-bundle/assets/src/core/core.js b/EMS/admin-ui-bundle/assets/src/core/core.js index 5f8e2d9ab..45163f1de 100644 --- a/EMS/admin-ui-bundle/assets/src/core/core.js +++ b/EMS/admin-ui-bundle/assets/src/core/core.js @@ -1,146 +1,137 @@ -import Button from "./plugins/button"; -import Choice from "./plugins/choice"; -import CodeEditor from "./plugins/codeEditor"; -import Collection from "./plugins/collection"; -import Datatable from "./plugins/datatable"; -import Datetime from "./plugins/datetime"; -import File from "./plugins/file"; -import Form from "./plugins/form"; -import Iframe from "./plugins/iframe"; -import Image from "./plugins/image"; -import Job from "./plugins/job"; -import JsonMenu from "./plugins/jsonMenu"; -import JsonMenuNested from "./plugins/jsonMenuNested"; -import MediaLibrary from "./plugins/mediaLibrary"; -import NestedSortable from "./plugins/nestedSortable"; -import ObjectPicker from "./plugins/objectPicker"; -import SearchForm from "./plugins/searchForm"; -import Select from "./plugins/select"; -import SortableList from "./plugins/sortableList"; -import SymfonyCollection from "./plugins/symfonyCollection"; -import Text from "./plugins/text"; -import Tooltip from "./plugins/tooltip"; -import WYSIWYG from "./plugins/wysiwyg.ts"; +import Button from './plugins/button' +import Choice from './plugins/choice' +import CodeEditor from './plugins/codeEditor' +import Collection from './plugins/collection' +import Datatable from './plugins/datatable' +import Datetime from './plugins/datetime' +import File from './plugins/file' +import Form from './plugins/form' +import Iframe from './plugins/iframe' +import Image from './plugins/image' +import Job from './plugins/job' +import JsonMenu from './plugins/jsonMenu' +import JsonMenuNested from './plugins/jsonMenuNested' +import MediaLibrary from './plugins/mediaLibrary' +import NestedSortable from './plugins/nestedSortable' +import ObjectPicker from './plugins/objectPicker' +import SearchForm from './plugins/searchForm' +import Select from './plugins/select' +import SortableList from './plugins/sortableList' +import SymfonyCollection from './plugins/symfonyCollection' +import Text from './plugins/text' +import Tooltip from './plugins/tooltip' +import WYSIWYG from './plugins/wysiwyg' -import RevisionTask from "./components/revisionTask"; -import Modal from "./components/modal"; -import Sidebar from "./components/sidebar"; +import RevisionTask from './components/revisionTask' +import Modal from './components/modal' +import Sidebar from './components/sidebar' -import { EMS_ADDED_DOM_EVENT } from "./events/addedDomEvent"; -import CtrlSaveEvent from "./events/ctrlSaveEvent"; -import $ from "jquery"; +import { EMS_ADDED_DOM_EVENT } from './events/addedDomEvent' +import CtrlSaveEvent from './events/ctrlSaveEvent' +import $ from 'jquery' class Core { - constructor() { - this._statusUpdateUrl = document.body.getAttribute("data-status-url"); - this._domListeners = [ - new Button(), - new Choice(), - new CodeEditor(), - new Collection(), - new Datatable(), - new Datetime(), - new File(), - new Form(), - new Iframe(), - new Image(), - new Job(), - new JsonMenu(), - new JsonMenuNested(), - new MediaLibrary(), - new NestedSortable(), - new ObjectPicker(), - new SearchForm(), - new Select(), - new SortableList(), - new SymfonyCollection(), - new Text(), - new Tooltip(), - new WYSIWYG(), - ]; - document.addEventListener(EMS_ADDED_DOM_EVENT, (event) => - this.load(event.detail.target), - ); - this.coreReady(); - } - - load(target) { - if (target === undefined) { - console.log( - "Impossible to add ems listeners as no target is defined", - ); - return; - } - this._domListeners.forEach((element) => element.load(target)); - } + constructor() { + this._statusUpdateUrl = document.body.getAttribute('data-status-url') + this._domListeners = [ + new Button(), + new Choice(), + new CodeEditor(), + new Collection(), + new Datatable(), + new Datetime(), + new File(), + new Form(), + new Iframe(), + new Image(), + new Job(), + new JsonMenu(), + new JsonMenuNested(), + new MediaLibrary(), + new NestedSortable(), + new ObjectPicker(), + new SearchForm(), + new Select(), + new SortableList(), + new SymfonyCollection(), + new Text(), + new Tooltip(), + new WYSIWYG() + ] + document.addEventListener(EMS_ADDED_DOM_EVENT, (event) => this.load(event.detail.target)) + this.coreReady() + } - coreReady() { - if ( - document.readyState === "complete" || - document.readyState === "interactive" - ) { - setTimeout(() => this.load(document), 1); - } else { - document.addEventListener("DOMContentLoaded", () => - this.load(document), - ); - } - this.initStatusRefresh(); - this.initCtrlSaveEvent(); - this.components = [new RevisionTask(), new Modal(), new Sidebar()]; + load(target) { + if (target === undefined) { + console.log('Impossible to add ems listeners as no target is defined') + return } + this._domListeners.forEach((element) => element.load(target)) + } - initStatusRefresh() { - const self = this; - window.setInterval(function () { - self.updateStatus(); - }, 180000); + coreReady() { + if (document.readyState === 'complete' || document.readyState === 'interactive') { + setTimeout(() => this.load(document), 1) + } else { + document.addEventListener('DOMContentLoaded', () => this.load(document)) } + this.initStatusRefresh() + this.initCtrlSaveEvent() + this.components = [new RevisionTask(), new Modal(), new Sidebar()] + } - updateStatus() { - const xhr = new XMLHttpRequest(); - xhr.open("GET", this._statusUpdateUrl, true); + initStatusRefresh() { + const self = this + window.setInterval(function () { + self.updateStatus() + }, 180000) + } - xhr.onreadystatechange = function () { - if (this.readyState !== 4) { - return; - } + updateStatus() { + const xhr = new XMLHttpRequest() + xhr.open('GET', this._statusUpdateUrl, true) - const statusLink = document.getElementById("status-overview"); - if (this.status === 200) { - const json = JSON.parse(xhr.responseText); - statusLink.innerHTML = json.body; - statusLink.setAttribute("title", json.title); - } else { - statusLink.setAttribute("title", `Error ${xhr.status}`); - statusLink.innerHTML = ``; - } - }; + xhr.onreadystatechange = function () { + if (this.readyState !== 4) { + return + } - xhr.send(); + const statusLink = document.getElementById('status-overview') + if (this.status === 200) { + const json = JSON.parse(xhr.responseText) + statusLink.innerHTML = json.body + statusLink.setAttribute('title', json.title) + } else { + statusLink.setAttribute('title', `Error ${xhr.status}`) + statusLink.innerHTML = `` + } } - initCtrlSaveEvent() { - $(document).keydown(function (e) { - let key; - const possible = [e.key, e.keyIdentifier, e.keyCode, e.which]; + xhr.send() + } - while (key === undefined && possible.length > 0) { - key = possible.pop(); - } - if ( - typeof key === "number" && - (key === 115 || key === 83) && - (e.ctrlKey || e.metaKey) && - !e.altKey - ) { - const event = new CtrlSaveEvent(e); - event.dispatch(); - } - }); - } + initCtrlSaveEvent() { + $(document).keydown(function (e) { + let key + const possible = [e.key, e.keyIdentifier, e.keyCode, e.which] + + while (key === undefined && possible.length > 0) { + key = possible.pop() + } + if ( + typeof key === 'number' && + (key === 115 || key === 83) && + (e.ctrlKey || e.metaKey) && + !e.altKey + ) { + const event = new CtrlSaveEvent(e) + event.dispatch() + } + }) + } } -const core = new Core(); +const core = new Core() -export default core; +export default core diff --git a/EMS/admin-ui-bundle/assets/src/core/helpers/editor.js b/EMS/admin-ui-bundle/assets/src/core/helpers/editor.js index 0940f6aa7..f1bcbe1e0 100644 --- a/EMS/admin-ui-bundle/assets/src/core/helpers/editor.js +++ b/EMS/admin-ui-bundle/assets/src/core/helpers/editor.js @@ -10,15 +10,15 @@ import { FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font' import { Heading } from '@ckeditor/ckeditor5-heading' import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support' import { - Image, - ImageCaption, - ImageInsertViaUrl, - ImageStyle, - ImageToolbar, - ImageResizeEditing, - ImageResizeHandles, - ImageUpload, - PictureEditing + Image, + ImageCaption, + ImageInsertViaUrl, + ImageStyle, + ImageToolbar, + ImageResizeEditing, + ImageResizeHandles, + ImageUpload, + PictureEditing } from '@ckeditor/ckeditor5-image' import { Indent } from '@ckeditor/ckeditor5-indent' import { List } from '@ckeditor/ckeditor5-list' @@ -27,17 +27,17 @@ import { Paragraph } from '@ckeditor/ckeditor5-paragraph' import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format' import { SourceEditing } from '@ckeditor/ckeditor5-source-editing' import { - SpecialCharacters, - SpecialCharactersEssentials + SpecialCharacters, + SpecialCharactersEssentials } from '@ckeditor/ckeditor5-special-characters' import { Style } from '@ckeditor/ckeditor5-style' import { - Table, - TableCaption, - TableCellProperties, - TableProperties, - TableColumnResize, - TableToolbar + Table, + TableCaption, + TableCellProperties, + TableProperties, + TableColumnResize, + TableToolbar } from '@ckeditor/ckeditor5-table' import { TextTransformation } from '@ckeditor/ckeditor5-typing' import { Undo } from '@ckeditor/ckeditor5-undo' @@ -51,271 +51,271 @@ import { LinkTarget } from './ck5/linkTarget' import ChangeEvent from '../events/changeEvent' function initUploadAdaptor(editor) { - editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { - return new UploadAdapter(loader) - } + editor.plugins.get('FileRepository').createUploadAdapter = (loader) => { + return new UploadAdapter(loader) + } } export default class Editor { - constructor(element, options) { - const self = this - this.element = element - this.options = options - ClassicEditor.create(element, this.buildCke5Options()) - .then((editor) => { - self._init(editor) - }) - .catch((error) => { - console.error(error) - }) - } + constructor(element, options) { + const self = this + this.element = element + this.options = options + ClassicEditor.create(element, this.buildCke5Options()) + .then((editor) => { + self._init(editor) + }) + .catch((error) => { + console.error(error) + }) + } - buildCke5Options() { - let options = this.getDefaultOptions() - options = this._applyProfile(options) - options = this._applyStyleSet(options) - options = this._applyHeadings(options) - options = this._applyLang(options) + buildCke5Options() { + let options = this.getDefaultOptions() + options = this._applyProfile(options) + options = this._applyStyleSet(options) + options = this._applyHeadings(options) + options = this._applyLang(options) - return options - } + return options + } - getDefaultOptions() { - return { - heading: { - options: [ - { model: 'paragraph', title: 'Paragraph', class: '' }, - { - model: 'heading2', - view: 'h2', - title: 'Heading 2', - class: '' - }, - { - model: 'heading3', - view: 'h3', - title: 'Heading 3', - class: '' - } - ] - }, - htmlSupport: { - allow: [ - { - name: /.*/, - attributes: true, - classes: true, - styles: true - } - ] - }, - extraPlugins: [initUploadAdaptor], - plugins: [ - Alignment, - Autoformat, - AssetManager, - BlockQuote, - Bold, - Essentials, - FindAndReplace, - FontColor, - FontFamily, - FontSize, - GeneralHtmlSupport, - Heading, - Image, - ImageCaption, - ImageInsertViaUrl, - ImageStyle, - ImageToolbar, - ImageResizeEditing, - ImageResizeHandles, - ImageUpload, - Indent, - Italic, - Link, - LinkTarget, - List, - MediaEmbed, - Paragraph, - PasteAjax, - PictureEditing, - RemoveFormat, - SourceEditing, - SpecialCharacters, - SpecialCharactersEssentials, - Style, - Table, - TableCaption, - TableCellProperties, - TableColumnResize, - TableProperties, - TableToolbar, - TextTransformation, - Undo - ], - toolbar: { - items: [ - 'heading', - '|', - 'bold', - 'italic', - 'bulletedList', - 'numberedList', - 'removeFormat', - '|', - 'outdent', - 'indent', - 'undo', - 'redo', - '|', - 'link', - 'insertImage', - 'insertTable', - 'mediaEmbed', - 'specialCharacters', - '|', - 'findAndReplace', - 'sourceEditing' - ], - shouldNotGroupWhenFull: true - }, - language: { - ui: 'en', - content: 'en' - }, - image: { - toolbar: [ - 'imageTextAlternative', - 'toggleImageCaption', - '|', - 'imageStyle:inline', - 'imageStyle:block', - 'imageStyle:side', - '|', - 'editImage' - ], - insert: { - integrations: ['upload', 'assetManager'] - } - }, - table: { - defaultHeadings: { rows: 1 }, - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'tableCellProperties' - ] - } + getDefaultOptions() { + return { + heading: { + options: [ + { model: 'paragraph', title: 'Paragraph', class: '' }, + { + model: 'heading2', + view: 'h2', + title: 'Heading 2', + class: '' + }, + { + model: 'heading3', + view: 'h3', + title: 'Heading 3', + class: '' + } + ] + }, + htmlSupport: { + allow: [ + { + name: /.*/, + attributes: true, + classes: true, + styles: true + } + ] + }, + extraPlugins: [initUploadAdaptor], + plugins: [ + Alignment, + Autoformat, + AssetManager, + BlockQuote, + Bold, + Essentials, + FindAndReplace, + FontColor, + FontFamily, + FontSize, + GeneralHtmlSupport, + Heading, + Image, + ImageCaption, + ImageInsertViaUrl, + ImageStyle, + ImageToolbar, + ImageResizeEditing, + ImageResizeHandles, + ImageUpload, + Indent, + Italic, + Link, + LinkTarget, + List, + MediaEmbed, + Paragraph, + PasteAjax, + PictureEditing, + RemoveFormat, + SourceEditing, + SpecialCharacters, + SpecialCharactersEssentials, + Style, + Table, + TableCaption, + TableCellProperties, + TableColumnResize, + TableProperties, + TableToolbar, + TextTransformation, + Undo + ], + toolbar: { + items: [ + 'heading', + '|', + 'bold', + 'italic', + 'bulletedList', + 'numberedList', + 'removeFormat', + '|', + 'outdent', + 'indent', + 'undo', + 'redo', + '|', + 'link', + 'insertImage', + 'insertTable', + 'mediaEmbed', + 'specialCharacters', + '|', + 'findAndReplace', + 'sourceEditing' + ], + shouldNotGroupWhenFull: true + }, + language: { + ui: 'en', + content: 'en' + }, + image: { + toolbar: [ + 'imageTextAlternative', + 'toggleImageCaption', + '|', + 'imageStyle:inline', + 'imageStyle:block', + 'imageStyle:side', + '|', + 'editImage' + ], + insert: { + integrations: ['upload', 'assetManager'] } + }, + table: { + defaultHeadings: { rows: 1 }, + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'tableCellProperties' + ] + } } + } - _init(editor) { - this.editor = editor - const self = this - if (undefined !== this.options.styleSet && this.options.styleSet.length > 0) { - editor.ui.element.classList.add(`ems-styleset-${this.options.styleSet}`) - } - if (undefined !== this.options.onChangeEvent && this.options.onChangeEvent.length > 0) { - editor.editing.view.document.on(this.options.onChangeEvent, () => { - self._change() - }) - } - if (undefined !== this.options.height && this.options.height > 0) { - editor.editing.view.change((writer) => { - writer.setStyle( - 'height', - `${this.options.height}px`, - editor.editing.view.document.getRoot() - ) - }) - } + _init(editor) { + this.editor = editor + const self = this + if (undefined !== this.options.styleSet && this.options.styleSet.length > 0) { + editor.ui.element.classList.add(`ems-styleset-${this.options.styleSet}`) } - - _change() { - this.editor.updateSourceElement() - const event = new ChangeEvent(this.element) - event.dispatch() + if (undefined !== this.options.onChangeEvent && this.options.onChangeEvent.length > 0) { + editor.editing.view.document.on(this.options.onChangeEvent, () => { + self._change() + }) } - - _applyStyleSet(options) { - if (undefined === this.options.styleSet || this.options.styleSet === 0) { - options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') - return options - } - const styleSet = this.options.styleSet - if ( - undefined === document.body.dataset.wysiwygInfo || - document.body.dataset.wysiwygInfo.length === 0 - ) { - options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') - return options - } - const config = JSON.parse(document.body.dataset.wysiwygInfo) - if (undefined === config.styles || config.styles.length === 0) { - options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') - return options - } - for (let i = 0; i < config.styles.length; ++i) { - if (config.styles[i].name !== styleSet || undefined === config.styles[i].config) { - continue - } - if (!options.toolbar.items.includes('style')) { - options.toolbar.items.unshift('style') - } - options.style = { - definitions: config.styles[i].config - } - break - } - return options + if (undefined !== this.options.height && this.options.height > 0) { + editor.editing.view.change((writer) => { + writer.setStyle( + 'height', + `${this.options.height}px`, + editor.editing.view.document.getRoot() + ) + }) } + } - _applyHeadings(options) { - if (undefined === this.options.formatTags || this.options.formatTags.length === 0) { - return options - } + _change() { + this.editor.updateSourceElement() + const event = new ChangeEvent(this.element) + event.dispatch() + } - try { - const formatTags = JSON.parse(this.options.formatTags) - options.heading.options = formatTags - } catch (e) { - console.error( - `The format tags option expect an JSON, did you migrated it? Got: ${this.options.formatTags}` - ) - } + _applyStyleSet(options) { + if (undefined === this.options.styleSet || this.options.styleSet === 0) { + options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') + return options + } + const styleSet = this.options.styleSet + if ( + undefined === document.body.dataset.wysiwygInfo || + document.body.dataset.wysiwygInfo.length === 0 + ) { + options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') + return options + } + const config = JSON.parse(document.body.dataset.wysiwygInfo) + if (undefined === config.styles || config.styles.length === 0) { + options.toolbar.items = options.toolbar.items.filter((e) => e !== 'style') + return options + } + for (let i = 0; i < config.styles.length; ++i) { + if (config.styles[i].name !== styleSet || undefined === config.styles[i].config) { + continue + } + if (!options.toolbar.items.includes('style')) { + options.toolbar.items.unshift('style') + } + options.style = { + definitions: config.styles[i].config + } + break + } + return options + } - return options + _applyHeadings(options) { + if (undefined === this.options.formatTags || this.options.formatTags.length === 0) { + return options } - _applyLang(options) { - if (undefined !== this.options.lang && this.options.lang.length > 0) { - options.language.content = this.options.lang - } - return options + try { + const formatTags = JSON.parse(this.options.formatTags) + options.heading.options = formatTags + } catch (e) { + console.error( + `The format tags option expect an JSON, did you migrated it? Got: ${this.options.formatTags}` + ) } - _applyProfile(options) { - if ( - undefined === document.body.dataset.wysiwygInfo || - (document.body.dataset.wysiwygInfo === 0) | length - ) { - return options - } + return options + } - try { - const profile = JSON.parse(document.body.dataset.wysiwygInfo) - if (typeof profile.config !== 'object') { - return options - } + _applyLang(options) { + if (undefined !== this.options.lang && this.options.lang.length > 0) { + options.language.content = this.options.lang + } + return options + } - return { ...options, ...profile.config } - } catch (e) { - console.error(`Impossible to apply the WYSIWYG profile: ${e}`) - } + _applyProfile(options) { + if ( + undefined === document.body.dataset.wysiwygInfo || + (document.body.dataset.wysiwygInfo === 0) | length + ) { + return options + } + try { + const profile = JSON.parse(document.body.dataset.wysiwygInfo) + if (typeof profile.config !== 'object') { return options + } + + return { ...options, ...profile.config } + } catch (e) { + console.error(`Impossible to apply the WYSIWYG profile: ${e}`) } + + return options + } } diff --git a/EMS/admin-ui-bundle/assets/src/core/helpers/editor.ts b/EMS/admin-ui-bundle/assets/src/core/helpers/editor.ts deleted file mode 100644 index f7df0c35b..000000000 --- a/EMS/admin-ui-bundle/assets/src/core/helpers/editor.ts +++ /dev/null @@ -1,339 +0,0 @@ -import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic"; - -import { Alignment } from "@ckeditor/ckeditor5-alignment"; -import { Autoformat } from "@ckeditor/ckeditor5-autoformat"; -import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles"; -import { BlockQuote } from "@ckeditor/ckeditor5-block-quote"; -import { Essentials } from "@ckeditor/ckeditor5-essentials"; -import { FindAndReplace } from "@ckeditor/ckeditor5-find-and-replace"; -import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font"; -import { Heading } from "@ckeditor/ckeditor5-heading"; -import { GeneralHtmlSupport } from "@ckeditor/ckeditor5-html-support"; -import { - Image, - ImageCaption, - ImageInsertViaUrl, - ImageStyle, - ImageToolbar, - ImageResizeEditing, - ImageResizeHandles, - ImageUpload, - PictureEditing, -} from "@ckeditor/ckeditor5-image"; -import { Indent } from "@ckeditor/ckeditor5-indent"; -import { List } from "@ckeditor/ckeditor5-list"; -import { MediaEmbed } from "@ckeditor/ckeditor5-media-embed"; -import { Paragraph } from "@ckeditor/ckeditor5-paragraph"; -import { RemoveFormat } from "@ckeditor/ckeditor5-remove-format"; -import { SourceEditing } from "@ckeditor/ckeditor5-source-editing"; -import { - SpecialCharacters, - SpecialCharactersEssentials, -} from "@ckeditor/ckeditor5-special-characters"; -import { Style } from "@ckeditor/ckeditor5-style"; -import { - Table, - TableCaption, - TableCellProperties, - TableProperties, - TableColumnResize, - TableToolbar, -} from "@ckeditor/ckeditor5-table"; -import { TextTransformation } from "@ckeditor/ckeditor5-typing"; -import { Undo } from "@ckeditor/ckeditor5-undo"; - -import { Link } from "./ckeditor5-link/src/index"; -import { AssetManager } from "./ckeditor5-assetmanager/src/index"; -import { UploadAdapter } from "./ck5/uploadAdapter"; -import { PasteAjax } from "./ck5/pasteAjax"; -import { LinkTarget } from "./ck5/linkTarget"; - -import ChangeEvent from "../events/changeEvent"; - -function initUploadAdaptor(editor) { - editor.plugins.get("FileRepository").createUploadAdapter = (loader) => { - return new UploadAdapter(loader); - }; -} - -export default class Editor { - constructor(element, options) { - const self = this; - this.element = element; - this.options = options; - ClassicEditor.create(element, this.buildCke5Options()) - .then((editor) => { - self._init(editor); - }) - .catch((error) => { - console.error(error); - }); - } - - buildCke5Options() { - let options = this.getDefaultOptions(); - options = this._applyProfile(options); - options = this._applyStyleSet(options); - options = this._applyHeadings(options); - options = this._applyLang(options); - - return options; - } - - getDefaultOptions() { - return { - heading: { - options: [ - { model: "paragraph", title: "Paragraph", class: "" }, - { - model: "heading2", - view: "h2", - title: "Heading 2", - class: "", - }, - { - model: "heading3", - view: "h3", - title: "Heading 3", - class: "", - }, - ], - }, - htmlSupport: { - allow: [ - { - name: /.*/, - attributes: true, - classes: true, - styles: true, - }, - ], - }, - extraPlugins: [initUploadAdaptor], - plugins: [ - Alignment, - Autoformat, - AssetManager, - BlockQuote, - Bold, - Essentials, - FindAndReplace, - FontColor, - FontFamily, - FontSize, - GeneralHtmlSupport, - Heading, - Image, - ImageCaption, - ImageInsertViaUrl, - ImageStyle, - ImageToolbar, - ImageResizeEditing, - ImageResizeHandles, - ImageUpload, - Indent, - Italic, - Link, - LinkTarget, - List, - MediaEmbed, - Paragraph, - PasteAjax, - PictureEditing, - RemoveFormat, - SourceEditing, - SpecialCharacters, - SpecialCharactersEssentials, - Style, - Table, - TableCaption, - TableCellProperties, - TableColumnResize, - TableProperties, - TableToolbar, - TextTransformation, - Undo, - ], - toolbar: { - items: [ - "heading", - "|", - "bold", - "italic", - "bulletedList", - "numberedList", - "removeFormat", - "|", - "outdent", - "indent", - "undo", - "redo", - "|", - "link", - "insertImage", - "insertTable", - "mediaEmbed", - "specialCharacters", - "|", - "findAndReplace", - "sourceEditing", - ], - shouldNotGroupWhenFull: true, - }, - language: { - ui: "en", - content: "en", - }, - image: { - toolbar: [ - "imageTextAlternative", - "toggleImageCaption", - "|", - "imageStyle:inline", - "imageStyle:block", - "imageStyle:side", - "|", - "editImage", - ], - insert: { - integrations: ["upload", "assetManager"], - }, - }, - table: { - defaultHeadings: { rows: 1 }, - contentToolbar: [ - "tableColumn", - "tableRow", - "mergeTableCells", - "tableProperties", - "tableCellProperties", - ], - }, - }; - } - - _init(editor) { - this.editor = editor; - const self = this; - if ( - undefined !== this.options.styleSet && - this.options.styleSet.length > 0 - ) { - editor.ui.element.classList.add(`ems-styleset-${this.options.styleSet}`); - } - if ( - undefined !== this.options.onChangeEvent && - this.options.onChangeEvent.length > 0 - ) { - editor.editing.view.document.on(this.options.onChangeEvent, () => { - self._change(); - }); - } - if (undefined !== this.options.height && this.options.height > 0) { - editor.editing.view.change((writer) => { - writer.setStyle( - "height", - `${this.options.height}px`, - editor.editing.view.document.getRoot(), - ); - }); - } - } - - _change() { - this.editor.updateSourceElement(); - const event = new ChangeEvent(this.element); - event.dispatch(); - } - - _applyStyleSet(options) { - if (undefined === this.options.styleSet || this.options.styleSet === 0) { - options.toolbar.items = options.toolbar.items.filter( - (e) => e !== "style", - ); - return options; - } - const styleSet = this.options.styleSet; - if ( - undefined === document.body.dataset.wysiwygInfo || - document.body.dataset.wysiwygInfo.length === 0 - ) { - options.toolbar.items = options.toolbar.items.filter( - (e) => e !== "style", - ); - return options; - } - const config = JSON.parse(document.body.dataset.wysiwygInfo); - if (undefined === config.styles || config.styles.length === 0) { - options.toolbar.items = options.toolbar.items.filter( - (e) => e !== "style", - ); - return options; - } - for (let i = 0; i < config.styles.length; ++i) { - if ( - config.styles[i].name !== styleSet || - undefined === config.styles[i].config - ) { - continue; - } - if (!options.toolbar.items.includes("style")) { - options.toolbar.items.unshift("style"); - } - options.style = { - definitions: config.styles[i].config, - }; - break; - } - return options; - } - - _applyHeadings(options) { - if ( - undefined === this.options.formatTags || - this.options.formatTags.length === 0 - ) { - return options; - } - - try { - const formatTags = JSON.parse(this.options.formatTags); - options.heading.options = formatTags; - } catch (e) { - console.error( - `The format tags option expect an JSON, did you migrated it? Got: ${this.options.formatTags}`, - ); - } - - return options; - } - - _applyLang(options) { - if (undefined !== this.options.lang && this.options.lang.length > 0) { - options.language.content = this.options.lang; - } - return options; - } - - _applyProfile(options) { - if ( - undefined === document.body.dataset.wysiwygInfo || - (document.body.dataset.wysiwygInfo === 0) | length - ) { - return options; - } - - try { - const profile = JSON.parse(document.body.dataset.wysiwygInfo); - if (typeof profile.config !== "object") { - return options; - } - - return { ...options, ...profile.config }; - } catch (e) { - console.error(`Impossible to apply the WYSIWYG profile: ${e}`); - } - - return options; - } -} diff --git a/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.js b/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.js index aad2ca1e1..3e9a19ea1 100644 --- a/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.js +++ b/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.js @@ -1,39 +1,39 @@ import Editor from '../helpers/editor' class WYSIWYG { - editors = [] + editors = [] - load(target) { - this.loadInAdminUI(target) - this.loadInRevision(target) - } + load(target) { + this.loadInAdminUI(target) + this.loadInRevision(target) + } - loadInRevision(target) { - const wysiwygs = target.querySelectorAll('.ckeditor_ems') - for (let i = 0; i < wysiwygs.length; ++i) { - this.createEditor(wysiwygs[i], { - onChangeEvent: 'keyup', - styleSet: wysiwygs[i].dataset.stylesSet, - formatTags: wysiwygs[i].dataset.formatTags, - contentCss: wysiwygs[i].dataset.contentCss, - height: wysiwygs[i].dataset.height, - referrerEmsId: wysiwygs[i].dataset.referrerEmsId, - tableDefaultCss: wysiwygs[i].dataset.tableDefaultCss, - lang: wysiwygs[i].dataset.lang - }) - } + loadInRevision(target) { + const wysiwygs = target.querySelectorAll('.ckeditor_ems') + for (let i = 0; i < wysiwygs.length; ++i) { + this.createEditor(wysiwygs[i], { + onChangeEvent: 'keyup', + styleSet: wysiwygs[i].dataset.stylesSet, + formatTags: wysiwygs[i].dataset.formatTags, + contentCss: wysiwygs[i].dataset.contentCss, + height: wysiwygs[i].dataset.height, + referrerEmsId: wysiwygs[i].dataset.referrerEmsId, + tableDefaultCss: wysiwygs[i].dataset.tableDefaultCss, + lang: wysiwygs[i].dataset.lang + }) } + } - loadInAdminUI(target) { - const wysiwygs = target.querySelectorAll('.ckeditor') - for (let i = 0; i < wysiwygs.length; ++i) { - this.createEditor(wysiwygs[i]) - } + loadInAdminUI(target) { + const wysiwygs = target.querySelectorAll('.ckeditor') + for (let i = 0; i < wysiwygs.length; ++i) { + this.createEditor(wysiwygs[i]) } + } - createEditor(element, options = {}) { - this.editors.push(new Editor(element, options)) - } + createEditor(element, options = {}) { + this.editors.push(new Editor(element, options)) + } } export default WYSIWYG diff --git a/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.ts b/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.ts deleted file mode 100644 index b8207d4a1..000000000 --- a/EMS/admin-ui-bundle/assets/src/core/plugins/wysiwyg.ts +++ /dev/null @@ -1,38 +0,0 @@ -class WYSIWYG { - editors = []; - - load(target) { - this.loadInAdminUI(target); - this.loadInRevision(target); - } - - loadInRevision(target) { - const wysiwygs = target.querySelectorAll(".ckeditor_ems"); - for (let i = 0; i < wysiwygs.length; ++i) { - this.createEditor(wysiwygs[i], { - onChangeEvent: "keyup", - styleSet: wysiwygs[i].dataset.stylesSet, - formatTags: wysiwygs[i].dataset.formatTags, - contentCss: wysiwygs[i].dataset.contentCss, - height: wysiwygs[i].dataset.height, - referrerEmsId: wysiwygs[i].dataset.referrerEmsId, - tableDefaultCss: wysiwygs[i].dataset.tableDefaultCss, - lang: wysiwygs[i].dataset.lang, - }); - } - } - - loadInAdminUI(target) { - const wysiwygs = target.querySelectorAll(".ckeditor"); - for (let i = 0; i < wysiwygs.length; ++i) { - this.createEditor(wysiwygs[i]); - } - } - - async createEditor(element, options = {}) { - const Editor = await import("../helpers/editor.ts"); - this.editors.push(new Editor.default(element, options)); - } -} - -export default WYSIWYG;