@innovastudio/contentbox 1.6.204 → 1.6.205

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@innovastudio/contentbox",
-  "version": "1.6.204",
+  "version": "1.6.205",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -73,7 +73,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.222",
+    "@innovastudio/contentbuilder": "^1.5.223",
     "js-beautify": "^1.14.0",
     "marked": "^17.0.0",
     "sortablejs": "^1.15.2"

package/public/contentbox/contentbox.esm.js

@@ -19517,7 +19517,7 @@ class PanelIcon {
                 <button title="${out('Color')}" class="btn-color is-btn-color"></button>
             </div>
 
-            <div class="label">${out('Icon Size')}:</div>
+            <div class="label label-iconsize">${out('Icon Size')}:</div>
 
             <div role="group" aria-label="${out('Font Size')}" class="group fontsizes">
                 ${fontSizeHtml}
@@ -19580,20 +19580,17 @@ class PanelIcon {
     btnSizes.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        const num = btn.getAttribute('data-value');
-        let currentFontSize = 1;
-        let container = this.getElm();
+        const num = btn.getAttribute('data-value'); // Size the icon itself, as ContentBuilder's own size buttons do for an icon.
 
-        if (container) {
-          currentFontSize = Number(window.getComputedStyle(container).getPropertyValue('font-size').match(/\d+/)[0]);
+        const icon = this.builder.controlpanel.activeElement;
+        const rte = this.builder.editor.rte;
+
+        if ((this.builder.editor.opts.fontSizeClassValues || []).length > 0) {
+          rte.applyClassFontSize(icon, num);
+        } else {
+          rte.applyInlineFontSize(icon, num);
         }
 
-        this.builder.editor.dom.execCommand('font-size', currentFontSize + 1 + 'px', (ok, container) => {
-          if (ok) {
-            this.builder.editor.rte.applyClassFontSize(container, num);
-            container.style.fontSize = '';
-          }
-        });
         this.getState();
         this.builder.editor.onChange();
       });
@@ -19631,7 +19628,13 @@ class PanelIcon {
   getState() {
     const panel = this.panel;
     let icon = this.builder.controlpanel.activeElement;
-    const div = icon.parentNode;
+    const div = icon.parentNode; // An icon in overlay text: its link and alignment belong to the line (the Text panel),
+    // and its size follows the design, like the text's. Only Change icon and Color are shown.
+
+    const inOverlayText = !!this.builder.controlpanel.overlayIcon(icon);
+    panel.querySelectorAll('.btn-link, .label-iconsize, .group.fontsizes, .alignicon').forEach(elm => {
+      elm.style.display = inOverlayText ? 'none' : '';
+    });
     const btnAligns = panel.querySelectorAll('[data-align]');
     btnAligns.forEach(btn => btn.classList.remove('on'));
     if (div.classList.contains('text-left')) panel.querySelector('[data-align="left"]').classList.add('on');
@@ -19682,14 +19685,6 @@ class PanelIcon {
     }
   }
 
-  getElm() {
-    const selection = this.builder.win.getSelection();
-    const anchorNode = selection.anchorNode;
-    if (!anchorNode) return false;
-    const container = anchorNode.nodeType !== Node.TEXT_NODE && anchorNode.nodeType !== Node.COMMENT_NODE ? anchorNode : anchorNode.parentElement;
-    return container;
-  }
-
 }
 
 class PanelSvg {
@@ -33708,6 +33703,15 @@ class PanelSection {
         <div class="accordion-content" id="sectioncontent5" aria-hidden="true">
 
             <div class="subpanel">
+                <div class="barstart-row">
+                    <div class="label mt-2">${out('Bar at the start')}:</div>
+                    <div role="group" aria-label="${out('Bar at the start')}" class="group sectionbar barstart">
+                        <button title="${out('Auto')}" data-barstart="">${out('Auto')}</button>
+                        <button title="${out('Light')}" data-barstart="light">${out('Light')}</button>
+                        <button title="${out('Dark')}" data-barstart="dark">${out('Dark')}</button>
+                    </div>
+                </div>
+
                 <div class="label mt-2">${out('Bar over this section')}:</div>
                 <div role="group" aria-label="${out('Bar over this section')}" class="group sectionbar">
                     <button title="${out('Default')}" data-bar="">${out('Default')}</button>
@@ -33932,6 +33936,20 @@ class PanelSection {
         btn.classList.add('on');
         this.builder.onChange();
       });
+    }); // Bar at the start: the bar's text while it rests over the top section, at the top of
+    // the page (data-bar-start). Only the top section has it. Auto: no attribute.
+
+    const btnBarStarts = panel.querySelectorAll('[data-barstart]');
+    btnBarStarts.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const section = this.builder.activeSection;
+        const s = btn.getAttribute('data-barstart');
+        if (s) section.setAttribute('data-bar-start', s);else section.removeAttribute('data-bar-start');
+        btnBarStarts.forEach(btn => btn.classList.remove('on'));
+        btn.classList.add('on');
+        this.builder.onChange();
+      });
     });
     const btnBarInk = panel.querySelector('.btn-barink');
     btnBarInk.addEventListener('click', () => {
@@ -34208,7 +34226,16 @@ class PanelSection {
     if (showBar) {
       const look = activeSection.getAttribute('data-bar') || '';
       panel.querySelectorAll('[data-bar]').forEach(btn => btn.classList.toggle('on', btn.getAttribute('data-bar') === look));
-      panel.querySelector('.btn-barink').style.backgroundColor = activeSection.getAttribute('data-bar-ink') || '';
+      panel.querySelector('.btn-barink').style.backgroundColor = activeSection.getAttribute('data-bar-ink') || ''; // Bar at the start: the top section only (the first section under the bar)
+
+      const top = Array.from(this.builder.wrapperEl.querySelectorAll('.is-section')).find(s => !s.closest('.is-section-navbar'));
+      const isTop = top === activeSection;
+      panel.querySelector('.barstart-row').style.display = isTop ? '' : 'none';
+
+      if (isTop) {
+        const start = activeSection.getAttribute('data-bar-start') || '';
+        panel.querySelectorAll('[data-barstart]').forEach(btn => btn.classList.toggle('on', btn.getAttribute('data-barstart') === start));
+      }
     }
 
     this.realtimeVisibility(activeSection, true);
@@ -43566,6 +43593,9 @@ class ControlPanel {
         // elmTool, whose duplicate/delete/move actions would let a user
         // restructure a generated layer.
         this.builder.editor.inspectedElement = overlayTarget.element;
+      } else if (this.overlayIcon(e.target)) {
+        // An icon in overlay text opens the Icon panel.
+        this.builder.editor.inspectedElement = e.target;
       } else {
         // A plugin in the box overlay opens its own panel (Section > Box > the
         // plugin), like overlay text. Its editable parts and content areas are
@@ -44154,6 +44184,8 @@ class ControlPanel {
     if (el.closest('[data-html]')) return null; // code/module block — has its own editor
 
     if (el.closest('[data-cb-type]')) return null; // plugin — panel-plugin owns it
+
+    if (this.overlayIcon(el)) return null; // icon in a text — the Icon panel owns it
     // Text of an overlay layer. Resolve upward: a click can land on a
     // <b>/<span> inside the region, which is not itself a region.
 
@@ -44394,7 +44426,7 @@ class ControlPanel {
       activeElement = this.resolvedImage;
     }
 
-    if (activeElement && this.overlayTarget(activeElement)) {
+    if (activeElement && (this.overlayTarget(activeElement) || this.overlayIcon(activeElement))) {
       this.activeElement = activeElement;
       this.activeColumn = null;
       this.activeRow = null;
@@ -44518,7 +44550,7 @@ class ControlPanel {
     } // Overlay content has no row/column to walk back up to.
 
 
-    if (selection === 'element' && (this.overlayTarget(this.activeElement) || this.activeElement.closest('[data-cb-type]') && this.activeElement.closest('.is-overlay-content'))) {
+    if (selection === 'element' && (this.overlayTarget(this.activeElement) || this.overlayIcon(this.activeElement) || this.activeElement.closest('[data-cb-type]') && this.activeElement.closest('.is-overlay-content'))) {
       breadcrumbHtml = `<div>${section} ${sep} ${box} ${sep}</div>`;
     }
 
@@ -44771,6 +44803,25 @@ class ControlPanel {
       elm.removeAttribute('data-overlay-select');
     });
     if (el) el.setAttribute('data-overlay-select', '');
+  } // A plugin placed in an overlay (eg. a header bar's Site Menu or Site Logo).
+  // Like an overlay target it has no cell/row outline, so it gets the same mark.
+
+
+  overlayPlugin(el) {
+    if (!el || !el.closest) return null;
+    const plugin = el.closest('[data-cb-type]');
+    if (!plugin || !plugin.closest(this.builder.overlayEditableSelector)) return null;
+    if (plugin.closest('.is-container')) return null;
+    return plugin;
+  } // An icon (<i class="bi ...">) in an overlay, eg. at the start of a chip's text. It opens the
+  // Icon panel, so it can be changed, while a click on the words still opens the Text panel.
+
+
+  overlayIcon(el) {
+    if (!el || !el.matches || !el.matches('i.bi, i.icon') || el.innerHTML !== '') return null;
+    if (!el.closest(this.builder.overlayEditableSelector)) return null;
+    if (el.closest('.is-container, [data-html], [data-cb-type]')) return null;
+    return el;
   } // Is `el` (or an ancestor of it) a button?
   //
   // A <button> always is. An <a> is a button when it lays itself out as a
@@ -44853,7 +44904,16 @@ class ControlPanel {
 
     if (what === 'element' && this.activeElement) {
       const overlayNow = this.overlayTarget(this.activeElement);
-      if (overlayNow) marked = overlayNow.element;else if (this.pictureOnlyElement(this.activeElement)) marked = this.activeElement;
+      if (overlayNow) marked = overlayNow.element;else if (this.pictureOnlyElement(this.activeElement)) marked = this.activeElement;else marked = this.overlayPlugin(this.activeElement) || this.overlayIcon(this.activeElement);
+    } // An overlay icon stays the editor's active icon only while it is selected; otherwise
+    // a later icon insert would replace it.
+
+
+    const activeIcon = this.builder.editor.activeIcon;
+
+    if (activeIcon && activeIcon !== marked && this.overlayIcon(activeIcon)) {
+      activeIcon.classList.remove('icon-active');
+      this.builder.editor.activeIcon = null;
     }
 
     this.markOverlaySelection(marked);
@@ -45004,6 +45064,9 @@ class ControlPanel {
           this.panelIframe.classList.add('active');
           this.objPanelIframe.getState();
         } else if (element.tagName.toLowerCase() === 'i' && (element.classList.contains('icon') || element.classList.contains('bi'))) {
+          // In a container ContentBuilder's click makes it the active icon; an overlay
+          // icon gets no such click, so name it here (Change icon replaces this one).
+          if (this.overlayIcon(element)) this.builder.editor.activeIcon = element;
           let titleHtml = out('Icon');
           this.title.innerHTML = titleHtml;
           this.panelIcon.classList.add('active');
@@ -45136,8 +45199,10 @@ class ControlPanel {
     // should animate exposes that as its own setting.
 
 
-    const isPlugin = what === 'element' && !!pluginOf(this.activeElement);
-    const canMotion = !isPlugin && (what === 'element' || what === 'column' || what === 'row' || what === 'container' || what === 'block' || what === 'box' || what === 'section');
+    const isPlugin = what === 'element' && !!pluginOf(this.activeElement); // An icon in overlay text moves with its line; only the line has Motion.
+
+    const isOverlayIcon = what === 'element' && !!this.overlayIcon(this.activeElement);
+    const canMotion = !isPlugin && !isOverlayIcon && (what === 'element' || what === 'column' || what === 'row' || what === 'container' || what === 'block' || what === 'box' || what === 'section');
 
     if (canMotion) {
       if (this.tab === 'motion') {
@@ -176896,6 +176961,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
         }
 
         i.bi, i.icon { display: inline-flex; }
+        /* As a flex box an icon ignores Bootstrap Icons' own vertical-align (on its ::before) and
+           sits higher than the text beside it. Put the same offset on the icon itself. */
+        i.bi { vertical-align: -.125em; }
 
         </style>`); // i.bi, i.icon { display: inline-flex; } => this makes icons more cursor friendly