@kispace-io/extension-monaco-editor 0.8.0

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@kispace-io/extension-monaco-editor",
+  "version": "0.8.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@kispace-io/core": "*",
+    "@kispace-io/extension-python-runtime": "*",
+    "@kispace-io/extension-ai-system": "*",
+    "monaco-editor": "0.55.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}

package/src/i18n.json

@@ -0,0 +1,11 @@
+{
+  "namespace": "extensions",
+  "en": {
+    "EXT_MONACO_NAME": "Monaco Code Editor",
+    "EXT_MONACO_DESC": "Code editor with syntax highlighting, code completion, and Python execution support"
+  },
+  "de": {
+    "EXT_MONACO_NAME": "Monaco-Code-Editor",
+    "EXT_MONACO_DESC": "Code-Editor mit Syntaxhervorhebung, Code-Vervollständigung und Python-Ausführungsunterstützung"
+  }
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import { extensionRegistry, i18nLazy, contributionRegistry, SYSTEM_LANGUAGE_BUNDLES } from '@kispace-io/core';
+import bundle from './i18n.json';
+
+contributionRegistry.registerContribution(SYSTEM_LANGUAGE_BUNDLES, bundle as any);
+
+const t = i18nLazy('extensions');
+
+extensionRegistry.registerExtension({
+  id: "system.monaco",
+  name: t('EXT_MONACO_NAME'),
+  description: t('EXT_MONACO_DESC'),
+  loader: () => import("./monaco-editor-extension"),
+  icon: "file-pen",
+  
+  dependencies: ["system.pythonruntime"],
+});

package/src/js-programming-prompt.txt

@@ -0,0 +1,20 @@
+**JavaScript Programming Assistant:**
+
+You are helping with JavaScript code. JavaScript code is executed in a worker.
+
+**JavaScript-Specific Focus:**
+- Help with JavaScript, OpenLayers usage, and module patterns
+- When a user requests a starter module, provide this template:
+
+```javascript
+export default function ({ map, env, render, html, style, when, ref, createRef, events, settings }) {
+    const state = {};
+    return () => html`
+        <div>
+            <h3>Hello!</h3>
+            <button @click=${() => {}}>Click me</button>
+        </div>
+    `;
+}
+```
+

package/src/k-monaco-editor.ts

@@ -0,0 +1,342 @@
+import * as monaco from 'monaco-editor';
+import styles from "monaco-editor/min/vs/editor/editor.main.css?raw";
+import {customElement, property, state} from "lit/decorators.js";
+import {KPart} from "@kispace-io/core";
+import {css, html} from "lit";
+import {createRef, ref} from "lit/directives/ref.js";
+import {EditorInput, EditorContentProvider} from "@kispace-io/core";
+import {styleMap} from "lit/directives/style-map.js";
+import { PyEnv, pythonPackageManagerService } from "@kispace-io/extension-python-runtime";
+import { workspaceService } from "@kispace-io/core";
+import { logger } from '@kispace-io/core';
+
+const workerMap: Record<string, string> = {
+    'json': new URL('monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url).href,
+    'css': new URL('monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url).href,
+    'scss': new URL('monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url).href,
+    'less': new URL('monaco-editor/esm/vs/language/css/css.worker.js', import.meta.url).href,
+    'html': new URL('monaco-editor/esm/vs/language/html/html.worker.js', import.meta.url).href,
+    'handlebars': new URL('monaco-editor/esm/vs/language/html/html.worker.js', import.meta.url).href,
+    'razor': new URL('monaco-editor/esm/vs/language/html/html.worker.js', import.meta.url).href,
+    'typescript': new URL('monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url).href,
+    'javascript': new URL('monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url).href,
+};
+
+self.MonacoEnvironment = {
+    getWorkerUrl(_: any, label: string) {
+        return workerMap[label] || new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url).href;
+    }
+};
+
+@customElement('k-monaco-editor')
+export class KMonacoEditor extends KPart implements EditorContentProvider {
+    @property({attribute: false})
+    public input?: EditorInput;
+    @property()
+    public readOnly: boolean = false;
+
+    private editorRef = createRef();
+    private editor?: any;
+    private model?: any;
+
+    @state()
+    private canExecute: boolean = false;
+
+    @state()
+    private pyenv?: PyEnv;
+
+    @state()
+    private requiredPackages: string[] = [];
+
+
+    protected doBeforeUI() {
+        const file = this.input!.data
+        this.canExecute = file.getName().endsWith(".py")
+    }
+
+    protected updated(changedProperties: Map<string, any>) {
+        super.updated(changedProperties);
+        
+        if (changedProperties.has('canExecute') || changedProperties.has('pyenv')) {
+            this.updateToolbar();
+        }
+    }
+
+    protected async doInitUI() {
+        const file = this.input!.data
+        const textContents = await file.getContents()
+        const container = this.editorRef.value as HTMLElement
+        const uri = monaco.Uri.file(file.getName())
+        this.model = monaco.editor.createModel(textContents, undefined, uri)
+        this.editor = monaco.editor.create(container, {
+            theme: 'vs-dark',
+            automaticLayout: false,
+        })
+        this.model.onDidChangeContent((_event: Event) => {
+            if (this.readOnly) {
+                return
+            }
+            this.markDirty(true)
+        })
+        this.editor.setModel(this.model)
+
+        if (this.canExecute) {
+            this.requiredPackages = this.parsePackagesFromContent(textContents as string)
+        }
+    }
+
+    public getEditor() {
+        return this.editor
+    }
+
+    save(): void {
+        const value = this.model.getValue()
+        this.input?.data.saveContents(value)
+        this.markDirty(false)
+    }
+
+    protected doClose() {
+        this.model?.dispose();
+        this.editor?.dispose()
+        this.model = undefined
+        this.editor = undefined
+        this.pyenv?.close()
+        this.pyenv = undefined
+    }
+
+    private async onRunCode() {
+        if (!this.canExecute) {
+            return
+        }
+        if (!this.pyenv) {
+            await this.toggleConnection();
+        }
+        this.pyenv?.execCode(this.model.getValue())
+    }
+
+    public getLanguage() {
+        return this.model?.getLanguageId()?.toLowerCase() || null
+    }
+
+    public getContent(): string | null {
+        if (!this.model) {
+            return null
+        }
+        return this.model.getValue()
+    }
+
+    public getSelection(): string | null {
+        if (!this.editor || !this.model) {
+            return null
+        }
+        try {
+            const selection = this.editor.getSelection()
+            if (!selection || selection.isEmpty()) {
+                return null
+            }
+            return this.model.getValueInRange(selection) || null
+        } catch (err) {
+            return null
+        }
+    }
+
+    public getSnippet(lines: number = 5): { snippet: string; cursorLine: number } | null {
+        if (!this.editor || !this.model) {
+            return null
+        }
+        try {
+            const position = this.editor.getPosition()
+            if (!position) {
+                return null
+            }
+
+            if (isNaN(lines) || lines < 0) {
+                lines = 5
+            }
+
+            const cursorLineNumber = position.lineNumber
+            const totalLines = this.model.getLineCount()
+            
+            const startLine = Math.max(1, cursorLineNumber - lines)
+            const endLine = Math.min(totalLines, cursorLineNumber + lines)
+            
+            const snippet = this.model.getValueInRange({
+                startLineNumber: startLine,
+                startColumn: 1,
+                endLineNumber: endLine,
+                endColumn: this.model.getLineMaxColumn(endLine)
+            })
+
+            return {
+                snippet,
+                cursorLine: cursorLineNumber
+            }
+        } catch (err) {
+            return null
+        }
+    }
+
+    public getFilePath(): string | null {
+        return this.input?.data?.getWorkspacePath() || null
+    }
+
+    protected renderToolbar() {
+        if (!this.canExecute) {
+            return html``;
+        }
+
+        return html`
+            <wa-button @click=${() => this.onRunCode()} title="Run code"
+                       ?disabled="${!this.canExecute}" appearance="plain" size="small">
+                <wa-icon name="play" label="Run code"></wa-icon>
+            </wa-button>
+            <wa-button @click=${() => this.toggleConnection()}
+                       style="${styleMap({color: this.pyenv ? "var(--wa-color-success-fill-loud)" : "var(--wa-color-danger-fill-loud)"})}"
+                       title="(Re)Connect to execution environment"
+                       ?disabled="${!this.canExecute}"
+                       appearance="plain" size="small">
+                <wa-icon name="circle" label="Connection status"></wa-icon>
+            </wa-button>
+            <wa-button 
+                size="small" 
+                appearance="plain"
+                @click=${() => this.openPackageManager()}
+                title="Manage required Python packages">
+                <wa-icon name="box" label="Packages"></wa-icon>
+                Packages
+            </wa-button>
+        `;
+    }
+
+    private async toggleConnection() {
+        if (this.pyenv) {
+            this.pyenv.close()
+            this.pyenv = undefined
+        }
+        if (this.model.getLanguageId() !== "python") {
+            logger.error("Language not supported: " + this.model.getLanguageId());
+            return
+        }
+        this.pyenv = new PyEnv()
+        const workspace = await workspaceService.getWorkspace()
+        await this.pyenv.init(workspace!)
+
+        if (this.requiredPackages.length > 0) {
+            try {
+                await this.pyenv.loadPackages(this.requiredPackages)
+            } catch (error) {
+                logger.error("Failed to load required packages: " + String(error))
+            }
+        }
+    }
+
+    private parsePackagesFromContent(content: string): string[] {
+        const lines = content.split('\n')
+        const magicCommentRegex = /^#\s*@gs-packages:\s*(.+)$/i
+        
+        for (const line of lines) {
+            const match = line.match(magicCommentRegex)
+            if (match) {
+                return match[1]
+                    .split(',')
+                    .map(pkg => pkg.trim())
+                    .filter(pkg => pkg.length > 0)
+            }
+        }
+        
+        return []
+    }
+
+    private updatePackagesInContent(): void {
+        if (!this.model) return
+
+        const content = this.model.getValue()
+        const lines = content.split('\n')
+        const magicCommentRegex = /^#\s*@gs-packages:/i
+        
+        let magicCommentLineIndex = -1
+        for (let i = 0; i < lines.length; i++) {
+            if (magicCommentRegex.test(lines[i])) {
+                magicCommentLineIndex = i
+                break
+            }
+        }
+
+        const newMagicComment = this.requiredPackages.length > 0
+            ? `# @gs-packages: ${this.requiredPackages.join(', ')}`
+            : null
+
+        if (newMagicComment) {
+            if (magicCommentLineIndex >= 0) {
+                lines[magicCommentLineIndex] = newMagicComment
+            } else {
+                const insertIndex = lines[0]?.startsWith('#!') ? 1 : 0
+                lines.splice(insertIndex, 0, newMagicComment)
+            }
+        } else if (magicCommentLineIndex >= 0) {
+            lines.splice(magicCommentLineIndex, 1)
+        }
+
+        const newContent = lines.join('\n')
+        if (newContent !== content) {
+            this.model.setValue(newContent)
+        }
+    }
+
+    private openPackageManager() {
+        pythonPackageManagerService.showPackageManager({
+            packages: this.requiredPackages,
+            pyenv: this.pyenv,
+            onPackageAdded: (packageName: string) => {
+                if (!this.requiredPackages.includes(packageName)) {
+                    this.requiredPackages = [...this.requiredPackages, packageName]
+                    this.updatePackagesInContent()
+                }
+            },
+            onPackageRemoved: (packageName: string) => {
+                this.requiredPackages = this.requiredPackages.filter(pkg => pkg !== packageName)
+                this.updatePackagesInContent()
+            }
+        })
+    }
+
+    render() {
+        return html`
+            <style>
+                ${styles}
+            </style>
+            <div class="monaco-editor-container" ${ref(this.editorRef)}>
+            </div>
+        `
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        input.prompt {
+            flex: 1;
+            font-size: large;
+        }
+
+        div.monaco-editor-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-monaco-editor': KMonacoEditor
+    }
+}
+

package/src/monaco-editor-extension.ts

@@ -0,0 +1,72 @@
+import {html} from "lit";
+import {EditorInput, editorRegistry} from "@kispace-io/core";
+import {File} from "@kispace-io/core";
+import {contributionRegistry} from "@kispace-io/core";
+import {CID_PROMPT_ENHANCERS, type PromptEnhancer, type PromptEnhancerContribution} from "@kispace-io/extension-ai-system";
+import type {ExecutionContext} from "@kispace-io/core";
+import PYTHON_PROMPT from "./py-programming-prompt.txt?raw";
+import JAVASCRIPT_PROMPT from "./js-programming-prompt.txt?raw";
+
+editorRegistry.registerEditorInputHandler({
+    lazyInit: async () => {
+        await import('./k-monaco-editor');
+    },
+    canHandle: input => input instanceof File,
+    handle: async (input: File) => {
+        const editorInput = {
+            title: input.getName(),
+            data: input,
+            key: input.getName(),
+            editorId: "monaco-editor",
+            icon: "file-pen",
+            noOverflow: false,
+            state: {},
+        } as EditorInput
+        editorInput.widgetFactory = () => html`
+            <k-monaco-editor .input=${editorInput}></k-monaco-editor>`
+        return editorInput;
+    }
+})
+
+// Helper to check if active editor is a Monaco editor with specific language
+function isMonacoEditorWithLanguage(context: ExecutionContext, language: string): boolean {
+    const activeEditor = context.activeEditor as any;
+    return activeEditor &&
+        typeof activeEditor.getEditor === 'function' &&
+        typeof activeEditor.getLanguage === 'function' &&
+        activeEditor.getLanguage() === language;
+}
+
+// Python programming prompt enhancer
+const pythonPromptEnhancer: PromptEnhancer = {
+    priority: 50,
+    enhance: async (prompt: string, context: ExecutionContext) => {
+        if (!isMonacoEditorWithLanguage(context, 'python')) {
+            return prompt;
+        }
+        return `${prompt}\n\n${PYTHON_PROMPT}`;
+    }
+};
+
+// JavaScript programming prompt enhancer
+const javascriptPromptEnhancer: PromptEnhancer = {
+    priority: 50,
+    enhance: async (prompt: string, context: ExecutionContext) => {
+        if (!isMonacoEditorWithLanguage(context, 'javascript')) {
+            return prompt;
+        }
+        return `${prompt}\n\n${JAVASCRIPT_PROMPT}`;
+    }
+};
+
+// Register prompt enhancers for programming languages
+contributionRegistry.registerContribution(CID_PROMPT_ENHANCERS, {
+    label: "Python Programming Enhancer",
+    enhancer: pythonPromptEnhancer
+} as PromptEnhancerContribution);
+
+contributionRegistry.registerContribution(CID_PROMPT_ENHANCERS, {
+    label: "JavaScript Programming Enhancer",
+    enhancer: javascriptPromptEnhancer
+} as PromptEnhancerContribution);
+

package/src/py-programming-prompt.txt

@@ -0,0 +1,15 @@
+**Python Programming Assistant:**
+
+You are helping with Python code. Python code is executed in the browser using Pyodide.
+
+**Python-Specific Responsibilities:**
+- Explain Python code and help debug Python errors
+- Help with `js` module interaction: calling JavaScript functions from Python and passing data between Python and JavaScript
+- Provide Python code examples
+- Remember code runs in a browser environment (Pyodide) - be mindful of browser limitations
+
+**Python Environment:**
+- Working directory is `/workspace` (linked to user's local file system)
+- Install packages by adding them to `requirements.txt` in the workspace
+- Packages in `requirements.txt` are automatically installed before code execution
+

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*"
+  ]
+}