@lattice-php/lattice 0.17.1 → 0.17.2

package/dist/form/components/fields/date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { LazyDatePickerControl } from \"./lazy-date-picker-control\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"field.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, change, blur }) => (\n        <LazyDatePickerControl\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          label={props.label ?? props.name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          mode=\"date\"\n          name={name}\n          onBlur={blur}\n          onChange={change}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          testId={testId ?? props.name}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,oBAAC,uBAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,OAAO,MAAM,SAAS,MAAM;GAC5B,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GAClB,MAAK;GACC;GACN,QAAQ;GACR,UAAU;GACA;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,QAAQ,UAAU,MAAM;GACjB;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"date-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { DatePicker } from \"./date-picker\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateInputComponent: RendererComponent<\"field.date-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, change, blur }) => (\n        <DatePicker\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          label={props.label ?? props.name}\n          max={props.max || undefined}\n          min={props.min || undefined}\n          mode=\"date\"\n          name={name}\n          onBlur={blur}\n          onChange={change}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          testId={testId ?? props.name}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,oBAAC,YAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,OAAO,MAAM,SAAS,MAAM;GAC5B,KAAK,MAAM,OAAO,KAAA;GAClB,KAAK,MAAM,OAAO,KAAA;GAClB,MAAK;GACC;GACN,QAAQ;GACR,UAAU;GACA;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,QAAQ,UAAU,MAAM;GACjB;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/{date-picker-control.d.ts → date-picker-field.d.ts}

@@ -1,4 +1,4 @@
-export type DatePickerControlProps = {
+export type DatePickerFieldProps = {
     mode: "date" | "date-time";
     label: string;
     name: string;
@@ -15,4 +15,4 @@ export type DatePickerControlProps = {
     onChange: (value: string) => void;
     onBlur?: () => void;
 };
-export declare function DatePickerControl({ mode, label, name, testId, value, min, max, step, disabled, readOnly, autoFocus, tabIndex, timezone, onChange, onBlur, }: DatePickerControlProps): import("react").JSX.Element;
+export declare function DatePickerField({ mode, label, name, testId, value, min, max, step, disabled, readOnly, autoFocus, tabIndex, timezone, onChange, onBlur, }: DatePickerFieldProps): import("react").JSX.Element;

package/dist/form/components/fields/{date-picker-control.js → date-picker-field.js}

@@ -10,8 +10,8 @@ import { createElement, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as datePicker from "@zag-js/date-picker";
 import { normalizeProps, useMachine } from "@zag-js/react";
-//#region resources/js/form/components/fields/date-picker-control.tsx
-function DatePickerControl({ mode, label, name, testId, value, min, max, step, disabled, readOnly, autoFocus = false, tabIndex, timezone = "UTC", onChange, onBlur }) {
+//#region resources/js/form/components/fields/date-picker-field.tsx
+function DatePickerField({ mode, label, name, testId, value, min, max, step, disabled, readOnly, autoFocus = false, tabIndex, timezone = "UTC", onChange, onBlur }) {
 	const id = useId();
 	const { locale } = useLocale();
 	const selected = useMemo(() => [mode === "date" ? parseDateValue(value) : parseDateTimeValue(value, timezone)].filter(Boolean), [
@@ -192,6 +192,6 @@ function normalizeDateInputValue(value) {
 	return `${compact.slice(0, 4)}-${compact.slice(4, 6)}-${compact.slice(6, 8)}`;
 }
 //#endregion
-export { DatePickerControl };
+export { DatePickerField };
 
-//# sourceMappingURL=date-picker-control.js.map
+//# sourceMappingURL=date-picker-field.js.map

package/dist/form/components/fields/date-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-picker-field.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport * as datePicker from \"@zag-js/date-picker\";\nimport { normalizeProps, useMachine } from \"@zag-js/react\";\nimport { useId, useMemo } from \"react\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Input } from \"../base/input\";\nimport {\n  formatDateDisplayValue,\n  formatDateTimeDisplayValue,\n  formatDateTimeValue,\n  formatDateValue,\n  formatTimeInputValue,\n  parseDateDisplayValue,\n  parseDateTimeDisplayValue,\n  parseDateTimeValue,\n  parseDateValue,\n} from \"./date-picker-value\";\nimport { TimePicker } from \"./time-picker\";\nimport { parseTimeString } from \"./time-picker-columns\";\n\nexport type DatePickerFieldProps = {\n  mode: \"date\" | \"date-time\";\n  label: string;\n  name: string;\n  testId: string;\n  value: unknown;\n  min?: string | null;\n  max?: string | null;\n  step?: number | null;\n  disabled: boolean;\n  readOnly: boolean;\n  autoFocus?: boolean;\n  tabIndex?: number | null;\n  timezone?: string;\n  onChange: (value: string) => void;\n  onBlur?: () => void;\n};\n\nexport function DatePickerField({\n  mode,\n  label,\n  name,\n  testId,\n  value,\n  min,\n  max,\n  step,\n  disabled,\n  readOnly,\n  autoFocus = false,\n  tabIndex,\n  timezone = \"UTC\",\n  onChange,\n  onBlur,\n}: DatePickerFieldProps) {\n  const id = useId();\n  const { locale } = useLocale();\n  const selected = useMemo(\n    () =>\n      [mode === \"date\" ? parseDateValue(value) : parseDateTimeValue(value, timezone)].filter(\n        Boolean,\n      ) as DateValue[],\n    [mode, timezone, value],\n  );\n  const service = useMachine(datePicker.machine, {\n    id,\n    name,\n    value: selected.length > 0 ? selected : undefined,\n    min: min ? parseDateValue(min) : undefined,\n    max: max ? parseDateValue(max) : undefined,\n    disabled,\n    readOnly,\n    locale,\n    selectionMode: \"single\",\n    timeZone: timezone,\n    closeOnSelect: mode === \"date\",\n    format(date) {\n      return mode === \"date\"\n        ? formatDateDisplayValue(date, locale)\n        : formatDateTimeDisplayValue(date, locale, timezone);\n    },\n    parse(text) {\n      return mode === \"date\"\n        ? parseDateDisplayValue(text, locale)\n        : parseDateTimeDisplayValue(text, locale, timezone);\n    },\n    onValueChange(details) {\n      const next = details.value[0];\n\n      onChange(mode === \"date\" ? formatDateValue(next) : formatDateTimeValue(next, timezone));\n    },\n    onOpenChange(details) {\n      if (!details.open) {\n        onBlur?.();\n      }\n    },\n  });\n  const api = datePicker.connect(service, normalizeProps);\n  const { name: _inputName, onInput, ...inputProps } = api.getInputProps();\n  const submittedValue =\n    mode === \"date\" ? formatDateValue(selected[0]) : formatDateTimeValue(selected[0], timezone);\n\n  return (\n    <div {...api.getRootProps()} className={cn(\"relative\", api.open && \"z-lt-popover\")}>\n      <input type=\"hidden\" name={name} value={submittedValue} data-test={`${testId}-value`} />\n      <div {...api.getControlProps()} className=\"flex gap-2\">\n        <Input\n          {...inputProps}\n          aria-label={label}\n          autoFocus={autoFocus}\n          data-test={testId}\n          disabled={disabled}\n          id={name}\n          onInput={(event) => {\n            onInput?.(event);\n\n            if (mode !== \"date\") {\n              return;\n            }\n\n            const normalized = normalizeDateInputValue(event.currentTarget.value);\n\n            if (!normalized) {\n              return;\n            }\n\n            const next = parseDateValue(normalized);\n\n            if (!next) {\n              return;\n            }\n\n            event.currentTarget.value = normalized;\n            api.setValue([next]);\n            event.currentTarget.value = formatDateDisplayValue(next, locale);\n            onChange(formatDateValue(next));\n          }}\n          readOnly={readOnly}\n          tabIndex={tabIndex ?? undefined}\n        />\n        <Button\n          {...api.getTriggerProps()}\n          aria-label={`Open ${label || name} calendar`}\n          disabled={disabled || readOnly}\n          size=\"icon\"\n          type=\"button\"\n          variant=\"secondary\"\n        >\n          <Icon name=\"calendar\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n      {api.open ? (\n        <div\n          {...api.getPositionerProps()}\n          className=\"absolute z-lt-popover mt-2 rounded-lt-sm border border-lt-border bg-lt-popover p-3 text-lt-popover-fg shadow-lt-md\"\n        >\n          <div {...api.getContentProps()} className=\"grid gap-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <Button {...api.getPrevTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-left\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n              <div {...api.getRangeTextProps()} className=\"text-sm font-medium text-lt-fg\" />\n              <Button {...api.getNextTriggerProps()} size=\"icon\" type=\"button\" variant=\"ghost\">\n                <Icon name=\"chevron-right\" className=\"size-lt-icon-md\" aria-hidden=\"true\" />\n              </Button>\n            </div>\n            <table {...api.getTableProps()} className=\"w-full border-collapse text-sm\">\n              <thead {...api.getTableHeadProps()}>\n                <tr {...api.getTableRowProps()}>\n                  {api.weekDays.map((day) => (\n                    <th\n                      {...api.getTableHeaderProps()}\n                      aria-label={day.long}\n                      key={day.value.toString()}\n                      className=\"size-8 text-center text-xs font-medium text-lt-muted-fg\"\n                    >\n                      {day.narrow}\n                    </th>\n                  ))}\n                </tr>\n              </thead>\n              <tbody {...api.getTableBodyProps()}>\n                {api.weeks.map((week, weekIndex) => (\n                  <tr {...api.getTableRowProps()} key={weekIndex}>\n                    {week.map((day) => {\n                      const state = api.getDayTableCellState({ value: day });\n\n                      return (\n                        <td\n                          {...api.getDayTableCellProps({ value: day })}\n                          key={day.toString()}\n                          className=\"p-0 text-center\"\n                        >\n                          <button\n                            {...api.getDayTableCellTriggerProps({ value: day })}\n                            type=\"button\"\n                            className={cn(\n                              \"size-8 rounded-lt-sm text-sm text-lt-fg hover:bg-lt-muted\",\n                              state.selected && \"bg-lt-primary text-lt-primary-fg\",\n                              state.outsideRange && \"text-lt-muted-fg\",\n                              state.disabled && \"cursor-not-allowed opacity-40\",\n                            )}\n                          >\n                            {day.day}\n                          </button>\n                        </td>\n                      );\n                    })}\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n            {mode === \"date-time\" ? (\n              <TimePicker\n                value={parseTimeString(formatTimeInputValue(selected[0], timezone))}\n                onChange={(next) =>\n                  api.setTime({ hour: next.hour, minute: next.minute, second: next.second })\n                }\n                step={step}\n                disabled={disabled}\n                readOnly={readOnly}\n                testId={`${testId}-time`}\n              />\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction normalizeDateInputValue(value: string): string | undefined {\n  const compact = value.replace(/\\D/g, \"\");\n\n  if (compact.length !== 8) {\n    return undefined;\n  }\n\n  return `${compact.slice(0, 4)}-${compact.slice(4, 6)}-${compact.slice(6, 8)}`;\n}\n"],"mappings":"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"}

package/dist/form/components/fields/date-picker.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerFieldProps } from './date-picker-field';
+export declare function DatePicker(props: DatePickerFieldProps): import("react").JSX.Element;

package/dist/form/components/fields/date-picker.js

@@ -0,0 +1,17 @@
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/date-picker.tsx
+var DatePickerField = lazy(async () => {
+	const { DatePickerField } = await import("./date-picker-field.js");
+	return { default: DatePickerField };
+});
+function DatePicker(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(DatePickerField, { ...props })
+	});
+}
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/form/components/fields/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-picker.tsx"],"sourcesContent":["import { lazy, Suspense } from \"react\";\nimport type { DatePickerFieldProps } from \"./date-picker-field\";\n\nconst DatePickerField = lazy(async () => {\n  const { DatePickerField } = await import(\"./date-picker-field\");\n\n  return { default: DatePickerField };\n});\n\nexport function DatePicker(props: DatePickerFieldProps) {\n  return (\n    <Suspense fallback={null}>\n      <DatePickerField {...props} />\n    </Suspense>\n  );\n}\n"],"mappings":";;;AAGA,IAAM,kBAAkB,KAAK,YAAY;CACvC,MAAM,EAAE,oBAAoB,MAAM,OAAO;CAEzC,OAAO,EAAE,SAAS,gBAAgB;AACpC,CAAC;AAED,SAAgB,WAAW,OAA6B;CACtD,OACE,oBAAC,UAAD;EAAU,UAAU;YAClB,oBAAC,iBAAD,EAAiB,GAAI,MAAQ,CAAA;CACrB,CAAA;AAEd"}

package/dist/form/components/fields/date-time-input.js

@@ -1,5 +1,5 @@
 import { useTimezone } from "../../../i18n/timezone.js";
-import { LazyDatePickerControl } from "./lazy-date-picker-control.js";
+import { DatePicker } from "./date-picker.js";
 import { SimpleField } from "./simple-field.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/date-time-input.tsx
@@ -9,7 +9,7 @@ var DateTimeInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, testId, value, readOnly, disabled, change, blur }) => /* @__PURE__ */ jsx(LazyDatePickerControl, {
+		children: ({ name, testId, value, readOnly, disabled, change, blur }) => /* @__PURE__ */ jsx(DatePicker, {
 			autoFocus: props.autoFocus ?? false,
 			disabled,
 			label: props.label ?? props.name,

package/dist/form/components/fields/date-time-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { LazyDatePickerControl } from \"./lazy-date-picker-control\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateTimeInputComponent: RendererComponent<\"field.date-time-input\"> = ({ node }) => {\n  const props = node.props;\n  const { timezone } = useTimezone();\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, change, blur }) => (\n        <LazyDatePickerControl\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          label={props.label ?? props.name}\n          max={props.max}\n          min={props.min}\n          mode=\"date-time\"\n          name={name}\n          onBlur={blur}\n          onChange={change}\n          readOnly={readOnly}\n          step={props.step}\n          tabIndex={props.tabIndex ?? undefined}\n          testId={testId ?? props.name}\n          timezone={timezone}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,0BAAsE,EAAE,WAAW;CAC9F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,oBAAC,uBAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,OAAO,MAAM,SAAS,MAAM;GAC5B,KAAK,MAAM;GACX,KAAK,MAAM;GACX,MAAK;GACC;GACN,QAAQ;GACR,UAAU;GACA;GACV,MAAM,MAAM;GACZ,UAAU,MAAM,YAAY,KAAA;GAC5B,QAAQ,UAAU,MAAM;GACd;GACH;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"date-time-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/date-time-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useTimezone } from \"@lattice-php/lattice/i18n\";\nimport { DatePicker } from \"./date-picker\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const DateTimeInputComponent: RendererComponent<\"field.date-time-input\"> = ({ node }) => {\n  const props = node.props;\n  const { timezone } = useTimezone();\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, change, blur }) => (\n        <DatePicker\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          label={props.label ?? props.name}\n          max={props.max}\n          min={props.min}\n          mode=\"date-time\"\n          name={name}\n          onBlur={blur}\n          onChange={change}\n          readOnly={readOnly}\n          step={props.step}\n          tabIndex={props.tabIndex ?? undefined}\n          testId={testId ?? props.name}\n          timezone={timezone}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,0BAAsE,EAAE,WAAW;CAC9F,MAAM,QAAQ,KAAK;CACnB,MAAM,EAAE,aAAa,YAAY;CAEjC,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,QAAQ,WACnD,oBAAC,YAAD;GACE,WAAW,MAAM,aAAa;GACpB;GACV,OAAO,MAAM,SAAS,MAAM;GAC5B,KAAK,MAAM;GACX,KAAK,MAAM;GACX,MAAK;GACC;GACN,QAAQ;GACR,UAAU;GACA;GACV,MAAM,MAAM;GACZ,UAAU,MAAM,YAAY,KAAA;GAC5B,QAAQ,UAAU,MAAM;GACd;GACH;EACR,CAAA;CAEQ,CAAA;AAEjB"}

package/dist/form/components/fields/rich-editor-field.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../../../core/types';
+declare const RichEditorField: RendererComponent<"field.rich-editor">;
+export default RichEditorField;

package/dist/form/components/fields/rich-editor-field.js

@@ -0,0 +1,340 @@
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { useFormContext } from "../context.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValue } from "../values.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { useFieldCommit } from "../use-field-commit.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
+import { TableKit } from "@tiptap/extension-table";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+//#region resources/js/form/components/fields/rich-editor-field.tsx
+var toolbar = [
+	{
+		icon: "bold",
+		key: "bold",
+		label: "Bold",
+		isActive: (e) => e.isActive("bold"),
+		run: (e) => e.chain().focus().toggleBold().run()
+	},
+	{
+		icon: "italic",
+		key: "italic",
+		label: "Italic",
+		isActive: (e) => e.isActive("italic"),
+		run: (e) => e.chain().focus().toggleItalic().run()
+	},
+	{
+		icon: "strikethrough",
+		key: "strikethrough",
+		label: "Strikethrough",
+		isActive: (e) => e.isActive("strike"),
+		run: (e) => e.chain().focus().toggleStrike().run()
+	},
+	{
+		icon: "underline",
+		key: "underline",
+		label: "Underline",
+		isActive: (e) => e.isActive("underline"),
+		run: (e) => e.chain().focus().toggleUnderline().run()
+	},
+	{
+		icon: "highlighter",
+		key: "highlight",
+		label: "Highlight",
+		isActive: (e) => e.isActive("highlight"),
+		run: (e) => e.chain().focus().toggleHighlight().run()
+	},
+	"separator",
+	{
+		icon: "heading-1",
+		key: "heading-1",
+		label: "Heading 1",
+		isActive: (e) => e.isActive("heading", { level: 1 }),
+		run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run()
+	},
+	{
+		icon: "heading-2",
+		key: "heading-2",
+		label: "Heading 2",
+		isActive: (e) => e.isActive("heading", { level: 2 }),
+		run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+	},
+	{
+		icon: "heading-3",
+		key: "heading-3",
+		label: "Heading 3",
+		isActive: (e) => e.isActive("heading", { level: 3 }),
+		run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run()
+	},
+	"separator",
+	{
+		icon: "list",
+		key: "bullet-list",
+		label: "Bullet list",
+		isActive: (e) => e.isActive("bulletList"),
+		run: (e) => e.chain().focus().toggleBulletList().run()
+	},
+	{
+		icon: "list-ordered",
+		key: "ordered-list",
+		label: "Ordered list",
+		isActive: (e) => e.isActive("orderedList"),
+		run: (e) => e.chain().focus().toggleOrderedList().run()
+	},
+	{
+		icon: "quote",
+		key: "blockquote",
+		label: "Blockquote",
+		isActive: (e) => e.isActive("blockquote"),
+		run: (e) => e.chain().focus().toggleBlockquote().run()
+	},
+	{
+		icon: "code",
+		key: "code-block",
+		label: "Code block",
+		isActive: (e) => e.isActive("codeBlock"),
+		run: (e) => e.chain().focus().toggleCodeBlock().run()
+	},
+	{
+		icon: "minus",
+		key: "horizontal-rule",
+		label: "Horizontal rule",
+		isActive: () => false,
+		run: (e) => e.chain().focus().setHorizontalRule().run()
+	},
+	"separator",
+	{
+		icon: "align-left",
+		key: "align-left",
+		label: "Align left",
+		isActive: (e) => e.isActive({ textAlign: "left" }),
+		run: (e) => e.chain().focus().setTextAlign("left").run()
+	},
+	{
+		icon: "align-center",
+		key: "align-center",
+		label: "Align center",
+		isActive: (e) => e.isActive({ textAlign: "center" }),
+		run: (e) => e.chain().focus().setTextAlign("center").run()
+	},
+	{
+		icon: "align-right",
+		key: "align-right",
+		label: "Align right",
+		isActive: (e) => e.isActive({ textAlign: "right" }),
+		run: (e) => e.chain().focus().setTextAlign("right").run()
+	},
+	{
+		icon: "align-justify",
+		key: "justify",
+		label: "Justify",
+		isActive: (e) => e.isActive({ textAlign: "justify" }),
+		run: (e) => e.chain().focus().setTextAlign("justify").run()
+	},
+	"separator",
+	{
+		icon: "link",
+		key: "link",
+		label: "Link",
+		isActive: (e) => e.isActive("link"),
+		run: (e) => {
+			if (e.isActive("link")) {
+				e.chain().focus().unsetLink().run();
+				return;
+			}
+			const url = window.prompt("Link URL");
+			if (url) e.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+		}
+	},
+	"separator",
+	{
+		icon: "table",
+		key: "insert-table",
+		label: "Insert table",
+		isActive: (e) => e.isActive("table"),
+		run: (e) => e.chain().focus().insertTable({
+			rows: 3,
+			cols: 3,
+			withHeaderRow: true
+		}).run()
+	},
+	{
+		icon: "columns-3",
+		key: "add-column",
+		label: "Add column",
+		isActive: () => false,
+		isDisabled: (e) => !e.can().addColumnAfter(),
+		run: (e) => e.chain().focus().addColumnAfter().run()
+	},
+	{
+		icon: "rows-3",
+		key: "add-row",
+		label: "Add row",
+		isActive: () => false,
+		isDisabled: (e) => !e.can().addRowAfter(),
+		run: (e) => e.chain().focus().addRowAfter().run()
+	},
+	{
+		icon: "trash-2",
+		key: "delete-table",
+		label: "Delete table",
+		isActive: () => false,
+		isDisabled: (e) => !e.can().deleteTable(),
+		run: (e) => e.chain().focus().deleteTable().run()
+	},
+	{
+		icon: "chevron-right",
+		key: "details",
+		label: "Details",
+		isActive: (e) => e.isActive("details"),
+		run: (e) => {
+			if (e.isActive("details")) {
+				e.chain().focus().unsetDetails().run();
+				return;
+			}
+			e.chain().focus().setDetails().run();
+		}
+	}
+];
+var emojis = [
+	"😀",
+	"😅",
+	"😂",
+	"🥳",
+	"😎",
+	"🤔",
+	"👍",
+	"🙏",
+	"🔥",
+	"🎉",
+	"🚀",
+	"💡",
+	"✅",
+	"❌",
+	"⭐",
+	"❤️"
+];
+function EmojiPicker({ editor }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": t("form.editor.insert-emoji", "Insert emoji"),
+			"data-test": "editor-emoji",
+			className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md",
+			onClick: () => setOpen((value) => !value),
+			onMouseDown: (event) => event.preventDefault(),
+			title: t("form.editor.insert-emoji", "Insert emoji"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, { name: "smile" })
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
+			children: emojis.map((emoji) => /* @__PURE__ */ jsx("button", {
+				className: "inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent",
+				onClick: () => {
+					editor.chain().focus().insertContent(emoji).run();
+					setOpen(false);
+				},
+				onMouseDown: (event) => event.preventDefault(),
+				type: "button",
+				children: emoji
+			}, emoji))
+		})]
+	});
+}
+function Toolbar({ editor }) {
+	const { t } = useT("lattice");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1",
+		children: [
+			toolbar.map((item, index) => {
+				if (item === "separator") return /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }, `sep-${index}`);
+				const label = t(`form.editor.${item.key}`, item.label);
+				return /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					"aria-pressed": item.isActive(editor),
+					"data-test": `editor-${item.key}`,
+					className: cn("inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md", item.isActive(editor) && "bg-lt-accent text-lt-accent-fg"),
+					disabled: item.isDisabled?.(editor) ?? false,
+					onClick: () => item.run(editor),
+					onMouseDown: (event) => event.preventDefault(),
+					title: label,
+					type: "button",
+					children: /* @__PURE__ */ jsx(Icon, { name: item.icon })
+				}, item.key);
+			}),
+			/* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px bg-lt-border" }),
+			/* @__PURE__ */ jsx(EmojiPicker, { editor })
+		]
+	});
+}
+var RichEditorField = ({ node }) => {
+	const { errors } = useFormContext();
+	const { hidden, required, readOnly, disabled } = useDependentField(node);
+	const { change, blur } = useFieldCommit();
+	const name = node.props.name;
+	const scope = useFieldScope();
+	const globalValue = useFormValue(name);
+	const storedValue = scope ? scope.getValue(name) : globalValue;
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const locked = readOnly || disabled;
+	const initialContent = typeof storedValue === "object" && storedValue !== null ? storedValue : node.props.value ?? "";
+	const editor = useEditor({
+		extensions: [
+			StarterKit,
+			Highlight,
+			TextAlign.configure({ types: ["heading", "paragraph"] }),
+			Link.configure({ openOnClick: false }),
+			TableKit.configure({ table: { resizable: false } }),
+			Details,
+			DetailsSummary,
+			DetailsContent
+		],
+		content: initialContent,
+		editable: !locked,
+		immediatelyRender: false,
+		editorProps: { attributes: { class: "lattice-prose min-h-32 px-3 py-2 outline-none" } },
+		onUpdate: ({ editor: instance }) => {
+			change(name, instance.isEmpty ? null : instance.getJSON());
+		},
+		onBlur: () => {
+			blur(name);
+		}
+	});
+	useEffect(() => {
+		editor?.setEditable(!locked);
+	}, [editor, locked]);
+	if (hidden) return null;
+	const submittedValue = storedValue ? JSON.stringify(storedValue) : "";
+	return /* @__PURE__ */ jsxs(FormFieldFrame, {
+		error: errors[errorKey],
+		helperText: node.props.helperText ?? void 0,
+		tooltip: node.props.tooltip ?? void 0,
+		label: node.props.label ?? "",
+		name: domName,
+		required,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50", locked && "opacity-60"),
+			children: [editor && !locked && /* @__PURE__ */ jsx(Toolbar, { editor }), /* @__PURE__ */ jsx(EditorContent, { editor })]
+		}), /* @__PURE__ */ jsx("input", {
+			name: domName,
+			type: "hidden",
+			value: submittedValue
+		})]
+	});
+};
+//#endregion
+export { RichEditorField as default };
+
+//# sourceMappingURL=rich-editor-field.js.map

package/dist/form/components/fields/rich-editor-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-editor-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/rich-editor-field.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Details, DetailsContent, DetailsSummary } from \"@tiptap/extension-details\";\nimport { Highlight } from \"@tiptap/extension-highlight\";\nimport { Link } from \"@tiptap/extension-link\";\nimport { TableKit } from \"@tiptap/extension-table\";\nimport { TextAlign } from \"@tiptap/extension-text-align\";\nimport { type Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport { StarterKit } from \"@tiptap/starter-kit\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\ntype ToolbarItem =\n  | \"separator\"\n  | {\n      icon: string;\n      key: string;\n      label: string;\n      isActive: (editor: Editor) => boolean;\n      isDisabled?: (editor: Editor) => boolean;\n      run: (editor: Editor) => void;\n    };\n\nconst toolbar: ToolbarItem[] = [\n  {\n    icon: \"bold\",\n    key: \"bold\",\n    label: \"Bold\",\n    isActive: (e) => e.isActive(\"bold\"),\n    run: (e) => e.chain().focus().toggleBold().run(),\n  },\n  {\n    icon: \"italic\",\n    key: \"italic\",\n    label: \"Italic\",\n    isActive: (e) => e.isActive(\"italic\"),\n    run: (e) => e.chain().focus().toggleItalic().run(),\n  },\n  {\n    icon: \"strikethrough\",\n    key: \"strikethrough\",\n    label: \"Strikethrough\",\n    isActive: (e) => e.isActive(\"strike\"),\n    run: (e) => e.chain().focus().toggleStrike().run(),\n  },\n  {\n    icon: \"underline\",\n    key: \"underline\",\n    label: \"Underline\",\n    isActive: (e) => e.isActive(\"underline\"),\n    run: (e) => e.chain().focus().toggleUnderline().run(),\n  },\n  {\n    icon: \"highlighter\",\n    key: \"highlight\",\n    label: \"Highlight\",\n    isActive: (e) => e.isActive(\"highlight\"),\n    run: (e) => e.chain().focus().toggleHighlight().run(),\n  },\n  \"separator\",\n  {\n    icon: \"heading-1\",\n    key: \"heading-1\",\n    label: \"Heading 1\",\n    isActive: (e) => e.isActive(\"heading\", { level: 1 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    icon: \"heading-2\",\n    key: \"heading-2\",\n    label: \"Heading 2\",\n    isActive: (e) => e.isActive(\"heading\", { level: 2 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    icon: \"heading-3\",\n    key: \"heading-3\",\n    label: \"Heading 3\",\n    isActive: (e) => e.isActive(\"heading\", { level: 3 }),\n    run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  \"separator\",\n  {\n    icon: \"list\",\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    isActive: (e) => e.isActive(\"bulletList\"),\n    run: (e) => e.chain().focus().toggleBulletList().run(),\n  },\n  {\n    icon: \"list-ordered\",\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    isActive: (e) => e.isActive(\"orderedList\"),\n    run: (e) => e.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    icon: \"quote\",\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    isActive: (e) => e.isActive(\"blockquote\"),\n    run: (e) => e.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    icon: \"code\",\n    key: \"code-block\",\n    label: \"Code block\",\n    isActive: (e) => e.isActive(\"codeBlock\"),\n    run: (e) => e.chain().focus().toggleCodeBlock().run(),\n  },\n  {\n    icon: \"minus\",\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    isActive: () => false,\n    run: (e) => e.chain().focus().setHorizontalRule().run(),\n  },\n  \"separator\",\n  {\n    icon: \"align-left\",\n    key: \"align-left\",\n    label: \"Align left\",\n    isActive: (e) => e.isActive({ textAlign: \"left\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n  },\n  {\n    icon: \"align-center\",\n    key: \"align-center\",\n    label: \"Align center\",\n    isActive: (e) => e.isActive({ textAlign: \"center\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n  },\n  {\n    icon: \"align-right\",\n    key: \"align-right\",\n    label: \"Align right\",\n    isActive: (e) => e.isActive({ textAlign: \"right\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n  },\n  {\n    icon: \"align-justify\",\n    key: \"justify\",\n    label: \"Justify\",\n    isActive: (e) => e.isActive({ textAlign: \"justify\" }),\n    run: (e) => e.chain().focus().setTextAlign(\"justify\").run(),\n  },\n  \"separator\",\n  {\n    icon: \"link\",\n    key: \"link\",\n    label: \"Link\",\n    isActive: (e) => e.isActive(\"link\"),\n    run: (e) => {\n      if (e.isActive(\"link\")) {\n        e.chain().focus().unsetLink().run();\n        return;\n      }\n      const url = window.prompt(\"Link URL\");\n      if (url) {\n        e.chain().focus().extendMarkRange(\"link\").setLink({ href: url }).run();\n      }\n    },\n  },\n  \"separator\",\n  {\n    icon: \"table\",\n    key: \"insert-table\",\n    label: \"Insert table\",\n    isActive: (e) => e.isActive(\"table\"),\n    run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),\n  },\n  {\n    icon: \"columns-3\",\n    key: \"add-column\",\n    label: \"Add column\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addColumnAfter(),\n    run: (e) => e.chain().focus().addColumnAfter().run(),\n  },\n  {\n    icon: \"rows-3\",\n    key: \"add-row\",\n    label: \"Add row\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().addRowAfter(),\n    run: (e) => e.chain().focus().addRowAfter().run(),\n  },\n  {\n    icon: \"trash-2\",\n    key: \"delete-table\",\n    label: \"Delete table\",\n    isActive: () => false,\n    isDisabled: (e) => !e.can().deleteTable(),\n    run: (e) => e.chain().focus().deleteTable().run(),\n  },\n  {\n    icon: \"chevron-right\",\n    key: \"details\",\n    label: \"Details\",\n    isActive: (e) => e.isActive(\"details\"),\n    run: (e) => {\n      if (e.isActive(\"details\")) {\n        e.chain().focus().unsetDetails().run();\n        return;\n      }\n      e.chain().focus().setDetails().run();\n    },\n  },\n];\n\nconst emojis = [\n  \"😀\",\n  \"😅\",\n  \"😂\",\n  \"🥳\",\n  \"😎\",\n  \"🤔\",\n  \"👍\",\n  \"🙏\",\n  \"🔥\",\n  \"🎉\",\n  \"🚀\",\n  \"💡\",\n  \"✅\",\n  \"❌\",\n  \"⭐\",\n  \"❤️\",\n];\n\nfunction EmojiPicker({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <button\n        aria-label={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        data-test=\"editor-emoji\"\n        className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg [&_svg]:size-lt-icon-md\"\n        onClick={() => setOpen((value) => !value)}\n        onMouseDown={(event) => event.preventDefault()}\n        title={t(\"form.editor.insert-emoji\", \"Insert emoji\")}\n        type=\"button\"\n      >\n        <Icon name=\"smile\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-lt-dropdown mt-1 grid grid-cols-8 gap-0.5 rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {emojis.map((emoji) => (\n            <button\n              className=\"inline-flex size-7 items-center justify-center rounded-lt-sm text-base hover:bg-lt-accent\"\n              key={emoji}\n              onClick={() => {\n                editor.chain().focus().insertContent(emoji).run();\n                setOpen(false);\n              }}\n              onMouseDown={(event) => event.preventDefault()}\n              type=\"button\"\n            >\n              {emoji}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Toolbar({ editor }: { editor: Editor }) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-0.5 border-b border-lt-border p-1\">\n      {toolbar.map((item, index) => {\n        if (item === \"separator\") {\n          // eslint-disable-next-line react/no-array-index-key\n          return <span key={`sep-${index}`} className=\"mx-1 h-5 w-px bg-lt-border\" />;\n        }\n\n        const label = t(`form.editor.${item.key}`, item.label);\n\n        return (\n          <button\n            aria-label={label}\n            aria-pressed={item.isActive(editor)}\n            data-test={`editor-${item.key}`}\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-lt-sm text-lt-muted-fg transition-colors hover:bg-lt-accent hover:text-lt-accent-fg disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-lt-icon-md\",\n              item.isActive(editor) && \"bg-lt-accent text-lt-accent-fg\",\n            )}\n            disabled={item.isDisabled?.(editor) ?? false}\n            key={item.key}\n            // Keep focus in the editor so toolbar clicks don't blur it (which would\n            // otherwise trigger a precognition request).\n            onClick={() => item.run(editor)}\n            onMouseDown={(event) => event.preventDefault()}\n            title={label}\n            type=\"button\"\n          >\n            <Icon name={item.icon} />\n          </button>\n        );\n      })}\n      <span className=\"mx-1 h-5 w-px bg-lt-border\" />\n      <EmojiPicker editor={editor} />\n    </div>\n  );\n}\n\nconst RichEditorField: RendererComponent<\"field.rich-editor\"> = ({ node }) => {\n  const { errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const name = node.props.name;\n  const scope = useFieldScope();\n  const globalValue = useFormValue(name);\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const locked = readOnly || disabled;\n  const initialContent =\n    typeof storedValue === \"object\" && storedValue !== null\n      ? (storedValue as object)\n      : ((node.props.value as object | undefined) ?? \"\");\n\n  const editor = useEditor({\n    extensions: [\n      StarterKit,\n      Highlight,\n      TextAlign.configure({ types: [\"heading\", \"paragraph\"] }),\n      Link.configure({ openOnClick: false }),\n      TableKit.configure({ table: { resizable: false } }),\n      Details,\n      DetailsSummary,\n      DetailsContent,\n    ],\n    content: initialContent,\n    editable: !locked,\n    immediatelyRender: false,\n    editorProps: {\n      attributes: {\n        class: \"lattice-prose min-h-32 px-3 py-2 outline-none\",\n      },\n    },\n    onUpdate: ({ editor: instance }) => {\n      change(name, instance.isEmpty ? null : instance.getJSON());\n    },\n    onBlur: () => {\n      blur(name);\n    },\n  });\n\n  useEffect(() => {\n    editor?.setEditable(!locked);\n  }, [editor, locked]);\n\n  if (hidden) {\n    return null;\n  }\n\n  const submittedValue = storedValue ? JSON.stringify(storedValue) : \"\";\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={domName}\n      required={required}\n    >\n      <div\n        className={cn(\n          \"overflow-hidden rounded-lt-sm border border-lt-input bg-transparent shadow-lt-xs focus-within:border-lt-ring focus-within:ring-[3px] focus-within:ring-lt-ring/50\",\n          locked && \"opacity-60\",\n        )}\n      >\n        {editor && !locked && <Toolbar editor={editor} />}\n        <EditorContent editor={editor} />\n      </div>\n      <input name={domName} type=\"hidden\" value={submittedValue} />\n    </FormFieldFrame>\n  );\n};\n\nexport default RichEditorField;\n"],"mappings":"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"}