├── .npmrc
├── .travis.yml
├── src
    ├── favicon.ico
    ├── styles.css
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── app
    │   ├── app.component.css
    │   ├── app.component.html
    │   ├── app.component.ts
    │   └── app.module.ts
    ├── tslint.json
    ├── main.ts
    ├── .browserslistrc
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── projects
    └── ngx-wig
    │   ├── package-lock.json
    │   ├── ng-package.json
    │   ├── tsconfig.lib.prod.json
    │   ├── tsconfig.spec.json
    │   ├── src
    │       ├── public_api.ts
    │       ├── test.ts
    │       └── lib
    │       │   ├── ngx-wig-filter-styles.service.ts
    │       │   ├── ngx-wig-filter-styles.service.spec.ts
    │       │   ├── ngx-wig.module.ts
    │       │   ├── config.ts
    │       │   ├── ngx-wig-toolbar.service.ts
    │       │   ├── ngx-wig-filter.service.spec.ts
    │       │   ├── ngx-wig-toolbar.service.spec.ts
    │       │   ├── ngx-wig-component.html
    │       │   ├── ngx-wig-filter.service.ts
    │       │   ├── ngx-wig-component.css
    │       │   ├── ngx-wig.component.ts
    │       │   └── ngx-wig.component.spec.ts
    │   ├── package.json
    │   ├── tsconfig.lib.json
    │   ├── karma.conf.js
    │   └── .eslintrc.json
├── .editorconfig
├── .github
    └── workflows
    │   ├── main.yml
    │   └── npm_publish.yml
├── tsconfig.json
├── .gitignore
├── .eslintrc.json
├── package.json
├── tslint.json
├── README.md
├── angular.json
└── LICENSE


/.npmrc:
--------------------------------------------------------------------------------
1 | always-auth = true


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: required
3 | node_js:
4 | - 18
5 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stevermeister/ngx-wig/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ngx-wig",
3 |   "version": "2.0.0",
4 |   "lockfileVersion": 1
5 | }
6 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ngx-wig",
4 |   "lib": {
5 |     "entryFile": "src/public_api.ts"
6 |   }
7 | }


--------------------------------------------------------------------------------
/projects/ngx-wig/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.lib.json",
3 |   "compilerOptions": {
4 |     "declarationMap": false
5 |   },
6 |   "angularCompilerOptions": {
7 |     "compilationMode": "partial"
8 |   }
9 | }


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "main.ts",
 9 |     "polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/public_api.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * Public API Surface of ngx-wig
 3 |  */
 4 | 
 5 | export * from './lib/ngx-wig-toolbar.service';
 6 | export * from './lib/ngx-wig-filter.service';
 7 | export * from './lib/ngx-wig-filter-styles.service';
 8 | export * from './lib/ngx-wig.component';
 9 | export * from './lib/ngx-wig.module';
10 | export * from './lib/config';
11 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgxWigApp</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
 1 | .font-arial, 
 2 | .font-courier,
 3 | .font-times {
 4 |     width: fit-content !important;
 5 | }
 6 | 
 7 | .font-arial {
 8 |     font-family: Arial, Helvetica, sans-serif;
 9 | }
10 | 
11 | .font-courier {
12 |     font-family: 'Courier New', Courier, monospace;
13 | }
14 | 
15 | .font-times {
16 |     font-family: 'Times New Roman', Times, serif;
17 | }


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "../tslint.json",
 3 |     "rules": {
 4 |         "directive-selector": [
 5 |             true,
 6 |             "attribute",
 7 |             "app",
 8 |             "camelCase"
 9 |         ],
10 |         "component-selector": [
11 |             true,
12 |             "element",
13 |             "app",
14 |             "kebab-case"
15 |         ]
16 |     }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/.browserslistrc:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: test 
 2 | on:
 3 |   pull_request:
 4 |     branches: [ master ]
 5 | jobs:
 6 |   test:
 7 |     runs-on: ubuntu-latest
 8 |     strategy:
 9 |       matrix:
10 |         node-version: [20.x]
11 |     steps:
12 |     - uses: actions/checkout@v2
13 |     - name: Use Node.js ${{ matrix.node-version }}
14 |       uses: actions/setup-node@v1
15 |       with:
16 |         node-version: ${{ matrix.node-version }}
17 |     - run: npm install
18 |     - run: npm test
19 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | // First, initialize the Angular testing environment.
11 | getTestBed().initTestEnvironment(
12 |   BrowserDynamicTestingModule,
13 |   platformBrowserDynamicTesting()
14 | );
15 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | //import 'core-js/es7/reflect';
 4 | import 'zone.js';
 5 | import 'zone.js/testing';
 6 | import { getTestBed } from '@angular/core/testing';
 7 | import {
 8 |   BrowserDynamicTestingModule,
 9 |   platformBrowserDynamicTesting
10 | } from '@angular/platform-browser-dynamic/testing';
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <h1> Examples for ngx-wig </h1>
 2 | 
 3 | 
 4 | <h2>Quick start </h2>
 5 | <ngx-wig [content]="text"></ngx-wig>
 6 | 
 7 | 
 8 | <h2>Placeholder </h2>
 9 | <ngx-wig  [placeholder]="'Enter instructions here.'"></ngx-wig>
10 | 
11 | 
12 | 
13 | <h2>Set buttons </h2>
14 | <ngx-wig  [content]="text" [buttons]="'bold, italic'"></ngx-wig>
15 | 
16 | 
17 | <h2>onContentChange Hook </h2>
18 | <ngx-wig [content]="text" (contentChange)="result = $event"></ngx-wig>
19 | <div [innerHTML]="result"></div>
20 | 
21 | 
22 | <h2>Reactive FormControl </h2>
23 | <ngx-wig  [formControl]="name" [buttons]="'bold, italic'"></ngx-wig>
24 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-wig",
 3 |   "version": "20.0.0",
 4 |   "description": "Light-weight WYSIWYG Editor for Angular",
 5 |   "keywords": [
 6 |     "Angular",
 7 |     "Library",
 8 |     "WYSIWYG",
 9 |     "Editor"
10 |   ],
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "https://github.com/stevermeister/ngx-wig"
14 |   },
15 |   "homepage": "https://github.com/stevermeister/ngx-wig",
16 |   "peerDependencies": {
17 |     "@angular/common": "^20.0.0",
18 |     "@angular/core": "^20.0.0",
19 |     "@angular/forms": "^20.0.0"
20 |   },
21 |   "dependencies": {
22 |     "tslib": "^2.2.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "esModuleInterop": true,
 7 |     "sourceMap": true,
 8 |     "declaration": false,
 9 |     "module": "es2020",
10 |     "moduleResolution": "bundler",
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "strictNullChecks": true,
14 |     "target": "ES2022",
15 |     "typeRoots": [
16 |       "node_modules/@types"
17 |     ],
18 |     "lib": [
19 |       "es2018",
20 |       "dom"
21 |     ],
22 |     "paths": {
23 |       "ngx-wig": [
24 |         "dist/ngx-wig"
25 |       ],
26 |       "ngx-wig/*": [
27 |         "dist/ngx-wig/*"
28 |       ]
29 |     },
30 |     "useDefineForClassFields": false
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | .angular
 8 | 
 9 | # dependencies
10 | /node_modules
11 | 
12 | # profiling files
13 | chrome-profiler-events.json
14 | speed-measure-plugin.json
15 | 
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 | 
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | 
32 | # misc
33 | /.sass-cache
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | npm-debug.log
38 | yarn-error.log
39 | testem.log
40 | /typings
41 | 
42 | # System Files
43 | .DS_Store
44 | Thumbs.db
45 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "declarationMap": true,
 6 |     "module": "es2015",
 7 |     "moduleResolution": "bundler",
 8 |     "declaration": true,
 9 |     "sourceMap": true,
10 |     "inlineSources": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "types": [],
14 |     "lib": [
15 |       "dom",
16 |       "es2018"
17 |     ]
18 |   },
19 |   "angularCompilerOptions": {
20 |     "skipTemplateCodegen": true,
21 |     "strictMetadataEmit": true,
22 |     "fullTemplateTypeCheck": true,
23 |     "strictInjectionParameters": true,
24 |     "enableResourceInlining": true
25 |   },
26 |   "exclude": [
27 |     "src/test.ts",
28 |     "**/*.spec.ts"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/workflows/npm_publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to NPM
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | 
 8 | jobs:
 9 |   publish:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v4 # Updated to use v2
13 |       - uses: actions/setup-node@v4 # Updated to use v3
14 |         with:
15 |           node-version: 20
16 |           registry-url: 'https://registry.npmjs.org/' # Added for npm to configure auth
17 |       - name: Install Angular CLI
18 |         run: npm install -g @angular/cli @angular/core
19 |       - name: Install NPM Dependencies
20 |         run: npm ci
21 |       - name: Build project
22 |         run: npm run build
23 |       - name: Publish to NPM
24 |         uses: JS-DevTools/npm-publish@v3
25 |         with:
26 |           token: ${{ secrets.NPM_TOKEN }}
27 |           package: dist/ngx-wig/package.json
28 |           access: public
29 |         env:
30 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # Ensure npm can authenticate with your token
31 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-filter-styles.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from "@angular/core";
 2 | 
 3 | @Injectable({
 4 |   providedIn: "root",
 5 | })
 6 | export class NgxWigFilterStylesService {
 7 |   constructor() {}
 8 |   public filter(htmlString: string): string {
 9 |     // Parse the HTML string into a DOM object
10 |     const parser: DOMParser = new DOMParser();
11 |     const doc: Document = parser.parseFromString(htmlString, "text/html");
12 | 
13 |     // Remove all style attributes from all elements
14 |     const elementsWithStyle: NodeListOf<Element> =
15 |       doc.querySelectorAll("[style]");
16 |     elementsWithStyle.forEach((el: Element) => el.removeAttribute("style"));
17 | 
18 |     // Remove all <style> elements
19 |     const styleElements: NodeListOf<HTMLStyleElement> =
20 |       doc.querySelectorAll("style");
21 |     styleElements.forEach((el: HTMLStyleElement) =>
22 |       el.parentNode?.removeChild(el)
23 |     );
24 | 
25 |     // Get the inner HTML of the body element
26 |     const bodyInnerHTML: string = doc.body.innerHTML;
27 | 
28 |     return bodyInnerHTML;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };


--------------------------------------------------------------------------------
/projects/ngx-wig/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-filter-styles.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { NgxWigFilterStylesService } from './ngx-wig-filter-styles.service';
 2 | 
 3 | describe('NgxWigFilterStylesService', () => {
 4 |   let service: NgxWigFilterStylesService;
 5 | 
 6 |   beforeEach(() => {
 7 |     service = new NgxWigFilterStylesService();
 8 |   });
 9 | 
10 |   it('should create an instance', () => {
11 |     expect(service).toBeTruthy();
12 |   });
13 | 
14 |   it('should remove style attributes from HTML string', () => {
15 |     const htmlString = '<div style="color: red;">Hello, world!</div>';
16 |     const expectedOutput = '<div>Hello, world!</div>';
17 |     expect(service.filter(htmlString)).toEqual(expectedOutput);
18 |   });
19 | 
20 |   it('should remove style elements from HTML string', () => {
21 |     const htmlString = '<style>.red { color: red; }</style><div>Hello, world!</div>';
22 |     const expectedOutput = '<div>Hello, world!</div>';
23 |     expect(service.filter(htmlString)).toEqual(expectedOutput);
24 |   });
25 | 
26 |   it('should handle empty HTML string', () => {
27 |     const htmlString = '';
28 |     const expectedOutput = '';
29 |     expect(service.filter(htmlString)).toEqual(expectedOutput);
30 |   });
31 | });


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "ignorePatterns": [
 4 |     "projects/**/*"
 5 |   ],
 6 |   "overrides": [
 7 |     {
 8 |       "files": [
 9 |         "*.ts"
10 |       ],
11 |       "parserOptions": {
12 |         "project": [
13 |           "tsconfig.json",
14 |           "e2e/tsconfig.json"
15 |         ],
16 |         "createDefaultProgram": true
17 |       },
18 |       "extends": [
19 |         "plugin:@angular-eslint/ng-cli-compat",
20 |         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
21 |         "plugin:@angular-eslint/template/process-inline-templates"
22 |       ],
23 |       "rules": {
24 |         "@typescript-eslint/consistent-type-definitions": "error",
25 |         "@typescript-eslint/dot-notation": "off",
26 |         "@typescript-eslint/explicit-member-accessibility": [
27 |           "off",
28 |           {
29 |             "accessibility": "explicit"
30 |           }
31 |         ],
32 |         "brace-style": [
33 |           "error",
34 |           "1tbs"
35 |         ],
36 |         "id-blacklist": "off",
37 |         "id-match": "off",
38 |         "no-underscore-dangle": "off"
39 |       }
40 |     },
41 |     {
42 |       "files": [
43 |         "*.html"
44 |       ],
45 |       "extends": [
46 |         "plugin:@angular-eslint/template/recommended"
47 |       ],
48 |       "rules": {}
49 |     }
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig.module.ts:
--------------------------------------------------------------------------------
 1 | import { CommonModule } from '@angular/common';
 2 | import { NgModule, ModuleWithProviders } from '@angular/core';
 3 | import { NgxWigComponent } from './ngx-wig.component';
 4 | import { FormsModule } from '@angular/forms';
 5 | import { TButtonLibrary, DEFAULT_LIBRARY_BUTTONS, BUTTONS, CUSTOM_LIBRARY_BUTTONS } from './config';
 6 | 
 7 | 
 8 | export const getWindowObject = (): Window => window;
 9 | 
10 | @NgModule({
11 |   declarations: [
12 |     NgxWigComponent
13 |   ],
14 |   imports: [
15 |     CommonModule,
16 |     FormsModule,
17 |   ],
18 |   exports: [NgxWigComponent],
19 |   providers: [
20 |     { provide: BUTTONS, multi: true, useValue: DEFAULT_LIBRARY_BUTTONS },
21 |     { provide: 'WINDOW', useFactory: getWindowObject },
22 |   ]
23 | })
24 | export class NgxWigModule {
25 | 
26 |   static forRoot(config?: { buttonsConfig: TButtonLibrary } ): ModuleWithProviders<NgxWigModule> {
27 |     return {
28 |       ngModule: NgxWigModule,
29 |       providers: [
30 |         {
31 |           provide: BUTTONS,
32 |           multi: true, useValue: ((!config || !config?.buttonsConfig) ? DEFAULT_LIBRARY_BUTTONS : config?.buttonsConfig)
33 |         },
34 |         { provide: 'WINDOW', useFactory: getWindowObject },
35 |       ],
36 |     };
37 |   }
38 | 
39 |   static forChild(): ModuleWithProviders<NgxWigModule> {
40 |     return {ngModule: NgxWigModule };
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../.eslintrc.json",
 3 |   "ignorePatterns": [
 4 |     "!**/*"
 5 |   ],
 6 |   "overrides": [
 7 |     {
 8 |       "files": [
 9 |         "*.ts"
10 |       ],
11 |       "parserOptions": {
12 |         "project": [
13 |           "projects/ngx-wig/tsconfig.lib.json",
14 |           "projects/ngx-wig/tsconfig.spec.json"
15 |         ],
16 |         "createDefaultProgram": true
17 |       },
18 |       "rules": {
19 |         "@angular-eslint/component-selector": [
20 |           "error",
21 |           {
22 |             "type": "element",
23 |             "prefix": "ngx-wig",
24 |             "style": "kebab-case"
25 |           }
26 |         ],
27 |         "@angular-eslint/directive-selector": [
28 |           "error",
29 |           {
30 |             "type": "attribute",
31 |             "prefix": "ngx-wig",
32 |             "style": "camelCase"
33 |           }
34 |         ],
35 |         "@typescript-eslint/consistent-type-definitions": "error",
36 |         "@typescript-eslint/dot-notation": "off",
37 |         "@typescript-eslint/explicit-member-accessibility": [
38 |           "off",
39 |           {
40 |             "accessibility": "explicit"
41 |           }
42 |         ],
43 |         "brace-style": [
44 |           "error",
45 |           "1tbs"
46 |         ],
47 |         "id-blacklist": "off",
48 |         "id-match": "off",
49 |         "no-underscore-dangle": "off"
50 |       }
51 |     },
52 |     {
53 |       "files": [
54 |         "*.html"
55 |       ],
56 |       "rules": {}
57 |     }
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, ViewEncapsulation } from '@angular/core';
 2 | import { FormControl } from '@angular/forms';
 3 | 
 4 | @Component({
 5 |     selector: 'app-root',
 6 |     templateUrl: './app.component.html',
 7 |     styleUrls: ['./app.component.css'],
 8 |     encapsulation: ViewEncapsulation.None,
 9 |     standalone: false
10 | })
11 | export class AppComponent {
12 | 
13 |   public result: any;
14 | 
15 |   // tslint:disable:max-line-length
16 |   public text = `There are a few options for making a WYSIWYG editor that works in the browser.
17 | 
18 |   Pure DHTML/JavaScript. Capture mouse input, buttons, keystrokes, etc., and actually edit the HTML of the current document. It's not trivial, but possible.
19 |   Create a custom browser plug-in, Java applet, ActiveX control. This would probably be workable, but would take quite a bit of hackery, and may or may not work. Requiring users to install any sort of plugin is very undesirable.
20 |   Imho, limited approach. Only Java applet is (possibly) cross-browser compatible. But not all users have Java on their machines and JavaScript is supported by all popular browsers (well, maybe except text-based, but I think that Java wouldn't work there too)... --Shtriter 07:20, 26 July 2006 (UTC)
21 |   Users using text based browsers don't matter for WYSIWIG. They are going to be happier editing in Creole --Kevin Holzer (see hlzr.net for contact) 12:38, g29 December 2010 (PST)
22 |   Both Mozilla and Internet Explorer have included ways to make sections of a page editable. IE 5.5 had the MSHTML Editing Platform (archive.org), and Mozilla has its Rich Text Editing API. Both technologies allow Web developers to make parts of a page editable -- in slightly different ways, of course.
23 |   Most current in-browser WYSIWYG editors use the third option.`;
24 |   // tslint:enable:max-line-length
25 |   public name = new FormControl('some text');
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-wig-app",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "lib-build": "ng build ngx-wig",
 6 |     "start": "(ng build ngx-wig --watch ) & sleep 10 && ng serve",
 7 |     "build": "ng build ngx-wig --configuration production",
 8 |     "test": "ng test ngx-wig --browsers=ChromeHeadless --watch=false",
 9 |     "lint": "ng lint ngx-wig",
10 |     "e2e": "ng e2e ngx-wig",
11 |     "package": "ng build ngx-wig --configuration production && cp ./README.md ./dist/ngx-wig && cd dist/ngx-wig && npm pack"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^20.0.0",
16 |     "@angular/common": "^20.0.0",
17 |     "@angular/compiler": "^20.0.0",
18 |     "@angular/core": "^20.0.0",
19 |     "@angular/forms": "^20.0.0",
20 |     "@angular/platform-browser": "^20.0.0",
21 |     "@angular/platform-browser-dynamic": "^20.0.0",
22 |     "@angular/router": "^20.0.0",
23 |     "core-js": "^3.19.3",
24 |     "rxjs": "^6.5.5",
25 |     "tslib": "^2.2.0",
26 |     "zone.js": "^0.15.0"
27 |   },
28 |   "devDependencies": {
29 |     "@angular-devkit/build-angular": "^20.1.1",
30 |     "@angular/cli": "^20.0.0",
31 |     "@angular/compiler-cli": "^20.0.0",
32 |     "@types/jasmine": "^5.1.4",
33 |     "@types/node": "^20.10.5",
34 |     "@typescript-eslint/eslint-plugin": "5.36.2",
35 |     "@typescript-eslint/parser": "5.36.2",
36 |     "eslint": "^8.56.0",
37 |     "eslint-plugin-import": "latest",
38 |     "eslint-plugin-jsdoc": "latest",
39 |     "eslint-plugin-prefer-arrow": "latest",
40 |     "jasmine-core": "^5.1.1",
41 |     "jasmine-spec-reporter": "^7.0.0",
42 |     "karma": "^6.4.2",
43 |     "karma-chrome-launcher": "^3.2.0",
44 |     "karma-coverage-istanbul-reporter": "^3.0.3",
45 |     "karma-jasmine": "^5.1.0",
46 |     "karma-jasmine-html-reporter": "^2.1.0",
47 |     "ng-packagr": "^20.1.0",
48 |     "ts-node": "~7.0.0",
49 |     "typescript": "^5.8.3"
50 |   }
51 | }


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/config.ts:
--------------------------------------------------------------------------------
 1 | import { InjectionToken } from '@angular/core';
 2 | import { NgxWigComponent } from './ngx-wig.component';
 3 | 
 4 | export type CommandFunction = (ctx: NgxWigComponent) => void;
 5 | 
 6 | export interface TButton {
 7 |   label?: string;
 8 |   icon?: string;
 9 |   title?: string;
10 |   ariaLabel?: string;
11 |   children?: TButton[];
12 |   command?: string | CommandFunction;
13 |   styleClass?: string;
14 |   visibleDropdown?: boolean;
15 |   isOpenOnMouseOver?: boolean;
16 |   /**
17 |    * Tracks the currently focusable child button when the toolbar button has a dropdown.
18 |    * Implements a roving tabindex pattern for dropdown items.
19 |    */
20 |   dropdownButtonIndex?: number;
21 | }
22 | 
23 | export interface TButtonLibrary {
24 |   [name: string]: TButton;
25 | }
26 | 
27 | export const DEFAULT_LIBRARY_BUTTONS: TButtonLibrary = {
28 |   list1: {
29 |     label: 'UL',
30 |     title: 'Unordered List',
31 |     command: 'insertunorderedlist',
32 |     styleClass: 'nw-list-ul',
33 |     icon: 'nwe-icon-list-ul'
34 |   },
35 |   list2: {
36 |     label: 'OL',
37 |     title: 'Ordered List',
38 |     command: 'insertorderedlist',
39 |     styleClass: 'nw-list-ol',
40 |     icon: 'nwe-icon-list-ol'
41 |   },
42 |   bold: {
43 |     label: 'B',
44 |     title: 'Bold',
45 |     command: 'bold',
46 |     styleClass: 'nw-bold',
47 |     icon: 'nwe-icon-bold'
48 |   },
49 |   italic: {
50 |     label: 'I',
51 |     title: 'Italic',
52 |     command: 'italic',
53 |     styleClass: 'nw-italic',
54 |     icon: 'nwe-icon-italic'
55 |   },
56 |   link: {
57 |     label: 'Link',
58 |     title: 'Add or remove link',
59 |     command: 'createlink',
60 |     styleClass: 'nw-link',
61 |     icon: 'nwe-icon-link'
62 |   },
63 |   underline: {
64 |     label: 'U',
65 |     title: 'Underline',
66 |     command: 'underline',
67 |     styleClass: 'nw-format-underlined',
68 |     icon: 'nwe-icon-underline'
69 |   }
70 | };
71 | 
72 | export const CUSTOM_LIBRARY_BUTTONS: TButtonLibrary = {
73 |   edithtml: {
74 |     label: 'Edit HTML',
75 |     title: 'Edit HTML',
76 |     command: (ctx: NgxWigComponent) => {
77 |       ctx.editMode = !ctx.editMode;
78 |     },
79 |     styleClass: 'nw-button--source',
80 |     icon: '',
81 |   }
82 | };
83 | 
84 | 
85 | export const BUTTONS = new InjectionToken<TButton[][]>('BUTTONS');
86 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-toolbar.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable, Inject } from '@angular/core';
 2 | import { TButtonLibrary, TButton, BUTTONS } from './config';
 3 | 
 4 | @Injectable({
 5 |   providedIn: 'root'
 6 | })
 7 | export class NgxWigToolbarService {
 8 |   private _defaultButtonsList: string[] = [];
 9 |   private _buttonLibrary: TButtonLibrary;
10 | 
11 |   constructor(@Inject(BUTTONS) buttonLibraryConfig: TButtonLibrary[]) {
12 |     this._buttonLibrary = buttonLibraryConfig.reduce((acc: TButtonLibrary, val: TButtonLibrary) => ({ ...acc, ...val }), {});
13 |     this._defaultButtonsList = Object.keys(this._buttonLibrary);
14 |   }
15 | 
16 |   public setButtons(buttons: string[]): void {
17 |     if (!Array.isArray(buttons)) {
18 |       throw new Error('Argument "buttons" should be an array');
19 |     }
20 | 
21 |     this._defaultButtonsList = buttons;
22 |   }
23 | 
24 |   public addStandardButton(
25 |     name: string,
26 |     title: string,
27 |     command: string,
28 |     styleClass: string,
29 |     icon: string
30 |   ) {
31 |     if (!name || !title || !command) {
32 |       throw new Error('Arguments "name", "title" and "command" are required');
33 |     }
34 | 
35 |     styleClass = styleClass || '';
36 |     this._buttonLibrary[name] = { title, command, styleClass, icon };
37 |     this._defaultButtonsList.push(name);
38 |   }
39 | 
40 |   public getToolbarButtons(buttonsList?: string): TButton[] {
41 |     let buttons = this._defaultButtonsList;
42 |     const toolbarButtons: TButton[] = [];
43 | 
44 |     if (typeof buttonsList !== 'undefined') {
45 |       buttons = string2array(buttonsList);
46 |     }
47 | 
48 |     buttons.forEach(buttonKey => {
49 |       if (!buttonKey) {
50 |         return;
51 |       }
52 | 
53 |       if (!this._buttonLibrary[buttonKey]) {
54 |         throw new Error(
55 |           `There is no "${buttonKey}" in your library. Possible variants: ${Object.keys(this._buttonLibrary)}`
56 |         );
57 |       }
58 | 
59 |       const button = Object.assign({}, this._buttonLibrary[buttonKey]);
60 |       // button.isActive = () => {return !!this.command && document.queryCommandState(this.command);}
61 |       toolbarButtons.push(button);
62 |     });
63 | 
64 |     return toolbarButtons;
65 |   }
66 | }
67 | 
68 | const string2array = (keysString: string) =>
69 |   keysString
70 |     .split(',')
71 |     .map(Function.prototype.call, String.prototype.trim);
72 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-filter.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { NgxWigFilterService } from './ngx-wig-filter.service';
 2 | 
 3 | describe('NgxWigFilterService', () => {
 4 |   let service: NgxWigFilterService;
 5 | 
 6 |   beforeEach(() => {
 7 |     service = new NgxWigFilterService();
 8 |   });
 9 | 
10 |   it('should create an instance', () => {
11 |     expect(service).toBeTruthy();
12 |   });
13 | 
14 |   it('should return the same content when filtering', () => {
15 |     const content = 'Hello, world!';
16 |     expect(service.filter(content)).toEqual(content);
17 |   });
18 | 
19 |   describe('_cleanWordHtml', () => {
20 |     it('should clean Word HTML and convert underline spans to <u>', () => {
21 |       const html = `<span style="text-decoration: underline;">Underlined text</span>`;
22 |       const result = service['_cleanWordHtml'](html);
23 |       expect(result).toContain('<u>Underlined text</u>');
24 |     });
25 | 
26 |     it('should remove unwanted tags like <style>, <script>, and comments', () => {
27 |       const html = `
28 |       <style>.test { color: red; }</style>
29 |       <script>alert('test');</script>
30 |       <!-- Comment -->
31 |       <p>Content</p>
32 |     `;
33 |       const result = service['_cleanWordHtml'](html);
34 |       expect(result).toContain('<p>Content</p>');
35 |       expect(result).not.toContain('<style>');
36 |       expect(result).not.toContain('<script>');
37 |       expect(result).not.toContain('<!-- Comment -->');
38 |     });
39 | 
40 |     it('should convert <u-mark> tags to <u>', () => {
41 |       const html = `<u-mark>Text</u-mark>`;
42 |       const result = service['_cleanWordHtml'](html);
43 |       expect(result).toContain('<u>Text</u>');
44 |     });
45 | 
46 |     it('should convert Word lists to <ul>/<ol> and <li>', () => {
47 |       const html = `<p>• Bullet A</p><p>1. Item one</p>`;
48 |       const result = service['_cleanWordHtml'](html);
49 |       expect(result).toContain('<ul>');
50 |       expect(result).toContain('<li>Bullet A</li>');
51 |       expect(result).toContain('<ol>');
52 |       expect(result).toContain('<li>Item one</li>');
53 |     });
54 | 
55 |     it('should convert links to open in a new tab', () => {
56 |       const html = `<a href="https://example.com">Example</a>`;
57 |       const result = service['_cleanWordHtml'](html);
58 |       expect(result).toContain('<a href="https://example.com" target="_blank">Example</a>');
59 |     });
60 |   });
61 | });
62 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-toolbar.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { NgxWigToolbarService } from './ngx-wig-toolbar.service';
 2 | import { DEFAULT_LIBRARY_BUTTONS } from './config';
 3 | 
 4 | describe('NgxWigToolbarService', () => {
 5 |   let service: NgxWigToolbarService;
 6 | 
 7 |   beforeEach(() => {
 8 |  service = new NgxWigToolbarService([DEFAULT_LIBRARY_BUTTONS]);
 9 | });
10 | 
11 |   it('should set buttons', () => {
12 |     service.setButtons(['list1', 'list2']);
13 |     expect(service.getToolbarButtons()).toEqual([
14 |       {
15 |         label: 'UL',
16 |         title: 'Unordered List',
17 |         command: 'insertunorderedlist',
18 |         styleClass: 'nw-list-ul',
19 |         icon: 'nwe-icon-list-ul'
20 |       },
21 |       {
22 |         label: 'OL',
23 |         title: 'Ordered List',
24 |         command: 'insertorderedlist',
25 |         styleClass: 'nw-list-ol',
26 |         icon: 'nwe-icon-list-ol'
27 |       }
28 |     ]);
29 |   });
30 | 
31 |   describe('addStandardButton', () => {
32 |     it('should throw an error if name/title/command is not provided', () => {
33 |       const errorMsg = 'Arguments "name", "title" and "command" are required';
34 |       expect(() => service.addStandardButton('', '', '', '', 'icon-check')).toThrow(new Error(errorMsg));
35 |       expect(() => service.addStandardButton('button1', '', '', '', 'icon-check')).toThrow(new Error(errorMsg));
36 |       expect(() => service.addStandardButton('button1', 'My button', '', '', 'icon-check')).toThrow(new Error(errorMsg));
37 |     });
38 | 
39 |     it('should add a standard button', () => {
40 |       service.addStandardButton('button1', 'My button', 'fakeCmd()', 'fakeStyle', 'icon-check');
41 |       expect(service.getToolbarButtons()[6]).toEqual(
42 |         {
43 |           title: 'My button',
44 |           command: 'fakeCmd()',
45 |           styleClass: 'fakeStyle',
46 |           icon: 'icon-check'
47 |         }
48 |       );
49 |     });
50 |   });
51 | 
52 |   describe('getToolbarButtons', () => {
53 |     it('should throw an error if provided buttons have not been added first', () => {
54 |       expect(() => {
55 |           service.getToolbarButtons('button1');
56 |       }).toThrow(new Error('There is no "button1" in your library. Possible variants: list1,list2,bold,italic,link,underline'));
57 |     });
58 | 
59 |     it('should return 6 buttons by default', () => {
60 |       expect(service.getToolbarButtons().length).toEqual(6);
61 |     });
62 |   });
63 | });
64 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs/Rx"
 22 |     ],
 23 |     "import-spacing": true,
 24 |     "indent": [
 25 |       true,
 26 |       "spaces"
 27 |     ],
 28 |     "interface-over-type-literal": true,
 29 |     "label-position": true,
 30 |     "max-line-length": [
 31 |       true,
 32 |       140
 33 |     ],
 34 |     "member-access": false,
 35 |     "member-ordering": [
 36 |       true,
 37 |       {
 38 |         "order": [
 39 |           "static-field",
 40 |           "instance-field",
 41 |           "static-method",
 42 |           "instance-method"
 43 |         ]
 44 |       }
 45 |     ],
 46 |     "no-arg": true,
 47 |     "no-bitwise": true,
 48 |     "no-console": [
 49 |       true,
 50 |       "debug",
 51 |       "info",
 52 |       "time",
 53 |       "timeEnd",
 54 |       "trace"
 55 |     ],
 56 |     "no-construct": true,
 57 |     "no-debugger": true,
 58 |     "no-duplicate-super": true,
 59 |     "no-empty": false,
 60 |     "no-empty-interface": true,
 61 |     "no-eval": true,
 62 |     "no-inferrable-types": [
 63 |       true,
 64 |       "ignore-params"
 65 |     ],
 66 |     "no-misused-new": true,
 67 |     "no-non-null-assertion": true,
 68 |     "no-redundant-jsdoc": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-var-keyword": true,
 77 |     "object-literal-sort-keys": false,
 78 |     "one-line": [
 79 |       true,
 80 |       "check-open-brace",
 81 |       "check-catch",
 82 |       "check-else",
 83 |       "check-whitespace"
 84 |     ],
 85 |     "prefer-const": true,
 86 |     "quotemark": [
 87 |       true,
 88 |       "single"
 89 |     ],
 90 |     "radix": true,
 91 |     "semicolon": [
 92 |       true,
 93 |       "always"
 94 |     ],
 95 |     "triple-equals": [
 96 |       true,
 97 |       "allow-null-check"
 98 |     ],
 99 |     "typedef-whitespace": [
100 |       true,
101 |       {
102 |         "call-signature": "nospace",
103 |         "index-signature": "nospace",
104 |         "parameter": "nospace",
105 |         "property-declaration": "nospace",
106 |         "variable-declaration": "nospace"
107 |       }
108 |     ],
109 |     "unified-signatures": true,
110 |     "variable-name": false,
111 |     "whitespace": [
112 |       true,
113 |       "check-branch",
114 |       "check-decl",
115 |       "check-operator",
116 |       "check-separator",
117 |       "check-type"
118 |     ],
119 |     "no-output-on-prefix": true,
120 |     "no-inputs-metadata-property": true,
121 |     "no-outputs-metadata-property": true,
122 |     "no-host-metadata-property": true,
123 |     "no-input-rename": true,
124 |     "no-output-rename": true,
125 |     "use-life-cycle-interface": true,
126 |     "use-pipe-transform-interface": true,
127 |     "component-class-suffix": true,
128 |     "directive-class-suffix": true
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
  1 | import { BrowserModule } from '@angular/platform-browser';
  2 | import { NgModule } from '@angular/core';
  3 | import { NgxWigComponent, NgxWigModule } from 'ngx-wig';
  4 | 
  5 | import { AppComponent } from './app.component';
  6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  7 | 
  8 | export const DEFAULT_LIBRARY_BUTTONS = {
  9 |   bold: {
 10 |     label: 'B',
 11 |     title: 'Bold',
 12 |     command: 'bold',
 13 |     styleClass: 'bold',
 14 |     icon: 'icon-bold'
 15 |   },
 16 |   italic: {
 17 |     label: 'I',
 18 |     title: 'Italic',
 19 |     command: 'italic',
 20 |     styleClass: 'italic',
 21 |     icon: 'icon-italic'
 22 |   },
 23 |   fontName: {
 24 |     label: 'F',
 25 |     title: 'Font name',
 26 |     children: [
 27 |       {
 28 |         label: 'Arial',
 29 |         title: 'Arial',
 30 |         command: (ctx: NgxWigComponent) => {
 31 |           ctx.execCommand('fontName', 'Arial')
 32 |         },
 33 |         styleClass: 'font-arial'
 34 |       },
 35 |       {
 36 |         label: 'Courier',
 37 |         title: 'Courier',
 38 |         command: (ctx: NgxWigComponent) => {
 39 |           ctx.execCommand('fontName', 'Courier')
 40 |         },
 41 |         styleClass: 'font-courier'
 42 |       },
 43 |       {
 44 |         label: 'Times',
 45 |         title: 'Times',
 46 |         command: (ctx: NgxWigComponent) => {
 47 |           ctx.execCommand('fontName', 'Times')
 48 |         },
 49 |         styleClass: 'font-times'
 50 |       }
 51 |     ],
 52 |     styleClass: ''
 53 |   },
 54 |   specialChar: {
 55 |     label: 'à',
 56 |     title: 'Accented Characters',
 57 |     children: [
 58 |       {
 59 |         label: 'à',
 60 |         title: 'à',
 61 |         command: (ctx: NgxWigComponent) => {
 62 |           ctx.execCommand('insertText', 'à')
 63 |         },
 64 |         styleClass: ''
 65 |       },
 66 |       {
 67 |         label: 'è',
 68 |         title: 'è',
 69 |         command: (ctx: NgxWigComponent) => {
 70 |           ctx.execCommand('insertText', 'è')
 71 |         },
 72 |         styleClass: ''
 73 |       },
 74 |       {
 75 |         label: 'é',
 76 |         title: 'é',
 77 |         command: (ctx: NgxWigComponent) => {
 78 |           ctx.execCommand('insertText', 'é')
 79 |         },
 80 |         styleClass: ''
 81 |       },
 82 |       {
 83 |         label: 'ì',
 84 |         title: 'ì',
 85 |         command: (ctx: NgxWigComponent) => {
 86 |           ctx.execCommand('insertText', 'ì')
 87 |         },
 88 |         styleClass: ''
 89 |       },
 90 |       {
 91 |         label: 'ò',
 92 |         title: 'ò',
 93 |         command: (ctx: NgxWigComponent) => {
 94 |           ctx.execCommand('insertText', 'ò')
 95 |         },
 96 |         styleClass: ''
 97 |       },
 98 |       {
 99 |         label: 'ù',
100 |         title: 'ù',
101 |         command: (ctx: NgxWigComponent) => {
102 |           ctx.execCommand('insertText', 'ù')
103 |         },
104 |         styleClass: ''
105 |       },
106 |     ],
107 |     styleClass: '',
108 |     visibleDropdown: false,
109 |     isOpenOnMouseOver: true
110 |   },
111 |   removeFormatting: {
112 |     label: 'R',
113 |     title: 'Remove formatting',
114 |     command: 'removeFormat',
115 |     styleClass: '',
116 |   }
117 | };
118 | 
119 | @NgModule({
120 |   declarations: [
121 |     AppComponent,
122 |   ],
123 |   imports: [
124 |     BrowserModule,
125 |     NgxWigModule.forRoot({ buttonsConfig: DEFAULT_LIBRARY_BUTTONS } ),
126 |     FormsModule,
127 |     ReactiveFormsModule,
128 |   ],
129 |   providers: [],
130 |   bootstrap: [AppComponent]
131 | })
132 | export class AppModule { }
133 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
22 |  *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
23 |  */
24 | 
25 | // import 'core-js/es6/symbol';
26 | // import 'core-js/es6/object';
27 | // import 'core-js/es6/function';
28 | // import 'core-js/es6/parse-int';
29 | // import 'core-js/es6/parse-float';
30 | // import 'core-js/es6/number';
31 | // import 'core-js/es6/math';
32 | // import 'core-js/es6/string';
33 | // import 'core-js/es6/date';
34 | // import 'core-js/es6/array';
35 | // import 'core-js/es6/regexp';
36 | // import 'core-js/es6/map';
37 | // import 'core-js/es6/weak-map';
38 | // import 'core-js/es6/set';
39 | 
40 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
41 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
42 | 
43 | /** IE10 and IE11 requires the following for the Reflect API. */
44 | // import 'core-js/es6/reflect';
45 | 
46 | /**
47 |  * Web Animations `@angular/platform-browser/animations`
48 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50 |  */
51 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
52 | 
53 | /**
54 |  * By default, zone.js will patch all possible macroTask and DomEvents
55 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
56 |  * because those flags need to be set before `zone.js` being loaded, and webpack
57 |  * will put import in the top of bundle, so user need to create a separate file
58 |  * in this directory (for example: zone-flags.ts), and put the following flags
59 |  * into that file, and then add the following code before importing zone.js.
60 |  * import './zone-flags.ts';
61 |  *
62 |  * The flags allowed in zone-flags.ts are listed here.
63 |  *
64 |  * The following flags will work for all browsers.
65 |  *
66 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
67 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
68 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
69 |  *
70 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
71 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
72 |  *
73 |  *  (window as any).__Zone_enable_cross_context_check = true;
74 |  *
75 |  */
76 | 
77 | /***************************************************************************************************
78 |  * Zone JS is required by default for Angular itself.
79 |  */
80 | import 'zone.js';  // Included with Angular CLI.
81 | 
82 | 
83 | /***************************************************************************************************
84 |  * APPLICATION IMPORTS
85 |  */
86 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ngx-wig
  2 | 
  3 | [![Build Status](https://travis-ci.org/stevermeister/ngx-wig.svg?branch=master)](https://travis-ci.org/stevermeister/ngx-wig)
  4 | 
  5 | ![screen shot 2017-12-12 at 14 52 51](https://user-images.githubusercontent.com/1526680/33888069-37bde1f0-df4c-11e7-993e-d48ffe0fffbf.png)
  6 | 
  7 | ## Dependencies
  8 | 
  9 | *it's only Angular! No jQuery or other WYSIWYG monsters*
 10 | 
 11 | 
 12 | ## Angular Support (older than the latest version)
 13 | 
 14 | For **Angular 20** `ngx-wig@20`
 15 | 
 16 | 
 17 | For **Angular 19** `ngx-wig@19`
 18 | 
 19 | For **Angular 18** `ngx-wig@18`
 20 | 
 21 | For **Angular 17** `ngx-wig@17`
 22 | 
 23 | For **Angular 16** `ngx-wig@16`
 24 | 
 25 | For **Angular 15** `ngx-wig@15`
 26 | 
 27 | For **Angular 14** `ngx-wig@14`
 28 | 
 29 | For **Angular 13** `ngx-wig@13` 
 30 | 
 31 | ...
 32 | 
 33 | ## Icons
 34 | 
 35 | Icons are not in the pack!
 36 | You can use the icons that you like.
 37 | We recommend to use [Material Design Icons](https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css)
 38 | 
 39 | If you do not want to use a full icons set, you can use these steps:
 40 | 
 41 | 1. go to [icons set](https://materialdesignicons.com/)
 42 | 1. choose the icon that you want, press the right mouse button on it, and then select the "View SVG" option
 43 | 1. go to [URL-encoder for SVG](https://yoksel.github.io/url-encoder/) and use it to convert your SVG
 44 | 
 45 | ## Installation
 46 | 
 47 | ngx-wig could be simply installed via npm:
 48 | 
 49 |     npm install ngx-wig
 50 | 
 51 | 
 52 | ## Usage
 53 | 
 54 | First, import the ngx-wig to your module:
 55 | 
 56 | ```typescript
 57 | import {NgxWigModule} from 'ngx-wig';
 58 | 
 59 | @NgModule({
 60 |   imports: [ NgxWigModule ]
 61 | });
 62 | ```
 63 | 
 64 | it's just an attribute directive for textarea:
 65 | 
 66 | ```html
 67 | <link href="https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" rel="stylesheet" />
 68 | ...
 69 | <ngx-wig [content]="text1"></ngx-wig>
 70 | ```
 71 | 
 72 | ## Examples
 73 | 
 74 | ### Quick start ( [demo](https://stackblitz.com/edit/stackblitz-starters-61ajke?file=src%2Fmain.ts) )
 75 | 
 76 | ```html
 77 | <ngx-wig [content]="text1"></ngx-wig>
 78 | ```
 79 | 
 80 | ### Placeholder ( [demo](https://stackblitz.com/edit/stackblitz-starters-5lq68z?file=src%2Fmain.ts) )
 81 | 
 82 | ```html
 83 | <ngx-wig [content]="text1" [placeholder]="'Enter instructions here.'"></ngx-wig>
 84 | ```
 85 | 
 86 | ### ngModel sync ( [demo](https://stackblitz.com/edit/stackblitz-starters-go26xc?file=src%2Fmain.ts) )
 87 | 
 88 | ```html
 89 | <ngx-wig [(ngModel)]="text1"></ngx-wig>
 90 | <ngx-wig [(ngModel)]="text1"></ngx-wig>
 91 | ```
 92 | 
 93 | ### Set buttons ( [demo](https://stackblitz.com/edit/stackblitz-starters-qohotg?file=src%2Fmain.ts) )
 94 | 
 95 | ```html
 96 | <ngx-wig [content]="text1" [buttons]="'bold, italic'"></ngx-wig>
 97 | ```
 98 | 
 99 | ### onContentChange Hook ( [demo](https://stackblitz.com/edit/stackblitz-starters-cl6k3s?file=src%2Fmain.ts) )
100 | 
101 | ```html
102 | <ngx-wig [content]="text1" (contentChange)="result = $event"></ngx-wig>
103 | <div [innerHTML]="result"></div>
104 | ```
105 | 
106 | ### Reactive FormControl ( [demo](https://stackblitz.com/edit/stackblitz-starters-hgna7m?file=src%2Fmain.ts) )
107 | 
108 | ```html
109 | <ngx-wig [formControl]="text1"></ngx-wig>
110 | ```
111 | 
112 | 
113 | ### Adding own buttons
114 | 
115 | Please check an example here
116 | https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts
117 | 
118 | 
119 | ### Filtering/removing extra styles on paste ( [demo](https://stackblitz.com/edit/stackblitz-starters-ysmo2d?file=src%2Fmain.ts) )
120 | 
121 | ```typescript
122 | providers: [{ provide: NgxWigFilterService, useClass: NgxWigFilterStylesService}]
123 | ```
124 | 
125 | 
126 | 
127 | ## Development
128 | 
129 | To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
130 | 
131 | ```bash
132 | $ npm run build
133 | ```
134 | 
135 | To lint all `*.ts` files:
136 | 
137 | ```bash
138 | $ npm run lint
139 | ```
140 | 
141 | To run all tests:
142 | 
143 | ```bash
144 | $ npm run test
145 | ```
146 | 
147 | ## License
148 | 
149 | MIT © [Stepan Suvorov](https://github.com/stevermeister)
150 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-component.html:
--------------------------------------------------------------------------------
  1 | <div class="ng-wig">
  2 |   <ul class="nw-toolbar">
  3 |     @for (button of toolbarButtons; let i = $index; track button) {
  4 |     <li class="nw-toolbar__item">
  5 |       @if (button.children) {
  6 |       <div
  7 |         class="nwe-dropdown"
  8 |         (mouseenter)="button.isOpenOnMouseOver?button.visibleDropdown = true:true"
  9 |         (mouseleave)="button.isOpenOnMouseOver?button.visibleDropdown = false:true"
 10 |           (click)="onDropdownButtonSelected(button, $event)"
 11 |         (keydown.enter)="onDropdownButtonSelected(button, $event)"
 12 |       >
 13 |         <button
 14 |           #toolbarButton
 15 |           type="button"
 16 |           class="nw-button"
 17 |           [ngClass]="[button.styleClass]"
 18 |           [title]="button.title"
 19 |           [disabled]="disabled"
 20 |           [attr.tabindex]="toolbarButtonIndex === i ? 0 : -1"
 21 |           (focus)="toolbarButtonIndex = i"
 22 |           (keydown)="onToolbarKeydown($event, i)"
 23 |           [attr.aria-label]="button.ariaLabel || button.title || button.label"
 24 |         >
 25 |           @if (button.icon) {
 26 |           <div class="nwe-icon" [ngClass]="[button.icon]" aria-hidden="true" [attr.focusable]="false"></div>
 27 |           } @else {<!--
 28 |              -->{{ button.label }}<!--
 29 |           -->}
 30 |         </button>
 31 |         <div
 32 |           class="nwe-dropdown-content"
 33 |           [ngClass]="button.visibleDropdown ? 'nwe-show' : ''"
 34 |         >
 35 |           @for (child of button.children; let j = $index; track child) {
 36 |           <a href="#">
 37 |             <button
 38 |               type="button"
 39 |               class="nw-button"
 40 |               [ngClass]="[child.styleClass]"
 41 |               [title]="child.title"
 42 |               (click)="execCommand(child.command); closeDropdown(button)"
 43 |               [disabled]="disabled"
 44 |               [attr.tabindex]="button.visibleDropdown && button.dropdownButtonIndex === j ? 0 : -1"
 45 |               (focus)="button.dropdownButtonIndex = j"
 46 |               (keydown)="onDropdownKeydown($event, button)"
 47 |               [attr.aria-label]="child.ariaLabel || child.title || child.label"
 48 |             >
 49 |               @if (child.icon) {
 50 |               <div class="nwe-icon" [ngClass]="[child.icon]" aria-hidden="true" [attr.focusable]="false"></div>
 51 |               } @else {<!--
 52 |                 -->{{ child.label }}<!--
 53 |               -->}
 54 |             </button>
 55 |           </a>
 56 |           }
 57 |         </div>
 58 |       </div>
 59 |       } @else {
 60 |       <div>
 61 |         <button
 62 |           #toolbarButton
 63 |           type="button"
 64 |           class="nw-button"
 65 |           [ngClass]="[button.styleClass]"
 66 |           [title]="button.title"
 67 |           (click)="execCommand(button.command)"
 68 |           [disabled]="disabled"
 69 |           [attr.tabindex]="toolbarButtonIndex === i ? 0 : -1"
 70 |           (focus)="toolbarButtonIndex = i"
 71 |           (keydown)="onToolbarKeydown($event, i)"
 72 |           [attr.aria-label]="button.ariaLabel || button.title || button.label"
 73 |         >
 74 |           @if (button.icon) {
 75 |           <div class="nwe-icon" [ngClass]="[button.icon]" aria-hidden="true" [attr.focusable]="false"></div>
 76 |           } @else {<!--
 77 |               -->{{ button.label }}<!--
 78 |           -->}
 79 |         </button>
 80 |       </div>
 81 |       }
 82 |     </li>
 83 |     }
 84 |   </ul>
 85 | 
 86 |   <div
 87 |     class="nw-editor-container"
 88 |     (click)="container.focus()"
 89 |     (keydown.enter)="container.focus()"
 90 |     [ngClass]="{ 'nw-editor-container--with-toolbar': toolbarButtons.length }"
 91 |   >
 92 |     @if (editMode) {
 93 |     <div class="nw-editor__src-container">
 94 |       <textarea
 95 |         [ngModel]="content"
 96 |         (ngModelChange)="onTextareaChange($event)"
 97 |         (blur)="propagateTouched()"
 98 |         class="nw-editor__src"
 99 |       >
100 |       </textarea>
101 |     </div>
102 |     }
103 |     <div
104 |       class="nw-editor"
105 |       [ngClass]="{ 'nw-disabled': disabled,'nw-invisible': editMode }"
106 |     >
107 |       @if (shouldShowPlaceholder()) {
108 |       <div class="nw-editor__placeholder" [innerText]="placeholder"></div>
109 |       }
110 |       <div
111 |         #ngWigEditable
112 |         class="nw-editor__res"
113 |         [attr.contenteditable]="!disabled"
114 |         [ngClass]="{ disabled: disabled}"
115 |         (paste)="onPaste($event)"
116 |         (focus)="hasFocus = true"
117 |         (blur)="onBlur()"
118 |         (input)="onContentChange(ngWigEditable.innerHTML)"
119 |       >
120 |         <!--
121 |       --></div>
122 |     </div>
123 |   </div>
124 | </div>
125 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ngx-wig-app": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:application",
 15 |           "options": {
 16 |             "outputPath": {
 17 |               "base": "dist/ngx-wig-app"
 18 |             },
 19 |             "index": "src/index.html",
 20 |             "polyfills": [
 21 |               "src/polyfills.ts"
 22 |             ],
 23 |             "tsConfig": "src/tsconfig.app.json",
 24 |             "assets": [
 25 |               "src/favicon.ico",
 26 |               "src/assets"
 27 |             ],
 28 |             "styles": [],
 29 |             "scripts": [],
 30 |             "extractLicenses": false,
 31 |             "sourceMap": true,
 32 |             "optimization": false,
 33 |             "namedChunks": true,
 34 |             "browser": "src/main.ts"
 35 |           },
 36 |           "configurations": {
 37 |             "production": {
 38 |               "fileReplacements": [
 39 |                 {
 40 |                   "replace": "src/environments/environment.ts",
 41 |                   "with": "src/environments/environment.prod.ts"
 42 |                 }
 43 |               ],
 44 |               "optimization": true,
 45 |               "outputHashing": "all",
 46 |               "sourceMap": false,
 47 |               "namedChunks": false,
 48 |               "extractLicenses": true,
 49 |               "budgets": [
 50 |                 {
 51 |                   "type": "initial",
 52 |                   "maximumWarning": "2mb",
 53 |                   "maximumError": "5mb"
 54 |                 },
 55 |                 {
 56 |                   "type": "anyComponentStyle",
 57 |                   "maximumWarning": "6kb"
 58 |                 }
 59 |               ]
 60 |             }
 61 |           },
 62 |           "defaultConfiguration": ""
 63 |         },
 64 |         "serve": {
 65 |           "builder": "@angular-devkit/build-angular:dev-server",
 66 |           "options": {
 67 |             "buildTarget": "ngx-wig-app:build"
 68 |           },
 69 |           "configurations": {
 70 |             "production": {
 71 |               "buildTarget": "ngx-wig-app:build:production"
 72 |             }
 73 |           }
 74 |         },
 75 |         "extract-i18n": {
 76 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 77 |           "options": {
 78 |             "buildTarget": "ngx-wig-app:build"
 79 |           }
 80 |         },
 81 |         "test": {
 82 |           "builder": "@angular-devkit/build-angular:karma",
 83 |           "options": {
 84 |             "main": "src/test.ts",
 85 |             "polyfills": "src/polyfills.ts",
 86 |             "tsConfig": "src/tsconfig.spec.json",
 87 |             "karmaConfig": "src/karma.conf.js",
 88 |             "styles": [
 89 |               "src/styles.css"
 90 |             ],
 91 |             "scripts": [],
 92 |             "assets": [
 93 |               "src/favicon.ico",
 94 |               "src/assets"
 95 |             ]
 96 |           }
 97 |         },
 98 |         "lint": {
 99 |           "builder": "@angular-devkit/build-angular:tslint",
100 |           "options": {
101 |             "tsConfig": [
102 |               "src/tsconfig.app.json",
103 |               "src/tsconfig.spec.json"
104 |             ],
105 |             "exclude": [
106 |               "**/node_modules/**"
107 |             ]
108 |           }
109 |         }
110 |       }
111 |     },
112 |     "ngx-wig-app-e2e": {
113 |       "root": "e2e/",
114 |       "projectType": "application",
115 |       "prefix": "",
116 |       "architect": {
117 |         "e2e": {
118 |           "builder": "@angular-devkit/build-angular:protractor",
119 |           "options": {
120 |             "protractorConfig": "e2e/protractor.conf.js",
121 |             "devServerTarget": "ngx-wig-app:serve"
122 |           },
123 |           "configurations": {
124 |             "production": {
125 |               "devServerTarget": "ngx-wig-app:serve:production"
126 |             }
127 |           }
128 |         },
129 |         "lint": {
130 |           "builder": "@angular-devkit/build-angular:tslint",
131 |           "options": {
132 |             "tsConfig": "e2e/tsconfig.e2e.json",
133 |             "exclude": [
134 |               "**/node_modules/**"
135 |             ]
136 |           }
137 |         }
138 |       }
139 |     },
140 |     "ngx-wig": {
141 |       "root": "projects/ngx-wig",
142 |       "sourceRoot": "projects/ngx-wig/src",
143 |       "projectType": "library",
144 |       "prefix": "ngx-wig",
145 |       "architect": {
146 |         "build": {
147 |           "builder": "@angular-devkit/build-angular:ng-packagr",
148 |           "options": {
149 |             "tsConfig": "projects/ngx-wig/tsconfig.lib.json",
150 |             "project": "projects/ngx-wig/ng-package.json"
151 |           },
152 |           "configurations": {
153 |             "production": {
154 |               "tsConfig": "projects/ngx-wig/tsconfig.lib.prod.json"
155 |             }
156 |           }
157 |         },
158 |         "test": {
159 |           "builder": "@angular-devkit/build-angular:karma",
160 |           "options": {
161 |             "main": "projects/ngx-wig/src/test.ts",
162 |             "tsConfig": "projects/ngx-wig/tsconfig.spec.json",
163 |             "karmaConfig": "projects/ngx-wig/karma.conf.js"
164 |           }
165 |         },
166 |         "lint": {
167 |           "builder": "@angular-eslint/builder:lint",
168 |           "options": {
169 |             "lintFilePatterns": [
170 |               "projects/ngx-wig/**/*.ts",
171 |               "projects/ngx-wig/**/*.html"
172 |             ]
173 |           }
174 |         }
175 |       }
176 |     }
177 |   },
178 |   "cli": {
179 |     "analytics": false
180 |   },
181 |   "schematics": {
182 |     "@schematics/angular:component": {
183 |       "type": "component"
184 |     },
185 |     "@schematics/angular:directive": {
186 |       "type": "directive"
187 |     },
188 |     "@schematics/angular:service": {
189 |       "type": "service"
190 |     },
191 |     "@schematics/angular:guard": {
192 |       "typeSeparator": "."
193 |     },
194 |     "@schematics/angular:interceptor": {
195 |       "typeSeparator": "."
196 |     },
197 |     "@schematics/angular:module": {
198 |       "typeSeparator": "."
199 |     },
200 |     "@schematics/angular:pipe": {
201 |       "typeSeparator": "."
202 |     },
203 |     "@schematics/angular:resolver": {
204 |       "typeSeparator": "."
205 |     }
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-filter.service.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable } from '@angular/core';
  2 | 
  3 | @Injectable({
  4 |   providedIn: 'root'
  5 | })
  6 | export class NgxWigFilterService {
  7 |   constructor() {}
  8 |   public filter(content: string): string {
  9 |     return this._cleanWordHtml(content);
 10 |   }
 11 | 
 12 |   /**
 13 |    * Cleans up HTML pasted from Word, converting bullet/numbered lists and removing redundant tags/styles.
 14 |    */
 15 |   private _cleanWordHtml(html: string): string {
 16 |     // --- 1. Collect underline classes from <style> blocks ---
 17 |     const underlineClasses: string[] = this._getUnderlineClassesFromStyles(html);
 18 | 
 19 |     // --- 2. Mark underlined spans by class or inline style ---
 20 |     html = this._markUnderlineSpans(html, underlineClasses);
 21 | 
 22 |     // --- 3. Remove unwanted tags, attributes, and whitespace ---
 23 |     html = this._stripWordMetaAndJunk(html);
 24 | 
 25 |     // --- 4. Convert <u-mark> to <u> (if any left from previous versions) ---
 26 |     html = html.replace(/<u-mark>([\s\S]*?)<\/u-mark>/gi, '<u>$1</u>');
 27 | 
 28 |     // --- 5. Convert Word lists to <ul>/<ol> and <li> ---
 29 |     html = this._convertWordLists(html);
 30 | 
 31 |     // --- 6. Convert links to open in new tab ---
 32 |     html = html.replace(/<a [^>]*href="([^"]+)"[^>]*>(.*?)<\/a>/gi, '<a href="$1" target="_blank">$2</a>');
 33 | 
 34 |     // --- 7. Handle any remaining s2/s3 underlined spans (Apple/Word) ---
 35 |     html = html.replace(/<span([^>]*)class=["'][^"']*s2[^"']*["']([^>]*)>([\s\S]*?)<\/span>/gi, (m, p1, p2, p3) => `<u>${p3}</u>`);
 36 |     html = html.replace(/<span([^>]*)class=["'][^"']*s3[^"']*["']([^>]*)>([\s\S]*?)<\/span>/gi, (m, p1, p2, p3) => `<u>${p3}</u>`);
 37 |     // --- 8. Handle <a><u>...</u></a> for underlined links ---
 38 |     html = html.replace(/<a ([^>]+)><u>([\s\S]*?)<\/u><\/a>/gi, function(_m, p1, p2) { return `<a ${p1}><u>${p2}</u></a>`; });
 39 | 
 40 |     return html;
 41 |   }
 42 | 
 43 |   // --- Helper: Extract underline classes from <style> blocks ---
 44 |   private _getUnderlineClassesFromStyles(html: string): string[] {
 45 |     const underlineClasses: string[] = [];
 46 |     const styleBlocks = html.match(/<style[^>]*>[\s\S]*?<\/style>/gi) || [];
 47 |     styleBlocks.forEach(styleBlock => {
 48 |       const classMatches = styleBlock.match(/\.(\w+)\s*\{[^}]*text-decoration\s*:\s*underline[^}]*\}/gi) || [];
 49 |       classMatches.forEach(cls => {
 50 |         const m = cls.match(/\.(\w+)/);
 51 |         if (m && m[1]) underlineClasses.push(m[1]);
 52 |       });
 53 |     });
 54 |     return underlineClasses;
 55 |   }
 56 | 
 57 |   // --- Helper: Mark underlined spans by class or inline style ---
 58 |   private _markUnderlineSpans(html: string, underlineClasses: string[]): string {
 59 |     if (underlineClasses.length > 0) {
 60 |       html = html.replace(/<span([^>]*)class=["']([^"']+)["']([^>]*)>([\s\S]*?)<\/span>/gi, (match, p1, classAttr, p3, content) => {
 61 |         const classes = classAttr.split(/\s+/);
 62 |         if (classes.some(cls => underlineClasses.includes(cls)) && classes.every(cls => underlineClasses.includes(cls) || cls === 's2' || cls === 's3')) {
 63 |           return `<u>${content}</u>`;
 64 |         }
 65 |         return match;
 66 |       });
 67 |     }
 68 |     html = html.replace(/<span([^>]*)style=["'][^"']*text-decoration\s*:\s*underline;?[^"']*["']([^>]*)>([\s\S]*?)<\/span>/gi, '<u>$3</u>');
 69 |     return html;
 70 |   }
 71 | 
 72 |   // --- Helper: Remove meta, style, script, o:p, comments, mso, class/style attrs, empty spans, nbsp, empty <p> ---
 73 |   private _stripWordMetaAndJunk(html: string): string {
 74 |     const tempDiv = document.createElement('div');
 75 |     tempDiv.innerHTML = html;
 76 | 
 77 |     // Remove unwanted tags: meta, style, script, o:p (both paired and self-closing)
 78 |     const tagsToRemove = ['meta', 'style', 'script'];
 79 |     for (const tag of tagsToRemove) {
 80 |       tempDiv.querySelectorAll(tag).forEach(el => el.remove());
 81 |     }
 82 | 
 83 |     // Remove comments
 84 |     const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_COMMENT, null);
 85 |     const commentsToRemove: Comment[] = [];
 86 |     while (walker.nextNode()) {
 87 |       commentsToRemove.push(walker.currentNode as Comment);
 88 |     }
 89 |     for (const comment of commentsToRemove) {
 90 |       comment.parentNode?.removeChild(comment);
 91 |     }
 92 | 
 93 |     // Remove mso- styles
 94 |     for (const el of Array.from(tempDiv.querySelectorAll('[style]'))) {
 95 |       const original = el.getAttribute('style') ?? '';
 96 |       const filtered = original
 97 |         .split(';')
 98 |         .map(rule => rule.trim())
 99 |         .filter(rule => !/^mso-[\w-]+:/i.test(rule))
100 |         .join('; ');
101 |       el.setAttribute('style', filtered);
102 |     }
103 | 
104 |     // Remove class and style attributes
105 |     tempDiv.querySelectorAll('[class]').forEach(el => el.removeAttribute('class'));
106 |     tempDiv.querySelectorAll('[style]').forEach(el => {
107 |       if (!el.getAttribute('style')) el.removeAttribute('style');
108 |     });
109 | 
110 |     // Remove empty <span> and <p> tags
111 |     tempDiv.querySelectorAll('span').forEach(el => {
112 |       if (el.textContent?.trim() === '') el.remove();
113 |     });
114 |     tempDiv.querySelectorAll('p').forEach(el => {
115 |       if (el.textContent?.trim() === '') el.remove();
116 |     });
117 | 
118 |     // Replace &nbsp; with space
119 |     html = tempDiv.innerHTML.replace(/&nbsp;/g, ' ');
120 | 
121 |     return html;
122 |   }
123 | 
124 |   // --- Helper: Convert Word lists to <ul>/<ol> and <li> ---
125 |   private _convertWordLists(html: string): string {
126 |     // 1. Mark bullets and numbers as <li data-list-type="ul"> or <li data-list-type="ol">
127 |     html = this._convertBulletsToListItems(html);
128 | 
129 |     // 2. Group consecutive <li> of the same type into <ul> or <ol>
130 |     html = html.replace(/((<li data-list-type="(ul|ol)">[\s\S]*?<\/li>\s*)+)/gi, (match) => {
131 |       // Find the type of the first <li> in this group
132 |       const typeMatch = match.match(/<li data-list-type="(ul|ol)">/);
133 |       if (!typeMatch) return match;
134 |       const type = typeMatch[1];
135 |       // Now, split the group into consecutive runs of the same type
136 |       const liRegex = /<li data-list-type="(ul|ol)">([\s\S]*?)<\/li>/g;
137 |       let result = '';
138 |       let currentType = null;
139 |       let buffer = '';
140 |       let m;
141 |       while ((m = liRegex.exec(match)) !== null) {
142 |         if (!currentType) {
143 |           currentType = m[1];
144 |           buffer = `<li>${m[2]}</li>`;
145 |         } else if (m[1] === currentType) {
146 |           buffer += `<li>${m[2]}</li>`;
147 |         } else {
148 |           result += currentType === 'ul' ? `<ul>${buffer}</ul>` : `<ol>${buffer}</ol>`;
149 |           currentType = m[1];
150 |           buffer = `<li>${m[2]}</li>`;
151 |         }
152 |       }
153 |       if (buffer) {
154 |         result += currentType === 'ul' ? `<ul>${buffer}</ul>` : `<ol>${buffer}</ol>`;
155 |       }
156 |       return result;
157 |     });
158 |     // 3. Remove data-list-type attributes
159 |     html = html.replace(/ data-list-type="(ul|ol)"/g, '');
160 |     return html;
161 |   }
162 | 
163 |   private _convertBulletsToListItems(html: string): string {
164 |     const tempDiv = document.createElement('div');
165 |     tempDiv.innerHTML = html;
166 | 
167 |     const bulletRegex = /^[\u2022\u25CF\u25A0•·]\s+/;
168 |     const numberRegex = /^\d+\.\s+/;
169 | 
170 |     const elements = tempDiv.querySelectorAll('p, span');
171 | 
172 |     elements.forEach(el => {
173 |       const text = el.textContent?.trim() || '';
174 | 
175 |       if (bulletRegex.test(text)) {
176 |         const cleaned = text.replace(bulletRegex, '');
177 |         const li = document.createElement('li');
178 |         li.setAttribute('data-list-type', 'ul');
179 |         li.innerHTML = el.innerHTML.replace(bulletRegex, '');
180 |         el.replaceWith(li);
181 |       } else if (numberRegex.test(text)) {
182 |         const cleaned = text.replace(numberRegex, '');
183 |         const li = document.createElement('li');
184 |         li.setAttribute('data-list-type', 'ol');
185 |         li.innerHTML = el.innerHTML.replace(numberRegex, '');
186 |         el.replaceWith(li);
187 |       }
188 |     });
189 | 
190 |     return tempDiv.innerHTML;
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig-component.css:
--------------------------------------------------------------------------------
  1 | /* -------- NG-WIG -------- */
  2 | /**
  3 |     *
  4 |     *  RESET BOX MODEL
  5 |     *
  6 |     */
  7 | 
  8 | .ng-wig,
  9 | [class^="nw-"] {
 10 |   -webkit-box-sizing: border-box;
 11 |   -moz-box-sizing: border-box;
 12 |   -o-box-sizing: border-box;
 13 |   -ms-box-sizing: border-box;
 14 |   box-sizing: border-box;
 15 | }
 16 | /**
 17 |         *   main wrapper for the editor
 18 |         *
 19 |         *  .ngx-wig
 20 |         *
 21 |         */
 22 | 
 23 | .ng-wig {
 24 |   display: block;
 25 |   padding: 0;
 26 |   margin: 0;
 27 | }
 28 | /**
 29 |         *  styling for toolbar and its items
 30 |         *
 31 |         *  .nw-toolbar
 32 |         *    &__item
 33 |         *
 34 |         */
 35 | 
 36 | .nw-toolbar {
 37 |   display: block;
 38 |   margin: 0;
 39 |   padding: 0;
 40 |   list-style: none;
 41 |   font-size: 12px;
 42 |   color: #6b7277;
 43 |   background: -webkit-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%);
 44 |   background: -moz-linear-gradient(90deg, #ffffff 0%, #f9f9f9 100%);
 45 |   background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
 46 |   border: 1px solid #cccccc;
 47 |   border-radius: 3px 3px 0 0;
 48 | }
 49 | 
 50 | .nw-toolbar__item {
 51 |   display: inline-block;
 52 |   vertical-align: top;
 53 |   margin: 0;
 54 |   border-right: 1px solid #dedede;
 55 | }
 56 | 
 57 | .nw-toolbar label {
 58 |   line-height: 30px;
 59 |   display: inline-block;
 60 |   padding: 0 6px 0 3px;
 61 | }
 62 | 
 63 | .nw-toolbar input[type="checkbox"] {
 64 |   vertical-align: -3px;
 65 |   margin-right: -1px;
 66 | }
 67 | /**
 68 |         *  styling for the editor part: source code (original textarea) and resulting div
 69 |         *
 70 |         *  .nw-editor
 71 |         *    &__src
 72 |         *    &__res
 73 |         *
 74 |         */
 75 | 
 76 | .nw-editor {
 77 |   /* Default when height is not set */
 78 |   display: block;
 79 |   position: relative;
 80 |   height: 300px;
 81 |   background: #fff;
 82 |   cursor: text;
 83 |   width: 100%;
 84 |   overflow-y: auto;
 85 | }
 86 | 
 87 | .nw-editor-container {
 88 |   border: 1px solid #cccccc;
 89 |   border-radius: 0 0 3px 3px;
 90 |   position: relative;
 91 | }
 92 | 
 93 | .nw-editor-container--with-toolbar {
 94 |   border-top: none;
 95 | }
 96 | 
 97 | .nw-editor__res {
 98 |   display: block;
 99 |   min-height: 100%;
100 |   padding: 1px 8px;
101 | }
102 | 
103 | .nw-editor__placeholder {
104 |   display: block;
105 |   position: absolute;
106 |   padding: 1px 8px;
107 |   color: lightgray;
108 |   width: 100%;
109 | }
110 | 
111 | .nw-editor__src,
112 | .nw-editor__res {
113 |   width: 100%;
114 |   outline: none;
115 |   box-sizing: border-box;
116 |   border: none;
117 |   margin: 0;
118 | }
119 | 
120 | .nw-editor__res.disabled {
121 |   opacity: 0.5;
122 | }
123 | 
124 | .nw-editor__src-container {
125 |   position: absolute;
126 |   left: 0;
127 |   top: 0;
128 |   right: 0;
129 |   bottom: 0;
130 | }
131 | 
132 | .nw-editor__src {
133 |   height: 100%;
134 |   resize: none;
135 |   padding: 1px 8px;
136 | }
137 | 
138 | .nw-editor--fixed .nw-editor {
139 |   display: block;
140 |   overflow-y: auto;
141 | }
142 | 
143 | .nw-editor--fixed .nw-editor__res {
144 |   padding: 1px 8px;
145 |   display: block;
146 | }
147 | 
148 | .nw-invisible {
149 |   visibility: hidden;
150 | }
151 | 
152 | .nw-editor--fixed .nw-invisible {
153 |   display: none;
154 | }
155 | 
156 | .nw-editor.nw-disabled {
157 |   cursor: default;
158 | }
159 | /**
160 |         *  styling for toolbar button, has two modifiers: active and type of icon for background
161 |         *
162 |         *  .nw-button
163 |         *    &--active
164 |         *    &--{button type}
165 |         *
166 |         */
167 | 
168 | .nw-button {
169 |   -webkit-appearance: none;
170 |   -moz-appearance: none;
171 |   appearance: none;
172 |   display: block;
173 |   width: 30px;
174 |   height: 30px;
175 |   margin: 0;
176 |   padding: 0;
177 |   opacity: 0.5;
178 |   line-height: 30px;
179 |   background-color: transparent;
180 |   background-position: center center;
181 |   background-repeat: no-repeat;
182 |   border: none;
183 |   border-radius: 2px;
184 |   cursor: pointer;
185 | }
186 | 
187 | .nw-button:focus {
188 |   outline: none;
189 | }
190 | 
191 | .nw-button:hover,
192 | .nw-button.nw-button--active {
193 |   opacity: 1;
194 | }
195 | 
196 | .nw-button--active {
197 |   background-color: #eeeeee;
198 | }
199 | 
200 | .nw-button:disabled {
201 |   cursor: default;
202 | }
203 | 
204 | .nw-button:disabled:hover {
205 |   opacity: 0.5;
206 | }
207 | /**
208 |         *  styling & formatting of content inside contenteditable div
209 |         *
210 |         *  .nw-content
211 |         *
212 |         */
213 | 
214 | .nw-content {
215 |   padding: 12px;
216 |   margin: 0;
217 |   font-family: sans-serif;
218 |   font-size: 14px;
219 |   line-height: 24px;
220 | }
221 | 
222 | .nw-select {
223 |   height: 30px;
224 |   padding: 6px;
225 |   color: #555;
226 |   background-color: inherit;
227 |   border: 0;
228 | }
229 | 
230 | .nw-select:disabled {
231 |   opacity: 0.5;
232 | }
233 | 
234 | .nw-select:focus {
235 |   outline: none;
236 | }
237 | 
238 | .nw-button:focus {
239 |   border-color: lightgray;
240 |   border-style: solid;
241 | }
242 | 
243 | [contenteditable]:empty:before {
244 |   content: attr(placeholder);
245 |   color: grey;
246 |   display: inline-block;
247 | }
248 | 
249 | /**
250 |         *  icons, taken from Font Awesome
251 |         *  https://github.com/encharm/Font-Awesome-SVG-PNG
252 |         *
253 |         *  prepared via
254 |         *  https://websemantics.uk/tools/svg-to-background-image-conversion/
255 |         *
256 |         *  .nwe-icon.nwe-icon-bold
257 |         *  .nwe-icon.nwe-icon-check
258 |         *  ...
259 |         */
260 | 
261 | .nwe-icon {
262 |   display: inline-block;
263 |   height: 1em;
264 |   width: 1em;
265 |   vertical-align: -0.125em;
266 | }
267 | 
268 | .nwe-icon-bold {
269 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68 .5t68 .5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z'/%3E%3C/svg%3E") no-repeat;
270 | }
271 | .nwe-icon-check {
272 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/%3E%3C/svg%3E") no-repeat;
273 | }
274 | .nwe-icon-italic {
275 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 1662l17-85q22-7 61.5-16.5t72-19 59.5-23.5q28-35 41-101 1-7 62-289t114-543.5 52-296.5v-25q-24-13-54.5-18.5t-69.5-8-58-5.5l19-103q33 2 120 6.5t149.5 7 120.5 2.5q48 0 98.5-2.5t121-7 98.5-6.5q-5 39-19 89-30 10-101.5 28.5t-108.5 33.5q-8 19-14 42.5t-9 40-7.5 45.5-6.5 42q-27 148-87.5 419.5t-77.5 355.5q-2 9-13 58t-20 90-16 83.5-6 57.5l1 18q17 4 185 31-3 44-16 99-11 0-32.5 1.5t-32.5 1.5q-29 0-87-10t-86-10q-138-2-206-2-51 0-143 9t-121 11z'/%3E%3C/svg%3E") no-repeat;
276 | }
277 | .nwe-icon-link {
278 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z'/%3E%3C/svg%3E") no-repeat;
279 | }
280 | .nwe-icon-list-ol {
281 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M381 1620q0 80-54.5 126t-135.5 46q-106 0-172-66l57-88q49 45 106 45 29 0 50.5-14.5t21.5-42.5q0-64-105-56l-26-56q8-10 32.5-43.5t42.5-54 37-38.5v-1q-16 0-48.5 1t-48.5 1v53h-106v-152h333v88l-95 115q51 12 81 49t30 88zm2-627v159h-362q-6-36-6-54 0-51 23.5-93t56.5-68 66-47.5 56.5-43.5 23.5-45q0-25-14.5-38.5t-39.5-13.5q-46 0-81 58l-85-59q24-51 71.5-79.5t105.5-28.5q73 0 123 41.5t50 112.5q0 50-34 91.5t-75 64.5-75.5 50.5-35.5 52.5h127v-60h105zm1409 319v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zm-1408-899v99h-335v-99h107q0-41 .5-121.5t.5-121.5v-12h-2q-8 17-50 54l-71-76 136-127h106v404h108zm1408 387v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z'/%3E%3C/svg%3E") no-repeat;
282 | }
283 | .nwe-icon-list-ul {
284 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z'/%3E%3C/svg%3E") no-repeat;
285 | }
286 | .nwe-icon-underline {
287 |   background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3Csvg width='11' height='11' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M176 223q-37-2-45-4l-3-88q13-1 40-1 60 0 112 4 132 7 166 7 86 0 168-3 116-4 146-5 56 0 86-2l-1 14 2 64v9q-60 9-124 9-60 0-79 25-13 14-13 132 0 13 .5 32.5t.5 25.5l1 229 14 280q6 124 51 202 35 59 96 92 88 47 177 47 104 0 191-28 56-18 99-51 48-36 65-64 36-56 53-114 21-73 21-229 0-79-3.5-128t-11-122.5-13.5-159.5l-4-59q-5-67-24-88-34-35-77-34l-100 2-14-3 2-86h84l205 10q76 3 196-10l18 2q6 38 6 51 0 7-4 31-45 12-84 13-73 11-79 17-15 15-15 41 0 7 1.5 27t1.5 31q8 19 22 396 6 195-15 304-15 76-41 122-38 65-112 123-75 57-182 89-109 33-255 33-167 0-284-46-119-47-179-122-61-76-83-195-16-80-16-237v-333q0-188-17-213-25-36-147-39zm1488 1409v-64q0-14-9-23t-23-9h-1472q-14 0-23 9t-9 23v64q0 14 9 23t23 9h1472q14 0 23-9t9-23z'/%3E%3C/svg%3E") no-repeat;
288 | }
289 | 
290 | /* AREA DI TEST */
291 | 
292 | div.select-menu {
293 |   padding-top: 0.35em;
294 | }
295 | 
296 | div.select-menu>select {
297 |     color: #6b7277;
298 |     background: linear-gradient(180deg,#ffffff 0%,#f9f9f9 100%);
299 |     border: none;
300 |     border-radius: 3px 3px 0 0;
301 | }
302 | 
303 | .nwe-dropdown {
304 |   position: relative;
305 |   display: inline-block;
306 | }
307 | 
308 | .nwe-dropdown-content {
309 |   display: none;
310 |   position: absolute;
311 |   background-color: #f1f1f1;
312 |   min-width: 160px;
313 |   max-width: 350px;
314 |   max-height: 20vh;
315 |   overflow: auto;
316 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
317 |   z-index: 1;
318 | }
319 | 
320 | .nwe-dropdown-content a {
321 |   color: black;
322 |   padding: 10px 10px;
323 |   text-decoration: none;
324 |   display: inline-flex;
325 |   width: fit-content;
326 | }
327 | 
328 | .nwe-dropdown a:hover {background-color: #ddd;}
329 | 
330 | .nwe-show {display: block;}
331 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig.component.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Component,
  3 |   ElementRef,
  4 |   EventEmitter,
  5 |   Input,
  6 |   OnChanges,
  7 |   OnInit,
  8 |   Output,
  9 |   SimpleChanges,
 10 |   ViewChild,
 11 |   ViewChildren,
 12 |   QueryList,
 13 |   ViewEncapsulation,
 14 |   forwardRef,
 15 |   Inject,
 16 |   OnDestroy,
 17 |   Optional
 18 | } from '@angular/core';
 19 | import { DOCUMENT } from '@angular/common';
 20 | 
 21 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 22 | import { NgxWigToolbarService } from './ngx-wig-toolbar.service';
 23 | import { TButton, CommandFunction } from './config';
 24 | import { NgxWigFilterService } from './ngx-wig-filter.service';
 25 | 
 26 | /** @dynamic */
 27 | @Component({
 28 |     selector: 'ngx-wig',
 29 |     templateUrl: './ngx-wig-component.html',
 30 |     styleUrls: ['./ngx-wig-component.css'],
 31 |     providers: [
 32 |         NgxWigToolbarService,
 33 |         {
 34 |             provide: NG_VALUE_ACCESSOR,
 35 |             useExisting: forwardRef(() => NgxWigComponent),
 36 |             multi: true,
 37 |         }
 38 |     ],
 39 |     encapsulation: ViewEncapsulation.None,
 40 |     standalone: false
 41 | })
 42 | export class NgxWigComponent
 43 |   implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
 44 |   @Input()
 45 |   public content: string;
 46 | 
 47 |   @Input()
 48 |   public placeholder: string;
 49 | 
 50 |   @Input()
 51 |   public buttons: string;
 52 | 
 53 |   @Input()
 54 |   public disabled: boolean;
 55 | 
 56 |   @Output()
 57 |   public contentChange = new EventEmitter();
 58 | 
 59 |   @ViewChild('ngWigEditable', { read: ElementRef, static: true })
 60 |   public ngxWigEditable: ElementRef;
 61 | 
 62 |   public editMode = false;
 63 |   public container: HTMLElement;
 64 |   public toolbarButtons: TButton[] = [];
 65 |   public hasFocus = false;
 66 |   public toolbarButtonIndex = 0;
 67 | 
 68 |   private readonly _mutationObserver: MutationObserver;
 69 | 
 70 |   @ViewChildren('toolbarButton', { read: ElementRef })
 71 |   private toolbarButtonElems: QueryList<ElementRef>;
 72 | 
 73 |   public constructor(
 74 |     private readonly _ngWigToolbarService: NgxWigToolbarService,
 75 |     @Optional() private readonly _filterService: NgxWigFilterService,
 76 |     @Inject(DOCUMENT) private readonly document: Document, // cannot set Document here - Angular issue - https://github.com/angular/angular/issues/20351
 77 |     @Inject('WINDOW') private readonly window
 78 |   ) {}
 79 | 
 80 |   private executeCommand(command: string, value: string = ''): boolean {
 81 |     try {
 82 |       if (this.container.contentEditable !== 'true') {
 83 |         return false;
 84 |       }
 85 | 
 86 |       // For now, use execCommand for backward compatibility
 87 |       // TODO: Replace with modern APIs when execCommand is fully deprecated
 88 |       if (command === 'unlink') {
 89 |         this.document.execCommand(command, false);
 90 |       } else {
 91 |         this.document.execCommand(command, false, value);
 92 |       }
 93 |       return true;
 94 |     } catch (error) {
 95 |       console.warn(`Command execution failed: ${command}`, error);
 96 |       return false;
 97 |     }
 98 |   }
 99 | 
100 |   public execCommand(command: string | CommandFunction | undefined, options?: string): boolean {
101 |     if (typeof command === 'function') {
102 |       command(this);
103 |       return true;
104 |     }
105 | 
106 |     if (this.editMode) {
107 |       return false;
108 |     }
109 | 
110 |     if (typeof command !== 'string' || !command) {
111 |       return false;
112 |     }
113 | 
114 |     if (!this.isSupportedCommand(command)) {
115 |       throw new Error(`The command "${command}" is not supported`);
116 |     }
117 | 
118 |     if ((command === 'createlink' && !this.isLinkSelected()) || command === 'insertImage') {
119 |       options = window.prompt('Please enter the URL', 'http://') ?? '';
120 |       if (!options) {
121 |         return false;
122 |       }
123 |     }
124 | 
125 |     this.container.focus();
126 | 
127 |     let success = false;
128 |     if (command === 'createlink' && this.isLinkSelected()) {
129 |       success = this.executeCommand('unlink');
130 |     } else {
131 |       success = this.executeCommand(command, options ?? '');
132 |     }
133 | 
134 |     if (success) {
135 |       this.onContentChange(this.container.innerHTML);
136 |     }
137 |     
138 |     return success;
139 |   }
140 | 
141 |   public ngOnInit(): void {
142 |     this.toolbarButtons = this._ngWigToolbarService.getToolbarButtons(
143 |       this.buttons
144 |     );
145 |     // Initialize dropdown roving tabindex for buttons with children
146 |     this.toolbarButtons.forEach(button => {
147 |       if (button.children?.length) {
148 |         button.dropdownButtonIndex = 0;
149 |       }
150 |     });
151 |     this.container = this.ngxWigEditable.nativeElement;
152 | 
153 |     if (this.content) {
154 |       this.container.innerHTML = this.content;
155 |     }
156 |   }
157 | 
158 |   public ngOnDestroy(): void {
159 |     if (this._mutationObserver) {
160 |       this._mutationObserver.disconnect();
161 |     }
162 |   }
163 | 
164 |   public onContentChange(newContent: string): void {
165 |     this.content = this.isInnerTextEmpty(newContent) ? '' : newContent;
166 | 
167 |     this.contentChange.emit(this.content);
168 |     this.propagateChange(this.content);
169 |   }
170 | 
171 |   public ngOnChanges(changes: SimpleChanges): void {
172 |     if (this.container && changes['content']) {
173 |       // we need to focus the container before pasting at the caret
174 |       this.container.focus();
175 | 
176 |       // clear the previous content
177 |       this.container.innerHTML = '';
178 | 
179 |       // add the new content
180 |       if (this._filterService){
181 |         this.pasteHtmlAtCaret(this._filterService.filter(changes['content'].currentValue));
182 |       } else {
183 |         this.pasteHtmlAtCaret(changes['content'].currentValue);
184 |       }
185 | 
186 |     }
187 |   }
188 | 
189 |   onPaste(event: ClipboardEvent) {
190 |     event.preventDefault();
191 | 
192 |     const text = event.clipboardData?.getData('text/html') || event.clipboardData?.getData('text/plain') || '';
193 | 
194 |     if (this._filterService){
195 |       this.pasteHtmlAtCaret(this._filterService.filter(text));
196 |     } else {
197 |       this.pasteHtmlAtCaret(text);
198 |     }
199 | 
200 |     this.onContentChange(this.container.innerHTML);
201 |   }
202 | 
203 |   public onTextareaChange(newContent: string): void {
204 |     // model -> view
205 |     this.container.innerHTML = newContent;
206 |     this.onContentChange(newContent);
207 |   }
208 | 
209 |   public writeValue(value: any): void {
210 |     value = value ?? '';
211 |     this.container.innerHTML = value;
212 |     this.content = value;
213 |   }
214 | 
215 |   public shouldShowPlaceholder(): boolean {
216 |     return !!this.placeholder && !this.container.innerText;
217 |   }
218 | 
219 |   public registerOnChange(fn: any): void {
220 |     this.propagateChange = fn;
221 |   }
222 | 
223 |   public registerOnTouched(fn: () => void): void {
224 |     this.propagateTouched = fn;
225 |   }
226 | 
227 |   public propagateTouched = () => {};
228 | 
229 |   public onBlur() {
230 |     this.hasFocus = false;
231 |     this.propagateTouched();
232 |   }
233 | 
234 |   public setDisabledState(isDisabled: boolean): void {
235 |     this.disabled = isDisabled;
236 |   }
237 | 
238 |   public isInnerTextEmpty(content: string): boolean {
239 |     const parser = new DOMParser();
240 |     const htmlDoc = parser.parseFromString(content, 'text/html');
241 | 
242 |     return htmlDoc.documentElement?.innerText === '';
243 |   }
244 | 
245 |   public isLinkSelected(): boolean {
246 |     if (window.getSelection()?.toString() === '')
247 |       return false;
248 | 
249 |     const selection = window.getSelection();
250 |     if (!selection) return false;
251 | 
252 |     return (
253 |       selection.focusNode?.parentNode?.nodeName === 'A' ||
254 |       selection.anchorNode?.parentNode?.nodeName === 'A'
255 |     );
256 |   }
257 | 
258 |   public onDropdownButtonSelected(button: TButton, event?: Event): void {
259 |     event?.preventDefault();
260 | 
261 |     if (button.isOpenOnMouseOver) return;
262 |     if (button.visibleDropdown) {
263 |       this.closeDropdown(button);
264 |       return;
265 |     }
266 |     button.visibleDropdown = true;
267 |     button.dropdownButtonIndex = 0;
268 |     const dropdown = (event?.currentTarget as HTMLElement)?.querySelector(
269 |       '.nwe-dropdown-content'
270 |     );
271 |     const buttons = Array.from(
272 |       dropdown?.querySelectorAll('button') ?? []
273 |     ) as HTMLElement[];
274 |     buttons[0]?.focus();
275 |   }
276 | 
277 |   public onDropdownKeydown(event: KeyboardEvent, button: TButton): void {
278 |     const dropdown = (event.currentTarget as HTMLElement).closest(
279 |       '.nwe-dropdown-content'
280 |     );
281 |     const buttons = Array.from(
282 |       dropdown?.querySelectorAll('button') ?? []
283 |     ) as HTMLElement[];
284 |     const index = buttons.indexOf(event.currentTarget as HTMLElement);
285 |     if (index === -1) {
286 |       return;
287 |     }
288 |     const lastIndex = buttons.length - 1;
289 |     let newIndex = index;
290 |     switch (event.key) {
291 |       case 'ArrowDown':
292 |         event.preventDefault();
293 |         newIndex = (index + 1) % buttons.length;
294 |         break;
295 |       case 'ArrowUp':
296 |         event.preventDefault();
297 |         newIndex = (index - 1 + buttons.length) % buttons.length;
298 |         break;
299 |       case 'Tab':
300 |         if (event.shiftKey) {
301 |           if (index === 0) {
302 |             return;
303 |           }
304 |           event.preventDefault();
305 |           newIndex = index - 1;
306 |         } else {
307 |           if (index === lastIndex) {
308 |             return;
309 |           }
310 |           event.preventDefault();
311 |           newIndex = index + 1;
312 |         }
313 |         break;
314 |       case 'Escape':
315 |         event.preventDefault();
316 |         this.closeDropdown(button);
317 |         return;
318 |       default:
319 |         return;
320 |     }
321 |     button.dropdownButtonIndex = newIndex;
322 |     buttons[newIndex].focus();
323 |   }
324 | 
325 |   public closeDropdown(button: TButton): void {
326 |     button.visibleDropdown = false;
327 |     this.focusToolbarButton(button);
328 |   }
329 | 
330 |   private focusToolbarButton(button: TButton): void {
331 |     const index = this.toolbarButtons.indexOf(button);
332 |     if (index === -1) {
333 |       return;
334 |     }
335 |     this.toolbarButtonIndex = index;
336 |     const buttons = this.toolbarButtonElems?.toArray();
337 |     buttons?.[index]?.nativeElement.focus();
338 |   }
339 | 
340 |   public onToolbarKeydown(event: KeyboardEvent, index: number): void {
341 |     const buttons = this.toolbarButtonElems?.toArray();
342 |     if (!buttons || buttons.length === 0) {
343 |       return;
344 |     }
345 |     const lastIndex = buttons.length - 1;
346 | 
347 |     switch (event.key) {
348 |       case 'ArrowRight':
349 |         event.preventDefault();
350 |         this.toolbarButtonIndex = (index + 1) % buttons.length;
351 |         break;
352 |       case 'ArrowLeft':
353 |         event.preventDefault();
354 |         this.toolbarButtonIndex = (index - 1 + buttons.length) % buttons.length;
355 |         break;
356 |       case 'Tab':
357 |         if (event.shiftKey) {
358 |           if (index === 0) {
359 |             return;
360 |           }
361 |           event.preventDefault();
362 |           this.toolbarButtonIndex = index - 1;
363 |         } else {
364 |           if (index === lastIndex) {
365 |             return; // Allow Tab to move focus out of the toolbar
366 |           }
367 |           event.preventDefault();
368 |           this.toolbarButtonIndex = index + 1;
369 |         }
370 |         break;
371 |       default:
372 |         return;
373 |     }
374 | 
375 |     const target = buttons[this.toolbarButtonIndex];
376 |     target?.nativeElement.focus();
377 |   }
378 | 
379 |   private pasteHtmlAtCaret(html) {
380 |     let sel;
381 |     let range;
382 | 
383 |     if (window.getSelection) {
384 |       sel = window.getSelection();
385 |       if (sel.getRangeAt && sel.rangeCount) {
386 |         range = sel.getRangeAt(0);
387 |         range.deleteContents();
388 | 
389 |         // append the content in a temporary div
390 |         const el = this.document.createElement('div');
391 |         el.innerHTML = html;
392 | 
393 |         const frag = this.document.createDocumentFragment();
394 |         let node;
395 |         let lastNode;
396 | 
397 |         while ((node = el.firstChild)) {
398 |           lastNode = frag.appendChild(node);
399 |         }
400 |         range.insertNode(frag);
401 | 
402 |         // Preserve the selection
403 |         if (lastNode) {
404 |           range = range.cloneRange();
405 |           range.setStartAfter(lastNode);
406 |           range.collapse(true);
407 |           sel.removeAllRanges();
408 |           sel.addRange(range);
409 |         }
410 |       }
411 |     }
412 |   }
413 | 
414 |   private isSupportedCommand(command: string): boolean {
415 |     // List of commonly supported commands across modern browsers
416 |     const supportedCommands = [
417 |       'bold', 'italic', 'underline',
418 |       'strikethrough', 'subscript', 'superscript',
419 |       'justifycenter', 'justifyfull', 'justifyleft', 'justifyright',
420 |       'indent', 'outdent',
421 |       'insertorderedlist', 'insertunorderedlist',
422 |       'createlink', 'unlink',
423 |       'inserthtml', 'insertimage',
424 |       'formatblock',
425 |       'removeformat'
426 |     ];
427 | 
428 |     return supportedCommands.includes(command.toLowerCase());
429 |   }
430 | 
431 |   private propagateChange: any = (_: any) => {};
432 | }
433 | 


--------------------------------------------------------------------------------
/projects/ngx-wig/src/lib/ngx-wig.component.spec.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ViewChild } from '@angular/core';
  2 | import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
  3 | import { FormsModule } from '@angular/forms';
  4 | 
  5 | import { BUTTONS, CUSTOM_LIBRARY_BUTTONS, DEFAULT_LIBRARY_BUTTONS } from './config';
  6 | import { NgxWigToolbarService } from './ngx-wig-toolbar.service';
  7 | import { NgxWigComponent } from './ngx-wig.component';
  8 | 
  9 | const mockWindow = {};
 10 | 
 11 | @Component({
 12 |     template: `<ngx-wig
 13 |     [(ngModel)]="text">
 14 |   </ngx-wig>`,
 15 |     standalone: false
 16 | })
 17 | class TestNgModelHostComponent {
 18 |   @ViewChild(NgxWigComponent) ngxWigCmp: NgxWigComponent;
 19 | 
 20 |   text = 'Fake content (ngModel)';
 21 | }
 22 | 
 23 | @Component({
 24 |     template: `<ngx-wig
 25 |     [content]="text"
 26 |     (contentChange)="text = $event"
 27 |     placeholder="Enter some text"
 28 |     buttons="bold,italic"
 29 |     [disabled]="false">
 30 |   </ngx-wig>`,
 31 |     standalone: false
 32 | })
 33 | class TestHostComponent {
 34 |   @ViewChild(NgxWigComponent) ngxWigCmp: NgxWigComponent;
 35 | 
 36 |   text = 'Fake content';
 37 | 
 38 |   getPromiseContent() {
 39 |     Promise.resolve().then(() => this.text = 'Promised content');
 40 |   }
 41 | }
 42 | 
 43 | class Page {
 44 | 
 45 |   execCommandSpy: jasmine.Spy;
 46 |   promptSpy: jasmine.Spy;
 47 |   focusSpy: jasmine.Spy;
 48 | 
 49 |   constructor(public fixture: ComponentFixture<NgxWigComponent | TestHostComponent>) {
 50 |     this.execCommandSpy = spyOn(document, 'execCommand');
 51 |     this.promptSpy = spyOn(window, 'prompt');
 52 |     this.focusSpy = spyOn(this.editableDiv, 'focus').and.callThrough();
 53 |   }
 54 | 
 55 |   get buttons()  {
 56 |  return this.queryAll<HTMLButtonElement>('.nw-button');
 57 | }
 58 |   get unorderedListBtn() {
 59 |  return this.buttons[0];
 60 | }
 61 |   get editHTMLBtn() {
 62 |  return this.query<HTMLButtonElement>('.nw-button.nw-button--source');
 63 | }
 64 |   get editorDiv() {
 65 |  return this.query<HTMLElement>('.nw-editor');
 66 | }
 67 |   get editContainerDiv() {
 68 |  return this.query<HTMLElement>('.nw-editor-container');
 69 | }
 70 |   get editorSrcContainerDiv() {
 71 |  return this.query<HTMLElement>('.nw-editor__src-container');
 72 | }
 73 |   get editableDiv() {
 74 |  return this.query<HTMLElement>('.nw-editor__res');
 75 | }
 76 |   get toolbarItemsLi() {
 77 |  return this.queryAll<HTMLElement>('.nw-toolbar__item');
 78 | }
 79 |   get iconsEl() {
 80 |  return this.queryAll<HTMLElement>('.nwe-icon');
 81 | }
 82 |   get editHTMLTxt() {
 83 |  return this.query<HTMLTextAreaElement>('textarea');
 84 | }
 85 |   get placeholderEl() {
 86 |  return this.query<HTMLElement>('.nw-editor__placeholder');
 87 | }
 88 | 
 89 |   private query<T>(selector: string): T {
 90 |     return this.fixture.nativeElement.querySelector(selector);
 91 |   }
 92 | 
 93 |   private queryAll<T>(selector: string): T[] {
 94 |     return this.fixture.nativeElement.querySelectorAll(selector);
 95 |   }
 96 | }
 97 | 
 98 | const newEvent = (eventName: string, bubbles = false, cancelable = false) => {
 99 |   const evt = document.createEvent('CustomEvent');
100 |   evt.initCustomEvent(eventName, bubbles, cancelable, null);
101 |   return evt;
102 | };
103 | 
104 | describe('NgxWigComponent', () => {
105 |   describe('standalone', () => {
106 |     let fixture: ComponentFixture<NgxWigComponent>;
107 |     let page: Page;
108 |     let component: NgxWigComponent;
109 | 
110 |     beforeEach(waitForAsync(() => {
111 |       TestBed.configureTestingModule({
112 |         imports: [FormsModule],
113 |         declarations: [NgxWigComponent],
114 |         providers: [
115 |           NgxWigToolbarService,
116 |           { provide: BUTTONS, multi: true, useValue: DEFAULT_LIBRARY_BUTTONS },
117 |           { provide: BUTTONS, multi: true, useValue: CUSTOM_LIBRARY_BUTTONS },
118 |           { provide: 'WINDOW', useValue: mockWindow }
119 |         ]
120 |       });
121 | 
122 |       fixture = TestBed.createComponent(NgxWigComponent);
123 | 
124 |       component = fixture.componentInstance;
125 |       component.content = '<p>Hello World</p>';
126 | 
127 |       page = new Page(fixture);
128 | 
129 |       fixture.detectChanges();
130 |     }));
131 | 
132 |     it('should create', () => {
133 |       expect(component).toBeDefined();
134 |     });
135 | 
136 |     it('should have seven toolbar buttons', () => {
137 |       expect(page.toolbarItemsLi.length).toBe(7);
138 |     });
139 | 
140 |     it('should have a standard button', () => {
141 |       expect(page.unorderedListBtn.classList.contains('nw-list-ul')).toBe(true);
142 |       expect(page.unorderedListBtn.getAttribute('title')).toBe('Unordered List');
143 |       expect(page.unorderedListBtn.tabIndex).toBe(0);
144 |       expect(page.unorderedListBtn.getAttribute('aria-label')).toBe('Unordered List');
145 |       expect(page.iconsEl[0].classList.contains('nwe-icon-list-ul')).toBe(true);
146 |       expect(page.iconsEl[0].getAttribute('aria-hidden')).toBe('true');
147 |       expect(page.iconsEl[0].getAttribute('focusable')).toBe('false');
148 |     });
149 | 
150 |     it('should have a standard button without icon', () => {
151 |       component.toolbarButtons[0].icon = undefined;
152 |       fixture.detectChanges();
153 |       expect(page.unorderedListBtn.textContent).toBe('UL');
154 |       expect(page.iconsEl[0].classList.contains('nwe-icon-list-ul')).toBe(false);
155 |     });
156 | 
157 |     it('should move focus with arrow keys', () => {
158 |       const secondBtn = page.buttons[1];
159 |       page.unorderedListBtn.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
160 |       fixture.detectChanges();
161 |       expect(page.unorderedListBtn.tabIndex).toBe(-1);
162 |       expect(secondBtn.tabIndex).toBe(0);
163 |       expect(document.activeElement).toBe(secondBtn);
164 |     });
165 | 
166 |     it('should move focus with Tab key and exit at end', () => {
167 |       const buttons = page.buttons;
168 |       buttons[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
169 |       fixture.detectChanges();
170 |       expect(document.activeElement).toBe(buttons[1]);
171 | 
172 |       // move back with shift+Tab
173 |       buttons[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
174 |       fixture.detectChanges();
175 |       expect(document.activeElement).toBe(buttons[0]);
176 | 
177 |       // navigate to last button
178 |       for (let i = 0; i < buttons.length - 1; i++) {
179 |         buttons[i].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
180 |         fixture.detectChanges();
181 |       }
182 |       const lastBtn = buttons[buttons.length - 1];
183 |       expect(document.activeElement).toBe(lastBtn);
184 | 
185 |       const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
186 |       const preventSpy = spyOn(tabEvent, 'preventDefault');
187 |       lastBtn.dispatchEvent(tabEvent);
188 |       fixture.detectChanges();
189 |       expect(preventSpy).not.toHaveBeenCalled();
190 |     });
191 | 
192 |     it('should have an editor container', () => {
193 |       expect(page.editContainerDiv.classList.contains('nw-editor-container--with-toolbar')).toBeDefined();
194 |     });
195 | 
196 |     it('should toggle edit mode', () => {
197 |       page.editHTMLBtn.click();
198 |       fixture.detectChanges();
199 |       expect(page.editHTMLTxt).toBeDefined();
200 |       // expect(page.editHTMLBtn.classList.contains('nw-button--active')).toBe(true);
201 |       expect(page.editorDiv.classList.contains('nw-invisible')).toBeDefined();
202 |       expect(page.editorSrcContainerDiv).toBeDefined();
203 |     });
204 | 
205 |     it('should have a content', () => {
206 |       expect(page.editableDiv.innerHTML).toBe('<p>Hello World</p>');
207 |     });
208 | 
209 |     it('should show a placeholder', () => {
210 |       component.placeholder = 'Insert text here';
211 |       page.editableDiv.innerHTML = '';
212 |       fixture.detectChanges();
213 |       expect(page.placeholderEl.innerText).toBe('Insert text here');
214 |     });
215 | 
216 |     describe('focus', () => {
217 |       it('when container click', () => {
218 |         page.editContainerDiv.click();
219 |         expect(page.focusSpy.calls.any()).toBe(true);
220 |       });
221 | 
222 |       it('when button click', () => {
223 |         page.unorderedListBtn.click();
224 |         expect(page.focusSpy.calls.any()).toBe(true);
225 |       });
226 | 
227 |       it('when execCommand', () => {
228 |         component.execCommand('bold', '');
229 |         expect(page.focusSpy.calls.any()).toBe(true);
230 |       });
231 | 
232 |       it('lost', () => {
233 |         const propagateSpy = spyOn(component, 'propagateTouched');
234 |         page.editableDiv.dispatchEvent(newEvent('blur'));
235 |         expect(component.hasFocus).toBe(false);
236 |         expect(propagateSpy.calls.any()).toBe(true);
237 |       });
238 |     });
239 | 
240 |     describe('disabled property', () => {
241 |       it('should enable the editor', () => {
242 |         expect(page.unorderedListBtn.disabled).toBe(false);
243 |         expect(page.editorDiv.classList.contains('nw-disabled')).toBe(false);
244 |         expect(page.editableDiv.classList.contains('disabled')).toBe(false);
245 |         expect(page.editableDiv.getAttribute('contenteditable')).toBe('true');
246 |       });
247 | 
248 |       it('should disable the editor', () => {
249 |         component.setDisabledState(true);
250 |         fixture.detectChanges();
251 |         expect(page.unorderedListBtn.disabled).toBe(true);
252 |         expect(page.editorDiv.classList.contains('nw-disabled')).toBe(true);
253 |         expect(page.editableDiv.classList.contains('disabled')).toBe(true);
254 |         expect(page.editableDiv.getAttribute('contenteditable')).toBe('false');
255 |       });
256 |     });
257 | 
258 |     describe('isLinkSelected method', () => {
259 |       function mockGetSelection(
260 |         selectionText: string,
261 |         selection: Partial<Selection> | null = null
262 |       ) {
263 |         spyOn(window, 'getSelection').and.returnValue({
264 |           toString: () => selectionText,
265 |           ...selection,
266 |         } as Selection);
267 |       }
268 |     
269 |       it('should return false if there is no selection', () => {
270 |         mockGetSelection('');
271 |         expect(component.isLinkSelected()).toBe(false);
272 |       });
273 |     
274 |       it('should return false if the selection is not within a link', () => {
275 |         const selection = {
276 |           focusNode: { parentNode: { nodeName: 'SPAN' } },
277 |           anchorNode: { parentNode: { nodeName: 'SPAN' } },
278 |         } as Partial<Selection>;
279 |         mockGetSelection('text', selection);
280 |     
281 |         expect(component.isLinkSelected()).toBe(false);
282 |       });
283 |     
284 |       it('should return true if the focusNode is within a link', () => {
285 |         const selection = {
286 |           focusNode: { parentNode: { nodeName: 'A' } },
287 |           anchorNode: { parentNode: { nodeName: 'SPAN' } },
288 |         } as Partial<Selection>;
289 |         mockGetSelection('text', selection);
290 |     
291 |         expect(component.isLinkSelected()).toBe(true);
292 |       });
293 |     
294 |       it('should return true if the anchorNode is within a link', () => {
295 |         const selection = {
296 |           focusNode: { parentNode: { nodeName: 'DIV' } },
297 |           anchorNode: { parentNode: { nodeName: 'A' } },
298 |         } as Partial<Selection>;
299 |         mockGetSelection('text', selection);
300 |     
301 |         expect(component.isLinkSelected()).toBe(true);
302 |       });
303 |     
304 |       it('should return false if selection is null', () => {
305 |         mockGetSelection('text', null);
306 |         expect(component.isLinkSelected()).toBe(false);
307 |       });
308 |     }); 
309 | 
310 |     describe('execCommand', () => {
311 |       it('should call execCommand', () => {
312 |         const spy = spyOn(component, 'execCommand');
313 |         page.unorderedListBtn.click();
314 |         const execArgs = spy.calls.first().args;
315 |         expect(execArgs[0]).toBe('insertunorderedlist');
316 |         expect(execArgs[1]).toBeUndefined();
317 |       });
318 | 
319 |       it('should return false', () => {
320 |         component.editMode = true;
321 |         expect(component.execCommand('insertunorderedlist', '')).toBe(false);
322 |       });
323 | 
324 |       it('should execute the BOLD command', () => {
325 |         component.execCommand('bold', '');
326 |         const documentArgs = page.execCommandSpy.calls.first().args;
327 |         expect(documentArgs[0]).toBe('bold');
328 |         expect(documentArgs[1]).toBe(false);
329 |         expect(documentArgs[2]).toBe('');
330 |       });
331 | 
332 |       it('should fail if command is unknown', () => {
333 |         expect(() => {
334 |           component.execCommand('fakeCmd', '');
335 |         }).toThrow(new Error('The command "fakeCmd" is not supported'));
336 |       });
337 | 
338 |       it('should show a prompt when the command name is createlink', () => {
339 |         page.promptSpy.and.returnValue('http://fakeLink');
340 |         component.execCommand('createlink', '');
341 |         const promptArgs = page.promptSpy.calls.first().args;
342 |         expect(promptArgs[0]).toBe('Please enter the URL');
343 |         expect(promptArgs[1]).toBe('http://');
344 |       });
345 | 
346 |       it('should show a prompt when the command name is insertImage', () => {
347 |         page.promptSpy.and.returnValue('http://fakeImage');
348 |         component.execCommand('insertImage', '');
349 |         const promptArgs = page.promptSpy.calls.first().args;
350 |         expect(promptArgs[0]).toBe('Please enter the URL');
351 |         expect(promptArgs[1]).toBe('http://');
352 |       });
353 | 
354 |       it('should not show a prompt when the command is not createlink or insertImage', () => {
355 |         component.execCommand('bold', '');
356 |         expect(page.promptSpy.calls.any()).toBe(false);
357 |       });
358 | 
359 |       it('should not show a prompt when the command is createlink and selected text contains a link', () => {
360 |         spyOn(component, 'isLinkSelected').and.returnValue(true)
361 |         component.execCommand('createlink', '');
362 |         expect(page.promptSpy.calls.any()).toBe(false);
363 |       });
364 | 
365 |       it('should execute unlink command', () => {
366 |         spyOn(component, 'isLinkSelected').and.returnValue(true)
367 |         component.execCommand('createlink', '');
368 |         expect(page.execCommandSpy).toHaveBeenCalledWith('unlink', false);
369 |       });
370 |       
371 |       it('should return if the prompt is cancelled', () => {
372 |         page.promptSpy.and.returnValue(undefined);
373 |         component.execCommand('createlink', '');
374 |         expect(page.execCommandSpy.calls.any()).toBe(false);
375 |       });
376 |     });
377 | 
378 |     it('should change the content (onContentChange)', () => {
379 |       const newContent = 'New fake content';
380 |       const spy = spyOn(component.contentChange, 'emit');
381 |       component.onContentChange(newContent);
382 |       expect(component.content).toBe(newContent);
383 |       expect(spy.calls.first().args[0]).toBe(newContent);
384 |     });
385 | 
386 |     it('should emit empty string if content innerText is empty', () => {
387 |       const newContent = '<br>';
388 |       const spy = spyOn(component.contentChange, 'emit');
389 |       component.onContentChange(newContent);
390 |       expect(component.content).toBe('');
391 |       expect(spy.calls.first().args[0]).toBe('');
392 |     });
393 | 
394 |     it('should change the content (onTextareaChange)', () => {
395 |       const newText = '<p>New fake text</p>';
396 |       const spy = spyOn(component, 'onContentChange');
397 |       component.editMode = true;
398 |       fixture.detectChanges();
399 |       page.editHTMLTxt.value = newText;
400 |       page.editHTMLTxt.dispatchEvent(newEvent('input'));
401 |       expect(page.editableDiv.innerHTML).toBe(newText);
402 |       expect(spy.calls.first().args[0]).toBe(newText);
403 |     });
404 | 
405 |     describe('writeValue', () => {
406 |       it('should set content to empty string', () => {
407 |         component.writeValue(undefined);
408 |         expect(page.editableDiv.innerHTML).toBe('');
409 |       });
410 | 
411 |       it('should set content to non empty string', () => {
412 |         const fakeValue = 'Fake value';
413 |         component.writeValue(fakeValue);
414 |         expect(page.editableDiv.innerHTML).toBe(fakeValue);
415 |       });
416 |     });
417 |   });
418 | 
419 |   describe('with host', () => {
420 |     let fixture: ComponentFixture<TestHostComponent>;
421 |     let component: TestHostComponent;
422 |     let page: Page;
423 | 
424 |     beforeEach(() => {
425 |       TestBed.configureTestingModule({
426 |         imports: [FormsModule],
427 |         declarations: [
428 |           NgxWigComponent,
429 |           TestHostComponent
430 |         ],
431 |         providers: [
432 |           NgxWigToolbarService,
433 |           { provide: BUTTONS, multi: true, useValue: DEFAULT_LIBRARY_BUTTONS },
434 |           { provide: 'WINDOW', useValue: mockWindow }
435 |         ]
436 |       });
437 |       fixture = TestBed.createComponent(TestHostComponent);
438 |       component = fixture.componentInstance;
439 |       page = new Page(fixture);
440 | 
441 |       fixture.detectChanges();
442 |     });
443 | 
444 |     it('should set the content', () => {
445 |       expect(component.ngxWigCmp.content).toBe(component.text);
446 |     });
447 | 
448 |     it('should set the placeholder', () => {
449 |       expect(component.ngxWigCmp.placeholder).toBe('Enter some text');
450 |     });
451 | 
452 |     it('should set the toolbar buttons', () => {
453 |       expect(component.ngxWigCmp.toolbarButtons).toEqual([
454 |         { label: 'B', title: 'Bold', command: 'bold', styleClass: 'nw-bold', icon: 'nwe-icon-bold' },
455 |         { label: 'I', title: 'Italic', command: 'italic', styleClass: 'nw-italic', icon: 'nwe-icon-italic' }
456 |       ]);
457 |     });
458 | 
459 |     it('should set the disabled property', () => {
460 |       expect(component.ngxWigCmp.disabled).toBe(false);
461 |     });
462 | 
463 |     it('should emit content', () => {
464 |       component.ngxWigCmp.contentChange.emit('New fake content');
465 |       expect(component.text).toBe('New fake content');
466 |     });
467 | 
468 |     it('should focus the editor', () => {
469 |       component.text = 'Fake text';
470 |       fixture.detectChanges();
471 |       expect(page.focusSpy.calls.any()).toBe(true);
472 |     });
473 | 
474 |     it('should change the content from a promise', fakeAsync(() => {
475 |       component.getPromiseContent();
476 |       tick();
477 |       fixture.detectChanges();
478 |       expect(page.editableDiv.innerHTML).toBe('Promised content');
479 |     }));
480 |   });
481 | 
482 |   describe('with host (ngModel)', () => {
483 |     let fixture: ComponentFixture<TestNgModelHostComponent>;
484 |     let component: TestNgModelHostComponent;
485 | 
486 |     beforeEach(() => {
487 |       TestBed.configureTestingModule({
488 |         imports: [FormsModule],
489 |         declarations: [
490 |           NgxWigComponent,
491 |           TestNgModelHostComponent
492 |         ],
493 |         providers: [
494 |           NgxWigToolbarService,
495 |           { provide: BUTTONS, multi: true, useValue: DEFAULT_LIBRARY_BUTTONS },
496 |           { provide: 'WINDOW', useValue: mockWindow }
497 |         ]
498 |       });
499 |       fixture = TestBed.createComponent(TestNgModelHostComponent);
500 |       component = fixture.componentInstance;
501 | 
502 |       fixture.detectChanges();
503 |     });
504 | 
505 |     it('should set the content', waitForAsync(() => {
506 |       fixture.whenStable().then(() => {
507 |         expect(component.ngxWigCmp.content).toBe(component.text);
508 |       });
509 |     }));
510 | 
511 |     it('should change the text', () => {
512 |       const editor = document.querySelector('.nw-editor__res');
513 |       if (editor) {
514 |         editor.textContent = 'New fake content';
515 |         editor.dispatchEvent(newEvent('input'));
516 |         fixture.detectChanges();
517 |         expect(component.text).toBe('New fake content');
518 |       }
519 |     });
520 |   });
521 | });
522 | 


--------------------------------------------------------------------------------