@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/display/code-editor.js

@@ -0,0 +1,976 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { SyntaxRegistry } from '../../core/highlight';
+import { aitheThemeText } from '../../styles/theme';
+import { t } from '../../styles/i18n';
+/**
+ * A full-featured code editor Web Component with syntax highlighting,
+ * line numbers, toolbar controls, resizable preview pane, and fullscreen mode.
+ *
+ * Architecture / 架构说明：
+ * - Uses a transparent <textarea> overlaid on a syntax-highlighted <div>
+ *   (the "highlight layer") so the user sees colored text while typing
+ *   into a native textarea for reliable input handling.
+ * - Syntax highlighting is powered by SyntaxRegistry, a rule-based tokenizer
+ *   that supports 30+ languages out of the box.
+ * - The toolbar provides language selection, theme switching, copy,
+ *   fullscreen, line numbers toggle, and preview pane toggle.
+ * - The preview pane is a slot-based area that can host custom content
+ *   (e.g., a markdown renderer in markdown-editor).
+ *
+ * 使用透明的 <textarea> 覆盖在语法高亮的 <div>（"高亮层"）之上，
+ * 用户在原生 textarea 中输入时能看到彩色文本，同时获得可靠的输入处理。
+ * 语法高亮由 SyntaxRegistry 驱动，它是一个基于规则的分词器，内置支持 30+ 种语言。
+ * 工具栏提供语言选择、主题切换、复制、全屏、行号切换和预览面板切换。
+ * 预览面板是基于插槽的区域，可承载自定义内容（例如 markdown-editor 中的 markdown 渲染器）。
+ *
+ * @slot toolbar-left - Custom content on the left side of toolbar. 工具栏左侧的自定义内容。
+ * @slot toolbar-right - Custom content on the right side of toolbar. 工具栏右侧的自定义内容。
+ * @slot preview - Custom preview content (when show-preview is enabled). 自定义预览内容。
+ *
+ * @property {string} value - Editor content. 编辑器内容。
+ * @property {string} language - Programming language for syntax highlighting. 用于语法高亮的编程语言。
+ * @property {boolean} readonly - Whether the editor is readonly. 是否只读。
+ * @property {boolean} lineNumbers - Whether to show line numbers. 是否显示行号。
+ * @property {string} placeholder - Placeholder text when empty. 占位符文本。
+ * @property {boolean} showToolbar - Whether to show the toolbar. 是否显示工具栏。
+ * @property {boolean} showTheme - Whether to show the theme picker. 是否显示主题选择器。
+ * @property {boolean} showPreview - Whether to show the preview pane. 是否显示预览面板。
+ * @property {boolean} showLanguage - Whether to show the language selector. 是否显示语言选择器。
+ * @property {boolean} showFullscreen - Whether to show the fullscreen button. 是否显示全屏按钮。
+ * @property {boolean} showCopy - Whether to show the copy button. 是否显示复制按钮。
+ * @property {boolean} showLineNumbersToggle - Whether to show the line numbers toggle button. 是否显示行号切换按钮。
+ *
+ * @fires aithe-input - Fired when editor content changes. 当编辑器内容发生变化时触发。
+ * @fires aithe-focus - Fired when editor gains focus. 当编辑器获得焦点时触发。
+ * @fires aithe-blur - Fired when editor loses focus. 当编辑器失去焦点时触发。
+ * @fires aithe-language-change - Fired when language is changed via toolbar select. 通过工具栏选择更改语言时触发。
+ * @fires aithe-line-numbers-change - Fired when line numbers visibility is toggled. 行号显示切换时触发。
+ * @fires aithe-fullscreen-change - Fired when fullscreen mode is toggled. 全屏模式切换时触发。
+ * @fires aithe-copy - Fired after copy button is clicked. 点击复制按钮后触发。
+ * @fires aithe-theme-change - Fired when theme is changed via toolbar picker. 通过工具栏选择更改主题时触发。
+ * @fires aithe-preview-toggle - Fired when preview pane is toggled. 预览面板切换时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-code-editor language="javascript" show-toolbar></aithe-code-editor>
+ * ```
+ */
+let AitheCodeEditor = class AitheCodeEditor extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /* ---- Public Properties ---- */
+        /** Editor content. Code text displayed in the editor. 编辑器内容。 */
+        this.value = '';
+        /** Programming language for syntax highlighting. 用于语法高亮的编程语言。 */
+        this.language = 'javascript';
+        /** Whether the editor is readonly. 是否只读。 */
+        this.readonly = false;
+        /** Whether to show line numbers on the left side. 是否显示左侧行号。 */
+        this.lineNumbers = true;
+        /** Placeholder text when editor is empty. 编辑器为空时显示的占位符文本。 */
+        this.placeholder = '';
+        /** Whether to show the toolbar. 是否显示工具栏。 */
+        this.showToolbar = false;
+        /** Whether to show the theme picker in toolbar. 是否在工具栏中显示主题选择器。 */
+        this.showTheme = true;
+        /** Whether to show the preview pane. 是否显示预览面板。 */
+        this.showPreview = false;
+        /** Whether to show the language selector in toolbar. 是否在工具栏中显示语言选择器。 */
+        this.showLanguage = true;
+        /** Whether to show the fullscreen button in toolbar. 是否在工具栏中显示全屏按钮。 */
+        this.showFullscreen = true;
+        /** Whether to show the copy button in toolbar. 是否在工具栏中显示复制按钮。 */
+        this.showCopy = true;
+        /** Whether to show the line numbers toggle button in toolbar. 是否在工具栏中显示行号切换按钮。 */
+        this.showLineNumbersToggle = true;
+        /** Whether the editor is currently focused. 编辑器是否聚焦。 */
+        this.focused = false;
+        /** Whether the editor is in fullscreen mode. 是否全屏模式。 */
+        this.isFullscreen = false;
+        /** Whether the copy button was just clicked (shows feedback). 复制按钮是否刚被点击（显示反馈）。 */
+        this.copied = false;
+        /** Current editor theme (from theme picker). 当前编辑器主题（来自主题选择器）。 */
+        this.editorTheme = '';
+        /** Whether the preview pane is visible. 预览面板是否可见。 */
+        this.previewVisible = false;
+        /** Whether the preview splitter is being dragged. 预览分割条是否正在拖动。 */
+        this.splitterDragging = false;
+        /** Refs for splitter, editor body, code pane, and preview pane elements. */
+        this.splitterRef = createRef();
+        this.editorBodyRef = createRef();
+        this.codePaneRef = createRef();
+        this.previewPaneRef = createRef();
+        /**
+         * Handles splitter drag move: calculates percentage and resizes panes.
+         * Clamps between 20%-80% to prevent collapsing either pane.
+         * 处理分割条拖动移动：计算百分比并调整面板大小。
+         * 限制在 20%-80% 之间以防止任一面板折叠。
+         */
+        this.handleSplitterMove = (e) => {
+            if (!this.splitterDragging)
+                return;
+            const body = this.editorBodyRef.value;
+            if (!body)
+                return;
+            const rect = body.getBoundingClientRect();
+            const offset = e.clientX - rect.left;
+            const pct = Math.max(20, Math.min(80, (offset / rect.width) * 100));
+            const codePane = this.codePaneRef.value;
+            const previewPane = this.previewPaneRef.value;
+            if (codePane)
+                codePane.style.flex = `0 0 ${pct}%`;
+            if (previewPane)
+                previewPane.style.flex = `0 0 ${100 - pct}%`;
+        };
+        /**
+         * Handles splitter drag end: cleans up listeners and removes dragging class.
+         * 处理分割条拖动结束：清理监听器并移除 dragging 类。
+         */
+        this.handleSplitterUp = () => {
+            this.splitterDragging = false;
+            this.splitterRef.value?.classList.remove('dragging');
+            document.removeEventListener('pointermove', this.handleSplitterMove);
+            document.removeEventListener('pointerup', this.handleSplitterUp);
+        };
+        /**
+         * Handles theme change from the theme picker component.
+         * Stores the selected theme and emits aithe-theme-change.
+         * 处理主题选择器的主题变更。存储所选主题并触发 aithe-theme-change 事件。
+         */
+        this.handleThemeChange = (event) => {
+            event.preventDefault();
+            const customEvent = event;
+            this.editorTheme = customEvent.detail.theme;
+            this.emit('aithe-theme-change', { theme: this.editorTheme });
+        };
+    }
+    static { this.styles = [
+        // Theme text tokens for syntax highlighting colors
+        unsafeCSS(aitheThemeText),
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        font-family: var(
+          --aithe-font-family-mono,
+          'SF Mono',
+          Consolas,
+          'Liberation Mono',
+          Menlo,
+          monospace
+        );
+      }
+
+      /* Main editor wrapper with border and rounded corners */
+      .editor-wrapper {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--aithe-color-border, #e2e8f0);
+        border-radius: var(--aithe-container-radius-md, 6px);
+        overflow: hidden;
+        background: var(--aithe-color-bg, #ffffff);
+      }
+
+      /* Fullscreen mode: fixed position covering the viewport */
+      .editor-wrapper.fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        border-radius: 0;
+        background: var(--aithe-color-bg, #ffffff);
+      }
+
+      .fullscreen .editor-body {
+        height: calc(100vh - 45px);
+      }
+
+      /* Focus state: blue border ring */
+      .editor-wrapper.focused {
+        border-color: var(--aithe-primary-6, #3b82f6);
+        box-shadow: 0 0 0 2px var(--aithe-primary-2, rgba(59, 130, 246, 0.2));
+      }
+
+      /* Readonly state: muted background */
+      .editor-wrapper.readonly {
+        background: var(--aithe-color-surface-muted, #f8fafc);
+      }
+
+      /* ---- Toolbar ---- */
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: var(--aithe-color-bg-subtle, #f8fafc);
+        border-bottom: 1px solid var(--aithe-color-border, #e2e8f0);
+        gap: 8px;
+      }
+
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      /* Toolbar icon buttons */
+      .toolbar-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        border-radius: var(--aithe-radius-md, 4px);
+        background: transparent;
+        color: var(--aithe-color-text-muted, #64748b);
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          color 0.15s;
+      }
+
+      .toolbar-btn:hover {
+        background: var(--aithe-color-bg, #f1f5f9);
+        color: var(--aithe-color-text, #1e293b);
+      }
+
+      .toolbar-btn:active {
+        background: var(--aithe-color-border, #e2e8f0);
+      }
+
+      .toolbar-btn.active,
+      ::slotted(.md-toolbar-btn.active) {
+        background: var(--aithe-primary-1, #f2f7ff);
+        color: var(--aithe-primary-6, #3b82f6);
+      }
+
+      /* Slotted toolbar button styling (for markdown-editor integration) */
+      ::slotted(.md-toolbar-btn) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        border-radius: var(--aithe-radius-md, 4px);
+        background: transparent;
+        color: var(--aithe-color-text-muted, #64748b);
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          color 0.15s;
+      }
+
+      ::slotted(.md-toolbar-btn:hover) {
+        background: var(--aithe-color-bg, #f1f5f9);
+        color: var(--aithe-color-text, #1e293b);
+      }
+
+      /* Copied state: green color feedback */
+      .toolbar-btn.copied {
+        color: var(--aithe-success-6, #22c55e);
+      }
+
+      /* Language select dropdown */
+      .language-select {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 8px;
+        border: 1px solid var(--aithe-color-border, #e2e8f0);
+        border-radius: var(--aithe-radius-md, 4px);
+        background: var(--aithe-color-surface, #ffffff);
+        color: var(--aithe-color-text, #1e293b);
+        font-size: 12px;
+        cursor: pointer;
+        transition: border-color 0.15s;
+      }
+
+      .language-select:hover {
+        border-color: var(--aithe-primary-5, #3b82f6);
+      }
+
+      .language-select:focus {
+        outline: none;
+        border-color: var(--aithe-primary-6, #3b82f6);
+        box-shadow: 0 0 0 2px var(--aithe-primary-2, rgba(59, 130, 246, 0.2));
+      }
+
+      /* ---- Editor Body ---- */
+      .editor-body {
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* Split layout: code on left, preview on right */
+      .editor-body.has-preview {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .editor-body .code-pane {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .editor-body .preview-pane {
+        flex: 1;
+        min-width: 0;
+        overflow: auto;
+        padding: 12px;
+        border-left: 1px solid var(--aithe-color-border, #e2e8f0);
+        background: var(--aithe-color-bg, #ffffff);
+      }
+
+      .editor-body .preview-pane.hidden {
+        display: none;
+      }
+
+      /* Resizable splitter between code and preview panes */
+      .editor-body .preview-splitter {
+        width: 4px;
+        cursor: col-resize;
+        background: var(--aithe-color-border, #e2e8f0);
+        flex-shrink: 0;
+        position: relative;
+        z-index: 2;
+        transition: background 0.15s;
+      }
+
+      .editor-body .preview-splitter:hover,
+      .editor-body .preview-splitter.dragging {
+        background: var(--aithe-primary-5, #3b82f6);
+      }
+
+      /* Code area container */
+      .editor-container {
+        display: flex;
+        width: 100%;
+        align-items: stretch;
+        overflow: auto;
+      }
+
+      /* Line numbers gutter */
+      .line-numbers {
+        flex-shrink: 0;
+        width: 44px;
+        padding: 12px 8px 12px 12px;
+        text-align: right;
+        color: var(--aithe-color-text-muted, #94a3b8);
+        background: var(--aithe-color-surface-muted, #f8fafc);
+        border-right: 1px solid var(--aithe-color-border, #e2e8f0);
+        font-size: 14px;
+        line-height: 1.6;
+        user-select: none;
+        white-space: pre;
+      }
+
+      .code-area {
+        position: relative;
+        min-width: 0;
+      }
+
+      /* Grid layout: highlight layer and textarea share the same grid cell */
+      .code-area-content {
+        position: relative;
+        display: grid;
+        min-height: 46.4px;
+        padding: 12px;
+        font-family: inherit;
+        font-size: 14px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      }
+
+      .code-area-content > * {
+        grid-area: 1 / 1 / 2 / 2;
+      }
+
+      .fullscreen .code-area {
+        max-height: none;
+      }
+
+      /* Syntax-highlighted layer (non-interactive, behind textarea) */
+      .highlight-layer {
+        color: var(--aithe-color-text, #1e293b);
+        pointer-events: none;
+      }
+
+      /* Transparent textarea overlay (interactive, on top) */
+      textarea.input-layer {
+        resize: none;
+        color: transparent;
+        caret-color: var(--aithe-color-text, #1e293b);
+        background: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-family: inherit;
+        font-size: 14px;
+        line-height: 1.6;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        z-index: 1;
+        pointer-events: auto;
+        overflow: hidden;
+      }
+
+      .editor-container.readonly .input-layer {
+        pointer-events: none;
+      }
+
+      /* ---- Syntax Highlighting Classes ---- */
+      /* These classes are applied by SyntaxRegistry rules.
+         Colors are controlled by --aithe-code-* CSS custom properties
+         which are set by each Aithe theme. */
+
+      .hl-comment {
+        color: var(--aithe-code-comment, #94a3b8);
+        font-style: italic;
+      }
+
+      .hl-keyword {
+        color: var(--aithe-code-keyword, #a626a4);
+      }
+
+      .hl-boolean {
+        color: var(--aithe-code-boolean, #986801);
+      }
+
+      .hl-builtin {
+        color: var(--aithe-code-builtin, #4078f2);
+      }
+
+      .hl-number {
+        color: var(--aithe-code-number, #986801);
+      }
+
+      .hl-string {
+        color: var(--aithe-code-string, #50a14f);
+      }
+
+      .hl-function {
+        color: var(--aithe-code-function, #4078f2);
+      }
+
+      .hl-type {
+        color: var(--aithe-code-type, #c18401);
+      }
+
+      .hl-preprocessor {
+        color: var(--aithe-code-preprocessor, #a626a4);
+      }
+
+      .hl-tag {
+        color: var(--aithe-code-tag, #e45649);
+      }
+
+      .hl-attr {
+        color: var(--aithe-code-attr, #986801);
+      }
+
+      .hl-key {
+        color: var(--aithe-code-key, #e45649);
+      }
+
+      .hl-punctuation {
+        color: var(--aithe-code-punctuation, #383a42);
+      }
+
+      .hl-doctype {
+        color: var(--aithe-code-doctype, #94a3b8);
+        font-style: italic;
+      }
+
+      .hl-entity {
+        color: var(--aithe-code-entity, #986801);
+      }
+
+      .hl-placeholder {
+        color: var(--aithe-code-placeholder, #94a3b8);
+      }
+    `,
+    ]; }
+    /* ---- Computed Properties ---- */
+    /**
+     * Returns the syntax-highlighted HTML for the current value and language.
+     * Falls back to placeholder text if the editor is empty.
+     * 返回当前值和语言的语法高亮 HTML。编辑器为空时回退到占位符文本。
+     */
+    get highlightedHtml() {
+        if (!this.value) {
+            return this.placeholder ? `<span class="hl-placeholder">${this.placeholder}</span>` : '';
+        }
+        return SyntaxRegistry.highlightByLanguage(this.value, this.language);
+    }
+    /**
+     * Returns the number of lines in the current value.
+     * 返回当前值的行数。
+     */
+    get lineCount() {
+        return (this.value.match(/\n/g) || []).length + 1;
+    }
+    /* ---- Lifecycle ---- */
+    firstUpdated() {
+        // Height is handled by CSS: .code-area has max-height: 400px with overflow: auto.
+        // 高度由 CSS 控制：.code-area 设置 max-height: 400px 和 overflow: auto。
+    }
+    updated(changedProperties) {
+        // Height is handled by CSS.
+        // 高度由 CSS 控制。
+    }
+    /* ---- Event Handlers ---- */
+    /**
+     * Handles textarea input: updates value and emits aithe-input.
+     * 处理 textarea 输入：更新 value 并触发 aithe-input 事件。
+     */
+    handleInput(e) {
+        e.stopPropagation();
+        const target = e.target;
+        this.value = target.value;
+        this.emit('aithe-input', { value: this.value });
+    }
+    /** Handles focus event. 处理聚焦事件。 */
+    handleFocus() {
+        this.focused = true;
+        this.emit('aithe-focus');
+    }
+    /** Handles blur event. 处理失焦事件。 */
+    handleBlur() {
+        this.focused = false;
+        this.emit('aithe-blur');
+    }
+    /**
+     * Handles Tab key: inserts 2 spaces instead of moving focus.
+     * 处理 Tab 键：插入 2 个空格而不是切换焦点。
+     */
+    handleKeyDown(e) {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const textarea = this.textarea;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const value = textarea.value;
+            this.value = value.substring(0, start) + '  ' + value.substring(end);
+            this.emit('aithe-input', { value: this.value });
+            requestAnimationFrame(() => {
+                textarea.selectionStart = textarea.selectionEnd = start + 2;
+            });
+        }
+    }
+    /** Handles language selector change. 处理语言选择器变更。 */
+    handleLanguageChange(e) {
+        const target = e.target;
+        this.language = target.value;
+        this.emit('aithe-language-change', { language: this.language });
+    }
+    /** Toggles line numbers visibility. 切换行号显示。 */
+    handleToggleLineNumbers() {
+        this.lineNumbers = !this.lineNumbers;
+        this.emit('aithe-line-numbers-change', { lineNumbers: this.lineNumbers });
+    }
+    /**
+     * Toggles fullscreen mode. When entering fullscreen,
+     * locks body scroll to prevent background scrolling.
+     * 切换全屏模式。进入全屏时锁定 body 滚动以防止背景滚动。
+     */
+    handleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+        this.emit('aithe-fullscreen-change', { isFullscreen: this.isFullscreen });
+        if (this.isFullscreen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+    }
+    /**
+     * Copies editor content to clipboard using the Clipboard API.
+     * Shows a brief "copied" feedback state for 2 seconds.
+     * 使用 Clipboard API 将编辑器内容复制到剪贴板。
+     * 显示 2 秒的"已复制"反馈状态。
+     */
+    async handleCopy() {
+        try {
+            await navigator.clipboard.writeText(this.value);
+            this.copied = true;
+            this.emit('aithe-copy', { success: true, value: this.value });
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }
+        catch (err) {
+            this.emit('aithe-copy', { success: false, error: err });
+        }
+    }
+    /** Toggles preview pane visibility. 切换预览面板可见性。 */
+    handleTogglePreview() {
+        this.previewVisible = !this.previewVisible;
+        this.emit('aithe-preview-toggle', { visible: this.previewVisible });
+    }
+    /* ---- Preview Splitter (Drag to Resize) ---- */
+    /**
+     * Initializes splitter drag: captures pointer and adds move/up listeners.
+     * 初始化分割条拖动：捕获指针并添加 move/up 监听器。
+     */
+    handleSplitterDown(e) {
+        e.preventDefault();
+        this.splitterDragging = true;
+        this.splitterRef.value?.classList.add('dragging');
+        document.addEventListener('pointermove', this.handleSplitterMove);
+        document.addEventListener('pointerup', this.handleSplitterUp);
+    }
+    /**
+     * Global keydown handler: Escape exits fullscreen.
+     * 全局键盘事件处理：Escape 键退出全屏。
+     */
+    handleGlobalKeyDown(e) {
+        if (e.key === 'Escape' && this.isFullscreen) {
+            this.handleFullscreen();
+        }
+    }
+    /* ---- Public Methods ---- */
+    /** Focus the editor textarea. 将焦点设置到编辑器文本区域。 */
+    focus() {
+        this.textarea?.focus();
+    }
+    /** Get the start position of text selection. 获取选区起始位置。 */
+    getSelectionStart() {
+        return this.textarea?.selectionStart ?? 0;
+    }
+    /** Get the end position of text selection. 获取选区结束位置。 */
+    getSelectionEnd() {
+        return this.textarea?.selectionEnd ?? 0;
+    }
+    /** Set the text selection range. 设置文本选区范围。 */
+    setSelection(start, end) {
+        if (this.textarea) {
+            this.textarea.selectionStart = start;
+            this.textarea.selectionEnd = end;
+        }
+    }
+    /**
+     * Get the list of supported languages from SyntaxRegistry.
+     * 从 SyntaxRegistry 获取支持的语言列表。
+     */
+    static getSupportedLanguages() {
+        return Array.from(SyntaxRegistry.getAll().values()).map((def) => ({
+            langId: def.langId,
+            name: def.name ?? def.langId,
+        }));
+    }
+    /* ---- Lifecycle: Connected / Disconnected ---- */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.handleGlobalKeyDown.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleGlobalKeyDown.bind(this));
+        document.body.style.overflow = '';
+    }
+    /* ---- Render Methods ---- */
+    /**
+     * Renders the language selector dropdown.
+     * 渲染语言选择器下拉框。
+     */
+    renderLanguageSelect() {
+        if (!this.showLanguage)
+            return nothing;
+        return html `
+      <select
+        class="language-select"
+        .value=${this.language}
+        @change=${this.handleLanguageChange}
+      >
+        ${Array.from(SyntaxRegistry.getAll().values()).map((def) => html `
+            <option value=${def.langId} ?selected=${def.langId === this.language}>
+              ${def.name ?? def.langId}
+            </option>
+          `)}
+      </select>
+    `;
+    }
+    /**
+     * Renders the line numbers toggle button.
+     * 渲染行号切换按钮。
+     */
+    renderLineNumbersToggle() {
+        if (!this.showLineNumbersToggle)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn ${classMap({ active: this.lineNumbers })}"
+        title=${this.lineNumbers
+            ? t('display.codeEditor.hideLineNumbers', 'Hide line numbers')
+            : t('display.codeEditor.showLineNumbers', 'Show line numbers')}
+        @click=${this.handleToggleLineNumbers}
+      >
+        <aithe-icon name="list" size="16"></aithe-icon>
+      </button>
+    `;
+    }
+    /**
+     * Renders the theme picker button.
+     * 渲染主题选择器按钮。
+     */
+    renderThemePicker() {
+        if (!this.showTheme)
+            return nothing;
+        return html `
+      <aithe-theme-picker
+        .value=${(this.editorTheme || this.computedTheme)}
+        placement="bottom-end"
+        icon-only
+        @aithe-theme-change=${this.handleThemeChange}
+      ></aithe-theme-picker>
+    `;
+    }
+    /**
+     * Renders the preview toggle button.
+     * 渲染预览切换按钮。
+     */
+    renderPreviewToggle() {
+        if (!this.showPreview)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn ${classMap({ active: this.previewVisible })}"
+        title=${this.previewVisible
+            ? t('display.codeEditor.hidePreview', 'Hide preview')
+            : t('display.codeEditor.showPreview', 'Show preview')}
+        @click=${this.handleTogglePreview}
+      >
+        <aithe-icon name="eye" size="16"></aithe-icon>
+      </button>
+    `;
+    }
+    /**
+     * Renders the copy button.
+     * 渲染复制按钮。
+     */
+    renderCopyButton() {
+        if (!this.showCopy)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn ${classMap({ copied: this.copied })}"
+        title=${this.copied
+            ? t('display.codeEditor.copied', 'Copied!')
+            : t('display.codeEditor.copyCode', 'Copy code')}
+        @click=${this.handleCopy}
+      >
+        <aithe-icon name="copy" size="16"></aithe-icon>
+      </button>
+    `;
+    }
+    /**
+     * Renders the fullscreen toggle button.
+     * 渲染全屏切换按钮。
+     */
+    renderFullscreenButton() {
+        if (!this.showFullscreen)
+            return nothing;
+        return html `
+      <button
+        class="toolbar-btn"
+        title=${this.isFullscreen
+            ? t('display.codeEditor.exitFullscreen', 'Exit fullscreen')
+            : t('display.codeEditor.fullscreen', 'Fullscreen')}
+        @click=${this.handleFullscreen}
+      >
+        <aithe-icon
+          name=${this.isFullscreen ? 'collapse' : 'expand'}
+          size="16"
+        ></aithe-icon>
+      </button>
+    `;
+    }
+    /**
+     * Renders the toolbar with language selector, theme picker,
+     * and action buttons (line numbers, preview, copy, fullscreen).
+     * 渲染工具栏，包含语言选择器、主题选择器和操作按钮。
+     */
+    renderToolbar() {
+        return html `
+      <div class="toolbar">
+        <div class="toolbar-left">
+          ${this.renderLanguageSelect()}
+          <slot name="toolbar-left"></slot>
+        </div>
+        <div class="toolbar-right">
+          <slot name="toolbar-right"></slot>
+          ${this.renderLineNumbersToggle()}
+          ${this.renderThemePicker()}
+          ${this.renderPreviewToggle()}
+          ${this.renderCopyButton()}
+          ${this.renderFullscreenButton()}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Renders the editor body with line numbers gutter and
+     * the textarea + highlight layer overlay.
+     * 渲染编辑器主体，包含行号槽和 textarea + 高亮层叠加。
+     */
+    renderEditorBody() {
+        const containerClasses = classMap({
+            'editor-container': true,
+            readonly: this.readonly,
+        });
+        const lineNumberItems = Array.from({ length: this.lineCount }, (_, i) => i + 1).join('\n');
+        return html `
+      <div class=${containerClasses}>
+        ${this.lineNumbers
+            ? html `
+              <div class="line-numbers">${lineNumberItems}</div>
+            `
+            : ''}
+        <div class="code-area">
+          <div class="code-area-content">
+            <!-- Syntax-highlighted layer (behind textarea, non-interactive) -->
+            <div class="highlight-layer" .innerHTML=${this.highlightedHtml}></div>
+            <!-- Transparent textarea (on top, handles all user input) -->
+            <textarea
+              class="input-layer"
+              spellcheck="false"
+              ?readonly=${this.readonly}
+              .value=${this.value}
+              @input=${this.handleInput}
+              @focus=${this.handleFocus}
+              @blur=${this.handleBlur}
+              @keydown=${this.handleKeyDown}
+            ></textarea>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Main render: assembles the editor wrapper with toolbar,
+     * editor body, optional preview pane, and resizable splitter.
+     * 主渲染：组装编辑器外壳，包含工具栏、编辑器主体、可选预览面板和可调整分割条。
+     */
+    render() {
+        const wrapperClasses = classMap({
+            'editor-wrapper': true,
+            focused: this.focused,
+            readonly: this.readonly,
+            fullscreen: this.isFullscreen,
+        });
+        const bodyClasses = classMap({
+            'editor-body': true,
+            'has-preview': this.showPreview && this.previewVisible,
+        });
+        const previewClasses = classMap({
+            'preview-pane': true,
+            hidden: !this.showPreview || !this.previewVisible,
+        });
+        return html `
+      <div class=${wrapperClasses} data-aithe-theme=${this.editorTheme || this.computedTheme}>
+        ${this.showToolbar ? this.renderToolbar() : nothing}
+        <div class=${bodyClasses} ${ref(this.editorBodyRef)}>
+          <div class="code-pane" ${ref(this.codePaneRef)}>${this.renderEditorBody()}</div>
+          ${this.showPreview
+            ? html `
+                <div
+                  class="preview-splitter"
+                  ${ref(this.splitterRef)}
+                  @pointerdown=${this.handleSplitterDown}
+                ></div>
+                <div class=${previewClasses} ${ref(this.previewPaneRef)}>
+                  <slot name="preview"></slot>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCodeEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheCodeEditor.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCodeEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'line-numbers' })
+], AitheCodeEditor.prototype, "lineNumbers", void 0);
+__decorate([
+    property({ type: String })
+], AitheCodeEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-toolbar' })
+], AitheCodeEditor.prototype, "showToolbar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-theme' })
+], AitheCodeEditor.prototype, "showTheme", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-preview' })
+], AitheCodeEditor.prototype, "showPreview", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-language' })
+], AitheCodeEditor.prototype, "showLanguage", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-fullscreen' })
+], AitheCodeEditor.prototype, "showFullscreen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-copy' })
+], AitheCodeEditor.prototype, "showCopy", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-line-numbers-toggle' })
+], AitheCodeEditor.prototype, "showLineNumbersToggle", void 0);
+__decorate([
+    query('.input-layer')
+], AitheCodeEditor.prototype, "textarea", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "focused", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "isFullscreen", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "copied", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "editorTheme", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "previewVisible", void 0);
+__decorate([
+    state()
+], AitheCodeEditor.prototype, "splitterDragging", void 0);
+AitheCodeEditor = __decorate([
+    customElement('aithe-code-editor')
+], AitheCodeEditor);
+export { AitheCodeEditor };