IBX-9981: Added go to and edit image (#264)

Author: dew326

src/bundle/Resources/public/js/CKEditor/core/base-ckeditor.js

@@ -203,9 +203,13 @@ const VIEWPORT_TOP_OFFSET_DISTRACTION_FREE_MODE = 0;
                 embedImage: {
                     toolbar: [
                         'imageVarations',
+                        '|',
                         'ibexaBlockLeftAlignment',
                         'ibexaBlockCenterAlignment',
                         'ibexaBlockRightAlignment',
+                        '|',
+                        'imageGoTo',
+                        'imageGoToEdit',
                         'ibexaRemoveElement',
                     ],
                 },

src/bundle/Resources/public/js/CKEditor/embed/embed.js

@@ -8,6 +8,8 @@ import IbexaEmbedContentInlineUI from './content-inline/embed-inline-ui';
 import IbexaEmbedImageUI from './image/embed-image-ui';
 import IbexaEmbedImageToolbar from './image/embed-image-toolbar';
 import IbexaEmbedImageVariationsUI from './image/embed-image-variations-ui';
+import IbexaEmbedImageGoToUI from './image/embed-image-go-to-ui';
+import IbexaEmbedImageGoToEditUI from './image/embed-image-go-to-edit-ui';
 
 class IbexaEmbed extends Plugin {
     static get requires() {
@@ -20,6 +22,8 @@ class IbexaEmbed extends Plugin {
             IbexaEmbedImageUI,
             IbexaEmbedImageToolbar,
             IbexaEmbedImageVariationsUI,
+            IbexaEmbedImageGoToUI,
+            IbexaEmbedImageGoToEditUI,
         ];
     }
 }

src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-editing.js

@@ -102,9 +102,14 @@ class IbexaEmbedImageEditing extends Plugin {
                         'data-ezview': 'embed',
                         class: CONTAINER_CLASS,
                     });
+                    const emdedItemsUpdateChannel = new BroadcastChannel('ibexa-emded-item-live-update');
 
                     this.loadImagePreview(modelElement);
 
+                    emdedItemsUpdateChannel.addEventListener('message', () => {
+                        this.loadImagePreview(modelElement);
+                    });
+
                     return toWidget(container, downcastWriter);
                 },
             })

src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-go-to-edit-ui.js

@@ -0,0 +1,84 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import Model from '@ckeditor/ckeditor5-ui/src/model';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+
+import IbexaButtonView from '../../common/button-view/button-view';
+import { findContent } from '../../services/content-service';
+
+const { Translator, ibexa } = window;
+
+class IbexaEmbedImageGoToEditUI extends Plugin {
+    constructor(props) {
+        super(props);
+    }
+
+    editContent({ contentId, languageCode }) {
+        const editEmbeddedItemForm = document.querySelector('[name="embedded_item_edit"]');
+
+        const contentInfoInput = editEmbeddedItemForm.querySelector('[name="embedded_item_edit[content_info]"]');
+        const languageInput = editEmbeddedItemForm.querySelector(`[name="embedded_item_edit[language]"][value="${languageCode}"]`);
+
+        contentInfoInput.value = contentId;
+        languageInput.click();
+
+        editEmbeddedItemForm.submit();
+    }
+
+    init() {
+        this.editor.ui.componentFactory.add('imageGoToEdit', (locale) => {
+            const dropdownView = createDropdown(locale, IbexaButtonView);
+            const { buttonView } = dropdownView;
+
+            buttonView.set({
+                label: Translator.trans(/*@Desc("Edit")*/ 'image_btn.edit.label', {}, 'ck_editor'),
+                icon: ibexa.helpers.icon.getIconPath('edit'),
+                tooltip: true,
+                isEnabled: true,
+            });
+
+            this.listenTo(buttonView, 'execute', () => {
+                const selectedElement = this.editor.model.document.selection.getSelectedElement();
+                const contentId = selectedElement.getAttribute('contentId');
+                const token = document.querySelector('meta[name="CSRF-Token"]').content;
+                const siteaccess = document.querySelector('meta[name="SiteAccess"]').content;
+
+                findContent({ token, siteaccess, contentId }, (contents) => {
+                    const languages = contents[0].CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language;
+                    const itemDefinitions = new Collection();
+
+                    languages.forEach((language) => {
+                        itemDefinitions.add({
+                            type: 'button',
+                            model: new Model({
+                                label: window.ibexa.adminUiConfig.languages.mappings[language.languageCode].name,
+                                value: language.languageCode,
+                                withText: true,
+                            }),
+                        });
+                    });
+
+                    if (languages.length === 1) {
+                        this.editContent({ contentId, languageCode: languages[0].languageCode });
+                    } else {
+                        dropdownView.panelView.children.clear();
+
+                        addListToDropdown(dropdownView, itemDefinitions);
+
+                        this.listenTo(dropdownView, 'execute', (event) => {
+                            const languageCode = event.source.value;
+
+                            this.editContent({ contentId, languageCode });
+                        });
+
+                        dropdownView.isOpen = true;
+                    }
+                });
+            });
+
+            return dropdownView;
+        });
+    }
+}
+
+export default IbexaEmbedImageGoToEditUI;

src/bundle/Resources/public/js/CKEditor/embed/image/embed-image-go-to-ui.js

@@ -0,0 +1,40 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import IbexaButtonView from '../../common/button-view/button-view';
+
+const { Translator, Routing, ibexa } = window;
+const metaLanguageCode = document.querySelector('meta[name="LanguageCode"]')?.content;
+const previewLanguageCode = metaLanguageCode ?? ibexa.adminUiConfig.languages.priority[0];
+
+class IbexaEmbedImageGoToUI extends Plugin {
+    constructor(props) {
+        super(props);
+    }
+
+    init() {
+        this.editor.ui.componentFactory.add('imageGoTo', (locale) => {
+            const buttonView = new IbexaButtonView(locale);
+
+            buttonView.set({
+                label: Translator.trans(/*@Desc("Go to image")*/ 'image_btn.go_to.label', {}, 'ck_editor'),
+                icon: ibexa.helpers.icon.getIconPath('file-arrow'),
+                tooltip: true,
+            });
+
+            this.listenTo(buttonView, 'execute', () => {
+                const modelElement = this.editor.model.document.selection.getSelectedElement();
+
+                const route = Routing.generate('ibexa.content.translation.view', {
+                    contentId: modelElement.getAttribute('contentId'),
+                    languageCode: previewLanguageCode,
+                });
+
+                window.open(route);
+            });
+
+            return buttonView;
+        });
+    }
+}
+
+export default IbexaEmbedImageGoToUI;

src/bundle/Resources/translations/ck_editor.en.xliff

@@ -81,6 +81,16 @@
         <target state="new">Formatted</target>
         <note>key: formatted_btn.label</note>
       </trans-unit>
+      <trans-unit id="590b85bd86144a6c872dcff6475c451319782fc7" resname="image_btn.edit.label">
+        <source>Edit</source>
+        <target state="new">Edit</target>
+        <note>key: image_btn.edit.label</note>
+      </trans-unit>
+      <trans-unit id="f0e038e4fa3206fe5b1c9b6366f88d335409cb1c" resname="image_btn.go_to.label">
+        <source>Go to image</source>
+        <target state="new">Go to image</target>
+        <note>key: image_btn.go_to.label</note>
+      </trans-unit>
       <trans-unit id="13cd849924dc9b21defaf1d6905241a4eb74e71a" resname="image_btn.label">
         <source>Image</source>
         <target state="new">Image</target>