@sierra-95/svelte-scaffold 1.0.1

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

@@ -0,0 +1,59 @@
+import StarterKit from '@tiptap/starter-kit';
+import TextAlign from '@tiptap/extension-text-align';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Color from '@tiptap/extension-color';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Heading from '@tiptap/extension-heading';
+import Youtube from '@tiptap/extension-youtube';
+
+
+export const extensions = [
+  StarterKit.configure({
+    heading: false, 
+    link: false,
+  }),
+  TextStyle,
+  Color,
+  TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  Link.extend({
+    onCreate() {
+      this.editor.on('transaction', ({ transaction }) => {
+        // Only proceed if it's a text insertion
+        if (!transaction.docChanged) return;
+        
+        const { selection } = transaction;
+        const { $from } = selection;
+        
+        // Check if we just inserted a space at the end of a link
+        const linkMark = $from.marks().find(mark => mark.type.name === 'link');
+        if (!linkMark) return;
+        
+        const nodeBefore = $from.nodeBefore;
+        if (nodeBefore?.isText && nodeBefore.text?.endsWith(' ')) {
+          // Use setTimeout to avoid infinite loops
+          setTimeout(() => {
+            this.editor.commands.command(({ tr }) => {
+              tr.removeMark($from.pos - 1, $from.pos, this.type);
+              return true;
+            });
+          }, 0);
+        }
+      });
+    }
+  }).configure({openOnClick: false,}), 
+  Image,
+  Highlight.configure({
+    multicolor: true,
+  }),
+  Heading.configure({
+    levels: [1, 2, 3, 4, 5, 6], 
+  }),
+  Youtube.configure({
+    width: 560,
+    height: 315,
+    controls: true,
+    nocookie: true,
+  }),
+];

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import {extensions} from './extensions.js';
+	import Controls from './controls.svelte';
+	import {resetEditorStore} from '../../../index.js';
+	import './styles/main.css';
+
+	export let content: any = {};
+	export let readOnly: boolean = false; 
+	export const exportText: string = 'Save';
+	
+	let editor: Editor;
+	let element: HTMLElement;
+
+	onMount(() => {
+		editor = new Editor({
+			element,
+			extensions,
+			autofocus: 'end',
+			editable: !readOnly,
+			onTransaction: () => {
+				editor = editor;
+			},
+		});
+		if (editor && content?.json_content) {
+			editor.commands.setContent(content.json_content);
+		}
+	});
+
+	onDestroy(() => {
+		editor?.destroy();
+		resetEditorStore();
+	});
+</script>
+
+<main id="editor">
+	{#if editor && !readOnly}
+		<Controls bind:content {exportText} {editor} />
+	{/if}
+	<div bind:this={element}></div>
+</main>

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

@@ -0,0 +1,25 @@
+import './styles/main.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 Main: $$__sveltets_2_IsomorphicComponent<{
+    content?: any;
+    readOnly?: boolean;
+    exportText?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    exportText: string;
+}, string>;
+type Main = InstanceType<typeof Main>;
+export default Main;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { setToastMessage,isLoading, Button} from '../../../index.js';
+    import { exractContent } from './tools.js';
+
+    import type { Editor } from "@tiptap/core";
+    export let editor: Editor;
+    export let exportText: string;
+    export let content: any = {};
+
+    $: disabled = $isLoading || editor?.isEmpty;
+
+    async function onSave() {
+      try {
+        isLoading.set(true);
+        content = await exractContent(editor); 
+      }catch (error) {
+          setToastMessage('error', 'An error occurred while saving.');
+      } finally {
+        isLoading.set(false);
+      }
+    }
+
+</script>
+
+<Button
+  onclick={onSave}
+  disabled={disabled}
+>{exportText}</Button>

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

@@ -0,0 +1,23 @@
+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 Save: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+    exportText: string;
+    content?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Save = InstanceType<typeof Save>;
+export default Save;

package/dist/components/Modules/Editor/styles/controls.css

@@ -0,0 +1,70 @@
+#editor #controls{
+    margin: 0px 10px;
+    padding-top: 5px;
+}  
+#editor #controls .controls-menu i {
+  display: none;
+}
+#editor #controls .controls-menu #sierra-menu-item i{
+  display: inline-block;
+}
+@media (max-width: 400px) {
+  #editor #controls .controls-menu span {
+      display: none;
+  }  
+  #editor #controls .controls-menu i {
+    display: inline-block;
+  }
+}
+#editor #controls .controls {
+    margin-top: 5px;
+    position: relative;
+    background-color: var(--background-tertiary);
+    border-radius: 15px;
+}
+
+#editor #controls .controls-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 2px 10px;
+  gap: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+#editor #controls .controls-buttons.active {
+    position: relative;
+    opacity: 1;
+    pointer-events: all;
+}
+
+#editor #controls button{
+  align-self:center;
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 3px;
+  transition: background-color 0.3s ease, color 0.1s ease;
+}
+#editor #controls button.active{
+  color: var(--background);
+  background-color: var(--text);
+}
+#editor #controls button:disabled{
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+#editor #controls button:hover:not(.active):not(.base-btn) {
+  color: var(--primary-bg);
+}
+
+#editor #controls i.fa-chevron-down {
+  transition: transform 0.2s;
+}
+#editor #controls i.fa-chevron-down.active {
+  transform: rotate(180deg);
+}

package/dist/components/Modules/Editor/styles/main.css

@@ -0,0 +1,43 @@
+#editor{
+    height: 100%;
+    background-color: var(--background-secondary);
+    box-shadow: var(--box-shadow);
+}
+
+/*TipTap*/
+.tiptap{
+    padding: 20px;
+    outline: none;
+    height: 100%;
+    overflow-y: auto;
+}
+
+.tiptap h1 { font-size: 2rem; font-weight: bold; }
+.tiptap h2 { font-size: 1.5rem; font-weight: bold; }
+.tiptap h3 { font-size: 1.17rem; font-weight: bold; }
+.tiptap h4 { font-size: 1rem; font-weight: 400; }
+.tiptap h5 { font-size: 0.83rem; font-weight: 400; }
+.tiptap h6 { font-size: 0.67rem; font-weight: 400; }
+
+.tiptap a{
+    cursor: pointer;
+    color: var(--primary-bg);
+}
+
+.tiptap ul,
+.tiptap ol {
+  padding: 0 1rem;
+  margin: 1.25rem 1rem 1.25rem 0.4rem;
+}
+
+.tiptap ul li p,
+.tiptap ol li p {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+.tiptap ul {
+  list-style-type: disc;
+}
+.tiptap ol {
+  list-style-type: decimal;
+}

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

@@ -0,0 +1,14 @@
+export { default as Images } from "./Nodes/Images/images.svelte";
+export { default as Headings } from "./Nodes/Headings/heading.svelte";
+export { default as TextAlign } from "./Nodes/TextAlign/textAlign.svelte";
+export { default as TextColor } from "./Nodes/TextColor/textColor.svelte";
+export { default as Youtube } from "./Nodes/Youtube/youtube.svelte";
+export { default as Lists } from "./Nodes/Lists/lists.svelte";
+export { default as TextFormatting } from "./Marks/TextFormatting/textFormatting.svelte";
+export { default as Links } from "./Marks/Links/links.svelte";
+export { default as History } from "./Nodes/History/history.svelte";
+export { default as Save } from "./save.svelte";
+export { insertImageAndMoveCursor } from "./Hooks/insertImage.js";
+export { addYoutubeVideo } from "./Hooks/insertYoutube.js";
+export { extractImagesFromJSON } from "./Hooks/extractImage.js";
+export { exractContent } from "./Hooks/extractContent.js";

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

@@ -0,0 +1,23 @@
+//Nodes
+export {default as Images} from './Nodes/Images/images.svelte';
+export {default as Headings} from './Nodes/Headings/heading.svelte';
+export {default as TextAlign} from './Nodes/TextAlign/textAlign.svelte';
+export {default as TextColor} from './Nodes/TextColor/textColor.svelte';
+export {default as Youtube} from './Nodes/Youtube/youtube.svelte';
+export {default as Lists} from './Nodes/Lists/lists.svelte';
+
+//Marks
+export {default as TextFormatting} from './Marks/TextFormatting/textFormatting.svelte';
+export {default as Links} from './Marks/Links/links.svelte';
+
+//functionality
+export {default as History} from './Nodes/History/history.svelte';
+
+
+//Export
+export {default as Save} from './save.svelte';
+//Hooks
+export {insertImageAndMoveCursor} from './Hooks/insertImage.js';
+export {addYoutubeVideo} from './Hooks/insertYoutube.js';
+export {extractImagesFromJSON} from './Hooks/extractImage.js';
+export {exractContent} from './Hooks/extractContent.js';

package/dist/components/Modules/FilePicker/cloudStore.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { fileInputStore, User, isLoggedIn, setToastMessage } from '../../../index.js';
+    import Previews from './previews.svelte';
+
+    export let processing: boolean;
+    const tabs: { name: 'Documents'| 'Music' | 'Pictures' | 'Videos'; icon: string }[] = [
+        { name: 'Documents', icon: 'fa fa-file-o' },
+        { name: 'Music', icon: 'fa fa-music' },
+        { name: 'Pictures', icon: 'fa fa-file-image-o' },
+        { name: 'Videos', icon: 'fa fa-film' }
+    ];
+
+    $: if ($fileInputStore.disabledMenuItem?.includes($fileInputStore.activeMenu)) {
+		const firstAvailable = tabs.find(tab => !$fileInputStore.disabledMenuItem?.includes(tab.name));
+		if (firstAvailable) $fileInputStore.activeMenu = firstAvailable.name;
+	}
+
+    type MediaItem = {
+        id: string;
+    };
+
+    type MediaResponse = {
+        Audio: MediaItem[];
+        Documents: MediaItem[];
+        Images: MediaItem[];
+        Videos: MediaItem[];
+    };
+
+    let media: MediaResponse | null = null;
+
+    async function loadMedia(){
+        if (!$User.userId) return;
+        if(!$fileInputStore.serverGetUrl) return;
+        fileInputStore.update(store => ({ 
+            ...store,
+            requestReload: false
+        }));
+        try {
+            processing = true;
+            const params = new URLSearchParams({
+                isLoggedIn: String($isLoggedIn),
+                userId: $User.userId
+            });
+
+            const res = await fetch(`${$fileInputStore.serverGetUrl}?${params.toString()}`);
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                //console.log('Error fetching media:', data);
+                setToastMessage("error", data || "Failed to fetch media.");
+                return;
+            }
+            media = data;
+        } catch (e) {
+            console.error("catch error:", e);
+            setToastMessage("error", "An error occurred while fetching media.");
+        } finally {
+            processing = false;
+        }
+    }
+
+    onMount(async () => {
+        await loadMedia();
+    });
+
+    $: if ($fileInputStore.requestReload) loadMedia();
+
+</script>
+
+<style>
+    #sierra-cloud-store .icon-active {
+        background-color: var(--menu-icon-active-bg);
+    }
+</style>
+<main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">
+    <nav style="display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
+        {#each tabs as tab}
+            <button 
+                on:click={() => 
+                    fileInputStore.update(store =>({
+                        ...store,
+                        activeMenu: tab.name
+                    }))
+                } 
+                style="width:100%; padding: 0.1rem 0.5rem; {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex;align-items: center; gap: 0.5rem;'}"
+                class={`sierra-text-ellipsis ${$fileInputStore.activeMenu === tab.name ? 'icon-active' : ''}`}
+            >
+                <i class={tab.icon} style="font-size: 10px; color: var(--icon-theme);"></i>
+                {tab.name}
+            </button>
+        {/each}
+    </nav>
+    <Previews {media} />
+</main>

package/dist/components/Modules/FilePicker/cloudStore.svelte.d.ts

@@ -0,0 +1,20 @@
+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 CloudStore: $$__sveltets_2_IsomorphicComponent<{
+    processing: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CloudStore = InstanceType<typeof CloudStore>;
+export default CloudStore;

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

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import {fileInputStore, LinearProgress, setToastMessage, modalStore, resetFileInputStore} from "../../../index.js";
+    import { get } from 'svelte/store';
+    export let processing:boolean;
+
+    const menuItems = [
+        {
+            id: 'cloud',
+            label: 'Cloud',
+        },
+        {
+            id: 'upload',
+            label: 'Upload',
+        },
+    ] as const;
+
+    function handleSelect() {
+        fileInputStore.update(store => ({ 
+            ...store,
+            submissionComplete: true,
+            uploadModalOpen: false
+        }));
+    }
+    function handleDelete() {
+        modalStore.update(store => ({
+            ...store,
+            open: true,
+            title: 'Confirm Action',
+            content: `Are you sure you want to delete the selected files? This action cannot be undone.`,
+            onConfirm: () => {
+                deleteSubmissions();
+            },
+        }));
+    }
+    async function deleteSubmissions() {
+        const store = get(fileInputStore);
+        const idsToDelete = store.submissions.map(item => item.id);
+
+        //Test
+        //const idsToDelete = ['f47ac10b-58cc-4372-a567-0e02b2c3d479']
+        
+        if (!idsToDelete || idsToDelete.length === 0) return;
+        if (!$fileInputStore.serverDeleteUrl) return;
+
+        try {
+            processing = true;
+            const response = await fetch($fileInputStore.serverDeleteUrl, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ id: idsToDelete })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                //console.error('Delete request failed:', data);
+                setToastMessage('error', data || 'Failed to delete files.');
+                return;
+            }
+
+            data.forEach((item: { id: string; status: string; code: number }) => {
+                if (item.code === 404) {
+                    setToastMessage('error', `Failed to delete file with ID: ${item.id} - ${item.status}`);
+                }
+            });
+            processing = false;
+            fileInputStore.update(store => ({ 
+                ...store,
+                submissions: [],
+                requestReload: true
+            }));
+
+        } catch (error) {
+            setToastMessage('error', `Error deleting files: ${error}`);
+        }
+    }
+</script>
+<style>
+    .file-picker-controls {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap : 1rem;
+        width: 100%;
+        padding: 0.5rem 1rem;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        background-color: var(--background-tertiary);
+    }
+    #file-picker-controls i{
+        font-size: 18px;
+    }
+    #file-picker-controls button.active{
+        padding: 0.2rem 0.5rem;
+        border-radius: 3px;
+        background-color: var(--text);
+        color: var(--background);
+    }
+</style>
+<main id="file-picker-controls" style="display: flex; justify-content: space-between; gap:1rem;">
+    <div class="file-picker-controls">
+        <div style="display: flex; align-items: last baseline; gap:1rem;">
+            {#each menuItems as item, index (item.id)}
+                <button
+                    class={$fileInputStore.activeTab === item.id ? 'active' : ''}
+                    on:click={() => {fileInputStore.update(store => ({ ...store, activeTab: item.id }))}}
+                ><span>{item.label}</span>
+                </button>
+            {/each}
+        </div> 
+        <div style="display: flex; gap: 2rem; align-items: last baseline;">
+            {#if $fileInputStore.submissions.length > 0 && $fileInputStore.activeTab === 'cloud'}
+                <button hidden={!$fileInputStore.manage} title="Delete" on:click={handleDelete} style="color: var(--error-bg);" aria-label="Delete submissions"><i class="fa fa-trash-o"></i></button>
+                <button hidden={$fileInputStore.manage} title="Select" on:click={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
+            {/if}
+            <button title="Cancel" on:click={resetFileInputStore} aria-label="Cancel"><i class="fa fa-times-circle"></i></button>
+        </div>
+    </div>
+</main>
+{#if processing}<LinearProgress />{/if}

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

@@ -0,0 +1,20 @@
+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<{
+    processing: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Controls = InstanceType<typeof Controls>;
+export default Controls;

package/dist/components/Modules/FilePicker/filePicker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import {Backdrop,Wrapper,fileInputStore, FileInput, isLoggedIn, User, setToastMessage} from '../../../index.js'
+    import CloudStore from './cloudStore.svelte';
+    import Controls from './controls.svelte';
+
+    let processing: boolean = false;
+
+    async function handleUpload() {
+        if(!$User.userId || !$fileInputStore.r2_key || $fileInputStore.selectedFiles.length === 0 || !$fileInputStore.serverUploadUrl) return;
+
+        try {
+            processing = true;
+            const formData = new FormData();
+
+            $fileInputStore.selectedFiles.forEach(file => formData.append('files', file));
+            formData.append('r2_key', $fileInputStore.r2_key);
+            formData.append('is_loggedin', $isLoggedIn.toString());
+            formData.append('userid', $User.userId);
+
+            const res = await fetch($fileInputStore.serverUploadUrl, {
+                method: 'POST',
+                body: formData
+            });
+
+            const data = await res.json();
+
+            if (!res.ok) {
+                setToastMessage('error', data || 'Upload failed' );
+                return;
+            }
+
+            data.forEach((item: { code: number; original_name: string }) => {
+                if (item.code === 500) {
+                    setToastMessage('error', `Failed to upload file: ${item.original_name} (code: ${item.code})`);
+                }
+            });
+
+            fileInputStore.update(store => {
+                store.selectedFiles = [];
+                store.activeTab = 'cloud';
+                store.requestReload = true;
+                return store;
+            });
+        } catch (err) {
+            setToastMessage('error', `Upload failed: ${err}`);
+        } finally {
+            processing = false;
+        }
+    }
+</script>
+
+<Backdrop bind:open={$fileInputStore.uploadModalOpen} zIndex={15}>
+    <Wrapper maxWidth="700px" minHeight="300px" padding="0px">
+        <Controls bind:processing />
+        {#if $fileInputStore.activeTab === 'cloud'}
+            <CloudStore bind:processing />
+        {:else}
+            <FileInput bind:processing onclick={handleUpload} />
+        {/if}
+    </Wrapper>
+</Backdrop>

package/dist/components/Modules/FilePicker/filePicker.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FilePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FilePicker = InstanceType<typeof FilePicker>;
+export default FilePicker;