@sierra-95/svelte-scaffold 1.0.9 → 1.0.10

package/dist/components/Modules/Editor/Marks/TextFormatting/textFormatting.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	import type { Editor } from "@tiptap/core";
-
-	export let editor: Editor;
-
-	const actions = [
-		{ name: 'bold', icon: 'bold' },
-		{ name: 'italic', icon: 'italic' },
-		{ name: 'underline', icon: 'underline' },
-	];
-
-	function runToggle(name: string) {
-		if (!editor) return;
-		const cmd = `toggle${name.charAt(0).toUpperCase() + name.slice(1)}`;
-		(editor.chain().focus() as any)[cmd]().run();
-	}
-</script>
-
-{#if editor}
-	<div style="display: flex; gap: 0.5rem">
-		{#each actions as { name, icon }}
-			<button
-				aria-label="Text Formatting: {name}"
-				title={name.charAt(0).toUpperCase() + name.slice(1)}
-				on:click={() => runToggle(name)}
-				class="{editor.isActive(name) ? 'active' : ''}"
-			>
-			<i class="fa fa-{icon}"></i>
-			</button>
-		{/each}
-	</div>
-{/if}
+<script lang="ts">
+	import type { Editor } from "@tiptap/core";
+
+	export let editor: Editor;
+
+	const actions = [
+		{ name: 'bold', icon: 'bold' },
+		{ name: 'italic', icon: 'italic' },
+		{ name: 'underline', icon: 'underline' },
+	];
+
+	function runToggle(name: string) {
+		if (!editor) return;
+		const cmd = `toggle${name.charAt(0).toUpperCase() + name.slice(1)}`;
+		(editor.chain().focus() as any)[cmd]().run();
+	}
+</script>
+
+{#if editor}
+	<div style="display: flex; gap: 0.5rem">
+		{#each actions as { name, icon }}
+			<button
+				aria-label="Text Formatting: {name}"
+				title={name.charAt(0).toUpperCase() + name.slice(1)}
+				on:click={() => runToggle(name)}
+				class="{editor.isActive(name) ? 'active' : ''}"
+			>
+			<i class="fa fa-{icon}"></i>
+			</button>
+		{/each}
+	</div>
+{/if}

package/dist/components/Modules/Editor/Nodes/Headings/heading.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import type { Editor } from "@tiptap/core";
-  import {DropdownContainer, MenuItem} from '../../../../../index.js';
-
-  export let editor: Editor;
-
-  let open = false;
-
-  const headingOptions = [
-    { label: 'H1', value: 'heading', level: 1 as const },
-    { label: 'H2', value: 'heading', level: 2 as const },
-    { label: 'H3', value: 'heading', level: 3 as const },
-    { label: 'H4', value: 'heading', level: 4 as const },
-    { label: 'H5', value: 'heading', level: 5 as const },
-    { label: 'H6', value: 'heading', level: 6 as const }  
-  ];
-
-  type HeadingOption = {
-    label: string;
-    value: string;
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-  };
-
-  function applyHeading(option: HeadingOption) {
-    if (option.value === 'paragraph') {
-      editor.chain().focus().setParagraph().run();
-    } else {
-      editor.chain().focus().toggleHeading({ level: option.level }).run();
-    }
-  }
-
-  onMount(() => {
-    editor.chain().focus().toggleHeading({ level: 5 }).run();
-  });
-</script>
-
-{#if editor}
-  <DropdownContainer bind:open>
-    {#snippet dropdownTrigger()}
-        <button aria-label="Heading Options" on:click={() => (open = !open)} style="display: flex; align-items: center; gap: 4px;">
-          <h5 style="font-weight: bold;">H{editor.getAttributes('heading').level}</h5>
-          <i class="fa fa-chevron-down {open ? 'active' : ''}"></i>
-        </button>
-    {/snippet}
-    {#each headingOptions as option}
-      <MenuItem
-        active={option.level === editor.getAttributes('heading').level}
-        onclick={() => {
-          applyHeading(option);
-          open = false;
-        }}
-      >
-        {option.label}
-      </MenuItem>
-    {/each}
-  </DropdownContainer>
-{/if}
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Editor } from "@tiptap/core";
+  import {DropdownContainer, MenuItem} from '../../../../../index.js';
+
+  export let editor: Editor;
+
+  let open = false;
+
+  const headingOptions = [
+    { label: 'H1', value: 'heading', level: 1 as const },
+    { label: 'H2', value: 'heading', level: 2 as const },
+    { label: 'H3', value: 'heading', level: 3 as const },
+    { label: 'H4', value: 'heading', level: 4 as const },
+    { label: 'H5', value: 'heading', level: 5 as const },
+    { label: 'H6', value: 'heading', level: 6 as const }  
+  ];
+
+  type HeadingOption = {
+    label: string;
+    value: string;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+  };
+
+  function applyHeading(option: HeadingOption) {
+    if (option.value === 'paragraph') {
+      editor.chain().focus().setParagraph().run();
+    } else {
+      editor.chain().focus().toggleHeading({ level: option.level }).run();
+    }
+  }
+
+  onMount(() => {
+    editor.chain().focus().toggleHeading({ level: 5 }).run();
+  });
+</script>
+
+{#if editor}
+  <DropdownContainer bind:open>
+    {#snippet dropdownTrigger()}
+        <button aria-label="Heading Options" on:click={() => (open = !open)} style="display: flex; align-items: center; gap: 4px;">
+          <h5 style="font-weight: bold;">H{editor.getAttributes('heading').level}</h5>
+          <i class="fa fa-chevron-down {open ? 'active' : ''}"></i>
+        </button>
+    {/snippet}
+    {#each headingOptions as option}
+      <MenuItem
+        active={option.level === editor.getAttributes('heading').level}
+        onclick={() => {
+          applyHeading(option);
+          open = false;
+        }}
+      >
+        {option.label}
+      </MenuItem>
+    {/each}
+  </DropdownContainer>
+{/if}

package/dist/components/Modules/Editor/Nodes/History/history.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-  import type { Editor } from "@tiptap/core";
-
-  export let editor: Editor;
-
-  function undo() {
-    editor.chain().focus().undo().run();
-  }
-
-  function redo() {
-    editor.chain().focus().redo().run();
-  }
-</script>
-
-<button on:click={undo} aria-label="Undo" title="Undo" disabled={!editor.can().undo()}>
-    <i class="fa fa-undo"></i>
-</button>
-
-<button on:click={redo} aria-label="Redo" title="Redo" disabled={!editor.can().redo()}>
-    <i class="fa fa-redo"></i>
-</button>
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+
+  export let editor: Editor;
+
+  function undo() {
+    editor.chain().focus().undo().run();
+  }
+
+  function redo() {
+    editor.chain().focus().redo().run();
+  }
+</script>
+
+<button on:click={undo} aria-label="Undo" title="Undo" disabled={!editor.can().undo()}>
+    <i class="fa fa-undo"></i>
+</button>
+
+<button on:click={redo} aria-label="Redo" title="Redo" disabled={!editor.can().redo()}>
+    <i class="fa fa-redo"></i>
+</button>

package/dist/components/Modules/Editor/Nodes/Images/images.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-	import { insertImageAndMoveCursor } from '../../tools.js';
-	import {fileInputStore, resetFileInputStore, editorStore, setToastMessage, modalStore, Input, DropdownContainer, MenuItem} from '../../../../../index.js';
-
-
-  	import type { Editor } from "@tiptap/core";
-	export let editor: Editor;
-	
-	let openDropdown = false;
-	function handleInsertImage(){
-		if(
-			!$editorStore.r2_key ||
-			!$editorStore.serverGetUrl ||
-			!$editorStore.serverUploadUrl ||
-			!$editorStore.serverDeleteUrl
-		){
-			setToastMessage('error','File upload configuration is missing.');
-			return;
-		}
-		fileInputStore.update(store => ({ 
-			...store, 
-			uploadType: ['image'],
-			disabledMenuItem: ['Music', 'Videos', 'Documents', 'Others'],
-			r2_key: $editorStore.r2_key,
-			serverGetUrl: $editorStore.serverGetUrl,
-			serverUploadUrl: $editorStore.serverUploadUrl,
-			serverDeleteUrl: $editorStore.serverDeleteUrl,
-			uploadModalOpen: true 
-		}));
-	}
-
-	$: if (
-		$fileInputStore.submissionComplete &&
-		$fileInputStore.submissions.length > 0 &&
-		$fileInputStore.uploadModalOpen === false &&
-		editor
-	) {
-		const urlsToInsert = $fileInputStore.submissions.map(item => item.url);
-
-		for (const finalURL of urlsToInsert) {
-			insertImageAndMoveCursor(finalURL, editor);
-		}
-		
-		resetFileInputStore();
-	}
-	
-	let value = ''
-	function enterURL(){
-		modalStore.update(m => ({
-			...m,
-			open: true,
-			title: 'Editor',
-			onConfirm: () => {
-				if (!isValidUrl(value)) {
-					setToastMessage('error', 'Please enter a valid image URL.');
-					return;
-				}
-				insertImageAndMoveCursor(value, editor);
-				value = ''
-			},
-			onCancel: () => { value = ''},
-			render: formContent
-		}));
-	}
-	function isValidUrl(value: string): boolean {
-		try {
-			const url = new URL(value);
-			return url.protocol === 'http:' || url.protocol === 'https:';
-		} catch {
-			return false;
-		}
-	}
-</script>
-{#snippet formContent()}
-	<Input label="Enter Image URL" id="image-url" bind:value={value}/>
-{/snippet}
-<DropdownContainer bind:open={openDropdown} width="150px">
-	{#snippet dropdownTrigger()}
-		<button aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
-			<i class="fa fa-file"></i>
-		</button>
-	{/snippet}
-	<MenuItem onclick={() => { handleInsertImage(); openDropdown = false; }}>File Picker</MenuItem>
-	<MenuItem onclick={() => { enterURL(); openDropdown = false; }}>Enter URL</MenuItem>
-</DropdownContainer>
+<script lang="ts">
+	import { insertImageAndMoveCursor } from '../../tools.js';
+	import {fileInputStore, resetFileInputStore, editorStore, setToastMessage, modalStore, Input, DropdownContainer, MenuItem} from '../../../../../index.js';
+
+
+  	import type { Editor } from "@tiptap/core";
+	export let editor: Editor;
+	
+	let openDropdown = false;
+	function handleInsertImage(){
+		if(
+			!$editorStore.r2_key ||
+			!$editorStore.serverGetUrl ||
+			!$editorStore.serverUploadUrl ||
+			!$editorStore.serverDeleteUrl
+		){
+			setToastMessage('error','File upload configuration is missing.');
+			return;
+		}
+		fileInputStore.update(store => ({ 
+			...store, 
+			uploadType: ['image'],
+			disabledMenuItem: ['Music', 'Videos', 'Documents', 'Others'],
+			r2_key: $editorStore.r2_key,
+			serverGetUrl: $editorStore.serverGetUrl,
+			serverUploadUrl: $editorStore.serverUploadUrl,
+			serverDeleteUrl: $editorStore.serverDeleteUrl,
+			uploadModalOpen: true 
+		}));
+	}
+
+	$: if (
+		$fileInputStore.submissionComplete &&
+		$fileInputStore.submissions.length > 0 &&
+		$fileInputStore.uploadModalOpen === false &&
+		editor
+	) {
+		const urlsToInsert = $fileInputStore.submissions.map(item => item.url);
+
+		for (const finalURL of urlsToInsert) {
+			insertImageAndMoveCursor(finalURL, editor);
+		}
+		
+		resetFileInputStore();
+	}
+	
+	let value = ''
+	function enterURL(){
+		modalStore.update(m => ({
+			...m,
+			open: true,
+			title: 'Editor',
+			onConfirm: () => {
+				if (!isValidUrl(value)) {
+					setToastMessage('error', 'Please enter a valid image URL.');
+					return;
+				}
+				insertImageAndMoveCursor(value, editor);
+				value = ''
+			},
+			onCancel: () => { value = ''},
+			render: formContent
+		}));
+	}
+	function isValidUrl(value: string): boolean {
+		try {
+			const url = new URL(value);
+			return url.protocol === 'http:' || url.protocol === 'https:';
+		} catch {
+			return false;
+		}
+	}
+</script>
+{#snippet formContent()}
+	<Input label="Enter Image URL" id="image-url" bind:value={value}/>
+{/snippet}
+<DropdownContainer bind:open={openDropdown} width="150px">
+	{#snippet dropdownTrigger()}
+		<button aria-label="Insert Image" title="Insert File" on:click={() => openDropdown = !openDropdown}>
+			<i class="fa fa-file"></i>
+		</button>
+	{/snippet}
+	<MenuItem onclick={() => { handleInsertImage(); openDropdown = false; }}>File Picker</MenuItem>
+	<MenuItem onclick={() => { enterURL(); openDropdown = false; }}>Enter URL</MenuItem>
+</DropdownContainer>

package/dist/components/Modules/Editor/Nodes/Lists/lists.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-    import type { Editor } from "@tiptap/core";
-    export let editor: Editor;
-
-    const toggleBullet = () => {
-      editor.chain().focus().toggleBulletList().run();
-    };
-
-    const toggleOrdered = () => {
-      editor.chain().focus().toggleOrderedList().run();
-    };
-</script>
-
-<div style="display: flex; gap: 0.5rem">
-  <button
-    aria-label="Bullet List"
-    title="Bullet List"
-    on:click={toggleBullet}
-    class="{editor?.isActive('bulletList') ? 'active' : ''}"
-  ><i class="fa fa-list"></i>
-  </button>
-
-  <button
-    aria-label="Ordered List"
-    title="Ordered List"
-    on:click={toggleOrdered}
-    class="{editor?.isActive('orderedList') ? 'active' : ''}"
-  ><i class="fa fa-list-ol"></i>
-  </button>
-</div>
+<script lang="ts">
+    import type { Editor } from "@tiptap/core";
+    export let editor: Editor;
+
+    const toggleBullet = () => {
+      editor.chain().focus().toggleBulletList().run();
+    };
+
+    const toggleOrdered = () => {
+      editor.chain().focus().toggleOrderedList().run();
+    };
+</script>
+
+<div style="display: flex; gap: 0.5rem">
+  <button
+    aria-label="Bullet List"
+    title="Bullet List"
+    on:click={toggleBullet}
+    class="{editor?.isActive('bulletList') ? 'active' : ''}"
+  ><i class="fa fa-list"></i>
+  </button>
+
+  <button
+    aria-label="Ordered List"
+    title="Ordered List"
+    on:click={toggleOrdered}
+    class="{editor?.isActive('orderedList') ? 'active' : ''}"
+  ><i class="fa fa-list-ol"></i>
+  </button>
+</div>

package/dist/components/Modules/Editor/Nodes/TextAlign/textAlign.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { Editor } from "@tiptap/core";
-  import {DropdownContainer, MenuItem} from '../../../../../index.js'
-
-  export let editor: Editor;
-
-  let open = false;
-
-  const alignments = [
-    { value: 'left', label: 'Left' },
-    { value: 'center', label: 'Center' },
-    { value: 'right', label: 'Right' },
-    { value: 'justify', label: 'Justify' },
-  ];
-
-  type AlignmentOption = {
-    value: string;
-    label: string;
-  };
-
-  function applyAlignment(option: AlignmentOption) {
-    editor?.chain().focus().setTextAlign(option.value).run();
-  }
-  onMount(() => {
-    applyAlignment({ value: 'left', label: 'Left' });
-  });
-
-  $: currentAlignment = editor
-    ? alignments.find(a => editor.isActive({ textAlign: a.value })) || alignments[0]
-    : alignments[0];
-
-</script>
-
-{#if editor}
-  <DropdownContainer bind:open>
-    {#snippet dropdownTrigger()}
-        <button aria-label="Text Align Options" on:click={() => (open = !open)}>
-          <i class="fa-solid fa-align-{currentAlignment.value}"></i>
-        </button>
-    {/snippet}
-    {#each alignments as { value, label }}
-      <MenuItem
-        icon= "fa-align-{value}"
-        active={editor.isActive({ textAlign: value })}
-        onclick={() => {
-          applyAlignment({ value, label });
-          open = false;
-        }}
-      >
-        {label}
-      </MenuItem>
-    {/each}
-  </DropdownContainer>
-{/if}
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Editor } from "@tiptap/core";
+  import {DropdownContainer, MenuItem} from '../../../../../index.js'
+
+  export let editor: Editor;
+
+  let open = false;
+
+  const alignments = [
+    { value: 'left', label: 'Left' },
+    { value: 'center', label: 'Center' },
+    { value: 'right', label: 'Right' },
+    { value: 'justify', label: 'Justify' },
+  ];
+
+  type AlignmentOption = {
+    value: string;
+    label: string;
+  };
+
+  function applyAlignment(option: AlignmentOption) {
+    editor?.chain().focus().setTextAlign(option.value).run();
+  }
+  onMount(() => {
+    applyAlignment({ value: 'left', label: 'Left' });
+  });
+
+  $: currentAlignment = editor
+    ? alignments.find(a => editor.isActive({ textAlign: a.value })) || alignments[0]
+    : alignments[0];
+
+</script>
+
+{#if editor}
+  <DropdownContainer bind:open>
+    {#snippet dropdownTrigger()}
+        <button aria-label="Text Align Options" on:click={() => (open = !open)}>
+          <i class="fa-solid fa-align-{currentAlignment.value}"></i>
+        </button>
+    {/snippet}
+    {#each alignments as { value, label }}
+      <MenuItem
+        icon= "fa-align-{value}"
+        active={editor.isActive({ textAlign: value })}
+        onclick={() => {
+          applyAlignment({ value, label });
+          open = false;
+        }}
+      >
+        {label}
+      </MenuItem>
+    {/each}
+  </DropdownContainer>
+{/if}

package/dist/components/Modules/Editor/Nodes/TextColor/styles.css

@@ -1,18 +1,18 @@
-#editor-text-color .text-color-selector-dropdown {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 5px;
-  padding: 5px;
-}
-
-#editor-text-color .color-swatch {
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 50%;
-  transition: transform 0.1s ease-in-out;
-}
-
-#editor-text-color .color-swatch:hover {
-  transform: scale(1.1);
-}
+#editor-text-color .text-color-selector-dropdown {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 5px;
+  padding: 5px;
+}
+
+#editor-text-color .color-swatch {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: transform 0.1s ease-in-out;
+}
+
+#editor-text-color .color-swatch:hover {
+  transform: scale(1.1);
+}