@mittwald/flow-react-components 1.3.0-next.23 → 1.3.0-next.24

package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts

@@ -1,13 +1,33 @@
 import { ComponentType } from 'react';
 import { MarkdownProps } from '../Markdown';
 import { TextAreaProps } from '../TextArea';
+import { MarkdownEditorUpload } from './lib/fileUpload';
 export type MarkdownEditorMode = "editor" | "preview";
+export type { MarkdownEditorUpload };
 export interface MarkdownEditorProps extends TextAreaProps, Pick<MarkdownProps, "headingOffset"> {
     /**
      * Allows replacing the markdown preview renderer implementation. Defaults to
      * the internal `Markdown` component.
      */
     markdownComponent?: ComponentType<MarkdownProps>;
+    /**
+     * Uploads a file the user dropped onto the editor, pasted into it or picked
+     * with its attachment button. A placeholder comment sits at the cursor while
+     * the returned promise is pending: resolving replaces it with markdown
+     * linking to the file — an image embed for an image — and rejecting takes it
+     * back out. Without this prop the editor takes no files at all.
+     *
+     * Named without an `on` prefix on purpose: the remote generator turns an
+     * `on*` prop into a fire-and-forget event, and this one has to hand a result
+     * back.
+     */
+    uploadFile?: (file: File) => Promise<MarkdownEditorUpload>;
+    /**
+     * Which file types the editor takes, as the `accept` attribute of a file
+     * input: a comma separated list of MIME types (`image/png`), MIME wildcards
+     * (`image/*`) and file extensions (`.png`). Defaults to every type.
+     */
+    accept?: string;
 }
 /** @flr-generate all */
 export declare const MarkdownEditor: import('react').FunctionComponent<MarkdownEditorProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/types/components/MarkdownEditor/components/AttachmentButton.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/MarkdownEditor/components/Toolbar.d.ts

@@ -1,11 +1,20 @@
 import { FC } from 'react';
-import { ToolBarButtonProps } from './ToolbarButton';
 import { ModeButtonProps } from './ModeButton';
 import { ButtonProps } from '../../Button';
+import { InsertType } from '../lib/modifyValueByType';
 interface ToolbarProps extends Pick<ButtonProps, "isDisabled"> {
     currentMode: ModeButtonProps["currentMode"];
     onModeChange: ModeButtonProps["onChange"];
-    onToolPressed: ToolBarButtonProps["onPress"];
+    onToolPressed: (type: InsertType) => void;
+    /** Which file types the attachment button offers. */
+    accept?: string;
+    /** Renders the attachment button when set. */
+    onFilesSelected?: (files: File[]) => void;
+    /**
+     * Disables the attachment button, which a read-only editor takes no files
+     * for.
+     */
+    isReadOnly?: boolean;
 }
 export declare const Toolbar: FC<ToolbarProps>;
 export {};

package/dist/types/components/MarkdownEditor/components/ToolbarButton.d.ts

@@ -1,8 +1,14 @@
 import { FC } from 'react';
 import { InsertType } from '../lib/modifyValueByType';
 import { ButtonProps } from '../../Button';
+/**
+ * What a toolbar button is: every markdown syntax it inserts, plus the one tool
+ * that does something else. The name is also the `toolbar.<type>` locale key of
+ * the button's label.
+ */
+export type ToolbarButtonType = InsertType | "attachment";
 export interface ToolBarButtonProps extends Pick<ButtonProps, "isDisabled" | "children"> {
-    type: InsertType;
-    onPress?: (type: InsertType) => void;
+    type: ToolbarButtonType;
+    onPress?: () => void;
 }
 export declare const ToolbarButton: FC<ToolBarButtonProps>;

package/dist/types/components/MarkdownEditor/index.d.ts

@@ -1,2 +1,2 @@
-export { type MarkdownEditorProps, MarkdownEditor } from './MarkdownEditor';
+export { type MarkdownEditorProps, type MarkdownEditorUpload, MarkdownEditor, } from './MarkdownEditor';
 export { default } from './MarkdownEditor';

package/dist/types/components/MarkdownEditor/lib/fileUpload.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The result of uploading a file dropped into, pasted into or selected in a
+ * `MarkdownEditor`.
+ */
+export interface MarkdownEditorUpload {
+    /** The URL the uploaded file is available at. */
+    url: string;
+    /**
+     * The link text of the inserted markdown — the alt text for an image.
+     * Defaults to the name of the uploaded file.
+     */
+    name?: string;
+}
+/** A new editor value together with where the cursor ends up in it. */
+export interface ValueEdit {
+    value: string;
+    selectionStart: number;
+    selectionEnd: number;
+}

package/dist/types/components/MarkdownEditor/lib/useFileUpload.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.3.0-next.23",
+  "version": "1.3.0-next.24",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.3.0-next.23",
+    "@mittwald/flow-icons": "^1.3.0-next.24",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.3.0-next.23",
+    "@mittwald/react-tunnel": "^1.3.0-next.24",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.3.0-next.23",
-    "@mittwald/flow-design-tokens": "1.3.0-next.23",
-    "@mittwald/flow-icons-base": "1.3.0-next.23",
+    "@mittwald/flow-core": "1.3.0-next.24",
+    "@mittwald/flow-design-tokens": "1.3.0-next.24",
+    "@mittwald/flow-icons-base": "1.3.0-next.24",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.3.0-next.23",
+    "@mittwald/typescript-config": "1.3.0-next.24",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.3.0-next.23",
+    "@mittwald/flow-icons-pro": "1.3.0-next.24",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "b84c26db5a41b973c9a130728764b42312bee16d"
+  "gitHead": "f086d24ab9c6ffb1c639ce5552e090d075d87a9e"
 }