@witchcraft/editor 0.0.1

package/src/runtime/pm/features/CodeBlock/commands/codeBlockEnterOrSplit.ts

@@ -0,0 +1,55 @@
+import type { Command } from "@tiptap/core"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		codeBlockEnterOrSplit: {
+			codeBlockEnterOrSplit: (pos?: number) => ReturnType
+		}
+	}
+}
+
+export const codeBlockEnterOrSplit = (
+	codeBlockType: string
+) => (pos?: number): Command =>
+	({ state, chain, tr }) => {
+		const sel = state.selection.map(tr.doc, tr.mapping)
+		const { $from, $to } = sel
+		let { empty, from } = sel
+		if (pos !== undefined) {
+			from = pos
+			empty = true
+		}
+
+		if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+			return false
+		}
+
+		const isAtEnd = empty && from === $from.end()
+		const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n")
+
+		if (isAtEnd && endsWithDoubleNewline) {
+			return chain()
+
+				.command(({ tr, dispatch }) => {
+					// Delete the two empty lines at the end
+					if (dispatch) {
+						tr.delete(from - 1, $from.pos)
+					}
+					return true
+				})
+				.splitItem()
+				.run()
+		}
+
+		return chain()
+			.command(({ commands }) => {
+				if (!empty) {
+					return commands.deleteSelection()
+				}
+				return true
+			})
+			.newlineInCode()
+			.run()
+	}

package/src/runtime/pm/features/CodeBlock/commands/codeBlockIndent.ts

@@ -0,0 +1,67 @@
+import type { Command } from "@tiptap/core"
+import { TextSelection } from "@tiptap/pm/state"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		codeBlockIndent: {
+			codeBlockIndent: () => ReturnType
+		}
+	}
+}
+
+export const codeBlockIndent = (
+	codeBlockType: string
+) => (): Command =>
+	({ state, tr, dispatch }) => {
+		const { $from, $to, empty, from, to } = state.selection.map(tr.doc, tr.mapping)
+
+		if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+			return false
+		}
+		if (!dispatch) return true
+
+		if (empty) {
+			tr.insertText("\t")
+			return true
+		}
+
+		const textContent = $from.parent.textContent
+		const nodeStart = $from.start()
+		let start = from - nodeStart
+		let end = to - nodeStart
+
+		// shift the start/ends to capture the start/end of the lines
+		for (let i = start; i > 0; i--) {
+			if (textContent[i - 1] === "\n") {
+				break
+			}
+			start--
+		}
+
+		for (let j = end; j < textContent.length; j++) {
+			if (textContent[j] === "\n") {
+				break
+			}
+			end++
+		}
+
+		const blockSelection = textContent.slice(start, end)
+		const lines = blockSelection.split("\n")
+		// count the number of tabs we will be adding
+		// so we know how much to move the end of the selection
+		let tabCount = 0
+
+		for (let i = 0; i < lines.length; i++) {
+			lines[i] = `\t${lines[i]}`
+			tabCount++
+		}
+		const content = lines.join("\n")
+		tr.insertText(content, nodeStart + start, nodeStart + end)
+
+		// +1 for the start tab, this is already included in tabCount
+		tr.setSelection(TextSelection.create(tr.doc, from + 1, to + tabCount))
+
+		return true
+	}

package/src/runtime/pm/features/CodeBlock/commands/codeBlockUnindent.ts

@@ -0,0 +1,74 @@
+import type { Command } from "@tiptap/core"
+import { TextSelection } from "@tiptap/pm/state"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		codeBlockUnindent: {
+			codeBlockUnindent: () => ReturnType
+		}
+	}
+}
+
+export const codeBlockUnindent = (
+	codeBlockType: string
+) => (): Command =>
+	({ state, tr, dispatch }) => {
+		const { $from, $to, from, to } = state.selection.map(tr.doc, tr.mapping)
+
+		if ($from.parent.type.name !== codeBlockType || $to.parent.type.name !== codeBlockType || $from.parent !== $to.parent) {
+			return false
+		}
+		if (!dispatch) return true
+
+		const textContent = $from.parent.textContent
+		const nodeStart = $from.start()
+		let start = from - nodeStart
+		let end = to - nodeStart
+
+		const lastCharIsNewline = textContent[end - 1] === "\n"
+		const nextCharIsTab = textContent[end] === "\t"
+
+		// shift the start/ends to capture the start/end of the lines
+		for (let i = start; i > 0; i--) {
+			if (textContent[i - 1] === "\n") {
+				break
+			}
+			start--
+		}
+
+		for (let j = end; j < textContent.length; j++) {
+			if (textContent[j] === "\n") {
+				break
+			}
+			end++
+		}
+
+		const blockSelection = textContent.slice(start, end)
+		const lines = blockSelection.split("\n")
+		let tabCount = 0
+		let firstLineHadTab = false
+		for (let i = 0; i < lines.length; i++) {
+			if (lines[i].startsWith("\t")) {
+				lines[i] = lines[i].slice(1)
+				tabCount++
+				if (i === 0) {
+					firstLineHadTab = true
+				}
+			}
+		}
+		const content = lines.join("\n")
+		tr.insertText(content, nodeStart + start, nodeStart + end)
+
+		tr.setSelection(TextSelection.create(
+			tr.doc,
+			from - (firstLineHadTab ? 1 : 0),
+			// there's a weird bug? when the cursor ends at a newline (and is technically on that line and block selecting it) and the next char is a tab
+			// where you can't keep unindenting the last line
+			// this grows the selection to workaround it
+			to - tabCount + (lastCharIsNewline && nextCharIsTab ? 1 : 0)
+		))
+
+		return true
+	}

package/src/runtime/pm/features/CodeBlock/commands/focusCodeBlockLanguage.ts

@@ -0,0 +1,44 @@
+import type { Command, Dispatch } from "@tiptap/core"
+
+import { debugNode } from "../../../utils/internal/debugNode.js"
+
+declare module "@tiptap/core" {
+
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	interface Commands<ReturnType> {
+		focusCodeBlockLanguage: {
+			focusCodeBlockLanguage: (dir: "up" | "down") => ReturnType
+		}
+	}
+}
+
+function focusInput(domNode: Node, langPickerClass: string, dispatch: Dispatch): boolean {
+	if (domNode instanceof HTMLElement) {
+		const langPickerEl = domNode.querySelector(`.${langPickerClass}`)
+		if (langPickerEl instanceof HTMLElement) {
+			if (dispatch) {
+				langPickerEl.focus()
+			}
+			return true
+		}
+	}
+	return false
+}
+
+export const focusCodeBlockLanguage = (
+	codeBlockType: string,
+	langPickerClass: string = "lang-picker-input"
+) =>
+	(): Command =>
+		({ state, tr, view, dispatch }) => {
+			const { from, empty } = state.selection.map(tr.doc, tr.mapping)
+			if (!empty) { return false }
+			const $node = tr.doc.resolve(from)
+			debugNode($node.node())
+			const isCodeBlock = $node.node()?.type.name === codeBlockType
+			if (isCodeBlock) {
+				const domNode = view.domAtPos($node.start(-1)).node
+				return focusInput(domNode, langPickerClass, dispatch)
+			}
+			return false
+		}

package/src/runtime/pm/features/CodeBlock/components/CodeBlockView.vue

@@ -0,0 +1,126 @@
+<template>
+<node-view-wrapper
+	:class="`
+		border
+		border-[var(--pmCodeBlockBgColor)]
+		code-block
+		bg-[var(--pmCodeBlockBgColor)]
+		rounded-sm
+	`"
+	v-extract-root-el="(el:any) => codeBlockEl = el"
+>
+	<!-- dark class is not added directly to style this because we don't want to style the input, it should match the app theme instead -->
+	<div
+		contenteditable="false"
+		:class="`
+			lang-picker
+			rem-[0.7]
+			${codeBlockThemeIsDark
+				? `bg-neutral-600`
+				: `bg-neutral-400`
+		}
+		`"
+		ref="codeBlockLangPickerEl"
+	>
+		<!-- and here we only style everything but the suggestions so the input matches the code block background -->
+		<!-- @vue-expect-error -->
+		<WSimpleInput
+			:border="false"
+			wrapper-class="lang-picker-input flex-nowrap z-10"
+			:inner-wrapper-class="`
+				${codeBlockThemeIsDark
+					? `[&>*:not(.suggestions)]:text-neutral-300`
+					: `[&>*:not(.suggestions)]:text-neutral-700`
+			}
+			`"
+			suggestions-class="max-h-[200px] overflow-y-auto"
+			:suggestions="keys(langsInfo.aliases)"
+			:restrict-to-suggestions="true"
+			:aria-label="`Language:`"
+			:model-value="lang"
+			@blur="lang=lang"
+			@focus="savePosition"
+			@submit="focusCodeBlock"
+		/>
+	</div>
+
+	<!-- @vue-expect-error -->
+	<node-view-content
+		:class="twMerge(`
+			hljs
+			py-1
+			px-2
+			${codeBlockThemeIsDark ? `dark` : ``}
+		`,
+			node.attrs.language ? `language-${node.attrs.language}`: undefined
+		)"
+		as="pre"
+		:language="node.attrs.language"
+		:loading="node.attrs.loading"
+	/>
+</node-view-wrapper>
+</template>
+
+<script setup lang="ts">
+import { keys } from "@alanscodelog/utils/keys"
+import type { Selection } from "@tiptap/pm/state"
+import { TextSelection } from "@tiptap/pm/state"
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3"
+import WSimpleInput from "@witchcraft/ui/components/LibSimpleInput"
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl"
+import { twMerge } from "tailwind-merge"
+import { inject, ref, watch } from "vue"
+
+import { codeBlockThemeIsDarkInjectionKey, langsInfoInjectionKey } from "../types.js"
+
+const langsInfo = inject(langsInfoInjectionKey, ref({ languages: {}, aliases: {} }))
+
+const codeBlockThemeIsDark = inject(codeBlockThemeIsDarkInjectionKey, ref(false))
+
+const props = defineProps(nodeViewProps)
+const lang = ref(props.node.attrs.language ?? "")
+const codeBlockEl = ref<HTMLElement | null>(null)
+watch(() => props.node.attrs.language, val => {
+	lang.value = val
+})
+
+let savedPos: Selection | undefined
+function focusCodeBlock(newVal: string): void {
+	if (!codeBlockEl.value) return
+	// const pos = props.getPos()
+	props.editor.view.focus()
+	props.editor.commands.command(({ tr, dispatch }) => {
+		const thisNodePos = props.editor.view.posAtDOM(codeBlockEl.value!, 0)
+		if (thisNodePos < 0) return false
+		const $node = tr.doc.resolve(thisNodePos + props.node.nodeSize - 1)
+		if (savedPos) {
+			tr.setSelection(savedPos)
+		} else {
+			const sel = TextSelection.findFrom($node, -1, true)
+			if (!sel) return false
+			tr.setSelection(sel)
+		}
+		tr.setNodeMarkup($node.start(), undefined, {
+			...props.node.attrs,
+			language: newVal,
+			loading: true
+		})
+		tr.scrollIntoView()
+		if (dispatch) dispatch(tr)
+		savedPos = undefined
+		return true
+	})
+	codeBlockEl.value.querySelector("code")?.focus()
+}
+
+function savePosition(): void {
+	if (!codeBlockEl.value) return
+	const nodePos = props.editor.view.posAtDOM(codeBlockEl.value, 0)
+	const $node = props.editor.state.doc.resolve(nodePos)
+
+	savedPos = props.editor.state.selection
+	if (savedPos.from < $node.start() || savedPos.to > $node.end()) {
+		savedPos = undefined
+	}
+}
+</script>

package/src/runtime/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting.ts

@@ -0,0 +1,185 @@
+import { keys } from "@alanscodelog/utils/keys"
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn"
+import type { Editor, Editor as PmEditor } from "@tiptap/core"
+import type { Transaction } from "@tiptap/pm/state"
+import type { createLowlight } from "lowlight"
+import { provide, type Ref, ref, type ShallowRef, watch } from "vue"
+
+import { highlightJsLanaguages, type HighlightJsLanguageInfo } from "../highlightJsInfo.js"
+import { langsInfoInjectionKey } from "../types.js"
+
+let langModulesDirectory = "../../../../../../../../highlight.js/es/languages"
+// see https://github.com/vitejs/vite/issues/14102
+// doing it directly for now to avoid build issues
+// in the future we might be able to import diretly
+let langModules = import.meta.glob("../../../../../../../../highlight.js/es/languages/*.js", { import: "default" })
+
+const fallback = import.meta.glob("../../../../../../node_modules/highlight.js/es/languages/*.js", { import: "default" })
+if (keys(langModules).length === 0 && keys(fallback).length !== 0) {
+	langModules = fallback
+	langModulesDirectory = "../../../../../../node_modules/highlight.js/es/languages"
+	// eslint-disable-next-line no-console
+	console.warn("Using fallback highlight.js languages locations. This should not be happening unless developing the library locally from it's playground using the linked module.")
+}
+if (keys(langModules).length === 0) {
+	// eslint-disable-next-line no-console
+	console.warn("Could not find any highlight.js languages. This is probably an issue with the editor package. Please report it.")
+}
+
+function defaultOnError(e: any): void {
+	// eslint-disable-next-line no-console
+	console.log(e)
+}
+/**
+	* Listens for transactions and scans the document, dynamically loading the used highlight.js language themes.
+	*
+	* Automatically provides them using {@link langsInfoInjectionKey}.
+	*
+	* Allows passing additional themes via the additionalThemes prop.
+	*
+	* You should not need to use them directly, but returns the functions used to load, lazy load, and query the editor, and also the provided langsInfo.
+	*
+	*/
+export function useAsyncCodeBlockHighlighting(
+	{
+		lowlightInstance,
+		editor: editorRef,
+		onError = defaultOnError,
+		debug = false
+	}: {
+		lowlightInstance: ReturnType<typeof createLowlight>
+		editor: ShallowRef<Editor | undefined>
+		onError?: ((e: any) => void)
+		debug?: boolean
+	}): {
+	loadLang: (lang: string) => Promise<string | Error>
+	lazyLoadCodeBlockLangs: ({ editor }: { editor: PmEditor }) => Promise<void>
+	getLangListFromEditor: (editor: PmEditor) => string[]
+	/** All importable highlight.js languages. */
+	langsInfo: Ref<HighlightJsLanguageInfo>
+} {
+	const allLangs = ref<HighlightJsLanguageInfo>(highlightJsLanaguages)
+	if (debug) {
+		// eslint-disable-next-line no-console
+		console.log({ langModulesDirectory, langModules, allLangs })
+	}
+	provide(langsInfoInjectionKey, allLangs)
+
+	/**
+	 * Load a language. Can return an error.
+	 *
+	 * Does not throw because even when using promise.allSettled it trigger's chrome's uncaught exception and is very annoying.
+	 */
+	async function loadLang(lang: string): Promise<string | Error> {
+		if (lowlightInstance.registered(lang)) {
+			// eslint-disable-next-line no-console
+			if (debug) { console.log(`Already registered: ${lang}`) }
+			const error = new Error(`Already registered: ${lang}`)
+			;(error as any).code = "ALREADY_REGISTERED"
+			return error
+		}
+		if (allLangs.value.aliases[lang] === undefined) {
+			// eslint-disable-next-line no-console
+			if (debug) { console.error(`Unknown language or alias: ${lang}`) }
+
+			return new Error(`Unknown language or alias: ${lang}`)
+		}
+		const fullName = allLangs.value.aliases[lang]
+		const langLoadingKey = `${langModulesDirectory}/${fullName}.js`
+		const func = langModules[langLoadingKey]
+		if (func === undefined) {
+			return new Error(`Could not find language: ${langLoadingKey} in ${langModulesDirectory}. Valid paths are:\n${keys(langModules).join(",\n")}`)
+		}
+		const hljs = await func()
+		lowlightInstance.register(lang, hljs as any)
+		return lang
+	}
+
+	function getLangListFromEditor(editor: PmEditor): string[] {
+		const langs: string[] = []
+		const doc = editor.state.doc
+		editor.state.doc.nodesBetween(0, doc.nodeSize - 2, (node, pos) => {
+			if (node.type?.name === "codeBlock") {
+				const lang = node.attrs?.language
+				const loading = node.attrs.loading
+				if (debug) {
+					// eslint-disable-next-line no-console
+					console.log(`Looked at node at pos ${pos} (lang: ${lang}, loading: ${loading}).`)
+				}
+				if (lang && loading) {
+					// eslint-disable-next-line no-console
+					if (debug) { console.log(`Found node at pos ${pos}.`) }
+					pushIfNotIn(langs, [lang])
+				}
+				return false
+			}
+			return true
+		})
+		return langs
+	}
+
+	async function lazyLoadCodeBlocks({ editor, transaction }: { editor: PmEditor, transaction?: Transaction }): Promise<void> {
+		if (debug) {
+			// eslint-disable-next-line no-console
+			console.log(`lazyLoadCodeBlocks called, docChanged: ${transaction?.docChanged}.`)
+		}
+		if (!transaction?.docChanged) return
+		const tr = editor.state.tr
+		const langs = getLangListFromEditor(editor)
+		const loadableLangs = (await Promise.allSettled(langs.map(loadLang)))
+			.filter(_ => {
+				if (_.status === "rejected") {
+					onError(_.reason)
+				}
+				return _.status === "fulfilled" && !((_ as any).value instanceof Error)
+			})
+			.map(_ => (_ as any).value)
+		if (debug) {
+			// eslint-disable-next-line no-console
+			console.log(`Found ${loadableLangs.length} loadable languages. \n\t${loadableLangs.join("\n\t")}`)
+		}
+
+		editor.state.doc.nodesBetween(0, editor.state.doc.resolve(0).end(), (node, pos) => {
+			if (node.type?.name === "codeBlock") {
+				const langAttr = node.attrs?.language
+				const loading = node.attrs.loading
+				if (langAttr && loading && loadableLangs.includes(langAttr)) {
+					// eslint-disable-next-line no-console
+					if (debug) { console.log(`Set node at pos ${pos} as loaded.`) }
+					tr.setNodeMarkup(pos, undefined, {
+						...node.attrs,
+						language: langAttr,
+						loading: false
+					})
+				}
+				return false
+			}
+			return true
+		})
+		if (debug) {
+			// eslint-disable-next-line no-console
+			console.log(`tr.docChanged: ${tr.docChanged}.`)
+		}
+		if (tr.docChanged) {
+			editor.view.dispatch(tr)
+		}
+	}
+
+	watch(editorRef, () => {
+		if (editorRef.value) {
+			editorRef.value.on("transaction", lazyLoadCodeBlocks)
+		} else {
+			editorRef.value!.off("transaction", lazyLoadCodeBlocks)
+		}
+	})
+	if (editorRef.value) {
+		editorRef.value.on("transaction", lazyLoadCodeBlocks)
+	}
+
+	return {
+		loadLang,
+		lazyLoadCodeBlockLangs: lazyLoadCodeBlocks,
+		getLangListFromEditor,
+		langsInfo: allLangs
+	}
+}

package/src/runtime/pm/features/CodeBlock/composables/useHighlightJsTheme.ts

@@ -0,0 +1,150 @@
+import { crop } from "@alanscodelog/utils/crop"
+import { dedupe } from "@alanscodelog/utils/dedupe"
+import { indent } from "@alanscodelog/utils/indent"
+import { isWhitespace } from "@alanscodelog/utils/isWhitespace"
+import { keys } from "@alanscodelog/utils/keys"
+import { computed, type Ref, ref, watch } from "vue"
+
+// careful, this needs to point to the highlight.js package beside the package (in the node_modules above it), not in the package or it won't work when used normally (but will when linked in the playground), it also needs to be the shortest path, otherwise our key won't work
+let themeModulePath = "../../../../../../../../highlight.js/styles/"
+
+let themeModules = import.meta.glob("../../../../../../../../highlight.js/styles/*.css", {
+	query: "?raw",
+	import: "default"
+})
+// fallback for the node_modules inside the package for when using "../src/module" in the playground
+const fallback = import.meta.glob("../../../../../../node_modules/highlight.js/styles/*.css", {
+	query: "?raw",
+	import: "default"
+})
+
+if (keys(themeModules).length === 0 && keys(fallback).length !== 0) {
+	themeModules = fallback
+	themeModulePath = "../../../../../../node_modules/highlight.js/styles/"
+	// eslint-disable-next-line no-console
+	console.warn("Using fallback highlight.js themes locations. This should not be happening unless developing the library locally from it's playground using the linked module.")
+}
+if (keys(themeModules).length === 0) {
+	// eslint-disable-next-line no-console
+	console.warn("Could not find any highlight.js themes. This is probably an issue with the editor package. Please report it.")
+}
+
+const themeModuleNames = dedupe(keys(themeModules)
+	.map(k => {
+		const end = k.endsWith(".min.css") ? ".min.css" : ".css"
+		return k.slice((`${themeModulePath}`).length, end.length * -1)
+	}))
+
+/**
+ * Dynamically loads and creates the css for a given theme.
+ *
+ * It's result, themeCss should be added as a head tag (e.g. using useHead or teleporting a `<component :is="'style'">` to the head).
+ *
+ * By default it's an array of one item so you can more easily pass it to {@link unhead https://unhead.unjs.io/}'s useHead.
+ *
+ * By default, it will only apply the theme to the code blocks in the prosemirror editor. This is done via css nesting so might not work in older browsers.
+ *
+ * While additionalThemes can be provided, it is dangerous to inject them from user input.
+ *
+ * Instead, you can create a theme that only uses css variables, then allow the user to customize the css variables instead.
+ *
+ * Dark theme detection is just done by checking if the theme name contains "dark".
+ *
+ * You can provide different background colors for dark and light themes by providing a `darkLightBgs` and it will automatically apply them.
+ */
+
+export function useHighlightJsTheme({
+	defaultTheme = "github-dark",
+	darkLightBgs,
+	additionalThemes,
+	classes = ".ProseMirror",
+	debug = false
+}: {
+	defaultTheme?: string
+	darkLightBgs?: Ref<{
+		dark: string
+		light: string
+	}>
+	/** Additional class to wrap the loaded css in. */
+	classes?: string
+	additionalThemes?: Ref<Record<string, string>>
+	debug?: boolean
+} = {}) {
+	if (debug) {
+		// eslint-disable-next-line no-console
+		console.log({ themeModules, themeModuleNames })
+	}
+	const theme = ref(defaultTheme)
+	const knownThemes = ref(themeModuleNames)
+	const loadedThemes = ref<Record<string, string>>({})
+
+	if (additionalThemes) {
+		watch(additionalThemes, newThemes => {
+			if (debug) {
+				// eslint-disable-next-line no-console
+				console.log("Adding additional themes:", additionalThemes)
+			}
+			for (const [themeName, themeCss] of Object.entries(newThemes)) {
+				loadedThemes.value[themeName] = themeCss
+			}
+		})
+	}
+
+	const rawThemeCss = ref<string>("")
+	async function loadTheme(themeName: string): Promise<undefined | Error> {
+		if (loadedThemes.value[themeName]) return
+		const themeLoadingKey = `${themeModulePath}${themeName}.css`
+		const func = themeModules[themeLoadingKey]
+		if (func === undefined) {
+			throw new Error(`Could not find theme: ${themeLoadingKey} in ${themeModulePath}. Valid paths are:\n${keys(themeModules).join(",\n")}`)
+		}
+		const themeStyle = await func()
+		if (debug) {
+			// eslint-disable-next-line no-console
+			console.log("Loading theme:", { themeName, themeLoadingKey, themeStyle })
+		}
+		rawThemeCss.value = themeStyle as any
+		return undefined
+	}
+
+	void loadTheme(theme.value)
+	const isDark = computed(() => theme.value.includes("dark"))
+	const backgroundColor = computed(() => {
+		const colors = {
+			dark: "#1e1e1e",
+			light: "#ffffff",
+			...(darkLightBgs?.value ?? {})
+		}
+		return colors[isDark.value ? "dark" : "light"]
+	})
+	const themeCss = computed(() => {
+		const innerCss = `
+			${indent(rawThemeCss.value, 3)}
+			.hljs {
+				background-color: ${backgroundColor.value};
+			}
+		`
+		// if we run into issues with known browsers, we can
+		// replace ($|\s|,)+(.*?.hljs\S*) and wrap each selector
+		// but this seems very fragile
+		return [
+			isWhitespace(classes)
+				? innerCss
+				: crop`
+			${classes} {
+				${indent(innerCss, 1)}
+			}
+		`
+		]
+	})
+
+	return {
+		theme,
+		knownThemes,
+		loadTheme,
+		isDark,
+		backgroundColor,
+		themeCss,
+		rawThemeCss
+	}
+}