From 169e65f0ef32ad79d8692a772094dbf69d50050a Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 9 Nov 2024 15:39:40 +0200 Subject: [PATCH] Deduplicate config for the two editor types --- .../src/ckeditor_balloon.ts | 108 +----------------- .../src/ckeditor_decoupled.ts | 107 +---------------- .../ckeditor5-build-trilium/src/config.ts | 104 +++++++++++++++++ 3 files changed, 113 insertions(+), 206 deletions(-) diff --git a/packages/ckeditor5-build-trilium/src/ckeditor_balloon.ts b/packages/ckeditor5-build-trilium/src/ckeditor_balloon.ts index 05613dac2..a846b43ed 100644 --- a/packages/ckeditor5-build-trilium/src/ckeditor_balloon.ts +++ b/packages/ckeditor5-build-trilium/src/ckeditor_balloon.ts @@ -7,7 +7,7 @@ import { BalloonEditor as BalloonEditorBase } from '@ckeditor/ckeditor5-editor-balloon'; import { BlockToolbar } from '@ckeditor/ckeditor5-ui'; import '../theme/theme.css'; -import { COMMON_PLUGINS } from './config'; +import { COMMON_PLUGINS, COMMON_SETTINGS } from './config'; export default class BalloonEditor extends BalloonEditorBase { public static override builtinPlugins = [ @@ -16,6 +16,8 @@ export default class BalloonEditor extends BalloonEditorBase { ]; public static override defaultConfig = { + ...COMMON_SETTINGS, + toolbar: { items: [ 'fontSize', @@ -34,85 +36,7 @@ export default class BalloonEditor extends BalloonEditorBase { 'cuttonote' ] }, - image: { - styles: { - options: [ - 'inline', - 'alignBlockLeft', - 'alignCenter', - 'alignBlockRight', - 'alignLeft', - 'alignRight', - 'full', // full and side are for BC since the old images have been created with these styles - 'side' - ] - }, - resizeOptions: [ - { - name: 'imageResize:original', - value: null, - icon: 'original' - }, - { - name: 'imageResize:25', - value: '25', - icon: 'small' - }, - { - name: 'imageResize:50', - value: '50', - icon: 'medium' - }, - { - name: 'imageResize:75', - value: '75', - icon: 'medium' - } - ], - toolbar: [ - // Image styles, see https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#demo. - 'imageStyle:inline', - 'imageStyle:alignCenter', - { - name: "imageStyle:wrapText", - title: "Wrap text", - items: [ - 'imageStyle:alignLeft', - 'imageStyle:alignRight', - ], - defaultItem: 'imageStyle:alignRight' - }, - { - name: "imageStyle:block", - title: "Block align", - items: [ - 'imageStyle:alignBlockLeft', - 'imageStyle:alignBlockRight' - ], - defaultItem: "imageStyle:alignBlockLeft", - }, - '|', - 'imageResize:25', - 'imageResize:50', - 'imageResize:original', - '|', - 'toggleImageCaption' - ], - upload: { - types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg', 'svg+xml', 'avif' ] - } - }, - heading: { - options: [ - { model: 'paragraph' as const, title: 'Paragraph', class: 'ck-heading_paragraph' }, - // // heading1 is not used since that should be a note's title - { model: 'heading2' as const, view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, - { model: 'heading3' as const, view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, - { model: 'heading4' as const, view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, - { model: 'heading5' as const, view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, - { model: 'heading6' as const, view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } - ] - }, + blockToolbar: [ 'heading', '|', @@ -126,28 +50,6 @@ export default class BalloonEditor extends BalloonEditorBase { 'markdownImport', 'findAndReplace', 'specialCharacters' - ], - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'tableCellProperties', - 'toggleTableCaption' - ] - }, - list: { - properties: { - styles: true, - startIndex: true, - reversed: true - } - }, - link: { - defaultProtocol: 'https://' - }, - // This value must be kept in sync with the language defined in webpack.config.js. - language: 'en' + ] }; } diff --git a/packages/ckeditor5-build-trilium/src/ckeditor_decoupled.ts b/packages/ckeditor5-build-trilium/src/ckeditor_decoupled.ts index a259259c6..612f9e80b 100644 --- a/packages/ckeditor5-build-trilium/src/ckeditor_decoupled.ts +++ b/packages/ckeditor5-build-trilium/src/ckeditor_decoupled.ts @@ -6,7 +6,7 @@ // The editor creator to use. import { DecoupledEditor as DecoupledEditorBase } from '@ckeditor/ckeditor5-editor-decoupled'; import '../theme/theme.css'; -import { COMMON_PLUGINS } from './config'; +import { COMMON_PLUGINS, COMMON_SETTINGS } from './config'; export default class DecoupledEditor extends DecoupledEditorBase { public static override builtinPlugins = [ @@ -14,6 +14,8 @@ export default class DecoupledEditor extends DecoupledEditorBase { ]; public static override defaultConfig = { + ...COMMON_SETTINGS, + // For nested toolbars, refer to https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/toolbar.html#grouping-toolbar-items-in-dropdowns-nested-toolbars. toolbar: { items: [ @@ -64,107 +66,6 @@ export default class DecoupledEditor extends DecoupledEditorBase { 'markdownImport', 'cuttonote' ] - }, - image: { - styles: { - options: [ - 'inline', - 'alignBlockLeft', - 'alignCenter', - 'alignBlockRight', - 'alignLeft', - 'alignRight', - 'full', // full and side are for BC since the old images have been created with these styles - 'side' - ] - }, - resizeOptions: [ - { - name: 'imageResize:original', - value: null, - icon: 'original' - }, - { - name: 'imageResize:25', - value: '25', - icon: 'small' - }, - { - name: 'imageResize:50', - value: '50', - icon: 'medium' - }, - { - name: 'imageResize:75', - value: '75', - icon: 'medium' - } - ], - toolbar: [ - // Image styles, see https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#demo. - 'imageStyle:inline', - 'imageStyle:alignCenter', - { - name: "imageStyle:wrapText", - title: "Wrap text", - items: [ - 'imageStyle:alignLeft', - 'imageStyle:alignRight', - ], - defaultItem: 'imageStyle:alignRight' - }, - { - name: "imageStyle:block", - title: "Block align", - items: [ - 'imageStyle:alignBlockLeft', - 'imageStyle:alignBlockRight' - ], - defaultItem: "imageStyle:alignBlockLeft", - }, - '|', - 'imageResize:25', - 'imageResize:50', - 'imageResize:original', - '|', - 'toggleImageCaption' - ], - upload: { - types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg', 'svg+xml', 'avif' ] - } - }, - heading: { - options: [ - { model: 'paragraph' as const, title: 'Paragraph', class: 'ck-heading_paragraph' }, - // // heading1 is not used since that should be a note's title - { model: 'heading2' as const, view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, - { model: 'heading3' as const, view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, - { model: 'heading4' as const, view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, - { model: 'heading5' as const, view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, - { model: 'heading6' as const, view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } - ] - }, - table: { - contentToolbar: [ - 'tableColumn', - 'tableRow', - 'mergeTableCells', - 'tableProperties', - 'tableCellProperties', - 'toggleTableCaption' - ] - }, - list: { - properties: { - styles: true, - startIndex: true, - reversed: true - } - }, - link: { - defaultProtocol: 'https://' - }, - // This value must be kept in sync with the language defined in webpack.config.js. - language: 'en' + } }; } diff --git a/packages/ckeditor5-build-trilium/src/config.ts b/packages/ckeditor5-build-trilium/src/config.ts index 17abfdfa4..23b656823 100644 --- a/packages/ckeditor5-build-trilium/src/config.ts +++ b/packages/ckeditor5-build-trilium/src/config.ts @@ -134,3 +134,107 @@ export const COMMON_PLUGINS = [ Math, AutoformatMath ]; + +export const COMMON_SETTINGS = { + image: { + styles: { + options: [ + 'inline', + 'alignBlockLeft', + 'alignCenter', + 'alignBlockRight', + 'alignLeft', + 'alignRight', + 'full', // full and side are for BC since the old images have been created with these styles + 'side' + ] + }, + resizeOptions: [ + { + name: 'imageResize:original', + value: null, + icon: 'original' + }, + { + name: 'imageResize:25', + value: '25', + icon: 'small' + }, + { + name: 'imageResize:50', + value: '50', + icon: 'medium' + }, + { + name: 'imageResize:75', + value: '75', + icon: 'medium' + } + ], + toolbar: [ + // Image styles, see https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#demo. + 'imageStyle:inline', + 'imageStyle:alignCenter', + { + name: "imageStyle:wrapText", + title: "Wrap text", + items: [ + 'imageStyle:alignLeft', + 'imageStyle:alignRight', + ], + defaultItem: 'imageStyle:alignRight' + }, + { + name: "imageStyle:block", + title: "Block align", + items: [ + 'imageStyle:alignBlockLeft', + 'imageStyle:alignBlockRight' + ], + defaultItem: "imageStyle:alignBlockLeft", + }, + '|', + 'imageResize:25', + 'imageResize:50', + 'imageResize:original', + '|', + 'toggleImageCaption' + ], + upload: { + types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff', 'svg', 'svg+xml', 'avif' ] + } + }, + heading: { + options: [ + { model: 'paragraph' as const, title: 'Paragraph', class: 'ck-heading_paragraph' }, + // // heading1 is not used since that should be a note's title + { model: 'heading2' as const, view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }, + { model: 'heading3' as const, view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }, + { model: 'heading4' as const, view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }, + { model: 'heading5' as const, view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' }, + { model: 'heading6' as const, view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' } + ] + }, + table: { + contentToolbar: [ + 'tableColumn', + 'tableRow', + 'mergeTableCells', + 'tableProperties', + 'tableCellProperties', + 'toggleTableCaption' + ] + }, + list: { + properties: { + styles: true, + startIndex: true, + reversed: true + } + }, + link: { + defaultProtocol: 'https://' + }, + // This value must be kept in sync with the language defined in webpack.config.js. + language: 'en' +};