null, false];
+ return [null, false];
}
if (typeof value === "boolean") {
- // oxlint-disable-next-line eslint-plugin-react(jsx-key)
- return [{value.toString()}, false];
+ return [{value.toString()}, false];
}
if (Array.isArray(value)) {
return [
- // NOTE: not sure what the key would be in this case. I think I'd rather get rid
- // of this code.
- // oxlint-disable-next-line eslint-plugin-react(jsx-key)
- value.map((v) => {
- return {value}, false];
+ return [{value}, false];
}
diff --git a/src/components/DatastoreRelationshipEditor.tsx b/src/components/DatastoreRelationshipEditor.tsx
index 4b7155a..9eac2e9 100644
--- a/src/components/DatastoreRelationshipEditor.tsx
+++ b/src/components/DatastoreRelationshipEditor.tsx
@@ -1,6 +1,6 @@
import { Theme } from "@glideapps/glide-data-grid";
import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
import useDeepCompareEffect from "use-deep-compare-effect";
import {
@@ -70,7 +70,7 @@ export type DatastoreRelationshipEditorProps = {
} & { dimensions?: { width: number; height: number } };
export function DatastoreRelationshipEditor(props: DatastoreRelationshipEditorProps) {
- const debouncedUpdateDatastore = useDebouncedCallback(
+ const handleDataUpdated = useDebouncedCallback(
(data: RelationshipDatum[]) => {
const editableContents = toRelationshipsString(data);
props.datastore.update(relationshipsItem, editableContents);
@@ -79,13 +79,6 @@ export function DatastoreRelationshipEditor(props: DatastoreRelationshipEditorPr
{ wait: 50 },
);
- const handleDataUpdated = useCallback(
- (data: RelationshipDatum[]) => {
- debouncedUpdateDatastore(data);
- },
- [debouncedUpdateDatastore],
- );
-
const relErrors = useMemo(() => {
return props.services.problemService.requestErrors.filter(
(error: DeveloperError) => error.source === DeveloperError_Source.RELATIONSHIP,
diff --git a/src/components/EditorDisplay.tsx b/src/components/EditorDisplay.tsx
index 1ce9f24..47e61d1 100644
--- a/src/components/EditorDisplay.tsx
+++ b/src/components/EditorDisplay.tsx
@@ -1,23 +1,23 @@
import { TextRange } from "@authzed/spicedb-parser-js";
-import { Editor, DiffEditor, useMonaco } from "@monaco-editor/react";
+import { Editor, DiffEditor } from "@monaco-editor/react";
import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer";
-import { useNavigate, useLocation } from "@tanstack/react-router";
+import { useLocation } from "@tanstack/react-router";
import lineColumn from "line-column";
import * as monaco from "monaco-editor";
import { useEffect, useMemo, useRef, useState } from "react";
import { flushSync } from "react-dom";
-import "react-reflex/styles.css";
-import { useMediaQuery } from "@/hooks/use-media-query";
+import { useSettings } from "@/components/SettingsProvider";
+import { useResolvedTheme } from "@/hooks/use-resolved-theme";
import { ScrollLocation, useCookieService } from "../services/cookieservice";
import { DataStore, DataStoreItem, DataStoreItemKind } from "../services/datastore";
import { LocalParseState } from "../services/localparse";
import { Services } from "../services/services";
import registerDSLanguage, {
- DS_DARK_THEME_NAME,
DS_LANGUAGE_NAME,
- DS_THEME_NAME,
+ PLAYGROUND_DARK_THEME_NAME,
+ PLAYGROUND_LIGHT_THEME_NAME,
} from "../spicedb-common/lang/dslang";
import { RelationshipFound } from "../spicedb-common/parsing";
import {
@@ -25,12 +25,18 @@ import {
DeveloperWarning,
} from "../spicedb-common/protodefs/developer/v1/developer_pb";
+import { useDrawerStore } from "./drawer/state";
import { ERROR_SOURCE_TO_ITEM } from "./panels/errordisplays";
-import registerTupleLanguage, {
- TUPLE_DARK_THEME_NAME,
- TUPLE_LANGUAGE_NAME,
- TUPLE_THEME_NAME,
-} from "./relationshipeditor/tuplelang";
+import registerTupleLanguage, { TUPLE_LANGUAGE_NAME } from "./relationshipeditor/tuplelang";
+
+// Module-level singletons for one-shot language registration. Monaco's
+// `register*` calls are global; calling them on every editor mount can stack
+// providers (each registration adds a new completion/definition/semantic-tokens
+// provider rather than replacing). The `latestLocalParseStateRef` lets the
+// registered tuple completion provider always read the most recent parse
+// state without re-registering.
+let languagesRegistered = false;
+const latestLocalParseStateRef: { current: LocalParseState | null } = { current: null };
export type EditorDisplayProps = {
datastore: DataStore;
@@ -58,66 +64,43 @@ interface LocationState {
* EditorDisplays display the editor in the playground.
*/
export function EditorDisplay(props: EditorDisplayProps) {
- const monacoRef = useMonaco();
- const [monacoReady, setMonacoReady] = useState(false);
+ const monacoInstanceRef = useRef