@nonoun/native-codemirror 0.2.0
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/base-extensions.d.ts +24 -0
- package/dist/base-extensions.d.ts.map +1 -0
- package/dist/factory.d.ts +42 -0
- package/dist/factory.d.ts.map +1 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/nui-codemirror.css +152 -0
- package/dist/nui-codemirror.js +418 -0
- package/dist/theme.d.ts +12 -0
- package/dist/theme.d.ts.map +1 -0
- package/package.json +40 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base CodeMirror Extensions
|
|
3
|
+
*
|
|
4
|
+
* Shared defaults for all CodeMirror instances in the NativeUI ecosystem.
|
|
5
|
+
* Includes keymaps, bracket handling, autocompletion, line numbers, and
|
|
6
|
+
* active-line highlighting.
|
|
7
|
+
*/
|
|
8
|
+
import type { Extension } from '@codemirror/state';
|
|
9
|
+
/**
|
|
10
|
+
* Base extension set shared by all NativeUI CodeMirror instances.
|
|
11
|
+
*
|
|
12
|
+
* Includes:
|
|
13
|
+
* - Default, history, close-brackets, fold, and completion keymaps
|
|
14
|
+
* - Undo/redo history
|
|
15
|
+
* - Bracket matching and auto-close
|
|
16
|
+
* - Autocompletion
|
|
17
|
+
* - Line numbers with fold gutter
|
|
18
|
+
* - Active line + gutter highlighting
|
|
19
|
+
* - Selection drawing and special character highlighting
|
|
20
|
+
* - Indent on input
|
|
21
|
+
* - Line wrapping
|
|
22
|
+
*/
|
|
23
|
+
export declare const nuiBaseExtensions: Extension;
|
|
24
|
+
//# sourceMappingURL=base-extensions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base-extensions.d.ts","sourceRoot":"","sources":["../src/base-extensions.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAwBnD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,EAAE,SAmC/B,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Editor Factory
|
|
3
|
+
*
|
|
4
|
+
* createEditorView() assembles theme, syntax highlighting, base extensions,
|
|
5
|
+
* and user-supplied extensions into a ready-to-use EditorView.
|
|
6
|
+
*/
|
|
7
|
+
import { EditorView } from '@codemirror/view';
|
|
8
|
+
import type { Extension } from '@codemirror/state';
|
|
9
|
+
/**
|
|
10
|
+
* Options for createEditorView.
|
|
11
|
+
*/
|
|
12
|
+
export interface CreateEditorOptions {
|
|
13
|
+
/** Initial document content. Defaults to empty string. */
|
|
14
|
+
doc?: string;
|
|
15
|
+
/** Additional extensions appended after the base set. */
|
|
16
|
+
extensions?: Extension[];
|
|
17
|
+
/** When true, the editor is read-only (no editing, but still selectable). */
|
|
18
|
+
readonly?: boolean;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Create a fully themed CodeMirror EditorView.
|
|
22
|
+
*
|
|
23
|
+
* Combines the NativeUI dark theme, syntax highlighting, base extensions
|
|
24
|
+
* (keymaps, history, brackets, autocomplete, line numbers, etc.), and any
|
|
25
|
+
* additional extensions the consumer provides.
|
|
26
|
+
*
|
|
27
|
+
* @param container - DOM element to mount the editor into.
|
|
28
|
+
* @param options - Optional configuration.
|
|
29
|
+
* @returns A live EditorView instance.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```ts
|
|
33
|
+
* import { createEditorView } from '@nonoun/native-codemirror';
|
|
34
|
+
*
|
|
35
|
+
* const view = createEditorView(document.getElementById('editor')!, {
|
|
36
|
+
* doc: 'console.log("hello");',
|
|
37
|
+
* readonly: true,
|
|
38
|
+
* });
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare function createEditorView(container: HTMLElement, options?: CreateEditorOptions): EditorView;
|
|
42
|
+
//# sourceMappingURL=factory.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../src/factory.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,WAAW,EACtB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,UAAU,CAuBZ"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @nonoun/native-codemirror
|
|
3
|
+
*
|
|
4
|
+
* Shared CodeMirror 6 integration for the NativeUI ecosystem.
|
|
5
|
+
*
|
|
6
|
+
* Provides a dark theme, syntax highlighting, base extensions, and a
|
|
7
|
+
* factory function. Also re-exports key CodeMirror APIs so consumer
|
|
8
|
+
* packages can import through this single dependency.
|
|
9
|
+
*/
|
|
10
|
+
export { nuiTheme, nuiHighlightStyle, nuiSyntaxHighlighting } from './theme.ts';
|
|
11
|
+
export { nuiBaseExtensions } from './base-extensions.ts';
|
|
12
|
+
export { createEditorView } from './factory.ts';
|
|
13
|
+
export type { CreateEditorOptions } from './factory.ts';
|
|
14
|
+
export { EditorView, keymap, Decoration, ViewPlugin, WidgetType, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, } from '@codemirror/view';
|
|
15
|
+
export type { DecorationSet, ViewUpdate } from '@codemirror/view';
|
|
16
|
+
export { EditorState, Compartment, StateField, StateEffect } from '@codemirror/state';
|
|
17
|
+
export type { Extension, Transaction } from '@codemirror/state';
|
|
18
|
+
export { syntaxHighlighting, HighlightStyle, syntaxTree, foldGutter, bracketMatching, indentOnInput, } from '@codemirror/language';
|
|
19
|
+
export { defaultKeymap, history, historyKeymap, undo, redo } from '@codemirror/commands';
|
|
20
|
+
export { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, } from '@codemirror/autocomplete';
|
|
21
|
+
export { tags } from '@lezer/highlight';
|
|
22
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMxD,OAAO,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,mBAAmB,EACnB,yBAAyB,EACzB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAMlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAMhE,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,sBAAsB,CAAC;AAM9B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAMzF,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* nui-codemirror.css
|
|
3
|
+
*
|
|
4
|
+
* CodeMirror chrome styles for NativeUI integration.
|
|
5
|
+
* Scoped to @layer ui with zero-specificity :where() selectors.
|
|
6
|
+
*
|
|
7
|
+
* These styles handle structural concerns (scrolling, gutter borders,
|
|
8
|
+
* scrollbar appearance, border-radius) that complement the JS-driven
|
|
9
|
+
* EditorView.theme() in theme.ts.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
@layer ui {
|
|
13
|
+
/* -----------------------------------------------------------------------
|
|
14
|
+
* Editor root
|
|
15
|
+
* --------------------------------------------------------------------- */
|
|
16
|
+
|
|
17
|
+
:where(.cm-editor) {
|
|
18
|
+
border-radius: var(--n-radius, 8px);
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
font-variant-ligatures: contextual;
|
|
21
|
+
line-height: 1.6;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:where(.cm-editor.cm-focused) {
|
|
25
|
+
outline: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* -----------------------------------------------------------------------
|
|
29
|
+
* Scroller
|
|
30
|
+
* --------------------------------------------------------------------- */
|
|
31
|
+
|
|
32
|
+
:where(.cm-scroller) {
|
|
33
|
+
overflow: auto;
|
|
34
|
+
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
|
|
35
|
+
ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* -----------------------------------------------------------------------
|
|
39
|
+
* Gutters
|
|
40
|
+
* --------------------------------------------------------------------- */
|
|
41
|
+
|
|
42
|
+
:where(.cm-gutters) {
|
|
43
|
+
border-right: none;
|
|
44
|
+
user-select: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:where(.cm-gutter) {
|
|
48
|
+
min-width: 2ch;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* -----------------------------------------------------------------------
|
|
52
|
+
* Scrollbar styling (thin, muted)
|
|
53
|
+
* --------------------------------------------------------------------- */
|
|
54
|
+
|
|
55
|
+
:where(.cm-scroller) {
|
|
56
|
+
scrollbar-width: thin;
|
|
57
|
+
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:where(.cm-scroller)::-webkit-scrollbar {
|
|
61
|
+
width: 8px;
|
|
62
|
+
height: 8px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
:where(.cm-scroller)::-webkit-scrollbar-track {
|
|
66
|
+
background: transparent;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:where(.cm-scroller)::-webkit-scrollbar-thumb {
|
|
70
|
+
background: rgba(255, 255, 255, 0.15);
|
|
71
|
+
border-radius: 4px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
:where(.cm-scroller)::-webkit-scrollbar-thumb:hover {
|
|
75
|
+
background: rgba(255, 255, 255, 0.25);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
:where(.cm-scroller)::-webkit-scrollbar-corner {
|
|
79
|
+
background: transparent;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* -----------------------------------------------------------------------
|
|
83
|
+
* Panels (search, go-to-line, etc.)
|
|
84
|
+
* --------------------------------------------------------------------- */
|
|
85
|
+
|
|
86
|
+
:where(.cm-panels) {
|
|
87
|
+
border-radius: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
:where(.cm-search) {
|
|
91
|
+
padding: 8px 12px;
|
|
92
|
+
gap: 4px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:where(.cm-search) :where(label) {
|
|
96
|
+
display: inline-flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: 4px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* -----------------------------------------------------------------------
|
|
102
|
+
* Tooltip / autocomplete panel
|
|
103
|
+
* --------------------------------------------------------------------- */
|
|
104
|
+
|
|
105
|
+
:where(.cm-tooltip) {
|
|
106
|
+
border-radius: 6px;
|
|
107
|
+
overflow: hidden;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
:where(.cm-tooltip-autocomplete) {
|
|
111
|
+
border-radius: 6px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
:where(.cm-tooltip-autocomplete) :where(ul) {
|
|
115
|
+
padding: 4px 0;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
:where(.cm-completionIcon) {
|
|
119
|
+
padding-right: 4px;
|
|
120
|
+
opacity: 0.6;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* -----------------------------------------------------------------------
|
|
124
|
+
* Fold placeholder
|
|
125
|
+
* --------------------------------------------------------------------- */
|
|
126
|
+
|
|
127
|
+
:where(.cm-foldPlaceholder) {
|
|
128
|
+
padding: 0 4px;
|
|
129
|
+
border-radius: 3px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* -----------------------------------------------------------------------
|
|
133
|
+
* Content area
|
|
134
|
+
* --------------------------------------------------------------------- */
|
|
135
|
+
|
|
136
|
+
:where(.cm-content) {
|
|
137
|
+
padding: 8px 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
:where(.cm-line) {
|
|
141
|
+
padding: 0 12px 0 4px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* -----------------------------------------------------------------------
|
|
145
|
+
* Selection
|
|
146
|
+
* --------------------------------------------------------------------- */
|
|
147
|
+
|
|
148
|
+
:where(.cm-selectionMatch) {
|
|
149
|
+
background-color: rgba(97, 175, 239, 0.15);
|
|
150
|
+
border-radius: 2px;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
@@ -0,0 +1,418 @@
|
|
|
1
|
+
import { Decoration as e, EditorView as t, EditorView as n, ViewPlugin as r, WidgetType as i, drawSelection as a, drawSelection as o, highlightActiveLine as s, highlightActiveLine as ee, highlightActiveLineGutter as te, highlightActiveLineGutter as c, highlightSpecialChars as ne, keymap as re, keymap as ie, lineNumbers as ae, lineNumbers as oe } from "@codemirror/view";
|
|
2
|
+
import { HighlightStyle as l, HighlightStyle as u, bracketMatching as d, bracketMatching as f, foldGutter as p, foldGutter as m, foldKeymap as se, indentOnInput as ce, indentOnInput as le, syntaxHighlighting as ue, syntaxHighlighting as de, syntaxTree as fe } from "@codemirror/language";
|
|
3
|
+
import { tags as h, tags as g } from "@lezer/highlight";
|
|
4
|
+
import { defaultKeymap as _, defaultKeymap as v, history as y, history as b, historyKeymap as x, historyKeymap as S, redo as C, undo as w } from "@codemirror/commands";
|
|
5
|
+
import { autocompletion as T, autocompletion as E, closeBrackets as D, closeBrackets as O, closeBracketsKeymap as k, closeBracketsKeymap as A, completionKeymap as j, completionKeymap as M } from "@codemirror/autocomplete";
|
|
6
|
+
import { Compartment as N, EditorState as pe, EditorState as P, StateEffect as F, StateField as I } from "@codemirror/state";
|
|
7
|
+
/**
|
|
8
|
+
* NativeUI CodeMirror Theme
|
|
9
|
+
*
|
|
10
|
+
* Dark theme inspired by one-dark, designed to harmonize with the
|
|
11
|
+
* @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
|
|
12
|
+
* with { dark: true } and HighlightStyle.define() for syntax tokens.
|
|
13
|
+
*/
|
|
14
|
+
var L = "#282c34", R = "#21252b", z = "#abb2bf", B = "#7d8799", V = "#528bff", H = "#3E4451", U = "#c678dd", W = "#98c379", G = "#61afef", K = "#e06c75", q = "#e5c07b", J = "#56b6c2", Y = "#d19a66";
|
|
15
|
+
const X = n.theme({
|
|
16
|
+
"&": {
|
|
17
|
+
color: z,
|
|
18
|
+
backgroundColor: L,
|
|
19
|
+
fontSize: "14px",
|
|
20
|
+
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, monospace"
|
|
21
|
+
},
|
|
22
|
+
".cm-content": {
|
|
23
|
+
caretColor: V,
|
|
24
|
+
padding: "4px 0"
|
|
25
|
+
},
|
|
26
|
+
"&.cm-focused .cm-cursor": {
|
|
27
|
+
borderLeftColor: V,
|
|
28
|
+
borderLeftWidth: "2px"
|
|
29
|
+
},
|
|
30
|
+
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { backgroundColor: H },
|
|
31
|
+
".cm-activeLine": { backgroundColor: "#2c313a" },
|
|
32
|
+
".cm-gutters": {
|
|
33
|
+
backgroundColor: R,
|
|
34
|
+
color: B,
|
|
35
|
+
borderRight: "none",
|
|
36
|
+
paddingRight: "4px"
|
|
37
|
+
},
|
|
38
|
+
".cm-activeLineGutter": {
|
|
39
|
+
backgroundColor: "#2c313a",
|
|
40
|
+
color: z
|
|
41
|
+
},
|
|
42
|
+
".cm-lineNumbers .cm-gutterElement": {
|
|
43
|
+
padding: "0 8px 0 16px",
|
|
44
|
+
minWidth: "40px"
|
|
45
|
+
},
|
|
46
|
+
".cm-foldGutter .cm-gutterElement": {
|
|
47
|
+
padding: "0 4px",
|
|
48
|
+
cursor: "pointer"
|
|
49
|
+
},
|
|
50
|
+
"&.cm-focused .cm-matchingBracket": {
|
|
51
|
+
backgroundColor: "#515a6b",
|
|
52
|
+
outline: "1px solid #515a6b"
|
|
53
|
+
},
|
|
54
|
+
"&.cm-focused .cm-nonmatchingBracket": { color: K },
|
|
55
|
+
".cm-searchMatch": {
|
|
56
|
+
backgroundColor: "rgba(229, 192, 123, 0.25)",
|
|
57
|
+
outline: "1px solid rgba(229, 192, 123, 0.4)"
|
|
58
|
+
},
|
|
59
|
+
".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "rgba(97, 175, 239, 0.3)" },
|
|
60
|
+
".cm-tooltip": {
|
|
61
|
+
backgroundColor: R,
|
|
62
|
+
color: z,
|
|
63
|
+
border: "1px solid #3E4451",
|
|
64
|
+
borderRadius: "6px",
|
|
65
|
+
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)"
|
|
66
|
+
},
|
|
67
|
+
".cm-tooltip .cm-tooltip-arrow::before": {
|
|
68
|
+
borderTopColor: "#3E4451",
|
|
69
|
+
borderBottomColor: "#3E4451"
|
|
70
|
+
},
|
|
71
|
+
".cm-tooltip .cm-tooltip-arrow::after": {
|
|
72
|
+
borderTopColor: R,
|
|
73
|
+
borderBottomColor: R
|
|
74
|
+
},
|
|
75
|
+
".cm-tooltip-autocomplete": {
|
|
76
|
+
"& > ul": {
|
|
77
|
+
fontFamily: "inherit",
|
|
78
|
+
maxHeight: "240px"
|
|
79
|
+
},
|
|
80
|
+
"& > ul > li": { padding: "4px 8px" },
|
|
81
|
+
"& > ul > li[aria-selected]": {
|
|
82
|
+
backgroundColor: H,
|
|
83
|
+
color: z
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
".cm-panels": {
|
|
87
|
+
backgroundColor: R,
|
|
88
|
+
color: z
|
|
89
|
+
},
|
|
90
|
+
".cm-panels.cm-panels-top": { borderBottom: "1px solid #3E4451" },
|
|
91
|
+
".cm-panels.cm-panels-bottom": { borderTop: "1px solid #3E4451" },
|
|
92
|
+
".cm-panel input, .cm-panel button, .cm-panel select": { fontSize: "inherit" },
|
|
93
|
+
".cm-panel input": {
|
|
94
|
+
backgroundColor: L,
|
|
95
|
+
color: z,
|
|
96
|
+
border: "1px solid #3E4451",
|
|
97
|
+
borderRadius: "4px",
|
|
98
|
+
padding: "2px 6px"
|
|
99
|
+
},
|
|
100
|
+
".cm-panel button": {
|
|
101
|
+
backgroundColor: "#3E4451",
|
|
102
|
+
color: z,
|
|
103
|
+
border: "none",
|
|
104
|
+
borderRadius: "4px",
|
|
105
|
+
padding: "2px 8px",
|
|
106
|
+
cursor: "pointer"
|
|
107
|
+
},
|
|
108
|
+
".cm-fat-cursor .cm-cursor": {
|
|
109
|
+
display: "block",
|
|
110
|
+
backgroundColor: `${V}77`,
|
|
111
|
+
borderLeft: "none",
|
|
112
|
+
width: "0.5em"
|
|
113
|
+
},
|
|
114
|
+
".cm-selectionLayer .cm-selectionBackground": { backgroundColor: `${H}80` },
|
|
115
|
+
".cm-foldPlaceholder": {
|
|
116
|
+
backgroundColor: "transparent",
|
|
117
|
+
border: "none",
|
|
118
|
+
color: B
|
|
119
|
+
}
|
|
120
|
+
}, { dark: !0 }), Z = u.define([
|
|
121
|
+
{
|
|
122
|
+
tag: g.comment,
|
|
123
|
+
color: B,
|
|
124
|
+
fontStyle: "italic"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
tag: g.lineComment,
|
|
128
|
+
color: B,
|
|
129
|
+
fontStyle: "italic"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
tag: g.blockComment,
|
|
133
|
+
color: B,
|
|
134
|
+
fontStyle: "italic"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
tag: g.docComment,
|
|
138
|
+
color: B,
|
|
139
|
+
fontStyle: "italic"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
tag: g.keyword,
|
|
143
|
+
color: U
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
tag: g.controlKeyword,
|
|
147
|
+
color: U
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
tag: g.operatorKeyword,
|
|
151
|
+
color: U
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
tag: g.definitionKeyword,
|
|
155
|
+
color: U
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
tag: g.moduleKeyword,
|
|
159
|
+
color: U
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
tag: g.string,
|
|
163
|
+
color: W
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
tag: g.special(g.string),
|
|
167
|
+
color: W
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
tag: g.regexp,
|
|
171
|
+
color: W
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
tag: g.escape,
|
|
175
|
+
color: J
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
tag: g.character,
|
|
179
|
+
color: W
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
tag: g.function(g.definition(g.variableName)),
|
|
183
|
+
color: G
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
tag: g.function(g.variableName),
|
|
187
|
+
color: G
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
tag: g.variableName,
|
|
191
|
+
color: K
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
tag: g.definition(g.variableName),
|
|
195
|
+
color: K
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
tag: g.propertyName,
|
|
199
|
+
color: K
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
tag: g.definition(g.propertyName),
|
|
203
|
+
color: K
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
tag: g.typeName,
|
|
207
|
+
color: q
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
tag: g.className,
|
|
211
|
+
color: q
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
tag: g.namespace,
|
|
215
|
+
color: q
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
tag: g.macroName,
|
|
219
|
+
color: q
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
tag: g.annotation,
|
|
223
|
+
color: q
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
tag: g.number,
|
|
227
|
+
color: Y
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
tag: g.integer,
|
|
231
|
+
color: Y
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
tag: g.float,
|
|
235
|
+
color: Y
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
tag: g.bool,
|
|
239
|
+
color: Y
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
tag: g.null,
|
|
243
|
+
color: Y
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
tag: g.atom,
|
|
247
|
+
color: Y
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
tag: g.operator,
|
|
251
|
+
color: J
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
tag: g.punctuation,
|
|
255
|
+
color: z
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
tag: g.paren,
|
|
259
|
+
color: z
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
tag: g.squareBracket,
|
|
263
|
+
color: z
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
tag: g.brace,
|
|
267
|
+
color: z
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
tag: g.derefOperator,
|
|
271
|
+
color: z
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
tag: g.separator,
|
|
275
|
+
color: z
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
tag: g.url,
|
|
279
|
+
color: J,
|
|
280
|
+
textDecoration: "underline"
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
tag: g.link,
|
|
284
|
+
color: J
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
tag: g.labelName,
|
|
288
|
+
color: K
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
tag: g.tagName,
|
|
292
|
+
color: K
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
tag: g.attributeName,
|
|
296
|
+
color: Y
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
tag: g.attributeValue,
|
|
300
|
+
color: W
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
tag: g.angleBracket,
|
|
304
|
+
color: z
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
tag: g.self,
|
|
308
|
+
color: K
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
tag: g.processingInstruction,
|
|
312
|
+
color: B
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
tag: g.meta,
|
|
316
|
+
color: B
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
tag: g.heading,
|
|
320
|
+
color: K,
|
|
321
|
+
fontWeight: "bold"
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
tag: g.heading1,
|
|
325
|
+
color: K,
|
|
326
|
+
fontWeight: "bold"
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
tag: g.heading2,
|
|
330
|
+
color: K,
|
|
331
|
+
fontWeight: "bold"
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
tag: g.heading3,
|
|
335
|
+
color: K,
|
|
336
|
+
fontWeight: "bold"
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
tag: g.emphasis,
|
|
340
|
+
fontStyle: "italic"
|
|
341
|
+
},
|
|
342
|
+
{
|
|
343
|
+
tag: g.strong,
|
|
344
|
+
fontWeight: "bold"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
tag: g.strikethrough,
|
|
348
|
+
textDecoration: "line-through"
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
tag: g.invalid,
|
|
352
|
+
color: "#ffffff",
|
|
353
|
+
backgroundColor: K
|
|
354
|
+
}
|
|
355
|
+
]), Q = de(Z), $ = [
|
|
356
|
+
ne(),
|
|
357
|
+
o(),
|
|
358
|
+
le(),
|
|
359
|
+
b(),
|
|
360
|
+
f(),
|
|
361
|
+
O(),
|
|
362
|
+
E(),
|
|
363
|
+
oe(),
|
|
364
|
+
m(),
|
|
365
|
+
ee(),
|
|
366
|
+
c(),
|
|
367
|
+
n.lineWrapping,
|
|
368
|
+
ie.of([
|
|
369
|
+
...A,
|
|
370
|
+
...v,
|
|
371
|
+
...S,
|
|
372
|
+
...se,
|
|
373
|
+
...M
|
|
374
|
+
])
|
|
375
|
+
];
|
|
376
|
+
/**
|
|
377
|
+
* Editor Factory
|
|
378
|
+
*
|
|
379
|
+
* createEditorView() assembles theme, syntax highlighting, base extensions,
|
|
380
|
+
* and user-supplied extensions into a ready-to-use EditorView.
|
|
381
|
+
*/
|
|
382
|
+
/**
|
|
383
|
+
* Create a fully themed CodeMirror EditorView.
|
|
384
|
+
*
|
|
385
|
+
* Combines the NativeUI dark theme, syntax highlighting, base extensions
|
|
386
|
+
* (keymaps, history, brackets, autocomplete, line numbers, etc.), and any
|
|
387
|
+
* additional extensions the consumer provides.
|
|
388
|
+
*
|
|
389
|
+
* @param container - DOM element to mount the editor into.
|
|
390
|
+
* @param options - Optional configuration.
|
|
391
|
+
* @returns A live EditorView instance.
|
|
392
|
+
*
|
|
393
|
+
* @example
|
|
394
|
+
* ```ts
|
|
395
|
+
* import { createEditorView } from '@nonoun/nui-codemirror';
|
|
396
|
+
*
|
|
397
|
+
* const view = createEditorView(document.getElementById('editor')!, {
|
|
398
|
+
* doc: 'console.log("hello");',
|
|
399
|
+
* readonly: true,
|
|
400
|
+
* });
|
|
401
|
+
* ```
|
|
402
|
+
*/
|
|
403
|
+
function me(e, t) {
|
|
404
|
+
let { doc: r = "", extensions: i = [], readonly: a = !1 } = t ?? {}, o = [
|
|
405
|
+
X,
|
|
406
|
+
Q,
|
|
407
|
+
$,
|
|
408
|
+
...i
|
|
409
|
+
];
|
|
410
|
+
return a && o.push(P.readOnly.of(!0), n.editable.of(!1)), new n({
|
|
411
|
+
state: P.create({
|
|
412
|
+
doc: r,
|
|
413
|
+
extensions: o
|
|
414
|
+
}),
|
|
415
|
+
parent: e
|
|
416
|
+
});
|
|
417
|
+
}
|
|
418
|
+
export { N as Compartment, e as Decoration, pe as EditorState, t as EditorView, l as HighlightStyle, F as StateEffect, I as StateField, r as ViewPlugin, i as WidgetType, T as autocompletion, d as bracketMatching, D as closeBrackets, k as closeBracketsKeymap, j as completionKeymap, me as createEditorView, _ as defaultKeymap, a as drawSelection, p as foldGutter, s as highlightActiveLine, te as highlightActiveLineGutter, y as history, x as historyKeymap, ce as indentOnInput, re as keymap, ae as lineNumbers, $ as nuiBaseExtensions, Z as nuiHighlightStyle, Q as nuiSyntaxHighlighting, X as nuiTheme, C as redo, ue as syntaxHighlighting, fe as syntaxTree, h as tags, w as undo };
|
package/dist/theme.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* NativeUI CodeMirror Theme
|
|
3
|
+
*
|
|
4
|
+
* Dark theme inspired by one-dark, designed to harmonize with the
|
|
5
|
+
* @nonoun/native-ui OKLCH design system. Uses EditorView.theme()
|
|
6
|
+
* with { dark: true } and HighlightStyle.define() for syntax tokens.
|
|
7
|
+
*/
|
|
8
|
+
import { HighlightStyle } from '@codemirror/language';
|
|
9
|
+
export declare const nuiTheme: import("@codemirror/state").Extension;
|
|
10
|
+
export declare const nuiHighlightStyle: HighlightStyle;
|
|
11
|
+
export declare const nuiSyntaxHighlighting: import("@codemirror/state").Extension;
|
|
12
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,cAAc,EAAsB,MAAM,sBAAsB,CAAC;AA0B1E,eAAO,MAAM,QAAQ,uCAqKpB,CAAC;AAMF,eAAO,MAAM,iBAAiB,gBAoF5B,CAAC;AAEH,eAAO,MAAM,qBAAqB,uCAAwC,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nonoun/native-codemirror",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Shared CodeMirror 6 integration layer for @nonoun/native-ui ecosystem",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/native-codemirror.js",
|
|
8
|
+
"module": "./dist/native-codemirror.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"default": "./dist/native-codemirror.js"
|
|
14
|
+
},
|
|
15
|
+
"./css": "./dist/native-codemirror.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@nonoun/native-ui": ">=0.5.0"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@codemirror/autocomplete": "^6.18.6",
|
|
25
|
+
"@codemirror/commands": "^6.8.1",
|
|
26
|
+
"@codemirror/language": "^6.11.0",
|
|
27
|
+
"@codemirror/state": "^6.5.2",
|
|
28
|
+
"@codemirror/view": "^6.36.8",
|
|
29
|
+
"@lezer/highlight": "^1.2.3"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "npm run build:js && npm run build:css && npm run build:types",
|
|
33
|
+
"build:js": "vite build",
|
|
34
|
+
"build:css": "cp src/css/native-codemirror.css dist/native-codemirror.css",
|
|
35
|
+
"build:types": "tsc -p tsconfig.build.json"
|
|
36
|
+
},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
}
|
|
40
|
+
}
|