feat(editor/runtime): Replace bare editor with Monaco-based editor and add runtime + workspace/filetree integration
This commit is contained in:
@@ -1 +0,0 @@
|
||||
export * from './dees-editor-bare.js';
|
||||
@@ -0,0 +1,530 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IExecutionEnvironment, IFileEntry } from '../../00group-runtime/index.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
import '../../dees-contextmenu/dees-contextmenu.js';
|
||||
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-editor-filetree': DeesEditorFiletree;
|
||||
}
|
||||
}
|
||||
|
||||
interface ITreeNode extends IFileEntry {
|
||||
children?: ITreeNode[];
|
||||
expanded?: boolean;
|
||||
level: number;
|
||||
}
|
||||
|
||||
@customElement('dees-editor-filetree')
|
||||
export class DeesEditorFiletree extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="width: 300px; height: 400px; position: relative;">
|
||||
<dees-editor-filetree></dees-editor-filetree>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
accessor executionEnvironment: IExecutionEnvironment | null = null;
|
||||
|
||||
@property({ type: String })
|
||||
accessor rootPath: string = '/';
|
||||
|
||||
@property({ type: String })
|
||||
accessor selectedPath: string = '';
|
||||
|
||||
@state()
|
||||
accessor treeData: ITreeNode[] = [];
|
||||
|
||||
@state()
|
||||
accessor isLoading: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor errorMessage: string = '';
|
||||
|
||||
private expandedPaths: Set<string> = new Set();
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 9%)')};
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-radius: 4px;
|
||||
margin: 1px 4px;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.tree-item:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 14%)')};
|
||||
}
|
||||
|
||||
.tree-item.selected {
|
||||
background: ${cssManager.bdTheme('hsl(210 100% 95%)', 'hsl(210 50% 20%)')};
|
||||
color: ${cssManager.bdTheme('hsl(210 100% 40%)', 'hsl(210 100% 70%)')};
|
||||
}
|
||||
|
||||
.tree-item.selected:hover {
|
||||
background: ${cssManager.bdTheme('hsl(210 100% 92%)', 'hsl(210 50% 25%)')};
|
||||
}
|
||||
|
||||
.indent {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
|
||||
.expand-icon.expanded {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.expand-icon.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.file-icon dees-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.file-icon.folder {
|
||||
color: ${cssManager.bdTheme('hsl(45 80% 45%)', 'hsl(45 70% 55%)')};
|
||||
}
|
||||
|
||||
.file-icon.file {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.file-icon.typescript {
|
||||
color: hsl(211 60% 48%);
|
||||
}
|
||||
|
||||
.file-icon.javascript {
|
||||
color: hsl(53 93% 54%);
|
||||
}
|
||||
|
||||
.file-icon.json {
|
||||
color: hsl(45 80% 50%);
|
||||
}
|
||||
|
||||
.file-icon.html {
|
||||
color: hsl(14 77% 52%);
|
||||
}
|
||||
|
||||
.file-icon.css {
|
||||
color: hsl(228 77% 59%);
|
||||
}
|
||||
|
||||
.file-icon.markdown {
|
||||
color: hsl(0 0% 50%);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 85%)')};
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: hsl(0 70% 50%);
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
font-style: italic;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.executionEnvironment) {
|
||||
return html`
|
||||
<div class="empty">
|
||||
No execution environment provided.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.isLoading) {
|
||||
return html`
|
||||
<div class="loading">
|
||||
Loading files...
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.errorMessage) {
|
||||
return html`
|
||||
<div class="error">
|
||||
${this.errorMessage}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (this.treeData.length === 0) {
|
||||
return html`
|
||||
<div class="empty">
|
||||
No files found.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="tree-container">
|
||||
${this.renderTree(this.treeData)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTree(nodes: ITreeNode[]): TemplateResult[] {
|
||||
return nodes.map(node => this.renderNode(node));
|
||||
}
|
||||
|
||||
private renderNode(node: ITreeNode): TemplateResult {
|
||||
const isDirectory = node.type === 'directory';
|
||||
const isExpanded = this.expandedPaths.has(node.path);
|
||||
const isSelected = node.path === this.selectedPath;
|
||||
const iconClass = this.getFileIconClass(node);
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="tree-item ${isSelected ? 'selected' : ''}"
|
||||
style="padding-left: ${8 + node.level * 16}px"
|
||||
@click=${(e: MouseEvent) => this.handleItemClick(e, node)}
|
||||
@contextmenu=${(e: MouseEvent) => this.handleContextMenu(e, node)}
|
||||
>
|
||||
<span class="expand-icon ${isExpanded ? 'expanded' : ''} ${!isDirectory ? 'hidden' : ''}">
|
||||
<dees-icon .icon=${'lucide:chevronRight'} iconSize="12"></dees-icon>
|
||||
</span>
|
||||
<span class="file-icon ${iconClass}">
|
||||
<dees-icon .icon=${this.getFileIcon(node)} iconSize="16"></dees-icon>
|
||||
</span>
|
||||
<span class="file-name">${node.name}</span>
|
||||
</div>
|
||||
${isDirectory && isExpanded && node.children
|
||||
? this.renderTree(node.children)
|
||||
: ''}
|
||||
`;
|
||||
}
|
||||
|
||||
private getFileIcon(node: ITreeNode): string {
|
||||
if (node.type === 'directory') {
|
||||
return this.expandedPaths.has(node.path) ? 'lucide:folderOpen' : 'lucide:folder';
|
||||
}
|
||||
|
||||
const ext = node.name.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
return 'lucide:fileCode';
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
return 'lucide:fileCode';
|
||||
case 'json':
|
||||
return 'lucide:fileJson';
|
||||
case 'html':
|
||||
return 'lucide:fileCode';
|
||||
case 'css':
|
||||
case 'scss':
|
||||
case 'less':
|
||||
return 'lucide:fileCode';
|
||||
case 'md':
|
||||
return 'lucide:fileText';
|
||||
case 'png':
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
case 'gif':
|
||||
case 'svg':
|
||||
return 'lucide:image';
|
||||
default:
|
||||
return 'lucide:file';
|
||||
}
|
||||
}
|
||||
|
||||
private getFileIconClass(node: ITreeNode): string {
|
||||
if (node.type === 'directory') return 'folder';
|
||||
|
||||
const ext = node.name.split('.').pop()?.toLowerCase();
|
||||
switch (ext) {
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
return 'typescript';
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
return 'javascript';
|
||||
case 'json':
|
||||
return 'json';
|
||||
case 'html':
|
||||
return 'html';
|
||||
case 'css':
|
||||
case 'scss':
|
||||
case 'less':
|
||||
return 'css';
|
||||
case 'md':
|
||||
return 'markdown';
|
||||
default:
|
||||
return 'file';
|
||||
}
|
||||
}
|
||||
|
||||
private async handleItemClick(e: MouseEvent, node: ITreeNode) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (node.type === 'directory') {
|
||||
await this.toggleDirectory(node);
|
||||
} else {
|
||||
this.selectedPath = node.path;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('file-select', {
|
||||
detail: { path: node.path, name: node.name },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private async toggleDirectory(node: ITreeNode) {
|
||||
if (this.expandedPaths.has(node.path)) {
|
||||
this.expandedPaths.delete(node.path);
|
||||
} else {
|
||||
this.expandedPaths.add(node.path);
|
||||
// Load children if not already loaded
|
||||
if (!node.children || node.children.length === 0) {
|
||||
await this.loadDirectoryContents(node);
|
||||
}
|
||||
}
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private async loadDirectoryContents(node: ITreeNode) {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
try {
|
||||
const entries = await this.executionEnvironment.readDir(node.path);
|
||||
node.children = this.sortEntries(entries).map(entry => ({
|
||||
...entry,
|
||||
level: node.level + 1,
|
||||
expanded: false,
|
||||
children: entry.type === 'directory' ? [] : undefined,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error(`Failed to load directory ${node.path}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
private async handleContextMenu(e: MouseEvent, node: ITreeNode) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const menuItems = [];
|
||||
|
||||
if (node.type === 'directory') {
|
||||
menuItems.push(
|
||||
{
|
||||
name: 'New File',
|
||||
iconName: 'lucide:filePlus',
|
||||
action: async () => this.createNewFile(node.path),
|
||||
},
|
||||
{
|
||||
name: 'New Folder',
|
||||
iconName: 'lucide:folderPlus',
|
||||
action: async () => this.createNewFolder(node.path),
|
||||
},
|
||||
{ name: 'divider' }
|
||||
);
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
name: 'Delete',
|
||||
iconName: 'lucide:trash2',
|
||||
action: async () => this.deleteItem(node),
|
||||
});
|
||||
|
||||
await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
|
||||
}
|
||||
|
||||
private async createNewFile(parentPath: string) {
|
||||
const fileName = prompt('Enter file name:');
|
||||
if (!fileName || !this.executionEnvironment) return;
|
||||
|
||||
const newPath = parentPath === '/' ? `/${fileName}` : `${parentPath}/${fileName}`;
|
||||
try {
|
||||
await this.executionEnvironment.writeFile(newPath, '');
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('file-created', {
|
||||
detail: { path: newPath },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to create file:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private async createNewFolder(parentPath: string) {
|
||||
const folderName = prompt('Enter folder name:');
|
||||
if (!folderName || !this.executionEnvironment) return;
|
||||
|
||||
const newPath = parentPath === '/' ? `/${folderName}` : `${parentPath}/${folderName}`;
|
||||
try {
|
||||
await this.executionEnvironment.mkdir(newPath);
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('folder-created', {
|
||||
detail: { path: newPath },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to create folder:', error);
|
||||
}
|
||||
}
|
||||
|
||||
private async deleteItem(node: ITreeNode) {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
const confirmed = confirm(`Delete ${node.name}?`);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
await this.executionEnvironment.rm(node.path, { recursive: node.type === 'directory' });
|
||||
await this.refresh();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('item-deleted', {
|
||||
detail: { path: node.path, type: node.type },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete item:', error);
|
||||
}
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
await this.loadTree();
|
||||
}
|
||||
|
||||
public async updated(changedProperties: Map<string, any>) {
|
||||
if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
|
||||
await this.loadTree();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadTree() {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
this.isLoading = true;
|
||||
this.errorMessage = '';
|
||||
|
||||
try {
|
||||
// Wait for environment to be ready
|
||||
if (!this.executionEnvironment.ready) {
|
||||
await this.executionEnvironment.init();
|
||||
}
|
||||
|
||||
const entries = await this.executionEnvironment.readDir(this.rootPath);
|
||||
this.treeData = this.sortEntries(entries).map(entry => ({
|
||||
...entry,
|
||||
level: 0,
|
||||
expanded: false,
|
||||
children: entry.type === 'directory' ? [] : undefined,
|
||||
}));
|
||||
} catch (error) {
|
||||
this.errorMessage = `Failed to load files: ${error}`;
|
||||
console.error('Failed to load file tree:', error);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private sortEntries(entries: IFileEntry[]): IFileEntry[] {
|
||||
return entries.sort((a, b) => {
|
||||
// Directories first
|
||||
if (a.type !== b.type) {
|
||||
return a.type === 'directory' ? -1 : 1;
|
||||
}
|
||||
// Then alphabetically
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
}
|
||||
|
||||
public async refresh() {
|
||||
this.expandedPaths.clear();
|
||||
await this.loadTree();
|
||||
}
|
||||
|
||||
public selectFile(path: string) {
|
||||
this.selectedPath = path;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-editor-filetree.js';
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
domtools
|
||||
} from '@design.estate/dees-element';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import { DeesEditorBare } from '../dees-editor-bare/dees-editor-bare.js';
|
||||
import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
|
||||
|
||||
const deferred = domtools.plugins.smartpromise.defer();
|
||||
|
||||
@@ -52,7 +52,7 @@ export class DeesEditorMarkdown extends DeesElement {
|
||||
return html`
|
||||
<div class="gridcontainer">
|
||||
<div class="editorContainer">
|
||||
<dees-editor-bare
|
||||
<dees-editor-monaco
|
||||
.language=${'markdown'}
|
||||
.content=${`# a test content
|
||||
|
||||
@@ -76,7 +76,7 @@ const hello = 'yes'
|
||||
\`\`\`
|
||||
`}
|
||||
wordWrap="bounded"
|
||||
></dees-editor-bare>
|
||||
></dees-editor-monaco>
|
||||
</div>
|
||||
<div class="outletContainer">
|
||||
<dees-editormarkdownoutlet></dees-editormarkdownoutlet>
|
||||
@@ -87,7 +87,7 @@ const hello = 'yes'
|
||||
|
||||
public async firstUpdated(_changedPropertiesArg) {
|
||||
await super.firstUpdated(_changedPropertiesArg);
|
||||
const editor = this.shadowRoot.querySelector('dees-editor-bare') as DeesEditorBare;
|
||||
const editor = this.shadowRoot.querySelector('dees-editor-monaco') as DeesEditorMonaco;
|
||||
|
||||
// lets care about wiring the markdown stuff.
|
||||
const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
|
||||
|
||||
@@ -15,14 +15,14 @@ import type * as monaco from 'monaco-editor';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-editor-bare': DeesEditorBare;
|
||||
'dees-editor-monaco': DeesEditorMonaco;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-editor-bare')
|
||||
export class DeesEditorBare extends DeesElement {
|
||||
@customElement('dees-editor-monaco')
|
||||
export class DeesEditorMonaco extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = () => html` <dees-editor-bare></dees-editor-bare> `;
|
||||
public static demo = () => html`<dees-editor-monaco></dees-editor-monaco>`;
|
||||
|
||||
// STATIC
|
||||
public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
|
||||
@@ -88,17 +88,17 @@ export class DeesEditorBare extends DeesElement {
|
||||
const container = this.shadowRoot.getElementById('container');
|
||||
const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
|
||||
|
||||
if (!DeesEditorBare.monacoDeferred) {
|
||||
DeesEditorBare.monacoDeferred = domtools.plugins.smartpromise.defer();
|
||||
if (!DeesEditorMonaco.monacoDeferred) {
|
||||
DeesEditorMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
|
||||
const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
|
||||
const script = document.createElement('script');
|
||||
script.src = scriptUrl;
|
||||
script.onload = () => {
|
||||
DeesEditorBare.monacoDeferred.resolve();
|
||||
DeesEditorMonaco.monacoDeferred.resolve();
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
await DeesEditorBare.monacoDeferred.promise;
|
||||
await DeesEditorMonaco.monacoDeferred.promise;
|
||||
|
||||
(window as any).require.config({
|
||||
paths: { vs: `${monacoCdnBase}/min/vs` },
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-editor-monaco.js';
|
||||
@@ -0,0 +1,594 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
|
||||
import { WebContainerEnvironment } from '../../00group-runtime/index.js';
|
||||
import '../dees-editor-monaco/dees-editor-monaco.js';
|
||||
import '../dees-editor-filetree/dees-editor-filetree.js';
|
||||
import '../../dees-terminal/dees-terminal.js';
|
||||
import '../../dees-icon/dees-icon.js';
|
||||
import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-editor-workspace': DeesEditorWorkspace;
|
||||
}
|
||||
}
|
||||
|
||||
interface IOpenFile {
|
||||
path: string;
|
||||
name: string;
|
||||
content: string;
|
||||
modified: boolean;
|
||||
}
|
||||
|
||||
@customElement('dees-editor-workspace')
|
||||
export class DeesEditorWorkspace extends DeesElement {
|
||||
public static demo = () => {
|
||||
const env = new WebContainerEnvironment();
|
||||
return html`
|
||||
<div style="width: 100%; height: 600px; position: relative;">
|
||||
<dees-editor-workspace .executionEnvironment=${env}></dees-editor-workspace>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
accessor executionEnvironment: IExecutionEnvironment | null = null;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor showFileTree: boolean = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor showTerminal: boolean = true;
|
||||
|
||||
@property({ type: Number })
|
||||
accessor fileTreeWidth: number = 250;
|
||||
|
||||
@property({ type: Number })
|
||||
accessor terminalHeight: number = 200;
|
||||
|
||||
@state()
|
||||
accessor openFiles: IOpenFile[] = [];
|
||||
|
||||
@state()
|
||||
accessor activeFilePath: string = '';
|
||||
|
||||
@state()
|
||||
accessor isTerminalCollapsed: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor isFileTreeCollapsed: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor isInitializing: boolean = true;
|
||||
|
||||
private editorElement: DeesEditorMonaco | null = null;
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 7%)')};
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.workspace-container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workspace-container.with-filetree.with-terminal {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas:
|
||||
"filetree editor"
|
||||
"filetree terminal";
|
||||
}
|
||||
|
||||
.workspace-container.with-filetree:not(.with-terminal) {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "filetree editor";
|
||||
}
|
||||
|
||||
.workspace-container:not(.with-filetree).with-terminal {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-template-areas:
|
||||
"editor"
|
||||
"terminal";
|
||||
}
|
||||
|
||||
.workspace-container:not(.with-filetree):not(.with-terminal) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "editor";
|
||||
}
|
||||
|
||||
.filetree-panel {
|
||||
grid-area: filetree;
|
||||
position: relative;
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
|
||||
overflow: hidden;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.filetree-panel.collapsed {
|
||||
width: 0 !important;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.editor-panel {
|
||||
grid-area: editor;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
||||
}
|
||||
|
||||
.terminal-panel {
|
||||
grid-area: terminal;
|
||||
position: relative;
|
||||
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
|
||||
overflow: hidden;
|
||||
transition: height 0.2s ease;
|
||||
}
|
||||
|
||||
.terminal-panel.collapsed {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 8%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.panel-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.panel-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.panel-action {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.panel-action:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 18%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 80%)')};
|
||||
}
|
||||
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 36px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 8%)')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 10%)')};
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 12%)')};
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
|
||||
border-bottom: 2px solid ${cssManager.bdTheme('hsl(210 100% 50%)', 'hsl(210 100% 60%)')};
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.tab:hover .tab-close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tab-close:hover {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
|
||||
}
|
||||
|
||||
.tab-modified {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
}
|
||||
|
||||
.editor-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-state dees-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.initializing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
|
||||
font-size: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
dees-editor-filetree {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
dees-editor-monaco {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
dees-terminal {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const containerClasses = [
|
||||
'workspace-container',
|
||||
this.showFileTree && !this.isFileTreeCollapsed ? 'with-filetree' : '',
|
||||
this.showTerminal ? 'with-terminal' : '',
|
||||
].filter(Boolean).join(' ');
|
||||
|
||||
if (this.isInitializing) {
|
||||
return html`
|
||||
<div class="initializing">
|
||||
<dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
|
||||
<span>Initializing workspace...</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="${containerClasses}">
|
||||
${this.showFileTree ? html`
|
||||
<div
|
||||
class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
|
||||
style="width: ${this.isFileTreeCollapsed ? 0 : this.fileTreeWidth}px"
|
||||
>
|
||||
<dees-editor-filetree
|
||||
.executionEnvironment=${this.executionEnvironment}
|
||||
.selectedPath=${this.activeFilePath}
|
||||
@file-select=${this.handleFileSelect}
|
||||
></dees-editor-filetree>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="editor-panel">
|
||||
<div class="tabs-bar">
|
||||
${this.openFiles.map(file => html`
|
||||
<div
|
||||
class="tab ${file.path === this.activeFilePath ? 'active' : ''}"
|
||||
@click=${() => this.activateFile(file.path)}
|
||||
>
|
||||
${file.modified ? html`<span class="tab-modified"></span>` : ''}
|
||||
<span class="tab-name">${file.name}</span>
|
||||
<span class="tab-close" @click=${(e: Event) => this.closeFile(e, file.path)}>
|
||||
<dees-icon .icon=${'lucide:x'} iconSize="12"></dees-icon>
|
||||
</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
<div class="editor-content">
|
||||
${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>
|
||||
</div>
|
||||
` : html`
|
||||
<dees-editor-monaco
|
||||
.content=${this.getActiveFileContent()}
|
||||
.language=${this.getLanguageFromPath(this.activeFilePath)}
|
||||
@content-change=${this.handleContentChange}
|
||||
></dees-editor-monaco>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.showTerminal ? html`
|
||||
<div
|
||||
class="terminal-panel ${this.isTerminalCollapsed ? 'collapsed' : ''}"
|
||||
style="height: ${this.isTerminalCollapsed ? 32 : this.terminalHeight}px"
|
||||
>
|
||||
<div class="panel-header">
|
||||
<div class="panel-header-title">
|
||||
<dees-icon .icon=${'lucide:terminal'} iconSize="14"></dees-icon>
|
||||
Terminal
|
||||
</div>
|
||||
<div class="panel-header-actions">
|
||||
<div class="panel-action" @click=${this.toggleTerminal}>
|
||||
<dees-icon
|
||||
.icon=${this.isTerminalCollapsed ? 'lucide:chevronUp' : 'lucide:chevronDown'}
|
||||
iconSize="14"
|
||||
></dees-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<dees-terminal
|
||||
.executionEnvironment=${this.executionEnvironment}
|
||||
.setupCommand=${''}
|
||||
></dees-terminal>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
if (this.executionEnvironment) {
|
||||
await this.initializeWorkspace();
|
||||
}
|
||||
}
|
||||
|
||||
public async updated(changedProperties: Map<string, any>) {
|
||||
if (changedProperties.has('executionEnvironment') && this.executionEnvironment) {
|
||||
await this.initializeWorkspace();
|
||||
}
|
||||
}
|
||||
|
||||
private async initializeWorkspace() {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
this.isInitializing = true;
|
||||
|
||||
try {
|
||||
if (!this.executionEnvironment.ready) {
|
||||
await this.executionEnvironment.init();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize workspace:', error);
|
||||
} finally {
|
||||
this.isInitializing = false;
|
||||
}
|
||||
}
|
||||
|
||||
private async handleFileSelect(e: CustomEvent<{ path: string; name: string }>) {
|
||||
const { path, name } = e.detail;
|
||||
await this.openFile(path, name);
|
||||
}
|
||||
|
||||
private async openFile(path: string, name: string) {
|
||||
// Check if already open
|
||||
const existingFile = this.openFiles.find(f => f.path === path);
|
||||
if (existingFile) {
|
||||
this.activeFilePath = path;
|
||||
return;
|
||||
}
|
||||
|
||||
// Load file content
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
try {
|
||||
const content = await this.executionEnvironment.readFile(path);
|
||||
this.openFiles = [
|
||||
...this.openFiles,
|
||||
{ path, name, content, modified: false },
|
||||
];
|
||||
this.activeFilePath = path;
|
||||
} catch (error) {
|
||||
console.error(`Failed to open file ${path}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
private activateFile(path: string) {
|
||||
this.activeFilePath = path;
|
||||
}
|
||||
|
||||
private closeFile(e: Event, path: string) {
|
||||
e.stopPropagation();
|
||||
|
||||
const fileIndex = this.openFiles.findIndex(f => f.path === path);
|
||||
if (fileIndex === -1) return;
|
||||
|
||||
// Check for unsaved changes
|
||||
const file = this.openFiles[fileIndex];
|
||||
if (file.modified) {
|
||||
const confirmed = confirm(`${file.name} has unsaved changes. Close anyway?`);
|
||||
if (!confirmed) return;
|
||||
}
|
||||
|
||||
this.openFiles = this.openFiles.filter(f => f.path !== path);
|
||||
|
||||
// If closing the active file, activate another one
|
||||
if (this.activeFilePath === path) {
|
||||
if (this.openFiles.length > 0) {
|
||||
const newIndex = Math.min(fileIndex, this.openFiles.length - 1);
|
||||
this.activeFilePath = this.openFiles[newIndex].path;
|
||||
} else {
|
||||
this.activeFilePath = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getActiveFileContent(): string {
|
||||
const file = this.openFiles.find(f => f.path === this.activeFilePath);
|
||||
return file?.content || '';
|
||||
}
|
||||
|
||||
private handleContentChange(e: CustomEvent) {
|
||||
const newContent = e.detail;
|
||||
const fileIndex = this.openFiles.findIndex(f => f.path === this.activeFilePath);
|
||||
if (fileIndex === -1) return;
|
||||
|
||||
const file = this.openFiles[fileIndex];
|
||||
if (file.content !== newContent) {
|
||||
this.openFiles = [
|
||||
...this.openFiles.slice(0, fileIndex),
|
||||
{ ...file, content: newContent, modified: true },
|
||||
...this.openFiles.slice(fileIndex + 1),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
private getLanguageFromPath(path: string): string {
|
||||
const ext = path.split('.').pop()?.toLowerCase();
|
||||
const languageMap: Record<string, string> = {
|
||||
ts: 'typescript',
|
||||
tsx: 'typescript',
|
||||
js: 'javascript',
|
||||
jsx: 'javascript',
|
||||
json: 'json',
|
||||
html: 'html',
|
||||
css: 'css',
|
||||
scss: 'scss',
|
||||
less: 'less',
|
||||
md: 'markdown',
|
||||
yaml: 'yaml',
|
||||
yml: 'yaml',
|
||||
xml: 'xml',
|
||||
sql: 'sql',
|
||||
py: 'python',
|
||||
sh: 'shell',
|
||||
bash: 'shell',
|
||||
};
|
||||
return languageMap[ext || ''] || 'plaintext';
|
||||
}
|
||||
|
||||
private toggleTerminal() {
|
||||
this.isTerminalCollapsed = !this.isTerminalCollapsed;
|
||||
}
|
||||
|
||||
public async saveActiveFile(): Promise<void> {
|
||||
const file = this.openFiles.find(f => f.path === this.activeFilePath);
|
||||
if (!file || !this.executionEnvironment) return;
|
||||
|
||||
try {
|
||||
await this.executionEnvironment.writeFile(file.path, file.content);
|
||||
const fileIndex = this.openFiles.findIndex(f => f.path === this.activeFilePath);
|
||||
this.openFiles = [
|
||||
...this.openFiles.slice(0, fileIndex),
|
||||
{ ...file, modified: false },
|
||||
...this.openFiles.slice(fileIndex + 1),
|
||||
];
|
||||
} catch (error) {
|
||||
console.error('Failed to save file:', error);
|
||||
}
|
||||
}
|
||||
|
||||
public async saveAllFiles(): Promise<void> {
|
||||
if (!this.executionEnvironment) return;
|
||||
|
||||
for (const file of this.openFiles.filter(f => f.modified)) {
|
||||
try {
|
||||
await this.executionEnvironment.writeFile(file.path, file.content);
|
||||
} catch (error) {
|
||||
console.error(`Failed to save ${file.path}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
this.openFiles = this.openFiles.map(f => ({ ...f, modified: false }));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-editor-workspace.js';
|
||||
@@ -1,4 +1,6 @@
|
||||
// Editor Components
|
||||
export * from './dees-editor-bare/index.js';
|
||||
export * from './dees-editor-monaco/index.js';
|
||||
export * from './dees-editor-filetree/index.js';
|
||||
export * from './dees-editor-workspace/index.js';
|
||||
export * from './dees-editor-markdown/index.js';
|
||||
export * from './dees-editor-markdownoutlet/index.js';
|
||||
|
||||
Reference in New Issue
Block a user