design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspace): add external file change detection, conflict resolution UI, and diff editor

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-01 11:32:01 +00:00
parent 3a7c2fe781
commit a20d9ff138
7 changed files with 648 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@@ -1,5 +1,14 @@
# Changelog
## 2026-01-01 - 3.26.0 - feat(workspace)
add external file change detection, conflict resolution UI, and diff editor
- Watch open files for external changes with debounced file watchers (startWatchingFile/stopWatchingFile/stopAllFileWatchers).
- Prompt the user when disk changes conflict with unsaved local edits via dees-actionbar (actions: Load from Disk, Save Local, Compare).
- Introduce dees-workspace-diff-editor component and export it; support comparing and resolving diffs (diff-resolved / diff-closed events).
- Add setContentExternal in dees-workspace-monaco to update editor content from external sources while optionally preserving cursor, selections and scroll position.
- Start/stop file watchers when files are opened/closed and integrate diff view and actionbar into the workspace UI for seamless conflict handling.
## 2026-01-01 - 3.25.0 - feat(dees-actionbar)
add action bar component and improve workspace package update handling

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.25.0',
version: '3.26.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

359
ts_web/elements/00group-workspace/dees-workspace-diff-editor/dees-workspace-diff-editor.ts Normal file
View File

@@ -0,0 +1,359 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { MONACO_VERSION } from '../dees-workspace-monaco/version.js';
import { themeDefaultStyles } from '../../00theme.js';
import '../../00group-button/dees-button/dees-button.js';
import type * as monaco from 'monaco-editor';
declare global {
interface HTMLElementTagNameMap {
'dees-workspace-diff-editor': DeesWorkspaceDiffEditor;
}
}
@customElement('dees-workspace-diff-editor')
export class DeesWorkspaceDiffEditor extends DeesElement {
// DEMO
public static demo = () => html`
<dees-workspace-diff-editor
.originalContent=${'function hello() {\n console.log("Hello");\n}'}
.modifiedContent=${'function hello() {\n console.log("Hello World!");\n return true;\n}'}
.language=${'typescript'}
.filePath=${'/demo/example.ts'}
></dees-workspace-diff-editor>
`;
// INSTANCE
public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();
@property({ type: String })
accessor originalContent: string = '';
@property({ type: String })
accessor modifiedContent: string = '';
@property({ type: String })
accessor originalLabel: string = 'Disk Version';
@property({ type: String })
accessor modifiedLabel: string = 'Local Version';
@property({ type: String })
accessor language: string = 'typescript';
@property({ type: String })
accessor filePath: string = '';
private diffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
private monacoThemeSubscription: domtools.plugins.smartrx.rxjs.Subscription | null = null;
private originalModel: monaco.editor.ITextModel | null = null;
private modifiedModel: monaco.editor.ITextModel | null = null;
constructor() {
super();
domtools.DomTools.setupDomTools();
}
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
:host {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
* {
box-sizing: border-box;
}
.diff-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.diff-toolbar {
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 12%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
flex-shrink: 0;
}
.diff-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
}
.diff-filename {
font-weight: 600;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
}
.diff-labels {
font-size: 12px;
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
}
.diff-actions {
display: flex;
align-items: center;
gap: 8px;
}
.diff-container {
flex: 1;
min-height: 0;
width: 100%;
}
.nav-buttons {
display: flex;
gap: 4px;
}
.action-buttons {
display: flex;
gap: 8px;
margin-left: 16px;
}
`,
];
public render(): TemplateResult {
const fileName = this.filePath.split('/').pop() || 'file';
return html`
<div class="diff-wrapper">
<div class="diff-toolbar">
<div class="diff-info">
<span class="diff-filename">${fileName}</span>
<span class="diff-labels">${this.originalLabel} ↔ ${this.modifiedLabel}</span>
</div>
<div class="diff-actions">
<div class="nav-buttons">
<dees-button
type="outline"
@click=${this.goToPreviousDiff}
>Previous</dees-button>
<dees-button
type="outline"
@click=${this.goToNextDiff}
>Next</dees-button>
</div>
<div class="action-buttons">
<dees-button
type="highlighted"
@click=${this.acceptLocal}
>Use Local</dees-button>
<dees-button
type="outline"
@click=${this.acceptDisk}
>Use Disk</dees-button>
<dees-button
type="outline"
@click=${this.close}
>Close</dees-button>
</div>
</div>
</div>
<div class="diff-container"></div>
</div>
`;
}
public async firstUpdated(): Promise<void> {
await super.firstUpdated(new Map());
await this.initDiffEditor();
}
private async initDiffEditor(): Promise<void> {
const container = this.shadowRoot?.querySelector('.diff-container') as HTMLElement;
if (!container) return;
const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
// Wait for Monaco to be loaded (should already be loaded by dees-workspace-monaco)
let monacoInstance = (window as any).monaco as typeof monaco;
if (!monacoInstance) {
// Monaco not loaded yet, wait for it
await new Promise<void>((resolve) => {
const checkMonaco = setInterval(() => {
if ((window as any).monaco) {
clearInterval(checkMonaco);
resolve();
}
}, 100);
});
monacoInstance = (window as any).monaco as typeof monaco;
}
// Get current theme from domtools
const domtoolsInstance = await this.domtoolsPromise;
const isBright = domtoolsInstance.themeManager.goBrightBoolean;
const initialTheme = isBright ? 'vs' : 'vs-dark';
// Create unique URIs for models
const timestamp = Date.now();
const originalUri = monacoInstance.Uri.parse(`diff://original/${timestamp}${this.filePath}`);
const modifiedUri = monacoInstance.Uri.parse(`diff://modified/${timestamp}${this.filePath}`);
// Create models
this.originalModel = monacoInstance.editor.createModel(
this.originalContent,
this.language,
originalUri
);
this.modifiedModel = monacoInstance.editor.createModel(
this.modifiedContent,
this.language,
modifiedUri
);
// Create diff editor
this.diffEditor = monacoInstance.editor.createDiffEditor(container, {
automaticLayout: true,
readOnly: false, // Allow editing the modified (local) side
originalEditable: false, // Disk version is read-only
renderSideBySide: true,
ignoreTrimWhitespace: false,
fontSize: 14,
minimap: {
enabled: false,
},
});
// Set the theme
monacoInstance.editor.setTheme(initialTheme);
this.diffEditor.setModel({
original: this.originalModel,
modified: this.modifiedModel,
});
// Subscribe to theme changes
this.monacoThemeSubscription = domtoolsInstance.themeManager.themeObservable.subscribe(
(goBright: boolean) => {
const newTheme = goBright ? 'vs' : 'vs-dark';
monacoInstance.editor.setTheme(newTheme);
}
);
// Inject Monaco CSS if not already present
const cssId = 'monaco-diff-editor-css';
if (!this.shadowRoot?.getElementById(cssId)) {
const cssResponse = await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`);
const cssText = await cssResponse.text();
const styleElement = document.createElement('style');
styleElement.id = cssId;
styleElement.textContent = cssText;
this.shadowRoot?.append(styleElement);
}
// Navigate to first diff after a short delay
setTimeout(() => {
try {
this.diffEditor?.revealFirstDiff();
} catch {
// Ignore if no diffs
}
}, 100);
this.diffEditorDeferred.resolve(this.diffEditor);
}
public goToNextDiff(): void {
try {
this.diffEditor?.goToDiff('next');
} catch {
// Ignore if no more diffs
}
}
public goToPreviousDiff(): void {
try {
this.diffEditor?.goToDiff('previous');
} catch {
// Ignore if no more diffs
}
}
public acceptLocal(): void {
// User wants to keep local version (potentially with edits made in diff view)
const modifiedContent = this.diffEditor?.getModifiedEditor().getValue() || this.modifiedContent;
this.dispatchEvent(
new CustomEvent('diff-resolved', {
detail: { action: 'use-local', content: modifiedContent },
bubbles: true,
composed: true,
})
);
}
public acceptDisk(): void {
// User wants disk version
this.dispatchEvent(
new CustomEvent('diff-resolved', {
detail: { action: 'use-disk', content: this.originalContent },
bubbles: true,
composed: true,
})
);
}
public close(): void {
this.dispatchEvent(
new CustomEvent('diff-closed', {
bubbles: true,
composed: true,
})
);
}
public async disconnectedCallback(): Promise<void> {
await super.disconnectedCallback();
if (this.monacoThemeSubscription) {
this.monacoThemeSubscription.unsubscribe();
this.monacoThemeSubscription = null;
}
// Dispose models
if (this.originalModel) {
this.originalModel.dispose();
this.originalModel = null;
}
if (this.modifiedModel) {
this.modifiedModel.dispose();
this.modifiedModel = null;
}
// Dispose editor
if (this.diffEditor) {
this.diffEditor.dispose();
this.diffEditor = null;
}
}
}

1
ts_web/elements/00group-workspace/dees-workspace-diff-editor/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-diff-editor.js';

49
ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts
View File

@@ -242,4 +242,53 @@ export class DeesWorkspaceMonaco extends DeesElement {
this.monacoThemeSubscription = null;
}
}
/**
* Update content from external source with optional cursor preservation.
* Use this when the file content changes externally (e.g., file changed on disk).
* @param newContent The new content to set
* @param preserveCursor Whether to preserve cursor/scroll position (default: true)
*/
public async setContentExternal(
newContent: string,
preserveCursor: boolean = true
): Promise<void> {
const editor = await this.editorDeferred.promise;
const currentValue = editor.getValue();
if (currentValue === newContent) return;
// Save cursor state if preserving
const position = preserveCursor ? editor.getPosition() : null;
const selections = preserveCursor ? editor.getSelections() : null;
const scrollTop = preserveCursor ? editor.getScrollTop() : 0;
const scrollLeft = preserveCursor ? editor.getScrollLeft() : 0;
// Update content
this.isUpdatingFromExternal = true;
editor.setValue(newContent);
this.isUpdatingFromExternal = false;
// Restore cursor state if preserving
if (preserveCursor) {
if (position) {
// Clamp position to valid range
const model = editor.getModel();
const lineCount = model?.getLineCount() || 1;
const clampedLine = Math.min(position.lineNumber, lineCount);
const lineLength = model?.getLineMaxColumn(clampedLine) || 1;
const clampedColumn = Math.min(position.column, lineLength);
editor.setPosition({ lineNumber: clampedLine, column: clampedColumn });
}
if (selections && selections.length > 0) {
// Selections may be invalid after content change, wrap in try-catch
try {
editor.setSelections(selections);
} catch {
// Ignore invalid selections
}
}
editor.setScrollPosition({ scrollTop, scrollLeft });
}
}
}

229
ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
View File

@@ -26,6 +26,9 @@ import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-mon
import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-actionbar/dees-actionbar.js';
import type { DeesActionbar } from '../../dees-actionbar/dees-actionbar.js';
import '../dees-workspace-diff-editor/dees-workspace-diff-editor.js';
declare global {
interface HTMLElementTagNameMap {
@@ -254,6 +257,11 @@ testSmartPromise();
private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
private intelliSenseDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
// Open file watchers for external change detection
private openFileWatchers: Map<string, IFileWatcher> = new Map();
private fileChangeDebounce: Map<string, ReturnType<typeof setTimeout>> = new Map();
private actionbarElement: DeesActionbar | null = null;
// Auto-save functionality
@state()
accessor autoSave: boolean = false;
@@ -279,6 +287,18 @@ testSmartPromise();
@state()
accessor isDraggingTerminal: boolean = false;
// Diff view state
@state()
accessor showDiffView: boolean = false;
@state()
accessor diffViewConfig: {
filePath: string;
originalContent: string;
modifiedContent: string;
language: string;
} | null = null;
// Keyboard shortcut handler (bound for proper cleanup)
private keydownHandler = (e: KeyboardEvent) => {
// Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
@@ -914,7 +934,16 @@ testSmartPromise();
</div>
</div>
<div class="editor-content">
${this.openFiles.length === 0 ? html`
${this.showDiffView && this.diffViewConfig ? html`
<dees-workspace-diff-editor
.filePath=${this.diffViewConfig.filePath}
.originalContent=${this.diffViewConfig.originalContent}
.modifiedContent=${this.diffViewConfig.modifiedContent}
.language=${this.diffViewConfig.language}
@diff-resolved=${this.handleDiffResolved}
@diff-closed=${() => { this.showDiffView = false; this.diffViewConfig = null; }}
></dees-workspace-diff-editor>
` : this.openFiles.length === 0 ? html`
<div class="empty-state">
<dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
<span>Select a file to edit</span>
@@ -992,6 +1021,9 @@ testSmartPromise();
.executionEnvironment=${this.executionEnvironment}
@run-process=${this.handleRunProcess}
></dees-workspace-bottombar>
<!-- Action Bar for notifications -->
<dees-actionbar></dees-actionbar>
</div>
`;
}
@@ -1016,6 +1048,7 @@ testSmartPromise();
this.autoSaveInterval = null;
}
this.stopNodeModulesWatcher();
this.stopAllFileWatchers();
}
public async firstUpdated() {
@@ -1023,6 +1056,9 @@ testSmartPromise();
this.currentFileTreeWidth = this.fileTreeWidth;
this.currentTerminalHeight = this.terminalHeight;
// Get actionbar reference for file change notifications
this.actionbarElement = this.shadowRoot?.querySelector('dees-actionbar') as DeesActionbar;
if (this.executionEnvironment) {
await this.initializeWorkspace();
}
@@ -1186,6 +1222,191 @@ testSmartPromise();
}
}
// ========== Open File Watching for External Changes ==========
/**
* Start watching an open file for external changes
*/
private startWatchingFile(path: string): void {
if (!this.executionEnvironment || this.openFileWatchers.has(path)) return;
try {
const watcher = this.executionEnvironment.watch(
path,
(_event, _filename) => {
// Debounce to avoid multiple rapid triggers
const existingTimeout = this.fileChangeDebounce.get(path);
if (existingTimeout) {
clearTimeout(existingTimeout);
}
const timeout = setTimeout(() => {
this.handleExternalFileChange(path);
this.fileChangeDebounce.delete(path);
}, 300);
this.fileChangeDebounce.set(path, timeout);
}
);
this.openFileWatchers.set(path, watcher);
} catch (error) {
console.warn(`Could not watch file ${path}:`, error);
}
}
/**
* Stop watching a file when it's closed
*/
private stopWatchingFile(path: string): void {
const watcher = this.openFileWatchers.get(path);
if (watcher) {
watcher.stop();
this.openFileWatchers.delete(path);
}
const timeout = this.fileChangeDebounce.get(path);
if (timeout) {
clearTimeout(timeout);
this.fileChangeDebounce.delete(path);
}
}
/**
* Stop all file watchers
*/
private stopAllFileWatchers(): void {
for (const watcher of this.openFileWatchers.values()) {
watcher.stop();
}
this.openFileWatchers.clear();
for (const timeout of this.fileChangeDebounce.values()) {
clearTimeout(timeout);
}
this.fileChangeDebounce.clear();
}
/**
* Handle external file change - show actionbar if file has local changes,
* otherwise silently update with cursor preservation
*/
private async handleExternalFileChange(path: string): Promise<void> {
const file = this.openFiles.find(f => f.path === path);
if (!file || !this.executionEnvironment) return;
try {
// Read the new content from disk
const newContent = await this.executionEnvironment.readFile(path);
// If content is same as what we have, no action needed
if (newContent === file.content) return;
if (file.modified) {
// File has unsaved local changes AND disk changed - conflict!
const result = await this.actionbarElement?.show({
message: `"${file.name}" changed on disk. What do you want to do?`,
type: 'question',
icon: 'lucide:gitMerge',
actions: [
{ id: 'load-disk', label: 'Load from Disk', primary: true },
{ id: 'save-local', label: 'Save Local to Disk' },
{ id: 'compare', label: 'Compare' },
],
timeout: { duration: 15000, defaultActionId: 'load-disk' },
dismissible: true,
});
if (result?.actionId === 'load-disk') {
// Discard local changes, load disk version
await this.updateFileContent(path, newContent, false);
} else if (result?.actionId === 'save-local') {
// Keep local changes and save to disk (overwrite external)
await this.executionEnvironment.writeFile(path, file.content);
// Mark as saved
this.openFiles = this.openFiles.map(f =>
f.path === path ? { ...f, modified: false } : f
);
} else if (result?.actionId === 'compare') {
// Open diff view
this.openDiffView(path, file.content, newContent);
}
// If dismissed, do nothing - user can manually resolve later
} else {
// No local changes - silently update with cursor preservation
await this.updateFileContent(path, newContent, true);
}
} catch (error) {
console.warn(`Failed to handle external change for ${path}:`, error);
}
}
/**
* Update file content in state and optionally in the editor
*/
private async updateFileContent(
path: string,
newContent: string,
preserveCursor: boolean
): Promise<void> {
// Update internal state
this.openFiles = this.openFiles.map(f =>
f.path === path ? { ...f, content: newContent, modified: false } : f
);
// If this is the active file, update Monaco editor
if (path === this.activeFilePath) {
const editor = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
if (editor) {
await editor.setContentExternal(newContent, preserveCursor);
}
}
}
/**
* Open the diff view to compare local and disk versions
*/
private openDiffView(path: string, localContent: string, diskContent: string): void {
this.diffViewConfig = {
filePath: path,
originalContent: diskContent,
modifiedContent: localContent,
language: this.getLanguageFromPath(path),
};
this.showDiffView = true;
}
/**
* Handle diff view resolution
*/
private async handleDiffResolved(e: CustomEvent): Promise<void> {
const { action, content } = e.detail;
const path = this.diffViewConfig?.filePath;
if (!path || !this.executionEnvironment) {
this.showDiffView = false;
this.diffViewConfig = null;
return;
}
if (action === 'use-local') {
// Save local content to disk
await this.executionEnvironment.writeFile(path, content);
this.openFiles = this.openFiles.map(f =>
f.path === path ? { ...f, content, modified: false } : f
);
// Update editor if active
if (path === this.activeFilePath) {
const editor = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
if (editor) {
await editor.setContentExternal(content, false);
}
}
} else if (action === 'use-disk') {
// Update editor with disk content
await this.updateFileContent(path, content, false);
}
this.showDiffView = false;
this.diffViewConfig = null;
}
private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
const { path, name } = e.detail;
await this.openFile(path, name);
@@ -1210,6 +1431,9 @@ testSmartPromise();
];
this.activeFilePath = path;
// Start watching for external changes
this.startWatchingFile(path);
// Initialize IntelliSense lazily after first file opens (Monaco loads on demand)
if (!this.intelliSenseInitialized) {
// Wait for Monaco editor to mount and load Monaco from CDN
@@ -1246,6 +1470,9 @@ testSmartPromise();
if (!confirmed) return;
}
// Stop watching this file
this.stopWatchingFile(path);
this.openFiles = this.openFiles.filter(f => f.path !== path);
// If closing the active file, activate another one

1
ts_web/elements/00group-workspace/index.ts
View File

@@ -7,3 +7,4 @@ export * from './dees-workspace-terminal-preview/index.js';
export * from './dees-workspace-markdown/index.js';
export * from './dees-workspace-markdownoutlet/index.js';
export * from './dees-workspace-bottombar/index.js';
export * from './dees-workspace-diff-editor/index.js';