@lvce-editor/main-area-worker 1.2.0 → 1.3.0

package/dist/mainAreaWorkerMain.js

@@ -1031,6 +1031,7 @@ const createMockRpc = ({
 const Button = 1;
 const Div = 4;
 const Span = 8;
+const Text = 12;
 const Pre = 51;
 
 const TargetName = 'event.target.name';
@@ -1263,13 +1264,131 @@ const initialize = async () => {
 };
 
 const loadContent = async state => {
+  const tabs = [{
+    content: '',
+    editorType: 'text',
+    id: '1',
+    isDirty: false,
+    title: 'tab 1'
+  }, {
+    content: '',
+    editorType: 'text',
+    id: '2',
+    isDirty: false,
+    title: 'tab 2'
+  }];
+  return {
+    ...state,
+    layout: {
+      activeGroupId: '0',
+      direction: 'horizontal',
+      groups: [{
+        activeTabId: '',
+        direction: 'horizontal',
+        focused: false,
+        id: '0',
+        size: 300,
+        tabs
+      }]
+    }
+  };
+};
+
+const text = data => {
   return {
-    ...state
+    childCount: 0,
+    text: data,
+    type: Text
   };
 };
 
+const CSS_CLASSES = {
+  CUSTOM_EDITOR: 'custom-editor',
+  EDITOR_CONTAINER: 'editor-container',
+  EDITOR_CONTENT: 'editor-content',
+  EDITOR_GROUP: 'editor-group',
+  EDITOR_GROUP_FOCUSED: 'focused',
+  EDITOR_GROUPS_CONTAINER: 'editor-groups-container',
+  MAIN_AREA: 'main-area',
+  TAB: 'tab',
+  TAB_ACTIVE: 'active',
+  TAB_BAR: 'tab-bar',
+  TAB_CLOSE: 'tab-close',
+  TAB_TITLE: 'tab-title',
+  TEXT_EDITOR: 'text-editor'
+};
+
+const renderTab = (tab, isActive) => {
+  return [{
+    childCount: 2,
+    className: `${CSS_CLASSES.TAB} ${isActive ? CSS_CLASSES.TAB_ACTIVE : ''}`,
+    type: Div
+  }, {
+    childCount: 1,
+    className: CSS_CLASSES.TAB_TITLE,
+    type: Span
+  }, text(tab.isDirty ? `*${tab.title}` : tab.title), {
+    childCount: 1,
+    className: CSS_CLASSES.TAB_CLOSE,
+    type: Button
+  }, text('×')];
+};
+const renderTabBar = group => {
+  return [{
+    childCount: group.tabs.length,
+    className: CSS_CLASSES.TAB_BAR,
+    type: Div
+  }, ...group.tabs.flatMap(tab => renderTab(tab, tab.id === group.activeTabId))];
+};
+const renderEditor = tab => {
+  if (tab.editorType === 'custom') {
+    return [{
+      childCount: 1,
+      className: CSS_CLASSES.CUSTOM_EDITOR,
+      type: Div
+    }, text(`Custom Editor: ${tab.customEditorId}`)];
+  }
+  return [{
+    childCount: 1,
+    className: CSS_CLASSES.TEXT_EDITOR,
+    type: Div
+  }, {
+    childCount: 1,
+    className: CSS_CLASSES.EDITOR_CONTENT,
+    type: Pre
+  }, text(tab.content || '')];
+};
+const renderEditorGroup = group => {
+  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  return [{
+    childCount: 2,
+    className: `${CSS_CLASSES.EDITOR_GROUP} ${group.focused ? CSS_CLASSES.EDITOR_GROUP_FOCUSED : ''}`,
+    type: Div
+  }, ...renderTabBar(group), {
+    childCount: activeTab ? 1 : 1,
+    className: CSS_CLASSES.EDITOR_CONTAINER,
+    type: Div
+  }, ...renderEditor(activeTab)];
+};
+const getMainAreaVirtualDom = layout => {
+  return [{
+    childCount: 1,
+    className: CSS_CLASSES.MAIN_AREA,
+    type: Div
+  }, {
+    childCount: layout.groups.length,
+    className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
+    type: Div
+  }, ...layout.groups.flatMap(renderEditorGroup)];
+};
+
 const renderItems = (oldState, newState) => {
-  return [SetDom2, newState.uid, []];
+  const {
+    layout,
+    uid
+  } = newState;
+  const dom = getMainAreaVirtualDom(layout);
+  return [SetDom2, uid, dom];
 };
 
 const getRenderer = diffType => {
@@ -1361,560 +1480,10 @@ const main$2 = async () => {
   await listen();
 };
 
-const closeEditorGroup = (state, groupId) => {
-  const groupIndex = state.layout.groups.findIndex(group => group.id === groupId);
-  if (groupIndex === -1 || state.layout.groups.length <= 1) {
-    return state;
-  }
-  const remainingGroups = state.layout.groups.filter(group => group.id !== groupId);
-  const redistributedGroups = remainingGroups.map((group, index) => ({
-    ...group,
-    size: Math.round(100 / remainingGroups.length)
-  }));
-  const newActiveGroupId = state.layout.activeGroupId === groupId ? remainingGroups[0].id : state.layout.activeGroupId;
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: newActiveGroupId,
-      groups: redistributedGroups
-    }
-  };
-};
-
-const closeTab = (state, groupId, tabId) => {
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        const tabIndex = group.tabs.findIndex(tab => tab.id === tabId);
-        if (newTabs.length > 0) {
-          newActiveTabId = newTabs[Math.min(tabIndex, newTabs.length - 1)].id;
-        } else {
-          newActiveTabId = undefined;
-        }
-      }
-      return {
-        ...group,
-        activeTabId: newActiveTabId,
-        tabs: newTabs
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const focusEditorGroup = (state, groupId) => {
-  const groups = state.layout.groups.map(group => ({
-    ...group,
-    focused: group.id === groupId
-  }));
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: groupId,
-      groups
-    }
-  };
-};
-
-const CSS_CLASSES = {
-  CUSTOM_EDITOR: 'custom-editor',
-  EDITOR_CONTAINER: 'editor-container',
-  EDITOR_CONTENT: 'editor-content',
-  EDITOR_GROUP: 'editor-group',
-  EDITOR_GROUP_FOCUSED: 'focused',
-  EDITOR_GROUPS_CONTAINER: 'editor-groups-container',
-  EMPTY_EDITOR: 'empty-editor',
-  MAIN_AREA: 'main-area',
-  TAB: 'tab',
-  TAB_ACTIVE: 'active',
-  TAB_BAR: 'tab-bar',
-  TAB_CLOSE: 'tab-close',
-  TAB_TITLE: 'tab-title',
-  TEXT_EDITOR: 'text-editor'
-};
-const CSS_ATTRIBUTES = {
-  DATA_ACTION: 'data-action',
-  DATA_CUSTOM_EDITOR_ID: 'data-custom-editor-id',
-  DATA_DIRECTION: 'data-direction',
-  DATA_GROUP_ID: 'data-group-id',
-  DATA_LANGUAGE: 'data-language',
-  DATA_TAB_ID: 'data-tab-id'
-};
-const CSS_STYLES = {
-  CUSTOM_EDITOR_STYLE: 'flex: 1; overflow: auto;',
-  EDITOR_GROUP_BASE: 'display: flex; flex-direction: column; border-right: 1px solid var(--border-color);',
-  EDITOR_GROUP_FOCUSED_STYLE: 'box-shadow: 0 0 0 1px var(--focus-border-color);',
-  EMPTY_EDITOR_STYLE: 'flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dimmed-color);',
-  FLEX_COLUMN: 'display: flex; flex-direction: column; height: 100%;',
-  FLEX_ROW: 'display: flex; flex-direction: row; height: 100%;',
-  TAB_ACTIVE_STYLE: 'background: var(--tab-active-background); color: var(--tab-active-color);',
-  TAB_BAR_BASE: 'display: flex; align-items: center; background: var(--tab-bar-background); border-bottom: 1px solid var(--border-color);',
-  TAB_BASE: 'padding: 4px 8px; cursor: pointer; border-right: 1px solid var(--border-color); display: flex; align-items: center; gap: 4px;',
-  TAB_CLOSE_STYLE: 'background: none; border: none; cursor: pointer; padding: 2px; border-radius: 2px; opacity: 0.7;',
-  TEXT_EDITOR_STYLE: 'flex: 1; overflow: auto; font-family: var(--editor-font-family); font-size: var(--editor-font-size);'
-};
-const THEMES = {
-  DARK: {
-    '--border-color': '#3e3e42',
-    '--dimmed-color': '#858585',
-    '--editor-font-family': 'Consolas, Monaco, "Courier New", monospace',
-    '--editor-font-size': '14px',
-    '--focus-border-color': '#0078d4',
-    '--tab-active-background': '#1e1e1e',
-    '--tab-active-color': '#ffffff',
-    '--tab-bar-background': '#252526',
-    '--tab-close-hover-background': '#3e3e42'
-  },
-  LIGHT: {
-    '--border-color': '#e1e1e1',
-    '--dimmed-color': '#999999',
-    '--editor-font-family': 'Consolas, Monaco, "Courier New", monospace',
-    '--editor-font-size': '14px',
-    '--focus-border-color': '#0078d4',
-    '--tab-active-background': '#ffffff',
-    '--tab-active-color': '#333333',
-    '--tab-bar-background': '#f3f3f3',
-    '--tab-close-hover-background': '#e1e1e1'
-  }
-};
-const getThemeStyles = (theme = 'DARK') => {
-  const themeVars = THEMES[theme];
-  return Object.entries(themeVars).map(([key, value]) => `${key}: ${value};`).join(' ');
-};
-
-const renderTab = (tab, isActive) => {
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-      style: `${CSS_STYLES.TAB_BASE} ${isActive ? CSS_STYLES.TAB_ACTIVE_STYLE : ''}`
-    },
-    childCount: 2,
-    children: [{
-      childCount: 1,
-      children: [tab.isDirty ? `*${tab.title}` : tab.title],
-      className: CSS_CLASSES.TAB_TITLE,
-      type: Span
-    }, {
-      attributes: {
-        [CSS_ATTRIBUTES.DATA_ACTION]: 'close-tab',
-        [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-        style: CSS_STYLES.TAB_CLOSE_STYLE
-      },
-      childCount: 1,
-      children: ['×'],
-      className: CSS_CLASSES.TAB_CLOSE,
-      type: Button
-    }],
-    className: `${CSS_CLASSES.TAB} ${isActive ? CSS_CLASSES.TAB_ACTIVE : ''}`,
-    type: Div
-  };
-};
-const renderTabBar = group => {
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_GROUP_ID]: group.id,
-      style: CSS_STYLES.TAB_BAR_BASE
-    },
-    childCount: group.tabs.length,
-    children: group.tabs.map(tab => renderTab(tab, tab.id === group.activeTabId)),
-    className: CSS_CLASSES.TAB_BAR,
-    type: Div
-  };
-};
-const renderEditor = tab => {
-  if (tab.editorType === 'custom') {
-    return {
-      attributes: {
-        [CSS_ATTRIBUTES.DATA_CUSTOM_EDITOR_ID]: tab.customEditorId,
-        [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-        style: CSS_STYLES.CUSTOM_EDITOR_STYLE
-      },
-      childCount: 1,
-      children: [`Custom Editor: ${tab.customEditorId}`],
-      className: CSS_CLASSES.CUSTOM_EDITOR,
-      type: Div
-    };
-  }
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_LANGUAGE]: tab.language || 'plaintext',
-      [CSS_ATTRIBUTES.DATA_TAB_ID]: tab.id,
-      style: CSS_STYLES.TEXT_EDITOR_STYLE
-    },
-    childCount: 1,
-    children: [{
-      childCount: 1,
-      children: [tab.content || ''],
-      className: CSS_CLASSES.EDITOR_CONTENT,
-      type: Pre
-    }],
-    className: CSS_CLASSES.TEXT_EDITOR,
-    type: Div
-  };
-};
-const renderEditorGroup = group => {
-  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
-  return {
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_GROUP_ID]: group.id,
-      style: `${CSS_STYLES.EDITOR_GROUP_BASE} flex: ${group.size}; ${group.focused ? CSS_STYLES.EDITOR_GROUP_FOCUSED_STYLE : ''}`
-    },
-    childCount: 2,
-    children: [renderTabBar(group), {
-      childCount: activeTab ? 1 : 1,
-      children: activeTab ? [renderEditor(activeTab)] : [{
-        attributes: {
-          style: CSS_STYLES.EMPTY_EDITOR_STYLE
-        },
-        childCount: 1,
-        children: ['No open tabs'],
-        className: CSS_CLASSES.EMPTY_EDITOR,
-        type: Div
-      }],
-      className: CSS_CLASSES.EDITOR_CONTAINER,
-      type: Div
-    }],
-    className: `${CSS_CLASSES.EDITOR_GROUP} ${group.focused ? CSS_CLASSES.EDITOR_GROUP_FOCUSED : ''}`,
-    type: Div
-  };
-};
-const getMainAreaVirtualDom = state => {
-  return [{
-    attributes: {
-      [CSS_ATTRIBUTES.DATA_DIRECTION]: state.layout.direction,
-      style: getThemeStyles('DARK')
-    },
-    childCount: 1,
-    children: [{
-      attributes: {
-        style: state.layout.direction === 'horizontal' ? CSS_STYLES.FLEX_ROW : CSS_STYLES.FLEX_COLUMN
-      },
-      childCount: state.layout.groups.length,
-      children: state.layout.groups.map(renderEditorGroup),
-      className: CSS_CLASSES.EDITOR_GROUPS_CONTAINER,
-      type: Div
-    }],
-    className: CSS_CLASSES.MAIN_AREA,
-    type: Div
-  }];
-};
-
-const splitEditorGroup = (state, groupId, direction) => {
-  const sourceGroup = state.layout.groups.find(group => group.id === groupId);
-  if (!sourceGroup) {
-    return state;
-  }
-  const newGroupId = `group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-  const isHorizontalSplit = direction === 'left' || direction === 'right';
-  const newLayoutDirection = isHorizontalSplit ? 'horizontal' : 'vertical';
-  const updatedGroups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      return {
-        ...group,
-        focused: false,
-        size: 50
-      };
-    }
-    return group;
-  });
-  const newGroup = {
-    activeTabId: undefined,
-    focused: true,
-    id: newGroupId,
-    size: 50,
-    tabs: []
-  };
-  let reorderedGroups;
-  if (direction === 'right' || direction === 'down') {
-    reorderedGroups = [...updatedGroups, newGroup];
-  } else {
-    const sourceIndex = updatedGroups.findIndex(group => group.id === groupId);
-    reorderedGroups = [...updatedGroups.slice(0, sourceIndex), newGroup, ...updatedGroups.slice(sourceIndex)];
-  }
-  return {
-    ...state,
-    layout: {
-      activeGroupId: newGroupId,
-      direction: newLayoutDirection,
-      groups: reorderedGroups
-    }
-  };
-};
-
-const switchTab = (state, groupId, tabId) => {
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      const tabExists = group.tabs.some(tab => tab.id === tabId);
-      if (tabExists) {
-        return {
-          ...group,
-          activeTabId: tabId
-        };
-      }
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const handleMainAreaClick = (state, event) => {
-  const {
-    target
-  } = event;
-  if (!target.dataset) {
-    return state;
-  }
-  const {
-    dataset
-  } = target;
-
-  // Handle tab click
-  if (dataset.tabId) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      return switchTab(state, groupId, dataset.tabId);
-    }
-  }
-
-  // Handle tab close button
-  if (dataset.action === 'close-tab' && dataset.tabId) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      return closeTab(state, groupId, dataset.tabId);
-    }
-  }
-
-  // Handle editor group focus
-  if (dataset.groupId && !dataset.tabId) {
-    return focusEditorGroup(state, dataset.groupId);
-  }
-
-  // Handle split actions
-  if (dataset.action?.startsWith('split-')) {
-    const {
-      groupId
-    } = dataset;
-    if (groupId) {
-      const direction = dataset.action.replace('split-', '');
-      return splitEditorGroup(state, groupId, direction);
-    }
-  }
-  return state;
-};
-
-const handleMainAreaKeyboard = (state, event) => {
-  const {
-    ctrlKey = false,
-    key,
-    metaKey = false,
-    shiftKey = false
-  } = event;
-  const isCtrl = ctrlKey || metaKey;
-  const activeGroup = state.layout.groups.find(group => group.focused);
-  if (!activeGroup) {
-    return state;
-  }
-
-  // Tab navigation
-  if (key === 'Tab' && isCtrl) {
-    const groupIndex = state.layout.groups.findIndex(group => group.id === activeGroup.id);
-    const nextGroupIndex = shiftKey ? (groupIndex - 1 + state.layout.groups.length) % state.layout.groups.length : (groupIndex + 1) % state.layout.groups.length;
-    const nextGroup = state.layout.groups[nextGroupIndex];
-    return focusEditorGroup(state, nextGroup.id);
-  }
-
-  // Switch between tabs within group
-  if (key === 'ArrowLeft' && isCtrl && !shiftKey) {
-    const activeTabIndex = activeGroup.tabs.findIndex(tab => tab.id === activeGroup.activeTabId);
-    if (activeTabIndex > 0) {
-      const prevTab = activeGroup.tabs[activeTabIndex - 1];
-      return switchTab(state, activeGroup.id, prevTab.id);
-    }
-  }
-  if (key === 'ArrowRight' && isCtrl && !shiftKey) {
-    const activeTabIndex = activeGroup.tabs.findIndex(tab => tab.id === activeGroup.activeTabId);
-    if (activeTabIndex < activeGroup.tabs.length - 1) {
-      const nextTab = activeGroup.tabs[activeTabIndex + 1];
-      return switchTab(state, activeGroup.id, nextTab.id);
-    }
-  }
-
-  // Close current tab
-  if (key === 'w' && isCtrl && activeGroup.activeTabId) {
-    return closeTab(state, activeGroup.id, activeGroup.activeTabId);
-  }
-
-  // Split editor
-  if (key === '\\' && isCtrl) {
-    const direction = shiftKey ? 'down' : 'right';
-    return splitEditorGroup(state, activeGroup.id, direction);
-  }
-  return state;
-};
-
-const moveTabToGroup = (state, sourceGroupId, targetGroupId, tabId, targetIndex) => {
-  const sourceGroup = state.layout.groups.find(group => group.id === sourceGroupId);
-  const targetGroup = state.layout.groups.find(group => group.id === targetGroupId);
-  if (!sourceGroup || !targetGroup || sourceGroupId === targetGroupId) {
-    return state;
-  }
-  const tabToMove = sourceGroup.tabs.find(tab => tab.id === tabId);
-  if (!tabToMove) {
-    return state;
-  }
-  const updatedGroups = state.layout.groups.map(group => {
-    if (group.id === sourceGroupId) {
-      const newTabs = group.tabs.filter(tab => tab.id !== tabId);
-      let newActiveTabId = group.activeTabId;
-      if (group.activeTabId === tabId) {
-        if (newTabs.length > 0) {
-          const removedIndex = group.tabs.findIndex(tab => tab.id === tabId);
-          newActiveTabId = newTabs[Math.min(removedIndex, newTabs.length - 1)].id;
-        } else {
-          newActiveTabId = undefined;
-        }
-      }
-      return {
-        ...group,
-        activeTabId: newActiveTabId,
-        tabs: newTabs
-      };
-    }
-    if (group.id === targetGroupId) {
-      const insertIndex = targetIndex === undefined ? group.tabs.length : targetIndex;
-      const newTabs = [...group.tabs];
-      newTabs.splice(insertIndex, 0, tabToMove);
-      return {
-        ...group,
-        activeTabId: tabId,
-        tabs: newTabs
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      activeGroupId: targetGroupId,
-      groups: updatedGroups
-    }
-  };
-};
-
-const startTabDrag = (state, tabId, groupId) => {
-  return {
-    dragState: {
-      draggedTabId: tabId,
-      sourceGroupId: groupId
-    },
-    state
-  };
-};
-const updateTabDrag = (state, dragState, targetGroupId, targetIndex) => {
-  return {
-    ...dragState,
-    targetGroupId,
-    targetIndex
-  };
-};
-const endTabDrag = (state, dragState) => {
-  if (dragState.targetGroupId && dragState.targetGroupId !== dragState.sourceGroupId) {
-    return moveTabToGroup(state, dragState.sourceGroupId, dragState.targetGroupId, dragState.draggedTabId, dragState.targetIndex);
-  }
-  return state;
-};
-
-const openTab = (state, groupId, tab) => {
-  const newTab = {
-    ...tab,
-    id: `tab-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
-  };
-  const groups = state.layout.groups.map(group => {
-    if (group.id === groupId) {
-      return {
-        ...group,
-        activeTabId: newTab.id,
-        tabs: [...group.tabs, newTab]
-      };
-    }
-    return group;
-  });
-  return {
-    ...state,
-    layout: {
-      ...state.layout,
-      groups
-    }
-  };
-};
-
-const restoreMainAreaState = (savedState, currentState) => {
-  try {
-    const parsed = JSON.parse(savedState);
-    return {
-      ...currentState,
-      layout: parsed.layout
-    };
-  } catch (error) {
-    console.error('Failed to restore main area state:', error);
-    return currentState;
-  }
-};
-
-const saveMainAreaState = state => {
-  return JSON.stringify({
-    layout: state.layout,
-    version: '1.0.0'
-  });
-};
-
-const mainAreaCommandMap = {
-  'MainArea.closeEditorGroup': wrapCommand((state, groupId) => closeEditorGroup(state, groupId)),
-  'MainArea.closeTab': wrapCommand((state, groupId, tabId) => closeTab(state, groupId, tabId)),
-  'MainArea.create': () => {},
-  'MainArea.endTabDrag': wrapCommand((state, dragState) => endTabDrag(state, dragState)),
-  'MainArea.focusEditorGroup': wrapCommand((state, groupId) => focusEditorGroup(state, groupId)),
-  'MainArea.getCommandIds': getCommandIds,
-  'MainArea.getVirtualDom': state => getMainAreaVirtualDom(state),
-  'MainArea.handleClick': wrapCommand((state, event) => handleMainAreaClick(state, event)),
-  'MainArea.handleKeyboard': wrapCommand((state, event) => handleMainAreaKeyboard(state, event)),
-  'MainArea.moveTabToGroup': wrapCommand((state, sourceGroupId, targetGroupId, tabId, targetIndex) => moveTabToGroup(state, sourceGroupId, targetGroupId, tabId, targetIndex)),
-  'MainArea.openTab': wrapCommand((state, groupId, tab) => openTab(state, groupId, tab)),
-  'MainArea.restoreState': wrapCommand((state, savedState) => restoreMainAreaState(savedState, state)),
-  'MainArea.saveState': state => saveMainAreaState(state),
-  'MainArea.splitEditorGroup': wrapCommand((state, groupId, direction) => splitEditorGroup(state, groupId, direction)),
-  'MainArea.startTabDrag': (state, tabId, groupId) => startTabDrag(state, tabId, groupId),
-  'MainArea.switchTab': wrapCommand((state, groupId, tabId) => switchTab(state, groupId, tabId)),
-  'MainArea.terminate': terminate,
-  'MainArea.updateTabDrag': (state, dragState, targetGroupId, targetIndex) => updateTabDrag(state, dragState, targetGroupId, targetIndex)
-};
-
 const main$1 = async () => {
-  registerCommands(mainAreaCommandMap);
+  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
-    commandMap: mainAreaCommandMap
+    commandMap: commandMap
   });
   set$1(rpc);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/main-area-worker",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",