@placeholderco/placeholder-ui 2.1.0 → 2.2.0

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

@@ -1,58 +1,58 @@
 <script lang="ts">
-  import type { Editor } from '@tiptap/core'
-  import ToolbarButton from './ToolbarButton.svelte'
-  import { iconPaperclip } from '../../../icon/index.js'
-  import type { DocumentUploadResult } from '../TipTap.svelte'
-
-  interface Props {
-    editor: Editor
-    onDocumentUpload?: (file: File) => Promise<DocumentUploadResult | null>
-  }
-
-  let { editor, onDocumentUpload }: 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 || !onDocumentUpload) return
-
-    try {
-      const result = await onDocumentUpload(file)
-
-      if (result) {
-        editor
-          .chain()
-          .focus()
-          .insertContent({
-            type: 'text',
-            text: result.label,
-            marks: [{ type: 'link', attrs: { href: result.url } }]
-          })
-          .run()
-      }
-    } catch (error) {
-      console.error('Failed to upload document:', error)
-    }
-
-    // Reset the input
-    if (fileInputElement) {
-      fileInputElement.value = ''
-    }
-  }
-
-  const openFilePicker = () => {
-    fileInputElement?.click()
-  }
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconPaperclip } from '../../../icon/index.js';
+	import type { DocumentUploadResult } from '../TipTap.svelte';
+
+	interface Props {
+		editor: Editor;
+		onDocumentUpload?: (file: File) => Promise<DocumentUploadResult | null>;
+	}
+
+	let { editor, onDocumentUpload }: 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 || !onDocumentUpload) return;
+
+		try {
+			const result = await onDocumentUpload(file);
+
+			if (result) {
+				editor
+					.chain()
+					.focus()
+					.insertContent({
+						type: 'text',
+						text: result.label,
+						marks: [{ type: 'link', attrs: { href: result.url } }]
+					})
+					.run();
+			}
+		} catch (error) {
+			console.error('Failed to upload document:', error);
+		}
+
+		// Reset the input
+		if (fileInputElement) {
+			fileInputElement.value = '';
+		}
+	};
+
+	const openFilePicker = () => {
+		fileInputElement?.click();
+	};
 </script>
 
 <input
-  type="file"
-  bind:this={fileInputElement}
-  onchange={handleFileSelect}
-  style="display: none;"
+	type="file"
+	bind:this={fileInputElement}
+	onchange={handleFileSelect}
+	style="display: none;"
 />
 
 <ToolbarButton icon={iconPaperclip} title="Attach Document" onclick={openFilePicker} />

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

@@ -1,30 +1,30 @@
 <script lang="ts">
-  import type { Editor } from '@tiptap/core'
-  import ToolbarButton from './ToolbarButton.svelte'
-  import { iconH1, iconH2, iconH3, iconH4, iconH5, iconH6 } from '../../../icon/index.js'
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconH1, iconH2, iconH3, iconH4, iconH5, iconH6 } from '../../../icon/index.js';
 
-  interface Props {
-    editor: Editor
-    level?: 1 | 2 | 3 | 4 | 5 | 6
-  }
+	interface Props {
+		editor: Editor;
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	}
 
-  let { editor, level = 1 }: Props = $props()
+	let { editor, level = 1 }: Props = $props();
 
-  const iconMap = {
-    1: iconH1,
-    2: iconH2,
-    3: iconH3,
-    4: iconH4,
-    5: iconH5,
-    6: iconH6
-  }
+	const iconMap = {
+		1: iconH1,
+		2: iconH2,
+		3: iconH3,
+		4: iconH4,
+		5: iconH5,
+		6: iconH6
+	};
 
-  const icon = $derived(iconMap[level])
+	const icon = $derived(iconMap[level]);
 </script>
 
 <ToolbarButton
-  {icon}
-  title="Heading {level}"
-  active={editor.isActive('heading', { level })}
-  onclick={() => editor.chain().focus().toggleHeading({ level }).run()}
+	{icon}
+	title="Heading {level}"
+	active={editor.isActive('heading', { level })}
+	onclick={() => editor.chain().focus().toggleHeading({ level }).run()}
 />

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

@@ -1,68 +1,64 @@
 <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'
+	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
-  }
+	interface Props {
+		editor: Editor;
+	}
 
-  let { editor }: Props = $props()
+	let { editor }: Props = $props();
 
-  let showDialog = $state(false)
-  let htmlContent = $state('')
-  let codeMirrorRef: any
+	let showDialog = $state(false);
+	let htmlContent = $state('');
+	let codeMirrorRef: any;
 
-  const openHtmlEditor = () => {
-    htmlContent = editor.getHTML()
-    showDialog = true
-  }
+	const openHtmlEditor = () => {
+		htmlContent = editor.getHTML();
+		showDialog = true;
+	};
 
-  const closeDialog = () => {
-    showDialog = false
-  }
+	const closeDialog = () => {
+		showDialog = false;
+	};
 
-  const saveHtml = () => {
-    if (codeMirrorRef) {
-      const newHtml = codeMirrorRef.getValue()
-      editor.commands.setContent(newHtml)
-    }
-    closeDialog()
-  }
+	const saveHtml = () => {
+		if (codeMirrorRef) {
+			const newHtml = codeMirrorRef.getValue();
+			editor.commands.setContent(newHtml);
+		}
+		closeDialog();
+	};
 </script>
 
-<ToolbarButton
-  icon={iconCode}
-  title="Edit HTML"
-  onclick={openHtmlEditor}
-/>
+<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>
+	<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}
+	{#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;
-  }
+	.html-editor-container {
+		width: 100%;
+		height: calc(100vh - 200px);
+		max-height: 600px;
+		min-height: 300px;
+	}
 </style>

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

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

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

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