@syncfusion/ej2-angular-richtexteditor 29.1.40 → 29.2.4-738301

package/CHANGELOG.md

@@ -6,9 +6,19 @@
 
 #### Bug Fixes
 
+- `#I724398` - Now, the issue with the console error while running `Vitest` unit tests in the rich text editor has been resolved.
+- `#FB67289` - Now, the issue where the Edit Link popup did not retain the URL after applying font color in the Rich Text Editor has been resolved.
+
+## 29.1.40 (2025-04-29)
+
+### RichTextEditor
+
+#### Bug Fixes
+
 - `#I698253` - Now, The issue with the page becoming unresponsive when removing inline code in the RichTextEditor has been resolved.
 - `#I709931` - Now, when pasting content into the Rich Text Editor with the Enter key configuration set to `<br>`, only a single `<br>` tag is inserted instead of the expected two.
 - `#I715942` - Now, the issue where setting the value property to null resulted in focus inside the editor has been resolved.
+- `#I714681` - Now the issue where the drag and drop file upload popup appeared outside the Rich Text Editor container has been resolved.
 
 ## 29.1.39 (2025-04-22)
 

package/README.md

@@ -119,4 +119,4 @@ Check the changelog [here](https://github.com/syncfusion/ej2-angular-ui-componen
 
 See [LICENSE FILE](https://github.com/syncfusion/ej2/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=angular-rich-text-editor-npm) for more info.
 
-© Copyright 2025 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
+&copy; Copyright 2022 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential<sup>®</sup> Studio license and copyright applies to this distribution.

package/package.json

@@ -1,44 +1,33 @@
 {
-  "_from": "@syncfusion/ej2-angular-richtexteditor@*",
-  "_id": "@syncfusion/ej2-angular-richtexteditor@29.1.39",
-  "_inBundle": false,
-  "_integrity": "sha512-guNKppn3tC7CvvnRZE8M1wMDSDbu4hM5rxo685vFIhs+u+ZmgWNtvaGAaeCNDaMQ4MZ4G4I6sMLhQdVCapbNAw==",
-  "_location": "/@syncfusion/ej2-angular-richtexteditor",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-angular-richtexteditor@*",
-    "name": "@syncfusion/ej2-angular-richtexteditor",
-    "escapedName": "@syncfusion%2fej2-angular-richtexteditor",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
+  "name": "@syncfusion/ej2-angular-richtexteditor",
+  "version": "29.2.4-738301",
+  "description": "Essential JS 2 RichTextEditor component for Angular",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "schematics": "./schematics/collection.json",
+  "dependencies": {
+    "@syncfusion/ej2-base": "~29.2.4",
+    "@syncfusion/ej2-angular-base": "~29.2.4",
+    "@syncfusion/ej2-richtexteditor": "29.2.4-738301",
+    "tslib": "^2.3.0"
   },
-  "_requiredBy": [
-    "/"
+  "keywords": [
+    "angular-rich-text-editor",
+    "angular-html-editor",
+    "angular-markdown-editor",
+    "angular-wysiwyg-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-angular-hotfix/@syncfusion/ej2-angular-richtexteditor/-/ej2-angular-richtexteditor-29.1.39.tgz",
-  "_shasum": "d264c26ff6bfda79eb5080007435a3666d34ddd8",
-  "_spec": "@syncfusion/ej2-angular-richtexteditor@*",
-  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/ivypackages/included",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bugs": {
-    "url": "https://github.com/syncfusion/ej2-angular-ui-components/issues"
-  },
-  "bundleDependencies": false,
-  "dependencies": {
-    "@syncfusion/ej2-angular-base": "~29.1.33",
-    "@syncfusion/ej2-base": "~29.1.36",
-    "@syncfusion/ej2-richtexteditor": "29.1.40"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-angular-ui-components.git"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 RichTextEditor component for Angular",
+  "sideEffects": true,
+  "module": "fesm2015/syncfusion-ej2-angular-richtexteditor.mjs",
   "es2020": "fesm2020/syncfusion-ej2-angular-richtexteditor.mjs",
   "esm2020": "esm2020/syncfusion-ej2-angular-richtexteditor.mjs",
+  "fesm2020": "fesm2020/syncfusion-ej2-angular-richtexteditor.mjs",
+  "fesm2015": "fesm2015/syncfusion-ej2-angular-richtexteditor.mjs",
+  "typings": "syncfusion-ej2-angular-richtexteditor.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
@@ -51,25 +40,5 @@
       "node": "./fesm2015/syncfusion-ej2-angular-richtexteditor.mjs",
       "default": "./fesm2020/syncfusion-ej2-angular-richtexteditor.mjs"
     }
-  },
-  "fesm2015": "fesm2015/syncfusion-ej2-angular-richtexteditor.mjs",
-  "fesm2020": "fesm2020/syncfusion-ej2-angular-richtexteditor.mjs",
-  "homepage": "https://www.syncfusion.com/angular-components",
-  "keywords": [
-    "angular-rich-text-editor",
-    "angular-html-editor",
-    "angular-markdown-editor",
-    "angular-wysiwyg-editor"
-  ],
-  "license": "SEE LICENSE IN license",
-  "module": "fesm2015/syncfusion-ej2-angular-richtexteditor.mjs",
-  "name": "@syncfusion/ej2-angular-richtexteditor",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/syncfusion/ej2-angular-ui-components.git"
-  },
-  "schematics": "./schematics/collection.json",
-  "sideEffects": false,
-  "typings": "syncfusion-ej2-angular-richtexteditor.d.ts",
-  "version": "29.1.40"
+  }
 }

package/schematics/collection.json

@@ -1,11 +1,40 @@
 {
-                "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-                "schematics": {
-                  "ng-add": {
-                    "description": "Adds Essential JS 2 specific Angular package to an application",
-                    "factory": "./ng-add",
-                    "schema": "./ng-add/schema.json"
-                  }
-                }
-              }
-              
+  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds Essential JS 2 specific Angular package to an application",
+      "factory": "./ng-add",
+      "schema": "./ng-add/schema.json"
+    },
+    "richtexteditor-iframe": {
+      "description": "Create an Angular RichTextEditor component with iframe feature",
+      "factory": "./generators/richtexteditor-iframe",
+      "schema": "./generators/richtexteditor-iframe/schema.json"
+    },
+    "richtexteditor-inline": {
+      "description": "Create an Angular RichTextEditor component with inline feature",
+      "factory": "./generators/richtexteditor-inline",
+      "schema": "./generators/richtexteditor-inline/schema.json"
+    },
+    "richtexteditor-markdown": {
+      "description": "Create an Angular RichTextEditor component with markdown feature",
+      "factory": "./generators/richtexteditor-markdown",
+      "schema": "./generators/richtexteditor-markdown/schema.json"
+    },
+    "richtexteditor-overview": {
+      "description": "Create an Angular RichTextEditor component with all tools",
+      "factory": "./generators/richtexteditor-overview",
+      "schema": "./generators/richtexteditor-overview/schema.json"
+    },
+    "richtexteditor-reactform": {
+      "description": "Create an Angular RichTextEditor component with reactive form",
+      "factory": "./generators/richtexteditor-reactform",
+      "schema": "./generators/richtexteditor-reactform/schema.json"
+    },
+    "richtexteditor-templatedriven": {
+      "description": "Create an Angular RichTextEditor component with template form",
+      "factory": "./generators/richtexteditor-templatedriven",
+      "schema": "./generators/richtexteditor-templatedriven/schema.json"
+    }
+  }
+}

package/schematics/generators/richtexteditor-iframe/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/richtexteditor-iframe/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+const sampleDetails = require("./sample-details");
+function default_1(options) {
+    return (0, schematics_1.componentBuilder)(options, sampleDetails);
+}
+exports.default = default_1;

package/schematics/generators/richtexteditor-iframe/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/richtexteditor-iframe/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/richtexteditor-iframe/sample-details.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.libModules = exports.packageName = exports.diModules = exports.sampleName = exports.componentName = void 0;
+exports.componentName = 'richtexteditor';
+exports.sampleName = 'iframe';
+exports.diModules = 'ToolbarService,LinkService,ImageService,HtmlEditorService';
+exports.packageName = '@syncfusion/ej2-angular-richtexteditor';
+exports.libModules = 'RichTextEditorModule';

package/schematics/generators/richtexteditor-iframe/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'richtexteditor';
+export const sampleName: string = 'iframe';
+export const diModules: string =  'ToolbarService,LinkService,ImageService,HtmlEditorService';
+export const packageName: string = '@syncfusion/ej2-angular-richtexteditor';
+export const libModules: string = 'RichTextEditorModule';

package/schematics/generators/richtexteditor-iframe/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,3 @@
+/**
+ * RTE Iframe Sample
+ */

package/schematics/generators/richtexteditor-iframe/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,44 @@
+<div class="control-section">
+    <div id='iframe-rte'>
+        <h4>Iframe RTE</h4>
+        <ejs-richtexteditor #iframeRTE id='iframeRTE' [toolbarSettings]='tools' [iframeSettings]='iframe' [height]='height'>
+            <ng-template #valueTemplate>
+                <p>The rich text editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. 
+                    Users can format their content using standard toolbar commands.</p>
+                <p><b>Key features:</b></p>
+                <ul>
+                    <li>
+                        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
+                    </li>
+                    <li>
+                        <p>Capable of handling markdown editing.</p>
+                    </li>
+                    <li>
+                        <p>Contains a modular library to load the necessary functionality on demand.</p>
+                    </li>
+                    <li>
+                        <p>Provides a fully customizable toolbar.</p>
+                    </li>
+                    <li>
+                        <p>Provides HTML view to edit the source directly for developers.</p>
+                    </li>
+                    <li>
+                        <p>Supports third-party library integration.</p>
+                    </li>
+                    <li>
+                        <p>Allows preview of modified content before saving it.</p>
+                    </li>
+                    <li>
+                        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
+                    </li>
+                    <li>
+                        <p>Contains undo/redo manager.</p>
+                    </li>
+                    <li>
+                        <p>Creates bulleted and numbered lists.</p>
+                    </li>
+                </ul>
+            </ng-template>
+        </ejs-richtexteditor>
+    </div>
+</div>

package/schematics/generators/richtexteditor-iframe/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,28 @@
+/**
+ * RTE Iframe Sample
+ */
+import { Component } from '@angular/core';
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+
+    // Define a required toolbar items
+    public tools: object = {
+        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+        'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+        'LowerCase', 'UpperCase', '|',
+        'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+        'Outdent', 'Indent', '|',
+        'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
+        'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+    };
+    // Enable the iframe
+    public iframe: object = { enable: true };
+    // Set the RTE height
+    public height: number = 500;
+}

package/schematics/generators/richtexteditor-iframe/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/richtexteditor-iframe/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/generators/richtexteditor-iframe/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "richtexteditor-iframe",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "richtexteditor-iframe"
+}

package/schematics/generators/richtexteditor-iframe/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

package/schematics/generators/richtexteditor-inline/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/richtexteditor-inline/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+const sampleDetails = require("./sample-details");
+function default_1(options) {
+    return (0, schematics_1.componentBuilder)(options, sampleDetails);
+}
+exports.default = default_1;

package/schematics/generators/richtexteditor-inline/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/richtexteditor-inline/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/richtexteditor-inline/sample-details.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.libModules = exports.packageName = exports.diModules = exports.sampleName = exports.componentName = void 0;
+exports.componentName = 'richtexteditor';
+exports.sampleName = 'inline';
+exports.diModules = 'ToolbarService,LinkService,ImageService,HtmlEditorService,QuickToolbarService';
+exports.packageName = '@syncfusion/ej2-angular-richtexteditor';
+exports.libModules = 'RichTextEditorModule';

package/schematics/generators/richtexteditor-inline/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'richtexteditor';
+export const sampleName: string = 'inline';
+export const diModules: string =  'ToolbarService,LinkService,ImageService,HtmlEditorService,QuickToolbarService';
+export const packageName: string = '@syncfusion/ej2-angular-richtexteditor';
+export const libModules: string = 'RichTextEditorModule';

package/schematics/generators/richtexteditor-inline/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,3 @@
+/**
+ * RTE Inline Sample
+ */

package/schematics/generators/richtexteditor-inline/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,10 @@
+<div class="control-section">
+    <div id='inline-rte'>
+        <h4>Inline RTE</h4>
+        <ejs-richtexteditor id='inlineRTE' #inlineRTE [inlineMode]='inlineMode' [toolbarSettings]='toolbarSettings' [format]='format' [fontFamily]='fontFamily'>
+            <ng-template #valueTemplate>
+                <p>The sample is configured with inline mode of editor. Initially, the editor is rendered without a <a href="https://ej2.syncfusion.com/home/" target="_blank">toolbar</a>. The toolbar becomes visible only when the content is selected.</p>
+            </ng-template>
+        </ejs-richtexteditor>
+    </div>
+</div>

package/schematics/generators/richtexteditor-inline/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,30 @@
+/**
+ * RTE Inline Sample
+ */
+import { Component } from '@angular/core';
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css']
+})
+
+export class <%= classify(name) %>Component {
+
+    // Define a toolbar items
+    public toolbarSettings: Object = {
+        items: ['Bold', 'Italic', 'Underline',
+            'Formats', '-', 'Alignments', 'OrderedList', 'UnorderedList',
+            'CreateLink']
+    };
+    // Set the format dropdown width
+    public format: Object = {
+        width: 'auto'
+    };
+    // Set the font family dropdown width
+    public fontFamily: Object = {
+        width: 'auto'
+    };
+    // Enable inline mode
+    public inlineMode: object = { enable: true, onSelection: true };
+}

package/schematics/generators/richtexteditor-inline/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/richtexteditor-inline/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });