implement autocomplete via addon plugin

blacksmithgu · Jan 10, 2025 · 3f698c5 · 3f698c5
1 parent cad17ba
commit 3f698c5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
@@ -20,7 +20,6 @@ async function build(prod) {
 		external: [
 			'obsidian',
 			'electron',
-			'@codemirror/autocomplete',
 			'@codemirror/collab',
 			'@codemirror/commands',
 			'@codemirror/language',
@@ -53,4 +52,4 @@ async function build(prod) {
 }
 
 // Run the build.
-build(process.argv[2] === 'production');
+build(process.argv[2] === 'production');
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -17,6 +17,7 @@ import { Coerce } from "./coerce";
 import { DataArray } from "./data-array";
 import * as luxon from "luxon";
 import * as preact from "preact";
+import * as phooks from "preact/hooks";
 
 /** Exterally visible API for datacore.
  * @group Core
@@ -38,6 +39,9 @@ export class DatacoreApi {
     get app(): App {
         return this.core.app;
     }
+    get hooks(): typeof phooks {
+        return phooks;
+    }
 
     ///////////////
     // Local API //

diff --git a/src/typings/obsidian-ex.d.ts b/src/typings/obsidian-ex.d.ts
@@ -1,7 +1,9 @@
+import { Extension } from "@codemirror/state";
 import type { DatacoreApi } from "api/api";
 import { CanvasMetadataIndex } from "index/types/json/canvas";
 import "obsidian";
 import { App } from "obsidian";
+import * as hooks from "preact/hooks";
 
 /** @hidden */
 declare module "obsidian" {
@@ -63,6 +65,9 @@ declare module "obsidian" {
                 datacore?: {
                     api: DatacoreApi;
                 };
+                "datacore-addon-autocomplete"?: {
+                    readonly extensions: Extension[];
+                };
             };
         };
         internalPlugins: {

diff --git a/src/ui/view-page.tsx b/src/ui/view-page.tsx
@@ -11,10 +11,10 @@ import { useIndexUpdates } from "./hooks";
 import { DATACORE_CONTEXT, ErrorMessage } from "./markdown";
 import Select from "react-select";
 import "./view-page.css";
-import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
+import { history, defaultKeymap, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { foldGutter, indentOnInput, syntaxHighlighting, bracketMatching, foldKeymap } from "@codemirror/language";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
 import { lintKeymap } from "@codemirror/lint";
 import {
     crosshairCursor,
@@ -30,8 +30,8 @@ import {
 } from "@codemirror/view";
 import { tagHighlighter, tags } from "@lezer/highlight";
 import { javascript } from "@codemirror/lang-javascript";
-import { Compartment, EditorState } from "@codemirror/state";
 import { vim } from "@replit/codemirror-vim";
+import { Compartment, EditorState, Extension } from "@codemirror/state";
 
 /** Key for datacore JS query views. */
 export const VIEW_TYPE_DATACOREJS = "datacorejs-view";
@@ -175,11 +175,11 @@ const EDITOR_EXTS = [
     indentOnInput(),
     bracketMatching(),
     closeBrackets(),
-    autocompletion(),
     rectangularSelection(),
     crosshairCursor(),
     highlightSelectionMatches(),
     keymap.of([
+        indentWithTab,
         ...closeBracketsKeymap,
         ...defaultKeymap,
         ...searchKeymap,
@@ -206,8 +206,7 @@ const EDITOR_EXTS = [
 ];
 /** Provides a minimal editor with syntax highlighting */
 function CodeMirrorEditor({
-    lang,
-    state: { script },
+    state: { script, sourceType: lang },
     setState,
 }: {
     lang?: ScriptLanguage;
@@ -218,7 +217,7 @@ function CodeMirrorEditor({
     const viewRef = useRef<EditorView>(null);
     const viewContext = useContext(CUSTOM_VIEW_CONTEXT);
     useEffect(() => {
-        if (editorRef.current)
+        if (editorRef.current && !viewRef.current) {
             viewRef.current = new EditorView({
                 parent: editorRef.current,
                 extensions: [viewContext.app.vault.getConfig("vimMode") && vim()].concat(
@@ -237,11 +236,13 @@ function CodeMirrorEditor({
                             ),
                             EDITOR_HL,
                             viewContext.app.vault.getConfig("vimMode") && vim(),
+                            ...(viewContext.app.plugins.plugins["datacore-addon-autocomplete"]?.extensions || []),
                         ].filter((a) => !!a)
                     )
                 ),
                 doc: script || "",
             });
+        }
         return () => viewRef.current?.destroy();
     }, [editorRef.current]);
     useEffect(() => {
@@ -349,6 +350,15 @@ function CurrentFileSelector({
             onChange={(nv, _am) => onChange(nv?.value)}
             unstyled
             menuPortalTarget={document.body}
+            tabIndex={-1}
+            styles={{
+                container(base, _props) {
+                    return { ...base, minWidth: "100%" };
+                },
+                menu(base, _props) {
+                    return { ...base, minWidth: "100%" };
+                },
+            }}
             classNames={{
                 input: (props: any) => "prompt-input",
                 valueContainer: (props: any) => "suggestion-item value-container",