feat: add shadow dom support, fixes #321

projects/angular-editor-app/src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { ShadowDomComponent } from './shadow-dom/shadow-dom.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent
+  },
+  {
+    path: 'shadow-dom',
+    component: ShadowDomComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

projects/angular-editor-app/src/app/app.component.html

@@ -1,29 +1,2 @@
-<div class="container">
-  <h1>Angular Editor</h1>
-  <p><a href="https://github.com/kolkov/angular-editor">Get it here</a></p>
-
-  <label for="test_input">Test input </label>
-  <input id="test_input">
-  <br><br>
-  <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
-                  (blur)="onBlur($event)">
-    <ng-template #customButtons let-executeCommandFn="executeCommandFn">
-      <ae-toolbar-set>
-        <ae-button iconClass="fa fa-html5" title="Angular editor logo" (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
-      </ae-toolbar-set>
-    </ng-template>
-  </angular-editor>
-  <p class="html">
-    HTML Output:  {{ htmlContent1 }}
-  </p>
-  <form [formGroup]="form">
-    <angular-editor autofocus="true" id="editor2" formControlName="signature" [config]="config2" (ngModelChange)="onChange2($event)"></angular-editor>
-  </form>
-  <p>
-    Form Value: {{ form.value.signature }}
-  </p>
-  <p>
-    Form Status: {{ form.status }}
-  </p>
-</div>
 
+<router-outlet></router-outlet>

projects/angular-editor-app/src/app/app.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: block;
+    max-width: 720px;
+    margin-right: auto;
+    margin-left: auto;
+}

projects/angular-editor-app/src/app/app.component.ts

@@ -1,105 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AngularEditorConfig } from 'angular-editor';
-
-const ANGULAR_EDITOR_LOGO_URL = 'https://github.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  title = 'app';
-
-  form: FormGroup;
-
-  htmlContent1 = '';
-  htmlContent2 = '';
-  angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
 
-  config1: AngularEditorConfig = {
-    editable: true,
-    spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
-    sanitize: false,
-    // toolbarPosition: 'top',
-    outline: true,
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
-    // showToolbar: false,
-    defaultParagraphSeparator: 'p',
-    customClasses: [
-      {
-        name: 'quote',
-        class: 'quote',
-      },
-      {
-        name: 'redText',
-        class: 'redText'
-      },
-      {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
-      },
-    ],
-    toolbarHiddenButtons: [
-      ['bold', 'italic'],
-      ['fontSize']
-    ]
-  };
-
-  config2: AngularEditorConfig = {
-    editable: true,
-    spellcheck: true,
-    minHeight: '5rem',
-    maxHeight: '15rem',
-    placeholder: 'Enter text here...',
-    translate: 'no',
-    sanitize: true,
-    toolbarPosition: 'bottom',
-    defaultFontName: 'Comic Sans MS',
-    defaultFontSize: '5',
-    defaultParagraphSeparator: 'p',
-    customClasses: [
-      {
-        name: 'quote',
-        class: 'quote',
-      },
-      {
-        name: 'redText',
-        class: 'redText'
-      },
-      {
-        name: 'titleText',
-        class: 'titleText',
-        tag: 'h1',
-      },
-    ]
-  };
-
-  constructor(private formBuilder: FormBuilder) {}
+  constructor() {}
 
   ngOnInit() {
-    this.form = this.formBuilder.group({
-      signature: ['', Validators.required]
-    });
-    console.log(this.htmlContent1);
-  }
-
-  onChange(event) {
-    console.log('changed');
-  }
-
-  onBlur(event) {
-    console.log('blur ' + event);
-  }
-
-  onChange2(event) {
-    console.warn(this.form.value);
+    //
   }
 }

projects/angular-editor-app/src/app/app.module.ts

@@ -5,18 +5,28 @@ import { AppComponent } from './app.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {AngularEditorModule} from '../../../angular-editor/src/lib/angular-editor.module';
+import { AppRoutingModule } from './app-routing.module';
+import { ShadowDomComponent } from './shadow-dom/shadow-dom.component';
+import { HomeComponent } from './home/home.component';
+import { NavComponent } from './nav/nav.component';
+import { ContainerComponent } from './shadow-dom/container/container.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    ShadowDomComponent,
+    HomeComponent,
+    NavComponent,
+    ContainerComponent
   ],
   imports: [
     BrowserModule,
     AngularEditorModule,
     HttpClientModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/angular-editor-app/src/app/home/home.component.html

@@ -0,0 +1,32 @@
+<app-nav></app-nav>
+
+<div class="container">
+    <h1>Angular Editor</h1>
+    <p><a href="https://github.com/kolkov/angular-editor">Get it here</a></p>
+
+    <label for="test_input">Test input </label>
+    <input id="test_input">
+    <br><br>
+    <angular-editor id="editor1" [(ngModel)]="htmlContent1" [config]="config1" (ngModelChange)="onChange($event)"
+        (blur)="onBlur($event)">
+        <ng-template #customButtons let-executeCommandFn="executeCommandFn">
+            <ae-toolbar-set>
+                <ae-button iconClass="fa fa-html5" title="Angular editor logo"
+                    (buttonClick)="executeCommandFn('insertHtml', angularEditorLogo)"></ae-button>
+            </ae-toolbar-set>
+        </ng-template>
+    </angular-editor>
+    <p class="html">
+        HTML Output: {{ htmlContent1 }}
+    </p>
+    <form [formGroup]="form">
+        <angular-editor autofocus="true" id="editor2" formControlName="signature" [config]="config2"
+            (ngModelChange)="onChange2($event)"></angular-editor>
+    </form>
+    <p>
+        Form Value: {{ form.value.signature }}
+    </p>
+    <p>
+        Form Status: {{ form.status }}
+    </p>
+</div>

projects/angular-editor-app/src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-editor-app/src/app/home/home.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AngularEditorConfig } from 'angular-editor/public-api';
+
+const ANGULAR_EDITOR_LOGO_URL = 'https://github.com/kolkov/angular-editor/master/docs/angular-editor-logo.png?raw=true'
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+  title = 'app';
+
+  form: FormGroup;
+
+  htmlContent1 = '';
+  htmlContent2 = '';
+  angularEditorLogo = `<img alt="angular editor logo" src="${ANGULAR_EDITOR_LOGO_URL}">`;
+
+  config1: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: false,
+    // toolbarPosition: 'top',
+    outline: true,
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    // showToolbar: false,
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ],
+    toolbarHiddenButtons: [
+      ['bold', 'italic'],
+      ['fontSize']
+    ]
+  };
+
+  config2: AngularEditorConfig = {
+    editable: true,
+    spellcheck: true,
+    minHeight: '5rem',
+    maxHeight: '15rem',
+    placeholder: 'Enter text here...',
+    translate: 'no',
+    sanitize: true,
+    toolbarPosition: 'bottom',
+    defaultFontName: 'Comic Sans MS',
+    defaultFontSize: '5',
+    defaultParagraphSeparator: 'p',
+    customClasses: [
+      {
+        name: 'quote',
+        class: 'quote',
+      },
+      {
+        name: 'redText',
+        class: 'redText'
+      },
+      {
+        name: 'titleText',
+        class: 'titleText',
+        tag: 'h1',
+      },
+    ]
+  };
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      signature: ['', Validators.required]
+    });
+    console.log(this.htmlContent1);
+  }
+
+  onChange(event) {
+    console.log('changed');
+  }
+
+  onBlur(event) {
+    console.log('blur ' + event);
+  }
+
+  onChange2(event) {
+    console.warn(this.form.value);
+  }
+}

projects/angular-editor-app/src/app/nav/nav.component.html

@@ -0,0 +1,4 @@
+<ul>
+    <li><a [routerLink]="'/'">Home</a></li>
+    <li><a [routerLink]="'/shadow-dom'">Shadow Dom</a></li>
+</ul>

projects/angular-editor-app/src/app/nav/nav.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});