slate-angular 15.1.0-next.1 → 15.1.0-next.2

package/fesm2020/slate-angular.mjs

@@ -3,6 +3,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { TemplateRef, Component, ChangeDetectionStrategy, ViewChild, Directive, Input, HostBinding, ViewChildren, InjectionToken, Inject, forwardRef, ElementRef, NgModule } from '@angular/core';
 import getDirection from 'direction';
+import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HistoryEditor } from 'slate-history';
@@ -2601,6 +2602,7 @@ class SlateEditableComponent {
         this.onTouchedCallback = () => { };
         this.onChangeCallback = () => { };
         this.decorate = () => [];
+        this.scrollSelectionIntoView = defaultScrollSelectionIntoView;
         this.isStrictDecorate = true;
         this.trackBy = () => null;
         this.readonly = false;
@@ -2766,6 +2768,7 @@ class SlateEditableComponent {
             else {
                 domSelection.removeAllRanges();
             }
+            this.scrollSelectionIntoView(this.editor, newDomRange);
             setTimeout(() => {
                 // COMPAT: In Firefox, it's not enough to create a range, you also need
                 // to focus the contenteditable element too. (2016/11/16)
@@ -3567,7 +3570,7 @@ class SlateEditableComponent {
     }
 }
 SlateEditableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: SlateEditableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlateEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
+SlateEditableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.4", type: SlateEditableComponent, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SlateEditableComponent),
@@ -3602,6 +3605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], placeholderDecorate: [{
                 type: Input
+            }], scrollSelectionIntoView: [{
+                type: Input
             }], isStrictDecorate: [{
                 type: Input
             }], trackBy: [{
@@ -3660,6 +3665,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: ViewChild,
                 args: ['templateComponent', { static: true, read: ElementRef }]
             }] } });
+const defaultScrollSelectionIntoView = (editor, domRange) => {
+    // This was affecting the selection of multiple blocks and dragging behavior,
+    // so enabled only if the selection has been collapsed.
+    if (domRange.getBoundingClientRect && (!editor.selection || (editor.selection && Range.isCollapsed(editor.selection)))) {
+        const leafEl = domRange.startContainer.parentElement;
+        leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
+        scrollIntoView(leafEl, {
+            scrollMode: 'if-needed'
+        });
+        delete leafEl.getBoundingClientRect;
+    }
+};
 /**
  * Check if the target is editable and in the editor.
  */