@workbench-kit/shell-react 0.0.2-prototype.0.2.10

package/src/editor/pane-visibility.ts

@@ -0,0 +1,130 @@
+export type EditorViewMode = 'code' | 'form' | 'preview';
+
+export type EditorPaneKind = 'code' | 'form' | 'preview';
+
+export interface EditorPaneVisibility {
+  readonly code: boolean;
+  readonly form: boolean;
+  readonly preview: boolean;
+}
+
+export const DEFAULT_EDITOR_PANE_VISIBILITY: EditorPaneVisibility = {
+  code: true,
+  form: false,
+  preview: false,
+};
+
+export function editorViewModeToPaneVisibility(mode: EditorViewMode): EditorPaneVisibility {
+  switch (mode) {
+    case 'form':
+      return {
+        code: false,
+        form: true,
+        preview: false,
+      };
+    case 'preview':
+      return {
+        code: false,
+        form: false,
+        preview: true,
+      };
+    case 'code':
+    default:
+      return DEFAULT_EDITOR_PANE_VISIBILITY;
+  }
+}
+
+export function resolveDefaultEditorPaneVisibility(
+  defaultViewMode: EditorViewMode | undefined,
+  options: { readonly formEligible?: boolean | undefined } = {},
+): EditorPaneVisibility {
+  if (defaultViewMode !== undefined) {
+    return editorViewModeToPaneVisibility(defaultViewMode);
+  }
+
+  if (options.formEligible) {
+    return editorViewModeToPaneVisibility('form');
+  }
+
+  return DEFAULT_EDITOR_PANE_VISIBILITY;
+}
+
+/**
+ * Maps pane visibility to the exclusive icon-select value (viewport).
+ * If multiple panes are somehow visible, prefers preview → form → code.
+ */
+export function paneVisibilityToPrimaryViewMode(visibility: EditorPaneVisibility): EditorViewMode {
+  const exclusive =
+    Number(visibility.code) + Number(visibility.form) + Number(visibility.preview) === 1;
+  if (exclusive) {
+    if (visibility.preview) return 'preview';
+    if (visibility.form) return 'form';
+    return 'code';
+  }
+
+  if (visibility.preview) return 'preview';
+  if (visibility.form) return 'form';
+  return 'code';
+}
+
+export function countVisibleEditorPanes(visibility: EditorPaneVisibility): number {
+  return Number(visibility.code) + Number(visibility.form) + Number(visibility.preview);
+}
+
+export function toggleEditorPaneVisibility(
+  visibility: EditorPaneVisibility,
+  pane: EditorPaneKind,
+): EditorPaneVisibility {
+  const nextValue = !visibility[pane];
+
+  if (!nextValue && countVisibleEditorPanes(visibility) <= 1) {
+    return visibility;
+  }
+
+  return {
+    ...visibility,
+    [pane]: nextValue,
+  };
+}
+
+export function sanitizeEditorPaneVisibility(
+  visibility: EditorPaneVisibility,
+  options: { formEligible: boolean; previewEligible: boolean },
+): EditorPaneVisibility {
+  return resolveEffectiveEditorPaneVisibility(visibility, options);
+}
+
+export function resolveEffectiveEditorPaneVisibility(
+  preference: EditorPaneVisibility,
+  options: { formEligible: boolean; previewEligible: boolean },
+): EditorPaneVisibility {
+  const effective: EditorPaneVisibility = {
+    code: preference.code,
+    form: preference.form && options.formEligible,
+    preview: preference.preview && options.previewEligible,
+  };
+
+  if (countVisibleEditorPanes(effective) === 0) {
+    return DEFAULT_EDITOR_PANE_VISIBILITY;
+  }
+
+  return effective;
+}
+
+export function getVisibleEditorPaneKinds(visibility: EditorPaneVisibility): EditorPaneKind[] {
+  const kinds: EditorPaneKind[] = [];
+
+  if (visibility.code) {
+    kinds.push('code');
+  }
+
+  if (visibility.form) {
+    kinds.push('form');
+  }
+
+  if (visibility.preview) {
+    kinds.push('preview');
+  }
+
+  return kinds;
+}

package/src/editor/resource.ts

@@ -0,0 +1,36 @@
+import {
+  JDW_SCHEMA_DOCUMENT_FILE_EXTENSION,
+  JDW_SCHEMA_DOCUMENT_MIME,
+  JDW_WIDGET_DOCUMENT_FILE_EXTENSION,
+  JDW_WIDGET_DOCUMENT_MIME,
+} from '@workbench-kit/react/jdw/document';
+import { parseWorkspaceResourceUri } from '@workbench-kit/workspace';
+
+export function pathForResource(resourceUri: string): string {
+  const workspaceUri = parseWorkspaceResourceUri(resourceUri);
+  return workspaceUri?.kind === 'file' ? workspaceUri.path : resourceUri;
+}
+
+export function copyResourcePath(resourceUri: string): void {
+  const path = pathForResource(resourceUri);
+  const clipboard = globalThis.navigator?.clipboard;
+  if (!clipboard) return;
+
+  void clipboard.writeText(path).catch(() => undefined);
+}
+
+export function mimeTypeForResource(resourceUri: string): string | undefined {
+  const path = pathForResource(resourceUri).toLowerCase();
+
+  if (path.endsWith(JDW_SCHEMA_DOCUMENT_FILE_EXTENSION)) return JDW_SCHEMA_DOCUMENT_MIME;
+  if (path.endsWith(JDW_WIDGET_DOCUMENT_FILE_EXTENSION)) return JDW_WIDGET_DOCUMENT_MIME;
+  if (path.endsWith('.json')) return 'application/json';
+  if (path.endsWith('.ts') || path.endsWith('.tsx')) return 'text/typescript';
+  if (path.endsWith('.js') || path.endsWith('.jsx')) return 'text/javascript';
+  if (path.endsWith('.css')) return 'text/css';
+  if (path.endsWith('.html')) return 'text/html';
+  if (path.endsWith('.md') || path.endsWith('.mdx')) return 'text/markdown';
+  if (path.endsWith('.yml') || path.endsWith('.yaml')) return 'text/yaml';
+
+  return undefined;
+}

package/src/editor/state-storage.ts

@@ -0,0 +1,182 @@
+import {
+  createBrowserWorkbenchStorage,
+  type EditorGroupState,
+  type EditorLayoutDirection,
+  type EditorLayoutNode,
+  type EditorState,
+  type EditorTabState,
+  type WorkbenchStorageReader,
+  type WorkbenchStorageWriter,
+} from '@workbench-kit/workbench-core';
+
+export const DEFAULT_WORKBENCH_EDITOR_STATE_STORAGE_KEY = 'workbench-kit/.workbench/editors';
+
+export function isWorkbenchEditorStatePersistenceAvailable(): boolean {
+  return createBrowserWorkbenchStorage({ kind: 'local' }) !== undefined;
+}
+
+export function editorStateToStorageValue(state: EditorState): EditorState {
+  return {
+    activeGroupId: state.activeGroupId,
+    groups: state.groups.map((group) => ({
+      activeTabId: group.activeTabId,
+      id: group.id,
+      tabs: group.tabs.map((tab) => ({
+        dirty: false,
+        editorId: tab.editorId,
+        icon: tab.icon,
+        id: tab.id,
+        pinned: tab.pinned,
+        preview: tab.preview,
+        resourceUri: tab.resourceUri,
+        title: tab.title,
+      })),
+    })),
+    layout: cloneEditorLayoutForStorage(state.layout),
+  };
+}
+
+export function readPersistedEditorState(
+  storageKey = DEFAULT_WORKBENCH_EDITOR_STATE_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): EditorState | undefined {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) return undefined;
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) return undefined;
+
+    return parseEditorStateStorageValue(JSON.parse(raw) as unknown);
+  } catch {
+    return undefined;
+  }
+}
+
+export function writePersistedEditorState(
+  state: EditorState,
+  storageKey = DEFAULT_WORKBENCH_EDITOR_STATE_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) return;
+
+  try {
+    resolvedStorage.setItem(storageKey, JSON.stringify(editorStateToStorageValue(state), null, 2));
+  } catch {
+    // Ignore quota and security errors so the shell keeps working offline.
+  }
+}
+
+function parseEditorStateStorageValue(value: unknown): EditorState | undefined {
+  if (!isRecord(value)) {
+    return undefined;
+  }
+
+  const groups = Array.isArray(value.groups)
+    ? value.groups.flatMap(parseEditorGroupStorageValue)
+    : [];
+  const layout = parseEditorLayoutStorageValue(value.layout);
+  if (groups.length === 0 || !layout) {
+    return undefined;
+  }
+
+  return {
+    activeGroupId: typeof value.activeGroupId === 'string' ? value.activeGroupId : undefined,
+    groups,
+    layout,
+  };
+}
+
+function parseEditorGroupStorageValue(value: unknown): EditorGroupState[] {
+  if (!isRecord(value) || typeof value.id !== 'string' || !Array.isArray(value.tabs)) {
+    return [];
+  }
+
+  return [
+    {
+      activeTabId: typeof value.activeTabId === 'string' ? value.activeTabId : undefined,
+      id: value.id,
+      tabs: value.tabs.flatMap(parseEditorTabStorageValue),
+    },
+  ];
+}
+
+function parseEditorTabStorageValue(value: unknown): EditorTabState[] {
+  if (
+    !isRecord(value) ||
+    typeof value.id !== 'string' ||
+    typeof value.editorId !== 'string' ||
+    typeof value.resourceUri !== 'string'
+  ) {
+    return [];
+  }
+
+  return [
+    {
+      dirty: false,
+      editorId: value.editorId,
+      icon: typeof value.icon === 'string' ? value.icon : undefined,
+      id: value.id,
+      pinned: typeof value.pinned === 'boolean' ? value.pinned : true,
+      preview: typeof value.preview === 'boolean' ? value.preview : false,
+      resourceUri: value.resourceUri,
+      title: typeof value.title === 'string' ? value.title : undefined,
+    },
+  ];
+}
+
+function parseEditorLayoutStorageValue(value: unknown): EditorLayoutNode | undefined {
+  if (!isRecord(value) || typeof value.type !== 'string') {
+    return undefined;
+  }
+
+  if (value.type === 'group') {
+    return typeof value.groupId === 'string'
+      ? {
+          groupId: value.groupId,
+          type: 'group',
+        }
+      : undefined;
+  }
+
+  if (value.type !== 'split' || !Array.isArray(value.children)) {
+    return undefined;
+  }
+
+  const direction = parseEditorLayoutDirection(value.direction);
+  const children = value.children
+    .map(parseEditorLayoutStorageValue)
+    .filter((child): child is EditorLayoutNode => child !== undefined);
+  if (!direction || children.length === 0) {
+    return undefined;
+  }
+
+  return {
+    children,
+    direction,
+    ...(typeof value.primarySizePercent === 'number' && Number.isFinite(value.primarySizePercent)
+      ? { primarySizePercent: value.primarySizePercent }
+      : {}),
+    type: 'split',
+  };
+}
+
+function parseEditorLayoutDirection(value: unknown): EditorLayoutDirection | undefined {
+  return value === 'horizontal' || value === 'vertical' ? value : undefined;
+}
+
+function cloneEditorLayoutForStorage(layout: EditorLayoutNode): EditorLayoutNode {
+  if (layout.type === 'group') {
+    return { ...layout };
+  }
+
+  return {
+    ...layout,
+    children: layout.children.map(cloneEditorLayoutForStorage),
+  };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}

package/src/editor/tab-context-menu.ts

@@ -0,0 +1,118 @@
+import {
+  createCommandRegistry,
+  executeCommand as executeRegisteredCommand,
+  resolveCommandMenuItems,
+} from '@workbench-kit/platform';
+import type { ContextMenuItem } from '@workbench-kit/react/overlay';
+import {
+  WORKBENCH_COMMAND_SURFACE_EDITOR,
+  WORKBENCH_EDITOR_DELETE_COMMAND_ID,
+  commandMenuItemsToContextMenuItems,
+  createWorkbenchEditorCommands,
+  createWorkbenchEditorTabMenuEntries,
+  type WorkbenchEditorCommandContext,
+} from '@workbench-kit/react/workbench/commands';
+import type {
+  EditorService,
+  EditorTabState,
+  ExtensionRegistry,
+} from '@workbench-kit/workbench-core';
+
+import { copyResourcePath, pathForResource } from './resource.js';
+import {
+  appendExtensionContextMenuItems,
+  createExtensionContextMenuItems,
+} from '../extensions/context-menu.js';
+
+const editorCommandRegistry = createCommandRegistry(createWorkbenchEditorCommands());
+const editorTabMenuEntries = createWorkbenchEditorTabMenuEntries().filter((entry) =>
+  entry.type === 'separator'
+    ? entry.id !== 'tab-danger-separator'
+    : entry.commandId !== WORKBENCH_EDITOR_DELETE_COMMAND_ID,
+);
+const EDITOR_TAB_CONTEXT_MENU = 'editor/tab/context';
+const EDITOR_TAB_EXTENSION_MENU_SEPARATOR_ID = 'editor-tab-extension-separator';
+
+export function createEditorTabContextMenuItems({
+  editorService,
+  executeExtensionCommand,
+  extensionRegistry,
+  groupId,
+  tab,
+  tabs,
+}: {
+  editorService: EditorService;
+  executeExtensionCommand?: ((commandId: string) => unknown) | undefined;
+  extensionRegistry?: ExtensionRegistry | undefined;
+  groupId: string;
+  tab: EditorTabState;
+  tabs: readonly EditorTabState[];
+}): ContextMenuItem[] {
+  const closeableTabs = tabs.filter((candidate) => candidate.id !== tab.id);
+  const context: WorkbenchEditorCommandContext = {
+    canCloseAll: tabs.length > 0,
+    canCloseOthers: closeableTabs.length > 0,
+    canClosePath: true,
+    canCopyPath: true,
+    canDeletePath: false,
+    canDiscardFile: false,
+    canSaveFile: false,
+    canSplitDown: true,
+    canSplitRight: true,
+    canTogglePinned: true,
+    closeAll: () => tabs.forEach((candidate) => editorService.closeEditor(candidate.id)),
+    closeOthers: () =>
+      closeableTabs.forEach((candidate) => editorService.closeEditor(candidate.id)),
+    closePath: () => editorService.closeEditor(tab.id),
+    copyPath: () => copyResourcePath(tab.resourceUri),
+    deletePath: () => undefined,
+    discardFile: () => undefined,
+    filePath: pathForResource(tab.resourceUri),
+    hasMultipleOpenFiles: tabs.length > 1,
+    hasOpenFiles: tabs.length > 0,
+    hasUnsavedChanges: tab.dirty,
+    isPinned: tab.pinned,
+    saveFile: () => undefined,
+    splitDown: () =>
+      editorService.splitEditor({
+        afterGroupId: groupId,
+        direction: 'vertical',
+        tabId: tab.id,
+      }),
+    splitRight: () =>
+      editorService.splitEditor({
+        afterGroupId: groupId,
+        direction: 'horizontal',
+        tabId: tab.id,
+      }),
+    togglePinned: () => editorService.togglePinnedEditor(tab.id),
+  };
+
+  const contextKeys = {
+    'editor.hasResource': Boolean(tab.resourceUri),
+    'editor.isDirty': tab.dirty,
+    'editor.isPinned': tab.pinned,
+  };
+
+  const baseItems = commandMenuItemsToContextMenuItems(
+    resolveCommandMenuItems({
+      context,
+      contextKeys,
+      entries: editorTabMenuEntries,
+      registry: editorCommandRegistry,
+      surface: WORKBENCH_COMMAND_SURFACE_EDITOR,
+    }),
+    (commandId) => executeRegisteredCommand(editorCommandRegistry, commandId, context, contextKeys),
+  );
+
+  return appendExtensionContextMenuItems(
+    baseItems,
+    createExtensionContextMenuItems({
+      contextKeys,
+      executeCommand: executeExtensionCommand,
+      extensionRegistry,
+      menu: EDITOR_TAB_CONTEXT_MENU,
+    }),
+    EDITOR_TAB_EXTENSION_MENU_SEPARATOR_ID,
+  );
+}

package/src/editor/use-editor.ts

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useReducer } from 'react';
+import type { EditorHost, EditorService, EditorTabState } from '@workbench-kit/workbench-core';
+
+import { useWorkbench } from '../shell/provider.js';
+import type { EditorDocumentViewProvider } from './view-providers.js';
+
+export function useEditorService(): EditorService {
+  return useWorkbench().editorService;
+}
+
+export function useEditorState(): ReturnType<EditorService['getState']> {
+  const editorService = useEditorService();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  return editorService.getState();
+}
+
+export function useActiveEditorTab(): EditorTabState | undefined {
+  const editorService = useEditorService();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  return editorService.getActiveTab();
+}
+
+export function useEditorHost(tabId?: string): EditorHost | undefined {
+  const editorService = useEditorService();
+  const { extensionRegistry, waitForExtensionStartup } = useWorkbench();
+  const editorState = useEditorState();
+  const forceRender = useForceRender();
+  const activeGroup = editorState.groups.find((group) => group.id === editorState.activeGroupId);
+  const resolvedTabId = tabId ?? activeGroup?.activeTabId;
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void waitForExtensionStartup().then(() => {
+      if (!cancelled) {
+        forceRender();
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [forceRender, waitForExtensionStartup]);
+
+  useEffect(() => {
+    // Late onView / onCommand activations register editor host factories after the
+    // first paint that restores persisted tabs. Retry host creation when they land.
+    const disposable = extensionRegistry.onDidActivateExtension(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [extensionRegistry, forceRender]);
+
+  if (!resolvedTabId) {
+    return undefined;
+  }
+
+  // Do not memoize createEditorHost — a failed lookup before factory registration
+  // must be retried after extension activation / startup re-renders.
+  // EditorService already caches successful hosts per tab id.
+  return editorService.createEditorHost(resolvedTabId);
+}
+
+export function useEditorDocumentViewProviders(
+  localProviders?: readonly EditorDocumentViewProvider[] | undefined,
+): readonly EditorDocumentViewProvider[] {
+  const { editorDocumentViewProviders, extensionRegistry, waitForExtensionStartup } =
+    useWorkbench();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorDocumentViewProviders.onDidChangeProviders(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorDocumentViewProviders, forceRender]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    // Document view providers often register during onStartup activate().
+    // Re-render after startup so Form/Preview panes are not stuck code-only.
+    void waitForExtensionStartup().then(() => {
+      if (!cancelled) {
+        forceRender();
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [forceRender, waitForExtensionStartup]);
+
+  useEffect(() => {
+    const disposable = extensionRegistry.onDidActivateExtension(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [extensionRegistry, forceRender]);
+
+  const registryProviders = editorDocumentViewProviders.getProviders();
+
+  return useMemo(
+    () =>
+      localProviders && localProviders.length > 0
+        ? [...localProviders, ...registryProviders]
+        : registryProviders,
+    [localProviders, registryProviders],
+  );
+}
+
+function useForceRender() {
+  const [, forceRender] = useReducer((count: number) => count + 1, 0);
+  return forceRender;
+}