@kolkov/angular-editor 3.0.0-beta.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
+<a name="3.0.0"></a>
+## [3.0.0](https://github.com/kolkov/angular-editor/compare/v2.0.0...v3.0.0) (2025-11-22) Major Angular 20 Upgrade
+
+🎉 **Stable Release** - Production Ready!
+
+### Breaking Changes
+* **Angular Version:** Minimum required version is now Angular 20.0.0
+* **RxJS:** Requires RxJS 7.8.0 or higher (upgraded from 6.5.5)
+* **TypeScript:** Requires TypeScript 5.4 or higher
+* **zone.js:** Updated to 0.15.1
+
+### Features
+* **Angular 20 Support:** Full compatibility with Angular 20.3.13 (v20-lts)
+* **Angular 21 Ready:** Forward compatible with Angular 21.x
+* **Modern Build System:** Updated to latest ng-packagr 20.3.2
+* **Enhanced Type Safety:** Improved TypeScript strict mode compliance
+* **Font Awesome Removed:** No external icon dependencies - using pure SVG icons (27 icons)
+* **Zero External Icon Dependencies:** Fully self-contained icon system
+
+### Migration Path
+* Migrated through: Angular 13 → 18 → 19 → 20
+* All Angular CLI migrations applied successfully
+* Updated DOCUMENT import from @angular/core (Angular 20 requirement)
+* Modernized test infrastructure (waitForAsync)
+
+### Developer Experience
+* **ESLint:** Updated to @angular-eslint 20.x
+* **Linting:** All files pass linting (0 errors)
+* **Build:** Both development and production builds verified
+* **Tests:** 13/13 tests passing (100% success rate)
+
+### Bug Fixes
+* **Icons:** Fixed list icons (unordered/ordered) display consistency in toolbar
+* **Tests:** Fixed AeSelectComponent tests for mousedown event handling
+* **Demo:** Updated demo app for Angular 20 compatibility
+
+### Technical Details
+* Removed deprecated `async` test helper (use `waitForAsync`)
+* Fixed TypeScript strict type checking for event handlers
+* Disabled new strict rules for backward compatibility (prefer-standalone, prefer-inject)
+* Updated moduleResolution to 'bundler' (Angular 20 standard)
+
+### Peer Dependencies
+```json
+{
+  "@angular/common": "^20.0.0 || ^21.0.0",
+  "@angular/core": "^20.0.0 || ^21.0.0",
+  "@angular/forms": "^20.0.0 || ^21.0.0",
+  "rxjs": "^7.8.0"
+}
+```
+
+<a name="3.0.0-beta.2"></a>
+## [3.0.0-beta.2](https://github.com/kolkov/angular-editor/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2025-01-10)
+* Refactor ae-select component (button → span)
+
 <a name="2.0.0"></a>
-## [1.0.2](https://github.com/kolkov/angular-editor/compare/v1.2.0...v2.0.0) (2022-01-06) Majore release
+## [2.0.0](https://github.com/kolkov/angular-editor/compare/v1.2.0...v2.0.0) (2022-01-06) Major release
 * Update to Angular v.13 and new Ivy compatible package format
 
 <a name="1.0.2"></a>

package/README.md

@@ -1,18 +1,18 @@
 <p align="center">
-  <img width="150px" src="https://raw.githubusercontent.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true" alt="AngularEditor logo"/>
+  <img width="150px" src="https://raw.githubusercontent.com/kolkov/angular-editor/main/docs/angular-editor-logo.png?raw=true" alt="AngularEditor logo"/>
 </p>
 
 # AngularEditor
 [![npm version](https://badge.fury.io/js/%40kolkov%2Fangular-editor.svg)](https://badge.fury.io/js/%40kolkov%2Fangular-editor)
 [![demo](https://img.shields.io/badge/demo-StackBlitz-blueviolet.svg)](https://stackblitz.com/edit/angular-editor-wysiwyg)
-[![Build Status](https://travis-ci.com/kolkov/angular-editor.svg?branch=master)](https://travis-ci.com/kolkov/angular-editor)
+[![Build Status](https://travis-ci.com/kolkov/angular-editor.svg?branch=main)](https://travis-ci.com/kolkov/angular-editor)
 [![npm](https://img.shields.io/npm/dm/@kolkov/angular-editor.svg)](https://www.npmjs.com/package/@kolkov/angular-editor)
 [![](https://data.jsdelivr.com/v1/package/npm/@kolkov/angular-editor/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@kolkov/angular-editor)
-[![Coverage Status](https://coveralls.io/repos/github/kolkov/angular-editor/badge.svg?branch=master)](https://coveralls.io/github/kolkov/angular-editor?branch=master)
-[![codecov](https://codecov.io/gh/kolkov/angular-editor/branch/master/graph/badge.svg)](https://codecov.io/gh/kolkov/angular-editor)
+[![Coverage Status](https://coveralls.io/repos/github/kolkov/angular-editor/badge.svg?branch=main)](https://coveralls.io/github/kolkov/angular-editor?branch=main)
+[![codecov](https://codecov.io/gh/kolkov/angular-editor/branch/main/graph/badge.svg)](https://codecov.io/gh/kolkov/angular-editor)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/AndreyKolkov)
 
-A simple native WYSIWYG/Rich Text editor for Angular 6-19+
+A simple native WYSIWYG/Rich Text editor for Angular 20+
 
 ![Nov-27-2019 17-26-29](https://user-images.githubusercontent.com/216412/69763434-259cd800-113b-11ea-918f-0565ebce0e48.gif)
 
@@ -30,15 +30,22 @@ Install via [npm][npm] package manager
 npm install @kolkov/angular-editor --save
 ```
 ### Versions
-3.0.0 and above - for Angular v13+ (removed Font Awesome icons deps)
+3.0.0 and above - for Angular v20+ (CSS variables, modern Angular 20)
 
-2.0.0 and above - for Angular v13.0.0 and above
+2.0.0 and above - for Angular v13-19
 
-1.0.0 and above - for Angular v8.x.x and above
+1.0.0 and above - for Angular v8-12
 
 0.18.4 and above - for Angular v7.x.x
 
-0.15.x - for Angular v6.x.x 
+0.15.x - for Angular v6.x.x
+
+**Note:** Version 3.0.0 requires:
+- Angular 20.0.0 or higher (also compatible with Angular 21)
+- RxJS 7.8.0 or higher
+- TypeScript 5.4 or higher
+
+Attention! `alpha` and `beta` versions may contain breaking changes.
 
 ### Usage
 
@@ -127,7 +134,7 @@ editorConfig: AngularEditorConfig = {
 ```
 For `ngModel` to work, you must import `FormsModule` from `@angular/forms`, or for `formControlName`, you must import `ReactiveFormsModule` from `@angular/forms`
 
-To serve the icons file, ensure that your angular.json contains the following asset configuration:
+To serve the icons file, ensure that your `angular.json` contains the following asset configuration:
 
 ```
 {
@@ -137,17 +144,69 @@ To serve the icons file, ensure that your angular.json contains the following as
 }
 ```
 
+### Styling
+
+Connect default theme file to your `angular.json` or `nx.json` 
+```
+"styles": [
+     "projects/angular-editor-app/src/styles.scss",
+     "node_modules/@kolkov/angular-editor/themes/default.scss"
+],
+```
+or `@include` or `@use` in your project `styles.scss` file, and then override default theme variables like this:
+```scss
+:root {
+  --ae-gap: 5px;
+  --ae-text-area-border: 1px solid #ddd;
+  --ae-text-area-border-radius: 0;
+  --ae-focus-outline-color: #afaeae auto 1px;
+  --ae-toolbar-padding: 1px;
+  --ae-toolbar-bg-color: #b3dca0;
+  --ae-toolbar-border-radius: 1px solid #ddd;
+  --ae-button-bg-color: #dadad7;
+  --ae-button-border: 3px solid #3fb74e;
+  --ae-button-radius: 5px;
+  --ae-button-hover-bg-color: #3fb74e;
+  --ae-button-active-bg-color: red;
+  --ae-button-active-hover-bg-color: blue;
+  --ae-button-disabled-bg-color: gray;
+  --ae-picker-label-color: rgb(78, 84, 155);
+  --ae-picker-icon-bg-color: rgb(34, 41, 122);
+  --ae-picker-option-bg-color: rgba(221, 221, 84, 0.76);
+  --ae-picker-option-active-bg-color: rgba(237, 237, 62, 0.9);
+  --ae-picker-option-focused-bg-color: rgb(255, 255, 0);  
+}
+```
+
 ### Custom buttons
 
 You can define your custom buttons with custom actions using executeCommandFn. It accepts commands from [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).
 The first argument of this method is aCommandName and the second argument is aValueArgument. Example shows a button that adds Angular editor logo into the editor.
 ```html
-<angular-editor id="editor1" formControlName="htmlContent1" [config]="editorConfig">
+<angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
+                (blur)="onBlur($event)">
   <ng-template #customButtons let-executeCommandFn="executeCommandFn">
     <ae-toolbar-set>
-      <ae-button iconClass="fa fa-html5" title="Angular editor logo"
-                 (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)">
-      </ae-button>
+      <button aeButton title="Angular editor logo" (click)="executeCommandFn('insertHtml', angularEditorLogo)">
+        <svg viewBox="-8 0 272 272" xmlns="http://www.w3.org/2000/svg"
+             preserveAspectRatio="xMidYMid" fill="#000000">
+          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+          <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+          <g id="SVGRepo_iconCarrier">
+            <g>
+              <path
+                d="M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z"
+                fill="#E23237"></path>
+              <path
+                d="M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z"
+                fill="#B52E31"></path>
+              <path
+                d="M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z"
+                fill="#FFFFFF"></path>
+            </g>
+          </g>
+        </svg>
+      </button>
     </ae-toolbar-set>
   </ng-template>
 </angular-editor>
@@ -269,9 +328,9 @@ Icons from Ligature Symbols Icons Collection [icons]
 
 ## Contributing
 
-Please read through our [contributing guidelines](https://github.com/kolkov/angular-editor/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+Please read through our [contributing guidelines](https://github.com/kolkov/angular-editor/blob/main/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 
-Editor preferences are available in the [editor config](https://github.com/kolkov/angular-editor/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
+Editor preferences are available in the [editor config](https://github.com/kolkov/angular-editor/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
 
 ## Versioning
 

package/assets/icons/icons.svg

@@ -77,13 +77,13 @@
     <path d="M18.2 14.8L17.5 15.5L14 12L17.5 8.5L18.2 9.2L15.4 12L18.2 14.8Z" fill="#000000"></path>
   </symbol>
   <symbol id="unorderedList" viewBox="0 0 16 16">
-    <g id="SVGRepo_iconCarrier">
+    <g id="SVGRepo_iconCarrier" transform="translate(1.6 1.6) scale(0.8)">
       <rect width="16" height="16" id="icon-bound" fill="none"></rect>
       <path d="M4,3v2h12V3H4z M0,5h2V3H0V5z M4,9h12V7H4V9z M0,9h2V7H0V9z M4,13h12v-2H4V13z M0,13h2v-2H0V13z"></path>
     </g>
   </symbol>
   <symbol id="orderedList" viewBox="0 0 16 16">
-    <g id="SVGRepo_iconCarrier">
+    <g id="SVGRepo_iconCarrier" transform="translate(1.6 1.6) scale(0.8)">
       <rect width="16" height="16" id="icon-bound" fill="none"></rect>
       <path id="list-numbered"
             d="M0,10l0,-1l2,0c0.552,0 1,0.448 1,1l0,1c-0,0.552 -0.448,1 -1,1l-0.75,0c-0.066,-0 -0.13,0.026 -0.177,0.073c-0.047,0.047 -0.073,0.111 -0.073,0.177c0,0.153 0,0.347 0,0.5c-0,0.066 0.026,0.13 0.073,0.177c0.047,0.047 0.111,0.073 0.177,0.073l1.75,0l0,1l-2,0c-0.552,-0 -1,-0.448 -1,-1l0,-1c0,-0.552 0.448,-1 1,-1l0.75,-0c0.066,0 0.13,-0.026 0.177,-0.073c0.047,-0.047 0.073,-0.111 0.073,-0.177c0,-0.153 0,-0.347 0,-0.5c0,-0.066 -0.026,-0.13 -0.073,-0.177c-0.047,-0.047 -0.111,-0.073 -0.177,-0.073l-1.75,0Zm4,1l12,0l0,2l-12,0l0,-2Zm0,-4l12,0l0,2l-12,0l0,-2Zm-3,-3.75c0,-0.066 -0.026,-0.13 -0.073,-0.177c-0.047,-0.047 -0.111,-0.073 -0.177,-0.073l-0.75,0l0,-1l1,0c0.552,0 1,0.448 1,1c-0,1.185 0,4 0,4l-1,0l0,-3.75Zm3,-0.25l12,0l0,2l-12,0l0,-2Z"></path>