@mittwald/flow-react-components 1.3.5 → 1.4.0-next.1

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterAccordionRadioGroup.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport FlexView from \"@/views/FlexView\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  filter: Filter;\n}\n\nexport const FilterAccordionRadioGroup: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  const name = filter.name ?? filter.property;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <FlexView direction=\"column\" gap=\"m\">\n      <RadioGroupView\n        value={activeKeys[0]}\n        m={[1, 1]}\n        key={activeKeys[0]}\n        aria-label={name}\n      >\n        {filter.values.map((v) => (\n          <RadioView\n            key={v.id}\n            value={v.id}\n            onPress={() => {\n              if (!v.isActive) {\n                v.toggle();\n              }\n            }}\n          >\n            {v.render()}\n          </RadioView>\n        ))}\n      </RadioGroupView>\n      {activeKeys.length > 0 && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </FlexView>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAaA,IAAa,6BAAwC,UAAU;CAC7D,MAAM,EAAE,WAAW;CAEnB,MAAM,aAAa,OAAO,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,MAAM,EAAE,EAAE;CAE1E,MAAM,OAAO,OAAO,QAAQ,OAAO;CAEnC,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,OACE,qBAAC,UAAD;EAAU,WAAU;EAAS,KAAI;EAAjC,UAAA,CACE,oBAAC,gBAAD;GACE,OAAO,WAAW;GAClB,GAAG,CAAC,GAAG,CAAC;GAER,cAAY;GAEX,UAAA,OAAO,OAAO,KAAK,MAClB,oBAAC,WAAD;IAEE,OAAO,EAAE;IACT,eAAe;KACb,IAAI,CAAC,EAAE,UACL,EAAE,OAAO;IAEb;IAEC,UAAA,EAAE,OAAO;GACD,GATJ,EAAE,EASE,CACZ;EACa,GAhBT,WAAW,EAgBF,GACf,WAAW,SAAS,KACnB,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEN;;AAEd"}
+{"version":3,"file":"FilterAccordionRadioGroup.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport RadioGroupView from \"@/views/RadioGroupView\";\nimport RadioView from \"@/views/RadioView\";\nimport type { Filter } from \"@/components/List/model/filter/Filter\";\nimport ButtonView from \"@/views/ButtonView\";\nimport { Flex } from \"@/components/Flex\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../../../../locales/*.locale.json\";\n\ninterface Props {\n  filter: Filter;\n}\n\nexport const FilterAccordionRadioGroup: FC<Props> = (props) => {\n  const { filter } = props;\n\n  const activeKeys = filter.values.filter((v) => v.isActive).map((v) => v.id);\n\n  const name = filter.name ?? filter.property;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"List\");\n\n  return (\n    <Flex direction=\"column\" gap=\"m\">\n      <RadioGroupView\n        value={activeKeys[0]}\n        m={[1, 1]}\n        key={activeKeys[0]}\n        aria-label={name}\n      >\n        {filter.values.map((v) => (\n          <RadioView\n            key={v.id}\n            value={v.id}\n            onPress={() => {\n              if (!v.isActive) {\n                v.toggle();\n              }\n            }}\n          >\n            {v.render()}\n          </RadioView>\n        ))}\n      </RadioGroupView>\n      {activeKeys.length > 0 && (\n        <ButtonView\n          size=\"s\"\n          color=\"secondary\"\n          variant=\"soft\"\n          onPress={() => filter.clear()}\n        >\n          {stringFormatter.format(\"filters.clearSelection\")}\n        </ButtonView>\n      )}\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAaA,IAAa,6BAAwC,UAAU;CAC7D,MAAM,EAAE,WAAW;CAEnB,MAAM,aAAa,OAAO,OAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,KAAK,MAAM,EAAE,EAAE;CAE1E,MAAM,OAAO,OAAO,QAAQ,OAAO;CAEnC,MAAM,kBAAkB,4BAA4B,kBAAS,MAAM;CAEnE,OACE,qBAAC,MAAD;EAAM,WAAU;EAAS,KAAI;EAA7B,UAAA,CACE,oBAAC,gBAAD;GACE,OAAO,WAAW;GAClB,GAAG,CAAC,GAAG,CAAC;GAER,cAAY;GAEX,UAAA,OAAO,OAAO,KAAK,MAClB,oBAAC,WAAD;IAEE,OAAO,EAAE;IACT,eAAe;KACb,IAAI,CAAC,EAAE,UACL,EAAE,OAAO;IAEb;IAEC,UAAA,EAAE,OAAO;GACD,GATJ,EAAE,EASE,CACZ;EACa,GAhBT,WAAW,EAgBF,GACf,WAAW,SAAS,KACnB,oBAAC,YAAD;GACE,MAAK;GACL,OAAM;GACN,SAAQ;GACR,eAAe,OAAO,MAAM;GAE3B,UAAA,gBAAgB,OAAO,wBAAwB;EACtC,CAAA,CAEV;;AAEV"}

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

@@ -10,6 +10,7 @@ import { TextArea } from "../TextArea/TextArea.mjs";
 import { modifyValueByType } from "./lib/modifyValueByType.mjs";
 import { Toolbar } from "./components/Toolbar.mjs";
 import { modifyValueByMarkdownSyntax, scrollToCursor } from "./lib/modifyValueByMarkdownSyntax.mjs";
+import { useFileUpload } from "./lib/useFileUpload.mjs";
 import clsx from "clsx";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,11 +22,19 @@ var toolbarActionsTunnel = {
 };
 /** @flr-generate all */
 var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
-	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, ref, ...rest } = useControlledHostValueProps(props, "");
+	const { isDisabled, isReadOnly, children, className, rows = 5, autoResizeMaxRows, headingOffset, markdownComponent: MarkdownComponent = Markdown, value, onChange, uploadFile, accept, ref, ...rest } = useControlledHostValueProps(props, "");
 	const inputRef = useObjectRef(ref);
 	const [mode, setMode] = useState("editor");
 	const toolbarActionsDisabled = isDisabled || mode === "preview";
-	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], className);
+	const { dropProps, isDropTarget, uploadFiles } = useFileUpload({
+		accept,
+		uploadFile,
+		isDisabled: isDisabled || isReadOnly || mode === "preview",
+		value,
+		onChange,
+		textAreaRef: inputRef
+	});
+	const rootClassName = clsx(MarkdownEditor_module_default.markdownEditor, MarkdownEditor_module_default[`mode-${mode}`], isDropTarget && MarkdownEditor_module_default.dropTarget, className);
 	const toolbarActionsPropsContext = {
 		...overlayTriggersTunneledTo(toolbarActionsTunnel),
 		Button: {
@@ -63,6 +72,7 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 		onChange(newValue);
 	};
 	return /* @__PURE__ */ jsx("div", {
+		...dropProps,
 		className: rootClassName,
 		children: /* @__PURE__ */ jsx(TextArea, {
 			...rest,
@@ -90,7 +100,10 @@ var MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
 						currentMode: mode,
 						isDisabled,
 						onModeChange: setMode,
-						onToolPressed: handleToolButtonPressed
+						onToolPressed: handleToolButtonPressed,
+						accept,
+						isReadOnly,
+						onFilesSelected: uploadFiles
 					})
 				]
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n  Markdown as DefaultMarkdown,\n  type MarkdownProps,\n} 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 {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nconst toolbarActionsTunnel = {\n  id: \"toolbarActions\",\n  component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n  /**\n   * Allows replacing the markdown preview renderer implementation. Defaults to\n   * the internal `Markdown` component.\n   */\n  markdownComponent?: ComponentType<MarkdownProps>;\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    markdownComponent: MarkdownComponent = DefaultMarkdown,\n    value,\n    onChange,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const toolbarActionsDisabled = isDisabled || mode === \"preview\";\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    styles[`mode-${mode}`],\n    className,\n  );\n\n  const toolbarActionsPropsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n    Button: {\n      tunnel: toolbarActionsTunnel,\n      size: \"s\",\n      variant: \"plain\",\n      color: \"dark\",\n      isDisabled: toolbarActionsDisabled,\n    },\n  };\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        <PropsContextProvider\n          props={toolbarActionsPropsContext}\n          dependencies={[toolbarActionsDisabled]}\n        >\n          {children}\n          {mode === \"preview\" && (\n            <MarkdownComponent\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </MarkdownComponent>\n          )}\n          <Toolbar\n            currentMode={mode}\n            isDisabled={isDisabled}\n            onModeChange={setMode}\n            onToolPressed={handleToolButtonPressed}\n          />\n        </PropsContextProvider>\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAYA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW;EACd,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;KAChB,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}
+{"version":3,"file":"MarkdownEditor.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n  Markdown as DefaultMarkdown,\n  type MarkdownProps,\n} 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 {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport type { MarkdownEditorUpload } from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useFileUpload } from \"@/components/MarkdownEditor/lib/useFileUpload\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport {\n  overlayTriggersTunneledTo,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type { MarkdownEditorUpload };\n\nconst toolbarActionsTunnel = {\n  id: \"toolbarActions\",\n  component: \"MarkdownEditor\",\n} as const;\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n  /**\n   * Allows replacing the markdown preview renderer implementation. Defaults to\n   * the internal `Markdown` component.\n   */\n  markdownComponent?: ComponentType<MarkdownProps>;\n  /**\n   * Uploads a file the user dropped onto the editor, pasted into it or picked\n   * with its attachment button. A placeholder comment sits at the cursor while\n   * the returned promise is pending: resolving replaces it with markdown\n   * linking to the file — an image embed for an image — and rejecting takes it\n   * back out. Without this prop the editor takes no files at all.\n   *\n   * Named without an `on` prefix on purpose: the remote generator turns an\n   * `on*` prop into a fire-and-forget event, and this one has to hand a result\n   * back.\n   */\n  uploadFile?: (file: File) => Promise<MarkdownEditorUpload>;\n  /**\n   * Which file types the editor takes, as the `accept` attribute of a file\n   * input: a comma separated list of MIME types (`image/png`), MIME wildcards\n   * (`image/*`) and file extensions (`.png`). Defaults to every type.\n   */\n  accept?: string;\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    markdownComponent: MarkdownComponent = DefaultMarkdown,\n    value,\n    onChange,\n    uploadFile,\n    accept,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, \"\");\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n  const toolbarActionsDisabled = isDisabled || mode === \"preview\";\n\n  const { dropProps, isDropTarget, uploadFiles } = useFileUpload({\n    accept,\n    uploadFile,\n    isDisabled: isDisabled || isReadOnly || mode === \"preview\",\n    value,\n    onChange,\n    textAreaRef: inputRef,\n  });\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    styles[`mode-${mode}`],\n    isDropTarget && styles.dropTarget,\n    className,\n  );\n\n  const toolbarActionsPropsContext: PropsContext = {\n    ...overlayTriggersTunneledTo(toolbarActionsTunnel),\n    Button: {\n      tunnel: toolbarActionsTunnel,\n      size: \"s\",\n      variant: \"plain\",\n      color: \"dark\",\n      isDisabled: toolbarActionsDisabled,\n    },\n  };\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div {...dropProps} className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        <PropsContextProvider\n          props={toolbarActionsPropsContext}\n          dependencies={[toolbarActionsDisabled]}\n        >\n          {children}\n          {mode === \"preview\" && (\n            <MarkdownComponent\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </MarkdownComponent>\n          )}\n          <Toolbar\n            currentMode={mode}\n            isDisabled={isDisabled}\n            onModeChange={setMode}\n            onToolPressed={handleToolButtonPressed}\n            accept={accept}\n            isReadOnly={isReadOnly}\n            onFilesSelected={uploadFiles}\n          />\n        </PropsContextProvider>\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AA8BA,IAAa,iBAAiB,cAAc,mBAAmB,UAAU;CACvE,MAAM,EACJ,YACA,YACA,UACA,WACA,OAAO,GACP,mBACA,eACA,mBAAmB,oBAAoB,UACvC,OACA,UACA,YACA,QACA,KACA,GAAG,SACD,4BAA4B,OAAO,EAAE;CAEzC,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,CAAC,MAAM,WAAW,SAA6B,QAAQ;CAC7D,MAAM,yBAAyB,cAAc,SAAS;CAEtD,MAAM,EAAE,WAAW,cAAc,gBAAgB,cAAc;EAC7D;EACA;EACA,YAAY,cAAc,cAAc,SAAS;EACjD;EACA;EACA,aAAa;CACf,CAAC;CAED,MAAM,gBAAgB,KACpB,8BAAO,gBACP,8BAAO,QAAQ,SACf,gBAAgB,8BAAO,YACvB,SACF;CAEA,MAAM,6BAA2C;EAC/C,GAAG,0BAA0B,oBAAoB;EACjD,QAAQ;GACN,QAAQ;GACR,MAAM;GACN,SAAS;GACT,OAAO;GACP,YAAY;EACd;CACF;CAEA,MAAM,iBAAuC,UAAU;EACrD,IAAI,MAAM,QAAQ,SAChB;EAGF,MAAM,eAAe,4BAA4B,OAAO,QAAQ;EAChE,IAAI,CAAC,cACH;EAGF,MAAM,EAAE,UAAU,mBAAmB,oBAAoB;EAEzD,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,SAAS,kBAAkB,mBAAmB,eAAe;IACtE,eAAe,UAAU,SAAS,OAAO;GAC3C;EACF,CAAC;EAED,MAAM,eAAe;EACrB,SAAS,QAAQ;CACnB;CAEA,MAAM,2BAA2B,SAAqB;EACpD,MAAM,EAAE,UAAU,mBAAmB,oBAAoB,kBACvD,OACA,MACA,QACF;EAEA,4BAA4B;GAC1B,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,QAAQ;IACzB,SAAS,QAAQ,kBAAkB,mBAAmB,eAAe;IACrE,SAAS,QAAQ,MAAM;GACzB;EACF,CAAC;EAED,SAAS,QAAQ;CACnB;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAC7B,UAAA,oBAAC,UAAD;GACE,GAAI;GACJ,eAAa,SAAS;GACtB,YAAY,cAAc,SAAS;GACvB;GACZ,KAAK;GACE;GACD;GACa;GACT;GACV,WAAW;GAEX,UAAA,qBAAC,sBAAD;IACE,OAAO;IACP,cAAc,CAAC,sBAAsB;IAFvC,UAAA;KAIG;KACA,SAAS,aACR,oBAAC,mBAAD;MACiB;MACf,WAAW,8BAAO;MAClB,OAAO,EACL,QAAQ,SAAS,SAAS,aAC5B;MAEC,UAAA;KACgB,CAAA;KAErB,oBAAC,SAAD;MACE,aAAa;MACD;MACZ,cAAc;MACd,eAAe;MACP;MACI;MACZ,iBAAiB;KAClB,CAAA;IACmB;;EACd,CAAA;CACP,CAAA;AAET,CAAC"}

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

@@ -6,6 +6,7 @@ var toolbar = "flow--markdown-editor--toolbar";
 var toolbarButtons = "flow--markdown-editor--toolbar-buttons";
 var modeButton = "flow--markdown-editor--mode-button";
 var markdown = "flow--markdown-editor--markdown";
+var dropTarget = "flow--markdown-editor--drop-target";
 var MarkdownEditor_module_default = {
 	markdownEditor,
 	toolbar,
@@ -13,9 +14,10 @@ var MarkdownEditor_module_default = {
 	modeButton,
 	markdown,
 	"mode-editor": "flow--markdown-editor--mode-editor",
-	"mode-preview": "flow--markdown-editor--mode-preview"
+	"mode-preview": "flow--markdown-editor--mode-preview",
+	dropTarget
 };
 //#endregion
-export { MarkdownEditor_module_default as default, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
+export { MarkdownEditor_module_default as default, dropTarget, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
 
 //# sourceMappingURL=MarkdownEditor.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"MarkdownEditor.module.mjs","names":[],"sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n@use \"@/styles/mixins/scrollbar\";\n\n.markdownEditor {\n  display: grid;\n  grid-template-areas:\n    \"label\"\n    \"toolbar\"\n    \"content\"\n    \"fieldDescription\";\n\n  .toolbar {\n    grid-area: toolbar;\n    display: flex;\n    justify-content: space-between;\n    padding: var(--form-control--padding-y);\n    column-gap: var(--form-control--padding-y);\n    flex-wrap: wrap;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n    @include formControl.formAnimation;\n\n    & {\n      border-bottom: none;\n      border-end-start-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  .toolbarButtons {\n    display: flex;\n    flex-wrap: wrap;\n    column-gap: var(--form-control--padding-y);\n  }\n\n  .modeButton {\n    margin-inline-start: auto;\n  }\n\n  .markdown {\n    overflow-y: auto;\n\n    @include formControl.formBorder;\n    @include formControl.formColor;\n  }\n\n  :global(.flow--form-field) {\n    display: contents;\n  }\n\n  /* The inner text-area element is react-aria's, but Flow's TextArea puts a\n     class on it — select through that class instead of the element type. */\n  :global(.flow--text-area--input),\n  .markdown {\n    @include scrollbar.scrollbar;\n\n    grid-area: content;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    padding-inline: var(--form-control--padding-x);\n    border-start-start-radius: 0;\n    border-start-end-radius: 0;\n  }\n\n  &.mode-editor {\n    .markdown {\n      display: none;\n    }\n  }\n\n  &.mode-preview {\n    :global(.flow--text-area--input) {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n      width: 1px;\n      height: 1px;\n      inset-inline-start: 0;\n    }\n  }\n\n  /* States */\n\n  &:has(:global(.flow--text-area--input:hover)) .toolbar {\n    background-color: var(--form-control--background-color--hover);\n  }\n\n  &:has(:global(.flow--text-area--input[data-invalid])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-invalid])) .markdown {\n    background-color: var(--form-control--background-color--invalid);\n    border-color: var(--form-control--border-color--invalid);\n  }\n\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .toolbar,\n  &:has(:global(.flow--text-area--input[data-focused=\"true\"])) .markdown {\n    background-color: var(--form-control--background-color--focused);\n    border-color: var(--form-control--border-color--focused);\n  }\n\n  &:has(:global(.flow--text-area--input[data-disabled])).mode-editor .toolbar {\n    background-color: var(--form-control--background-color--disabled);\n    border-color: var(--form-control--border-color--disabled);\n  }\n\n  /* A drag over the editor reads as its focused state -- dropping focuses it. */\n  &.dropTarget {\n    .toolbar,\n    .markdown,\n    :global(.flow--text-area--input) {\n      background-color: var(--form-control--background-color--focused);\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import { IconAttachment } from "../../Icon/components/icons/IconAttachment.mjs";
+import { ToolbarButton } from "./ToolbarButton.mjs";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useVisuallyHidden } from "react-aria";
+//#region src/components/MarkdownEditor/components/AttachmentButton.tsx
+/**
+* The toolbar's file picker — the keyboard and pointer equivalent of dropping a
+* file onto the editor. A `ToolbarButton` like every other tool, plus the
+* hidden input it opens.
+*
+* @internal
+*/
+var AttachmentButton = (props) => {
+	const { accept, isDisabled, onSelect } = props;
+	const inputRef = useRef(null);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	const handlePress = () => {
+		const input = inputRef.current;
+		if (!input) return;
+		input.value = "";
+		input.click();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ToolbarButton, {
+		type: "attachment",
+		isDisabled,
+		onPress: handlePress,
+		children: /* @__PURE__ */ jsx(IconAttachment, {})
+	}), /* @__PURE__ */ jsx("input", {
+		...visuallyHiddenProps,
+		ref: inputRef,
+		type: "file",
+		accept,
+		multiple: true,
+		tabIndex: -1,
+		onChange: (event) => {
+			const files = event.target.files;
+			if (files?.length) onSelect(Array.from(files));
+		}
+	})] });
+};
+//#endregion
+export { AttachmentButton };
+
+//# sourceMappingURL=AttachmentButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentButton.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/AttachmentButton.tsx"],"sourcesContent":["import { type FC, useRef } from \"react\";\nimport { useVisuallyHidden } from \"react-aria\";\nimport { IconAttachment } from \"@/components/Icon/components/icons\";\nimport { ToolbarButton } from \"@/components/MarkdownEditor/components/ToolbarButton\";\n\n/** @internal */\nexport interface AttachmentButtonProps {\n  /** Which file types to offer, as an `accept` attribute value. */\n  accept?: string;\n  isDisabled?: boolean;\n  /** Called with the files the user picked. */\n  onSelect: (files: File[]) => void;\n}\n\n/**\n * The toolbar's file picker — the keyboard and pointer equivalent of dropping a\n * file onto the editor. A `ToolbarButton` like every other tool, plus the\n * hidden input it opens.\n *\n * @internal\n */\nexport const AttachmentButton: FC<AttachmentButtonProps> = (props) => {\n  const { accept, isDisabled, onSelect } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { visuallyHiddenProps } = useVisuallyHidden();\n\n  const handlePress = () => {\n    const input = inputRef.current;\n\n    if (!input) {\n      return;\n    }\n\n    /*\n     * Cleared first: an input that still holds the previous file fires no\n     * `change` when the same file is picked again.\n     */\n    input.value = \"\";\n    input.click();\n  };\n\n  return (\n    <>\n      <ToolbarButton\n        type=\"attachment\"\n        isDisabled={isDisabled}\n        onPress={handlePress}\n      >\n        <IconAttachment />\n      </ToolbarButton>\n\n      {/*\n       * A plain input rather than `FileField`'s `FileInput`: that one renders an\n       * `Aria.Input`, which reads the `InputContext` the surrounding TextArea's\n       * `Aria.TextField` provides and would be handed the editor's text as its\n       * value — which a file input rejects outright.\n       *\n       * `tabIndex={-1}` keeps the hidden input out of the tab order; the button\n       * in front of it is the focusable affordance.\n       */}\n      <input\n        {...visuallyHiddenProps}\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple\n        tabIndex={-1}\n        onChange={(event) => {\n          const files = event.target.files;\n\n          if (files?.length) {\n            onSelect(Array.from(files));\n          }\n        }}\n      />\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAa,oBAA+C,UAAU;CACpE,MAAM,EAAE,QAAQ,YAAY,aAAa;CAEzC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OACH;EAOF,MAAM,QAAQ;EACd,MAAM,MAAM;CACd;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EACE,MAAK;EACO;EACZ,SAAS;EAET,UAAA,oBAAC,gBAAD,CAAiB,CAAA;CACJ,CAAA,GAWf,oBAAC,SAAD;EACE,GAAI;EACJ,KAAK;EACL,MAAK;EACG;EACR,UAAA;EACA,UAAU;EACV,WAAW,UAAU;GACnB,MAAM,QAAQ,MAAM,OAAO;GAE3B,IAAI,OAAO,QACT,SAAS,MAAM,KAAK,KAAK,CAAC;EAE9B;CACD,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -12,14 +12,18 @@ import { UiComponentTunnelExit } from "../../UiComponentTunnel/UiComponentTunnel
 import MarkdownEditor_module_default from "../MarkdownEditor.module.mjs";
 import { ToolbarButton } from "./ToolbarButton.mjs";
 import { ModeButton } from "./ModeButton.mjs";
+import { AttachmentButton } from "./AttachmentButton.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MarkdownEditor/components/Toolbar.tsx
 var Toolbar = (props) => {
-	const sharedToolButtonProps = {
-		onPress: props.onToolPressed,
-		isDisabled: props.isDisabled || props.currentMode === "preview"
-	};
+	const isDisabled = props.isDisabled || props.currentMode === "preview";
+	/** The props of a tool that inserts markdown — all of them but the attachment. */
+	const insertTool = (type) => ({
+		type,
+		isDisabled,
+		onPress: () => props.onToolPressed(type)
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: MarkdownEditor_module_default.toolbar,
 		role: "toolbar",
@@ -27,45 +31,42 @@ var Toolbar = (props) => {
 			className: MarkdownEditor_module_default.toolbarButtons,
 			children: [
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "bold",
+					...insertTool("bold"),
 					children: /* @__PURE__ */ jsx(IconBold, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "italic",
+					...insertTool("italic"),
 					children: /* @__PURE__ */ jsx(IconItalic, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "strikeThrough",
+					...insertTool("strikeThrough"),
 					children: /* @__PURE__ */ jsx(IconStrikeThrough, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "quote",
+					...insertTool("quote"),
 					children: /* @__PURE__ */ jsx(IconQuote, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "code",
+					...insertTool("code"),
 					children: /* @__PURE__ */ jsx(IconCode, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "link",
+					...insertTool("link"),
 					children: /* @__PURE__ */ jsx(IconLink, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "unorderedList",
+					...insertTool("unorderedList"),
 					children: /* @__PURE__ */ jsx(IconUnorderedList, {})
 				}),
 				/* @__PURE__ */ jsx(ToolbarButton, {
-					...sharedToolButtonProps,
-					type: "orderedList",
+					...insertTool("orderedList"),
 					children: /* @__PURE__ */ jsx(IconOrderedList, {})
 				}),
+				props.onFilesSelected && /* @__PURE__ */ jsx(AttachmentButton, {
+					accept: props.accept,
+					isDisabled: isDisabled || props.isReadOnly,
+					onSelect: props.onFilesSelected
+				}),
 				/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 					id: "toolbarActions",
 					component: "MarkdownEditor"

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/Toolbar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport styles from \"@/components/MarkdownEditor/MarkdownEditor.module.scss\";\nimport {\n  IconBold,\n  IconCode,\n  IconItalic,\n  IconLink,\n  IconOrderedList,\n  IconQuote,\n  IconStrikeThrough,\n  IconUnorderedList,\n} from \"@/components/Icon/components/icons\";\nimport {\n  ToolbarButton,\n  type ToolBarButtonProps,\n} from \"@/components/MarkdownEditor/components/ToolbarButton\";\nimport {\n  ModeButton,\n  type ModeButtonProps,\n} from \"@/components/MarkdownEditor/components/ModeButton\";\nimport { type ButtonProps } from \"@/components/Button\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface ToolbarProps extends Pick<ButtonProps, \"isDisabled\"> {\n  currentMode: ModeButtonProps[\"currentMode\"];\n  onModeChange: ModeButtonProps[\"onChange\"];\n  onToolPressed: ToolBarButtonProps[\"onPress\"];\n}\n\nexport const Toolbar: FC<ToolbarProps> = (props) => {\n  const sharedToolButtonProps: Partial<ToolBarButtonProps> = {\n    onPress: props.onToolPressed,\n    isDisabled: props.isDisabled || props.currentMode === \"preview\",\n  };\n\n  return (\n    <div className={styles.toolbar} role=\"toolbar\">\n      <div className={styles.toolbarButtons}>\n        <ToolbarButton {...sharedToolButtonProps} type=\"bold\">\n          <IconBold />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"italic\">\n          <IconItalic />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"strikeThrough\">\n          <IconStrikeThrough />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"quote\">\n          <IconQuote />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"code\">\n          <IconCode />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"link\">\n          <IconLink />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"unorderedList\">\n          <IconUnorderedList />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"orderedList\">\n          <IconOrderedList />\n        </ToolbarButton>\n\n        <UiComponentTunnelExit id=\"toolbarActions\" component=\"MarkdownEditor\" />\n      </div>\n\n      <ModeButton\n        onChange={props.onModeChange}\n        currentMode={props.currentMode}\n        isDisabled={props.isDisabled ?? false}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,IAAa,WAA6B,UAAU;CAClD,MAAM,wBAAqD;EACzD,SAAS,MAAM;EACf,YAAY,MAAM,cAAc,MAAM,gBAAgB;CACxD;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,8BAAO;EAAS,MAAK;EAArC,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,8BAAO;GAAvB,UAAA;IACE,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,YAAD,CAAa,CAAA;IACA,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,mBAAD,CAAoB,CAAA;IACP,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACC,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,mBAAD,CAAoB,CAAA;IACP,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI;KAAuB,MAAK;KAC7C,UAAA,oBAAC,iBAAD,CAAkB,CAAA;IACL,CAAA;IAEf,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAkB,CAAA;GACpE;EAEL,CAAA,GAAA,oBAAC,YAAD;GACE,UAAU,MAAM;GAChB,aAAa,MAAM;GACnB,YAAY,MAAM,cAAc;EACjC,CAAA,CACE;;AAET"}
+{"version":3,"file":"Toolbar.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/Toolbar.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport styles from \"@/components/MarkdownEditor/MarkdownEditor.module.scss\";\nimport {\n  IconBold,\n  IconCode,\n  IconItalic,\n  IconLink,\n  IconOrderedList,\n  IconQuote,\n  IconStrikeThrough,\n  IconUnorderedList,\n} from \"@/components/Icon/components/icons\";\nimport {\n  ToolbarButton,\n  type ToolBarButtonProps,\n} from \"@/components/MarkdownEditor/components/ToolbarButton\";\nimport {\n  ModeButton,\n  type ModeButtonProps,\n} from \"@/components/MarkdownEditor/components/ModeButton\";\nimport { type ButtonProps } from \"@/components/Button\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { AttachmentButton } from \"@/components/MarkdownEditor/components/AttachmentButton\";\n\ninterface ToolbarProps extends Pick<ButtonProps, \"isDisabled\"> {\n  currentMode: ModeButtonProps[\"currentMode\"];\n  onModeChange: ModeButtonProps[\"onChange\"];\n  onToolPressed: (type: InsertType) => void;\n  /** Which file types the attachment button offers. */\n  accept?: string;\n  /** Renders the attachment button when set. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Disables the attachment button, which a read-only editor takes no files\n   * for.\n   */\n  isReadOnly?: boolean;\n}\n\nexport const Toolbar: FC<ToolbarProps> = (props) => {\n  const isDisabled = props.isDisabled || props.currentMode === \"preview\";\n\n  /** The props of a tool that inserts markdown — all of them but the attachment. */\n  const insertTool = (type: InsertType): ToolBarButtonProps => ({\n    type,\n    isDisabled,\n    onPress: () => props.onToolPressed(type),\n  });\n\n  return (\n    <div className={styles.toolbar} role=\"toolbar\">\n      <div className={styles.toolbarButtons}>\n        <ToolbarButton {...insertTool(\"bold\")}>\n          <IconBold />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"italic\")}>\n          <IconItalic />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"strikeThrough\")}>\n          <IconStrikeThrough />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"quote\")}>\n          <IconQuote />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"code\")}>\n          <IconCode />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"link\")}>\n          <IconLink />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"unorderedList\")}>\n          <IconUnorderedList />\n        </ToolbarButton>\n\n        <ToolbarButton {...insertTool(\"orderedList\")}>\n          <IconOrderedList />\n        </ToolbarButton>\n\n        {props.onFilesSelected && (\n          <AttachmentButton\n            accept={props.accept}\n            isDisabled={isDisabled || props.isReadOnly}\n            onSelect={props.onFilesSelected}\n          />\n        )}\n\n        <UiComponentTunnelExit id=\"toolbarActions\" component=\"MarkdownEditor\" />\n      </div>\n\n      <ModeButton\n        onChange={props.onModeChange}\n        currentMode={props.currentMode}\n        isDisabled={props.isDisabled ?? false}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwCA,IAAa,WAA6B,UAAU;CAClD,MAAM,aAAa,MAAM,cAAc,MAAM,gBAAgB;;CAG7D,MAAM,cAAc,UAA0C;EAC5D;EACA;EACA,eAAe,MAAM,cAAc,IAAI;CACzC;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,8BAAO;EAAS,MAAK;EAArC,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,8BAAO;GAAvB,UAAA;IACE,oBAAC,eAAD;KAAe,GAAI,WAAW,MAAM;KAClC,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,QAAQ;KACpC,UAAA,oBAAC,YAAD,CAAa,CAAA;IACA,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,eAAe;KAC3C,UAAA,oBAAC,mBAAD,CAAoB,CAAA;IACP,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,OAAO;KACnC,UAAA,oBAAC,WAAD,CAAY,CAAA;IACC,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,MAAM;KAClC,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,MAAM;KAClC,UAAA,oBAAC,UAAD,CAAW,CAAA;IACE,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,eAAe;KAC3C,UAAA,oBAAC,mBAAD,CAAoB,CAAA;IACP,CAAA;IAEf,oBAAC,eAAD;KAAe,GAAI,WAAW,aAAa;KACzC,UAAA,oBAAC,iBAAD,CAAkB,CAAA;IACL,CAAA;IAEd,MAAM,mBACL,oBAAC,kBAAD;KACE,QAAQ,MAAM;KACd,YAAY,cAAc,MAAM;KAChC,UAAU,MAAM;IACjB,CAAA;IAGH,oBAAC,uBAAD;KAAuB,IAAG;KAAiB,WAAU;IAAkB,CAAA;GACpE;EAEL,CAAA,GAAA,oBAAC,YAAD;GACE,UAAU,MAAM;GAChB,aAAa,MAAM;GACnB,YAAY,MAAM,cAAc;EACjC,CAAA,CACE;;AAET"}

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

@@ -17,7 +17,7 @@ var ToolbarButton = (props) => {
 		size: "s",
 		variant: "plain",
 		color: "dark",
-		onPress: () => onPress?.(type),
+		onPress,
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/ToolbarButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\n\nexport interface ToolBarButtonProps extends Pick<\n  ButtonProps,\n  \"isDisabled\" | \"children\"\n> {\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(\n    locales,\n    \"MarkdownEditor\",\n  );\n\n  return (\n    <Button\n      {...rest}\n      tunnel={null}\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"],"mappings":";;;;;;;;AAcA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,UAAU,MAAM,SAAS,GAAG,SAAS;CAE7C,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,QAAQ;EACR,oBAAkB;EAClB,cAAY,gBAAgB,OAAO,WAAW,MAAM;EACpD,MAAK;EACL,SAAQ;EACR,OAAM;EACN,eAAe,UAAU,IAAI;EAE5B;CACK,CAAA;AAEZ"}
+{"version":3,"file":"ToolbarButton.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/components/ToolbarButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\n\n/**\n * What a toolbar button is: every markdown syntax it inserts, plus the one tool\n * that does something else. The name is also the `toolbar.<type>` locale key of\n * the button's label.\n */\nexport type ToolbarButtonType = InsertType | \"attachment\";\n\nexport interface ToolBarButtonProps extends Pick<\n  ButtonProps,\n  \"isDisabled\" | \"children\"\n> {\n  type: ToolbarButtonType;\n  onPress?: () => void;\n}\n\nexport const ToolbarButton: FC<ToolBarButtonProps> = (props) => {\n  const { children, type, onPress, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"MarkdownEditor\",\n  );\n\n  return (\n    <Button\n      {...rest}\n      tunnel={null}\n      data-button-type={type}\n      aria-label={stringFormatter.format(`toolbar.${type}`)}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"dark\"\n      onPress={onPress}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;AAqBA,IAAa,iBAAyC,UAAU;CAC9D,MAAM,EAAE,UAAU,MAAM,SAAS,GAAG,SAAS;CAE7C,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,OACE,oBAAC,QAAD;EACE,GAAI;EACJ,QAAQ;EACR,oBAAkB;EAClB,cAAY,gBAAgB,OAAO,WAAW,MAAM;EACpD,MAAK;EACL,SAAQ;EACR,OAAM;EACG;EAER;CACK,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/MarkdownEditor/lib/fileUpload.mjs

@@ -0,0 +1,73 @@
+"use client"
+/* */
+//#region src/components/MarkdownEditor/lib/fileUpload.ts
+var escapeComment = (fileName) => fileName.replace(/-(?=-)/g, "- ");
+var escapeLinkLabel = (label) => label.replace(/[\\[\]]/g, "\\$&").replace(/\s+/g, " ").trim();
+var escapeLinkTarget = (url) => /[\s()]/.test(url) ? `<${url.replace(/[<>]/g, encodeURIComponent)}>` : url;
+/**
+* What sits at the cursor while a file uploads. An HTML comment, so it stays
+* out of the rendered preview and out of a message sent before the upload
+* finished — the same marker GitHub leaves behind.
+*
+* @internal
+*/
+var uploadPlaceholder = (fileName) => `<!-- Uploading "${escapeComment(fileName)}"... -->`;
+/**
+* The markdown a finished upload leaves behind: an embed for an image, a link
+* for everything else.
+*
+* @internal
+*/
+var uploadedFileMarkdown = (file, upload) => {
+	const link = `[${escapeLinkLabel(upload.name ?? file.name)}](${escapeLinkTarget(upload.url)})`;
+	return file.type.startsWith("image/") ? `!${link}` : link;
+};
+/**
+* Splices `insert` into `value` at `caret`, on a line of its own, and reports
+* where the cursor ends up.
+*
+* @internal
+*/
+var insertAtCaret = (value, insert, caret) => {
+	const before = value.slice(0, caret);
+	const after = value.slice(caret);
+	const inserted = `${before.length > 0 && !before.endsWith("\n") ? "\n" : ""}${insert}${after.startsWith("\n") ? "" : "\n"}`;
+	return {
+		value: `${before}${inserted}${after}`,
+		selectionStart: caret + inserted.length,
+		selectionEnd: caret + inserted.length
+	};
+};
+/**
+* Replaces the first occurrence of `search`, carrying the cursor along. Returns
+* `null` when the editor no longer contains it — the user deleted the
+* placeholder while the upload was running, and the result is dropped.
+*
+* @internal
+*/
+var replacePlaceholder = (value, search, replacement, selectionStart, selectionEnd) => {
+	const index = value.indexOf(search);
+	if (index === -1) return null;
+	const end = index + search.length;
+	const delta = replacement.length - search.length;
+	const shift = (position) => {
+		if (position <= index) return position;
+		return position >= end ? position + delta : index + replacement.length;
+	};
+	return {
+		value: value.slice(0, index) + replacement + value.slice(end),
+		selectionStart: shift(selectionStart),
+		selectionEnd: shift(selectionEnd)
+	};
+};
+/**
+* Takes a placeholder back out after a failed upload, including the line break
+* it was inserted with.
+*
+* @internal
+*/
+var removePlaceholder = (value, placeholder, selectionStart, selectionEnd) => replacePlaceholder(value, `${placeholder}\n`, "", selectionStart, selectionEnd) ?? replacePlaceholder(value, placeholder, "", selectionStart, selectionEnd);
+//#endregion
+export { insertAtCaret, removePlaceholder, replacePlaceholder, uploadPlaceholder, uploadedFileMarkdown };
+
+//# sourceMappingURL=fileUpload.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/fileUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileUpload.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/lib/fileUpload.ts"],"sourcesContent":["/**\n * The result of uploading a file dropped into, pasted into or selected in a\n * `MarkdownEditor`.\n */\nexport interface MarkdownEditorUpload {\n  /** The URL the uploaded file is available at. */\n  url: string;\n  /**\n   * The link text of the inserted markdown — the alt text for an image.\n   * Defaults to the name of the uploaded file.\n   */\n  name?: string;\n}\n\n/** A new editor value together with where the cursor ends up in it. */\nexport interface ValueEdit {\n  value: string;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\n/*\n * A file name that closes the comment early would leave the rest of it as\n * visible text. Every way to close one starts with `--`: `-->` does, `--!>`\n * does too, and dropping only `-->` can forge a new one — `a-->>b` collapses to\n * `a-->b`. Breaking up every `--` is what holds in all three.\n */\nconst escapeComment = (fileName: string) => fileName.replace(/-(?=-)/g, \"- \");\n\n/*\n * Brackets are what ends a markdown link label, and a line break ends the link\n * altogether. A file name may legally contain both.\n *\n * The backslash is escaped in the same pass, and has to be: escaping only the\n * brackets turns `a\\]b` into `a\\\\]b`, which markdown reads as an escaped\n * backslash followed by a bare `]` — the label ends right there.\n */\nconst escapeLinkLabel = (label: string) =>\n  label\n    .replace(/[\\\\[\\]]/g, \"\\\\$&\")\n    .replace(/\\s+/g, \" \")\n    .trim();\n\n/*\n * A bare link target ends at the first whitespace or unbalanced parenthesis.\n * Pointy brackets take a target that contains either — and are themselves the\n * only thing that cannot appear inside them.\n */\nconst escapeLinkTarget = (url: string) =>\n  /[\\s()]/.test(url) ? `<${url.replace(/[<>]/g, encodeURIComponent)}>` : url;\n\n/**\n * What sits at the cursor while a file uploads. An HTML comment, so it stays\n * out of the rendered preview and out of a message sent before the upload\n * finished — the same marker GitHub leaves behind.\n *\n * @internal\n */\nexport const uploadPlaceholder = (fileName: string): string =>\n  `<!-- Uploading \"${escapeComment(fileName)}\"... -->`;\n\n/**\n * The markdown a finished upload leaves behind: an embed for an image, a link\n * for everything else.\n *\n * @internal\n */\nexport const uploadedFileMarkdown = (\n  file: Pick<File, \"name\" | \"type\">,\n  upload: MarkdownEditorUpload,\n): string => {\n  const label = escapeLinkLabel(upload.name ?? file.name);\n  const target = escapeLinkTarget(upload.url);\n  const link = `[${label}](${target})`;\n\n  return file.type.startsWith(\"image/\") ? `!${link}` : link;\n};\n\n/**\n * Splices `insert` into `value` at `caret`, on a line of its own, and reports\n * where the cursor ends up.\n *\n * @internal\n */\nexport const insertAtCaret = (\n  value: string,\n  insert: string,\n  caret: number,\n): ValueEdit => {\n  const before = value.slice(0, caret);\n  const after = value.slice(caret);\n\n  const prefix = before.length > 0 && !before.endsWith(\"\\n\") ? \"\\n\" : \"\";\n  const suffix = after.startsWith(\"\\n\") ? \"\" : \"\\n\";\n  const inserted = `${prefix}${insert}${suffix}`;\n\n  return {\n    value: `${before}${inserted}${after}`,\n    selectionStart: caret + inserted.length,\n    selectionEnd: caret + inserted.length,\n  };\n};\n\n/**\n * Replaces the first occurrence of `search`, carrying the cursor along. Returns\n * `null` when the editor no longer contains it — the user deleted the\n * placeholder while the upload was running, and the result is dropped.\n *\n * @internal\n */\nexport const replacePlaceholder = (\n  value: string,\n  search: string,\n  replacement: string,\n  selectionStart: number,\n  selectionEnd: number,\n): ValueEdit | null => {\n  const index = value.indexOf(search);\n\n  if (index === -1) {\n    return null;\n  }\n\n  const end = index + search.length;\n  const delta = replacement.length - search.length;\n\n  /*\n   * A cursor before the placeholder does not move, one after it moves by the\n   * length difference, and one inside it — the user was typing where the file\n   * landed — comes to rest behind the replacement.\n   */\n  const shift = (position: number) => {\n    if (position <= index) {\n      return position;\n    }\n    return position >= end ? position + delta : index + replacement.length;\n  };\n\n  return {\n    value: value.slice(0, index) + replacement + value.slice(end),\n    selectionStart: shift(selectionStart),\n    selectionEnd: shift(selectionEnd),\n  };\n};\n\n/**\n * Takes a placeholder back out after a failed upload, including the line break\n * it was inserted with.\n *\n * @internal\n */\nexport const removePlaceholder = (\n  value: string,\n  placeholder: string,\n  selectionStart: number,\n  selectionEnd: number,\n): ValueEdit | null =>\n  replacePlaceholder(\n    value,\n    `${placeholder}\\n`,\n    \"\",\n    selectionStart,\n    selectionEnd,\n  ) ?? replacePlaceholder(value, placeholder, \"\", selectionStart, selectionEnd);\n"],"mappings":";;;AA2BA,IAAM,iBAAiB,aAAqB,SAAS,QAAQ,WAAW,IAAI;AAU5E,IAAM,mBAAmB,UACvB,MACG,QAAQ,YAAY,MAAM,CAAC,CAC3B,QAAQ,QAAQ,GAAG,CAAC,CACpB,KAAK;AAOV,IAAM,oBAAoB,QACxB,SAAS,KAAK,GAAG,IAAI,IAAI,IAAI,QAAQ,SAAS,kBAAkB,EAAE,KAAK;;;;;;;;AASzE,IAAa,qBAAqB,aAChC,mBAAmB,cAAc,QAAQ,EAAE;;;;;;;AAQ7C,IAAa,wBACX,MACA,WACW;CAGX,MAAM,OAAO,IAFC,gBAAgB,OAAO,QAAQ,KAAK,IAEjC,EAAM,IADR,iBAAiB,OAAO,GACZ,EAAO;CAElC,OAAO,KAAK,KAAK,WAAW,QAAQ,IAAI,IAAI,SAAS;AACvD;;;;;;;AAQA,IAAa,iBACX,OACA,QACA,UACc;CACd,MAAM,SAAS,MAAM,MAAM,GAAG,KAAK;CACnC,MAAM,QAAQ,MAAM,MAAM,KAAK;CAI/B,MAAM,WAAW,GAFF,OAAO,SAAS,KAAK,CAAC,OAAO,SAAS,IAAI,IAAI,OAAO,KAEvC,SADd,MAAM,WAAW,IAAI,IAAI,KAAK;CAG7C,OAAO;EACL,OAAO,GAAG,SAAS,WAAW;EAC9B,gBAAgB,QAAQ,SAAS;EACjC,cAAc,QAAQ,SAAS;CACjC;AACF;;;;;;;;AASA,IAAa,sBACX,OACA,QACA,aACA,gBACA,iBACqB;CACrB,MAAM,QAAQ,MAAM,QAAQ,MAAM;CAElC,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,MAAM,QAAQ,OAAO;CAC3B,MAAM,QAAQ,YAAY,SAAS,OAAO;CAO1C,MAAM,SAAS,aAAqB;EAClC,IAAI,YAAY,OACd,OAAO;EAET,OAAO,YAAY,MAAM,WAAW,QAAQ,QAAQ,YAAY;CAClE;CAEA,OAAO;EACL,OAAO,MAAM,MAAM,GAAG,KAAK,IAAI,cAAc,MAAM,MAAM,GAAG;EAC5D,gBAAgB,MAAM,cAAc;EACpC,cAAc,MAAM,YAAY;CAClC;AACF;;;;;;;AAQA,IAAa,qBACX,OACA,aACA,gBACA,iBAEA,mBACE,OACA,GAAG,YAAY,KACf,IACA,gBACA,YACF,KAAK,mBAAmB,OAAO,aAAa,IAAI,gBAAgB,YAAY"}

package/dist/js/packages/components/src/components/MarkdownEditor/lib/useFileUpload.mjs

@@ -0,0 +1,141 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { matchesAccept } from "../../../lib/files/acceptedFiles.mjs";
+import __locale_default from "../../../../../../_virtual/_24.locale.mjs";
+import { insertAtCaret, removePlaceholder, replacePlaceholder, uploadPlaceholder, uploadedFileMarkdown } from "./fileUpload.mjs";
+import { useEffect, useRef, useState } from "react";
+import { announce } from "@react-aria/live-announcer";
+//#region src/components/MarkdownEditor/lib/useFileUpload.ts
+/** The files of a paste or a drop that `accept` covers. */
+var acceptedFrom = (files, accept) => Array.from(files ?? []).filter((file) => matchesAccept(file, accept));
+/**
+* Drop, paste and toolbar uploads for the `MarkdownEditor`: a placeholder
+* comment goes to the cursor right away and is replaced by a markdown link once
+* the consumer's upload resolves.
+*
+* @internal
+*/
+var useFileUpload = (options) => {
+	const { accept, uploadFile, isDisabled, value, onChange, textAreaRef } = options;
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "MarkdownEditor");
+	const isEnabled = !!uploadFile && !isDisabled;
+	const valueRef = useRef(value);
+	useEffect(() => {
+		valueRef.current = value;
+	}, [value]);
+	const readValue = () => textAreaRef.current?.value ?? valueRef.current;
+	const wasFocusedRef = useRef(false);
+	useEffect(() => {
+		const textArea = textAreaRef.current;
+		if (!textArea) return;
+		const rememberFocus = () => {
+			wasFocusedRef.current = true;
+		};
+		textArea.addEventListener("focus", rememberFocus);
+		return () => textArea.removeEventListener("focus", rememberFocus);
+	}, [textAreaRef]);
+	const readSelection = () => {
+		const textArea = textAreaRef.current;
+		const fallback = readValue().length;
+		return {
+			start: textArea?.selectionStart ?? fallback,
+			end: textArea?.selectionEnd ?? fallback
+		};
+	};
+	const applyEdit = (edit) => {
+		valueRef.current = edit.value;
+		const textArea = textAreaRef.current;
+		if (textArea) {
+			textArea.value = edit.value;
+			requestAnimationFrame(() => {
+				textArea.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+			});
+		}
+		onChange(edit.value);
+	};
+	const runUpload = async (upload, file, placeholder) => {
+		announce(stringFormatter.format("upload.pending", { name: file.name }), "polite");
+		try {
+			const result = await upload(file);
+			const selection = readSelection();
+			const edit = replacePlaceholder(readValue(), placeholder, uploadedFileMarkdown(file, result), selection.start, selection.end);
+			if (edit) applyEdit(edit);
+			announce(stringFormatter.format("upload.succeeded", { name: file.name }), "polite");
+		} catch {
+			const selection = readSelection();
+			const edit = removePlaceholder(readValue(), placeholder, selection.start, selection.end);
+			if (edit) applyEdit(edit);
+			announce(stringFormatter.format("upload.failed", { name: file.name }), "assertive");
+		}
+	};
+	const uploadFiles = (files) => {
+		if (!uploadFile || files.length === 0) return;
+		const textArea = textAreaRef.current;
+		const caret = textArea && wasFocusedRef.current ? textArea.selectionStart : readValue().length;
+		const uploads = files.map((file) => ({
+			file,
+			placeholder: uploadPlaceholder(file.name)
+		}));
+		applyEdit(insertAtCaret(readValue(), uploads.map((upload) => upload.placeholder).join("\n"), caret));
+		textArea?.focus();
+		for (const upload of uploads) runUpload(uploadFile, upload.file, upload.placeholder);
+	};
+	const uploadFilesRef = useRef(uploadFiles);
+	uploadFilesRef.current = uploadFiles;
+	useEffect(() => {
+		const textArea = textAreaRef.current;
+		if (!textArea || !isEnabled) return;
+		const handlePaste = (event) => {
+			const files = acceptedFrom(event.clipboardData?.files, accept);
+			if (files.length === 0) return;
+			event.preventDefault();
+			uploadFilesRef.current(files);
+		};
+		textArea.addEventListener("paste", handlePaste);
+		return () => textArea.removeEventListener("paste", handlePaste);
+	}, [
+		isEnabled,
+		accept,
+		textAreaRef
+	]);
+	const dragHasFiles = (event) => event.dataTransfer.types.includes("Files");
+	const dragDepth = useRef(0);
+	const [isDropTarget, setIsDropTarget] = useState(false);
+	const endDrag = () => {
+		dragDepth.current = 0;
+		setIsDropTarget(false);
+	};
+	return {
+		dropProps: isEnabled ? {
+			onDragEnter: (event) => {
+				if (!dragHasFiles(event)) return;
+				event.preventDefault();
+				dragDepth.current += 1;
+				setIsDropTarget(true);
+			},
+			onDragOver: (event) => {
+				if (!dragHasFiles(event)) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "copy";
+			},
+			onDragLeave: (event) => {
+				if (!dragHasFiles(event)) return;
+				dragDepth.current = Math.max(0, dragDepth.current - 1);
+				if (dragDepth.current === 0) setIsDropTarget(false);
+			},
+			onDrop: (event) => {
+				if (!dragHasFiles(event)) return;
+				event.preventDefault();
+				endDrag();
+				uploadFilesRef.current(acceptedFrom(event.dataTransfer.files, accept));
+			}
+		} : {},
+		isDropTarget,
+		uploadFiles: uploadFile ? uploadFiles : void 0
+	};
+};
+//#endregion
+export { useFileUpload };
+
+//# sourceMappingURL=useFileUpload.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/useFileUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUpload.mjs","names":[],"sources":["../../../../../../../../src/components/MarkdownEditor/lib/useFileUpload.ts"],"sourcesContent":["import {\n  type DragEvent as ReactDragEvent,\n  type DragEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { matchesAccept } from \"@/lib/files/acceptedFiles\";\nimport {\n  insertAtCaret,\n  type MarkdownEditorUpload,\n  removePlaceholder,\n  replacePlaceholder,\n  uploadedFileMarkdown,\n  uploadPlaceholder,\n  type ValueEdit,\n} from \"@/components/MarkdownEditor/lib/fileUpload\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\n\n/** The files of a paste or a drop that `accept` covers. */\nconst acceptedFrom = (files: FileList | null | undefined, accept?: string) =>\n  Array.from(files ?? []).filter((file) => matchesAccept(file, accept));\n\n/** @internal */\nexport type MarkdownEditorFileUploadHandler = (\n  file: File,\n) => Promise<MarkdownEditorUpload>;\n\ninterface Options {\n  /** Which file types to take, as an `accept` attribute value. */\n  accept?: string;\n  /** Uploads one file. Uploading is off entirely while this is undefined. */\n  uploadFile?: MarkdownEditorFileUploadHandler;\n  /** Turns dropping, pasting and the toolbar button off. */\n  isDisabled?: boolean;\n  value: string;\n  onChange: (value: string) => void;\n  textAreaRef: RefObject<HTMLTextAreaElement | null>;\n}\n\ninterface DropProps {\n  onDragEnter?: DragEventHandler;\n  onDragOver?: DragEventHandler;\n  onDragLeave?: DragEventHandler;\n  onDrop?: DragEventHandler;\n}\n\ninterface FileUpload {\n  /** Drop handling for the editor's root element. */\n  dropProps: DropProps;\n  /** Whether a drag is currently over the editor. */\n  isDropTarget: boolean;\n  /**\n   * Uploads the files the toolbar button picked. `undefined` while uploading is\n   * off.\n   */\n  uploadFiles?: (files: File[]) => void;\n}\n\n/**\n * Drop, paste and toolbar uploads for the `MarkdownEditor`: a placeholder\n * comment goes to the cursor right away and is replaced by a markdown link once\n * the consumer's upload resolves.\n *\n * @internal\n */\nexport const useFileUpload = (options: Options): FileUpload => {\n  const { accept, uploadFile, isDisabled, value, onChange, textAreaRef } =\n    options;\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"MarkdownEditor\",\n  );\n\n  const isEnabled = !!uploadFile && !isDisabled;\n\n  /*\n   * An upload resolves long after the drop, and the editor has kept taking\n   * input in the meantime. The textarea's own value is the only one that is\n   * current by then — the `value` prop is a render old whenever two uploads\n   * resolve in the same tick.\n   */\n  const valueRef = useRef(value);\n  useEffect(() => {\n    valueRef.current = value;\n  }, [value]);\n\n  const readValue = () => textAreaRef.current?.value ?? valueRef.current;\n\n  /*\n   * A textarea keeps its `selectionStart` after losing focus, so the caret is\n   * still readable once the attachment button has taken the focus away. What it\n   * cannot tell apart is a caret at position 0 from one that was never placed —\n   * both read 0, and appending is the better answer for the second.\n   */\n  const wasFocusedRef = useRef(false);\n  useEffect(() => {\n    const textArea = textAreaRef.current;\n\n    if (!textArea) {\n      return;\n    }\n\n    const rememberFocus = () => {\n      wasFocusedRef.current = true;\n    };\n\n    textArea.addEventListener(\"focus\", rememberFocus);\n    return () => textArea.removeEventListener(\"focus\", rememberFocus);\n  }, [textAreaRef]);\n\n  const readSelection = () => {\n    const textArea = textAreaRef.current;\n    const fallback = readValue().length;\n    return {\n      start: textArea?.selectionStart ?? fallback,\n      end: textArea?.selectionEnd ?? fallback,\n    };\n  };\n\n  const applyEdit = (edit: ValueEdit) => {\n    valueRef.current = edit.value;\n\n    const textArea = textAreaRef.current;\n    if (textArea) {\n      /*\n       * Written before the re-render so an upload resolving in the same tick\n       * reads this one's result, and the selection restored after it, once\n       * React has rendered the controlled value.\n       */\n      textArea.value = edit.value;\n      requestAnimationFrame(() => {\n        textArea.setSelectionRange(edit.selectionStart, edit.selectionEnd);\n      });\n    }\n\n    onChange(edit.value);\n  };\n\n  const runUpload = async (\n    upload: MarkdownEditorFileUploadHandler,\n    file: File,\n    placeholder: string,\n  ) => {\n    announce(\n      stringFormatter.format(\"upload.pending\", { name: file.name }),\n      \"polite\",\n    );\n\n    try {\n      const result = await upload(file);\n      const selection = readSelection();\n      const edit = replacePlaceholder(\n        readValue(),\n        placeholder,\n        uploadedFileMarkdown(file, result),\n        selection.start,\n        selection.end,\n      );\n\n      if (edit) {\n        applyEdit(edit);\n      }\n\n      announce(\n        stringFormatter.format(\"upload.succeeded\", { name: file.name }),\n        \"polite\",\n      );\n    } catch {\n      const selection = readSelection();\n      const edit = removePlaceholder(\n        readValue(),\n        placeholder,\n        selection.start,\n        selection.end,\n      );\n\n      if (edit) {\n        applyEdit(edit);\n      }\n\n      announce(\n        stringFormatter.format(\"upload.failed\", { name: file.name }),\n        \"assertive\",\n      );\n    }\n  };\n\n  const uploadFiles = (files: File[]) => {\n    if (!uploadFile || files.length === 0) {\n      return;\n    }\n\n    const textArea = textAreaRef.current;\n    const caret =\n      textArea && wasFocusedRef.current\n        ? textArea.selectionStart\n        : readValue().length;\n\n    const uploads = files.map((file) => ({\n      file,\n      placeholder: uploadPlaceholder(file.name),\n    }));\n\n    applyEdit(\n      insertAtCaret(\n        readValue(),\n        uploads.map((upload) => upload.placeholder).join(\"\\n\"),\n        caret,\n      ),\n    );\n    textArea?.focus();\n\n    for (const upload of uploads) {\n      void runUpload(uploadFile, upload.file, upload.placeholder);\n    }\n  };\n\n  const uploadFilesRef = useRef(uploadFiles);\n  uploadFilesRef.current = uploadFiles;\n\n  /*\n   * The paste listener is attached imperatively rather than through react-aria's\n   * `useClipboard`, which calls `preventDefault` on every paste it sees and\n   * would take plain text pasting with it.\n   */\n  useEffect(() => {\n    const textArea = textAreaRef.current;\n\n    if (!textArea || !isEnabled) {\n      return;\n    }\n\n    const handlePaste = (event: ClipboardEvent) => {\n      const files = acceptedFrom(event.clipboardData?.files, accept);\n\n      if (files.length === 0) {\n        return;\n      }\n\n      event.preventDefault();\n      uploadFilesRef.current(files);\n    };\n\n    textArea.addEventListener(\"paste\", handlePaste);\n    return () => textArea.removeEventListener(\"paste\", handlePaste);\n  }, [isEnabled, accept, textAreaRef]);\n\n  /*\n   * Native handlers rather than react-aria's `useDrop`: that one claims every\n   * drag it sees — its `onDrop` calls `preventDefault` and `stopPropagation`\n   * unconditionally — which is right for a dedicated drop surface like\n   * `FileDropZone`, but here it would swallow a plain text drag into the\n   * textarea. A drag is claimed only when it carries files, and\n   * `dataTransfer.types` is the only place that says so: the public\n   * `DragTypes` of `getDropOperation` offers just `has(type)`, which cannot\n   * express it — the wildcard type is always true, and WebKit reports every\n   * file drag as an unknown type that answers true to anything.\n   */\n  const dragHasFiles = (event: ReactDragEvent) =>\n    event.dataTransfer.types.includes(\"Files\");\n\n  /*\n   * `dragenter` and `dragleave` fire again for every child the pointer\n   * crosses, so the highlight follows their balance rather than the last one.\n   */\n  const dragDepth = useRef(0);\n  const [isDropTarget, setIsDropTarget] = useState(false);\n\n  const endDrag = () => {\n    dragDepth.current = 0;\n    setIsDropTarget(false);\n  };\n\n  const dropProps: DropProps = isEnabled\n    ? {\n        onDragEnter: (event) => {\n          if (!dragHasFiles(event)) {\n            return;\n          }\n          event.preventDefault();\n          dragDepth.current += 1;\n          setIsDropTarget(true);\n        },\n        onDragOver: (event) => {\n          if (!dragHasFiles(event)) {\n            return;\n          }\n          // Without this the browser refuses the drop and opens the file instead.\n          event.preventDefault();\n          event.dataTransfer.dropEffect = \"copy\";\n        },\n        onDragLeave: (event) => {\n          if (!dragHasFiles(event)) {\n            return;\n          }\n          dragDepth.current = Math.max(0, dragDepth.current - 1);\n          if (dragDepth.current === 0) {\n            setIsDropTarget(false);\n          }\n        },\n        onDrop: (event) => {\n          if (!dragHasFiles(event)) {\n            return;\n          }\n          event.preventDefault();\n          endDrag();\n          uploadFilesRef.current(\n            acceptedFrom(event.dataTransfer.files, accept),\n          );\n        },\n      }\n    : {};\n\n  return {\n    dropProps,\n    isDropTarget,\n    uploadFiles: uploadFile ? uploadFiles : undefined,\n  };\n};\n"],"mappings":";;;;;;;;;;AAuBA,IAAM,gBAAgB,OAAoC,WACxD,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,SAAS,cAAc,MAAM,MAAM,CAAC;;;;;;;;AA6CtE,IAAa,iBAAiB,YAAiC;CAC7D,MAAM,EAAE,QAAQ,YAAY,YAAY,OAAO,UAAU,gBACvD;CAEF,MAAM,kBAAkB,4BACtB,kBACA,gBACF;CAEA,MAAM,YAAY,CAAC,CAAC,cAAc,CAAC;CAQnC,MAAM,WAAW,OAAO,KAAK;CAC7B,gBAAgB;EACd,SAAS,UAAU;CACrB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,kBAAkB,YAAY,SAAS,SAAS,SAAS;CAQ/D,MAAM,gBAAgB,OAAO,KAAK;CAClC,gBAAgB;EACd,MAAM,WAAW,YAAY;EAE7B,IAAI,CAAC,UACH;EAGF,MAAM,sBAAsB;GAC1B,cAAc,UAAU;EAC1B;EAEA,SAAS,iBAAiB,SAAS,aAAa;EAChD,aAAa,SAAS,oBAAoB,SAAS,aAAa;CAClE,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,sBAAsB;EAC1B,MAAM,WAAW,YAAY;EAC7B,MAAM,WAAW,UAAU,CAAC,CAAC;EAC7B,OAAO;GACL,OAAO,UAAU,kBAAkB;GACnC,KAAK,UAAU,gBAAgB;EACjC;CACF;CAEA,MAAM,aAAa,SAAoB;EACrC,SAAS,UAAU,KAAK;EAExB,MAAM,WAAW,YAAY;EAC7B,IAAI,UAAU;GAMZ,SAAS,QAAQ,KAAK;GACtB,4BAA4B;IAC1B,SAAS,kBAAkB,KAAK,gBAAgB,KAAK,YAAY;GACnE,CAAC;EACH;EAEA,SAAS,KAAK,KAAK;CACrB;CAEA,MAAM,YAAY,OAChB,QACA,MACA,gBACG;EACH,SACE,gBAAgB,OAAO,kBAAkB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC5D,QACF;EAEA,IAAI;GACF,MAAM,SAAS,MAAM,OAAO,IAAI;GAChC,MAAM,YAAY,cAAc;GAChC,MAAM,OAAO,mBACX,UAAU,GACV,aACA,qBAAqB,MAAM,MAAM,GACjC,UAAU,OACV,UAAU,GACZ;GAEA,IAAI,MACF,UAAU,IAAI;GAGhB,SACE,gBAAgB,OAAO,oBAAoB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC9D,QACF;EACF,QAAQ;GACN,MAAM,YAAY,cAAc;GAChC,MAAM,OAAO,kBACX,UAAU,GACV,aACA,UAAU,OACV,UAAU,GACZ;GAEA,IAAI,MACF,UAAU,IAAI;GAGhB,SACE,gBAAgB,OAAO,iBAAiB,EAAE,MAAM,KAAK,KAAK,CAAC,GAC3D,WACF;EACF;CACF;CAEA,MAAM,eAAe,UAAkB;EACrC,IAAI,CAAC,cAAc,MAAM,WAAW,GAClC;EAGF,MAAM,WAAW,YAAY;EAC7B,MAAM,QACJ,YAAY,cAAc,UACtB,SAAS,iBACT,UAAU,CAAC,CAAC;EAElB,MAAM,UAAU,MAAM,KAAK,UAAU;GACnC;GACA,aAAa,kBAAkB,KAAK,IAAI;EAC1C,EAAE;EAEF,UACE,cACE,UAAU,GACV,QAAQ,KAAK,WAAW,OAAO,WAAW,CAAC,CAAC,KAAK,IAAI,GACrD,KACF,CACF;EACA,UAAU,MAAM;EAEhB,KAAK,MAAM,UAAU,SACnB,UAAe,YAAY,OAAO,MAAM,OAAO,WAAW;CAE9D;CAEA,MAAM,iBAAiB,OAAO,WAAW;CACzC,eAAe,UAAU;CAOzB,gBAAgB;EACd,MAAM,WAAW,YAAY;EAE7B,IAAI,CAAC,YAAY,CAAC,WAChB;EAGF,MAAM,eAAe,UAA0B;GAC7C,MAAM,QAAQ,aAAa,MAAM,eAAe,OAAO,MAAM;GAE7D,IAAI,MAAM,WAAW,GACnB;GAGF,MAAM,eAAe;GACrB,eAAe,QAAQ,KAAK;EAC9B;EAEA,SAAS,iBAAiB,SAAS,WAAW;EAC9C,aAAa,SAAS,oBAAoB,SAAS,WAAW;CAChE,GAAG;EAAC;EAAW;EAAQ;CAAW,CAAC;CAanC,MAAM,gBAAgB,UACpB,MAAM,aAAa,MAAM,SAAS,OAAO;CAM3C,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,MAAM,gBAAgB;EACpB,UAAU,UAAU;EACpB,gBAAgB,KAAK;CACvB;CA0CA,OAAO;EACL,WAzC2B,YACzB;GACE,cAAc,UAAU;IACtB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,MAAM,eAAe;IACrB,UAAU,WAAW;IACrB,gBAAgB,IAAI;GACtB;GACA,aAAa,UAAU;IACrB,IAAI,CAAC,aAAa,KAAK,GACrB;IAGF,MAAM,eAAe;IACrB,MAAM,aAAa,aAAa;GAClC;GACA,cAAc,UAAU;IACtB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,UAAU,UAAU,KAAK,IAAI,GAAG,UAAU,UAAU,CAAC;IACrD,IAAI,UAAU,YAAY,GACxB,gBAAgB,KAAK;GAEzB;GACA,SAAS,UAAU;IACjB,IAAI,CAAC,aAAa,KAAK,GACrB;IAEF,MAAM,eAAe;IACrB,QAAQ;IACR,eAAe,QACb,aAAa,MAAM,aAAa,OAAO,MAAM,CAC/C;GACF;EACF,IACA,CAAC;EAIH;EACA,aAAa,aAAa,cAAc,KAAA;CAC1C;AACF"}

package/dist/js/packages/components/src/components/Modal/Modal.mjs

@@ -86,14 +86,16 @@ var Modal = flowComponent("Modal", (props) => {
 					};
 				}),
 				closeOverlay: dynamic((props) => {
-					if (props.closeOverlay === void 0) return;
-					if (props.closeOverlay instanceof OverlayController || typeof props.closeOverlay === "string") return {
+					const { closeOverlay } = props;
+					if (closeOverlay === void 0 || closeOverlay === false) return closeOverlay;
+					if (closeOverlay === true) return { bypassConfirmation: true };
+					if (closeOverlay instanceof OverlayController || typeof closeOverlay === "string") return {
 						bypassConfirmation: true,
-						overlay: props.closeOverlay
+						overlay: closeOverlay
 					};
 					return {
 						bypassConfirmation: true,
-						...props.closeOverlay
+						...closeOverlay
 					};
 				})
 			}