@olympusoss/canvas 2.20.2 → 4.0.0

package/src/components/organisms/editors/markdown-editor.tsx

@@ -1,153 +0,0 @@
-"use client";
-
-/* c8 ignore file -- CodeMirror requires real DOM measurements; jsdom-incompatible.
- * Verified visually in the docs site. */
-
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-import { markdown } from "@codemirror/lang-markdown";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, placeholder as placeholderExt } from "@codemirror/view";
-import * as React from "react";
-
-import { cn } from "../../../lib/utils";
-import { renderMarkdown } from "./markdown-renderer";
-import { PROSE_CANVAS_CLASSES } from "./prose-canvas-classes";
-import { MdToolbar } from "./toolbar/md-toolbar";
-import { useCodemirrorTheme } from "./use-codemirror-theme";
-
-export interface MarkdownEditorProps {
-	value: string;
-	onChange: (next: string) => void;
-	placeholder?: string;
-	disabled?: boolean;
-	readonly?: boolean;
-	ariaLabel: string;
-	className?: string;
-	/** Show the formatting toolbar above the editor. Default true. */
-	toolbar?: boolean;
-	/** Render a side-by-side preview pane that re-renders on every keystroke. Default false. */
-	preview?: boolean;
-	/** Pixel height (or any CSS length) of the editing surface. Default `240`. */
-	height?: number | string;
-}
-
-/**
- * Markdown editor backed by CodeMirror 6 with markdown syntax highlighting,
- * a canvas-styled toolbar, and an optional sanitized preview pane.
- *
- * Controlled component. `value` is the markdown source string; `onChange`
- * fires on every doc change.
- */
-const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
-	(
-		{
-			value,
-			onChange,
-			placeholder,
-			disabled = false,
-			readonly = false,
-			ariaLabel,
-			className,
-			toolbar = true,
-			preview = false,
-			height = 240,
-		},
-		ref,
-	) => {
-		const editorParentRef = React.useRef<HTMLDivElement>(null);
-		const viewRef = React.useRef<EditorView | null>(null);
-		const onChangeRef = React.useRef(onChange);
-		onChangeRef.current = onChange;
-		const theme = useCodemirrorTheme();
-		const [previewOpen, setPreviewOpen] = React.useState(preview);
-		const [view, setView] = React.useState<EditorView | null>(null);
-
-		// Mount/teardown the CodeMirror view whenever extensions change.
-		React.useEffect(() => {
-			if (!editorParentRef.current) return;
-			const extensions = [
-				history(),
-				keymap.of([...defaultKeymap, ...historyKeymap]),
-				markdown(),
-				EditorView.lineWrapping,
-				theme,
-				EditorView.editable.of(!disabled),
-				EditorState.readOnly.of(disabled || readonly),
-				placeholder ? placeholderExt(placeholder) : [],
-				EditorView.updateListener.of((update) => {
-					if (update.docChanged) {
-						onChangeRef.current(update.state.doc.toString());
-					}
-				}),
-			].flat();
-
-			const v = new EditorView({
-				state: EditorState.create({ doc: value, extensions }),
-				parent: editorParentRef.current,
-			});
-			viewRef.current = v;
-			setView(v);
-			return () => {
-				v.destroy();
-				viewRef.current = null;
-				setView(null);
-			};
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [theme, disabled, readonly, placeholder]);
-
-		// Sync external `value` changes into the editor (without echoing back).
-		React.useEffect(() => {
-			const v = viewRef.current;
-			if (!v) return;
-			const current = v.state.doc.toString();
-			if (current !== value) {
-				v.dispatch({
-					changes: { from: 0, to: current.length, insert: value },
-				});
-			}
-		}, [value]);
-
-		const heightStyle = typeof height === "number" ? `${height}px` : height;
-
-		return (
-			<div
-				ref={ref}
-				role="group"
-				aria-label={ariaLabel}
-				className={cn(
-					"overflow-hidden rounded-md border border-input bg-background text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring",
-					disabled && "pointer-events-none opacity-50",
-					className,
-				)}
-			>
-				{toolbar && (
-					<MdToolbar
-						view={view}
-						previewActive={previewOpen}
-						onTogglePreview={() => setPreviewOpen((p) => !p)}
-						allowPreview
-					/>
-				)}
-				<div
-					className={cn("grid", previewOpen ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1")}
-					style={{ height: heightStyle }}
-				>
-					<div ref={editorParentRef} className="overflow-y-auto" />
-					{previewOpen && (
-						<div
-							className={cn(
-								"overflow-y-auto border-l border-border bg-muted/20 px-4 py-3",
-								PROSE_CANVAS_CLASSES,
-							)}
-							// biome-ignore lint/security/noDangerouslySetInnerHtml: output is sanitized by DOMPurify in renderMarkdown
-							dangerouslySetInnerHTML={{ __html: renderMarkdown(value) }}
-						/>
-					)}
-				</div>
-			</div>
-		);
-	},
-);
-MarkdownEditor.displayName = "MarkdownEditor";
-
-export { MarkdownEditor };

package/src/components/organisms/editors/markdown-renderer.ts

@@ -1,27 +0,0 @@
-"use client";
-
-/* c8 ignore file -- DOMPurify + marked require a real DOM; jsdom-incompatible.
- * Verified visually in the docs site. */
-
-import DOMPurify from "dompurify";
-import { marked } from "marked";
-
-// GFM (tables, task lists, autolinks) is on by default in marked v15+ but
-// kept explicit for clarity and forward-compat.
-marked.setOptions({ gfm: true, breaks: false });
-
-/**
- * Convert a markdown string to a DOMPurify-sanitized HTML string suitable for
- * `dangerouslySetInnerHTML`. Strips `<script>`, inline event handlers, and
- * `javascript:` URLs.
- *
- * Used by `<MarkdownEditor preview>` for the live preview pane. The editor
- * is a `"use client"` component, so this only ever runs in the browser.
- */
-export function renderMarkdown(source: string): string {
-	if (typeof window === "undefined") return "";
-	const html = marked.parse(source, { async: false }) as string;
-	return DOMPurify.sanitize(html, {
-		ADD_ATTR: ["target", "rel"],
-	});
-}

package/src/components/organisms/editors/prose-canvas-classes.ts

@@ -1,45 +0,0 @@
-/**
- * Tailwind class string applied to the editable surface of `RichTextEditor`
- * and the rendered preview of `MarkdownEditor`. Replaces the role of
- * `@tailwindcss/typography`'s `prose` plugin with token-aware styles so the
- * surface respects whichever canvas theme is active.
- *
- * Use this on a wrapping `<div>` around `<EditorContent />` (Tiptap) or
- * around the rendered HTML output (markdown preview).
- */
-export const PROSE_CANVAS_CLASSES = [
-	// base text
-	"text-foreground text-sm leading-relaxed",
-	// paragraphs
-	"[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
-	// headings
-	"[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-2xl [&_h1]:font-semibold [&_h1]:tracking-tight [&_h1]:text-foreground",
-	"[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:tracking-tight [&_h2]:text-foreground",
-	"[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-lg [&_h3]:font-semibold [&_h3]:text-foreground",
-	"[&_h4]:mt-3 [&_h4]:mb-1 [&_h4]:text-base [&_h4]:font-semibold [&_h4]:text-foreground",
-	"[&_h1:first-child]:mt-0 [&_h2:first-child]:mt-0 [&_h3:first-child]:mt-0 [&_h4:first-child]:mt-0",
-	// inline emphasis
-	"[&_strong]:font-semibold [&_strong]:text-foreground",
-	"[&_em]:italic",
-	"[&_u]:underline [&_u]:underline-offset-2",
-	"[&_s]:line-through",
-	// links — brand color, fades slightly on hover (no underline)
-	"[&_a]:text-brand [&_a]:transition-colors hover:[&_a]:text-brand/80",
-	// code
-	"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-foreground",
-	"[&_pre]:rounded-md [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted/50 [&_pre]:p-3 [&_pre]:my-3 [&_pre]:overflow-x-auto",
-	"[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-sm",
-	// lists
-	"[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
-	"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6",
-	"[&_li]:my-1 [&_li_p]:my-0",
-	"[&_li::marker]:text-muted-foreground",
-	// blockquote
-	"[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:my-3 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
-	// horizontal rule
-	"[&_hr]:my-4 [&_hr]:border-border",
-	// tables (GFM)
-	"[&_table]:my-3 [&_table]:w-full [&_table]:text-sm [&_table]:border-collapse",
-	"[&_th]:border [&_th]:border-border [&_th]:bg-muted/40 [&_th]:px-3 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-semibold",
-	"[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-1.5",
-].join(" ");

package/src/components/organisms/editors/rich-text-editor.tsx

@@ -1,126 +0,0 @@
-"use client";
-
-/* c8 ignore file -- Tiptap/ProseMirror requires real DOM measurements;
- * jsdom-incompatible. Verified visually in the docs site. */
-
-import { Link } from "@tiptap/extension-link";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { EditorContent, type Extensions, useEditor } from "@tiptap/react";
-import { StarterKit } from "@tiptap/starter-kit";
-import * as React from "react";
-
-import { cn } from "../../../lib/utils";
-import { PROSE_CANVAS_CLASSES } from "./prose-canvas-classes";
-import { RteToolbar, type ToolbarItemId } from "./toolbar/rte-toolbar";
-
-export interface RichTextEditorProps {
-	value: string;
-	onChange: (next: string) => void;
-	placeholder?: string;
-	disabled?: boolean;
-	readonly?: boolean;
-	ariaLabel: string;
-	className?: string;
-	/** Show the toolbar above the editor. Default true. */
-	toolbar?: boolean;
-	/** Whitelist of toolbar buttons. Default: all. See `TOOLBAR_ITEM_IDS`. */
-	toolbarItems?: readonly ToolbarItemId[];
-	/** Output format for `value` / `onChange`. Default `"html"`. */
-	outputFormat?: "html" | "json";
-	/** Pixel height (or any CSS length) of the editing surface. Default `240`. */
-	height?: number | string;
-	/** Extra Tiptap extensions appended after the canvas defaults. */
-	extensions?: Extensions;
-}
-
-/**
- * Rich text editor backed by Tiptap (ProseMirror). Ships with bold / italic /
- * strike / code / list / blockquote / code-block / link / heading levels.
- *
- * Controlled component: `value` is an HTML string by default, or a JSON string
- * when `outputFormat="json"`. `onChange` fires on every doc update.
- */
-const RichTextEditor = React.forwardRef<HTMLDivElement, RichTextEditorProps>(
-	(
-		{
-			value,
-			onChange,
-			placeholder,
-			disabled = false,
-			readonly = false,
-			ariaLabel,
-			className,
-			toolbar = true,
-			toolbarItems,
-			outputFormat = "html",
-			height = 240,
-			extensions: extraExtensions,
-		},
-		ref,
-	) => {
-		const onChangeRef = React.useRef(onChange);
-		onChangeRef.current = onChange;
-
-		const editor = useEditor({
-			extensions: [
-				StarterKit,
-				Link.configure({ openOnClick: false, autolink: true }),
-				...(placeholder ? [Placeholder.configure({ placeholder })] : []),
-				...(extraExtensions ?? []),
-			],
-			content: value,
-			editable: !disabled && !readonly,
-			editorProps: {
-				attributes: {
-					"aria-label": ariaLabel,
-					"aria-multiline": "true",
-					role: "textbox",
-					class: cn("min-h-full w-full px-4 py-3 outline-none", PROSE_CANVAS_CLASSES),
-				},
-			},
-			onUpdate: ({ editor: e }) => {
-				const next = outputFormat === "json" ? JSON.stringify(e.getJSON()) : e.getHTML();
-				onChangeRef.current(next);
-			},
-			immediatelyRender: false,
-		});
-
-		// Keep `editable` in sync with prop changes.
-		React.useEffect(() => {
-			editor?.setEditable(!disabled && !readonly);
-		}, [editor, disabled, readonly]);
-
-		// Sync external `value` changes into the editor (without echoing back).
-		React.useEffect(() => {
-			if (!editor) return;
-			const current = outputFormat === "json" ? JSON.stringify(editor.getJSON()) : editor.getHTML();
-			if (current !== value) {
-				const incoming = outputFormat === "json" && value ? JSON.parse(value) : value;
-				editor.commands.setContent(incoming, false);
-			}
-		}, [editor, value, outputFormat]);
-
-		const heightStyle = typeof height === "number" ? `${height}px` : height;
-
-		return (
-			<div
-				ref={ref}
-				role="group"
-				aria-label={ariaLabel}
-				className={cn(
-					"overflow-hidden rounded-md border border-input bg-background text-sm shadow-sm focus-within:ring-1 focus-within:ring-ring",
-					disabled && "pointer-events-none opacity-50",
-					className,
-				)}
-			>
-				{toolbar && <RteToolbar editor={editor} items={toolbarItems} />}
-				<div className="overflow-y-auto" style={{ height: heightStyle }}>
-					<EditorContent editor={editor} className="h-full" />
-				</div>
-			</div>
-		);
-	},
-);
-RichTextEditor.displayName = "RichTextEditor";
-
-export { RichTextEditor };

package/src/components/organisms/editors/toolbar/md-toolbar.tsx

@@ -1,129 +0,0 @@
-"use client";
-
-/* c8 ignore file -- CodeMirror toolbar requires real DOM; jsdom-incompatible. */
-
-import { EditorSelection } from "@codemirror/state";
-import type { EditorView } from "@codemirror/view";
-
-import { Icon } from "../../../atoms/icon";
-import { Toggle } from "../../../atoms/toggle";
-import { ToolbarDivider, ToolbarShell } from "./toolbar-shell";
-
-export interface MdToolbarProps {
-	/** CodeMirror view ref (held by the editor). */
-	view: EditorView | null;
-	/** Whether the preview pane is currently shown. */
-	previewActive: boolean;
-	/** Callback when the user clicks the preview toggle. */
-	onTogglePreview?: () => void;
-	/** Hide the preview button entirely (when `<MarkdownEditor preview>` isn't enabled at all). */
-	allowPreview: boolean;
-}
-
-/**
- * Wrap the current selection (or insert at the cursor) with `prefix`/`suffix`.
- * Used for **bold**, *italic*, `code`, and link insertion.
- */
-function wrap(view: EditorView | null, prefix: string, suffix = prefix) {
-	if (!view) return;
-	const { state } = view;
-	const changes = state.changeByRange((range) => ({
-		changes: [
-			{ from: range.from, insert: prefix },
-			{ from: range.to, insert: suffix },
-		],
-		range: range.empty
-			? EditorSelection.cursor(range.from + prefix.length)
-			: EditorSelection.range(range.from + prefix.length, range.to + prefix.length),
-	}));
-	view.dispatch({ ...changes, userEvent: "input.format" });
-	view.focus();
-}
-
-/** Toggle a per-line prefix (e.g. `- ` or `1. `) on every line in the selection. */
-function togglePrefix(view: EditorView | null, prefix: string) {
-	if (!view) return;
-	const { state } = view;
-	const changes = state.changeByRange((range) => {
-		const startLine = state.doc.lineAt(range.from);
-		const endLine = state.doc.lineAt(range.to);
-		const inserts: { from: number; insert: string }[] = [];
-		for (let n = startLine.number; n <= endLine.number; n++) {
-			const line = state.doc.line(n);
-			if (!line.text.startsWith(prefix)) {
-				inserts.push({ from: line.from, insert: prefix });
-			}
-		}
-		return {
-			changes: inserts,
-			range,
-		};
-	});
-	view.dispatch({ ...changes, userEvent: "input.format" });
-	view.focus();
-}
-
-/** Insert a markdown link at the cursor with the selected text as the label. */
-function insertLink(view: EditorView | null) {
-	if (!view) return;
-	const { state } = view;
-	const sel = state.sliceDoc(state.selection.main.from, state.selection.main.to);
-	const label = sel || "link";
-	const replacement = `[${label}](https://)`;
-	view.dispatch({
-		changes: { from: state.selection.main.from, to: state.selection.main.to, insert: replacement },
-		selection: {
-			anchor: state.selection.main.from + label.length + 3,
-			head: state.selection.main.from + label.length + 11,
-		},
-		userEvent: "input.format",
-	});
-	view.focus();
-}
-
-export function MdToolbar({ view, previewActive, onTogglePreview, allowPreview }: MdToolbarProps) {
-	return (
-		<ToolbarShell aria-label="Markdown formatting">
-			<Toggle size="sm" aria-label="Bold" onPressedChange={() => wrap(view, "**")}>
-				<Icon name="Bold" />
-			</Toggle>
-			<Toggle size="sm" aria-label="Italic" onPressedChange={() => wrap(view, "*")}>
-				<Icon name="Italic" />
-			</Toggle>
-			<Toggle size="sm" aria-label="Inline code" onPressedChange={() => wrap(view, "`")}>
-				<Icon name="Code" />
-			</Toggle>
-			<ToolbarDivider />
-			<Toggle size="sm" aria-label="Bullet list" onPressedChange={() => togglePrefix(view, "- ")}>
-				<Icon name="List" />
-			</Toggle>
-			<Toggle
-				size="sm"
-				aria-label="Numbered list"
-				onPressedChange={() => togglePrefix(view, "1. ")}
-			>
-				<Icon name="ListOrdered" />
-			</Toggle>
-			<Toggle size="sm" aria-label="Block quote" onPressedChange={() => togglePrefix(view, "> ")}>
-				<Icon name="Quote" />
-			</Toggle>
-			<ToolbarDivider />
-			<Toggle size="sm" aria-label="Insert link" onPressedChange={() => insertLink(view)}>
-				<Icon name="Link" />
-			</Toggle>
-			{allowPreview && onTogglePreview && (
-				<>
-					<ToolbarDivider />
-					<Toggle
-						size="sm"
-						aria-label={previewActive ? "Hide preview" : "Show preview"}
-						pressed={previewActive}
-						onPressedChange={onTogglePreview}
-					>
-						<Icon name={previewActive ? "EyeOff" : "Eye"} />
-					</Toggle>
-				</>
-			)}
-		</ToolbarShell>
-	);
-}

package/src/components/organisms/editors/toolbar/rte-toolbar.tsx

@@ -1,211 +0,0 @@
-"use client";
-
-/* c8 ignore file -- Tiptap toolbar requires real DOM; jsdom-incompatible. */
-
-import type { Editor } from "@tiptap/react";
-
-import { Button } from "../../../atoms/button";
-import { Icon } from "../../../atoms/icon";
-import { Toggle } from "../../../atoms/toggle";
-import { ToolbarDivider, ToolbarShell } from "./toolbar-shell";
-
-export const TOOLBAR_ITEM_IDS = [
-	"heading",
-	"bold",
-	"italic",
-	"underline",
-	"strike",
-	"code",
-	"codeBlock",
-	"bulletList",
-	"orderedList",
-	"blockquote",
-	"link",
-	"undo",
-	"redo",
-] as const;
-export type ToolbarItemId = (typeof TOOLBAR_ITEM_IDS)[number];
-
-export interface RteToolbarProps {
-	editor: Editor | null;
-	/** Whitelist of toolbar items to render. Default: every item in `TOOLBAR_ITEM_IDS`. */
-	items?: readonly ToolbarItemId[];
-}
-
-function show(items: readonly ToolbarItemId[] | undefined, id: ToolbarItemId) {
-	return !items || items.includes(id);
-}
-
-export function RteToolbar({ editor, items }: RteToolbarProps) {
-	if (!editor) return null;
-
-	const setHeading = (level: 1 | 2 | 3 | null) => {
-		if (level === null) editor.chain().focus().setParagraph().run();
-		else editor.chain().focus().toggleHeading({ level }).run();
-	};
-
-	const insertLink = () => {
-		const previous = editor.getAttributes("link").href as string | undefined;
-		const url = window.prompt("URL", previous ?? "https://");
-		if (url === null) return;
-		if (url === "") editor.chain().focus().unsetLink().run();
-		else
-			editor
-				.chain()
-				.focus()
-				.extendMarkRange("link")
-				.setLink({ href: url, target: "_blank", rel: "noopener noreferrer" })
-				.run();
-	};
-
-	return (
-		<ToolbarShell aria-label="Rich text formatting">
-			{show(items, "heading") && (
-				<>
-					<Toggle
-						size="sm"
-						aria-label="Heading 1"
-						pressed={editor.isActive("heading", { level: 1 })}
-						onPressedChange={() => setHeading(1)}
-					>
-						<Icon name="Heading1" />
-					</Toggle>
-					<Toggle
-						size="sm"
-						aria-label="Heading 2"
-						pressed={editor.isActive("heading", { level: 2 })}
-						onPressedChange={() => setHeading(2)}
-					>
-						<Icon name="Heading2" />
-					</Toggle>
-					<Toggle
-						size="sm"
-						aria-label="Heading 3"
-						pressed={editor.isActive("heading", { level: 3 })}
-						onPressedChange={() => setHeading(3)}
-					>
-						<Icon name="Heading3" />
-					</Toggle>
-					<ToolbarDivider />
-				</>
-			)}
-			{show(items, "bold") && (
-				<Toggle
-					size="sm"
-					aria-label="Bold"
-					pressed={editor.isActive("bold")}
-					onPressedChange={() => editor.chain().focus().toggleBold().run()}
-				>
-					<Icon name="Bold" />
-				</Toggle>
-			)}
-			{show(items, "italic") && (
-				<Toggle
-					size="sm"
-					aria-label="Italic"
-					pressed={editor.isActive("italic")}
-					onPressedChange={() => editor.chain().focus().toggleItalic().run()}
-				>
-					<Icon name="Italic" />
-				</Toggle>
-			)}
-			{show(items, "strike") && (
-				<Toggle
-					size="sm"
-					aria-label="Strikethrough"
-					pressed={editor.isActive("strike")}
-					onPressedChange={() => editor.chain().focus().toggleStrike().run()}
-				>
-					<Icon name="Strikethrough" />
-				</Toggle>
-			)}
-			{show(items, "code") && (
-				<Toggle
-					size="sm"
-					aria-label="Inline code"
-					pressed={editor.isActive("code")}
-					onPressedChange={() => editor.chain().focus().toggleCode().run()}
-				>
-					<Icon name="Code" />
-				</Toggle>
-			)}
-			<ToolbarDivider />
-			{show(items, "bulletList") && (
-				<Toggle
-					size="sm"
-					aria-label="Bullet list"
-					pressed={editor.isActive("bulletList")}
-					onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
-				>
-					<Icon name="List" />
-				</Toggle>
-			)}
-			{show(items, "orderedList") && (
-				<Toggle
-					size="sm"
-					aria-label="Ordered list"
-					pressed={editor.isActive("orderedList")}
-					onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
-				>
-					<Icon name="ListOrdered" />
-				</Toggle>
-			)}
-			{show(items, "blockquote") && (
-				<Toggle
-					size="sm"
-					aria-label="Block quote"
-					pressed={editor.isActive("blockquote")}
-					onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
-				>
-					<Icon name="Quote" />
-				</Toggle>
-			)}
-			{show(items, "codeBlock") && (
-				<Toggle
-					size="sm"
-					aria-label="Code block"
-					pressed={editor.isActive("codeBlock")}
-					onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
-				>
-					<Icon name="SquareCode" />
-				</Toggle>
-			)}
-			<ToolbarDivider />
-			{show(items, "link") && (
-				<Toggle
-					size="sm"
-					aria-label="Insert link"
-					pressed={editor.isActive("link")}
-					onPressedChange={insertLink}
-				>
-					<Icon name="Link" />
-				</Toggle>
-			)}
-			<ToolbarDivider />
-			{show(items, "undo") && (
-				<Button
-					type="button"
-					variant="ghost"
-					size="sm"
-					aria-label="Undo"
-					disabled={!editor.can().undo()}
-					onClick={() => editor.chain().focus().undo().run()}
-				>
-					<Icon name="Undo2" />
-				</Button>
-			)}
-			{show(items, "redo") && (
-				<Button
-					type="button"
-					variant="ghost"
-					size="sm"
-					aria-label="Redo"
-					disabled={!editor.can().redo()}
-					onClick={() => editor.chain().focus().redo().run()}
-				>
-					<Icon name="Redo2" />
-				</Button>
-			)}
-		</ToolbarShell>
-	);
-}