Demos

demo/app/app-routing.module.ts

@@ -10,6 +10,8 @@ import { DemoMentionsComponent } from './mentions/mentions.component';
 import { DemoReadonlyComponent } from './readonly/readonly.component';
 import { DemoPlaceholderComponent } from './placeholder/placeholder.component';
 import { DemoInlinesComponent } from './inlines/inlines.component';
+import { DemoEditableVoidsComponent } from './editable-voids/editable-voids.component';
+import { DemoEmbedsComponent } from './embeds/embeds.component';
 
 const routes: Routes = [
     {
@@ -51,6 +53,14 @@ const routes: Routes = [
     {
         path: 'placeholder',
         component: DemoPlaceholderComponent
+    },
+    {
+        path: 'editable-voids',
+        component: DemoEditableVoidsComponent
+    },
+    {
+        path: 'embeds',
+        component: DemoEmbedsComponent
     }
 ];
 @NgModule({

demo/app/app.component.ts

@@ -5,7 +5,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
     providers: []
 })
 export class AppComponent implements OnInit {
-    menus = [
+    menus: Array<{ url: string; name: string }> = [
         {
             url: '/readonly',
             name: 'Readonly'
@@ -45,6 +45,14 @@ export class AppComponent implements OnInit {
         {
             url: '/placeholder',
             name: 'Placeholder'
+        },
+        {
+            url: '/editable-voids',
+            name: 'Editable voids'
+        },
+        {
+            url: '/embeds',
+            name: 'Embeds'
         }
     ];
 

demo/app/app.module.ts

@@ -21,6 +21,8 @@ import { DemoPlaceholderComponent } from './placeholder/placeholder.component';
 import { DemoElementEditableButtonComponent } from './components/editable-button/editable-button.component';
 import { DemoInlinesComponent } from './inlines/inlines.component';
 import { DemoElementLinkComponent } from './components/link/link.component';
+import { DemoEditableVoidsComponent } from './editable-voids/editable-voids.component';
+import { DemoEmbedsComponent } from './embeds/embeds.component';
 
 @NgModule({
     declarations: [AppComponent],
@@ -46,7 +48,9 @@ import { DemoElementLinkComponent } from './components/link/link.component';
         DemoPlaceholderComponent,
         DemoElementEditableButtonComponent,
         DemoInlinesComponent,
-        DemoElementLinkComponent
+        DemoElementLinkComponent,
+        DemoEditableVoidsComponent,
+        DemoEmbedsComponent
     ],
     providers: [],
     bootstrap: [AppComponent]

demo/app/components/editable-void/editable-void.component.html

@@ -0,0 +1,35 @@
+<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+<div contenteditable="false">
+  <div class="box">
+    <h4>Name:</h4>
+    <div class="input">
+      <input
+        type="text"
+        [value]="inputValue"
+        (change)="setInputValue($event)"
+      />
+    </div>
+    <h4>Left or right handed</h4>
+    <label>
+      <input
+      class="unsetWith"
+      type="radio"
+      name="handedness"
+      value="left"
+      />
+      Left
+    </label>
+    <br>
+    <label>
+      <input
+        class="unsetWith"
+        type="radio"
+        name="handedness"
+        value="right"
+      />
+      Right
+    </label>
+    <h4>Tell us about yourself:</h4>
+    <demo-richtext />
+  </div>
+</div>

demo/app/components/editable-void/editable-void.component.scss

@@ -0,0 +1,24 @@
+:host {
+    .box {
+        box-shadow: 0 0 0 3px;
+        padding: 8px;
+    }
+
+    .input {
+        margin: 8px 0;
+
+        color: #ccc;
+        border: 2px solid #ccc;
+        border-radius: 4px;
+
+        input {
+            border: none;
+            outline: none;
+            background-color: transparent;
+        }
+    }
+
+    .unsetWidth {
+        width: unset;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoRichtextComponent } from 'demo/app/richtext/richtext.component';
+import { BaseElementComponent, SlateChildren } from 'slate-angular';
+import { EditableVoidElement } from 'custom-types';
+
+@Component({
+  selector: 'demo-editable-void',
+  standalone: true,
+  imports: [CommonModule, DemoRichtextComponent, SlateChildren],
+  templateUrl: './editable-void.component.html',
+  styleUrls: ['./editable-void.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DemoElementEditableVoid extends BaseElementComponent<EditableVoidElement>{
+    inputValue: string = ''
+
+    setInputValue(event: Event) {
+        this.inputValue = (event.target as HTMLInputElement).value
+    }
+}

demo/app/components/video/video.component.html

@@ -0,0 +1,17 @@
+<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+<div contenteditable="false">
+  <div style="padding: 75% 0 0 0; position: relative">
+    <iframe
+      [src]="url"
+      [frameBorder]="0"
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    ></iframe>
+  </div>
+
+  <input
+    [value]="element.url"
+    (click)="$event.stopPropagation()"
+    style="margin-top: 5px; box-sizing: border-box; width: 100%; margin-top: 1em;"
+    (change)="inputChange($event)"
+  />
+</div>

demo/app/components/video/video.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Element as SlateElement, Transforms } from 'slate';
+import { AngularEditor, BaseElementComponent, SlateChildren } from 'slate-angular';
+import { VideoElement } from 'custom-types';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'demo-video',
+  standalone: true,
+  imports: [CommonModule, SlateChildren],
+  templateUrl: './video.component.html',
+  styleUrls: ['./video.component.scss'],
+})
+export class DemoElementVideoComponent extends BaseElementComponent<VideoElement> {
+    constructor(private sanitizer: DomSanitizer, elementRef: ElementRef, cdr: ChangeDetectorRef) {
+        super(elementRef, cdr);
+    }
+
+    get url(): SafeUrl {
+        console.log(this.element.url)
+        return this.element.url ? this.sanitizer.bypassSecurityTrustResourceUrl(this.element.url + '?title=0&byline=0&portrait=0') : ''
+    }
+
+    inputChange(event: Event) {
+        const newUrl = (event.target as HTMLInputElement).value;
+        const path = AngularEditor.findPath(this.editor, this.element);
+        const newProperties: Partial<SlateElement> = {
+            url: newUrl
+        }
+        Transforms.setNodes<SlateElement>(this.editor, newProperties, {
+            at: path
+        })
+    }
+}

demo/app/editable-voids/editable-voids.component.html

@@ -0,0 +1,15 @@
+<div class="demo-rich-editor-wrapper">
+  <div class="demo-global-toolbar">
+    <demo-button *ngFor="let toolbarItem of toolbarItems" [active]="toolbarItem.active()" (onMouseDown)="toolbarItem.action($event)"
+      ><span class="material-icons">{{ toolbarItem.icon }}</span></demo-button
+    >
+  </div>
+  <slate-editable
+    class="demo-slate-angular-editor"
+    [editor]="editor"
+    [(ngModel)]="value"
+    [renderElement]="renderElement"
+    placeholder="Enter some text..."
+  >
+  </slate-editable>
+</div>

demo/app/editable-voids/editable-voids.component.scss

@@ -0,0 +1,5 @@
+:host {
+    [data-slate-editor]> * + * {
+        margin-top: 1em;
+    }
+}

demo/app/editable-voids/editable-voids.component.ts

@@ -0,0 +1,85 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Descendant, Editor, Element as SlateElement, Text, Transforms, createEditor } from 'slate';
+import { SlateEditable, withAngular } from 'slate-angular';
+import { withHistory } from 'slate-history';
+import { DemoButtonComponent } from '../components/button/button.component';
+import { NgFor } from '@angular/common';
+import { EditableVoidElement } from 'custom-types';
+import { DemoElementEditableVoid } from '../components/editable-void/editable-void.component';
+
+interface ToolbarItem {
+    icon: string;
+    active: () => boolean;
+    action: (event: Event) => void;
+}
+
+@Component({
+  selector: 'demo-editable-voids',
+  templateUrl: './editable-voids.component.html',
+  styleUrls: ['./editable-voids.component.scss'],
+  standalone: true,
+  imports: [NgFor, SlateEditable, FormsModule, DemoButtonComponent]
+})
+export class DemoEditableVoidsComponent {
+    value = initialValue
+
+    editor = withEditableVoids(withHistory(withAngular(createEditor())));
+
+    toolbarItems: Array<ToolbarItem> = [
+        {
+            icon: 'add',
+            active: () => true,
+            action: event => {
+                event.preventDefault()
+                const text: Text = { text: '' }
+                const voidNode: EditableVoidElement = {
+                    type: 'editable-void',
+                    children: [text]
+                }
+                Transforms.insertNodes(this.editor, voidNode);
+            }
+
+        }
+    ]
+
+    renderElement = (element: SlateElement) => {
+        if (element.type === 'editable-void') {
+            return DemoElementEditableVoid;
+        }
+        return null
+    }
+}
+
+const withEditableVoids = (editor: Editor) => {
+    const { isVoid } = editor
+
+    editor.isVoid = element => {
+        return element.type === 'editable-void' || isVoid(element)
+    }
+
+    return editor
+}
+
+const initialValue: Descendant[] = [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'In addition to nodes that contain editable text, you can insert void nodes, which can also contain editable elements, inputs, or an entire other Slate editor.',
+        },
+      ],
+    },
+    {
+      type: 'editable-void',
+      children: [{ text: '' }],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+      ],
+    },
+  ]

demo/app/embeds/embeds.component.html

@@ -0,0 +1,10 @@
+<div class="demo-rich-editor-wrapper">
+  <slate-editable
+    class="demo-slate-angular-editor"
+    [editor]="editor"
+    [(ngModel)]="value"
+    [renderElement]="renderElement"
+    placeholder="Enter some text..."
+  >
+  </slate-editable>
+</div>

demo/app/embeds/embeds.component.ts

@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Descendant, Editor, createEditor, Element as SlateElement } from 'slate';
+import { SlateEditable, withAngular } from 'slate-angular';
+import { DemoElementVideoComponent } from '../components/video/video.component';
+
+@Component({
+  selector: 'demo-embeds',
+  templateUrl: './embeds.component.html',
+  styleUrls: ['./embeds.component.scss'],
+  standalone: true,
+  imports: [SlateEditable, FormsModule]
+})
+export class DemoEmbedsComponent {
+    value = initialValue
+
+    editor = withEmbed(withAngular(createEditor()))
+
+    renderElement = (element: SlateElement) => {
+        if (element.type === 'video') {
+            return DemoElementVideoComponent;
+        }
+        return null
+    }
+}
+
+const withEmbed = (editor: Editor) => {
+    const { isVoid } = editor
+
+    editor.isVoid = element => element.type === 'video' || isVoid(element)
+
+    return editor
+}
+
+const initialValue: Descendant[] = [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'In addition to simple image nodes, you can actually create complex embedded nodes. For example, this one contains an input element that lets you change the video being rendered!',
+        },
+      ],
+    },
+    {
+      type: 'video',
+      url: 'https://player.vimeo.com/video/26689853',
+      children: [{ text: '' }],
+    },
+    {
+      type: 'paragraph',
+      children: [
+        {
+          text: 'Try it out! This editor is built to handle Vimeo embeds, but you could handle any type.',
+        },
+      ],
+    },
+  ]

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild, TemplateRef, AfterViewInit, NgZone } from '@angular/core';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 import { createEditor } from 'slate';
 import { withAngular } from 'slate-angular';
 import { take } from 'rxjs/operators';