@kystverket/styrbord 1.7.1 → 1.7.3

package/README.md

@@ -41,6 +41,10 @@ Styrbords design tokens hentes fra [@Kystverket/styrbord-tokens](https://github.
 
 ## Endringslogg
 
+### 2026-05-22 -- v1.7.2
+
+Lagt inn bildehåndtering i RichTextArea og MarkdownToReact. Du laster opp bildet selv og legger inn en referanse-lenke i markdownen. Lenken tolkes i MarkdownToReact, slik at markdownen holdes så liten som mulig.
+
 ### 2026-05-19 -- v1.7.0
 
 Etter mange problemer med implementasjon og styling av en DatePicker har vi gått til en native datepicker. Noen attributter på datepicker er ikke lenger nødvendige eller tilgjengelige.
@@ -148,17 +152,3 @@ Arbeid for å gjøre Styrbord mindre forskjellig fra Designsystemet. Dette gjør
 - Tillater ikke lenger å sende en boolsk verdi til error attributter i input-komponenter.
 
 Komponentene `<Button>`, `<Tabs>`, `<Select>`, `<NumberInput>`, `<TextInput>` og `<TextArea>` overskriver fortsatt noen Designsystem-komponenter med mer eller mindre inkompatible interface.
-
-### 2025-06-17
-
-Vi har fjernet alle egne tittelkomponenter og henviser istedet til Designsystemets `Heading`-komponent.
-
-- `Display size="lg"` ➡️ `Heading data-size="2xl"`
-- `Display size="md"` ➡️ `Heading data-size="xl"`
-- `Display size="sm"` ➡️ `Heading data-size="lg"`
-- `Headline size="lg"` ➡️ `Heading data-size="md"`
-- `Headline size="md"` ➡️ `Heading data-size="sm"`
-- `Headline size="sm"` ➡️ `Heading data-size="xs"`
-- `Title size="lg"` ➡️ `Heading data-size="sm"`
-- `Title size="md"` ➡️ `Heading data-size="xs"`
-- `Title size="sm"` ➡️ `Heading data-size="2xs"`

package/dist/src/components/designsystemet/Suggestion/Suggestion.d.ts

@@ -0,0 +1,17 @@
+import { EXPERIMENTAL_Suggestion as DsSuggestion, type SuggestionProps as DsSuggestionProps } from '@digdir/designsystemet-react';
+export type SuggestionProps = {
+    label?: string;
+    required?: boolean | string;
+    optional?: boolean | string;
+    error?: string;
+} & DsSuggestionProps;
+declare function SuggestionRoot({ children, label, className, required, optional, error, ...props }: SuggestionProps): React.JSX.Element;
+type SuggestionComponent = typeof SuggestionRoot & {
+    Clear: typeof DsSuggestion.Clear;
+    Empty: typeof DsSuggestion.Empty;
+    Input: typeof DsSuggestion.Input;
+    List: typeof DsSuggestion.List;
+    Option: typeof DsSuggestion.Option;
+};
+export declare const Suggestion: SuggestionComponent;
+export {};

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

@@ -1,5 +1,10 @@
 export type MarkdownToReactProps = {
     markdown: string;
+    resolveImageRef?: (ref: string) => ResolvedImageRef;
 };
-declare const MarkdownToReact: ({ markdown }: MarkdownToReactProps) => React.JSX.Element;
+export type ResolvedImageRef = {
+    src: string;
+    alt?: string;
+} | undefined;
+declare const MarkdownToReact: ({ markdown, resolveImageRef }: 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 }: import("./markdownToReact").MarkdownToReactProps) => React.JSX.Element;
+    component: ({ markdown, resolveImageRef }: 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: {
@@ -19,3 +19,4 @@ export declare const Lists: Story;
 export declare const CodeBlock: Story;
 export declare const Links: Story;
 export declare const Combined: Story;
+export declare const ResolveImageRefExample: Story;

package/dist/src/components/kystverket/RichTextArea/components/Toolbar/toolbar.d.ts

@@ -7,6 +7,7 @@ type ToolbarProps = {
     isBulletListActive: boolean;
     isOrderedListActive: boolean;
     isLinkActive: boolean;
+    canUploadImage?: boolean;
     selectedFormat: BlockType;
     linkPopoverTarget?: string;
     onBold: () => void;
@@ -17,6 +18,7 @@ type ToolbarProps = {
     onRedo: () => void;
     onFormatChange: (format: BlockType) => void;
     onLink: () => void;
+    onImageUpload?: () => void;
 };
-export declare const Toolbar: ({ disabled, isBoldActive, isItalicActive, isBulletListActive, isOrderedListActive, isLinkActive, selectedFormat, linkPopoverTarget, onBulletList, onOrderedList, onBold, onItalic, onUndo, onRedo, onFormatChange, onLink, }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ disabled, isBoldActive, isItalicActive, isBulletListActive, isOrderedListActive, isLinkActive, canUploadImage, selectedFormat, linkPopoverTarget, onBulletList, onOrderedList, onBold, onItalic, onUndo, onRedo, onFormatChange, onLink, onImageUpload, }: ToolbarProps) => React.JSX.Element;
 export {};

package/dist/src/components/kystverket/RichTextArea/components/Toolbar/toolbar.stories.d.ts

@@ -2,13 +2,14 @@ import type { StoryObj } from '@storybook/react-vite';
 import { type BlockType } from './toolbar';
 declare const meta: {
     title: string;
-    component: ({ disabled, isBoldActive, isItalicActive, isBulletListActive, isOrderedListActive, isLinkActive, selectedFormat, linkPopoverTarget, onBulletList, onOrderedList, onBold, onItalic, onUndo, onRedo, onFormatChange, onLink, }: {
+    component: ({ disabled, isBoldActive, isItalicActive, isBulletListActive, isOrderedListActive, isLinkActive, canUploadImage, selectedFormat, linkPopoverTarget, onBulletList, onOrderedList, onBold, onItalic, onUndo, onRedo, onFormatChange, onLink, onImageUpload, }: {
         disabled?: boolean;
         isBoldActive: boolean;
         isItalicActive: boolean;
         isBulletListActive: boolean;
         isOrderedListActive: boolean;
         isLinkActive: boolean;
+        canUploadImage?: boolean;
         selectedFormat: BlockType;
         linkPopoverTarget?: string;
         onBold: () => void;
@@ -19,6 +20,7 @@ declare const meta: {
         onRedo: () => void;
         onFormatChange: (format: BlockType) => void;
         onLink: () => void;
+        onImageUpload?: () => void;
     }) => React.JSX.Element;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn, context: import("storybook/internal/csf").StoryContext) => React.JSX.Element)[];
     tags: string[];

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

@@ -0,0 +1,22 @@
+import type { Editor } from '@milkdown/core';
+import type { Ctx } from '@milkdown/ctx';
+import type { ToolbarCommand } from '../richTextArea.types';
+import type { BlockType } from '../components/Toolbar/toolbar';
+type UseRichTextCommandsParams = {
+    disabled: boolean;
+    get: () => Editor | undefined;
+    updateToolbarState: (ctx: Ctx) => void;
+};
+type UseRichTextCommandsReturn = {
+    executeInEditor: (fn: (ctx: Ctx) => void) => void;
+    runCommand: <T>(command: ToolbarCommand<T>) => void;
+    runCommands: (commandsToRun: ToolbarCommand<unknown>[]) => void;
+    toggleList: (params: {
+        isTargetListActive: boolean;
+        isOtherListActive: boolean;
+        wrapCommand: ToolbarCommand<unknown>;
+    }) => void;
+    handleFormatChange: (format: BlockType) => void;
+};
+export declare const useRichTextCommands: ({ disabled, get, updateToolbarState, }: UseRichTextCommandsParams) => UseRichTextCommandsReturn;
+export { toggleStrongCommand, toggleEmphasisCommand, wrapInBulletListCommand, wrapInOrderedListCommand, } from '@milkdown/preset-commonmark';

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

@@ -0,0 +1,21 @@
+import type { Editor } from '@milkdown/core';
+import type { Ctx } from '@milkdown/ctx';
+import type { InlineImageConfig } from '@milkdown/components/image-inline';
+import type { UploadImageFn } from '../richTextArea.types';
+type UseRichTextImageUploadParams = {
+    disabled: boolean;
+    get: () => Editor | undefined;
+    updateToolbarState: (ctx: Ctx) => void;
+    latestOnUploadRef: React.RefObject<UploadImageFn | undefined> | undefined;
+    sasToRefMap: React.RefObject<Map<string, string>>;
+};
+type UseRichTextImageUploadReturn = {
+    isUploadingImage: boolean;
+    inlineImageConfig: (config: InlineImageConfig) => InlineImageConfig;
+    insertImageFromFile: (file: File) => void;
+    handleImageFileInputChange: (event: React.ChangeEvent<HTMLInputElement>) => Promise<{
+        success: boolean;
+    }>;
+};
+export declare const useRichTextImageUpload: ({ disabled, get, updateToolbarState, latestOnUploadRef, sasToRefMap, }: UseRichTextImageUploadParams) => UseRichTextImageUploadReturn;
+export {};

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

@@ -1,14 +1,4 @@
 import '@milkdown/prose/view/style/prosemirror.css';
-export type RichTextAreaProps = {
-    value: string | null | undefined;
-    onChange: (markdown: string) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    label?: string;
-    description?: string | React.ReactNode;
-    optional?: boolean | string | undefined;
-    required?: boolean | string | undefined;
-    error?: string;
-};
+import type { RichTextAreaProps } from './richTextArea.types';
+export type { RichTextAreaProps };
 export declare const RichTextArea: ({ className, ...props }: RichTextAreaProps) => React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { InlineImageConfig } from '@milkdown/components/image-inline';
+import type { EditorView } from '@milkdown/prose/view';
+import type { ImageInsertHandler, UploadImageFn } from './richTextArea.types';
+export declare const normalizeMarkdownBreakTags: (value: string) => string;
+export declare const richTextCommonmarkPlugins: import("@milkdown/ctx").MilkdownPlugin[];
+export declare const richTextEditorPlugins: readonly [import("@milkdown/ctx").MilkdownPlugin[], import("@milkdown/ctx").MilkdownPlugin[], import("@milkdown/ctx").MilkdownPlugin[], import("@milkdown/ctx").MilkdownPlugin];
+export declare const hasImageFile: (files: ArrayLike<File> | undefined) => File | null;
+export declare const createRichTextAreaEditorEditable: (disabled: boolean) => () => boolean;
+export declare const handleRichTextAreaEditorClick: (_view: EditorView, event: MouseEvent) => boolean;
+export declare const handleRichTextAreaEditorKeydown: (view: EditorView, event: KeyboardEvent) => boolean;
+export declare const createRichTextAreaEditorPaste: (canUploadImage: boolean, insertImageFromFile: ImageInsertHandler) => (_view: EditorView, event: ClipboardEvent) => boolean;
+export declare const createRichTextAreaEditorDrop: (canUploadImage: boolean, insertImageFromFile: ImageInsertHandler) => (_view: EditorView, event: DragEvent) => boolean;
+export declare const createRichTextAreaInlineImageUpload: (uploadImage: UploadImageFn, sasToRefMap: Map<string, string>) => (file: File) => Promise<string>;
+export declare const createRichTextAreaInlineImageConfig: (uploadImage: UploadImageFn, sasToRefMap: Map<string, string>) => (config: InlineImageConfig) => {
+    onUpload: (file: File) => Promise<string>;
+    imageIcon: string | undefined;
+    uploadButton: string | undefined;
+    confirmButton: string | undefined;
+    uploadPlaceholderText: string;
+    proxyDomURL?: (url: string) => Promise<string> | string;
+};

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

@@ -11,3 +11,14 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Disabled: Story;
 export declare const WithError: Story;
+/**
+ * Demonstrates stable image references in markdown.
+ *
+ * `onUpload` 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
+ *
+ * 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.
+ */
+export declare const WithImageRef: Story;

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

@@ -0,0 +1,31 @@
+import type { CmdKey } from '@milkdown/core';
+export type RichTextAreaProps = {
+    value: string | null | undefined;
+    onChange: (markdown: string) => void;
+    onUpload?: UploadImageFn;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    description?: string | React.ReactNode;
+    optional?: boolean | string;
+    required?: boolean | string;
+    error?: string;
+};
+export type ToolbarCommand<T = unknown> = {
+    key: CmdKey<T>;
+    value?: T;
+};
+export type ImageMarkdown = {
+    src: string;
+    alt?: string;
+    title?: string;
+};
+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/linkUtils.d.ts

@@ -1,5 +1,6 @@
 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/main.d.ts

@@ -71,7 +71,8 @@ export { Avatar } from './components/designsystemet/Avatar/Avatar';
 export type { AvatarProps } from './components/designsystemet/Avatar/Avatar';
 export { IdProvider, useIdProvider } from './utils/idContext';
 export { SlotDialog, type SlotDialogProps } from './components/kystverket/SlotDialog/SlotDialog';
-export { EXPERIMENTAL_Suggestion as Suggestion } from '@digdir/designsystemet-react';
+export { Suggestion } from './components/designsystemet/Suggestion/Suggestion';
+export type { SuggestionProps } from './components/designsystemet/Suggestion/Suggestion';
 export { RovingFocusItem, RovingFocusRoot, omit, useCheckboxGroup, useDebounceCallback, useIsomorphicLayoutEffect, useMediaQuery, usePagination, useRadioGroup, useSynchronizedAnimation, } from '@digdir/designsystemet-react';
 export type { Size, UseRadioGroupProps, UseCheckboxGroupProps, UsePaginationProps, MergeRight, LabelRequired, } from '@digdir/designsystemet-react';
 export type { BadgePositionProps, BadgeProps } from '@digdir/designsystemet-react';
@@ -126,7 +127,7 @@ export type { SkipLinkProps } from '@digdir/designsystemet-react';
 export { SkipLink } from '@digdir/designsystemet-react';
 export type { SpinnerProps } from '@digdir/designsystemet-react';
 export { Spinner } from '@digdir/designsystemet-react';
-export type { SuggestionClearProps, SuggestionEmptyProps, SuggestionInputProps, SuggestionItem, SuggestionListProps, SuggestionMultipleProps, SuggestionOptionProps, SuggestionProps, SuggestionSingleProps, } from '@digdir/designsystemet-react';
+export type { SuggestionClearProps, SuggestionEmptyProps, SuggestionInputProps, SuggestionItem, SuggestionListProps, SuggestionMultipleProps, SuggestionOptionProps, SuggestionSingleProps, } from '@digdir/designsystemet-react';
 export { EXPERIMENTAL_Suggestion, EXPERIMENTAL_SuggestionClear, EXPERIMENTAL_SuggestionEmpty, EXPERIMENTAL_SuggestionInput, EXPERIMENTAL_SuggestionList, EXPERIMENTAL_SuggestionOption, } from '@digdir/designsystemet-react';
 export type { SwitchProps } from '@digdir/designsystemet-react';
 export { Switch } from '@digdir/designsystemet-react';