refactor(view): refactor block-card logic and api

worktile · Jun 9, 2021 · 315bfbb · 315bfbb
1 parent 1a51bc9
commit 315bfbb
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 60 deletions.
diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
@@ -43,8 +43,8 @@ import { SlateStringTemplateComponent } from '../string/template.component';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SlateChildrenContext, SlateViewContext } from '../../view/context';
 import { ViewType } from '../../types/view';
-import { isDecoratorRangeListEqual } from '../../utils';
 import { HistoryEditor } from 'slate-history';
+import { isDecoratorRangeListEqual } from '../../utils';
 
 const timeDebug = Debug('slate-time');
 // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
@@ -548,14 +548,6 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
                         if (data instanceof DataTransfer) {
                             AngularEditor.insertData(editor, data);
                         } else if (typeof data === 'string') {
-                            // block card
-                            const window = AngularEditor.getWindow(editor)
-                            const domSelection = window.getSelection();
-                            const isBlockCard = AngularEditor.hasCardTarget(domSelection.anchorNode) ||
-                                AngularEditor.hasCardTarget(domSelection.focusNode);
-                            if (isBlockCard) {
-                                return;
-                            }
                             Editor.insertText(editor, data);
                         }
                         break;
@@ -664,24 +656,12 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
     private onDOMCompositionStart(event: CompositionEvent) {
         const { selection } = this.editor;
 
-        const domSelection = window.getSelection();
-        const cardTargetAttr = AngularEditor.getCardTargetAttribute(domSelection.anchorNode);
-        const cardTarget = domSelection.anchorNode;
-
         if (selection) {
             // solve the problem of cross node Chinese input
             if (Range.isExpanded(selection)) {
                 Editor.deleteFragment(this.editor);
                 this.forceFlush();
             }
-            // 当光标是块级光标时，输入中文前需要强制移动选区
-            if (cardTargetAttr) {
-                const cardEntry = AngularEditor.toSlateCardEntry(this.editor, cardTarget);
-                const isCardLeft = AngularEditor.isCardLeftByTargetAttr(cardTargetAttr);
-                const point = isCardLeft ? Editor.before(this.editor, cardEntry[1]) : Editor.after(this.editor, cardEntry[1]);
-                Transforms.select(this.editor, point);
-                this.forceFlush();
-            }
         }
         if (hasEditableTarget(this.editor, event.target) && !this.isDOMEventHandled(event, this.compositionStart)) {
             this.isComposing = true;
@@ -1068,13 +1048,6 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
                 if (!Range.isCollapsed(this.editor.selection)) {
                     Editor.deleteFragment(this.editor);
                 }
-                // block card
-                const domSelection = window.getSelection();
-                const isBlockCard = AngularEditor.hasCardTarget(domSelection.anchorNode) ||
-                    AngularEditor.hasCardTarget(domSelection.focusNode);
-                if (isBlockCard) {
-                    return;
-                }
                 // just handle Non-IME input  
                 if (!this.isComposing) {
                     Editor.insertText(this.editor, text);

diff --git a/packages/src/plugins/angular-editor.ts b/packages/src/plugins/angular-editor.ts
@@ -27,6 +27,7 @@ import { NodeEntry } from 'slate';
 import { SlateError } from '../types/error';
 import { Key } from '../utils/key';
 import { IS_CHROME } from '../utils/environment';
+import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getCardTargetAttribute, isCardCenterByTargetAttr, isCardLeftByTargetAttr, isCardRightByTargetAttr } from '../utils/block-card';
 
 /**
  * A React and DOM-specific version of the `Editor` interface.
@@ -303,9 +304,9 @@ export const AngularEditor = {
         let domPoint: DOMPoint | undefined;
 
         // block card
-        const cardTargetAttr = AngularEditor.getCardTargetAttribute(el);
+        const cardTargetAttr = getCardTargetAttribute(el);
         if (cardTargetAttr) {
-            if (point.offset === -1) {
+            if (point.offset === FAKE_LEFT_BLOCK_CARD_OFFSET) {
                 const cursorNode = AngularEditor.getCardCursorNode(editor, node, { direction: 'left' });
                 return [cursorNode, 1];
             } else {
@@ -487,14 +488,14 @@ export const AngularEditor = {
         let offset = 0;
 
         // block card
-        const cardTargetAttr = AngularEditor.getCardTargetAttribute(domNode);
+        const cardTargetAttr = getCardTargetAttribute(domNode);
         if (cardTargetAttr) {
             const domSelection = window.getSelection();
             const isBackward = editor.selection && Range.isBackward(editor.selection);
             const blockCardEntry = AngularEditor.toSlateCardEntry(editor, domNode) || AngularEditor.toSlateCardEntry(editor, nearestNode);
             const [, blockPath] = blockCardEntry;
             if (domSelection.isCollapsed) {
-                if (AngularEditor.isCardLeftByTargetAttr(cardTargetAttr)) {
+                if (isCardLeftByTargetAttr(cardTargetAttr)) {
                     return { path: blockPath, offset: -1 };
                 }
                 else {
@@ -503,7 +504,7 @@ export const AngularEditor = {
             }
             // forward
             // and to the end of previous node
-            if (AngularEditor.isCardLeftByTargetAttr(cardTargetAttr) && !isBackward) {
+            if (isCardLeftByTargetAttr(cardTargetAttr) && !isBackward) {
                 const endPath =
                     blockPath[blockPath.length - 1] <= 0
                         ? blockPath
@@ -512,21 +513,21 @@ export const AngularEditor = {
             }
             // to the of current node
             if (
-                (AngularEditor.isCardCenterByTargetAttr(cardTargetAttr) ||
-                    AngularEditor.isCardRightByTargetAttr(cardTargetAttr)) &&
+                (isCardCenterByTargetAttr(cardTargetAttr) ||
+                isCardRightByTargetAttr(cardTargetAttr)) &&
                 !isBackward
             ) {
                 return Editor.end(editor, blockPath);
             }
             // backward
             // and to the start of next node
-            if (AngularEditor.isCardRightByTargetAttr(cardTargetAttr) && isBackward) {
+            if (isCardRightByTargetAttr(cardTargetAttr) && isBackward) {
                 return Editor.start(editor, Path.next(blockPath));
             }
             // and to the start of current node
             if (
-                (AngularEditor.isCardCenterByTargetAttr(cardTargetAttr) ||
-                    AngularEditor.isCardLeftByTargetAttr(cardTargetAttr)) &&
+                (isCardCenterByTargetAttr(cardTargetAttr) ||
+                isCardLeftByTargetAttr(cardTargetAttr)) &&
                 isBackward
             ) {
                 return Editor.start(editor, blockPath);
@@ -652,12 +653,12 @@ export const AngularEditor = {
         return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
     },
 
-    hasCardTarget(node: DOMNode) {
-        return node && (node.parentElement.hasAttribute('card-target') || (node instanceof HTMLElement && node.hasAttribute('card-target')));
+    isBlockCardLeftCursor(editor: AngularEditor) {
+        return editor.selection.anchor.offset === FAKE_LEFT_BLOCK_CARD_OFFSET && editor.selection.focus.offset === FAKE_LEFT_BLOCK_CARD_OFFSET;
     },
 
-    getCardTargetAttribute(node: DOMNode) {
-        return node.parentElement.attributes['card-target'] || (node instanceof HTMLElement && node.attributes['card-target']);
+    isBlockCardRightCursor(editor: AngularEditor) {
+        return editor.selection.anchor.offset === FAKE_RIGHT_BLOCK_CARD_OFFSET && editor.selection.focus.offset === FAKE_RIGHT_BLOCK_CARD_OFFSET;
     },
 
     getCardCursorNode(editor: AngularEditor, blockCardNode: Node, options: {
@@ -670,23 +671,6 @@ export const AngularEditor = {
             : cardCenter.nextElementSibling;
     },
 
-    isCardLeft(node: DOMNode) {
-        const cardTarget = AngularEditor.getCardTargetAttribute(node);
-        return cardTarget && cardTarget.nodeValue === 'card-left';
-    },
-
-    isCardLeftByTargetAttr(targetAttr: any) {
-        return targetAttr && targetAttr.nodeValue === 'card-left';
-    },
-
-    isCardRightByTargetAttr(targetAttr: any) {
-        return targetAttr && targetAttr.nodeValue === 'card-right';
-    },
-
-    isCardCenterByTargetAttr(targetAttr: any) {
-        return targetAttr && targetAttr.nodeValue === 'card-center';
-    },
-
     toSlateCardEntry(editor: AngularEditor, node: DOMNode): NodeEntry {
         const element = node.parentElement
             .closest('.slate-block-card')?.querySelector('[card-target="card-center"]')
@@ -696,6 +680,12 @@ export const AngularEditor = {
         return [slateNode, path];
     },
 
+    /**
+     * move native selection to card-left or card-right
+     * @param editor 
+     * @param blockCardNode 
+     * @param options 
+     */
     moveBlockCard(editor: AngularEditor, blockCardNode: Node, options: {
         direction: 'left' | 'right'
     }) {
@@ -705,6 +695,19 @@ export const AngularEditor = {
         domSelection.setBaseAndExtent(cursorNode, 1, cursorNode, 1);
     },
 
+    /**
+     * move slate selection to card-left or card-right
+     * @param editor 
+     * @param path 
+     * @param options 
+     */
+    moveBlockCardCursor(editor: AngularEditor, path: Path, options: {
+        direction: 'left' | 'right'
+    }) {
+        const cursor = { path, offset: options.direction === 'left' ? FAKE_LEFT_BLOCK_CARD_OFFSET : FAKE_RIGHT_BLOCK_CARD_OFFSET };
+        Transforms.select(editor, { anchor: cursor, focus: cursor });
+    },
+
     hasRange(editor: AngularEditor, range: Range): boolean {
         const { anchor, focus } = range;
         return (

diff --git a/packages/src/utils/block-card.ts b/packages/src/utils/block-card.ts
@@ -0,0 +1,34 @@
+import { DOMNode, DOMSelection } from "./dom";
+
+export const FAKE_LEFT_BLOCK_CARD_OFFSET = -1;
+
+export const FAKE_RIGHT_BLOCK_CARD_OFFSET = -2;
+
+export function hasBlockCardWithNode(node: DOMNode) {
+    return node && (node.parentElement.hasAttribute('card-target') || (node instanceof HTMLElement && node.hasAttribute('card-target')));
+}
+
+export function hasBlockCard(selection: DOMSelection) {
+    return hasBlockCardWithNode(selection?.anchorNode) || hasBlockCardWithNode(selection?.focusNode);
+}
+
+export function getCardTargetAttribute(node: DOMNode) {
+    return node.parentElement.attributes['card-target'] || (node instanceof HTMLElement && node.attributes['card-target']);
+}
+
+export function isCardLeft(node: DOMNode) {
+    const cardTarget = getCardTargetAttribute(node);
+    return cardTarget && cardTarget.nodeValue === 'card-left';
+}
+
+export function isCardLeftByTargetAttr(targetAttr: any) {
+    return targetAttr && targetAttr.nodeValue === 'card-left';
+}
+
+export function isCardRightByTargetAttr(targetAttr: any) {
+    return targetAttr && targetAttr.nodeValue === 'card-right';
+}
+
+export function isCardCenterByTargetAttr(targetAttr: any) {
+    return targetAttr && targetAttr.nodeValue === 'card-center';
+}
diff --git a/packages/src/utils/index.ts b/packages/src/utils/index.ts
@@ -4,4 +4,5 @@ export * from './dom';
 export * from './view';
 export * from './environment';
 export * from './key';
-export * from './range-list';
+export * from './range-list';
+export * from './block-card';