Edit/Preview embeded items

ibexa · Aug 23, 2023 · f227b98 · f227b98
1 parent b9e1fa0
commit f227b98
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 20 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
@@ -7,8 +7,8 @@ class IbexaEmbedContentInlineCommand extends Command {
         });
     }
 
-    createEmbed(writer, { contentId, contentName }) {
-        return writer.createElement('embedInline', { contentId, contentName });
+    createEmbed(writer, { contentId, contentName, locationId, languagesCode }) {
+        return writer.createElement('embedInline', { contentId, contentName, locationId, languagesCode });
     }
 }
 

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
@@ -6,12 +6,25 @@ import IbexaEmbedContentInlineCommand from './embed-inline-command';
 
 import { findContent } from '../../services/content-service';
 
-const renderPreview = (title) => {
+const renderPreview = (title, contentId) => {
     return `<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--secondary">
-        <use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
-    </svg>
-    <span class="ibexa-embed-content__title">${title}</span>`;
-};
+                <use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
+            </svg>
+            <span
+                class="ibexa-embed-content__title"
+                data-ibexa-update-content-id="${contentId}"
+                data-ibexa-update-source-data-path="Content.Name">${title}</span>
+            <span>
+                <button
+                    type="button"
+                    class="btn ibexa-btn ibexa-btn--small ibexa-btn--ghost ibexa-btn--no-text ibexa-embed-content__actions-menu-trigger-btn"
+                >
+                    <svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
+                        <use xlink:href="${window.ibexa.helpers.icon.getIconPath('options')}"></use>
+                    </svg>
+                </button>
+            </span>`;
+}
 
 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', 'languagesCode'],
         });
     }
 
@@ -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 languagesCode = modelElement.getAttribute('languagesCode');
                         const domElement = this.toDomElement(domDocument);
 
-                        domElement.innerHTML = renderPreview(modelElement.getAttribute('contentName'));
+                        domElement.innerHTML = renderPreview(contentName, contentId);
+
+                        const itemActionsTriggerElement = domElement.querySelector('.ibexa-embed-content__actions-menu-trigger-btn');
+                        const itemActionsMenuContainer = editor.sourceElement.parentNode.querySelector('.ibexa-embedded-item-actions-menu-container .ibexa-multilevel-popup-menu');
+
+                        domDocument.body.dispatchEvent(new CustomEvent('ibexa-embedded-item:create-dynamic-menu', {
+                            detail: {
+                                contentId,
+                                locationId,
+                                languagesCode,
+                                multilevelPopupMenuConfig: {
+                                    container: itemActionsMenuContainer,
+                                    triggerElement: itemActionsTriggerElement
+                                }
+                            }
+                        }));
 
                         return domElement;
                     });
@@ -106,9 +139,15 @@ 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 languagesCode = 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('languagesCode', languagesCode, 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
@@ -17,6 +17,8 @@ class IbexaEmbedContentInlineUI extends IbexaEmbedBaseUI {
         return {
             contentId: items[0].ContentInfo.Content._id,
             contentName: items[0].ContentInfo.Content.TranslatedName,
+            locationId: items[0].id,
+            languagesCode: 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
@@ -9,8 +9,8 @@ class IbexaEmbedContentCommand extends Command {
         });
     }
 
-    createEmbed(writer, { contentId, contentName }) {
-        return writer.createElement('embed', { contentId, contentName });
+    createEmbed(writer, { contentId, contentName, locationId, languagesCode }) {
+        return writer.createElement('embed', { contentId, contentName, locationId, languagesCode });
     }
 }
 

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
@@ -6,12 +6,25 @@ import IbexaEmbedContentCommand from './embed-command';
 
 import { findContent } from '../../services/content-service';
 
-const renderPreview = (title) => {
+const renderPreview = (title, contentId) => {
     return `<svg class="ibexa-icon ibexa-icon--medium ibexa-icon--secondary">
-        <use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
-    </svg>
-    <span class="ibexa-embed-content__title">${title}</span>`;
-};
+                <use xlink:href="${window.ibexa.helpers.icon.getIconPath('embed')}"></use>
+            </svg>
+            <span
+                class="ibexa-embed-content__title"
+                data-ibexa-update-content-id="${contentId}"
+                data-ibexa-update-source-data-path="Content.Name">${title}</span>
+            <span>
+                <button 
+                    type="button"
+                    class="btn ibexa-btn ibexa-btn--small ibexa-btn--ghost ibexa-btn--no-text ibexa-embed-content__actions-menu-trigger-btn"
+                >
+                    <svg class="ibexa-icon ibexa-icon--small ibexa-icon--secondary">
+                        <use xlink:href="${window.ibexa.helpers.icon.getIconPath('options')}"></use>
+                    </svg>
+                </button>
+            </span>`;
+}
 
 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', 'languagesCode'],
         });
     }
 
@@ -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;
                     });
@@ -106,9 +121,15 @@ 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 languagesCode = 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('languagesCode', languagesCode, 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
@@ -17,6 +17,8 @@ class IbexaEmbedContentUI extends IbexaEmbedBaseUI {
         return {
             contentId: items[0].ContentInfo.Content._id,
             contentName: items[0].ContentInfo.Content.TranslatedName,
+            locationId: items[0].id,
+            languagesCode: items[0].ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map((language) => language.languageCode),
         };
     }
 }

diff --git a/src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-command.js b/src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-command.js
@@ -9,8 +9,8 @@ class IbexaEmbedImageCommand extends Command {
         });
     }
 
-    createEmbed(writer, { contentId, size }) {
-        return writer.createElement('embedImage', { contentId, size });
+    createEmbed(writer, { contentId, locationId, languagesCode, size }) {
+        return writer.createElement('embedImage', { contentId, locationId, languagesCode, size });
     }
 }