feat(core): support standalone components (#236)

demo/app/app.component.spec.ts

@@ -5,9 +5,9 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [RouterTestingModule],
-            declarations: [AppComponent]
-        }).compileComponents();
+    imports: [RouterTestingModule],
+    declarations: [AppComponent]
+}).compileComponents();
     }));
 
     it('should create the app', () => {

demo/app/app.module.ts

@@ -23,8 +23,13 @@ import { DemoInlinesComponent } from './inlines/inlines.component';
 import { DemoElementLinkComponent } from './components/link/link.component';
 
 @NgModule({
-    declarations: [
-        AppComponent,
+    declarations: [AppComponent],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        FormsModule,
+        SlateModule,
         DemoButtonComponent,
         DemoRichtextComponent,
         DemoMarkdownShortcutsComponent,
@@ -43,7 +48,6 @@ import { DemoElementLinkComponent } from './components/link/link.component';
         DemoInlinesComponent,
         DemoElementLinkComponent
     ],
-    imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, FormsModule, SlateModule],
     providers: [],
     bootstrap: [AppComponent]
 })

demo/app/components/button/button.component.ts

@@ -16,7 +16,8 @@ import {
     template: '<ng-content></ng-content>',
     host: {
         style: 'cursor: pointer'
-    }
+    },
+    standalone: true
 })
 export class DemoButtonComponent implements OnChanges {
     @Input() active = false;

demo/app/components/editable-button/editable-button.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core';
 import { ButtonElement } from '../../../../custom-types';
 import { BaseElementComponent } from 'slate-angular';
+import { SlateChildrenComponent } from '../../../../packages/src/components/children/children.component';
 
 @Component({
     selector: 'span[demo-element-button]',
@@ -12,7 +13,9 @@ import { BaseElementComponent } from 'slate-angular';
     host: {
         class: 'demo-element-button'
     },
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [SlateChildrenComponent]
 })
 export class DemoElementEditableButtonComponent extends BaseElementComponent<ButtonElement> {
     // Put this at the start and end of an inline component to work around this Chromium bug:

demo/app/components/image/image-component.ts

@@ -1,13 +1,16 @@
 import { Component } from '@angular/core';
 import { ImageElement } from '../../../../custom-types';
 import { BaseElementComponent } from 'slate-angular';
+import { SlateChildrenComponent } from '../../../../packages/src/components/children/children.component';
 
 @Component({
     selector: 'demo-element-image',
     template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         <img [src]="element.url" alt="" [class.outline]="selection" /> `,
     host: {
         class: 'demo-element-image'
-    }
+    },
+    standalone: true,
+    imports: [SlateChildrenComponent]
 })
 export class DemoElementImageComponent extends BaseElementComponent<ImageElement> {}

demo/app/components/link/link.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, HostBinding, HostListener } from '@angular/core';
 import { LinkElement } from 'custom-types';
 import { BaseElementComponent } from 'slate-angular';
+import { SlateChildrenComponent } from '../../../../packages/src/components/children/children.component';
 
 @Component({
     selector: 'a[demo-element-link]',
@@ -9,7 +10,9 @@ import { BaseElementComponent } from 'slate-angular';
         <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
     `,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [SlateChildrenComponent]
 })
 export class DemoElementLinkComponent extends BaseElementComponent<LinkElement> {
     // Put this at the start and end of an inline component to work around this Chromium bug:

demo/app/components/text/text.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, ElementRef, Renderer2 } from '@angular/core';
 import { BaseTextComponent } from 'slate-angular';
+import { SlateLeavesComponent } from '../../../../packages/src/components/leaves/leaves.component';
 
 export enum MarkTypes {
     bold = 'bold',
@@ -14,7 +15,9 @@ export enum MarkTypes {
     template: `<slate-leaves [context]="context" [viewContext]="viewContext" [viewContext]="viewContext"></slate-leaves>`,
     host: {
         'data-slate-node': 'text'
-    }
+    },
+    standalone: true,
+    imports: [SlateLeavesComponent]
 })
 export class DemoTextMarkComponent extends BaseTextComponent {
     attributes = [];

demo/app/huge-document/huge-document.component.ts

@@ -3,10 +3,16 @@ import faker from 'faker';
 import { createEditor } from 'slate';
 import { withAngular } from 'slate-angular';
 import { take } from 'rxjs/operators';
+import { SlateElementComponent } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
+import { NgIf, NgFor } from '@angular/common';
 
 @Component({
     selector: 'demo-huge-document',
-    templateUrl: 'huge-document.component.html'
+    templateUrl: 'huge-document.component.html',
+    standalone: true,
+    imports: [NgIf, SlateEditableComponent, FormsModule, NgFor, SlateElementComponent]
 })
 export class DemoHugeDocumentComponent implements OnInit, AfterViewInit {
     mode: 'default' | 'component' = 'default';

demo/app/images/images.component.ts

@@ -3,10 +3,15 @@ import { withAngular } from 'slate-angular';
 import { createEditor, Transforms, Editor, Element } from 'slate';
 import { DemoElementImageComponent } from '../components/image/image-component';
 import { ImageElement } from '../../../custom-types';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
+import { DemoButtonComponent } from '../components/button/button.component';
 
 @Component({
     selector: 'demo-images',
-    templateUrl: 'images.component.html'
+    templateUrl: 'images.component.html',
+    standalone: true,
+    imports: [DemoButtonComponent, SlateEditableComponent, FormsModule]
 })
 export class DemoImagesComponent implements OnInit {
     value = initialValue;

demo/app/inlines/inlines.component.ts

@@ -7,10 +7,16 @@ import isUrl from 'is-url';
 import { isKeyHotkey } from 'is-hotkey';
 import { DemoElementEditableButtonComponent } from '../components/editable-button/editable-button.component';
 import { DemoElementLinkComponent } from '../components/link/link.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
+import { DemoButtonComponent } from '../components/button/button.component';
+import { NgFor } from '@angular/common';
 
 @Component({
     selector: 'demo-inlines',
-    templateUrl: 'inlines.component.html'
+    templateUrl: 'inlines.component.html',
+    standalone: true,
+    imports: [NgFor, DemoButtonComponent, SlateEditableComponent, FormsModule]
 })
 export class DemoInlinesComponent implements OnInit {
     value = initialValue;

demo/app/markdown-shorcuts/markdown-shortcuts.component.ts

@@ -3,10 +3,15 @@ import { Editor, Range, Point, Transforms, createEditor, Element } from 'slate';
 import { withHistory } from 'slate-history';
 import { withAngular } from 'slate-angular';
 import { BulletedListElement } from '../../../custom-types';
+import { SlateElementComponent } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
 
 @Component({
     selector: 'demo-markdown-shortcuts',
-    templateUrl: 'markdown-shortcuts.component.html'
+    templateUrl: 'markdown-shortcuts.component.html',
+    standalone: true,
+    imports: [SlateEditableComponent, FormsModule, SlateElementComponent]
 })
 export class DemoMarkdownShortcutsComponent implements OnInit {
     constructor() {}

demo/app/mentions/mentions.component.ts

@@ -3,10 +3,16 @@ import { Editor, Transforms, createEditor, Element, Range } from 'slate';
 import { withHistory } from 'slate-history';
 import { AngularEditor, withAngular } from 'slate-angular';
 import { MentionElement } from 'custom-types';
+import { NgClass, NgFor } from '@angular/common';
+import { SlateElementComponent } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
 
 @Component({
     selector: 'demo-mentions',
-    templateUrl: 'mentions.component.html'
+    templateUrl: 'mentions.component.html',
+    standalone: true,
+    imports: [SlateEditableComponent, FormsModule, SlateElementComponent, NgClass, NgFor]
 })
 export class DemoMentionsComponent implements OnInit {
     searchText = '';

demo/app/placeholder/placeholder.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { createEditor, Descendant, Editor, Node } from 'slate';
 import { SlatePlaceholder, withAngular } from 'slate-angular';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
 
 @Component({
     selector: 'demo-placeholder',
@@ -21,7 +23,9 @@ import { SlatePlaceholder, withAngular } from 'slate-angular';
                 [(ngModel)]="otherValue"
             ></slate-editable>
         </div>
-    `
+    `,
+    standalone: true,
+    imports: [SlateEditableComponent, FormsModule]
 })
 export class DemoPlaceholderComponent {
     constructor() {}

demo/app/readonly/readonly.component.ts

@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
 import { createEditor, Descendant } from 'slate';
 import { withAngular } from 'slate-angular';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
 
 @Component({
     selector: 'demo-readonly',
     template: `
         <div class="demo-rich-editor-wrapper">
             <slate-editable [readonly]="true" class="demo-slate-angular-editor" [editor]="editor" [(ngModel)]="value"></slate-editable>
         </div>
-    `
+    `,
+    standalone: true,
+    imports: [SlateEditableComponent, FormsModule]
 })
 export class DemoReadonlyComponent {
     constructor() {}

demo/app/richtext/richtext.component.ts

@@ -4,6 +4,11 @@ import { withHistory } from 'slate-history';
 import { withAngular } from 'slate-angular';
 import { DemoTextMarkComponent, MarkTypes } from '../components/text/text.component';
 import isHotkey from 'is-hotkey';
+import { SlateElementComponent } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
+import { DemoButtonComponent } from '../components/button/button.component';
+import { NgFor } from '@angular/common';
 
 const SLATE_DEV_MODE_KEY = 'slate-dev';
 
@@ -18,7 +23,9 @@ const LIST_TYPES = ['numbered-list', 'bulleted-list'];
 
 @Component({
     selector: 'demo-richtext',
-    templateUrl: 'richtext.component.html'
+    templateUrl: 'richtext.component.html',
+    standalone: true,
+    imports: [NgFor, DemoButtonComponent, SlateEditableComponent, FormsModule, SlateElementComponent]
 })
 export class DemoRichtextComponent implements OnInit {
     value = initialValue;

demo/app/search-highlighting/leaf.component.ts

@@ -1,9 +1,12 @@
 import { Component, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { BaseLeafComponent } from 'slate-angular';
+import { SlateStringComponent } from '../../../packages/src/components/string/string.component';
 
 @Component({
     selector: 'span[demoLeaf]',
-    template: ` <span slateString [context]="context" [viewContext]="viewContext"><span></span></span> `
+    template: ` <span slateString [context]="context" [viewContext]="viewContext"><span></span></span> `,
+    standalone: true,
+    imports: [SlateStringComponent]
 })
 export class DemoLeafComponent extends BaseLeafComponent {
     constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, private renderer: Renderer2) {

demo/app/search-highlighting/search-highlighting.component.ts

@@ -3,11 +3,15 @@ import { createEditor, NodeEntry, Text } from 'slate';
 import { withAngular } from 'slate-angular';
 import { DemoTextMarkComponent, MarkTypes } from '../components/text/text.component';
 import { DemoLeafComponent } from './leaf.component';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
+import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'demo-search-highlight',
     templateUrl: './search-highlighting.component.html',
-    styleUrls: ['./search-highlighting.component.scss']
+    styleUrls: ['./search-highlighting.component.scss'],
+    standalone: true,
+    imports: [FormsModule, SlateEditableComponent]
 })
 export class DemoSearchHighlightingComponent implements OnInit {
     keywords = '';

demo/app/tables/tables.component.ts

@@ -3,10 +3,15 @@ import { createEditor, Editor, Text, Element, Node } from 'slate';
 import { AngularEditor, DOMElement, withAngular } from 'slate-angular';
 import { MarkTypes, DemoTextMarkComponent } from '../components/text/text.component';
 import { withBlockCard } from '../plugins/block-cards.plugin';
+import { SlateElementComponent } from '../../../packages/src/components/element/element.component';
+import { FormsModule } from '@angular/forms';
+import { SlateEditableComponent } from '../../../packages/src/components/editable/editable.component';
 
 @Component({
     selector: 'demo-tables',
-    templateUrl: 'tables.component.html'
+    templateUrl: 'tables.component.html',
+    standalone: true,
+    imports: [SlateEditableComponent, FormsModule, SlateElementComponent]
 })
 export class DemoTablesComponent implements OnInit {
     value = initialValue;

packages/src/components/block-card/block-card.component.ts

@@ -2,7 +2,8 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'slate-block-card, [slateBlockCard]',
-    templateUrl: 'block-card.component.html'
+    templateUrl: 'block-card.component.html',
+    standalone: true
 })
 export class SlateBlockCardComponent implements OnInit {
     @ViewChild('centerContianer', { static: true })

packages/src/components/children/children.component.ts

@@ -4,6 +4,7 @@ import { Descendant } from 'slate';
 import { AngularEditor } from '../../plugins/angular-editor';
 import { SlateChildrenContext, SlateViewContext } from '../../view/context';
 import { ViewContainer } from '../../view/container';
+import { NgFor } from '@angular/common';
 
 @Component({
     selector: 'slate-children',
@@ -15,7 +16,9 @@ import { ViewContainer } from '../../view/container';
         [index]="index"
         *ngFor="let descendant of children; let index = index; trackBy: trackBy"
     ></slate-descendant>`,
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgFor, SlateDescendantComponent]
 })
 export class SlateChildrenComponent extends ViewContainer<SlateDescendantComponent> implements OnInit {
     @Input() children: Descendant[];

packages/src/components/descendant/descendant.component.ts

@@ -16,7 +16,8 @@ import { SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN } from '../element/default-elemen
 @Component({
     selector: 'slate-descendant',
     template: '',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true
 })
 export class SlateDescendantComponent
     extends ViewContainerItem<SlateElementContext | SlateTextContext, BaseElementComponent | BaseTextComponent>

packages/src/components/editable/editable.component.ts

@@ -55,6 +55,7 @@ import { HistoryEditor } from 'slate-history';
 import { isDecoratorRangeListEqual, check, normalize } from '../../utils';
 import { SlatePlaceholder } from '../../types/feature';
 import { restoreDom } from '../../utils/restore-dom';
+import { SlateChildrenComponent } from '../children/children.component';
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
@@ -77,7 +78,9 @@ const forceOnDOMPaste = IS_SAFARI;
             useExisting: forwardRef(() => SlateEditableComponent),
             multi: true
         }
-    ]
+    ],
+    standalone: true,
+    imports: [SlateChildrenComponent, SlateStringTemplateComponent]
 })
 export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, DoCheck {
     viewContext: SlateViewContext;