@lvce-editor/main-area-worker 8.2.0 → 8.3.0

package/dist/mainAreaWorkerMain.js

@@ -2301,6 +2301,36 @@ const getActiveGroup = (groups, activeGroupId) => {
 const Left = 'left';
 const Right = 'right';
 
+const getActiveTab = state => {
+  const {
+    layout
+  } = state;
+  const {
+    groups
+  } = layout;
+  const activeGroup = groups.find(group => group.focused);
+  if (!activeGroup || !activeGroup.activeTabId) {
+    return undefined;
+  }
+  const activeTab = activeGroup.tabs.find(tab => tab.id === activeGroup.activeTabId);
+  if (!activeTab) {
+    return undefined;
+  }
+  return {
+    groupId: activeGroup.id,
+    tab: activeTab
+  };
+};
+
+const handleClickTogglePreview = async state => {
+  const activeTabInfo = getActiveTab(state);
+  if (!activeTabInfo || !activeTabInfo.tab.uri) {
+    return state;
+  }
+  await invoke('Layout.showPreview', activeTabInfo.tab.uri);
+  return state;
+};
+
 const splitEditorGroup$1 = (state, groupId, direction) => {
   const {
     layout
@@ -2372,6 +2402,8 @@ const handleClickAction = async (state, action, rawGroupId) => {
       return state;
     case 'split-right':
       return splitEditorGroup$1(state, activeGroup.id, Right);
+    case 'toggle-preview':
+      return handleClickTogglePreview(state);
     default:
       return state;
   }
@@ -3134,6 +3166,7 @@ const CopyRelativePath = 'Copy Relative Path';
 const FindFileReferences = 'Find File References';
 const RevealInExplorer = 'Reveal in Explorer';
 const SplitEditorGroup = 'Split Editor Group';
+const TogglePreview = 'Toggle Preview';
 
 const splitEditorGroup = () => {
   return i18nString(SplitEditorGroup);
@@ -3162,6 +3195,9 @@ const copyPath = () => {
 const copyRelativePath = () => {
   return i18nString(CopyRelativePath);
 };
+const togglePreview = () => {
+  return i18nString(TogglePreview);
+};
 
 const menuEntrySeparator = {
   command: '',
@@ -3971,24 +4007,55 @@ const getTabsVirtualDom = (group, groupIndex, tabsChildCount) => {
   }, ...group.tabs.flatMap((tab, tabIndex) => renderTab(tab, tab.id === group.activeTabId, tabIndex, groupIndex))];
 };
 
+const isHtmlFile = tab => {
+  if (!tab || !tab.uri) {
+    return false;
+  }
+  return tab.uri.endsWith('.html');
+};
+
 const renderEditorGroupActions = (group, groupIndex, splitButtonEnabled) => {
-  if (!splitButtonEnabled) {
+  const activeTab = group.tabs.find(tab => tab.id === group.activeTabId);
+  const showTogglePreview = isHtmlFile(activeTab);
+  if (!splitButtonEnabled && !showTogglePreview) {
     return [];
   }
+  const buttons = [];
+  if (showTogglePreview) {
+    buttons.push({
+      ariaLabel: 'Preview',
+      childCount: 1,
+      className: 'IconButton',
+      'data-action': 'toggle-preview',
+      'data-groupId': String(group.id),
+      name: 'toggle-preview',
+      onClick: HandleClickAction,
+      title: togglePreview(),
+      type: Button$1
+    }, {
+      childCount: 0,
+      className: 'MaskIcon MaskIconPreview',
+      type: Div
+    });
+  }
+  if (splitButtonEnabled) {
+    buttons.push({
+      childCount: 1,
+      className: 'EditorGroupActionButton SplitEditorGroupButton',
+      'data-action': 'split-right',
+      'data-groupId': String(group.id),
+      onClick: HandleClickAction,
+      title: splitEditorGroup(),
+      type: Button$1
+    }, text('split'));
+  }
   return [{
-    childCount: 1,
+    childCount: buttons.length / 2,
+    // Each button has 2 nodes (button + text)
     className: 'EditorGroupActions',
     role: 'toolbar',
     type: Div
-  }, {
-    childCount: 1,
-    className: 'EditorGroupActionButton SplitEditorGroupButton',
-    'data-action': 'split-right',
-    'data-groupId': String(group.id),
-    onClick: HandleClickAction,
-    title: splitEditorGroup(),
-    type: Button$1
-  }, text('split')];
+  }, ...buttons];
 };
 
 const renderEditorGroupHeader = (group, groupIndex, splitButtonEnabled) => {
@@ -4100,34 +4167,13 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleClickAction,
-    params: ['handleClickAction', 'event.target.dataset.action', 'event.target.dataset.groupId']
+    params: ['handleClickAction', TargetName, 'event.target.dataset.groupId']
   }, {
     name: HandleHeaderDoubleClick,
     params: ['handleHeaderDoubleClick', 'event.target.className', 'event.target.dataset.groupId']
   }];
 };
 
-const getActiveTab = state => {
-  const {
-    layout
-  } = state;
-  const {
-    groups
-  } = layout;
-  const activeGroup = groups.find(group => group.focused);
-  if (!activeGroup || !activeGroup.activeTabId) {
-    return undefined;
-  }
-  const activeTab = activeGroup.tabs.find(tab => tab.id === activeGroup.activeTabId);
-  if (!activeTab) {
-    return undefined;
-  }
-  return {
-    groupId: activeGroup.id,
-    tab: activeTab
-  };
-};
-
 const saveEditor = async editorUid => {
   await invoke('Editor.save', editorUid);
 };
@@ -4271,6 +4317,7 @@ const commandMap = {
   'MainArea.handleClickAction': wrapCommand(handleClickAction),
   'MainArea.handleClickCloseTab': wrapCommand(handleClickCloseTab),
   'MainArea.handleClickTab': wrapCommand(handleClickTab),
+  'MainArea.handleClickTogglePreview': wrapCommand(handleClickTogglePreview),
   'MainArea.handleDoubleClick': wrapCommand(handleDoubleClick),
   'MainArea.handleHeaderDoubleClick': wrapCommand(handleHeaderDoubleClick),
   'MainArea.handleModifiedStatusChange': wrapCommand(handleModifiedStatusChange),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/main-area-worker",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "Main Area Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,6 @@
   "type": "module",
   "main": "dist/mainAreaWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/virtual-dom-worker": "^7.1.0"
+    "@lvce-editor/virtual-dom-worker": "^7.2.0"
   }
 }