@aiao/code-editor-vue 0.0.20 → 0.0.22

package/README.md

@@ -1,30 +1,82 @@
 # @aiao/code-editor-vue
 
-Vue 代码编辑器组件，基于 CodeMirror 6。
-
-## 功能特性
-
-- **Vue 组件**: 开箱即用的 Vue 3 组件
-- **v-model 支持**: 支持 v-model 双向绑定
-- **主题支持**: 支持亮色和暗色主题
+基于 CodeMirror 6 的 Vue 3 代码编辑器组件。
 
 ## 安装
 
 ```bash
-npm install @aiao/code-editor @aiao/code-editor-vue
-# 或
-pnpm add @aiao/code-editor @aiao/code-editor-vue
+pnpm add @aiao/code-editor-vue
 ```
 
 ## 使用
 
 ```vue
-<script setup lang="ts">
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { CodeEditor } from '@aiao/code-editor-vue';
+import '@aiao/code-editor-vue/style.css';
+
+const code = ref('const answer = 42;');
 </script>
 
 <template>
-  <CodeEditor v-model="code" language="typescript" />
+  <CodeEditor
+    v-model:value="code"
+    @blur="console.log('blur')"
+    @focus="console.log('focus')"
+    language="typescript"
+    theme="dark"
+  />
 </template>
 ```
 
+`v-model:value` 同步 `value` / `update:value`。`change` 只在用户修改文档时触发，外部 `value` 更新不会反向触发。
+
+## Props
+
+| Prop                  | 类型                                       | 默认值              | 行为                 |
+| --------------------- | ------------------------------------------ | ------------------- | -------------------- |
+| `value`               | `string`                                   | `''`                | 动态同步             |
+| `theme`               | `'light' \| 'dark'`                        | `'light'`           | 动态重配置           |
+| `language`            | `string`                                   | `'sql'`             | 动态异步加载         |
+| `languages`           | `readonly CodeEditorLanguageDescription[]` | `SUPPORT_LANGUAGES` | 动态替换语言列表     |
+| `placeholder`         | `string`                                   | `''`                | 动态重配置           |
+| `readonly`            | `boolean`                                  | `false`             | 动态重配置           |
+| `disabled`            | `boolean`                                  | `false`             | 动态重配置           |
+| `setup`               | `'basic' \| 'minimal'`                     | `'basic'`           | 动态重配置           |
+| `indentWithTab`       | `boolean`                                  | `false`             | 动态重配置           |
+| `indentUnit`          | `string`                                   | `'  '`              | 动态重配置           |
+| `lineWrapping`        | `boolean`                                  | `false`             | 动态重配置           |
+| `highlightWhitespace` | `boolean`                                  | `false`             | 动态重配置           |
+| `autoFocus`           | `boolean`                                  | `false`             | 仅初始化时读取       |
+| `root`                | `Document \| ShadowRoot`                   | `undefined`         | 仅初始化时传给编辑器 |
+
+空字符串或 `plaintext` 会清空语言扩展。未知语言和加载失败会报告错误并保持纯文本状态。快速切换语言时，只有最后一次请求可以更新当前编辑器。
+
+自定义语言列表使用核心包的公开类型：
+
+```ts
+import type { CodeEditorLanguageDescription } from '@aiao/code-editor';
+
+declare const myLanguage: CodeEditorLanguageDescription;
+const languages: readonly CodeEditorLanguageDescription[] = [myLanguage];
+```
+
+```vue
+<CodeEditor v-model:value="code" :languages="languages" language="my-language" />
+```
+
+## Events
+
+| 事件           | 参数              | 触发时机               |
+| -------------- | ----------------- | ---------------------- |
+| `update:value` | `(value: string)` | 用户修改文档           |
+| `change`       | `(value: string)` | 用户修改文档           |
+| `focus`        | `()`              | 编辑器内容区域获得焦点 |
+| `blur`         | `()`              | 编辑器内容区域失去焦点 |
+
+## 公开类型
+
+```ts
+import type { CodeEditorEmits, CodeEditorProps, CodeEditorSetup, CodeEditorTheme } from '@aiao/code-editor-vue';
+```

package/dist/CodeEditor.vue.d.ts

@@ -1,34 +1,28 @@
-type __VLS_Props = {
-    value?: string;
-    theme?: 'light' | 'dark';
-    language?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-    setup?: 'basic' | 'minimal';
-    indentWithTab?: boolean;
-    indentUnit?: string;
-    lineWrapping?: boolean;
-    highlightWhitespace?: boolean;
-};
-declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:value": (value: string) => any;
+import { CodeEditorProps, CodeEditorSetup } from './code-editor.types.js';
+declare const __VLS_export: import('vue').DefineComponent<CodeEditorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: () => any;
     change: (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string) => any) | undefined;
+    focus: () => any;
+    "update:value": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<CodeEditorProps> & Readonly<{
+    onBlur?: (() => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
-    value: string;
-    theme: "light" | "dark";
-    language: string;
-    placeholder: string;
-    readonly: boolean;
-    disabled: boolean;
-    setup: "basic" | "minimal";
-    indentWithTab: boolean;
-    indentUnit: string;
-    lineWrapping: boolean;
-    highlightWhitespace: boolean;
+    readonly autoFocus: boolean;
+    readonly disabled: boolean;
+    readonly highlightWhitespace: boolean;
+    readonly indentUnit: string;
+    readonly indentWithTab: boolean;
+    readonly language: string;
+    readonly languages: readonly import('@aiao/code-editor').CodeEditorLanguageDescription[];
+    readonly lineWrapping: boolean;
+    readonly placeholder: string;
+    readonly readonly: boolean;
+    readonly setup: CodeEditorSetup;
+    readonly theme: import('@aiao/code-editor').CodeEditorTheme;
+    readonly value: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/CodeEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.vue.d.ts","sourceRoot":"","sources":["../src/CodeEditor.vue"],"names":[],"mappings":"AAuRA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAqPJ,QAAA,MAAM,YAAY;;;;;;;WAhQN,MAAM;WACN,OAAO,GAAG,MAAM;cACb,MAAM;iBACH,MAAM;cACT,OAAO;cACP,OAAO;WACV,OAAO,GAAG,SAAS;mBACX,OAAO;gBACV,MAAM;kBACJ,OAAO;yBACA,OAAO;6EA0P/B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CodeEditor.vue.d.ts","sourceRoot":"","sources":["../src/CodeEditor.vue"],"names":[],"mappings":"AAuQA,OAAO,KAAK,EAAmB,eAAe,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAkQhG,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/code-editor.types.d.ts

@@ -0,0 +1,29 @@
+import { CodeEditorLanguageDescription, CodeEditorTheme } from '@aiao/code-editor';
+/** CodeMirror 预置扩展集合。 */
+export type CodeEditorSetup = 'basic' | 'minimal' | null;
+/** Vue CodeEditor 的公开属性。 */
+export interface CodeEditorProps {
+    readonly autoFocus?: boolean;
+    readonly disabled?: boolean;
+    readonly highlightWhitespace?: boolean;
+    readonly indentUnit?: string;
+    readonly indentWithTab?: boolean;
+    readonly language?: string;
+    readonly languages?: readonly CodeEditorLanguageDescription[];
+    readonly lineWrapping?: boolean;
+    readonly placeholder?: string;
+    readonly readonly?: boolean;
+    readonly root?: Document | ShadowRoot;
+    readonly setup?: CodeEditorSetup;
+    readonly theme?: CodeEditorTheme;
+    readonly value?: string;
+}
+/** Vue CodeEditor 的公开事件。 */
+export interface CodeEditorEmits {
+    blur: [];
+    change: [value: string];
+    focus: [];
+    'update:value': [value: string];
+}
+export type { CodeEditorTheme } from '@aiao/code-editor';
+//# sourceMappingURL=code-editor.types.d.ts.map

package/dist/code-editor.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.types.d.ts","sourceRoot":"","sources":["../src/code-editor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAExF,yBAAyB;AACzB,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD,4BAA4B;AAC5B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,6BAA6B,EAAE,CAAC;IAC9D,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,eAAe,CAAC;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,4BAA4B;AAC5B,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,EAAE,CAAC;IACT,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACxB,KAAK,EAAE,EAAE,CAAC;IACV,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.css

@@ -1,2 +1,2 @@
-.cm-editor{height:100%}.cm-scroller{overflow:auto}
+.aiao-code-editor[data-v-9b1829ca]{width:100%;height:100%;font-size:.875rem;display:block;overflow:hidden}.aiao-code-editor[data-v-9b1829ca] .cm-editor{height:100%}.aiao-code-editor[data-v-9b1829ca] .cm-scroller{overflow:auto}
 /*$vite$:1*/

package/dist/index.d.ts

@@ -1,23 +1,18 @@
 /**
  * @aiao/code-editor-vue
  *
- * Vue CodeMirror 代码编辑器组件
- *
  * @example
  * ```vue
- * <template>
- *   <CodeEditor
- *     v-model:value="code"
- *     language="typescript"
- *     theme="dark"
- *     @change="onCodeChange"
- *   />
- * </template>
- *
- * <script setup>
+ * <script setup lang="ts">
  * import { CodeEditor } from '@aiao/code-editor-vue';
+ * import '@aiao/code-editor-vue/style.css';
  * </script>
+ *
+ * <template>
+ *   <CodeEditor v-model:value="code" language="typescript" />
+ * </template>
  * ```
  */
+export type { CodeEditorEmits, CodeEditorProps, CodeEditorSetup, CodeEditorTheme } from './code-editor.types.js';
 export { default as CodeEditor } from './CodeEditor.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACjH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,131 +1,251 @@
-import { createElementBlock as e, defineComponent as t, onMounted as n, onUnmounted as r, openBlock as i, ref as a, watch as o } from "vue";
-import { SUPPORT_LANGUAGES as s } from "@aiao/code-editor";
-import { indentWithTab as c } from "@codemirror/commands";
-import { LanguageDescription as l, indentUnit as u } from "@codemirror/language";
-import { Annotation as d, Compartment as f, EditorState as p } from "@codemirror/state";
-import { oneDark as m } from "@codemirror/theme-one-dark";
-import { EditorView as h, highlightWhitespace as g, keymap as _, placeholder as v } from "@codemirror/view";
-import { basicSetup as y, minimalSetup as b } from "codemirror";
-//#endregion
-//#region src/CodeEditor.vue
-var x = /* @__PURE__ */ t({
+import { computed as e, createElementBlock as t, defineComponent as n, mergeProps as r, onMounted as i, onUnmounted as a, openBlock as o, ref as s, shallowRef as c, watch as l } from "vue";
+import { SUPPORT_LANGUAGES as u, findLanguageByName as d } from "@aiao/code-editor";
+import { indentWithTab as f } from "@codemirror/commands";
+import { indentUnit as p } from "@codemirror/language";
+import { Annotation as m, Compartment as h, EditorState as g } from "@codemirror/state";
+import { oneDark as _ } from "@codemirror/theme-one-dark";
+import { EditorView as v, highlightWhitespace as y, keymap as b, placeholder as x } from "@codemirror/view";
+import { basicSetup as S, minimalSetup as C } from "codemirror";
+//#region src/CodeEditor.vue?vue&type=script&setup=true&lang.ts
+var w = /*@__PURE__*/ n({
 	__name: "CodeEditor",
 	props: {
-		value: { default: "" },
-		theme: { default: "light" },
-		language: { default: "sql" },
-		placeholder: { default: "" },
-		readonly: {
+		autoFocus: {
 			type: Boolean,
+			required: !1,
 			default: !1
 		},
 		disabled: {
 			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		highlightWhitespace: {
+			type: Boolean,
+			required: !1,
 			default: !1
 		},
-		setup: { default: "basic" },
+		indentUnit: {
+			type: String,
+			required: !1,
+			default: "  "
+		},
 		indentWithTab: {
 			type: Boolean,
+			required: !1,
 			default: !1
 		},
-		indentUnit: { default: "  " },
+		language: {
+			type: String,
+			required: !1,
+			default: "sql"
+		},
+		languages: {
+			type: Array,
+			required: !1,
+			default: () => u
+		},
 		lineWrapping: {
 			type: Boolean,
+			required: !1,
 			default: !1
 		},
-		highlightWhitespace: {
+		placeholder: {
+			type: String,
+			required: !1,
+			default: ""
+		},
+		readonly: {
 			type: Boolean,
+			required: !1,
 			default: !1
+		},
+		root: {
+			type: null,
+			required: !1
+		},
+		setup: {
+			type: [String, null],
+			required: !1,
+			default: "basic"
+		},
+		theme: {
+			type: String,
+			required: !1,
+			default: "light"
+		},
+		value: {
+			type: String,
+			required: !1,
+			default: ""
 		}
 	},
-	emits: ["update:value", "change"],
-	setup(t, { emit: x }) {
-		let S = t, C = x, w = a(null), T = a(null), E = new f(), D = new f(), O = new f(), k = new f(), A = new f(), j = new f(), M = new f(), N = new f(), P = new f(), F = d.define(), I = async (e) => {
-			let t = l.matchLanguageName(s, e, !0);
-			if (!t) return console.error(`[CodeEditor] Language '${e}' not found.`), [];
-			try {
-				return await t.load();
-			} catch (t) {
-				return console.error(`[CodeEditor] Failed to load language '${e}':`, t), [];
-			}
-		};
-		n(async () => {
-			if (!w.value) return;
-			let e = [
-				E.of([]),
-				D.of([]),
-				O.of([]),
-				k.of([]),
-				A.of([]),
-				j.of([]),
-				M.of([]),
-				N.of([]),
-				P.of([]),
-				h.updateListener.of((e) => {
-					if (e.docChanged && !e.transactions.some((e) => e.annotation(F))) {
-						let t = e.state.doc.toString();
-						C("update:value", t), C("change", t);
-					}
-				})
-			];
-			S.setup === "basic" ? e.unshift(y) : e.unshift(b), T.value = new h({
-				state: p.create({
-					doc: S.value,
-					extensions: e
+	emits: [
+		"blur",
+		"change",
+		"focus",
+		"update:value"
+	],
+	setup(t, { expose: n, emit: r }) {
+		n();
+		let o = t, u = r, w = s(null), T = c(null), E = e(() => ({
+			"aria-disabled": o.disabled || void 0,
+			class: "aiao-code-editor"
+		})), D = new h(), O = new h(), k = new h(), A = new h(), j = new h(), M = new h(), N = new h(), P = new h(), F = new h(), I = new h(), L = m.define(), R = {
+			basic: S,
+			minimal: C
+		}, z = 0;
+		i(() => {
+			let e = w.value;
+			if (!e) return;
+			let t = new v({
+				parent: e,
+				state: g.create({
+					doc: o.value,
+					extensions: [
+						D.of(V()),
+						O.of([]),
+						k.of([]),
+						A.of([]),
+						j.of([]),
+						M.of([]),
+						N.of([]),
+						P.of([]),
+						F.of([]),
+						I.of([]),
+						v.domEventObservers({
+							blur: () => u("blur"),
+							focus: () => u("focus")
+						}),
+						v.updateListener.of((e) => {
+							let t = e.transactions.some((e) => e.annotation(L));
+							if (!e.docChanged || t) return;
+							let n = e.state.doc.toString();
+							u("update:value", n), u("change", n);
+						})
+					]
 				}),
-				parent: w.value
-			}), L(), R(), z(), B(), V(), H(), U();
-		}), r(() => {
-			T.value?.destroy();
-		}), o(() => S.value, (e) => {
+				...o.root ? { root: o.root } : {}
+			});
+			T.value = t, H(), U(), G(), K(), q(), J(), Y(), o.autoFocus && t.focus();
+		}), a(() => {
+			z += 1;
+			let e = T.value;
+			T.value = null, e?.destroy();
+		}), l(() => o.value, (e) => {
 			let t = T.value;
-			t && t.state.doc.toString() !== e && t.dispatch({
+			!t || t.state.doc.toString() === e || t.dispatch({
+				annotations: L.of(!0),
 				changes: {
 					from: 0,
-					to: t.state.doc.length,
-					insert: e
-				},
-				annotations: F.of(!0)
+					insert: e,
+					to: t.state.doc.length
+				}
 			});
-		}), o(() => S.theme, L), o(() => S.language, R), o(() => [S.readonly, S.disabled], z), o(() => S.placeholder, B), o(() => [S.indentWithTab, S.indentUnit], V), o(() => S.lineWrapping, H), o(() => S.highlightWhitespace, U);
-		function L() {
-			let e = T.value;
-			if (!e) return;
-			let t = S.theme === "dark" ? m : [];
-			e.dispatch({ effects: D.reconfigure(t) });
-		}
-		async function R() {
-			let e = T.value;
-			if (!e) return;
-			let t = await I(S.language || "sql");
-			e.dispatch({ effects: E.reconfigure(t) });
-		}
-		function z() {
-			let e = T.value;
-			e && e.dispatch({ effects: [O.reconfigure(p.readOnly.of(S.readonly || S.disabled)), k.reconfigure(h.editable.of(!S.readonly && !S.disabled))] });
-		}
+		}), l(() => o.setup, B), l(() => o.theme, H), l([() => o.language, () => o.languages], U), l([() => o.readonly, () => o.disabled], G), l(() => o.placeholder, K), l([() => o.indentWithTab, () => o.indentUnit], q), l(() => o.lineWrapping, J), l(() => o.highlightWhitespace, Y);
 		function B() {
-			let e = T.value;
-			e && e.dispatch({ effects: A.reconfigure(S.placeholder ? v(S.placeholder) : []) });
+			T.value?.dispatch({ effects: D.reconfigure(V()) });
 		}
 		function V() {
-			let e = T.value;
-			e && e.dispatch({ effects: [j.reconfigure(S.indentWithTab ? _.of([c]) : []), M.reconfigure(S.indentUnit ? u.of(S.indentUnit) : [])] });
+			return o.setup === null ? [] : R[o.setup];
 		}
 		function H() {
-			let e = T.value;
-			e && e.dispatch({ effects: N.reconfigure(S.lineWrapping ? h.lineWrapping : []) });
+			T.value?.dispatch({ effects: k.reconfigure(o.theme === "dark" ? _ : []) });
 		}
 		function U() {
+			let e = ++z, t = T.value;
+			if (!t) return;
+			let n = o.language;
+			if (!n || n === "plaintext" || o.languages.length === 0) {
+				t.dispatch({ effects: O.reconfigure([]) });
+				return;
+			}
+			let r = d(n, o.languages);
+			if (!r) {
+				console.error(`[CodeEditor] Language '${n}' not found.`), t.dispatch({ effects: O.reconfigure([]) });
+				return;
+			}
+			r.load().then((n) => {
+				W(e, t) && t.dispatch({ effects: O.reconfigure(n.extension) });
+			}, (r) => {
+				W(e, t) && (console.error(`[CodeEditor] Failed to load language '${n}':`, r), t.dispatch({ effects: O.reconfigure([]) }));
+			});
+		}
+		function W(e, t) {
+			return e === z && T.value === t;
+		}
+		function G() {
 			let e = T.value;
-			e && e.dispatch({ effects: P.reconfigure(S.highlightWhitespace ? g() : []) });
+			if (!e) return;
+			let t = o.readonly || o.disabled;
+			e.dispatch({ effects: [A.reconfigure(g.readOnly.of(t)), j.reconfigure(v.editable.of(!t))] });
+		}
+		function K() {
+			T.value?.dispatch({ effects: M.reconfigure(o.placeholder ? x(o.placeholder) : []) });
+		}
+		function q() {
+			T.value?.dispatch({ effects: [N.reconfigure(o.indentWithTab ? b.of([f]) : []), P.reconfigure(o.indentUnit ? p.of(o.indentUnit) : [])] });
 		}
-		return (t, n) => (i(), e("div", {
-			class: "h-full w-full overflow-hidden text-sm",
-			ref_key: "editorRef",
-			ref: w
-		}, null, 512));
+		function J() {
+			T.value?.dispatch({ effects: F.reconfigure(o.lineWrapping ? v.lineWrapping : []) });
+		}
+		function Y() {
+			T.value?.dispatch({ effects: I.reconfigure(o.highlightWhitespace ? y() : []) });
+		}
+		let X = {
+			props: o,
+			emit: u,
+			editorRef: w,
+			viewRef: T,
+			hostAttributes: E,
+			setupConf: D,
+			languageConf: O,
+			themeConf: k,
+			readonlyConf: A,
+			editableConf: j,
+			placeholderConf: M,
+			indentWithTabConf: N,
+			indentUnitConf: P,
+			lineWrappingConf: F,
+			highlightWhitespaceConf: I,
+			External: L,
+			setupExtensions: R,
+			get languageRequest() {
+				return z;
+			},
+			set languageRequest(e) {
+				z = e;
+			},
+			updateSetup: B,
+			getSetupExtension: V,
+			updateTheme: H,
+			updateLanguage: U,
+			isCurrentLanguageRequest: W,
+			updateReadonly: G,
+			updatePlaceholder: K,
+			updateIndent: q,
+			updateLineWrapping: J,
+			updateHighlightWhitespace: Y
+		};
+		return Object.defineProperty(X, "__isScriptSetup", {
+			enumerable: !1,
+			value: !0
+		}), X;
 	}
-});
+}), T = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+//#region src/CodeEditor.vue
+function E(e, n, i, a, s, c) {
+	return o(), t("div", r(a.hostAttributes, { ref: "editorRef" }), null, 16);
+}
+var D = /*#__PURE__*/ T(w, [
+	["render", E],
+	["__scopeId", "data-v-9b1829ca"],
+	["__file", "/private/tmp/aiao-release-027.kcmOWl/aiao/packages/code-editor-vue/src/CodeEditor.vue"]
+]);
 //#endregion
-export { x as CodeEditor };
+export { D as CodeEditor };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@aiao/code-editor-vue",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "exports": {
     "./package.json": "./package.json",
+    "./style.css": "./dist/index.css",
     ".": {
       "@aiao/source": "./src/index.ts",
       "types": "./dist/index.d.ts",
@@ -31,12 +33,12 @@
     "vue": ">=3.5.0"
   },
   "dependencies": {
-    "@codemirror/commands": "^6.10.2",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.5.4",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "6.7.1",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "6.42.1",
+    "@codemirror/view": "^6.43.5",
     "codemirror": "^6.0.1",
-    "@aiao/code-editor": "0.0.20"
+    "@aiao/code-editor": "0.0.22"
   }
 }