@tmdjr/ngx-editor-js2 21.0.6 → 21.0.7

package/fesm2022/tmdjr-ngx-editor-js2.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, forwardRef, HostListener, Directive, output, Component, signal, Injectable, ViewContainerRef, effect, InjectionToken, viewChild, EventEmitter, Renderer2, Output } from '@angular/core';
+import { inject, ElementRef, input, Directive, HostListener, forwardRef, output, Component, signal, Injectable, InjectionToken, ViewContainerRef, effect, viewChild, EventEmitter, Renderer2, Output } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormBuilder, FormsModule } from '@angular/forms';
-import { startWith, combineLatest, map, firstValueFrom, of, from, tap, filter, defaultIfEmpty, Observable, lastValueFrom, forkJoin, iif, switchMap, mergeMap, BehaviorSubject, distinctUntilChanged, delay, exhaustMap, merge, debounceTime, fromEvent } from 'rxjs';
-import { MatRipple } from '@angular/material/core';
+import { startWith, combineLatest, map, firstValueFrom, of, from, tap, filter, defaultIfEmpty, Observable, lastValueFrom, forkJoin, iif, switchMap, mergeMap, BehaviorSubject, delay, exhaustMap, distinctUntilChanged, merge, debounceTime, fromEvent } from 'rxjs';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { CdkDragHandle, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay } from '@angular/cdk/overlay';
+import { MatRipple } from '@angular/material/core';
 import * as i1$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { AsyncPipe, NgTemplateOutlet, NgClass } from '@angular/common';
@@ -17,6 +17,41 @@ import { MatInput } from '@angular/material/input';
 import { MatList, MatListItem, MatListModule } from '@angular/material/list';
 import { ComponentPortal } from '@angular/cdk/portal';
 
+class AutofocusDirective {
+    elementRef = inject(ElementRef);
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
+    ngAfterContentInit() {
+        this.autofocus() && this.elementRef.nativeElement.focus?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: AutofocusDirective, isStandalone: true, selector: "[autofocus]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutofocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[autofocus]',
+                }]
+        }], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }] } });
+
+class CleanPasteDataDirective {
+    onPaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain');
+        document.execCommand('insertText', false, text);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CleanPasteDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: CleanPasteDataDirective, isStandalone: true, selector: "[cleanPasteData]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CleanPasteDataDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cleanPasteData]',
+                }]
+        }], propDecorators: { onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
 class ControlAccessorDirective {
     elementRef = inject(ElementRef);
     defaultValue = input(...(ngDevMode ? [undefined, { debugName: "defaultValue" }] : []));
@@ -66,22 +101,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 args: ['input']
             }] } });
 
-class AutofocusDirective {
-    elementRef = inject(ElementRef);
-    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
-    ngAfterContentInit() {
-        this.autofocus() && this.elementRef.nativeElement.focus?.();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: AutofocusDirective, isStandalone: true, selector: "[autofocus]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutofocusDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[autofocus]',
-                }]
-        }], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }] } });
-
 var MovePositionActions;
 (function (MovePositionActions) {
     MovePositionActions["UP"] = "UP";
@@ -490,7 +509,7 @@ class EditorJsService {
             this.blockMovementService.updateComponentIndices(this.ngxEditor),
         ]).pipe(map(() => void 0));
     }
-    createFormGroupControl({ blockId, dataClean, }, emitEvent = true) {
+    createFormGroupControl({ blockId, dataClean }, emitEvent = true) {
         return of(this.formBuilder.control(dataClean, [])).pipe(tap((formControl) => this.formGroup.addControl(blockId, formControl, { emitEvent })));
     }
     attachComponent({ component, blockId, autofocus, savedAction, sortIndex: index, }) {
@@ -498,13 +517,13 @@ class EditorJsService {
             const componentRef = this.ngxEditor.createComponent(component, {
                 index,
             });
-            componentRef.location.nativeElement
-                .classList.add('ngx-editor-js2-block');
+            componentRef.location.nativeElement.classList.add('ngx-editor-js2-block');
             componentRef.setInput('sortIndex', index);
             componentRef.setInput('formGroup', this.formGroup);
             componentRef.setInput('formControlName', controlName);
             componentRef.setInput('autofocus', autofocus);
-            savedAction && componentRef.instance.actionCallback?.(savedAction, false);
+            savedAction &&
+                componentRef.instance.actionCallback?.(savedAction, false);
             this.blockMovementService.newComponentAttached(componentRef);
             return componentRef;
         }));
@@ -539,102 +558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
-class ToolFabService {
-    ngxEditorJs2Service = inject(NgxEditorJs2Service);
-    editorJsService = inject(EditorJsService);
-    // I need to explain this in detail so the future me can understand this.
-    componentContext = new BehaviorSubject(null);
-    toolbarComponentRef$ = combineLatest({
-        componentContext: this.componentContext.asObservable(),
-        supportedBlocks: this.ngxEditorJs2Service.supportedBlocks$,
-    }).pipe(filter(({ componentContext }) => componentContext !== null), distinctUntilChanged(({ componentContext: previous }, { componentContext: current }) => previous.index !== current.index ||
-        previous.viewContainerRef !== current.viewContainerRef
-        ? (previous.viewContainerRef.clear(), false)
-        : true), map(({ componentContext, supportedBlocks }) => {
-        const { index, viewContainerRef, blockOptionActions, actionCallback, formControlName, } = componentContext;
-        // TODO We will need to create a ToolbarBottomRailComponent to handle the mobile view
-        const componentRef = viewContainerRef.createComponent(ToolbarComponent);
-        componentRef.setInput('componentContextPositionIndex', index + 1);
-        componentRef.setInput('supportedBlocks', supportedBlocks);
-        componentRef.setInput('blockOptionActions', blockOptionActions);
-        componentRef.setInput('actionCallback', actionCallback);
-        componentRef.setInput('formControlName', formControlName);
-        componentRef.setInput('addBlockCallback', this.addBlock.bind(this));
-        componentRef.setInput('moveBlockPositionCallback', this.movePositionAction.bind(this));
-        return componentRef;
-    }));
-    addBlock(block, index) {
-        return this.editorJsService
-            .createNgxEditorJsBlockWithComponent(block, index)
-            .pipe(switchMap((block) => this.editorJsService.addBlockComponent(block)));
-    }
-    movePositionAction(action, index, formControlName) {
-        return lastValueFrom(this.editorJsService.determineMovePositionAction(action, index, formControlName));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class ToolbarFabDirective {
-    toolFabService = inject(ToolFabService);
-    viewContainerRef = inject(ViewContainerRef);
-    autofocus = input(...(ngDevMode ? [undefined, { debugName: "autofocus" }] : []));
-    blockOptionActions = input(...(ngDevMode ? [undefined, { debugName: "blockOptionActions" }] : []));
-    actionCallback = input.required(...(ngDevMode ? [{ debugName: "actionCallback" }] : []));
-    componentContextPositionIndex = input.required(...(ngDevMode ? [{ debugName: "componentContextPositionIndex" }] : []));
-    formControlName = input.required(...(ngDevMode ? [{ debugName: "formControlName" }] : []));
-    onMouseEnter() {
-        this.toolFabService.componentContext.next({
-            viewContainerRef: this.viewContainerRef,
-            blockOptionActions: this.blockOptionActions() ?? [],
-            actionCallback: this.actionCallback(),
-            index: this.componentContextPositionIndex(),
-            formControlName: this.formControlName(),
-        });
-    }
-    constructor() {
-        effect(() => {
-            this.autofocus() && this.onMouseEnter();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarFabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: ToolbarFabDirective, isStandalone: true, selector: "[toolbarFab]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: true, transformFunction: null }, componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarFabDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[toolbarFab]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], blockOptionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockOptionActions", required: false }] }], actionCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionCallback", required: true }] }], componentContextPositionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentContextPositionIndex", required: true }] }], formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: true }] }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }] } });
-
-class CleanPasteDataDirective {
-    onPaste(event) {
-        event.preventDefault();
-        const text = event.clipboardData?.getData('text/plain');
-        document.execCommand('insertText', false, text);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CleanPasteDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: CleanPasteDataDirective, isStandalone: true, selector: "[cleanPasteData]", host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CleanPasteDataDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cleanPasteData]',
-                }]
-        }], propDecorators: { onPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }] } });
-
 class HeaderBlockComponent {
     sortIndex = input(0, ...(ngDevMode ? [{ debugName: "sortIndex" }] : []));
     componentInstanceName = 'HeaderBlockComponent';
@@ -657,54 +580,47 @@ class HeaderBlockComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HeaderBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: HeaderBlockComponent, isStandalone: true, selector: "header-block", inputs: { sortIndex: { classPropertyName: "sortIndex", publicName: "sortIndex", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "cdk-drag-animating" }, hostDirectives: [{ directive: i1$1.CdkDrag }], ngImport: i0, template: `
-@switch (savedAction()) {
-  @case ('h1') {
+    @switch (savedAction()) { @case ('h1') {
     <h1>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h1>
-  }
-  @case ('h2') {
+    } @case ('h2') {
     <h2>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h2>
-  }
-  @case ('h3') {
+    } @case ('h3') {
     <h3>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h3>
-  }
-  @case ('h4') {
+    } @case ('h4') {
     <h4>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h4>
-  }
-  @case ('h5') {
+    } @case ('h5') {
     <h5>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h5>
-  }
-  @case ('h6') {
+    } @case ('h6') {
     <h6>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h6>
-  }
-}
+    } }
 
-<ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
-  <span
-    controlAccessor
-    cleanPasteData
-    contentEditable
-    toolbarFab
-    [defaultValue]="formGroup().get(formControlName())?.value"
-    [actionCallback]="actionCallbackBind"
-    [blockOptionActions]="blockOptionActions()"
-    [autofocus]="autofocus()"
-    [formControlName]="formControlName()"
-    [componentContextPositionIndex]="sortIndex()"
-  ></span>
-</ng-template>
-`, isInline: true, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "directive", type: CleanPasteDataDirective, selector: "[cleanPasteData]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    <ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
+      <span
+        controlAccessor
+        cleanPasteData
+        contentEditable
+        toolbarFab
+        [defaultValue]="formGroup().get(formControlName())?.value"
+        [actionCallback]="actionCallbackBind"
+        [blockOptionActions]="blockOptionActions()"
+        [autofocus]="autofocus()"
+        [formControlName]="formControlName()"
+        [componentContextPositionIndex]="sortIndex()"
+      ></span>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: ControlAccessorDirective, selector: "[controlAccessor]", inputs: ["defaultValue"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus]", inputs: ["autofocus"] }, { kind: "directive", type: ToolbarFabDirective, selector: "[toolbarFab]", inputs: ["autofocus", "blockOptionActions", "actionCallback", "componentContextPositionIndex", "formControlName"] }, { kind: "directive", type: CleanPasteDataDirective, selector: "[cleanPasteData]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HeaderBlockComponent, decorators: [{
             type: Component,
@@ -714,56 +630,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         AutofocusDirective,
                         ToolbarFabDirective,
                         CleanPasteDataDirective,
-                        NgTemplateOutlet
+                        NgTemplateOutlet,
                     ], template: `
-@switch (savedAction()) {
-  @case ('h1') {
+    @switch (savedAction()) { @case ('h1') {
     <h1>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h1>
-  }
-  @case ('h2') {
+    } @case ('h2') {
     <h2>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h2>
-  }
-  @case ('h3') {
+    } @case ('h3') {
     <h3>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h3>
-  }
-  @case ('h4') {
+    } @case ('h4') {
     <h4>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h4>
-  }
-  @case ('h5') {
+    } @case ('h5') {
     <h5>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h5>
-  }
-  @case ('h6') {
+    } @case ('h6') {
     <h6>
       <ng-container *ngTemplateOutlet="sharedHeaderTemplate"></ng-container>
     </h6>
-  }
-}
+    } }
 
-<ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
-  <span
-    controlAccessor
-    cleanPasteData
-    contentEditable
-    toolbarFab
-    [defaultValue]="formGroup().get(formControlName())?.value"
-    [actionCallback]="actionCallbackBind"
-    [blockOptionActions]="blockOptionActions()"
-    [autofocus]="autofocus()"
-    [formControlName]="formControlName()"
-    [componentContextPositionIndex]="sortIndex()"
-  ></span>
-</ng-template>
-`, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"] }]
+    <ng-template [formGroup]="formGroup()" #sharedHeaderTemplate>
+      <span
+        controlAccessor
+        cleanPasteData
+        contentEditable
+        toolbarFab
+        [defaultValue]="formGroup().get(formControlName())?.value"
+        [actionCallback]="actionCallbackBind"
+        [blockOptionActions]="blockOptionActions()"
+        [autofocus]="autofocus()"
+        [formControlName]="formControlName()"
+        [componentContextPositionIndex]="sortIndex()"
+      ></span>
+    </ng-template>
+  `, styles: [":host{display:block;position:relative}:host :is(h1,h2,h3,h4,h5,h6){margin:0}:host :is(h1,h2,h3,h4,h5,h6) span{display:block;line-height:inherit}:host h1>*{font:var(--mat-sys-display-large)}:host h2>*{font:var(--mat-sys-display-medium)}:host h3>*{font:var(--mat-sys-display-small)}:host h4>*{font:var(--mat-sys-headline-large)}:host h5>*{font:var(--mat-sys-headline-medium)}:host h6>*{font:var(--mat-sys-headline-small)}\n"] }]
         }], propDecorators: { sortIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortIndex", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: true }] }], blockOptionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockOptionActions", required: false }] }] } });
 
 class ParagraphBlockComponent {
@@ -908,6 +817,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
+class ToolFabService {
+    ngxEditorJs2Service = inject(NgxEditorJs2Service);
+    editorJsService = inject(EditorJsService);
+    // I need to explain this in detail so the future me can understand this.
+    componentContext = new BehaviorSubject(null);
+    toolbarComponentRef$ = combineLatest({
+        componentContext: this.componentContext.asObservable(),
+        supportedBlocks: this.ngxEditorJs2Service.supportedBlocks$,
+    }).pipe(filter(({ componentContext }) => componentContext !== null), distinctUntilChanged(({ componentContext: previous }, { componentContext: current }) => previous.index !== current.index ||
+        previous.viewContainerRef !== current.viewContainerRef
+        ? (previous.viewContainerRef.clear(), false)
+        : true), map(({ componentContext, supportedBlocks }) => {
+        const { index, viewContainerRef, blockOptionActions, actionCallback, formControlName, } = componentContext;
+        // TODO We will need to create a ToolbarBottomRailComponent to handle the mobile view
+        const componentRef = viewContainerRef.createComponent(ToolbarComponent);
+        componentRef.setInput('componentContextPositionIndex', index + 1);
+        componentRef.setInput('supportedBlocks', supportedBlocks);
+        componentRef.setInput('blockOptionActions', blockOptionActions);
+        componentRef.setInput('actionCallback', actionCallback);
+        componentRef.setInput('formControlName', formControlName);
+        componentRef.setInput('addBlockCallback', this.addBlock.bind(this));
+        componentRef.setInput('moveBlockPositionCallback', this.movePositionAction.bind(this));
+        return componentRef;
+    }));
+    addBlock(block, index) {
+        return this.editorJsService
+            .createNgxEditorJsBlockWithComponent(block, index)
+            .pipe(switchMap((block) => this.editorJsService.addBlockComponent(block)));
+    }
+    movePositionAction(action, index, formControlName) {
+        return lastValueFrom(this.editorJsService.determineMovePositionAction(action, index, formControlName));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolFabService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ToolbarFabDirective {
+    toolFabService = inject(ToolFabService);
+    viewContainerRef = inject(ViewContainerRef);
+    autofocus = input(...(ngDevMode ? [undefined, { debugName: "autofocus" }] : []));
+    blockOptionActions = input(...(ngDevMode ? [undefined, { debugName: "blockOptionActions" }] : []));
+    actionCallback = input.required(...(ngDevMode ? [{ debugName: "actionCallback" }] : []));
+    componentContextPositionIndex = input.required(...(ngDevMode ? [{ debugName: "componentContextPositionIndex" }] : []));
+    formControlName = input.required(...(ngDevMode ? [{ debugName: "formControlName" }] : []));
+    onMouseEnter() {
+        this.toolFabService.componentContext.next({
+            viewContainerRef: this.viewContainerRef,
+            blockOptionActions: this.blockOptionActions() ?? [],
+            actionCallback: this.actionCallback(),
+            index: this.componentContextPositionIndex(),
+            formControlName: this.formControlName(),
+        });
+    }
+    constructor() {
+        effect(() => {
+            this.autofocus() && this.onMouseEnter();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarFabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: ToolbarFabDirective, isStandalone: true, selector: "[toolbarFab]", inputs: { autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, blockOptionActions: { classPropertyName: "blockOptionActions", publicName: "blockOptionActions", isSignal: true, isRequired: false, transformFunction: null }, actionCallback: { classPropertyName: "actionCallback", publicName: "actionCallback", isSignal: true, isRequired: true, transformFunction: null }, componentContextPositionIndex: { classPropertyName: "componentContextPositionIndex", publicName: "componentContextPositionIndex", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ToolbarFabDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[toolbarFab]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], blockOptionActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockOptionActions", required: false }] }], actionCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionCallback", required: true }] }], componentContextPositionIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentContextPositionIndex", required: true }] }], formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: true }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
+
 class EditorJsComponent {
     editorJsService = inject(EditorJsService);
     ngxEditorJs2Service = inject(NgxEditorJs2Service);
@@ -920,11 +906,13 @@ class EditorJsComponent {
         });
     }
     drop(event) {
-        void lastValueFrom(this.editorJsService.moveBlockComponentPosition(event.previousIndex, event.currentIndex).pipe(tap(() => this.editorJsService.formGroup.updateValueAndValidity())));
+        void lastValueFrom(this.editorJsService
+            .moveBlockComponentPosition(event.previousIndex, event.currentIndex)
+            .pipe(tap(() => this.editorJsService.formGroup.updateValueAndValidity())));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditorJsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: EditorJsComponent, isStandalone: true, selector: "editor-js", inputs: { bootstrapEditorJs: { classPropertyName: "bootstrapEditorJs", publicName: "bootstrapEditorJs", isSignal: true, isRequired: false, transformFunction: null }, blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "ngxEditor", first: true, predicate: ["ngxEditor"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
-    <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)" >
+    <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
       <ng-container #ngxEditor></ng-container>
     </div>
   `, isInline: true, styles: [":host{display:block}:host .block-list{min-height:60px}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }] });
@@ -932,7 +920,7 @@ class EditorJsComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditorJsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'editor-js', imports: [CdkDropList], template: `
-    <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)" >
+    <div cdkDropList class="block-list" (cdkDropListDropped)="drop($event)">
       <ng-container #ngxEditor></ng-container>
     </div>
   `, styles: [":host{display:block}:host .block-list{min-height:60px}\n"] }]
@@ -1133,7 +1121,9 @@ class NgxEditorJs2Component {
     editorJsService = inject(EditorJsService);
     ngxEditorJs2Service = inject(NgxEditorJs2Service);
     constructor() {
-        this.editorJsService.formGroup.valueChanges.pipe(takeUntilDestroyed(), debounceTime(500), switchMap(() => this.editorJsService.getBlocks$()), tap((blocks) => this.formChanged.emit(blocks))).subscribe();
+        this.editorJsService.formGroup.valueChanges
+            .pipe(takeUntilDestroyed(), debounceTime(500), switchMap(() => this.editorJsService.getBlocks$()), tap((blocks) => this.formChanged.emit(blocks)))
+            .subscribe();
     }
     blocks = input([], ...(ngDevMode ? [{ debugName: "blocks" }] : []));
     // Allows the parent component to request the current blocks
@@ -1144,7 +1134,7 @@ class NgxEditorJs2Component {
     bootstrapEditorJs$ = combineLatest([
         inject(ToolFabService).toolbarComponentRef$,
         this.ngxEditorJs2Service.loadBlocks$,
-        fromEvent(document, 'selectionchange').pipe(debounceTime(200), switchMap((event) => this.inlineToolbarSerivce.determineToDisplayInlineToolbarBlock(event)))
+        fromEvent(document, 'selectionchange').pipe(debounceTime(200), switchMap((event) => this.inlineToolbarSerivce.determineToDisplayInlineToolbarBlock(event))),
     ]);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgxEditorJs2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: NgxEditorJs2Component, isStandalone: true, selector: "ngx-editor-js2", inputs: { blocks: { classPropertyName: "blocks", publicName: "blocks", isSignal: true, isRequired: false, transformFunction: null }, requestBlocks: { classPropertyName: "requestBlocks", publicName: "requestBlocks", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { blocksRequested: "blocksRequested", formChanged: "formChanged" }, ngImport: i0, template: `