@placeholderco/placeholder-ui 1.0.12 → 2.1.0

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

@@ -0,0 +1,56 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+export const Span = Node.create({
+    name: 'span',
+    priority: 100,
+    group: 'block',
+    content: 'inline*',
+    isolating: false,
+    defining: false,
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: 'span',
+                priority: 50,
+            },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+    addAttributes() {
+        return {
+            class: {
+                default: null,
+                parseHTML: element => element.getAttribute('class'),
+                renderHTML: attributes => {
+                    if (!attributes.class)
+                        return {};
+                    return { class: attributes.class };
+                },
+            },
+            style: {
+                default: null,
+                parseHTML: element => element.getAttribute('style'),
+                renderHTML: attributes => {
+                    if (!attributes.style)
+                        return {};
+                    return { style: attributes.style };
+                },
+            },
+            id: {
+                default: null,
+                parseHTML: element => element.getAttribute('id'),
+                renderHTML: attributes => {
+                    if (!attributes.id)
+                        return {};
+                    return { id: attributes.id };
+                },
+            },
+        };
+    },
+});

package/dist/editors/tiptap/extensions/codeBlockEditor.css

@@ -0,0 +1,236 @@
+/* Styles for the CodeBlockEditor TipTap extension (CodeMirror-powered code blocks).
+   Syntax colors target the stable tok-* classes emitted by @lezer/highlight's
+   classHighlighter: light palette follows CodeMirror's default highlight style,
+   dark palette follows One Dark. Dark mode uses the library's `.dark` root class. */
+
+.code-block-editor {
+	position: relative;
+	margin: 0 0 1em 0;
+	border: 1px solid var(--border-color, #dddddd);
+	border-radius: 6px;
+	background: var(--page-bg, #f7f7f8);
+}
+
+.code-block-editor.ProseMirror-selectednode {
+	border-color: var(--ui-tertiary, #40c5b5);
+}
+
+.code-block-editor .cm-editor {
+	background: transparent;
+}
+
+.code-block-editor .cm-editor.cm-focused {
+	outline: none;
+}
+
+.code-block-editor .cm-editor .cm-scroller {
+	font-family: 'Monaco', 'Courier New', monospace;
+	font-size: 0.875em;
+	line-height: 1.5;
+	border-radius: 6px;
+}
+
+.code-block-editor .cm-editor .cm-content {
+	padding: 12px 14px;
+	caret-color: var(--text-color, #1a1a1a);
+}
+
+.dark .code-block-editor .cm-editor .cm-cursor {
+	border-left-color: #e6e6e6;
+}
+
+.dark .code-block-editor .cm-editor .cm-selectionBackground {
+	background: rgba(115, 135, 175, 0.35);
+}
+
+.dark .code-block-editor .cm-editor.cm-focused .cm-selectionBackground {
+	background: rgba(115, 135, 175, 0.45);
+}
+
+.dark .code-block-editor .cm-editor .cm-matchingBracket {
+	background: rgba(255, 255, 255, 0.12);
+}
+
+/* Language picker */
+.code-block-editor .code-block-language {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	z-index: 2;
+	max-width: 40%;
+	padding: 2px 6px;
+	font-size: 12px;
+	border: 1px solid var(--border-color, #dddddd);
+	border-radius: 4px;
+	background: var(--paper-body-bg, #ffffff);
+	color: var(--text-color, #1a1a1a);
+	opacity: 0.4;
+	transition: opacity 0.15s ease;
+	cursor: pointer;
+}
+
+.code-block-editor:hover .code-block-language,
+.code-block-editor .code-block-language:focus {
+	opacity: 1;
+}
+
+.code-block-editor .code-block-language:disabled {
+	cursor: default;
+}
+
+/* Autocomplete tooltip */
+.code-block-editor .cm-tooltip {
+	border: 1px solid var(--border-color, #dddddd);
+	background: var(--paper-body-bg, #ffffff);
+	color: var(--text-color, #1a1a1a);
+	border-radius: 4px;
+}
+
+.code-block-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
+	background: var(--ui-tertiary, #40c5b5);
+	color: #ffffff;
+}
+
+/* Syntax palette — light */
+.code-block-editor .cm-editor .tok-keyword {
+	color: #770088;
+}
+
+.code-block-editor .cm-editor .tok-atom,
+.code-block-editor .cm-editor .tok-bool,
+.code-block-editor .cm-editor .tok-url,
+.code-block-editor .cm-editor .tok-labelName {
+	color: #221199;
+}
+
+.code-block-editor .cm-editor .tok-literal,
+.code-block-editor .cm-editor .tok-number,
+.code-block-editor .cm-editor .tok-inserted {
+	color: #116644;
+}
+
+.code-block-editor .cm-editor .tok-string,
+.code-block-editor .cm-editor .tok-deleted {
+	color: #aa1111;
+}
+
+.code-block-editor .cm-editor .tok-string2 {
+	color: #ee4400;
+}
+
+.code-block-editor .cm-editor .tok-variableName.tok-definition {
+	color: #0000ff;
+}
+
+.code-block-editor .cm-editor .tok-variableName.tok-local {
+	color: #3300aa;
+}
+
+.code-block-editor .cm-editor .tok-typeName,
+.code-block-editor .cm-editor .tok-namespace {
+	color: #008855;
+}
+
+.code-block-editor .cm-editor .tok-className {
+	color: #116677;
+}
+
+.code-block-editor .cm-editor .tok-variableName2,
+.code-block-editor .cm-editor .tok-macroName {
+	color: #225566;
+}
+
+.code-block-editor .cm-editor .tok-propertyName {
+	color: #0055aa;
+}
+
+.code-block-editor .cm-editor .tok-propertyName.tok-definition {
+	color: #0000cc;
+}
+
+.code-block-editor .cm-editor .tok-comment {
+	color: #994400;
+	font-style: italic;
+}
+
+.code-block-editor .cm-editor .tok-meta {
+	color: #7a757a;
+}
+
+.code-block-editor .cm-editor .tok-invalid {
+	color: #ff0000;
+}
+
+.code-block-editor .cm-editor .tok-heading {
+	font-weight: 700;
+}
+
+.code-block-editor .cm-editor .tok-emphasis {
+	font-style: italic;
+}
+
+.code-block-editor .cm-editor .tok-strong {
+	font-weight: 700;
+}
+
+.code-block-editor .cm-editor .tok-link {
+	text-decoration: underline;
+}
+
+/* Syntax palette — dark (One Dark) */
+.dark .code-block-editor .cm-editor .tok-keyword {
+	color: #c678dd;
+}
+
+.dark .code-block-editor .cm-editor .tok-atom,
+.dark .code-block-editor .cm-editor .tok-bool,
+.dark .code-block-editor .cm-editor .tok-url,
+.dark .code-block-editor .cm-editor .tok-labelName,
+.dark .code-block-editor .cm-editor .tok-literal,
+.dark .code-block-editor .cm-editor .tok-number {
+	color: #d19a66;
+}
+
+.dark .code-block-editor .cm-editor .tok-string,
+.dark .code-block-editor .cm-editor .tok-inserted {
+	color: #98c379;
+}
+
+.dark .code-block-editor .cm-editor .tok-string2,
+.dark .code-block-editor .cm-editor .tok-operator {
+	color: #56b6c2;
+}
+
+.dark .code-block-editor .cm-editor .tok-deleted {
+	color: #e06c75;
+}
+
+.dark .code-block-editor .cm-editor .tok-variableName.tok-definition,
+.dark .code-block-editor .cm-editor .tok-variableName.tok-local,
+.dark .code-block-editor .cm-editor .tok-propertyName.tok-definition {
+	color: #61afef;
+}
+
+.dark .code-block-editor .cm-editor .tok-typeName,
+.dark .code-block-editor .cm-editor .tok-namespace,
+.dark .code-block-editor .cm-editor .tok-className {
+	color: #e5c07b;
+}
+
+.dark .code-block-editor .cm-editor .tok-variableName2,
+.dark .code-block-editor .cm-editor .tok-macroName,
+.dark .code-block-editor .cm-editor .tok-propertyName {
+	color: #e06c75;
+}
+
+.dark .code-block-editor .cm-editor .tok-comment {
+	color: #7f848e;
+}
+
+.dark .code-block-editor .cm-editor .tok-meta {
+	color: #abb2bf;
+}
+
+.dark .code-block-editor .cm-editor .tok-invalid {
+	color: #ff5c57;
+}

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

@@ -0,0 +1,17 @@
+import type { Extension } from '@codemirror/state';
+/** Language identifiers supported by the rich code block editor */
+export type CodeBlockLanguageId = 'plaintext' | 'javascript' | 'typescript' | 'html' | 'css' | 'json' | 'markdown' | 'sql' | 'csharp' | 'powershell';
+export interface CodeBlockLanguageDef {
+    /** Value stored in the code block's language attribute and `language-` CSS class */
+    id: CodeBlockLanguageId;
+    /** Human-readable name shown in the language picker */
+    label: string;
+    /** Alternative names recognised when parsing existing content (e.g. 'cs' for csharp) */
+    aliases: string[];
+    /** Factory for the CodeMirror language support (highlighting + completions) */
+    load: () => Extension;
+}
+/** All languages available to rich code blocks */
+export declare const codeBlockLanguages: CodeBlockLanguageDef[];
+/** Look up a language definition by id or alias (case-insensitive) */
+export declare function resolveCodeBlockLanguage(language: string | null | undefined): CodeBlockLanguageDef | undefined;

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

@@ -0,0 +1,124 @@
+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 { sql, MSSQL } from '@codemirror/lang-sql';
+import { LanguageSupport, StreamLanguage } from '@codemirror/language';
+import { completeAnyWord, completeFromList } from '@codemirror/autocomplete';
+import { csharp } from '@codemirror/legacy-modes/mode/clike';
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
+// C# and PowerShell have no native CodeMirror 6 packages, so they use legacy stream
+// parsers. Those provide highlighting only, so keyword/cmdlet lists plus word matching
+// stand in for the scope-aware completions the native language packages ship with.
+const CSHARP_KEYWORDS = ('abstract as async await base bool break byte case catch char checked class const continue ' +
+    'decimal default delegate do double dynamic else enum event explicit extern false finally fixed ' +
+    'float for foreach get global goto if implicit in init int interface internal is lock long ' +
+    'nameof namespace new null object operator out override params partial private protected public ' +
+    'readonly record ref required return sbyte sealed set short sizeof stackalloc static string ' +
+    'struct switch this throw true try typeof uint ulong unchecked unsafe ushort using value var ' +
+    'virtual void volatile when where while yield').split(' ');
+const CSHARP_COMMON_TYPES = ('Console Convert DateTime Dictionary Exception Guid IEnumerable IList List Math Nullable ' +
+    'Object StringBuilder Task TimeSpan').split(' ');
+const POWERSHELL_KEYWORDS = ('begin break catch class continue data do dynamicparam else elseif end enum exit filter ' +
+    'finally for foreach from function hidden if in param process return static switch throw trap ' +
+    'try until using var while workflow').split(' ');
+const POWERSHELL_CMDLETS = ('Add-Content Add-Member Clear-Content Clear-Variable Compare-Object ConvertFrom-Json ' +
+    'ConvertTo-Json Copy-Item Export-Csv ForEach-Object Format-List Format-Table Get-ChildItem ' +
+    'Get-Command Get-Content Get-Date Get-Help Get-Item Get-ItemProperty Get-Location Get-Member ' +
+    'Get-Module Get-Process Get-Random Get-Service Get-Variable Group-Object Import-Csv ' +
+    'Import-Module Install-Module Invoke-Command Invoke-Expression Invoke-RestMethod ' +
+    'Invoke-WebRequest Join-Path Measure-Object Move-Item New-Item New-Object Out-File Out-Null ' +
+    'Read-Host Remove-Item Remove-Variable Rename-Item Resolve-Path Restart-Service Select-Object ' +
+    'Select-String Set-Content Set-ExecutionPolicy Set-Item Set-Location Set-Variable Sort-Object ' +
+    'Split-Path Start-Process Start-Service Start-Sleep Stop-Process Stop-Service Tee-Object ' +
+    'Test-Connection Test-Path Wait-Process Where-Object Write-Debug Write-Error Write-Host ' +
+    'Write-Output Write-Verbose Write-Warning').split(' ');
+function toCompletions(words, type) {
+    return words.map((label) => ({ label, type }));
+}
+function legacySupport(parser, completions) {
+    const language = StreamLanguage.define(parser);
+    return new LanguageSupport(language, [
+        language.data.of({ autocomplete: completeFromList(completions) }),
+        language.data.of({ autocomplete: completeAnyWord })
+    ]);
+}
+/** All languages available to rich code blocks */
+export const codeBlockLanguages = [
+    {
+        id: 'plaintext',
+        label: 'Plain text',
+        aliases: ['text', 'plain', 'txt', 'none'],
+        load: () => []
+    },
+    {
+        id: 'javascript',
+        label: 'JavaScript',
+        aliases: ['js', 'jsx', 'mjs', 'node'],
+        load: () => javascript({ jsx: true })
+    },
+    {
+        id: 'typescript',
+        label: 'TypeScript',
+        aliases: ['ts', 'tsx'],
+        load: () => javascript({ typescript: true, jsx: true })
+    },
+    {
+        id: 'html',
+        label: 'HTML',
+        aliases: ['xml', 'svg', 'markup', 'xhtml'],
+        load: () => html()
+    },
+    {
+        id: 'css',
+        label: 'CSS',
+        aliases: ['scss', 'less'],
+        load: () => css()
+    },
+    {
+        id: 'json',
+        label: 'JSON',
+        aliases: ['jsonc'],
+        load: () => json()
+    },
+    {
+        id: 'markdown',
+        label: 'Markdown',
+        aliases: ['md'],
+        load: () => markdown()
+    },
+    {
+        id: 'sql',
+        label: 'SQL',
+        aliases: ['tsql', 'mssql', 'sqlserver', 'mysql', 'postgres', 'postgresql', 'sqlite', 'plsql'],
+        // T-SQL dialect: covers standard SQL plus SQL Server extras
+        // ([bracketed] identifiers, @variables, TOP, NVARCHAR, ...)
+        load: () => sql({ dialect: MSSQL, upperCaseKeywords: true })
+    },
+    {
+        id: 'csharp',
+        label: 'C#',
+        aliases: ['cs', 'c#', 'dotnet'],
+        load: () => legacySupport(csharp, [
+            ...toCompletions(CSHARP_KEYWORDS, 'keyword'),
+            ...toCompletions(CSHARP_COMMON_TYPES, 'class')
+        ])
+    },
+    {
+        id: 'powershell',
+        label: 'PowerShell',
+        aliases: ['ps', 'ps1', 'pwsh', 'posh'],
+        load: () => legacySupport(powerShell, [
+            ...toCompletions(POWERSHELL_KEYWORDS, 'keyword'),
+            ...toCompletions(POWERSHELL_CMDLETS, 'function')
+        ])
+    }
+];
+/** Look up a language definition by id or alias (case-insensitive) */
+export function resolveCodeBlockLanguage(language) {
+    if (!language)
+        return undefined;
+    const normalized = language.toLowerCase();
+    return codeBlockLanguages.find((def) => def.id === normalized || def.aliases.includes(normalized));
+}

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

@@ -0,0 +1,7 @@
+export { Alert } from './Alert.js';
+export { Div } from './Div.js';
+export { Span } from './Span.js';
+export { CodeBlockEditor } from './CodeBlockEditor.js';
+export type { CodeBlockEditorOptions, CodeBlocksOptions } from './CodeBlockEditor.js';
+export { codeBlockLanguages, resolveCodeBlockLanguage } from './codeBlockLanguages.js';
+export type { CodeBlockLanguageDef, CodeBlockLanguageId } from './codeBlockLanguages.js';

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

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

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

@@ -0,0 +1,261 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconAlertTriangle } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+
+  let showDialog = $state(false)
+  let dialogElement: HTMLDivElement | undefined = $state()
+  let titleInputElement: HTMLInputElement | undefined = $state()
+  let selectedVariant = $state('default')
+  let alertTitle = $state('Alert')
+
+  const variants = [
+    { value: 'default', label: 'Default', color: 'var(--ui-accent)' },
+    { value: 'warning', label: 'Warning', color: '#ffc107' },
+    { value: 'danger', label: 'Danger', color: '#dc3545' }
+  ]
+
+  const toggleDialog = () => {
+    showDialog = !showDialog
+    if (showDialog) {
+      // Focus and select the title input when dialog opens
+      setTimeout(() => {
+        titleInputElement?.focus()
+        titleInputElement?.select()
+      }, 0)
+    }
+  }
+
+  const insertAlert = () => {
+    editor
+      .chain()
+      .focus()
+      .setAlert({
+        variant: selectedVariant,
+        title: alertTitle || 'Alert'
+      })
+      .run()
+
+    showDialog = false
+    // Reset to defaults
+    selectedVariant = 'default'
+    alertTitle = 'Alert'
+  }
+
+  const closeDialog = () => {
+    showDialog = false
+    selectedVariant = 'default'
+    alertTitle = 'Alert'
+  }
+</script>
+
+<div style="position: relative; display: inline-block;">
+  <ToolbarButton
+    icon={iconAlertTriangle}
+    title="Insert Alert"
+    active={showDialog}
+    onclick={toggleDialog}
+  />
+
+  {#if showDialog}
+    <div class="alert-dialog" bind:this={dialogElement}>
+      <div class="dialog-header">
+        <h4>Insert Alert</h4>
+      </div>
+
+      <div class="dialog-body">
+        <div class="form-group">
+          <label for="alert-title">Title</label>
+          <input
+            id="alert-title"
+            type="text"
+            bind:this={titleInputElement}
+            bind:value={alertTitle}
+            placeholder="Enter alert title"
+            class="form-input"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="alert-variants">Variant</label>
+          <div id="alert-variants" class="variant-grid" role="group" aria-label="Alert variant selection">
+            {#each variants as variant}
+              <button
+                class="variant-button"
+                class:active={selectedVariant === variant.value}
+                style="border-left: 4px solid {variant.color}"
+                onclick={() => (selectedVariant = variant.value)}
+                type="button"
+              >
+                {variant.label}
+              </button>
+            {/each}
+          </div>
+        </div>
+      </div>
+
+      <div class="dialog-footer">
+        <button class="btn btn-secondary" onclick={closeDialog} type="button">
+          Cancel
+        </button>
+        <button class="btn btn-primary" onclick={insertAlert} type="button">
+          Insert
+        </button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .alert-dialog {
+    position: absolute;
+    top: 100%;
+    right: 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;
+    min-width: 300px;
+    max-width: 350px;
+  }
+
+  :global(.dark) .alert-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: 16px;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .form-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:focus {
+    outline: none;
+    border-color: var(--ui-primary);
+  }
+
+  :global(.dark) .form-input:focus {
+    border-color: var(--ui-accent);
+  }
+
+  .variant-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .variant-button {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--paper-body-bg);
+    color: var(--text-color);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-align: left;
+  }
+
+  .variant-button:hover {
+    background: var(--page-bg);
+  }
+
+  .variant-button.active {
+    background: var(--page-bg);
+    border-color: var(--ui-primary);
+    font-weight: 600;
+  }
+
+  :global(.dark) .variant-button.active {
+    border-color: var(--ui-accent);
+  }
+
+  .dialog-footer {
+    padding: 12px 16px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .btn {
+    padding: 6px 16px;
+    border: none;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    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);
+  }
+</style>