From f3ef67728148f0dffdab45a1114cc339f005d0ed Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 23 Aug 2023 10:20:55 +0200 Subject: [PATCH] Edit/Preview embeded items --- .../content-inline/embed-inline-command.js | 4 +- .../content-inline/embed-inline-editing.js | 55 ++++++++++++++--- .../embed/content-inline/embed-inline-ui.js | 3 + .../CKEditor/embed/content/embed-command.js | 4 +- .../CKEditor/embed/content/embed-editing.js | 59 ++++++++++++++++--- .../js/CKEditor/embed/content/embed-ui.js | 3 + 6 files changed, 109 insertions(+), 19 deletions(-) diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-command.js b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-command.js index fa9cd40a..df756244 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-command.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-command.js @@ -7,8 +7,8 @@ class IbexaEmbedContentInlineCommand extends Command { }); } - createEmbed(writer, { contentId, contentName }) { - return writer.createElement('embedInline', { contentId, contentName }); + createEmbed(writer, { contentId, contentName, locationId, versionNo, languageCodes }) { + return writer.createElement('embedInline', { contentId, contentName, locationId, versionNo, languageCodes }); } } diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-editing.js b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-editing.js index f59c98f3..4b512660 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-editing.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-editing.js @@ -6,12 +6,25 @@ import IbexaEmbedContentInlineCommand from './embed-inline-command'; import { findContent } from '../../services/content-service'; -const renderPreview = (title) => { +const renderPreview = (title, contentId) => { return ` - - - ${title}`; -}; + + + ${title} + + + `; +} class IbexaEmbedContentInlineEditing extends Plugin { static get requires() { @@ -25,7 +38,7 @@ class IbexaEmbedContentInlineEditing extends Plugin { isObject: true, isInline: true, allowWhere: '$text', - allowAttributes: ['contentId', 'contentName'], + allowAttributes: ['contentId', 'contentName', 'locationId', 'versionNo', 'languageCodes'], }); } @@ -57,13 +70,33 @@ class IbexaEmbedContentInlineEditing extends Plugin { }) .add((dispatcher) => dispatcher.on('attribute:contentName', (event, data, conversionApi) => { + const { editor } = this; const downcastWriter = conversionApi.writer; const modelElement = data.item; const viewElement = conversionApi.mapper.toViewElement(modelElement); const preview = downcastWriter.createUIElement('span', { class: 'ibexa-embed-content' }, function (domDocument) { + const contentId = modelElement.getAttribute('contentId'); + const contentName = modelElement.getAttribute('contentName'); + const locationId = modelElement.getAttribute('locationId'); + const versionNo = modelElement.getAttribute('versionNo'); + const languageCodes = modelElement.getAttribute('languageCodes'); const domElement = this.toDomElement(domDocument); - domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName')); + domElement.innerHTML = renderPreview(contentName, contentId); + + const itemActionsTriggerElement = domElement.querySelector('.ibexa-embedded-item__actions-menu-trigger-btn'); + const itemActionsMenuContainer = editor.sourceElement.parentNode.querySelector('.ibexa-embedded-item-actions .ibexa-multilevel-popup-menu'); + + domDocument.body.dispatchEvent(new CustomEvent('ibexa-embedded-item:create-dynamic-menu', { + detail: { + contentId, + locationId, + versionNo, + languageCodes, + menuTriggerElement: itemActionsTriggerElement, + menuContainer: itemActionsMenuContainer, + } + })); return domElement; }); @@ -106,9 +139,17 @@ class IbexaEmbedContentInlineEditing extends Plugin { findContent({ token, siteaccess, contentId }, (contents) => { const contentName = contents[0].TranslatedName; + const contentId = contents[0]._id; + const locationId = contents[0].MainLocation._href.split('/').pop(); + const versionNo = contents[0].currentVersionNo; + const languageCodes = contents[0].CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map((language) => language.languageCode); this.editor.model.change((writer) => { writer.setAttribute('contentName', contentName, modelElement); + writer.setAttribute('contentId', contentId, modelElement); + writer.setAttribute('locationId', locationId, modelElement); + writer.setAttribute('versionNo', versionNo, modelElement); + writer.setAttribute('languageCodes', languageCodes, modelElement); }); }); diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-ui.js b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-ui.js index 5ea9c66b..7d089739 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content-inline/embed-inline-ui.js @@ -17,6 +17,9 @@ class IbexaEmbedContentInlineUI extends IbexaEmbedBaseUI { return { contentId: items[0].ContentInfo.Content._id, contentName: items[0].ContentInfo.Content.TranslatedName, + locationId: items[0].id, + versionNo: items[0].ContentInfo.Content.currentVersionNo, + languageCodes: items[0].ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map((language) => language.languageCode), }; } } diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-command.js b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-command.js index 663459a9..b402c7c7 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-command.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-command.js @@ -9,8 +9,8 @@ class IbexaEmbedContentCommand extends Command { }); } - createEmbed(writer, { contentId, contentName }) { - return writer.createElement('embed', { contentId, contentName }); + createEmbed(writer, { contentId, contentName, locationId, versionNo, languageCodes }) { + return writer.createElement('embed', { contentId, contentName, locationId, versionNo, languageCodes }); } } diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-editing.js b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-editing.js index 9e8be02e..56462544 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-editing.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-editing.js @@ -6,12 +6,25 @@ import IbexaEmbedContentCommand from './embed-command'; import { findContent } from '../../services/content-service'; -const renderPreview = (title) => { +const renderPreview = (title, contentId) => { return ` - - - ${title}`; -}; + + + ${title} + + + `; +} class IbexaEmbedContentEditing extends Plugin { static get requires() { @@ -24,7 +37,7 @@ class IbexaEmbedContentEditing extends Plugin { schema.register('embed', { isObject: true, allowWhere: '$block', - allowAttributes: ['contentId', 'contentName'], + allowAttributes: ['contentId', 'contentName', 'locationId', 'versionNo', 'languageCodes'], }); } @@ -43,9 +56,11 @@ class IbexaEmbedContentEditing extends Plugin { class: 'ibexa-embed', }); const preview = downcastWriter.createUIElement('p', { class: 'ibexa-embed-content' }, function (domDocument) { + const contentId = modelElement.getAttribute('contentId'); + const contentName = modelElement.getAttribute('contentName'); const domElement = this.toDomElement(domDocument); - domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName')); + domElement.innerHTML = renderPreview(contentName, contentId); return domElement; }); @@ -61,9 +76,29 @@ class IbexaEmbedContentEditing extends Plugin { const modelElement = data.item; const viewElement = conversionApi.mapper.toViewElement(modelElement); const preview = downcastWriter.createUIElement('p', { class: 'ibexa-embed-content' }, function (domDocument) { + const contentId = modelElement.getAttribute('contentId'); + const contentName = modelElement.getAttribute('contentName'); + const locationId = modelElement.getAttribute('locationId'); + const versionNo = modelElement.getAttribute('versionNo'); + const languageCodes = modelElement.getAttribute('languageCodes'); const domElement = this.toDomElement(domDocument); - domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName')); + domElement.innerHTML = renderPreview(contentName); + + const itemActionsTriggerElement = domElement.querySelector('.ibexa-embedded-item-actions__menu-trigger-btn'); + const itemActionsMenuContainer = editor.sourceElement.parentNode.querySelector('.ibexa-embedded-item-actions .ibexa-multilevel-popup-menu'); + + domDocument.body.dispatchEvent(new CustomEvent('ibexa-embedded-item:create-dynamic-menu', { + detail: { + contentId, + locationId, + versionNo, + languageCodes, + menuTriggerElement: itemActionsTriggerElement, + menuContainer: itemActionsMenuContainer, + } + })); + return domElement; }); @@ -106,9 +141,17 @@ class IbexaEmbedContentEditing extends Plugin { findContent({ token, siteaccess, contentId }, (contents) => { const contentName = contents[0].TranslatedName; + const contentId = contents[0]._id; + const locationId = contents[0].MainLocation._href.split('/').pop(); + const versionNo = contents[0].currentVersionNo; + const languageCodes = contents[0].CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map((language) => language.languageCode); this.editor.model.change((writer) => { writer.setAttribute('contentName', contentName, modelElement); + writer.setAttribute('contentId', contentId, modelElement); + writer.setAttribute('locationId', locationId, modelElement); + writer.setAttribute('versionNo', versionNo, modelElement); + writer.setAttribute('languageCodes', languageCodes, modelElement); }); }); diff --git a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-ui.js b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-ui.js index 46062b93..a0e1fb92 100644 --- a/src/bundle/Resources/public/js/CKEditor/embed/content/embed-ui.js +++ b/src/bundle/Resources/public/js/CKEditor/embed/content/embed-ui.js @@ -17,6 +17,9 @@ class IbexaEmbedContentUI extends IbexaEmbedBaseUI { return { contentId: items[0].ContentInfo.Content._id, contentName: items[0].ContentInfo.Content.TranslatedName, + locationId: items[0].id, + versionNo: items[0].ContentInfo.Content.currentVersionNo, + languageCodes: items[0].ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map((language) => language.languageCode), }; } }