feat(core): add default string component

.changeset/dry-foxes-invite.md

@@ -0,0 +1,5 @@
+---
+'slate-angular': minor
+---
+
+add default string component

packages/src/components/leaves/leaves.component.ts

@@ -22,7 +22,7 @@ import { isDecoratorRangeListEqual } from '../../utils/range-list';
         [viewContext]="viewContext"
         [viewContext]="viewContext"
         *ngFor="let context of leafContexts; trackBy: trackBy"
-    ></slate-leaf> `,
+    ></slate-leaf>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SlateLeavesComponent extends ViewContainer<SlateLeafComponent> implements OnInit, AfterViewInit, OnChanges {

packages/src/components/string/default-string.component.ts

@@ -0,0 +1,32 @@
+import {
+    Component,
+    OnInit,
+    ChangeDetectionStrategy,
+    ElementRef,
+    ChangeDetectorRef
+} from '@angular/core';
+import { SlateStringContext } from '../../view/context';
+import { BaseComponent } from '../../view/base';
+
+@Component({
+    selector: 'span[slateDefaultString]',
+    template: '',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SlateDefaultStringComponent extends BaseComponent<SlateStringContext> implements OnInit {
+    constructor(public elementRef: ElementRef<any>, public cdr: ChangeDetectorRef) {
+        super(elementRef, cdr);
+    }
+
+    onContextChange(): void {
+        // Avoid breaking some browser default behaviors, such as spellCheck, android composition input state
+        if (this.nativeElement.innerText !== this.context.text) {
+            this.nativeElement.innerText = this.context.text;
+        }
+    }
+
+    ngOnInit(): void {
+        this.nativeElement.setAttribute('editable-text', '');
+        this.nativeElement.setAttribute('data-slate-string', 'true');
+    }
+}

packages/src/components/string/string.component.ts

@@ -3,6 +3,7 @@ import { Editor, Path, Node } from 'slate';
 import { ViewContainerItem } from '../../view/container-item';
 import { SlateLeafContext, SlateStringContext } from '../../view/context';
 import { AngularEditor } from '../../plugins/angular-editor';
+import { SlateDefaultStringComponent } from './default-string.component';
 
 @Component({
     selector: 'span[slateString]',
@@ -66,7 +67,7 @@ export class SlateStringComponent extends ViewContainerItem<SlateStringContext>
             return this.viewContext.templateComponent.compatStringTemplate;
         }
 
-        return this.viewContext.templateComponent.stringTemplate;
+        return SlateDefaultStringComponent;
     }
 
     getContext(): SlateStringContext {

packages/src/components/string/template.component.html

@@ -1,6 +1,3 @@
-<ng-template #stringTemplate let-context="context" let-viewContext="viewContext">
-  <span editable-text data-slate-string="true">{{ context.text }}</span>
-</ng-template>
 <ng-template #compatStringTemplate let-context="context" let-viewContext="viewContext">
   <!-- Compatible with Chinese input in Chrome with \n -->
   <span editable-text data-slate-string="true"

packages/src/components/string/template.component.ts

@@ -6,9 +6,6 @@ import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@ang
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SlateStringTemplateComponent {
-    @ViewChild('stringTemplate', { read: TemplateRef, static: true })
-    stringTemplate: TemplateRef<any>;
-
     @ViewChild('compatStringTemplate', { read: TemplateRef, static: true })
     compatStringTemplate: TemplateRef<any>;
 

packages/src/module.ts

@@ -14,6 +14,7 @@ import { SlateLeafComponent } from './components/leaf/leaf.component';
 import { SlateDefaultLeafComponent } from './components/leaf/default-leaf.component';
 import { SlateLeavesComponent } from './components/leaves/leaves.component';
 import { SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN } from './components/element/default-element.component.token';
+import { SlateDefaultStringComponent } from './components/string/default-string.component';
 
 @NgModule({
     declarations: [
@@ -29,10 +30,18 @@ import { SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN } from './components/element/defa
         SlateBlockCardComponent,
         SlateLeafComponent,
         SlateLeavesComponent,
-        SlateDefaultLeafComponent
+        SlateDefaultLeafComponent,
+        SlateDefaultStringComponent
     ],
     imports: [CommonModule],
-    exports: [SlateEditableComponent, SlateChildrenComponent, SlateElementComponent, SlateLeavesComponent, SlateStringComponent],
+    exports: [
+        SlateEditableComponent,
+        SlateChildrenComponent,
+        SlateElementComponent,
+        SlateLeavesComponent,
+        SlateStringComponent,
+        SlateDefaultStringComponent
+    ],
     providers: [
         {
             provide: SLATE_DEFAULT_ELEMENT_COMPONENT_TOKEN,