@arkitektbedriftene/fe-lib 2.0.0 → 2.0.2

package/dist/rich-text/Plugins/Image/ImageComponent.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-export declare function ImageComponent({ src, altText, width, height, maxWidth, }: {
+export declare function ImageComponent({ src, altText, width, height, }: {
     src: string;
     altText: string;
     width: "inherit" | number;
     height: "inherit" | number;
-    maxWidth: number;
 }): JSX.Element;

package/dist/rich-text/Plugins/Image/ImageNode.d.ts

@@ -6,29 +6,45 @@ export interface ImagePayload {
     altText: string;
     width?: number;
     height?: number;
-    maxWidth?: number;
     key?: NodeKey;
+    meta?: {
+        width: number;
+        height: number;
+    };
 }
 export type SerializedImageNode = Spread<{
     src: string;
     altText: string;
     width?: number;
     height?: number;
-    maxWidth: number;
+    meta?: {
+        width: number;
+        height: number;
+    };
 }, SerializedLexicalNode>;
 export declare class ImageNode extends DecoratorNode<JSX.Element> {
     __src: string;
     __altText: string;
     __width: "inherit" | number;
     __height: "inherit" | number;
-    __maxWidth: number;
+    __meta: {
+        width: number;
+        height: number;
+    } | undefined;
     static getType(): string;
     static clone(node: ImageNode): ImageNode;
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
     exportDOM(): DOMExportOutput;
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string, altText: string, maxWidth: number, width?: "inherit" | number, height?: "inherit" | number, key?: NodeKey);
+    constructor(src: string, altText: string, width?: "inherit" | number, height?: "inherit" | number, meta?: {
+        width: number;
+        height: number;
+    }, key?: NodeKey);
     exportJSON(): SerializedImageNode;
+    getMeta(): {
+        width: number;
+        height: number;
+    };
     setSrc(src: string): void;
     setWidthAndHeight(width: "inherit" | number, height: "inherit" | number): void;
     createDOM(config: EditorConfig): HTMLElement;
@@ -37,5 +53,5 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
     getAltText(): string;
     decorate(): JSX.Element;
 }
-export declare function $createImageNode({ altText, height, maxWidth, src, width, key, }: ImagePayload): ImageNode;
+export declare function $createImageNode({ altText, height, src, width, meta, key, }: ImagePayload): ImageNode;
 export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/dist/rich-text/styles.d.ts

@@ -151,6 +151,11 @@ export declare const richTextStyleObj: {
         margin: string;
         padding: string;
     };
+    ".ain-rich-text-image": {
+        display: string;
+        maxWidth: string;
+        height: string;
+    };
     variants: {
         size: {
             xs: {

package/dist/rich-text.es.js

@@ -3,19 +3,19 @@ var re = (t, r, e) => r in t ? ee(t, r, { enumerable: !0, configurable: !0, writ
 var I = (t, r, e) => (re(t, typeof r != "symbol" ? r + "" : r, e), e);
 import { createHeadlessEditor as ne } from "@lexical/headless";
 import { $generateHtmlFromNodes as oe } from "@lexical/html";
-import { $getRoot as X, ParagraphNode as ie, $createParagraphNode as U, $createTextNode as $, $setSelection as Q, DecoratorNode as ae, $applyNodeReplacement as le, SELECTION_CHANGE_COMMAND as j, $getSelection as _, COMMAND_PRIORITY_CRITICAL as at, $isRangeSelection as T, $isRootOrShadowRoot as xt, FORMAT_TEXT_COMMAND as F, COMMAND_PRIORITY_LOW as R, KEY_ARROW_DOWN_COMMAND as se, KEY_ARROW_UP_COMMAND as ce, KEY_ESCAPE_COMMAND as Lt, KEY_SPACE_COMMAND as de, $getNearestNodeFromDOMNode as lt, KEY_ARROW_LEFT_COMMAND as he, $isElementNode as ue, createCommand as ge, $insertNodes as pe, COMMAND_PRIORITY_EDITOR as me, COMMAND_PRIORITY_NORMAL as fe, $createRangeSelection as yt, COMMAND_PRIORITY_HIGH as ke } from "lexical";
+import { $getRoot as X, ParagraphNode as ie, $createParagraphNode as W, $createTextNode as $, $setSelection as Q, DecoratorNode as ae, $applyNodeReplacement as le, SELECTION_CHANGE_COMMAND as j, $getSelection as _, COMMAND_PRIORITY_CRITICAL as at, $isRangeSelection as T, $isRootOrShadowRoot as xt, FORMAT_TEXT_COMMAND as F, COMMAND_PRIORITY_LOW as R, KEY_ARROW_DOWN_COMMAND as se, KEY_ARROW_UP_COMMAND as ce, KEY_ESCAPE_COMMAND as Lt, KEY_SPACE_COMMAND as de, $getNearestNodeFromDOMNode as lt, KEY_ARROW_LEFT_COMMAND as he, $isElementNode as ue, createCommand as ge, $insertNodes as pe, COMMAND_PRIORITY_EDITOR as me, COMMAND_PRIORITY_NORMAL as fe, $createRangeSelection as wt, COMMAND_PRIORITY_HIGH as ke } from "lexical";
 import { trimTextContentFromAnchor as be, $setBlocksType as nt, $isAtNodeEnd as ft } from "@lexical/selection";
-import { LinkNode as B, AutoLinkNode as Nt, $isLinkNode as Y, TOGGLE_LINK_COMMAND as V } from "@lexical/link";
-import { ListNode as st, ListItemNode as wt, $isListNode as ct, INSERT_UNORDERED_LIST_COMMAND as Ce, INSERT_ORDERED_LIST_COMMAND as ve, INSERT_CHECK_LIST_COMMAND as St, insertList as Me, $isListItemNode as P } from "@lexical/list";
+import { LinkNode as B, AutoLinkNode as yt, $isLinkNode as Y, TOGGLE_LINK_COMMAND as V } from "@lexical/link";
+import { ListNode as st, ListItemNode as Nt, $isListNode as ct, INSERT_UNORDERED_LIST_COMMAND as Ce, INSERT_ORDERED_LIST_COMMAND as ve, INSERT_CHECK_LIST_COMMAND as St, insertList as Me, $isListItemNode as P } from "@lexical/list";
 import { HeadingNode as Et, QuoteNode as It, $isHeadingNode as _e, $createHeadingNode as Te, $createQuoteNode as xe } from "@lexical/rich-text";
-import { TableNode as Rt, TableRowNode as Ot, TableCellNode as $t, INSERT_TABLE_COMMAND as Le, $getTableCellNodeFromLexicalNode as ye, $deleteTableColumn__EXPERIMENTAL as Ne, $deleteTableRow__EXPERIMENTAL as we, $insertTableColumn__EXPERIMENTAL as kt, $insertTableRow__EXPERIMENTAL as bt } from "@lexical/table";
-import { jsx as o, jsxs as h, Fragment as H } from "react/jsx-runtime";
+import { TableNode as Rt, TableRowNode as Ot, TableCellNode as $t, INSERT_TABLE_COMMAND as Le, $getTableCellNodeFromLexicalNode as we, $deleteTableColumn__EXPERIMENTAL as ye, $deleteTableRow__EXPERIMENTAL as Ne, $insertTableColumn__EXPERIMENTAL as kt, $insertTableRow__EXPERIMENTAL as bt } from "@lexical/table";
+import { jsx as o, jsxs as u, Fragment as H } from "react/jsx-runtime";
 import { createContext as Se, useState as p, useRef as K, useCallback as C, useContext as Ee, useEffect as x, useMemo as zt, useLayoutEffect as Ie } from "react";
-import { DropdownMenu as dt, ToolbarButton as At, DropdownMenuIconItem as v, Box as W, ToolbarToggleGroup as Dt, ToolbarToggleItem as D, OverlayCard as Bt, Toolbar as Re, ToolbarSeparator as Oe, styled as $e, Spinner as ht, Dialog as Pt, DialogHeader as ze, TextInput as Ht, DialogActions as Z, Button as y, DropdownMenuItem as A, DropdownMenuSeparator as Ct, NavBar as Ae, NavBarItem as ot, Combobox as De } from "./ui.es.js";
+import { DropdownMenu as dt, ToolbarButton as At, DropdownMenuIconItem as v, Box as U, ToolbarToggleGroup as Dt, ToolbarToggleItem as D, OverlayCard as Bt, Toolbar as Re, ToolbarSeparator as Oe, styled as $e, Spinner as ht, Dialog as Pt, DialogHeader as ze, TextInput as Ht, DialogActions as Z, Button as w, DropdownMenuItem as A, DropdownMenuSeparator as Ct, NavBar as Ae, NavBarItem as ot, Combobox as De } from "./ui.es.js";
 import { LexicalComposer as Be } from "@lexical/react/LexicalComposer.js";
 import { RichTextPlugin as Pe } from "@lexical/react/LexicalRichTextPlugin.js";
 import He from "@lexical/react/LexicalErrorBoundary.js";
-import { useFloating as ut, autoUpdate as Ft, size as Fe, flip as We, offset as Wt, shift as Ue, useInteractions as Ut, useRole as jt, FloatingPortal as Kt, inline as je, useDismiss as Ke } from "@floating-ui/react";
+import { useFloating as ut, autoUpdate as Ft, size as Fe, flip as Ue, offset as Ut, shift as We, useInteractions as Wt, useRole as jt, FloatingPortal as Kt, inline as je, useDismiss as Ke } from "@floating-ui/react";
 import { useLexicalComposerContext as L } from "@lexical/react/LexicalComposerContext.js";
 import { $getNearestNodeOfType as qe, $findMatchingParent as qt, mergeRegister as tt, isHTMLElement as vt, $wrapNodeInElement as Ye } from "@lexical/utils";
 import { G as m, f as Ge, g as Je } from "./index.esm-297793f7.js";
@@ -67,7 +67,7 @@ const nr = ({
     () => {
       const e = X();
       e.clear();
-      const n = U();
+      const n = W();
       n.append($("")), e.append(n), Q(null);
     },
     {
@@ -79,14 +79,14 @@ const nr = ({
     () => {
       const n = X();
       n.clear();
-      const i = U();
+      const i = W();
       i.append($(t.trim())), n.append(i), Q(null);
     },
     {
       tag: e
     }
   ), r.blur();
-}, yn = async (t, r, e) => {
+}, wn = async (t, r, e) => {
   var l;
   let n = 0;
   const i = ne({
@@ -98,7 +98,7 @@ const nr = ({
     try {
       if (typeof t == "string" && !Gt(t))
         i.update(() => {
-          const s = X(), d = U();
+          const s = X(), d = W();
           d.append($(t.trim())), s.append(d);
         });
       else {
@@ -167,25 +167,24 @@ function dr({
   src: t,
   altText: r,
   width: e,
-  height: n,
-  maxWidth: i
+  height: n
 }) {
-  const { signUrl: a } = et(), [l, s] = p(cr(t) ? "" : t), d = K(!1);
+  const { signUrl: i } = et(), [a, l] = p(cr(t) ? "" : t), s = K(!1);
   return x(() => {
-    const c = async () => {
-      s(await (a == null ? void 0 : a(t)) ?? t);
+    const d = async () => {
+      l(await (i == null ? void 0 : i(t)) ?? t);
     };
-    !l && !d.current && (d.current = !0, c());
-  }, []), l ? /* @__PURE__ */ o(
+    !a && !s.current && (s.current = !0, d());
+  }, []), a ? /* @__PURE__ */ o(
     "img",
     {
-      src: l,
+      src: a,
       alt: r,
       style: {
         height: n,
-        maxWidth: i,
         width: e
-      }
+      },
+      className: "ain-rich-text-image"
     }
   ) : /* @__PURE__ */ o("span", {});
 }
@@ -200,8 +199,8 @@ class z extends ae {
     I(this, "__altText");
     I(this, "__width");
     I(this, "__height");
-    I(this, "__maxWidth");
-    this.__src = e, this.__altText = n, this.__maxWidth = i, this.__width = a || "inherit", this.__height = l || "inherit";
+    I(this, "__meta");
+    this.__src = e, this.__altText = n, this.__width = i || "inherit", this.__height = a || "inherit", this.__meta = l;
   }
   static getType() {
     return "image";
@@ -210,25 +209,25 @@ class z extends ae {
     return new z(
       e.__src,
       e.__altText,
-      e.__maxWidth,
       e.__width,
       e.__height,
+      e.__meta,
       e.__key
     );
   }
   static importJSON(e) {
-    const { altText: n, height: i, width: a, maxWidth: l, src: s } = e;
+    const { altText: n, height: i, width: a, src: l, meta: s } = e;
     return gt({
       altText: n,
       height: i,
-      maxWidth: l,
-      src: s,
-      width: a
+      src: l,
+      width: a,
+      meta: s
     });
   }
   exportDOM() {
     const e = document.createElement("img");
-    return e.setAttribute("src", this.__src), e.setAttribute("alt", this.__altText), e.setAttribute("width", this.__width.toString()), e.setAttribute("height", this.__height.toString()), { element: e };
+    return e.setAttribute("src", this.__src), e.setAttribute("alt", this.__altText), this.__width !== "inherit" && e.setAttribute("width", this.__width.toString()), this.__height !== "inherit" && e.setAttribute("height", this.__height.toString()), { element: e };
   }
   static importDOM() {
     return {
@@ -242,13 +241,16 @@ class z extends ae {
     return {
       altText: this.getAltText(),
       height: this.__height === "inherit" ? 0 : this.__height,
-      maxWidth: this.__maxWidth,
       src: this.getSrc(),
       type: "image",
       version: 1,
-      width: this.__width === "inherit" ? 0 : this.__width
+      width: this.__width === "inherit" ? 0 : this.__width,
+      meta: this.__meta
     };
   }
+  getMeta() {
+    return this.__meta ?? { width: 0, height: 0 };
+  }
   setSrc(e) {
     const n = this.getWritable();
     n.__src = e;
@@ -259,8 +261,7 @@ class z extends ae {
   }
   // View
   createDOM(e) {
-    const n = document.createElement("span"), a = e.theme.image;
-    return a !== void 0 && (n.className = a), n;
+    return document.createElement("div");
   }
   updateDOM() {
     return !1;
@@ -278,8 +279,7 @@ class z extends ae {
         src: this.__src,
         altText: this.__altText,
         width: this.__width,
-        height: this.__height,
-        maxWidth: this.__maxWidth
+        height: this.__height
       }
     );
   }
@@ -287,24 +287,24 @@ class z extends ae {
 function gt({
   altText: t,
   height: r,
-  maxWidth: e = 500,
-  src: n,
-  width: i,
+  src: e,
+  width: n,
+  meta: i,
   key: a
 }) {
   return le(
-    new z(n, t, e, i, r, a)
+    new z(e, t, n, r, i, a)
   );
 }
-function Nn(t) {
+function yn(t) {
   return t instanceof z;
 }
-const wn = [
+const Nn = [
   Et,
   It,
   st,
-  wt,
   Nt,
+  yt,
   B,
   Rt,
   Ot,
@@ -314,8 +314,8 @@ const wn = [
   Et,
   It,
   st,
-  wt,
   Nt,
+  yt,
   B,
   Rt,
   Ot,
@@ -372,13 +372,13 @@ function xr(t) {
 function Lr(t) {
   return m({ tag: "svg", attr: { viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { stroke: "none", d: "M0 0h24v24H0z", fill: "none" } }, { tag: "path", attr: { d: "M9 6l11 0" } }, { tag: "path", attr: { d: "M9 12l11 0" } }, { tag: "path", attr: { d: "M9 18l11 0" } }, { tag: "path", attr: { d: "M5 6l0 .01" } }, { tag: "path", attr: { d: "M5 12l0 .01" } }, { tag: "path", attr: { d: "M5 18l0 .01" } }] })(t);
 }
-function yr(t) {
+function wr(t) {
   return m({ tag: "svg", attr: { viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { stroke: "none", d: "M0 0h24v24H0z", fill: "none" } }, { tag: "path", attr: { d: "M10 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5" } }, { tag: "path", attr: { d: "M19 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5" } }] })(t);
 }
-function Nr(t) {
+function yr(t) {
   return m({ tag: "svg", attr: { viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { stroke: "none", d: "M0 0h24v24H0z", fill: "none" } }, { tag: "path", attr: { d: "M5 7l8 10m-8 0l8 -10" } }, { tag: "path", attr: { d: "M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" } }] })(t);
 }
-function wr(t) {
+function Nr(t) {
   return m({ tag: "svg", attr: { viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { stroke: "none", d: "M0 0h24v24H0z", fill: "none" } }, { tag: "path", attr: { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" } }, { tag: "path", attr: { d: "M4 10l16 0" } }, { tag: "path", attr: { d: "M10 4l0 16" } }] })(t);
 }
 function Sr(t) {
@@ -410,13 +410,13 @@ const Er = Xe("div", {
   number: /* @__PURE__ */ o(xr, { size: "1.25rem" }),
   check: /* @__PURE__ */ o(Tr, { size: "1.25rem" }),
   paragraph: /* @__PURE__ */ o(Mr, { size: "1.25rem" }),
-  quote: /* @__PURE__ */ o(yr, { size: "1.25rem" })
+  quote: /* @__PURE__ */ o(wr, { size: "1.25rem" })
 }, M = ({
   blockType: t
-}) => /* @__PURE__ */ h(H, { children: [
-  /* @__PURE__ */ o(W, { css: { display: "flex", flex: "0 0 auto" }, children: Ir[t] }),
+}) => /* @__PURE__ */ u(H, { children: [
+  /* @__PURE__ */ o(U, { css: { display: "flex", flex: "0 0 auto" }, children: Ir[t] }),
   /* @__PURE__ */ o(
-    W,
+    U,
     {
       css: {
         flex: "1 1 auto",
@@ -444,20 +444,20 @@ const Er = Xe("div", {
   x(() => t.registerCommand(
     j,
     () => {
-      const c = _(), u = Rr(c);
-      if (!u)
+      const c = _(), h = Rr(c);
+      if (!h)
         return !1;
-      const { element: g, anchorNode: b } = u, N = g.getKey();
-      if (t.getElementByKey(N) !== null)
+      const { element: g, anchorNode: k } = h, y = g.getKey();
+      if (t.getElementByKey(y) !== null)
         if (ct(g)) {
-          const k = qe(
-            b,
+          const b = qe(
+            k,
             st
-          ), w = k ? k.getListType() : g.getListType();
-          e(w);
+          ), N = b ? b.getListType() : g.getListType();
+          e(N);
         } else {
-          const k = _e(g) ? g.getTag() : g.getType();
-          k in Xt && e(k);
+          const b = _e(g) ? g.getTag() : g.getType();
+          b in Xt && e(b);
         }
       return !1;
     },
@@ -465,11 +465,11 @@ const Er = Xe("div", {
   ), [t]);
   const n = (c) => {
     r !== c && t.update(() => {
-      const u = _();
-      T(u) && (nt(u, () => Te(c)), e(c));
+      const h = _();
+      T(h) && (nt(h, () => Te(c)), e(c));
     });
   };
-  return /* @__PURE__ */ o(Er, { children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ o(Er, { children: /* @__PURE__ */ u(
     dt,
     {
       trigger: /* @__PURE__ */ o(
@@ -486,7 +486,7 @@ const Er = Xe("div", {
         /* @__PURE__ */ o(v, { onClick: () => {
           r !== "paragraph" && t.update(() => {
             const c = _();
-            T(c) && (nt(c, () => U()), e("paragraph"));
+            T(c) && (nt(c, () => W()), e("paragraph"));
           });
         }, children: /* @__PURE__ */ o(M, { blockType: "paragraph" }) }),
         /* @__PURE__ */ o(v, { onClick: () => n("h1"), children: /* @__PURE__ */ o(M, { blockType: "h1" }) }),
@@ -514,9 +514,9 @@ const Er = Xe("div", {
     }
   ) });
 }, $r = () => {
-  const [t] = L(), [r, e] = p(!1), [n, i] = p(!1), [a, l] = p(!1), [s, d] = p(!1), [c, u] = p(!1), g = C(() => {
+  const [t] = L(), [r, e] = p(!1), [n, i] = p(!1), [a, l] = p(!1), [s, d] = p(!1), [c, h] = p(!1), g = C(() => {
     const f = _();
-    T(f) && (e(f.hasFormat("bold")), i(f.hasFormat("italic")), l(f.hasFormat("underline")), d(f.hasFormat("code")), u(f.hasFormat("superscript")));
+    T(f) && (e(f.hasFormat("bold")), i(f.hasFormat("italic")), l(f.hasFormat("underline")), d(f.hasFormat("code")), h(f.hasFormat("superscript")));
   }, []);
   x(() => tt(
     t.registerCommand(
@@ -530,37 +530,37 @@ const Er = Xe("div", {
       });
     })
   ), [t, g]);
-  const b = C(
+  const k = C(
     () => t.dispatchCommand(F, "bold"),
     [t]
-  ), N = C(
+  ), y = C(
     () => t.dispatchCommand(F, "italic"),
     [t]
   ), S = C(
     () => t.dispatchCommand(F, "underline"),
     [t]
-  ), k = C(
+  ), b = C(
     () => t.dispatchCommand(F, "code"),
     [t]
-  ), w = C(
+  ), N = C(
     () => t.dispatchCommand(F, "superscript"),
     [t]
   ), E = zt(() => {
     const f = [];
     return r && f.push("bold"), n && f.push("italic"), a && f.push("underline"), s && f.push("code"), c && f.push("superscript"), f;
   }, [r, n, a, s, c]);
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ u(
     Dt,
     {
       type: "multiple",
       "aria-label": "Tekstformattering",
       value: E,
       children: [
-        /* @__PURE__ */ o(D, { onClick: b, title: "Fet tekst", value: "bold", children: /* @__PURE__ */ o(ur, { size: "1.25rem" }) }),
+        /* @__PURE__ */ o(D, { onClick: k, title: "Fet tekst", value: "bold", children: /* @__PURE__ */ o(ur, { size: "1.25rem" }) }),
         /* @__PURE__ */ o(
           D,
           {
-            onClick: N,
+            onClick: y,
             title: "Kursiv tekst",
             value: "italic",
             children: /* @__PURE__ */ o(vr, { size: "1.25rem" })
@@ -575,14 +575,14 @@ const Er = Xe("div", {
             children: /* @__PURE__ */ o(Sr, { size: "1.25rem" })
           }
         ),
-        /* @__PURE__ */ o(D, { onClick: k, title: "Kode", value: "code", children: /* @__PURE__ */ o(gr, { size: "1.25rem" }) }),
+        /* @__PURE__ */ o(D, { onClick: b, title: "Kode", value: "code", children: /* @__PURE__ */ o(gr, { size: "1.25rem" }) }),
         /* @__PURE__ */ o(
           D,
           {
-            onClick: w,
+            onClick: N,
             title: "Superscript",
             value: "superscript",
-            children: /* @__PURE__ */ o(Nr, { size: "1.25rem" })
+            children: /* @__PURE__ */ o(yr, { size: "1.25rem" })
           }
         )
       ]
@@ -598,15 +598,15 @@ const Er = Xe("div", {
     whileElementsMounted: Ft,
     middleware: [
       Fe({
-        apply: ({ rects: u, elements: g }) => {
-          g.floating.style.minWidth = `${u.reference.width}px`;
+        apply: ({ rects: h, elements: g }) => {
+          g.floating.style.minWidth = `${h.reference.width}px`;
         }
       }),
-      We(),
-      Wt({
+      Ue(),
+      Ut({
         mainAxis: 8
       }),
-      Ue({
+      We({
         padding: 8
       })
     ],
@@ -615,7 +615,7 @@ const Er = Xe("div", {
     elements: {
       reference: e.current
     }
-  }), { getFloatingProps: c } = Ut([
+  }), { getFloatingProps: c } = Wt([
     jt(l, {
       role: "dialog"
     })
@@ -638,7 +638,7 @@ const Er = Xe("div", {
 }, Ar = ({
   children: t,
   ...r
-}) => /* @__PURE__ */ h(Re, { "aria-label": "Formattering", ...r, children: [
+}) => /* @__PURE__ */ u(Re, { "aria-label": "Formattering", ...r, children: [
   /* @__PURE__ */ o(Or, {}),
   /* @__PURE__ */ o(Oe, {}),
   /* @__PURE__ */ o($r, {}),
@@ -796,21 +796,21 @@ function Hr() {
         Vt,
         (r) => {
           const e = gt(r);
-          return pe([e]), xt(e.getParentOrThrow()) && Ye(e, U).selectEnd(), !0;
+          return pe([e]), xt(e.getParentOrThrow()) && Ye(e, W).selectEnd(), !0;
         },
         me
       )
     );
   }, [t]), null;
 }
-const Fr = () => /* @__PURE__ */ h(H, { children: [
+const Fr = () => /* @__PURE__ */ u(H, { children: [
   /* @__PURE__ */ o(Ve, {}),
   /* @__PURE__ */ o(tr, {}),
   /* @__PURE__ */ o(Ze, {}),
   /* @__PURE__ */ o(Dr, {}),
   /* @__PURE__ */ o(er, {}),
   /* @__PURE__ */ o(Hr, {})
-] }), Wr = ({
+] }), Ur = ({
   state: t
 }) => {
   const [r] = L(), e = K(!1);
@@ -832,7 +832,7 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
       }
     }));
   }, []), null;
-}, Ur = $e("div", {
+}, Wr = $e("div", {
   border: "1px solid $borderDarker",
   borderRadius: "$md",
   position: "relative",
@@ -872,7 +872,7 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
 }), jr = ({
   isLoading: t
 }) => /* @__PURE__ */ o(
-  W,
+  U,
   {
     css: {
       visibility: t ? "visible" : "hidden",
@@ -894,15 +894,15 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
   content: s,
   hideBorder: d,
   onBlur: c,
-  defaultState: u,
+  defaultState: h,
   css: g,
-  signUrl: b
+  signUrl: k
 }) => {
-  const { hasFocus: N, attributes: S } = sr({ onBlur: c }), k = K(null), w = zt(
-    () => ({ hasFocus: N, editorRef: k, signUrl: b }),
-    [N, b]
+  const { hasFocus: y, attributes: S } = sr({ onBlur: c }), b = K(null), N = zt(
+    () => ({ hasFocus: y, editorRef: b, signUrl: k }),
+    [y, k]
   );
-  return /* @__PURE__ */ o(Jt.Provider, { value: w, children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ o(Jt.Provider, { value: N, children: /* @__PURE__ */ u(
     Be,
     {
       initialConfig: {
@@ -915,11 +915,11 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
         editable: !0
       },
       children: [
-        /* @__PURE__ */ h(
-          Ur,
+        /* @__PURE__ */ u(
+          Wr,
           {
-            ref: k,
-            hasFocus: N,
+            ref: b,
+            hasFocus: y,
             hideBorder: d,
             css: g,
             ...S,
@@ -930,7 +930,7 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
                 {
                   contentEditable: s,
                   placeholder: e ? /* @__PURE__ */ o(
-                    W,
+                    U,
                     {
                       css: {
                         position: "absolute",
@@ -953,7 +953,7 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
             ]
           }
         ),
-        /* @__PURE__ */ o(Wr, { state: u }),
+        /* @__PURE__ */ o(Ur, { state: h }),
         /* @__PURE__ */ o(H, { children: r })
       ]
     }
@@ -1111,6 +1111,11 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
     margin: "1.5em 10px",
     padding: "0.5em 10px"
   },
+  ".ain-rich-text-image": {
+    display: "block",
+    maxWidth: "100%",
+    height: "auto"
+  },
   variants: {
     size: {
       xs: {
@@ -1152,20 +1157,24 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
   uploadFile: t,
   ...r
 }) => {
-  const [e] = L(), [n, i] = p(null), a = async (s) => {
+  const [e] = L(), [n, i] = p(null), a = (s) => {
     var c;
     const d = (c = s.target.files) == null ? void 0 : c[0];
     if (d) {
-      const u = await t.uploadFile({ file: d });
-      i(u);
+      const h = new Image(), g = window.URL.createObjectURL(d);
+      h.onload = async () => {
+        const k = await t.uploadFile({ file: d });
+        i({ url: k, width: h.naturalWidth, height: h.naturalHeight }), window.URL.revokeObjectURL(g);
+      }, h.src = g;
     }
   }, l = () => {
     n && !t.isLoading && (e.dispatchCommand(Vt, {
-      src: n,
-      altText: `Image: ${n}`
+      src: n.url,
+      altText: `Image: ${n.url}`,
+      meta: { width: n.width, height: n.height }
     }), r.onOpenChange(!1));
   };
-  return /* @__PURE__ */ h(Pt, { ...r, children: [
+  return /* @__PURE__ */ u(Pt, { ...r, children: [
     /* @__PURE__ */ o(ze, { children: "Sett inn bilde" }),
     t.isLoading && /* @__PURE__ */ o(ht, {}),
     /* @__PURE__ */ o(
@@ -1177,10 +1186,10 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
         disabled: t.isLoading
       }
     ),
-    /* @__PURE__ */ h(Z, { children: [
-      /* @__PURE__ */ o(y, { onClick: () => r.onOpenChange(!1), children: "Avbryt" }),
+    /* @__PURE__ */ u(Z, { children: [
+      /* @__PURE__ */ o(w, { onClick: () => r.onOpenChange(!1), children: "Avbryt" }),
       /* @__PURE__ */ o(
-        y,
+        w,
         {
           variant: "primary",
           disabled: !n || t.isLoading,
@@ -1198,19 +1207,19 @@ const Fr = () => /* @__PURE__ */ h(H, { children: [
       includeHeaders: !1
     });
   }, [r]);
-  return /* @__PURE__ */ h(H, { children: [
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ u(H, { children: [
+    /* @__PURE__ */ u(
       dt,
       {
         trigger: /* @__PURE__ */ o(At, { dropdown: !0, children: "Sett inn" }),
         side: "bottom",
         align: "end",
         children: [
-          /* @__PURE__ */ h(v, { onClick: i, children: [
-            /* @__PURE__ */ o(wr, { size: "1.25rem" }),
+          /* @__PURE__ */ u(v, { onClick: i, children: [
+            /* @__PURE__ */ o(Nr, { size: "1.25rem" }),
             " Tabell"
           ] }),
-          t && /* @__PURE__ */ h(v, { onClick: () => n(!0), children: [
+          t && /* @__PURE__ */ u(v, { onClick: () => n(!0), children: [
             /* @__PURE__ */ o(Ge, { size: "1.25rem" }),
             " Bilde"
           ] })
@@ -1241,14 +1250,14 @@ const On = () => {
     elements: {
       reference: r
     },
-    middleware: [Wt({ mainAxis: -20, crossAxis: -2 })]
+    middleware: [Ut({ mainAxis: -20, crossAxis: -2 })]
   });
   x(() => t.registerCommand(
     j,
     () => {
       const s = _();
       if (T(s)) {
-        const d = s.anchor.getNode(), c = ye(d);
+        const d = s.anchor.getNode(), c = we(d);
         e(c ? t.getElementByKey(c.getKey()) : null);
       }
       return !1;
@@ -1271,19 +1280,19 @@ const On = () => {
           kt(!0);
           break;
         case "delete-row":
-          we();
+          Ne();
           break;
         case "delete-column":
-          Ne();
+          ye();
           break;
       }
     });
   };
-  return r ? /* @__PURE__ */ h(
+  return r ? /* @__PURE__ */ u(
     dt,
     {
       trigger: /* @__PURE__ */ o(
-        y,
+        w,
         {
           icon: !0,
           variant: "primary",
@@ -1362,7 +1371,7 @@ const Jr = ({ onClose: t }) => {
         if (T(a) && a.isCollapsed()) {
           const l = $(i);
           a.insertNodes([l]);
-          const s = yt();
+          const s = wt();
           s.setTextNodeRange(l, 0, l, i.length), Q(s);
         }
         r.dispatchCommand(V, pt(i));
@@ -1370,13 +1379,13 @@ const Jr = ({ onClose: t }) => {
     },
     [r]
   );
-  return /* @__PURE__ */ h("form", { onSubmit: (i) => {
+  return /* @__PURE__ */ u("form", { onSubmit: (i) => {
     e(i.currentTarget.url.value), t();
   }, children: [
     /* @__PURE__ */ o(Ht, { name: "url", label: "URL", type: "url", required: !0 }),
-    /* @__PURE__ */ h(Z, { children: [
-      /* @__PURE__ */ o(y, { onClick: t, children: "Avbryt" }),
-      /* @__PURE__ */ o(y, { type: "submit", variant: "primary", children: "Sett inn" })
+    /* @__PURE__ */ u(Z, { children: [
+      /* @__PURE__ */ o(w, { onClick: t, children: "Avbryt" }),
+      /* @__PURE__ */ o(w, { type: "submit", variant: "primary", children: "Sett inn" })
     ] })
   ] });
 }, Xr = ({
@@ -1389,9 +1398,9 @@ const Jr = ({ onClose: t }) => {
         const d = _();
         if (T(d)) {
           const c = [];
-          for (const [u, g] of s.entries()) {
-            const b = te(g.value);
-            b.append($(g.label)), c.push(b), u !== s.length - 1 && c.push($(" "));
+          for (const [h, g] of s.entries()) {
+            const k = te(g.value);
+            k.append($(g.label)), c.push(k), h !== s.length - 1 && c.push($(" "));
           }
           d.insertNodes(c);
         }
@@ -1399,7 +1408,7 @@ const Jr = ({ onClose: t }) => {
     },
     [e]
   );
-  return /* @__PURE__ */ h(H, { children: [
+  return /* @__PURE__ */ u(H, { children: [
     /* @__PURE__ */ o(
       De,
       {
@@ -1408,10 +1417,10 @@ const Jr = ({ onClose: t }) => {
         onChange: (s) => i(s)
       }
     ),
-    /* @__PURE__ */ h(Z, { children: [
-      /* @__PURE__ */ o(y, { onClick: t, children: "Avbryt" }),
+    /* @__PURE__ */ u(Z, { children: [
+      /* @__PURE__ */ o(w, { onClick: t, children: "Avbryt" }),
       /* @__PURE__ */ o(
-        y,
+        w,
         {
           variant: "primary",
           onClick: () => {
@@ -1430,10 +1439,10 @@ const Jr = ({ onClose: t }) => {
     var c;
     const d = (c = s.target.files) == null ? void 0 : c[0];
     if (d) {
-      const u = await r.uploadFile({ file: d });
+      const h = await r.uploadFile({ file: d });
       i({
         name: d.name,
-        url: u
+        url: h
       });
     }
   }, l = C(() => {
@@ -1444,13 +1453,13 @@ const Jr = ({ onClose: t }) => {
       if (T(s) && s.isCollapsed()) {
         const d = $(n.name);
         s.insertNodes([d]);
-        const c = yt();
+        const c = wt();
         c.setTextNodeRange(d, 0, d, n.name.length), Q(c);
       }
       e.dispatchCommand(V, pt(n.url));
     });
   }, [e, n]);
-  return /* @__PURE__ */ h(H, { children: [
+  return /* @__PURE__ */ u(H, { children: [
     r.isLoading && /* @__PURE__ */ o(ht, {}),
     /* @__PURE__ */ o(
       "input",
@@ -1460,10 +1469,10 @@ const Jr = ({ onClose: t }) => {
         disabled: r.isLoading
       }
     ),
-    /* @__PURE__ */ h(Z, { children: [
-      /* @__PURE__ */ o(y, { onClick: t, children: "Avbryt" }),
+    /* @__PURE__ */ u(Z, { children: [
+      /* @__PURE__ */ o(w, { onClick: t, children: "Avbryt" }),
       /* @__PURE__ */ o(
-        y,
+        w,
         {
           variant: "primary",
           onClick: () => {
@@ -1484,8 +1493,8 @@ const Jr = ({ onClose: t }) => {
   const [i, a] = p("url"), l = () => {
     r(!1);
   };
-  return /* @__PURE__ */ h(Pt, { open: t, onOpenChange: r, css: { width: "600px" }, children: [
-    /* @__PURE__ */ h(Ae, { css: { marginBottom: "$8" }, children: [
+  return /* @__PURE__ */ u(Pt, { open: t, onOpenChange: r, css: { width: "600px" }, children: [
+    /* @__PURE__ */ u(Ae, { css: { marginBottom: "$8" }, children: [
       /* @__PURE__ */ o(ot, { active: i === "url", onClick: () => a("url"), children: "URL" }),
       e && /* @__PURE__ */ o(
         ot,
@@ -1508,15 +1517,15 @@ const Jr = ({ onClose: t }) => {
   const [e] = L(), [n, i] = p(!1), [a, l] = p(!1), s = C(() => {
     const d = _();
     if (T(d)) {
-      const c = Zt(d), u = c.getParent();
-      i(Y(u) || Y(c));
+      const c = Zt(d), h = c.getParent();
+      i(Y(h) || Y(c));
     }
   }, []);
   return x(() => e.registerCommand(
     j,
     () => (s(), !1),
     at
-  ), [e, s]), /* @__PURE__ */ h(Dt, { type: "single", value: n ? "link" : "", children: [
+  ), [e, s]), /* @__PURE__ */ u(Dt, { type: "single", value: n ? "link" : "", children: [
     /* @__PURE__ */ o(
       D,
       {
@@ -1545,7 +1554,7 @@ const Jr = ({ onClose: t }) => {
       a(e.getURL());
     }) : a("");
   }, [t, e]);
-  const s = !!(e && i && l), { refs: d, floatingStyles: c, context: u } = ut({
+  const s = !!(e && i && l), { refs: d, floatingStyles: c, context: h } = ut({
     placement: "top",
     strategy: "fixed",
     open: s,
@@ -1554,39 +1563,39 @@ const Jr = ({ onClose: t }) => {
       reference: r.current
     },
     middleware: [je()]
-  }), { getFloatingProps: g } = Ut([
-    jt(u),
-    Ke(u)
-  ]), b = C(() => {
-    var w;
-    const k = _();
-    if (T(k)) {
-      const E = Zt(k), f = E.getParent();
+  }), { getFloatingProps: g } = Wt([
+    jt(h),
+    Ke(h)
+  ]), k = C(() => {
+    var N;
+    const b = _();
+    if (T(b)) {
+      const E = Zt(b), f = E.getParent();
       let q = null;
       if (Y(f) ? q = f : Y(E) && (q = E), q) {
         const rt = window.getSelection(), mt = t.getRootElement();
-        k !== null && rt !== null && mt !== null && mt.contains(rt.anchorNode) && t.isEditable() && (r.current = ((w = rt.focusNode) == null ? void 0 : w.parentElement) ?? null);
+        b !== null && rt !== null && mt !== null && mt.contains(rt.anchorNode) && t.isEditable() && (r.current = ((N = rt.focusNode) == null ? void 0 : N.parentElement) ?? null);
       }
       n(q);
     }
-  }, [t]), N = C(() => {
+  }, [t]), y = C(() => {
     e && Gr(e) && t.update(() => {
       e.remove();
     }), t.dispatchCommand(V, null);
   }, [t, e]);
   if (x(() => {
     t.getEditorState().read(() => {
-      b();
+      k();
     });
-  }, [t, b]), x(() => tt(
-    t.registerUpdateListener(({ editorState: k }) => {
-      k.read(() => {
-        b();
+  }, [t, k]), x(() => tt(
+    t.registerUpdateListener(({ editorState: b }) => {
+      b.read(() => {
+        k();
       });
     }),
     t.registerCommand(
       j,
-      () => (b(), !0),
+      () => (k(), !0),
       R
     ),
     t.registerCommand(
@@ -1594,10 +1603,10 @@ const Jr = ({ onClose: t }) => {
       () => e ? (n(null), !0) : !1,
       ke
     )
-  ), [t, b, e]), !s)
+  ), [t, k, e]), !s)
     return null;
   const S = pt(i);
-  return /* @__PURE__ */ o(Kt, { children: /* @__PURE__ */ h(
+  return /* @__PURE__ */ o(Kt, { children: /* @__PURE__ */ u(
     Bt,
     {
       ref: d.setFloating,
@@ -1612,7 +1621,7 @@ const Jr = ({ onClose: t }) => {
       ...g(),
       children: [
         /* @__PURE__ */ o(
-          W,
+          U,
           {
             as: "a",
             css: {
@@ -1629,7 +1638,7 @@ const Jr = ({ onClose: t }) => {
             children: i
           }
         ),
-        /* @__PURE__ */ o(y, { color: "danger", icon: !0, size: "sm", onClick: N, children: /* @__PURE__ */ o(Je, { size: 24 }) })
+        /* @__PURE__ */ o(w, { color: "danger", icon: !0, size: "sm", onClick: y, children: /* @__PURE__ */ o(Je, { size: 24 }) })
       ]
     }
   ) });
@@ -1637,7 +1646,7 @@ const Jr = ({ onClose: t }) => {
 export {
   gt as $createImageNode,
   te as $createRutineLinkNode,
-  Nn as $isImageNode,
+  yn as $isImageNode,
   Gr as $isRutineLinkNode,
   zr as FloatingToolbar,
   z as ImageNode,
@@ -1651,7 +1660,7 @@ export {
   $n as RutineLinkNodeInit,
   On as TableEditPlugin,
   ar as clearEditorState,
-  wn as defaultNodes,
+  Nn as defaultNodes,
   Sn as defaultViewNodes,
   ir as isEditorState,
   Gt as isJSON,
@@ -1659,7 +1668,7 @@ export {
   In as richTextCss,
   Kr as richTextStyleObj,
   lr as setStateFromPlainText,
-  yn as stateToHTML,
+  wn as stateToHTML,
   sr as useHasFocusWithin,
   et as useRichTextContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "exports": {
     ".": {