@workbench-kit/monaco 0.0.2-prototype.0.2.13 → 0.0.2-prototype.0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workbench-kit/monaco",
-  "version": "0.0.2-prototype.0.2.13",
+  "version": "0.0.2-prototype.0.2.14",
   "private": false,
   "type": "module",
   "exports": {

package/src/WorkbenchMonacoDiffEditor.tsx

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+import type { DiffOnMount } from '@monaco-editor/react';
+import type * as Monaco from 'monaco-editor';
+
+import { DiffEditor } from './monaco-loader.js';
+import type { WorkbenchMonaco } from './monaco-loader.js';
+import { monacoThemeForWorkspaceTheme } from './monacoWorkbenchTheme.js';
+import {
+  prepareMonacoWorkbenchEditor,
+  type WorkbenchMonacoEditorTheme,
+} from './WorkbenchMonacoEditor.js';
+
+export interface WorkbenchMonacoDiffEditorProps {
+  beforeMount?: ((monacoInstance: WorkbenchMonaco) => void) | undefined;
+  className?: string | undefined;
+  height?: number | string | undefined;
+  language?: string | undefined;
+  loading?: ReactNode | undefined;
+  modified: string;
+  modifiedModelPath?: string | undefined;
+  onModifiedChange?: ((value: string) => void) | undefined;
+  onMount?: DiffOnMount | undefined;
+  options?: Monaco.editor.IDiffEditorConstructionOptions | undefined;
+  original: string;
+  originalModelPath?: string | undefined;
+  readOnly?: boolean | undefined;
+  theme?: WorkbenchMonacoEditorTheme | undefined;
+}
+
+const defaultDiffEditorOptions: Monaco.editor.IDiffEditorConstructionOptions = {
+  automaticLayout: true,
+  contextmenu: true,
+  fixedOverflowWidgets: true,
+  fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+  fontSize: 13,
+  lineHeight: 20,
+  glyphMargin: false,
+  minimap: { enabled: false },
+  overviewRulerBorder: false,
+  overviewRulerLanes: 0,
+  padding: { bottom: 12, top: 12 },
+  renderLineHighlight: 'line',
+  scrollBeyondLastLine: false,
+  scrollbar: {
+    alwaysConsumeMouseWheel: false,
+    horizontalScrollbarSize: 10,
+    verticalScrollbarSize: 10,
+  },
+  wordWrap: 'on',
+};
+
+export function WorkbenchMonacoDiffEditor({
+  beforeMount,
+  className,
+  height = '100%',
+  language = 'plaintext',
+  loading = (
+    <div className="ui-panel-loading ui-panel-centered-state" role="status" aria-live="polite">
+      <i aria-hidden className="codicon codicon-loading codicon-modifier-spin" />
+      <span>Loading diff editor...</span>
+    </div>
+  ),
+  modified,
+  modifiedModelPath,
+  onModifiedChange,
+  onMount,
+  options,
+  original,
+  originalModelPath,
+  readOnly = false,
+  theme = 'dark',
+}: WorkbenchMonacoDiffEditorProps) {
+  const modifiedChangeDisposableRef = useRef<Monaco.IDisposable | null>(null);
+
+  useEffect(() => {
+    return () => {
+      modifiedChangeDisposableRef.current?.dispose();
+      modifiedChangeDisposableRef.current = null;
+    };
+  }, []);
+
+  const handleBeforeMount = useCallback(
+    (monacoInstance: WorkbenchMonaco) => {
+      prepareMonacoWorkbenchEditor(monacoInstance, theme);
+      beforeMount?.(monacoInstance);
+    },
+    [beforeMount, theme],
+  );
+
+  const handleMount = useCallback<DiffOnMount>(
+    (diffEditor, monacoInstance) => {
+      modifiedChangeDisposableRef.current?.dispose();
+      modifiedChangeDisposableRef.current = null;
+
+      if (onModifiedChange && !readOnly) {
+        const modifiedEditor = diffEditor.getModifiedEditor();
+        modifiedChangeDisposableRef.current = modifiedEditor.onDidChangeModelContent(() => {
+          onModifiedChange(modifiedEditor.getValue());
+        });
+      }
+
+      onMount?.(diffEditor, monacoInstance);
+    },
+    [onModifiedChange, onMount, readOnly],
+  );
+
+  return (
+    <DiffEditor
+      className={className}
+      beforeMount={handleBeforeMount}
+      height={height}
+      language={language}
+      loading={loading}
+      modified={modified}
+      modifiedModelPath={modifiedModelPath}
+      options={{
+        ...defaultDiffEditorOptions,
+        ...options,
+        originalEditable: options?.originalEditable ?? false,
+        readOnly,
+      }}
+      original={original}
+      originalModelPath={originalModelPath}
+      theme={monacoThemeForWorkspaceTheme(theme)}
+      onMount={handleMount}
+    />
+  );
+}

package/src/index.ts

@@ -1,8 +1,8 @@
-export type { OnMount } from '@monaco-editor/react';
+export type { DiffOnMount, OnMount } from '@monaco-editor/react';
 export type { IDisposable, editor } from 'monaco-editor';
 export type { WorkbenchMonaco } from './monaco-loader.js';
 
-export { Editor, loader, monaco } from './monaco-loader.js';
+export { DiffEditor, Editor, loader, monaco } from './monaco-loader.js';
 export {
   createMonacoWorker,
   installMonacoEnvironment,
@@ -45,3 +45,7 @@ export {
   type WorkbenchMonacoEditorProps,
   type WorkbenchMonacoEditorTheme,
 } from './WorkbenchMonacoEditor.js';
+export {
+  WorkbenchMonacoDiffEditor,
+  type WorkbenchMonacoDiffEditorProps,
+} from './WorkbenchMonacoDiffEditor.js';

package/src/monaco-loader.ts

@@ -1,8 +1,8 @@
-import Editor, { loader } from '@monaco-editor/react';
+import Editor, { DiffEditor, loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 
 loader.config({ monaco });
 
 export type WorkbenchMonaco = typeof monaco;
 
-export { Editor, loader, monaco };
+export { DiffEditor, Editor, loader, monaco };

package/src/testing/vitestMock.tsx

@@ -8,6 +8,15 @@ export interface MockWorkbenchMonacoEditorProps {
   value?: string;
 }
 
+export interface MockWorkbenchMonacoDiffEditorProps {
+  language?: string;
+  modified?: string;
+  onModifiedChange?: (value: string) => void;
+  original?: string;
+  readOnly?: boolean;
+  theme?: string;
+}
+
 export function WorkbenchMonacoEditor({
   language,
   onChange,
@@ -25,6 +34,37 @@ export function WorkbenchMonacoEditor({
   });
 }
 
+export function WorkbenchMonacoDiffEditor({
+  language,
+  modified,
+  onModifiedChange,
+  original,
+  readOnly = false,
+  theme = 'dark',
+}: MockWorkbenchMonacoDiffEditorProps) {
+  return createElement(
+    'div',
+    {
+      'data-language': language,
+      'data-readonly': readOnly ? 'true' : 'false',
+      'data-theme': monacoThemeForWorkspaceTheme(theme),
+      'data-testid': 'monaco-diff-editor',
+    },
+    createElement('textarea', {
+      'data-side': 'original',
+      readOnly: true,
+      value: original ?? '',
+    }),
+    createElement('textarea', {
+      'data-side': 'modified',
+      readOnly,
+      value: modified ?? '',
+      onChange: (event: ChangeEvent<HTMLTextAreaElement>) =>
+        onModifiedChange?.(event.currentTarget.value),
+    }),
+  );
+}
+
 export const useMonacoWorkbenchThemeSync = () => undefined;
 export const prepareMonacoWorkbenchEditor = () => undefined;
 export const defineMonacoWorkbenchTheme = () => undefined;
@@ -58,6 +98,7 @@ export const monaco = {
 };
 
 export const Editor = WorkbenchMonacoEditor;
+export const DiffEditor = WorkbenchMonacoDiffEditor;
 export const loader = { config: () => undefined };
 
 export function createWorkbenchMonacoMockModule(
@@ -68,6 +109,8 @@ export function createWorkbenchMonacoMockModule(
 
   return {
     WorkbenchMonacoEditor: renderEditor ?? defaultRender,
+    WorkbenchMonacoDiffEditor,
+    DiffEditor: WorkbenchMonacoDiffEditor,
     useMonacoWorkbenchThemeSync: () => undefined,
     prepareMonacoWorkbenchEditor: () => undefined,
     monacoThemeForWorkspaceTheme: (theme: string) => theme,