@witchcraft/editor 0.0.1

package/package.json

@@ -0,0 +1,238 @@
+{
+	"name": "@witchcraft/editor",
+	"description": "Block base prosemirror editor with partial/full editable document embeds, infinite embeds, and document uploads.",
+	"version": "0.0.1",
+	"main": "./dist/runtime/main.lib.js",
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/runtime/main.lib.d.ts",
+			"import": "./dist/runtime/main.lib.js"
+		},
+		"./*": {
+			"types": "./dist/runtime/*.d.ts",
+			"import": "./dist/runtime/*.js"
+		},
+		"./assets/*": {
+			"import": "./dist/runtime/assets/*"
+		},
+		"./components/*": {
+			"types": "./dist/runtime/components/*/*.vue.d.ts",
+			"import": "./dist/runtime/components/*/*.vue"
+		},
+		"./composables/*": {
+			"types": "./dist/runtime/composables/*.d.ts",
+			"import": "./dist/runtime/composables/*.js"
+		},
+		"./pm/features/Blocks/components/*": {
+			"types": "./dist/runtime/pm/features/Blocks/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/Blocks/components/*.vue"
+		},
+		"./pm/features/CodeBlock/components/*": {
+			"types": "./dist/runtime/pm/features/CodeBlock/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/CodeBlock/components/*.vue"
+		},
+		"./pm/features/EmbeddedDocument/components/*": {
+			"types": "./dist/runtime/pm/features/EmbeddedDocument/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/EmbeddedDocument/components/*.vue"
+		},
+		"./pm/features/FileLoader/components/*": {
+			"types": "./dist/runtime/pm/features/FileLoader/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/FileLoader/components/*.vue"
+		},
+		"./pm/features/Iframe/components/*": {
+			"types": "./dist/runtime/pm/features/Iframe/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/Iframe/components/*.vue"
+		},
+		"./pm/features/Menus/components/*": {
+			"types": "./dist/runtime/pm/features/Menus/components/*.vue.d.ts",
+			"import": "./dist/runtime/pm/features/Menus/components/*.vue"
+		},
+		"./pm/*": {
+			"types": "./dist/runtime/pm/*.d.ts",
+			"import": "./dist/runtime/pm/*.js"
+		},
+		"./nuxt": {
+			"import": "./dist/module.mjs"
+		},
+		"./base.css": "./src/runtime/assets/base.css",
+		"./utils.css": "./src/runtime/assets/utils.css",
+		"./@types/*": "./@types/*"
+	},
+	"unbuild": {
+		"failOnWarn": false
+	},
+	"scripts": {
+		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
+		"prepare": "husky && pnpm build",
+		"build:only": "nuxt-module-build build",
+		"build": "pnpm gen:highlightJsLangInfo && nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
+		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+		"dev": "nuxi dev playground",
+		"//dev:vite": "The module needs to be build, not stubbed, for vite's dev to work.",
+		"dev:vite": "concurrently \"pnpm build\" \"vite --mode development --config vite.config.ts\"",
+		"lint:eslint": "eslint \"{src,tests,playground/app}/**/*.{cjs,js,ts,vue}\" \"*.{cjs,js,ts}\" --max-warnings=0 --report-unused-disable-directives",
+		"lint:commits": "commitlint --from $(git rev-list --max-parents=0 HEAD) --to HEAD --verbose",
+		"lint:imports": "echo not working madge --circular --extensions ts ./src",
+		"lint": "pnpm lint:eslint && pnpm lint:types && pnpm lint:imports",
+		"lint:types": "vue-tsc --noEmit",
+		"test": "vitest",
+		"test:watch": "vitest --watch",
+		"doc": "typedoc --options typedoc.config.js",
+		"doc:watch": "onchange -i \"src/**/*.ts\" \"typedoc.config.cjs\" -- pnpm doc",
+		"doc:serve": "http-server docs --port=5001",
+		"doc:dev": "concurrently \"pnpm doc:watch\" \"pnpm doc:serve\"",
+		"doc:check-invalid": "typedoc --options typedoc.config.cjs --listInvalidSymbolLinks",
+		"//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
+		"actions:debug": "act -r -v -j release",
+		"gen:highlightJsLangInfo": "node src/runtime/pm/features/CodeBlock/build/generateHighlightJsInfo.js"
+	},
+	"pnpm": {
+		"overrides": {
+			"@tiptap/pm": "^3.4.2",
+			"@tiptap/vue-3": "^3.4.2",
+			"@tiptap/core": "^3.4.2"
+		}
+	},
+	"peerDependencies": {
+		"@tiptap/core": "^3.4.2",
+		"@tiptap/extension-blockquote": "^3.4.2",
+		"@tiptap/extension-bold": "^3.4.2",
+		"@tiptap/extension-code": "^3.4.2",
+		"@tiptap/extension-code-block": "^3.4.2",
+		"@tiptap/extension-code-block-lowlight": "^3.4.2",
+		"@tiptap/extension-dropcursor": "^3.4.2",
+		"@tiptap/extension-gapcursor": "^3.4.2",
+		"@tiptap/extension-hard-break": "^3.4.2",
+		"@tiptap/extension-heading": "^3.4.2",
+		"@tiptap/extension-highlight": "^3.4.2",
+		"@tiptap/extension-history": "^3.4.2",
+		"@tiptap/extension-image": "^3.4.2",
+		"@tiptap/extension-italic": "^3.4.2",
+		"@tiptap/extension-link": "^3.4.2",
+		"@tiptap/extension-paragraph": "^3.4.2",
+		"@tiptap/extension-strike": "^3.4.2",
+		"@tiptap/extension-subscript": "^3.4.2",
+		"@tiptap/extension-superscript": "^3.4.2",
+		"@tiptap/extension-table": "^3.4.2",
+		"@tiptap/extension-table-cell": "^3.4.2",
+		"@tiptap/extension-table-header": "^3.4.2",
+		"@tiptap/extension-table-row": "^3.4.2",
+		"@tiptap/extension-text": "^3.4.2",
+		"@tiptap/extension-underline": "^3.4.2",
+		"@tiptap/pm": "^3.4.2",
+		"@tiptap/vue-3": "^3.4.2",
+		"@witchcraft/ui": "^0.2.1",
+		"tailwindcss": "^4.0.0",
+		"vue": "^3.2.47"
+	},
+	"peerDependenciesMeta": {
+		"@witchcraft/ui": {
+			"optional": false
+		},
+		"tailwindcss": {
+			"optional": false
+		},
+		"vue": {
+			"optional": false
+		}
+	},
+	"dependencies": {
+		"@alanscodelog/eslint-config": "^6.3.1",
+		"@alanscodelog/utils": "^6.0.1",
+		"@commitlint/cli": "^19.8.1",
+		"@fortawesome/fontawesome-svg-core": "^7.0.1",
+		"@fortawesome/free-brands-svg-icons": "^7.0.1",
+		"@fortawesome/free-regular-svg-icons": "^7.0.1",
+		"@fortawesome/free-solid-svg-icons": "^7.0.1",
+		"@nuxt/eslint-config": "^1.9.0",
+		"@witchcraft/nuxt-utils": "^0.3.2",
+		"@witchcraft/ui": "^0.2.1",
+		"colord": "^2.9.3",
+		"defu": "^6.1.4",
+		"highlight.js": "^11.11.1",
+		"lowlight": "^3.3.0",
+		"metamorphosis": "^0.6.1",
+		"mime": "^4.1.0",
+		"nanoid": "^5.1.5",
+		"reka-ui": "^2.5.0",
+		"tailwind-merge": "^3.3.1",
+		"unplugin-vue-components": "^29.0.0",
+		"uuid": "^13.0.0",
+		"y-prosemirror": "^1.3.7",
+		"yjs": "^13.6.27"
+	},
+	"devDependencies": {
+		"@alanscodelog/commitlint-config": "^3.1.2",
+		"@alanscodelog/semantic-release-config": "^5.0.4",
+		"@alanscodelog/tsconfigs": "^6.2.0",
+		"@alanscodelog/vite-config": "^0.0.6",
+		"@iconify/json": "^2.2.384",
+		"@nuxt/kit": "^4.1.2",
+		"@nuxt/module-builder": "^1.0.2",
+		"@nuxt/schema": "^4.1.2",
+		"@nuxt/types": "^2.18.1",
+		"@playwright/test": "=1.54.0",
+		"@rollup/plugin-dynamic-import-vars": "^2.1.5",
+		"@tailwindcss/cli": "^4.1.13",
+		"@tailwindcss/vite": "^4.1.13",
+		"@testing-library/vue": "^8.1.0",
+		"@types/node": "^24.4.0",
+		"@vitejs/plugin-vue": "^6.0.1",
+		"@vitest/browser": "^3.0.0",
+		"@vitest/coverage-v8": "^3.0.0",
+		"@witchcraft/ui": "^0.2.1",
+		"concurrently": "^9.2.1",
+		"cross-env": "^10.0.0",
+		"eslint": "^9.35.0",
+		"fast-glob": "^3.3.3",
+		"http-server": "^14.1.1",
+		"husky": "^9.1.7",
+		"madge": "^8.0.0",
+		"nuxt": "^4.1.2",
+		"onchange": "^7.1.0",
+		"playwright": "=1.54.0",
+		"playwright-core": "=1.54.0",
+		"prosemirror-test-builder": "^1.1.1",
+		"radix-vue": "^1.9.17",
+		"semantic-release": "^24.2.8",
+		"tailwindcss": "^4.1.13",
+		"typedoc": "^0.28.13",
+		"typescript": "~5.9.2",
+		"unplugin-icons": "^22.3.0",
+		"vite": "^7.1.5",
+		"vitest": "^3.0.0",
+		"vue": "^3.5.21",
+		"vue-component-type-helpers": "^3.0.7",
+		"vue-tsc": "^2.2.12"
+	},
+	"author": "Alan <alanscodelog@gmail.com>",
+	"repository": "https://github.com/witchcraftjs/editor",
+	"license": "MIT",
+	"files": [
+		"src",
+		"dist",
+		"@types"
+	],
+	"release": {
+		"extends": [
+			"@alanscodelog/semantic-release-config"
+		]
+	},
+	"commitlint": {
+		"extends": [
+			"@alanscodelog"
+		]
+	},
+	"browserslist": "defaults and supports es6-module,maintained node versions",
+	"engines": {
+		"node": ">=20.0.0"
+	},
+	"@comments": {
+		"vue-tsc": "Do not upgrade to 3.0, #awaiting https://github.com/vuejs/language-tools/issues/5644"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/module.ts

@@ -0,0 +1,101 @@
+import { crop } from "@alanscodelog/utils"
+import {
+	addComponentsDir,
+	addImportsDir,
+	addTemplate,
+	createResolver,
+	defineNuxtModule,
+	installModule } from "@nuxt/kit"
+import { defu } from "defu"
+import fs from "node:fs/promises"
+
+const { resolve } = createResolver(import.meta.url)
+
+declare module "@nuxt/schema" {
+	interface PublicRuntimeConfig {
+		// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+		witchcraftEditor: {}
+	}
+}
+
+export interface ModuleOptions {
+	/** @internal */
+	_playgroundWorkaround?: boolean
+}
+
+export default defineNuxtModule<ModuleOptions>({
+	meta: {
+		name: "witchcraftEditor",
+		configKey: "witchcraftEditor"
+	},
+	defaults: {
+		_playgroundWorkaround: false
+	},
+	async setup(options, nuxt) {
+		nuxt.options.runtimeConfig.public.witchcraftEditor = defu(
+			nuxt.options.runtimeConfig.public.witchcraftEditor,
+			{
+			}
+		)
+		await installModule("@witchcraft/ui/nuxt", (nuxt.options as any).witchcraftUi)
+
+		addComponentsDir({ path: resolve("./runtime/components") })
+
+		const pmFeatures = await fs.readdir(resolve("./runtime/pm/features"))
+		for (const feature of pmFeatures) {
+			nuxt.options.build.transpile.push(resolve(`./runtime/pm/features/${feature}/${feature}`))
+			if (await fs.stat(resolve(`./runtime/pm/features/${feature}/components`)).then(_ => true).catch(() => false)) {
+				addComponentsDir({ path: resolve(`./runtime/pm/features/${feature}/components`) })
+			}
+			if (await fs.stat(resolve(`./runtime/pm/features/${feature}/composables`)).then(_ => true).catch(() => false)) {
+				addImportsDir(resolve(`./runtime/pm/features/${feature}/composables`))
+			}
+		}
+
+		addTemplate({
+			filename: "witchcraft-editor.css",
+			write: true,
+			getContents: () => options._playgroundWorkaround
+				? crop`
+					@import "${resolve("./runtime/assets/base.css")}";
+					@import "${resolve("./runtime/assets/utils.css")}";
+					@source "${resolve("./runtime/components")}";
+					@source "${resolve("./runtime/pm")}";
+				`
+				: crop`
+					@import "@witchcraft/editor/base.css";
+					@import "@witchcraft/editor/utils.css";
+					@source "${resolve("./runtime/components")}";
+					@source "${resolve("./runtime/pm")}";
+				`
+		})
+
+		addImportsDir(resolve("./runtime/composables"))
+		nuxt.options.typescript = nuxt.options.typescript || {}
+		nuxt.options.typescript.hoist = nuxt.options.typescript.hoist || []
+		// nuxt.options.typescript.hoist.push('@tiptap/vue-3')
+		// nuxt.options.typescript.hoist.push('@tiptap/pm')
+
+		nuxt.options.alias["#witchcraft-editor"] = resolve("./runtime")
+		nuxt.options.alias["#witchcraft-pm"] = resolve("./runtime/pm")
+
+		// otherwise we get two versions of the same thing
+		nuxt.options.build.transpile.push("@tiptap/vue-3")
+		nuxt.options.build.transpile.push("@tiptap/pm")
+
+		nuxt.hook("vite:extendConfig", config => {
+			config.optimizeDeps ??= {}
+			config.optimizeDeps.exclude ??= []
+			// causes issues with the import.meta.globs here
+			config.optimizeDeps.exclude.push("@witchcraft/editor/pm/features/CodeBlock/composables/useHighlightJsTheme")
+			config.optimizeDeps.exclude.push("@witchcraft/editor/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlight")
+			// see above
+			config.optimizeDeps.exclude.push("@tiptap/vue-3")
+			config.optimizeDeps.exclude.push("@tiptap/pm")
+			config.optimizeDeps.include ??= []
+			config.optimizeDeps.include.push("highlight.js/lib/core")
+			// idk why we also need to do this or it won't work from a real app
+			config.optimizeDeps.include.push("@witchcraft/editor > highlight.js/lib/core")
+		})
+	}
+})

package/src/runtime/assets/base.css

@@ -0,0 +1,83 @@
+html {
+	padding:none;
+}
+
+.tiptap {
+	.tableWrapper {
+		& table {
+			border-collapse: separate;
+			border-spacing: 0;
+			margin: 0;
+			overflow: hidden;
+			width: 100%;
+			table-layout: fixed;
+			thead {
+					font-weight: bold;
+			}
+			td,
+			th {
+				border-right: 1px solid;
+				border-top: 1px solid;
+				border-color: var(--color-neutral-500);
+				padding: var(--spacing);
+				min-width: 1em;
+				position: relative;
+				&:first-of-type {
+					border-left: 1px solid;
+					border-color: var(--color-neutral-500);
+				}
+				
+			}
+			
+			tr:last-of-type {
+				& td, & th {
+					border-bottom: 1px solid;
+					border-color: var(--color-neutral-500);
+					&:last-of-type {
+						border-radius: 0 0 var(--radius-sm);
+					}
+					&:first-of-type {
+						border-radius: 0 0 0 var(--radius-sm);
+					}
+				}
+			}
+			tr:first-of-type {
+				& td, & th {
+					&:last-of-type {
+						border-radius: 0 var(--radius-sm) 0 0;
+					}
+					&:first-of-type {
+						border-radius: var(--radius-sm) 0 0 0;
+					}
+				}
+			}
+
+			.selectedCell:after {
+				background-color: --alpha(var(--color-blue-500) / 20%);
+				content: '';
+				inset: 0;
+				pointer-events: none;
+				position: absolute;
+				z-index: 10;
+			}
+
+			.column-resize-handle {
+				background-color: --alpha(var(--color-blue-500) / 20%);
+				top: 0;
+				bottom: -2px;
+				right: -2px;
+				width: 4px;
+				position: absolute;
+				pointer-events: none;
+			}
+		}
+
+		overflow-x: auto;
+
+	}
+	&.resize-cursor {
+		cursor: ew-resize;
+		cursor: col-resize;
+	}
+}
+

package/src/runtime/assets/handle-arrow.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="20"
+   height="40"
+   version="1.1"
+   viewBox="0 0 20 40"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 0,0 20,20 0,40 Z"
+     id="path1" />
+</svg>

package/src/runtime/assets/handle-border-circles-single.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="40"
+   height="40"
+   version="1.1"
+   viewBox="0 0 40 40"
+   id="svg2"
+   sodipodi:docname="handle-border-circles-single.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.5837202"
+     inkscape:cx="42.986818"
+     inkscape:cy="46.810799"
+     inkscape:window-width="1920"
+     inkscape:window-height="1044"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs2" />
+  <g
+     fill="#000000"
+     id="g2"
+     transform="translate(12.5,-30)">
+    <circle
+       cx="7.5"
+       cy="50"
+       r="12.5"
+       id="circle1" />
+  </g>
+</svg>

package/src/runtime/assets/handle-border-circles.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="75"
+   height="40"
+   version="1.1"
+   viewBox="0 0 75 40"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     fill="#000000"
+     id="g2"
+     transform="translate(0,-30)">
+    <circle
+       cx="12.5"
+       cy="50"
+       r="12.5"
+       id="circle1" />
+    <circle
+       cx="62.5"
+       cy="50"
+       r="12.5"
+       id="circle2" />
+  </g>
+</svg>

package/src/runtime/assets/handle-temp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>

package/src/runtime/assets/utils.css

@@ -0,0 +1,9 @@
+@layer utilities {
+	.pm-unfocused-selection {
+		background-color: var(--pmUnfocusedSelectionColor);
+		box-shadow: 5px 0 0 0 var(--pmUnfocusedSelectionColor);
+	}
+	.pm-unfocused-selection-end {
+		box-shadow:none;
+	}
+}

package/src/runtime/components/CodeBlockThemePicker.vue

@@ -0,0 +1,125 @@
+<!-- todo replace with ui libs search select when implemented -->
+<script setup lang="ts">
+import WIcon from "@witchcraft/ui/components/Icon"
+import {
+	ComboboxAnchor,
+	ComboboxContent,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxItemIndicator,
+	ComboboxPortal,
+	ComboboxRoot,
+	ComboboxViewport } from "reka-ui"
+
+import IRadixIconsCheck from "~icons/radix-icons/check"
+
+defineProps<{
+	codeBlocksThemeList: string[]
+}>()
+const codeBlocksTheme = defineModel<string>("codeBlocksTheme", { required: true })
+</script>
+
+<template>
+<label class="flex items-center gap-2">
+	<span>Code Block Theme:</span>
+
+	<ComboboxRoot
+		class="relative"
+		:open-on-click="true"
+		v-model="codeBlocksTheme"
+	>
+		<ComboboxAnchor
+			class="
+				flex
+				items-center
+				justify-between
+				rounded-sm
+				px-2
+				leading-none
+				fg-inherit
+				bg-inherit
+				outlined-within:border-accent-500
+				gap-2
+			"
+		>
+			<!-- @vue-expect-error -->
+			<ComboboxInput
+				class="
+					bg-inherit
+					min-w-[70px]
+					w-full
+					outline-hidden
+					focus-outline
+					border-b
+					border-accent-400
+				"
+				placeholder="Placeholder..."
+			/>
+		</ComboboxAnchor>
+		<ComboboxPortal
+			to="#root"
+		>
+			<ComboboxContent
+				side="bottom"
+				position="popper"
+				:avoid-collisions="true"
+				:prioritize-position="true"
+				class="
+					z-100
+					w-[var(--reka-combobox-trigger-width)]
+					align-end
+					bg-white
+					dark:bg-neutral-900
+					overflow-hidden
+					will-change-[opacity,transform]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					border-neutral-500
+					dark:border-neutral-700
+					border-1
+					rounded-sm
+					shadow-[0_0_10px_1px]
+					shadow-black/30
+					mt-2
+					max-h-[50vh]
+				"
+				ref="contentComponent"
+			>
+				<ComboboxViewport
+					class="flex flex-col"
+				>
+					<ComboboxItem
+						:value="option"
+						class="
+						flex
+						justify-between
+						gap-2
+						px-2
+						cursor-pointer
+						data-[highlighted]:outline-hidden
+						data-[highlighted]:bg-accent-200
+						data-[highlighted]:text-accent-800
+						dark:data-[highlighted]:bg-accent-800
+						dark:data-[highlighted]:text-accent-200
+						pl-[25px]
+					"
+						v-for="option in codeBlocksThemeList"
+						:key="option"
+					>
+						<span>
+							{{ option }}
+						</span>
+						<ComboboxItemIndicator
+							class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+						>
+							<WIcon><i-radix-icons-check/></WIcon>
+						</ComboboxItemIndicator>
+					</ComboboxItem>
+				</ComboboxViewport>
+			</ComboboxContent>
+		</ComboboxPortal>
+	</ComboboxRoot>
+</label>
+</template>