@sierra-95/svelte-scaffold 1.0.1

package/dist/components/Core/others/Previews/Image/image.svelte.d.ts

@@ -0,0 +1,22 @@
+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 Image: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+    buttonTimes?: boolean;
+    urlsOnly?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Image = InstanceType<typeof Image>;
+export default Image;

package/dist/components/Core/others/Previews/Video/video.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import {ButtonTimes, fileInputStore, ButtonSelect, getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia} from '../../../../../index.js'
+    
+    export let media;
+    export let buttonTimes = false;
+    export let urlsOnly = true;
+</script>
+{#if media.Videos.length === 0}
+    <p>No videos available.</p>
+{:else}
+    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+        {#each media.Videos as item}
+            <div on:click={() => toggleSelectForMedia(item.id,item.url,urlsOnly)} role="none" class="sierra-translate" style="position:relative; box-shadow: var(--box-shadow-secondary);width: 150px;border-radius: 0.3rem; cursor: pointer;">    
+                <video on:click|stopPropagation src={urlsOnly ? item.url : getPreviewUrlForMedia(item)} controls style="width: 100%; height: 100px; object-fit: cover; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem;">
+                    <track kind="captions" />
+                </video>
+                <h3 style=" margin: 0.5rem" class="sierra-text-ellipsis">{item.original_name || item.name}</h3>
+                {#if buttonTimes}
+                    <ButtonTimes vertical="bottom" onclick={(e: Event) => removeFileForMedia(
+                        $fileInputStore.selectedFiles.indexOf(item), e
+                    )}/>
+                {/if}
+                {#if $fileInputStore.submissions.some(sub => sub.url === item.url || sub.id === item.id)}
+                    <ButtonSelect />
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}

package/dist/components/Core/others/Previews/Video/video.svelte.d.ts

@@ -0,0 +1,24 @@
+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 Video: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+    buttonTimes?: boolean;
+    urlsOnly?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;

package/dist/components/Core/others/Progress/CircularProgress/CircularProgress.svelte

@@ -0,0 +1,55 @@
+<script>
+	// enable runes for this component (if not global)
+	// @enable runes
+
+	const { size = 50, thickness = 4, color = 'var(--primary-bg)' } = $props();
+	const radius = $derived((size - thickness) / 2);
+	const circumference = $derived(2 * Math.PI * radius);
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox={`0 0 ${size} ${size}`}
+	class="spinner"
+>
+	<circle
+		cx={size / 2}
+		cy={size / 2}
+		r={radius}
+		fill="none"
+		stroke="#e5e7eb"
+		stroke-width={thickness}
+	/>
+	<circle
+		cx={size / 2}
+		cy={size / 2}
+		r={radius}
+		fill="none"
+		stroke={color}
+		stroke-width={thickness}
+		stroke-linecap="round"
+		stroke-dasharray={circumference}
+		stroke-dashoffset={circumference * 0.25}
+	/>
+</svg>
+
+<style>
+	.spinner {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	svg {
+		display: block;
+	}
+
+	circle {
+		transform-origin: center;
+	}
+</style>

package/dist/components/Core/others/Progress/CircularProgress/CircularProgress.svelte.d.ts

@@ -0,0 +1,15 @@
+export default CircularProgress;
+type CircularProgress = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CircularProgress: import("svelte").Component<{
+    size?: number;
+    thickness?: number;
+    color?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    size?: number;
+    thickness?: number;
+    color?: string;
+};

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.css

@@ -0,0 +1,61 @@
+.pure-material-progress-linear {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    height: 0.25em;
+    color: var(--primary-bg);
+    background-color: rgba( 33, 150, 243, 0.12);
+    font-size: 16px;
+}
+
+.pure-material-progress-linear::-webkit-progress-bar {
+    background-color: transparent;
+}
+
+/* Determinate */
+.pure-material-progress-linear::-webkit-progress-value {
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+.pure-material-progress-linear::-moz-progress-bar {
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+.pure-material-progress-linear::-ms-fill {
+    border: none;
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+/* Indeterminate */
+.pure-material-progress-linear:indeterminate {
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
+    animation: pure-material-progress-linear 2s infinite linear;
+}
+
+.pure-material-progress-linear:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+
+.pure-material-progress-linear:indeterminate::-ms-fill {
+    animation-name: none;
+}
+
+@keyframes pure-material-progress-linear {
+    0% {
+        background-size: 200% 100%;
+        background-position: left -31.25% top 0%;
+    }
+    50% {
+        background-size: 800% 100%;
+        background-position: left -49% top 0%;
+    }
+    100% {
+        background-size: 400% 100%;
+        background-position: left -102% top 0%;
+    }
+}

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.svelte

@@ -0,0 +1,79 @@
+<style>.pure-material-progress-linear {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    height: 0.25em;
+    color: var(--primary-bg);
+    background-color: rgba( 33, 150, 243, 0.12);
+    font-size: 16px;
+}
+
+.pure-material-progress-linear::-webkit-progress-bar {
+    background-color: transparent;
+}
+
+/* Determinate */
+
+.pure-material-progress-linear::-webkit-progress-value {
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+.pure-material-progress-linear::-moz-progress-bar {
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+.pure-material-progress-linear::-ms-fill {
+    border: none;
+    background-color: currentColor;
+    transition: all 0.2s;
+}
+
+/* Indeterminate */
+
+.pure-material-progress-linear:indeterminate {
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
+    animation: pure-material-progress-linear 2s infinite linear;
+}
+
+.pure-material-progress-linear:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+
+.pure-material-progress-linear:indeterminate::-ms-fill {
+    animation-name: none;
+}
+
+@keyframes pure-material-progress-linear {
+    0% {
+        background-size: 200% 100%;
+        background-position: left -31.25% top 0%;
+    }
+    50% {
+        background-size: 800% 100%;
+        background-position: left -49% top 0%;
+    }
+    100% {
+        background-size: 400% 100%;
+        background-position: left -102% top 0%;
+    }
+}
+
+.cover{
+    position: relative;
+    height: 0.25em;
+  }
+
+.child{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+</style>
+<div class="cover">
+  <progress class="pure-material-progress-linear child"></progress>
+</div>

package/dist/components/Core/others/Progress/LinearProgress/LinearProgress.svelte.d.ts

@@ -0,0 +1,26 @@
+export default LinearProgress;
+type LinearProgress = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const LinearProgress: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/Modules/Editor/Hooks/extractContent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @param {import('@tiptap/core').Editor} editor
+ */
+export function exractContent(editor: import("@tiptap/core").Editor): Promise<{
+    json_content: import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;
+    images: string[];
+} | undefined>;

package/dist/components/Modules/Editor/Hooks/extractContent.js

@@ -0,0 +1,15 @@
+import { setToastMessage } from '../../../../index.js';
+import { extractImagesFromJSON } from '../tools.js';
+/**
+ * @param {import('@tiptap/core').Editor} editor
+ */
+export async function exractContent(editor) {
+    if (!editor) return;
+    try {
+        const json_content = editor.getJSON();
+        const fnl_imgs = extractImagesFromJSON(json_content);
+        return { json_content, images: fnl_imgs };
+    }catch (error) {
+        setToastMessage('error', 'An error occurred while saving.');
+    }
+}

package/dist/components/Modules/Editor/Hooks/extractImage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Extract all image slugs from a Tiptap JSON document.
+ *
+ * @param {import('@tiptap/core').JSONContent} json - Tiptap JSON content
+ * @returns {string[]} - Array of image slugs
+ */
+export function extractImagesFromJSON(json: import("@tiptap/core").JSONContent): string[];

package/dist/components/Modules/Editor/Hooks/extractImage.js

@@ -0,0 +1,30 @@
+/**
+ * Extract all image slugs from a Tiptap JSON document.
+ * 
+ * @param {import('@tiptap/core').JSONContent} json - Tiptap JSON content
+ * @returns {string[]} - Array of image slugs
+ */
+
+export function extractImagesFromJSON(json) {
+	const slugs = new Set();
+
+	/**
+     * Recursively walk a node and collect image slugs
+     * @param {any} node - Node in the JSON tree
+     */
+
+	function walk(node) {
+		if (!node) return;
+		if (node.type === 'image' && typeof node.attrs?.src === 'string') {
+			const url = node.attrs.src;
+			const slug = url.split('/').pop();
+			if (slug) slugs.add(slug);
+		}
+		if (node.content && Array.isArray(node.content)) {
+			node.content.forEach(walk);
+		}
+	}
+
+	walk(json);
+	return [...slugs];
+}

package/dist/components/Modules/Editor/Hooks/insertImage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {string} base64 - Base64 string for the image
+ * @param {import('@tiptap/core').Editor} editor - Tiptap editor instance
+ */
+export function insertImageAndMoveCursor(base64: string, editor: import("@tiptap/core").Editor): void;

package/dist/components/Modules/Editor/Hooks/insertImage.js

@@ -0,0 +1,27 @@
+
+import { TextSelection } from 'prosemirror-state';
+
+/**
+ * @param {string} base64 - Base64 string for the image
+ * @param {import('@tiptap/core').Editor} editor - Tiptap editor instance
+ */
+
+export function insertImageAndMoveCursor(base64, editor) {
+    const { state, view } = editor;
+    const { tr } = state;
+
+    // 1. Insert the image at the current selection
+    const imageNode = editor.schema.nodes.image.create({ src: base64 });
+    const pos = tr.selection.$from.after(); // get position after current node
+    tr.insert(pos, imageNode);
+
+    // 2. Insert an empty paragraph after the image
+    const paragraph = editor.schema.nodes.paragraph.create();
+    tr.insert(pos + 1, paragraph);
+
+    // 3. Move the cursor inside the new paragraph
+    const newSelection = TextSelection.create(tr.doc, pos + 2);
+    tr.setSelection(newSelection);
+    view.dispatch(tr);
+    view.focus();
+}

package/dist/components/Modules/Editor/Hooks/insertYoutube.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Prompt for a YouTube URL and insert it into the editor, placing the cursor after it.
+ * @param {import('@tiptap/core').Editor} editor - The Tiptap editor instance
+ * @param {string} url
+ */
+export function addYoutubeVideo(editor: import("@tiptap/core").Editor, url: string): void;

package/dist/components/Modules/Editor/Hooks/insertYoutube.js

@@ -0,0 +1,35 @@
+import { TextSelection } from 'prosemirror-state';
+
+
+/**
+ * Prompt for a YouTube URL and insert it into the editor, placing the cursor after it.
+ * @param {import('@tiptap/core').Editor} editor - The Tiptap editor instance
+ * @param {string} url
+ */
+export function addYoutubeVideo(editor, url) {
+    if (!url) return;
+
+    const { state, view, schema } = editor;
+    const { tr } = state;
+
+    // Create the YouTube video node
+    const youtubeNode = schema.nodes.youtube.create({ src: url });
+
+    // Position after current selection
+    const pos = tr.selection.$from.after();
+
+    // Insert video node at position
+    tr.insert(pos, youtubeNode);
+
+    // Insert empty paragraph after the video node
+    const paragraph = schema.nodes.paragraph.create();
+    tr.insert(pos + 1, paragraph);
+
+    // Set cursor inside the new paragraph
+    const newSelection = TextSelection.create(tr.doc, pos + 2);
+    tr.setSelection(newSelection);
+
+    // Apply transaction and focus editor
+    view.dispatch(tr);
+    view.focus();
+}

package/dist/components/Modules/Editor/Marks/Links/links.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import {modalStore, Input} from '../../../../../index.js'
+
+  export let editor: Editor;
+
+  let text = '';
+  let url = '';
+
+  function newLink() {
+      modalStore.update(m => ({
+          ...m,
+          open: true,
+          title: 'Editor',
+          onConfirm: () => {
+            setLink(text, url);
+            text = '';
+            url = '';
+          },
+          render: addLinkContent
+      }));
+  }
+
+  function setLink(text: string, url: string) {
+    editor
+      .chain()
+      .focus()
+      .insertContent(`<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`)
+      .insertContent(' ')
+      .unsetMark('link') 
+      .run();
+  }
+
+  function updateLink() {
+    const previousUrl = editor.getAttributes('link').href
+    url = previousUrl || '';
+    modalStore.update(m => ({
+        ...m,
+        open: true,
+        title: 'Editor',
+        onConfirm: () => {
+          editLink(url);
+          url = '';
+        },
+        onCancel: () => url = '',
+        render: editLinkContent
+    }));
+  }
+
+  function editLink(url: string){
+    if (url === null) {
+      return
+    }
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink()
+        .run()
+      return
+    }try {
+      editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+    } catch (e) {
+      const errorMessage = e instanceof Error ? e.message : String(e)
+      alert(errorMessage)
+    }
+  }
+
+</script>
+
+{#snippet addLinkContent()}
+    <Input label="Enter Link Text" id="link-text" bind:value={text}/>
+    <Input label="Enter Link URL" id="link-url" bind:value={url}/>
+{/snippet}
+
+{#snippet editLinkContent()}
+    <Input label="Edit Link URL" id="link-url" bind:value={url}/>
+{/snippet}
+
+<button aria-label="Link Button" on:click={ editor.isActive('link')? updateLink : newLink} title="Add/Edit Link">
+  <i class="fa fa-link"></i>
+</button>

package/dist/components/Modules/Editor/Marks/Links/links.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 Links: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Links = InstanceType<typeof Links>;
+export default Links;

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

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

package/dist/components/Modules/Editor/Marks/TextFormatting/textFormatting.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 TextFormatting: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextFormatting = InstanceType<typeof TextFormatting>;
+export default TextFormatting;

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

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