From 1cc5e118d80fc4a10823b305a96c04807fb21ffd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Fri, 8 Dec 2023 09:04:01 +0100 Subject: [PATCH 1/8] IT-5528 | Textarea instead of input --- src/ui/TextareaView.js | 18 ------------------ src/ui/mainformview.js | 24 +++++++++++++++++++++--- theme/mathform.css | 1 + 3 files changed, 22 insertions(+), 21 deletions(-) delete mode 100644 src/ui/TextareaView.js diff --git a/src/ui/TextareaView.js b/src/ui/TextareaView.js deleted file mode 100644 index 86b6a7a..0000000 --- a/src/ui/TextareaView.js +++ /dev/null @@ -1,18 +0,0 @@ -import InputView from '@ckeditor/ckeditor5-ui/src/input/inputview'; - -export default class TextareaView extends InputView { - constructor( locale ) { - super( locale ); - this.setTemplate( { - ...this.template, - tag: 'textarea', - attributes: { - ...this.template.attributes, - style: { - resize: 'both', - overflow: 'auto' - } - } - } ); - } -} diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js index de8cd40..8148b71 100644 --- a/src/ui/mainformview.js +++ b/src/ui/mainformview.js @@ -1,7 +1,7 @@ import { icons } from 'ckeditor5/src/core'; import { - ButtonView, createLabeledInputText, FocusCycler, LabelView, LabeledFieldView, - submitHandler, SwitchButtonView, View, ViewCollection + ButtonView, FocusCycler, LabelView, LabeledFieldView, + submitHandler, SwitchButtonView, View, ViewCollection, TextareaView } from 'ckeditor5/src/ui'; import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils'; import { extractDelimiters, hasDelimiters } from '../utils'; @@ -12,6 +12,24 @@ import '../../theme/mathform.css'; const { check: checkIcon, cancel: cancelIcon } = icons; +const createLabeledTextarea = ( labeledFieldView, viewUid, statusUid ) => { + const textareaView = new TextareaView( labeledFieldView.locale ); + textareaView.set( { + id: viewUid, + ariaDescribedById: statusUid, + resize: 'both' + } ); + textareaView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value ); + textareaView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value ); + textareaView.on( 'input', () => { + // UX: Make the error text disappear and disable the error indicator as the user + // starts fixing the errors. + labeledFieldView.errorText = null; + } ); + labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( textareaView ); + return textareaView; +}; + export default class MainFormView extends View { constructor( locale, @@ -166,7 +184,7 @@ export default class MainFormView extends View { const t = this.locale.t; // Create equation input - const mathInput = new LabeledFieldView( this.locale, createLabeledInputText ); + const mathInput = new LabeledFieldView( this.locale, createLabeledTextarea ); const fieldView = mathInput.fieldView; mathInput.infoText = t( 'Insert equation in TeX format.' ); diff --git a/theme/mathform.css b/theme/mathform.css index 11f27f2..8f75797 100644 --- a/theme/mathform.css +++ b/theme/mathform.css @@ -37,6 +37,7 @@ & .ck-input { width: 100%; + min-width: 0; } } } From 9bb53dd302deb01d281fdc80163c2a8ad6301c04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Mon, 11 Dec 2023 11:54:19 +0100 Subject: [PATCH 2/8] IT-5528 | Fix mathliveview handling value change --- sample/ckeditor.js | 3 +++ sample/index.html | 1 + src/ui/mathliveview.js | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/sample/ckeditor.js b/sample/ckeditor.js index 7917b1c..13b4224 100644 --- a/sample/ckeditor.js +++ b/sample/ckeditor.js @@ -35,6 +35,9 @@ ClassicEditor macros: { '\\test': '\\mathrel{\\char`≠}' } + }, + mathLiveSettings: { + enabled: true } }, plugins: [ diff --git a/sample/index.html b/sample/index.html index 3a76c14..43caef4 100644 --- a/sample/index.html +++ b/sample/index.html @@ -21,6 +21,7 @@ crossorigin="anonymous" onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});" > + diff --git a/src/ui/mathliveview.js b/src/ui/mathliveview.js index 8c13011..8f2b035 100644 --- a/src/ui/mathliveview.js +++ b/src/ui/mathliveview.js @@ -1,6 +1,6 @@ -import InputView from '@ckeditor/ckeditor5-ui/src/input/inputview'; +import { View } from 'ckeditor5/src/ui'; -export default class MathLiveView extends InputView { +export default class MathLiveView extends View { constructor( locale, { options, attributes } ) { super( locale ); this._options = options; From fd6a70b93f41a1a7a36a4f04db55514f24355867 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Mon, 11 Dec 2023 12:01:22 +0100 Subject: [PATCH 3/8] IT-5528 | add explanation --- src/ui/mainformview.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js index 8148b71..4404bff 100644 --- a/src/ui/mainformview.js +++ b/src/ui/mainformview.js @@ -12,6 +12,11 @@ import '../../theme/mathform.css'; const { check: checkIcon, cancel: cancelIcon } = icons; +/* + * copy from + * https://github.com/ckeditor/ckeditor5/blob/45e28c6030d590d142dbf319b36d9413a6ad6432/packages/ckeditor5-ui/src/labeledfield/utils.ts#L145 + * but enable resize + */ const createLabeledTextarea = ( labeledFieldView, viewUid, statusUid ) => { const textareaView = new TextareaView( labeledFieldView.locale ); textareaView.set( { From 63748339bfa4fc9a5065c0862a7351acf808b48c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Mon, 11 Dec 2023 12:04:38 +0100 Subject: [PATCH 4/8] IT-5528 | Add more explanations --- theme/mathform.css | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/mathform.css b/theme/mathform.css index 8f75797..f67d89e 100644 --- a/theme/mathform.css +++ b/theme/mathform.css @@ -37,6 +37,7 @@ & .ck-input { width: 100%; + /* without min-with, balloon-panel don't respect with of textarea */ min-width: 0; } } From 4e557e4243345ccd6db9c34e038b0928d2b59504 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Mon, 11 Dec 2023 12:05:51 +0100 Subject: [PATCH 5/8] Update theme/mathform.css --- theme/mathform.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/mathform.css b/theme/mathform.css index f67d89e..f6b5b23 100644 --- a/theme/mathform.css +++ b/theme/mathform.css @@ -37,7 +37,7 @@ & .ck-input { width: 100%; - /* without min-with, balloon-panel don't respect with of textarea */ + /* without min-with, balloon-panel doesn't respect width of textarea */ min-width: 0; } } From 5c55552385408902ce5ac2f90f481075a409d74d Mon Sep 17 00:00:00 2001 From: rogatty <7030884+rogatty@users.noreply.github.com> Date: Tue, 12 Dec 2023 18:37:50 +0100 Subject: [PATCH 6/8] IT-5528 | bump lint deps to support node 20 --- package.json | 4 +-- yarn.lock | 70 ++++++++++++++++++++++++++-------------------------- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index d5c1e03..a992b68 100644 --- a/package.json +++ b/package.json @@ -36,12 +36,12 @@ "@ckeditor/ckeditor5-theme-lark": "40.1.0", "@ckeditor/ckeditor5-upload": "40.1.0", "eslint": "^7.32.0", - "eslint-config-ckeditor5": "^5.1.1", + "eslint-config-ckeditor5": "^5.1.2", "http-server": "^14.1.0", "husky": "^4.2.5", "lint-staged": "^10.2.6", "stylelint": "^13.13.1", - "stylelint-config-ckeditor5": ">=5.1.1" + "stylelint-config-ckeditor5": ">=5.1.2" }, "engines": { "node": ">=18.0.0", diff --git a/yarn.lock b/yarn.lock index d32ec92..1b9638f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -547,14 +547,14 @@ resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz#2cbcf822bf3764c9658c4d2e568bd0c0cb748016" integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw== -"@es-joy/jsdoccomment@^0.36.1": - version "0.36.1" - resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.36.1.tgz#c37db40da36e4b848da5fd427a74bae3b004a30f" - integrity sha512-922xqFsTpHs6D0BUiG4toiyPOMc8/jafnWKxz1KWgS4XzKPy2qXf1Pe6UFuNSCQqt6tOuhAWXBNuuyUhJmw9Vg== +"@es-joy/jsdoccomment@^0.40.1": + version "0.40.1" + resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.40.1.tgz#13acd77fb372ed1c83b7355edd865a3b370c9ec4" + integrity sha512-YORCdZSusAlBrFpZ77pJjc5r1bQs5caPWtAu+WWmiSo+8XaUzseapVrfAtiRFbQWnrBxxLLEwF6f6ZG/UgCQCg== dependencies: - comment-parser "1.3.1" - esquery "^1.4.0" - jsdoc-type-pratt-parser "~3.1.0" + comment-parser "1.4.0" + esquery "^1.5.0" + jsdoc-type-pratt-parser "~4.0.0" "@esbuild/android-arm64@0.17.19": version "0.17.19" @@ -2149,10 +2149,10 @@ commander@^7.2.0: resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw== -comment-parser@1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b" - integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA== +comment-parser@1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.4.0.tgz#0f8c560f59698193854f12884c20c0e39a26d32c" + integrity sha512-QLyTNiZ2KDOibvFPlZ6ZngVsZ/0gYnE6uTXi5aoDg8ed3AkJAz4sEje3Y8a29hQ1s6A99MZXe47fLAXQ1rTqaw== commondir@^1.0.1: version "1.0.1" @@ -2875,23 +2875,23 @@ escape-string-regexp@^4.0.0: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== -eslint-config-ckeditor5@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/eslint-config-ckeditor5/-/eslint-config-ckeditor5-5.1.1.tgz#a1e4797048eda648cc911a99a447ea73a39009d9" - integrity sha512-5sgZuMFBKwo1Ac05qwnw1rw4wZBNss6KTpf6raV6XO97dUmTbwsuP2ure7+TxiSKV6ir727Abbz5I4gozC+/YQ== +eslint-config-ckeditor5@^5.1.2: + version "5.1.3" + resolved "https://registry.yarnpkg.com/eslint-config-ckeditor5/-/eslint-config-ckeditor5-5.1.3.tgz#2c8088842877080d548b728cee16f344cfea69f9" + integrity sha512-WAdDU+bIia165t69yPkHXHCQNkozDYTYR3zMIQA1uVANVH2o2yrJmKaG9mdJZG4oViEGTeimpSj74d6h0dEQIA== dependencies: "@typescript-eslint/eslint-plugin" "^5.26.0" "@typescript-eslint/parser" "^5.26.0" - eslint-plugin-ckeditor5-rules "^5.1.1" + eslint-plugin-ckeditor5-rules "^5.1.3" eslint-plugin-mocha "^7.0.0" typescript "^4.7.2" -eslint-plugin-ckeditor5-rules@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-ckeditor5-rules/-/eslint-plugin-ckeditor5-rules-5.1.1.tgz#087efff9f2e355a538918455024b4494cde7b37e" - integrity sha512-wVe+eaeDPP0l0gKbz2JZucxqhRZrMEAUiHrv7YK4/czOBn+I1CvdYmsD8TMyF4opCvuiYdZ7r3rCe06ZvZyrRg== +eslint-plugin-ckeditor5-rules@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/eslint-plugin-ckeditor5-rules/-/eslint-plugin-ckeditor5-rules-5.1.3.tgz#d52ad84128ed86ba14642a70df56e56f7be5f8c9" + integrity sha512-ismbG4LYLrWpj1kp9bWaIfhXFq0Cl5CJoV5bBRT0NtGyxl0IBaK7a8/nVg1wC+XxE/P+n1qJSTCdzmXST0EsWw== dependencies: - "@es-joy/jsdoccomment" "^0.36.1" + "@es-joy/jsdoccomment" "^0.40.1" "@typescript-eslint/parser" "^5.52.0" fs-extra "^11.1.1" upath "^2.0.1" @@ -2994,7 +2994,7 @@ esprima@^4.0.0: resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== -esquery@^1.4.0: +esquery@^1.4.0, esquery@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b" integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg== @@ -4322,10 +4322,10 @@ js-yaml@^3.13.1: argparse "^1.0.7" esprima "^4.0.0" -jsdoc-type-pratt-parser@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz#a4a56bdc6e82e5865ffd9febc5b1a227ff28e67e" - integrity sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw== +jsdoc-type-pratt-parser@~4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.0.0.tgz#136f0571a99c184d84ec84662c45c29ceff71114" + integrity sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ== jsesc@^1.3.0: version "1.3.0" @@ -6784,13 +6784,13 @@ stylehacks@^5.1.1: browserslist "^4.21.4" postcss-selector-parser "^6.0.4" -stylelint-config-ckeditor5@>=5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/stylelint-config-ckeditor5/-/stylelint-config-ckeditor5-5.1.1.tgz#4222dc46bf7a587ca6608baedf46f822a37ad0da" - integrity sha512-Uc5pM/HIFAdlHLZD0T1KxPp22ObIOWgftsMOP325RpX1V6G+/Dd0D+Skl17BzX3h2Mu+JsoZHuEL6SUYrf6Tkg== +stylelint-config-ckeditor5@>=5.1.2: + version "5.1.3" + resolved "https://registry.yarnpkg.com/stylelint-config-ckeditor5/-/stylelint-config-ckeditor5-5.1.3.tgz#d3b2af1bb023b5c327996e7db913ae63d0cd4152" + integrity sha512-utrya2cCbTvROc7MTOBCPTnzrbTZLa8rOJakExjVyHH5vhUGL7mZR2oJt/RuRE8NwYsnulVNNRjxwUnJolKKRw== dependencies: stylelint-config-recommended "^3.0.0" - stylelint-plugin-ckeditor5-rules "^5.1.1" + stylelint-plugin-ckeditor5-rules "^5.1.3" stylelint-config-ckeditor5@^2.0.1: version "2.0.1" @@ -6804,10 +6804,10 @@ stylelint-config-recommended@^3.0.0: resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657" integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ== -stylelint-plugin-ckeditor5-rules@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/stylelint-plugin-ckeditor5-rules/-/stylelint-plugin-ckeditor5-rules-5.1.1.tgz#9a785e03f844b9e0a180dad1bb6f50cd25803f89" - integrity sha512-fB+t9q5kqK1fkBdnVZLxulyKw1DU2Y3YOPmI14s41YRdPhO/sCrnRU2fj4q3MeRK/zYgn/Hvr0qTnLeWkmDpMA== +stylelint-plugin-ckeditor5-rules@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/stylelint-plugin-ckeditor5-rules/-/stylelint-plugin-ckeditor5-rules-5.1.3.tgz#8ecd9fff74f22a10d8ebe39e5cc83c24111b5d29" + integrity sha512-f0JdyKwpp3X4+ewIrShCuw2CDgr4fJ8jyV4XEOIUI6rgzkvjPoxrPfW3WQpMiR8qpPB4d+KpaSIehgmNsj1B9w== stylelint@^13.13.1: version "13.13.1" From bf6dc881bd30d4f9f058292caa819e1835f569bb Mon Sep 17 00:00:00 2001 From: rogatty <7030884+rogatty@users.noreply.github.com> Date: Tue, 12 Dec 2023 19:04:23 +0100 Subject: [PATCH 7/8] IT-5528 | remove unnecessary copy of upstream function --- src/ui/mainformview.js | 35 ++++++++++------------------------- 1 file changed, 10 insertions(+), 25 deletions(-) diff --git a/src/ui/mainformview.js b/src/ui/mainformview.js index 4404bff..a802a19 100644 --- a/src/ui/mainformview.js +++ b/src/ui/mainformview.js @@ -1,7 +1,14 @@ import { icons } from 'ckeditor5/src/core'; import { - ButtonView, FocusCycler, LabelView, LabeledFieldView, - submitHandler, SwitchButtonView, View, ViewCollection, TextareaView + ButtonView, + createLabeledTextarea, + FocusCycler, + LabeledFieldView, + LabelView, + submitHandler, + SwitchButtonView, + View, + ViewCollection } from 'ckeditor5/src/ui'; import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils'; import { extractDelimiters, hasDelimiters } from '../utils'; @@ -12,29 +19,6 @@ import '../../theme/mathform.css'; const { check: checkIcon, cancel: cancelIcon } = icons; -/* - * copy from - * https://github.com/ckeditor/ckeditor5/blob/45e28c6030d590d142dbf319b36d9413a6ad6432/packages/ckeditor5-ui/src/labeledfield/utils.ts#L145 - * but enable resize - */ -const createLabeledTextarea = ( labeledFieldView, viewUid, statusUid ) => { - const textareaView = new TextareaView( labeledFieldView.locale ); - textareaView.set( { - id: viewUid, - ariaDescribedById: statusUid, - resize: 'both' - } ); - textareaView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value ); - textareaView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value ); - textareaView.on( 'input', () => { - // UX: Make the error text disappear and disable the error indicator as the user - // starts fixing the errors. - labeledFieldView.errorText = null; - } ); - labeledFieldView.bind( 'isEmpty', 'isFocused', 'placeholder' ).to( textareaView ); - return textareaView; -}; - export default class MainFormView extends View { constructor( locale, @@ -191,6 +175,7 @@ export default class MainFormView extends View { // Create equation input const mathInput = new LabeledFieldView( this.locale, createLabeledTextarea ); const fieldView = mathInput.fieldView; + fieldView.set( 'resize', 'both' ); mathInput.infoText = t( 'Insert equation in TeX format.' ); const onInput = () => { From 6473821765fd12f7c48abb7aba05aeb78c356a2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Damian=20J=C3=B3=C5=BAwiak?= Date: Wed, 13 Dec 2023 11:34:36 +0100 Subject: [PATCH 8/8] IT-5528 | Disable min-witdh for testing --- theme/mathform.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/theme/mathform.css b/theme/mathform.css index f6b5b23..39dc920 100644 --- a/theme/mathform.css +++ b/theme/mathform.css @@ -36,9 +36,8 @@ padding: 16px; & .ck-input { + overflow: auto; width: 100%; - /* without min-with, balloon-panel doesn't respect width of textarea */ - min-width: 0; } } }