@gudhub/ssg-web-components-library 1.0.99 → 1.0.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.99",
+  "version": "1.0.101",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/edit-mode/edit-mode.js

@@ -1,10 +1,8 @@
 import html from './edit-mode.html';
 import './edit-mode.scss';
-
 import './gudhub-login-popup.scss';
 
 import { EditModeNotifications } from './EditModeNotifications.webcomponent.js';
-
 import { isUndefined } from './Helpers.js';
 
 class EditMode extends GHComponent {
@@ -13,6 +11,9 @@ class EditMode extends GHComponent {
 
         this.notificationComponentRendered = false;
         this.editModeActive = false;
+
+        this._arrayControlsCleanup = null;
+        this._ghIdClickCleanup = null;
     }
 
     onServerRender() {
@@ -23,16 +24,17 @@ class EditMode extends GHComponent {
         if (!document.querySelector('script#gudhub-library')) {
             let gudhubLibraryScript = document.createElement('script');
             gudhubLibraryScript.id = 'gudhub-library';
-            gudhubLibraryScript.setAttribute('src', 'https://unpkg.com/@gudhub/core@1.2.0/umd/library.min.js');
+            gudhubLibraryScript.setAttribute('src', 'https://unpkg.com/@gudhub/core/umd/library.min.js');
             document.body.append(gudhubLibraryScript);
         }
+
         this.editModeActive = !this.editModeActive;
 
-        if(this.editModeActive === true && this.notificationComponentRendered === false) {
+        if (this.editModeActive === true && this.notificationComponentRendered === false) {
             this.renderNotificationsComponent();
         }
 
-        if(this.editModeActive) {
+        if (this.editModeActive) {
             this.initEditors();
         } else {
             this.disableEditors();
@@ -40,64 +42,59 @@ class EditMode extends GHComponent {
     }
 
     disableEditors() {
+        if (this._arrayControlsCleanup) {
+            this._arrayControlsCleanup();
+            this._arrayControlsCleanup = null;
+        }
+
+        if (this._ghIdClickCleanup) {
+            this._ghIdClickCleanup();
+            this._ghIdClickCleanup = null;
+        }
+
         const body = document.getElementsByTagName('body')[0];
         body.classList.remove('edit-mode-enabled');
+
         const elementsToEdit = document.querySelectorAll('[gh-id]');
-        if(elementsToEdit.length) {
+        if (elementsToEdit.length) {
             elementsToEdit.forEach(element => {
-                if(element.classList.contains('mce-content-body')) {
+                if (element.classList.contains('mce-content-body')) {
                     tinymce.get(element.id).destroy();
                 }
                 element.replaceWith(element.cloneNode(true));
-            })
+            });
         }
     }
 
     initEditors() {
         const body = document.getElementsByTagName('body')[0];
         body.classList.add('edit-mode-enabled');
+
         const showLoginPopup = () => this.showLoginPopup();
         const initGudHub = (auth_key) => this.initGudHub(auth_key);
-        if(!document.querySelector('script[id="tinymce_script"]')) {
-            const script = document.createElement('script');
 
+        if (!document.querySelector('script[id="tinymce_script"]')) {
+            const script = document.createElement('script');
             script.setAttribute('src', 'https://cdn.tiny.cloud/1/ts08yt1lknwldsqs5d4iohomcmpfd2wolmcy7lao74r3ita3/tinymce/6/tinymce.min.js');
             script.setAttribute('referrerpolicy', 'origin');
             script.setAttribute('id', 'tinymce_script');
-
             document.querySelector('head').appendChild(script);
         }
 
-        return new Promise(async (resolve) => {
-            const elementsToEdit = document.querySelectorAll('[gh-id]');
-            if(elementsToEdit.length) {
-                    elementsToEdit.forEach(element => {
-                        element.addEventListener('click', e => {
-                            if(isUndefined(tinymce)) {
-                                alert('TinyMCE not ready yet')
-                            } else if(element.getAttribute('contenteditable') != true) {
-                                const parentGhComponent = (() => {
-                                    let parentElement = element.parentElement;
-                                    while (parentElement) {
-                                        if (parentElement.tagName.includes('-')) {
-                                            return parentElement;
-                                        }
-                                        parentElement = parentElement.parentElement;
-                                    }
-
-                                    return null;
-                                })()
-                                initTinyMce(element, parentGhComponent);
-                            }
-                        });
-                    })
-            }
-            resolve();
-        });
+        if (!this._arrayControlsCleanup) {
+            this._arrayControlsCleanup = initArrayItemControls();
+        }
+
+        if (!this._ghIdClickCleanup) {
+            this._ghIdClickCleanup = initGhIdClickDelegation();
+        }
+
+        return Promise.resolve();
 
         function initTinyMce(element, parentGhComponent) {
             const self = parentGhComponent;
-            let editorInstance = tinymce.init({
+
+            tinymce.init({
                 target: element,
                 plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
                 toolbar_mode: 'floating',
@@ -112,39 +109,55 @@ class EditMode extends GHComponent {
                 setup: (editor) => {
                     editor.on('init', e => {
                         e.target.focus();
-                    })
+                    });
+
+                    editor.on('remove', () => {
+                        element.classList.remove('gh-id-editing');
+                    });
+
                     editor.ui.registry.addButton('saveButton', {
                         text: 'Save',
                         onAction: async (_) => {
-                            if(isUndefined(window.gudhub)) {
-                                if(window.localStorage.getItem('gudhub_auth_key')) {
+                            if (isUndefined(window.gudhub)) {
+                                if (window.localStorage.getItem('gudhub_auth_key')) {
                                     initGudHub(window.localStorage.getItem('gudhub_auth_key'));
                                 } else {
                                     showLoginPopup();
                                     return;
                                 }
                             }
-                            let ids = await self.findIds();
 
+                            let ids = await self.findIds();
                             const currentChapter = window?.constants?.currentChapter || 'pages';
 
-                            const data = await gudhub.getDocument({app_id: ids.appId, item_id: ids.itemId, element_id: document.querySelector('html').getAttribute(`data-${currentChapter}-json_field_id`)});
+                            const data = await gudhub.getDocument({
+                                app_id: ids.appId,
+                                item_id: ids.itemId,
+                                element_id: document.querySelector('html').getAttribute(`data-${currentChapter}-json_field_id`)
+                            });
+
                             const json = JSON.parse(data.data);
+
                             const content = editor.getContent();
                             const ghId = element.getAttribute('gh-id');
-                            if(ghId.indexOf('.') === -1) {
+
+                            if (ghId.indexOf('.') === -1) {
                                 json[ghId] = content;
                             } else {
                                 const findedJson = self.findValueByPath(json, ghId.substring(0, ghId.lastIndexOf('.')));
                                 findedJson[ghId.substring(ghId.lastIndexOf('.') + 1, ghId.length)] = content;
                             }
-                            await gudhub.createDocument({app_id: ids.appId, item_id: ids.itemId, element_id: document.querySelector('html').getAttribute(`data-${currentChapter}-json_field_id`), data: JSON.stringify(json) });
+
+                            await gudhub.createDocument({
+                                app_id: ids.appId,
+                                item_id: ids.itemId,
+                                element_id: document.querySelector('html').getAttribute(`data-${currentChapter}-json_field_id`),
+                                data: JSON.stringify(json)
+                            });
 
                             window.dispatchEvent(new CustomEvent('add-edit-mode-notification', {
-                                detail: {
-                                    text: 'Saved'
-                                }
-                            }))
+                                detail: { text: 'Saved' }
+                            }));
                         }
                     });
 
@@ -170,42 +183,511 @@ class EditMode extends GHComponent {
 
                     editor.ui.registry.addButton('accentColor', {
                         text: 'Color',
-                        onAction: function() {
+                        onAction: function () {
                             editor.formatter.toggle('accentColor');
                         }
                     });
 
                     editor.ui.registry.addButton('accentBackground', {
                         text: 'Background',
-                        onAction: function() {
+                        onAction: function () {
                             editor.formatter.toggle('accentBackground');
                         }
                     });
                 }
-              });
+            });
+        }
+
+        function initGhIdClickDelegation() {
+            const onClick = (e) => {
+                const element = e.target?.closest?.('[gh-id]');
+                const isTinyUI = e.target?.closest?.('.tox, .tox-toolbar, .tox-editor-container');
+                const isArrayPanel = e.target?.closest?.('#gh-array-panel');
+
+                if (!element && !isTinyUI && !isArrayPanel) {
+                    document.querySelectorAll('.gh-id-editing').forEach(el => {
+                        el.classList.remove('gh-id-editing');
+
+                        if (el.classList.contains('mce-content-body')) {
+                            const ed = tinymce.get(el.id);
+                            if (ed) ed.destroy();
+                        }
+                    });
+                    return;
+                }
+
+                if (!element) return;
+
+                if (isUndefined(tinymce)) {
+                    alert('TinyMCE not ready yet');
+                    return;
+                }
+
+                if (element.getAttribute('contenteditable') == 'true') return;
+
+                const parentGhComponent = (() => {
+                    let parentElement = element;
+                    while (parentElement) {
+                        if (parentElement.tagName && parentElement.tagName.includes('-') && typeof parentElement.findIds === 'function') {
+                            return parentElement;
+                        }
+                        parentElement = parentElement.parentElement;
+                    }
+                    return null;
+                })();
+
+                if (!parentGhComponent) return;
+
+                const panel = document.querySelector('#gh-array-panel');
+                if (panel) {
+                    panel.style.display = 'none';
+                    panel.setAttribute('aria-hidden', 'true');
+                }
+
+                document
+                    .querySelectorAll('.gh-id-editing')
+                    .forEach(el => el.classList.remove('gh-id-editing'));
+
+                element.classList.add('gh-id-editing');
+                initTinyMce(element, parentGhComponent);
+            };
+
+            document.addEventListener('click', onClick, true);
+
+            return () => document.removeEventListener('click', onClick, true);
+        }
+
+        function initArrayItemControls({ root = document } = {}) {
+            function stopEvent(event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+
+            function deepClone(value) {
+                try { return structuredClone(value); }
+                catch { return JSON.parse(JSON.stringify(value)); }
+            }
+
+            function getValueByPath(object, pathArray) {
+                let currentValue = object;
+                for (const key of pathArray) {
+                    if (currentValue == null) return undefined;
+                    currentValue = currentValue[key];
+                }
+                return currentValue;
+            }
+
+            function setValueByPath(object, pathArray, value) {
+                if (!object || !pathArray?.length) return;
+
+                let current = object;
+                for (let i = 0; i < pathArray.length - 1; i++) {
+                    const key = pathArray[i];
+                    if (current[key] == null) {
+                        current[key] = (typeof pathArray[i + 1] === 'number') ? [] : {};
+                    }
+                    current = current[key];
+                }
+                current[pathArray[pathArray.length - 1]] = value;
+            }
+
+            function parseGhId(ghId) {
+                if (!ghId) return null;
+
+                const pathParts = ghId.split('.').map(part =>
+                    String(+part) === part ? Number(part) : part
+                );
+
+                const numericIndexes = pathParts
+                    .map((value, index) =>
+                        typeof value === 'number' && Number.isFinite(value) ? index : -1
+                    )
+                    .filter(index => index !== -1);
+
+                if (!numericIndexes.length) return null;
+
+                const lastIndexPosition = numericIndexes[numericIndexes.length - 1];
+
+                return {
+                    fullPath: pathParts,
+                    arrayPath: pathParts.slice(0, lastIndexPosition),
+                    itemIndexPosition: lastIndexPosition,
+                    itemIndex: pathParts[lastIndexPosition],
+                };
+            }
+
+            let controlPanel = document.querySelector('#gh-array-panel');
+
+            if (!controlPanel) {
+                controlPanel = document.createElement('div');
+                controlPanel.id = 'gh-array-panel';
+
+                controlPanel.innerHTML = `
+                    <button type="button" data-action="add" class="gh-panel-btn">
+                        Add
+                    </button>
+                    <button type="button" data-action="remove" class="gh-panel-btn">
+                        Remove
+                    </button>
+                `;
+
+                document.body.appendChild(controlPanel);
+            }
+
+            async function findIdsFromElement(element) {
+                let parent = element.parentElement;
+
+                while (parent) {
+                    if (
+                        parent.tagName &&
+                        parent.tagName.includes('-') &&
+                        typeof parent.findIds === 'function'
+                    ) {
+                        return parent.findIds();
+                    }
+                    parent = parent.parentElement;
+                }
+
+                return null;
+            }
+
+            function ensureGudhubInitialized() {
+                if (window.gudhub) return true;
+
+                const authKey = localStorage.getItem('gudhub_auth_key');
+                if (!authKey) {
+                    showLoginPopup();
+                    return false;
+                }
+
+                initGudHub(authKey);
+                return true;
+            }
+
+            let cachedDocumentKey = null;
+            let cachedJson = null;
+
+            async function loadJsonForElement(element) {
+                const ids = await findIdsFromElement(element);
+                if (!ids) return null;
+
+                const currentChapter = window?.constants?.currentChapter || 'pages';
+                const elementId = document.documentElement.getAttribute(`data-${currentChapter}-json_field_id`);
+
+                const cacheKey = `${ids.appId}:${ids.itemId}:${elementId}`;
+
+                if (cacheKey === cachedDocumentKey && cachedJson) {
+                    return { ids, elementId, json: cachedJson };
+                }
+
+                const response = await gudhub.getDocument({
+                    app_id: ids.appId,
+                    item_id: ids.itemId,
+                    element_id: elementId,
+                });
+
+                const parsedJson = JSON.parse(response.data);
+
+                cachedDocumentKey = cacheKey;
+                cachedJson = parsedJson;
+
+                return { ids, elementId, json: parsedJson };
+            }
+
+            function updateGhIdsIndexInside(rootEl, itemIndexPosition, newIndex) {
+                const nodes = rootEl.querySelectorAll('[gh-id]');
+                nodes.forEach(node => {
+                    const ghId = node.getAttribute('gh-id');
+                    if (!ghId) return;
+
+                    const parts = ghId.split('.');
+                    if (itemIndexPosition < 0 || itemIndexPosition >= parts.length) return;
+
+                    parts[itemIndexPosition] = String(newIndex);
+                    node.setAttribute('gh-id', parts.join('.'));
+                });
+            }
+
+            function getPathPartsFromGhId(ghId) {
+                return ghId.split('.').map(part =>
+                    String(+part) === part ? Number(part) : part
+                );
+            }
+
+            function fillGhIdValuesFromJson(rootEl, json) {
+                const nodes = rootEl.querySelectorAll('[gh-id]');
+                nodes.forEach(node => {
+                    const ghId = node.getAttribute('gh-id');
+                    if (!ghId) return;
+
+                    const path = getPathPartsFromGhId(ghId);
+                    const value = getValueByPath(json, path);
+
+                    node.innerHTML = value ?? '';
+                });
+            }
+
+            function getDomValue(node) {
+                if (node.id && window.tinymce) {
+                    const ed = tinymce.get(node.id);
+                    if (ed) return ed.getContent();
+                }
+                return node.innerHTML;
+            }
+
+            function syncDomToJsonForContainer(container, json) {
+                const nodes = container.querySelectorAll('[gh-id]');
+                nodes.forEach(node => {
+                    const ghId = node.getAttribute('gh-id');
+                    if (!ghId) return;
+
+                    const path = getPathPartsFromGhId(ghId);
+                    setValueByPath(json, path, getDomValue(node));
+                });
+            }
+
+            function rerenderArrayContainerFromJson({ targetElement, json, arrayPath }) {
+                const container = targetElement.closest('[gh-array]');
+                if (!container) return false;
+
+                const arr = getValueByPath(json, arrayPath);
+                if (!Array.isArray(arr)) return false;
+
+                const itemSelector = container.querySelector('[gh-item]') ? '[gh-item]' : '.item';
+                const firstItem = container.querySelector(itemSelector);
+                if (!firstItem) return false;
+
+                const template = firstItem.cloneNode(true);
+
+                const anyGh = template.querySelector('[gh-id]');
+                const parsed = anyGh ? parseGhId(anyGh.getAttribute('gh-id')) : null;
+                const itemIndexPosition = parsed?.itemIndexPosition;
+                if (typeof itemIndexPosition !== 'number') return false;
+
+                container.innerHTML = '';
+
+                for (let i = 0; i < arr.length; i++) {
+                    const clone = template.cloneNode(true);
+
+                    updateGhIdsIndexInside(clone, itemIndexPosition, i);
+                    fillGhIdValuesFromJson(clone, json);
+
+                    container.appendChild(clone);
+                }
+
+                return true;
+            }
+
+            let currentHover = null;
+            let hideTimer = null;
+
+            function scheduleHidePanel() {
+                clearTimeout(hideTimer);
+                hideTimer = setTimeout(() => hidePanel(), 250);
+            }
+
+            function cancelHidePanel() {
+                clearTimeout(hideTimer);
+                hideTimer = null;
+            }
+
+            function hidePanel() {
+                controlPanel.style.display = 'none';
+                currentHover = null;
+                lastHoveredItem = null;
+
+                document.querySelectorAll('.gh-item-hovered').forEach(el => el.classList.remove('gh-item-hovered'));
+                controlPanel.setAttribute('aria-hidden', 'true');
+            }
+
+            function showPanelOverItem(itemEl) {
+                const rect = itemEl.getBoundingClientRect();
+
+                const panelW = 220;
+                const panelH = 36;
+                const top = Math.max(8, rect.top - panelH - 8);
+                const left = Math.max(
+                    8,
+                    Math.min(window.innerWidth - panelW - 8, rect.left + (rect.width / 2) - (panelW / 2))
+                );
+
+                controlPanel.style.top = `${top}px`;
+                controlPanel.style.left = `${left}px`;
+                controlPanel.style.display = 'flex';
+
+                controlPanel.setAttribute('aria-hidden', 'false');
+            }
+
+            function getItemElementFromTarget(target) {
+                return target?.closest?.('[gh-array] [gh-item]') || target?.closest?.('[gh-array] .item');
+            }
+
+            function getAnyGhIdInsideItem(itemEl) {
+                return itemEl?.querySelector?.('[gh-id]') || null;
+            }
+
+            let animationFrameId = 0;
+            let lastHoveredItem = null;
+
+            function handlePointerMove(event) {
+                if (animationFrameId) return;
+
+                animationFrameId = requestAnimationFrame(async () => {
+                    animationFrameId = 0;
+
+                    if (controlPanel.contains(event.target)) {
+                        cancelHidePanel();
+                        return;
+                    }
+
+                    const hoveredItem = getItemElementFromTarget(event.target);
+
+                    if (!hoveredItem) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    cancelHidePanel();
+
+                    if (hoveredItem === lastHoveredItem) return;
+                    lastHoveredItem = hoveredItem;
+
+                    const anyGh = getAnyGhIdInsideItem(hoveredItem);
+                    if (!anyGh) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    const parsedPath = parseGhId(anyGh.getAttribute('gh-id'));
+                    if (!parsedPath) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    if (!ensureGudhubInitialized()) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    const loadedData = await loadJsonForElement(anyGh);
+                    if (!loadedData) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    const targetArray = getValueByPath(loadedData.json, parsedPath.arrayPath);
+                    if (!Array.isArray(targetArray)) {
+                        scheduleHidePanel();
+                        return;
+                    }
+
+                    currentHover = { element: anyGh, itemEl: hoveredItem, meta: parsedPath };
+
+                    document.querySelectorAll('.gh-item-hovered').forEach(el => el.classList.remove('gh-item-hovered'));
+                    hoveredItem.classList.add('gh-item-hovered');
+
+                    showPanelOverItem(hoveredItem);
+                });
+            }
+
+
+            controlPanel.addEventListener('pointerdown', stopEvent, true);
+            controlPanel.addEventListener('pointerenter', () => {
+                cancelHidePanel();
+            }, true);
+
+            controlPanel.addEventListener('pointerleave', () => {
+                scheduleHidePanel();
+            }, true);
+
+
+            controlPanel.addEventListener('click', async event => {
+                stopEvent(event);
+
+                const button = event.target.closest('button[data-action]');
+                if (!button || !currentHover) return;
+
+                if (!ensureGudhubInitialized()) return;
+
+                const actionType = button.getAttribute('data-action');
+
+                const loadedData = await loadJsonForElement(currentHover.element);
+                if (!loadedData) return;
+
+                const { ids, elementId, json } = loadedData;
+
+                const container = currentHover.itemEl?.closest?.('[gh-array]') || currentHover.element.closest('[gh-array]');
+                if (container) {
+                    syncDomToJsonForContainer(container, json);
+                }
+
+                const targetArray = getValueByPath(json, currentHover.meta.arrayPath);
+                if (!Array.isArray(targetArray)) return;
+
+                const itemIndex = currentHover.meta.itemIndex;
+
+                if (actionType === 'add') {
+                    targetArray.splice(itemIndex + 1, 0, deepClone(targetArray[itemIndex] ?? {}));
+                }
+
+                if (actionType === 'remove') {
+                    if (targetArray.length <= 1) return;
+                    targetArray.splice(itemIndex, 1);
+                }
+
+                await gudhub.createDocument({
+                    app_id: ids.appId,
+                    item_id: ids.itemId,
+                    element_id: elementId,
+                    data: JSON.stringify(json),
+                });
+
+                cachedJson = json;
+
+                rerenderArrayContainerFromJson({
+                    targetElement: currentHover.element,
+                    json,
+                    arrayPath: currentHover.meta.arrayPath,
+                });
+
+                lastHoveredItem = null;
+                hidePanel();
+            }, true);
+
+            root.addEventListener('pointermove', handlePointerMove, true);
+            window.addEventListener('scroll', scheduleHidePanel, true);
+            window.addEventListener('resize', scheduleHidePanel, true);
+
+            return () => {
+                root.removeEventListener('pointermove', handlePointerMove, true);
+                window.removeEventListener('scroll', scheduleHidePanel, true);
+                window.removeEventListener('resize', scheduleHidePanel, true);
+                hidePanel();
+            };
+
         }
     }
 
     renderNotificationsComponent() {
-        if(!window.customElements.get('edit-mode-notifications')) {
+        if (!window.customElements.get('edit-mode-notifications')) {
             window.customElements.define('edit-mode-notifications', EditModeNotifications);
         }
 
-        if(!document.querySelector('edit-mode-notifications')) {
+        if (!document.querySelector('edit-mode-notifications')) {
             document.body.append(document.createElement('edit-mode-notifications'));
         }
     }
 
     initListeners() {
         const listener = (e) => {
-           this.initGudHub(e.detail.data.auth_key);
-           window.localStorage.setItem('gudhub_auth_key', e.detail.data.auth_key);
-           window.removeEventListener('gudhub-login', listener, false);
+            this.initGudHub(e.detail.data.auth_key);
+            window.localStorage.setItem('gudhub_auth_key', e.detail.data.auth_key);
+            window.removeEventListener('gudhub-login', listener, false);
         }
         window.addEventListener('gudhub-login', listener, false);
 
         const outsideClickListener = (e) => {
-            if(e.target === document.querySelector('.gudhub-login-popup__bg')) {
+            if (e.target === document.querySelector('.gudhub-login-popup__bg')) {
                 this.hideLoginPopup();
                 window.removeEventListener('click', outsideClickListener, false);
             }
@@ -218,25 +700,23 @@ class EditMode extends GHComponent {
         let GudHub;
         try {
             GudHub = !isUndefined(GudHubLibrary) ? GudHubLibrary.GudHub : GudHub;
-        } catch(err) {
+        } catch (err) {
             console.error('GHCOMPONENT ERROR: you need to import GudHub library (@gudhub/core) before using GHComponent!');
         }
 
-        window.gudhub = !isUndefined(window.gudhub) ? window.gudhub : new GudHub(isUndefined(auth_key) ? window.getConfig().auth_key : auth_key, {
-            server_url: 'https://gudhub.com/GudHub_Test',
-            file_server_url: 'https://gudhub.com',
-            async_modules_path: 'build/latest/async_modules/',
-        });
+        window.gudhub = !isUndefined(window.gudhub)
+            ? window.gudhub
+            : new GudHub(isUndefined(auth_key) ? window.getConfig().auth_key : auth_key, {
+                server_url: 'https://app.gudhub.com/GudHub',
+                file_server_url: 'https://app.gudhub.com',
+                async_modules_path: 'build/latest/async_modules/',
+            });
 
         this.hideLoginPopup();
     }
 
-    checkGudhub() {
-        return !isUndefined(window.gudhub);
-    }
-
-    connectLoginSript() {
-        if(!document.querySelector('script#gudhub_login_component')) {
+    connectLoginScript() {
+        if (!document.querySelector('script#gudhub_login_component')) {
             const script = document.createElement('script');
             script.id = 'gudhub-login-component';
             script.src = 'https://unpkg.com/@gudhub/gh-login/index.js';
@@ -246,7 +726,7 @@ class EditMode extends GHComponent {
     }
 
     createLoginPopup() {
-        if(!document.querySelector('#gudhub_login_popup')) {
+        if (!document.querySelector('#gudhub_login_popup')) {
             const div = document.createElement('div');
             div.classList.add('gudhub-login-popup__bg');
             div.id = 'gudhub_login_popup';
@@ -262,20 +742,19 @@ class EditMode extends GHComponent {
     }
 
     showLoginPopup() {
-        this.connectLoginSript();
+        this.connectLoginScript();
         this.createLoginPopup();
         document.querySelector('.gudhub-login-popup__bg').classList.add('active');
         this.initListeners();
     }
 
     hideLoginPopup() {
-        if(document.querySelector('.gudhub-login-popup__bg')) {
+        if (document.querySelector('.gudhub-login-popup__bg')) {
             document.querySelector('.gudhub-login-popup__bg').classList.remove('active');
         }
     }
-
 }
 
-if(!window.customElements.get('edit-mode')) {
+if (!window.customElements.get('edit-mode')) {
     window.customElements.define('edit-mode', EditMode);
-}
+}

package/src/components/edit-mode/edit-mode.scss

@@ -1,8 +1,22 @@
 body.edit-mode-enabled {
-    [gh-id] {
-        &:hover {
-            outline: 1px solid #2b61fa;
-        }
+    .gh-item-hovered {
+        outline: 2px solid rgba(43, 97, 250, 0.6);
+        outline-offset: 2px;
+    }
+
+    [gh-id]:hover {
+        outline: 1px dashed rgba(43, 97, 250, 0.5);
+        cursor: text;
+    }
+
+    [gh-id].gh-id-editing {
+        outline: 2px solid #2b61fa;
+        outline-offset: 2px;
+        background: rgba(43, 97, 250, 0.05);
+    }
+
+    .gh-item-hovered:has(.gh-id-editing) {
+        outline-color: transparent;
     }
 }
 
@@ -75,3 +89,64 @@ edit-mode {
         color: #fff;
     }
 }
+
+#gh-array-panel {
+    position: fixed;
+    z-index: 999;
+    display: none;
+    gap: 6px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.92);
+    color: black;
+    border: 1px solid lightgrey;
+    box-shadow: 0 10px 30px rgba(0,0,0,.25);
+    user-select: none;
+}
+
+.gh-panel-btn {
+    all: unset;
+    cursor: pointer;
+
+    padding: 6px 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(0,0,0,0.12);
+    background: rgba(255,255,255,0.7);
+
+    font: 14px system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+    color: #000;
+
+    transition:
+        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+        background-color 0.3s ease-in-out,
+        opacity 0.3s ease-in-out;
+
+    box-shadow:
+        0 1px 1px rgba(0,0,0,0.04),
+        0 4px 10px rgba(0,0,0,0.08);
+
+    will-change: transform;
+}
+
+.gh-panel-btn:hover {
+    transform: translateY(-1px) scale(1.001);
+    background: rgba(255,255,255,0.9);
+    box-shadow:
+        0 4px 10px rgba(0,0,0,0.12),
+        0 8px 18px rgba(0,0,0,0.16);
+}
+
+.gh-panel-btn:active {
+    transform: translateY(0) scale(0.97);
+    box-shadow:
+        0 2px 6px rgba(0,0,0,0.18);
+    opacity: 0.9;
+}
+
+.gh-panel-btn:focus-visible {
+    outline: none;
+    box-shadow:
+        0 0 0 3px rgba(0, 125, 250, 0.35),
+        0 6px 16px rgba(0,0,0,0.15);
+}

package/src/components/image-component/image-component.js

@@ -57,7 +57,7 @@ class ImageComponent extends GHComponent {
         const buildImagePath = (meta, route) => {
             const url = new URL(meta.url);
             const extension = url.pathname.split('.').pop();
-            return `/assets/images${route}/${meta.file_name}.${extension}`;
+            return `/assets/images${route}${meta.file_name}.${extension}`;
         };
 
         try {
@@ -75,13 +75,16 @@ class ImageComponent extends GHComponent {
                 }
             }
 
-            this.generatedImageSrc = relativeImagePath;
+            const normalizeUrlPath = (value) =>
+                value ? value.trim().replace(/\s+/g, '-') : value;
+
+            this.generatedImageSrc = normalizeUrlPath(relativeImagePath);
 
             // Download image from GudHub (this.dataUrl) to cache (this.generatedImageSrc)
             if (window?.imagesRegeneration) {
                 if (this.generatedImageSrc && this.dataUrl) {
                     try {
-                        await fetch(`${this.generatedImageSrc}?source=${this.dataUrl}&mode=ssr`);
+                        await fetch(`${this.generatedImageSrc}?source=${normalizeUrlPath(this.dataUrl)}&mode=ssr`);
                         this.src = this.generatedImageSrc;
                     } catch (error) {
                         console.error('Failed to fetch generatedImageSrc:', error);