@d34dman/flowdrop 0.0.24 → 0.0.25

package/dist/components/form/FormTemplateEditor.svelte

@@ -0,0 +1,463 @@
+<!--
+  FormTemplateEditor Component
+  CodeMirror-based template editor for Twig/Liquid-style templates
+  
+  Features:
+  - Custom syntax highlighting for {{ variable }} placeholders
+  - Dark/light theme support
+  - Consistent styling with other form components
+  - Line wrapping for better template readability
+  - Optional variable hints display
+  - Proper ARIA attributes for accessibility
+  
+  Usage:
+  Use with schema format: "template" to render this editor
+-->
+
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { EditorView, basicSetup } from 'codemirror';
+	import { EditorState } from '@codemirror/state';
+	import {
+		Decoration,
+		type DecorationSet,
+		ViewPlugin,
+		type ViewUpdate,
+		MatchDecorator
+	} from '@codemirror/view';
+	import { oneDark } from '@codemirror/theme-one-dark';
+
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current template value */
+		value: string;
+		/** Placeholder text shown when empty */
+		placeholder?: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether to use dark theme */
+		darkTheme?: boolean;
+		/** Editor height in pixels or CSS value */
+		height?: string;
+		/** Available variable names for hints (optional) */
+		variableHints?: string[];
+		/** Placeholder variable example for the hint */
+		placeholderExample?: string;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string) => void;
+	}
+
+	let {
+		id,
+		value = '',
+		placeholder = 'Enter your template here...\nUse {{ variable }} for dynamic values.',
+		required = false,
+		darkTheme = false,
+		height = '250px',
+		variableHints = [],
+		placeholderExample = 'Hello {{ name }}, your order #{{ order_id }} is ready!',
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/** Reference to the container element */
+	let containerRef: HTMLDivElement | undefined = $state(undefined);
+
+	/** CodeMirror editor instance */
+	let editorView: EditorView | undefined = $state(undefined);
+
+	/** Flag to prevent update loops */
+	let isInternalUpdate = false;
+
+	/**
+	 * Create a MatchDecorator for {{ variable }} patterns
+	 * This highlights the entire {{ variable }} expression
+	 */
+	const variableMatcher = new MatchDecorator({
+		// Match {{ variable_name }} patterns (with optional whitespace)
+		regexp: /\{\{\s*[\w.]+\s*\}\}/g,
+		decoration: Decoration.mark({ class: 'cm-template-variable' })
+	});
+
+	/**
+	 * ViewPlugin that applies the variable highlighting decorations
+	 */
+	const variableHighlighter = ViewPlugin.fromClass(
+		class {
+			decorations: DecorationSet;
+			constructor(view: EditorView) {
+				this.decorations = variableMatcher.createDeco(view);
+			}
+			update(update: ViewUpdate) {
+				this.decorations = variableMatcher.updateDeco(update, this.decorations);
+			}
+		},
+		{
+			decorations: (v) => v.decorations
+		}
+	);
+
+	/**
+	 * Handle editor content changes
+	 */
+	function handleUpdate(update: { docChanged: boolean; state: EditorState }): void {
+		if (!update.docChanged || isInternalUpdate) {
+			return;
+		}
+
+		const content = update.state.doc.toString();
+		onChange(content);
+	}
+
+	/**
+	 * Create editor extensions array for template editing
+	 */
+	function createExtensions() {
+		const extensions = [
+			basicSetup,
+			variableHighlighter,
+			EditorView.updateListener.of(handleUpdate),
+			EditorView.theme({
+				'&': {
+					height: height,
+					fontSize: '0.875rem',
+					fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace"
+				},
+				'.cm-scroller': {
+					overflow: 'auto'
+				},
+				'.cm-content': {
+					minHeight: '100px',
+					padding: '0.5rem 0'
+				},
+				'&.cm-focused': {
+					outline: 'none'
+				},
+				'.cm-line': {
+					padding: '0 0.5rem'
+				},
+				// Style for the highlighted {{ variable }} pattern
+				'.cm-template-variable': {
+					color: '#a855f7',
+					backgroundColor: 'rgba(168, 85, 247, 0.1)',
+					borderRadius: '3px',
+					padding: '1px 2px',
+					fontWeight: '500'
+				}
+			}),
+			EditorView.lineWrapping,
+			EditorState.tabSize.of(2)
+		];
+
+		if (darkTheme) {
+			extensions.push(oneDark);
+			// Add dark theme override for variable highlighting
+			extensions.push(
+				EditorView.theme({
+					'.cm-template-variable': {
+						color: '#c084fc',
+						backgroundColor: 'rgba(192, 132, 252, 0.15)'
+					}
+				})
+			);
+		}
+
+		return extensions;
+	}
+
+	/**
+	 * Insert a variable placeholder at current cursor position
+	 */
+	function insertVariable(varName: string): void {
+		if (!editorView) {
+			return;
+		}
+
+		const insertText = `{{ ${varName} }}`;
+		const { from, to } = editorView.state.selection.main;
+
+		editorView.dispatch({
+			changes: { from, to, insert: insertText },
+			selection: { anchor: from + insertText.length }
+		});
+
+		editorView.focus();
+	}
+
+	/**
+	 * Initialize CodeMirror editor on mount
+	 */
+	onMount(() => {
+		if (!containerRef) {
+			return;
+		}
+
+		editorView = new EditorView({
+			state: EditorState.create({
+				doc: value,
+				extensions: createExtensions()
+			}),
+			parent: containerRef
+		});
+	});
+
+	/**
+	 * Clean up editor on destroy
+	 */
+	onDestroy(() => {
+		if (editorView) {
+			editorView.destroy();
+		}
+	});
+
+	/**
+	 * Update editor content when value prop changes externally
+	 */
+	$effect(() => {
+		if (!editorView) {
+			return;
+		}
+
+		const currentContent = editorView.state.doc.toString();
+
+		// Only update if content actually changed and wasn't from internal edit
+		if (value !== currentContent && !isInternalUpdate) {
+			isInternalUpdate = true;
+			editorView.dispatch({
+				changes: {
+					from: 0,
+					to: editorView.state.doc.length,
+					insert: value
+				}
+			});
+			isInternalUpdate = false;
+		}
+	});
+</script>
+
+<div class="form-template-editor">
+	<!-- Hidden input for form submission compatibility -->
+	<input
+		type="hidden"
+		{id}
+		name={id}
+		{value}
+		aria-describedby={ariaDescribedBy}
+		aria-required={required}
+	/>
+
+	<!-- CodeMirror container -->
+	<div
+		bind:this={containerRef}
+		class="form-template-editor__container"
+		class:form-template-editor__container--dark={darkTheme}
+		role="textbox"
+		aria-multiline="true"
+		aria-label="Template editor"
+	></div>
+
+	<!-- Variable hints section (shown when variables are available) -->
+	{#if variableHints.length > 0}
+		<div class="form-template-editor__hints">
+			<span class="form-template-editor__hints-label">Available variables:</span>
+			<div class="form-template-editor__hints-list">
+				{#each variableHints as varName (varName)}
+					<button
+						type="button"
+						class="form-template-editor__hint-btn"
+						onclick={() => insertVariable(varName)}
+						title={`Insert {{ ${varName} }}`}
+					>
+						<code>{'{{ '}{varName}{' }}'}</code>
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Placeholder hint when empty -->
+	{#if !value && placeholderExample}
+		<div class="form-template-editor__placeholder">
+			<span class="form-template-editor__placeholder-label">Example template:</span>
+			<code class="form-template-editor__placeholder-example">{placeholderExample}</code>
+		</div>
+	{/if}
+
+	<!-- Syntax help -->
+	<div class="form-template-editor__help">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 20 20"
+			fill="currentColor"
+			class="form-template-editor__help-icon"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+		<span
+			>Use <code>{'{{ variable }}'}</code> syntax to insert dynamic values from the data input</span
+		>
+	</div>
+</div>
+
+<style>
+	.form-template-editor {
+		position: relative;
+		width: 100%;
+	}
+
+	.form-template-editor__container {
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		overflow: hidden;
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+
+	.form-template-editor__container:hover {
+		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: #ffffff;
+	}
+
+	.form-template-editor__container:focus-within {
+		border-color: var(--color-ref-purple-500, #a855f7);
+		background-color: #ffffff;
+		box-shadow:
+			0 0 0 3px rgba(168, 85, 247, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+
+	/* Dark theme overrides */
+	.form-template-editor__container--dark {
+		background-color: #282c34;
+	}
+
+	.form-template-editor__container--dark:hover,
+	.form-template-editor__container--dark:focus-within {
+		background-color: #282c34;
+	}
+
+	/* CodeMirror styling overrides */
+	.form-template-editor__container :global(.cm-editor) {
+		border-radius: 0.5rem;
+	}
+
+	.form-template-editor__container :global(.cm-gutters) {
+		background-color: var(--color-ref-gray-100, #f3f4f6);
+		border-right: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem 0 0 0.5rem;
+	}
+
+	.form-template-editor__container--dark :global(.cm-gutters) {
+		background-color: #21252b;
+		border-right-color: #3e4451;
+	}
+
+	/* Variable hints section */
+	.form-template-editor__hints {
+		margin-top: 0.625rem;
+		padding: 0.625rem;
+		background-color: var(--color-ref-purple-50, #faf5ff);
+		border: 1px solid var(--color-ref-purple-200, #e9d5ff);
+		border-radius: 0.375rem;
+	}
+
+	.form-template-editor__hints-label {
+		display: block;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--color-ref-purple-700, #7e22ce);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-bottom: 0.375rem;
+	}
+
+	.form-template-editor__hints-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.375rem;
+	}
+
+	.form-template-editor__hint-btn {
+		padding: 0.25rem 0.5rem;
+		background-color: var(--color-ref-purple-100, #f3e8ff);
+		border: 1px solid var(--color-ref-purple-300, #d8b4fe);
+		border-radius: 0.25rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.form-template-editor__hint-btn:hover {
+		background-color: var(--color-ref-purple-200, #e9d5ff);
+		border-color: var(--color-ref-purple-400, #c084fc);
+	}
+
+	.form-template-editor__hint-btn:active {
+		transform: scale(0.98);
+	}
+
+	.form-template-editor__hint-btn code {
+		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+		font-size: 0.6875rem;
+		color: var(--color-ref-purple-800, #6b21a8);
+	}
+
+	/* Placeholder hint */
+	.form-template-editor__placeholder {
+		margin-top: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		border: 1px dashed var(--color-ref-gray-300, #d1d5db);
+		border-radius: 0.375rem;
+	}
+
+	.form-template-editor__placeholder-label {
+		display: block;
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--color-ref-gray-500, #6b7280);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		margin-bottom: 0.25rem;
+	}
+
+	.form-template-editor__placeholder-example {
+		display: block;
+		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+		font-size: 0.75rem;
+		color: var(--color-ref-gray-700, #374151);
+		word-break: break-all;
+	}
+
+	/* Help text */
+	.form-template-editor__help {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.375rem;
+		margin-top: 0.5rem;
+		font-size: 0.6875rem;
+		color: var(--color-ref-gray-500, #6b7280);
+	}
+
+	.form-template-editor__help-icon {
+		width: 0.875rem;
+		height: 0.875rem;
+		flex-shrink: 0;
+		margin-top: 0.0625rem;
+	}
+
+	.form-template-editor__help code {
+		padding: 0.0625rem 0.25rem;
+		background-color: var(--color-ref-gray-100, #f3f4f6);
+		border-radius: 0.1875rem;
+		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+		font-size: 0.625rem;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current template value */
+    value: string;
+    /** Placeholder text shown when empty */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether to use dark theme */
+    darkTheme?: boolean;
+    /** Editor height in pixels or CSS value */
+    height?: string;
+    /** Available variable names for hints (optional) */
+    variableHints?: string[];
+    /** Placeholder variable example for the hint */
+    placeholderExample?: string;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormTemplateEditor: import("svelte").Component<Props, {}, "">;
+type FormTemplateEditor = ReturnType<typeof FormTemplateEditor>;
+export default FormTemplateEditor;

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

@@ -40,3 +40,6 @@ export { default as FormToggle } from "./FormToggle.svelte";
 export { default as FormSelect } from "./FormSelect.svelte";
 export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
 export { default as FormArray } from "./FormArray.svelte";
+export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
+export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
+export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";

package/dist/components/form/index.js

@@ -44,3 +44,6 @@ export { default as FormToggle } from "./FormToggle.svelte";
 export { default as FormSelect } from "./FormSelect.svelte";
 export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
 export { default as FormArray } from "./FormArray.svelte";
+export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
+export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
+export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";

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

@@ -15,8 +15,12 @@ export type FieldType = "string" | "number" | "integer" | "boolean" | "select" |
  * - multiline: Renders as textarea
  * - hidden: Field is hidden from UI but included in form submission
  * - range: Renders as range slider for numeric values
+ * - json: Renders as CodeMirror JSON editor
+ * - code: Alias for json, renders as CodeMirror editor
+ * - markdown: Renders as SimpleMDE Markdown editor
+ * - template: Renders as CodeMirror editor with Twig/Liquid syntax highlighting
  */
-export type FieldFormat = "multiline" | "hidden" | "range" | string;
+export type FieldFormat = "multiline" | "hidden" | "range" | "json" | "code" | "markdown" | "template" | string;
 /**
  * Option type for select and checkbox group fields
  */
@@ -131,6 +135,55 @@ export interface ArrayFieldProps extends BaseFieldProps {
     addLabel?: string;
     onChange: (value: unknown[]) => void;
 }
+/**
+ * Properties for code editor fields (CodeMirror-based)
+ */
+export interface CodeEditorFieldProps extends BaseFieldProps {
+    /** Current value - can be string (raw JSON) or object */
+    value: unknown;
+    /** Whether to use dark theme */
+    darkTheme?: boolean;
+    /** Editor height in pixels or CSS value */
+    height?: string;
+    /** Whether to auto-format JSON on blur */
+    autoFormat?: boolean;
+    /** Callback when value changes */
+    onChange: (value: unknown) => void;
+}
+/**
+ * Properties for markdown editor fields (SimpleMDE-based)
+ */
+export interface MarkdownEditorFieldProps extends BaseFieldProps {
+    /** Current value (markdown string) */
+    value: string;
+    /** Editor height in pixels or CSS value */
+    height?: string;
+    /** Whether to show the toolbar */
+    showToolbar?: boolean;
+    /** Whether to show the status bar */
+    showStatusBar?: boolean;
+    /** Whether to enable spell checking */
+    spellChecker?: boolean;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for template editor fields (CodeMirror with Twig/Liquid syntax)
+ */
+export interface TemplateEditorFieldProps extends BaseFieldProps {
+    /** Current template value */
+    value: string;
+    /** Whether to use dark theme */
+    darkTheme?: boolean;
+    /** Editor height in pixels or CSS value */
+    height?: string;
+    /** Available variable names for hints (optional) */
+    variableHints?: string[];
+    /** Placeholder variable example for the hint */
+    placeholderExample?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
 /**
  * Field schema definition derived from JSON Schema property
  * Used to determine which field component to render

package/package.json

@@ -2,7 +2,7 @@
   "name": "@d34dman/flowdrop",
   "license": "MIT",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -104,6 +104,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@types/marked": "^6.0.0",
     "@types/node": "^20",
+    "@types/uuid": "^10.0.0",
     "@vitest/browser": "^3.2.3",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
@@ -125,8 +126,7 @@
     "vite": "^6.2.6",
     "vite-plugin-devtools-json": "^0.2.1",
     "vitest": "^3.2.3",
-    "vitest-browser-svelte": "^0.1.0",
-    "@types/uuid": "^10.0.0"
+    "vitest-browser-svelte": "^0.1.0"
   },
   "overrides": {
     "@sveltejs/kit": {
@@ -137,7 +137,13 @@
     "svelte"
   ],
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.9.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
     "@xyflow/svelte": "~1.2",
+    "codemirror": "^6.0.2",
+    "easymde": "^2.20.0",
     "marked": "^16.1.1",
     "svelte-5-french-toast": "^2.0.6",
     "uuid": "^11.1.0"