@innovastudio/contentbox 1.6.47 → 1.6.48

package/public/contentbox/contentbox.esm.js

@@ -14662,6 +14662,11 @@ class PanelBlock {
                 </div>
             </div>
 
+            <div class="group moreoptions mt-2">
+                <button title="${out('Shadow')}" class="btn-shadow" style="width:103px">${out('Shadow')}</button>
+                <button title="${out('More')}" class="btn-moreoptions" style="width:103px">${out('More')}</button>
+            </div>
+
             <div class="breakpoint-list"></div>
 
             <div class="group flex mt-4 div-ungroup" style="width: 217px">
@@ -14691,6 +14696,9 @@ class PanelBlock {
             <div class="group info-breakpoint" style="margin-top:17px;padding:10px 15px 3px;display:none"><div></div></div>
             -->
 
+            <div class="group resetrotation mt-2"">
+                <button title="${out('Reset Rotation')}" class="btn-resetrotation">${out('Reset Rotation')}</button>
+            </div>
         </div>
 
 
@@ -14707,6 +14715,14 @@ class PanelBlock {
                         <span>${out('Remove Content')}</span>
                     </button>
                 </div>
+                
+                <div class="label mt-3">${out('Placement')}:</div>
+                <div class="group mt-2">
+                    <button title="${out('Top')}" data-align="items-start"><svg><use xlink:href="#icon-align-box-top"></use></svg></button>
+                    <button title="${out('Middle')}" data-align="items-center"><svg><use xlink:href="#icon-align-box-middle"></use></svg></button>
+                    <button title="${out('Bottom')}" data-align="items-end"><svg><use xlink:href="#icon-align-box-bottom"></use></svg></button>
+                    <button title="${out('Clear')}" data-align=""><svg><use xlink:href="#icon-eraser"></use></svg></button>
+                </div>
 
                 <div class="group editspacing mt-4"">
                     <button title="${out('Spacing')}" class="btn-spacing">${out('Spacing')}</button>
@@ -15119,6 +15135,10 @@ class PanelBlock {
     btnSpacing.addEventListener('click', () => {
       this.builder.controlpanel.objDialogSpacingContainer.open();
     });
+    const btnMore = panel.querySelector('.btn-moreoptions');
+    btnMore.addEventListener('click', () => {
+      this.builder.controlpanel.objDialogBlockOptions.open();
+    });
     const btnUngroup = panel.querySelector('.btn-ungroup');
     btnUngroup.addEventListener('click', () => {
       this.builder.editor.saveForUndo();
@@ -15140,6 +15160,18 @@ class PanelBlock {
       this.builder.eb.removeShape();
       this.builder.onChange();
     });
+    const btnResetRotation = panel.querySelector('.btn-resetrotation');
+    btnResetRotation.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      this.builder.doc.querySelectorAll('.is-block.active').forEach(block => {
+        block.style.transform = '';
+      });
+      this.builder.onChange();
+    });
+    const btnShadow = panel.querySelector('.btn-shadow');
+    btnShadow.addEventListener('click', () => {
+      this.builder.controlpanel.objDialogShadow.open();
+    });
     /*
     const btnAddBreakpoint = panel.querySelector('.btn-addbreakpoint');
     btnAddBreakpoint.addEventListener('click', ()=>{
@@ -15317,6 +15349,31 @@ class PanelBlock {
       }
 
       this.builder.onChange();
+    }); // Flex
+
+    const btnJustify = panel.querySelectorAll('[data-align]');
+    btnJustify.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        const val = btn.getAttribute('data-align');
+        const elms = this.builder.doc.querySelectorAll('.is-block.active');
+        elms.forEach(target => {
+          target.classList.remove('flex');
+          target.classList.remove('items-start');
+          target.classList.remove('items-center');
+          target.classList.remove('items-end');
+        });
+
+        if (val !== '') {
+          elms.forEach(target => {
+            target.classList.add('flex');
+            target.classList.add(val);
+          });
+        }
+
+        this.getState();
+        this.builder.onChange();
+      });
     });
   }
 
@@ -15536,6 +15593,14 @@ class PanelBlock {
       btnRemoveShape.style.display = 'none';
     }
 
+    const divResetRotation = panel.querySelector('div.resetrotation');
+
+    if (block.style.transform.includes('rotate')) {
+      divResetRotation.style.display = '';
+    } else {
+      divResetRotation.style.display = 'none';
+    }
+
     if (block) {
       if (block.closest('.autolayout')) {
         this.divArrange.style.display = 'none';
@@ -15638,7 +15703,19 @@ class PanelBlock {
       this.divMove.style.display = 'none';
     }
 
-    this.showBlockPos();
+    this.showBlockPos(); // flex
+
+    if (block) {
+      this.panel.querySelectorAll('[data-align]').forEach(elm => elm.classList.remove('on'));
+
+      if (block.classList.contains('items-start')) {
+        this.panel.querySelector('[data-align=items-start]').classList.add('on');
+      } else if (block.classList.contains('items-center')) {
+        this.panel.querySelector('[data-align=items-center]').classList.add('on');
+      } else if (block.classList.contains('items-end')) {
+        this.panel.querySelector('[data-align=items-end]').classList.add('on');
+      }
+    }
   }
 
   showBlockPos() {
@@ -22062,6 +22139,423 @@ class SpacingContainer {
 
 }
 
+class BlockOptions {
+  constructor(dialog, builder) {
+    this.builder = builder;
+    this.dialog = dialog;
+    let html = `
+            <button class="btn-back" tabindex="-1" title="${out('Close')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>
+  
+            <div class="submain">
+                <div class="label" style="font-size:18px">${out('More Options')}</div>
+                <label class="std">
+                    <span class="label mt-3">${out('Border Radius')}:</span>
+                    <div class="mt-2">
+                        <input type="range" min="0" max="500" value="0" class="inp-block-borderradius is-rangeslider" style="width:180px">
+                    </div>
+                    <div class="mt-3" style="align-items:center;">
+                        <input type="text" class="inp-borderradius" style="width:80px">&nbsp;
+                        <span>px</span>
+                    </div>
+                </label>
+
+                <!--<div class="group mt-5">
+                    <button title="${out('Shadow')}" class="btn-shadow" style="width:221px">${out('Shadow')}</button>
+                </div>-->
+            </div>
+
+            <button class="accordion-item" aria-expanded="false" aria-controls="blockmore1">
+                ${out('Border')}
+                <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
+            </button>
+            <div class="accordion-content" id="blockmore1" aria-hidden="true">
+            
+                <div class="subpanel">
+
+                    <div class="label subtitle mt-2">${out('Border')}:</div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Width')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-bordercolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="label subtitle">${out('Individual Sides')}:</div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Top')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-bordertopwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-bordertopstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-bordertopcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Bottom')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderbottomwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderbottomstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderbottomcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Left')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderleftwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderleftstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderleftcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                    <div class="flex">
+                        <label class="unit" style="width:80px;margin-right:12px;">
+                            <div>
+                                <span class="label">${out('Right')}:</span>
+                                <a class="btn-unit" href="#" role="button">px</a>
+                            </div>
+                            <input type="text" class="inp-borderrightwidth" style="width:80px">
+                        </label>
+                        <label class="std" style="margin-right:12px;">
+                            <span class="label">&nbsp;</span>
+                            <select class="inp-borderrightstyle" style="width:80px">
+                                <option value=""></option>
+                                <option value="solid">${out('Solid')}</option>
+                                <option value="dashed">${out('Dashed')}</option>
+                                <option value="dotted">${out('Dotted')}</option>
+                            </select>
+                        </label>
+                        <label class="std">
+                            <span class="label">&nbsp;</span>
+                            <div class="group">
+                                <button title="${out('Color')}" class="btn-borderrightcolor is-btn-color"></button>
+                            </div>
+                        </label>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="panel-pop unit-1" tabIndex="-1" aria-hidden="true">
+                <button title="px">px</button>
+                <button title="px">%</button>
+                <button title="vw">vw</button>
+                <button title="vw">vh</button>
+                <button title="em">em</button>
+                <button title="rem">rem</button>
+            </div>
+        `;
+    dialog.insertAdjacentHTML('beforeend', html);
+    this.unit = dialog.querySelector('.panel-pop.unit-1');
+    const btnBack = dialog.querySelector('.btn-back');
+    btnBack.addEventListener('click', () => {
+      this.close();
+    }); // Units
+
+    dialog.querySelectorAll('.btn-unit').forEach(btn => btn.addEventListener('click', e => {
+      this.builder.controlpanel.showPop(this.unit, () => {// btn.focus();
+      }, btn);
+      this.unitButton = btn;
+      e.preventDefault();
+    })); // Apply Style
+
+    let timer;
+    const divBorder = dialog.querySelector('#blockmore1');
+    divBorder.querySelectorAll('input').forEach(inp => {
+      inp.addEventListener('input', () => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          this.applyStyle(inp);
+        }, 600);
+      });
+    });
+    divBorder.querySelectorAll('select').forEach(inp => inp.addEventListener('change', () => {
+      this.applyStyle(inp);
+    }));
+    this.unit.querySelectorAll('button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.unitButton.innerText = btn.innerText;
+        this.builder.controlpanel.hidePop(this.unit);
+        const inp = this.unitButton.parentNode.parentNode.querySelector('input');
+        this.applyStyle(inp);
+      });
+    }); // Colors
+
+    const renderColorPicker = (property, selector) => {
+      const btnPicker = dialog.querySelector(selector);
+      btnPicker.addEventListener('click', () => {
+        this.builder.editor.saveForUndo(true); // checkLater = true
+
+        let block = this.blockOverlay();
+        let bgcolor = btnPicker.style.backgroundColor;
+        const colorpicker = this.builder.editor.colorpicker();
+        colorpicker.open(s => {
+          block.style[property] = s;
+          btnPicker.style.backgroundColor = s; // preview
+
+          this.builder.onChange();
+        }, bgcolor);
+      });
+    };
+
+    renderColorPicker('border-color', '.btn-bordercolor');
+    renderColorPicker('border-top-color', '.btn-bordertopcolor');
+    renderColorPicker('border-bottom-color', '.btn-borderbottomcolor');
+    renderColorPicker('border-left-color', '.btn-borderleftcolor');
+    renderColorPicker('border-right-color', '.btn-borderrightcolor'); // Border Radius
+
+    const inpBorderRadius = dialog.querySelector('.inp-borderradius');
+    const inpBlockBorderRadius = dialog.querySelector('.inp-block-borderradius');
+    this.inpBorderRadius = inpBorderRadius;
+    this.inpBlockBorderRadius = inpBlockBorderRadius;
+
+    inpBlockBorderRadius.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpBlockBorderRadius.oninput = () => {
+      // val: 0 - 500
+      let val = inpBlockBorderRadius.value;
+      inpBorderRadius.value = val;
+      const blockOverlay = this.blockOverlay();
+      blockOverlay.style.borderRadius = val + 'px';
+    };
+
+    inpBlockBorderRadius.onchange = () => {
+      this.builder.onChange();
+    }; // const btnShadow = dialog.querySelector('.btn-shadow');
+    // btnShadow.addEventListener('click',()=>{ 
+    //     this.builder.controlpanel.objDialogShadow.open();
+    // });
+
+  }
+
+  applyStyle(inp) {
+    this.builder.editor.saveForUndo();
+    let cls = inp.classList;
+    if (cls.contains('inp-borderwidth')) this.setStyle('border-width', '.inp-borderwidth');
+    if (cls.contains('inp-bordertopwidth')) this.setStyle('border-top-width', '.inp-bordertopwidth');
+    if (cls.contains('inp-borderbottomwidth')) this.setStyle('border-bottom-width', '.inp-borderbottomwidth');
+    if (cls.contains('inp-borderleftwidth')) this.setStyle('border-left-width', '.inp-borderleftwidth');
+    if (cls.contains('inp-borderrightwidth')) this.setStyle('border-right-width', '.inp-borderrightwidth');
+    if (cls.contains('inp-borderstyle')) this.setStyleSelect('border-style', '.inp-borderstyle');
+    if (cls.contains('inp-bordertopstyle')) this.setStyleSelect('border-top-style', '.inp-bordertopstyle');
+    if (cls.contains('inp-borderbottomstyle')) this.setStyleSelect('border-bottom-style', '.inp-borderbottomstyle');
+    if (cls.contains('inp-borderleftstyle')) this.setStyleSelect('border-left-style', '.inp-borderleftstyle');
+    if (cls.contains('inp-borderrightstyle')) this.setStyleSelect('border-right-style', '.inp-borderrightstyle'); // if(cls.contains('inp-shadowxoffset') ||
+    //     cls.contains('inp-shadowyoffset') ||
+    //     cls.contains('inp-shadowblur') ||
+    //     cls.contains('inp-shadowspread') ||
+    //     cls.contains('inp-shadowtype')) {
+    //     this.setBoxShadow();
+    // }
+
+    this.builder.onChange();
+
+    if (cls.contains('inp-borderwidth') || cls.contains('inp-bordertopwidth') || cls.contains('inp-borderbottomwidth') || cls.contains('inp-borderleftwidth') || cls.contains('inp-borderrightwidth') || cls.contains('inp-borderradius')) {
+      this.refresh();
+    }
+  }
+
+  refresh() {
+    this.getStyle('border-width', '.inp-borderwidth');
+    this.getStyle('border-top-width', '.inp-bordertopwidth');
+    this.getStyle('border-bottom-width', '.inp-borderbottomwidth');
+    this.getStyle('border-left-width', '.inp-borderleftwidth');
+    this.getStyle('border-right-width', '.inp-borderrightwidth');
+    this.getStyleSelect('border-style', '.inp-borderstyle');
+    this.getStyleSelect('border-top-style', '.inp-bordertopstyle');
+    this.getStyleSelect('border-bottom-style', '.inp-borderbottomstyle');
+    this.getStyleSelect('border-left-style', '.inp-borderleftstyle');
+    this.getStyleSelect('border-right-style', '.inp-borderrightstyle'); // this.getBoxShadow();
+
+    const block = this.blockOverlay();
+    const dialog = this.dialog; // Border Color
+
+    const btnBorderColor = dialog.querySelector('.btn-bordercolor');
+    let bordercolor = block.style.borderColor;
+    if (bordercolor) btnBorderColor.style.backgroundColor = bordercolor;else btnBorderColor.style.backgroundColor = ''; // Border Top Color
+
+    const btnBorderTopColor = dialog.querySelector('.btn-bordertopcolor');
+    let bordertopcolor = block.style.borderTopColor;
+    if (bordertopcolor) btnBorderTopColor.style.backgroundColor = bordertopcolor;else btnBorderTopColor.style.backgroundColor = ''; // Border Bottom Color
+
+    const btnBorderBottomColor = dialog.querySelector('.btn-borderbottomcolor');
+    let borderbottomcolor = block.style.borderBottomColor;
+    if (borderbottomcolor) btnBorderBottomColor.style.backgroundColor = borderbottomcolor;else btnBorderBottomColor.style.backgroundColor = ''; // Border Left Color
+
+    const btnBorderLeftColor = dialog.querySelector('.btn-borderleftcolor');
+    let borderleftcolor = block.style.borderLeftColor;
+    if (borderleftcolor) btnBorderLeftColor.style.backgroundColor = borderleftcolor;else btnBorderLeftColor.style.backgroundColor = ''; // Border Right Color
+
+    const btnBorderRightColor = dialog.querySelector('.btn-borderrightcolor');
+    let borderrightcolor = block.style.borderRightColor;
+    if (borderrightcolor) btnBorderRightColor.style.backgroundColor = borderrightcolor;else btnBorderRightColor.style.backgroundColor = '';
+  }
+
+  getState() {
+    this.inpBorderRadius.value = '0';
+    this.inpBlockBorderRadius.value = '0';
+    const blockOverlay = this.blockOverlay();
+
+    if (blockOverlay.style.borderRadius) {
+      let val = parseInt(blockOverlay.style.borderRadius);
+      this.inpBorderRadius.value = val;
+      this.inpBlockBorderRadius.value = val;
+    }
+
+    this.refresh();
+  }
+
+  open() {
+    this.dialog.style.display = 'flex';
+    this.getState();
+  }
+
+  close() {
+    this.dialog.style.display = '';
+  }
+
+  blockOverlay() {
+    let block = this.builder.controlpanel.activeBlock;
+    if (!block) return false;
+    let blockOverlay = block.querySelector('.is-block-overlay');
+
+    if (!blockOverlay) {
+      block.insertAdjacentHTML('beforeend', '<div class="is-block-overlay"></div>');
+      blockOverlay = block.querySelector('.is-block-overlay');
+    }
+
+    return blockOverlay;
+  }
+
+  getStyle(property, selector) {
+    let block = this.blockOverlay();
+    const current = this.parseStyle(block, property);
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const btn = inp.parentNode.querySelector('.btn-unit');
+    inp.value = current.value;
+    btn.innerText = current.unit ? current.unit : '-';
+  }
+
+  setStyle(property, selector) {
+    let block = this.blockOverlay();
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const btn = inp.parentNode.querySelector('.btn-unit');
+    const value = inp.value;
+    let unit = btn.innerText;
+    if (unit === '-') unit = '';
+    block.style[property] = value ? `${value + unit}` : '';
+  }
+
+  setStyleSelect(property, selector) {
+    let block = this.blockOverlay();
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    const value = inp.value;
+    block.style[property] = value;
+  }
+
+  getStyleSelect(property, selector) {
+    let block = this.blockOverlay();
+    let value = block.style[property];
+    const dialog = this.dialog;
+    const inp = dialog.querySelector(selector);
+    inp.value = value;
+  }
+
+  parseStyle(element, property) {
+    const styleValue = element.style[property];
+    const match = styleValue.match(/^([0-9.]+)(px|vw|vh|em|rem|pt|vmin|vmax|%)$/);
+
+    if (match) {
+      const numericValue = match[1];
+      const unit = match[2];
+      return {
+        value: numericValue,
+        unit
+      };
+    } else {
+      return {
+        value: '',
+        unit: 'px'
+      };
+    }
+  }
+
+}
+
 class Element$2 {
   constructor(dialog, builder) {
     this.builder = builder;
@@ -23680,6 +24174,14 @@ class Shadow {
   constructor(dialog, builder) {
     this.builder = builder;
     this.dialog = dialog;
+    let shadowTemplates = this.builder.shadowTemplates;
+    let shadowHtml = '';
+
+    for (let i = 1; i <= shadowTemplates.length; i++) {
+      let item = shadowTemplates[i - 1];
+      shadowHtml += `<button data-shadow="${item}" title="${out('Apply Shadow')}" type="button" style="box-shadow: ${item}">${i}</button>`;
+    }
+
     let html = `
             <button class="btn-back" tabindex="-1" title="${out('Close')}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>
   
@@ -23688,27 +24190,25 @@ class Shadow {
                 <div class="label" style="font-size:18px">${out('Shadow')}</div>
 
                 <div class="div-shadow-list">
-
-                    <button data-shadow="rgba(0, 0, 0, 0.3) 0px 1px 3px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px 0px">1</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.15) 0px 1px 5px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 5px">2</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.16) 0px 3px 6px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px">3</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.22) 0px 10px 10px -5px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 10px -5px">4</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.19) 0px 10px 20px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px">5</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.21) 0px 5px 6px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.21) 0px 5px 6px">6</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.25) 0px 14px 28px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px">7</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.19) 0px 6px 20px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.19) 0px 6px 20px 0px">8</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.08) 4px 17px 20px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.08) 4px 17px 20px">9</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.12) 0px 11px 35px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.12) 0px 11px 35px">10</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.06) 17px 17px 0px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.06) 17px 17px 0px">11</button>
-                    <button data-shadow="rgba(0, 0, 0, 0.1) 0px 0px 40px inset" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px inset">12</button>
-                    <button data-shadow="rgba(22, 22, 22, 0.2) 2em 2em 5em" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgba(22, 22, 22, 0.2) 2em 2em 5em">13</button>
-                    <button data-shadow="rgb(0 0 0 / 24%) 30px 30px 45px" title="${out('Apply Shadow')}" type="button" style="box-shadow: rgb(0 0 0 / 24%) 30px 30px 45px">14</button>
-
+                    ${shadowHtml}
                 </div>
 
                 <div class="group mt-4">
                     <button title="${out('Clear')}" class="btn-clean-shadow"><svg><use xlink:href="#icon-eraser"></use></svg></button>
                 </div>
+
+                <span class="label mt-3">${out('X')}:</span>
+                <div class="mt-2">
+                    <input type="range" min="-100" max="100" value="0" class="inp-shadow-x is-rangeslider" style="width:180px">
+                </div>
+
+                <span class="label mt-3">${out('Y')}:</span>
+                <div class="mt-2">
+                    <input type="range" min="-100" max="100" value="0" class="inp-shadow-y is-rangeslider" style="width:180px">
+                </div>
+
+                <span class="label mt-3">${out('Color')}:</span>
+                <button title="${out('Color')}" class="btn-color is-btn-color"></button>
             </div>
         `;
     dialog.insertAdjacentHTML('beforeend', html);
@@ -23721,28 +24221,176 @@ class Shadow {
     btnShadow.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        const elm = this.builder.controlpanel.objDialogElement.inspectedElement;
-        elm.style.boxShadow = btn.getAttribute('data-shadow');
-        this.builder.controlpanel.objDialogElement.refresh();
+        let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+
+        if (elm) {
+          elm.style.boxShadow = btn.getAttribute('data-shadow');
+          this.builder.controlpanel.objDialogElement.refresh();
+          this.getState();
+        } else {
+          elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+          if (elm) elm.style.boxShadow = btn.getAttribute('data-shadow');
+          this.getState();
+        }
+
         this.builder.onChange();
       });
     });
     const btnCleanShadow = dialog.querySelector('.btn-clean-shadow');
     btnCleanShadow.addEventListener('click', () => {
-      const elm = this.builder.controlpanel.objDialogElement.inspectedElement;
-      elm.style.boxShadow = '';
+      let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+
+      if (elm) {
+        elm.style.boxShadow = '';
+      } else {
+        elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+        if (elm) elm.style.boxShadow = '';
+      }
+
       this.builder.controlpanel.objDialogElement.refresh();
+    }); // Adjustments
+
+    const inpAdjustX = dialog.querySelector('.inp-shadow-x');
+    this.inpAdjustX = inpAdjustX;
+
+    inpAdjustX.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpAdjustX.oninput = () => {
+      // val: 0 - 500
+      let val = inpAdjustX.value;
+      this.adjustX(val);
+    };
+
+    inpAdjustX.onchange = () => {
+      this.builder.onChange();
+    };
+
+    const inpAdjustY = dialog.querySelector('.inp-shadow-y');
+    this.inpAdjustY = inpAdjustY;
+
+    inpAdjustY.onfocus = () => {
+      this.builder.editor.saveForUndo(true);
+    };
+
+    inpAdjustY.oninput = () => {
+      // val: 0 - 500
+      let val = inpAdjustY.value;
+      this.adjustY(val);
+    };
+
+    inpAdjustY.onchange = () => {
+      this.builder.onChange();
+    };
+
+    const btnPicker = dialog.querySelector('.btn-color');
+    this.btnPicker = btnPicker;
+    btnPicker.addEventListener('click', () => {
+      this.builder.editor.saveForUndo(true); // checkLater = true
+
+      let bgcolor = btnPicker.style.backgroundColor;
+      const colorpicker = this.builder.editor.colorpicker();
+      colorpicker.open(s => {
+        this.adjustColor(s);
+        btnPicker.style.backgroundColor = s; // preview
+
+        this.builder.onChange();
+      }, bgcolor);
     });
   }
 
+  getState() {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow.replaceAll(', ', ',');
+      let shadowParts = shadow.split(' ');
+      let currentX, currentY;
+      let color = shadowParts[0];
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('rem') !== -1) {
+          currentX = shadowParts[i];
+          break;
+        }
+      }
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('vw') !== -1) {
+          currentY = shadowParts[i + 1];
+          break;
+        }
+      }
+
+      this.inpAdjustX.value = parseInt(currentX);
+      this.inpAdjustY.value = parseInt(currentY);
+      this.btnPicker.style.backgroundColor = color;
+    }
+  }
+
   open() {
     this.dialog.style.display = 'flex';
+    this.getState();
   }
 
   close() {
     this.dialog.style.display = '';
   }
 
+  adjustX(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow;
+      let shadowParts = shadow.split(' ');
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('rem') !== -1) {
+          shadowParts[i] = val + shadowParts[i].match(/[a-z]+/)[0]; // Updates the X value while keeping the unit intact
+
+          break; // Assuming only one value is for X offset
+        }
+      }
+
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
+  adjustY(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow;
+      let shadowParts = shadow.split(' ');
+
+      for (let i = 0; i < shadowParts.length; i++) {
+        if (shadowParts[i].indexOf('px') !== -1 || shadowParts[i].indexOf('em') !== -1 || shadowParts[i].indexOf('vw') !== -1) {
+          shadowParts[i + 1] = val + shadowParts[i + 1].match(/[a-z]+/)[0]; // Updates the Y value while keeping the unit intact
+
+          break; // Assuming only one value is for Y offset
+        }
+      }
+
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
+  adjustColor(val) {
+    let elm = this.builder.controlpanel.objDialogElement.inspectedElement;
+    if (!elm) elm = this.builder.controlpanel.objDialogBlockOptions.blockOverlay();
+
+    if (elm) {
+      let shadow = elm.style.boxShadow.replaceAll(', ', ',');
+      let shadowParts = shadow.split(' ');
+      shadowParts[0] = val;
+      elm.style.boxShadow = shadowParts.join(' ');
+    }
+  }
+
 }
 
 class ImageAdjust {
@@ -24538,8 +25186,9 @@ class ControlPanel {
                 <div class="panel-dialog element"></div>
                 <div class="panel-dialog imageadjust"></div>
                 <div class="panel-dialog settings"></div>
-                <div class="panel-dialog shadow"></div>
                 <div class="panel-dialog group"></div>
+                <div class="panel-dialog blockoptions"></div>
+                <div class="panel-dialog shadow"></div>
 
                 <div class="panel-pop more" tabIndex="-1" aria-hidden="true">
                     <!--<button class="btn-preferences" title="${out('Preferences')}">${out('Preferences')}</button>-->
@@ -24594,6 +25243,7 @@ class ControlPanel {
     this.dialogImageAdjust = controlPanel.querySelector('.panel-dialog.imageadjust');
     this.dialogSettings = controlPanel.querySelector('.panel-dialog.settings');
     this.dialogGroup = controlPanel.querySelector('.panel-dialog.group');
+    this.dialogBlockOptions = controlPanel.querySelector('.panel-dialog.blockoptions');
     this.more = controlPanel.querySelector('.panel-pop.more');
     this.objDialogIcons = new Icons(this.dialogIcons, this.builder);
     this.objDialogSpacingColumn = new SpacingColumn(this.dialogSpacingColumn, this.builder);
@@ -24604,6 +25254,7 @@ class ControlPanel {
     this.objDialogImageAdjust = new ImageAdjust(this.dialogImageAdjust, this.builder);
     this.objDialogSettings = new Settings(this.dialogSettings, this.builder);
     this.objDialogGroup = new Group(this.dialogGroup, this.builder);
+    this.objDialogBlockOptions = new BlockOptions(this.dialogBlockOptions, this.builder);
     this.objPanelText = new PanelText(this.panelText, this.builder); // comment/disable if using ContentBuilder's controlpanel
 
     this.objPanelImage = new PanelImage(this.panelImage, this.builder);
@@ -24791,6 +25442,7 @@ class ControlPanel {
     this.objDialogShadow.close();
     this.objDialogImageAdjust.close();
     this.objDialogGroup.close();
+    this.objDialogBlockOptions.close();
   }
 
   closeContentDialogs() {
@@ -24801,6 +25453,7 @@ class ControlPanel {
     this.objDialogShadow.close();
     this.objDialogImageAdjust.close();
     this.objDialogGroup.close();
+    this.objDialogBlockOptions.close();
   }
 
   toggleDevice() {
@@ -24974,7 +25627,17 @@ class ControlPanel {
     if (!this.activeBox) this.objDialogSpacingContainer.close();
     if (!this.activeColumn) this.objDialogSpacingColumn.close();
     this.objDialogImageAdjust.close();
-    if (!this.activeBlock) this.objDialogGroup.close(); // Show/hide panel
+    if (!this.activeBlock) this.objDialogGroup.close();
+    if (!this.activeBlock) this.objDialogBlockOptions.close(); // Show/hide panel
+
+    if (e.target.classList.contains('is-block')) {
+      // test: select paragraph on normal section, then select block on canvas section
+      this.select('block'); // freeform
+
+      return;
+    } else {
+      this.objDialogBlockOptions.close();
+    }
 
     if (this.activeElement) this.select('element');
     if (!this.activeElement && this.activeBlock) this.select('block'); // freeform
@@ -25406,6 +26069,14 @@ class ControlPanel {
     if (this.dialogImageAdjust.style.display === 'flex') {
       this.objDialogImageAdjust.getState();
     }
+
+    if (this.dialogBlockOptions.style.display === 'flex') {
+      this.objDialogBlockOptions.getState();
+    }
+
+    if (this.dialogShadow.style.display === 'flex') {
+      this.objDialogShadow.getState();
+    }
   }
 
   showTooltip() {
@@ -73642,7 +74313,8 @@ class Hyperlink {
                 selection = selectionText;
                 const range = selection.getRangeAt(0);
                 const fragment = range.extractContents();
-                const link = document.createElement('a');
+                const link = this.builder.doc.createElement('a'); //
+
                 link.setAttribute('href', url);
                 link.setAttribute('title', title);
                 if (modal.querySelector('.input-newwindow').checked) {
@@ -73662,7 +74334,8 @@ class Hyperlink {
               } else if (selectionElm) {
                 selection = selectionElm;
                 selectionElm.innerHTML = `<a class="dummylink" href="dummy">${linktext}</a>`;
-                let link = document.querySelector('.dummylink');
+                let link = this.builder.doc.querySelector('.dummylink'); //
+
                 link.setAttribute('href', url);
                 link.setAttribute('title', title);
                 if (modal.querySelector('.input-newwindow').checked) {
@@ -108886,6 +109559,37 @@ class Draggable {
     }
   }
   updateBlockStyle(target) {
+    // Block placement should must not 50% outside the container
+    const container = target.closest('.box-canvas');
+    let containerHeight = container.offsetHeight;
+    let containerWidth = container.offsetWidth;
+    /*
+    if(target.offsetTop + target.offsetHeight>=containerHeight) {
+        target.style.top = containerHeight-target.offsetHeight +'px';
+    }
+    if(target.offsetTop<=0) {
+        target.style.top = '0px';
+    }
+    if(target.offsetLeft + target.offsetWidth>=åcontainerWidth) {
+        target.style.left = (containerWidth-target.offsetWidth) +'px';
+    }
+    if(target.offsetLeft<=0) {
+        target.style.left = '0px';
+    }
+    */
+    if (target.offsetTop + target.offsetHeight <= target.offsetHeight / 2) {
+      target.style.top = '0px';
+    }
+    if (containerHeight - target.offsetTop <= target.offsetHeight / 2) {
+      target.style.top = containerHeight - target.offsetHeight + 'px';
+    }
+    if (target.offsetLeft + target.offsetWidth <= target.offsetWidth / 2) {
+      target.style.left = '0px';
+    }
+    if (containerWidth - target.offsetLeft <= target.offsetWidth / 2) {
+      target.style.left = containerWidth - target.offsetWidth + 'px';
+    }
+
     // Replace with ruler's alignment
     if (this.ruler.rulerTop !== null) target.style.top = this.ruler.rulerTop + 'px';
     if (this.ruler.rulerBottom !== null) target.style.top = this.ruler.rulerBottom - target.offsetHeight + 'px'; //new
@@ -114532,6 +115236,18 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
             });
             var html = result[0].html;
             var noedit = result[0].noedit;
+            if (result[0].mode === 'canvas') {
+              html = result[0].html2;
+              if (!html) {
+                html = `
+                                <div class="row">
+                                    <div class="column pt-0 pb-0 pl-0 pr-0 flex flex-col justify-center">
+                                    <img src="${this.opts.snippetPath}images/img-2400x1350.png" alt="">
+                                    </div>
+                                </div>
+                            `;
+              }
+            }
             var bSnippet;
             if (html.indexOf('"row') === -1) {
               bSnippet = true; // Just snippet (without row/column grid)
@@ -145252,6 +145968,7 @@ class ContentBox {
       colors: ['#ff8f00', '#ef6c00', '#d84315', '#c62828', '#58362f', '#37474f', '#353535', '#f9a825', '#9e9d24', '#558b2f', '#ad1457', '#6a1b9a', '#4527a0', '#616161', '#00b8c9', '#009666', '#2e7d32', '#0277bd', '#1565c0', '#283593', '#9e9e9e'],
       swatches: ['#ff8f00', '#ef6c00', '#d84315', '#c62828', '#58362f', '#37474f', '#f9a825', '#9e9d24', '#558b2f', '#ad1457', '#6a1b9a', '#4527a0', '#00b8c9', '#009666', '#2e7d32', '#0277bd', '#1565c0', '#283593'],
       gradientcolors: [['linear-gradient(0deg, rgb(255, 57, 25), rgb(249, 168, 37))', 'light'], ['linear-gradient(0deg, rgb(255, 57, 25), rgb(255, 104, 15))', 'light'], ['linear-gradient(0deg, #FF5722, #FF9800)', 'light'], ['linear-gradient(0deg, #613ca2, rgb(110, 123, 217))', 'light'], ['linear-gradient(0deg, rgb(65, 70, 206), rgb(236, 78, 130))', 'light'], ['linear-gradient(0deg, rgb(0, 150, 102), rgb(90, 103, 197))', 'light'], ['linear-gradient(30deg, rgb(249, 119, 148), rgb(98, 58, 162))', 'light'], ['linear-gradient(0deg, rgb(223, 70, 137), rgb(90, 103, 197))', 'light'], ['linear-gradient(0deg, rgb(40, 53, 147), rgb(90, 103, 197))', 'light'], ['linear-gradient(0deg, rgb(21, 101, 192), rgb(52, 169, 239))', 'light'], ['linear-gradient(0deg, rgb(32, 149, 219), rgb(139, 109, 230))', 'light'], ['linear-gradient(0deg, rgb(90, 103, 197), rgb(0, 184, 201))', 'light'], ['linear-gradient(0deg, rgb(0, 184, 201), rgb(253, 187, 45))', 'light'], ['linear-gradient(0deg, rgb(255, 208, 100), rgb(239, 98, 159))', 'light'], ['linear-gradient(0deg, rgb(0, 214, 223), rgb(130, 162, 253))', 'light'], ['linear-gradient(0deg, rgb(50, 234, 251), rgb(248, 247, 126))', 'dark'], ['linear-gradient(0deg, rgb(141, 221, 255), rgb(255, 227, 255))', 'dark'], ['linear-gradient(0deg, rgb(255, 170, 170), rgb(255, 255, 200))', 'dark'], ['linear-gradient(0deg, rgb(239, 239, 239), rgb(252, 252, 252))', 'dark']],
+      shadowTemplates: ['rgba(0,0,0,0.3) 0px 1px 3px 0px', 'rgba(0,0,0,0.15) 0px 1px 5px', 'rgba(0,0,0,0.16) 0px 3px 6px', 'rgba(0,0,0,0.22) 0px 10px 10px -5px', 'rgba(0,0,0,0.19) 0px 10px 20px', 'rgba(0,0,0,0.21) 0px 5px 6px', 'rgba(0,0,0,0.25) 0px 14px 28px', 'rgba(0,0,0,0.19) 0px 6px 20px 0px', 'rgba(0,0,0,0.08) 4px 17px 20px', 'rgba(0,0,0,0.12) 0px 11px 35px', 'rgba(0,0,0,0.06) 17px 17px 0px', 'rgba(0,0,0,0.1) 0px 0px 40px inset', 'rgba(22,22,22,0.2) 2em 2em 5em', 'rgba(0,0,0,0.24) 30px 30px 45px'],
       photoselect: '',
       moduleConfig: [],
       largerImageHandler: '',