@innovastudio/contentbox 1.6.10 → 1.6.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
3
  "type": "module",
4
- "version": "1.6.10",
4
+ "version": "1.6.11",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
@@ -52,7 +52,7 @@
52
52
  "ws": "^8.13.0"
53
53
  },
54
54
  "dependencies": {
55
- "@innovastudio/contentbuilder": "^1.4.131",
55
+ "@innovastudio/contentbuilder": "^1.4.133",
56
56
  "js-beautify": "^1.14.0"
57
57
  }
58
58
  }
@@ -24544,7 +24544,7 @@ class Dom {
24544
24544
  }
24545
24545
  }
24546
24546
  let blocks = [];
24547
- const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th'];
24547
+ const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th', 'li'];
24548
24548
  elements.forEach(item => {
24549
24549
  const tagName = item.tagName.toLowerCase();
24550
24550
  if (blockElms.includes(tagName)) {
@@ -35423,7 +35423,11 @@ class Draggable$1 {
35423
35423
  const elms = document.querySelectorAll(this.opts.selector);
35424
35424
  Array.prototype.forEach.call(elms, elm => {
35425
35425
  elm.setAttribute('draggable', '');
35426
- elm.addEventListener('touchstart', this.dragStart, false);
35426
+
35427
+ // elm.addEventListener('touchstart', this.dragStart, false);
35428
+ elm.addEventListener('touchstart', this.dragStart, {
35429
+ passive: true
35430
+ });
35427
35431
  elm.addEventListener('touchend', this.dragEnd, false);
35428
35432
  elm.addEventListener('mousedown', this.dragStart, false);
35429
35433
  elm.addEventListener('mouseup', this.dragEnd, false);
@@ -67930,7 +67934,7 @@ class ButtonEditor {
67930
67934
  <div class="flex flex-row">
67931
67935
  <div class="flex flex-col" style="margin-right: 40px;">
67932
67936
  <div>
67933
- <label>${util.out('Background Color')}</label>:
67937
+ <span>${util.out('Background Color')}</span>:
67934
67938
  </div>
67935
67939
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
67936
67940
  <button title="${util.out('Background Color')}" class="bg-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -67939,7 +67943,7 @@ class ButtonEditor {
67939
67943
 
67940
67944
  <div class="flex flex-col">
67941
67945
  <div>
67942
- <label>${util.out('Text Color')}</label>:
67946
+ <span>${util.out('Text Color')}</span>:
67943
67947
  </div>
67944
67948
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
67945
67949
  <button title="${util.out('Text Color')}" class="text-color-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -67947,7 +67951,7 @@ class ButtonEditor {
67947
67951
  </div>
67948
67952
  <div class="flex flex-col" style="margin-left: 60px;">
67949
67953
  <div>
67950
- <label>${util.out('Width')}</label>:
67954
+ <span>${util.out('Width')}</span>:
67951
67955
  </div>
67952
67956
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
67953
67957
  <button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
@@ -67959,7 +67963,7 @@ class ButtonEditor {
67959
67963
  <div class="flex flex-row" style="margin:15px 0 0">
67960
67964
  <div class="flex flex-col" style="margin-right: 40px;">
67961
67965
  <div>
67962
- <label>${util.out('Border Color')}</label>:
67966
+ <span>${util.out('Border Color')}</span>:
67963
67967
  </div>
67964
67968
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
67965
67969
  <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -67969,7 +67973,7 @@ class ButtonEditor {
67969
67973
 
67970
67974
  <div class="flex flex-col">
67971
67975
  <div>
67972
- <label>${util.out('Border Thickness')}</label>:
67976
+ <span>${util.out('Border Thickness')}</span>:
67973
67977
  </div>
67974
67978
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
67975
67979
  <button title="${util.out('No Border')}" data-command="0" class="border-width-command" style="margin-right:4px">${util.out('No Border')}</button>
@@ -67982,7 +67986,7 @@ class ButtonEditor {
67982
67986
  <div class="flex flex-row" style="margin:15px 0 0">
67983
67987
  <div class="flex flex-col" style="margin-right: 20px;">
67984
67988
  <div>
67985
- <label>${util.out('Padding Left/Right')}</label>:
67989
+ <span>${util.out('Padding Left/Right')}</span>:
67986
67990
  </div>
67987
67991
  <div class="flex flex-row" style="margin-top:5px">
67988
67992
  <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
@@ -68001,7 +68005,7 @@ class ButtonEditor {
68001
68005
 
68002
68006
  <div class="flex flex-col" style="display:none">
68003
68007
  <div>
68004
- <label>${util.out('Padding Y')}</label>:
68008
+ <span>${util.out('Padding Y')}</span>:
68005
68009
  </div>
68006
68010
  <div class="flex flex-row" style="margin-top:5px">
68007
68011
  <button title="0" data-command="0" class="paddingy-command" style="margin-right:4px">0</button>
@@ -68017,7 +68021,7 @@ class ButtonEditor {
68017
68021
  <div class="flex flex-row" style="margin:15px 0 0">
68018
68022
  <div class="flex flex-col" style="margin-right: 20px;">
68019
68023
  <div>
68020
- <label>${util.out('Padding Top')}</label>:
68024
+ <span>${util.out('Padding Top')}</span>:
68021
68025
  </div>
68022
68026
  <div class="flex flex-row" style="margin-top:5px">
68023
68027
  <button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
@@ -68031,7 +68035,7 @@ class ButtonEditor {
68031
68035
 
68032
68036
  <div class="flex flex-col">
68033
68037
  <div>
68034
- <label>${util.out('Padding Bottom')}</label>:
68038
+ <span>${util.out('Padding Bottom')}</span>:
68035
68039
  </div>
68036
68040
  <div class="flex flex-row" style="margin-top:5px">
68037
68041
  <button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
@@ -68046,7 +68050,7 @@ class ButtonEditor {
68046
68050
 
68047
68051
  <div class="flex flex-col" style="margin:15px 0 0">
68048
68052
  <div>
68049
- <label>${util.out('Border Radius')}</label>:
68053
+ <span>${util.out('Border Radius')}</span>:
68050
68054
  </div>
68051
68055
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68052
68056
  <button title="${util.out('None')}" data-command="none" class="border-radius-command" style="margin-right:4px">${util.out('None')}</button>
@@ -68064,7 +68068,7 @@ class ButtonEditor {
68064
68068
  <div class="flex flex-row" style="margin:15px 0 0">
68065
68069
  <div class="flex flex-col" style="margin-right: 20px;">
68066
68070
  <div>
68067
- <label>${util.out('Margin Left')}</label>:
68071
+ <span>${util.out('Margin Left')}</span>:
68068
68072
  </div>
68069
68073
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68070
68074
  <button title="0" data-command="0" class="ml-command" style="margin-right:4px">0</button>
@@ -68078,7 +68082,7 @@ class ButtonEditor {
68078
68082
 
68079
68083
  <div class="flex flex-col">
68080
68084
  <div>
68081
- <label>${util.out('Margin Right')}</label>:
68085
+ <span>${util.out('Margin Right')}</span>:
68082
68086
  </div>
68083
68087
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68084
68088
  <button title="0" data-command="0" class="mr-command" style="margin-right:4px">0</button>
@@ -68094,7 +68098,7 @@ class ButtonEditor {
68094
68098
  <div class="flex flex-row" style="margin:15px 0 0">
68095
68099
  <div class="flex flex-col" style="margin-right: 20px;">
68096
68100
  <div>
68097
- <label>${util.out('Margin Top')}</label>:
68101
+ <span>${util.out('Margin Top')}</span>:
68098
68102
  </div>
68099
68103
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68100
68104
  <button title="0" data-command="0" class="mt-command" style="margin-right:4px">0</button>
@@ -68108,7 +68112,7 @@ class ButtonEditor {
68108
68112
 
68109
68113
  <div class="flex flex-col">
68110
68114
  <div>
68111
- <label>${util.out('Margin Bottom')}</label>:
68115
+ <span>${util.out('Margin Bottom')}</span>:
68112
68116
  </div>
68113
68117
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68114
68118
  <button title="0" data-command="0" class="mb-command" style="margin-right:4px">0</button>
@@ -68128,7 +68132,7 @@ class ButtonEditor {
68128
68132
  <div class="flex flex-row">
68129
68133
  <div class="flex-col" style="margin-right: 40px;">
68130
68134
  <div>
68131
- <label>${util.out('Background Color')}</label>:
68135
+ <span>${util.out('Background Color')}</span>:
68132
68136
  </div>
68133
68137
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68134
68138
  <button title="${util.out('Background Color')}" class="bg-color-hover-command" style="width:45px;height:40px;border:rgb(0 0 0 / 6%) 1px solid;margin-right:4px"></button>
@@ -68137,7 +68141,7 @@ class ButtonEditor {
68137
68141
 
68138
68142
  <div class="flex-col">
68139
68143
  <div>
68140
- <label>${util.out('Text Color')}</label>:
68144
+ <span>${util.out('Text Color')}</span>:
68141
68145
  </div>
68142
68146
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68143
68147
  <button title="${util.out('Dark')}" data-command="dark" class="text-color-hover-command" style="margin-right:4px">${util.out('Dark')}</button>
@@ -68149,7 +68153,7 @@ class ButtonEditor {
68149
68153
 
68150
68154
  <div class="flex flex-col" style="margin:15px 0 0">
68151
68155
  <div>
68152
- <label>${util.out('Border Color')}</label>:
68156
+ <span>${util.out('Border Color')}</span>:
68153
68157
  </div>
68154
68158
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68155
68159
  <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -68163,7 +68167,7 @@ class ButtonEditor {
68163
68167
  <div class="flex flex-row">
68164
68168
  <div class="flex flex-col" style="width:250px;margin-right:40px;">
68165
68169
  <div>
68166
- <label>${util.out('Font Size')}</label>:
68170
+ <span>${util.out('Font Size')}</span>:
68167
68171
  </div>
68168
68172
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68169
68173
  <button title="12" data-command="12" class="font-size-command" style="margin-right:4px">12</button>
@@ -68183,7 +68187,7 @@ class ButtonEditor {
68183
68187
 
68184
68188
  <div class="flex flex-col">
68185
68189
  <div>
68186
- <label>${util.out('Upper/Lower')}</label>:
68190
+ <span>${util.out('Upper/Lower')}</span>:
68187
68191
  </div>
68188
68192
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68189
68193
  <button title="${util.out('Bold')}" class="textbold-command" style="width:38px;font-family:serif;font-size:14px;text-transform:initial;margin-right:4px">B</button>
@@ -68196,7 +68200,7 @@ class ButtonEditor {
68196
68200
  <div class="flex flex-row" style="margin:15px 0 0">
68197
68201
  <div class="flex flex-col">
68198
68202
  <div>
68199
- <label>${util.out('Letter Spacing')}</label>:
68203
+ <span>${util.out('Letter Spacing')}</span>:
68200
68204
  </div>
68201
68205
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
68202
68206
  <button title="0" data-command="normal" class="letter-spacing-command" style="margin-right:4px">0</button>
@@ -71862,10 +71866,12 @@ class Table {
71862
71866
  const tableModal = this.tableModal;
71863
71867
  if (tableModal.classList.contains('active') && this.builder.activeTable) {
71864
71868
  let activeTd = this.builder.activeTd;
71865
- tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
71866
- tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
71867
- tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
71868
- tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
71869
+ if (activeTd) {
71870
+ tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
71871
+ tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
71872
+ tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
71873
+ tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
71874
+ }
71869
71875
  } else {
71870
71876
  tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = '';
71871
71877
  tableModal.querySelector('.input-table-textcolor').style.backgroundColor = '';
@@ -91778,7 +91784,11 @@ class Resizeable {
91778
91784
  pane.addEventListener('mousedown', onMouseDown);
91779
91785
  pane.ownerDocument.addEventListener('mousemove', onMove);
91780
91786
  pane.ownerDocument.addEventListener('mouseup', onUp);
91781
- pane.addEventListener('touchstart', onTouchDown);
91787
+
91788
+ // pane.addEventListener('touchstart', onTouchDown);
91789
+ pane.addEventListener('touchstart', onTouchDown, {
91790
+ passive: true
91791
+ });
91782
91792
  pane.ownerDocument.addEventListener('touchmove', onTouchMove);
91783
91793
  pane.ownerDocument.addEventListener('touchend', onTouchEnd);
91784
91794
  const resizing = () => {
@@ -97884,7 +97894,15 @@ class ContentBuilder {
97884
97894
  let selectedText = selection.toString().trim();
97885
97895
  if (selectedText.length > 0) {
97886
97896
  let elm = this.dom.getElm();
97887
- if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
97897
+ if (this.dom.getStyle(elm, 'display') === 'inline') {
97898
+ elm = elm.closest('li,p,h1,h2,h3,h4,h5,h6,div,pre,td,th,li');
97899
+ if (elm) {
97900
+ if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
97901
+ this.dom.selectElementContents(elm);
97902
+ }
97903
+ }
97904
+ } else {
97905
+ // block
97888
97906
  this.dom.selectElementContents(elm);
97889
97907
  }
97890
97908
  }
@@ -99388,47 +99406,48 @@ class ContentBuilder {
99388
99406
  }, 600);
99389
99407
  return;
99390
99408
  }
99391
-
99392
- // Font Family
99393
- let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
99394
- let doc1 = iframeRte.contentWindow.document;
99395
-
99396
- // Icons
99397
- let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
99398
- let doc3 = iframeIcons.contentWindow.document;
99399
- if (doc1.body.innerHTML === '') {
99400
- doc1.open();
99401
- if (!this.opts.emailMode) {
99402
- doc1.write(util.getFontFamilyHTML());
99403
- } else {
99404
- doc1.write(util.getFontFamilyEmail());
99405
- }
99406
- doc1.close();
99407
- } else {
99408
- this.util.refreshFontFamilyStyle1();
99409
- }
99410
- const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
99411
- if (fontModal) {
99412
- let iframePanel = fontModal.querySelector('iframe');
99413
- let doc2 = iframePanel.contentWindow.document;
99414
- if (doc2.body.innerHTML === '') {
99415
- doc2.open();
99409
+ if (!this.controlPanel) {
99410
+ // Font Family
99411
+ let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
99412
+ let doc1 = iframeRte.contentWindow.document;
99413
+
99414
+ // Icons
99415
+ let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
99416
+ let doc3 = iframeIcons.contentWindow.document;
99417
+ if (doc1.body.innerHTML === '') {
99418
+ doc1.open();
99416
99419
  if (!this.opts.emailMode) {
99417
- doc2.write(util.getFontFamilyHTML(true));
99420
+ doc1.write(util.getFontFamilyHTML());
99418
99421
  } else {
99419
- doc2.write(util.getFontFamilyEmail(true));
99422
+ doc1.write(util.getFontFamilyEmail());
99420
99423
  }
99421
- doc2.close();
99424
+ doc1.close();
99422
99425
  } else {
99423
- this.util.refreshFontFamilyStyle2();
99426
+ this.util.refreshFontFamilyStyle1();
99427
+ }
99428
+ const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
99429
+ if (fontModal) {
99430
+ let iframePanel = fontModal.querySelector('iframe');
99431
+ let doc2 = iframePanel.contentWindow.document;
99432
+ if (doc2.body.innerHTML === '') {
99433
+ doc2.open();
99434
+ if (!this.opts.emailMode) {
99435
+ doc2.write(util.getFontFamilyHTML(true));
99436
+ } else {
99437
+ doc2.write(util.getFontFamilyEmail(true));
99438
+ }
99439
+ doc2.close();
99440
+ } else {
99441
+ this.util.refreshFontFamilyStyle2();
99442
+ }
99443
+ }
99444
+ if (doc3.body.innerHTML === '') {
99445
+ doc3.open();
99446
+ doc3.write(this.rte.getIconsHTML());
99447
+ doc3.close();
99448
+ } else {
99449
+ this.rte.refreshIconsStyle();
99424
99450
  }
99425
- }
99426
- if (doc3.body.innerHTML === '') {
99427
- doc3.open();
99428
- doc3.write(this.rte.getIconsHTML());
99429
- doc3.close();
99430
- } else {
99431
- this.rte.refreshIconsStyle();
99432
99451
  }
99433
99452
 
99434
99453
  // Snippets (Modal)
@@ -99879,27 +99898,24 @@ class ContentBuilder {
99879
99898
  span.setAttribute('data-keep', '');
99880
99899
  });
99881
99900
 
99882
- // // Cleanup all elements with unwanted style
99883
- // let elms = col.querySelectorAll('*');
99884
- // Array.prototype.forEach.call(elms, (elm) => {
99885
- // let attr = elm.getAttribute('style');
99886
- // if(attr) {
99887
- // if(attr.indexOf('font-size')!==-1){
99888
- // elm.setAttribute('data-keep-font-size','');
99889
- // }
99890
- // if(attr.indexOf('background-color')!==-1){
99891
- // elm.setAttribute('data-keep-background-color','');
99892
- // }
99893
- // if(attr.indexOf('background')!==-1){
99894
- // elm.setAttribute('data-keep-background','');
99895
- // }
99896
- // if(attr.indexOf('line-height')!==-1){
99897
- // elm.setAttribute('data-keep-line-height','');
99898
- // }
99899
- // }
99900
- // });
99901
- // this.autoclean=true;
99902
-
99901
+ // Cleanup all elements with unwanted style
99902
+ let elms = col.querySelectorAll('[style]');
99903
+ elms.forEach(elm => {
99904
+ let attr = elm.getAttribute('style');
99905
+ if (attr.includes('font-size')) {
99906
+ elm.setAttribute('data-keep-font-size', '');
99907
+ }
99908
+ if (attr.includes('background-color')) {
99909
+ elm.setAttribute('data-keep-background-color', '');
99910
+ }
99911
+ if (attr.includes('background')) {
99912
+ elm.setAttribute('data-keep-background', '');
99913
+ }
99914
+ if (attr.includes('line-height')) {
99915
+ elm.setAttribute('data-keep-line-height', '');
99916
+ }
99917
+ });
99918
+ this.autoclean = true;
99903
99919
  if ((e.ctrlKey || e.metaKey) && e.which === 86) ;
99904
99920
  if (this.opts.elementSelection && !this.emailMode) {
99905
99921
  if ((e.ctrlKey || e.metaKey) && e.which === 65) {
@@ -100244,61 +100260,42 @@ class ContentBuilder {
100244
100260
  }
100245
100261
  });
100246
100262
 
100247
- // // Cleanup all elements with unwanted style
100248
- // if(this.autoclean){
100249
- // let elms = col.querySelectorAll('*');
100250
- // Array.prototype.forEach.call(elms, (elm) => {
100251
- // let attr = elm.getAttribute('style');
100252
- // if(attr) {
100253
- // if(attr.indexOf('font-size')!==-1){
100254
- // let attrkeep = elm.getAttribute('data-keep-font-size');
100255
- // if (!attrkeep) {
100256
- // // Remove unwanted font size
100257
- // elm.style.fontSize = '';
100258
- // }
100259
- // }
100260
- // if(attr.indexOf('background-color')!==-1){
100261
- // let attrkeep = elm.getAttribute('data-keep-background-color');
100262
- // if (!attrkeep) {
100263
- // // Remove unwanted background color
100264
- // elm.style.backgroundColor = '';
100265
- // }
100266
- // }
100267
- // if(attr.indexOf('background')!==-1){
100268
- // let attrkeep = elm.getAttribute('data-keep-background');
100269
- // if (!attrkeep) {
100270
- // // Remove unwanted background
100271
- // elm.style.background = '';
100272
- // }
100273
- // }
100274
- // if(attr.indexOf('line-height')!==-1){
100275
- // let attrkeep = elm.getAttribute('data-keep-line-height');
100276
- // if (!attrkeep) {
100277
- // // Remove unwanted line height
100278
- // elm.style.lineHeight = '';
100279
- // }
100280
- // }
100281
- // }
100282
- // });
100283
- // elms = col.querySelectorAll('[data-keep-font-size]');
100284
- // Array.prototype.forEach.call(elms, (elm) => {
100285
- // elm.removeAttribute('data-keep-font-size');
100286
- // });
100287
- // elms = col.querySelectorAll('[data-keep-background-color]');
100288
- // Array.prototype.forEach.call(elms, (elm) => {
100289
- // elm.removeAttribute('data-keep-background-color');
100290
- // });
100291
- // elms = col.querySelectorAll('[data-keep-background]');
100292
- // Array.prototype.forEach.call(elms, (elm) => {
100293
- // elm.removeAttribute('data-keep-background');
100294
- // });
100295
- // elms = col.querySelectorAll('[data-keep-line-height]');
100296
- // Array.prototype.forEach.call(elms, (elm) => {
100297
- // elm.removeAttribute('data-keep-line-height');
100298
- // });
100299
- // }
100300
- // this.autoclean =false;
100301
-
100263
+ // Cleanup all elements with unwanted style
100264
+ if (this.autoclean) {
100265
+ let elms = col.querySelectorAll('[style]');
100266
+ elms.forEach(elm => {
100267
+ let attr = elm.getAttribute('style');
100268
+ if (attr.includes('font-size')) {
100269
+ let attrkeep = elm.hasAttribute('data-keep-font-size');
100270
+ if (!attrkeep) {
100271
+ elm.style.fontSize = '';
100272
+ }
100273
+ }
100274
+ if (attr.includes('background-color')) {
100275
+ let attrkeep = elm.hasAttribute('data-keep-background-color');
100276
+ if (!attrkeep) {
100277
+ elm.style.backgroundColor = '';
100278
+ }
100279
+ }
100280
+ if (attr.includes('background')) {
100281
+ let attrkeep = elm.hasAttribute('data-keep-background');
100282
+ if (!attrkeep) {
100283
+ elm.style.background = '';
100284
+ }
100285
+ }
100286
+ if (attr.includes('line-height')) {
100287
+ let attrkeep = elm.hasAttribute('data-keep-line-height');
100288
+ if (!attrkeep) {
100289
+ elm.style.lineHeight = '';
100290
+ }
100291
+ }
100292
+ });
100293
+ col.querySelectorAll('[data-keep-font-size]').forEach(elm => elm.removeAttribute('data-keep-font-size'));
100294
+ col.querySelectorAll('[data-keep-background-color]').forEach(elm => elm.removeAttribute('data-keep-background-color'));
100295
+ col.querySelectorAll('[data-keep-background]').forEach(elm => elm.removeAttribute('data-keep-background'));
100296
+ col.querySelectorAll('[data-keep-line-height]').forEach(elm => elm.removeAttribute('data-keep-line-height'));
100297
+ }
100298
+ this.autoclean = false;
100302
100299
  var el;
100303
100300
  // var curr;
100304
100301
  try {
@@ -100562,25 +100559,31 @@ class ContentBuilder {
100562
100559
  <span class="size-24">Heading</span>
100563
100560
  So, blocks checking below is made to fix it.
100564
100561
  */
100565
- let blockSelection = false;
100566
- if (blocks.length === 1) {
100567
- if (blocks[0].innerText.trim() === selection.toString().trim()) {
100568
- let range = document.createRange();
100569
- range.selectNodeContents(blocks[0]);
100570
- selection.removeAllRanges();
100571
- selection.addRange(range);
100572
- blockSelection = true;
100573
- }
100574
- }
100575
- if (!blockSelection) {
100576
- const container = this.dom.getElm();
100577
- const sameSelection = container && container.innerText === selection.toString().trim();
100578
- if (sameSelection || selection.toString().trim() === '') {
100579
- let range = document.createRange();
100580
- range.selectNodeContents(container);
100581
- selection.removeAllRanges();
100582
- selection.addRange(range);
100562
+ try {
100563
+ let blockSelection = false;
100564
+ if (selection.toString().trim() !== '') {
100565
+ if (blocks.length === 1) {
100566
+ if (blocks[0].innerText.trim() === selection.toString().trim()) {
100567
+ let range = document.createRange();
100568
+ range.selectNodeContents(blocks[0]);
100569
+ selection.removeAllRanges();
100570
+ selection.addRange(range);
100571
+ blockSelection = true;
100572
+ }
100573
+ }
100574
+ if (!blockSelection) {
100575
+ const container = this.dom.getElm();
100576
+ const sameSelection = container && container.innerText === selection.toString().trim();
100577
+ if (sameSelection || selection.toString().trim() === '') {
100578
+ let range = document.createRange();
100579
+ range.selectNodeContents(container);
100580
+ selection.removeAllRanges();
100581
+ selection.addRange(range);
100582
+ }
100583
+ }
100583
100584
  }
100585
+ } catch (e) {
100586
+ // Do Nothing
100584
100587
  }
100585
100588
  this.doc.execCommand('insertHTML', false, sPastedText);
100586
100589
  if (this.activeCol) {
@@ -125298,7 +125301,12 @@ class IframePanel {
125298
125301
  }
125299
125302
 
125300
125303
  document.body.style.overflowY = 'hidden';
125301
- let checkLoad = setInterval(() => {
125304
+
125305
+ const sleep = s => new Promise(p => setTimeout(p, s * 1000 | 0));
125306
+
125307
+ const timeoutHandler = async () => {
125308
+ await sleep(0.2);
125309
+
125302
125310
  if (iframe.contentDocument.readyState === 'complete') {
125303
125311
  iframe.contentDocument.body.classList.add('iframe-body'); // add .iframe-body class that is required by box/flex.css
125304
125312
  // Check if editable container is ready
@@ -125306,13 +125314,18 @@ class IframePanel {
125306
125314
  let wrapper = iframe.contentDocument.querySelector(this.opts.page);
125307
125315
 
125308
125316
  if (wrapper) {
125309
- clearInterval(checkLoad);
125310
125317
  this.onReady(iframe);
125318
+ } else {
125319
+ timeoutHandler();
125311
125320
  }
125312
125321
 
125313
125322
  iframe.contentDocument.body.style.display = 'flex'; // this removes empty space at the bottom of the page
125323
+ } else {
125324
+ timeoutHandler();
125314
125325
  }
125315
- }, 200);
125326
+ };
125327
+
125328
+ timeoutHandler();
125316
125329
  }
125317
125330
 
125318
125331
  showTooltip() {