diff --git a/Classes/EventListener/RteConfigEnhancer.php b/Classes/EventListener/RteConfigEnhancer.php index decc445..37da1cd 100644 --- a/Classes/EventListener/RteConfigEnhancer.php +++ b/Classes/EventListener/RteConfigEnhancer.php @@ -9,7 +9,6 @@ namespace BK2K\Syntax\EventListener; -use TYPO3\CMS\RteCKEditor\Form\Element\Event\BeforeGetExternalPluginsEvent; use TYPO3\CMS\RteCKEditor\Form\Element\Event\BeforePrepareConfigurationForEditorEvent; class RteConfigEnhancer @@ -17,11 +16,117 @@ class RteConfigEnhancer public function beforePrepareConfiguration(BeforePrepareConfigurationForEditorEvent $event): void { $configuration = $event->getConfiguration(); + $configuration['toolbar']['items'][] = 'codeBlock'; $configuration['importModules'][] = [ - 'module' => '@bk2k/syntax/ckeditor5/plugin/syntax.js', + 'module' => '@ckeditor/ckeditor5-code-block', 'exports' => [ - 'Syntax' - ] + 'CodeBlock', + ], + ]; + + $configuration['codeBlock'] = [ + 'languages' => [ + [ + 'label' => 'Plain Text', + 'language' => 'plaintext', + 'class' => '', + ], + [ + 'label' => 'Apache Configuration', + 'language' => 'apacheconf', + 'class' => 'language-apacheconf', + ], + [ + 'label' => 'C-like', + 'language' => 'clike', + 'class' => 'language-clike', + ], + [ + 'label' => 'CSS', + 'language' => 'css', + 'class' => 'language-css', + ], + [ + 'label' => 'Git', + 'language' => 'git', + 'class' => 'language-git', + ], + [ + 'label' => 'HTML', + 'language' => 'html', + 'class' => 'language-html', + ], + [ + 'label' => 'JavaScript', + 'language' => 'javascript', + 'class' => 'language-javascript', + ], + [ + 'label' => 'JSON', + 'language' => 'json', + 'class' => 'language-json', + ], + [ + 'label' => 'Markup', + 'language' => 'markup', + 'class' => 'language-markup', + ], + [ + 'label' => 'Less', + 'language' => 'less', + 'class' => 'language-less', + ], + [ + 'label' => 'Markdown', + 'language' => 'markdown', + 'class' => 'language-markdown', + ], + [ + 'label' => 'MathML', + 'language' => 'mathml', + 'class' => 'language-mathml', + ], + [ + 'label' => 'nginx', + 'language' => 'nginx', + 'class' => 'language-nginx', + ], + [ + 'label' => 'PHP', + 'language' => 'php', + 'class' => 'language-php', + ], + [ + 'label' => 'Sass', + 'language' => 'sass', + 'class' => 'language-sass', + ], + [ + 'label' => 'Scss', + 'language' => 'scss', + 'class' => 'language-scss', + ], + [ + 'label' => 'SVG', + 'language' => 'svg', + 'class' => 'language-svg', + ], + [ + 'label' => 'TypoScript', + 'language' => 'typoscript', + 'class' => 'language-typoscript', + ], + [ + 'label' => 'XML', + 'language' => 'xml', + 'class' => 'language-xml', + ], + [ + 'label' => 'YAML', + 'language' => 'yaml', + 'class' => 'language-yaml', + ], + ], ]; $event->setConfiguration($configuration); diff --git a/Configuration/JavaScriptModules.php b/Configuration/JavaScriptModules.php deleted file mode 100644 index 8d4985f..0000000 --- a/Configuration/JavaScriptModules.php +++ /dev/null @@ -1,20 +0,0 @@ - [ - 'backend.form', - ], - 'dependencies' => [ - 'rte_ckeditor' - ], - 'imports' => [ - '@bk2k/syntax/ckeditor5/plugin/syntax' => 'EXT:syntax/Resources/Public/JavaScript/ckeditor5/plugin/syntax.js', - ], -]; diff --git a/Configuration/Sets/Base/settings.definitions.yaml b/Configuration/Sets/Base/settings.definitions.yaml new file mode 100644 index 0000000..62a3786 --- /dev/null +++ b/Configuration/Sets/Base/settings.definitions.yaml @@ -0,0 +1,26 @@ +categories: + Syntax: + label: 'Syntax' + +settings: + + plugin.tx_syntax.settings.theme: + label: 'Theme' + category: Syntax + type: string + enum: + '': 'Default' + '-coy': 'Coy' + '-dark': 'Dark' + '-funky': 'Funky' + '-okaidia': 'Okaidia' + '-solarizedlight': 'Solarized Light' + '-tomorrow': 'Tomorrow' + '-twilight': 'Twilight' + default: '' + + plugin.tx_syntax.settings.plugins.linenumbers: + label: 'Enable line numbers' + category: Syntax + type: bool + default: true diff --git a/Configuration/TCA/Overrides/200_content_element_syntax.php b/Configuration/TCA/Overrides/200_content_element_syntax.php index 57ca340..7f0e8c2 100644 --- a/Configuration/TCA/Overrides/200_content_element_syntax.php +++ b/Configuration/TCA/Overrides/200_content_element_syntax.php @@ -71,7 +71,7 @@ 'renderType' => 'selectSingle', 'items' => [ [ - 'label' => 'None', + 'label' => 'Plain Text', 'value' => 'none', ], [ diff --git a/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js b/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js deleted file mode 100644 index bd2de45..0000000 --- a/Resources/Public/CKEditor/Plugins/Code/dialogs/code.js +++ /dev/null @@ -1,88 +0,0 @@ -CKEDITOR.dialog.add('code', function () { - - var clientHeight = document.documentElement.clientHeight; - var size = CKEDITOR.document.getWindow().getViewPaneSize(); - var width = Math.min(size.width - 70, 800); - var height = size.height / 2; - - if (clientHeight < 650) { - height = clientHeight - 220; - } - - return { - title: 'Code', - minWidth: 200, - minHeight: 100, - contents: [ - { - id: 'info', - elements: [ - { - id: 'lang', - type: 'select', - label: 'Language', - items: [ - ['None', 'language-none'], - ['Apache Configuration', 'language-apacheconf'], - ['C-like', 'language-clike'], - ['CSS', 'language-css'], - ['Git', 'language-git'], - ['HTML', 'language-html'], - ['JavaScript', 'language-javascript'], - ['JSON', 'language-json'], - ['Markup ', 'language-markup'], - ['Less', 'language-less'], - ['Markdown', 'language-markdown'], - ['MathML', 'language-mathml'], - ['nginx', 'language-nginx'], - ['PHP', 'language-php'], - ['Sass', 'language-sass'], - ['Scss', 'language-scss'], - ['SVG', 'language-svg'], - ['TypoScript', 'language-typoscript'], - ['XML', 'language-xml'], - ['YAML', 'language-yaml'], - ], - setup: function (widget) { - this.setValue(widget.data.lang); - }, - commit: function (widget) { - widget.setData('lang', this.getValue()); - } - }, - { - id: 'linenumbers', - type: 'checkbox', - label: 'Linenumbers', - default: true, - setup: function (widget) { - this.setValue(widget.data.linenumbers); - }, - commit: function (widget) { - widget.setData('linenumbers', this.getValue()); - } - }, - { - id: 'code', - type: 'textarea', - label: 'Code', - setup: function (widget) { - this.setValue(widget.data.code); - }, - commit: function (widget) { - widget.setData('code', this.getValue()); - }, - required: true, - validate: CKEDITOR.dialog.validate.notEmpty('Code cannot be empty.'), - inputStyle: 'cursor:auto;' + - 'tab-size:4;' + - 'width:' + width + 'px;' + - 'height:' + height + 'px;' + - 'padding: 1em;' + - 'text-align:left;', - } - ] - } - ] - }; -}); diff --git a/Resources/Public/CKEditor/Plugins/Code/icons/code.png b/Resources/Public/CKEditor/Plugins/Code/icons/code.png deleted file mode 100644 index f5caa14..0000000 Binary files a/Resources/Public/CKEditor/Plugins/Code/icons/code.png and /dev/null differ diff --git a/Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png b/Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png deleted file mode 100644 index 245c5ad..0000000 Binary files a/Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png and /dev/null differ diff --git a/Resources/Public/CKEditor/Plugins/Code/lang/de.js b/Resources/Public/CKEditor/Plugins/Code/lang/de.js deleted file mode 100644 index 345f73e..0000000 --- a/Resources/Public/CKEditor/Plugins/Code/lang/de.js +++ /dev/null @@ -1,3 +0,0 @@ -CKEDITOR.plugins.setLang('syntax_code', 'de', { - toolbar: 'Code einfügen' -}); diff --git a/Resources/Public/CKEditor/Plugins/Code/lang/en.js b/Resources/Public/CKEditor/Plugins/Code/lang/en.js deleted file mode 100644 index ff6b6ed..0000000 --- a/Resources/Public/CKEditor/Plugins/Code/lang/en.js +++ /dev/null @@ -1,3 +0,0 @@ -CKEDITOR.plugins.setLang('syntax_code', 'en', { - toolbar: 'Insert Code' -}); diff --git a/Resources/Public/CKEditor/Plugins/Code/plugin.js b/Resources/Public/CKEditor/Plugins/Code/plugin.js deleted file mode 100644 index 7825c62..0000000 --- a/Resources/Public/CKEditor/Plugins/Code/plugin.js +++ /dev/null @@ -1,72 +0,0 @@ -'use strict'; - -(function () { - - CKEDITOR.plugins.add('syntax_code', { - lang: 'en,de', - requires: 'widget,dialog', - icons: 'code', - hidpi: true, - onLoad: function () { - CKEDITOR.dialog.add('code', this.path + 'dialogs/code.js'); - }, - init: function (editor) { - editor.addContentsCss(this.path + 'styles/code.css'); - editor.widgets.add('code', { - button: 'Insert Code Block', - template: '
', - parts: { - pre: 'pre', - code: 'code' - }, - allowedContent: 'pre(line-numbers); code(language-*)', - requiredContent: 'pre', - styleableElements: 'pre', - dialog: 'code', - mask: true, - upcast: function (element) { - if (element.name != 'pre') { - return; - } - var children = element.children.filter( - child => child.type != CKEDITOR.NODE_TEXT - ); - if (children.length != 1 || children[0].name != 'code') { - return; - } - var code = children[0]; - if (code.children.length != 1 || code.children[0].type != CKEDITOR.NODE_TEXT) { - return; - } - return element; - }, - downcast: function (element) { - var code = element.getFirst('code'); - code.children.length = 0; - code.add(new CKEDITOR.htmlParser.text(CKEDITOR.tools.htmlEncode(this.data.code))); - return element; - }, - init: function () { - this.data.code = CKEDITOR.tools.htmlDecode(this.parts.code.getHtml()); - this.data.lang = this.parts.code.getAttribute('class') ?? 'language-none'; - this.data.linenumbers = this.parts.pre.hasClass('line-numbers'); - }, - data: function () { - if (this.data.lang) { - this.parts.code.removeAttribute(['class']) - this.parts.code.addClass(this.data.lang); - } - if (this.data.linenumbers) { - this.parts.pre.addClass('line-numbers'); - } else { - this.parts.pre.removeClass('line-numbers'); - } - if (this.data.code) { - this.parts.code.setHtml(CKEDITOR.tools.htmlEncode(this.data.code)); - } - } - }); - } - }); - -})(); diff --git a/Resources/Public/CKEditor/Plugins/Code/styles/code.css b/Resources/Public/CKEditor/Plugins/Code/styles/code.css deleted file mode 100644 index 3b363d3..0000000 --- a/Resources/Public/CKEditor/Plugins/Code/styles/code.css +++ /dev/null @@ -1,6 +0,0 @@ -.cke_widget_code pre { - padding: 1rem; - background-color: #f2f2f2; - border: 1px solid #cacaca; - border-radius: 3px; -} diff --git a/Resources/Public/JavaScript/ckeditor5/plugin/syntax.js b/Resources/Public/JavaScript/ckeditor5/plugin/syntax.js deleted file mode 100644 index 1dfd80c..0000000 --- a/Resources/Public/JavaScript/ckeditor5/plugin/syntax.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as Core from '@ckeditor/ckeditor5-core'; -import * as UI from '@ckeditor/ckeditor5-ui'; - -export class Syntax extends Core.Plugin { - static pluginName = 'Syntax'; - - init() { - const editor = this.editor; - - editor.ui.componentFactory.add('softhyphen', locale => { - const button = new UI.ButtonView(locale); - button.label = 'Code'; - button.icon = ''; - button.tooltip = true; - button.on('execute', () => alert('insert code')); - return button; - }); - - editor.conversion.for('editingDowncast').add(downcastDispatcher => { - downcastDispatcher.on('insert:$text', (evt, data, conversionApi) => { - if (!conversionApi.consumable.consume(data.item, evt.name)) { - return; - } - - console.log('downcast'); - - }, { priority: 'high' }); - }); - } -} - -export default Syntax;