slate-angular 15.1.0-next.3 → 15.1.0

package/fesm2020/slate-angular.mjs

@@ -807,7 +807,7 @@ const AngularEditor = {
     getCardCursorNode(editor, blockCardNode, options) {
         const blockCardElement = AngularEditor.toDOMNode(editor, blockCardNode);
         const cardCenter = blockCardElement.parentElement;
-        return options.direction === 'left' ? cardCenter.previousElementSibling : cardCenter.nextElementSibling;
+        return options.direction === 'left' ? cardCenter.previousElementSibling.firstChild : cardCenter.nextElementSibling.firstChild;
     },
     toSlateCardEntry(editor, node) {
         const element = node.parentElement.closest('.slate-block-card')?.querySelector('[card-target="card-center"]').firstElementChild;
@@ -2102,7 +2102,13 @@ class SlateDefaultStringComponent extends BaseComponent {
     beforeContextChange(value) {
         if (this.context) {
             if (this.context.type === 'lineBreakEmptyString') {
-                this.removeLineBreakEmptyStringDOM();
+                if (value.type === 'string') {
+                    this.removeLineBreakEmptyStringDOM();
+                }
+                else {
+                    this.textNode?.remove();
+                    this.brNode?.remove();
+                }
             }
             if (this.context.type === 'string') {
                 if (value.type === 'lineBreakEmptyString') {
@@ -2691,7 +2697,7 @@ class SlateEditableComponent {
         this.initializeViewContext();
         this.initializeContext();
         // remove unused DOM, just keep templateComponent instance
-        // this.templateElementRef.nativeElement.remove();
+        this.templateElementRef.nativeElement.remove();
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
@@ -2750,6 +2756,7 @@ class SlateEditableComponent {
         this.addEventListener('blur', this.onDOMBlur.bind(this));
         this.addEventListener('click', this.onDOMClick.bind(this));
         this.addEventListener('compositionend', this.onDOMCompositionEnd.bind(this));
+        this.addEventListener('compositionupdate', this.onDOMCompositionUpdate.bind(this));
         this.addEventListener('compositionstart', this.onDOMCompositionStart.bind(this));
         this.addEventListener('copy', this.onDOMCopy.bind(this));
         this.addEventListener('cut', this.onDOMCut.bind(this));
@@ -3218,6 +3225,24 @@ class SlateEditableComponent {
             }
         }
     }
+    onDOMCompositionStart(event) {
+        const { selection } = this.editor;
+        if (selection) {
+            // solve the problem of cross node Chinese input
+            if (Range.isExpanded(selection)) {
+                Editor.deleteFragment(this.editor);
+                this.forceFlush();
+            }
+        }
+        if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
+            this.isComposing = true;
+        }
+        this.detectContext();
+        this.cdr.detectChanges();
+    }
+    onDOMCompositionUpdate(event) {
+        this.isDOMEventHandled(event, this.compositionUpdate);
+    }
     onDOMCompositionEnd(event) {
         if (!event.data && !Range.isCollapsed(this.editor.selection)) {
             Transforms.delete(this.editor);
@@ -3238,21 +3263,6 @@ class SlateEditableComponent {
         this.detectContext();
         this.cdr.detectChanges();
     }
-    onDOMCompositionStart(event) {
-        const { selection } = this.editor;
-        if (selection) {
-            // solve the problem of cross node Chinese input
-            if (Range.isExpanded(selection)) {
-                Editor.deleteFragment(this.editor);
-                this.forceFlush();
-            }
-        }
-        if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
-            this.isComposing = true;
-        }
-        this.detectContext();
-        this.cdr.detectChanges();
-    }
     onDOMCopy(event) {
         const window = AngularEditor.getWindow(this.editor);
         const isOutsideSlate = !hasStringTarget(window.getSelection()) && isTargetInsideVoid(this.editor, event.target);
@@ -3626,7 +3636,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", 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: [
+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", compositionUpdate: "compositionUpdate", 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),
@@ -3679,6 +3689,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
                 type: Input
             }], compositionEnd: [{
                 type: Input
+            }], compositionUpdate: [{
+                type: Input
             }], compositionStart: [{
                 type: Input
             }], copy: [{
@@ -3889,5 +3901,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildrenComponent, SlateDefaultStringComponent, SlateEditableComponent, SlateElementComponent, SlateErrorCode, SlateLeavesComponent, SlateModule, SlateStringComponent, check, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseLeafComponent, BaseTextComponent, DOMComment, DOMElement, DOMNode, DOMRange, DOMSelection, DOMStaticRange, DOMText, EDITOR_TO_ELEMENT, EDITOR_TO_ON_CHANGE, EDITOR_TO_PLACEHOLDER, EDITOR_TO_WINDOW, ELEMENT_TO_COMPONENT, ELEMENT_TO_NODE, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_CLICKING, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_FOCUSED, IS_IOS, IS_QQBROWSER, IS_READONLY, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, KEY_TO_ELEMENT, Key, NODE_TO_ELEMENT, NODE_TO_INDEX, NODE_TO_KEY, NODE_TO_PARENT, PLACEHOLDER_SYMBOL, SlateChildrenComponent, SlateDefaultStringComponent, SlateEditableComponent, SlateElementComponent, SlateErrorCode, SlateLeavesComponent, SlateModule, SlateStringComponent, check, defaultScrollSelectionIntoView, getCardTargetAttribute, getClipboardData, getDefaultView, getEditableChild, getEditableChildAndIndex, getPlainText, getSlateFragmentAttribute, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hasEditableTarget, hasShadowRoot, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isComponentType, isDOMComment, isDOMElement, isDOMNode, isDOMSelection, isDOMText, isDecoratorRangeListEqual, isPlainTextOnlyPaste, isTemplateRef, isValid, normalize, normalizeDOMPoint, shallowCompare, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map