wiki-viewer 1.0.0

package/.next/standalone/src/components/editor/extensions/drag-handle.ts

@@ -0,0 +1,325 @@
+import { Extension } from "@tiptap/core";
+import {
+	NodeSelection,
+	Plugin,
+	PluginKey,
+	TextSelection,
+	type Transaction,
+} from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+
+/**
+ * Move the top-level block containing the current selection up or down
+ * by one sibling. Returns true if the doc was mutated. Used for keyboard
+ * reorder (Alt+Shift+Up/Down) so non-mouse users get parity with the
+ * drag handle (audit #102).
+ */
+function moveCurrentBlock(
+	state: EditorView["state"],
+	dispatch: ((tr: Transaction) => void) | undefined,
+	direction: "up" | "down",
+): boolean {
+	const { selection, doc } = state;
+	// Resolve the top-level block that holds the current selection. We walk
+	// up to depth 1 because doc → top-level-block → … is the layout we care
+	// about; nested list items still move as siblings of their parent block.
+	let $pos = doc.resolve(selection.from);
+	while ($pos.depth > 1) {
+		$pos = doc.resolve($pos.before($pos.depth));
+	}
+	if ($pos.depth === 0) return false;
+
+	const blockPos = $pos.before(1);
+	const block = doc.nodeAt(blockPos);
+	if (!block) return false;
+
+	const parent = doc;
+	const indexInParent = $pos.index(0);
+	const siblingIndex =
+		direction === "up" ? indexInParent - 1 : indexInParent + 1;
+	if (siblingIndex < 0 || siblingIndex >= parent.childCount) return false;
+
+	const sibling = parent.child(siblingIndex);
+	let tr = state.tr;
+
+	// Remove the block, then re-insert it on the other side of the sibling.
+	// Computing the insertion target *before* the cut keeps positions stable.
+	const blockEnd = blockPos + block.nodeSize;
+	const siblingStart =
+		direction === "up" ? blockPos - sibling.nodeSize : blockEnd;
+	const siblingEnd =
+		direction === "up" ? blockPos : blockEnd + sibling.nodeSize;
+
+	if (direction === "up") {
+		tr = tr.delete(blockPos, blockEnd);
+		tr = tr.insert(siblingStart, block);
+		// After re-insert the block lives at siblingStart; restore selection on it.
+		tr = tr.setSelection(NodeSelection.create(tr.doc, siblingStart));
+	} else {
+		tr = tr.delete(blockPos, blockEnd);
+		// After deletion the sibling shifts left by block.nodeSize, so the
+		// insertion target is siblingEnd - block.nodeSize.
+		const insertAt = siblingEnd - block.nodeSize;
+		tr = tr.insert(insertAt, block);
+		tr = tr.setSelection(NodeSelection.create(tr.doc, insertAt));
+	}
+
+	if (dispatch) dispatch(tr.scrollIntoView());
+	return true;
+}
+
+const HANDLE_ID = "cabinet-drag-handle";
+const ADD_BTN_ID = "cabinet-gutter-add";
+
+function getOrCreateAddButton(): HTMLButtonElement {
+	let el = document.getElementById(ADD_BTN_ID) as HTMLButtonElement | null;
+	if (!el) {
+		el = document.createElement("button");
+		el.id = ADD_BTN_ID;
+		el.type = "button";
+		el.setAttribute("aria-label", "Add block");
+		el.title = "Add block";
+		el.innerHTML = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 1V9M1 5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+		Object.assign(el.style, {
+			position: "absolute",
+			display: "none",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "18px",
+			height: "18px",
+			cursor: "pointer",
+			borderRadius: "4px",
+			color: "var(--muted-foreground)",
+			opacity: "0.55",
+			zIndex: "40",
+			transition: "opacity 120ms ease, background 120ms ease",
+			background: "transparent",
+			border: "none",
+			padding: "0",
+		} as Partial<CSSStyleDeclaration>);
+		el.addEventListener("mouseenter", () => {
+			if (!el) return;
+			el.style.opacity = "1";
+			el.style.background = "var(--muted)";
+		});
+		el.addEventListener("mouseleave", () => {
+			if (!el) return;
+			el.style.opacity = "0.55";
+			el.style.background = "transparent";
+		});
+		document.body.appendChild(el);
+	}
+	return el;
+}
+
+function findBlockAt(view: EditorView, coords: { left: number; top: number }) {
+	const pos = view.posAtCoords(coords);
+	if (!pos) return null;
+	let $pos = view.state.doc.resolve(pos.inside >= 0 ? pos.inside : pos.pos);
+	while ($pos.depth > 0 && !$pos.parent.type.isBlock) {
+		$pos = view.state.doc.resolve($pos.before());
+	}
+	// Walk up until we find a top-level child of the doc
+	let depth = $pos.depth;
+	while (depth > 1) {
+		const parent = view.state.doc.resolve($pos.before(depth)).parent;
+		if (parent.type.name === "doc") break;
+		depth -= 1;
+	}
+	const nodePos = depth === 0 ? 0 : $pos.before(Math.max(depth, 1));
+	const node = view.state.doc.nodeAt(nodePos);
+	if (!node) return null;
+	const dom = view.nodeDOM(nodePos) as HTMLElement | null;
+	return { pos: nodePos, node, dom };
+}
+
+function getOrCreateHandle(): HTMLDivElement {
+	let el = document.getElementById(HANDLE_ID) as HTMLDivElement | null;
+	if (!el) {
+		el = document.createElement("div");
+		el.id = HANDLE_ID;
+		el.setAttribute("data-drag-handle", "true");
+		el.draggable = true;
+		el.innerHTML = `<svg width="10" height="16" viewBox="0 0 10 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="3" r="1.2"/><circle cx="2.5" cy="8" r="1.2"/><circle cx="2.5" cy="13" r="1.2"/><circle cx="7.5" cy="3" r="1.2"/><circle cx="7.5" cy="8" r="1.2"/><circle cx="7.5" cy="13" r="1.2"/></svg>`;
+		Object.assign(el.style, {
+			position: "absolute",
+			display: "none",
+			cursor: "grab",
+			padding: "2px 4px",
+			borderRadius: "4px",
+			color: "var(--muted-foreground)",
+			opacity: "0.55",
+			zIndex: "40",
+			userSelect: "none",
+			transition: "opacity 120ms ease",
+		} as CSSStyleDeclaration);
+		el.addEventListener("mouseenter", () => {
+			if (el) el.style.opacity = "1";
+		});
+		el.addEventListener("mouseleave", () => {
+			if (el) el.style.opacity = "0.55";
+		});
+		document.body.appendChild(el);
+	}
+	return el;
+}
+
+export const DragHandle = Extension.create({
+	name: "dragHandle",
+
+	addKeyboardShortcuts() {
+		// Audit #102: drag handle is mouse-only. Add Alt+Shift+ArrowUp /
+		// Alt+Shift+ArrowDown so keyboard users can reorder blocks too.
+		return {
+			"Mod-Alt-ArrowUp": ({ editor }) =>
+				moveCurrentBlock(editor.state, editor.view.dispatch, "up"),
+			"Mod-Alt-ArrowDown": ({ editor }) =>
+				moveCurrentBlock(editor.state, editor.view.dispatch, "down"),
+			"Alt-Shift-ArrowUp": ({ editor }) =>
+				moveCurrentBlock(editor.state, editor.view.dispatch, "up"),
+			"Alt-Shift-ArrowDown": ({ editor }) =>
+				moveCurrentBlock(editor.state, editor.view.dispatch, "down"),
+		};
+	},
+
+	addProseMirrorPlugins() {
+		let currentBlock: {
+			pos: number;
+			node: { nodeSize: number };
+			dom: HTMLElement;
+		} | null = null;
+
+		const handle = typeof document !== "undefined" ? getOrCreateHandle() : null;
+		const addBtn =
+			typeof document !== "undefined" ? getOrCreateAddButton() : null;
+
+		const hide = () => {
+			if (handle) handle.style.display = "none";
+			if (addBtn) addBtn.style.display = "none";
+			currentBlock = null;
+		};
+
+		return [
+			new Plugin({
+				key: new PluginKey("cabinetDragHandle"),
+				view: (view) => {
+					if (!handle) return { destroy: () => {} };
+
+					const onMouseMove = (event: MouseEvent) => {
+						if (!view.editable) return;
+						const rect = view.dom.getBoundingClientRect();
+						if (
+							event.clientX < rect.left - 60 ||
+							event.clientX > rect.right + 60 ||
+							event.clientY < rect.top ||
+							event.clientY > rect.bottom
+						) {
+							hide();
+							return;
+						}
+						// Probe inside the editor with clientX clamped to content
+						const probeX = Math.max(
+							rect.left + 20,
+							Math.min(rect.right - 20, event.clientX),
+						);
+						const block = findBlockAt(view, {
+							left: probeX,
+							top: event.clientY,
+						});
+						if (!block?.dom || !(block.dom instanceof HTMLElement)) {
+							hide();
+							return;
+						}
+						currentBlock = block as typeof currentBlock;
+						const domRect = block.dom.getBoundingClientRect();
+						handle.style.display = "flex";
+						handle.style.top = `${window.scrollY + domRect.top + 4}px`;
+						handle.style.left = `${window.scrollX + domRect.left - 22}px`;
+						if (addBtn) {
+							addBtn.style.display = "flex";
+							addBtn.style.top = `${window.scrollY + domRect.top + 4}px`;
+							addBtn.style.left = `${window.scrollX + domRect.left - 44}px`;
+						}
+					};
+
+					const onMouseLeave = () => hide();
+
+					const onAddClick = () => {
+						if (!currentBlock) return;
+						// Insert a new empty paragraph after the current block, then open slash menu
+						const afterPos = currentBlock.pos + currentBlock.node.nodeSize;
+						const insertable = afterPos <= view.state.doc.content.size;
+						const tr = view.state.tr;
+						if (insertable) {
+							// Place cursor at end of current block content (before node closing mark)
+							const endContent = afterPos - 1;
+							const sel = TextSelection.create(
+								view.state.doc,
+								Math.min(endContent, view.state.doc.content.size),
+							);
+							view.dispatch(tr.setSelection(sel));
+						}
+						view.focus();
+						// Split the block to create a new paragraph, then trigger slash menu
+						const splitTr = view.state.tr.split(view.state.selection.from);
+						view.dispatch(splitTr);
+						// Dispatch on view.dom so event.target is the ProseMirror element;
+						// this lets the global "/" hotkey guard (isEditableTarget) skip it
+						// while the slash-commands capture listener on window still fires.
+						view.dom.dispatchEvent(
+							new KeyboardEvent("keydown", {
+								key: "/",
+								bubbles: true,
+								cancelable: true,
+							}),
+						);
+					};
+
+					const onDragStart = (event: DragEvent) => {
+						if (!currentBlock || !event.dataTransfer) return;
+						const { pos, dom } = currentBlock;
+
+						// Select the block so PM treats it as the drag source
+						const tr = view.state.tr.setSelection(
+							NodeSelection.create(view.state.doc, pos),
+						);
+						view.dispatch(tr);
+
+						const slice = view.state.selection.content();
+						// Serialize slice content to HTML for external drop targets
+						const tmp = document.createElement("div");
+						tmp.appendChild(
+							view
+								.someProp("clipboardSerializer")
+								?.serializeFragment(slice.content) ??
+								document.createElement("div"),
+						);
+						event.dataTransfer.clearData();
+						event.dataTransfer.setData("text/html", tmp.innerHTML);
+						event.dataTransfer.setData("text/plain", dom.textContent ?? "");
+						event.dataTransfer.effectAllowed = "copyMove";
+						event.dataTransfer.setDragImage(dom, 0, 0);
+
+						// Hand PM the slice so its built-in drop handler performs the move
+						view.dragging = { slice, move: true };
+					};
+
+					window.addEventListener("mousemove", onMouseMove);
+					view.dom.addEventListener("mouseleave", onMouseLeave);
+					handle.addEventListener("dragstart", onDragStart);
+					if (addBtn) addBtn.addEventListener("click", onAddClick);
+
+					return {
+						destroy() {
+							window.removeEventListener("mousemove", onMouseMove);
+							view.dom.removeEventListener("mouseleave", onMouseLeave);
+							handle.removeEventListener("dragstart", onDragStart);
+							if (addBtn) addBtn.removeEventListener("click", onAddClick);
+							hide();
+						},
+					};
+				},
+			}),
+		];
+	},
+});

package/.next/standalone/src/components/editor/extensions/heading-anchors.ts

@@ -0,0 +1,55 @@
+import { Extension } from "@tiptap/core";
+import type { Node } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+function slugify(text: string): string {
+	return text
+		.toLowerCase()
+		.replace(/[^\w\s-]/g, "")
+		.trim()
+		.replace(/\s+/g, "-")
+		.replace(/-+/g, "-");
+}
+
+const HEADING_ANCHOR_KEY = new PluginKey("headingAnchors");
+
+function buildDecorations(doc: Node): DecorationSet {
+	const decos: Decoration[] = [];
+	const seen = new Map<string, number>();
+	doc.descendants((node, pos) => {
+		if (node.type.name !== "heading") return;
+		const base = slugify(node.textContent);
+		if (!base) return;
+		const count = seen.get(base) ?? 0;
+		seen.set(base, count + 1);
+		const id = count === 0 ? base : `${base}-${count}`;
+		decos.push(Decoration.node(pos, pos + node.nodeSize, { id }));
+	});
+	return DecorationSet.create(doc, decos);
+}
+
+export const HeadingAnchors = Extension.create({
+	name: "headingAnchors",
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				key: HEADING_ANCHOR_KEY,
+				state: {
+					init(_, { doc }) {
+						return buildDecorations(doc);
+					},
+					apply(tr, old) {
+						return tr.docChanged ? buildDecorations(tr.doc) : old;
+					},
+				},
+				props: {
+					decorations(state) {
+						return HEADING_ANCHOR_KEY.getState(state) as DecorationSet;
+					},
+				},
+			}),
+		];
+	},
+});

package/.next/standalone/src/components/editor/extensions/resizable-image.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import Image from "@tiptap/extension-image";
+import {
+	type NodeViewProps,
+	NodeViewWrapper,
+	ReactNodeViewRenderer,
+} from "@tiptap/react";
+import { useCallback, useRef, useState } from "react";
+
+interface ImageAttrs {
+	src: string;
+	alt?: string | null;
+	title?: string | null;
+	width?: string | number | null;
+	align?: "left" | "center" | "right" | null;
+}
+
+function ResizableImageComponent(props: NodeViewProps) {
+	const { node, updateAttributes, selected, editor } = props;
+	const attrs = node.attrs as ImageAttrs;
+	const imgRef = useRef<HTMLImageElement | null>(null);
+	const wrapperRef = useRef<HTMLDivElement | null>(null);
+	const [liveWidth, setLiveWidth] = useState<number | null>(null);
+
+	const align = attrs.align ?? "center";
+
+	const beginResize = useCallback(
+		(e: React.PointerEvent<HTMLDivElement>, anchor: "left" | "right") => {
+			if (!editor.isEditable) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const img = imgRef.current;
+			const wrap = wrapperRef.current;
+			if (!img || !wrap) return;
+
+			const startX = e.clientX;
+			const startWidth = img.getBoundingClientRect().width;
+			const containerWidth =
+				wrap.parentElement?.getBoundingClientRect().width ?? 800;
+
+			const onMove = (ev: PointerEvent) => {
+				const delta =
+					anchor === "right" ? ev.clientX - startX : startX - ev.clientX;
+				const next = Math.max(80, Math.min(containerWidth, startWidth + delta));
+				setLiveWidth(next);
+			};
+			const onUp = () => {
+				window.removeEventListener("pointermove", onMove);
+				window.removeEventListener("pointerup", onUp);
+				setLiveWidth((curr) => {
+					if (curr != null) {
+						updateAttributes({ width: Math.round(curr) });
+					}
+					return null;
+				});
+			};
+			window.addEventListener("pointermove", onMove);
+			window.addEventListener("pointerup", onUp);
+		},
+		[editor.isEditable, updateAttributes],
+	);
+
+	const widthStyle = (() => {
+		if (liveWidth != null) return `${Math.round(liveWidth)}px`;
+		if (typeof attrs.width === "number") return `${attrs.width}px`;
+		if (typeof attrs.width === "string" && attrs.width) return attrs.width;
+		return undefined;
+	})();
+
+	const alignClass =
+		align === "left" ? "mr-auto" : align === "right" ? "ml-auto" : "mx-auto";
+
+	return (
+		<NodeViewWrapper
+			as="div"
+			className={`resizable-image my-3 ${alignClass}`}
+			data-align={align}
+			style={{ width: widthStyle ?? "fit-content", maxWidth: "100%" }}
+		>
+			<div
+				ref={wrapperRef}
+				className={`relative group inline-block max-w-full ${selected ? "ring-2 ring-primary rounded-md" : ""}`}
+				contentEditable={false}
+			>
+				<img
+					ref={imgRef}
+					src={attrs.src}
+					alt={attrs.alt ?? ""}
+					title={attrs.title ?? undefined}
+					className="block rounded-md max-w-full h-auto"
+					style={{ width: widthStyle }}
+					draggable={false}
+				/>
+				{editor.isEditable && (
+					<>
+						<div
+							aria-label="Resize from left"
+							onPointerDown={(e) => beginResize(e, "left")}
+							className="absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+						>
+							<div className="w-1 h-8 bg-card border border-border rounded-full shadow" />
+						</div>
+						<div
+							aria-label="Resize from right"
+							onPointerDown={(e) => beginResize(e, "right")}
+							className="absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+						>
+							<div className="w-1 h-8 bg-card border border-border rounded-full shadow" />
+						</div>
+						{liveWidth != null && (
+							<div className="absolute top-1 right-1 text-[10px] px-1.5 py-0.5 rounded bg-primary/80 text-primary-foreground font-mono">
+								{Math.round(liveWidth)}px
+							</div>
+						)}
+					</>
+				)}
+			</div>
+		</NodeViewWrapper>
+	);
+}
+
+export const ResizableImage = Image.extend({
+	name: "image",
+	draggable: true,
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			width: {
+				default: null,
+				parseHTML: (element) => {
+					const w = element.getAttribute("width") ?? element.style.width;
+					if (!w) return null;
+					const match = /^(\d+)(px)?$/.exec(w);
+					return match ? Number(match[1]) : w;
+				},
+				renderHTML: (attributes: ImageAttrs) => {
+					if (!attributes.width) return {};
+					const w =
+						typeof attributes.width === "number"
+							? `${attributes.width}px`
+							: attributes.width;
+					return { style: `width: ${w}` };
+				},
+			},
+			align: {
+				default: null,
+				parseHTML: (element) => element.getAttribute("data-align"),
+				renderHTML: (attributes: ImageAttrs) => {
+					if (!attributes.align) return {};
+					return { "data-align": attributes.align };
+				},
+			},
+		};
+	},
+	addNodeView() {
+		return ReactNodeViewRenderer(ResizableImageComponent);
+	},
+});

package/.next/standalone/src/components/editor/extensions.ts

@@ -0,0 +1,148 @@
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextAlign from "@tiptap/extension-text-align";
+import StarterKit from "@tiptap/starter-kit";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import go from "highlight.js/lib/languages/go";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import shell from "highlight.js/lib/languages/shell";
+import sql from "highlight.js/lib/languages/sql";
+import typescript from "highlight.js/lib/languages/typescript";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import { createLowlight } from "lowlight";
+import { CalloutExtension } from "./callout-extension";
+import { DragHandle } from "./extensions/drag-handle";
+import { HeadingAnchors } from "./extensions/heading-anchors";
+import { ResizableImage } from "./extensions/resizable-image";
+import { WikiLink } from "./wiki-link-extension";
+
+// Curated language set: covers ~95% of real-world snippets. The full `common`
+// import bundles 35+ language parsers (~70 kB gzipped) that users
+// rarely touch — swapping it for this 13-language list cuts the editor chunk
+// meaningfully. Add languages as demand grows.
+const lowlight = createLowlight({
+	bash,
+	css,
+	go,
+	javascript,
+	json,
+	markdown,
+	python,
+	rust,
+	shell,
+	sql,
+	typescript,
+	xml,
+	yaml,
+});
+
+export const editorExtensions = [
+	StarterKit.configure({
+		heading: { levels: [1, 2, 3, 4] },
+		codeBlock: false, // replaced by CodeBlockLowlight
+		// StarterKit v3 bundles Link + Underline — we register our own customized
+		// versions below, so disable the bundled copies to avoid duplicate-extension warnings.
+		link: false,
+		underline: false,
+	}),
+	CodeBlockLowlight.configure({
+		lowlight,
+		HTMLAttributes: {
+			class: "rounded-md bg-muted p-4 font-mono text-sm",
+		},
+	}),
+	Placeholder.configure({
+		placeholder: "Start writing, or press '/' for commands...",
+	}),
+	ResizableImage.configure({
+		HTMLAttributes: {
+			class: "rounded-lg max-w-full",
+		},
+		allowBase64: false,
+	}),
+	Table.configure({
+		resizable: true,
+		lastColumnResizable: false,
+		HTMLAttributes: {
+			class: "border-collapse w-full",
+		},
+	}),
+	TableRow,
+	TableCell,
+	TableHeader,
+	TaskList.configure({
+		HTMLAttributes: {
+			class: "task-list",
+		},
+	}),
+	TaskItem.configure({
+		nested: true,
+	}),
+	Link.configure({
+		openOnClick: false, // we handle clicks ourselves in the editor
+		HTMLAttributes: {
+			class: "text-primary underline cursor-pointer",
+		},
+	}).extend({
+		parseHTML() {
+			return [
+				{
+					tag: 'a[href]:not([data-wiki-link="true"])',
+				},
+			];
+		},
+		// Move the link shortcut off Mod-K — that key is owned by the global
+		// search palette everywhere in the app, including inside the editor.
+		addKeyboardShortcuts() {
+			return {
+				"Mod-e": () => {
+					const { state } = this.editor;
+					const { from, to } = state.selection;
+					if (from === to) return false;
+					const prevUrl = this.editor.getAttributes("link").href ?? "";
+					const url =
+						typeof window !== "undefined"
+							? window.prompt("Link URL", prevUrl)
+							: null;
+					if (url === null) return false;
+					if (url === "") {
+						return this.editor
+							.chain()
+							.focus()
+							.extendMarkRange("link")
+							.unsetLink()
+							.run();
+					}
+					return this.editor
+						.chain()
+						.focus()
+						.extendMarkRange("link")
+						.setLink({ href: url })
+						.run();
+				},
+			};
+		},
+	}),
+	CalloutExtension,
+	TextAlign.configure({ types: ["heading", "paragraph"] }),
+	Subscript,
+	Superscript,
+	DragHandle,
+	HeadingAnchors,
+	WikiLink,
+];