Skip to content

Prototype of getting active vscode theme in the extension #772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vezwork wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Prototype of getting active vscode theme in the extension #772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d89cbe0
Prototype of getting active vscode theme
vezwork Jul 25, 2025
afac040
WIP prototype with HighlightStyle debugging
vezwork Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 27 additions & 23 deletions apps/vscode-editor/src/EditorContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ import { JsonRpcRequestTransport, pathWithForwardSlashes } from 'core';

import { useHotkeys } from "ui-widgets";

import {
commandHotkeys,
CommandManagerContext,
Commands,
Editor,
EditorUIStore,
setEditorTheme,
import {
commandHotkeys,
CommandManagerContext,
Commands,
Editor,
EditorUIStore,
setEditorTheme,
fluentTheme,
showContextMenu
} from 'editor-ui';
Expand All @@ -46,13 +46,13 @@ import styles from './Editor.module.scss';
export interface EditorContainerProps {
context: HostContext;
host: VisualEditorHostClient;
request: JsonRpcRequestTransport;
request: JsonRpcRequestTransport;
store: EditorUIStore;
editorId: string;
}

const EditorContainer: React.FC<EditorContainerProps> = (props) => {

// register keyboard shortcuts and get handlers
const [cmState, cmDispatch] = useContext(CommandManagerContext);
const hotkeys = useMemo(() => { return commandHotkeys(cmState.commands); }, [cmState.commands]);
Expand All @@ -62,13 +62,14 @@ const EditorContainer: React.FC<EditorContainerProps> = (props) => {
useEffect(() => {
cmDispatch({ type: "ADD_COMMANDS", payload: editorHostCommands(props.host) });
}, []);

// one time creation of editorUIContext
const [uiContext] = useState(() => new HostEditorUIContext(props.context, props.host));

// setup state for theme
const [activeFluentTheme, setActiveFluentTheme] = useState(fluentTheme());
const applyTheme = useCallback((theme: EditorTheme) => {
console.log('applyTheme in EditorContainer', theme)
// set editor theme
setEditorTheme(theme);

Expand All @@ -85,7 +86,7 @@ const EditorContainer: React.FC<EditorContainerProps> = (props) => {
// ensure that keys we handle aren't propagated to vscode
const keyboardEventHandler = (handler: React.KeyboardEventHandler) => {
return (event: React.KeyboardEvent<HTMLElement>) => {

// call handler
handler(event);

Expand All @@ -99,31 +100,31 @@ const EditorContainer: React.FC<EditorContainerProps> = (props) => {
}
};
}

return (
<FluentProvider theme={activeFluentTheme}>
<div
className={styles.editorParent}
onKeyDown={keyboardEventHandler(handleKeyDown)}
<div
className={styles.editorParent}
onKeyDown={keyboardEventHandler(handleKeyDown)}
onKeyUp={keyboardEventHandler(handleKeyUp)}
>
<EditorToolbar editorId={props.editorId}/>
<Editor
id={props.editorId}
className={styles.editorFrame}
className={styles.editorFrame}
request={props.request}
uiContext={uiContext}
display={editorDisplay(props.host)}
onEditorInit={onEditorInit}
options={{
cannotEditUntitled: true,
defaultCellTypePython: true,
initialTheme: editorThemeFromVSCode()
initialTheme: editorThemeFromVSCode()
}}
/>
</div>
</FluentProvider>

);
}

Expand All @@ -133,6 +134,9 @@ function editorDisplay(host: VisualEditorHostClient) {
openURL(url: string) {
host.openURL(url);
},
getThemeData(name:string) {
return host.getThemeData(name)
},
navigateToXRef(file: string, xref: XRef) {
host.navigateToXRef(file, xref);
},
Expand All @@ -152,13 +156,13 @@ function editorDisplay(host: VisualEditorHostClient) {


class HostEditorUIContext implements EditorUIContext, ImageChangeSink {

constructor(
private readonly context: HostContext,
private readonly host: VisualEditorHostClient)
private readonly context: HostContext,
private readonly host: VisualEditorHostClient)
{
}

// check if we are the active tab
public isActiveTab(): boolean {
return true;
Expand Down Expand Up @@ -238,7 +242,7 @@ class HostEditorUIContext implements EditorUIContext, ImageChangeSink {
public async clipboardImage(): Promise<string | null> {
return null;
}

private resolvePath(path: string): string {
if (path.startsWith("/") && this.context.projectDir) {
return `${this.context.projectDir}/${path.slice(1)}`;
Expand Down
84 changes: 45 additions & 39 deletions apps/vscode-editor/src/sync.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,24 @@ import throttle from "lodash.throttle";

import { WebviewApi } from "vscode-webview";

import {
jsonRpcPostMessageRequestTransport,
jsonRpcPostMessageServer,
JsonRpcPostMessageTarget,
JsonRpcRequestTransport
import {
jsonRpcPostMessageRequestTransport,
jsonRpcPostMessageServer,
JsonRpcPostMessageTarget,
JsonRpcRequestTransport
} from "core";

import { windowJsonRpcPostMessageTarget } from "core-browser";

import {
VSC_VE_ApplyExternalEdit,
import {
VSC_VE_ApplyExternalEdit,
VSC_VE_PrefsChanged,
VSC_VE_ImageChanged,
VSC_VE_GetMarkdownFromState,
VSC_VE_GetSlideIndex,
VSC_VE_GetActiveBlockContext,
VSC_VE_SetBlockSelection,
VSC_VE_Init,
VSC_VE_Init,
VSC_VE_Focus,
VSC_VEH_FlushEditorUpdates,
VSC_VEH_SaveDocument,
Expand All @@ -47,14 +47,15 @@ import {
VSC_VEH_ReopenSourceMode,
VSC_VEH_OnEditorUpdated,
VSC_VEH_OnEditorStateChanged,
VSC_VEH_OnEditorReady,
VSC_VEH_OnEditorReady,
VSC_VEH_OpenURL,
VSC_VEH_GetThemeData,
VSC_VEH_NavigateToXRef,
VSC_VEH_NavigateToFile,
VSC_VEH_ResolveImageUris,
VSC_VEH_ResolveBase64Images,
VSCodeVisualEditor,
VSCodeVisualEditorHost,
VSCodeVisualEditor,
VSCodeVisualEditorHost,
EditorServer,
EditorServices,
XRef,
Expand All @@ -66,17 +67,17 @@ import {
CodeViewSelectionAction
} from "editor-types";

import {
editorJsonRpcServer,
editorJsonRpcServices
import {
editorJsonRpcServer,
editorJsonRpcServices
} from "editor-core";

import {
EditorOperations,
EditorTheme,
PandocWriterOptions,
StateChangeEvent,
UpdateEvent
import {
EditorOperations,
EditorTheme,
PandocWriterOptions,
StateChangeEvent,
UpdateEvent
} from "editor";

import { Command, EditorUIStore, readPrefsApi, t, updatePrefsApi } from "editor-ui";
Expand All @@ -98,9 +99,9 @@ export function visualEditorJsonRpcRequestTransport(vscode: WebviewApi<unknown>)

// interface to visual editor host (vs code extension)
export function visualEditorHostClient(
vscode: WebviewApi<unknown>,
vscode: WebviewApi<unknown>,
request: JsonRpcRequestTransport
) : VisualEditorHostClient {
): VisualEditorHostClient {
return {
vscode,
server: editorJsonRpcServer(request),
Expand All @@ -114,12 +115,12 @@ export interface ImageChangeSink {
}

export async function syncEditorToHost(
editor: EditorOperations,
editor: EditorOperations,
imageChange: ImageChangeSink,
host: VisualEditorHostClient,
store: EditorUIStore,
applyTheme: (theme: EditorTheme) => void
) {
) {

// get the current prefs
const readPrefs = () => readPrefsApi(store);
Expand All @@ -128,8 +129,8 @@ export async function syncEditorToHost(
const writerOptions = () => {
const prefs = readPrefs();
const options: PandocWriterOptions = {};
options.wrap = prefs.markdownWrap === "column"
? String(prefs.markdownWrapColumn)
options.wrap = prefs.markdownWrap === "column"
? String(prefs.markdownWrapColumn)
: prefs.markdownWrap;
options.references = {
location: prefs.markdownReferences,
Expand Down Expand Up @@ -162,7 +163,7 @@ export async function syncEditorToHost(
.finally(() => {
// done
});
}, kThrottleDelayMs, { leading: false, trailing: true});
}, kThrottleDelayMs, { leading: false, trailing: true });

// setup communication channel for host
visualEditorHostServer(host.vscode, {
Expand All @@ -178,11 +179,11 @@ export async function syncEditorToHost(

// focus editor
editor.focus(navigation);

// visual editor => text editor (just send the state, host will call back for markdown)
editor.subscribe(UpdateEvent, () => host.onEditorUpdated(editor.getStateJson()));
editor.subscribe(StateChangeEvent, () => host.onEditorStateChanged(editor.getEditorSourcePos()));
editor.subscribe(StateChangeEvent, () => host.onEditorStateChanged(editor.getEditorSourcePos()));


// return canonical markdown
return result.canonical;
Expand All @@ -191,18 +192,19 @@ export async function syncEditorToHost(
return null;

}
} catch(error) {
} catch (error) {
editor.onLoadFailed(error);
return null;
}

},

async prefsChanged(prefs: Prefs): Promise<void> {
console.log('prefs changed!!!')

// save existing writer options (for comparison)
const prevOptions = writerOptions();

// update prefs
await updatePrefsApi(store, prefs);

Expand All @@ -212,10 +214,10 @@ export async function syncEditorToHost(
// if markdown writing options changed then force a refresh
const options = writerOptions();
if (prevOptions.wrap !== options.wrap ||
prevOptions.references?.location !== options.references?.location ||
prevOptions.references?.prefix !== options.references?.prefix) {
prevOptions.references?.location !== options.references?.location ||
prevOptions.references?.prefix !== options.references?.prefix) {
await host.onEditorUpdated(editor.getStateJson());
await host.flushEditorUpdates();
await host.flushEditorUpdates();
}
},

Expand Down Expand Up @@ -256,7 +258,7 @@ export async function syncEditorToHost(
})

// let the host know we are ready
await host.onEditorReady();
await host.onEditorReady();
}

export enum EditorHostCommands {
Expand Down Expand Up @@ -340,7 +342,7 @@ function visualEditorHostServer(vscode: WebviewApi<unknown>, editor: VSCodeVisua
}


function editorJsonRpcContainer(request: JsonRpcRequestTransport) : VSCodeVisualEditorHost {
function editorJsonRpcContainer(request: JsonRpcRequestTransport): VSCodeVisualEditorHost {
return {
getHostContext: () => request(VSC_VEH_GetHostContext, []),
reopenSourceMode: () => request(VSC_VEH_ReopenSourceMode, []),
Expand All @@ -352,11 +354,15 @@ function editorJsonRpcContainer(request: JsonRpcRequestTransport) : VSCodeVisual
renderDocument: () => request(VSC_VEH_RenderDocument, []),
editorResourceUri: (path: string) => request(VSC_VEH_EditorResourceUri, [path]),
openURL: (url: string) => request(VSC_VEH_OpenURL, [url]),
getThemeData: async (name: string) => {
const dog = await request(VSC_VEH_GetThemeData, [name])
// console.log('sync.ts ASHHDAHJASDJASDJ dog', name, dog)
return dog
},
navigateToXRef: (file: string, xref: XRef) => request(VSC_VEH_NavigateToXRef, [file, xref]),
navigateToFile: (file: string) => request(VSC_VEH_NavigateToFile, [file]),
resolveImageUris: (uris: string[]) => request(VSC_VEH_ResolveImageUris, [uris]),
resolveBase64Images: (base64Images: string[]) => request(VSC_VEH_ResolveBase64Images, [base64Images]),
selectImage: () => request(VSC_VEH_SelectImage, [])
};
}

Loading