@placeholderco/placeholder-ui 2.1.1 → 2.2.0

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

@@ -1,258 +1,265 @@
 <script lang="ts">
-  import type { Editor } from '@tiptap/core'
-  import ToolbarButton from './ToolbarButton.svelte'
-  import { iconTable } from '../../../icon/index.js'
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconTable } from '../../../icon/index.js';
 
-  interface Props {
-    editor: Editor
-  }
+	interface Props {
+		editor: Editor;
+	}
 
-  let { editor }: Props = $props()
+	let { editor }: Props = $props();
 
-  let showMenu = $state(false)
-  let hoverRows = $state(0)
-  let hoverCols = $state(0)
+	let showMenu = $state(false);
+	let hoverRows = $state(0);
+	let hoverCols = $state(0);
 
-  const GRID_SIZE = 6
+	const GRID_SIZE = 6;
 
-  const toggleMenu = () => {
-    showMenu = !showMenu
-    hoverRows = 0
-    hoverCols = 0
-  }
+	const toggleMenu = () => {
+		showMenu = !showMenu;
+		hoverRows = 0;
+		hoverCols = 0;
+	};
 
-  const insertTable = (rows: number, cols: number) => {
-    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run()
-    showMenu = false
-  }
+	const insertTable = (rows: number, cols: number) => {
+		editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+		showMenu = false;
+	};
 
-  const runCommand = (command: () => boolean) => {
-    command()
-    showMenu = false
-  }
+	const runCommand = (command: () => boolean) => {
+		command();
+		showMenu = false;
+	};
 </script>
 
 <div style="position: relative; display: inline-block;">
-  <ToolbarButton
-    icon={iconTable}
-    title="Table"
-    active={showMenu || editor.isActive('table')}
-    onclick={toggleMenu}
-  />
+	<ToolbarButton
+		icon={iconTable}
+		title="Table"
+		active={showMenu || editor.isActive('table')}
+		onclick={toggleMenu}
+	/>
 
-  {#if showMenu}
-    <div class="table-menu">
-      {#if editor.isActive('table')}
-        <div class="menu-title">Table actions</div>
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().addRowBefore().run())}
-        >
-          Add row above
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().addRowAfter().run())}
-        >
-          Add row below
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().addColumnBefore().run())}
-        >
-          Add column left
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().addColumnAfter().run())}
-        >
-          Add column right
-        </button>
+	{#if showMenu}
+		<div class="table-menu">
+			{#if editor.isActive('table')}
+				<div class="menu-title">Table actions</div>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().addRowBefore().run())}
+				>
+					Add row above
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().addRowAfter().run())}
+				>
+					Add row below
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().addColumnBefore().run())}
+				>
+					Add column left
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().addColumnAfter().run())}
+				>
+					Add column right
+				</button>
 
-        <div class="menu-divider"></div>
+				<div class="menu-divider"></div>
 
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().toggleHeaderRow().run())}
-        >
-          Toggle header row
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          disabled={!editor.can().mergeCells()}
-          onclick={() => runCommand(() => editor.chain().focus().mergeCells().run())}
-        >
-          Merge cells
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          disabled={!editor.can().splitCell()}
-          onclick={() => runCommand(() => editor.chain().focus().splitCell().run())}
-        >
-          Split cell
-        </button>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().toggleHeaderRow().run())}
+				>
+					Toggle header row
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					disabled={!editor.can().mergeCells()}
+					onclick={() => runCommand(() => editor.chain().focus().mergeCells().run())}
+				>
+					Merge cells
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					disabled={!editor.can().splitCell()}
+					onclick={() => runCommand(() => editor.chain().focus().splitCell().run())}
+				>
+					Split cell
+				</button>
 
-        <div class="menu-divider"></div>
+				<div class="menu-divider"></div>
 
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().deleteRow().run())}
-        >
-          Delete row
-        </button>
-        <button
-          class="menu-item"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().deleteColumn().run())}
-        >
-          Delete column
-        </button>
-        <button
-          class="menu-item danger"
-          type="button"
-          onclick={() => runCommand(() => editor.chain().focus().deleteTable().run())}
-        >
-          Delete table
-        </button>
-      {:else}
-        <div class="menu-title">Insert table</div>
-        <div class="size-grid" onmouseleave={() => { hoverRows = 0; hoverCols = 0 }} role="presentation">
-          {#each Array(GRID_SIZE) as _, row}
-            {#each Array(GRID_SIZE) as _, col}
-              <button
-                class="size-cell"
-                class:highlighted={row < hoverRows && col < hoverCols}
-                type="button"
-                aria-label="Insert {row + 1} by {col + 1} table"
-                onmouseenter={() => {
-                  hoverRows = row + 1
-                  hoverCols = col + 1
-                }}
-                onclick={() => insertTable(row + 1, col + 1)}
-              ></button>
-            {/each}
-          {/each}
-        </div>
-        <div class="size-label">
-          {hoverRows > 0 ? `${hoverRows} × ${hoverCols}` : 'Select size'}
-        </div>
-      {/if}
-    </div>
-  {/if}
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().deleteRow().run())}
+				>
+					Delete row
+				</button>
+				<button
+					class="menu-item"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().deleteColumn().run())}
+				>
+					Delete column
+				</button>
+				<button
+					class="menu-item danger"
+					type="button"
+					onclick={() => runCommand(() => editor.chain().focus().deleteTable().run())}
+				>
+					Delete table
+				</button>
+			{:else}
+				<div class="menu-title">Insert table</div>
+				<div
+					class="size-grid"
+					onmouseleave={() => {
+						hoverRows = 0;
+						hoverCols = 0;
+					}}
+					role="presentation"
+				>
+					{#each Array(GRID_SIZE) as _, row}
+						{#each Array(GRID_SIZE) as _, col}
+							<button
+								class="size-cell"
+								class:highlighted={row < hoverRows && col < hoverCols}
+								type="button"
+								aria-label="Insert {row + 1} by {col + 1} table"
+								onmouseenter={() => {
+									hoverRows = row + 1;
+									hoverCols = col + 1;
+								}}
+								onclick={() => insertTable(row + 1, col + 1)}
+							></button>
+						{/each}
+					{/each}
+				</div>
+				<div class="size-label">
+					{hoverRows > 0 ? `${hoverRows} × ${hoverCols}` : 'Select size'}
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
-  .table-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 4px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    padding: 8px;
-    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;
-    min-width: 180px;
-  }
+	.table-menu {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		margin-top: 4px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: 8px;
+		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;
+		min-width: 180px;
+	}
 
-  :global(.dark) .table-menu {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  }
+	:global(.dark) .table-menu {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+	}
 
-  .menu-title {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding: 2px 8px 6px 8px;
-  }
+	.menu-title {
+		font-size: 11px;
+		font-weight: 600;
+		color: var(--text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 2px 8px 6px 8px;
+	}
 
-  .menu-item {
-    padding: 6px 8px;
-    border: none;
-    background: transparent;
-    color: var(--text-color);
-    font-size: 13px;
-    text-align: left;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background 0.15s ease;
-    white-space: nowrap;
-  }
+	.menu-item {
+		padding: 6px 8px;
+		border: none;
+		background: transparent;
+		color: var(--text-color);
+		font-size: 13px;
+		text-align: left;
+		border-radius: 4px;
+		cursor: pointer;
+		transition: background 0.15s ease;
+		white-space: nowrap;
+	}
 
-  .menu-item:hover:not(:disabled) {
-    background: rgba(var(--ui-primary-rgbc), 0.1);
-  }
+	.menu-item:hover:not(:disabled) {
+		background: rgba(var(--ui-primary-rgbc), 0.1);
+	}
 
-  :global(.dark) .menu-item:hover:not(:disabled) {
-    background: rgba(var(--ui-accent-rgbc), 0.1);
-  }
+	:global(.dark) .menu-item:hover:not(:disabled) {
+		background: rgba(var(--ui-accent-rgbc), 0.1);
+	}
 
-  .menu-item:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
+	.menu-item:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
 
-  .menu-item.danger {
-    color: #dc3545;
-  }
+	.menu-item.danger {
+		color: #dc3545;
+	}
 
-  :global(.dark) .menu-item.danger {
-    color: #ea868f;
-  }
+	:global(.dark) .menu-item.danger {
+		color: #ea868f;
+	}
 
-  .menu-divider {
-    height: 1px;
-    background: var(--border-color);
-    margin: 4px 0;
-  }
+	.menu-divider {
+		height: 1px;
+		background: var(--border-color);
+		margin: 4px 0;
+	}
 
-  .size-grid {
-    display: grid;
-    grid-template-columns: repeat(6, 20px);
-    gap: 3px;
-    padding: 0 8px;
-    justify-content: center;
-  }
+	.size-grid {
+		display: grid;
+		grid-template-columns: repeat(6, 20px);
+		gap: 3px;
+		padding: 0 8px;
+		justify-content: center;
+	}
 
-  .size-cell {
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    border: 1px solid var(--border-color);
-    border-radius: 3px;
-    background: var(--paper-body-bg);
-    cursor: pointer;
-    transition: all 0.1s ease;
-  }
+	.size-cell {
+		width: 20px;
+		height: 20px;
+		padding: 0;
+		border: 1px solid var(--border-color);
+		border-radius: 3px;
+		background: var(--paper-body-bg);
+		cursor: pointer;
+		transition: all 0.1s ease;
+	}
 
-  .size-cell.highlighted {
-    background: var(--ui-tertiary);
-    border-color: var(--ui-tertiary-dark);
-  }
+	.size-cell.highlighted {
+		background: var(--ui-tertiary);
+		border-color: var(--ui-tertiary-dark);
+	}
 
-  :global(.dark) .size-cell.highlighted {
-    background: var(--ui-accent);
-    border-color: var(--ui-accent-dark);
-  }
+	:global(.dark) .size-cell.highlighted {
+		background: var(--ui-accent);
+		border-color: var(--ui-accent-dark);
+	}
 
-  .size-label {
-    text-align: center;
-    font-size: 12px;
-    color: var(--text-muted);
-    padding: 6px 0 2px 0;
-  }
+	.size-label {
+		text-align: center;
+		font-size: 12px;
+		color: var(--text-muted);
+		padding: 6px 0 2px 0;
+	}
 </style>

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

@@ -1,84 +1,78 @@
 <script lang="ts">
-  import { Icon } from '../../../icon/index.js'
+	import { Icon } from '../../../icon/index.js';
 
-  interface Props {
-    icon: string
-    title: string
-    active?: boolean
-    disabled?: boolean
-    onclick: () => void
-  }
+	interface Props {
+		icon: string;
+		title: string;
+		active?: boolean;
+		disabled?: boolean;
+		onclick: () => void;
+	}
 
-  let {
-    icon,
-    title,
-    active = false,
-    disabled = false,
-    onclick
-  }: Props = $props()
+	let { icon, title, active = false, disabled = false, onclick }: Props = $props();
 </script>
 
 <button
-  class="toolbar-button"
-  type="button"
-  tabindex="-1"
-  {onclick}
-  {disabled}
-  {title}
-  class:active
+	class="toolbar-button"
+	type="button"
+	tabindex="-1"
+	{onclick}
+	{disabled}
+	{title}
+	class:active
 >
-  <Icon svg={icon} size="20" />
+	<Icon svg={icon} size="20" />
 </button>
 
 <style>
-  .toolbar-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 28px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--text-color);
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
+	.toolbar-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 32px;
+		height: 28px;
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: var(--text-color);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
 
-  .toolbar-button:hover:not(:disabled) {
-    background: rgba(var(--ui-primary-rgbc), 0.1);
-    color: var(--ui-primary);
-  }
+	.toolbar-button:hover:not(:disabled) {
+		background: rgba(var(--ui-primary-rgbc), 0.1);
+		color: var(--ui-primary);
+	}
 
-  :global(.dark) .toolbar-button:hover:not(:disabled) {
-    background: rgba(var(--ui-accent-rgbc), 0.1);
-    color: var(--ui-accent);
-  }
+	:global(.dark) .toolbar-button:hover:not(:disabled) {
+		background: rgba(var(--ui-accent-rgbc), 0.1);
+		color: var(--ui-accent);
+	}
 
-  .toolbar-button:active:not(:disabled) {
-    background: rgba(var(--ui-primary-rgbc), 0.15);
-  }
+	.toolbar-button:active:not(:disabled) {
+		background: rgba(var(--ui-primary-rgbc), 0.15);
+	}
 
-  :global(.dark) .toolbar-button:active:not(:disabled) {
-    background: rgba(var(--ui-accent-rgbc), 0.15);
-  }
+	:global(.dark) .toolbar-button:active:not(:disabled) {
+		background: rgba(var(--ui-accent-rgbc), 0.15);
+	}
 
-  .toolbar-button.active {
-    background: var(--ui-primary);
-    color: white;
-  }
+	.toolbar-button.active {
+		background: var(--ui-primary);
+		color: white;
+	}
 
-  .toolbar-button.active:hover {
-    background: var(--ui-tertiary-dark);
-  }
+	.toolbar-button.active:hover {
+		background: var(--ui-tertiary-dark);
+	}
 
-  .toolbar-button:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
+	.toolbar-button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
 
-  .toolbar-button :global(.cu-icon) {
-    height: 19px;
-  }
+	.toolbar-button :global(.cu-icon) {
+		height: 19px;
+	}
 </style>

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import type { Editor } from '@tiptap/core'
-  import ToolbarButton from './ToolbarButton.svelte'
-  import { iconUnderline } from '../../../icon/index.js'
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconUnderline } from '../../../icon/index.js';
 
-  interface Props {
-    editor: Editor
-  }
+	interface Props {
+		editor: Editor;
+	}
 
-  let { editor }: Props = $props()
+	let { editor }: Props = $props();
 </script>
 
 <ToolbarButton
-  icon={iconUnderline}
-  title="Underline"
-  active={editor.isActive('underline')}
-  onclick={() => editor.chain().focus().toggleUnderline().run()}
+	icon={iconUnderline}
+	title="Underline"
+	active={editor.isActive('underline')}
+	onclick={() => editor.chain().focus().toggleUnderline().run()}
 />