@witchcraft/editor 0.0.1

package/src/runtime/pm/features/CommandsMenus/components/CommandBarItem.vue

@@ -0,0 +1,48 @@
+<template>
+<!-- pointerdown.prevent to prevent close from blurring the editor (in the plugin) -->
+<div
+	class="
+		group/menu-item
+		px-1
+		rounded-xs
+		hover:text-accent-700
+		dark:hover:text-accent-300
+		cursor-pointer
+	"
+	:title="item.type === 'command' ? item.description :item.title"
+	@pointerdown.prevent
+	@click="handleClick"
+>
+	<WIcon class="min-w-[1rem] text-center flex items-center justify-center h-full">
+		<component
+			v-if="item.icon"
+			:is=" 'component' in item.icon ? item.icon.component : item.icon"
+			v-bind="'props' in item.icon ? { editor, ...item.icon.props } : { editor }"
+		/>
+	</WIcon>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from "@tiptap/core"
+import { inject } from "vue"
+
+import { type CommandBarCommand, commandExecuterInjectionKey } from "../types.js"
+import { defaultCommandExecuter } from "../utils/defaultCommandExecutor"
+
+const props = defineProps<{
+	item: CommandBarCommand
+	editor: Editor
+}>()
+const emit = defineEmits<{
+	(e: "close"): void
+}>()
+const executer = inject(commandExecuterInjectionKey, defaultCommandExecuter)
+function handleClick() {
+	if (props.item.type === "command") {
+		executer!(props.item, props.editor)
+		emit("close")
+	}
+}
+</script>
+, commadExecuterInjectionKey

package/src/runtime/pm/features/CommandsMenus/components/CommandMenuGroup.vue

@@ -0,0 +1,59 @@
+<template>
+<div
+	class="group/command-group"
+	@mouseenter="popup!.setReference(el);showSubMenu = true"
+	@mouseleave="popup!.setReference(null);showSubMenu = false"
+>
+	<CommandMenuItem
+		:item="item"
+		v-extract-root-el="(_: any) => el = _"
+	/>
+	<!-- @vue-expect-error -->
+	<WPopup
+		:model-value="showSubMenu"
+		:preferred-horizontal="['right-most']"
+		:preferred-vertical="popupVerticalPositioner"
+		:position-modifier="popupPositionModifier"
+		:use-backdrop="false"
+		ref="popup"
+		@update:model-value="showSubMenu = $event"
+	>
+		<template #popup="{ extractEl }">
+			<div
+				:ref="extractEl"
+				@mouseleave="popup!.setReference(null);showSubMenu = false"
+			>
+				<CommandMenuList
+					:entries="item.variations"
+					class="ml-0 mt-0"
+					@close="emit('close')"
+				/>
+			</div>
+		</template>
+	</WPopup>
+</div>
+</template>
+
+<script setup lang="ts">
+import WPopup from "@witchcraft/ui/components/LibPopup"
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl"
+import { ref } from "vue"
+
+import CommandMenuItem from "./CommandMenuItem.vue"
+import CommandMenuList from "./CommandMenuList.vue"
+
+import type { CommandGroup } from "../types.js"
+import { popupPositionModifier } from "../utils/popupPositionModifier.js"
+import { popupVerticalPositioner } from "../utils/popupVerticalPositioner.js"
+
+/* const props =  */defineProps<{
+	item: CommandGroup
+}>()
+const el = ref<HTMLDivElement | null>(null)
+const showSubMenu = ref(false)
+const popup = ref<InstanceType<typeof WPopup>>()
+
+const emit = defineEmits<{
+	(e: "close"): void
+}>()
+</script>

package/src/runtime/pm/features/CommandsMenus/components/CommandMenuItem.vue

@@ -0,0 +1,67 @@
+<template>
+<div
+	class="
+		p-1
+	"
+	:title="item.type === 'command' ? item.description :undefined"
+>
+	<div
+		class="
+		group/menu-item
+		px-1
+		rounded-xs
+		hover:text-accent-700
+		dark:hover:text-accent-300
+		cursor-pointer
+	"
+		@click="handleClick"
+	>
+		<WIcon class="w-[1em] text-center">
+			<component
+				v-if="item.icon"
+				:is="'component' in item.icon ? item.icon.component : item.icon"
+				v-bind="'props' in item.icon ?{ editor, ...item.icon.props } : { editor }"
+			/>
+		</WIcon>
+		{{ item.title }}
+		<i-fa-solid-chevron-right
+			v-if="item.type === 'group'"
+			class="
+				text-neutral-500
+				pl-2
+				group-hover/menu-item:text-accent-500
+			"
+		/>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue"
+
+import IFaSolidChevronRight from "~icons/fa-solid/chevron-right"
+
+import type { ItemMenuCommand } from "../../Blocks/types.js"
+import { commandExecuterInjectionKey, type CommandGroup, menuEditorInjectionKey } from "../types.js"
+
+const editor = inject(menuEditorInjectionKey)
+
+const props = defineProps<{
+	item: ItemMenuCommand | CommandGroup
+}>()
+const emit = defineEmits<{
+	(e: "close"): void
+}>()
+
+const executer = inject(commandExecuterInjectionKey)
+if (!executer) {
+	throw new Error("Command executer must be provided.")
+}
+
+function handleClick() {
+	if (props.item.type === "command") {
+		executer!(props.item, editor!.value!)
+		emit("close")
+	}
+}
+</script>

package/src/runtime/pm/features/CommandsMenus/components/CommandMenuList.vue

@@ -0,0 +1,60 @@
+<template>
+<div
+	class="
+	commands-list
+	flex
+	flex-col
+	rounded-sm
+	border
+	bg-neutral-100
+	border-neutral-300
+	dark:bg-neutral-800
+	dark:border-neutral-700
+	m-1
+	[&>*:first-child]:border-t-0
+	[&>*:first-child]:rounded-t-sm
+	[&>*:last-child]:rounded-b-sm
+"
+>
+	<template
+		v-for="item in entries"
+		:key="item.type + item.title"
+	>
+		<div
+
+			class="
+			border-t
+			border-neutral-300
+		"
+		>
+			<div v-if="item.type === 'command'">
+				<CommandMenuItem
+					:item="item"
+					@close="emit('close')"
+				/>
+			</div>
+
+			<CommandMenuGroup
+				v-else-if="item.type === 'group'"
+				:item="item"
+				@close="emit('close')"
+			/>
+		</div>
+	</template>
+</div>
+</template>
+
+<script setup lang="ts">
+import CommandMenuGroup from "./CommandMenuGroup.vue"
+import CommandMenuItem from "./CommandMenuItem.vue"
+
+import type { ItemMenuCommand } from "../../Blocks/types"
+import type { CommandGroup } from "../types.js"
+
+/* const props =  */defineProps<{
+	entries: (ItemMenuCommand | CommandGroup)[]
+}>()
+const emit = defineEmits<{
+	(e: "close"): void
+}>()
+</script>

package/src/runtime/pm/features/CommandsMenus/components/TextIcon.vue

@@ -0,0 +1,14 @@
+<template>
+<span v-bind="$attrs">
+	{{ text }}
+</span>
+</template>
+
+<script setup lang="ts">
+import { useAttrs } from "vue"
+
+/* const props =  */defineProps<{
+	text: string
+}>()
+const $attrs = useAttrs()
+</script>

package/src/runtime/pm/features/CommandsMenus/icons/HighlightIcon.vue

@@ -0,0 +1,51 @@
+<template>
+<div
+	class=" flex justify-center items-center"
+>
+	<div
+		v-if="colorSlot !== undefined"
+		class=" w-[1rem] h-[1rem] rounded-full text-sm overflow-hidden"
+		:style="`background-color: ${color?.color}`"
+		:title="color?.name"
+	>
+		<FaSolidHighlighter class="mb-2 ml-1"/>
+	</div>
+	<div
+		v-else
+		class="
+		w-[1rem]
+		h-[1rem]
+		rounded-full
+		bg-neutral-100
+		dark:bg-neutral-900
+		border-2
+		border-dashed
+		border-neutral-500
+		flex justify-center items-center
+	"
+	/>
+</div>
+</template>
+
+<script setup lang="ts">
+import type { Editor } from "@tiptap/core"
+import { computed } from "vue"
+
+import FaSolidHighlighter from "~icons/lucide/highlighter"
+
+import type { HighlightMarkOptions } from "../../Highlight/types.js"
+import { highlightPluginKey } from "../../Highlight/types.js"
+
+const props = defineProps<{
+	editor: Editor
+	colorSlot?: keyof HighlightMarkOptions["colors"] | string // why does vue think the former is an object???
+}>()
+
+const color = computed(() => {
+	const colors = highlightPluginKey.getState(props.editor.state)?.colors
+	if (colors && props.colorSlot !== undefined) {
+		return colors[props.colorSlot as keyof HighlightMarkOptions["colors"]]
+	}
+	return undefined
+})
+</script>

package/src/runtime/pm/features/CommandsMenus/icons/SubscriptIcon.vue

@@ -0,0 +1,5 @@
+<template>
+<span>
+	X<sub class="pl-1">2</sub>
+</span>
+</template>

package/src/runtime/pm/features/CommandsMenus/icons/SuperscriptIcon.vue

@@ -0,0 +1,5 @@
+<template>
+<span>
+	X<sup class="pl-1">2</sup>
+</span>
+</template>

package/src/runtime/pm/features/CommandsMenus/types.ts

@@ -0,0 +1,73 @@
+import type { ChainedCommands, Editor } from "@tiptap/core"
+import { type EditorState, PluginKey } from "@tiptap/pm/state"
+import type { FunctionalComponent, InjectionKey, Ref } from "vue"
+
+export interface CommandBarExtensionOptions {
+	commandBar: CommandBarMenu
+}
+
+export type Command<
+	TRegularArgs extends any[] = any[],
+	TFuncArgs extends	((editor: Editor, ...args: any[]) => any[]) = ((editor: Editor, ...args: any[]) => any[])
+> = {
+	type: "command"
+	command: keyof ChainedCommands
+	title: string
+	description?: string
+	icon?: (new () => any) | FunctionalComponent | { component: (new () => any) | FunctionalComponent, props?: Record<string, any> }
+	/**
+	 * Args to pass to the command.
+	 *
+	 * A function to determine those args can also be
+	 * passed instead.
+	 *
+	 * What context is provided to the function depends on the meny.
+	 */
+	args?: TRegularArgs | TFuncArgs
+	/**
+	 * Determines whether the entry should be shown.
+	 *
+	 * Note that while one can just use tiptap's `can()` method, some commands are
+	 * expensive to execute, so it's better to just do a more generic lightweight check in those situations.
+	 */
+	canShow?: (editorstate: EditorState) => boolean
+}
+export type CommandGroup<
+	T extends string | never = string,
+	TCommand extends Command<any> = Command<any>,
+	TNestable extends boolean = false
+> = {
+	icon?: (new () => any) | { component: new () => any, props?: Record<string, any> }
+	type: "group"
+	groupType?: T extends string ? T : never
+	title: string
+	variations: TNestable extends false ? TCommand[] : (TCommand | CommandGroup<T, TCommand, TNestable>)[]
+}
+export const menuEditorInjectionKey = Symbol("menuEditorInjectionKey") as InjectionKey<Ref<Editor>>
+export const menuBlockIdInjectionKey = Symbol("menuBlockIdInjectionKey") as InjectionKey<Ref<string | undefined>>
+
+export type CommandBarMenuState = {
+	state: boolean
+	/** For internal use, the commandBar can't be opened if the editor isn't focused. */
+	canOpen: boolean
+}
+export const commandBarMenuPluginKey = new PluginKey<CommandBarMenuState>("commandBarMenuPluginKey")
+
+export type CommandBarCommand = Command
+export type CommandBarGroup = CommandGroup<
+	"inline", /* todo | "dropdown" */
+	CommandBarCommand,
+	false
+>
+
+export type CommandBarMenu = {
+	enabled: true | false | Record<string, boolean>
+	commands: (CommandBarCommand | CommandBarGroup)[]
+	options?: {
+		onlyOpenOnSelection?: boolean
+	}
+}
+
+export type CommandExecuter = (item: Command, editor: Editor) => void
+
+export const commandExecuterInjectionKey = Symbol("commandExecuterInjectionKey") as InjectionKey<CommandExecuter>

package/src/runtime/pm/features/CommandsMenus/utils/defaultCommandExecutor.ts

@@ -0,0 +1,22 @@
+import { castType } from "@alanscodelog/utils/castType"
+import type { Editor } from "@tiptap/core"
+
+import type { ItemMenuCommand } from "../../Blocks/types.js"
+import type { Command } from "../types.js"
+
+export function defaultCommandExecuter(
+	item: Command,
+	editor: Editor
+): void {
+	if (item.type === "command") {
+		const args = typeof item.args === "function"
+			? item.args(editor)
+			: item.args ?? []
+		editor!.commands
+			.command(({ commands }) => {
+				castType<ItemMenuCommand>(item)
+				;(commands as any)[(item).command!](...args)
+				return true
+			})
+	}
+}

package/src/runtime/pm/features/CommandsMenus/utils/findCommand.ts

@@ -0,0 +1,37 @@
+import type { AddParameters } from "@alanscodelog/utils"
+import { castType } from "@alanscodelog/utils/castType"
+
+import type { Command, CommandGroup } from "../types.js"
+
+/**
+ * Deep search through a list of commands/command groups.
+ *
+ * The callback is passed each command
+ * and it's parent group if it has one..
+ *
+ * Returning true will stop the search.
+ */
+export function findCommand<
+	TEntry extends Command | CommandGroup,
+	TCommand extends Exclude<TEntry, CommandGroup>,
+	TCommandGroup extends Exclude<TEntry, Command>
+>(
+	commands: TEntry[],
+	cb: (command: TCommand, parent: TCommandGroup | undefined) => boolean
+): boolean {
+	// eslint-disable-next-line prefer-rest-params
+	const parent = arguments[2]
+	const internalFindCommand = findCommand as AddParameters<typeof findCommand, [CommandGroup | undefined]>
+
+	for (const item of commands) {
+		if (item.type === "command") {
+			castType<TCommand>(item)
+			const res = cb(item, parent)
+			if (res) return true
+		} else if (item.type === "group") {
+			const res = internalFindCommand(item.variations, cb as any, item)
+			if (res) return true
+		}
+	}
+	return false
+}

package/src/runtime/pm/features/CommandsMenus/utils/popupPositionModifier.ts

@@ -0,0 +1,14 @@
+import type { PopupPositionModifier } from "@witchcraft/ui/types"
+
+/**
+	* Modifes the popup to have a max width and height if it doesn't fit in the window.
+	*/
+export const popupPositionModifier: PopupPositionModifier = (pos, _reference, popup, veil) => {
+	if (popup.height > veil.height) {
+		pos.maxHeight = veil.height
+	}
+	if (popup.width > veil.width) {
+		pos.maxWidth = veil.width
+	}
+	return pos
+}

package/src/runtime/pm/features/CommandsMenus/utils/popupVerticalPositioner.ts

@@ -0,0 +1,16 @@
+import type { PopupPositioner } from "@witchcraft/ui/types"
+
+/**
+	* Position the popup so it's top edge is at the item's top edge, UNLESS it hits the top  or bottom edges, in which case it'll shift the positioning, always keeping the top of the menu in view.
+	*/
+export const popupVerticalPositioner: PopupPositioner = (reference, popup, veil, space) => {
+	if (!reference) return 0
+	const spaceBottomFromReferenceTop = (veil.y + veil.height) - reference.y
+	if (space.top <= 0 || (space.top + reference.width + space.bottom) <= popup.height) {
+		return 0
+	} else if (spaceBottomFromReferenceTop > popup.height) {
+		return reference.y
+	} else {
+		return veil.y + veil.height - popup.height
+	}
+}

package/src/runtime/pm/features/Document/Document.ts

@@ -0,0 +1,9 @@
+import { Node } from "@tiptap/core"
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Document = Node.create({
+	name: "doc" satisfies NodeDocumentName,
+	topNode: true,
+	content: "list"
+})
+export type NodeDocumentName = "doc"