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..d55d60d2 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,11 +6,24 @@ 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 { @@ -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,37 @@ 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 +143,18 @@ class IbexaEmbedContentInlineEditing extends Plugin { findContent({ token, siteaccess, contentId }, (contents) => { const contentName = contents[0].TranslatedName; + 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..24454a23 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,11 @@ 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..d7048cbb 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,11 +6,24 @@ 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 { @@ -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; }); @@ -57,13 +72,37 @@ class IbexaEmbedContentEditing 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('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 +145,18 @@ class IbexaEmbedContentEditing extends Plugin { findContent({ token, siteaccess, contentId }, (contents) => { const contentName = contents[0].TranslatedName; + 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..85c212d1 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,11 @@ 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, + ), }; } }