@sierra-95/svelte-scaffold 1.1.3 → 1.1.5

package/dist/Core/components/Form/Input/select/select.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <label class="sierra-input" style="width: {width}; max-width: {maxWidth}; color: {textColor}" for={id}>{label}
-    <select bind:value={value} id={id} required style="background-color: {background}; height: {height}">
+    <select bind:value={value} id={id} name={id} required style="background-color: {background}; height: {height}">
         {#each options as option}
             <option 
                 value={option.value} 

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

@@ -81,18 +81,37 @@
 			return false;
 		}
 	}
+
+	$: showDropdown = $editorStore.insertImageMode?.length > 1;
+	//$: console.log("showDropdown", showDropdown);
+
+	function handleSingleMode() {
+		if ($editorStore.insertImageMode?.includes('filepicker')) {
+			handleInsertImage();
+		} else if ($editorStore.insertImageMode?.includes('url')) {
+			enterURL();
+		}
+	}
 </script>
+
 {#snippet formContent()}
 <div style="margin: 1rem 0rem;">
 	<Input label="Enter Image URL" id="image-url" underline bind:value={value}/>
 </div>
 {/snippet}
-<DropdownContainer bind:open={openDropdown} width="150px">
-	{#snippet dropdownTrigger()}
-		<button type="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>
+
+{#if showDropdown}
+	<DropdownContainer bind:open={openDropdown} width="150px">
+		{#snippet dropdownTrigger()}
+			<button type="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>
+{:else}
+	<button type="button" aria-label="Insert Image" title="Insert File" on:click={() => handleSingleMode()}>
+		<i class="fa fa-file"></i>
+	</button>
+{/if}

package/dist/Modules/Editor/controls.svelte

@@ -3,26 +3,39 @@
         TextFormatting, Headings, TextColor, TextAlign, Images, History, Youtube,
         Export, Lists, Links
     } from './tools.js';
-    import type { Editor } from "@tiptap/core";
+
     import './styles/controls.css';
-    import {Tabs} from '../../index.js';
-
-    export let editor: Editor;
-    
-    const HomeItems = [
-        TextFormatting,
-                History,
-                Headings,
-                TextColor,
-                TextAlign,
-                Lists,
+    import {Tabs, editorStore} from '../../index.js';
+
+    const {editor} = $props();
+
+    let HomeItems: any[] = $state([]);
+    let InsertItems: any[] = $state([]);
+
+    const HOME_TOOLS = [
+        { feature: 'text-formatting', component: TextFormatting },
+        { feature: 'history', component: History },
+        { feature: 'headings', component: Headings },
+        { feature: 'text-color', component: TextColor },
+        { feature: 'text-align', component: TextAlign },
+        { feature: 'lists', component: Lists },
     ] as const;
 
-    const InsertItems = [
-        Images,
-        Links,
-        Youtube,
+    const INSERT_TOOLS = [
+        { feature: 'images', component: Images },
+        { feature: 'links', component: Links },
+        { feature: 'youtube', component: Youtube }
     ] as const;
+
+    $effect(() => {
+        HomeItems = HOME_TOOLS
+            .filter(tool => $editorStore.enabledFeatures.includes(tool.feature))
+            .map(tool => tool.component);
+
+        InsertItems = INSERT_TOOLS
+            .filter(tool => $editorStore.enabledFeatures.includes(tool.feature))
+            .map(tool => tool.component);
+    });
 </script>
 
 {#snippet Home()}

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

@@ -1,22 +1,6 @@
-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;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Controls = InstanceType<typeof Controls>;
+declare const Controls: import("svelte").Component<{
+    editor: any;
+}, {}, "">;
+type Controls = ReturnType<typeof Controls>;
 export default Controls;

package/dist/stores/modules/editor.d.ts

@@ -1,3 +1,5 @@
+export type EditorFeature = 'text-formatting' | 'headings' | 'text-color' | 'text-align' | 'lists' | 'images' | 'links' | 'youtube' | 'history' | 'export';
+export type ImageInsertMode = 'filepicker' | 'url';
 export type EditorState = {
     content: any;
     export: boolean;
@@ -8,7 +10,8 @@ export type EditorState = {
     serverDeleteUrl: string;
     serverStorageUrl: string;
     serverDownloadUrl: string;
-    useFilePicker: boolean;
+    enabledFeatures: EditorFeature[];
+    insertImageMode: ImageInsertMode[];
 };
 export declare const editorStore: import("svelte/store").Writable<EditorState>;
 export declare function resetEditorStore(): void;

package/dist/stores/modules/editor.js

@@ -9,7 +9,8 @@ const defaultEditorState = {
     serverDeleteUrl: '',
     serverStorageUrl: '',
     serverDownloadUrl: '',
-    useFilePicker: true,
+    enabledFeatures: [],
+    insertImageMode: ['filepicker', 'url']
 };
 export const editorStore = writable({
     ...defaultEditorState

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.1.3",
+	"version": "1.1.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",