From 07015d6075e0bf5c6153f418b73f4e529c0f22a5 Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Wed, 16 Oct 2024 13:37:28 +0200 Subject: [PATCH] [BUGFIX] Make ckeditor config v12 and v13 compatible --- Classes/EventListener/RteConfigEnhancer.php | 113 +++++++++++++++++- Configuration/JavaScriptModules.php | 20 ---- .../Sets/Base/settings.definitions.yaml | 26 ++++ .../Overrides/200_content_element_syntax.php | 2 +- .../CKEditor/Plugins/Code/dialogs/code.js | 88 -------------- .../CKEditor/Plugins/Code/icons/code.png | Bin 2211 -> 0 bytes .../Plugins/Code/icons/hidpi/code.png | Bin 2639 -> 0 bytes .../Public/CKEditor/Plugins/Code/lang/de.js | 3 - .../Public/CKEditor/Plugins/Code/lang/en.js | 3 - .../Public/CKEditor/Plugins/Code/plugin.js | 72 ----------- .../CKEditor/Plugins/Code/styles/code.css | 6 - .../JavaScript/ckeditor5/plugin/syntax.js | 32 ----- 12 files changed, 136 insertions(+), 229 deletions(-) delete mode 100644 Configuration/JavaScriptModules.php create mode 100644 Configuration/Sets/Base/settings.definitions.yaml delete mode 100644 Resources/Public/CKEditor/Plugins/Code/dialogs/code.js delete mode 100644 Resources/Public/CKEditor/Plugins/Code/icons/code.png delete mode 100644 Resources/Public/CKEditor/Plugins/Code/icons/hidpi/code.png delete mode 100644 Resources/Public/CKEditor/Plugins/Code/lang/de.js delete mode 100644 Resources/Public/CKEditor/Plugins/Code/lang/en.js delete mode 100644 Resources/Public/CKEditor/Plugins/Code/plugin.js delete mode 100644 Resources/Public/CKEditor/Plugins/Code/styles/code.css delete mode 100644 Resources/Public/JavaScript/ckeditor5/plugin/syntax.js 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 f5caa14e6909e56a766fcd6db2b8c05dda937221..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2211 zcmbVOZHN?Q9N#{8+U1duZ)xH*CsNe2Gta#2?2K;W?cU3VdtK+oT_|+VJoC)%aI-Vx z%4L?12!QG)Uy=O_#(}>>g_xhd>VzCDvimv-&?;Knn zi_N#K{BSs&+oWN)6i0@ulX$h{QFJV}enZtmc$9>UP70QjVy_%M#xj#0-dAxlTs|LH_DQ10DqXJ4KL`=10JAqbBu{F6GT}O{OmZ?F)(Gu2QMQD`MRB3mjBcmE#3Y5CBDhVB85&6*xg>Q$mIW*tfjUavdg;h;+9crdVoe z-G!3Z66*vFnkZph6?q(t^N~w6pn+RBuk713My5Z!ux zivmh*F4xjAt1YEcOGOZNk5M-ogv^Q#^5Y)i21($SeN4K?sF|HjZ-Q`;+~ji($0@va z*wfNJL80sCUDs|#d7$YplTJrbRhh?zEXQyw!Q+v_#u<`9AxW_UFYthe04DQL(V(bF z;uAd7c)kwJxrSwq-v(9lP}X2llayPaH02BwqW=XOSTkL}geYNF2^9$EIR%z!g+WWZ zw(C>H)H-qI^K3dj;Jc<}(-*;DZx@s8PA8z6NB|)YYv$&1TGk0dY?Fok6L}7bqYQ)tf(n9{O>}AnM}}9)@;ie?V%-+V(E_f zgy!$&kVdr>#WVs$Nk4$XA`Q0fmJNV{fP}R5(j-Kl1)@Zuh1BSmmdn-N2V89&0Nc`i zi|QRO8JLsu190=y|0K$1n8@`z6Y zEDJg>s;a3fv_sU5o0;n6GOZU{6*8?XS}H__fDRWKAWTW9^TLX}8S|gM=G&(*Vkjqx?9izkbOg6JIpWO5HN!Z`@?4o(!U$ZWK z^uw;6_rLu7c(Kr7?|Ng^;r72rte;odrv@%Bo!r}dVdsm}f38`x`0OuBrq90p?mF>C z?&)vgrB$ao=C4`adEtxGJNhO@cb@-r?Y_2-eTTuqLlawia!Sw0%dfq@W69RlFC3V+ z{{!>t$(3!LpIqHNesRO`wiDM6^-i^a_|wRqp@Yjh&s;ci{=2IawfUc@ZzoW|5@12 j{&9Hi#kQ$q(|fjDo-%Jd`rBLa=rbbQ-JkiaYh>bIl-SsM 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 245c5ad6ed57f7ae18cda0a774afcacb9f3077a8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2639 zcmbVO3v3f*9Pc(@z&4}c1PPAw5Ffbfz1!YNVWZunNN3q9o2bawyYJR>?OnaQ(rsX< zMi7t)8AFV`<|`VB_y|l1$`&QaR6?TBU_>D?;#)8nkVL`n`T}(#vB~wm@9y`1|9{{A zR)v}xD#lJ4>u@+K0*(G=bjR##^eFUic6a}ZZetRScbN`H*?9XZay+$pqQg=8yBcn@ z+JbXMNsl{$tVf`;GoC23;3-5ru3Z(HxJt1t;xdIYFq#7>f3gl!v5Qf_8}Vj1JIM8X)1L(MV~mM&luQQgwbsQxdi3$OoT z0Hrnb~1g7$=Iw@9-h z$KFcOB1L7PL0wjruD?NrFwKj!Aad@%KvB!dzykjXmL*ZqjW|FFQ{$i=k_oLH#|mW- zeR@nckYVHRtY-(jeT!XWm)^&qNUNJU;tEsDrQWj1p}oDJG@tC%{| z4%2p15o7P@jvRe|$cnNmCRluF?=P>PhV}lR)cK#@=aMT$fz}Suq#$uSo=kPKr6K=bwd_8iwHr`Y?L#sb z|HZw8w4$R0^@r9`k0|QJ(GD6Abzh5xsv5UzY6EN%hJY1C#g6GonE<8RsO(~pA^KJq}B$nVffhIgO>muATBXbf(v5X+x zrr9TfOO_*oo975hVPt~iS=8Hr@(>cwL?~7e6v2&7tgLf+(%2MECJ`}E`}1@}LY#m+ zjrc3@1dz~5@h~m{xM)scl?&<1QDV4sWzu`m2+L<2%|&}z7|3W-80k<$)iKb(9=+z? z{SHUb*?_+`+_wCujb74Ud-aNKmGiBYbNZV@f&PzH?r-(?KD>JVS7clNgfMsRk$nw~ z;l2Hbx79oy4mCy(&pX0?w!TC8`8wCUM9-$V$2Xtadt&Jp@7>h?lbb$0z5U1Y#f~-f z&SO>OCG~qhnfT@Wp9Xs;ZL5R*(bA^I`O798{Jgkm%i#9Whu2oFJ2P5IC)es%f7|og z7w3{gLp!UBM)nm?E_r+F#3kn{j?Lcxc2CPyN9(1*gp_Ucck{lECs*H5WswG9@A;POZBBj)T9gT~u~v_k!Dc-+Z+E zqazKW5vQ9U+E_DCvUAJv#Z@B?+&)-&9|`Ew*ET(uey?}gkgw{G@?9IwE?9ZZhJop) zDtaQl{ZlIOj_;b^dU~mwX-!QVH*d9XR{f#D%~y6T|6*|E8s8g7S8p9({lczNNA-al zhsv()-TlB*1JCUJ`I|9Mj%;F2K09gL?f2jJ{;dIa-0FkJ|EO=UZYqAgb)&B))*@n4 v_PMrIJyzMb=jdBsyQ9m`pI@', - 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;