@seljs/editor 1.0.1 → 1.1.0-beta.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/editor/create-editor.cjs +2 -2
- package/dist/editor/create-editor.d.cts +1 -1
- package/dist/editor/create-editor.d.mts +1 -1
- package/dist/editor/create-editor.mjs +2 -2
- package/dist/editor/editor-config.cjs +25 -13
- package/dist/editor/editor-config.mjs +27 -15
- package/dist/editor/index.cjs +0 -1
- package/dist/editor/index.d.cts +1 -2
- package/dist/editor/index.d.mts +1 -2
- package/dist/editor/index.mjs +0 -1
- package/dist/editor/type-display.cjs +38 -40
- package/dist/editor/type-display.mjs +38 -40
- package/dist/editor/types.d.cts +77 -19
- package/dist/editor/types.d.mts +77 -19
- package/dist/index.cjs +0 -2
- package/dist/index.d.cts +3 -4
- package/dist/index.d.mts +3 -4
- package/dist/index.mjs +1 -2
- package/dist/linting/diagnostic-mapper.d.cts +1 -1
- package/dist/linting/diagnostic-mapper.d.mts +1 -1
- package/dist/linting/index.d.mts +2 -2
- package/dist/linting/sel-linter.cjs +9 -11
- package/dist/linting/sel-linter.d.cts +9 -5
- package/dist/linting/sel-linter.d.mts +9 -5
- package/dist/linting/sel-linter.mjs +9 -11
- package/package.json +3 -3
- package/dist/editor/editor-config.d.cts +0 -7
- package/dist/editor/editor-config.d.mts +0 -7
|
@@ -2,7 +2,7 @@ const require_editor_config = require("./editor-config.cjs");
|
|
|
2
2
|
let _codemirror_state = require("@codemirror/state");
|
|
3
3
|
let _codemirror_view = require("@codemirror/view");
|
|
4
4
|
//#region src/editor/create-editor.ts
|
|
5
|
-
|
|
5
|
+
const createSELEditor = (config) => {
|
|
6
6
|
const extensions = require_editor_config.buildExtensions(config);
|
|
7
7
|
return new _codemirror_view.EditorView({
|
|
8
8
|
state: _codemirror_state.EditorState.create({
|
|
@@ -11,6 +11,6 @@ function createSELEditor(config) {
|
|
|
11
11
|
}),
|
|
12
12
|
parent: config.parent
|
|
13
13
|
});
|
|
14
|
-
}
|
|
14
|
+
};
|
|
15
15
|
//#endregion
|
|
16
16
|
exports.createSELEditor = createSELEditor;
|
|
@@ -2,6 +2,6 @@ import { SELEditorConfig } from "./types.cjs";
|
|
|
2
2
|
import { EditorView } from "@codemirror/view";
|
|
3
3
|
|
|
4
4
|
//#region src/editor/create-editor.d.ts
|
|
5
|
-
declare
|
|
5
|
+
declare const createSELEditor: (config: SELEditorConfig) => EditorView;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { createSELEditor };
|
|
@@ -2,6 +2,6 @@ import { SELEditorConfig } from "./types.mjs";
|
|
|
2
2
|
import { EditorView } from "@codemirror/view";
|
|
3
3
|
|
|
4
4
|
//#region src/editor/create-editor.d.ts
|
|
5
|
-
declare
|
|
5
|
+
declare const createSELEditor: (config: SELEditorConfig) => EditorView;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { createSELEditor };
|
|
@@ -2,7 +2,7 @@ import { buildExtensions } from "./editor-config.mjs";
|
|
|
2
2
|
import { EditorState } from "@codemirror/state";
|
|
3
3
|
import { EditorView } from "@codemirror/view";
|
|
4
4
|
//#region src/editor/create-editor.ts
|
|
5
|
-
|
|
5
|
+
const createSELEditor = (config) => {
|
|
6
6
|
const extensions = buildExtensions(config);
|
|
7
7
|
return new EditorView({
|
|
8
8
|
state: EditorState.create({
|
|
@@ -11,6 +11,6 @@ function createSELEditor(config) {
|
|
|
11
11
|
}),
|
|
12
12
|
parent: config.parent
|
|
13
13
|
});
|
|
14
|
-
}
|
|
14
|
+
};
|
|
15
15
|
//#endregion
|
|
16
16
|
export { createSELEditor };
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
const require_tokenizer_config = require("../language/tokenizer-config.cjs");
|
|
2
2
|
const require_schema_completion = require("../completion/schema-completion.cjs");
|
|
3
|
+
require("../completion/index.cjs");
|
|
3
4
|
const require_sel_linter = require("../linting/sel-linter.cjs");
|
|
5
|
+
require("../linting/index.cjs");
|
|
4
6
|
const require_theme = require("./theme.cjs");
|
|
5
7
|
const require_type_display = require("./type-display.cjs");
|
|
6
8
|
const require_semantic_highlighter = require("../language/semantic-highlighter.cjs");
|
|
@@ -12,15 +14,26 @@ let _codemirror_view = require("@codemirror/view");
|
|
|
12
14
|
let _codemirror_commands = require("@codemirror/commands");
|
|
13
15
|
let _seljs_cel_lezer = require("@seljs/cel-lezer");
|
|
14
16
|
//#region src/editor/editor-config.ts
|
|
17
|
+
const resolveFeatures = (features) => ({
|
|
18
|
+
linting: features?.linting ?? true,
|
|
19
|
+
autocomplete: features?.autocomplete ?? true,
|
|
20
|
+
semanticHighlighting: features?.semanticHighlighting ?? true,
|
|
21
|
+
typeDisplay: features?.typeDisplay ?? false
|
|
22
|
+
});
|
|
15
23
|
const buildExtensions = (config) => {
|
|
16
|
-
const checker = new _seljs_checker.SELChecker(config.schema,
|
|
24
|
+
const checker = new _seljs_checker.SELChecker(config.schema, config.checkerOptions);
|
|
25
|
+
const resolved = resolveFeatures(config.features);
|
|
17
26
|
const extensions = [];
|
|
18
27
|
extensions.push((0, _seljs_cel_lezer.celLanguageSupport)(config.dark));
|
|
19
28
|
extensions.push((0, _codemirror_language.bracketMatching)());
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
29
|
+
if (resolved.semanticHighlighting) {
|
|
30
|
+
const tokenizerConfig = require_tokenizer_config.createTokenizerConfig(config.schema);
|
|
31
|
+
extensions.push(require_semantic_highlighter.createSemanticHighlighter(tokenizerConfig, config.dark));
|
|
32
|
+
}
|
|
33
|
+
if (resolved.autocomplete) {
|
|
34
|
+
extensions.push(require_schema_completion.createSchemaCompletion(config.schema, checker));
|
|
35
|
+
extensions.push((0, _codemirror_autocomplete.closeBrackets)());
|
|
36
|
+
}
|
|
24
37
|
extensions.push(_codemirror_view.keymap.of([
|
|
25
38
|
..._codemirror_autocomplete.closeBracketsKeymap,
|
|
26
39
|
..._codemirror_commands.defaultKeymap,
|
|
@@ -28,21 +41,20 @@ const buildExtensions = (config) => {
|
|
|
28
41
|
]));
|
|
29
42
|
extensions.push((0, _codemirror_commands.history)());
|
|
30
43
|
extensions.push(config.dark ? require_theme.selDarkTheme : require_theme.selLightTheme);
|
|
31
|
-
|
|
32
|
-
extensions.push(require_sel_linter.createSELLinter({
|
|
33
|
-
validate,
|
|
34
|
-
delay: config.validateDelay
|
|
35
|
-
}));
|
|
44
|
+
if (resolved.linting) extensions.push(require_sel_linter.createSELLinter({ validate: (expression) => checker.check(expression).diagnostics }));
|
|
36
45
|
if (config.onChange) {
|
|
37
46
|
const onChange = config.onChange;
|
|
38
47
|
extensions.push(_codemirror_view.EditorView.updateListener.of((update) => {
|
|
39
|
-
if (update.docChanged)
|
|
48
|
+
if (update.docChanged) {
|
|
49
|
+
const value = update.state.doc.toString();
|
|
50
|
+
onChange(value, checker.check(value).valid);
|
|
51
|
+
}
|
|
40
52
|
}));
|
|
41
53
|
}
|
|
42
54
|
if (config.readOnly) extensions.push(_codemirror_state.EditorState.readOnly.of(true));
|
|
43
55
|
if (config.placeholder) extensions.push((0, _codemirror_view.placeholder)(config.placeholder));
|
|
44
|
-
if (
|
|
45
|
-
if (config.
|
|
56
|
+
if (resolved.typeDisplay) extensions.push(require_type_display.createTypeDisplay(checker, config.dark ?? false));
|
|
57
|
+
if (config.features?.tooltip) extensions.push((0, _codemirror_view.tooltips)(config.features.tooltip));
|
|
46
58
|
return extensions;
|
|
47
59
|
};
|
|
48
60
|
//#endregion
|
|
@@ -1,26 +1,39 @@
|
|
|
1
1
|
import { createTokenizerConfig } from "../language/tokenizer-config.mjs";
|
|
2
2
|
import { createSchemaCompletion } from "../completion/schema-completion.mjs";
|
|
3
|
+
import "../completion/index.mjs";
|
|
3
4
|
import { createSELLinter } from "../linting/sel-linter.mjs";
|
|
5
|
+
import "../linting/index.mjs";
|
|
4
6
|
import { selDarkTheme, selLightTheme } from "./theme.mjs";
|
|
5
7
|
import { createTypeDisplay } from "./type-display.mjs";
|
|
6
8
|
import { createSemanticHighlighter } from "../language/semantic-highlighter.mjs";
|
|
7
9
|
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
|
|
8
|
-
import { SELChecker
|
|
10
|
+
import { SELChecker } from "@seljs/checker";
|
|
9
11
|
import { bracketMatching } from "@codemirror/language";
|
|
10
12
|
import { EditorState } from "@codemirror/state";
|
|
11
|
-
import { EditorView, keymap, placeholder } from "@codemirror/view";
|
|
13
|
+
import { EditorView, keymap, placeholder, tooltips } from "@codemirror/view";
|
|
12
14
|
import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
|
|
13
15
|
import { celLanguageSupport } from "@seljs/cel-lezer";
|
|
14
16
|
//#region src/editor/editor-config.ts
|
|
17
|
+
const resolveFeatures = (features) => ({
|
|
18
|
+
linting: features?.linting ?? true,
|
|
19
|
+
autocomplete: features?.autocomplete ?? true,
|
|
20
|
+
semanticHighlighting: features?.semanticHighlighting ?? true,
|
|
21
|
+
typeDisplay: features?.typeDisplay ?? false
|
|
22
|
+
});
|
|
15
23
|
const buildExtensions = (config) => {
|
|
16
|
-
const checker = new SELChecker(config.schema,
|
|
24
|
+
const checker = new SELChecker(config.schema, config.checkerOptions);
|
|
25
|
+
const resolved = resolveFeatures(config.features);
|
|
17
26
|
const extensions = [];
|
|
18
27
|
extensions.push(celLanguageSupport(config.dark));
|
|
19
28
|
extensions.push(bracketMatching());
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
29
|
+
if (resolved.semanticHighlighting) {
|
|
30
|
+
const tokenizerConfig = createTokenizerConfig(config.schema);
|
|
31
|
+
extensions.push(createSemanticHighlighter(tokenizerConfig, config.dark));
|
|
32
|
+
}
|
|
33
|
+
if (resolved.autocomplete) {
|
|
34
|
+
extensions.push(createSchemaCompletion(config.schema, checker));
|
|
35
|
+
extensions.push(closeBrackets());
|
|
36
|
+
}
|
|
24
37
|
extensions.push(keymap.of([
|
|
25
38
|
...closeBracketsKeymap,
|
|
26
39
|
...defaultKeymap,
|
|
@@ -28,21 +41,20 @@ const buildExtensions = (config) => {
|
|
|
28
41
|
]));
|
|
29
42
|
extensions.push(history());
|
|
30
43
|
extensions.push(config.dark ? selDarkTheme : selLightTheme);
|
|
31
|
-
|
|
32
|
-
extensions.push(createSELLinter({
|
|
33
|
-
validate,
|
|
34
|
-
delay: config.validateDelay
|
|
35
|
-
}));
|
|
44
|
+
if (resolved.linting) extensions.push(createSELLinter({ validate: (expression) => checker.check(expression).diagnostics }));
|
|
36
45
|
if (config.onChange) {
|
|
37
46
|
const onChange = config.onChange;
|
|
38
47
|
extensions.push(EditorView.updateListener.of((update) => {
|
|
39
|
-
if (update.docChanged)
|
|
48
|
+
if (update.docChanged) {
|
|
49
|
+
const value = update.state.doc.toString();
|
|
50
|
+
onChange(value, checker.check(value).valid);
|
|
51
|
+
}
|
|
40
52
|
}));
|
|
41
53
|
}
|
|
42
54
|
if (config.readOnly) extensions.push(EditorState.readOnly.of(true));
|
|
43
55
|
if (config.placeholder) extensions.push(placeholder(config.placeholder));
|
|
44
|
-
if (
|
|
45
|
-
if (config.
|
|
56
|
+
if (resolved.typeDisplay) extensions.push(createTypeDisplay(checker, config.dark ?? false));
|
|
57
|
+
if (config.features?.tooltip) extensions.push(tooltips(config.features.tooltip));
|
|
46
58
|
return extensions;
|
|
47
59
|
};
|
|
48
60
|
//#endregion
|
package/dist/editor/index.cjs
CHANGED
package/dist/editor/index.d.cts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { SELEditorConfig } from "./types.cjs";
|
|
1
|
+
import { SELEditorConfig, SELEditorFeatures } from "./types.cjs";
|
|
2
2
|
import { createSELEditor } from "./create-editor.cjs";
|
|
3
|
-
import { buildExtensions } from "./editor-config.cjs";
|
|
4
3
|
import { selDarkTheme, selLightTheme } from "./theme.cjs";
|
|
5
4
|
import { EditorView as EditorView$1 } from "@codemirror/view";
|
|
6
5
|
export { type EditorView$1 as EditorView };
|
package/dist/editor/index.d.mts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { SELEditorConfig } from "./types.mjs";
|
|
1
|
+
import { SELEditorConfig, SELEditorFeatures } from "./types.mjs";
|
|
2
2
|
import { createSELEditor } from "./create-editor.mjs";
|
|
3
|
-
import { buildExtensions } from "./editor-config.mjs";
|
|
4
3
|
import { selDarkTheme, selLightTheme } from "./theme.mjs";
|
|
5
4
|
import { EditorView as EditorView$1 } from "@codemirror/view";
|
|
6
5
|
export { type EditorView$1 as EditorView };
|
package/dist/editor/index.mjs
CHANGED
|
@@ -9,50 +9,48 @@ const typeField = _codemirror_state.StateField.define({
|
|
|
9
9
|
return value;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
update();
|
|
42
|
-
return {
|
|
43
|
-
dom,
|
|
44
|
-
update: () => {
|
|
45
|
-
update();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
12
|
+
const createTypePanel = (dark) => (view) => {
|
|
13
|
+
const dom = document.createElement("div");
|
|
14
|
+
dom.className = "sel-type-display";
|
|
15
|
+
dom.style.cssText = [
|
|
16
|
+
"display: flex",
|
|
17
|
+
"align-items: center",
|
|
18
|
+
"gap: 6px",
|
|
19
|
+
`padding: 3px 8px`,
|
|
20
|
+
"font-size: 12px",
|
|
21
|
+
`font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`,
|
|
22
|
+
`color: ${dark ? "#9ca3af" : "#6b7280"}`,
|
|
23
|
+
`background: ${dark ? "#262626" : "#f9fafb"}`,
|
|
24
|
+
`border-top: 1px solid ${dark ? "#374151" : "#e5e7eb"}`
|
|
25
|
+
].join("; ");
|
|
26
|
+
const update = () => {
|
|
27
|
+
const type = view.state.field(typeField);
|
|
28
|
+
dom.textContent = "";
|
|
29
|
+
if (type) {
|
|
30
|
+
const label = document.createElement("span");
|
|
31
|
+
label.style.color = dark ? "#6b7280" : "#9ca3af";
|
|
32
|
+
label.textContent = "output";
|
|
33
|
+
const typeSpan = document.createElement("span");
|
|
34
|
+
typeSpan.style.color = dark ? "#93c5fd" : "#2563eb";
|
|
35
|
+
typeSpan.style.fontWeight = "500";
|
|
36
|
+
typeSpan.textContent = type;
|
|
37
|
+
dom.append(label, " ", typeSpan);
|
|
38
|
+
}
|
|
48
39
|
};
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
update();
|
|
41
|
+
return {
|
|
42
|
+
dom,
|
|
43
|
+
update: () => {
|
|
44
|
+
update();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
const createTypeDisplay = (checker, dark) => {
|
|
51
49
|
let debounceTimer;
|
|
52
50
|
return [
|
|
53
51
|
typeField,
|
|
54
52
|
_codemirror_view.EditorView.updateListener.of((update) => {
|
|
55
|
-
if (!update.docChanged &&
|
|
53
|
+
if (!update.docChanged && update.startState.field(typeField, false) !== null) return;
|
|
56
54
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
57
55
|
debounceTimer = setTimeout(() => {
|
|
58
56
|
const doc = update.state.doc.toString().trim();
|
|
@@ -66,6 +64,6 @@ function createTypeDisplay(checker, dark) {
|
|
|
66
64
|
}),
|
|
67
65
|
_codemirror_view.showPanel.of(createTypePanel(dark))
|
|
68
66
|
];
|
|
69
|
-
}
|
|
67
|
+
};
|
|
70
68
|
//#endregion
|
|
71
69
|
exports.createTypeDisplay = createTypeDisplay;
|
|
@@ -9,50 +9,48 @@ const typeField = StateField.define({
|
|
|
9
9
|
return value;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
update();
|
|
42
|
-
return {
|
|
43
|
-
dom,
|
|
44
|
-
update: () => {
|
|
45
|
-
update();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
12
|
+
const createTypePanel = (dark) => (view) => {
|
|
13
|
+
const dom = document.createElement("div");
|
|
14
|
+
dom.className = "sel-type-display";
|
|
15
|
+
dom.style.cssText = [
|
|
16
|
+
"display: flex",
|
|
17
|
+
"align-items: center",
|
|
18
|
+
"gap: 6px",
|
|
19
|
+
`padding: 3px 8px`,
|
|
20
|
+
"font-size: 12px",
|
|
21
|
+
`font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`,
|
|
22
|
+
`color: ${dark ? "#9ca3af" : "#6b7280"}`,
|
|
23
|
+
`background: ${dark ? "#262626" : "#f9fafb"}`,
|
|
24
|
+
`border-top: 1px solid ${dark ? "#374151" : "#e5e7eb"}`
|
|
25
|
+
].join("; ");
|
|
26
|
+
const update = () => {
|
|
27
|
+
const type = view.state.field(typeField);
|
|
28
|
+
dom.textContent = "";
|
|
29
|
+
if (type) {
|
|
30
|
+
const label = document.createElement("span");
|
|
31
|
+
label.style.color = dark ? "#6b7280" : "#9ca3af";
|
|
32
|
+
label.textContent = "output";
|
|
33
|
+
const typeSpan = document.createElement("span");
|
|
34
|
+
typeSpan.style.color = dark ? "#93c5fd" : "#2563eb";
|
|
35
|
+
typeSpan.style.fontWeight = "500";
|
|
36
|
+
typeSpan.textContent = type;
|
|
37
|
+
dom.append(label, " ", typeSpan);
|
|
38
|
+
}
|
|
48
39
|
};
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
update();
|
|
41
|
+
return {
|
|
42
|
+
dom,
|
|
43
|
+
update: () => {
|
|
44
|
+
update();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
const createTypeDisplay = (checker, dark) => {
|
|
51
49
|
let debounceTimer;
|
|
52
50
|
return [
|
|
53
51
|
typeField,
|
|
54
52
|
EditorView.updateListener.of((update) => {
|
|
55
|
-
if (!update.docChanged &&
|
|
53
|
+
if (!update.docChanged && update.startState.field(typeField, false) !== null) return;
|
|
56
54
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
57
55
|
debounceTimer = setTimeout(() => {
|
|
58
56
|
const doc = update.state.doc.toString().trim();
|
|
@@ -66,6 +64,6 @@ function createTypeDisplay(checker, dark) {
|
|
|
66
64
|
}),
|
|
67
65
|
showPanel.of(createTypePanel(dark))
|
|
68
66
|
];
|
|
69
|
-
}
|
|
67
|
+
};
|
|
70
68
|
//#endregion
|
|
71
69
|
export { createTypeDisplay };
|
package/dist/editor/types.d.cts
CHANGED
|
@@ -1,31 +1,89 @@
|
|
|
1
|
-
import { SELDiagnostic } from "../linting/diagnostic-mapper.cjs";
|
|
2
1
|
import { SELSchema } from "@seljs/schema";
|
|
3
|
-
import {
|
|
2
|
+
import { SELCheckerOptions } from "@seljs/checker";
|
|
4
3
|
|
|
5
4
|
//#region src/editor/types.d.ts
|
|
5
|
+
interface SELEditorFeatures {
|
|
6
|
+
/**
|
|
7
|
+
* Enable linting/validation
|
|
8
|
+
*
|
|
9
|
+
* @default true
|
|
10
|
+
*/
|
|
11
|
+
linting?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Enable schema-aware autocomplete
|
|
14
|
+
*
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
autocomplete?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Enable schema-aware identifier coloring
|
|
20
|
+
*
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
semanticHighlighting?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Show inferred output type panel below editor
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
typeDisplay?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Tooltip rendering configuration (always enabled)
|
|
32
|
+
*/
|
|
33
|
+
tooltip?: {
|
|
34
|
+
/**
|
|
35
|
+
* CSS positioning strategy for tooltips
|
|
36
|
+
*
|
|
37
|
+
* @default "fixed"
|
|
38
|
+
*/
|
|
39
|
+
position?: "fixed" | "absolute";
|
|
40
|
+
/**
|
|
41
|
+
* Custom parent element for tooltip rendering.
|
|
42
|
+
* Useful when the editor is inside a modal or overflow container.
|
|
43
|
+
*/
|
|
44
|
+
parent?: HTMLElement;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
6
47
|
interface SELEditorConfig {
|
|
7
|
-
/**
|
|
48
|
+
/**
|
|
49
|
+
* Container element to mount into
|
|
50
|
+
*/
|
|
8
51
|
parent: HTMLElement;
|
|
9
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Schema driving autocomplete and syntax highlighting
|
|
54
|
+
*/
|
|
10
55
|
schema: SELSchema;
|
|
11
|
-
/**
|
|
56
|
+
/**
|
|
57
|
+
* Initial expression value
|
|
58
|
+
*/
|
|
12
59
|
value?: string;
|
|
13
|
-
/**
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
|
|
19
|
-
|
|
60
|
+
/**
|
|
61
|
+
* Called on every expression change with the current value and validity
|
|
62
|
+
*/
|
|
63
|
+
onChange?: (value: string, valid: boolean) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Options for the internal SELChecker instance
|
|
66
|
+
*/
|
|
67
|
+
checkerOptions?: SELCheckerOptions;
|
|
68
|
+
/**
|
|
69
|
+
* Dark mode
|
|
70
|
+
*
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
20
73
|
dark?: boolean;
|
|
21
|
-
/**
|
|
74
|
+
/**
|
|
75
|
+
* Whether the editor is read-only
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
22
78
|
readOnly?: boolean;
|
|
23
|
-
/**
|
|
79
|
+
/**
|
|
80
|
+
* Placeholder text
|
|
81
|
+
*/
|
|
24
82
|
placeholder?: string;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Optional feature toggles
|
|
85
|
+
*/
|
|
86
|
+
features?: SELEditorFeatures;
|
|
29
87
|
}
|
|
30
88
|
//#endregion
|
|
31
|
-
export { SELEditorConfig };
|
|
89
|
+
export { SELEditorConfig, SELEditorFeatures };
|
package/dist/editor/types.d.mts
CHANGED
|
@@ -1,31 +1,89 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Extension } from "@codemirror/state";
|
|
1
|
+
import { SELCheckerOptions } from "@seljs/checker";
|
|
3
2
|
import { SELSchema } from "@seljs/schema";
|
|
4
3
|
|
|
5
4
|
//#region src/editor/types.d.ts
|
|
5
|
+
interface SELEditorFeatures {
|
|
6
|
+
/**
|
|
7
|
+
* Enable linting/validation
|
|
8
|
+
*
|
|
9
|
+
* @default true
|
|
10
|
+
*/
|
|
11
|
+
linting?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Enable schema-aware autocomplete
|
|
14
|
+
*
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
autocomplete?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Enable schema-aware identifier coloring
|
|
20
|
+
*
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
semanticHighlighting?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Show inferred output type panel below editor
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
typeDisplay?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Tooltip rendering configuration (always enabled)
|
|
32
|
+
*/
|
|
33
|
+
tooltip?: {
|
|
34
|
+
/**
|
|
35
|
+
* CSS positioning strategy for tooltips
|
|
36
|
+
*
|
|
37
|
+
* @default "fixed"
|
|
38
|
+
*/
|
|
39
|
+
position?: "fixed" | "absolute";
|
|
40
|
+
/**
|
|
41
|
+
* Custom parent element for tooltip rendering.
|
|
42
|
+
* Useful when the editor is inside a modal or overflow container.
|
|
43
|
+
*/
|
|
44
|
+
parent?: HTMLElement;
|
|
45
|
+
};
|
|
46
|
+
}
|
|
6
47
|
interface SELEditorConfig {
|
|
7
|
-
/**
|
|
48
|
+
/**
|
|
49
|
+
* Container element to mount into
|
|
50
|
+
*/
|
|
8
51
|
parent: HTMLElement;
|
|
9
|
-
/**
|
|
52
|
+
/**
|
|
53
|
+
* Schema driving autocomplete and syntax highlighting
|
|
54
|
+
*/
|
|
10
55
|
schema: SELSchema;
|
|
11
|
-
/**
|
|
56
|
+
/**
|
|
57
|
+
* Initial expression value
|
|
58
|
+
*/
|
|
12
59
|
value?: string;
|
|
13
|
-
/**
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
|
|
19
|
-
|
|
60
|
+
/**
|
|
61
|
+
* Called on every expression change with the current value and validity
|
|
62
|
+
*/
|
|
63
|
+
onChange?: (value: string, valid: boolean) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Options for the internal SELChecker instance
|
|
66
|
+
*/
|
|
67
|
+
checkerOptions?: SELCheckerOptions;
|
|
68
|
+
/**
|
|
69
|
+
* Dark mode
|
|
70
|
+
*
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
20
73
|
dark?: boolean;
|
|
21
|
-
/**
|
|
74
|
+
/**
|
|
75
|
+
* Whether the editor is read-only
|
|
76
|
+
* @default false
|
|
77
|
+
*/
|
|
22
78
|
readOnly?: boolean;
|
|
23
|
-
/**
|
|
79
|
+
/**
|
|
80
|
+
* Placeholder text
|
|
81
|
+
*/
|
|
24
82
|
placeholder?: string;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Optional feature toggles
|
|
85
|
+
*/
|
|
86
|
+
features?: SELEditorFeatures;
|
|
29
87
|
}
|
|
30
88
|
//#endregion
|
|
31
|
-
export { SELEditorConfig };
|
|
89
|
+
export { SELEditorConfig, SELEditorFeatures };
|
package/dist/index.cjs
CHANGED
|
@@ -6,11 +6,9 @@ const require_sel_linter = require("./linting/sel-linter.cjs");
|
|
|
6
6
|
const require_diagnostic_mapper = require("./linting/diagnostic-mapper.cjs");
|
|
7
7
|
require("./linting/index.cjs");
|
|
8
8
|
const require_theme = require("./editor/theme.cjs");
|
|
9
|
-
const require_editor_config = require("./editor/editor-config.cjs");
|
|
10
9
|
const require_create_editor = require("./editor/create-editor.cjs");
|
|
11
10
|
require("./editor/index.cjs");
|
|
12
11
|
exports.SchemaCompletionProvider = require_schema_completion.SchemaCompletionProvider;
|
|
13
|
-
exports.buildExtensions = require_editor_config.buildExtensions;
|
|
14
12
|
exports.createSELEditor = require_create_editor.createSELEditor;
|
|
15
13
|
exports.createSELLinter = require_sel_linter.createSELLinter;
|
|
16
14
|
exports.createSchemaCompletion = require_schema_completion.createSchemaCompletion;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { TokenizerConfig, createTokenizerConfig } from "./language/tokenizer-config.cjs";
|
|
2
2
|
import { SchemaCompletionProvider, createSchemaCompletion } from "./completion/schema-completion.cjs";
|
|
3
|
-
import { SELDiagnostic, mapCheckResult } from "./linting/diagnostic-mapper.cjs";
|
|
4
3
|
import { SELLinterOptions, createSELLinter } from "./linting/sel-linter.cjs";
|
|
5
|
-
import {
|
|
4
|
+
import { mapCheckResult } from "./linting/diagnostic-mapper.cjs";
|
|
5
|
+
import { SELEditorConfig, SELEditorFeatures } from "./editor/types.cjs";
|
|
6
6
|
import { createSELEditor } from "./editor/create-editor.cjs";
|
|
7
|
-
import { buildExtensions } from "./editor/editor-config.cjs";
|
|
8
7
|
import { selDarkTheme, selLightTheme } from "./editor/theme.cjs";
|
|
9
8
|
import { EditorView } from "./editor/index.cjs";
|
|
10
|
-
export { EditorView,
|
|
9
|
+
export { EditorView, SELEditorConfig, SELEditorFeatures, SELLinterOptions, SchemaCompletionProvider, TokenizerConfig, createSELEditor, createSELLinter, createSchemaCompletion, createTokenizerConfig, mapCheckResult, selDarkTheme, selLightTheme };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { TokenizerConfig, createTokenizerConfig } from "./language/tokenizer-config.mjs";
|
|
2
2
|
import { SchemaCompletionProvider, createSchemaCompletion } from "./completion/schema-completion.mjs";
|
|
3
|
-
import { SELDiagnostic, mapCheckResult } from "./linting/diagnostic-mapper.mjs";
|
|
4
3
|
import { SELLinterOptions, createSELLinter } from "./linting/sel-linter.mjs";
|
|
5
|
-
import {
|
|
4
|
+
import { mapCheckResult } from "./linting/diagnostic-mapper.mjs";
|
|
5
|
+
import { SELEditorConfig, SELEditorFeatures } from "./editor/types.mjs";
|
|
6
6
|
import { createSELEditor } from "./editor/create-editor.mjs";
|
|
7
|
-
import { buildExtensions } from "./editor/editor-config.mjs";
|
|
8
7
|
import { selDarkTheme, selLightTheme } from "./editor/theme.mjs";
|
|
9
8
|
import { EditorView } from "./editor/index.mjs";
|
|
10
|
-
export { EditorView,
|
|
9
|
+
export { EditorView, SELEditorConfig, SELEditorFeatures, SELLinterOptions, SchemaCompletionProvider, TokenizerConfig, createSELEditor, createSELLinter, createSchemaCompletion, createTokenizerConfig, mapCheckResult, selDarkTheme, selLightTheme };
|
package/dist/index.mjs
CHANGED
|
@@ -5,7 +5,6 @@ import { createSELLinter } from "./linting/sel-linter.mjs";
|
|
|
5
5
|
import { mapCheckResult } from "./linting/diagnostic-mapper.mjs";
|
|
6
6
|
import "./linting/index.mjs";
|
|
7
7
|
import { selDarkTheme, selLightTheme } from "./editor/theme.mjs";
|
|
8
|
-
import { buildExtensions } from "./editor/editor-config.mjs";
|
|
9
8
|
import { createSELEditor } from "./editor/create-editor.mjs";
|
|
10
9
|
import "./editor/index.mjs";
|
|
11
|
-
export { SchemaCompletionProvider,
|
|
10
|
+
export { SchemaCompletionProvider, createSELEditor, createSELLinter, createSchemaCompletion, createTokenizerConfig, mapCheckResult, selDarkTheme, selLightTheme };
|
package/dist/linting/index.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { SELLinterOptions, createSELLinter } from "./sel-linter.mjs";
|
|
2
|
+
import { mapCheckResult } from "./diagnostic-mapper.mjs";
|
|
@@ -5,7 +5,7 @@ const SEVERITY_MAP = {
|
|
|
5
5
|
warning: "warning",
|
|
6
6
|
info: "info"
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
const mapToCMDiagnostic = (diag, docLength) => {
|
|
9
9
|
const from = diag.from ?? 0;
|
|
10
10
|
const to = diag.to ?? docLength;
|
|
11
11
|
return {
|
|
@@ -14,15 +14,13 @@ function mapToCMDiagnostic(diag, docLength) {
|
|
|
14
14
|
severity: SEVERITY_MAP[diag.severity],
|
|
15
15
|
message: diag.message
|
|
16
16
|
};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}, { delay: options.delay ?? 300 });
|
|
26
|
-
}
|
|
17
|
+
};
|
|
18
|
+
const createSELLinter = (options) => (0, _codemirror_lint.linter)(async (view) => {
|
|
19
|
+
const doc = view.state.doc.toString();
|
|
20
|
+
if (!doc) return [];
|
|
21
|
+
const diagnostics = await options.validate(doc);
|
|
22
|
+
const docLength = doc.length;
|
|
23
|
+
return diagnostics.map((d) => mapToCMDiagnostic(d, docLength));
|
|
24
|
+
}, { delay: options.delay ?? 300 });
|
|
27
25
|
//#endregion
|
|
28
26
|
exports.createSELLinter = createSELLinter;
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { SELDiagnostic } from "./diagnostic-mapper.cjs";
|
|
2
1
|
import { Extension } from "@codemirror/state";
|
|
2
|
+
import { SELDiagnostic } from "@seljs/checker";
|
|
3
3
|
|
|
4
4
|
//#region src/linting/sel-linter.d.ts
|
|
5
5
|
interface SELLinterOptions {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Validate an expression, return diagnostics
|
|
8
|
+
*/
|
|
7
9
|
validate: (expression: string) => SELDiagnostic[] | Promise<SELDiagnostic[]>;
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Debounce delay in ms (default: 300)
|
|
12
|
+
*/
|
|
9
13
|
delay?: number;
|
|
10
14
|
}
|
|
11
|
-
declare
|
|
15
|
+
declare const createSELLinter: (options: SELLinterOptions) => Extension;
|
|
12
16
|
//#endregion
|
|
13
|
-
export {
|
|
17
|
+
export { SELLinterOptions, createSELLinter };
|
|
@@ -1,13 +1,17 @@
|
|
|
1
|
-
import { SELDiagnostic } from "
|
|
1
|
+
import { SELDiagnostic } from "@seljs/checker";
|
|
2
2
|
import { Extension } from "@codemirror/state";
|
|
3
3
|
|
|
4
4
|
//#region src/linting/sel-linter.d.ts
|
|
5
5
|
interface SELLinterOptions {
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Validate an expression, return diagnostics
|
|
8
|
+
*/
|
|
7
9
|
validate: (expression: string) => SELDiagnostic[] | Promise<SELDiagnostic[]>;
|
|
8
|
-
/**
|
|
10
|
+
/**
|
|
11
|
+
* Debounce delay in ms (default: 300)
|
|
12
|
+
*/
|
|
9
13
|
delay?: number;
|
|
10
14
|
}
|
|
11
|
-
declare
|
|
15
|
+
declare const createSELLinter: (options: SELLinterOptions) => Extension;
|
|
12
16
|
//#endregion
|
|
13
|
-
export {
|
|
17
|
+
export { SELLinterOptions, createSELLinter };
|
|
@@ -5,7 +5,7 @@ const SEVERITY_MAP = {
|
|
|
5
5
|
warning: "warning",
|
|
6
6
|
info: "info"
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
const mapToCMDiagnostic = (diag, docLength) => {
|
|
9
9
|
const from = diag.from ?? 0;
|
|
10
10
|
const to = diag.to ?? docLength;
|
|
11
11
|
return {
|
|
@@ -14,15 +14,13 @@ function mapToCMDiagnostic(diag, docLength) {
|
|
|
14
14
|
severity: SEVERITY_MAP[diag.severity],
|
|
15
15
|
message: diag.message
|
|
16
16
|
};
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}, { delay: options.delay ?? 300 });
|
|
26
|
-
}
|
|
17
|
+
};
|
|
18
|
+
const createSELLinter = (options) => linter(async (view) => {
|
|
19
|
+
const doc = view.state.doc.toString();
|
|
20
|
+
if (!doc) return [];
|
|
21
|
+
const diagnostics = await options.validate(doc);
|
|
22
|
+
const docLength = doc.length;
|
|
23
|
+
return diagnostics.map((d) => mapToCMDiagnostic(d, docLength));
|
|
24
|
+
}, { delay: options.delay ?? 300 });
|
|
27
25
|
//#endregion
|
|
28
26
|
export { createSELLinter };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seljs/editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.1.0-beta.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"url": "https://github.com/abinnovision/seljs"
|
|
6
6
|
},
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
"@codemirror/view": "^6.40.0",
|
|
57
57
|
"@lezer/common": "^1.5.1",
|
|
58
58
|
"@lezer/highlight": "^1.2.3",
|
|
59
|
-
"@seljs/cel-lezer": "1.0.
|
|
60
|
-
"@seljs/checker": "1.0.
|
|
59
|
+
"@seljs/cel-lezer": "1.1.0-beta.2",
|
|
60
|
+
"@seljs/checker": "1.1.0-beta.2",
|
|
61
61
|
"@seljs/schema": "1.0.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|