@mittwald/flow-react-components 0.2.0-alpha.551 → 0.2.0-alpha.553

package/dist/js/components/src/components/ComboBox/ComboBox.mjs

@@ -1,10 +1,10 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
 import * as Aria from 'react-aria-components';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import { Button } from '../Button/Button.mjs';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
@@ -22,6 +22,7 @@ import { useOverlayController } from '../../lib/controller/overlay/useOverlayCon
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
 
 const ComboBox = flowComponent("ComboBox", (props) => {
   const {
@@ -35,6 +36,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
     controller: controllerFromProps,
     placeholder,
     ref,
+    inputRef,
     renderEmptyState,
     ...rest
   } = props;
@@ -64,7 +66,10 @@ const ComboBox = flowComponent("ComboBox", (props) => {
   });
   const controller = controllerFromProps ?? controllerFromContext;
   const localComboBoxRef = useObjectRef(ref);
-  useMakeFocusable(localComboBoxRef);
+  const localInputComboBoxRef = useObjectRef(inputRef);
+  useMakeFocusable(localComboBoxRef, () => {
+    localInputComboBoxRef.current?.focus();
+  });
   return /* @__PURE__ */ jsx(
     Aria.ComboBox,
     {
@@ -74,11 +79,26 @@ const ComboBox = flowComponent("ComboBox", (props) => {
       ...rest,
       ref: localComboBoxRef,
       onSelectionChange: handleOnSelectionChange,
-      onOpenChange: (isOpen) => controller.setOpen(isOpen),
+      onOpenChange: (isOpen) => {
+        controller.setOpen(isOpen);
+      },
       children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
         /* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [
           /* @__PURE__ */ jsxs("div", { className: styles.input, children: [
-            /* @__PURE__ */ jsx(Aria.Input, { placeholder }),
+            /* @__PURE__ */ jsx(
+              ReactAriaControlledValueFix,
+              {
+                inputContext: Aria.ComboBoxContext,
+                props,
+                children: /* @__PURE__ */ jsx(
+                  Aria.Input,
+                  {
+                    placeholder,
+                    ref: localInputComboBoxRef
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -95,6 +115,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
             Options,
             {
               controller,
+              onOpenChange: () => null,
               renderEmptyState,
               children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
             }

package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  useMakeFocusable(localComboBoxRef);\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <div className={styles.input}>\n              <Aria.Input placeholder={placeholder} />\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import { type PropsWithChildren, type RefObject } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    inputRef,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  const localInputComboBoxRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localComboBoxRef, () => {\n    localInputComboBoxRef.current?.focus();\n  });\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => {\n        controller.setOpen(isOpen);\n      }}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorCaptureContext>\n            <div className={styles.input}>\n              <ReactAriaControlledValueFix\n                inputContext={Aria.ComboBoxContext}\n                props={props}\n              >\n                <Aria.Input\n                  placeholder={placeholder}\n                  ref={localInputComboBoxRef}\n                />\n              </ReactAriaControlledValueFix>\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              onOpenChange={() => null}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -50,8 +50,12 @@ const FileField = flowComponent("FileField", (props) => {
       );
     }
   };
-  useMakeFocusable(inputRef);
-  return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsxs(
+  const localRef = useObjectRef(ref);
+  const localInputRef = useObjectRef(inputRef);
+  useMakeFocusable(localRef, () => {
+    localInputRef.current?.focus();
+  });
+  return /* @__PURE__ */ jsx("div", { ...fieldProps, ref: localRef, children: /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsxs(
     FieldErrorContext.Provider,
     {
       value: formValidationState.displayValidation,
@@ -65,7 +69,7 @@ const FileField = flowComponent("FileField", (props) => {
             children: /* @__PURE__ */ jsx(
               FileInput,
               {
-                ref: inputRef,
+                ref: localInputRef,
                 isReadOnly,
                 onChange: isReadOnly ? void 0 : handleOnChange,
                 isDisabled,

package/dist/js/components/src/components/FileField/FileField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  useMakeFocusable(inputRef);\n\n  return (\n    <div {...fieldProps}>\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <FieldErrorCaptureContext>\n            <PropsContextProvider props={fieldPropsContext}>\n              <div\n                data-readonly={isReadOnly}\n                data-required={!!isRequired || undefined}\n                data-invalid={\n                  formValidationState.displayValidation.isInvalid || undefined\n                }\n              >\n                <FileInput\n                  ref={inputRef}\n                  isReadOnly={isReadOnly}\n                  onChange={isReadOnly ? undefined : handleOnChange}\n                  isDisabled={isDisabled}\n                >\n                  {children}\n                </FileInput>\n              </div>\n            </PropsContextProvider>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EACP,8BAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,UAAA,EAC5B,QAAA,kBAAA,IAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,OAAO,mBAAA,CAAoB,iBAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,gBACnC,UAAA;AAAA,gBAEC;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,KAEpB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren, RefObject } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  inputRef?: RefObject<HTMLInputElement>;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  const localRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localRef, () => {\n    localInputRef.current?.focus();\n  });\n\n  return (\n    <div {...fieldProps} ref={localRef}>\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <FieldErrorCaptureContext>\n            <PropsContextProvider props={fieldPropsContext}>\n              <div\n                data-readonly={isReadOnly}\n                data-required={!!isRequired || undefined}\n                data-invalid={\n                  formValidationState.displayValidation.isInvalid || undefined\n                }\n              >\n                <FileInput\n                  ref={localInputRef}\n                  isReadOnly={isReadOnly}\n                  onChange={isReadOnly ? undefined : handleOnChange}\n                  isDisabled={isDisabled}\n                >\n                  {children}\n                </FileInput>\n              </div>\n            </PropsContextProvider>\n          </FieldErrorCaptureContext>\n          <FieldErrorView />\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgB,aAAa,QAAQ,CAAA;AAE3C,EAAA,gBAAA,CAAiB,UAAU,MAAM;AAC/B,IAAA,aAAA,CAAc,SAAS,KAAA,EAAM;AAAA,EAC/B,CAAC,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EAAY,GAAA,EAAK,QAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,UAAA,EAC5B,QAAA,kBAAA,IAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,OAAO,mBAAA,CAAoB,iBAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,aAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,gBACnC,UAAA;AAAA,gBAEC;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,KAEpB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Markdown/Markdown.mjs

@@ -21,6 +21,7 @@ const Markdown = (props) => {
     color = "default",
     className,
     headingOffset = 0,
+    ref,
     ...rest
   } = props;
   const headingAndLinkColor = color === "default" ? "primary" : color;
@@ -97,7 +98,7 @@ const Markdown = (props) => {
     blockquote: (props2) => /* @__PURE__ */ jsx(Text, { color: textColor, children: /* @__PURE__ */ jsx("blockquote", { children: props2.children }) })
   };
   const textContent = extractTextFromFirstChild(children);
-  return /* @__PURE__ */ jsx("div", { className: clsx(styles.markdown, className), ...rest, children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: textContent }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.markdown, className), ...rest, ref, children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children: textContent }) });
 };
 
 export { Markdown, Markdown as default };

package/dist/js/components/src/components/Markdown/Markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName,\n    Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. */\n  color?: \"dark\" | \"light\" | \"default\";\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** @internal */\n  style?: CSSProperties;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    ...rest\n  } = props;\n\n  const headingAndLinkColor = color === \"default\" ? \"primary\" : color;\n  const textColor = color === \"default\" ? undefined : color;\n\n  const components: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={headingAndLinkColor} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={textColor}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          color=\"dark\"\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? preElementContent.props.className.replace(\"language-\", \"\")\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          )}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={textColor}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={textColor}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={textColor}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"names":["props"],"mappings":"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"}
+{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode, RefObject } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName,\n    Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. */\n  color?: \"dark\" | \"light\" | \"default\";\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** @internal */\n  style?: CSSProperties;\n  ref?: RefObject<HTMLDivElement>;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    ref,\n    ...rest\n  } = props;\n\n  const headingAndLinkColor = color === \"default\" ? \"primary\" : color;\n  const textColor = color === \"default\" ? undefined : color;\n\n  const components: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={headingAndLinkColor} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={textColor}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={headingAndLinkColor}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          color=\"dark\"\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? preElementContent.props.className.replace(\"language-\", \"\")\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          )}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={textColor}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={textColor}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={textColor}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"names":["props"],"mappings":"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"}

package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs

@@ -1,17 +1,20 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import styles from './MarkdownEditor.module.scss.mjs';
 import { Markdown } from '../Markdown/Markdown.mjs';
 import { TextArea } from '../TextArea/TextArea.mjs';
 import { Toolbar } from './components/Toolbar.mjs';
 import clsx from 'clsx';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { handleKeyDown } from './lib/handleKeyDown.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useManagedValue } from '../../lib/hooks/useManagedValue.mjs';
-import { insertAtCursor } from './lib/insertAtCursor.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import { scrollToCursor, modifyValueByMarkdownSyntax } from './lib/modifyValueByMarkdownSyntax.mjs';
+import { modifyValueByType } from './lib/modifyValueByType.mjs';
 
 const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
   const {
@@ -23,58 +26,117 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
     autoResizeMaxRows,
     headingOffset,
     ref,
+    inputRef,
     ...rest
   } = props;
+  const localRef = useObjectRef(ref);
+  const localInputRef = useObjectRef(inputRef);
   const [mode, setMode] = useState("editor");
   const { value, handleOnChange } = useManagedValue(props);
-  const textAreaRef = useObjectRef(ref);
+  const selectionPresent = useRef(null);
+  useEffect(() => {
+    const inputRef2 = localInputRef.current;
+    const present = selectionPresent.current;
+    if (!present || !inputRef2) {
+      return;
+    }
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          inputRef2.setSelectionRange(
+            present.selectionStart,
+            present.selectionEnd
+          );
+          if (present.shouldScrollToCursor) {
+            scrollToCursor(value, inputRef2);
+          }
+        });
+      });
+      selectionPresent.current = null;
+    }, 0);
+  }, [selectionPresent.current, localInputRef.current, value]);
   const rootClassName = clsx(
     styles.markdownEditor,
     className,
     styles[`mode-${mode}`]
   );
-  return /* @__PURE__ */ jsxs(
-    TextArea,
-    {
-      ...rest,
-      isReadOnly: isReadOnly || mode === "preview",
-      isDisabled,
-      className: rootClassName,
-      ref: textAreaRef,
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter") {
+      return;
+    }
+    const modifyParams = modifyValueByMarkdownSyntax(value, localInputRef);
+    if (!modifyParams) {
+      return;
+    }
+    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;
+    event.preventDefault();
+    localInputRef.current?.blur();
+    selectionPresent.current = {
+      shouldScrollToCursor: true,
+      selectionStart: newSelectionStart,
+      selectionEnd: newSelectionEnd
+    };
+    handleOnChange(newValue);
+  };
+  const handleToolButtonPressed = (type) => {
+    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(
       value,
-      rows,
-      autoResizeMaxRows,
-      onChange: (v) => {
-        handleOnChange(v);
-      },
-      onKeyDown: (e) => handleKeyDown(e, textAreaRef, handleOnChange),
-      children: [
-        /* @__PURE__ */ jsx(
-          Toolbar,
-          {
-            currentMode: mode,
-            isDisabled,
-            onModeChange: (newMode) => setMode(newMode),
-            onToolPressed: (type) => {
-              insertAtCursor(value, handleOnChange, textAreaRef, type);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Markdown,
-          {
-            headingOffset,
-            className: styles.markdown,
-            style: {
-              height: textAreaRef.current?.offsetHeight
-            },
-            children: value
-          }
-        ),
-        children
-      ]
+      type,
+      localInputRef
+    );
+    selectionPresent.current = {
+      shouldScrollToCursor: false,
+      selectionStart: newSelectionStart,
+      selectionEnd: newSelectionEnd
+    };
+    handleOnChange(newValue);
+  };
+  const propsContext = {
+    Label: {
+      tunnelId: "label"
     }
-  );
+  };
+  return /* @__PURE__ */ jsx("div", { ref: localRef, className: rootClassName, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+    /* @__PURE__ */ jsx(TunnelExit, { id: "label" }),
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        currentMode: mode,
+        isDisabled,
+        onModeChange: setMode,
+        onToolPressed: handleToolButtonPressed
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      TextArea,
+      {
+        ...rest,
+        "aria-hidden": mode === "preview",
+        isReadOnly: isReadOnly || mode === "preview",
+        isDisabled,
+        ref: localInputRef,
+        value,
+        rows,
+        autoResizeMaxRows,
+        onChange: handleOnChange,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            Markdown,
+            {
+              headingOffset,
+              className: styles.markdown,
+              style: {
+                height: localInputRef.current?.offsetHeight
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+        ]
+      }
+    )
+  ] }) });
 });
 
 export { MarkdownEditor, MarkdownEditor as default };

package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { handleKeyDown } from \"@/components/MarkdownEditor/lib/handleKeyDown\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\nimport { insertAtCursor } from \"@/components/MarkdownEditor/lib/insertAtCursor\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = TextAreaProps &\n  Pick<MarkdownProps, \"headingOffset\">;\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    ref,\n    ...rest\n  } = props;\n\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const { value, handleOnChange } = useManagedValue(props);\n  const textAreaRef = useObjectRef<HTMLTextAreaElement>(ref);\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    className,\n    styles[`mode-${mode}`],\n  );\n\n  return (\n    <TextArea\n      {...rest}\n      isReadOnly={isReadOnly || mode === \"preview\"}\n      isDisabled={isDisabled}\n      className={rootClassName}\n      ref={textAreaRef}\n      value={value}\n      rows={rows}\n      autoResizeMaxRows={autoResizeMaxRows}\n      onChange={(v) => {\n        handleOnChange(v);\n      }}\n      onKeyDown={(e) => handleKeyDown(e, textAreaRef, handleOnChange)}\n    >\n      <Toolbar\n        currentMode={mode}\n        isDisabled={isDisabled}\n        onModeChange={(newMode) => setMode(newMode)}\n        onToolPressed={(type) => {\n          insertAtCursor(value, handleOnChange, textAreaRef, type);\n        }}\n      />\n\n      <Markdown\n        headingOffset={headingOffset}\n        className={styles.markdown}\n        style={{\n          height: textAreaRef.current?.offsetHeight,\n        }}\n      >\n        {value}\n      </Markdown>\n\n      {children}\n    </TextArea>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,CAAA;AAAA,IACP,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,cAAA,EAAe,GAAI,gBAAgB,KAAK,CAAA;AACvD,EAAA,MAAM,WAAA,GAAc,aAAkC,GAAG,CAAA;AAEzD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE;AAAA,GACvB;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,UAAA,EAAY,cAAc,IAAA,KAAS,SAAA;AAAA,MACnC,UAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,WAAA;AAAA,MACL,KAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,QAAA,cAAA,CAAe,CAAC,CAAA;AAAA,MAClB,CAAA;AAAA,MACA,WAAW,CAAC,CAAA,KAAM,aAAA,CAAc,CAAA,EAAG,aAAa,cAAc,CAAA;AAAA,MAE9D,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAa,IAAA;AAAA,YACb,UAAA;AAAA,YACA,YAAA,EAAc,CAAC,OAAA,KAAY,OAAA,CAAQ,OAAO,CAAA;AAAA,YAC1C,aAAA,EAAe,CAAC,IAAA,KAAS;AACvB,cAAA,cAAA,CAAe,KAAA,EAAO,cAAA,EAAgB,WAAA,EAAa,IAAI,CAAA;AAAA,YACzD;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,WAAW,MAAA,CAAO,QAAA;AAAA,YAClB,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,YAAY,OAAA,EAAS;AAAA,aAC/B;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, {\n  type KeyboardEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelProvider, TunnelExit } from \"@mittwald/react-tunnel\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = Omit<TextAreaProps, \"ref\"> &\n  Pick<MarkdownProps, \"headingOffset\" | \"ref\"> & {\n    inputRef?: RefObject<HTMLTextAreaElement | null>;\n  };\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    ref,\n    inputRef,\n    ...rest\n  } = props;\n\n  const localRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const { value, handleOnChange } = useManagedValue(props);\n\n  const selectionPresent = useRef<{\n    shouldScrollToCursor: boolean;\n    selectionStart: number | null;\n    selectionEnd: number | null;\n  } | null>(null);\n\n  useEffect(() => {\n    const inputRef = localInputRef.current;\n    const present = selectionPresent.current;\n\n    if (!present || !inputRef) {\n      return;\n    }\n\n    setTimeout(() => {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          inputRef.setSelectionRange(\n            present.selectionStart,\n            present.selectionEnd,\n          );\n\n          if (present.shouldScrollToCursor) {\n            scrollToCursor(value, inputRef);\n          }\n        });\n      });\n\n      selectionPresent.current = null;\n    }, 0);\n  }, [selectionPresent.current, localInputRef.current, value]);\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    className,\n    styles[`mode-${mode}`],\n  );\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, localInputRef);\n\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    event.preventDefault();\n    localInputRef.current?.blur();\n\n    selectionPresent.current = {\n      shouldScrollToCursor: true,\n      selectionStart: newSelectionStart,\n      selectionEnd: newSelectionEnd,\n    };\n\n    handleOnChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      localInputRef,\n    );\n\n    selectionPresent.current = {\n      shouldScrollToCursor: false,\n      selectionStart: newSelectionStart,\n      selectionEnd: newSelectionEnd,\n    };\n\n    handleOnChange(newValue);\n  };\n\n  const propsContext: PropsContext = {\n    Label: {\n      tunnelId: \"label\",\n    },\n  };\n\n  return (\n    <div ref={localRef} className={rootClassName}>\n      <TunnelProvider>\n        <TunnelExit id=\"label\" />\n        <Toolbar\n          currentMode={mode}\n          isDisabled={isDisabled}\n          onModeChange={setMode}\n          onToolPressed={handleToolButtonPressed}\n        />\n        <TextArea\n          {...rest}\n          aria-hidden={mode === \"preview\"}\n          isReadOnly={isReadOnly || mode === \"preview\"}\n          isDisabled={isDisabled}\n          ref={localInputRef}\n          value={value}\n          rows={rows}\n          autoResizeMaxRows={autoResizeMaxRows}\n          onChange={handleOnChange}\n          onKeyDown={handleKeyDown}\n        >\n          <Markdown\n            headingOffset={headingOffset}\n            className={styles.markdown}\n            style={{\n              height: localInputRef.current?.offsetHeight,\n            }}\n          >\n            {value}\n          </Markdown>\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </TextArea>\n      </TunnelProvider>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":["inputRef"],"mappings":";;;;;;;;;;;;;;;;AAkCO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA,GAAO,CAAA;AAAA,IACP,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,MAAM,aAAA,GAAgB,aAAa,QAAQ,CAAA;AAE3C,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAC7D,EAAA,MAAM,EAAE,KAAA,EAAO,cAAA,EAAe,GAAI,gBAAgB,KAAK,CAAA;AAEvD,EAAA,MAAM,gBAAA,GAAmB,OAIf,IAAI,CAAA;AAEd,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAMA,YAAW,aAAA,CAAc,OAAA;AAC/B,IAAA,MAAM,UAAU,gBAAA,CAAiB,OAAA;AAEjC,IAAA,IAAI,CAAC,OAAA,IAAW,CAACA,SAAAA,EAAU;AACzB,MAAA;AAAA,IACF;AAEA,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAAA,SAAAA,CAAS,iBAAA;AAAA,YACP,OAAA,CAAQ,cAAA;AAAA,YACR,OAAA,CAAQ;AAAA,WACV;AAEA,UAAA,IAAI,QAAQ,oBAAA,EAAsB;AAChC,YAAA,cAAA,CAAe,OAAOA,SAAQ,CAAA;AAAA,UAChC;AAAA,QACF,CAAC,CAAA;AAAA,MACH,CAAC,CAAA;AAED,MAAA,gBAAA,CAAiB,OAAA,GAAU,IAAA;AAAA,IAC7B,GAAG,CAAC,CAAA;AAAA,EACN,GAAG,CAAC,gBAAA,CAAiB,SAAS,aAAA,CAAc,OAAA,EAAS,KAAK,CAAC,CAAA;AAE3D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE;AAAA,GACvB;AAEA,EAAA,MAAM,aAAA,GAAsC,CAAC,KAAA,KAAU;AACrD,IAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,YAAA,GAAe,2BAAA,CAA4B,KAAA,EAAO,aAAa,CAAA;AAErE,IAAA,IAAI,CAAC,YAAA,EAAc;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,eAAA,EAAgB,GAAI,YAAA;AAEzD,IAAA,KAAA,CAAM,cAAA,EAAe;AACrB,IAAA,aAAA,CAAc,SAAS,IAAA,EAAK;AAE5B,IAAA,gBAAA,CAAiB,OAAA,GAAU;AAAA,MACzB,oBAAA,EAAsB,IAAA;AAAA,MACtB,cAAA,EAAgB,iBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KAChB;AAEA,IAAA,cAAA,CAAe,QAAQ,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,uBAAA,GAA0B,CAAC,IAAA,KAAqB;AACpD,IAAA,MAAM,EAAE,QAAA,EAAU,iBAAA,EAAmB,eAAA,EAAgB,GAAI,iBAAA;AAAA,MACvD,KAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,gBAAA,CAAiB,OAAA,GAAU;AAAA,MACzB,oBAAA,EAAsB,KAAA;AAAA,MACtB,cAAA,EAAgB,iBAAA;AAAA,MAChB,YAAA,EAAc;AAAA,KAChB;AAEA,IAAA,cAAA,CAAe,QAAQ,CAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,GAAA,EAAK,UAAU,SAAA,EAAW,aAAA,EAC7B,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAG,OAAA,EAAQ,CAAA;AAAA,oBACvB,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAa,IAAA;AAAA,QACb,UAAA;AAAA,QACA,YAAA,EAAc,OAAA;AAAA,QACd,aAAA,EAAe;AAAA;AAAA,KACjB;AAAA,oBACA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,eAAa,IAAA,KAAS,SAAA;AAAA,QACtB,UAAA,EAAY,cAAc,IAAA,KAAS,SAAA;AAAA,QACnC,UAAA;AAAA,QACA,GAAA,EAAK,aAAA;AAAA,QACL,KAAA;AAAA,QACA,IAAA;AAAA,QACA,iBAAA;AAAA,QACA,QAAA,EAAU,cAAA;AAAA,QACV,SAAA,EAAW,aAAA;AAAA,QAEX,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,aAAA;AAAA,cACA,WAAW,MAAA,CAAO,QAAA;AAAA,cAClB,KAAA,EAAO;AAAA,gBACL,MAAA,EAAQ,cAAc,OAAA,EAAS;AAAA,eACjC;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH;AAAA;AAAA;AAAA;AACF,GAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.module.scss.mjs

@@ -7,12 +7,12 @@ const modeButton = "flow--markdown-editor--mode-button";
 const markdown = "flow--markdown-editor--markdown";
 const styles = {
 	markdownEditor: markdownEditor,
-	"mode-editor": "flow--markdown-editor--mode-editor",
-	"mode-preview": "flow--markdown-editor--mode-preview",
 	toolbar: toolbar,
 	toolbarButtons: toolbarButtons,
 	modeButton: modeButton,
-	markdown: markdown
+	markdown: markdown,
+	"mode-editor": "flow--markdown-editor--mode-editor",
+	"mode-preview": "flow--markdown-editor--mode-preview"
 };
 
 export { styles as default, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };

package/dist/js/components/src/components/MarkdownEditor/components/ToolbarButton.mjs

@@ -13,6 +13,7 @@ const ToolbarButton = (props) => {
     Button,
     {
       ...rest,
+      "data-button-type": type,
       "aria-label": stringFormatter.format(`toolbar.${type}`),
       size: "s",
       variant: "plain",

package/dist/js/components/src/components/MarkdownEditor/components/ToolbarButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.mjs","sources":["../../../../../../../src/components/MarkdownEditor/components/ToolbarButton.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/insertAtCursor\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\n\nexport interface ToolBarButtonProps\n  extends Pick<ButtonProps, \"isDisabled\" | \"children\"> {\n  type: InsertType;\n  onPress?: (type: InsertType) => void;\n}\n\nexport const ToolbarButton: FC<ToolBarButtonProps> = (props) => {\n  const { children, type, onPress, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      {...rest}\n      aria-label={stringFormatter.format(`toolbar.${type}`)}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"dark\"\n      onPress={() => onPress?.(type)}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAE7C,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAA;AAAA,MACpD,IAAA,EAAK,GAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS,MAAM,OAAA,GAAU,IAAI,CAAA;AAAA,MAE5B;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"ToolbarButton.mjs","sources":["../../../../../../../src/components/MarkdownEditor/components/ToolbarButton.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\n\nexport interface ToolBarButtonProps\n  extends Pick<ButtonProps, \"isDisabled\" | \"children\"> {\n  type: InsertType;\n  onPress?: (type: InsertType) => void;\n}\n\nexport const ToolbarButton: FC<ToolBarButtonProps> = (props) => {\n  const { children, type, onPress, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      {...rest}\n      data-button-type={type}\n      aria-label={stringFormatter.format(`toolbar.${type}`)}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"dark\"\n      onPress={() => onPress?.(type)}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAE7C,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,kBAAA,EAAkB,IAAA;AAAA,MAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAA;AAAA,MACpD,IAAA,EAAK,GAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS,MAAM,OAAA,GAAU,IAAI,CAAA;AAAA,MAE5B;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/js/components/src/components/MarkdownEditor/lib/{handleKeyDown.mjs → modifyValueByMarkdownSyntax.mjs}

@@ -1,25 +1,21 @@
 "use client"
 /* */
-const scrollToCursor = (textarea) => {
+const scrollToCursor = (value, textarea) => {
   const { selectionStart } = textarea;
   const lineHeight = parseInt(
     getComputedStyle(textarea).lineHeight || "20",
     10
   );
-  const lines = textarea.value.slice(0, selectionStart).split("\n").length;
+  const lines = value.slice(0, selectionStart).split("\n").length;
   textarea.scrollTop = (lines - 1) * lineHeight;
 };
-const handleKeyDown = (e, textAreaRef, setMarkdown) => {
-  if (e.key !== "Enter") {
-    return;
-  }
+const modifyValueByMarkdownSyntax = (value, textAreaRef) => {
   const textarea = textAreaRef.current;
   if (!textarea) {
     return;
   }
   const start = textarea.selectionStart;
   const end = textarea.selectionEnd;
-  const value = textarea.value;
   const before = value.slice(0, start);
   const after = value.slice(end);
   const lineStart = before.lastIndexOf("\n") + 1;
@@ -27,41 +23,36 @@ const handleKeyDown = (e, textAreaRef, setMarkdown) => {
   const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s+/);
   const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s+/);
   if ((orderedMatch || unorderedMatch) && currentLine.trim().match(/^([-*+]|\d+\.)$/)) {
-    e.preventDefault();
     const newText = value.slice(0, lineStart) + "\n" + after;
-    setMarkdown(newText);
-    requestAnimationFrame(() => {
-      textarea.selectionStart = textarea.selectionEnd = lineStart + 1;
-      scrollToCursor(textarea);
-    });
-    return;
+    return {
+      newValue: newText,
+      newSelectionStart: lineStart + 1,
+      newSelectionEnd: lineStart + 1
+    };
   }
   if (orderedMatch) {
-    e.preventDefault();
     const indent = orderedMatch[1];
     const nextNum = parseInt(orderedMatch[2] ?? "", 10) + 1;
     const insert = `
 ${indent}${nextNum}. `;
-    const newText = before + insert + after;
-    setMarkdown(newText);
-    requestAnimationFrame(() => {
-      textarea.selectionStart = textarea.selectionEnd = start + insert.length;
-      scrollToCursor(textarea);
-    });
+    return {
+      newValue: before + insert + after,
+      newSelectionStart: start + insert.length,
+      newSelectionEnd: start + insert.length
+    };
   } else if (unorderedMatch) {
-    e.preventDefault();
     const indent = unorderedMatch[1];
     const bullet = unorderedMatch[2];
     const insert = `
 ${indent}${bullet} `;
     const newText = before + insert + after;
-    setMarkdown(newText);
-    requestAnimationFrame(() => {
-      textarea.selectionStart = textarea.selectionEnd = start + insert.length;
-      scrollToCursor(textarea);
-    });
+    return {
+      newValue: newText,
+      newSelectionStart: start + insert.length,
+      newSelectionEnd: start + insert.length
+    };
   }
 };
 
-export { handleKeyDown };
-//# sourceMappingURL=handleKeyDown.mjs.map
+export { modifyValueByMarkdownSyntax, scrollToCursor };
+//# sourceMappingURL=modifyValueByMarkdownSyntax.mjs.map

package/dist/js/components/src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifyValueByMarkdownSyntax.mjs","sources":["../../../../../../../src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const scrollToCursor = (\n  value: string,\n  textarea: HTMLTextAreaElement,\n) => {\n  const { selectionStart } = textarea;\n  const lineHeight = parseInt(\n    getComputedStyle(textarea).lineHeight || \"20\",\n    10,\n  );\n  const lines = value.slice(0, selectionStart).split(\"\\n\").length;\n  textarea.scrollTop = (lines - 1) * lineHeight;\n};\n\nexport const modifyValueByMarkdownSyntax = (\n  value: string,\n  textAreaRef: RefObject<HTMLTextAreaElement | null>,\n) => {\n  const textarea = textAreaRef.current;\n  if (!textarea) {\n    return;\n  }\n\n  const start = textarea.selectionStart;\n  const end = textarea.selectionEnd;\n\n  const before = value.slice(0, start);\n  const after = value.slice(end);\n  const lineStart = before.lastIndexOf(\"\\n\") + 1;\n  const currentLine = before.slice(lineStart);\n\n  const orderedMatch = currentLine.match(/^(\\s*)(\\d+)\\.\\s+/);\n  const unorderedMatch = currentLine.match(/^(\\s*)([-*+])\\s+/);\n\n  if (\n    (orderedMatch || unorderedMatch) &&\n    currentLine.trim().match(/^([-*+]|\\d+\\.)$/)\n  ) {\n    const newText = value.slice(0, lineStart) + \"\\n\" + after;\n\n    return {\n      newValue: newText,\n      newSelectionStart: lineStart + 1,\n      newSelectionEnd: lineStart + 1,\n    } as const;\n  }\n\n  if (orderedMatch) {\n    const indent = orderedMatch[1];\n    const nextNum = parseInt(orderedMatch[2] ?? \"\", 10) + 1;\n    const insert = `\\n${indent}${nextNum}. `;\n\n    return {\n      newValue: before + insert + after,\n      newSelectionStart: start + insert.length,\n      newSelectionEnd: start + insert.length,\n    } as const;\n  } else if (unorderedMatch) {\n    const indent = unorderedMatch[1];\n    const bullet = unorderedMatch[2];\n    const insert = `\\n${indent}${bullet} `;\n\n    const newText = before + insert + after;\n    return {\n      newValue: newText,\n      newSelectionStart: start + insert.length,\n      newSelectionEnd: start + insert.length,\n    } as const;\n  }\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAA,GAAiB,CAC5B,KAAA,EACA,QAAA,KACG;AACH,EAAA,MAAM,EAAE,gBAAe,GAAI,QAAA;AAC3B,EAAA,MAAM,UAAA,GAAa,QAAA;AAAA,IACjB,gBAAA,CAAiB,QAAQ,CAAA,CAAE,UAAA,IAAc,IAAA;AAAA,IACzC;AAAA,GACF;AACA,EAAA,MAAM,KAAA,GAAQ,MAAM,KAAA,CAAM,CAAA,EAAG,cAAc,CAAA,CAAE,KAAA,CAAM,IAAI,CAAA,CAAE,MAAA;AACzD,EAAA,QAAA,CAAS,SAAA,GAAA,CAAa,QAAQ,CAAA,IAAK,UAAA;AACrC;AAEO,MAAM,2BAAA,GAA8B,CACzC,KAAA,EACA,WAAA,KACG;AACH,EAAA,MAAM,WAAW,WAAA,CAAY,OAAA;AAC7B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA;AAAA,EACF;AAEA,EAAA,MAAM,QAAQ,QAAA,CAAS,cAAA;AACvB,EAAA,MAAM,MAAM,QAAA,CAAS,YAAA;AAErB,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,KAAK,CAAA;AACnC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,GAAG,CAAA;AAC7B,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,WAAA,CAAY,IAAI,CAAA,GAAI,CAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA;AAE1C,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,kBAAkB,CAAA;AACzD,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,KAAA,CAAM,kBAAkB,CAAA;AAE3D,EAAA,IAAA,CACG,gBAAgB,cAAA,KACjB,WAAA,CAAY,MAAK,CAAE,KAAA,CAAM,iBAAiB,CAAA,EAC1C;AACA,IAAA,MAAM,UAAU,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,SAAS,IAAI,IAAA,GAAO,KAAA;AAEnD,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,OAAA;AAAA,MACV,mBAAmB,SAAA,GAAY,CAAA;AAAA,MAC/B,iBAAiB,SAAA,GAAY;AAAA,KAC/B;AAAA,EACF;AAEA,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,MAAM,MAAA,GAAS,aAAa,CAAC,CAAA;AAC7B,IAAA,MAAM,UAAU,QAAA,CAAS,YAAA,CAAa,CAAC,CAAA,IAAK,EAAA,EAAI,EAAE,CAAA,GAAI,CAAA;AACtD,IAAA,MAAM,MAAA,GAAS;AAAA,EAAK,MAAM,GAAG,OAAO,CAAA,EAAA,CAAA;AAEpC,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,SAAS,MAAA,GAAS,KAAA;AAAA,MAC5B,iBAAA,EAAmB,QAAQ,MAAA,CAAO,MAAA;AAAA,MAClC,eAAA,EAAiB,QAAQ,MAAA,CAAO;AAAA,KAClC;AAAA,EACF,WAAW,cAAA,EAAgB;AACzB,IAAA,MAAM,MAAA,GAAS,eAAe,CAAC,CAAA;AAC/B,IAAA,MAAM,MAAA,GAAS,eAAe,CAAC,CAAA;AAC/B,IAAA,MAAM,MAAA,GAAS;AAAA,EAAK,MAAM,GAAG,MAAM,CAAA,CAAA,CAAA;AAEnC,IAAA,MAAM,OAAA,GAAU,SAAS,MAAA,GAAS,KAAA;AAClC,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,OAAA;AAAA,MACV,iBAAA,EAAmB,QAAQ,MAAA,CAAO,MAAA;AAAA,MAClC,eAAA,EAAiB,QAAQ,MAAA,CAAO;AAAA,KAClC;AAAA,EACF;AACF;;;;"}