@verbb/formie-browser 1.0.13 → 1.0.15

package/src/js/modules/fields/rich-text.ts

@@ -21,7 +21,7 @@ import strikethroughIcon from '#icons/rich-text/strikethrough.svg?raw';
 import ulistIcon from '#icons/rich-text/ulist.svg?raw';
 import underlineIcon from '#icons/rich-text/underline.svg?raw';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 
@@ -141,7 +141,9 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
         actions: getActions(options.buttons),
         onChange: (html: string) => {
             const emptyParagraph = '<p><br></p>';
-            input.value = input.placeholder && html === emptyParagraph ? '' : html;
+            // Treat Pell's empty document as blank so required validation matches
+            // a never-touched textarea (and so clearing the editor can fail required).
+            input.value = (!html || html === emptyParagraph) ? '' : html;
             // Bubble both generic input and a namespaced rich-text change hook.
             input.dispatchEvent(new Event('input', { bubbles: true }));
             dispatchFieldEvent(input, MODULE_ID, 'populate', {
@@ -166,6 +168,17 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     input.richText = editor;
     editor.content.innerHTML = input.value || '';
 
+    const form = input.form;
+    const onReset = (event: Event) => {
+        // Wait for the textarea to regain its default value before updating Pell.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                editor.content.innerHTML = input.value || '';
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     if (input.placeholder) {
         editor.content.setAttribute('data-placeholder', input.placeholder);
     }
@@ -175,13 +188,16 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     });
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         container.innerHTML = '';
         delete input.richText;
     };
 }
 
-export const richTextModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const richTextModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && hasRichTextField(ctx.target);

package/src/js/modules/fields/shared.ts

@@ -17,6 +17,19 @@ const fallbackCssEscape = (value: string): string => {
 };
 const validatorRegistrations = new WeakMap<HTMLFormElement, Map<string, number>>();
 
+// Conditions clear ordinary controls directly. Enhanced controls also need to
+// clear their hidden transport values before their modules are unmounted.
+export function bindConditionalClear(input: HTMLElement, clear: () => void): () => void {
+    const root = input.getRootNode();
+    const handler = (event: Event) => {
+        if (event.target instanceof Element && event.target.contains(input)) {
+            clear();
+        }
+    };
+    root.addEventListener('formie:field:clear', handler);
+    return () => root.removeEventListener('formie:field:clear', handler);
+}
+
 export function escapeSelectorValue(value: string): string {
     if (typeof window.CSS?.escape === 'function') {
         return window.CSS.escape(value);

package/src/js/modules/fields/signature.ts

@@ -1,8 +1,8 @@
 import SignaturePad from 'signature_pad';
 import signatureCss from '#theme-css/fields/_signature.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import type { BrowserModuleDefinition } from '#contracts/modules';
+import { bindConditionalClear, dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 
 const INPUT_SELECTOR = 'input[data-formie-signature-input]';
@@ -165,6 +165,8 @@ function initSignatureField(
     clearButton: HTMLElement | null,
     options: SignatureOptions,
 ): () => void {
+    const initialValue = input.value;
+    const form = input.form;
     const messages = getSignatureMessages(field);
 
     if (!supportsCanvas()) {
@@ -349,6 +351,20 @@ function initSignatureField(
         syncInputValue('');
     };
 
+    const onReset = (event: Event) => {
+        // Hidden inputs do not restore an earlier value through native reset.
+        // Reset both the submitted signature and the pad to their initial state.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                signaturePad.clear();
+                syncInputValue(initialValue);
+                void restoreSignatureValue(signaturePad, canvas, initialValue);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
+    const unbindConditionalClear = bindConditionalClear(input, clearSignature);
     signaturePad.addEventListener('endStroke', syncValue);
     window.addEventListener('resize', resizeHandler);
     root.addEventListener('formie:page:navigate:after', pageNavigateHandler as EventListener);
@@ -365,6 +381,8 @@ function initSignatureField(
 
     return () => {
         clearSizeRetry();
+        unbindConditionalClear();
+        form?.removeEventListener('reset', onReset);
         signaturePad.removeEventListener('endStroke', syncValue);
         window.removeEventListener('resize', resizeHandler);
         root.removeEventListener('formie:page:navigate:after', pageNavigateHandler as EventListener);
@@ -378,8 +396,10 @@ function initSignatureField(
     };
 }
 
-export const signatureModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const signatureModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(CANVAS_SELECTOR);

package/src/js/modules/fields/summary.ts

@@ -1,6 +1,6 @@
 import summaryCss from '#theme-css/fields/_summary.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { toggleThemeClasses } from '#theme/theme-classes';
@@ -11,8 +11,6 @@ import { requestText } from '#utils/http';
 const BLOCKS_SELECTOR = '[data-formie-summary-blocks]';
 const CONTAINER_SELECTOR = '[data-formie-summary-container]';
 const SUMMARY_ACTION = 'formie/fields/get-summary-html';
-const THEME_CONFIG_ATTR = 'data-formie-theme-config';
-const FRONTEND_THEME_ATTR = 'data-formie-frontend-theme';
 const MODULE_ID = 'summary';
 const debug = createDebug('fields', 'summary');
 
@@ -20,8 +18,6 @@ ensureModuleStyles(MODULE_ID, [summaryCss]);
 
 type SummaryRequestState = {
     accessToken: string | null;
-    themeConfig: string | null;
-    frontendTheme: string | null;
 };
 
 function getSummaryRequestUrl(): string {
@@ -31,14 +27,12 @@ function getSummaryRequestUrl(): string {
     return url.toString();
 }
 
-function getSummaryRequestState(field: HTMLElement, form: HTMLFormElement): SummaryRequestState {
+function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
     const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
     const accessToken = summaryTokenInput?.value?.trim() || null;
 
     return {
         accessToken,
-        themeConfig: form.getAttribute(THEME_CONFIG_ATTR)?.trim() || null,
-        frontendTheme: form.getAttribute(FRONTEND_THEME_ATTR)?.trim() || null,
     };
 }
 
@@ -53,14 +47,6 @@ async function requestSummaryHtml(form: HTMLFormElement, state: SummaryRequestSt
     formData.set('action', SUMMARY_ACTION);
     formData.set('accessToken', state.accessToken);
 
-    if (state.themeConfig) {
-        formData.set('themeConfig', state.themeConfig);
-    }
-
-    if (state.frontendTheme) {
-        formData.set('frontendTheme', state.frontendTheme);
-    }
-
     return requestText(getSummaryRequestUrl(), {
         method: 'POST',
         body: formData,
@@ -115,7 +101,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field, form);
+    const initialState = getSummaryRequestState(field);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
@@ -128,7 +114,7 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field, form);
+        const state = getSummaryRequestState(field);
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);
@@ -256,8 +242,10 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 }
 
-export const summaryModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const summaryModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(BLOCKS_SELECTOR);

package/src/js/modules/fields/survey-likert.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
 
@@ -10,8 +10,10 @@ const debug = createDebug('fields', 'survey-likert');
 
 ensureModuleStyles(MODULE_ID, [surveyPresentationsCss]);
 
-export const surveyLikertModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyLikertModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/survey-rank.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
@@ -183,6 +183,8 @@ function bindRankField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const initialItems = getRankItems(list);
+    const form = field.closest('form');
     let draggedItem: HTMLElement | null = null;
     let placeholder: HTMLElement | null = null;
     let ghostStyleSnapshot: GhostStyleSnapshot | null = null;
@@ -325,9 +327,23 @@ function bindRankField(field: HTMLElement): () => void {
         });
     });
 
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                document.removeEventListener('pointermove', onPointerMove);
+                document.removeEventListener('pointerup', onPointerUp);
+                document.removeEventListener('pointercancel', onPointerUp);
+                finishDrag();
+                initialItems.forEach((item) => list.appendChild(item));
+                syncRankInputs(list);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
     syncRankInputs(list);
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         document.removeEventListener('pointermove', onPointerMove);
         document.removeEventListener('pointerup', onPointerUp);
         document.removeEventListener('pointercancel', onPointerUp);
@@ -338,8 +354,10 @@ function bindRankField(field: HTMLElement): () => void {
     };
 }
 
-export const surveyRankModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyRankModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/survey-rating.ts

@@ -1,6 +1,6 @@
 import surveyPresentationsCss from '#theme-css/fields/_survey-presentations.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { createDebug } from '#utils/debug';
@@ -124,9 +124,21 @@ function bindRatingField(field: HTMLElement): () => void {
         });
     });
 
+    const form = field.closest('form');
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                clearHover();
+                getRatingInputs(stars).forEach((input) => input.removeAttribute(PRESSED_WHILE_CHECKED));
+                updateRatingValue(stars);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
     updateRatingValue(stars);
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         cleanups.forEach((cleanup) => {
             cleanup();
         });
@@ -135,8 +147,10 @@ function bindRatingField(field: HTMLElement): () => void {
     };
 }
 
-export const surveyRatingModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const surveyRatingModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/table.ts

@@ -1,6 +1,6 @@
 import tableCss from '#theme-css/fields/_table.css?inline';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { sleep } from '#utils/async';
@@ -156,8 +156,10 @@ function bindTableField(field: HTMLElement, options: TableOptions): () => void {
     };
 }
 
-export const tableModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const tableModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/text-limit.ts

@@ -2,7 +2,7 @@ import textLimitCss from '#theme-css/fields/_text-limit.css?inline';
 
 import { getTextLimitMetrics } from '@verbb/formie-core';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { t } from '#utils/i18n';
@@ -282,8 +282,10 @@ function updateCounter(input: HTMLInputElement | HTMLTextAreaElement): void {
     }
 }
 
-export const textLimitModule: FormieModuleDefinition = {
-    id: 'text-limit',
+export const textLimitModule: BrowserModuleDefinition = {
+    moduleId: 'formie:text-limit',
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);