@verbb/formie-browser 1.0.0

package/src/js/modules/fields/phone-country.ts

@@ -0,0 +1,226 @@
+import intlTelInput from 'intl-tel-input';
+import intlTelInputCss from 'intl-tel-input/styles?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, getModuleFieldContainers, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { createDebug } from '#utils/debug';
+
+const PHONE_SELECTOR = 'input[type="tel"][data-formie-phone-input]';
+const COUNTRY_SELECTOR = 'input[data-formie-phone-country-input]';
+const MODULE_ID = 'phone-country';
+const PHONE_COUNTRY_VALIDATOR = 'phoneCountry';
+const VALIDATOR_SCOPE = 'phone-country';
+const debug = createDebug('fields', 'phone');
+
+ensureModuleStyles(MODULE_ID, [intlTelInputCss]);
+
+type PhoneCountryOptions = {
+    countryDefaultValue?: string;
+    countryAllowed?: string[];
+    language?: string;
+};
+
+type PhoneInput = HTMLInputElement & {
+    validator?: ReturnType<typeof intlTelInput>;
+    restrictedCountries?: boolean;
+    allowedCountries?: string[];
+    $countryInput?: HTMLInputElement;
+};
+
+type IntlCountryCode = Parameters<ReturnType<typeof intlTelInput>['setCountry']>[0];
+
+function registerValidators(form: HTMLFormElement | null): void {
+    retainFormValidators(form, VALIDATOR_SCOPE, (validator) => {
+        validator.addValidator(PHONE_COUNTRY_VALIDATOR, ({ input }) => {
+            if (input.type !== 'tel') {
+                return true;
+            }
+
+            const phoneInput = input as PhoneInput;
+            const phoneValidator = phoneInput.validator;
+
+            if (!input.value.trim() || !phoneValidator) {
+                return true;
+            }
+
+            if (!phoneValidator.isValidNumber()) {
+                return false;
+            }
+
+            const selectedCountryCode = phoneValidator.getSelectedCountryData()?.iso2 || '';
+
+            if (phoneInput.restrictedCountries) {
+                const allowedCountries = phoneInput.allowedCountries || [];
+
+                if (!allowedCountries.includes(selectedCountryCode)) {
+                    return false;
+                }
+            }
+
+            if (phoneInput.$countryInput && selectedCountryCode) {
+                phoneInput.$countryInput.value = selectedCountryCode.toUpperCase();
+            }
+
+            return true;
+        }, ({ input, t }) => {
+            const phoneInput = input as PhoneInput;
+            const errorMap = ['Invalid number', 'Invalid country code', 'Too short', 'Too long'];
+            const errorCode = phoneInput.validator?.getValidationError() ?? 0;
+            const errorMessage = errorMap[errorCode] || errorMap[0];
+
+            return t(errorMessage);
+        });
+    });
+}
+
+function unregisterValidators(form: HTMLFormElement | null): void {
+    releaseFormValidators(form, VALIDATOR_SCOPE, [PHONE_COUNTRY_VALIDATOR]);
+}
+
+function buildOptions(options: PhoneCountryOptions): Record<string, unknown> {
+    const intlOptions: Record<string, unknown> = {
+        allowDropdown: true,
+        nationalMode: false,
+        separateDialCode: true,
+        initialCountry: 'auto',
+        autoPlaceholder: 'off',
+        formatOnDisplay: false,
+        formatAsYouType: false,
+        loadUtils: () => import('intl-tel-input/utils'),
+    };
+
+    const allowedCountries = (options.countryAllowed || [])
+        .map((item) => {
+            return item.toLowerCase();
+        })
+        .filter(Boolean);
+
+    if (allowedCountries.length) {
+        intlOptions.onlyCountries = allowedCountries;
+        intlOptions.initialCountry = allowedCountries[0];
+
+        // One allowed country behaves more like a formatting helper than a full
+        // country-picker UI, so tighten the plugin options accordingly.
+        if (allowedCountries.length === 1) {
+            intlOptions.allowDropdown = false;
+            intlOptions.separateDialCode = false;
+            intlOptions.nationalMode = true;
+        }
+    }
+
+    if (options.countryDefaultValue) {
+        intlOptions.initialCountry = options.countryDefaultValue.toLowerCase();
+    }
+
+    if (Array.isArray(intlOptions.onlyCountries) && typeof intlOptions.initialCountry === 'string') {
+        const initialCountry = intlOptions.initialCountry.toLowerCase();
+        if (!intlOptions.onlyCountries.includes(initialCountry)) {
+            intlOptions.onlyCountries.push(initialCountry);
+        }
+    }
+
+    return intlOptions;
+}
+
+function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement, options: PhoneCountryOptions): () => void {
+    const intlOptions = buildOptions(options);
+
+    dispatchFieldEvent(phoneInput, MODULE_ID, 'before-init', {
+        phoneCountry: phoneInput,
+        options: intlOptions,
+    });
+
+    const validator = intlTelInput(phoneInput, intlOptions);
+    const allowedCountries = Array.isArray((intlOptions as { onlyCountries?: unknown[] }).onlyCountries)
+        ? (intlOptions as { onlyCountries?: unknown[] }).onlyCountries!.map(String)
+        : [];
+    phoneInput.validator = validator;
+    phoneInput.allowedCountries = allowedCountries;
+    phoneInput.$countryInput = countryInput;
+    phoneInput.restrictedCountries = allowedCountries.length > 0;
+
+    if (countryInput.value) {
+        validator.setCountry(countryInput.value.toLowerCase() as IntlCountryCode);
+    }
+
+    const syncCountry = () => {
+        const countryData = validator.getSelectedCountryData();
+        const isoCode = countryData?.iso2 || '';
+        if (isoCode) {
+            // Keep the hidden country field authoritative for submit payloads while
+            // the tel input focuses on the visible formatted number experience.
+            countryInput.value = isoCode.toUpperCase();
+        }
+    };
+
+    phoneInput.addEventListener('countrychange', syncCountry);
+    phoneInput.addEventListener('blur', syncCountry);
+    syncCountry();
+    debug.log('Initialized.', {
+        inputName: phoneInput.name,
+        restrictedCountries: phoneInput.restrictedCountries,
+    });
+
+    dispatchFieldEvent(phoneInput, MODULE_ID, 'init', {
+        phoneCountry: phoneInput,
+        validator,
+        validatorOptions: intlOptions,
+    });
+
+    return () => {
+        phoneInput.removeEventListener('countrychange', syncCountry);
+        phoneInput.removeEventListener('blur', syncCountry);
+        validator.destroy();
+        delete phoneInput.allowedCountries;
+        delete phoneInput.validator;
+        delete phoneInput.$countryInput;
+        delete phoneInput.restrictedCountries;
+        debug.log('Destroyed.', {
+            inputName: phoneInput.name,
+        });
+    };
+}
+
+export const phoneCountryModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return !!ctx.target.querySelector(PHONE_SELECTOR);
+    },
+    setup: async (ctx) => {
+        const options = (ctx.options || {}) as PhoneCountryOptions;
+        const fields = getModuleFieldContainers(ctx);
+
+        registerValidators(ctx.form);
+
+        const cleanups = fields.map((field) => {
+            const phoneInput = field.querySelector(PHONE_SELECTOR);
+            const countryInput = field.querySelector(COUNTRY_SELECTOR);
+
+            if (!(phoneInput instanceof HTMLInputElement) || !(countryInput instanceof HTMLInputElement)) {
+                debug.warn('Missing phone/country input; skipping field.');
+                return () => { };
+            }
+
+            return initPhoneField(phoneInput as PhoneInput, countryInput, options);
+        });
+        debug.log('Module setup.', { fieldCount: fields.length });
+
+        await ctx.emit('formie:module:phone-country:init', {
+            count: cleanups.length,
+        });
+
+        return {
+            destroy: () => {
+                cleanups.forEach((cleanup) => {
+                    cleanup();
+                });
+
+                unregisterValidators(ctx.form);
+                debug.log('Module destroy.', { fieldCount: fields.length });
+                void ctx.emit('formie:module:phone-country:destroy', {});
+            },
+        };
+    },
+};

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

@@ -0,0 +1,231 @@
+import repeaterCss from '#theme/fields/_repeater.css?inline';
+
+import type { FormieModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+import { sleep } from '#utils/async';
+import { createDebug } from '#utils/debug';
+
+const FIELD_SELECTOR = '[data-formie-repeater-field-layout]';
+const CONTAINER_SELECTOR = '[data-formie-repeater-container]';
+const ROW_SELECTOR = '[data-formie-repeater-item]';
+const ADD_SELECTOR = '[data-formie-repeater-add]';
+const REMOVE_SELECTOR = '[data-formie-repeater-remove]';
+const TEMPLATE_ID_ATTR = 'data-formie-template-id';
+const MODULE_ID = 'repeater';
+const debug = createDebug('fields', 'repeater');
+
+ensureModuleStyles(MODULE_ID, [repeaterCss]);
+
+function getTemplate(field: HTMLElement, templateId?: string | null): HTMLElement | HTMLTemplateElement | HTMLScriptElement | null {
+    return getTemplateSource(field, templateId);
+}
+
+function buildRowFromTemplate(templateHtml: string, rowId: number): HTMLElement | null {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = templateHtml.replaceAll('__ROW__', String(rowId)).trim();
+
+    return wrapper.firstElementChild instanceof HTMLElement ? wrapper.firstElementChild : null;
+}
+
+function getRowCount(field: HTMLElement): number {
+    return field.querySelectorAll(ROW_SELECTOR).length;
+}
+
+function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): void {
+    if (!addButton) {
+        return;
+    }
+
+    const maxRows = parseInt(addButton.getAttribute('data-formie-max-rows') || '', 10);
+    if (maxRows > 0 && rowCount >= maxRows) {
+        addButton.disabled = true;
+        return;
+    }
+
+    addButton.disabled = false;
+}
+
+function bindRepeaterField(field: HTMLElement): () => void {
+    const container = field.matches(CONTAINER_SELECTOR)
+        ? field
+        : field.querySelector(CONTAINER_SELECTOR);
+    const addButton = field.querySelector(ADD_SELECTOR);
+
+    if (!(container instanceof HTMLElement)) {
+        debug.warn('Missing repeater container; skipping field.');
+        return () => {};
+    }
+
+    const removeHandlers = new Map<HTMLElement, EventListener>();
+    // Start after the highest existing row id so SSR rows and client-added rows
+    // keep producing unique `__ROW__` replacements across one repeater instance.
+    let rowCounter = Array.from(field.querySelectorAll(ROW_SELECTOR)).reduce((max, row) => {
+        const current = parseInt((row as HTMLElement).getAttribute('data-formie-repeater-item-id') || '', 10);
+        return Number.isNaN(current) ? max : Math.max(max, current + 1);
+    }, 0);
+
+    const bindRemoveButtons = () => {
+        field.querySelectorAll(REMOVE_SELECTOR).forEach((button) => {
+            if (!(button instanceof HTMLElement) || removeHandlers.has(button)) {
+                return;
+            }
+
+            const handler: EventListener = (event) => {
+                event.preventDefault();
+                const row = button.closest(ROW_SELECTOR);
+
+                if (!(row instanceof HTMLElement)) {
+                    return;
+                }
+
+                const minRows = parseInt((addButton instanceof HTMLButtonElement ? addButton.getAttribute('data-formie-min-rows') : '') || '', 10);
+                if (minRows > 0 && getRowCount(field) <= minRows) {
+                    return;
+                }
+
+                row.remove();
+                syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+                debug.log('Row removed.', {
+                    rowCount: getRowCount(field),
+                });
+                dispatchFieldEvent(field, MODULE_ID, 'remove', {
+                    repeater: field,
+                    row,
+                });
+            };
+
+            button.addEventListener('click', handler);
+            removeHandlers.set(button, handler);
+        });
+    };
+
+    const addRow = async() => {
+        if (!(addButton instanceof HTMLButtonElement)) {
+            return;
+        }
+
+        const handle = addButton.getAttribute('data-formie-repeater-add');
+        if (!handle) {
+            debug.warn('Add handle missing.');
+            return;
+        }
+
+        const templateId = addButton.getAttribute(TEMPLATE_ID_ATTR) || field.getAttribute(TEMPLATE_ID_ATTR);
+
+        const maxRows = parseInt(addButton.getAttribute('data-formie-max-rows') || '', 10);
+        if (maxRows > 0 && getRowCount(field) >= maxRows) {
+            return;
+        }
+
+        const template = getTemplate(field, templateId);
+        if (!template) {
+            debug.warn('Template not found for add action.', { handle });
+            return;
+        }
+
+        const row = buildRowFromTemplate(getTemplateSourceHtml(template), rowCounter++);
+        if (!row) {
+            debug.warn('Failed to build row from template.');
+            return;
+        }
+
+        container.appendChild(row);
+        // Give downstream field modules a tick to see the new row before we emit
+        // the public append/init-row lifecycle events used for nested enhancements.
+        await sleep(50);
+        bindRemoveButtons();
+        syncAddButton(addButton, getRowCount(field));
+        debug.log('Row appended.', {
+            rowCount: getRowCount(field),
+        });
+        dispatchFieldEvent(field, MODULE_ID, 'append', {
+            repeater: field,
+            row,
+        });
+        dispatchFieldEvent(field, MODULE_ID, 'init-row', {
+            repeater: field,
+            row,
+        });
+    };
+
+    const addHandler = (event: Event) => {
+        event.preventDefault();
+        void addRow();
+    };
+
+    if (addButton instanceof HTMLButtonElement) {
+        addButton.addEventListener('click', addHandler);
+    }
+
+    bindRemoveButtons();
+    syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+
+    if (addButton instanceof HTMLButtonElement && getRowCount(field) === 0) {
+        const minRows = parseInt(addButton.getAttribute('data-formie-min-rows') || '', 10);
+        // Seed required minimum rows through the same add flow so templates,
+        // events, and row ids behave exactly like user-triggered additions.
+        for (let index = 0; index < minRows; index += 1) {
+            void addRow();
+        }
+    }
+
+    dispatchFieldEvent(field, MODULE_ID, 'init', {
+        repeater: field,
+    });
+    debug.log('Field initialized.', {
+        rowCount: getRowCount(field),
+    });
+
+    return () => {
+        if (addButton instanceof HTMLButtonElement) {
+            addButton.removeEventListener('click', addHandler);
+        }
+
+        removeHandlers.forEach((handler, button) => {
+            button.removeEventListener('click', handler);
+        });
+    };
+}
+
+export const repeaterModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && (
+            ctx.target.matches(FIELD_SELECTOR) ||
+            !!ctx.target.querySelector(FIELD_SELECTOR)
+        );
+    },
+    setup: async(ctx) => {
+        if (!(ctx.target instanceof HTMLElement)) {
+            return;
+        }
+
+        const fields = ctx.target.matches(FIELD_SELECTOR)
+            ? [ctx.target]
+            : Array.from(ctx.target.querySelectorAll(FIELD_SELECTOR)).filter((field): field is HTMLElement => {
+                return field instanceof HTMLElement;
+            });
+
+        const destroyBindings = fields.map((field) => {
+            return bindRepeaterField(field);
+        });
+        debug.log('Module setup.', { fieldCount: fields.length });
+
+        await ctx.emit('formie:module:repeater:init', {
+            count: fields.length,
+        });
+
+        return {
+            destroy: () => {
+                destroyBindings.forEach((destroyBinding) => {
+                    destroyBinding();
+                });
+
+                debug.log('Module destroy.', { fieldCount: fields.length });
+                void ctx.emit('formie:module:repeater:destroy', {});
+            },
+        };
+    },
+};

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

@@ -0,0 +1,217 @@
+import { exec, init as initPell } from 'pell';
+import pellCss from 'pell/dist/pell.min.css?inline';
+import tokensCss from '#theme/_tokens.css?inline';
+import richTextCss from '#theme/fields/_rich-text.css?inline';
+import alignCenterIcon from '#icons/rich-text/aligncenter.svg?raw';
+import alignLeftIcon from '#icons/rich-text/alignleft.svg?raw';
+import alignRightIcon from '#icons/rich-text/alignright.svg?raw';
+import boldIcon from '#icons/rich-text/bold.svg?raw';
+import clearIcon from '#icons/rich-text/clear.svg?raw';
+import codeIcon from '#icons/rich-text/code.svg?raw';
+import heading1Icon from '#icons/rich-text/heading1.svg?raw';
+import heading2Icon from '#icons/rich-text/heading2.svg?raw';
+import imageIcon from '#icons/rich-text/image.svg?raw';
+import italicIcon from '#icons/rich-text/italic.svg?raw';
+import lineIcon from '#icons/rich-text/line.svg?raw';
+import linkIcon from '#icons/rich-text/link.svg?raw';
+import olistIcon from '#icons/rich-text/olist.svg?raw';
+import paragraphIcon from '#icons/rich-text/paragraph.svg?raw';
+import quoteIcon from '#icons/rich-text/quote.svg?raw';
+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 { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { ensureModuleStyles } from '#modules/styles';
+
+const CONTAINER_SELECTOR = '[data-formie-rich-text]';
+const FIELD_SELECTOR = '[data-formie-field], [data-formie-field-handle]';
+const INPUT_SELECTOR = 'textarea[data-formie-multi-line-text-input]';
+const MODULE_ID = 'rich-text';
+
+ensureModuleStyles(MODULE_ID, [tokensCss, pellCss, richTextCss]);
+
+type RichTextOptions = {
+    buttons?: string[];
+};
+
+type RichTextAction = {
+    name: string;
+    icon: string;
+    title?: string;
+    result?: () => void;
+};
+
+type PellEditor = {
+    content: HTMLElement;
+};
+
+type RichTextInput = HTMLTextAreaElement & {
+    richText?: PellEditor;
+};
+
+const RICH_TEXT_ICONS = {
+    bold: boldIcon,
+    italic: italicIcon,
+    underline: underlineIcon,
+    strikethrough: strikethroughIcon,
+    heading1: heading1Icon,
+    heading2: heading2Icon,
+    paragraph: paragraphIcon,
+    quote: quoteIcon,
+    olist: olistIcon,
+    ulist: ulistIcon,
+    code: codeIcon,
+    line: lineIcon,
+    link: linkIcon,
+    image: imageIcon,
+    alignleft: alignLeftIcon,
+    aligncenter: alignCenterIcon,
+    alignright: alignRightIcon,
+    clear: clearIcon,
+} as const;
+
+function hasRichTextField(target: Element): boolean {
+    if (target.matches(FIELD_SELECTOR)) {
+        return !!target.querySelector(CONTAINER_SELECTOR) && !!target.querySelector(INPUT_SELECTOR);
+    }
+
+    return Array.from(target.querySelectorAll(FIELD_SELECTOR)).some((field) => {
+        return !!field.querySelector(CONTAINER_SELECTOR) && !!field.querySelector(INPUT_SELECTOR);
+    });
+}
+
+function getActionDefinitions(): RichTextAction[] {
+    return [
+        { name: 'bold', icon: RICH_TEXT_ICONS.bold },
+        { name: 'italic', icon: RICH_TEXT_ICONS.italic },
+        { name: 'underline', icon: RICH_TEXT_ICONS.underline },
+        { name: 'strikethrough', icon: RICH_TEXT_ICONS.strikethrough },
+        { name: 'heading1', icon: RICH_TEXT_ICONS.heading1 },
+        { name: 'heading2', icon: RICH_TEXT_ICONS.heading2 },
+        { name: 'paragraph', icon: RICH_TEXT_ICONS.paragraph },
+        { name: 'quote', icon: RICH_TEXT_ICONS.quote },
+        { name: 'olist', icon: RICH_TEXT_ICONS.olist },
+        { name: 'ulist', icon: RICH_TEXT_ICONS.ulist },
+        { name: 'code', icon: RICH_TEXT_ICONS.code },
+        { name: 'line', icon: RICH_TEXT_ICONS.line },
+        { name: 'link', icon: RICH_TEXT_ICONS.link },
+        { name: 'image', icon: RICH_TEXT_ICONS.image },
+        { name: 'alignleft', icon: RICH_TEXT_ICONS.alignleft, title: 'Align Left', result: () => exec('justifyLeft', '') },
+        { name: 'aligncenter', icon: RICH_TEXT_ICONS.aligncenter, title: 'Align Center', result: () => exec('justifyCenter', '') },
+        { name: 'alignright', icon: RICH_TEXT_ICONS.alignright, title: 'Align Right', result: () => exec('justifyRight', '') },
+        {
+            name: 'clear',
+            icon: RICH_TEXT_ICONS.clear,
+            title: 'Clear',
+            result: () => {
+                const selection = window.getSelection()?.toString() || '';
+                if (selection) {
+                    const linesToDelete = selection.split('\n').join('<br>');
+                    exec('formatBlock', '<p>');
+                    document.execCommand('insertHTML', false, linesToDelete);
+                    return;
+                }
+
+                exec('formatBlock', '<p>');
+            },
+        },
+    ];
+}
+
+function getActions(buttons?: string[]): Array<string | RichTextAction> {
+    const selectedButtons = buttons?.length ? buttons : ['bold', 'italic'];
+    const definitions = getActionDefinitions();
+
+    return selectedButtons.map((button) => {
+        return definitions.find((definition) => {
+            return definition.name === button;
+        });
+    }).filter((definition): definition is RichTextAction => {
+        return !!definition;
+    });
+}
+
+function initRichTextField(container: HTMLElement, input: RichTextInput, options: RichTextOptions): () => void {
+    const pellOptions = {
+        element: container,
+        defaultParagraphSeparator: 'p',
+        styleWithCSS: true,
+        actions: getActions(options.buttons),
+        onChange: (html: string) => {
+            const emptyParagraph = '<p><br></p>';
+            input.value = input.placeholder && 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', {
+                richText: input,
+                value: input.value,
+            });
+        },
+        classes: {
+            actionbar: 'formie-rich-text-toolbar',
+            button: 'formie-rich-text-button',
+            content: 'formie-input formie-rich-text-content',
+            selected: 'formie-rich-text-selected',
+        },
+    };
+
+    dispatchFieldEvent(input, MODULE_ID, 'before-init', {
+        richText: input,
+        options: pellOptions,
+    });
+
+    const editor = initPell(pellOptions) as PellEditor;
+    input.richText = editor;
+    editor.content.innerHTML = input.value || '';
+
+    if (input.placeholder) {
+        editor.content.setAttribute('data-placeholder', input.placeholder);
+    }
+
+    dispatchFieldEvent(input, MODULE_ID, 'after-init', {
+        richText: editor,
+    });
+
+    return () => {
+        container.innerHTML = '';
+        delete input.richText;
+    };
+}
+
+export const richTextModule: FormieModuleDefinition = {
+    id: MODULE_ID,
+    kind: 'field',
+    match: (ctx) => {
+        return ctx.target instanceof HTMLElement && hasRichTextField(ctx.target);
+    },
+    setup: async(ctx) => {
+        const options = (ctx.options || {}) as RichTextOptions;
+        const fields = getModuleFieldContainers(ctx);
+        const cleanups = fields.map((field) => {
+            const container = field.querySelector(CONTAINER_SELECTOR);
+            const input = field.querySelector(INPUT_SELECTOR);
+
+            if (!(container instanceof HTMLElement) || !(input instanceof HTMLTextAreaElement)) {
+                return () => {};
+            }
+
+            return initRichTextField(container, input as RichTextInput, options);
+        });
+
+        await ctx.emit('formie:module:rich-text:init', {
+            count: cleanups.length,
+        });
+
+        return {
+            destroy: () => {
+                cleanups.forEach((cleanup) => {
+                    cleanup();
+                });
+
+                void ctx.emit('formie:module:rich-text:destroy', {});
+            },
+        };
+    },
+};