feat(workspace): add external file change detection, conflict resolution UI, and diff editor
This commit is contained in:
@@ -1,5 +1,14 @@
|
|||||||
# Changelog
|
# 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)
|
## 2026-01-01 - 3.25.0 - feat(dees-actionbar)
|
||||||
add action bar component and improve workspace package update handling
|
add action bar component and improve workspace package update handling
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@design.estate/dees-catalog',
|
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.'
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from './dees-workspace-diff-editor.js';
|
||||||
@@ -242,4 +242,53 @@ export class DeesWorkspaceMonaco extends DeesElement {
|
|||||||
this.monacoThemeSubscription = null;
|
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 });
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -26,6 +26,9 @@ import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-mon
|
|||||||
import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
|
import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
|
||||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||||
import '@design.estate/dees-wcctools/demotools';
|
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 {
|
declare global {
|
||||||
interface HTMLElementTagNameMap {
|
interface HTMLElementTagNameMap {
|
||||||
@@ -254,6 +257,11 @@ testSmartPromise();
|
|||||||
private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
private nodeModulesDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||||
private intelliSenseDebounceTimeout: 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
|
// Auto-save functionality
|
||||||
@state()
|
@state()
|
||||||
accessor autoSave: boolean = false;
|
accessor autoSave: boolean = false;
|
||||||
@@ -279,6 +287,18 @@ testSmartPromise();
|
|||||||
@state()
|
@state()
|
||||||
accessor isDraggingTerminal: boolean = false;
|
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)
|
// Keyboard shortcut handler (bound for proper cleanup)
|
||||||
private keydownHandler = (e: KeyboardEvent) => {
|
private keydownHandler = (e: KeyboardEvent) => {
|
||||||
// Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
|
// Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
|
||||||
@@ -914,7 +934,16 @@ testSmartPromise();
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="editor-content">
|
<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">
|
<div class="empty-state">
|
||||||
<dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
|
<dees-icon .icon=${'lucide:fileCode'} iconSize="48"></dees-icon>
|
||||||
<span>Select a file to edit</span>
|
<span>Select a file to edit</span>
|
||||||
@@ -992,6 +1021,9 @@ testSmartPromise();
|
|||||||
.executionEnvironment=${this.executionEnvironment}
|
.executionEnvironment=${this.executionEnvironment}
|
||||||
@run-process=${this.handleRunProcess}
|
@run-process=${this.handleRunProcess}
|
||||||
></dees-workspace-bottombar>
|
></dees-workspace-bottombar>
|
||||||
|
|
||||||
|
<!-- Action Bar for notifications -->
|
||||||
|
<dees-actionbar></dees-actionbar>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@@ -1016,6 +1048,7 @@ testSmartPromise();
|
|||||||
this.autoSaveInterval = null;
|
this.autoSaveInterval = null;
|
||||||
}
|
}
|
||||||
this.stopNodeModulesWatcher();
|
this.stopNodeModulesWatcher();
|
||||||
|
this.stopAllFileWatchers();
|
||||||
}
|
}
|
||||||
|
|
||||||
public async firstUpdated() {
|
public async firstUpdated() {
|
||||||
@@ -1023,6 +1056,9 @@ testSmartPromise();
|
|||||||
this.currentFileTreeWidth = this.fileTreeWidth;
|
this.currentFileTreeWidth = this.fileTreeWidth;
|
||||||
this.currentTerminalHeight = this.terminalHeight;
|
this.currentTerminalHeight = this.terminalHeight;
|
||||||
|
|
||||||
|
// Get actionbar reference for file change notifications
|
||||||
|
this.actionbarElement = this.shadowRoot?.querySelector('dees-actionbar') as DeesActionbar;
|
||||||
|
|
||||||
if (this.executionEnvironment) {
|
if (this.executionEnvironment) {
|
||||||
await this.initializeWorkspace();
|
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 }>) {
|
private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
|
||||||
const { path, name } = e.detail;
|
const { path, name } = e.detail;
|
||||||
await this.openFile(path, name);
|
await this.openFile(path, name);
|
||||||
@@ -1210,6 +1431,9 @@ testSmartPromise();
|
|||||||
];
|
];
|
||||||
this.activeFilePath = path;
|
this.activeFilePath = path;
|
||||||
|
|
||||||
|
// Start watching for external changes
|
||||||
|
this.startWatchingFile(path);
|
||||||
|
|
||||||
// Initialize IntelliSense lazily after first file opens (Monaco loads on demand)
|
// Initialize IntelliSense lazily after first file opens (Monaco loads on demand)
|
||||||
if (!this.intelliSenseInitialized) {
|
if (!this.intelliSenseInitialized) {
|
||||||
// Wait for Monaco editor to mount and load Monaco from CDN
|
// Wait for Monaco editor to mount and load Monaco from CDN
|
||||||
@@ -1246,6 +1470,9 @@ testSmartPromise();
|
|||||||
if (!confirmed) return;
|
if (!confirmed) return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Stop watching this file
|
||||||
|
this.stopWatchingFile(path);
|
||||||
|
|
||||||
this.openFiles = this.openFiles.filter(f => f.path !== path);
|
this.openFiles = this.openFiles.filter(f => f.path !== path);
|
||||||
|
|
||||||
// If closing the active file, activate another one
|
// If closing the active file, activate another one
|
||||||
|
|||||||
@@ -7,3 +7,4 @@ export * from './dees-workspace-terminal-preview/index.js';
|
|||||||
export * from './dees-workspace-markdown/index.js';
|
export * from './dees-workspace-markdown/index.js';
|
||||||
export * from './dees-workspace-markdownoutlet/index.js';
|
export * from './dees-workspace-markdownoutlet/index.js';
|
||||||
export * from './dees-workspace-bottombar/index.js';
|
export * from './dees-workspace-bottombar/index.js';
|
||||||
|
export * from './dees-workspace-diff-editor/index.js';
|
||||||
|
|||||||
Reference in New Issue
Block a user