v0breaking: updated to @witchcraft/ui + modifications

Updated to the new version of @witchcraft/ui which required re-working some
components, especially popups.

- A few props for the menu components have changed.
- The styles for the link menus have been reworked.
- We have switched to using tiptap's BubbleMenu where possible since it now
works better and it's also based on the floating-ui library like reka is.
- Switched to lucide ui icons where possuble.

Otherwise everything else is nearly the same.

Author: alanscodelog

package.json

@@ -146,10 +146,6 @@
 		"@alanscodelog/utils": "catalog:",
 		"@commitlint/cli": "catalog:",
 		"@faker-js/faker": "catalog:",
-		"@fortawesome/fontawesome-svg-core": "catalog:",
-		"@fortawesome/free-brands-svg-icons": "catalog:",
-		"@fortawesome/free-regular-svg-icons": "catalog:",
-		"@fortawesome/free-solid-svg-icons": "catalog:",
 		"@nuxt/eslint-config": "catalog:",
 		"@tiptap/html": "catalog:",
 		"@witchcraft/nuxt-utils": "catalog:",

pnpm-lock.yaml

@@ -12,12 +12,8 @@ catalog:
   '@alanscodelog/utils': ^6.2.0
   '@alanscodelog/vite-config': ^0.0.7
   '@commitlint/cli': ^20.1.0
+  '@iconify/json': ^2.2.462
   '@faker-js/faker': ^10.0.0
-  '@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
-  '@iconify/json': ^2.2.412
   '@nuxt/eslint-config': ^1.11.0
   '@nuxt/kit': ^4.2.1
   '@nuxt/module-builder': ^1.0.2
@@ -28,42 +24,42 @@ catalog:
   '@tailwindcss/cli': ^4.1.17
   '@tailwindcss/vite': ^4.1.17
   '@testing-library/vue': ^8.1.0
-  '@tiptap/core': ^3.12.0
-  '@tiptap/extension-blockquote': ^3.12.0
-  '@tiptap/extension-bold': ^3.12.0
-  '@tiptap/extension-code': ^3.12.0
-  '@tiptap/extension-code-block': ^3.12.0
-  '@tiptap/extension-code-block-lowlight': ^3.12.0
-  '@tiptap/extension-collaboration': ^3.12.0
-  '@tiptap/extension-dropcursor': ^3.12.0
-  '@tiptap/extension-gapcursor': ^3.12.0
-  '@tiptap/extension-hard-break': ^3.12.0
-  '@tiptap/extension-heading': ^3.12.0
-  '@tiptap/extension-highlight': ^3.12.0
-  '@tiptap/extension-history': ^3.12.0
-  '@tiptap/extension-image': ^3.12.0
-  '@tiptap/extension-italic': ^3.12.0
-  '@tiptap/extension-link': ^3.12.0
-  '@tiptap/extension-paragraph': ^3.12.0
-  '@tiptap/extension-strike': ^3.12.0
-  '@tiptap/extension-subscript': ^3.12.0
-  '@tiptap/extension-superscript': ^3.12.0
-  '@tiptap/extension-table': ^3.12.0
-  '@tiptap/extension-table-cell': ^3.12.0
-  '@tiptap/extension-table-header': ^3.12.0
-  '@tiptap/extension-table-row': ^3.12.0
-  '@tiptap/extension-text': ^3.12.0
-  '@tiptap/extension-underline': ^3.12.0
-  '@tiptap/html': ^3.12.0
-  '@tiptap/pm': ^3.12.0
-  '@tiptap/vue-3': ^3.12.0
+  '@tiptap/core': ^3.22.3
+  '@tiptap/extension-blockquote': ^3.22.3
+  '@tiptap/extension-bold': ^3.22.3
+  '@tiptap/extension-code': ^3.22.3
+  '@tiptap/extension-code-block': ^3.22.3
+  '@tiptap/extension-code-block-lowlight': ^3.22.3
+  '@tiptap/extension-collaboration': ^3.22.3
+  '@tiptap/extension-dropcursor': ^3.22.3
+  '@tiptap/extension-gapcursor': ^3.22.3
+  '@tiptap/extension-hard-break': ^3.22.3
+  '@tiptap/extension-heading': ^3.22.3
+  '@tiptap/extension-highlight': ^3.22.3
+  '@tiptap/extension-history': ^3.22.3
+  '@tiptap/extension-image': ^3.22.3
+  '@tiptap/extension-italic': ^3.22.3
+  '@tiptap/extension-link': ^3.22.3
+  '@tiptap/extension-paragraph': ^3.22.3
+  '@tiptap/extension-strike': ^3.22.3
+  '@tiptap/extension-subscript': ^3.22.3
+  '@tiptap/extension-superscript': ^3.22.3
+  '@tiptap/extension-table': ^3.22.3
+  '@tiptap/extension-table-cell': ^3.22.3
+  '@tiptap/extension-table-header': ^3.22.3
+  '@tiptap/extension-table-row': ^3.22.3
+  '@tiptap/extension-text': ^3.22.3
+  '@tiptap/extension-underline': ^3.22.3
+  '@tiptap/html': ^3.22.3
+  '@tiptap/pm': ^3.22.3
+  '@tiptap/vue-3': ^3.22.3
   '@tiptap/y-tiptap': ^3.0.1
   '@types/node': ^24.10.1
   '@vitejs/plugin-vue': ^6.0.2
   '@vitest/browser-playwright': ^4.0.14
   '@vitest/coverage-v8': ^4.0.14
   '@witchcraft/nuxt-utils': ^0.3.6
-  '@witchcraft/ui': ^0.3.25
+  '@witchcraft/ui': 0.4.0-beta.11
   colord: ^2.9.3
   concurrently: ^9.2.1
   cross-env: ^10.0.0

pnpm-workspace.yaml

@@ -34,7 +34,7 @@ export default defineNuxtModule<ModuleOptions>({
 	},
 	moduleDependencies: {
 		"@witchcraft/ui/nuxt": {
-			version: "^0.3.2"
+			version: "^0.4.0"
 		}
 	},
 	async setup(options, nuxt) {

src/module.ts

@@ -1,6 +1,6 @@
 <!-- todo replace with ui libs search select when implemented -->
 <script setup lang="ts">
-import WIcon from "@witchcraft/ui/components/Icon"
+import WIcon from "@witchcraft/ui/components/WIcon"
 import {
 	ComboboxAnchor,
 	ComboboxContent,

src/runtime/components/CodeBlockThemePicker.vue

@@ -44,7 +44,7 @@
 <script lang="ts" setup>
 import { pretty } from "@alanscodelog/utils"
 import type { Editor, SingleCommands } from "@tiptap/core"
-import WButton from "@witchcraft/ui/components/LibButton"
+import WButton from "@witchcraft/ui/components/WButton"
 import { twMerge } from "tailwind-merge"
 
 const props = defineProps<{

src/runtime/components/Commands.vue

@@ -66,7 +66,7 @@
 <script setup lang="ts">
 // all imports must be explicit so this also works without nuxt
 import type { EditorOptions } from "@tiptap/core"
-import WRoot from "@witchcraft/ui/components/LibRoot"
+import WRoot from "@witchcraft/ui/components/WRoot"
 import { useRoute } from "nuxt/app"
 import { reactive, ref, shallowRef } from "vue"
 
@@ -103,18 +103,31 @@ const linkOptions: EditorLinkOptions = {
 		console.log(`Would open internal link to ${href}.`)
 	}
 }
-const fakeSuggestions = reactive<string[]>(["some", "suggestions"])
+
+const fakeInternalLinkSuggestions = reactive<{ text: string, id: string }[]>([
+	{ text: "Internal Link", id: "some-id" },
+	{ text: "Internal Some Other Link", id: "some-other-link-id" },
+	{ text: "Internal Duplicate Text - Different Id", id: "dupe-link-id" },
+	{ text: "Internal Duplicate Text - Different Id", id: "dupe-link-id-2" }
+])
 
 const menus = shallowRef<Record<string, MenuRenderInfo>>({
 	linkMenu: {
 		component: BubbleMenuLink,
-		props: editor => ({
-			editor,
-			linkSuggestions: fakeSuggestions,
-			getInternalLinkHref(href: string) {
-				return `internal://${href.replace(/[^\w-]/g, "")}`
+		props: editor => {
+			return {
+				editor,
+				internalLinkSuggestions: fakeInternalLinkSuggestions,
+				internalItemToHref(item: { text: string, id: string }) {
+					return `internal://${item.id.replace(/[^\w-]/g, "")}`
+				},
+				hrefToInternalItem(href: string) {
+					const idWanted = href.replace("internal://", "")
+					const found = fakeInternalLinkSuggestions.find(_ => _.id === idWanted)
+					return found
+				}
 			}
-		})
+		}
 	},
 	commandBar: {
 		component: CommandBar,

src/runtime/components/EditorDemoApp.vue

@@ -10,6 +10,9 @@
 		gap-2
 	"
 >
+	<div class="dark:bg-tint-red-500/10 dark:bg-(--mix) w-[1rem] h-[1rem]">
+		What
+	</div>
 	<div
 		class="
 			flex
@@ -67,7 +70,8 @@
 </template>
 
 <script setup lang="ts">
-import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+import WCheckbox from "@witchcraft/ui/components/WCheckbox"
+import WDarkModeSwitcher from "@witchcraft/ui/components/WDarkModeSwitcher"
 import { useRoute } from "nuxt/app"
 
 import CodeBlockThemePicker from "./CodeBlockThemePicker.vue"

src/runtime/components/EditorDemoControls.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import type { Editor as TipTapEditor, EditorOptions } from "@tiptap/core"
-import WRoot from "@witchcraft/ui/components/LibRoot"
+import WRoot from "@witchcraft/ui/components/WRoot"
 import { ref, watchEffect } from "vue"
 
 import Editor from "./Editor.vue"

src/runtime/components/TestWrapper.vue

@@ -1,38 +1,47 @@
 <template>
-<WPopup
+<WPopover
 	:model-value="menu.opened"
-	:preferred-horizontal="['left-most']"
-	:preferred-vertical="popupVerticalPositioner"
-	:position-modifier="popupPositionModifier"
-	ref="popup"
-	@update:model-value="!$event && props.editor.commands.closeItemMenu()"
+
+	:content-props="{
+		collisionBoundary,
+		reference: virtualMenuEl,
+		side: 'left',
+		align: 'start',
+		class: `
+			bg-neutral-100
+			dark:bg-neutral-700
+			text-sm
+			z-10
+		`
+	}"
+	:show-arrow="false"
+	:use-backdrop="false"
+	:animation-direction="'show'"
+	:tabindex="0"
+	@update:model-value="editor.commands.closeItemMenu()"
 >
-	<template #popup="{ extractEl }">
-		<div
-			:ref="extractEl"
-		>
-			<CommandsMenuList
-				:entries="commandsMenu"
-				@close="(props.editor.commands as any).closeItemMenu()"
-			/>
-		</div>
+	<template #button/>
+	<template #popover>
+		<CommandsMenuList
+			:editor="editor"
+			:entries="commandsMenu"
+			@close="(props.editor.commands as any).closeItemMenu()"
+		/>
 	</template>
-</WPopup>
+</WPopover>
 </template>
 
 <script setup lang="ts">
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Editor } from "@tiptap/core"
 import type { Transaction } from "@tiptap/pm/state"
-import WPopup from "@witchcraft/ui/components/LibPopup"
+import WPopover from "@witchcraft/ui/components/WPopover"
 import { computed, provide, ref, toRef, watch } from "vue"
 
 import { defaultItemMenu as commandsMenu } from "./defaultItemMenu.js"
 
 import CommandsMenuList from "../../CommandsMenus/components/CommandMenuList.vue"
 import { commandExecuterInjectionKey, menuBlockIdInjectionKey, menuEditorInjectionKey } from "../../CommandsMenus/types.js"
-import { popupPositionModifier } from "../../CommandsMenus/utils/popupPositionModifier.js"
-import { popupVerticalPositioner } from "../../CommandsMenus/utils/popupVerticalPositioner.js"
 import { itemMenuPluginKey, type ItemMenuPluginState } from "../types.js"
 import { createItemMenuCommandExecuter } from "../utils/createItemMenuCommandExecuter.js"
 
@@ -41,9 +50,9 @@ const props = defineProps<{
 }>()
 
 const menu = ref<ItemMenuPluginState>({ opened: false, id: undefined })
-const popup = ref<InstanceType<typeof WPopup>>()
 
-const virtualMenuEl = ref<{ getBoundingClientRect(): DOMRect } | null>(null)
+const collisionBoundary = ref<HTMLElement | null>(null)
+const virtualMenuEl = ref<{ getBoundingClientRect(): DOMRect } | undefined>(undefined)
 function virtualGetBoundingClientRect(): DOMRect {
 	// note this will not work if we allow recursive embedding
 	const el = props.editor.view.dom.querySelector(`li[blockid='${menu.value.id}']`)
@@ -66,14 +75,13 @@ function updateState({ editor }: { transaction: Transaction, editor: Editor }):
 	const willBe = itemMenuPluginKey.getState(editor.state as any) ?? menu.value
 	if (willBe.opened && (was.opened !== willBe.opened || was.id !== willBe.id)) {
 		virtualMenuEl.value = { getBoundingClientRect: virtualGetBoundingClientRect }
-		popup.value!.setReference(virtualMenuEl.value)
 	} else if (virtualMenuEl.value && !willBe.opened) {
-		virtualMenuEl.value = null
-		popup.value!.setReference(virtualMenuEl.value!)
+		virtualMenuEl.value = undefined
 	}
 	// we can't open the popup before the virtualMenuEl is set
 	menu.value = willBe
 }
+
 const editorRef = toRef(props, "editor")
 provide(menuEditorInjectionKey, editorRef as any)
 const blockId = computed(() => menu.value.id)
@@ -82,6 +90,7 @@ provide(commandExecuterInjectionKey, createItemMenuCommandExecuter(() => blockId
 watch(() => props.editor, (newVal, oldVal) => {
 	oldVal.off("transaction", updateState)
 	newVal.on("transaction", updateState)
+	collisionBoundary.value = newVal.view.dom.parentElement
 })
 props.editor.on("transaction", updateState)
 </script>