@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 17.1.47 to 17.1.48

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+### RichTextEditor
+
+#### New Features
+
+- #230976 - Opens a quick toolbar on right-click support has been provided.
+
+#### Bug Fixes
+
+- #235120 - RichTextEditor's paste as plain text doesn't preserve line break that issue has been resolved.
+
 ## 17.1.43 (2019-04-30)
@@ -7,0 +17,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.47
+*  version : 17.1.48
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-richtexteditor",
-  "version": "17.1.47",
+  "version": "17.1.48",
   "description": "Essential JS 2 RichTextEditor component",
@@ -11,4 +11,4 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.47",
-    "@syncfusion/ej2-navigations": "~17.1.47",
+    "@syncfusion/ej2-base": "~17.1.48",
+    "@syncfusion/ej2-navigations": "~17.1.48",
     "@syncfusion/ej2-popups": "~17.1.47",
@@ -15,0 +15,0 @@ "@syncfusion/ej2-splitbuttons": "~17.1.47"

src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -14,2 +14,3 @@ import { IRichTextEditor } from '../base/interface';
     private nodeSelectionObj;
+    private inlineNode;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -26,2 +27,4 @@ private addEventListener;
     private plainFormatting;
+    private detachInlineElements;
+    private getTextNode;
     private getTextContent;
@@ -28,0 +31,0 @@ private tagGrouping;

src/rich-text-editor/actions/paste-clean-up.js

@@ -16,2 +16,7 @@ import * as events from '../base/constant';
     function PasteCleanup(parent, serviceLocator) {
+        this.inlineNode = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
+            'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input',
+            'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
+            'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg',
+            'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
         this.parent = parent;
@@ -203,4 +208,5 @@ this.locator = serviceLocator;
     PasteCleanup.prototype.plainFormatting = function (value) {
-        var clipBoardElem = this.parent.createElement('span');
+        var clipBoardElem = this.parent.createElement('div');
         clipBoardElem.innerHTML = value;
+        this.detachInlineElements(clipBoardElem);
         var text = this.getTextContent(clipBoardElem);
@@ -212,2 +218,37 @@ var resultElement = this.parent.createElement('span');
     };
+    PasteCleanup.prototype.detachInlineElements = function (element) {
+        while (!isNullOrUndefined(element)) {
+            element = element.firstElementChild ? element.firstElementChild : element;
+            var isInlineElement = false;
+            for (var j = 0; j < this.inlineNode.length && !isInlineElement; j++) {
+                if (element.tagName.toLocaleLowerCase() === this.inlineNode[j]) {
+                    var node = element.nextElementSibling ?
+                        element.nextElementSibling : element.parentElement.nextElementSibling;
+                    if (!isNullOrUndefined(element.childNodes[0]) && element.childNodes[0].textContent !== '') {
+                        element.parentElement.insertBefore(this.getTextNode(element.childNodes[0]), element);
+                    }
+                    detach(element);
+                    element = node;
+                    isInlineElement = true;
+                }
+            }
+            if (!isNullOrUndefined(element) && element.children.length > 0 || isInlineElement) {
+                element = element;
+            }
+            else if (element.nextElementSibling) {
+                element = element.nextElementSibling;
+            }
+            else if (element.parentElement.nextElementSibling) {
+                element = element.parentElement.nextElementSibling;
+            }
+            else {
+                element = null;
+            }
+        }
+    };
+    PasteCleanup.prototype.getTextNode = function (element) {
+        var rootElement = this.parent.createElement('span');
+        rootElement.innerHTML = element.textContent;
+        return rootElement.childNodes[0];
+    };
     PasteCleanup.prototype.getTextContent = function (element) {
@@ -217,14 +258,14 @@ var result;
         result = '';
-        for (var i = 0; i < element.childNodes.length; i++) {
-            text = null;
-            if (element.childNodes[i].nodeType === 1) {
-                text = this.getTextContent(element.childNodes[i]);
-            }
-            else if (element.childNodes[i].nodeType === 3) {
-                text = element.childNodes[i].nodeValue;
-            }
-            if (text) {
-                if (/\S$/.test(result) && /^\S/.test(text)) {
-                    text = ' ' + text;
+        if (element.children.length === 0 && element.textContent.trim() !== '') {
+            text = '<p>' + element.textContent + '</p>';
+            result += text;
+        }
+        else {
+            for (var i = 0; i < element.children.length; i++) {
+                if (!isNullOrUndefined(element.children[i])) {
+                    text = this.getTextContent(element.children[i]);
                 }
+                else {
+                    text = '<p>' + element.children[i].textContent + '</p>';
+                }
                 result += text;
@@ -231,0 +272,0 @@ }

src/rich-text-editor/base/rich-text-editor-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';import { IFontProperties, IFormatProperties, IColorProperties, IExecutionGroup, executeGroup, CommandName, ResizeArgs } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType } from './enum';import { EditorMode } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode } from '../base/util';
+import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';import { IFontProperties, IFormatProperties, IColorProperties, IExecutionGroup, executeGroup, CommandName, ResizeArgs } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType } from './enum';import { EditorMode } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode } from '../base/util';
 import {ChangeEventArgs} from "./rich-text-editor";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/rich-text-editor/base/rich-text-editor.d.ts

@@ -50,2 +50,3 @@ import { Component, ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
     private timeInterval;
+    private touchModule;
     /**
@@ -606,2 +607,4 @@ * @hidden
     updateValue(value?: string): void;
+    private triggerEditArea;
+    private notifyMouseUp;
     private mouseUp;
@@ -748,2 +751,4 @@ /**
     wireScrollElementsEvents(): void;
+    private wireContextEvent;
+    private unWireContextEvent;
     /**
@@ -753,2 +758,4 @@ * @hidden
     unWireScrollElementsEvents(): void;
+    private touchHandler;
+    private contextHandler;
     private resetHandler;
@@ -755,0 +762,0 @@ /**

src/rich-text-editor/base/rich-text-editor.js

@@ -14,2 +14,13 @@ var __extends = (this && this.__extends) || (function () {
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -25,2 +36,3 @@ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';
+import { Touch as EJ2Touch } from '@syncfusion/ej2-base';
 import { getScrollableParent } from '@syncfusion/ej2-popups';
@@ -335,8 +347,3 @@ import * as events from '../base/constant';
     };
-    RichTextEditor.prototype.mouseUp = function (e) {
-        this.notify(events.mouseUp, { member: 'mouseUp', args: e });
-        if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
-            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0))) {
-            this.notify(events.toolbarRefresh, { args: e });
-        }
+    RichTextEditor.prototype.triggerEditArea = function (e) {
         if (!isIDevice()) {
@@ -352,2 +359,21 @@ this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });
     };
+    RichTextEditor.prototype.notifyMouseUp = function (e) {
+        this.notify(events.mouseUp, { member: 'mouseUp', args: e });
+        if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0))) {
+            this.notify(events.toolbarRefresh, { args: e });
+        }
+        this.triggerEditArea(e);
+    };
+    RichTextEditor.prototype.mouseUp = function (e) {
+        if (this.quickToolbarSettings.showOnRightClick && Browser.isDevice) {
+            var target = e.target;
+            var closestTable = closest(target, 'table');
+            if (target && target.nodeName === 'A' || target.nodeName === 'IMG' || (target.nodeName === 'TD' || target.nodeName === 'TH' ||
+                target.nodeName === 'TABLE' || (closestTable && this.contentModule.getEditPanel().contains(closestTable)))) {
+                return;
+            }
+        }
+        this.notifyMouseUp(e);
+    };
     /**
@@ -629,2 +655,6 @@ * @hidden
                     break;
+                case 'quickToolbarSettings':
+                    newProp.quickToolbarSettings.showOnRightClick ? this.wireContextEvent() : this.unWireContextEvent();
+                    this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
+                    break;
                 default:
@@ -1167,2 +1197,16 @@ this.notify(events.modelChanged, { newProp: newProp, oldProp: oldProp });
     };
+    RichTextEditor.prototype.wireContextEvent = function () {
+        if (this.quickToolbarSettings.showOnRightClick) {
+            EventHandler.add(this.inputElement, 'contextmenu', this.contextHandler, this);
+            if (Browser.isDevice) {
+                this.touchModule = new EJ2Touch(this.inputElement, { tapHold: this.touchHandler.bind(this), tapHoldThreshold: 500 });
+            }
+        }
+    };
+    RichTextEditor.prototype.unWireContextEvent = function () {
+        EventHandler.remove(this.inputElement, 'contextmenu', this.contextHandler);
+        if (Browser.isDevice && this.touchModule) {
+            this.touchModule.destroy();
+        }
+    };
     /**
@@ -1178,2 +1222,9 @@ * @hidden
     };
+    RichTextEditor.prototype.touchHandler = function (e) {
+        this.notifyMouseUp(e.originalEvent);
+        this.triggerEditArea(e.originalEvent);
+    };
+    RichTextEditor.prototype.contextHandler = function (e) {
+        e.preventDefault();
+    };
     RichTextEditor.prototype.resetHandler = function () {
@@ -1215,3 +1266,4 @@ this.setProperties({ value: this.valueContainer.defaultValue === '' ? null : this.valueContainer.defaultValue });
         this.keyboardModule = new KeyboardEvents(this.inputElement, {
-            keyAction: this.keyDown.bind(this), keyConfigs: this.formatter.keyConfig, eventName: 'keydown'
+            keyAction: this.keyDown.bind(this), keyConfigs: __assign({}, this.formatter.keyConfig, this.keyConfig),
+            eventName: 'keydown'
         });
@@ -1226,2 +1278,3 @@ var formElement = closest(this.valueContainer, 'form');
         EventHandler.add(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler, this);
+        this.wireContextEvent();
         this.formatter.editorManager.observer.on(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown, this);
@@ -1277,2 +1330,3 @@ this.element.ownerDocument.defaultView.addEventListener('resize', this.onResizeHandler, true);
         EventHandler.remove(this.inputElement, Browser.touchStartEvent, this.mouseDownHandler);
+        this.unWireContextEvent();
         if (this.formatter) {
@@ -1279,0 +1333,0 @@ this.formatter.editorManager.observer.off(CONSTANT.KEY_DOWN_HANDLER, this.editorKeyDown);

src/rich-text-editor/models/toolbar-settings-model.d.ts

@@ -149,3 +149,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs } from '../base/interface';import { TableStyleItems } from '../models/items';
      * Defines the minimum Width of the table.
-     * @default 0
+     * @default '0'
      */
@@ -174,2 +174,8 @@ minWidth?: string | number;
     /**
+     * Specifies whether to opens a quick toolbar on the right click.
+     * @default false
+     */
+    showOnRightClick?: boolean;
+
+    /**
      * Specifies the action that should happen when scroll the target-parent container.
@@ -176,0 +182,0 @@ * @default 'hide'

src/rich-text-editor/models/toolbar-settings.d.ts

@@ -134,3 +134,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * Defines the minimum Width of the table.
-     * @default 0
+     * @default '0'
      */
@@ -154,2 +154,7 @@ minWidth: string | number;
     /**
+     * Specifies whether to opens a quick toolbar on the right click.
+     * @default false
+     */
+    showOnRightClick: boolean;
+    /**
      * Specifies the action that should happen when scroll the target-parent container.
@@ -156,0 +161,0 @@ * @default 'hide'

src/rich-text-editor/models/toolbar-settings.js

@@ -180,2 +180,5 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
+        Property(false)
+    ], QuickToolbarSettings.prototype, "showOnRightClick", void 0);
+    __decorate([
         Property('hide')
@@ -182,0 +185,0 @@ ], QuickToolbarSettings.prototype, "actionOnScroll", void 0);

src/rich-text-editor/renderer/link-module.js

@@ -110,3 +110,4 @@ import { EventHandler, detach, isNullOrUndefined, select } from '@syncfusion/ej2-base';
         var args = e.args;
-        if (args.which === 2 || args.which === 3) {
+        var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
+        if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
             return;
@@ -113,0 +114,0 @@ }

src/rich-text-editor/renderer/table-module.js

@@ -320,3 +320,4 @@ import { detach, closest, Browser } from '@syncfusion/ej2-base';
         var args = e.args;
-        if (args.which === 2 || args.which === 3) {
+        var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
+        if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
             return;
@@ -323,0 +324,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10568781

increased by0.55%

Lines of code

94188

increased by0.35%

Dependency changes

• Updated@syncfusion/ej2-base@~17.1.48

• Updated@syncfusion/ej2-navigations@~17.1.48