refactor(editor): unify selection key + clean node view

packages/editor/src/editor/Canvas.tsx

@@ -5,6 +5,7 @@ import { Button, Space } from 'antd';
 import type { ResizeHandle } from './types';
 import { rectFromPoints } from './geometry';
 import type { ContextMenuState } from './ContextMenu';
+import { selectionKeyOf } from './selection';
 
 export interface CanvasProps {
   screen: Screen;
@@ -40,12 +41,6 @@ function isPrimaryButton(e: React.PointerEvent | PointerEvent): boolean {
   return (e as PointerEvent).buttons === 1 || (e as PointerEvent).button === 0;
 }
 
-function selectionKeyOf(ids: string[]): string {
-  // Keep stable regardless of selection order.
-  // This avoids false mismatches between context-menu state and reducer state.
-  return [...ids].sort().join('|');
-}
-
 export function Canvas(props: CanvasProps) {
   const ref = useRef<HTMLDivElement | null>(null);
   const [box, setBox] = useState<{ x1: number; y1: number; x2: number; y2: number } | null>(null);
@@ -441,18 +436,18 @@ function NodeView(props: {
                   boxSizing: 'border-box',
                   padding: `${node.props.paddingY ?? 0}px ${node.props.paddingX ?? 0}px`,
                   overflow: 'hidden',
+                }}
+              >
+                <span
+                  style={{
+                    whiteSpace: 'pre-wrap',
+                    fontSize: node.props.fontSize ?? 24,
+                    color: node.props.color ?? '#fff',
+                    fontWeight: node.props.fontWeight ?? 400,
+                    letterSpacing: `${node.props.letterSpacing ?? 0}px`,
+                    writingMode: writingModeStyle,
+                    cursor: node.props.link ? 'pointer' : 'default',
                   }}
-                >
-                  <span
-                    style={{
-                      whiteSpace: 'pre-wrap',
-                      fontSize: node.props.fontSize ?? 24,
-                      color: node.props.color ?? '#fff',
-                      fontWeight: node.props.fontWeight ?? 400,
-                      letterSpacing: `${node.props.letterSpacing ?? 0}px`,
-                      writingMode: writingModeStyle,
-                      cursor: node.props.link ? 'pointer' : 'default',
-                    }}
                   onClick={() => {
                     if (!node.props.link) return;
                     const head = node.props.linkHead ?? 'http://';

packages/editor/src/editor/ContextMenu.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Typography } from 'antd';
 
-function selectionKeyOf(ids: string[]): string {
+import { selectionKeyOf } from './selection';
-  // Keep stable regardless of selection order.
-  // This avoids false mismatches between context-menu state and reducer state.
-  return [...ids].sort().join('|');
-}
 
 export type ContextMenuState =
   | {

packages/editor/src/editor/EditorApp.tsx

@@ -14,6 +14,7 @@ import { bindEditorHotkeys } from './hotkeys';
 import { Canvas } from './Canvas';
 import { ContextMenu, type ContextMenuState } from './ContextMenu';
 import { Inspector } from './Inspector';
+import { selectionKeyOf } from './selection';
 import { createInitialState, editorReducer, exportScreenJSON } from './store';
 
 const { Header, Sider, Content } = Layout;
@@ -86,10 +87,7 @@ export function EditorApp() {
 
   const closeContextMenu = useCallback(() => setCtxMenu(null), []);
 
-  const selectionKeyOf = useCallback((ids: string[]) => {
+  // selectionKeyOf imported from ./selection
-    // Keep stable regardless of ordering.
-    return [...ids].sort().join('|');
-  }, []);
 
   const ctxMenuSyncedRef = useRef(false);
 
@@ -103,7 +101,7 @@ export function EditorApp() {
       }
       dispatch(action);
     },
-    [ctxMenu, dispatch, selectionKeyOf, state.selection.ids],
+    [ctxMenu, dispatch, state.selection.ids],
   );
 
   useEffect(() => {

packages/editor/src/editor/selection.ts

@@ -0,0 +1,5 @@
+export function selectionKeyOf(ids: string[]): string {
+  // Keep stable regardless of selection order.
+  // This avoids false mismatches between context-menu state and reducer state.
+  return [...ids].sort().join('|');
+}