@placeholderco/placeholder-ui 1.0.12 → 2.1.0

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import Dialog from '../../../ui/Dialog.svelte'
+  import Button from '../../../ui/Button.svelte'
+  import CodeMirror from '../../CodeMirror.svelte'
+  import { iconCode } from '../../../icon/index.js'
+  import { themeState } from '../../../theme.svelte.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+
+  let showDialog = $state(false)
+  let htmlContent = $state('')
+  let codeMirrorRef: any
+
+  const openHtmlEditor = () => {
+    htmlContent = editor.getHTML()
+    showDialog = true
+  }
+
+  const closeDialog = () => {
+    showDialog = false
+  }
+
+  const saveHtml = () => {
+    if (codeMirrorRef) {
+      const newHtml = codeMirrorRef.getValue()
+      editor.commands.setContent(newHtml)
+    }
+    closeDialog()
+  }
+</script>
+
+<ToolbarButton
+  icon={iconCode}
+  title="Edit HTML"
+  onclick={openHtmlEditor}
+/>
+
+<Dialog bind:show={showDialog} title="Edit HTML" size="full" preventOverflow={false}>
+  <div class="html-editor-container">
+    <CodeMirror
+      bind:this={codeMirrorRef}
+      value={htmlContent}
+      language="html"
+      theme={themeState.isDarkMode ? 'dark' : 'light'}
+      height="100%"
+    />
+  </div>
+
+  {#snippet footer()}
+    <Button variant="secondary" onclick={closeDialog}>Cancel</Button>
+    <Button onclick={saveHtml}>Save</Button>
+  {/snippet}
+</Dialog>
+
+<style>
+  .html-editor-container {
+    width: 100%;
+    height: calc(100vh - 200px);
+    max-height: 600px;
+    min-height: 300px;
+  }
+</style>

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

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

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconPhoto } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+    onImageUpload?: (file: File) => Promise<string | null>
+  }
+
+  let { editor, onImageUpload }: Props = $props()
+
+  let fileInputElement: HTMLInputElement | undefined = $state()
+
+  const handleFileSelect = async (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+
+    if (!file || !onImageUpload) return
+
+    try {
+      const imageUrl = await onImageUpload(file)
+
+      if (imageUrl) {
+        editor.chain().focus().setImage({ src: imageUrl }).run()
+      }
+    } catch (error) {
+      console.error('Failed to upload image:', error)
+    }
+
+    // Reset the input
+    if (fileInputElement) {
+      fileInputElement.value = ''
+    }
+  }
+
+  const openFilePicker = () => {
+    fileInputElement?.click()
+  }
+</script>
+
+<input
+  type="file"
+  accept="image/*"
+  bind:this={fileInputElement}
+  onchange={handleFileSelect}
+  style="display: none;"
+/>
+
+<ToolbarButton
+  icon={iconPhoto}
+  title="Add Image"
+  onclick={openFilePicker}
+/>

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

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+    onImageUpload?: (file: File) => Promise<string | null>;
+}
+declare const ImageButton: import("svelte").Component<Props, {}, "">;
+type ImageButton = ReturnType<typeof ImageButton>;
+export default ImageButton;

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

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

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

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

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

@@ -0,0 +1,257 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconLink } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+
+  let showLinkInput = $state(false)
+  let linkUrl = $state('')
+  let linkOpenInNewTab = $state(false)
+  let linkInputElement: HTMLInputElement | undefined = $state()
+  let linkDropdownElement: HTMLDivElement | undefined = $state()
+
+  const toggleLink = () => {
+    const attrs = editor.getAttributes('link')
+    linkUrl = attrs?.href || ''
+    linkOpenInNewTab = attrs?.target === '_blank'
+    showLinkInput = !showLinkInput
+
+    if (showLinkInput) {
+      setTimeout(() => {
+        linkInputElement?.focus()
+        linkInputElement?.select()
+      }, 0)
+    }
+  }
+
+  const setLink = () => {
+    if (linkUrl === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    } else {
+      const linkAttrs: { href: string; target?: string; rel?: string } = { href: linkUrl }
+      if (linkOpenInNewTab) {
+        linkAttrs.target = '_blank'
+        linkAttrs.rel = 'noopener noreferrer'
+      }
+      editor.chain().focus().extendMarkRange('link').setLink(linkAttrs).run()
+    }
+    showLinkInput = false
+    linkUrl = ''
+    linkOpenInNewTab = false
+  }
+
+  const updateLinkTarget = () => {
+    if (!linkUrl) return
+
+    const linkAttrs: { href: string; target?: string; rel?: string } = { href: linkUrl }
+    if (linkOpenInNewTab) {
+      linkAttrs.target = '_blank'
+      linkAttrs.rel = 'noopener noreferrer'
+    }
+
+    if (editor.isActive('link')) {
+      editor.chain().focus().extendMarkRange('link').setLink(linkAttrs).run()
+    } else if (!editor.state.selection.empty) {
+      editor.chain().focus().setLink(linkAttrs).run()
+    }
+  }
+
+  const removeLink = () => {
+    editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    showLinkInput = false
+    linkUrl = ''
+    linkOpenInNewTab = false
+  }
+
+  const handleLinkKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      setLink()
+    } else if (e.key === 'Escape') {
+      showLinkInput = false
+      linkUrl = ''
+      linkOpenInNewTab = false
+    }
+  }
+</script>
+
+<div style="position: relative; display: inline-block;">
+  <ToolbarButton
+    icon={iconLink}
+    title="Link"
+    active={editor.isActive('link')}
+    onclick={toggleLink}
+  />
+
+  {#if showLinkInput}
+    <div class="link-dropdown" bind:this={linkDropdownElement}>
+      <div class="link-input-row">
+        <input
+          type="text"
+          bind:this={linkInputElement}
+          bind:value={linkUrl}
+          onkeydown={handleLinkKeydown}
+          placeholder="Enter URL"
+          class="link-input"
+        />
+        <button onclick={setLink} class="link-submit-button" title="Apply">✓</button>
+        {#if editor.isActive('link')}
+          <button onclick={removeLink} class="link-remove-button" title="Remove Link">✕</button>
+        {/if}
+      </div>
+      <label class="link-checkbox-label">
+        <input
+          type="checkbox"
+          bind:checked={linkOpenInNewTab}
+          onchange={updateLinkTarget}
+          class="link-checkbox"
+        />
+        <span>Open in new tab</span>
+      </label>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .link-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    background: var(--paper-body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 320px;
+  }
+
+  :global(.dark) .link-dropdown {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .link-input-row {
+    display: flex;
+    gap: 4px;
+  }
+
+  .link-input {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 14px;
+    outline: none;
+    font-family: inherit;
+    background: var(--paper-body-bg);
+    color: var(--text-color);
+  }
+
+  .link-input::placeholder {
+    color: var(--placeholder-color);
+  }
+
+  .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-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    color: var(--text-color);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .link-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--ui-primary);
+  }
+
+  :global(.dark) .link-checkbox {
+    accent-color: var(--ui-accent);
+  }
+
+  .link-checkbox-label:hover {
+    color: var(--ui-primary);
+  }
+
+  :global(.dark) .link-checkbox-label:hover {
+    color: var(--ui-accent);
+  }
+
+  .link-submit-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: none;
+    background: var(--ui-primary);
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background 0.15s ease;
+  }
+
+  .link-submit-button:hover {
+    background: var(--ui-tertiary-dark);
+  }
+
+  :global(.dark) .link-submit-button {
+    background: var(--ui-accent);
+    color: var(--ui-primary);
+  }
+
+  :global(.dark) .link-submit-button:hover {
+    background: var(--ui-accent-dark);
+  }
+
+  .link-remove-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: none;
+    background: var(--ui-tertiary);
+    color: var(--ui-primary);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: bold;
+    transition: background 0.15s ease;
+  }
+
+  .link-remove-button:hover {
+    background: var(--ui-tertiary-dark);
+  }
+
+  :global(.dark) .link-remove-button {
+    background: var(--ui-accent);
+    color: var(--ui-primary);
+  }
+
+  :global(.dark) .link-remove-button:hover {
+    background: var(--ui-accent-dark);
+  }
+</style>

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconArrowForwardUp } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconArrowForwardUp}
+  title="Redo"
+  disabled={!editor.can().redo()}
+  onclick={() => editor.chain().focus().redo().run()}
+/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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