diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 8cd060b..120904c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -28,11 +28,16 @@ jobs:
cmd: install
- name: run
- run: |
- yarn run test
- cat ./coverage/lcov.info | ./node_modules/.bin/codecov
- env:
- CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+ run: yarn run test
+
+ - uses: codecov/codecov-action@v3
+ name: upload
+ with:
+ token: ${{ secrets.CODECOV_TOKEN }}
+ flags: unittests
+ files: ./coverage/cobertura-coverage.xml
+ fail_ci_if_error: true
+ verbose: true
lint:
runs-on: ubuntu-latest
diff --git a/.gitignore b/.gitignore
index 7a9d8f0..1f94fbe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,18 +1,18 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
-# compiled output
+# Compiled output
/dist
/tmp
/out-tsc
-/publish
-/yarn.lock
-/.angular/cache
+/bazel-out
-# dependencies
+# Node
/node_modules
+npm-debug.log
+yarn-error.log
# IDEs and editors
-/.idea
+.idea/
.project
.classpath
.c9/
@@ -20,23 +20,26 @@
.settings/
*.sublime-workspace
-# IDE - VSCode
+# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
+.history/*
-# misc
-/.sass-cache
+# Miscellaneous
+/.angular/cache
+.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
-npm-debug.log
-yarn-error.log
testem.log
/typings
-# System Files
+# System files
.DS_Store
Thumbs.db
+
+/publish
+/yarn.lock
diff --git a/.nvmrc b/.nvmrc
index 6b17d22..3e558c9 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-14.16.1
+18.12.0
diff --git a/README.md b/README.md
index 12bb621..19da713 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ import { NgxTinymceModule } from 'ngx-tinymce';
@NgModule({
imports: [
NgxTinymceModule.forRoot({
+ // Local assets
baseURL: './assets/tinymce/',
// or cdn
baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/'
@@ -37,6 +38,37 @@ import { NgxTinymceModule } from 'ngx-tinymce';
export class AppModule { }
```
+If the local path should be adding assets configuration in `angular.json`:
+
+```json
+"assets": [
+ {
+ "glob": "**/tinymce.min.js",
+ "input": "./node_modules/tinymce",
+ "output": "assets/tinymce/"
+ }
+]
+```
+
+### Standalone
+
+```ts
+@Component({
+ template: ``,
+ standalone: true,
+ imports: [TinymceComponent],
+})
+export class App
+```
+
+Globa config:
+
+```ts
+bootstrapApplication(AppComponent, {
+ providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})]
+});
+```
+
### Usage
```ts
diff --git a/angular.json b/angular.json
index 2acd3ec..6ce4b79 100644
--- a/angular.json
+++ b/angular.json
@@ -14,15 +14,15 @@
}
},
"root": "",
- "sourceRoot": "src",
+ "sourceRoot": "",
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist",
"index": "src/index.html",
- "main": "src/main.ts",
+ "browser": "src/main.ts",
"polyfills": [
"zone.js"
],
@@ -49,21 +49,12 @@
"maximumError": "4kb"
}
],
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ],
"outputHashing": "all"
},
"development": {
- "buildOptimizer": false,
"optimization": false,
- "vendorChunk": true,
"extractLicenses": false,
- "sourceMap": true,
- "namedChunks": true
+ "sourceMap": true
}
},
"defaultConfiguration": "production"
@@ -72,10 +63,10 @@
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
- "browserTarget": "ngx-tinymce:build:production"
+ "buildTarget": "ngx-tinymce:build:production"
},
"development": {
- "browserTarget": "ngx-tinymce:build:development"
+ "buildTarget": "ngx-tinymce:build:development"
}
},
"defaultConfiguration": "development"
@@ -83,16 +74,21 @@
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
- "main": "lib/test.ts",
- "tsConfig": "tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
+ "karmaConfig": "./karma.conf.js",
"polyfills": [
"zone.js",
"zone.js/testing"
],
+ "tsConfig": "tsconfig.spec.json",
"include": [
- "../lib/test.ts",
- "../lib/**/*.spec.ts"
+ "lib/**/*.spec.ts"
+ ],
+ "assets": [
+ {
+ "glob": "**/tinymce.min.js",
+ "input": "./node_modules/tinymce",
+ "output": "assets/tinymce/"
+ }
]
}
},
@@ -109,9 +105,5 @@
}
}
}
- },
- "defaultProject": "ngx-tinymce",
- "cli": {
- "defaultCollection": "@angular-eslint/schematics"
}
}
diff --git a/karma.conf.js b/karma.conf.js
index 5ccad91..91ca45a 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,50 +1,51 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine', '@angular-devkit/build-angular'],
- plugins: [
- require('karma-jasmine'),
- require('karma-chrome-launcher'),
- require('karma-jasmine-html-reporter'),
- require('karma-coverage'),
- require('@angular-devkit/build-angular/plugins/karma')
- ],
- client: {
- jasmine: {
- // you can add configuration options for Jasmine here
- // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
- // for example, you can disable the random execution with `random: false`
- // or set a specific seed with `seed: 4321`
- },
- clearContext: false // leave Jasmine Spec Runner output visible in browser
- },
- jasmineHtmlReporter: {
- suppressAll: true // removes the duplicated traces
- },
- coverageReporter: {
- dir: require('path').join(__dirname, './coverage'),
- subdir: '.',
- reporters: [
- { type: 'html' },
- { type: 'text-summary' }
- ]
- },
- reporters: ['progress', 'kjhtml'],
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['Chrome'],
- singleRun: false,
- restartOnFileChange: true,
- customLaunchers: {
- ChromeHeadlessCI: {
- base: 'ChromeHeadless',
- flags: ['--no-sandbox'],
- },
- }
- });
-};
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular-devkit/build-angular'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage'),
+ require('@angular-devkit/build-angular/plugins/karma')
+ ],
+ client: {
+ jasmine: {
+ // you can add configuration options for Jasmine here
+ // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+ // for example, you can disable the random execution with `random: false`
+ // or set a specific seed with `seed: 4321`
+ },
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ jasmineHtmlReporter: {
+ suppressAll: true // removes the duplicated traces
+ },
+ coverageReporter: {
+ dir: require('path').join(__dirname, './coverage'),
+ subdir: '.',
+ reporters: [
+ { type: 'html' },
+ { type: 'text-summary' },
+ { type: 'cobertura' },
+ ]
+ },
+ reporters: ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false,
+ restartOnFileChange: true,
+ customLaunchers: {
+ ChromeHeadlessCI: {
+ base: 'ChromeHeadless',
+ flags: ['--no-sandbox'],
+ },
+ }
+ });
+};
diff --git a/lib/ng-package.json b/lib/ng-package.json
index 455c034..8d00aad 100644
--- a/lib/ng-package.json
+++ b/lib/ng-package.json
@@ -5,5 +5,5 @@
"lib": {
"entryFile": "src/public_api.ts"
},
- "allowedNonPeerDependencies": ["@ng-util/util", "@ng-util/lazy"]
+ "allowedNonPeerDependencies": ["@ng-util/lazy"]
}
diff --git a/lib/package.json b/lib/package.json
index 2a07062..67d6cd2 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -20,7 +20,6 @@
},
"homepage": "https://cipchk.github.io/ngx-tinymce/",
"dependencies": {
- "@ng-util/lazy": "^14.0.0",
- "@ng-util/util": "^14.0.0"
+ "@ng-util/lazy": "^17.0.0-rc.0"
}
}
diff --git a/lib/src/provide.ts b/lib/src/provide.ts
new file mode 100644
index 0000000..9a5eaeb
--- /dev/null
+++ b/lib/src/provide.ts
@@ -0,0 +1,13 @@
+import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { TinymceOptions } from './tinymce.options';
+
+/**
+ * Sets up providers necessary to config for the Tinymce.
+ * @example
+ * bootstrapApplication(AppComponent, {
+ * providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})]
+ * });
+ */
+export function provideTinymce(options: TinymceOptions): EnvironmentProviders {
+ return makeEnvironmentProviders([{ provide: TinymceOptions, useValue: options }]);
+}
diff --git a/lib/src/public_api.ts b/lib/src/public_api.ts
index e0f77cc..b9dfd2f 100644
--- a/lib/src/public_api.ts
+++ b/lib/src/public_api.ts
@@ -1,3 +1,4 @@
export * from './tinymce.options';
export { TinymceComponent } from './tinymce.component';
export * from './tinymce.module';
+export * from './provide';
diff --git a/lib/src/tinymce.component.ts b/lib/src/tinymce.component.ts
index 41f9d97..af1aed2 100644
--- a/lib/src/tinymce.component.ts
+++ b/lib/src/tinymce.component.ts
@@ -15,15 +15,21 @@ import {
NgZone,
Inject,
SimpleChange,
+ Optional,
+ booleanAttribute,
+ numberAttribute,
} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-import { InputBoolean, InputNumber } from '@ng-util/util';
import { NuLazyService } from '@ng-util/lazy';
+import { DOCUMENT, NgIf } from '@angular/common';
+import type { Editor as TinyMCEEditor, RawEditorOptions } from 'tinymce';
import { TinymceOptions } from './tinymce.options';
-import { DOCUMENT } from '@angular/common';
const isSSR = !(typeof document === 'object' && !!document);
+/**
+ * Angular for tinymce, You can modify the global configuration via `provideTinymce`
+ */
@Component({
selector: 'tinymce',
exportAs: 'tinymce',
@@ -51,13 +57,11 @@ const isSSR = !(typeof document === 'object' && !!document);
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [NgIf],
})
export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
- static ngAcceptInputType_inline: string | boolean | null | undefined;
- static ngAcceptInputType_disabled: string | boolean | null | undefined;
- static ngAcceptInputType_delay: string | number | null | undefined;
-
- private _instance: any;
+ private _instance?: TinyMCEEditor | null;
private value = '';
load = true;
id = `_tinymce-${Math.random().toString(36).substring(2)}`;
@@ -65,11 +69,10 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
private onChange!: (value: string) => void;
private onTouched!: () => void;
- @Input() config: any;
+ @Input() config?: RawEditorOptions | null;
@Input() placeholder = '';
- @Input() @InputBoolean() inline = false;
- @Input()
- @InputBoolean()
+ @Input({ transform: booleanAttribute }) inline = false;
+ @Input({ transform: booleanAttribute })
set disabled(value: boolean) {
this._disabled = value;
this.setDisabled();
@@ -88,10 +91,10 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
}
}
/** 延迟初始化 */
- @Input() @InputNumber() delay = 0;
- @Output() ready = new EventEmitter();
+ @Input({ transform: numberAttribute }) delay = 0;
+ @Output() ready = new EventEmitter();
- get instance(): any {
+ get instance(): TinyMCEEditor | undefined | null {
return this._instance;
}
@@ -100,7 +103,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
}
constructor(
- private defConfig: TinymceOptions,
+ @Optional() private defConfig: TinymceOptions,
private lazySrv: NuLazyService,
private ngZone: NgZone,
@Inject(DOCUMENT) private doc: any,
@@ -125,21 +128,21 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
return;
}
- if (defConfig.baseURL) {
+ if (defConfig?.baseURL) {
let url = '' + defConfig.baseURL;
if (url.endsWith('/')) {
url = url.substring(0, url.length - 1);
}
win.tinymce.baseURL = url;
}
- const userOptions = { ...defConfig.config, ...config };
- const options = {
+ const userOptions = { ...defConfig?.config, ...config };
+ const options: RawEditorOptions = {
selector: `#` + id,
inline,
- ...defConfig.config,
+ ...defConfig?.config,
...config,
- setup: (editor: any) => {
+ setup: (editor) => {
this._instance = editor;
if (this.onChange) {
editor.on('change keyup', () => {
@@ -151,7 +154,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
userOptions.setup(editor);
}
},
- init_instance_callback: (editor: any) => {
+ init_instance_callback: (editor) => {
if (editor && this.value) {
editor.setContent(this.value);
}
@@ -159,7 +162,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
if (typeof userOptions.init_instance_callback === 'function') {
userOptions.init_instance_callback(editor);
}
- this.ready.emit(this._instance);
+ this.ready.emit(editor);
},
};
if (userOptions.auto_focus) {
@@ -173,12 +176,12 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
}
private destroy(): void {
- if (!this._instance) {
+ if (this._instance == null) {
return;
}
this.ngZone.runOutsideAngular(() => {
- this._instance.off();
- this._instance.remove('#' + this.id);
+ this._instance!.off();
+ this._instance!.remove();
});
this._instance = null;
}
@@ -190,10 +193,11 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
this.ngZone.runOutsideAngular(() => {
const mode = this._disabled ? 'readonly' : 'design';
// Compatible with 5
- if (typeof this._instance.setMode === 'function') {
- this._instance.setMode(mode);
+ const setMode5 = (this._instance as any).setMode;
+ if (typeof setMode5 === 'function') {
+ setMode5(mode);
} else {
- this._instance.mode.set(mode);
+ this._instance!.mode.set(mode);
}
});
}
@@ -231,7 +235,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
// value should be NOT NULL
this.value = value || '';
if (this._instance) {
- this.ngZone.runOutsideAngular(() => this._instance.setContent(this.value));
+ this.ngZone.runOutsideAngular(() => this._instance!.setContent(this.value));
}
}
diff --git a/lib/src/tinymce.module.ts b/lib/src/tinymce.module.ts
index ebb259f..8954897 100644
--- a/lib/src/tinymce.module.ts
+++ b/lib/src/tinymce.module.ts
@@ -5,8 +5,7 @@ import { TinymceOptions } from './tinymce.options';
import { TinymceComponent } from './tinymce.component';
@NgModule({
- imports: [CommonModule],
- declarations: [TinymceComponent],
+ imports: [CommonModule, TinymceComponent],
exports: [TinymceComponent],
})
export class NgxTinymceModule {
diff --git a/lib/src/tinymce.options.ts b/lib/src/tinymce.options.ts
index eb3e083..b350457 100644
--- a/lib/src/tinymce.options.ts
+++ b/lib/src/tinymce.options.ts
@@ -1,10 +1,12 @@
+import type { RawEditorOptions } from 'tinymce';
+
export class TinymceOptions {
/** 指定tinymce目录路径，默认：`./assets/tinymce/` */
baseURL?: string = './assets/tinymce/';
/** 指定tinymce文件名，默认：`tinymce.min.js` */
fileName?: string = 'tinymce.min.js';
/** 默认配置项，对全局 Tinymce 有效 */
- config?: any;
+ config?: RawEditorOptions;
/** 延迟加载（单位：毫秒），默认：`0` */
delay?: number;
}
diff --git a/lib/src/tinymce.spec.ts b/lib/src/tinymce.spec.ts
index 1441658..4852df0 100644
--- a/lib/src/tinymce.spec.ts
+++ b/lib/src/tinymce.spec.ts
@@ -2,35 +2,38 @@ import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgxTinymceModule } from './tinymce.module';
+import { FormsModule } from '@angular/forms';
+import { RawEditorOptions } from 'tinymce';
-const html = ``;
+const delay = (ms?: number) => new Promise((res) => setTimeout(res, ms ?? 1000));
describe('Component: ngx-tinymce', () => {
let fixture: ComponentFixture;
let context: TestComponent;
- let element: any;
- let clean: any;
- beforeEach(() => {
- TestBed.configureTestingModule({
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
declarations: [TestComponent],
- imports: [NgxTinymceModule],
- });
- TestBed.overrideComponent(TestComponent, { set: { template: html } });
+ imports: [NgxTinymceModule, FormsModule],
+ }).compileComponents();
fixture = TestBed.createComponent(TestComponent);
context = fixture.componentInstance;
- element = fixture.nativeElement.querySelector('#c1');
- clean = fixture.nativeElement.querySelector('#c2');
- fixture.detectChanges();
});
- it('fixture should not be null', () => {
- expect(fixture).not.toBeNull();
+ it('fixture should not be null', async () => {
+ context.config = { setup: jasmine.createSpy() };
+ fixture.detectChanges();
+ await delay();
+ expect(context.config.setup).toHaveBeenCalled();
});
});
@Component({
selector: 'app-tinymce-test',
- template: '',
+ template: '',
})
-class TestComponent {}
+class TestComponent {
+ value = `a
`;
+ config?: RawEditorOptions | null;
+ onReady(): void {}
+}
diff --git a/lib/test.ts b/lib/test.ts
deleted file mode 100644
index 089ddda..0000000
--- a/lib/test.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
diff --git a/package.json b/package.json
index e86ddef..5635273 100644
--- a/package.json
+++ b/package.json
@@ -20,51 +20,49 @@
},
"homepage": "https://cipchk.github.io/ngx-tinymce/",
"scripts": {
- "analyze": "ng b --stats-json --source-map",
"lint": "ng lint",
- "test": "ng t --no-progress --browsers=ChromeHeadlessCI --code-coverage --no-watch",
+ "test": "ng t --no-progress --code-coverage --no-watch --browsers=ChromeHeadless",
"build": "node scripts/build.js",
- "release:next": "npm run build && cd publish && npm publish --access public --tag next",
- "release": "npm run build && cd publish && npm publish --access public"
+ "release": "npm run build && cd publish && npm publish --access public",
+ "release:next": "npm run build && cd publish && npm publish --access public --tag next"
},
"dependencies": {
- "@angular/animations": "^16.0.0",
- "@angular/common": "^16.0.0",
- "@angular/compiler": "^16.0.0",
- "@angular/core": "^16.0.0",
- "@angular/forms": "^16.0.0",
- "@angular/platform-browser": "^16.0.0",
- "@angular/platform-browser-dynamic": "^16.0.0",
- "@angular/router": "^16.0.0",
+ "@angular/animations": "^17.0.0-next.0",
+ "@angular/common": "^17.0.0-next.0",
+ "@angular/compiler": "^17.0.0-next.0",
+ "@angular/core": "^17.0.0-next.0",
+ "@angular/forms": "^17.0.0-next.0",
+ "@angular/platform-browser": "^17.0.0-next.0",
+ "@angular/platform-browser-dynamic": "^17.0.0-next.0",
+ "@angular/router": "^17.0.0-next.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
- "zone.js": "~0.13.0",
- "bootstrap": "^5.3.0",
- "@ng-util/lazy": "^16.0.0",
- "@ng-util/util": "^16.0.0",
- "ngx-highlight-js": "^16.0.0"
+ "zone.js": "~0.14.0",
+ "bootstrap": "^5.3.2",
+ "@ng-util/lazy": "^17.0.0-rc.0",
+ "ngx-highlight-js": "^17.0.0-rc.0",
+ "tinymce": "^6.7.2"
},
"devDependencies": {
- "@angular-devkit/build-angular": "^16.0.3",
- "@angular/cli": "~16.0.3",
- "@angular/compiler-cli": "^16.0.0",
- "@types/jasmine": "~4.3.0",
- "jasmine-core": "~4.6.0",
+ "@angular-devkit/build-angular": "^17.0.0-rc.2",
+ "@angular/cli": "^17.0.0-rc.2",
+ "@angular/compiler-cli": "^17.0.0-next.0",
+ "@types/jasmine": "~5.1.0",
+ "jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
- "karma-jasmine-html-reporter": "~2.0.0",
- "typescript": "~5.0.2",
- "@angular-eslint/builder": "^16.0.3",
- "@angular-eslint/eslint-plugin": "^16.0.3",
- "@angular-eslint/eslint-plugin-template": "^16.0.3",
- "@angular-eslint/schematics": "^16.0.3",
- "@angular-eslint/template-parser": "^16.0.3",
- "@typescript-eslint/eslint-plugin": "^5.59.8",
- "@typescript-eslint/parser": "^5.59.8",
- "codecov": "^3.8.3",
- "eslint": "^8.42.0",
- "ng-packagr": "^16.0.1"
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "~5.2.2",
+ "@angular-eslint/builder": "^16.2.0",
+ "@angular-eslint/eslint-plugin": "^16.2.0",
+ "@angular-eslint/eslint-plugin-template": "^16.2.0",
+ "@angular-eslint/schematics": "^16.2.0",
+ "@angular-eslint/template-parser": "^16.2.0",
+ "@typescript-eslint/eslint-plugin": "^5.62.0",
+ "@typescript-eslint/parser": "^5.62.0",
+ "eslint": "^8.52.0",
+ "ng-packagr": "^17.0.0-rc.1"
}
}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 60fa1c6..68d1f0f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
import { Component, ViewEncapsulation } from '@angular/core';
+import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
@@ -27,9 +28,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
Inline
-
- Standalone
-
@@ -37,5 +35,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
`,
encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [RouterOutlet, RouterLink],
})
export class AppComponent {}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
deleted file mode 100644
index 0ee9e99..0000000
--- a/src/app/app.module.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
-import { RouterModule } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { HighlightJsModule } from 'ngx-highlight-js';
-import { NgxTinymceModule } from 'ngx-tinymce';
-
-import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
-import { OtherComponent } from './other/other.component';
-import { InlineComponent } from './inline/inline.component';
-import { StandaloneDemoComponent } from './standalone.component';
-
-@NgModule({
- declarations: [AppComponent, HomeComponent, OtherComponent, InlineComponent],
- imports: [
- BrowserModule,
- CommonModule,
- FormsModule,
- HttpClientModule,
- HighlightJsModule,
- RouterModule.forRoot(
- [
- { path: '', component: HomeComponent },
- { path: 'other', component: OtherComponent },
- { path: 'inline', component: InlineComponent },
- { path: 'standalone', component: StandaloneDemoComponent },
- ],
- { useHash: true },
- ),
- NgxTinymceModule.forRoot({
- // baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/',
- baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/',
- }),
- ],
- bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 21b7d83..3ad432d 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,9 +1,14 @@
import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
+import { HighlightJsDirective } from 'ngx-highlight-js';
+import { TinymceComponent } from 'ngx-tinymce';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
+ standalone: true,
+ imports: [FormsModule, HighlightJsDirective, TinymceComponent],
})
export class HomeComponent {
html = `
diff --git a/src/app/inline/inline.component.ts b/src/app/inline/inline.component.ts
index 0c1c928..4aa1a04 100644
--- a/src/app/inline/inline.component.ts
+++ b/src/app/inline/inline.component.ts
@@ -1,9 +1,14 @@
import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
+import { HighlightJsDirective } from 'ngx-highlight-js';
+import { TinymceComponent } from 'ngx-tinymce';
@Component({
selector: 'app-inline',
templateUrl: './inline.component.html',
+ standalone: true,
+ imports: [FormsModule, HighlightJsDirective, TinymceComponent],
})
export class InlineComponent {
html = `
diff --git a/src/app/other/other.component.ts b/src/app/other/other.component.ts
index 0383c05..2bf82b7 100644
--- a/src/app/other/other.component.ts
+++ b/src/app/other/other.component.ts
@@ -1,9 +1,14 @@
import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HighlightJsDirective } from 'ngx-highlight-js';
+import { TinymceComponent } from 'ngx-tinymce';
@Component({
selector: 'app-other',
templateUrl: './other.component.html',
styleUrls: ['./other.component.less'],
+ standalone: true,
+ imports: [FormsModule, HighlightJsDirective, TinymceComponent],
})
export class OtherComponent {
html = `now: ${+new Date()}`;
diff --git a/src/app/router.ts b/src/app/router.ts
new file mode 100644
index 0000000..d5bf2c2
--- /dev/null
+++ b/src/app/router.ts
@@ -0,0 +1,10 @@
+import { Route } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { OtherComponent } from './other/other.component';
+import { InlineComponent } from './inline/inline.component';
+
+export const ROUTERS: Route[] = [
+ { path: '', component: HomeComponent },
+ { path: 'other', component: OtherComponent },
+ { path: 'inline', component: InlineComponent },
+];
diff --git a/src/app/standalone.component.ts b/src/app/standalone.component.ts
deleted file mode 100644
index 4fbd23d..0000000
--- a/src/app/standalone.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { NgxTinymceModule } from 'ngx-tinymce';
-
-@Component({
- selector: 'standalone-demo',
- template: ` `,
- standalone: true,
- imports: [FormsModule, NgxTinymceModule],
-})
-export class StandaloneDemoComponent {
- html = `HTMLS`;
- config = {
- height: 350,
- };
-}
diff --git a/src/assets/fork.png b/src/assets/fork.png
deleted file mode 100644
index 146ef8a..0000000
Binary files a/src/assets/fork.png and /dev/null differ
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073..0000000
--- a/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
- production: true
-};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
deleted file mode 100644
index b7f639a..0000000
--- a/src/environments/environment.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
-
-export const environment = {
- production: false
-};
diff --git a/src/index.html b/src/index.html
index 55bb192..1579b4a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,8 +14,13 @@
-
- 
+
+ 
