|
| 1 | +import { |
| 2 | + autocompletion, |
| 3 | + closeBrackets, |
| 4 | + closeBracketsKeymap, |
| 5 | + completionKeymap, |
| 6 | +} from "@codemirror/autocomplete"; |
| 7 | +import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"; |
| 8 | +import { |
| 9 | + bracketMatching, |
| 10 | + defaultHighlightStyle, |
| 11 | + foldGutter, |
| 12 | + foldKeymap, |
| 13 | + indentOnInput, |
| 14 | + syntaxHighlighting, |
| 15 | +} from "@codemirror/language"; |
| 16 | +import { lintKeymap } from "@codemirror/lint"; |
| 17 | +import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"; |
| 18 | +import { EditorState } from "@codemirror/state"; |
| 19 | +import { |
| 20 | + crosshairCursor, |
| 21 | + drawSelection, |
| 22 | + dropCursor, |
| 23 | + EditorView, |
| 24 | + highlightActiveLine, |
| 25 | + highlightActiveLineGutter, |
| 26 | + highlightSpecialChars, |
| 27 | + keymap, |
| 28 | + lineNumbers, |
| 29 | + rectangularSelection, |
| 30 | +} from "@codemirror/view"; |
| 31 | +import { |
| 32 | + type AidboxClient, |
| 33 | + type AuthProvider, |
| 34 | + BrowserAuthProvider, |
| 35 | + makeClient, |
| 36 | +} from "@health-samurai/aidbox-client"; |
| 37 | +import { createCodeMirrorLsp } from "../src/index"; |
| 38 | + |
| 39 | +const initialText = `Patient |
| 40 | + .name |
| 41 | + .where( use = 'official' ) |
| 42 | + .first()`; |
| 43 | + |
| 44 | +const aidboxUrl = "http://localhost:8080"; |
| 45 | +const authProvider: AuthProvider = new BrowserAuthProvider(aidboxUrl); |
| 46 | +const client: AidboxClient = makeClient({ |
| 47 | + baseUrl: aidboxUrl, |
| 48 | + authProvider: authProvider, |
| 49 | +}); |
| 50 | +const { extension: lspExtension } = createCodeMirrorLsp(client, { |
| 51 | + debug: true, |
| 52 | +}); |
| 53 | + |
| 54 | +const editorState = EditorState.create({ |
| 55 | + doc: initialText, |
| 56 | + extensions: [ |
| 57 | + lineNumbers(), |
| 58 | + highlightActiveLineGutter(), |
| 59 | + highlightSpecialChars(), |
| 60 | + history(), |
| 61 | + foldGutter(), |
| 62 | + drawSelection(), |
| 63 | + dropCursor(), |
| 64 | + EditorState.allowMultipleSelections.of(true), |
| 65 | + indentOnInput(), |
| 66 | + syntaxHighlighting(defaultHighlightStyle, { fallback: true }), |
| 67 | + bracketMatching(), |
| 68 | + closeBrackets(), |
| 69 | + autocompletion(), |
| 70 | + rectangularSelection(), |
| 71 | + crosshairCursor(), |
| 72 | + highlightActiveLine(), |
| 73 | + highlightSelectionMatches(), |
| 74 | + keymap.of([ |
| 75 | + ...closeBracketsKeymap, |
| 76 | + ...defaultKeymap, |
| 77 | + ...searchKeymap, |
| 78 | + ...historyKeymap, |
| 79 | + ...foldKeymap, |
| 80 | + ...completionKeymap, |
| 81 | + ...lintKeymap, |
| 82 | + ]), |
| 83 | + // Theme for better visibility |
| 84 | + EditorView.theme({ |
| 85 | + "&": { |
| 86 | + fontSize: "14px", |
| 87 | + }, |
| 88 | + ".cm-tooltip.cm-tooltip-autocomplete": { |
| 89 | + "& > ul": { |
| 90 | + fontFamily: "monospace", |
| 91 | + maxHeight: "200px", |
| 92 | + maxWidth: "400px", |
| 93 | + }, |
| 94 | + }, |
| 95 | + }), |
| 96 | + // autocompletion({ |
| 97 | + // activateOnTyping: true, |
| 98 | + // activateOnTypingDelay: 0, // No delay for triggers |
| 99 | + // selectOnOpen: true, // Auto-select first item |
| 100 | + // closeOnBlur: true, // Close on blur |
| 101 | + // maxRenderedOptions: 100, // Max items to render |
| 102 | + // defaultKeymap: true, // Use default keybindings |
| 103 | + // icons: true, // Add icons for completion types |
| 104 | + // }), |
| 105 | + // syntaxHighlighting(defaultHighlightStyle), |
| 106 | + lspExtension, |
| 107 | + ], |
| 108 | +}); |
| 109 | + |
| 110 | +const cmElement = document.getElementById("cm"); |
| 111 | +if (cmElement === null) { |
| 112 | + throw Error("No #cm element"); |
| 113 | +} |
| 114 | + |
| 115 | +const _editorView = new EditorView({ |
| 116 | + state: editorState, |
| 117 | + parent: cmElement, |
| 118 | +}); |
0 commit comments