fix: editing issue

Author: pubuzhixing8

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

@@ -13,7 +13,7 @@ import { H1Flavour } from '../flavours/heading.flavour';
     imports: [SlateEditable, FormsModule]
 })
 export class DemoHugeDocumentComponent implements OnInit, AfterViewInit {
-    mode: 'default' | 'component' | 'virtual' = 'default';
+    mode: 'default' | 'component' | 'virtual' = 'virtual';
 
     value = buildInitialValue();
 

packages/src/view/render/list-render.ts

@@ -32,11 +32,13 @@ export class ListRender {
     public initialize(children: Descendant[], parent: Ancestor, childrenContext: SlateChildrenContext) {
         this.initialized = true;
         this.children = children;
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
-        children.forEach((descendant, index) => {
-            NODE_TO_INDEX.set(descendant, index);
+        children.forEach((descendant, _index) => {
+            NODE_TO_INDEX.set(descendant, firstIndex + _index);
             NODE_TO_PARENT.set(descendant, parent);
-            const context = getContext(index, descendant, parentPath, childrenContext, this.viewContext);
+            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
             const viewType = getViewType(descendant, parent, this.viewContext);
             const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
             const blockCard = createBlockCard(descendant, view, this.viewContext);
@@ -65,16 +67,19 @@ export class ListRender {
         const outletParent = this.getOutletParent();
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
         if (diffResult) {
             let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
             const newContexts = [];
             const newViewTypes = [];
             const newViews = [];
             const newBlockCards: (BlockCardRef | null)[] = [];
             diffResult.forEachItem(record => {
-                NODE_TO_INDEX.set(record.item, record.currentIndex);
+                const currentIndex = firstIndex + record.currentIndex;
+                NODE_TO_INDEX.set(record.item, currentIndex);
                 NODE_TO_PARENT.set(record.item, parent);
-                let context = getContext(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
+                let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
                 const viewType = getViewType(record.item, parent, this.viewContext);
                 newViewTypes.push(viewType);
                 let view: EmbeddedViewRef<any> | ComponentRef<any> | FlavourRef;
@@ -154,15 +159,15 @@ export class ListRender {
             }
         } else {
             const newContexts = [];
-            this.children.forEach((child, index) => {
-                NODE_TO_INDEX.set(child, index);
+            this.children.forEach((child, _index) => {
+                NODE_TO_INDEX.set(child, firstIndex + _index);
                 NODE_TO_PARENT.set(child, parent);
-                let context = getContext(index, child, parentPath, childrenContext, this.viewContext);
-                const previousContext = this.contexts[index];
+                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
+                const previousContext = this.contexts[_index];
                 if (memoizedContext(this.viewContext, child, previousContext as any, context as any)) {
                     context = previousContext;
                 } else {
-                    updateContext(this.views[index], context, this.viewContext);
+                    updateContext(this.views[_index], context, this.viewContext);
                 }
                 newContexts.push(context);
             });