koishi-plugin-codemirror 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +15 -15
- package/dist/style.css +1 -1
- package/package.json +3 -3
- package/readme.md +24 -0
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.bottom[data-v-
|
|
1
|
+
.bottom[data-v-faa440c4]>*{max-height:60vh}.codemirror-editor{height:100%;min-height:0}.codemirror-editor .cm-editor{height:100%}.codemirror-editor.auto-height,.codemirror-editor.auto-height .cm-editor{height:auto;max-height:60vh}.select-all{-webkit-user-select:all;user-select:all}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "koishi-plugin-codemirror",
|
|
3
3
|
"description": "CodeMirror schema role for Koishi Web UI",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"typings": "lib/index.d.ts",
|
|
7
7
|
"files": [
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"prepare": "cp ../../LICENSE ."
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@codemirror/lang-javascript": "^6.2.
|
|
32
|
+
"@codemirror/lang-javascript": "^6.2.5",
|
|
33
33
|
"@codemirror/lang-json": "^6.0.2",
|
|
34
|
-
"@codemirror/lang-yaml": "^6.1.
|
|
34
|
+
"@codemirror/lang-yaml": "^6.1.3",
|
|
35
35
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
36
36
|
"@koishijs/client": "^5.29.2",
|
|
37
37
|
"codemirror": "^6.0.2"
|
package/readme.md
CHANGED
|
@@ -19,3 +19,27 @@ export const Config: Schema<Config> = Schema.object({
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
`.role("codemirror")` 还接受第二参数 `extra`，接受一个带有 `lang` 属性的对象，可更改编辑语言，目前支持的值有 `json`、`yaml`/`yml`。
|
|
22
|
+
|
|
23
|
+
Schema role 编辑器会随代码内容自动调整高度，并将编辑区最大高度限制为视口高度的 `60vh`。它还提供全选、撤销/重做、缩进和查找/替换工具栏。
|
|
24
|
+
|
|
25
|
+
## 可复用编辑器
|
|
26
|
+
|
|
27
|
+
插件也会在控制台全局注册 `k-codemirror-editor`，可用于构建独立的代码编辑界面：
|
|
28
|
+
|
|
29
|
+
~~~vue
|
|
30
|
+
<k-codemirror-editor
|
|
31
|
+
v-model="source"
|
|
32
|
+
language="javascript"
|
|
33
|
+
scroll-past-end
|
|
34
|
+
/>
|
|
35
|
+
~~~
|
|
36
|
+
|
|
37
|
+
组件支持以下属性：
|
|
38
|
+
|
|
39
|
+
* `modelValue`：编辑内容，通常通过 `v-model` 双向绑定。
|
|
40
|
+
* `language`：编辑语言，支持 `javascript`、`json`、`yaml`，默认为 JavaScript。
|
|
41
|
+
* `disabled`：禁用编辑。
|
|
42
|
+
* `scrollPastEnd`：允许滚动到文档末尾之后，默认为关闭。
|
|
43
|
+
* `autoHeight`：根据内容调整高度并限制最大高度为 `60vh`，默认为关闭。默认布局占满父容器，适合全高编辑器。
|
|
44
|
+
|
|
45
|
+
编辑器实例还公开 `selectAll()`、`undo()`、`redo()`、`indentLess()`、`indentMore()`、`indentSelection()` 和 `toggleFindReplace()` 方法，可通过组件 `ref` 调用。
|