diff --git a/package-lock.json b/package-lock.json index e5484bcae59a0c081ce86593ba5aecf1ed7a64d0..0922d43bd414d0b3c1b8b285c09ec59ef3e4ce96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3401,6 +3401,17 @@ "@ckeditor/ckeditor5-undo": "^16.0.0" } }, + "@ckeditor/ckeditor5-heading": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-16.0.0.tgz", + "integrity": "sha512-E+fNej/rHE2gp8IT48hQGaWBmH10uR//f9dVooZkgJmXjJaPId/hhyDWRuSXYcG11AYRcQSS9aN5U7R0/k80wg==", + "requires": { + "@ckeditor/ckeditor5-core": "^16.0.0", + "@ckeditor/ckeditor5-paragraph": "^16.0.0", + "@ckeditor/ckeditor5-ui": "^16.0.0", + "@ckeditor/ckeditor5-utils": "^16.0.0" + } + }, "@ckeditor/ckeditor5-link": { "version": "16.0.0", "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-link/-/ckeditor5-link-16.0.0.tgz", diff --git a/package.json b/package.json index 07bc523a8c7a630ed5a38f147b846e2194a8d9e5..de0f7c58cf6befbe3832f7002bb5ac7a1fb0660b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.7", "@ckeditor/ckeditor5-editor-balloon": "^16.0.0", "@ckeditor/ckeditor5-essentials": "^16.0.0", + "@ckeditor/ckeditor5-heading": "^16.0.0", "@ckeditor/ckeditor5-link": "^16.0.0", "@ckeditor/ckeditor5-paragraph": "^16.0.0", "@ckeditor/ckeditor5-theme-lark": "^16.0.0", diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue index e8399e42d940543c9612e7471f2bb0b5536ff719..1c24c900e26d4977322b76597bf7416dcd816a9f 100644 --- a/src/components/TextEditor.vue +++ b/src/components/TextEditor.vue @@ -36,6 +36,7 @@ import Editor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor' import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials' import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote' import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold' +import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading' import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic' import LinkPlugin from '@ckeditor/ckeditor5-link/src/link' import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph' @@ -68,17 +69,33 @@ export default { }, }, data() { + const plugins = [EssentialsPlugin, ParagraphPlugin] + const toolbar = ['undo', 'redo'] + + if (this.html) { + plugins.push( + ...[ + EssentialsPlugin, + ParagraphPlugin, + BoldPlugin, + ItalicPlugin, + HeadingPlugin, + BlockQuotePlugin, + LinkPlugin, + ] + ) + toolbar.unshift(...['bold', 'italic', 'heading', 'blockquote', 'link']) + } + return { text: '', ready: false, editor: Editor, config: { placeholder: this.placeholder, - plugins: this.html - ? [EssentialsPlugin, ParagraphPlugin, BoldPlugin, ItalicPlugin, LinkPlugin, BlockQuotePlugin] - : [EssentialsPlugin, ParagraphPlugin], + plugins, toolbar: { - items: this.html ? ['bold', 'italic', 'blockquote', 'link', 'undo', 'redo'] : ['undo', 'redo'], + items: toolbar, }, language: 'en', }, @@ -88,33 +105,36 @@ export default { this.loadEditorTranslations(getLanguage()) }, methods: { - loadEditorTranslations(language) { + async loadEditorTranslations(language) { if (language === 'en') { // The default, nothing to fetch return this.showEditor('en') } - import( - /* webpackMode: "lazy-once" */ - /* webpackPrefetch: true */ - /* webpackPreload: true */ - `@ckeditor/ckeditor5-build-balloon/build/translations/${language}` - ) - .then(() => this.showEditor(language)) - .catch(() => this.showEditor('en')) + try { + await import( + /* webpackMode: "lazy-once" */ + /* webpackPrefetch: true */ + /* webpackPreload: true */ + `@ckeditor/ckeditor5-build-balloon/build/translations/${language}` + ) + this.showEditor(language) + } catch (error) { + logger.error(`could not find CKEditor translations for "${language}"`) + this.showEditor('en') + } }, showEditor(language) { - if (this.html) { - this.config.language = language - } else { - this.config.language = language - } + logger.debug(`using "${language}" as CKEditor language`) + this.config.language = language this.ready = true }, onEditorReady(editor) { const schema = editor.model.schema + logger.debug('CKEditor editor is ready', {editor, schema}) + schema.on( 'checkChild', (evt, args) => {