@innovastudio/contentbox 1.6.10 → 1.6.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.esm.js +174 -161
  3. package/public/contentbox/contentbox.min.js +3 -3
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
  }
package/public/contentbox/contentbox.esm.js CHANGED
@@ -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() {