@syncfusion/ej2-richtexteditor 28.1.35 → 28.1.37

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.
@@ -6147,11 +6147,10 @@ class ToolbarRenderer {
6147
6147
  enableRtl: this.parent.enableRtl,
6148
6148
  inline: true,
6149
6149
  value: null,
6150
- cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
6150
+ cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass,
6151
6151
  created: () => {
6152
6152
  const value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
6153
- const cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
6154
- colorPicker.setProperties({ value: value, cssClass: cssClass });
6153
+ colorPicker.setProperties({ value: value });
6155
6154
  },
6156
6155
  mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
6157
6156
  modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
@@ -6180,17 +6179,21 @@ class ToolbarRenderer {
6180
6179
  value: colorpickerValue
6181
6180
  };
6182
6181
  proxy.parent.notify(selectionRestore, {});
6183
- proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
6182
+ if (proxy.currentElement) {
6183
+ proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
6184
+ }
6184
6185
  const range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
6185
6186
  const closestElement = closest(range.startContainer.parentNode, 'table');
6186
6187
  if ((range.startContainer.nodeName === 'TD' || range.startContainer.nodeName === 'TH' || range.startContainer.nodeName === 'BODY' ||
6187
- closest(range.startContainer.parentNode, 'td,th')) && range.collapsed && args.subCommand === 'BackgroundColor' && (closest(closestElement, '.' + CLS_RTE) || proxy.parent.iframeSettings.enable)) {
6188
+ (range.startContainer.parentNode && closest(range.startContainer.parentNode, 'td,th'))) && range.collapsed && args.subCommand === 'BackgroundColor' && (closestElement && closest(closestElement, '.' + CLS_RTE) || proxy.parent.iframeSettings.enable)) {
6188
6189
  proxy.parent.notify(tableColorPickerChanged, colorPickerArgs);
6189
6190
  }
6190
6191
  else {
6191
6192
  proxy.parent.notify(colorPickerChanged, colorPickerArgs);
6192
6193
  }
6193
- proxy.currentDropdown.toggle();
6194
+ if (proxy.currentDropdown) {
6195
+ proxy.currentDropdown.toggle();
6196
+ }
6194
6197
  },
6195
6198
  beforeModeSwitch: (args) => {
6196
6199
  value = colorPicker.value;
@@ -14478,34 +14481,40 @@ class Table {
14478
14481
  // eslint-disable-next-line
14479
14482
  applyProperties(args, e) {
14480
14483
  const dialogEle = this.editdlgObj.element;
14481
- const table = closest(args.selectNode[0], 'table');
14482
- table.style.width = dialogEle.querySelector('.e-table-width') ? dialogEle.querySelector('.e-table-width').value + 'px'
14483
- : table.style.width;
14484
- if (dialogEle.querySelector('.e-cell-padding') && dialogEle.querySelector('.e-cell-padding').value !== '') {
14485
- const tdElm = table.querySelectorAll('td');
14486
- for (let i = 0; i < tdElm.length; i++) {
14487
- let padVal = '';
14488
- if (tdElm[i].style.padding === '') {
14489
- padVal = tdElm[i].getAttribute('style') + ' padding:' +
14490
- dialogEle.querySelector('.e-cell-padding').value + 'px;';
14484
+ if (dialogEle && args && args.selectNode.length > 0 && args.selectNode[0]) {
14485
+ const selectedElement = (args.selectNode[0] && args.selectNode[0].nodeType === 3 ?
14486
+ args.selectNode[0].parentNode : args.selectNode[0]);
14487
+ const table = selectedElement ? closest(selectedElement, 'table') : null;
14488
+ if (table) {
14489
+ table.style.width = dialogEle.querySelector('.e-table-width') ? dialogEle.querySelector('.e-table-width').value + 'px'
14490
+ : table.style.width;
14491
+ if (dialogEle.querySelector('.e-cell-padding') && dialogEle.querySelector('.e-cell-padding').value !== '') {
14492
+ const tdElm = table.querySelectorAll('td');
14493
+ for (let i = 0; i < tdElm.length; i++) {
14494
+ let padVal = '';
14495
+ if (tdElm[i].style.padding === '') {
14496
+ padVal = tdElm[i].getAttribute('style') + ' padding:' +
14497
+ dialogEle.querySelector('.e-cell-padding').value + 'px;';
14498
+ }
14499
+ else {
14500
+ tdElm[i].style.padding = dialogEle.querySelector('.e-cell-padding').value + 'px';
14501
+ padVal = tdElm[i].getAttribute('style');
14502
+ }
14503
+ tdElm[i].setAttribute('style', padVal);
14504
+ }
14505
+ }
14506
+ table.cellSpacing = dialogEle.querySelector('.e-cell-spacing') ? dialogEle.querySelector('.e-cell-spacing').value
14507
+ : table.cellSpacing;
14508
+ if (!isNullOrUndefined(table.cellSpacing) && table.cellSpacing !== '0') {
14509
+ addClass([table], CLS_TABLE_BORDER);
14491
14510
  }
14492
14511
  else {
14493
- tdElm[i].style.padding = dialogEle.querySelector('.e-cell-padding').value + 'px';
14494
- padVal = tdElm[i].getAttribute('style');
14512
+ removeClassWithAttr([table], CLS_TABLE_BORDER);
14495
14513
  }
14496
- tdElm[i].setAttribute('style', padVal);
14514
+ this.parent.formatter.saveData();
14515
+ this.editdlgObj.hide({ returnValue: true });
14497
14516
  }
14498
14517
  }
14499
- table.cellSpacing = dialogEle.querySelector('.e-cell-spacing') ? dialogEle.querySelector('.e-cell-spacing').value
14500
- : table.cellSpacing;
14501
- if (!isNullOrUndefined(table.cellSpacing) && table.cellSpacing !== '0') {
14502
- addClass([table], CLS_TABLE_BORDER);
14503
- }
14504
- else {
14505
- removeClassWithAttr([table], CLS_TABLE_BORDER);
14506
- }
14507
- this.parent.formatter.saveData();
14508
- this.editdlgObj.hide({ returnValue: true });
14509
14518
  }
14510
14519
  tableDlgContent(e) {
14511
14520
  const selectNode = e.selectParent[0];
@@ -19401,7 +19410,7 @@ class Formatter {
19401
19410
  }
19402
19411
  }
19403
19412
  const command = actionBeginArgs.item.subCommand.toLocaleLowerCase();
19404
- if (command === 'image') {
19413
+ if (command === 'image' || command === 'file' || command === 'replace') {
19405
19414
  value = actionBeginArgs.itemCollection;
19406
19415
  }
19407
19416
  if (command === 'paste' || command === 'cut' || command === 'copy') {
@@ -25932,6 +25941,7 @@ class LinkCommand {
25932
25941
  if (child && child.length === 1) {
25933
25942
  e.item.selection.startContainer = e.item.selection.getNodeArray(child[child.length - 1], true);
25934
25943
  e.item.selection.endContainer = e.item.selection.startContainer;
25944
+ e.item.selection.endOffset = child[child.length - 1].textContent.length;
25935
25945
  }
25936
25946
  e.item.selection = this.parent.domNode.saveMarker(e.item.selection);
25937
25947
  }
@@ -30265,7 +30275,8 @@ class MsWordPaste {
30265
30275
  imgElem[i].getAttribute('v:shapes').indexOf('Graphic') < 0 &&
30266
30276
  imgElem[i].getAttribute('v:shapes').indexOf('_x0000_s') < 0 &&
30267
30277
  imgElem[i].getAttribute('v:shapes').indexOf('_x0000_i') < 0 &&
30268
- imgElem[i].getAttribute('v:shapes').indexOf('img1') < 0) {
30278
+ imgElem[i].getAttribute('v:shapes').indexOf('img1') < 0 &&
30279
+ imgElem[i].getAttribute('v:shapes').indexOf('Immagine') < 0) {
30269
30280
  imgElem[i].classList.add('e-rte-image-unsupported');
30270
30281
  }
30271
30282
  imgElem[i].removeAttribute('v:shapes');
@@ -30279,7 +30290,8 @@ class MsWordPaste {
30279
30290
  if (imgElem.length > 0) {
30280
30291
  for (let i = 0; i < imgElem.length; i++) {
30281
30292
  imgSrc.push(imgElem[i].getAttribute('src'));
30282
- imgName.push(imgElem[i].getAttribute('src').split('/')[imgElem[i].getAttribute('src').split('/').length - 1].split('.')[0]);
30293
+ const imageName = imgElem[i].getAttribute('src').split('/')[imgElem[i].getAttribute('src').split('/').length - 1].split('.')[0] + i;
30294
+ imgName.push(imageName);
30283
30295
  }
30284
30296
  const hexValue = this.hexConversion(rtfData);
30285
30297
  for (let i = 0; i < hexValue.length; i++) {
@@ -32694,7 +32706,7 @@ class HtmlEditor {
32694
32706
  onSelectionRestore(e) {
32695
32707
  this.parent.isBlur = false;
32696
32708
  this.contentRenderer.getEditPanel().focus({ preventScroll: true });
32697
- if (isNullOrUndefined(e.items) || e.items) {
32709
+ if ((isNullOrUndefined(e.items) || e.items) && (!isNullOrUndefined(this.saveSelection))) {
32698
32710
  this.saveSelection.restore();
32699
32711
  }
32700
32712
  }
@@ -33152,7 +33164,7 @@ class HtmlEditor {
33152
33164
  let checkParent = false;
33153
33165
  if (this.oldRangeElement && this.oldRangeElement.nodeName !== '#text' && this.oldRangeElement.querySelectorAll('BR').length === 1) {
33154
33166
  const brElement = this.oldRangeElement.querySelector('BR');
33155
- if (brElement) {
33167
+ if (brElement && isNullOrUndefined(brElement.nextSibling)) {
33156
33168
  const brParentElement = brElement.parentNode;
33157
33169
  const currentState = this.oldRangeElement.innerHTML;
33158
33170
  this.parent.formatter.saveData(currentState);
@@ -34191,8 +34203,20 @@ class PasteCleanup {
34191
34203
  this.parent.trigger(imageUploadSuccess, e, (e) => {
34192
34204
  if (!isNullOrUndefined(this.parent.insertImageSettings.path)) {
34193
34205
  const url = this.parent.insertImageSettings.path + e.file.name;
34194
- imgElem.src = url;
34195
- imgElem.setAttribute('alt', e.file.name);
34206
+ if (!this.parent.inputElement.contains(imgElem)) {
34207
+ const imgHtmlElems = this.parent.inputElement.querySelectorAll('#' + imgElem.id);
34208
+ for (let i = 0; i < imgHtmlElems.length; i++) {
34209
+ const imgHtmlElem = imgHtmlElems[i];
34210
+ if (imgHtmlElem && imgHtmlElem.style && imgHtmlElem.style.opacity === '0.5') {
34211
+ imgHtmlElem.src = url;
34212
+ imgHtmlElem.setAttribute('alt', e.file.name);
34213
+ }
34214
+ }
34215
+ }
34216
+ else {
34217
+ imgElem.src = url;
34218
+ imgElem.setAttribute('alt', e.file.name);
34219
+ }
34196
34220
  }
34197
34221
  });
34198
34222
  }
@@ -34205,7 +34229,18 @@ class PasteCleanup {
34205
34229
  }
34206
34230
  this.popupCloseTime = setTimeout(() => {
34207
34231
  popupObj.close();
34208
- imgElem.style.opacity = '1';
34232
+ if (!this.parent.inputElement.contains(imgElem)) {
34233
+ const imgHtmlElems = this.parent.inputElement.querySelectorAll('#' + imgElem.id);
34234
+ for (let i = 0; i < imgHtmlElems.length; i++) {
34235
+ const imgHtmlElem = imgHtmlElems[i];
34236
+ if (imgHtmlElem && imgHtmlElem.style && imgHtmlElem.style.opacity === '0.5') {
34237
+ imgHtmlElem.style.opacity = '1';
34238
+ }
34239
+ }
34240
+ }
34241
+ else {
34242
+ imgElem.style.opacity = '1';
34243
+ }
34209
34244
  this.toolbarEnableDisable(false);
34210
34245
  if (uploadObj && document.body.contains(uploadObj.element)) {
34211
34246
  uploadObj.destroy();
@@ -37709,7 +37744,14 @@ class EnterKeyAction {
37709
37744
  let isMediaNode = false; // To check the image audio and video node cases
37710
37745
  let isFocusedFirst = false;
37711
37746
  const parentElement = this.range.startContainer.parentElement;
37712
- const isPreWrapApplied = parentElement ? this.parent.contentModule.getDocument().defaultView.getComputedStyle(parentElement, null).getPropertyValue('white-space') === 'pre-wrap' : false;
37747
+ let isPreWrapApplied = false;
37748
+ let isTextWrapApplied = false;
37749
+ if (parentElement) {
37750
+ // eslint-disable-next-line max-len
37751
+ const computedStyle = this.parent.contentModule.getDocument().defaultView.getComputedStyle(parentElement);
37752
+ isPreWrapApplied = computedStyle.getPropertyValue('white-space') === 'pre-wrap';
37753
+ isTextWrapApplied = computedStyle.getPropertyValue('text-wrap') === 'nowrap';
37754
+ }
37713
37755
  if (this.range.startOffset !== 0 && this.range.endOffset !== 0 &&
37714
37756
  this.range.startContainer === this.range.endContainer && !(!isNullOrUndefined(nearBlockNode.childNodes[0])
37715
37757
  && (nearBlockNode.childNodes[0].nodeName === 'IMG' || nearBlockNode.querySelectorAll('img, audio, video').length > 0))) {
@@ -37719,10 +37761,11 @@ class EnterKeyAction {
37719
37761
  const isSplitTextEmpty = splitFirstText.trim().length === 0;
37720
37762
  const hasContentAfterCursor = startNodeText.slice(this.range.startOffset).trim().length !== 0;
37721
37763
  const isCursorAtStartNonPreWrap = lastCharBeforeCursor !== 160
37722
- && isSplitTextEmpty && !isPreWrapApplied;
37764
+ && isSplitTextEmpty && !isPreWrapApplied && !isTextWrapApplied;
37723
37765
  const isCursorAtStartPreWrapWithContent = lastCharBeforeCursor === 32
37724
- && isPreWrapApplied && isSplitTextEmpty && hasContentAfterCursor;
37725
- if (isCursorAtStartNonPreWrap || isCursorAtStartPreWrapWithContent) {
37766
+ && (isPreWrapApplied || isTextWrapApplied) && isSplitTextEmpty && hasContentAfterCursor;
37767
+ if ((isCursorAtStartNonPreWrap || isCursorAtStartPreWrapWithContent) &&
37768
+ !this.range.startContainer.previousSibling) {
37726
37769
  isFocusedFirst = true;
37727
37770
  }
37728
37771
  }
@@ -37731,7 +37774,7 @@ class EnterKeyAction {
37731
37774
  }
37732
37775
  this.removeBRElement(nearBlockNode);
37733
37776
  const fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') !== -1 && this.range.startOffset === 0 && this.range.startContainer === this.range.endContainer &&
37734
- this.range.startContainer.nodeName === '#text' && !this.parent.formatter.editorManager.domNode.isBlockNode(this.range.startContainer.previousSibling) &&
37777
+ this.range.startContainer.nodeName === '#text' && !isNullOrUndefined(this.range.startContainer.previousSibling) && !this.parent.formatter.editorManager.domNode.isBlockNode(this.range.startContainer.previousSibling) &&
37735
37778
  this.range.startContainer.parentElement === this.range.startContainer.previousSibling.parentElement;
37736
37779
  const preventZeroWithSpace = ((this.range.startContainer.nodeName === '#text' && this.range.startContainer.textContent.includes('\u200B') &&
37737
37780
  this.range.startContainer.textContent.trim() === '\u200B') ||