@api-client/ui 0.5.12 → 0.5.14
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/build/src/elements/code-editor/{ui-code-editor.d.ts → code-editor.d.ts} +3 -2
- package/build/src/elements/code-editor/code-editor.d.ts.map +1 -0
- package/build/src/elements/code-editor/{ui-code-editor.js → code-editor.js} +1 -1
- package/build/src/elements/code-editor/code-editor.js.map +1 -0
- package/build/src/elements/code-editor/internals/CodeEditor.d.ts +22 -59
- package/build/src/elements/code-editor/internals/CodeEditor.d.ts.map +1 -1
- package/build/src/elements/code-editor/internals/CodeEditor.js +139 -106
- package/build/src/elements/code-editor/internals/CodeEditor.js.map +1 -1
- package/build/src/elements/code-editor/internals/CodeEditor.styles.d.ts.map +1 -1
- package/build/src/elements/code-editor/internals/CodeEditor.styles.js +4 -0
- package/build/src/elements/code-editor/internals/CodeEditor.styles.js.map +1 -1
- package/build/src/elements/code-editor/internals/Linter.d.ts +2 -2
- package/build/src/elements/code-editor/internals/Linter.d.ts.map +1 -1
- package/build/src/elements/code-editor/internals/Linter.js +33 -37
- package/build/src/elements/code-editor/internals/Linter.js.map +1 -1
- package/build/src/elements/code-editor/internals/PlaceholderWidget.d.ts +20 -0
- package/build/src/elements/code-editor/internals/PlaceholderWidget.d.ts.map +1 -0
- package/build/src/elements/code-editor/internals/PlaceholderWidget.js +46 -0
- package/build/src/elements/code-editor/internals/PlaceholderWidget.js.map +1 -0
- package/build/src/elements/code-editor/internals/SuggestionMatchDecorator.d.ts +17 -0
- package/build/src/elements/code-editor/internals/SuggestionMatchDecorator.d.ts.map +1 -0
- package/build/src/elements/code-editor/internals/SuggestionMatchDecorator.js +31 -0
- package/build/src/elements/code-editor/internals/SuggestionMatchDecorator.js.map +1 -0
- package/build/src/elements/code-editor/internals/types.d.ts +26 -0
- package/build/src/elements/code-editor/internals/types.d.ts.map +1 -0
- package/build/src/elements/code-editor/internals/types.js +2 -0
- package/build/src/elements/code-editor/internals/types.js.map +1 -0
- package/build/src/index.d.ts +2 -2
- package/build/src/index.d.ts.map +1 -1
- package/build/src/index.js +1 -1
- package/build/src/index.js.map +1 -1
- package/demo/elements/code-editor/CodeEditorDemo.ts +19 -22
- package/package.json +3 -2
- package/src/elements/code-editor/README.md +1 -1
- package/src/elements/code-editor/{ui-code-editor.ts → code-editor.ts} +2 -7
- package/src/elements/code-editor/internals/CodeEditor.styles.ts +4 -0
- package/src/elements/code-editor/internals/CodeEditor.ts +170 -173
- package/src/elements/code-editor/internals/Linter.ts +38 -39
- package/src/elements/code-editor/internals/PlaceholderWidget.ts +50 -0
- package/src/elements/code-editor/internals/SuggestionMatchDecorator.ts +36 -0
- package/src/elements/code-editor/internals/types.ts +28 -0
- package/src/index.ts +2 -8
- package/build/src/elements/code-editor/ui-code-editor.d.ts.map +0 -1
- package/build/src/elements/code-editor/ui-code-editor.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/CodeEditor.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"CodeEditor.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/CodeEditor.styles.ts"],"names":[],"mappings":";AAEA,wBAuJC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.styles.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/CodeEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"CodeEditor.styles.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/CodeEditor.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: flex;\n flex-direction: column;\n outline: none;\n min-width: 200px;\n background-color: transparent;\n color: var(--md-sys-color-on-surface);\n\n font-family: var(--md-sys-typescale-body-large-font);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n }\n\n .surface {\n display: flex;\n flex-direction: column;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n flex: 1;\n }\n\n .label {\n font-family: var(--md-sys-typescale-label-medium-font);\n font-weight: var(--md-sys-typescale-label-medium-weight);\n font-size: var(--md-sys-typescale-label-medium-size);\n letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n line-height: var(--md-sys-typescale-label-medium-height);\n color: var(--md-sys-color-on-surface-variant);\n\n padding: 8px 16px 4px 16px;\n margin: 0;\n }\n\n .has-focus .label {\n color: var(--md-sys-color-primary);\n }\n\n .editor-container {\n position: relative;\n flex: 1;\n\n border-radius: var(--md-sys-shape-corner-extra-small);\n border: 1px solid var(--md-sys-color-outline);\n outline: 0px solid var(--md-sys-color-primary);\n outline-offset: -1px;\n transition:\n border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),\n outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .editor-container:focus-within {\n border-color: var(--md-sys-color-primary);\n outline-width: 2px;\n outline-offset: -2px;\n }\n\n .supporting-text {\n margin-top: 4px;\n padding: 0 16px;\n color: var(--md-sys-color-on-surface-variant);\n font-family: var(--md-sys-typescale-body-small-font);\n font-weight: var(--md-sys-typescale-body-small-weight);\n font-size: var(--md-sys-typescale-body-small-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n :host([disabled]) .editor-container {\n border-color: var(--md-sys-color-on-surface);\n }\n\n :host([disabled]) .label,\n :host([disabled]) .editor-container {\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n\n :host([invalid]) .label,\n :host([invalid]) .supporting-text {\n color: var(--md-sys-color-error);\n }\n\n :host([invalid]) .editor-container {\n border-color: var(--md-sys-color-error);\n outline-color: var(--md-sys-color-error);\n }\n\n .mention-chip {\n display: inline-flex;\n align-items: center;\n margin: 0 2px;\n vertical-align: baseline;\n user-select: none;\n }\n\n .mention-chip ui-chip {\n margin: 0;\n font-size: inherit;\n line-height: inherit;\n }\n\n .cm-gutters {\n background: var(--md-sys-color-surface-variant);\n color: var(--md-sys-color-on-surface-variant);\n border: none;\n }\n\n .cm-focused .cm-cursor {\n border-left-color: var(--md-sys-color-primary);\n }\n\n ::selection {\n background: var(--md-sys-color-surface-variant);\n }\n\n .ͼ1.cm-focused {\n outline: none;\n }\n\n .function-info {\n padding: 8px;\n }\n\n /* Responsive */\n @media (max-width: 600px) {\n :host {\n min-width: 0;\n }\n\n .label {\n padding: 6px 6px 3px 6px;\n }\n\n .editor-container {\n padding: 6px;\n }\n\n .supporting-text {\n padding: 3px 6px 6px 6px;\n }\n }\n`\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Diagnostic } from '@codemirror/lint';
|
|
2
2
|
import type { EditorView } from '@codemirror/view';
|
|
3
|
-
import
|
|
4
|
-
export declare function functionLinter(view: EditorView,
|
|
3
|
+
import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js';
|
|
4
|
+
export declare function functionLinter(view: EditorView, functionSchemas: readonly FunctionSchema[], dispatchEvent: (e: CustomEvent) => void): readonly Diagnostic[];
|
|
5
5
|
//# sourceMappingURL=Linter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Linter.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/Linter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,
|
|
1
|
+
{"version":3,"file":"Linter.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/Linter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAErE,wBAAgB,cAAc,CAC5B,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,SAAS,cAAc,EAAE,EAC1C,aAAa,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,GACtC,SAAS,UAAU,EAAE,CA6EvB"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export function functionLinter(view,
|
|
1
|
+
export function functionLinter(view, functionSchemas, dispatchEvent) {
|
|
2
2
|
const diagnostics = [];
|
|
3
3
|
const doc = view.state.doc;
|
|
4
4
|
const text = doc.toString();
|
|
5
|
-
const functions =
|
|
5
|
+
const functions = functionSchemas;
|
|
6
6
|
if (!functions || functions.length === 0) {
|
|
7
7
|
return diagnostics;
|
|
8
8
|
}
|
|
@@ -14,20 +14,19 @@ export function functionLinter(view, element) {
|
|
|
14
14
|
const startPos = match.index;
|
|
15
15
|
const endPos = startPos + functionName.length;
|
|
16
16
|
// Check if this function exists in our schemas
|
|
17
|
-
const
|
|
18
|
-
if (!
|
|
17
|
+
const fn = functions.find((schema) => schema.name === functionName);
|
|
18
|
+
if (!fn) {
|
|
19
19
|
diagnostics.push({
|
|
20
20
|
from: startPos,
|
|
21
21
|
to: endPos,
|
|
22
22
|
severity: 'error',
|
|
23
|
-
message: `Unknown function "${functionName}".
|
|
23
|
+
message: `Unknown function "${functionName}". Make sure you have the correct syntax for the function call.`,
|
|
24
24
|
actions: [
|
|
25
25
|
{
|
|
26
26
|
name: 'View available functions',
|
|
27
27
|
apply: () => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
detail: { availableFunctions: functions.map((s) => s.name) },
|
|
28
|
+
dispatchEvent(new CustomEvent('show-available-functions', {
|
|
29
|
+
detail: { availableFunctions: [...functions] },
|
|
31
30
|
bubbles: true,
|
|
32
31
|
}));
|
|
33
32
|
},
|
|
@@ -36,35 +35,32 @@ export function functionLinter(view, element) {
|
|
|
36
35
|
});
|
|
37
36
|
}
|
|
38
37
|
else {
|
|
39
|
-
//
|
|
40
|
-
const
|
|
41
|
-
if (fn) {
|
|
42
|
-
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
message: `Function "${functionName}" expects at most ${fn.parameters.length} parameters but got ${args.length}`,
|
|
66
|
-
});
|
|
67
|
-
}
|
|
38
|
+
// Extract the function call content to validate parameters
|
|
39
|
+
const functionCallMatch = text.substring(startPos).match(/(\w+)\s*\(([^)]*)\)/);
|
|
40
|
+
if (functionCallMatch && fn.parameters && fn.parameters.length > 0) {
|
|
41
|
+
const argsString = functionCallMatch[2].trim();
|
|
42
|
+
const args = argsString ? argsString.split(',').map((arg) => arg.trim()) : [];
|
|
43
|
+
// Check required parameters
|
|
44
|
+
const requiredParams = fn.parameters.filter((p) => p.required);
|
|
45
|
+
if (args.length < requiredParams.length) {
|
|
46
|
+
const functionEndPos = startPos + functionCallMatch[0].length;
|
|
47
|
+
diagnostics.push({
|
|
48
|
+
from: startPos,
|
|
49
|
+
to: functionEndPos,
|
|
50
|
+
severity: 'error',
|
|
51
|
+
message: `Function "${functionName}" requires ${requiredParams.length} parameters but got ${args.length}. Required: ${requiredParams.map((p) => p.name).join(', ')}`,
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
// Check if too many parameters
|
|
55
|
+
const hasVariadicParam = fn.parameters.length > 0 && !!fn.parameters[fn.parameters.length - 1].variadic;
|
|
56
|
+
if (!hasVariadicParam && args.length > fn.parameters.length) {
|
|
57
|
+
const functionEndPos = startPos + functionCallMatch[0].length;
|
|
58
|
+
diagnostics.push({
|
|
59
|
+
from: startPos,
|
|
60
|
+
to: functionEndPos,
|
|
61
|
+
severity: 'warning',
|
|
62
|
+
message: `Function "${functionName}" expects at most ${fn.parameters.length} parameters, but got ${args.length}.`,
|
|
63
|
+
});
|
|
68
64
|
}
|
|
69
65
|
}
|
|
70
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Linter.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/Linter.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,cAAc,
|
|
1
|
+
{"version":3,"file":"Linter.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/Linter.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Diagnostic } from '@codemirror/lint'\nimport type { EditorView } from '@codemirror/view'\nimport type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js'\n\nexport function functionLinter(\n view: EditorView,\n functionSchemas: readonly FunctionSchema[],\n dispatchEvent: (e: CustomEvent) => void\n): readonly Diagnostic[] {\n const diagnostics: Diagnostic[] = []\n const doc = view.state.doc\n const text = doc.toString()\n\n const functions = functionSchemas\n if (!functions || functions.length === 0) {\n return diagnostics\n }\n\n // Regular expression to match function calls like functionName(args)\n const functionCallRegex = /(\\w+)\\s*\\(/g\n let match: RegExpExecArray | null\n\n while ((match = functionCallRegex.exec(text)) !== null) {\n const functionName = match[1]\n const startPos = match.index\n const endPos = startPos + functionName.length\n\n // Check if this function exists in our schemas\n const fn = functions.find((schema) => schema.name === functionName)\n\n if (!fn) {\n diagnostics.push({\n from: startPos,\n to: endPos,\n severity: 'error',\n message: `Unknown function \"${functionName}\". Make sure you have the correct syntax for the function call.`,\n actions: [\n {\n name: 'View available functions',\n apply: () => {\n dispatchEvent(\n new CustomEvent('show-available-functions', {\n detail: { availableFunctions: [...functions] },\n bubbles: true,\n })\n )\n },\n },\n ],\n })\n } else {\n // Extract the function call content to validate parameters\n const functionCallMatch = text.substring(startPos).match(/(\\w+)\\s*\\(([^)]*)\\)/)\n if (functionCallMatch && fn.parameters && fn.parameters.length > 0) {\n const argsString = functionCallMatch[2].trim()\n const args = argsString ? argsString.split(',').map((arg) => arg.trim()) : []\n\n // Check required parameters\n const requiredParams = fn.parameters.filter((p) => p.required)\n if (args.length < requiredParams.length) {\n const functionEndPos = startPos + functionCallMatch[0].length\n diagnostics.push({\n from: startPos,\n to: functionEndPos,\n severity: 'error',\n message: `Function \"${functionName}\" requires ${requiredParams.length} parameters but got ${args.length}. Required: ${requiredParams.map((p) => p.name).join(', ')}`,\n })\n }\n\n // Check if too many parameters\n const hasVariadicParam = fn.parameters.length > 0 && !!fn.parameters[fn.parameters.length - 1].variadic\n if (!hasVariadicParam && args.length > fn.parameters.length) {\n const functionEndPos = startPos + functionCallMatch[0].length\n diagnostics.push({\n from: startPos,\n to: functionEndPos,\n severity: 'warning',\n message: `Function \"${functionName}\" expects at most ${fn.parameters.length} parameters, but got ${args.length}.`,\n })\n }\n }\n }\n }\n\n return diagnostics\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { EditorView, WidgetType } from '@codemirror/view';
|
|
2
|
+
import type { Suggestion } from './types.js';
|
|
3
|
+
import '../../../md/chip/ui-chip.js';
|
|
4
|
+
/**
|
|
5
|
+
* A widget that represents a placeholder in the code editor,
|
|
6
|
+
* specifically for suggestions that are replaced with chips.
|
|
7
|
+
*
|
|
8
|
+
* This widget is used to create a visual representation of a suggestion
|
|
9
|
+
* in the code editor, allowing users to see and interact with suggestions
|
|
10
|
+
* as chips. When a chip is removed, the corresponding text in the editor
|
|
11
|
+
* is also removed.
|
|
12
|
+
*/
|
|
13
|
+
export declare class ChipWidget extends WidgetType {
|
|
14
|
+
suggestion: Suggestion;
|
|
15
|
+
constructor(suggestion: Suggestion);
|
|
16
|
+
eq(other: WidgetType): boolean;
|
|
17
|
+
toDOM(view: EditorView): HTMLElement;
|
|
18
|
+
ignoreEvent(): boolean;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=PlaceholderWidget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlaceholderWidget.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/PlaceholderWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,6BAA6B,CAAA;AAEpC;;;;;;;;GAQG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACrB,UAAU,EAAE,UAAU;gBAAtB,UAAU,EAAE,UAAU;IAIhC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO;IAIvC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW;IAwB3B,WAAW,IAAI,OAAO;CAGhC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { WidgetType } from '@codemirror/view';
|
|
2
|
+
import '../../../md/chip/ui-chip.js';
|
|
3
|
+
/**
|
|
4
|
+
* A widget that represents a placeholder in the code editor,
|
|
5
|
+
* specifically for suggestions that are replaced with chips.
|
|
6
|
+
*
|
|
7
|
+
* This widget is used to create a visual representation of a suggestion
|
|
8
|
+
* in the code editor, allowing users to see and interact with suggestions
|
|
9
|
+
* as chips. When a chip is removed, the corresponding text in the editor
|
|
10
|
+
* is also removed.
|
|
11
|
+
*/
|
|
12
|
+
export class ChipWidget extends WidgetType {
|
|
13
|
+
suggestion;
|
|
14
|
+
constructor(suggestion) {
|
|
15
|
+
super();
|
|
16
|
+
this.suggestion = suggestion;
|
|
17
|
+
}
|
|
18
|
+
eq(other) {
|
|
19
|
+
return this.suggestion.id == other.suggestion.id;
|
|
20
|
+
}
|
|
21
|
+
toDOM(view) {
|
|
22
|
+
const wrapper = document.createElement('span');
|
|
23
|
+
wrapper.className = 'mention-chip';
|
|
24
|
+
wrapper.setAttribute('data-mention-id', this.suggestion.id);
|
|
25
|
+
const chip = document.createElement('ui-chip');
|
|
26
|
+
chip.setAttribute('type', 'input');
|
|
27
|
+
chip.setAttribute('removable', 'true');
|
|
28
|
+
chip.textContent = this.suggestion.label;
|
|
29
|
+
chip.addEventListener('remove', () => {
|
|
30
|
+
const pos = view.posAtDOM(wrapper);
|
|
31
|
+
if (pos === null)
|
|
32
|
+
return;
|
|
33
|
+
const originalText = `{{${this.suggestion.label}}}`;
|
|
34
|
+
view.dispatch({
|
|
35
|
+
changes: { from: pos, to: pos + originalText.length, insert: '' },
|
|
36
|
+
});
|
|
37
|
+
view.focus();
|
|
38
|
+
});
|
|
39
|
+
wrapper.appendChild(chip);
|
|
40
|
+
return wrapper;
|
|
41
|
+
}
|
|
42
|
+
ignoreEvent() {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=PlaceholderWidget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlaceholderWidget.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/PlaceholderWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAEzD,OAAO,6BAA6B,CAAA;AAEpC;;;;;;;;GAQG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IACrB;IAAnB,YAAmB,UAAsB;QACvC,KAAK,EAAE,CAAA;QADU,eAAU,GAAV,UAAU,CAAY;IAEzC,CAAC;IAEQ,EAAE,CAAC,KAAiB;QAC3B,OAAO,IAAI,CAAC,UAAU,CAAC,EAAE,IAAK,KAAoB,CAAC,UAAU,CAAC,EAAE,CAAA;IAClE,CAAC;IAED,KAAK,CAAC,IAAgB;QACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QAC9C,OAAO,CAAC,SAAS,GAAG,cAAc,CAAA;QAClC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;QAE3D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAC9C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;QAClC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QACtC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAA;QACxC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YAClC,IAAI,GAAG,KAAK,IAAI;gBAAE,OAAM;YAExB,MAAM,YAAY,GAAG,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAA;YACnD,IAAI,CAAC,QAAQ,CAAC;gBACZ,OAAO,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE;aAClE,CAAC,CAAA;YACF,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC,CAAC,CAAA;QAEF,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;QACzB,OAAO,OAAO,CAAA;IAChB,CAAC;IAEQ,WAAW;QAClB,OAAO,KAAK,CAAA;IACd,CAAC;CACF","sourcesContent":["import { EditorView, WidgetType } from '@codemirror/view'\nimport type { Suggestion } from './types.js'\nimport '../../../md/chip/ui-chip.js'\n\n/**\n * A widget that represents a placeholder in the code editor,\n * specifically for suggestions that are replaced with chips.\n *\n * This widget is used to create a visual representation of a suggestion\n * in the code editor, allowing users to see and interact with suggestions\n * as chips. When a chip is removed, the corresponding text in the editor\n * is also removed.\n */\nexport class ChipWidget extends WidgetType {\n constructor(public suggestion: Suggestion) {\n super()\n }\n\n override eq(other: WidgetType): boolean {\n return this.suggestion.id == (other as ChipWidget).suggestion.id\n }\n\n toDOM(view: EditorView): HTMLElement {\n const wrapper = document.createElement('span')\n wrapper.className = 'mention-chip'\n wrapper.setAttribute('data-mention-id', this.suggestion.id)\n\n const chip = document.createElement('ui-chip')\n chip.setAttribute('type', 'input')\n chip.setAttribute('removable', 'true')\n chip.textContent = this.suggestion.label\n chip.addEventListener('remove', () => {\n const pos = view.posAtDOM(wrapper)\n if (pos === null) return\n\n const originalText = `{{${this.suggestion.label}}}`\n view.dispatch({\n changes: { from: pos, to: pos + originalText.length, insert: '' },\n })\n view.focus()\n })\n\n wrapper.appendChild(chip)\n return wrapper\n }\n\n override ignoreEvent(): boolean {\n return false\n }\n}\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { MatchDecorator } from '@codemirror/view';
|
|
2
|
+
import type { Suggestion } from './types.js';
|
|
3
|
+
/**
|
|
4
|
+
* A class that specializes in creating and managing decorations for suggestion matches in a code editor.
|
|
5
|
+
*/
|
|
6
|
+
export declare class SuggestionMatchDecorator extends MatchDecorator {
|
|
7
|
+
#private;
|
|
8
|
+
suggestions: Suggestion[];
|
|
9
|
+
/**
|
|
10
|
+
* Creates a new instance of SuggestionMatchDecorator.
|
|
11
|
+
* @param regexp - The regular expression used to match suggestions in the code.
|
|
12
|
+
* @param suggestions - An array of suggestions that will be used to create decorations.
|
|
13
|
+
* Each suggestion should have a unique `id` and a `label` that will be displayed in the editor.
|
|
14
|
+
*/
|
|
15
|
+
constructor(regexp: RegExp, suggestions: Suggestion[]);
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=SuggestionMatchDecorator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SuggestionMatchDecorator.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/SuggestionMatchDecorator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,kBAAkB,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAG5C;;GAEG;AACH,qBAAa,wBAAyB,SAAQ,cAAc;;IASjD,WAAW,EAAE,UAAU,EAAE;IARlC;;;;;OAKG;gBAED,MAAM,EAAE,MAAM,EACP,WAAW,EAAE,UAAU,EAAE;CAmBnC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { MatchDecorator, Decoration } from '@codemirror/view';
|
|
2
|
+
import { ChipWidget } from './PlaceholderWidget.js';
|
|
3
|
+
/**
|
|
4
|
+
* A class that specializes in creating and managing decorations for suggestion matches in a code editor.
|
|
5
|
+
*/
|
|
6
|
+
export class SuggestionMatchDecorator extends MatchDecorator {
|
|
7
|
+
suggestions;
|
|
8
|
+
/**
|
|
9
|
+
* Creates a new instance of SuggestionMatchDecorator.
|
|
10
|
+
* @param regexp - The regular expression used to match suggestions in the code.
|
|
11
|
+
* @param suggestions - An array of suggestions that will be used to create decorations.
|
|
12
|
+
* Each suggestion should have a unique `id` and a `label` that will be displayed in the editor.
|
|
13
|
+
*/
|
|
14
|
+
constructor(regexp, suggestions) {
|
|
15
|
+
super({
|
|
16
|
+
regexp,
|
|
17
|
+
decoration: (match) => this.#decoration(match),
|
|
18
|
+
});
|
|
19
|
+
this.suggestions = suggestions;
|
|
20
|
+
}
|
|
21
|
+
#decoration(match) {
|
|
22
|
+
const label = match[1];
|
|
23
|
+
const suggestion = this.suggestions.find((s) => s.label === label);
|
|
24
|
+
// If no suggestion is found, create a default one
|
|
25
|
+
const suggestionData = suggestion || { id: label, label };
|
|
26
|
+
return Decoration.replace({
|
|
27
|
+
widget: new ChipWidget(suggestionData),
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
//# sourceMappingURL=SuggestionMatchDecorator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SuggestionMatchDecorator.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/SuggestionMatchDecorator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAEnD;;GAEG;AACH,MAAM,OAAO,wBAAyB,SAAQ,cAAc;IASjD;IART;;;;;OAKG;IACH,YACE,MAAc,EACP,WAAyB;QAEhC,KAAK,CAAC;YACJ,MAAM;YACN,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;SAC/C,CAAC,CAAA;QALK,gBAAW,GAAX,WAAW,CAAc;IAMlC,CAAC;IAED,WAAW,CAAC,KAAsB;QAChC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAA;QAElE,kDAAkD;QAClD,MAAM,cAAc,GAAe,UAAU,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;QAErE,OAAO,UAAU,CAAC,OAAO,CAAC;YACxB,MAAM,EAAE,IAAI,UAAU,CAAC,cAAc,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;CACF","sourcesContent":["import { MatchDecorator, Decoration } from '@codemirror/view'\nimport type { Suggestion } from './types.js'\nimport { ChipWidget } from './PlaceholderWidget.js'\n\n/**\n * A class that specializes in creating and managing decorations for suggestion matches in a code editor.\n */\nexport class SuggestionMatchDecorator extends MatchDecorator {\n /**\n * Creates a new instance of SuggestionMatchDecorator.\n * @param regexp - The regular expression used to match suggestions in the code.\n * @param suggestions - An array of suggestions that will be used to create decorations.\n * Each suggestion should have a unique `id` and a `label` that will be displayed in the editor.\n */\n constructor(\n regexp: RegExp,\n public suggestions: Suggestion[]\n ) {\n super({\n regexp,\n decoration: (match) => this.#decoration(match),\n })\n }\n\n #decoration(match: RegExpExecArray): Decoration {\n const label = match[1]\n const suggestion = this.suggestions.find((s) => s.label === label)\n\n // If no suggestion is found, create a default one\n const suggestionData: Suggestion = suggestion || { id: label, label }\n\n return Decoration.replace({\n widget: new ChipWidget(suggestionData),\n })\n }\n}\n"]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js';
|
|
2
|
+
export interface Suggestion {
|
|
3
|
+
/** Unique identifier for the suggestion */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Main label displayed */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Supporting description text */
|
|
8
|
+
description?: string;
|
|
9
|
+
/** Suffix text (e.g., type, category) */
|
|
10
|
+
suffix?: string;
|
|
11
|
+
/** Additional data associated with the suggestion */
|
|
12
|
+
data?: Record<string, unknown>;
|
|
13
|
+
}
|
|
14
|
+
export interface FunctionInsertEvent {
|
|
15
|
+
/** The inserted function schema */
|
|
16
|
+
functionSchema: FunctionSchema;
|
|
17
|
+
/** The position where the function was inserted */
|
|
18
|
+
position: number;
|
|
19
|
+
}
|
|
20
|
+
export interface SuggestionInsertEvent {
|
|
21
|
+
/** The inserted suggestion */
|
|
22
|
+
suggestion: Suggestion;
|
|
23
|
+
/** The position where the suggestion was inserted */
|
|
24
|
+
position: number;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAErE,MAAM,WAAW,UAAU;IACzB,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAA;IACV,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,cAAc,EAAE,cAAc,CAAA;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,UAAU,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,QAAQ,EAAE,MAAM,CAAA;CACjB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/elements/code-editor/internals/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js'\n\nexport interface Suggestion {\n /** Unique identifier for the suggestion */\n id: string\n /** Main label displayed */\n label: string\n /** Supporting description text */\n description?: string\n /** Suffix text (e.g., type, category) */\n suffix?: string\n /** Additional data associated with the suggestion */\n data?: Record<string, unknown>\n}\n\nexport interface FunctionInsertEvent {\n /** The inserted function schema */\n functionSchema: FunctionSchema\n /** The position where the function was inserted */\n position: number\n}\n\nexport interface SuggestionInsertEvent {\n /** The inserted suggestion */\n suggestion: Suggestion\n /** The position where the suggestion was inserted */\n position: number\n}\n"]}
|
package/build/src/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export { default as MarkedHighlightElement } from './elements/highlight/MarkedHighlight.js';
|
|
2
2
|
export { default as PrismHighlightElement } from './elements/highlight/PrismHighlight.js';
|
|
3
3
|
export { default as HarViewerElement } from './elements/har/HarViewer.js';
|
|
4
|
-
export { default as CodeEditorElement } from './elements/code-editor/
|
|
5
|
-
export type {
|
|
4
|
+
export { default as CodeEditorElement } from './elements/code-editor/code-editor.js';
|
|
5
|
+
export type { Suggestion, FunctionInsertEvent, SuggestionInsertEvent } from './elements/code-editor/code-editor.js';
|
|
6
6
|
export { default as Menu } from './md/menu/internal/Menu.js';
|
|
7
7
|
export { default as MenuItem } from './md/menu/internal/MenuItem.js';
|
|
8
8
|
export { default as SubMenu } from './md/menu/internal/SubMenu.js';
|
package/build/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AACpF,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAGnH,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAA;AAGlE,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,2BAA2B,CAAA;AAClC,YAAY,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,eAAe,EACf,oBAAoB,EACpB,0BAA0B,EAC1B,+BAA+B,GAChC,MAAM,2BAA2B,CAAA;AAGlC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAI7C,cAAc,0CAA0C,CAAA;AACxD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qCAAqC,CAAA;AAInD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,YAAY,EACV,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,iBAAiB,EACjB,YAAY,GACb,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAGjE,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAIxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,KAAK,eAAe,MAAM,yCAAyC,CAAA;AAC1E,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AAGpD,OAAO,KAAK,YAAY,MAAM,oBAAoB,CAAA;AAClD,OAAO,KAAK,WAAW,MAAM,mBAAmB,CAAA;AAGhD,cAAc,wBAAwB,CAAA;AAGtC,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAA"}
|
package/build/src/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export { default as MarkedHighlightElement } from './elements/highlight/MarkedHi
|
|
|
3
3
|
export { default as PrismHighlightElement } from './elements/highlight/PrismHighlight.js';
|
|
4
4
|
export { default as HarViewerElement } from './elements/har/HarViewer.js';
|
|
5
5
|
// Code Editor
|
|
6
|
-
export { default as CodeEditorElement } from './elements/code-editor/
|
|
6
|
+
export { default as CodeEditorElement } from './elements/code-editor/code-editor.js';
|
|
7
7
|
// Menu Components
|
|
8
8
|
export { default as Menu } from './md/menu/internal/Menu.js';
|
|
9
9
|
export { default as MenuItem } from './md/menu/internal/MenuItem.js';
|
package/build/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AAEX,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAEzE,cAAc;AACd,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AAEX,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,yCAAyC,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAEzE,cAAc;AACd,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAGpF,kBAAkB;AAClB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAA;AAElE,yBAAyB;AACzB,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,2BAA2B,CAAA;AAWlC,OAAO;AACP,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,WAAW;AAEX,cAAc,0CAA0C,CAAA;AACxD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qCAAqC,CAAA;AAEnD,SAAS;AAET,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAQnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAEjE,SAAS;AACT,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAA;AAExC,OAAO;AAEP,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,KAAK,eAAe,MAAM,yCAAyC,CAAA;AAC1E,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AAEpD,SAAS;AACT,OAAO,KAAK,YAAY,MAAM,oBAAoB,CAAA;AAClD,OAAO,KAAK,WAAW,MAAM,mBAAmB,CAAA;AAEhD,SAAS;AACT,cAAc,wBAAwB,CAAA;AAEtC,QAAQ;AACR,OAAO,KAAK,UAAU,MAAM,uBAAuB,CAAA","sourcesContent":["// Elements\n\nexport { default as MarkedHighlightElement } from './elements/highlight/MarkedHighlight.js'\nexport { default as PrismHighlightElement } from './elements/highlight/PrismHighlight.js'\nexport { default as HarViewerElement } from './elements/har/HarViewer.js'\n\n// Code Editor\nexport { default as CodeEditorElement } from './elements/code-editor/code-editor.js'\nexport type { Suggestion, FunctionInsertEvent, SuggestionInsertEvent } from './elements/code-editor/code-editor.js'\n\n// Menu Components\nexport { default as Menu } from './md/menu/internal/Menu.js'\nexport { default as MenuItem } from './md/menu/internal/MenuItem.js'\nexport { default as SubMenu } from './md/menu/internal/SubMenu.js'\n\n// Date Picker Components\nexport {\n UiDatePickerCalendar,\n UiDatePickerInput,\n UiDatePickerModal,\n UiDatePickerModalInput,\n} from './md/date-picker/index.js'\nexport type {\n DateRange,\n CalendarDay,\n CalendarMonth,\n DateSelectEvent,\n DateRangeSelectEvent,\n ModalDatePickerChangeEvent,\n ModalInputDatePickerChangeEvent,\n} from './md/date-picker/index.js'\n\n// Demo\nexport { DemoPage } from './demo/DemoPage.js'\n\n// Bindings\n\nexport * from './bindings/base/ConfigurationBindings.js'\nexport * from './bindings/base/IoThread.js'\nexport * from './bindings/base/PlatformBindings.js'\n\n// Events\n\nexport { Events } from './events/Events.js'\nexport { EventTypes } from './events/EventTypes.js'\nexport type {\n INavDetail,\n INavRunHttpProjectDetail,\n INavRunSchemaDesignerDetail,\n INavRunHttpClient,\n NavRunDetail,\n} from './events/NavigationEvents.js'\nexport { AppNavigationEvent } from './events/NavigationEvents.js'\n\n// Router\nexport * as Router from './lib/route.js'\n\n// libs\n\nexport { PrismHighlighter } from './elements/highlight/PrismHighlighter.js'\nexport { default as PrismStyles } from './elements/highlight/Prism.styles.js'\nexport { default as MarkdownStyles } from './elements/highlight/MarkdownStyles.js'\nexport * as PrismAutoDetect from './elements/highlight/PrismAutoDetect.js'\nexport * as RouteMixin from './mixins/RouteMixin.js'\n\n// Monaco\nexport * as MonacoLoader from './monaco/loader.js'\nexport * as MonacoTheme from './monaco/theme.js'\n\n// Config\nexport * from './lib/config/Config.js'\n\n// Other\nexport * as Decorators from './decorators/index.js'\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { html } from 'lit'
|
|
2
|
+
import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js'
|
|
2
3
|
import reactive from '../../../src/decorators/reactive.js'
|
|
3
4
|
import { DemoPage } from '../../../src/demo/DemoPage.js'
|
|
4
5
|
import type {
|
|
5
|
-
FunctionSchema,
|
|
6
6
|
Suggestion,
|
|
7
7
|
FunctionInsertEvent,
|
|
8
8
|
SuggestionInsertEvent,
|
|
9
|
-
} from '../../../src/elements/code-editor/
|
|
10
|
-
import '../../../src/elements/code-editor/
|
|
9
|
+
} from '../../../src/elements/code-editor/code-editor.js'
|
|
10
|
+
import '../../../src/elements/code-editor/code-editor.js'
|
|
11
11
|
|
|
12
12
|
class CodeEditorDemo extends DemoPage {
|
|
13
13
|
override accessor componentName = 'Code Editor'
|
|
@@ -29,64 +29,61 @@ class CodeEditorDemo extends DemoPage {
|
|
|
29
29
|
|
|
30
30
|
private functionSchemas: FunctionSchema[] = [
|
|
31
31
|
{
|
|
32
|
-
id: 'getData',
|
|
33
32
|
name: 'getData',
|
|
34
33
|
description: 'Fetches data from the server',
|
|
35
34
|
parameters: [
|
|
36
35
|
{
|
|
37
36
|
name: 'url',
|
|
38
|
-
type: 'string',
|
|
39
|
-
description: 'The URL to fetch data from',
|
|
37
|
+
schema: { type: 'string', description: 'The URL to fetch data from' },
|
|
40
38
|
required: true,
|
|
41
39
|
},
|
|
42
40
|
{
|
|
43
41
|
name: 'options',
|
|
44
|
-
type: '
|
|
45
|
-
description: 'Fetch options',
|
|
42
|
+
schema: { type: 'object', description: 'Fetch options' },
|
|
46
43
|
required: false,
|
|
47
44
|
},
|
|
48
45
|
],
|
|
49
|
-
returns:
|
|
46
|
+
returns: {
|
|
47
|
+
type: 'object',
|
|
48
|
+
description: 'The fetched data as an object',
|
|
49
|
+
},
|
|
50
|
+
category: 'network',
|
|
50
51
|
},
|
|
51
52
|
{
|
|
52
|
-
id: 'processData',
|
|
53
53
|
name: 'processData',
|
|
54
54
|
description: 'Processes raw data into a usable format',
|
|
55
55
|
parameters: [
|
|
56
56
|
{
|
|
57
57
|
name: 'data',
|
|
58
|
-
|
|
59
|
-
description: 'Raw data to process',
|
|
58
|
+
schema: { description: 'Raw data to process' },
|
|
60
59
|
required: true,
|
|
61
60
|
},
|
|
62
61
|
{
|
|
63
62
|
name: 'transformer',
|
|
64
|
-
|
|
65
|
-
description: 'Optional transformer function',
|
|
63
|
+
schema: { description: 'Optional transformer function' },
|
|
66
64
|
required: false,
|
|
67
65
|
},
|
|
68
66
|
],
|
|
69
|
-
returns:
|
|
67
|
+
returns: {},
|
|
68
|
+
category: 'data',
|
|
70
69
|
},
|
|
71
70
|
{
|
|
72
|
-
|
|
71
|
+
category: 'validation',
|
|
73
72
|
name: 'validateInput',
|
|
74
73
|
description: 'Validates user input against a schema',
|
|
75
74
|
parameters: [
|
|
76
75
|
{
|
|
77
76
|
name: 'input',
|
|
78
|
-
type: 'object',
|
|
79
|
-
description: 'The input to validate',
|
|
77
|
+
schema: { type: 'object', description: 'The input to validate' },
|
|
80
78
|
required: true,
|
|
81
79
|
},
|
|
82
80
|
{
|
|
83
81
|
name: 'schema',
|
|
84
|
-
type: '
|
|
85
|
-
description: 'Validation schema',
|
|
82
|
+
schema: { type: 'object', description: 'Validation schema' },
|
|
86
83
|
required: true,
|
|
87
84
|
},
|
|
88
85
|
],
|
|
89
|
-
returns: '
|
|
86
|
+
returns: { type: 'object', description: 'Validation result' },
|
|
90
87
|
},
|
|
91
88
|
]
|
|
92
89
|
|
|
@@ -139,7 +136,7 @@ class CodeEditorDemo extends DemoPage {
|
|
|
139
136
|
|
|
140
137
|
<code-editor
|
|
141
138
|
label="Code Editor"
|
|
142
|
-
supporting-text="Type function names or
|
|
139
|
+
supporting-text="Type function names or {{fnName}} to see autocomplete"
|
|
143
140
|
.value=${this.editorValue}
|
|
144
141
|
.functionSchemas=${this.functionSchemas}
|
|
145
142
|
.suggestions=${this.suggestions}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@api-client/ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.14",
|
|
4
4
|
"description": "Internal UI component library for the API Client ecosystem.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"main": "build/src/index.js",
|
|
@@ -181,15 +181,16 @@
|
|
|
181
181
|
"@api-client/graph": "^0.3.6",
|
|
182
182
|
"@api-client/json": "^0.2.0",
|
|
183
183
|
"@codemirror/autocomplete": "^6.18.6",
|
|
184
|
-
"@codemirror/basic-setup": "^0.20.0",
|
|
185
184
|
"@codemirror/commands": "^6.8.1",
|
|
186
185
|
"@codemirror/lang-javascript": "^6.2.4",
|
|
187
186
|
"@codemirror/language": "^6.11.2",
|
|
187
|
+
"@codemirror/lint": "^6.8.5",
|
|
188
188
|
"@codemirror/state": "^6.5.2",
|
|
189
189
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
190
190
|
"@codemirror/view": "^6.38.0",
|
|
191
191
|
"@github/relative-time-element": "^4.4.6",
|
|
192
192
|
"@material/web": "^2.3.0",
|
|
193
|
+
"@pawel-up/jexl": "^4.3.0",
|
|
193
194
|
"@types/har-format": "^1.2.8",
|
|
194
195
|
"dompurify": "^3.2.5",
|
|
195
196
|
"idb-keyval": "^6.1.0",
|
|
@@ -19,7 +19,7 @@ A CodeMirror 6 based editor component that supports function autocomplete and su
|
|
|
19
19
|
import { CodeEditorElement } from '@api-client/ui'
|
|
20
20
|
|
|
21
21
|
// Or import the component directly
|
|
22
|
-
import '@api-client/ui/elements/code-editor/
|
|
22
|
+
import '@api-client/ui/elements/code-editor/code-editor.js'
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
```html
|
|
@@ -15,10 +15,5 @@ declare global {
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
export default CodeEditorElement
|
|
18
|
-
export type {
|
|
19
|
-
|
|
20
|
-
FunctionParameter,
|
|
21
|
-
Suggestion,
|
|
22
|
-
FunctionInsertEvent,
|
|
23
|
-
SuggestionInsertEvent,
|
|
24
|
-
} from './internals/CodeEditor.js'
|
|
18
|
+
export type { Suggestion, FunctionInsertEvent, SuggestionInsertEvent } from './internals/types.js'
|
|
19
|
+
export type { FunctionSchema, FunctionParameter } from '@pawel-up/jexl/schemas/types.js'
|