@barocss/editor-view-react 0.1.0 → 0.1.1

package/docs/ime-composition-stability-checklist.md

@@ -0,0 +1,40 @@
+# editor-view-react IME/입력 안정성 체크리스트
+
+목표: `editor-view-dom`과 동일한 방향으로, React 기반 contenteditable 경로에서도 입력/IME/렌더 타이밍을 안정화한다.
+
+## A. 즉시 적용 체크리스트 (현재 구현 완료)
+
+- [x] `compositionstart`에서 입력 가능 영역 검사 + 필요 시 block
+- [x] `compositionupdate`에서 composing flag 유지
+- [x] `compositionend` 직후 DOM 동기화 타이밍을 `rAF × 2`로 지연
+- [x] `compositionstart/end` 이벤트 기반의 IME 플래그에 더해 `keyCode === 229`/조합 직후 윈도우(`compositionWindowUntil`) 보조 플래그 추가
+- [x] `keydown`, `beforeinput`, `paste`, `drop`, `handleDomMutations`가 보조 IME 윈도우 상태에서 model 렌더/변환을 보수적으로 처리
+- [x] `editor:content.change`에서 `skipRender` 및 `skipNextRenderFromMO` 경로 유지
+
+## B. 추가 점검 항목 (추천)
+
+- [ ] `beforeinput.getTargetRanges()` 사용률:
+  - `insertText`/`insertReplacementText`/`insertFromPaste`에서 대상 범위를 model range로 변환해 `preventDefault + replaceText`로 처리 가능한지 검증
+  - 범위가 `inline-text`를 벗어날 때 입력을 차단했을 때의 UX 확인
+- [ ] Safari/macOS + Chrome/Android IME(한글/일본어/중국어)에서 다음 순서 시나리오 검증:
+  - `compositionstart` 바로 뒤 첫 글자 입력
+  - `compositionupdate` 연속, `compositionend` 뒤 `beforeinput/input` 순서 역전
+  - `keydown`이 `keyCode 229`를 내뿜는 경우
+- [ ] Composition 중 구조 변경(엔터/붙여넣기/드래그) 경로:
+  - 즉시 렌더를 건너뛸지/완전 동기화할지 정책 일관성 확인
+  - IME 중 selection 유지 안정성(커서 점프/리셋)
+- [ ] React reconciliation side-effect 점검:
+  - 동일 sid 재사용이 유지되는지
+  - composition window 종료 직후 `skipApplyModelSelectionToDOM` 동작이 불필요한 selection 재적용을 막는지
+
+## C. 실패/회귀 대응 체크
+
+- [ ] IME 입력 중 `skipNextRenderFromMO`가 과도하게 남아 다음 편집까지 남는지
+- [ ] `compositionWindowUntil` 타임아웃이 너무 길거나 짧을 때 발생하는 오탐/미탐 비율 확인
+- [ ] `paste/drop`이 IME 직후에 오독되어 무시되는 케이스 분리(텍스트 입력 vs 비 IME 입력)
+
+## D. 모니터링 이벤트(로그 또는 테스트 hook)
+
+- `editor:input.*`/`editor:content.change` payload에 `from`이 `getTargetRanges|compositionend-sync|MutationObserver-C1` 등으로 충분히 구분되는지
+- `selectionchange` 경로에서 `convertDOMSelectionToModel` 실패 빈도 추적
+- composition window 내/직후 입력을 `skip`/`guard`한 횟수 집계 (안정화 정도 판단 지표)

package/docs/layers-spec.md

@@ -90,7 +90,7 @@ Possible improvements to align behavior and reduce drift:
 
 | Item | Description |
 |------|-------------|
-| **Decorator range adjustment on text edit** | When the user types, inline decorator ranges (startOffset/endOffset) should be adjusted so they stay correct. editor-view-dom computes `adjustedDecorators` in handleEfficientEdit (via dataStore.decorators.adjustRanges or edit-position-converter) but applying them back to DecoratorManager is still TODO. editor-view-react does not yet run any adjust step after replaceText. Adding this in both views would keep decorators in sync with content. |
+| **Decorator range adjustment on text edit** | When the user types, inline decorator ranges (startOffset/endOffset) should be adjusted so they stay correct. editor-view-dom computes `adjustedDecorators` in handleEfficientEdit (via dataStore.decorators.adjustRanges or edit-position-converter), but applying back to `DecoratorManager` is not yet implemented in either view. Add this in both views to keep decorators in sync with content. |
 | **Single Decorator type source** | Decorator is defined in editor-view-dom, shared, and renderer-react. Unifying on shared (and re-exporting or extending in the other packages) would avoid drift. |
 | **ref.updateDecorator(id, updates)** | editor-view-dom exposes updateDecorator(id, updates). editor-view-react ref currently has addDecorator, removeDecorator, getDecorators; adding updateDecorator would call DecoratorManager.update for parity. |
 | **Optional DecoratorRegistry in editor-view-react** | editor-view-dom uses DecoratorRegistry for validation and default values when adding decorators. editor-view-react uses DecoratorManager without a validator; an optional registry would allow the same validation/defaults. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barocss/editor-view-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React view layer for Barocss Editor (renderer-react + Editor)",
   "type": "module",
   "main": "./src/index.ts",
@@ -17,9 +17,9 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@barocss/dsl": "1.0.0",
-    "@barocss/editor-core": "1.0.0",
-    "@barocss/renderer-react": "0.1.0",
+    "@barocss/dsl": "1.0.1",
+    "@barocss/editor-core": "1.0.1",
+    "@barocss/renderer-react": "0.1.1",
     "@barocss/shared": "1.0.0",
     "@barocss/text-analyzer": "0.1.0"
   },

package/src/EditorViewContentLayer.tsx

@@ -1,4 +1,11 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  ClipboardEventHandler,
+  DragEventHandler,
+  FormEvent,
+  FormEventHandler,
+  KeyboardEventHandler,
+} from 'react';
 import { getGlobalRegistry } from '@barocss/dsl';
 import { ReactRenderer } from '@barocss/renderer-react';
 import { useEditorViewContext } from './EditorViewContext';
@@ -12,9 +19,10 @@ import type { EditorViewContentLayerProps } from './types';
 export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerProps) {
   const {
     editor,
-    selectionHandler,
+    inputHandler,
     viewStateRef,
     setContentEditableElement,
+    selectionHandler,
     getMergedDecorators,
     decoratorVersion,
   } = useEditorViewContext();
@@ -22,20 +30,48 @@ export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerP
 
   const [documentSnapshot, setDocumentSnapshot] = useState<unknown>(() => editor.getDocumentProxy?.() ?? null);
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const modelRenderGuardFrameRef = useRef<number | null>(null);
 
   useEffect(() => {
-    const onContentChange = (e: { content?: unknown }) => {
+    const onContentChange = (e: { content?: unknown; skipRender?: boolean }) => {
+      if (e?.skipRender) return;
+
       if (viewStateRef?.current?.skipNextRenderFromMO) {
         viewStateRef.current.skipNextRenderFromMO = false;
         return;
       }
+
+      if (modelRenderGuardFrameRef.current !== null) {
+        window.cancelAnimationFrame(modelRenderGuardFrameRef.current);
+      }
+
+      if (viewStateRef.current) {
+        viewStateRef.current.isModelDrivenChange = true;
+        viewStateRef.current.isRendering = true;
+      }
+
       const next = e?.content ?? editor.getDocumentProxy?.() ?? null;
       setDocumentSnapshot(next);
+
+      modelRenderGuardFrameRef.current = window.requestAnimationFrame(() => {
+        modelRenderGuardFrameRef.current = null;
+        if (viewStateRef.current) {
+          viewStateRef.current.isModelDrivenChange = false;
+          viewStateRef.current.isRendering = false;
+        }
+      });
     };
     editor.on?.('editor:content.change', onContentChange);
     setDocumentSnapshot(editor.getDocumentProxy?.() ?? null);
     return () => {
       editor.off?.('editor:content.change', onContentChange);
+      if (modelRenderGuardFrameRef.current !== null) {
+        window.cancelAnimationFrame(modelRenderGuardFrameRef.current);
+      }
+      if (viewStateRef.current) {
+        viewStateRef.current.isModelDrivenChange = false;
+        viewStateRef.current.isRendering = false;
+      }
     };
   }, [editor, viewStateRef]);
 
@@ -46,11 +82,32 @@ export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerP
   }, [setContentEditableElement]);
 
   useEffect(() => {
-    const onModelSelection = (sel: unknown) => {
+    const onModelSelection = (eventPayload: unknown) => {
+      const hasSelectionField =
+        typeof eventPayload === 'object' &&
+        eventPayload !== null &&
+        Object.prototype.hasOwnProperty.call(eventPayload, 'selection');
+      const source = typeof eventPayload === 'object' && eventPayload !== null && Object.prototype.hasOwnProperty.call(eventPayload, 'source')
+        ? (eventPayload as { source?: string }).source
+        : undefined;
+      const selectionFromEvent = hasSelectionField
+        ? (eventPayload as { selection: unknown }).selection
+        : eventPayload;
+      const applySelectionToView = hasSelectionField
+        ? source === 'remote'
+          ? false
+          : (eventPayload as { applySelectionToView?: boolean }).applySelectionToView !== false
+        : true;
+      const shouldApplySelectionToView = source === 'remote' ? false : applySelectionToView;
+
+      if (!shouldApplySelectionToView) return;
+
       if (viewStateRef?.current?.skipApplyModelSelectionToDOM) return;
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          selectionHandler.convertModelSelectionToDOM(sel as Parameters<typeof selectionHandler.convertModelSelectionToDOM>[0]);
+          selectionHandler.convertModelSelectionToDOM(
+            selectionFromEvent as Parameters<typeof selectionHandler.convertModelSelectionToDOM>[0]
+          );
         });
       });
     };
@@ -75,6 +132,30 @@ export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerP
     return renderer.build(model, decorators);
   }, [documentSnapshot, renderer, decorators]);
 
+  const handleBeforeInput: FormEventHandler<HTMLDivElement> = (event: FormEvent<HTMLDivElement>) => {
+    const inputEvent = event.nativeEvent as InputEvent;
+    inputHandler.handleBeforeInput(inputEvent);
+  };
+
+  const handleInput: FormEventHandler<HTMLDivElement> = (event: FormEvent<HTMLDivElement>) => {
+    const inputEvent = event.nativeEvent as InputEvent;
+    inputHandler.handleInput(inputEvent);
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    inputHandler.handleKeydown(event.nativeEvent);
+  };
+
+  const handlePaste: ClipboardEventHandler<HTMLDivElement> = (event) => {
+    const clipboardEvent = event.nativeEvent as ClipboardEvent;
+    inputHandler.handlePaste(clipboardEvent);
+  };
+
+  const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
+    const dropEvent = event.nativeEvent as DragEvent;
+    inputHandler.handleDrop(dropEvent);
+  };
+
   return (
     <div
       ref={contentRef}
@@ -83,6 +164,11 @@ export function EditorViewContentLayer({ options = {} }: EditorViewContentLayerP
       suppressContentEditableWarning
       data-bc-layer="content"
       data-testid="editor-content"
+      onInput={handleInput}
+      onBeforeInput={handleBeforeInput}
+      onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
+      onDrop={handleDrop}
     >
       {content}
     </div>

package/src/EditorViewContext.tsx

@@ -20,6 +20,8 @@ export interface EditorViewViewState {
   isModelDrivenChange: boolean;
   isRendering: boolean;
   isComposing: boolean;
+  /** Tracks IME-related events shortly after compositionend or keyCode 229 keydown. */
+  compositionWindowUntil: number;
   /** When true, next editor:content.change (from model commit during MO C1) must not trigger refresh (data-only update). */
   skipNextRenderFromMO: boolean;
   /** When true, editor:selection.model must not call convertModelSelectionToDOM (selection came from DOM input; leave DOM selection as-is). */
@@ -64,6 +66,7 @@ export function EditorViewContextProvider({ editor, children }: { editor: Editor
     isModelDrivenChange: false,
     isRendering: false,
     isComposing: false,
+    compositionWindowUntil: 0,
     skipNextRenderFromMO: false,
     skipApplyModelSelectionToDOM: false,
   });

package/src/input-handler.ts

@@ -49,6 +49,68 @@ export class ReactInputHandler {
   private viewStateRef: MutableRefObject<EditorViewViewState>;
   private _isComposing = false;
   private _pendingInsertHint: InputHint | null = null;
+  private readonly _compositionWindowMs = 120;
+  private _compositionGeneration = 0;
+  private _compositionSyncToken = 0;
+  private _isCompositionSyncScheduled = false;
+  private _contentChangeTxSeq = 0;
+
+  private _buildDebugTransaction(operations: any[] = [], description?: string) {
+    return {
+      sid: `tx-viewreact-${Date.now()}-${++this._contentChangeTxSeq}`,
+      timestamp: new Date(),
+      operations,
+      description
+    };
+  }
+
+  private markPostCompositionWindow(): void {
+    this.viewStateRef.current.compositionWindowUntil = Date.now() + this._compositionWindowMs;
+  }
+
+  private clearPostCompositionWindow(): void {
+    this.viewStateRef.current.compositionWindowUntil = 0;
+  }
+
+  private isPostCompositionWindowActive(): boolean {
+    return this.viewStateRef.current.compositionWindowUntil > Date.now();
+  }
+
+  private isImePhase(isComposing?: boolean): boolean {
+    if (this._isComposing || this.viewStateRef.current.isComposing) return true;
+    if (isComposing) return true;
+    return this.isPostCompositionWindowActive();
+  }
+
+  private setImeComposingState(isComposing: boolean, clearWindow = true): void {
+    const wasComposing = this._isComposing;
+
+    if (wasComposing !== isComposing) {
+      this._compositionGeneration += 1;
+      this._compositionSyncToken = this._compositionGeneration;
+
+      if (isComposing) {
+        this._isCompositionSyncScheduled = false;
+        if (clearWindow) {
+          this.clearPostCompositionWindow();
+        }
+      } else {
+        this._isCompositionSyncScheduled = true;
+        this.markPostCompositionWindow();
+      }
+    }
+
+    this._isComposing = isComposing;
+    this.viewStateRef.current.isComposing = isComposing;
+  }
+
+  private requestCompositionEndSync(): void {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        void this.syncFocusedTextNodeAfterComposition();
+      });
+    });
+  }
 
   constructor(
     editor: Editor,
@@ -60,53 +122,124 @@ export class ReactInputHandler {
     this.viewStateRef = viewStateRef;
   }
 
-  /** Set IME composition state. Called from compositionstart/compositionend so keydown/beforeinput see it early. */
+  /** Set IME composition state. Called from beforeinput and compatibility keydown 229. */
   setComposing(isComposing: boolean): void {
-    this._isComposing = isComposing;
-    this.viewStateRef.current.isComposing = isComposing;
+    const wasComposing = this._isComposing;
+    this.setImeComposingState(isComposing);
+
+    if (wasComposing && !isComposing) {
+      this.requestCompositionEndSync();
+    }
+  }
+
+  handleInput(event: InputEvent): void {
+    const wasComposing = this._isComposing;
+
+    if (event.isComposing !== undefined) {
+      this.setImeComposingState(event.isComposing);
+      if (wasComposing && !event.isComposing) {
+        this.requestCompositionEndSync();
+      }
+    }
+  }
+
+  handlePaste(event: ClipboardEvent): void {
+    if (this.isImePhase()) return;
+
+    event.preventDefault();
+    const text = event.clipboardData?.getData('text/plain') ?? '';
+    if (!text) return;
+
+    this.insertTextAtSelection(text);
+  }
+
+  handleDrop(event: DragEvent): void {
+    if (this.isImePhase()) return;
+
+    event.preventDefault();
+    const text = event.dataTransfer?.getData('text/plain') ?? '';
+    if (!text) return;
+
+    this.insertTextAtSelection(text);
   }
 
   /**
    * Sync model to DOM for the focused inline-text node. Call once after compositionend so the final composed text is applied (no intermediate C1).
    */
   async syncFocusedTextNodeAfterComposition(): Promise<void> {
+    const syncToken = this._compositionSyncToken;
+    const generation = this._compositionGeneration;
+    const completeSync = (): void => {
+      if (syncToken === this._compositionSyncToken && generation === this._compositionGeneration) {
+        this._isCompositionSyncScheduled = false;
+        this._compositionSyncToken += 1;
+      }
+    };
+
+    if (!this._isCompositionSyncScheduled) return;
+    if (this._isComposing || this.viewStateRef.current.isComposing) return;
     const view = this.viewStateRef.current;
+    if (syncToken !== this._compositionSyncToken || generation !== this._compositionGeneration) return;
     if (view.isModelDrivenChange || view.isRendering) return;
 
+    if (this.isPostCompositionWindowActive()) {
+      setTimeout(() => {
+        void this.syncFocusedTextNodeAfterComposition();
+      }, Math.max(0, view.compositionWindowUntil - Date.now()));
+      return;
+    }
+
     const selection = window.getSelection();
-    if (!selection?.rangeCount || !selection.anchorNode) return;
+    if (!selection?.rangeCount || !selection.anchorNode) {
+      completeSync();
+      return;
+    }
 
     const inlineEl = findClosestInlineTextNode(selection.anchorNode);
     if (!inlineEl) return;
 
     const nodeId = inlineEl.getAttribute('data-bc-sid');
-    if (!nodeId) return;
+    if (!nodeId) {
+      completeSync();
+      return;
+    }
 
     const dataStore = this.editor.dataStore;
     const modelNode = dataStore?.getNode?.(nodeId) as { stype?: string; text?: string } | undefined;
-    if (!modelNode || modelNode.stype !== 'inline-text') return;
+    if (!modelNode || modelNode.stype !== 'inline-text') {
+      completeSync();
+      return;
+    }
 
     const prevText = modelNode.text ?? '';
     const newText = reconstructModelTextFromDOM(inlineEl);
-    if (prevText === newText) return;
+    if (prevText === newText) {
+      completeSync();
+      return;
+    }
+
+    const contentRange: ContentRange = {
+      type: 'range',
+      startNodeId: nodeId,
+      startOffset: 0,
+      endNodeId: nodeId,
+      endOffset: prevText.length,
+    };
 
     this.viewStateRef.current.skipNextRenderFromMO = true;
     let success = false;
     try {
       success = await this.editor.executeCommand('replaceText', {
-      range: {
-        type: 'range',
-        startNodeId: nodeId,
-        startOffset: 0,
-        endNodeId: nodeId,
-        endOffset: prevText.length,
-      },
-      text: newText,
+        range: contentRange,
+        text: newText,
       });
     } finally {
       this.viewStateRef.current.skipNextRenderFromMO = false;
     }
-    if (!success) return;
+    if (!success) {
+      completeSync();
+      return;
+    }
 
     const selAfter = window.getSelection();
     if (selAfter?.rangeCount) {
@@ -137,8 +270,18 @@ export class ReactInputHandler {
       skipRender: true,
       from: 'compositionend-sync',
       content: (this.editor as { document?: unknown }).document,
-      transaction: { type: 'text_replace', nodeId },
+      transaction: this._buildDebugTransaction([
+        {
+          type: 'replaceText',
+          payload: {
+            nodeId,
+            range: contentRange
+          }
+        }
+      ], 'compositionend-sync')
     });
+
+    completeSync();
   }
 
   /**
@@ -150,7 +293,7 @@ export class ReactInputHandler {
   async handleDomMutations(mutations: MutationRecord[]): Promise<void> {
     const view = this.viewStateRef.current;
     if (view.isModelDrivenChange || view.isRendering) return;
-    if (view.isComposing) return;
+    if (this.isImePhase()) return;
 
     this.viewStateRef.current.skipNextRenderFromMO = true;
     try {
@@ -180,7 +323,7 @@ export class ReactInputHandler {
       }
     }
 
-    const inputHint = this.getValidInsertHint(view.isComposing);
+    const inputHint = this.getValidInsertHint(view.isComposing || this.isPostCompositionWindowActive());
     const classified = classifyDomChangeC1(mutations, {
       editor: this.editor,
       selection: selection ?? undefined,
@@ -269,16 +412,38 @@ export class ReactInputHandler {
       skipRender: true,
       from: 'MutationObserver-C1',
       content: (this.editor as { document?: unknown }).document,
-      transaction: { type: 'text_replace', nodeId: classified.nodeId },
+      transaction: this._buildDebugTransaction([
+        {
+          type: 'replaceText',
+          payload: {
+            nodeId: classified.nodeId,
+            range: classified.contentRange
+          }
+        }
+      ], 'MutationObserver-C1')
     });
     this._pendingInsertHint = null;
   }
 
   handleBeforeInput(event: InputEvent): void {
-    if (event.isComposing !== undefined) {
-      this._isComposing = event.isComposing;
-      this.viewStateRef.current.isComposing = event.isComposing;
+    const isComposing = event.isComposing;
+    const wasComposing = this._isComposing;
+
+    if (isComposing !== undefined) {
+      this.setImeComposingState(isComposing);
+
+      if (isComposing && !this.selectionHandler.isSelectionInsideEditableText()) {
+        event.preventDefault();
+        return;
+      }
+
+      if (wasComposing && !isComposing) {
+        this.clearPostCompositionWindow();
+        this.requestCompositionEndSync();
+      }
     }
+
+    const isIme = this.isImePhase(isComposing);
     const inputType = event.inputType;
 
     if (shouldPreventDefaultStructural(inputType)) {
@@ -293,7 +458,7 @@ export class ReactInputHandler {
       return;
     }
 
-    if (shouldHandleDelete(inputType) && !event.isComposing) {
+    if (shouldHandleDelete(inputType) && !isIme) {
       event.preventDefault();
       this.handleDelete(event);
       return;
@@ -312,6 +477,8 @@ export class ReactInputHandler {
   }
 
   private updateInsertHintFromBeforeInput(event: InputEvent): void {
+    if (this.isImePhase(event.isComposing)) return;
+
     const selection = window.getSelection();
     if (!selection?.rangeCount) {
       this._pendingInsertHint = null;
@@ -343,6 +510,13 @@ export class ReactInputHandler {
    */
   handleKeydown(event: KeyboardEvent): void {
     if (this._isComposing) return;
+    if (event.keyCode === 229) {
+      this.markPostCompositionWindow();
+      this.setImeComposingState(true, false);
+      return;
+    }
+
+    if (this.isImePhase()) return;
 
     const isCharacterKey =
       event.key.length === 1 &&
@@ -407,7 +581,7 @@ export class ReactInputHandler {
   private tryHandleInsertViaGetTargetRanges(event: InputEvent): boolean {
     const inputType = event.inputType;
     if (!['insertText', 'insertFromPaste', 'insertReplacementText'].includes(inputType)) return false;
-    if (event.isComposing) return false;
+    if (this.isImePhase(event.isComposing)) return false;
 
     const getTargetRanges = (event as InputEvent & { getTargetRanges?: () => StaticRange[] }).getTargetRanges;
     if (typeof getTargetRanges !== 'function') return false;
@@ -459,7 +633,14 @@ export class ReactInputHandler {
         skipRender: false,
         from: 'getTargetRanges',
         content: (this.editor as { document?: unknown }).document,
-        transaction: { type: 'text_replace', range: rangeForReplace },
+        transaction: this._buildDebugTransaction([
+          {
+            type: 'replaceText',
+            payload: {
+              ...rangeForReplace
+            }
+          }
+        ], 'getTargetRanges')
       });
       this.applyModelSelectionAfterRender(newCaret);
     }).catch(() => {});
@@ -526,7 +707,14 @@ export class ReactInputHandler {
       skipRender: false,
       from: 'beforeinput-delete',
       content: (this.editor as { document?: unknown }).document,
-      transaction: { type: 'delete', contentRange },
+      transaction: this._buildDebugTransaction([
+        {
+          type: 'deleteText',
+          payload: {
+            range: contentRange
+          }
+        }
+      ], 'beforeinput-delete')
     });
 
     this.applyModelSelectionAfterRender(newModelSelection);