@kystverket/styrbord 1.8.2 → 1.8.4

package/dist/src/components/kystverket/MarkdownToReact/markdownToReact.d.ts

@@ -1,10 +1,13 @@
+import { MaybePromise } from '~/utils/utility.types';
+type ResolvedImageRefs = Record<string, ResolvedImageRef>;
 export type MarkdownToReactProps = {
     markdown: string;
-    resolveImageRef?: (ref: string) => ResolvedImageRef;
+    /** Optional sync/async resolver that receives all refs found in markdown. */
+    resolveImageRefs?: (refs?: string[]) => MaybePromise<ResolvedImageRefs>;
 };
 export type ResolvedImageRef = {
     src: string;
     alt?: string;
-} | undefined;
-declare const MarkdownToReact: ({ markdown, resolveImageRef }: MarkdownToReactProps) => React.JSX.Element;
+} | string | null | undefined;
+declare const MarkdownToReact: ({ markdown, resolveImageRefs }: MarkdownToReactProps) => React.JSX.Element;
 export default MarkdownToReact;

package/dist/src/components/kystverket/MarkdownToReact/markdownToReact.stories.d.ts

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ markdown, resolveImageRef }: import("./markdownToReact").MarkdownToReactProps) => React.JSX.Element;
+    component: ({ markdown, resolveImageRefs }: import("./markdownToReact").MarkdownToReactProps) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];
     argTypes: {

package/dist/src/components/kystverket/RichTextArea/hooks/useRichTextImagePicker.d.ts

@@ -0,0 +1,23 @@
+import type { Editor } from '@milkdown/core';
+type UseRichTextImagePickerParams = {
+    disabled: boolean;
+    loading: boolean;
+    canUploadImage: boolean;
+    isUploadingImage: boolean;
+    get: () => Editor | undefined;
+    pendingImageSelectionRef: React.RefObject<{
+        from: number;
+        to: number;
+    } | null>;
+    onImageFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<{
+        success: boolean;
+    }>;
+};
+type UseRichTextImagePickerReturn = {
+    imageInputRef: React.RefObject<HTMLInputElement | null>;
+    imageUploadError: string | undefined;
+    openImageFilePicker: () => void;
+    handleImageFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
+};
+export declare const useRichTextImagePicker: ({ disabled, loading, canUploadImage, isUploadingImage, get, pendingImageSelectionRef, onImageFileInputChange, }: UseRichTextImagePickerParams) => UseRichTextImagePickerReturn;
+export {};

package/dist/src/components/kystverket/RichTextArea/hooks/useRichTextImageUpload.d.ts

@@ -8,6 +8,10 @@ type UseRichTextImageUploadParams = {
     updateToolbarState: (ctx: Ctx) => void;
     latestOnUploadRef: React.RefObject<UploadImageFn | undefined> | undefined;
     sasToRefMap: React.RefObject<Map<string, string>>;
+    pendingImageSelectionRef: React.RefObject<{
+        from: number;
+        to: number;
+    } | null>;
 };
 type UseRichTextImageUploadReturn = {
     isUploadingImage: boolean;
@@ -17,5 +21,5 @@ type UseRichTextImageUploadReturn = {
         success: boolean;
     }>;
 };
-export declare const useRichTextImageUpload: ({ disabled, get, updateToolbarState, latestOnUploadRef, sasToRefMap, }: UseRichTextImageUploadParams) => UseRichTextImageUploadReturn;
+export declare const useRichTextImageUpload: ({ disabled, get, updateToolbarState, latestOnUploadRef, sasToRefMap, pendingImageSelectionRef, }: UseRichTextImageUploadParams) => UseRichTextImageUploadReturn;
 export {};

package/dist/src/components/kystverket/RichTextArea/richTextArea.editorFactory.d.ts

@@ -0,0 +1,15 @@
+import { Editor } from '@milkdown/core';
+import type { InlineImageConfig } from '@milkdown/components/image-inline';
+import type { Ctx } from '@milkdown/ctx';
+type CreateRichTextAreaEditorParams = {
+    root: HTMLElement;
+    disabled: boolean;
+    editorMarkdown: string;
+    canUploadImage: boolean;
+    dispatchImageFromFile: (file: File) => void;
+    updateInlineImageConfig: (config: InlineImageConfig) => InlineImageConfig;
+    updateToolbarState: (ctx: Ctx) => void;
+    onMarkdownUpdated: (ctx: Ctx, markdown: string) => void;
+};
+export declare const createRichTextAreaEditor: ({ root, disabled, editorMarkdown, canUploadImage, dispatchImageFromFile, updateInlineImageConfig, updateToolbarState, onMarkdownUpdated, }: CreateRichTextAreaEditorParams) => Editor;
+export {};

package/dist/src/components/kystverket/RichTextArea/richTextArea.stories.d.ts

@@ -14,11 +14,14 @@ export declare const WithError: Story;
 /**
  * Demonstrates stable image references in markdown.
  *
- * `onUpload` returns both:
+ * `onImageUpload` returns both:
  * - `src` — a data URL used by the editor to display the image immediately
- * - `ref` — a stable opaque ID (e.g. Azure blob path / UUID) stored in the markdown instead of the SAS URL
+ * - `ref` — a stable opaque ID (e.g. Azure blob path / UUID) stored in the markdown instead of the SAS URL.
+ *
+ * `onImageRemove` is called with the stable ref when an image is removed from the editor,
+ * so a backend can delete the persisted image resource.
  *
  * The `onChange` output will contain `![alt](image://uuid-...)` rather than the raw data URL,
- * which is what a `MarkdownToReact` or similar renderers would receive where you implement a resolver function to provide a SAS URI or similar.
+ * and a `MarkdownToReact` resolver can map that ref to a displayable URL.
  */
 export declare const WithImageRef: Story;

package/dist/src/components/kystverket/RichTextArea/richTextArea.types.d.ts

@@ -1,8 +1,8 @@
 import type { CmdKey } from '@milkdown/core';
+import { MaybePromise } from '~/utils/utility.types';
 export type RichTextAreaProps = {
     value: string | null | undefined;
     onChange: (markdown: string) => void;
-    onUpload?: UploadImageFn;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
@@ -11,6 +11,12 @@ export type RichTextAreaProps = {
     optional?: boolean | string;
     required?: boolean | string;
     error?: string;
+    /** Optional upload handler that returns a display src and optional stable image ref. */
+    onImageUpload?: (file: File) => Promise<ImageUploadResult | null>;
+    /** Optional remove handler for deleting persisted images by stable ref. */
+    onImageRemove?: (ref: string) => Promise<void>;
+    /** Optional resolver that maps image refs in markdown to renderable image sources. */
+    resolveImageRefs?: (refs?: string[]) => MaybePromise<Record<string, ResolvedImageRef>>;
 };
 export type ToolbarCommand<T = unknown> = {
     key: CmdKey<T>;
@@ -19,13 +25,12 @@ export type ToolbarCommand<T = unknown> = {
 export type ImageMarkdown = {
     src: string;
     alt?: string;
-    title?: string;
 };
+export type ResolvedImageRef = ImageMarkdown | undefined;
 export type ImageUploadResult = {
     src: string;
     ref?: string;
     alt?: string;
-    title?: string;
 };
 export type ImageInsertHandler = (file: File) => void;
 export type UploadImageFn = (file: File) => Promise<ImageUploadResult | string | null>;

package/dist/src/components/kystverket/RichTextArea/utils/ImageRefUtils.d.ts

@@ -0,0 +1,9 @@
+import { MaybePromise } from '~/utils/utility.types';
+type ResolvedImageRef = {
+    src: string;
+    alt?: string;
+} | string | null | undefined;
+export declare const getImageRefsFromMarkdown: (markdown: string) => string[];
+export declare const convertFromRefToImage: (markdown: string, resolveImageRefs: (refs: string[]) => MaybePromise<Record<string, ResolvedImageRef>>, urlToRefMap?: Map<string, string>, previousRefToUrlMap?: Map<string, string>) => Promise<string>;
+export declare const replaceImageUrlsWithRefs: (markdown: string, sasToRefMap: Map<string, string>) => string;
+export {};

package/dist/src/components/kystverket/RichTextArea/utils/linkUtils.d.ts

@@ -1,6 +1,5 @@
 import type { EditorState } from '@milkdown/prose/state';
 export declare const normalizeHref: (rawHref: string) => string;
-export declare const replaceUrlsWithRefs: (markdown: string, sasToRefMap: Map<string, string>) => string;
 export declare const getSelectionLinkRange: (state: EditorState) => {
     from: number;
     to: number;

package/dist/src/utils/utility.types.d.ts

@@ -0,0 +1 @@
+export type MaybePromise<T> = T | Promise<T>;