@syncfusion/ej2-richtexteditor 22.2.10 → 23.1.36
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/CHANGELOG.md +46 -0
- package/dist/ej2-richtexteditor.min.js +2 -2
- package/dist/ej2-richtexteditor.umd.min.js +2 -2
- package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
- package/dist/es6/ej2-richtexteditor.es2015.js +381 -262
- package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
- package/dist/es6/ej2-richtexteditor.es5.js +381 -258
- package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
- package/dist/global/ej2-richtexteditor.min.js +2 -2
- package/dist/global/ej2-richtexteditor.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +13 -13
- package/src/editor-manager/plugin/dom-node.js +6 -5
- package/src/editor-manager/plugin/ms-word-clean-up.d.ts +2 -0
- package/src/editor-manager/plugin/ms-word-clean-up.js +68 -11
- package/src/editor-manager/plugin/table.js +1 -1
- package/src/rich-text-editor/actions/base-quick-toolbar.d.ts +2 -1
- package/src/rich-text-editor/actions/base-quick-toolbar.js +10 -6
- package/src/rich-text-editor/actions/emoji-picker.js +29 -14
- package/src/rich-text-editor/actions/enter-key.js +6 -2
- package/src/rich-text-editor/actions/format-painter.js +12 -6
- package/src/rich-text-editor/actions/html-editor.js +14 -1
- package/src/rich-text-editor/actions/paste-clean-up.d.ts +2 -0
- package/src/rich-text-editor/actions/paste-clean-up.js +63 -32
- package/src/rich-text-editor/actions/quick-toolbar.js +32 -2
- package/src/rich-text-editor/actions/toolbar.js +1 -1
- package/src/rich-text-editor/actions/xhtml-validation.js +1 -1
- package/src/rich-text-editor/base/classes.d.ts +5 -0
- package/src/rich-text-editor/base/classes.js +5 -0
- package/src/rich-text-editor/base/constant.d.ts +5 -0
- package/src/rich-text-editor/base/constant.js +5 -0
- package/src/rich-text-editor/base/enum.d.ts +4 -0
- package/src/rich-text-editor/base/interface.d.ts +10 -22
- package/src/rich-text-editor/base/rich-text-editor-model.d.ts +1 -39
- package/src/rich-text-editor/base/rich-text-editor.d.ts +1 -39
- package/src/rich-text-editor/base/rich-text-editor.js +2 -8
- package/src/rich-text-editor/base/util.js +5 -1
- package/src/rich-text-editor/models/items.js +34 -22
- package/src/rich-text-editor/models/toolbar-settings-model.d.ts +4 -5
- package/src/rich-text-editor/models/toolbar-settings.d.ts +4 -5
- package/src/rich-text-editor/models/toolbar-settings.js +1 -1
- package/src/rich-text-editor/renderer/audio-module.js +5 -33
- package/src/rich-text-editor/renderer/dialog-renderer.d.ts +2 -0
- package/src/rich-text-editor/renderer/dialog-renderer.js +16 -1
- package/src/rich-text-editor/renderer/image-module.js +9 -65
- package/src/rich-text-editor/renderer/link-module.js +3 -0
- package/src/rich-text-editor/renderer/table-module.js +18 -7
- package/src/rich-text-editor/renderer/toolbar-renderer.d.ts +5 -1
- package/src/rich-text-editor/renderer/toolbar-renderer.js +28 -2
- package/src/rich-text-editor/renderer/video-module.js +6 -33
- package/src/rich-text-editor/renderer/view-source.js +1 -0
- package/styles/material-dark.css +0 -1
- package/styles/material.css +0 -1
- package/styles/material3-dark.css +0 -1
- package/styles/material3-dark.scss +1 -1
- package/styles/material3.css +0 -1
- package/styles/material3.scss +1 -1
- package/styles/rich-text-editor/bootstrap-dark.scss +1 -1
- package/styles/rich-text-editor/bootstrap.scss +1 -1
- package/styles/rich-text-editor/bootstrap4.scss +1 -1
- package/styles/rich-text-editor/bootstrap5-dark.scss +1 -1
- package/styles/rich-text-editor/bootstrap5.scss +1 -1
- package/styles/rich-text-editor/fabric-dark.scss +1 -1
- package/styles/rich-text-editor/fabric.scss +1 -1
- package/styles/rich-text-editor/fluent-dark.scss +1 -1
- package/styles/rich-text-editor/fluent.scss +1 -1
- package/styles/rich-text-editor/highcontrast-light.scss +1 -1
- package/styles/rich-text-editor/highcontrast.scss +1 -1
- package/styles/rich-text-editor/material-dark.css +0 -1
- package/styles/rich-text-editor/material-dark.scss +1 -1
- package/styles/rich-text-editor/material.css +0 -1
- package/styles/rich-text-editor/material.scss +1 -1
- package/styles/rich-text-editor/material3-dark.css +0 -1
- package/styles/rich-text-editor/material3-dark.scss +1 -1
- package/styles/rich-text-editor/material3.css +0 -1
- package/styles/rich-text-editor/material3.scss +1 -1
- package/styles/rich-text-editor/tailwind-dark.css +0 -1
- package/styles/rich-text-editor/tailwind-dark.scss +1 -1
- package/styles/rich-text-editor/tailwind.css +0 -1
- package/styles/rich-text-editor/tailwind.scss +1 -1
- package/styles/tailwind-dark.css +0 -1
- package/styles/tailwind.css +0 -1
|
@@ -30,6 +30,7 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
30
30
|
'header', 'article', 'nav', 'footer', 'section', 'aside', 'main', 'figure', 'figcaption'];
|
|
31
31
|
this.isNotFromHtml = false;
|
|
32
32
|
this.containsHtml = false;
|
|
33
|
+
this.cropImageData = [];
|
|
33
34
|
this.parent = parent;
|
|
34
35
|
this.locator = serviceLocator;
|
|
35
36
|
this.renderFactory = this.locator.getService('rendererFactory');
|
|
@@ -110,8 +111,9 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
110
111
|
args: e.args,
|
|
111
112
|
text: e.text,
|
|
112
113
|
allowedStylePropertiesArray: this.parent.pasteCleanupSettings.allowedStyleProps,
|
|
113
|
-
callBack: function (a) {
|
|
114
|
+
callBack: function (a, cropImageData) {
|
|
114
115
|
value = a.trim();
|
|
116
|
+
_this.cropImageData = cropImageData;
|
|
115
117
|
}
|
|
116
118
|
});
|
|
117
119
|
}
|
|
@@ -160,7 +162,9 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
160
162
|
currentFocusNode = currentFocusNode.childNodes[_this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startOffset];
|
|
161
163
|
}
|
|
162
164
|
if (currentFocusNode.previousSibling.nodeName === 'IMG') {
|
|
163
|
-
currentFocusNode.previousSibling.
|
|
165
|
+
if (!isNOU(currentFocusNode.previousSibling.getAttribute('src'))) {
|
|
166
|
+
currentFocusNode.previousSibling.classList.add('pasteContent_Img');
|
|
167
|
+
}
|
|
164
168
|
currentFocusNode.previousSibling.classList.add(CLS_RTE_IMAGE);
|
|
165
169
|
if (_this.parent.insertImageSettings.display === 'inline') {
|
|
166
170
|
currentFocusNode.previousSibling.classList.add(CLS_IMGINLINE);
|
|
@@ -192,6 +196,7 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
192
196
|
PasteCleanup.prototype.makeSpace = function (enterSplitText) {
|
|
193
197
|
var contentWithSpace = '';
|
|
194
198
|
var spaceBetweenContent = true;
|
|
199
|
+
enterSplitText = enterSplitText.replace(/\t/g, ' ');
|
|
195
200
|
var spaceSplit = enterSplitText.split(' ');
|
|
196
201
|
for (var j = 0; j < spaceSplit.length; j++) {
|
|
197
202
|
if (spaceSplit[j].trim() === '') {
|
|
@@ -211,7 +216,8 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
211
216
|
var imgName = [];
|
|
212
217
|
var uploadImg = [];
|
|
213
218
|
for (var i = 0; i < allImgElm.length; i++) {
|
|
214
|
-
if (allImgElm[i].getAttribute('src')
|
|
219
|
+
if (!isNOU(allImgElm[i].getAttribute('src')) &&
|
|
220
|
+
allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
|
|
215
221
|
base64Src.push(allImgElm[i].getAttribute('src'));
|
|
216
222
|
imgName.push(getUniqueID('rte_image'));
|
|
217
223
|
uploadImg.push(allImgElm[i]);
|
|
@@ -293,7 +299,6 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
293
299
|
_this.refreshPopup(imgElem, _this.popupObj);
|
|
294
300
|
}, timeOut);
|
|
295
301
|
var rawFile;
|
|
296
|
-
var beforeUploadArgs;
|
|
297
302
|
this.uploadObj = new Uploader({
|
|
298
303
|
asyncSettings: {
|
|
299
304
|
saveUrl: this.parent.insertImageSettings.saveUrl,
|
|
@@ -325,28 +330,8 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
325
330
|
}
|
|
326
331
|
},
|
|
327
332
|
beforeUpload: function (args) {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
beforeUploadArgs.filesData = rawFile;
|
|
331
|
-
args.cancel = true;
|
|
332
|
-
_this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
|
|
333
|
-
if (beforeUploadArgs.cancel) {
|
|
334
|
-
return;
|
|
335
|
-
}
|
|
336
|
-
_this.toolbarEnableDisable(true);
|
|
337
|
-
/* eslint-disable */
|
|
338
|
-
_this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
|
|
339
|
-
beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
|
|
340
|
-
_this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
|
|
341
|
-
beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
|
|
342
|
-
_this.uploadObj.uploadFiles(rawFile, null);
|
|
343
|
-
/* eslint-enable */
|
|
344
|
-
});
|
|
345
|
-
}
|
|
346
|
-
else {
|
|
347
|
-
_this.parent.trigger(events.beforeImageUpload, args);
|
|
348
|
-
_this.toolbarEnableDisable(true);
|
|
349
|
-
}
|
|
333
|
+
_this.parent.trigger(events.beforeImageUpload, args);
|
|
334
|
+
_this.toolbarEnableDisable(true);
|
|
350
335
|
},
|
|
351
336
|
// eslint-disable-next-line
|
|
352
337
|
failure: function (e) {
|
|
@@ -364,9 +349,6 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
364
349
|
},
|
|
365
350
|
selected: function (e) {
|
|
366
351
|
e.cancel = true;
|
|
367
|
-
if (_this.parent.isServerRendered) {
|
|
368
|
-
rawFile = e.filesData;
|
|
369
|
-
}
|
|
370
352
|
},
|
|
371
353
|
removing: function () {
|
|
372
354
|
_this.parent.inputElement.contentEditable = 'true';
|
|
@@ -388,8 +370,8 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
388
370
|
statusCode: '1'
|
|
389
371
|
}];
|
|
390
372
|
this.uploadObj.createFileList(fileData);
|
|
391
|
-
/* eslint-enable */
|
|
392
373
|
rawFile = fileData;
|
|
374
|
+
/* eslint-enable */
|
|
393
375
|
this.uploadObj.upload(fileData);
|
|
394
376
|
this.popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
|
|
395
377
|
detach(this.popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
|
|
@@ -464,7 +446,9 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
464
446
|
|
|
465
447
|
*/
|
|
466
448
|
PasteCleanup.prototype.imageFormatting = function (pasteArgs, imgElement) {
|
|
467
|
-
imgElement.elements[0].
|
|
449
|
+
if (!isNOU(imgElement.elements[0].getAttribute('src'))) {
|
|
450
|
+
imgElement.elements[0].classList.add('pasteContent_Img');
|
|
451
|
+
}
|
|
468
452
|
var imageElement = this.parent.createElement('span');
|
|
469
453
|
imageElement.appendChild(imgElement.elements[0]);
|
|
470
454
|
var imageValue = imageElement.innerHTML;
|
|
@@ -657,7 +641,9 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
657
641
|
clipBoardElem.innerHTML = this.sanitizeHelper(clipBoardElem.innerHTML);
|
|
658
642
|
var allImg = clipBoardElem.querySelectorAll('img');
|
|
659
643
|
for (var i = 0; i < allImg.length; i++) {
|
|
660
|
-
allImg[i].
|
|
644
|
+
if (!isNOU(allImg[i].getAttribute('src'))) {
|
|
645
|
+
allImg[i].classList.add('pasteContent_Img');
|
|
646
|
+
}
|
|
661
647
|
this.setImageProperties(allImg[i]);
|
|
662
648
|
}
|
|
663
649
|
this.addTempClass(clipBoardElem);
|
|
@@ -700,6 +686,51 @@ var PasteCleanup = /** @class */ (function () {
|
|
|
700
686
|
}, clipBoardElem, null, null, this.parent.enterKey);
|
|
701
687
|
this.removeTempClass();
|
|
702
688
|
this.parent.notify(events.toolbarRefresh, {});
|
|
689
|
+
this.cropImageHandler(this.parent.inputElement);
|
|
690
|
+
}
|
|
691
|
+
};
|
|
692
|
+
PasteCleanup.prototype.cropImageHandler = function (element) {
|
|
693
|
+
var _this = this;
|
|
694
|
+
var allImgElm = element.querySelectorAll('.e-img-cropped');
|
|
695
|
+
if (allImgElm.length > 0) {
|
|
696
|
+
var _loop_1 = function (i) {
|
|
697
|
+
if (allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
|
|
698
|
+
var image_1 = new Image();
|
|
699
|
+
image_1.src = allImgElm[i].getAttribute('src');
|
|
700
|
+
var canvas_1 = document.createElement('canvas');
|
|
701
|
+
var ctx_1 = canvas_1.getContext('2d');
|
|
702
|
+
image_1.onload = function () {
|
|
703
|
+
var wGoalWidth = _this.cropImageData[i].goalWidth / image_1.naturalWidth;
|
|
704
|
+
var hGoalHeight = _this.cropImageData[i].goalHeight / image_1.naturalHeight;
|
|
705
|
+
var cropLength = _this.cropImageData[i].cropLength / wGoalWidth;
|
|
706
|
+
var cropTop = _this.cropImageData[i].cropTop / hGoalHeight;
|
|
707
|
+
var cropWidth = (_this.cropImageData[i].goalWidth -
|
|
708
|
+
_this.cropImageData[i].cropLength -
|
|
709
|
+
_this.cropImageData[i].cropR) / wGoalWidth;
|
|
710
|
+
var cropHeight = (_this.cropImageData[i].goalHeight -
|
|
711
|
+
_this.cropImageData[i].cropTop -
|
|
712
|
+
_this.cropImageData[i].cropB) / hGoalHeight;
|
|
713
|
+
canvas_1.width = cropWidth;
|
|
714
|
+
canvas_1.height = cropHeight;
|
|
715
|
+
// Draw the cropped portion of the image onto the canvas
|
|
716
|
+
ctx_1.drawImage(image_1, cropLength, cropTop, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
|
|
717
|
+
// Convert the cropped canvas to a base64 encoded image
|
|
718
|
+
var croppedBase64 = canvas_1.toDataURL('image/png');
|
|
719
|
+
// Call the provided callback with the cropped base64 data
|
|
720
|
+
allImgElm[i].setAttribute('src', croppedBase64);
|
|
721
|
+
allImgElm[i].classList.remove('e-img-cropped');
|
|
722
|
+
_this.imgUploading(_this.parent.inputElement);
|
|
723
|
+
if (_this.parent.iframeSettings.enable) {
|
|
724
|
+
_this.parent.updateValue();
|
|
725
|
+
}
|
|
726
|
+
};
|
|
727
|
+
}
|
|
728
|
+
};
|
|
729
|
+
for (var i = 0; i < allImgElm.length; i++) {
|
|
730
|
+
_loop_1(i);
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
else {
|
|
703
734
|
this.imgUploading(this.parent.inputElement);
|
|
704
735
|
if (this.parent.iframeSettings.enable) {
|
|
705
736
|
this.parent.updateValue();
|
|
@@ -92,8 +92,10 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
92
92
|
}
|
|
93
93
|
this.linkQTBar = this.createQTBar('Link', 'Scrollable', this.parent.quickToolbarSettings.link, RenderType.LinkToolbar);
|
|
94
94
|
this.renderFactory.addRenderer(RenderType.LinkToolbar, this.linkQTBar);
|
|
95
|
-
|
|
96
|
-
|
|
95
|
+
if (!isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
|
|
96
|
+
this.textQTBar = this.createQTBar('Text', 'MultiRow', this.parent.quickToolbarSettings.text, RenderType.TextToolbar);
|
|
97
|
+
this.renderFactory.addRenderer(RenderType.TextToolbar, this.textQTBar);
|
|
98
|
+
}
|
|
97
99
|
this.imageQTBar = this.createQTBar('Image', 'MultiRow', this.parent.quickToolbarSettings.image, RenderType.ImageToolbar);
|
|
98
100
|
this.renderFactory.addRenderer(RenderType.ImageToolbar, this.imageQTBar);
|
|
99
101
|
this.audioQTBar = this.createQTBar('Audio', 'MultiRow', this.parent.quickToolbarSettings.audio, RenderType.AudioToolbar);
|
|
@@ -235,6 +237,24 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
235
237
|
}
|
|
236
238
|
}
|
|
237
239
|
}
|
|
240
|
+
if (!isNOU(this.textQTBar) && !isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
|
|
241
|
+
var args = e.args.touches ?
|
|
242
|
+
e.args.changedTouches[0] : e.args;
|
|
243
|
+
var target = e.args.target;
|
|
244
|
+
this.hideQuickToolbars();
|
|
245
|
+
var parentLeft = this.parent.element.getBoundingClientRect().left;
|
|
246
|
+
this.offsetX = this.parent.iframeSettings.enable ? this.parent.element.ownerDocument.documentElement.scrollLeft
|
|
247
|
+
+ parentLeft + args.clientX : args.pageX;
|
|
248
|
+
this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
|
|
249
|
+
var range = this.parent.getRange();
|
|
250
|
+
if ((range.endContainer.parentElement.tagName === range.startContainer.parentElement.tagName && (range.startContainer.parentElement.tagName === 'A' && range.endContainer.parentElement.tagName === 'A')) ||
|
|
251
|
+
(target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
|
|
252
|
+
(this.parent.getRange().startOffset === this.parent.getRange().endOffset)) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
this.target = target;
|
|
256
|
+
this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
|
|
257
|
+
}
|
|
238
258
|
};
|
|
239
259
|
QuickToolbar.prototype.keyDownHandler = function () {
|
|
240
260
|
if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
|
|
@@ -247,6 +267,11 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
247
267
|
&& !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
|
|
248
268
|
this.hideInlineQTBar();
|
|
249
269
|
}
|
|
270
|
+
if (!isNOU(this.parent.quickToolbarSettings.text)) {
|
|
271
|
+
if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close') && document.body.contains(this.textQTBar.element)) {
|
|
272
|
+
this.textQTBar.hidePopup();
|
|
273
|
+
}
|
|
274
|
+
}
|
|
250
275
|
};
|
|
251
276
|
QuickToolbar.prototype.keyUpHandler = function (e) {
|
|
252
277
|
if (this.parent.inlineMode.enable && !Browser.isDevice) {
|
|
@@ -405,6 +430,7 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
405
430
|
this.parent.on(events.keyDown, this.onKeyDown, this);
|
|
406
431
|
this.parent.on(events.rtlMode, this.setRtl, this);
|
|
407
432
|
this.parent.on(events.bindCssClass, this.setCssClass, this);
|
|
433
|
+
this.parent.on(events.hidePopup, this.hideQuickToolbars, this);
|
|
408
434
|
};
|
|
409
435
|
QuickToolbar.prototype.onKeyDown = function (e) {
|
|
410
436
|
var args = e.args;
|
|
@@ -458,6 +484,9 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
458
484
|
if (this.linkQTBar) {
|
|
459
485
|
this.linkQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
|
|
460
486
|
}
|
|
487
|
+
if (this.textQTBar) {
|
|
488
|
+
this.textQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
|
|
489
|
+
}
|
|
461
490
|
};
|
|
462
491
|
/**
|
|
463
492
|
* removeEventListener
|
|
@@ -486,6 +515,7 @@ var QuickToolbar = /** @class */ (function () {
|
|
|
486
515
|
this.parent.off(events.keyDown, this.onKeyDown);
|
|
487
516
|
this.parent.off(events.rtlMode, this.setRtl);
|
|
488
517
|
this.parent.off(events.bindCssClass, this.setCssClass);
|
|
518
|
+
this.parent.off(events.hidePopup, this.hideQuickToolbars);
|
|
489
519
|
};
|
|
490
520
|
/**
|
|
491
521
|
* Called internally if any of the property value changed.
|
|
@@ -23,7 +23,7 @@ var Toolbar = /** @class */ (function () {
|
|
|
23
23
|
this.renderFactory = this.locator.getService('rendererFactory');
|
|
24
24
|
model.updateDropDownLocale(this.parent);
|
|
25
25
|
updateDropDownFontFormatLocale(this.parent);
|
|
26
|
-
this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));
|
|
26
|
+
this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent, this.locator));
|
|
27
27
|
this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);
|
|
28
28
|
this.baseToolbar = new BaseToolbar(this.parent, this.locator);
|
|
29
29
|
this.addEventListener();
|
|
@@ -41,7 +41,7 @@ var XhtmlValidation = /** @class */ (function () {
|
|
|
41
41
|
*/
|
|
42
42
|
XhtmlValidation.prototype.selfEncloseValidation = function (currentValue, valueLength) {
|
|
43
43
|
if (valueLength === 0 && currentValue.indexOf('table') < 0 && currentValue.indexOf('img') < 0 &&
|
|
44
|
-
currentValue
|
|
44
|
+
currentValue.includes(' ')) {
|
|
45
45
|
var arrayValue = currentValue.split(' ');
|
|
46
46
|
arrayValue[arrayValue.length - 1] = '​' + arrayValue[arrayValue.length - 1];
|
|
47
47
|
currentValue = arrayValue.join('');
|
|
@@ -734,6 +734,11 @@ export var maximizeMinimizeClick = 'maximizeMinimizeClick';
|
|
|
734
734
|
/**
|
|
735
735
|
* @hidden
|
|
736
736
|
|
|
737
|
+
*/
|
|
738
|
+
export var hidePopup = 'hidePopup';
|
|
739
|
+
/**
|
|
740
|
+
* @hidden
|
|
741
|
+
|
|
737
742
|
*/
|
|
738
743
|
export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
|
|
739
744
|
/**
|
|
@@ -60,3 +60,7 @@ export declare enum DialogType {
|
|
|
60
60
|
* Defines types to be used to configure the toolbar items.
|
|
61
61
|
*/
|
|
62
62
|
export declare type ToolbarItems = 'alignments' | 'justifyLeft' | 'justifyCenter' | 'justifyRight' | 'justifyFull' | 'fontName' | 'fontSize' | 'fontColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'clearFormat' | 'clearAll' | 'cut' | 'copy' | 'paste' | 'unorderedList' | 'orderedList' | 'indent' | 'outdent' | 'undo' | 'redo' | 'superScript' | 'subScript' | 'createLink' | 'openLink' | 'editLink' | 'image' | 'createTable' | 'removeTable' | 'replace' | 'align' | 'caption' | 'remove' | 'openImageLink' | 'editImageLink' | 'removeImageLink' | 'insertLink' | 'display' | 'altText' | 'dimension' | 'fullScreen' | 'maximize' | 'minimize' | 'lowerCase' | 'upperCase' | 'print' | 'formats' | 'sourceCode' | 'preview' | 'viewSide' | 'insertCode' | 'tableHeader' | 'tableRemove' | 'tableRows' | 'tableColumns' | 'tableCellBackground' | 'tableCellHorizontalAlign' | 'tableCellVerticalAlign' | 'tableEditProperties' | 'styles' | 'removeLink' | 'merge';
|
|
63
|
+
/**
|
|
64
|
+
* Defines types to be used to configure the toolbarSettings items.
|
|
65
|
+
*/
|
|
66
|
+
export declare type ToolbarConfigItems = 'Alignments' | 'JustifyLeft' | 'JustifyCenter' | 'JustifyRight' | 'JustifyFull' | 'FontName' | 'FontSize' | 'FontColor' | 'BackgroundColor' | 'Bold' | 'Italic' | 'Underline' | 'StrikeThrough' | 'ClearFormat' | 'ClearAll' | 'Cut' | 'Copy' | 'Paste' | 'UnorderedList' | 'OrderedList' | 'Indent' | 'Outdent' | 'Undo' | 'Redo' | 'SuperScript' | 'SubScript' | 'CreateLink' | 'Image' | 'CreateTable' | 'InsertLink' | 'FullScreen' | 'LowerCase' | 'UpperCase' | 'Print' | 'Formats' | 'FormatPainter' | 'EmojiPicker' | 'UnderLine' | 'ZoomOut' | 'ZoomIn' | 'SourceCode' | 'Preview' | 'ViewSide' | 'InsertCode' | 'Audio' | 'Video' | 'NumberFormatList' | 'BulletFormatList' | 'FileManager' | '|' | '-';
|
|
@@ -249,7 +249,9 @@ export interface NotifyArgs {
|
|
|
249
249
|
range?: Range;
|
|
250
250
|
/** Defines the action. */
|
|
251
251
|
action?: string;
|
|
252
|
-
callBack?(args?: string | IImageCommandsArgs
|
|
252
|
+
callBack?(args?: string | IImageCommandsArgs, cropImageData?: {
|
|
253
|
+
[key: string]: string | boolean | number;
|
|
254
|
+
}[]): void;
|
|
253
255
|
file?: Blob;
|
|
254
256
|
insertElement?: Element;
|
|
255
257
|
touchData?: ITouchData;
|
|
@@ -792,6 +794,13 @@ export interface IShowQuickTBarOptions {
|
|
|
792
794
|
popHeight: number;
|
|
793
795
|
bodyRightSpace: number;
|
|
794
796
|
}
|
|
797
|
+
/**
|
|
798
|
+
|
|
799
|
+
*/
|
|
800
|
+
export interface IPositionChanged {
|
|
801
|
+
x: boolean;
|
|
802
|
+
y: boolean;
|
|
803
|
+
}
|
|
795
804
|
/**
|
|
796
805
|
|
|
797
806
|
*/
|
|
@@ -802,13 +811,6 @@ export interface IQuickToolbarOptions {
|
|
|
802
811
|
toolbarItems: (string | IToolbarItems)[];
|
|
803
812
|
cssClass: string;
|
|
804
813
|
}
|
|
805
|
-
/**
|
|
806
|
-
|
|
807
|
-
*/
|
|
808
|
-
export interface IPositionChanged {
|
|
809
|
-
x: Boolean;
|
|
810
|
-
y: Boolean;
|
|
811
|
-
}
|
|
812
814
|
/**
|
|
813
815
|
* Provides information about a BeforeQuickToolbarOpen event.
|
|
814
816
|
*/
|
|
@@ -1120,8 +1122,6 @@ export interface ImageSuccessEventArgs {
|
|
|
1120
1122
|
e?: object;
|
|
1121
1123
|
/**
|
|
1122
1124
|
* Returns the details about upload file.
|
|
1123
|
-
*
|
|
1124
|
-
* @blazorType Syncfusion.EJ2.Blazor.Inputs.FileInfo
|
|
1125
1125
|
*/
|
|
1126
1126
|
file: FileInfo;
|
|
1127
1127
|
/**
|
|
@@ -1134,8 +1134,6 @@ export interface ImageSuccessEventArgs {
|
|
|
1134
1134
|
operation: string;
|
|
1135
1135
|
/**
|
|
1136
1136
|
* Returns the upload event operation.
|
|
1137
|
-
*
|
|
1138
|
-
* @blazorType ResponseEventArgs
|
|
1139
1137
|
*/
|
|
1140
1138
|
response?: ResponseEventArgs;
|
|
1141
1139
|
/**
|
|
@@ -1157,8 +1155,6 @@ export interface ImageFailedEventArgs {
|
|
|
1157
1155
|
e?: object;
|
|
1158
1156
|
/**
|
|
1159
1157
|
* Returns the details about upload file.
|
|
1160
|
-
*
|
|
1161
|
-
* @blazorType Syncfusion.EJ2.Blazor.Inputs.FileInfo
|
|
1162
1158
|
*/
|
|
1163
1159
|
file: FileInfo;
|
|
1164
1160
|
/**
|
|
@@ -1171,8 +1167,6 @@ export interface ImageFailedEventArgs {
|
|
|
1171
1167
|
operation: string;
|
|
1172
1168
|
/**
|
|
1173
1169
|
* Returns the upload event operation.
|
|
1174
|
-
*
|
|
1175
|
-
* @blazorType ResponseEventArgs
|
|
1176
1170
|
*/
|
|
1177
1171
|
response?: ResponseEventArgs;
|
|
1178
1172
|
/**
|
|
@@ -1258,8 +1252,6 @@ export interface ToolbarClickEventArgs {
|
|
|
1258
1252
|
cancel: boolean;
|
|
1259
1253
|
/**
|
|
1260
1254
|
* Defines the current Toolbar Item Object.
|
|
1261
|
-
*
|
|
1262
|
-
* @blazorType Syncfusion.EJ2.Blazor.Navigations.ItemModel
|
|
1263
1255
|
*/
|
|
1264
1256
|
item: ItemModel;
|
|
1265
1257
|
/**
|
|
@@ -1326,16 +1318,12 @@ export interface ImageUploadingEventArgs {
|
|
|
1326
1318
|
cancel: boolean;
|
|
1327
1319
|
/**
|
|
1328
1320
|
* Defines the additional data in key and value pair format that will be submitted to the upload action.
|
|
1329
|
-
*
|
|
1330
|
-
* @blazorType object
|
|
1331
1321
|
*/
|
|
1332
1322
|
customFormData: {
|
|
1333
1323
|
[key: string]: Object;
|
|
1334
1324
|
}[];
|
|
1335
1325
|
/**
|
|
1336
1326
|
* Returns the XMLHttpRequest instance that is associated with upload action.
|
|
1337
|
-
*
|
|
1338
|
-
* @blazorType object
|
|
1339
1327
|
*/
|
|
1340
1328
|
currentRequest?: {
|
|
1341
1329
|
[key: string]: string;
|
|
@@ -314,7 +314,7 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
314
314
|
/**
|
|
315
315
|
* Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.
|
|
316
316
|
*
|
|
317
|
-
* @default
|
|
317
|
+
* @default true.
|
|
318
318
|
*/
|
|
319
319
|
showTooltip?: boolean;
|
|
320
320
|
|
|
@@ -685,7 +685,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
685
685
|
* Set the cancel argument to true to cancel the command execution.
|
|
686
686
|
*
|
|
687
687
|
* @event 'actionBegin'
|
|
688
|
-
* @blazorProperty 'OnActionBegin'
|
|
689
688
|
*/
|
|
690
689
|
actionBegin?: EmitType<ActionBeginEventArgs>;
|
|
691
690
|
|
|
@@ -693,7 +692,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
693
692
|
* Triggers after command execution using toolbar items or executeCommand method.
|
|
694
693
|
*
|
|
695
694
|
* @event 'actionComplete'
|
|
696
|
-
* @blazorProperty 'OnActionComplete'
|
|
697
695
|
*/
|
|
698
696
|
actionComplete?: EmitType<ActionCompleteEventArgs>;
|
|
699
697
|
|
|
@@ -703,8 +701,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
703
701
|
* Set the cancel argument to true to cancel the open of a dialog.
|
|
704
702
|
*
|
|
705
703
|
* @event 'beforeDialogOpen'
|
|
706
|
-
* @blazorProperty 'OnDialogOpen'
|
|
707
|
-
* @blazorType Syncfusion.EJ2.Blazor.Popups.BeforeOpenEventArgs
|
|
708
704
|
*/
|
|
709
705
|
|
|
710
706
|
beforeDialogOpen?: EmitType<BeforeOpenEventArgs>;
|
|
@@ -713,8 +709,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
713
709
|
* Event triggers when a dialog is opened.
|
|
714
710
|
*
|
|
715
711
|
* @event 'dialogOpen'
|
|
716
|
-
* @blazorProperty 'DialogOpened'
|
|
717
|
-
* @blazorType DialogOpenEventArgs
|
|
718
712
|
*/
|
|
719
713
|
dialogOpen?: EmitType<Object>;
|
|
720
714
|
|
|
@@ -724,8 +718,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
724
718
|
* Set the cancel argument to true to prevent closing a dialog.
|
|
725
719
|
*
|
|
726
720
|
* @event 'beforeDialogClose'
|
|
727
|
-
* @blazorProperty 'OnDialogClose'
|
|
728
|
-
* @blazorType Syncfusion.EJ2.Blazor.Popups.BeforeOpenEventArgs
|
|
729
721
|
*/
|
|
730
722
|
beforeDialogClose?: EmitType<BeforeCloseEventArgs>;
|
|
731
723
|
|
|
@@ -733,8 +725,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
733
725
|
* Event triggers after the dialog has been closed.
|
|
734
726
|
*
|
|
735
727
|
* @event 'dialogClose'
|
|
736
|
-
* @blazorProperty 'DialogClosed'
|
|
737
|
-
* @blazorType DialogCloseEventArgs
|
|
738
728
|
*/
|
|
739
729
|
dialogClose?: EmitType<Object>;
|
|
740
730
|
|
|
@@ -742,7 +732,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
742
732
|
* Event triggers when the quick toolbar is being opened.
|
|
743
733
|
*
|
|
744
734
|
* @event 'beforeQuickToolbarOpen'
|
|
745
|
-
* @blazorProperty 'OnQuickToolbarOpen'
|
|
746
735
|
*/
|
|
747
736
|
beforeQuickToolbarOpen?: EmitType<BeforeQuickToolbarOpenArgs>;
|
|
748
737
|
|
|
@@ -750,8 +739,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
750
739
|
* Event triggers when a quick toolbar is opened.
|
|
751
740
|
*
|
|
752
741
|
* @event 'quickToolbarOpen'
|
|
753
|
-
* @blazorProperty 'QuickToolbarOpened'
|
|
754
|
-
* @blazorType QuickToolbarEventArgs
|
|
755
742
|
*/
|
|
756
743
|
quickToolbarOpen?: EmitType<Object>;
|
|
757
744
|
|
|
@@ -759,8 +746,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
759
746
|
* Event triggers after the quick toolbar has been closed.
|
|
760
747
|
*
|
|
761
748
|
* @event 'quickToolbarClose'
|
|
762
|
-
* @blazorProperty 'QuickToolbarClosed'
|
|
763
|
-
* @blazorType QuickToolbarEventArgs
|
|
764
749
|
*/
|
|
765
750
|
quickToolbarClose?: EmitType<Object>;
|
|
766
751
|
|
|
@@ -776,7 +761,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
776
761
|
* Triggers when the toolbar items status is updated.
|
|
777
762
|
*
|
|
778
763
|
* @event 'updatedToolbarStatus'
|
|
779
|
-
* @blazorType ToolbarUpdateEventArgs
|
|
780
764
|
*/
|
|
781
765
|
updatedToolbarStatus?: EmitType<ToolbarStatusEventArgs>;
|
|
782
766
|
|
|
@@ -784,7 +768,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
784
768
|
* Event triggers when the image is selected or dragged into the insert image dialog.
|
|
785
769
|
*
|
|
786
770
|
* @event 'imageSelected'
|
|
787
|
-
* @blazorProperty 'OnImageSelected'
|
|
788
771
|
*/
|
|
789
772
|
imageSelected?: EmitType<SelectedEventArgs>;
|
|
790
773
|
|
|
@@ -799,7 +782,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
799
782
|
* Event triggers when the selected image begins to upload in the insert image dialog.
|
|
800
783
|
*
|
|
801
784
|
* @event 'imageUploading'
|
|
802
|
-
* @blazorProperty 'OnImageUploading'
|
|
803
785
|
*/
|
|
804
786
|
imageUploading?: EmitType<UploadingEventArgs>;
|
|
805
787
|
|
|
@@ -807,8 +789,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
807
789
|
* Event triggers when the image is successfully uploaded to the server side.
|
|
808
790
|
*
|
|
809
791
|
* @event 'imageUploadSuccess'
|
|
810
|
-
* @blazorProperty 'OnImageUploadSuccess'
|
|
811
|
-
* @blazorType ImageSuccessEventArgs
|
|
812
792
|
*/
|
|
813
793
|
imageUploadSuccess?: EmitType<Object>;
|
|
814
794
|
|
|
@@ -816,8 +796,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
816
796
|
* Event triggers when there is an error in the image upload.
|
|
817
797
|
*
|
|
818
798
|
* @event 'imageUploadFailed'
|
|
819
|
-
* @blazorProperty 'OnImageUploadFailed'
|
|
820
|
-
* @blazorType ImageFailedEventArgs
|
|
821
799
|
*/
|
|
822
800
|
imageUploadFailed?: EmitType<Object>;
|
|
823
801
|
|
|
@@ -825,7 +803,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
825
803
|
* Event triggers when the selected image is cleared from the insert image dialog.
|
|
826
804
|
*
|
|
827
805
|
* @event 'imageRemoving'
|
|
828
|
-
* @blazorProperty 'OnImageRemoving'
|
|
829
806
|
*/
|
|
830
807
|
imageRemoving?: EmitType<RemovingEventArgs>;
|
|
831
808
|
|
|
@@ -833,7 +810,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
833
810
|
* Event triggers when the selected image is cleared from the Rich Text Editor Content.
|
|
834
811
|
*
|
|
835
812
|
* @event 'afterImageDelete'
|
|
836
|
-
* @blazorProperty 'OnImageDelete'
|
|
837
813
|
*/
|
|
838
814
|
afterImageDelete?: EmitType<AfterImageDeleteEventArgs>;
|
|
839
815
|
|
|
@@ -890,7 +866,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
890
866
|
* Triggers when the Rich Text Editor is rendered.
|
|
891
867
|
*
|
|
892
868
|
* @event 'created'
|
|
893
|
-
* @blazorProperty 'Created'
|
|
894
869
|
*/
|
|
895
870
|
created?: EmitType<Object>;
|
|
896
871
|
|
|
@@ -898,8 +873,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
898
873
|
* Triggers when the Rich Text Editor is destroyed.
|
|
899
874
|
*
|
|
900
875
|
* @event 'destroyed'
|
|
901
|
-
* @blazorProperty 'Destroyed'
|
|
902
|
-
* @blazorType DestroyedEventArgs
|
|
903
876
|
*/
|
|
904
877
|
destroyed?: EmitType<Object>;
|
|
905
878
|
|
|
@@ -907,7 +880,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
907
880
|
* Event triggers before sanitize the value. It's only applicable to editorMode as `HTML`.
|
|
908
881
|
*
|
|
909
882
|
* @event 'beforeSanitizeHtml'
|
|
910
|
-
* @blazorProperty 'OnSanitizeHtml'
|
|
911
883
|
*/
|
|
912
884
|
beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
|
|
913
885
|
|
|
@@ -915,7 +887,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
915
887
|
* Triggers when Rich Text Editor is focused out.
|
|
916
888
|
*
|
|
917
889
|
* @event 'blur'
|
|
918
|
-
* @blazorType BlurEventArgs
|
|
919
890
|
*/
|
|
920
891
|
blur?: EmitType<Object>;
|
|
921
892
|
|
|
@@ -923,8 +894,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
923
894
|
* Triggers when Rich Text Editor Toolbar items is clicked.
|
|
924
895
|
*
|
|
925
896
|
* @event 'toolbarClick'
|
|
926
|
-
* @blazorProperty 'OnToolbarClick'
|
|
927
|
-
* @blazorType ToolbarClickEventArgs
|
|
928
897
|
*/
|
|
929
898
|
toolbarClick?: EmitType<Object>;
|
|
930
899
|
|
|
@@ -932,7 +901,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
932
901
|
* Triggers when Rich Text Editor is focused in
|
|
933
902
|
*
|
|
934
903
|
* @event 'focus'
|
|
935
|
-
* @blazorType FocusEventArgs
|
|
936
904
|
*/
|
|
937
905
|
focus?: EmitType<Object>;
|
|
938
906
|
|
|
@@ -940,7 +908,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
940
908
|
* Triggers only when Rich Text Editor is blurred and changes are done to the content.
|
|
941
909
|
*
|
|
942
910
|
* @event 'change'
|
|
943
|
-
* @blazorProperty 'ValueChange'
|
|
944
911
|
*/
|
|
945
912
|
change?: EmitType<ChangeEventArgs>;
|
|
946
913
|
|
|
@@ -948,7 +915,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
948
915
|
* Triggers only when resizing the image.
|
|
949
916
|
*
|
|
950
917
|
* @event 'resizing'
|
|
951
|
-
* @blazorProperty 'Resizing'
|
|
952
918
|
*/
|
|
953
919
|
resizing?: EmitType<ResizeArgs>;
|
|
954
920
|
|
|
@@ -956,7 +922,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
956
922
|
* Triggers only when start resize the image.
|
|
957
923
|
*
|
|
958
924
|
* @event 'resizeStart'
|
|
959
|
-
* @blazorProperty 'OnResizeStart'
|
|
960
925
|
*/
|
|
961
926
|
resizeStart?: EmitType<ResizeArgs>;
|
|
962
927
|
|
|
@@ -964,7 +929,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
964
929
|
* Triggers only when stop resize the image.
|
|
965
930
|
*
|
|
966
931
|
* @event 'resizeStop'
|
|
967
|
-
* @blazorProperty 'OnResizeStop'
|
|
968
932
|
*/
|
|
969
933
|
resizeStop?: EmitType<ResizeArgs>;
|
|
970
934
|
|
|
@@ -986,7 +950,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
986
950
|
* Triggers before drop the image.
|
|
987
951
|
*
|
|
988
952
|
* @event 'beforeImageDrop'
|
|
989
|
-
* @blazorProperty 'OnImageDrop'
|
|
990
953
|
*/
|
|
991
954
|
beforeImageDrop?: EmitType<ImageDropEventArgs>;
|
|
992
955
|
|
|
@@ -996,7 +959,6 @@ export interface RichTextEditorModel extends ComponentModel{
|
|
|
996
959
|
* {% codeBlock src='rich-text-editor/formatter/index.md' %}{% endcodeBlock %}
|
|
997
960
|
*
|
|
998
961
|
* @default null
|
|
999
|
-
* @blazorType object
|
|
1000
962
|
*/
|
|
1001
963
|
formatter?: IFormatter;
|
|
1002
964
|
|