@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/workbench/workspace/WorkspaceDraftsContext.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+import {
+  type WorkspaceFileDraftMap,
+  resolveWorkspaceFileDraft,
+  updateWorkspaceFileDraft,
+  saveWorkspaceFileDraft,
+  discardWorkspaceDraft,
+} from '@workbench-kit/workspace';
+
+export interface WorkspaceDraftsContextValue {
+  drafts: WorkspaceFileDraftMap;
+  getDraft: (path: string, fileContent: string) => string;
+  isDirty: (path: string, fileContent: string) => boolean;
+  updateDraft: (path: string, content: string, fileContent: string) => void;
+  saveDraft: (path: string, content: string) => void;
+  discardDraft: (path: string, fileContent: string) => void;
+}
+
+export const WorkspaceDraftsContext = createContext<WorkspaceDraftsContextValue | null>(null);
+
+export interface WorkspaceDraftsProviderProps {
+  children: ReactNode;
+}
+
+export function WorkspaceDraftsProvider({ children }: WorkspaceDraftsProviderProps) {
+  const [drafts, setDrafts] = useState<WorkspaceFileDraftMap>({});
+
+  const updateDraft = (path: string, content: string, fileContent: string) => {
+    setDrafts((prev) => updateWorkspaceFileDraft({ content, drafts: prev, fileContent, path }));
+  };
+
+  const saveDraft = (path: string, content: string) => {
+    setDrafts((prev) => saveWorkspaceFileDraft({ content, drafts: prev, path }));
+  };
+
+  const discardDraft = (path: string, fileContent: string) => {
+    setDrafts((prev) => discardWorkspaceDraft({ drafts: prev, fileContent, path }));
+  };
+
+  const getDraft = (path: string, fileContent: string): string => {
+    const draft = drafts[path];
+    return resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content;
+  };
+
+  const isDirty = (path: string, fileContent: string): boolean => {
+    const draft = drafts[path];
+    return (
+      resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content !==
+      fileContent
+    );
+  };
+
+  return (
+    <WorkspaceDraftsContext.Provider
+      value={{
+        drafts,
+        getDraft,
+        isDirty,
+        updateDraft,
+        saveDraft,
+        discardDraft,
+      }}
+    >
+      {children}
+    </WorkspaceDraftsContext.Provider>
+  );
+}
+
+export function useWorkspaceDrafts(): WorkspaceDraftsContextValue {
+  const context = useContext(WorkspaceDraftsContext);
+  if (context) return context;
+
+  // Context fallback
+  const [localDrafts, setLocalDrafts] = useState<WorkspaceFileDraftMap>({});
+
+  const updateDraft = (path: string, content: string, fileContent: string) => {
+    setLocalDrafts((prev) =>
+      updateWorkspaceFileDraft({ content, drafts: prev, fileContent, path }),
+    );
+  };
+
+  const saveDraft = (path: string, content: string) => {
+    setLocalDrafts((prev) => saveWorkspaceFileDraft({ content, drafts: prev, path }));
+  };
+
+  const discardDraft = (path: string, fileContent: string) => {
+    setLocalDrafts((prev) => discardWorkspaceDraft({ drafts: prev, fileContent, path }));
+  };
+
+  const getDraft = (path: string, fileContent: string): string => {
+    const draft = localDrafts[path];
+    return resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content;
+  };
+
+  const isDirty = (path: string, fileContent: string): boolean => {
+    const draft = localDrafts[path];
+    return (
+      resolveWorkspaceFileDraft({ draft, file: { path, content: fileContent } }).content !==
+      fileContent
+    );
+  };
+
+  return {
+    drafts: localDrafts,
+    getDraft,
+    isDirty,
+    updateDraft,
+    saveDraft,
+    discardDraft,
+  };
+}

package/src/workbench/workspace/WorkspaceEditor.tsx

@@ -7,16 +7,21 @@ import { Toolbar } from '../../primitives/Toolbar';
 import { extensionOfPath } from './path';
 import { WorkspaceFileIcon } from './WorkspaceFileIcon';
 import type { WorkspaceFile } from './types';
+import { JDW_DOCUMENT_MIME } from '../../jdw/document';
+import {
+  configureWorkspaceEditorJsonDiagnostics,
+  monacoModelPathForWorkspaceFile,
+} from './workspaceJsonDiagnostics';
 
 loader.config({ monaco });
 
 export type WorkspaceEditorTheme = 'dark' | 'light';
 
-const MONACO_DARK_THEME_ID = 'newchobo-workbench-dark';
-const MONACO_LIGHT_THEME_ID = 'newchobo-workbench-light';
+export const MONACO_DARK_THEME_ID = 'newchobo-workbench-dark';
+export const MONACO_LIGHT_THEME_ID = 'newchobo-workbench-light';
 let monacoThemeDefined = false;
 
-function defineMonacoWorkbenchTheme(monacoInstance: typeof monaco) {
+export function defineMonacoWorkbenchTheme(monacoInstance: typeof monaco) {
   if (monacoThemeDefined) return;
 
   monacoInstance.editor.defineTheme(MONACO_DARK_THEME_ID, {
@@ -98,12 +103,33 @@ export function monacoThemeForWorkspaceTheme(theme: WorkspaceEditorTheme) {
 }
 
 export function languageForFile(path: string, mimeType?: string) {
-  const extension = extensionOfPath(path);
-  if (mimeType === 'application/json') return 'json';
-  if (mimeType === 'text/css') return 'css';
-  if (mimeType === 'text/html') return 'html';
-  if (mimeType === 'text/markdown') return 'markdown';
+  switch (mimeType) {
+    case 'application/javascript':
+    case 'text/javascript':
+      return 'javascript';
+    case 'application/json':
+    case JDW_DOCUMENT_MIME:
+    case 'application/vnd.workbench-kit.widget+json':
+      return 'json';
+    case 'application/typescript':
+    case 'text/typescript':
+      return 'typescript';
+    case 'application/xml':
+    case 'text/xml':
+      return 'xml';
+    case 'text/css':
+      return 'css';
+    case 'text/html':
+      return 'html';
+    case 'text/markdown':
+      return 'markdown';
+    case 'text/x-sql':
+      return 'sql';
+    case 'text/yaml':
+      return 'yaml';
+  }
 
+  const extension = extensionOfPath(path);
   switch (extension) {
     case 'css':
       return 'css';
@@ -119,6 +145,8 @@ export function languageForFile(path: string, mimeType?: string) {
     case 'md':
     case 'mdx':
       return 'markdown';
+    case 'sql':
+      return 'sql';
     case 'ts':
     case 'tsx':
       return 'typescript';
@@ -136,8 +164,10 @@ export interface WorkspaceEditorProps {
   compact?: boolean;
   file: WorkspaceFile;
   onChange?: (content: string) => void;
+  onEditorMount?: OnMount;
   onSave?: (content: string) => void;
   readOnly?: boolean;
+  showFileBar?: boolean;
   showHeader?: boolean;
   theme?: WorkspaceEditorTheme;
   value?: string;
@@ -147,14 +177,19 @@ export function WorkspaceEditor({
   compact,
   file,
   onChange,
+  onEditorMount,
   onSave,
   readOnly = !onChange,
+  showFileBar = true,
   showHeader = true,
   theme = 'dark',
   value = file.content,
 }: WorkspaceEditorProps) {
   const language = languageForFile(file.path, file.mimeType);
   const handleMount: OnMount = (editor, monacoInstance) => {
+    configureWorkspaceEditorJsonDiagnostics(monacoInstance, file);
+    onEditorMount?.(editor, monacoInstance);
+
     if (!onSave) return;
 
     editor.addCommand(monacoInstance.KeyMod.CtrlCmd | monacoInstance.KeyCode.KeyS, () => {
@@ -170,7 +205,7 @@ export function WorkspaceEditor({
             <Toolbar>
               <Badge variant="muted">{language}</Badge>
               {file.source ? <Badge variant="muted">{file.source}</Badge> : null}
-              <IconButton icon="codicon-split" label="Split editor" />
+              <IconButton icon="codicon-split-horizontal" label="Split editor" />
             </Toolbar>
           }
         >
@@ -179,13 +214,13 @@ export function WorkspaceEditor({
             {file.path}
           </span>
         </PanelHeader>
-      ) : (
+      ) : showFileBar ? (
         <div className="workspace-editor__file-bar" title={file.path}>
           <WorkspaceFileIcon mimeType={file.mimeType} path={file.path} />
           <span className="workspace-editor__file-path">{file.path}</span>
           <span className="workspace-editor__file-meta">{file.mimeType ?? language}</span>
         </div>
-      )}
+      ) : null}
       <PanelBody className="workbench-monaco-panel__body">
         <div className="workspace-editor__monaco">
           <Editor
@@ -213,7 +248,7 @@ export function WorkspaceEditor({
               tabSize: 2,
               wordWrap: 'on',
             }}
-            path={file.path}
+            path={monacoModelPathForWorkspaceFile(file.path)}
             theme={monacoThemeForWorkspaceTheme(theme)}
             value={value}
             onChange={(nextValue) => onChange?.(nextValue ?? '')}