From 272500aa71cae82e4f50f658f5ac7f10125c08f7 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Tue, 5 Mar 2024 14:54:40 +0100 Subject: [PATCH 1/5] IBX-7762: Fixed anchor in list --- .../js/CKEditor/anchor/anchor-editing.js | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js index ab928de6..a4c9103c 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js @@ -17,6 +17,57 @@ class IbexaAnchorEditing extends Plugin { key: 'id', }, }); + + this.editor.conversion.for('dataDowncast').add((dispatcher) => { + dispatcher.on('attribute:anchor:listItem', (event, data, conversionApi) => { + if (data.attributeKey !== 'anchor' || data.attributeNewValue === '') { + return; + } + + const viewItem = conversionApi.mapper.toViewElement(data.item); + const previousElement = viewItem.parent.previousSibling; + + conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + conversionApi.writer.removeAttribute('id', viewItem); + + if (previousElement?.name === viewItem.parent.name) { + conversionApi.writer.mergeContainers(conversionApi.writer.createPositionAfter(previousElement)); + } + }); + }); + + this.editor.conversion.for('editingDowncast').add((dispatcher) => { + dispatcher.on('attribute:anchor:listItem', (event, data, conversionApi) => { + if (data.attributeKey !== 'anchor' || data.attributeNewValue === '') { + return; + } + + const viewItem = conversionApi.mapper.toViewElement(data.item); + const previousElement = viewItem.parent.previousSibling; + const nextElement = viewItem.parent.nextSibling; + + conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + conversionApi.writer.removeAttribute('id', viewItem); + + if (previousElement?.name === viewItem.parent.name) { + conversionApi.writer.mergeContainers(conversionApi.writer.createPositionAfter(previousElement)); + } + + if (nextElement?.name === viewItem.parent.name) { + conversionApi.writer.mergeContainers(conversionApi.writer.createPositionBefore(nextElement)); + } + }); + }); + + this.editor.conversion.for('upcast').add((dispatcher) => { + dispatcher.on('element:li', (event, data, conversionApi) => { + const listParent = data.viewItem.parent; + const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore; + const classes = listParent.getAttribute('id'); + + conversionApi.writer.setAttribute('anchor', classes, listItem); + }); + }); } init() { From 5967c1d73e7e7befd850019fd35a2029812c0ca9 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Thu, 7 Mar 2024 15:07:47 +0100 Subject: [PATCH 2/5] after review --- .../js/CKEditor/anchor/anchor-editing.js | 18 +++++++++++---- .../public/js/CKEditor/anchor/anchor-ui.js | 23 +++++++++++++++++++ 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js index a4c9103c..2fe20972 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js @@ -20,14 +20,19 @@ class IbexaAnchorEditing extends Plugin { this.editor.conversion.for('dataDowncast').add((dispatcher) => { dispatcher.on('attribute:anchor:listItem', (event, data, conversionApi) => { - if (data.attributeKey !== 'anchor' || data.attributeNewValue === '') { + if (data.attributeKey !== 'anchor') { return; } const viewItem = conversionApi.mapper.toViewElement(data.item); const previousElement = viewItem.parent.previousSibling; - conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + if (data.attributeNewValue) { + conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + } else { + conversionApi.writer.removeAttribute('id', viewItem.parent); + } + conversionApi.writer.removeAttribute('id', viewItem); if (previousElement?.name === viewItem.parent.name) { @@ -38,7 +43,7 @@ class IbexaAnchorEditing extends Plugin { this.editor.conversion.for('editingDowncast').add((dispatcher) => { dispatcher.on('attribute:anchor:listItem', (event, data, conversionApi) => { - if (data.attributeKey !== 'anchor' || data.attributeNewValue === '') { + if (data.attributeKey !== 'anchor') { return; } @@ -46,7 +51,12 @@ class IbexaAnchorEditing extends Plugin { const previousElement = viewItem.parent.previousSibling; const nextElement = viewItem.parent.nextSibling; - conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + if (data.attributeNewValue) { + conversionApi.writer.setAttribute('id', data.attributeNewValue, viewItem.parent); + } else { + conversionApi.writer.removeAttribute('id', viewItem.parent); + } + conversionApi.writer.removeAttribute('id', viewItem); if (previousElement?.name === viewItem.parent.name) { diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js index 341a770b..8c88a4ce 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js @@ -21,6 +21,23 @@ class IbexaAnchorUI extends Plugin { return this.editor.model.document.selection.getSelectedElement() || this.editor.model.document.selection.anchor.parent; } + removeAnchorFromSiblings(modelElement, writer) { + let previousSibling = modelElement.previousSibling; + let nextSibling = modelElement.nextSibling; + + while (previousSibling?.name === 'listItem') { + writer.removeAttribute('anchor', previousSibling); + + previousSibling = previousSibling.previousSibling; + } + + while (nextSibling?.name === 'listItem') { + writer.removeAttribute('anchor', nextSibling); + + nextSibling = nextSibling.nextSibling; + } + } + createFormView() { const formView = new IbexaAnchorFormView({ locale: this.editor.locale }); @@ -56,9 +73,15 @@ class IbexaAnchorUI extends Plugin { this.listenTo(formView, 'remove-anchor', () => { const modelElement = this.getModelElement(); + const isListItem = modelElement.name === 'listItem'; + console.log(modelElement); this.editor.model.change((writer) => { writer.removeAttribute('anchor', modelElement); + + if (isListItem) { + this.removeAnchorFromSiblings(modelElement, writer); + } }); this.hideForm(); From 279ed75cb5b035779d56e9b7b8a30600d9231516 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Thu, 7 Mar 2024 15:24:43 +0100 Subject: [PATCH 3/5] CI --- src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js index 8c88a4ce..74116aa1 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js @@ -22,8 +22,8 @@ class IbexaAnchorUI extends Plugin { } removeAnchorFromSiblings(modelElement, writer) { - let previousSibling = modelElement.previousSibling; - let nextSibling = modelElement.nextSibling; + let { previousSibling } = modelElement; + let { nextSibling } = modelElement; while (previousSibling?.name === 'listItem') { writer.removeAttribute('anchor', previousSibling); @@ -74,7 +74,6 @@ class IbexaAnchorUI extends Plugin { this.listenTo(formView, 'remove-anchor', () => { const modelElement = this.getModelElement(); const isListItem = modelElement.name === 'listItem'; - console.log(modelElement); this.editor.model.change((writer) => { writer.removeAttribute('anchor', modelElement); From b095e935a20aba596017d042bae4a1e31902be05 Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Mon, 11 Mar 2024 12:45:07 +0100 Subject: [PATCH 4/5] after review --- .../Resources/public/js/CKEditor/anchor/anchor-editing.js | 6 +++--- src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js index 2fe20972..0806b736 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-editing.js @@ -72,10 +72,10 @@ class IbexaAnchorEditing extends Plugin { this.editor.conversion.for('upcast').add((dispatcher) => { dispatcher.on('element:li', (event, data, conversionApi) => { const listParent = data.viewItem.parent; - const listItem = data.modelRange.start.nodeAfter || data.modelRange.end.nodeBefore; - const classes = listParent.getAttribute('id'); + const listItem = data.modelRange.start.nodeAfter ?? data.modelRange.end.nodeBefore; + const id = listParent.getAttribute('id'); - conversionApi.writer.setAttribute('anchor', classes, listItem); + conversionApi.writer.setAttribute('anchor', id, listItem); }); }); } diff --git a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js index 74116aa1..e09c90bd 100644 --- a/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/anchor/anchor-ui.js @@ -22,8 +22,7 @@ class IbexaAnchorUI extends Plugin { } removeAnchorFromSiblings(modelElement, writer) { - let { previousSibling } = modelElement; - let { nextSibling } = modelElement; + let { previousSibling, nextSibling } = modelElement; while (previousSibling?.name === 'listItem') { writer.removeAttribute('anchor', previousSibling); From 9fa78fddfff3aa9c5942e4ef6724048f26c6db2a Mon Sep 17 00:00:00 2001 From: Dariusz Szut Date: Thu, 14 Mar 2024 11:04:19 +0100 Subject: [PATCH 5/5] after QA --- src/bundle/Resources/public/scss/_general.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss index ff1980f4..f3b78f3f 100644 --- a/src/bundle/Resources/public/scss/_general.scss +++ b/src/bundle/Resources/public/scss/_general.scss @@ -3,7 +3,7 @@ border: calculateRem(1px) solid $ibexa-color-dark-200; border-radius: $ibexa-border-radius; - .ck-content { + .ck.ck-content { min-height: calculateRem(100px); padding: 0 calculateRem(24px); }