smart-code-editor 1.0.0

package/src/core/LayoutManager.ts

@@ -0,0 +1,268 @@
+/**
+ * 布局管理器
+ * 负责管理左右分栏布局和拖拽调整
+ */
+export class LayoutManager {
+  private container: HTMLElement;
+  private leftPanel: HTMLElement;
+  private rightPanel: HTMLElement;
+  private splitter: HTMLElement;
+
+  private isDragging: boolean = false;
+  private startX: number = 0;
+  private startLeftWidth: number = 0;
+
+  constructor(
+    container: HTMLElement,
+    defaultRatio: number = 0.48,
+    theme: string = "vs-dark",
+  ) {
+    this.container = container;
+
+    // 创建布局
+    this.leftPanel = document.createElement("div");
+    this.splitter = document.createElement("div");
+    this.rightPanel = document.createElement("div");
+
+    this.initLayout(defaultRatio, theme);
+    this.initResizable();
+  }
+
+  /**
+   * 初始化布局
+   */
+  private initLayout(ratio: number, theme: string): void {
+    // 设置容器样式
+    this.container.style.display = "flex";
+    this.container.style.height = "100%";
+    this.container.style.position = "relative";
+
+    // Create a wrapper for the editor content
+    const editorWrapper = document.createElement("div");
+    editorWrapper.className = "sce-editor-wrapper";
+    editorWrapper.style.display = "flex";
+    editorWrapper.style.height = "100%";
+    editorWrapper.style.width = "100%";
+    editorWrapper.style.overflow = "hidden";
+
+    // 左侧面板（试题区）
+    this.leftPanel.className = "sce-question-panel";
+    this.leftPanel.style.width = `${ratio * 100}%`;
+    this.leftPanel.style.minWidth = "200px";
+    this.leftPanel.style.overflow = "auto";
+    this.leftPanel.style.padding = "14px 6px 14px 14px";
+    this.leftPanel.style.boxSizing = "border-box";
+
+    // 分隔条
+    this.splitter.className = "sce-splitter";
+    this.splitter.style.width = "2px";
+    this.splitter.style.cursor = "col-resize";
+    this.splitter.style.flexShrink = "0";
+    this.splitter.style.userSelect = "none";
+    this.splitter.style.margin = "0 6px";
+
+    // Create a container for right side (will contain sce-editor-panel and terminal-panel)
+    const rightContainer = document.createElement("div");
+    rightContainer.className = "sce-right-container";
+    rightContainer.style.flex = "1";
+    rightContainer.style.minWidth = "400px";
+    rightContainer.style.minHeight = "0";
+    rightContainer.style.display = "flex";
+    rightContainer.style.flexDirection = "column";
+    rightContainer.style.overflow = "hidden";
+
+    // 右侧面板（编辑器区 - 将与 terminal-panel 平级）
+    this.rightPanel.className = "sce-editor-panel";
+    this.rightPanel.style.flex = "1";
+    this.rightPanel.style.minHeight = "0";
+    this.rightPanel.style.overflow = "hidden";
+    this.rightPanel.style.position = "relative";
+    this.rightPanel.style.display = "flex";
+    this.rightPanel.style.flexDirection = "column";
+
+    // 应用主题
+    this.setTheme(theme);
+
+    // Add editor panel to right container
+    rightContainer.appendChild(this.rightPanel);
+
+    // 添加到 wrapper
+    editorWrapper.appendChild(this.leftPanel);
+    editorWrapper.appendChild(this.splitter);
+    editorWrapper.appendChild(rightContainer);
+
+    // 将 wrapper 添加到容器
+    this.container.appendChild(editorWrapper);
+  }
+
+  /**
+   * 初始化拖拽功能
+   */
+  private initResizable(): void {
+    this.splitter.addEventListener("mousedown", this.handleMouseDown);
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+  }
+
+  /**
+   * 鼠标按下
+   */
+  private handleMouseDown = (e: MouseEvent): void => {
+    this.isDragging = true;
+    this.startX = e.clientX;
+    this.startLeftWidth = this.leftPanel.offsetWidth;
+
+    // 添加拖拽样式
+    this.splitter.style.background = "#4CAF50";
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    e.preventDefault();
+  };
+
+  /**
+   * 鼠标移动
+   */
+  private handleMouseMove = (e: MouseEvent): void => {
+    if (!this.isDragging) return;
+
+    const deltaX = e.clientX - this.startX;
+    const newLeftWidth = this.startLeftWidth + deltaX;
+    const containerWidth = this.container.offsetWidth;
+
+    // 限制最小和最大宽度
+    const minWidth = 200;
+    const maxWidth = containerWidth - 400 - 8; // 右侧最小400px，分隔条8px
+
+    if (newLeftWidth >= minWidth && newLeftWidth <= maxWidth) {
+      const ratio = newLeftWidth / containerWidth;
+      this.leftPanel.style.width = `${ratio * 100}%`;
+    }
+  };
+
+  /**
+   * 鼠标释放
+   */
+  private handleMouseUp = (): void => {
+    if (!this.isDragging) return;
+
+    this.isDragging = false;
+    this.splitter.style.background = "#f5f5f5";
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+
+  /**
+   * 设置左侧内容
+   */
+  setLeftContent(content: string | HTMLElement): void {
+    if (typeof content === "string") {
+      this.leftPanel.innerHTML = content;
+      this.leftPanel.style.overflow = "auto";
+    } else {
+      this.leftPanel.innerHTML = "";
+      this.leftPanel.appendChild(content);
+      if (content.classList.contains("sce-question-markdown")) {
+        this.leftPanel.style.overflow = "hidden";
+      } else {
+        this.leftPanel.style.overflow = "auto";
+      }
+    }
+  }
+
+  /**
+   * 获取右侧容器（用于放置编辑器）
+   */
+  getRightContainer(): HTMLElement {
+    return this.rightPanel;
+  }
+
+  /**
+   * 显示/隐藏左侧面板
+   */
+  setQuestionPanelVisible(visible: boolean): void {
+    if (visible) {
+      this.leftPanel.style.display = "block";
+      this.splitter.style.display = "block";
+    } else {
+      this.leftPanel.style.display = "none";
+      this.splitter.style.display = "none";
+    }
+  }
+
+  /**
+   * 设置分割比例
+   */
+  setSplitRatio(ratio: number): void {
+    this.leftPanel.style.width = `${ratio * 100}%`;
+  }
+
+  /**
+   * 设置主题
+   */
+  setTheme(theme: string): void {
+    const isDark = theme === "vs-dark";
+
+    if (isDark) {
+      this.leftPanel.style.background = "#1e1e1e";
+      this.leftPanel.style.color = "#d4d4d4";
+      this.splitter.style.background = "#252526";
+    } else {
+      this.leftPanel.style.background = "#ffffff";
+      this.leftPanel.style.color = "#333333";
+      this.splitter.style.background = "#f5f5f5";
+    }
+
+    const editor = this.leftPanel.querySelector(
+      ".sce-markdown-editor",
+    ) as HTMLTextAreaElement | null;
+    const preview = this.leftPanel.querySelector(
+      ".sce-markdown-preview",
+    ) as HTMLElement | null;
+    const labels = this.leftPanel.querySelectorAll(".sce-markdown-label");
+    const tabs = this.leftPanel.querySelectorAll(".sce-markdown-tab");
+
+    if (editor) {
+      editor.style.background = isDark ? "#1e1e1e" : "#ffffff";
+      editor.style.color = isDark ? "#d4d4d4" : "#333333";
+      editor.style.border = isDark ? "1px solid #333" : "1px solid #ddd";
+    }
+
+    if (preview) {
+      preview.style.background = isDark ? "#1b1b1b" : "#ffffff";
+      preview.style.color = isDark ? "#d4d4d4" : "#333333";
+      // preview.style.border = isDark ? "1px solid #333" : "1px solid #ddd";
+    }
+
+    labels.forEach((label) => {
+      (label as HTMLElement).style.color = isDark ? "#c5c5c5" : "#666666";
+    });
+
+    tabs.forEach((tab) => {
+      const btn = tab as HTMLButtonElement;
+      const isActive = btn.classList.contains("active");
+      btn.style.border = isDark ? "1px solid #3a3a3a" : "1px solid #ddd";
+      btn.style.background = isActive
+        ? isDark
+          ? "#2d2d30"
+          : "#f3f3f3"
+        : isDark
+          ? "#1f1f1f"
+          : "#ffffff";
+      btn.style.color = isDark ? "#d4d4d4" : "#333333";
+      btn.style.borderRadius = "6px";
+      btn.style.padding = "4px 10px";
+      btn.style.fontSize = "12px";
+      btn.style.cursor = "pointer";
+    });
+  }
+
+  /**
+   * 销毁
+   */
+  destroy(): void {
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    this.container.innerHTML = "";
+  }
+}

package/src/core/MonacoWrapper.ts

@@ -0,0 +1,173 @@
+import type { MonacoEditorOptions } from "../types";
+import { loadMonaco } from "../utils/loader";
+
+/**
+ * Monaco Editor 封装
+ */
+export class MonacoWrapper {
+  private editor: any | null = null;
+  private monaco: any | null = null;
+  private container: HTMLElement;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+  }
+
+  /**
+   * 初始化编辑器
+   */
+  async initialize(options: MonacoEditorOptions = {}): Promise<void> {
+    // 加载 Monaco
+    this.monaco = await loadMonaco();
+
+    // 创建编辑器实例
+    this.editor = this.monaco.editor.create(this.container, {
+      value: options.value || "",
+      language: options.language || "javascript",
+      theme: options.theme || "vs-dark",
+      readOnly: options.readOnly || false,
+      fontSize: options.fontSize || 14,
+      minimap: options.minimap || { enabled: true },
+      lineNumbers: options.lineNumbers || "on",
+      automaticLayout: options.automaticLayout !== false,
+      scrollBeyondLastLine: false,
+      roundedSelection: true,
+      padding: { top: 16 },
+      suggestOnTriggerCharacters:
+        options.suggestOnTriggerCharacters !== undefined
+          ? options.suggestOnTriggerCharacters
+          : true,
+      quickSuggestions:
+        options.quickSuggestions !== undefined
+          ? options.quickSuggestions
+          : true,
+      tabSize: 2,
+    });
+  }
+
+  /**
+   * 设置值
+   */
+  setValue(code: string): void {
+    if (this.editor) {
+      this.editor.setValue(code);
+    }
+  }
+
+  /**
+   * 获取值
+   */
+  getValue(): string {
+    return this.editor ? this.editor.getValue() : "";
+  }
+
+  /**
+   * 设置语言
+   */
+  /**
+   * 更新模型（切换语言时重建模型以确保语法提示正确）
+   */
+  updateModel(
+    code: string,
+    language: string,
+    extension: string = "",
+    instanceId: string = "default",
+  ): void {
+    if (this.editor && this.monaco) {
+      const oldModel = this.editor.getModel();
+
+      // 构造虚拟文件 URI
+      const ext = extension.startsWith(".") ? extension : `.${extension}`;
+      const uri = this.monaco.Uri.parse(`file:///${instanceId}/main${ext}`);
+
+      // 查找是否已存在该 URI 的模型
+      let newModel = this.monaco.editor.getModel(uri);
+
+      if (!newModel) {
+        newModel = this.monaco.editor.createModel(code, language, uri);
+      } else {
+        newModel.setValue(code);
+        this.monaco.editor.setModelLanguage(newModel, language);
+      }
+
+      this.editor.setModel(newModel);
+
+      // 销毁旧模型（如果不再使用，避免内存泄漏。实际项目中可能需要缓存）
+      // 这里为了简单直接销毁旧的（除了新模型就是旧模型的情况）
+      if (oldModel && oldModel !== newModel) {
+        oldModel.dispose();
+      }
+    }
+  }
+
+  /**
+   * 设置主题
+   */
+  setTheme(theme: string): void {
+    if (this.editor && this.monaco) {
+      this.monaco.editor.setTheme(theme);
+    }
+  }
+
+  /**
+   * 设置只读
+   */
+  setReadOnly(readOnly: boolean): void {
+    if (this.editor) {
+      this.editor.updateOptions({ readOnly });
+    }
+  }
+
+  /**
+   * 更新配置
+   */
+  updateOptions(options: any): void {
+    if (this.editor) {
+      this.editor.updateOptions(options);
+    }
+  }
+
+  /**
+   * 监听内容变化
+   */
+  onDidChangeContent(callback: (value: string) => void): void {
+    if (this.editor) {
+      this.editor.onDidChangeModelContent(() => {
+        callback(this.getValue());
+      });
+    }
+  }
+
+  /**
+   * 调整布局
+   */
+  layout(): void {
+    if (this.editor) {
+      this.editor.layout();
+    }
+  }
+
+  /**
+   * 获取 Monaco 实例
+   */
+  getMonaco() {
+    return this.monaco;
+  }
+
+  /**
+   * 获取编辑器实例
+   */
+  getEditor() {
+    return this.editor;
+  }
+
+  /**
+   * 销毁
+   */
+  dispose(): void {
+    if (this.editor) {
+      this.editor.dispose();
+      this.editor = null;
+    }
+  }
+}