@syncfusion/ej2-angular-richtexteditor 26.1.35 → 26.1.38

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 ### RichTextEditor
 
+#### Bug Fixes
+
+- Now, fixed the issue with font color and the background color popup not opening in rare cases.
+
+## 26.1.35 (2024-06-11)
+
+### RichTextEditor
+
 #### Features
 
 - **Table row and column selection**: Improved the selection of table rows and columns using the mouse or keyboard with Shift + arrow keys, setting the background color of the selected cells. Additionally, enabled table selection when pressing the backspace key after the table and the delete key before the table.

package/package.json

@@ -2,7 +2,7 @@
   "_from": "@syncfusion/ej2-angular-richtexteditor@*",
   "_id": "@syncfusion/ej2-angular-richtexteditor@26.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-wm9XJV/y9eUMpRCx+WtwFj0hyzQC5zxKl0+YtoMVZWbYq/rb1eTMFhWn0cQGFMrUgspC7d0c5eUmiMkQ9PHKig==",
+  "_integrity": "sha512-X5s5LhCBRa2aa1TDtbCCoN1i2mxP2w33uA5h4PRlibDcIzWyGsT1oF335Cw1ElxWpWK6p51EAPxku4ywqiRGGw==",
   "_location": "/@syncfusion/ej2-angular-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-angular-release/@syncfusion/ej2-angular-richtexteditor/-/ej2-angular-richtexteditor-26.1.35.tgz",
-  "_shasum": "23edd355867b477d4a3fa9311cb7c46614356588",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-angular-hotfix/@syncfusion/ej2-angular-richtexteditor/-/ej2-angular-richtexteditor-26.1.35.tgz",
+  "_shasum": "e1d0e23afd9698d1aaa3869fab72de79647179af",
   "_spec": "@syncfusion/ej2-angular-richtexteditor@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/ivypackages/included",
   "author": {
@@ -32,8 +32,8 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-angular-base": "~26.1.35",
-    "@syncfusion/ej2-base": "~26.1.35",
-    "@syncfusion/ej2-richtexteditor": "26.1.35",
+    "@syncfusion/ej2-base": "~26.1.37",
+    "@syncfusion/ej2-richtexteditor": "26.1.38",
     "tslib": "^2.3.0"
   },
   "deprecated": false,
@@ -72,5 +72,5 @@
   "schematics": "./schematics/collection.json",
   "sideEffects": false,
   "typings": "syncfusion-ej2-angular-richtexteditor.d.ts",
-  "version": "26.1.35"
+  "version": "26.1.38"
 }

package/schematics/collection.json

@@ -5,36 +5,6 @@
       "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/styles/fluent2.css

@@ -2780,13 +2780,13 @@
   font-size: 2em;
   font-weight: bold;
   height: 40px;
-  line-height: 40px;
+  line-height: 25px;
 }
 .e-rte-dropdown-popup ul .e-item.e-h2 {
   font-size: 1.5em;
   font-weight: bold;
   height: 40px;
-  line-height: 40px;
+  line-height: 25px;
 }
 .e-rte-dropdown-popup ul .e-item.e-h3 {
   font-size: 1.16em;
@@ -3160,13 +3160,13 @@
   margin: 0 auto;
   padding: 6px 12px 6px 12px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
@@ -4068,7 +4068,7 @@
   margin: 0 auto;
   padding: 6px 12px 6px 12px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-rte-elements.e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements.e-dialog .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {

package/styles/rich-text-editor/fluent2.css

@@ -2780,13 +2780,13 @@
   font-size: 2em;
   font-weight: bold;
   height: 40px;
-  line-height: 40px;
+  line-height: 25px;
 }
 .e-rte-dropdown-popup ul .e-item.e-h2 {
   font-size: 1.5em;
   font-weight: bold;
   height: 40px;
-  line-height: 40px;
+  line-height: 25px;
 }
 .e-rte-dropdown-popup ul .e-item.e-h3 {
   font-size: 1.16em;
@@ -3160,13 +3160,13 @@
   margin: 0 auto;
   padding: 6px 12px 6px 12px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {
-  top: -50px;
+  top: -120px;
 }
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
 .e-richtexteditor .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
@@ -4068,7 +4068,7 @@
   margin: 0 auto;
   padding: 6px 12px 6px 12px;
   position: relative;
-  top: -50px;
+  top: -120px;
 }
 .e-rte-elements.e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
 .e-rte-elements.e-dialog .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn {

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

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

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

@@ -1,8 +0,0 @@
-"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 schematics_1.componentBuilder(options, sampleDetails);
-}
-exports.default = default_1;

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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-/**
- * 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

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

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

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

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

@@ -1,125 +0,0 @@
-{
-  "$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

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

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

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

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

@@ -1,8 +0,0 @@
-"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 schematics_1.componentBuilder(options, sampleDetails);
-}
-exports.default = default_1;

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

@@ -1,8 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,10 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-/**
- * 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

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

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

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