@sierra-95/svelte-scaffold 1.0.1

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Heading: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Heading = InstanceType<typeof Heading>;
+export default Heading;

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

@@ -0,0 +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>

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const History: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type History = InstanceType<typeof History>;
+export default History;

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

@@ -0,0 +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'],
+			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/Images/images.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Images: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Images = InstanceType<typeof Images>;
+export default Images;

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

@@ -0,0 +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>

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Lists: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Lists = InstanceType<typeof Lists>;
+export default Lists;

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

@@ -0,0 +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}

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextAlign: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextAlign = InstanceType<typeof TextAlign>;
+export default TextAlign;

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

@@ -0,0 +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);
+}

package/dist/components/Modules/Editor/Nodes/TextColor/textColor.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import './styles.css';
+	import { onMount } from 'svelte';
+	import {theme, DropdownContainer} from '../../../../../index.js';
+	import colors from '../../colors.js';
+	
+	import type { Editor } from "@tiptap/core";
+	export let editor: Editor;
+
+	let textColor: HTMLDivElement;
+	let highlightColor = '#ffe066';
+	let textColorDropdown = false;
+	let highlightDropdown = false;
+
+	onMount(() => {
+		if (!editor) return;
+		const value = $theme === 'dark' ? '#ffffff' : '#000000';
+		editor.chain().focus().setColor(value).run();
+		textColor.style.backgroundColor = value;
+	});
+
+	function applyColor(color: string) {
+		editor.chain().focus().setColor(color).run();
+		textColor.style.backgroundColor = color;
+		textColorDropdown = false;
+	}
+</script>
+
+{#if editor}
+
+<main id="editor-text-color" style="display: flex; gap: 0.5rem; align-items: center;">
+	<DropdownContainer bind:open={textColorDropdown}>
+		{#snippet dropdownTrigger()}
+			<button aria-label="Text Color" title="Color" on:click={() => textColorDropdown = !textColorDropdown}>
+				<i class="fa fa-font"></i>
+				<div bind:this={textColor} style="height: 3px; border-radius: 0.3125rem;"></div>
+			</button>
+		{/snippet}
+		{#if textColorDropdown}
+			<div class="text-color-selector-dropdown ">
+				{#each colors as color}
+					<div
+						role="none"
+						class="color-swatch"
+						style="background-color: {color};"
+						on:click={() => applyColor(color)}
+					></div>
+				{/each}
+			</div>
+		{/if}
+	</DropdownContainer>
+
+	<div style="display: flex;">
+		<button
+			aria-label="Highlight"
+			title="Highlight"
+			class="{editor.isActive('highlight') ? 'active' : ''}"
+			on:click={() => editor.chain().focus().toggleHighlight().run()} 
+			style={editor.isActive('highlight') ? `background-color: ${highlightColor};` : ''}
+		>
+		<i class="fa fa-font"></i>
+		</button>
+		<DropdownContainer bind:open={highlightDropdown}>
+			{#snippet dropdownTrigger()}
+				<button aria-label="Highlight Color" on:click={() => highlightDropdown = !highlightDropdown}>
+					<i class="fa fa-chevron-down {highlightDropdown ? 'active' : ''}"></i>
+				</button>
+			{/snippet}
+			{#if highlightDropdown}
+				<div class="text-color-selector-dropdown">
+					{#each colors as color}
+						<div
+							role="none"
+							class="color-swatch"
+							style="background-color: {color};"
+							on:click={() => {
+								editor.chain().focus().setHighlight({ color }).run();
+								highlightDropdown = false;
+								highlightColor = color;
+							}}
+						></div>
+					{/each}
+				</div>
+			{/if}
+		</DropdownContainer>
+	</div>
+</main>
+{/if}

package/dist/components/Modules/Editor/Nodes/TextColor/textColor.svelte.d.ts

@@ -0,0 +1,22 @@
+import './styles.css';
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextColor: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextColor = InstanceType<typeof TextColor>;
+export default TextColor;

package/dist/components/Modules/Editor/Nodes/Youtube/youtube.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import {modalStore, Input} from '../../../../../index.js';
+  import {addYoutubeVideo} from '../../tools.js';
+
+  import type { Editor } from "@tiptap/core";
+  export let editor: Editor;
+
+  let youtubeUrl = '';
+  function triggerModal() {
+      modalStore.update(m => ({
+        ...m,
+        open: true,
+        title: 'Editor',
+        onConfirm: () => {
+          addYoutubeVideo(editor, youtubeUrl);
+          youtubeUrl = '';
+        },
+        render: addYoutubeContent
+      }));
+  }
+</script>
+
+{#snippet addYoutubeContent()}
+    <Input label="Enter Youtube URL" id="youtube-url" bind:value={youtubeUrl}/>
+{/snippet}
+
+<button 
+  aria-label="Youtube URL"
+  on:click={() => triggerModal()} 
+  title="Insert YouTube video">
+ <i class="fa fa-youtube-play"></i>
+</button>

package/dist/components/Modules/Editor/Nodes/Youtube/youtube.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from "@tiptap/core";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Youtube: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Youtube = InstanceType<typeof Youtube>;
+export default Youtube;

package/dist/components/Modules/Editor/colors.d.ts

@@ -0,0 +1,2 @@
+export default colors;
+declare const colors: string[];

package/dist/components/Modules/Editor/colors.js

@@ -0,0 +1,21 @@
+const colors = [
+  // Grayscale
+  '#000000', '#2E2E2E', '#595959', '#7F7F7F', '#A6A6A6', '#D9D9D9',
+
+  // Reds
+  '#7F1D1D', '#991B1B', '#B91C1C', '#DC2626', '#EF4444', '#F87171',
+
+  // Oranges / Browns
+  '#78350F', '#92400E', '#A16207', '#D97706', '#F59E0B', '#FDBA74',
+
+  // Yellows / Golds
+  '#854D0E', '#A16207', '#CA8A04', '#EAB308', '#FACC15', '#FEF08A',
+
+  // Greens
+  '#14532D', '#166534', '#15803D', '#16A34A', '#22C55E', '#86EFAC',
+
+  // Blues
+  '#1E3A8A', '#1D4ED8', '#2563EB', '#3B82F6', '#60A5FA', '#93C5FD',
+];
+
+export default colors;

package/dist/components/Modules/Editor/controls.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import {
+        TextFormatting, Headings, TextColor, TextAlign, Images, History, Youtube,
+        Save, Lists, Links
+    } from './tools.js';
+    import type { Editor } from "@tiptap/core";
+    import './styles/controls.css';
+
+    export let editor: Editor;
+    export let exportText: string;
+    export let content: any = {};
+    
+    const menuItems = [
+        {
+            id: 'home',
+            label: 'Home',
+            icon: 'fa-home',
+            components: [
+                TextFormatting,
+                History,
+                Headings,
+                TextColor,
+                TextAlign,
+                Lists,
+            ]
+        },
+        {
+            id: 'insert',
+            label: 'Insert',
+            icon: 'fa-plus',
+            components: [
+                Images,
+                Links,
+                Youtube,
+            ]
+        },
+    ] as const;
+    
+    type MenuItem = typeof menuItems[number];
+    type MenuId = MenuItem['id'];
+    
+    let activeTab: MenuId = 'home';    
+</script>
+
+
+<main id="controls">
+    <div class="controls-menu" style="display: flex; gap: 0.5rem;"
+    >
+        <Save bind:content {exportText} {editor} />
+        {#each menuItems as item, index (item.id)}
+            <button
+                class={` ${activeTab === item.id ? 'active' : ''}`}
+                on:click={() => {activeTab = item.id}}
+            >
+            <i class="fa {item.icon}"></i>
+            <span>{item.label}</span>
+            </button>
+        {/each}
+    </div>
+    
+    <div class="controls">
+        {#each menuItems as item, index (item.id)}
+           <div  class={`controls-buttons
+                ${activeTab === item.id ? 'active' : ''}
+            `}>
+            {#each item.components as Component}
+                <Component {editor} />
+            {/each}
+            </div>
+        {/each}
+    </div>
+</main>

package/dist/components/Modules/Editor/controls.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Editor } from "@tiptap/core";
+import './styles/controls.css';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Controls: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+    exportText: string;
+    content?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Controls = InstanceType<typeof Controls>;
+export default Controls;

package/dist/components/Modules/Editor/extensions.d.ts

@@ -0,0 +1 @@
+export const extensions: (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-text-style").ColorOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-text-align").TextAlignOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-heading").HeadingOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-youtube").YoutubeOptions, any>)[];