@aiao/code-editor-vue 0.0.19 → 0.0.21

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,36 +1,29 @@
-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 _default: 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;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    editorRef: HTMLDivElement;
-}, HTMLDivElement>;
+    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;
 //# sourceMappingURL=CodeEditor.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.vue.d.ts","sourceRoot":"","sources":["../src/CodeEditor.vue"],"names":[],"mappings":"AAsPA,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;;;;;;;;WAXQ,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;;;;AA4PjC,wBAUG"}
+{"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 +1,2 @@
-.cm-editor{height:100%}.cm-scroller{overflow:auto}
+.aiao-code-editor[data-v-64632146]{width:100%;height:100%;font-size:.875rem;display:block;overflow:hidden}.aiao-code-editor[data-v-64632146] .cm-editor{height:100%}.aiao-code-editor[data-v-64632146] .cm-scroller{overflow:auto}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -1,2 +1,18 @@
+/**
+ * @aiao/code-editor-vue
+ *
+ * @example
+ * ```vue
+ * <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,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,130 +1,169 @@
-import { defineComponent as P, ref as B, onMounted as q, onUnmounted as A, watch as i, openBlock as D, createElementBlock as G } from "vue";
-import { SUPPORT_LANGUAGES as N } from "@aiao/code-editor";
-import { indentWithTab as O } from "@codemirror/commands";
-import { indentUnit as H, LanguageDescription as I } from "@codemirror/language";
-import { Compartment as o, EditorState as L } from "@codemirror/state";
-import { oneDark as M } from "@codemirror/theme-one-dark";
-import { EditorView as l, placeholder as V, keymap as j, highlightWhitespace as z } from "@codemirror/view";
-import { basicSetup as F, minimalSetup as J } from "codemirror";
-const ne = /* @__PURE__ */ P({
-  __name: "CodeEditor",
-  props: {
-    value: { default: "" },
-    theme: { default: "light" },
-    language: { default: "sql" },
-    placeholder: { default: "" },
-    readonly: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    setup: { default: "basic" },
-    indentWithTab: { type: Boolean, default: !1 },
-    indentUnit: { default: "  " },
-    lineWrapping: { type: Boolean, default: !1 },
-    highlightWhitespace: { type: Boolean, default: !1 }
-  },
-  emits: ["update:value", "change"],
-  setup(T, { emit: k }) {
-    const t = T, f = k, r = B(null), a = B(null), c = new o(), s = new o(), d = new o(), u = new o(), p = new o(), h = new o(), g = new o(), m = new o(), v = new o(), x = async (e) => {
-      const n = I.matchLanguageName(N, e, !0);
-      return n ? await n.load() : [];
-    };
-    q(async () => {
-      if (!r.value) return;
-      const e = [
-        c.of([]),
-        s.of([]),
-        d.of([]),
-        u.of([]),
-        p.of([]),
-        h.of([]),
-        g.of([]),
-        m.of([]),
-        v.of([]),
-        l.updateListener.of((S) => {
-          if (S.docChanged) {
-            const _ = S.state.doc.toString();
-            f("update:value", _), f("change", _);
-          }
-        })
-      ];
-      t.setup === "basic" ? e.unshift(F) : e.unshift(J);
-      const n = L.create({
-        doc: t.value,
-        extensions: e
-      }), R = new l({
-        state: n,
-        parent: r.value
-      });
-      a.value = R, w(), y(), W(), b(), C(), U(), E();
-    }), A(() => {
-      a.value?.destroy();
-    }), i(
-      () => t.value,
-      (e) => {
-        const n = a.value;
-        n && n.state.doc.toString() !== e && n.dispatch({
-          changes: { from: 0, to: n.state.doc.length, insert: e }
-        });
-      }
-    ), i(() => t.theme, w), i(() => t.language, y), i(() => [t.readonly, t.disabled], W), i(() => t.placeholder, b), i(() => [t.indentWithTab, t.indentUnit], C), i(() => t.lineWrapping, U), i(() => t.highlightWhitespace, E);
-    function w() {
-      const e = a.value;
-      if (!e) return;
-      const n = t.theme === "dark" ? M : [];
-      e.dispatch({
-        effects: s.reconfigure(n)
-      });
-    }
-    async function y() {
-      const e = a.value;
-      if (!e) return;
-      const n = await x(t.language || "sql");
-      e.dispatch({
-        effects: c.reconfigure(n)
-      });
-    }
-    function W() {
-      const e = a.value;
-      e && e.dispatch({
-        effects: [
-          d.reconfigure(L.readOnly.of(t.readonly || t.disabled)),
-          u.reconfigure(l.editable.of(!t.readonly && !t.disabled))
-        ]
-      });
-    }
-    function b() {
-      const e = a.value;
-      e && e.dispatch({
-        effects: p.reconfigure(t.placeholder ? V(t.placeholder) : [])
-      });
-    }
-    function C() {
-      const e = a.value;
-      e && e.dispatch({
-        effects: [
-          h.reconfigure(t.indentWithTab ? j.of([O]) : []),
-          g.reconfigure(t.indentUnit ? H.of(t.indentUnit) : [])
-        ]
-      });
-    }
-    function U() {
-      const e = a.value;
-      e && e.dispatch({
-        effects: m.reconfigure(t.lineWrapping ? l.lineWrapping : [])
-      });
-    }
-    function E() {
-      const e = a.value;
-      e && e.dispatch({
-        effects: v.reconfigure(t.highlightWhitespace ? z() : [])
-      });
-    }
-    return (e, n) => (D(), G("div", {
-      ref_key: "editorRef",
-      ref: r,
-      class: "h-full w-full overflow-hidden text-sm"
-    }, null, 512));
-  }
-});
-export {
-  ne as CodeEditor
-};
+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";
+//#endregion
+//#region src/CodeEditor.vue
+var w = /*#__PURE__*/ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ n({
+	__name: "CodeEditor",
+	props: {
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		highlightWhitespace: {
+			type: Boolean,
+			default: !1
+		},
+		indentUnit: { default: "  " },
+		indentWithTab: {
+			type: Boolean,
+			default: !1
+		},
+		language: { default: "sql" },
+		languages: { default: () => u },
+		lineWrapping: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: { default: "" },
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		root: {},
+		setup: { default: "basic" },
+		theme: { default: "light" },
+		value: { default: "" }
+	},
+	emits: [
+		"blur",
+		"change",
+		"focus",
+		"update:value"
+	],
+	setup(n, { emit: u }) {
+		let w = n, T = u, E = s(null), D = c(null), O = e(() => ({
+			"aria-disabled": w.disabled || void 0,
+			class: "aiao-code-editor"
+		})), 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 = new h(), R = new h(), z = m.define(), B = {
+			basic: S,
+			minimal: C
+		}, V = 0;
+		i(() => {
+			let e = E.value;
+			if (!e) return;
+			let t = new v({
+				parent: e,
+				state: g.create({
+					doc: w.value,
+					extensions: [
+						k.of(U()),
+						A.of([]),
+						j.of([]),
+						M.of([]),
+						N.of([]),
+						P.of([]),
+						F.of([]),
+						I.of([]),
+						L.of([]),
+						R.of([]),
+						v.domEventObservers({
+							blur: () => T("blur"),
+							focus: () => T("focus")
+						}),
+						v.updateListener.of((e) => {
+							let t = e.transactions.some((e) => e.annotation(z));
+							if (!e.docChanged || t) return;
+							let n = e.state.doc.toString();
+							T("update:value", n), T("change", n);
+						})
+					]
+				}),
+				...w.root ? { root: w.root } : {}
+			});
+			D.value = t, W(), G(), q(), J(), Y(), X(), Z(), w.autoFocus && t.focus();
+		}), a(() => {
+			V += 1;
+			let e = D.value;
+			D.value = null, e?.destroy();
+		}), l(() => w.value, (e) => {
+			let t = D.value;
+			!t || t.state.doc.toString() === e || t.dispatch({
+				annotations: z.of(!0),
+				changes: {
+					from: 0,
+					insert: e,
+					to: t.state.doc.length
+				}
+			});
+		}), l(() => w.setup, H), l(() => w.theme, W), l([() => w.language, () => w.languages], G), l([() => w.readonly, () => w.disabled], q), l(() => w.placeholder, J), l([() => w.indentWithTab, () => w.indentUnit], Y), l(() => w.lineWrapping, X), l(() => w.highlightWhitespace, Z);
+		function H() {
+			D.value?.dispatch({ effects: k.reconfigure(U()) });
+		}
+		function U() {
+			return w.setup === null ? [] : B[w.setup];
+		}
+		function W() {
+			D.value?.dispatch({ effects: j.reconfigure(w.theme === "dark" ? _ : []) });
+		}
+		function G() {
+			let e = ++V, t = D.value;
+			if (!t) return;
+			let n = w.language;
+			if (!n || n === "plaintext" || w.languages.length === 0) {
+				t.dispatch({ effects: A.reconfigure([]) });
+				return;
+			}
+			let r = d(n, w.languages);
+			if (!r) {
+				console.error(`[CodeEditor] Language '${n}' not found.`), t.dispatch({ effects: A.reconfigure([]) });
+				return;
+			}
+			r.load().then((n) => {
+				K(e, t) && t.dispatch({ effects: A.reconfigure(n.extension) });
+			}, (r) => {
+				K(e, t) && (console.error(`[CodeEditor] Failed to load language '${n}':`, r), t.dispatch({ effects: A.reconfigure([]) }));
+			});
+		}
+		function K(e, t) {
+			return e === V && D.value === t;
+		}
+		function q() {
+			let e = D.value;
+			if (!e) return;
+			let t = w.readonly || w.disabled;
+			e.dispatch({ effects: [M.reconfigure(g.readOnly.of(t)), N.reconfigure(v.editable.of(!t))] });
+		}
+		function J() {
+			D.value?.dispatch({ effects: P.reconfigure(w.placeholder ? x(w.placeholder) : []) });
+		}
+		function Y() {
+			D.value?.dispatch({ effects: [F.reconfigure(w.indentWithTab ? b.of([f]) : []), I.reconfigure(w.indentUnit ? p.of(w.indentUnit) : [])] });
+		}
+		function X() {
+			D.value?.dispatch({ effects: L.reconfigure(w.lineWrapping ? v.lineWrapping : []) });
+		}
+		function Z() {
+			D.value?.dispatch({ effects: R.reconfigure(w.highlightWhitespace ? y() : []) });
+		}
+		return (e, n) => (o(), t("div", r(O.value, {
+			ref_key: "editorRef",
+			ref: E
+		}), null, 16));
+	}
+}), [["__scopeId", "data-v-64632146"]]);
+//#endregion
+export { w as CodeEditor };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@aiao/code-editor-vue",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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.2",
-    "@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.39.16",
+    "@codemirror/view": "^6.43.5",
     "codemirror": "^6.0.1",
-    "@aiao/code-editor": "0.0.19"
+    "@aiao/code-editor": "0.0.21"
   }
 }