Skip to content

Commit 2c72e4c

Browse files
mhsdesignmhsdesign
committed
FEATURE: Serious ckeditor inlineMode isInline 
1 parent 2a0c238 commit 2c72e4c

File tree

9 files changed

+97
-7
lines changed

9 files changed

+97
-7
lines changed

‎.yarn/cache/@ckeditor-ckeditor5-editor-decoupled-patch-4948255868-bdaefd4a0b.zip

12.1 KB
Binary file not shown.

‎.yarnrc.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,5 @@ changesetIgnorePatterns:
3535
npmAlwaysAuth: false
3636
npmAuthToken: "${NPM_TOKEN-}"
3737
npmPublishAccess: "public"
38+
39+
patchFolder: "./patches"

‎Tests/IntegrationTests/SharedNodeTypesPackage/NodeTypes/Content/InlineHeadline.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
inlineEditable: true
2222
inline:
2323
editorOptions:
24-
autoparagraph: false
24+
isInline: true
2525
# we show it also in the inspector so we can easily see the raw text content
2626
inspector:
2727
group: 'default'

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"moment": "^2.20.1",
1111
"vfile-message": "^2.0.2",
1212
"isemail@3.2.0": "patch:isemail@npm:3.2.0#./patches/isemail-npm-3.2.0-browserified.patch",
13-
"react-codemirror2@7.2.1": "patch:react-codemirror2@npm:7.2.1#./patches/react-codemirror2-npm-7.2.1-browserified.patch"
13+
"react-codemirror2@7.2.1": "patch:react-codemirror2@npm:7.2.1#./patches/react-codemirror2-npm-7.2.1-browserified.patch",
14+
"@ckeditor/ckeditor5-editor-decoupled@16.0.0": "patch:@ckeditor/ckeditor5-editor-decoupled@npm:16.0.0#./patches/@ckeditor-ckeditor5-editor-decoupled-npm-16.0.0-inline-mode.patch"
1415
},
1516
"scripts": {
1617
"lint": "tsc --noemit && stylelint 'packages/*/src/**/*.css' && yarn eslint 'packages/*/src/**/*.{js,jsx,ts,tsx}'",

‎packages/neos-ui-ckeditor5-bindings/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@ckeditor/ckeditor5-alignment": "^16.0.0",
99
"@ckeditor/ckeditor5-basic-styles": "^16.0.0",
1010
"@ckeditor/ckeditor5-core": "^16.0.0",
11-
"@ckeditor/ckeditor5-editor-decoupled": "^16.0.0",
11+
"@ckeditor/ckeditor5-editor-decoupled": "16.0.0",
1212
"@ckeditor/ckeditor5-engine": "^16.0.0",
1313
"@ckeditor/ckeditor5-essentials": "^16.0.0",
1414
"@ckeditor/ckeditor5-heading": "^16.0.0",

‎packages/neos-ui-ckeditor5-bindings/src/ckEditorApi.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,16 @@ export const createEditor = store => async options => {
4444
propertyDomNode
4545
});
4646

47+
const isInline = editorOptions?.isInline === true ||
48+
propertyDomNode.tagName === 'SPAN' ||
49+
propertyDomNode.tagName === 'H1' ||
50+
propertyDomNode.tagName === 'H2' ||
51+
propertyDomNode.tagName === 'H3' ||
52+
propertyDomNode.tagName === 'H4' ||
53+
propertyDomNode.tagName === 'H5' ||
54+
propertyDomNode.tagName === 'H6' ||
55+
propertyDomNode.tagName === 'P';
56+
4757
class NeosEditor extends DecoupledEditor {
4858
constructor(...args) {
4959
super(...args);
@@ -55,7 +65,7 @@ export const createEditor = store => async options => {
5565
}
5666

5767
return NeosEditor
58-
.create(propertyDomNode, ckEditorConfig)
68+
.create(propertyDomNode, ckEditorConfig, /* this option is introduced via patch */ isInline)
5969
.then(editor => {
6070
editor.ui.focusTracker.on('change:isFocused', event => {
6171
if (event.source.isFocused) {

‎packages/neos-ui-ckeditor5-bindings/tests/manual/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ createInlineEditor({
3434
propertyDomNode: document.getElementById('input'),
3535
propertyName: 'test',
3636
editorOptions: {
37-
autoparagraph: false,
37+
isInline: true,
3838
formatting: {
3939
h1: true,
4040
h2: true,

‎patches/@ckeditor-ckeditor5-editor-decoupled-npm-16.0.0-inline-mode.patch

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
2+
fixes https://github.com/neos/neos-ui/issues/3545
3+
4+
diff --git a/src/decouplededitor.js b/src/decouplededitor.js
5+
index 807e531075bdbded8a34a15ddc5fe50370e0fd61..73afd7a95c8d6b9adf16fe48bf4774d0cfade361 100755
6+
--- a/src/decouplededitor.js
7+
+++ b/src/decouplededitor.js
8+
@@ -64,7 +64,7 @@ export default class DecoupledEditor extends Editor {
9+
* {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
10+
* @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
11+
*/
12+
- constructor( sourceElementOrData, config ) {
13+
+ constructor( sourceElementOrData, config, isInlineMode ) {
14+
super( config );
15+
16+
if ( isElement( sourceElementOrData ) ) {
17+
@@ -74,7 +74,25 @@ export default class DecoupledEditor extends Editor {
18+
19+
this.data.processor = new HtmlDataProcessor();
20+
21+
- this.model.document.createRoot();
22+
+ if (isInlineMode === false) {
23+
+ this.model.document.createRoot();
24+
+ } else {
25+
+ // patched ala https://github.com/ckeditor/ckeditor5/issues/762#issuecomment-370762111
26+
+
27+
+ // we define paragraph as root instead of $root. This will give us no outer tags out of the box and also disable the splitting
28+
+ this.model.document.createRoot('paragraph');
29+
+
30+
+ // it is enforced that the root cannot be splitted, but to make this obvious for other plugins we set isLimit
31+
+ this.on('ready', () => this.model.schema.extend('paragraph', {isLimit: true}));
32+
+
33+
+ // we redefine enter key to create soft breaks (<br>) instead of new paragraphs
34+
+ this.editing.view.document.on('enter', (evt, data) => {
35+
+ this.execute('shiftEnter');
36+
+ data.preventDefault();
37+
+ evt.stop();
38+
+ this.editing.view.scrollToTheSelection();
39+
+ }, {priority: 'high'});
40+
+ }
41+
42+
const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );
43+
const view = new DecoupledEditorUIView( this.locale, this.editing.view, {
44+
@@ -218,9 +236,10 @@ export default class DecoupledEditor extends Editor {
45+
* {@link module:editor-decoupled/decouplededitorui~DecoupledEditorUI#getEditableElement `editor.ui.getEditableElement()`}.
46+
*
47+
* @param {module:core/editor/editorconfig~EditorConfig} [config] The editor configuration.
48+
+ * @param {Boolean} isInlineMode Patched inline mode https://github.com/ckeditor/ckeditor5/issues/762#issuecomment-370762111
49+
* @returns {Promise} A promise resolved once the editor is ready. The promise resolves with the created editor instance.
50+
*/
51+
- static create( sourceElementOrData, config = {} ) {
52+
+ static create( sourceElementOrData, config = {}, isInlineMode ) {
53+
return new Promise( resolve => {
54+
const isHTMLElement = isElement( sourceElementOrData );
55+
56+
@@ -230,7 +249,7 @@ export default class DecoupledEditor extends Editor {
57+
'editor-wrong-element: This type of editor cannot be initialized inside <textarea> element.', null );
58+
}
59+
60+
- const editor = new this( sourceElementOrData, config );
61+
+ const editor = new this( sourceElementOrData, config, isInlineMode );
62+
63+
resolve(
64+
editor.initPlugins()

‎yarn.lock

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1494,7 +1494,7 @@ __metadata:
14941494
languageName: node
14951495
linkType: hard
14961496

1497-
"@ckeditor/ckeditor5-editor-decoupled@npm:^16.0.0":
1497+
"@ckeditor/ckeditor5-editor-decoupled@npm:16.0.0":
14981498
version: 16.0.0
14991499
resolution: "@ckeditor/ckeditor5-editor-decoupled@npm:16.0.0"
15001500
dependencies:
@@ -1507,6 +1507,19 @@ __metadata:
15071507
languageName: node
15081508
linkType: hard
15091509

1510+
"@ckeditor/ckeditor5-editor-decoupled@patch:@ckeditor/ckeditor5-editor-decoupled@npm:16.0.0#./patches/@ckeditor-ckeditor5-editor-decoupled-npm-16.0.0-inline-mode.patch::locator=root-workspace-0b6124%40workspace%3A.":
1511+
version: 16.0.0
1512+
resolution: "@ckeditor/ckeditor5-editor-decoupled@patch:@ckeditor/ckeditor5-editor-decoupled@npm%3A16.0.0#./patches/@ckeditor-ckeditor5-editor-decoupled-npm-16.0.0-inline-mode.patch::version=16.0.0&hash=29fcf6&locator=root-workspace-0b6124%40workspace%3A."
1513+
dependencies:
1514+
"@ckeditor/ckeditor5-core": ^16.0.0
1515+
"@ckeditor/ckeditor5-engine": ^16.0.0
1516+
"@ckeditor/ckeditor5-ui": ^16.0.0
1517+
"@ckeditor/ckeditor5-utils": ^16.0.0
1518+
lodash-es: ^4.17.10
1519+
checksum: bdaefd4a0b870ce741ee8fa0963560b4f1e37b14f0fbc12b910667a8993aad186f57e64128ba5a9058ab44d9deea8b0e82b9ec9ed88c1d24afd2c80fea4a8dc9
1520+
languageName: node
1521+
linkType: hard
1522+
15101523
"@ckeditor/ckeditor5-engine@npm:^16.0.0":
15111524
version: 16.0.0
15121525
resolution: "@ckeditor/ckeditor5-engine@npm:16.0.0"
@@ -2325,7 +2338,7 @@ __metadata:
23252338
"@ckeditor/ckeditor5-alignment": ^16.0.0
23262339
"@ckeditor/ckeditor5-basic-styles": ^16.0.0
23272340
"@ckeditor/ckeditor5-core": ^16.0.0
2328-
"@ckeditor/ckeditor5-editor-decoupled": ^16.0.0
2341+
"@ckeditor/ckeditor5-editor-decoupled": 16.0.0
23292342
"@ckeditor/ckeditor5-engine": ^16.0.0
23302343
"@ckeditor/ckeditor5-essentials": ^16.0.0
23312344
"@ckeditor/ckeditor5-heading": ^16.0.0

0 commit comments

Comments
 (0)