@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/editors/CodeMirror.svelte

@@ -0,0 +1,306 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte'
+  import {
+    EditorView,
+    lineNumbers as lineNumbersGutter,
+    highlightActiveLineGutter,
+    highlightSpecialChars,
+    drawSelection,
+    dropCursor,
+    rectangularSelection,
+    crosshairCursor,
+    highlightActiveLine,
+    keymap
+  } from '@codemirror/view'
+  import { EditorState, Compartment } from '@codemirror/state'
+  import {
+    foldGutter,
+    foldKeymap,
+    indentOnInput,
+    syntaxHighlighting,
+    defaultHighlightStyle,
+    bracketMatching
+  } from '@codemirror/language'
+  import { history, defaultKeymap, historyKeymap } from '@codemirror/commands'
+  import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
+  import {
+    closeBrackets,
+    closeBracketsKeymap,
+    autocompletion,
+    completionKeymap
+  } from '@codemirror/autocomplete'
+  import { lintKeymap } from '@codemirror/lint'
+  import { javascript } from '@codemirror/lang-javascript'
+  import { html } from '@codemirror/lang-html'
+  import { css } from '@codemirror/lang-css'
+  import { json } from '@codemirror/lang-json'
+  import { markdown } from '@codemirror/lang-markdown'
+  import { oneDark } from '@codemirror/theme-one-dark'
+  import { themeState } from '../theme.svelte.js'
+  import ActionIcon from '../ui/ActionIcon.svelte'
+  import { iconCopy, iconCheck } from '../icon/index.js'
+
+  export interface CodeMirrorProps {
+    /** Editor content value (bindable) */
+    value?: string
+    /** Programming language for syntax highlighting */
+    language?: 'javascript' | 'html' | 'css' | 'json' | 'typescript' | 'markdown'
+    /** Color theme for the editor (defaults to app theme) */
+    theme?: 'light' | 'dark' | 'auto'
+    /** Disable editing */
+    readOnly?: boolean
+    /** Show line numbers in the gutter */
+    lineNumbers?: boolean
+    /** Show a button that copies the editor contents to the clipboard */
+    copyButton?: boolean
+    /** Additional CSS classes */
+    class?: string
+    /** Height of the editor */
+    height?: string
+    /** Callback when content changes */
+    onChange?: (value: string) => void
+    /** Callback after the contents are copied to the clipboard */
+    onCopy?: (value: string) => void
+  }
+
+  let {
+    value = $bindable(''),
+    language = 'javascript',
+    theme = 'auto',
+    readOnly = false,
+    lineNumbers = true,
+    copyButton = false,
+    class: className = '',
+    height = '500px',
+    onChange,
+    onCopy
+  }: CodeMirrorProps = $props()
+
+  let editorContainer: HTMLDivElement | undefined = $state()
+  let view: EditorView | null = $state(null)
+  let themeCompartment = new Compartment()
+  let gutterCompartment = new Compartment()
+  let copied = $state(false)
+  let copiedTimeout: ReturnType<typeof setTimeout>
+
+  // basicSetup minus the gutters, which we swap in via a compartment so the
+  // `lineNumbers` prop can be toggled after the editor is created.
+  const baseSetup = [
+    highlightSpecialChars(),
+    history(),
+    drawSelection(),
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
+    keymap.of([
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...searchKeymap,
+      ...historyKeymap,
+      ...foldKeymap,
+      ...completionKeymap,
+      ...lintKeymap
+    ])
+  ]
+
+  const getGutterExtension = (show: boolean) =>
+    show ? [lineNumbersGutter(), highlightActiveLineGutter(), foldGutter()] : []
+
+  // Derive effective dark mode from prop or app theme
+  let isDark = $derived(
+    theme === 'auto' ? themeState.isDarkMode : theme === 'dark'
+  )
+
+  const getLanguageExtension = (lang: string) => {
+    switch (lang) {
+      case 'javascript':
+      case 'typescript':
+        return javascript()
+      case 'html':
+        return html()
+      case 'css':
+        return css()
+      case 'json':
+        return json()
+      case 'markdown':
+        return markdown()
+      default:
+        return javascript()
+    }
+  }
+
+  onMount(() => {
+    if (!editorContainer) return
+
+    const extensions = [
+      gutterCompartment.of(getGutterExtension(lineNumbers)),
+      baseSetup,
+      getLanguageExtension(language),
+      EditorView.lineWrapping,
+      themeCompartment.of(isDark ? oneDark : [])
+    ]
+
+    if (readOnly) {
+      extensions.push(EditorState.readOnly.of(true))
+    }
+
+    // Always add update listener to sync bindable value
+    extensions.push(
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const newValue = update.state.doc.toString()
+          value = newValue
+          if (onChange) {
+            onChange(newValue)
+          }
+        }
+      })
+    )
+
+    const startState = EditorState.create({
+      doc: value,
+      extensions
+    })
+
+    view = new EditorView({
+      state: startState,
+      parent: editorContainer
+    })
+  })
+
+  onDestroy(() => {
+    view?.destroy()
+    clearTimeout(copiedTimeout)
+  })
+
+  async function copyToClipboard() {
+    const text = view?.state.doc.toString() ?? value
+
+    try {
+      await navigator.clipboard.writeText(text)
+      copied = true
+      clearTimeout(copiedTimeout)
+      copiedTimeout = setTimeout(() => (copied = false), 2000)
+      onCopy?.(text)
+    } catch (err) {
+      console.error('CodeMirror: failed to copy to clipboard', err)
+    }
+  }
+
+  // Watch for theme changes and reconfigure
+  $effect(() => {
+    if (!view) return
+
+    view.dispatch({
+      effects: themeCompartment.reconfigure(isDark ? oneDark : [])
+    })
+  })
+
+  // Watch for lineNumbers changes and reconfigure the gutter
+  $effect(() => {
+    if (!view) return
+
+    view.dispatch({
+      effects: gutterCompartment.reconfigure(getGutterExtension(lineNumbers))
+    })
+  })
+
+  // Watch for external value changes and update editor
+  $effect(() => {
+    if (!view) return
+
+    const currentValue = view.state.doc.toString()
+    if (value !== currentValue) {
+      view.dispatch({
+        changes: { from: 0, to: currentValue.length, insert: value }
+      })
+    }
+  })
+
+  // Public API methods
+  export function getValue(): string {
+    return view?.state.doc.toString() || ''
+  }
+
+  export function setValue(newValue: string) {
+    if (!view) return
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: newValue }
+    })
+  }
+
+  export function getView(): EditorView | null {
+    return view
+  }
+
+  export function focus() {
+    view?.focus()
+  }
+</script>
+
+<div class="codemirror-container {className}" style="height: {height}">
+  {#if copyButton}
+    <div class="codemirror-copy" class:copied class:dark={isDark}>
+      <ActionIcon
+        svg={copied ? iconCheck : iconCopy}
+        size="16px"
+        tooltip={copied ? 'Copied' : 'Copy to clipboard'}
+        ariaLabel={copied ? 'Copied to clipboard' : 'Copy to clipboard'}
+        onclick={copyToClipboard}
+      />
+    </div>
+  {/if}
+  <div class="codemirror-wrapper" bind:this={editorContainer}></div>
+</div>
+
+<style>
+  .codemirror-container {
+    position: relative;
+    width: 100%;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 6px;
+    overflow: hidden;
+    background: var(--input-bg-color);
+  }
+
+  /* The ActionIcon supplies the button chrome; this only places it and gives it
+     an opaque backing so it stays readable over the code underneath. */
+  .codemirror-copy {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 2;
+    display: inline-flex;
+    border-radius: 6px;
+    opacity: 0.65;
+    transition: opacity 0.15s ease;
+  }
+
+  .codemirror-container:hover .codemirror-copy,
+  .codemirror-copy:hover,
+  .codemirror-copy:focus-within,
+  .codemirror-copy.copied {
+    opacity: 1;
+  }
+
+  .codemirror-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  .codemirror-wrapper :global(.cm-editor) {
+    height: 100%;
+  }
+
+  .codemirror-wrapper :global(.cm-scroller) {
+    overflow: auto;
+  }
+</style>

package/dist/editors/CodeMirror.svelte.d.ts

@@ -0,0 +1,31 @@
+import { EditorView } from '@codemirror/view';
+export interface CodeMirrorProps {
+    /** Editor content value (bindable) */
+    value?: string;
+    /** Programming language for syntax highlighting */
+    language?: 'javascript' | 'html' | 'css' | 'json' | 'typescript' | 'markdown';
+    /** Color theme for the editor (defaults to app theme) */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Disable editing */
+    readOnly?: boolean;
+    /** Show line numbers in the gutter */
+    lineNumbers?: boolean;
+    /** Show a button that copies the editor contents to the clipboard */
+    copyButton?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Height of the editor */
+    height?: string;
+    /** Callback when content changes */
+    onChange?: (value: string) => void;
+    /** Callback after the contents are copied to the clipboard */
+    onCopy?: (value: string) => void;
+}
+declare const CodeMirror: import("svelte").Component<CodeMirrorProps, {
+    getValue: () => string;
+    setValue: (newValue: string) => void;
+    getView: () => EditorView | null;
+    focus: () => void;
+}, "value">;
+type CodeMirror = ReturnType<typeof CodeMirror>;
+export default CodeMirror;

package/dist/editors/tiptap/LinkActionMenu.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core';
+	import { onMount } from 'svelte';
+	import {
+		Icon,
+		iconCheck,
+		iconEdit,
+		iconExternalLink,
+		iconTrash,
+		iconX
+	} from '../../icon/index.js';
+
+	interface Props {
+		editor: Editor;
+		editable?: boolean;
+	}
+
+	let { editor, editable = true }: Props = $props();
+
+	let href = $state('');
+	let target = $state<string | null>(null);
+	let isEditing = $state(false);
+	let draftHref = $state('');
+	let draftOpenInNewTab = $state(false);
+	let linkInputElement: HTMLInputElement | undefined = $state();
+
+	function refreshLinkState() {
+		const attrs = editor.getAttributes('link') as {
+			href?: string;
+			target?: string | null;
+		};
+
+		href = attrs.href || '';
+		target = attrs.target || null;
+
+		if (!isEditing) {
+			draftHref = href;
+			draftOpenInNewTab = target === '_blank';
+		}
+	}
+
+	function openLink() {
+		if (!href) return;
+
+		const linkTarget = target || '_self';
+		const openedWindow = window.open(
+			href,
+			linkTarget,
+			linkTarget === '_blank' ? 'noopener,noreferrer' : undefined
+		);
+
+		if (openedWindow && linkTarget === '_blank') {
+			openedWindow.opener = null;
+		}
+	}
+
+	function startEditing() {
+		if (!editable) return;
+
+		draftHref = href;
+		draftOpenInNewTab = target === '_blank';
+		isEditing = true;
+
+		setTimeout(() => {
+			linkInputElement?.focus();
+			linkInputElement?.select();
+		}, 0);
+	}
+
+	function applyLink() {
+		if (!editable) return;
+
+		const nextHref = draftHref.trim();
+
+		if (!nextHref) {
+			removeLink();
+			return;
+		}
+
+		editor
+			.chain()
+			.focus()
+			.extendMarkRange('link')
+			.setLink({
+				href: nextHref,
+				target: draftOpenInNewTab ? '_blank' : null,
+				rel: draftOpenInNewTab ? 'noopener noreferrer' : null
+			})
+			.run();
+
+		isEditing = false;
+		refreshLinkState();
+	}
+
+	function cancelEditing() {
+		isEditing = false;
+		refreshLinkState();
+		editor.commands.focus();
+	}
+
+	function removeLink() {
+		if (!editable) return;
+
+		editor.chain().focus().extendMarkRange('link').unsetLink().run();
+		isEditing = false;
+		refreshLinkState();
+	}
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			applyLink();
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelEditing();
+		}
+	}
+
+	onMount(() => {
+		refreshLinkState();
+		editor.on('selectionUpdate', refreshLinkState);
+		editor.on('transaction', refreshLinkState);
+
+		return () => {
+			editor.off('selectionUpdate', refreshLinkState);
+			editor.off('transaction', refreshLinkState);
+		};
+	});
+</script>
+
+<div class="link-action-menu">
+	{#if isEditing && editable}
+		<div class="link-edit-row">
+			<input
+				bind:this={linkInputElement}
+				bind:value={draftHref}
+				class="link-input"
+				onkeydown={handleEditKeydown}
+				placeholder="Enter URL"
+				type="text"
+			/>
+			<button class="link-icon-button primary" onclick={applyLink} title="Apply" type="button">
+				<Icon svg={iconCheck} size="16px" />
+			</button>
+			<button class="link-icon-button" onclick={cancelEditing} title="Cancel" type="button">
+				<Icon svg={iconX} size="16px" />
+			</button>
+		</div>
+		<label class="link-checkbox-label">
+			<input bind:checked={draftOpenInNewTab} class="link-checkbox" type="checkbox" />
+			<span>Open in new tab</span>
+		</label>
+	{:else}
+		<button class="link-url" onclick={openLink} title={href} type="button">
+			{href}
+		</button>
+		<button class="link-icon-button primary" onclick={openLink} title="Open link" type="button">
+			<Icon svg={iconExternalLink} size="16px" />
+		</button>
+		{#if editable}
+			<button class="link-icon-button" onclick={startEditing} title="Edit link" type="button">
+				<Icon svg={iconEdit} size="16px" />
+			</button>
+			<button class="link-icon-button danger" onclick={removeLink} title="Remove link" type="button">
+				<Icon svg={iconTrash} size="16px" />
+			</button>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.link-action-menu {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		max-width: min(560px, calc(100vw - 32px));
+		padding: 6px;
+		border: 1px solid var(--border-color);
+		border-radius: 6px;
+		background: var(--paper-title-bg);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		color: var(--text-color);
+		font-family: var(--ui-font-family);
+	}
+
+	:global(.dark) .link-action-menu {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+	}
+
+	.link-url {
+		min-width: 0;
+		max-width: 320px;
+		padding: 5px 8px;
+		overflow: hidden;
+		border: 1px solid var(--border-color);
+		border-radius: 4px;
+		background: var(--paper-body-bg);
+		color: var(--ui-tertiary-dark);
+		cursor: pointer;
+		font: inherit;
+		font-size: 13px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	:global(.dark) .link-url {
+		color: var(--ui-tertiary);
+	}
+
+	.link-edit-row {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		min-width: min(360px, calc(100vw - 80px));
+	}
+
+	.link-input {
+		flex: 1;
+		min-width: 0;
+		padding: 6px 10px;
+		border: 1px solid var(--border-color);
+		border-radius: 4px;
+		background: var(--paper-body-bg);
+		color: var(--text-color);
+		font: inherit;
+		font-size: 14px;
+		outline: none;
+	}
+
+	.link-input:focus {
+		border-color: var(--ui-primary);
+		box-shadow: 0 0 0 2px rgba(var(--ui-primary-rgbc), 0.1);
+	}
+
+	:global(.dark) .link-input:focus {
+		border-color: var(--ui-accent);
+		box-shadow: 0 0 0 2px rgba(var(--ui-accent-rgbc), 0.1);
+	}
+
+	.link-icon-button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		padding: 0;
+		border: none;
+		border-radius: 4px;
+		background: transparent;
+		color: var(--text-color);
+		cursor: pointer;
+		transition:
+			background 0.15s ease,
+			color 0.15s ease;
+	}
+
+	.link-icon-button:hover {
+		background: rgba(var(--ui-primary-rgbc), 0.1);
+		color: var(--ui-primary);
+	}
+
+	:global(.dark) .link-icon-button:hover {
+		background: rgba(var(--ui-accent-rgbc), 0.1);
+		color: var(--ui-accent);
+	}
+
+	.link-icon-button.primary {
+		background: var(--ui-primary);
+		color: white;
+	}
+
+	.link-icon-button.primary:hover {
+		background: var(--ui-tertiary-dark);
+		color: white;
+	}
+
+	:global(.dark) .link-icon-button.primary {
+		background: var(--ui-accent);
+		color: var(--ui-primary);
+	}
+
+	.link-icon-button.danger:hover {
+		background: rgba(var(--bs-danger-rgb), 0.12);
+		color: var(--bs-danger);
+	}
+
+	.link-checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 13px;
+		white-space: nowrap;
+	}
+
+	.link-checkbox {
+		width: 16px;
+		height: 16px;
+		cursor: pointer;
+		accent-color: var(--ui-primary);
+	}
+
+	:global(.dark) .link-checkbox {
+		accent-color: var(--ui-accent);
+	}
+</style>

package/dist/editors/tiptap/LinkActionMenu.svelte.d.ts

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