@witchcraft/editor 0.0.1

package/src/runtime/components/Commands.vue

@@ -0,0 +1,67 @@
+<template>
+<div
+	:class="twMerge(`
+		flex
+		gap-2
+		flex-wrap
+		p-2
+	`)"
+>
+	<div
+		:class="twMerge(`
+			pb-2
+			flex
+			flex-wrap
+			gap-2
+		`,
+
+			(command.buttons?.length ?? 0) >1 && `
+			border
+			border-neutral-500
+			rounded-sm
+			w-full
+			p-2
+			`
+		)"
+		v-for="command of commands"
+		:key="command.key"
+	>
+		<div v-if="(command?.buttons?.[0]?.length ?? 0) >= 1">
+			{{ command.key }}
+		</div>
+		<WButton
+			v-for="args in command.buttons"
+			:key="command.key as string + pretty(args)"
+			@pointerdown="handlePointerDown($event, command, args)"
+		>
+			{{ (command?.buttons?.[0]?.length ?? 0) >= 1 ? '': command.key }}
+			{{ args.map(_ => pretty(_ as any)).join(' ') }}
+		</WButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { pretty } from "@alanscodelog/utils"
+import type { Editor, SingleCommands } from "@tiptap/core"
+import WButton from "@witchcraft/ui/components/LibButton"
+import { twMerge } from "tailwind-merge"
+
+const props = defineProps<{
+	editor: Editor
+	commands: { key: keyof SingleCommands, buttons?: any[][] }[]
+}>()
+
+function handlePointerDown(
+	$event: MouseEvent,
+	command: { key: keyof SingleCommands, buttons?: any[][] },
+	args: any[]
+) {
+	$event.preventDefault()
+	$event.stopPropagation()
+	const commandFunc = (props.editor.chain().focus()[command.key] as any)(...args)
+	if (typeof commandFunc === "object") {
+		commandFunc.run()
+	}
+}
+</script>

package/src/runtime/components/Editor.vue

@@ -0,0 +1,330 @@
+<template>
+<div
+	:class="twMerge(`
+		editor-wrapper
+		[counter-reset:none]
+		flex-1
+		w-full
+	`,
+		isEmbedded && `p-1`,
+		isScrolling && `
+			relative
+			after:content-['']
+			after:absolute
+			after:inset-0
+			after:border-[length:var(--pmDragScrollMargin)]
+			after:border-transparent
+			after:pointer-events-none
+		`,
+		scrollIndicator.right && `after:border-r-accent-500/60`,
+		scrollIndicator.down && `after:border-b-accent-500/60`,
+		scrollIndicator.left && `after:border-l-accent-500/60`,
+		scrollIndicator.up && `after:border-t-accent-500/60`
+	)"
+	:data-code-blocks-theme-is-dark="codeBlocksThemeIsDark"
+	:style="`${cssVariablesString}`"
+	v-bind="$attrs"
+>
+	<!-- The class `is-embedded-block` is not needed internally, but is added for consistency in case it might be useful. -->
+	<!-- @vue-expect-error -->
+	<editor-content
+		:editor="editor! as any"
+		spellcheck="false"
+		:class="twMerge(`
+			w-full flex-1
+			p-2
+			pl-6
+			[&>.ProseMirror]:outline-hidden
+			overflow-auto
+		`,
+			isEmbedded && `editor-is-embedded`,
+			isEmbeddedBlock && `editor-is-embedded-block`
+		)"
+		v-extract-root-el="(el:HTMLElement) => editorContainerEl = el"
+	/>
+	<MarkMenuManager
+		v-if="editor && !finalEditorOptions?.editable"
+		:editor="editor as any"
+	/>
+	<ItemMenu
+		v-if="editor"
+		:editor="editor as any"
+	/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { keys } from "@alanscodelog/utils"
+import type { Content, EditorOptions } from "@tiptap/core"
+import { EditorContent } from "@tiptap/vue-3"
+import { useScrollNearContainerEdges } from "@witchcraft/ui/composables/useScrollNearContainerEdges"
+import { vExtractRootEl } from "@witchcraft/ui/directives/vExtractRootEl"
+import type { ScrollNearContainerEdgesOptions } from "@witchcraft/ui/types/index"
+import { twMerge } from "@witchcraft/ui/utils/twMerge"
+import { computed, type ComputedRef, inject, provide, ref, toRef, toRefs, watch } from "vue"
+
+import handleCollapseIndicatorImage from "../assets/handle-arrow.svg"
+import handleImage from "../assets/handle-border-circles-single.svg"
+import { useEditor } from "../composables/useEditor.js"
+import { useWindowDebugging } from "../composables/useWindowDebugging.js"
+import { editorCssVariablesInjectionKey, editorScrollInjectionKey } from "../injectionKeys.js"
+import ItemMenu from "../pm/features/Blocks/components/ItemMenu.vue"
+import { statefulStates } from "../pm/features/Blocks/states/stateful.js"
+import { statesInjectionKey } from "../pm/features/Blocks/types"
+import { lowlightInstance } from "../pm/features/CodeBlock/CodeBlock.js"
+import { useAsyncCodeBlockHighlighting } from "../pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting"
+import { codeBlockThemeIsDarkInjectionKey } from "../pm/features/CodeBlock/types"
+import { useEditorContent } from "../pm/features/DocumentApi/composables/useEditorContent"
+import { documentApiInjectionKey, type DocumentApiInterface } from "../pm/features/DocumentApi/types.js"
+import { embededEditorOptionsInjectionKey, isEmbeddedBlockInjectionKey, isEmbeddedInjectionKey, parentEditorIdInjectionKey } from "../pm/features/EmbeddedDocument/types"
+import type { EditorLinkOptions } from "../pm/features/Link/types"
+import MarkMenuManager from "../pm/features/Menus/components/MarkMenuManager.vue"
+import { extensions } from "../pm/schema.js"
+import { type CssVariables, type MenuRenderInfo, menusInjectionKey } from "../types/index.js"
+
+
+const props = withDefaults(defineProps<
+	{
+		/** The content for the editor. It is better to use docId and the documentApi instead. */
+		content?: Content
+		docId?: string
+		/** The document api, required for the root editor if using nested embeds. This is provided as the documentApi using the documentApiInjectionKey. */
+		documentApi?: DocumentApiInterface
+		/** The link options, required for the root editor. Not required for embedded editors. */
+		linkOptions?: EditorLinkOptions
+		/** See my component library's (@witchcraft/ui) useScrollNearContainerEdges composable for more info. */
+		dragScrollOptions?: Pick<
+			ScrollNearContainerEdgesOptions,
+			"scrollMargin" | "outerScrollMargin" | "fastPixelMultiplier"
+		>
+		cssVariables?: Partial<CssVariables>
+		editorOptions?: Partial<EditorOptions>
+		codeBlocksThemeIsDark?: boolean
+		menus?: Record<string, MenuRenderInfo>
+	}>(), {
+	codeBlocksThemeIsDark: false,
+	content: undefined,
+	docId: undefined,
+	documentApi: undefined,
+	linkOptions: undefined,
+	cssVariables: () => ({ }),
+	editorOptions: () => ({
+		// todo user configurable
+		enablePasteRules: true,
+		enableInputRules: true
+	}),
+	dragScrollOptions: () => ({
+		scrollMargin: 15,
+		outerScrollMargin: 15,
+		fastPixelMultiplier: 8
+	}),
+	menus: () => ({})
+})
+const editorContainerEl = ref<HTMLElement | null>(null)
+const scroll = useScrollNearContainerEdges({
+	containerEl: editorContainerEl,
+	...props.dragScrollOptions
+})
+const {
+	isScrolling,
+	scrollIndicator
+} = scroll
+provide(editorScrollInjectionKey, scroll)
+
+const isEmbedded = inject(isEmbeddedInjectionKey, false)
+const isEmbeddedBlock = inject(isEmbeddedBlockInjectionKey, ref(false))
+const cssVariables = computed(() => (isEmbedded
+	? {}
+	: {
+		pmUnfocusedSelectionColor: "rgb(129,163,234)",
+		pmNodeTypeMargin: "var(--dragHandleMargin)",
+		pmCodeBlockBgColor: "",
+		pmMaxEmbedWidth: "800px",
+		pmDragScrollMargin: `${props.dragScrollOptions.scrollMargin}px`,
+		dragHandleSize: "9px",
+		dragHandleMargin: "5px",
+		dragHandleImage: `url("${handleImage}")`,
+		dragHandleCollapseIndicatorImage: `url("${handleCollapseIndicatorImage}")`,
+		...props.cssVariables
+	} satisfies CssVariables))
+const cssVariablesString = computed(() => keys(cssVariables.value)
+	.map(key => `--${key}: ${cssVariables.value[key]};`).join(""))
+
+// const linkOptions = toRef(props, "linkOptions")
+const menus = toRef(props, "menus")
+
+const alreadyProvidedDocumentApi = inject(documentApiInjectionKey, undefined)
+if (!isEmbedded) {
+	const statefulStatesRef = ref(statefulStates)
+	const alreadyProvidedStatefulStates = inject(statesInjectionKey, undefined)
+	if (!alreadyProvidedStatefulStates) {
+		provide(statesInjectionKey, statefulStatesRef)
+	}
+
+	const codeBlockThemeIsDark = toRef(props, "codeBlocksThemeIsDark")
+	const alreadyProvidedCodeBlockThemeIsDark = inject(codeBlockThemeIsDarkInjectionKey, undefined)
+	if (!alreadyProvidedCodeBlockThemeIsDark) {
+		provide(codeBlockThemeIsDarkInjectionKey, codeBlockThemeIsDark)
+	}
+
+	const alreadyProvidedEditorCssVariables = inject(editorCssVariablesInjectionKey, undefined)
+	if (!alreadyProvidedEditorCssVariables) {
+		provide(editorCssVariablesInjectionKey, cssVariables as ComputedRef<CssVariables>)
+	}
+
+	if (props.documentApi && !alreadyProvidedDocumentApi) {
+		provide(documentApiInjectionKey, props.documentApi)
+	}
+	if (menus.value) {
+		provide(menusInjectionKey, menus)
+	}
+}
+
+const finalEditorOptions: Partial<EditorOptions> = {
+	enableInputRules: true,
+	enablePasteRules: true,
+	...props.editorOptions,
+	// force extensions to be their own instance per embedded editor
+	// see https://github.com/ueberdosis/tiptap/issues/4317
+	// and https://github.com/ueberdosis/tiptap/issues/2694
+	extensions: (props.editorOptions?.extensions ?? extensions) as any,
+	autofocus: isEmbedded ? false : (props.editorOptions?.autofocus ?? true),
+	injectCSS: false
+}
+
+provide(embededEditorOptionsInjectionKey, finalEditorOptions as any)
+
+const emit = defineEmits<{
+	(e: "load"): void
+	(e: "unload"): void
+}>()
+
+const { editor, recreate } = useEditor(finalEditorOptions as any)
+
+watch(editor, newVal => {
+	if (newVal) {
+		// we can't just use immediate: true because the editor is not yet mounted
+		if (props.linkOptions) {
+			editor.value!.commands.setLinkOpts(props.linkOptions)
+		}
+		emit("load")
+	}
+})
+useWindowDebugging(editor)
+
+/* const { langsInfo } = */useAsyncCodeBlockHighlighting({
+	lowlightInstance,
+	editor
+})
+
+watch(() => props.editorOptions, newVal => {
+	if (newVal) {
+		editor.value?.setOptions(newVal as any)
+	}
+}, { deep: true })
+
+watch(() => props.linkOptions, newVal => {
+	if (!isEmbedded) {
+		if (newVal) {
+			editor.value?.commands.setLinkOpts(newVal)
+		}
+	}
+}, { deep: true })
+
+const {
+	content,
+	docId
+} = toRefs(props)
+
+useEditorContent(
+	editor,
+	content,
+	docId,
+	props.documentApi ?? alreadyProvidedDocumentApi,
+	recreate
+)
+
+provide(parentEditorIdInjectionKey, docId)
+
+defineExpose({
+	editor
+})
+</script>
+
+<style>
+a {
+	text-decoration: underline !important;
+}
+
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror [contenteditable="false"] {
+  white-space: normal;
+}
+
+.ProseMirror [contenteditable="false"] [contenteditable="true"] {
+  white-space: pre-wrap;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position:relative;
+}
+ul > .ProseMirror-gapcursor {
+	@apply pl-[calc(var(--dragHandleSize)+var(--dragHandleMargin)+var(--spacing-1))];
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection * {
+  caret-color: transparent;
+}
+</style>

package/src/runtime/components/EditorDemoApp.vue

@@ -0,0 +1,118 @@
+<template>
+<WRoot class="items-center py-10 gap-2 h-dvh">
+	<component :is="'style'">
+		<!-- use unhead in a real app -->
+		{{ codeBlocksThemeCss.join("\n") }}
+	</component>
+	<div class="text-xl font-bold">
+		<a href="https://github.com/witchcraftjs/editor">@witchcraft/editor</a>
+	</div>
+	<EditorDemoControls
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+	/>
+	<Editor
+		class="
+			max-w-[700px]
+			flex-1
+			flex
+			border
+			border-neutral-300
+			dark:border-neutral-700
+			rounded-sm
+			min-h-0
+		"
+		v-bind="{
+			codeBlocksThemeIsDark,
+			cssVariables: {
+				pmCodeBlockBgColor: codeBlocksThemeBgColor
+			},
+			docId,
+			documentApi,
+			linkOptions,
+			editorOptions,
+			menus
+		}"
+	/>
+</WRoot>
+</template>
+
+<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 { reactive, ref, shallowRef } from "vue"
+
+import Editor from "./Editor.vue"
+import EditorDemoControls from "./EditorDemoControls.vue"
+
+import { useHighlightJsTheme } from "../pm/features/CodeBlock/composables/useHighlightJsTheme.js"
+import { defaultCommandBarMenuItems } from "../pm/features/CommandsMenus/commandBarMenuItems.js"
+import CommandBar from "../pm/features/CommandsMenus/components/CommandBar.vue"
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js"
+import BubbleMenuLink from "../pm/features/Link/components/BubbleMenuLink.vue"
+import type { EditorLinkOptions } from "../pm/features/Link/types.js"
+import type { MenuRenderInfo } from "../pm/features/Menus/types"
+import { testExtensions } from "../pm/testSchema.js"
+import { testDocuments } from "../testDocuments.js"
+
+const {
+	theme: codeBlocksTheme,
+	knownThemes: codeBlocksThemeList,
+	themeCss: codeBlocksThemeCss,
+	isDark: codeBlocksThemeIsDark,
+	backgroundColor: codeBlocksThemeBgColor
+} = useHighlightJsTheme()
+
+const editorOptions: Partial<EditorOptions> = {
+	extensions: testExtensions as any
+}
+
+const linkOptions: EditorLinkOptions = {
+	openInternal: href => {
+		window.alert(`This would open an internal link to ${href}.`)
+
+		// eslint-disable-next-line no-console
+		console.log(`Would open internal link to ${href}.`)
+	}
+}
+const fakeSuggestions = reactive<string[]>(["some", "suggestions"])
+
+const menus = shallowRef<Record<string, MenuRenderInfo>>({
+	linkMenu: {
+		component: BubbleMenuLink,
+		props: editor => ({
+			editor,
+			linkSuggestions: fakeSuggestions,
+			getInternalLinkHref(href: string) {
+				return `internal://${href.replace(/[^\w-]/g, "")}`
+			}
+		})
+	},
+	commandBar: {
+		component: CommandBar,
+		props: editor => ({
+			editor,
+			commands: defaultCommandBarMenuItems.commands
+		}),
+		popupOptions: {
+			pinToItemDistance: state => {
+				const { $from, $to } = state.selection
+				const fromNode = $from.node(-1)
+				const toNode = $to.node(-1)
+				// tables don't support selections outside of each cell, so no need to check we're in the same table or anything
+				if (fromNode.type !== toNode.type) {
+					return 0
+				}
+				return (fromNode.type.name.startsWith("table")) ? 120 : 0
+			}
+		}
+	}
+})
+
+const { documentApi } = useTestDocumentApi(
+	editorOptions as any,
+	testDocuments
+)
+const docId = ref("root")
+</script>

package/src/runtime/components/EditorDemoControls.vue

@@ -0,0 +1,38 @@
+<template>
+<div
+	class="
+		w-full
+		flex
+		items-stretch
+		justify-center
+		gap-2
+		[&>*]:rounded-sm
+		[&>*]:p-2
+		[&>*]:border
+		[&>*]:border-neutral-300
+		[&>*]:dark:border-neutral-700
+	"
+>
+	<div class="flex items-center gap-2">
+		<span>
+			Global Theme:
+		</span>
+		<WDarkModeSwitcher/>
+	</div>
+	<CodeBlockThemePicker
+		:code-blocks-theme-list="codeBlocksThemeList"
+		v-model:code-blocks-theme="codeBlocksTheme"
+	/>
+</div>
+</template>
+
+<script setup lang="ts">
+import WDarkModeSwitcher from "@witchcraft/ui/components/LibDarkModeSwitcher"
+
+import CodeBlockThemePicker from "./CodeBlockThemePicker.vue"
+
+defineProps<{
+	codeBlocksThemeList: string[]
+}>()
+const codeBlocksTheme = defineModel<string>("codeBlocksTheme", { required: true })
+</script>

package/src/runtime/components/TestWrapper.vue

@@ -0,0 +1,74 @@
+<template>
+<WRoot :test-wrapper-mode="true">
+	<Editor
+		:data-testid="`test-editor-${testId}`"
+		ref="editor"
+		v-bind="{
+			docId,
+			documentApi,
+			linkOptions,
+			editorOptions
+		}"
+	/>
+	<div class="py-[50px]"/>
+</WRoot>
+</template>
+
+<script setup lang="ts">
+import type { Editor as TipTapEditor, EditorOptions } from "@tiptap/core"
+import WRoot from "@witchcraft/ui/components/LibRoot"
+import { ref, watchEffect } from "vue"
+
+import Editor from "./Editor.vue"
+
+import { useTestDocumentApi } from "../pm/features/DocumentApi/composables/useTestDocumentApi.js"
+import type { EditorLinkOptions } from "../pm/features/Link/types.js"
+import { testExtensions } from "../pm/testSchema.js"
+
+const props = defineProps<{
+	// helps ensure we don't have problems with tests when one fails (unmount is never called and the next test gets confused, things there's duplicate elements)
+	testId: string
+	documents: Record<string, { title: string, content: string }>
+	docId: string
+	loadDelay?: number
+}>()
+
+const editorOptions: Partial<EditorOptions> = {
+	extensions: testExtensions.map(ext => {
+		if (ext.name === "item") {
+			return ext.configure({
+				ensureLastItemIsParagraph: false
+			} as any)
+		}
+		return ext
+	}) as any,
+	enableCoreExtensions: {
+		keymap: false
+	}
+}
+const { documentApi } = useTestDocumentApi(
+	editorOptions as any,
+	props.documents,
+	{ loadDelay: props.loadDelay }
+
+)
+
+const linkOptions: EditorLinkOptions = {
+	openInternal: () => {
+		// eslint-disable-next-line no-console
+		console.log("openning internal")
+	}
+}
+const editor = ref<TipTapEditor | null>(null)
+
+watchEffect(() => {
+	if (editor.value) {
+		// todo declare global
+		;(window as any)[`editor-${props.testId}`] = editor.value
+	}
+})
+</script>
+
+<style>
+@reference "../demo/tailwind.css"
+</style>

package/src/runtime/composables/useEditor.ts

@@ -0,0 +1,29 @@
+import type { EditorOptions } from "@tiptap/core"
+import { Editor } from "@tiptap/core"
+import { onBeforeUnmount, shallowRef } from "vue"
+/**
+ * Unline tiptap's useEditor, this does not auto-mount the editor. Instead the returned `recreate` function must be called manually. This was built with the use of {@link useContentEditor} in mind.
+ */
+export const useEditor = (options: Partial<EditorOptions> = {}) => {
+	const editor = shallowRef<Editor>()
+	function recreate(
+		modifyOptions?: (options: Partial<EditorOptions>) => Partial<EditorOptions>
+	): void {
+		options = modifyOptions?.(options) ?? options
+		editor.value?.destroy()
+		editor.value = new Editor(options)
+	}
+
+	// copied from tiptap
+	onBeforeUnmount(() => {
+		// Cloning root node (and its children) to avoid content being lost by destroy
+		const nodes = editor.value?.options.element
+		const newEl = nodes?.cloneNode(true) as HTMLElement
+
+		nodes?.parentNode?.replaceChild(newEl, nodes)
+
+		editor.value?.destroy()
+	})
+
+	return { editor, recreate }
+}

package/src/runtime/composables/useWindowDebugging.ts

@@ -0,0 +1,20 @@
+import type { Editor } from "@tiptap/core"
+import type { ShallowRef } from "vue"
+import { watch } from "vue"
+
+import { debugNode } from "../pm/utils/internal/debugNode.js"
+import { nodesBetween } from "../pm/utils/nodesBetween.js"
+
+export const useWindowDebugging = (editor: ShallowRef<Editor | undefined>): void => {
+	watch(editor, () => {
+		if (!editor.value) return
+		if (typeof window === "undefined" || typeof process === "undefined") return
+		if (process.env.NODE_ENV === "development" && editor.value !== undefined) {
+			const w = window as any
+			w.editor = editor.value
+			w.tr = () => editor.value!.state.tr
+			w.debugNode = debugNode
+			w.nodesBetween = nodesBetween
+		}
+	})
+}