@functionalcms/svelte-components 5.8.5 → 5.9.0

package/dist/components/form/Editor.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+    import {
+        Editor,
+        rootCtx,
+        commandsCtx,
+        defaultValueCtx,
+        editorViewCtx,
+    } 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 { getMarkdown, 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;
+    }
+
+    let { initialValue = "", markdown = $bindable(initialValue), html = $bindable(initialValue) }: Partial<Props> = $props();
+
+    let editorInstance: Editor | null = null;
+
+    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);
+        }
+    };
+
+    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;
+        });
+    }
+</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>
+</div>
+
+<style>
+    .editor-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        border: 2px solid black;
+        border-radius: 5px;
+    }
+
+    .editor-body {
+        background: white;
+        height: 100%;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
+export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
+}
+export {};

package/dist/components/form/SmartForm.svelte

@@ -11,7 +11,13 @@
 		type ButtonConfig,
 		type HiddenField,
 		type DatePickerField,
-		SubmitResult
+		SubmitResult,
+
+		type MarkdownEditorField,
+
+		type HtmlEditorField
+
+
 	} from './form.js';
 	import {
 		Button,
@@ -28,6 +34,8 @@
 		Datepicker
 	} from 'flowbite-svelte';
 	import { fade } from 'svelte/transition';
+	import Editor from './Editor.svelte';
+	import Markdown from '../content/Markdown.svelte';
 
 	interface Props {
 		action: string;
@@ -59,6 +67,7 @@
 	let loading = $state(false);
 
 	const isValid = (event: Event) => {
+		debugger;
 		const button = event.target as HTMLButtonElement;
 		const form = button.closest('form') as HTMLFormElement;
 		const formData = new FormData(form);
@@ -72,6 +81,7 @@
 	const handleSubmit = async (event: Event) => {
 		event.preventDefault();
 		loading = true;
+		debugger;
 		try {
 			if (isValid(event) && !isSendingMessage) {
 				isSendingMessage = true;
@@ -221,6 +231,21 @@
 	<input type="hidden" id={field.id} name={field.id} bind:value={field.value} />
 {/snippet}
 
+{#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} />
+	{/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} />
+	{/key}
+{/snippet}
+
 {#if showMessage}
 	<div class="alert alert-success" transition:fade={{ duration: 2000 }}>
 		{successMessage}
@@ -247,6 +272,10 @@
 					{@render renderHidden(field)}
 				{:else if field.typeOfField === 'date'}
 					{@render renderDatePicker(field)}
+				{:else if field.typeOfField === 'markdown'}
+					{@render renderMdEditory(field)}
+				{:else if field.typeOfField === 'html'}
+					{@render renderHtmlEditory(field)}
 				{/if}
 			{/each}
 

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

@@ -12,7 +12,9 @@ export declare enum InputType {
     Date = "date",
     DateTimeLocal = "datetime-local",
     Color = "color",
-    Textarea = "textarea"
+    Textarea = "textarea",
+    Markdown = "markdown",
+    Html = "html"
 }
 export type FieldDef = {
     id: string;
@@ -82,7 +84,13 @@ export type PhoneInputField = FieldDef & {
     size: "md" | "sm" | "lg";
     placeholder?: string;
 };
-export type Field = InputField | TextareaField | CollectionField | SelectField | FilePickerField | DatePickerField | DropzoneField | TimePickerField | PhoneInputField | HiddenField;
+export type MarkdownEditorField = FieldDef & {
+    typeOfField: "markdown";
+};
+export type HtmlEditorField = FieldDef & {
+    typeOfField: "html";
+};
+export type Field = InputField | TextareaField | CollectionField | SelectField | FilePickerField | DatePickerField | DropzoneField | TimePickerField | PhoneInputField | HiddenField | MarkdownEditorField | HtmlEditorField;
 export declare enum SubmitResult {
     Success = "success",
     Error = "error"
@@ -107,6 +115,11 @@ export declare function createSelectField(id: string, label: string, selectOptio
 export declare function createTimePickerField(id: string, label: string, value?: any, options?: Partial<Omit<TimePickerField, "id" | "label" | "typeOfField">>): TimePickerField;
 export declare function createPhoneInputField(id: string, label: string, value?: any, options?: Partial<Omit<PhoneInputField, "id" | "label" | "typeOfField">>): PhoneInputField;
 export declare function createHiddenField(id: string, value: string): HiddenField;
+export declare function createEditorField(id: string, value: string, type: "markdown" | "html"): {
+    id: string;
+    value: string;
+    typeOfField: "html" | "markdown";
+};
 export type ButtonConfig = {
     label: string;
     type: "submit" | "reset" | "button";

package/dist/components/form/form.js

@@ -15,6 +15,8 @@ export var InputType;
     InputType["DateTimeLocal"] = "datetime-local";
     InputType["Color"] = "color";
     InputType["Textarea"] = "textarea";
+    InputType["Markdown"] = "markdown";
+    InputType["Html"] = "html";
 })(InputType || (InputType = {}));
 export var SubmitResult;
 (function (SubmitResult) {
@@ -114,3 +116,10 @@ export function createHiddenField(id, value) {
         typeOfField: "hidden",
     };
 }
+export function createEditorField(id, value, type) {
+    return {
+        id,
+        value,
+        typeOfField: type,
+    };
+}

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, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, } 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, } 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, } from './components/form/form.js';
+export { InputType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, createHiddenField, createDatePickerField, createEditorField, } 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.8.5",
+	"version": "5.9.0",
 	"license": "MIT",
 	"watch": {
 		"build": {
@@ -56,6 +56,8 @@
 		"vite": "^8.0.1"
 	},
 	"dependencies": {
+		"@milkdown/kit": "^7.21.2",
+		"@milkdown/theme-nord": "^7.21.2",
 		"@tailwindcss/vite": "^4.2.2",
 		"@upstash/redis": "^1.37.0",
 		"flowbite": "^4.0.1",