@placeholderco/placeholder-ui 2.2.5 → 2.4.0

package/dist/app.css

@@ -172,3 +172,91 @@ a {
 a:hover {
 	color: var(--ui-link-hover-color);
 }
+
+/* ---- Buttons in rich text ----
+   The TipTap toolbar's Button turns a link into a call-to-action:
+   `<a class="editor-button editor-button-accent editor-button-lg" href="...">`.
+   The classes live here rather than in the editor so the saved HTML looks the
+   same wherever it is rendered. The look follows the Button component. */
+.editor-button {
+	--editor-button-fg: var(--ui-primary-contrast);
+	--editor-button-bg: var(--ui-primary);
+	--editor-button-border: transparent;
+	--editor-button-hover-fg: var(--ui-primary-contrast);
+	--editor-button-hover-bg: var(--ui-accent-dark);
+	--editor-button-hover-border: transparent;
+	display: inline-block;
+	padding: 0.5rem 1rem;
+	border: 0;
+	border-radius: 6px;
+	background-color: var(--editor-button-bg);
+	color: var(--editor-button-fg);
+	font-size: 0.875rem;
+	font-weight: 600;
+	line-height: 1.125rem;
+	letter-spacing: 0.05rem;
+	text-decoration: none;
+	transition:
+		color 0.15s ease-in-out,
+		background-color 0.15s ease-in-out,
+		border-color 0.15s ease-in-out;
+}
+
+.editor-button:hover {
+	color: var(--editor-button-hover-fg);
+	background-color: var(--editor-button-hover-bg);
+	border-color: var(--editor-button-hover-border);
+	text-decoration: none;
+}
+
+.editor-button:focus-visible {
+	outline: solid 0.125rem var(--ui-accent-dark);
+	outline-offset: 2px;
+}
+
+.editor-button-accent {
+	--editor-button-fg: var(--ui-accent-contrast);
+	--editor-button-bg: var(--ui-accent);
+	--editor-button-hover-fg: var(--ui-primary);
+	--editor-button-hover-bg: var(--ui-tertiary);
+}
+
+.editor-button-tertiary {
+	--editor-button-fg: var(--ui-primary);
+	--editor-button-bg: var(--ui-tertiary);
+	--editor-button-hover-fg: var(--ui-primary);
+	--editor-button-hover-bg: var(--ui-accent);
+}
+
+.editor-button-primary-outline,
+.editor-button-accent-outline {
+	border: 1px solid var(--editor-button-border);
+	--editor-button-bg: transparent;
+	--editor-button-hover-bg: transparent;
+}
+
+.editor-button-primary-outline {
+	--editor-button-fg: var(--ui-primary);
+	--editor-button-border: var(--ui-primary);
+	--editor-button-hover-fg: var(--ui-accent-dark);
+	--editor-button-hover-border: var(--ui-accent-dark);
+}
+
+.editor-button-accent-outline {
+	--editor-button-fg: var(--ui-accent);
+	--editor-button-border: var(--ui-accent);
+	--editor-button-hover-fg: var(--ui-tertiary);
+	--editor-button-hover-border: var(--ui-tertiary);
+}
+
+.editor-button-sm {
+	padding: 0.375rem 0.75rem;
+	font-size: 0.8125rem;
+	line-height: 1.0625rem;
+}
+
+.editor-button-lg {
+	padding: 0.625rem 1.25rem;
+	font-size: 1rem;
+	line-height: 1.25rem;
+}

package/dist/display/filetree/FileTree.svelte.d.ts

@@ -71,6 +71,6 @@ export interface FileTreeProps {
     onChange?: (nodes: FileTreeNode[]) => void;
     class?: string;
 }
-declare const FileTree: import("svelte").Component<FileTreeProps, {}, "selectedId" | "nodes">;
+declare const FileTree: import("svelte").Component<FileTreeProps, {}, "nodes" | "selectedId">;
 type FileTree = ReturnType<typeof FileTree>;
 export default FileTree;

package/dist/editors/tiptap/TipTap.svelte

@@ -15,7 +15,14 @@
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import Collaboration from '@tiptap/extension-collaboration';
 	import { CollaborationCaret } from '@tiptap/extension-collaboration-caret';
-	import { Alert, CodeBlockEditor, Div, Span, type CodeBlocksOptions } from './extensions/index.js';
+	import {
+		Alert,
+		ClassAttribute,
+		CodeBlockEditor,
+		Div,
+		Span,
+		type CodeBlocksOptions
+	} from './extensions/index.js';
 	import type { CollaborationConfig } from './collaboration.js';
 	import FormGroup from '../../form/FormGroup.svelte';
 	import LinkActionMenu from './LinkActionMenu.svelte';
@@ -31,6 +38,7 @@
 	import UnderlineButton from './toolbar/UnderlineButton.svelte';
 	import ColorButton from './toolbar/ColorButton.svelte';
 	import LinkButton from './toolbar/LinkButton.svelte';
+	import ButtonLinkButton from './toolbar/ButtonLinkButton.svelte';
 	import SuperscriptButton from './toolbar/SuperscriptButton.svelte';
 	import SubscriptButton from './toolbar/SubscriptButton.svelte';
 	import AlignLeftButton from './toolbar/AlignLeftButton.svelte';
@@ -298,6 +306,8 @@
 			Alert,
 			TabHandler,
 			TableKit.configure({ table: { resizable: true } }),
+			// Keep `class` on standard nodes/marks so classes in loaded HTML survive
+			ClassAttribute,
 			...customExtensions
 		];
 
@@ -485,6 +495,7 @@
 				<div class="toolbar-divider"></div>
 
 				<div class="toolbar-group">
+					<ButtonLinkButton editor={editorState.editor} />
 					<AlertButton editor={editorState.editor} />
 				</div>
 
@@ -629,6 +640,19 @@
 		background: rgba(var(--ui-accent-rgbc), 0.1);
 	}
 
+	/* Buttons keep the app.css button look instead of the link colours above. */
+	.editor-content :global(.ProseMirror a.editor-link.editor-button) {
+		color: var(--editor-button-fg);
+		background-color: var(--editor-button-bg);
+		text-decoration: none;
+	}
+
+	.editor-content :global(.ProseMirror a.editor-link.editor-button:hover),
+	:global(.dark) .editor-content :global(.ProseMirror a.editor-link.editor-button:hover) {
+		color: var(--editor-button-hover-fg);
+		background-color: var(--editor-button-hover-bg);
+	}
+
 	/* Ensure the editor remains clickable while links show the action menu. */
 	.editor-content :global(.ProseMirror) {
 		pointer-events: auto;

package/dist/editors/tiptap/TipTapBubble.svelte

@@ -15,7 +15,14 @@
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import Collaboration from '@tiptap/extension-collaboration';
 	import { CollaborationCaret } from '@tiptap/extension-collaboration-caret';
-	import { Alert, CodeBlockEditor, Div, Span, type CodeBlocksOptions } from './extensions/index.js';
+	import {
+		Alert,
+		ClassAttribute,
+		CodeBlockEditor,
+		Div,
+		Span,
+		type CodeBlocksOptions
+	} from './extensions/index.js';
 	import type { CollaborationConfig } from './collaboration.js';
 	import FormGroup from '../../form/FormGroup.svelte';
 	import LinkActionMenu from './LinkActionMenu.svelte';
@@ -263,6 +270,8 @@
 			Alert,
 			TabHandler,
 			TableKit.configure({ table: { resizable: true } }),
+			// Keep `class` on standard nodes/marks so classes in loaded HTML survive
+			ClassAttribute,
 			...customExtensions
 		];
 

package/dist/editors/tiptap/buttonLink.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Call-to-action buttons in TipTap content.
+ *
+ * A button is an ordinary link whose `class` attribute carries `editor-button`
+ * plus a variant and, optionally, a size class. The styles live in `app.css`
+ * (global, built on the `--ui-*` tokens) so the saved HTML looks the same in
+ * the editor and wherever the consumer renders it.
+ */
+export declare const editorButtonVariants: readonly ["primary", "accent", "tertiary", "primary-outline", "accent-outline"];
+export type EditorButtonVariant = (typeof editorButtonVariants)[number];
+export declare const editorButtonSizes: readonly ["sm", "md", "lg"];
+export type EditorButtonSize = (typeof editorButtonSizes)[number];
+export interface EditorButtonStyle {
+    variant: EditorButtonVariant;
+    size: EditorButtonSize;
+}
+export declare const EDITOR_BUTTON_CLASS = "editor-button";
+/** The link `class` value for a button style, e.g. `editor-button editor-button-accent editor-button-lg`. */
+export declare function editorButtonClass(style: EditorButtonStyle): string;
+/** The button style encoded in a link's `class`, or `null` when the link is not a button. */
+export declare function parseEditorButtonClass(className: string | null | undefined): EditorButtonStyle | null;

package/dist/editors/tiptap/buttonLink.js

@@ -0,0 +1,45 @@
+/**
+ * Call-to-action buttons in TipTap content.
+ *
+ * A button is an ordinary link whose `class` attribute carries `editor-button`
+ * plus a variant and, optionally, a size class. The styles live in `app.css`
+ * (global, built on the `--ui-*` tokens) so the saved HTML looks the same in
+ * the editor and wherever the consumer renders it.
+ */
+export const editorButtonVariants = [
+    'primary',
+    'accent',
+    'tertiary',
+    'primary-outline',
+    'accent-outline'
+];
+export const editorButtonSizes = ['sm', 'md', 'lg'];
+export const EDITOR_BUTTON_CLASS = 'editor-button';
+const CLASS_PREFIX = `${EDITOR_BUTTON_CLASS}-`;
+/** The link `class` value for a button style, e.g. `editor-button editor-button-accent editor-button-lg`. */
+export function editorButtonClass(style) {
+    const classes = [EDITOR_BUTTON_CLASS, `${CLASS_PREFIX}${style.variant}`];
+    if (style.size !== 'md')
+        classes.push(`${CLASS_PREFIX}${style.size}`);
+    return classes.join(' ');
+}
+/** The button style encoded in a link's `class`, or `null` when the link is not a button. */
+export function parseEditorButtonClass(className) {
+    const tokens = (className ?? '').split(/\s+/).filter(Boolean);
+    if (!tokens.includes(EDITOR_BUTTON_CLASS))
+        return null;
+    let variant = 'primary';
+    let size = 'md';
+    for (const token of tokens) {
+        if (!token.startsWith(CLASS_PREFIX))
+            continue;
+        const suffix = token.slice(CLASS_PREFIX.length);
+        if (editorButtonVariants.includes(suffix)) {
+            variant = suffix;
+        }
+        else if (editorButtonSizes.includes(suffix)) {
+            size = suffix;
+        }
+    }
+    return { variant, size };
+}

package/dist/editors/tiptap/extensions/ClassAttribute.d.ts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Node and mark types that keep their `class` attribute by default. Types that
+ * already manage `class` themselves (div, span, alert, link) are left alone.
+ */
+export declare const defaultClassAttributeTypes: readonly ["paragraph", "heading", "blockquote", "bulletList", "orderedList", "listItem", "codeBlock", "horizontalRule", "image", "table", "tableRow", "tableHeader", "tableCell", "bold", "italic", "strike", "code", "underline", "subscript", "superscript", "textStyle"];
+export interface ClassAttributeOptions {
+    /** Node and mark type names that should preserve `class` (default: all standard types) */
+    types: string[];
+}
+/**
+ * Preserves the `class` attribute on standard nodes and marks so classes in
+ * loaded or pasted HTML survive the round-trip through the editor instead of
+ * being stripped by the schema.
+ */
+export declare const ClassAttribute: Extension<ClassAttributeOptions, any>;

package/dist/editors/tiptap/extensions/ClassAttribute.js

@@ -0,0 +1,59 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Node and mark types that keep their `class` attribute by default. Types that
+ * already manage `class` themselves (div, span, alert, link) are left alone.
+ */
+export const defaultClassAttributeTypes = [
+    'paragraph',
+    'heading',
+    'blockquote',
+    'bulletList',
+    'orderedList',
+    'listItem',
+    'codeBlock',
+    'horizontalRule',
+    'image',
+    'table',
+    'tableRow',
+    'tableHeader',
+    'tableCell',
+    'bold',
+    'italic',
+    'strike',
+    'code',
+    'underline',
+    'subscript',
+    'superscript',
+    'textStyle'
+];
+/**
+ * Preserves the `class` attribute on standard nodes and marks so classes in
+ * loaded or pasted HTML survive the round-trip through the editor instead of
+ * being stripped by the schema.
+ */
+export const ClassAttribute = Extension.create({
+    name: 'classAttribute',
+    addOptions() {
+        return {
+            types: [...defaultClassAttributeTypes]
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    class: {
+                        default: null,
+                        parseHTML: (element) => element.getAttribute('class') || null,
+                        renderHTML: (attributes) => {
+                            if (!attributes.class)
+                                return {};
+                            return { class: attributes.class };
+                        }
+                    }
+                }
+            }
+        ];
+    }
+});

package/dist/editors/tiptap/extensions/index.d.ts

@@ -1,6 +1,8 @@
 export { Alert } from './Alert.js';
 export { Div } from './Div.js';
 export { Span } from './Span.js';
+export { ClassAttribute, defaultClassAttributeTypes } from './ClassAttribute.js';
+export type { ClassAttributeOptions } from './ClassAttribute.js';
 export { CodeBlockEditor } from './CodeBlockEditor.js';
 export type { CodeBlockEditorOptions, CodeBlocksOptions } from './CodeBlockEditor.js';
 export { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';

package/dist/editors/tiptap/extensions/index.js

@@ -1,5 +1,6 @@
 export { Alert } from './Alert.js';
 export { Div } from './Div.js';
 export { Span } from './Span.js';
+export { ClassAttribute, defaultClassAttributeTypes } from './ClassAttribute.js';
 export { CodeBlockEditor } from './CodeBlockEditor.js';
 export { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';

package/dist/editors/tiptap/toolbar/AlertButton.svelte

@@ -58,7 +58,7 @@
 <div style="position: relative; display: inline-block;">
 	<ToolbarButton
 		icon={iconAlertTriangle}
-		title="Insert Alert"
+		title="Alert"
 		active={showDialog}
 		onclick={toggleDialog}
 	/>
@@ -66,7 +66,7 @@
 	{#if showDialog}
 		<div class="alert-dialog" bind:this={dialogElement}>
 			<div class="dialog-header">
-				<h4>Insert Alert</h4>
+				<h4>Alert</h4>
 			</div>
 
 			<div class="dialog-body">

package/dist/editors/tiptap/toolbar/ButtonLinkButton.svelte

@@ -0,0 +1,427 @@
+<script lang="ts">
+	import type { Editor, JSONContent } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconButton } from '../../../icon/index.js';
+	import {
+		editorButtonClass,
+		parseEditorButtonClass,
+		type EditorButtonSize,
+		type EditorButtonVariant
+	} from '../buttonLink.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+
+	let showDialog = $state(false);
+	let label = $state('');
+	let url = $state('');
+	let variant = $state<EditorButtonVariant>('primary');
+	let size = $state<EditorButtonSize>('md');
+	let openInNewTab = $state(false);
+	/** The dialog opened on an existing link, which Apply rewrites in place. */
+	let editing = $state(false);
+	let labelInputElement: HTMLInputElement | undefined = $state();
+	let urlInputElement: HTMLInputElement | undefined = $state();
+
+	const variants: { value: EditorButtonVariant; label: string }[] = [
+		{ value: 'primary', label: 'Primary' },
+		{ value: 'accent', label: 'Accent' },
+		{ value: 'tertiary', label: 'Tertiary' },
+		{ value: 'primary-outline', label: 'Primary outline' },
+		{ value: 'accent-outline', label: 'Accent outline' }
+	];
+
+	const sizes: { value: EditorButtonSize; label: string }[] = [
+		{ value: 'sm', label: 'Small' },
+		{ value: 'md', label: 'Medium' },
+		{ value: 'lg', label: 'Large' }
+	];
+
+	const isButton = $derived(parseEditorButtonClass(editor.getAttributes('link').class) !== null);
+
+	function selectionText(): string {
+		const { from, to } = editor.state.selection;
+		return editor.state.doc.textBetween(from, to, ' ');
+	}
+
+	const toggleDialog = () => {
+		if (showDialog) {
+			closeDialog();
+			return;
+		}
+
+		editing = editor.isActive('link');
+		if (editing) {
+			// Work on the whole link, whatever part of it the cursor is in.
+			editor.chain().extendMarkRange('link').run();
+		}
+
+		const attrs = editor.getAttributes('link') as {
+			href?: string;
+			target?: string | null;
+			class?: string | null;
+		};
+		const style = parseEditorButtonClass(attrs.class);
+
+		url = attrs.href ?? '';
+		openInNewTab = attrs.target === '_blank';
+		variant = style?.variant ?? 'primary';
+		size = style?.size ?? 'md';
+		label = selectionText();
+		showDialog = true;
+
+		setTimeout(() => {
+			const input = label ? urlInputElement : labelInputElement;
+			input?.focus();
+			input?.select();
+		}, 0);
+	};
+
+	const applyButton = () => {
+		const href = url.trim();
+		if (!href) {
+			urlInputElement?.focus();
+			return;
+		}
+
+		const text = label.trim() || href;
+		const attrs = {
+			href,
+			target: openInNewTab ? '_blank' : null,
+			rel: openInNewTab ? 'noopener noreferrer' : null,
+			class: editorButtonClass({ variant, size })
+		};
+		const content: JSONContent[] = [{ type: 'text', text, marks: [{ type: 'link', attrs }] }];
+		// A button typed in at the cursor gets a space after it, so what is typed
+		// next does not extend the button.
+		if (!editing && editor.state.selection.empty) {
+			content.push({ type: 'text', text: ' ' });
+		}
+
+		const chain = editor.chain().focus();
+		if (editing) chain.extendMarkRange('link');
+		chain.insertContent(content).run();
+
+		closeDialog();
+	};
+
+	const removeButton = () => {
+		editor.chain().focus().extendMarkRange('link').unsetLink().run();
+		closeDialog();
+	};
+
+	const closeDialog = () => {
+		showDialog = false;
+		editing = false;
+		label = '';
+		url = '';
+		variant = 'primary';
+		size = 'md';
+		openInNewTab = false;
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			applyButton();
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			closeDialog();
+			editor.commands.focus();
+		}
+	};
+</script>
+
+<div style="position: relative; display: inline-block;">
+	<ToolbarButton icon={iconButton} title="Button" active={isButton} onclick={toggleDialog} />
+
+	{#if showDialog}
+		<div class="button-dialog" role="dialog" aria-label="Button">
+			<div class="dialog-header">
+				<h4>{editing ? 'Edit button' : 'Insert button'}</h4>
+			</div>
+
+			<div class="dialog-body">
+				<div class="form-group">
+					<label for="button-link-label">Text</label>
+					<input
+						id="button-link-label"
+						type="text"
+						bind:this={labelInputElement}
+						bind:value={label}
+						onkeydown={handleKeydown}
+						placeholder="Button text"
+						class="form-input"
+					/>
+				</div>
+
+				<div class="form-group">
+					<label for="button-link-url">URL</label>
+					<input
+						id="button-link-url"
+						type="text"
+						bind:this={urlInputElement}
+						bind:value={url}
+						onkeydown={handleKeydown}
+						placeholder="Enter URL"
+						class="form-input"
+					/>
+				</div>
+
+				<div class="form-group">
+					<span class="group-label" id="button-link-style">Style</span>
+					<div class="option-row" role="group" aria-labelledby="button-link-style">
+						{#each variants as option (option.value)}
+							<button
+								class="editor-button editor-button-{option.value} editor-button-sm option-button"
+								class:selected={variant === option.value}
+								onclick={() => (variant = option.value)}
+								type="button"
+							>
+								{option.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<div class="form-group">
+					<span class="group-label" id="button-link-size">Size</span>
+					<div class="option-row" role="group" aria-labelledby="button-link-size">
+						{#each sizes as option (option.value)}
+							<button
+								class="size-button"
+								class:active={size === option.value}
+								onclick={() => (size = option.value)}
+								type="button"
+							>
+								{option.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<label class="checkbox-label">
+					<input type="checkbox" bind:checked={openInNewTab} class="checkbox" />
+					<span>Open in new tab</span>
+				</label>
+			</div>
+
+			<div class="dialog-footer">
+				{#if editing}
+					<button class="btn btn-remove" onclick={removeButton} type="button">Remove</button>
+				{/if}
+				<span class="footer-spacer"></span>
+				<button class="btn btn-secondary" onclick={closeDialog} type="button">Cancel</button>
+				<button class="btn btn-primary" onclick={applyButton} type="button">
+					{editing ? 'Apply' : 'Insert'}
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.button-dialog {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		margin-top: 4px;
+		display: flex;
+		flex-direction: column;
+		background: var(--paper-body-bg);
+		border: 1px solid var(--border-color);
+		border-radius: 6px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		z-index: 1000;
+		width: 360px;
+		max-width: calc(100vw - 32px);
+	}
+
+	:global(.dark) .button-dialog {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+	}
+
+	.dialog-header {
+		padding: 12px 16px;
+		border-bottom: 1px solid var(--border-color);
+	}
+
+	.dialog-header h4 {
+		margin: 0;
+		font-size: 14px;
+		font-weight: 600;
+		color: var(--text-color);
+	}
+
+	.dialog-body {
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+	}
+
+	.form-group {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.form-group label,
+	.group-label {
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--text-color);
+	}
+
+	.form-input {
+		padding: 8px 12px;
+		border: 1px solid var(--border-color);
+		border-radius: 4px;
+		background: var(--input-bg);
+		color: var(--text-color);
+		font-size: 13px;
+		font-family: inherit;
+	}
+
+	.form-input::placeholder {
+		color: var(--placeholder-color);
+	}
+
+	.form-input:focus {
+		outline: none;
+		border-color: var(--ui-primary);
+	}
+
+	:global(.dark) .form-input:focus {
+		border-color: var(--ui-accent);
+	}
+
+	.option-row {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	/* The style choices are drawn with the real button classes from app.css; the
+	   ring marks the selected one. */
+	.option-button {
+		cursor: pointer;
+		font-family: inherit;
+	}
+
+	.option-button.selected {
+		outline: 2px solid var(--ui-primary);
+		outline-offset: 2px;
+	}
+
+	:global(.dark) .option-button.selected {
+		outline-color: var(--ui-accent);
+	}
+
+	.size-button {
+		padding: 6px 12px;
+		border: 1px solid var(--border-color);
+		border-radius: 4px;
+		background: var(--paper-body-bg);
+		color: var(--text-color);
+		font-size: 13px;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.size-button:hover {
+		background: var(--page-bg);
+	}
+
+	.size-button.active {
+		background: var(--page-bg);
+		border-color: var(--ui-primary);
+		font-weight: 600;
+	}
+
+	:global(.dark) .size-button.active {
+		border-color: var(--ui-accent);
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 13px;
+		color: var(--text-color);
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.checkbox {
+		width: 16px;
+		height: 16px;
+		cursor: pointer;
+		accent-color: var(--ui-primary);
+	}
+
+	:global(.dark) .checkbox {
+		accent-color: var(--ui-accent);
+	}
+
+	.dialog-footer {
+		padding: 12px 16px;
+		border-top: 1px solid var(--border-color);
+		display: flex;
+		gap: 8px;
+		align-items: center;
+	}
+
+	.footer-spacer {
+		flex: 1;
+	}
+
+	.btn {
+		padding: 6px 16px;
+		border: none;
+		border-radius: 4px;
+		font-size: 13px;
+		font-weight: 500;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.btn-secondary {
+		background: var(--page-bg);
+		color: var(--text-color);
+		border: 1px solid var(--border-color);
+	}
+
+	.btn-secondary:hover {
+		background: var(--border-color);
+	}
+
+	.btn-primary {
+		background: var(--ui-primary);
+		color: var(--off-white);
+	}
+
+	.btn-primary:hover {
+		opacity: 0.9;
+	}
+
+	:global(.dark) .btn-primary {
+		background: var(--ui-accent);
+		color: var(--ui-primary);
+	}
+
+	.btn-remove {
+		background: transparent;
+		color: var(--danger-text);
+		border: 1px solid var(--border-color);
+	}
+
+	.btn-remove:hover {
+		background: var(--danger-bg-subtle);
+	}
+</style>

package/dist/editors/tiptap/toolbar/ButtonLinkButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const ButtonLinkButton: import("svelte").Component<Props, {}, "">;
+type ButtonLinkButton = ReturnType<typeof ButtonLinkButton>;
+export default ButtonLinkButton;

package/dist/icon/button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-button"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 8a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M8 12h8" /></svg>

package/dist/icon/index.d.ts

@@ -19,6 +19,7 @@ export { default as iconAt } from './at.svg?raw';
 export { default as iconBell } from './bell.svg?raw';
 export { default as iconBold } from './bold.svg?raw';
 export { default as iconBookmark } from './bookmark.svg?raw';
+export { default as iconButton } from './button.svg?raw';
 export { default as iconCalendar } from './calendar.svg?raw';
 export { default as iconCamera } from './camera.svg?raw';
 export { default as iconChartBar } from './chart-bar.svg?raw';

package/dist/icon/index.js

@@ -19,6 +19,7 @@ export { default as iconAt } from './at.svg?raw';
 export { default as iconBell } from './bell.svg?raw';
 export { default as iconBold } from './bold.svg?raw';
 export { default as iconBookmark } from './bookmark.svg?raw';
+export { default as iconButton } from './button.svg?raw';
 export { default as iconCalendar } from './calendar.svg?raw';
 export { default as iconCamera } from './camera.svg?raw';
 export { default as iconChartBar } from './chart-bar.svg?raw';

package/dist/index.d.ts

@@ -114,9 +114,11 @@ export type { TipTapProps, DocumentUploadResult } from './editors/tiptap/TipTap.
 export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
 export type { TipTapBubbleProps } from './editors/tiptap/TipTapBubble.svelte';
 export type { CollaborationConfig, CollaborationUser } from './editors/tiptap/collaboration.js';
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
-export type { CodeBlocksOptions, CodeBlockEditorOptions, CodeBlockLanguageDef, CodeBlockLanguageId } from './editors/tiptap/extensions/index.js';
+export { ClassAttribute, defaultClassAttributeTypes, CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export type { ClassAttributeOptions, CodeBlocksOptions, CodeBlockEditorOptions, CodeBlockLanguageDef, CodeBlockLanguageId } from './editors/tiptap/extensions/index.js';
 export type { AnyExtension } from '@tiptap/core';
+export { editorButtonVariants, editorButtonSizes, editorButtonClass, parseEditorButtonClass } from './editors/tiptap/buttonLink.js';
+export type { EditorButtonVariant, EditorButtonSize, EditorButtonStyle } from './editors/tiptap/buttonLink.js';
 export { default as CodeMirror } from './editors/CodeMirror.svelte';
 export type { CodeMirrorProps } from './editors/CodeMirror.svelte';
 export { default as GitCard } from './cards/GitCard.svelte';

package/dist/index.js

@@ -56,7 +56,8 @@ export { default as ColorPicker } from './form/ColorPicker.svelte';
 export { parseColor, parseHex, toHex, formatColor, rgbToHsv, hsvToRgb, rgbToHsl } from './form/ColorPicker.svelte';
 export { default as TipTap } from './editors/tiptap/TipTap.svelte';
 export { default as TipTapBubble } from './editors/tiptap/TipTapBubble.svelte';
-export { CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { ClassAttribute, defaultClassAttributeTypes, CodeBlockEditor, codeBlockLanguages, resolveCodeBlockLanguage } from './editors/tiptap/extensions/index.js';
+export { editorButtonVariants, editorButtonSizes, editorButtonClass, parseEditorButtonClass } from './editors/tiptap/buttonLink.js';
 export { default as CodeMirror } from './editors/CodeMirror.svelte';
 export { default as GitCard } from './cards/GitCard.svelte';
 export * from './icon/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@placeholderco/placeholder-ui",
-  "version": "2.2.5",
+  "version": "2.4.0",
   "description": "A modern, customizable Svelte 5 UI component library with comprehensive theming support. Re-brand it with a single config object.",
   "license": "MIT",
   "author": "Placeholderco",