@functionalcms/svelte-components 5.9.4 → 5.10.3

package/dist/components/form/Editor.svelte

@@ -1,102 +1,109 @@
 <script lang="ts">
-    import {
-        Editor,
-        rootCtx,
-        commandsCtx,
-        defaultValueCtx,
-    } from "@milkdown/kit/core";
-    import { commonmark } from "@milkdown/kit/preset/commonmark";
-    import { history } from "@milkdown/kit/plugin/history";
-    import { nord } from "@milkdown/theme-nord";
-    import {
-        wrapInHeadingCommand,
-        toggleStrongCommand,
-        toggleEmphasisCommand,
-        wrapInBulletListCommand,
-        turnIntoTextCommand,
-    } from "@milkdown/kit/preset/commonmark";
-    import { getHTML } from "@milkdown/kit/utils";
-    import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
-    import { Button, ButtonGroup } from "@functionalcms/svelte-components";
+	import { Editor, rootCtx, commandsCtx, defaultValueCtx } from '@milkdown/kit/core';
+	import { commonmark } from '@milkdown/kit/preset/commonmark';
+	import { history } from '@milkdown/kit/plugin/history';
+	import { nord } from '@milkdown/theme-nord';
+	import {
+		wrapInHeadingCommand,
+		toggleStrongCommand,
+		toggleEmphasisCommand,
+		wrapInBulletListCommand,
+		turnIntoTextCommand
+	} from '@milkdown/kit/preset/commonmark';
+	import { getHTML } from '@milkdown/kit/utils';
+	import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
+	import { Button, ButtonGroup } from '@functionalcms/svelte-components';
 
-    interface Props {
-        initialValue: string;
-        markdown: string;
-        html: string;
-    }
+	interface Props {
+		id: string;
+		initialValue: string;
+		markdown: string;
+		html: string;
+        type: 'markdown' | 'html';
+	}
 
-    let { initialValue = "", markdown = $bindable(initialValue), html = $bindable(initialValue) }: Partial<Props> = $props();
+	let {
+		id = '',
+		initialValue = '',
+		markdown = $bindable(initialValue),
+		html = $bindable(initialValue),
+        type = 'markdown'
+	}: Partial<Props> = $props();
 
-    let editorInstance: Editor | null = null;
+	let editorInstance: Editor | null = null;
 
-    const applyCommand = (command: any, params?: any) => {
-        if (!editorInstance) return;
+	const applyCommand = (command: any, params?: any) => {
+		if (!editorInstance) return;
 
-        try {
-            editorInstance.action((ctx) => {
-                const commandManager = ctx.get(commandsCtx);
-                commandManager.call(command, params);
-            });
-        } catch (e) {
-            console.error("Command error:", e);
-        }
-    };
+		try {
+			editorInstance.action((ctx) => {
+				const commandManager = ctx.get(commandsCtx);
+				commandManager.call(command, params);
+			});
+		} catch (e) {
+			console.error('Command error:', e);
+		}
+	};
 
-    const setHeadingCommand = (level: 1 | 2 | 3 | 4 | 5 | 6) =>
-        applyCommand(wrapInHeadingCommand.key, level);
-    const makeBold = () => applyCommand(toggleStrongCommand.key);
-    const makeItalic = () => applyCommand(toggleEmphasisCommand.key);
-    const makeList = () => applyCommand(wrapInBulletListCommand.key);
-    const clearFormatting = () => applyCommand(turnIntoTextCommand.key);
+	const setHeadingCommand = (level: 1 | 2 | 3 | 4 | 5 | 6) =>
+		applyCommand(wrapInHeadingCommand.key, level);
+	const makeBold = () => applyCommand(toggleStrongCommand.key);
+	const makeItalic = () => applyCommand(toggleEmphasisCommand.key);
+	const makeList = () => applyCommand(wrapInBulletListCommand.key);
+	const clearFormatting = () => applyCommand(turnIntoTextCommand.key);
 
-    function editor(dom) {
-        const MakeEditor = Editor.make()
-            .config((ctx) => {
-                ctx.set(rootCtx, dom);
-                ctx.set(defaultValueCtx, initialValue);
-                ctx.get(listenerCtx).markdownUpdated((ctx, markdownContent) => {
-                    markdown = markdownContent;
-                    html = getHTML()(ctx);
-                });
-            })
-            .config(nord)
-            .use(commonmark)
-            .use(listener)
-            .use(history)
-            .create();
-        MakeEditor.then((editor) => {
-            editorInstance = editor;
-        });
-    }
+    let value = $state(initialValue);
+
+	function editor(dom) {
+		const MakeEditor = Editor.make()
+			.config((ctx) => {
+				ctx.set(rootCtx, dom);
+				ctx.set(defaultValueCtx, initialValue);
+				ctx.get(listenerCtx).markdownUpdated((ctx, markdownContent) => {
+					markdown = markdownContent;
+					html = getHTML()(ctx);
+                    value = type === 'markdown' ? markdownContent : html;
+				});
+			})
+			.config(nord)
+			.use(commonmark)
+			.use(listener)
+			.use(history)
+			.create();
+		MakeEditor.then((editor) => {
+			editorInstance = editor;
+		});
+	}
 </script>
 
 <div class="editor-container">
-    <ButtonGroup>
-        <Button onclick={() => setHeadingCommand(1)}>H1</Button>
-        <Button onclick={() => setHeadingCommand(2)}>H2</Button>
-        <Button onclick={() => setHeadingCommand(3)}>H3</Button>
-        <Button onclick={() => setHeadingCommand(4)}>H4</Button>
-        <Button onclick={() => setHeadingCommand(5)}>H5</Button>
-        <Button onclick={() => setHeadingCommand(6)}>H6</Button>
-        <Button onclick={() => makeBold()}><strong>B</strong></Button>
-        <Button onclick={() => makeItalic()}><em>I</em></Button>
-        <Button onclick={() => makeList()}>List</Button>
-        <Button onclick={() => clearFormatting()}>Clear</Button>
-    </ButtonGroup>
-    <div class="editor-body" use:editor></div>
+	<ButtonGroup>
+		<Button onclick={() => setHeadingCommand(1)}>H1</Button>
+		<Button onclick={() => setHeadingCommand(2)}>H2</Button>
+		<Button onclick={() => setHeadingCommand(3)}>H3</Button>
+		<Button onclick={() => setHeadingCommand(4)}>H4</Button>
+		<Button onclick={() => setHeadingCommand(5)}>H5</Button>
+		<Button onclick={() => setHeadingCommand(6)}>H6</Button>
+		<Button onclick={() => makeBold()}><strong>B</strong></Button>
+		<Button onclick={() => makeItalic()}><em>I</em></Button>
+		<Button onclick={() => makeList()}>List</Button>
+		<Button onclick={() => clearFormatting()}>Clear</Button>
+	</ButtonGroup>
+	<div class="editor-body" use:editor></div>
+	<input type="hidden" name={id} bind:value />
 </div>
 
 <style>
-    .editor-container {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        border: 2px solid black;
-        border-radius: 5px;
-    }
+	.editor-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		border: 2px solid black;
+		border-radius: 5px;
+	}
 
-    .editor-body {
-        background: white;
-        height: 100%;
-    }
+	.editor-body {
+		background: white;
+		height: 100%;
+	}
 </style>

package/dist/components/form/SmartForm.svelte

@@ -237,15 +237,13 @@
 {#snippet renderMdEditory(field: MarkdownEditorField)}
 	<Label for={field.id} class={field.class}>{field.label}</Label>
 	{#key field.id}
-		<Editor initialValue={field.value} bind:markdown={field.value} />
-		<input type="hidden" name={field.id} bind:value={field.value} />
+		<Editor initialValue={field.value} bind:markdown={value} />
 	{/key}
 {/snippet}
 {#snippet renderHtmlEditory(field: HtmlEditorField)}
 	<Label for={field.id} class={field.class}>{field.label}</Label>
 	{#key field.id}
-		<Editor initialValue={field.value} bind:html={field.value} />
-		<input type="hidden" name={field.id} bind:value={field.value} />
+		<Editor initialValue={field.value} bind:html={value} />
 	{/key}
 {/snippet}
 

package/dist/components/form/form.d.ts

@@ -128,3 +128,4 @@ export type ButtonConfig = {
     class?: string;
     action?: (event: Event) => Promise<void>;
 };
+export declare function convertResponseToFields(fields: Array<Field>, form: FormData): any;

package/dist/components/form/form.js

@@ -124,3 +124,11 @@ export function createEditorField(id, label, type, value) {
         typeOfField: type,
     };
 }
+export function convertResponseToFields(fields, form) {
+    let result = {};
+    for (const field of fields) {
+        const value = form.get(field.id);
+        result[field.id] = value;
+    }
+    return result;
+}

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { default as Well } from './components/presentation/Well.svelte';
 export { default as FlexBox } from './components/presentation/FlexBox.svelte';
 export { default as StyleBox } from './components/presentation/StyleBox.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
-export { InputType, type Field, type InputField, type TextareaField, type CollectionField, type SelectField, type FilePickerField, type TimePickerField, type PhoneInputField, type DatePickerField, type DropzoneField, type HiddenField, type ButtonConfig, type MarkdownEditorField, type HtmlEditorField, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, createEditorField, } from './components/form/form.js';
+export { InputType, type Field, type InputField, type TextareaField, type CollectionField, type SelectField, type FilePickerField, type TimePickerField, type PhoneInputField, type DatePickerField, type DropzoneField, type HiddenField, type ButtonConfig, type MarkdownEditorField, type HtmlEditorField, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, createEditorField, convertResponseToFields, } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -9,7 +9,7 @@ export { default as Well } from './components/presentation/Well.svelte';
 export { default as FlexBox } from './components/presentation/FlexBox.svelte';
 export { default as StyleBox } from './components/presentation/StyleBox.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
-export { InputType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, createEditorField, } from './components/form/form.js';
+export { InputType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, createEditorField, convertResponseToFields, } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as SmartForm } from './components/form/SmartForm.svelte';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.9.4",
+	"version": "5.10.3",
 	"license": "MIT",
 	"watch": {
 		"build": {