@innovastudio/contentbuilder 1.4.130 → 1.4.132

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/contentbuilder",
3
3
  "type": "module",
4
- "version": "1.4.130",
4
+ "version": "1.4.132",
5
5
  "description": "",
6
6
  "main": "public/contentbuilder/contentbuilder.esm.js",
7
7
  "files": [
@@ -1853,7 +1853,6 @@ class Util {
1853
1853
  const dom = this.dom;
1854
1854
  const html = `
1855
1855
  <input type="text" class="style-helper-input" style="display:none;">
1856
- <label class="style-helper-label" style="display:none;"></label>
1857
1856
  <button class="style-helper-button-classic classic" style="display:none;"><svg><use xlink:href="#ion-code-working"></use></svg></button>
1858
1857
  <select class="style-helper-select" style="display:none;"><option value=""></option></select>
1859
1858
 
@@ -1901,7 +1900,6 @@ class Util {
1901
1900
  return window.getComputedStyle(btn.querySelector('svg'), null).getPropertyValue('fill');
1902
1901
  };
1903
1902
  const inp = this.builder.builderStuff.querySelector('.style-helper-input');
1904
- const lbl = this.builder.builderStuff.querySelector('.style-helper-label');
1905
1903
  const sel = this.builder.builderStuff.querySelector('.style-helper-select');
1906
1904
  const btnClassic = this.builder.builderStuff.querySelector('.style-helper-button-classic');
1907
1905
  this.builder.styleModalColor = getVal('.modal-color', 'background-color');
@@ -1946,9 +1944,6 @@ class Util {
1946
1944
  this.builder.styleInputBorderBottom = window.getComputedStyle(inp, null).getPropertyValue('border-bottom');
1947
1945
  this.builder.styleInputColor = window.getComputedStyle(inp, null).getPropertyValue('color');
1948
1946
 
1949
- // Label (ex. used in 'Search & Replace' plugin)
1950
- this.builder.styleLabelColor = window.getComputedStyle(lbl, null).getPropertyValue('color');
1951
-
1952
1947
  // Button Classic (ex. used in 'Search & Replace' plugin)
1953
1948
  this.builder.styleButtonClassicBackground = window.getComputedStyle(btnClassic, null).getPropertyValue('background-color');
1954
1949
  this.builder.styleButtonClassicColor = window.getComputedStyle(btnClassic, null).getPropertyValue('color');
@@ -3598,7 +3593,7 @@ class Dom {
3598
3593
  }
3599
3594
  }
3600
3595
  let blocks = [];
3601
- const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th'];
3596
+ const blockElms = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'td', 'th', 'li'];
3602
3597
  elements.forEach(item => {
3603
3598
  const tagName = item.tagName.toLowerCase();
3604
3599
  if (blockElms.includes(tagName)) {
@@ -14477,7 +14472,11 @@ class Draggable$1 {
14477
14472
  const elms = document.querySelectorAll(this.opts.selector);
14478
14473
  Array.prototype.forEach.call(elms, elm => {
14479
14474
  elm.setAttribute('draggable', '');
14480
- elm.addEventListener('touchstart', this.dragStart, false);
14475
+
14476
+ // elm.addEventListener('touchstart', this.dragStart, false);
14477
+ elm.addEventListener('touchstart', this.dragStart, {
14478
+ passive: true
14479
+ });
14481
14480
  elm.addEventListener('touchend', this.dragEnd, false);
14482
14481
  elm.addEventListener('mousedown', this.dragStart, false);
14483
14482
  elm.addEventListener('mouseup', this.dragEnd, false);
@@ -46984,7 +46983,7 @@ class ButtonEditor {
46984
46983
  <div class="flex flex-row">
46985
46984
  <div class="flex flex-col" style="margin-right: 40px;">
46986
46985
  <div>
46987
- <label>${util.out('Background Color')}</label>:
46986
+ <span>${util.out('Background Color')}</span>:
46988
46987
  </div>
46989
46988
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
46990
46989
  <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>
@@ -46993,7 +46992,7 @@ class ButtonEditor {
46993
46992
 
46994
46993
  <div class="flex flex-col">
46995
46994
  <div>
46996
- <label>${util.out('Text Color')}</label>:
46995
+ <span>${util.out('Text Color')}</span>:
46997
46996
  </div>
46998
46997
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
46999
46998
  <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>
@@ -47001,7 +47000,7 @@ class ButtonEditor {
47001
47000
  </div>
47002
47001
  <div class="flex flex-col" style="margin-left: 60px;">
47003
47002
  <div>
47004
- <label>${util.out('Width')}</label>:
47003
+ <span>${util.out('Width')}</span>:
47005
47004
  </div>
47006
47005
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47007
47006
  <button title="${util.out('Auto')}" data-command="auto" class="width-command" style="margin-right:4px">${util.out('Auto')}</button>
@@ -47013,7 +47012,7 @@ class ButtonEditor {
47013
47012
  <div class="flex flex-row" style="margin:15px 0 0">
47014
47013
  <div class="flex flex-col" style="margin-right: 40px;">
47015
47014
  <div>
47016
- <label>${util.out('Border Color')}</label>:
47015
+ <span>${util.out('Border Color')}</span>:
47017
47016
  </div>
47018
47017
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47019
47018
  <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -47023,7 +47022,7 @@ class ButtonEditor {
47023
47022
 
47024
47023
  <div class="flex flex-col">
47025
47024
  <div>
47026
- <label>${util.out('Border Thickness')}</label>:
47025
+ <span>${util.out('Border Thickness')}</span>:
47027
47026
  </div>
47028
47027
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47029
47028
  <button title="${util.out('No Border')}" data-command="0" class="border-width-command" style="margin-right:4px">${util.out('No Border')}</button>
@@ -47036,7 +47035,7 @@ class ButtonEditor {
47036
47035
  <div class="flex flex-row" style="margin:15px 0 0">
47037
47036
  <div class="flex flex-col" style="margin-right: 20px;">
47038
47037
  <div>
47039
- <label>${util.out('Padding Left/Right')}</label>:
47038
+ <span>${util.out('Padding Left/Right')}</span>:
47040
47039
  </div>
47041
47040
  <div class="flex flex-row" style="margin-top:5px">
47042
47041
  <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
@@ -47055,7 +47054,7 @@ class ButtonEditor {
47055
47054
 
47056
47055
  <div class="flex flex-col" style="display:none">
47057
47056
  <div>
47058
- <label>${util.out('Padding Y')}</label>:
47057
+ <span>${util.out('Padding Y')}</span>:
47059
47058
  </div>
47060
47059
  <div class="flex flex-row" style="margin-top:5px">
47061
47060
  <button title="0" data-command="0" class="paddingy-command" style="margin-right:4px">0</button>
@@ -47071,7 +47070,7 @@ class ButtonEditor {
47071
47070
  <div class="flex flex-row" style="margin:15px 0 0">
47072
47071
  <div class="flex flex-col" style="margin-right: 20px;">
47073
47072
  <div>
47074
- <label>${util.out('Padding Top')}</label>:
47073
+ <span>${util.out('Padding Top')}</span>:
47075
47074
  </div>
47076
47075
  <div class="flex flex-row" style="margin-top:5px">
47077
47076
  <button title="0" data-command="0" class="paddingtop-command" style="margin-right:4px">0</button>
@@ -47085,7 +47084,7 @@ class ButtonEditor {
47085
47084
 
47086
47085
  <div class="flex flex-col">
47087
47086
  <div>
47088
- <label>${util.out('Padding Bottom')}</label>:
47087
+ <span>${util.out('Padding Bottom')}</span>:
47089
47088
  </div>
47090
47089
  <div class="flex flex-row" style="margin-top:5px">
47091
47090
  <button title="0" data-command="0" class="paddingbottom-command" style="margin-right:4px">0</button>
@@ -47100,7 +47099,7 @@ class ButtonEditor {
47100
47099
 
47101
47100
  <div class="flex flex-col" style="margin:15px 0 0">
47102
47101
  <div>
47103
- <label>${util.out('Border Radius')}</label>:
47102
+ <span>${util.out('Border Radius')}</span>:
47104
47103
  </div>
47105
47104
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47106
47105
  <button title="${util.out('None')}" data-command="none" class="border-radius-command" style="margin-right:4px">${util.out('None')}</button>
@@ -47118,7 +47117,7 @@ class ButtonEditor {
47118
47117
  <div class="flex flex-row" style="margin:15px 0 0">
47119
47118
  <div class="flex flex-col" style="margin-right: 20px;">
47120
47119
  <div>
47121
- <label>${util.out('Margin Left')}</label>:
47120
+ <span>${util.out('Margin Left')}</span>:
47122
47121
  </div>
47123
47122
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47124
47123
  <button title="0" data-command="0" class="ml-command" style="margin-right:4px">0</button>
@@ -47132,7 +47131,7 @@ class ButtonEditor {
47132
47131
 
47133
47132
  <div class="flex flex-col">
47134
47133
  <div>
47135
- <label>${util.out('Margin Right')}</label>:
47134
+ <span>${util.out('Margin Right')}</span>:
47136
47135
  </div>
47137
47136
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47138
47137
  <button title="0" data-command="0" class="mr-command" style="margin-right:4px">0</button>
@@ -47148,7 +47147,7 @@ class ButtonEditor {
47148
47147
  <div class="flex flex-row" style="margin:15px 0 0">
47149
47148
  <div class="flex flex-col" style="margin-right: 20px;">
47150
47149
  <div>
47151
- <label>${util.out('Margin Top')}</label>:
47150
+ <span>${util.out('Margin Top')}</span>:
47152
47151
  </div>
47153
47152
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47154
47153
  <button title="0" data-command="0" class="mt-command" style="margin-right:4px">0</button>
@@ -47162,7 +47161,7 @@ class ButtonEditor {
47162
47161
 
47163
47162
  <div class="flex flex-col">
47164
47163
  <div>
47165
- <label>${util.out('Margin Bottom')}</label>:
47164
+ <span>${util.out('Margin Bottom')}</span>:
47166
47165
  </div>
47167
47166
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47168
47167
  <button title="0" data-command="0" class="mb-command" style="margin-right:4px">0</button>
@@ -47182,7 +47181,7 @@ class ButtonEditor {
47182
47181
  <div class="flex flex-row">
47183
47182
  <div class="flex-col" style="margin-right: 40px;">
47184
47183
  <div>
47185
- <label>${util.out('Background Color')}</label>:
47184
+ <span>${util.out('Background Color')}</span>:
47186
47185
  </div>
47187
47186
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47188
47187
  <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>
@@ -47191,7 +47190,7 @@ class ButtonEditor {
47191
47190
 
47192
47191
  <div class="flex-col">
47193
47192
  <div>
47194
- <label>${util.out('Text Color')}</label>:
47193
+ <span>${util.out('Text Color')}</span>:
47195
47194
  </div>
47196
47195
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47197
47196
  <button title="${util.out('Dark')}" data-command="dark" class="text-color-hover-command" style="margin-right:4px">${util.out('Dark')}</button>
@@ -47203,7 +47202,7 @@ class ButtonEditor {
47203
47202
 
47204
47203
  <div class="flex flex-col" style="margin:15px 0 0">
47205
47204
  <div>
47206
- <label>${util.out('Border Color')}</label>:
47205
+ <span>${util.out('Border Color')}</span>:
47207
47206
  </div>
47208
47207
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47209
47208
  <button title="${util.out('Transparent')}" data-command="transparent" class="border-color-hover-command" style="margin-right:4px">${util.out('Transparent')}</button>
@@ -47217,7 +47216,7 @@ class ButtonEditor {
47217
47216
  <div class="flex flex-row">
47218
47217
  <div class="flex flex-col" style="width:250px;margin-right:40px;">
47219
47218
  <div>
47220
- <label>${util.out('Font Size')}</label>:
47219
+ <span>${util.out('Font Size')}</span>:
47221
47220
  </div>
47222
47221
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47223
47222
  <button title="12" data-command="12" class="font-size-command" style="margin-right:4px">12</button>
@@ -47237,7 +47236,7 @@ class ButtonEditor {
47237
47236
 
47238
47237
  <div class="flex flex-col">
47239
47238
  <div>
47240
- <label>${util.out('Upper/Lower')}</label>:
47239
+ <span>${util.out('Upper/Lower')}</span>:
47241
47240
  </div>
47242
47241
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47243
47242
  <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>
@@ -47250,7 +47249,7 @@ class ButtonEditor {
47250
47249
  <div class="flex flex-row" style="margin:15px 0 0">
47251
47250
  <div class="flex flex-col">
47252
47251
  <div>
47253
- <label>${util.out('Letter Spacing')}</label>:
47252
+ <span>${util.out('Letter Spacing')}</span>:
47254
47253
  </div>
47255
47254
  <div class="flex flex-row flex-wrap" style="margin-top:5px">
47256
47255
  <button title="0" data-command="normal" class="letter-spacing-command" style="margin-right:4px">0</button>
@@ -50916,10 +50915,12 @@ class Table {
50916
50915
  const tableModal = this.tableModal;
50917
50916
  if (tableModal.classList.contains('active') && this.builder.activeTable) {
50918
50917
  let activeTd = this.builder.activeTd;
50919
- tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
50920
- tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
50921
- tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
50922
- tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
50918
+ if (activeTd) {
50919
+ tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = activeTd.style.backgroundColor;
50920
+ tableModal.querySelector('.input-table-textcolor').style.backgroundColor = activeTd.style.color;
50921
+ tableModal.querySelector('.input-table-bordercolor').style.backgroundColor = activeTd.style.borderColor;
50922
+ tableModal.querySelector('#selCellBorderWidth').value = parseInt(activeTd.style.borderWidth);
50923
+ }
50923
50924
  } else {
50924
50925
  tableModal.querySelector('.input-table-bgcolor').style.backgroundColor = '';
50925
50926
  tableModal.querySelector('.input-table-textcolor').style.backgroundColor = '';
@@ -70832,7 +70833,11 @@ class Resizeable {
70832
70833
  pane.addEventListener('mousedown', onMouseDown);
70833
70834
  pane.ownerDocument.addEventListener('mousemove', onMove);
70834
70835
  pane.ownerDocument.addEventListener('mouseup', onUp);
70835
- pane.addEventListener('touchstart', onTouchDown);
70836
+
70837
+ // pane.addEventListener('touchstart', onTouchDown);
70838
+ pane.addEventListener('touchstart', onTouchDown, {
70839
+ passive: true
70840
+ });
70836
70841
  pane.ownerDocument.addEventListener('touchmove', onTouchMove);
70837
70842
  pane.ownerDocument.addEventListener('touchend', onTouchEnd);
70838
70843
  const resizing = () => {
@@ -76938,7 +76943,15 @@ class ContentBuilder {
76938
76943
  let selectedText = selection.toString().trim();
76939
76944
  if (selectedText.length > 0) {
76940
76945
  let elm = this.dom.getElm();
76941
- if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
76946
+ if (this.dom.getStyle(elm, 'display') === 'inline') {
76947
+ elm = elm.closest('li,p,h1,h2,h3,h4,h5,h6,div,pre,td,th,li');
76948
+ if (elm) {
76949
+ if (!this.dom.hasClass(elm.parentNode.parentNode, 'is-builder')) {
76950
+ this.dom.selectElementContents(elm);
76951
+ }
76952
+ }
76953
+ } else {
76954
+ // block
76942
76955
  this.dom.selectElementContents(elm);
76943
76956
  }
76944
76957
  }
@@ -78442,47 +78455,48 @@ class ContentBuilder {
78442
78455
  }, 600);
78443
78456
  return;
78444
78457
  }
78458
+ if (!this.controlPanel) {
78459
+ // Font Family
78460
+ let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
78461
+ let doc1 = iframeRte.contentWindow.document;
78445
78462
 
78446
- // Font Family
78447
- let iframeRte = this.rte.rteFontFamilyOptions.querySelector('iframe');
78448
- let doc1 = iframeRte.contentWindow.document;
78449
-
78450
- // Icons
78451
- let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
78452
- let doc3 = iframeIcons.contentWindow.document;
78453
- if (doc1.body.innerHTML === '') {
78454
- doc1.open();
78455
- if (!this.opts.emailMode) {
78456
- doc1.write(util.getFontFamilyHTML());
78457
- } else {
78458
- doc1.write(util.getFontFamilyEmail());
78459
- }
78460
- doc1.close();
78461
- } else {
78462
- this.util.refreshFontFamilyStyle1();
78463
- }
78464
- const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
78465
- if (fontModal) {
78466
- let iframePanel = fontModal.querySelector('iframe');
78467
- let doc2 = iframePanel.contentWindow.document;
78468
- if (doc2.body.innerHTML === '') {
78469
- doc2.open();
78463
+ // Icons
78464
+ let iframeIcons = this.rte.rteIconOptions.querySelector('iframe');
78465
+ let doc3 = iframeIcons.contentWindow.document;
78466
+ if (doc1.body.innerHTML === '') {
78467
+ doc1.open();
78470
78468
  if (!this.opts.emailMode) {
78471
- doc2.write(util.getFontFamilyHTML(true));
78469
+ doc1.write(util.getFontFamilyHTML());
78472
78470
  } else {
78473
- doc2.write(util.getFontFamilyEmail(true));
78471
+ doc1.write(util.getFontFamilyEmail());
78474
78472
  }
78475
- doc2.close();
78473
+ doc1.close();
78476
78474
  } else {
78477
- this.util.refreshFontFamilyStyle2();
78475
+ this.util.refreshFontFamilyStyle1();
78476
+ }
78477
+ const fontModal = this.builderStuff.querySelector('.is-modal.pickfontfamily');
78478
+ if (fontModal) {
78479
+ let iframePanel = fontModal.querySelector('iframe');
78480
+ let doc2 = iframePanel.contentWindow.document;
78481
+ if (doc2.body.innerHTML === '') {
78482
+ doc2.open();
78483
+ if (!this.opts.emailMode) {
78484
+ doc2.write(util.getFontFamilyHTML(true));
78485
+ } else {
78486
+ doc2.write(util.getFontFamilyEmail(true));
78487
+ }
78488
+ doc2.close();
78489
+ } else {
78490
+ this.util.refreshFontFamilyStyle2();
78491
+ }
78492
+ }
78493
+ if (doc3.body.innerHTML === '') {
78494
+ doc3.open();
78495
+ doc3.write(this.rte.getIconsHTML());
78496
+ doc3.close();
78497
+ } else {
78498
+ this.rte.refreshIconsStyle();
78478
78499
  }
78479
- }
78480
- if (doc3.body.innerHTML === '') {
78481
- doc3.open();
78482
- doc3.write(this.rte.getIconsHTML());
78483
- doc3.close();
78484
- } else {
78485
- this.rte.refreshIconsStyle();
78486
78500
  }
78487
78501
 
78488
78502
  // Snippets (Modal)
@@ -78933,27 +78947,24 @@ class ContentBuilder {
78933
78947
  span.setAttribute('data-keep', '');
78934
78948
  });
78935
78949
 
78936
- // // Cleanup all elements with unwanted style
78937
- // let elms = col.querySelectorAll('*');
78938
- // Array.prototype.forEach.call(elms, (elm) => {
78939
- // let attr = elm.getAttribute('style');
78940
- // if(attr) {
78941
- // if(attr.indexOf('font-size')!==-1){
78942
- // elm.setAttribute('data-keep-font-size','');
78943
- // }
78944
- // if(attr.indexOf('background-color')!==-1){
78945
- // elm.setAttribute('data-keep-background-color','');
78946
- // }
78947
- // if(attr.indexOf('background')!==-1){
78948
- // elm.setAttribute('data-keep-background','');
78949
- // }
78950
- // if(attr.indexOf('line-height')!==-1){
78951
- // elm.setAttribute('data-keep-line-height','');
78952
- // }
78953
- // }
78954
- // });
78955
- // this.autoclean=true;
78956
-
78950
+ // Cleanup all elements with unwanted style
78951
+ let elms = col.querySelectorAll('[style]');
78952
+ elms.forEach(elm => {
78953
+ let attr = elm.getAttribute('style');
78954
+ if (attr.includes('font-size')) {
78955
+ elm.setAttribute('data-keep-font-size', '');
78956
+ }
78957
+ if (attr.includes('background-color')) {
78958
+ elm.setAttribute('data-keep-background-color', '');
78959
+ }
78960
+ if (attr.includes('background')) {
78961
+ elm.setAttribute('data-keep-background', '');
78962
+ }
78963
+ if (attr.includes('line-height')) {
78964
+ elm.setAttribute('data-keep-line-height', '');
78965
+ }
78966
+ });
78967
+ this.autoclean = true;
78957
78968
  if ((e.ctrlKey || e.metaKey) && e.which === 86) ;
78958
78969
  if (this.opts.elementSelection && !this.emailMode) {
78959
78970
  if ((e.ctrlKey || e.metaKey) && e.which === 65) {
@@ -79298,61 +79309,42 @@ class ContentBuilder {
79298
79309
  }
79299
79310
  });
79300
79311
 
79301
- // // Cleanup all elements with unwanted style
79302
- // if(this.autoclean){
79303
- // let elms = col.querySelectorAll('*');
79304
- // Array.prototype.forEach.call(elms, (elm) => {
79305
- // let attr = elm.getAttribute('style');
79306
- // if(attr) {
79307
- // if(attr.indexOf('font-size')!==-1){
79308
- // let attrkeep = elm.getAttribute('data-keep-font-size');
79309
- // if (!attrkeep) {
79310
- // // Remove unwanted font size
79311
- // elm.style.fontSize = '';
79312
- // }
79313
- // }
79314
- // if(attr.indexOf('background-color')!==-1){
79315
- // let attrkeep = elm.getAttribute('data-keep-background-color');
79316
- // if (!attrkeep) {
79317
- // // Remove unwanted background color
79318
- // elm.style.backgroundColor = '';
79319
- // }
79320
- // }
79321
- // if(attr.indexOf('background')!==-1){
79322
- // let attrkeep = elm.getAttribute('data-keep-background');
79323
- // if (!attrkeep) {
79324
- // // Remove unwanted background
79325
- // elm.style.background = '';
79326
- // }
79327
- // }
79328
- // if(attr.indexOf('line-height')!==-1){
79329
- // let attrkeep = elm.getAttribute('data-keep-line-height');
79330
- // if (!attrkeep) {
79331
- // // Remove unwanted line height
79332
- // elm.style.lineHeight = '';
79333
- // }
79334
- // }
79335
- // }
79336
- // });
79337
- // elms = col.querySelectorAll('[data-keep-font-size]');
79338
- // Array.prototype.forEach.call(elms, (elm) => {
79339
- // elm.removeAttribute('data-keep-font-size');
79340
- // });
79341
- // elms = col.querySelectorAll('[data-keep-background-color]');
79342
- // Array.prototype.forEach.call(elms, (elm) => {
79343
- // elm.removeAttribute('data-keep-background-color');
79344
- // });
79345
- // elms = col.querySelectorAll('[data-keep-background]');
79346
- // Array.prototype.forEach.call(elms, (elm) => {
79347
- // elm.removeAttribute('data-keep-background');
79348
- // });
79349
- // elms = col.querySelectorAll('[data-keep-line-height]');
79350
- // Array.prototype.forEach.call(elms, (elm) => {
79351
- // elm.removeAttribute('data-keep-line-height');
79352
- // });
79353
- // }
79354
- // this.autoclean =false;
79355
-
79312
+ // Cleanup all elements with unwanted style
79313
+ if (this.autoclean) {
79314
+ let elms = col.querySelectorAll('[style]');
79315
+ elms.forEach(elm => {
79316
+ let attr = elm.getAttribute('style');
79317
+ if (attr.includes('font-size')) {
79318
+ let attrkeep = elm.hasAttribute('data-keep-font-size');
79319
+ if (!attrkeep) {
79320
+ elm.style.fontSize = '';
79321
+ }
79322
+ }
79323
+ if (attr.includes('background-color')) {
79324
+ let attrkeep = elm.hasAttribute('data-keep-background-color');
79325
+ if (!attrkeep) {
79326
+ elm.style.backgroundColor = '';
79327
+ }
79328
+ }
79329
+ if (attr.includes('background')) {
79330
+ let attrkeep = elm.hasAttribute('data-keep-background');
79331
+ if (!attrkeep) {
79332
+ elm.style.background = '';
79333
+ }
79334
+ }
79335
+ if (attr.includes('line-height')) {
79336
+ let attrkeep = elm.hasAttribute('data-keep-line-height');
79337
+ if (!attrkeep) {
79338
+ elm.style.lineHeight = '';
79339
+ }
79340
+ }
79341
+ });
79342
+ col.querySelectorAll('[data-keep-font-size]').forEach(elm => elm.removeAttribute('data-keep-font-size'));
79343
+ col.querySelectorAll('[data-keep-background-color]').forEach(elm => elm.removeAttribute('data-keep-background-color'));
79344
+ col.querySelectorAll('[data-keep-background]').forEach(elm => elm.removeAttribute('data-keep-background'));
79345
+ col.querySelectorAll('[data-keep-line-height]').forEach(elm => elm.removeAttribute('data-keep-line-height'));
79346
+ }
79347
+ this.autoclean = false;
79356
79348
  var el;
79357
79349
  // var curr;
79358
79350
  try {
@@ -79419,6 +79411,9 @@ class ContentBuilder {
79419
79411
  }, 2000);
79420
79412
  }
79421
79413
  handleCellPaste(clipboardData, clipboardDataHtml) {
79414
+ if (localStorage.getItem('_pasteresult') !== null) {
79415
+ this.opts.paste = localStorage.getItem('_pasteresult');
79416
+ }
79422
79417
  this.uo.saveForUndo();
79423
79418
  const util = this.util;
79424
79419
  util.saveSelection(); //required. Without this, CTRL-A (select element) & CTRL-V won't replace the element, but will paste at the end of the element.
@@ -79613,25 +79608,31 @@ class ContentBuilder {
79613
79608
  <span class="size-24">Heading</span>
79614
79609
  So, blocks checking below is made to fix it.
79615
79610
  */
79616
- let blockSelection = false;
79617
- if (blocks.length === 1) {
79618
- if (blocks[0].innerText.trim() === selection.toString().trim()) {
79619
- let range = document.createRange();
79620
- range.selectNodeContents(blocks[0]);
79621
- selection.removeAllRanges();
79622
- selection.addRange(range);
79623
- blockSelection = true;
79624
- }
79625
- }
79626
- if (!blockSelection) {
79627
- const container = this.dom.getElm();
79628
- const sameSelection = container && container.innerText === selection.toString().trim();
79629
- if (sameSelection || selection.toString().trim() === '') {
79630
- let range = document.createRange();
79631
- range.selectNodeContents(container);
79632
- selection.removeAllRanges();
79633
- selection.addRange(range);
79611
+ try {
79612
+ let blockSelection = false;
79613
+ if (selection.toString().trim() !== '') {
79614
+ if (blocks.length === 1) {
79615
+ if (blocks[0].innerText.trim() === selection.toString().trim()) {
79616
+ let range = document.createRange();
79617
+ range.selectNodeContents(blocks[0]);
79618
+ selection.removeAllRanges();
79619
+ selection.addRange(range);
79620
+ blockSelection = true;
79621
+ }
79622
+ }
79623
+ if (!blockSelection) {
79624
+ const container = this.dom.getElm();
79625
+ const sameSelection = container && container.innerText === selection.toString().trim();
79626
+ if (sameSelection || selection.toString().trim() === '') {
79627
+ let range = document.createRange();
79628
+ range.selectNodeContents(container);
79629
+ selection.removeAllRanges();
79630
+ selection.addRange(range);
79631
+ }
79632
+ }
79634
79633
  }
79634
+ } catch (e) {
79635
+ // Do Nothing
79635
79636
  }
79636
79637
  this.doc.execCommand('insertHTML', false, sPastedText);
79637
79638
  if (this.activeCol) {