@arkitektbedriftene/fe-lib 0.3.9 → 0.3.10

package/dist/lib/rich-text/Editor.d.ts

@@ -1,10 +1,11 @@
-import { type ReactNode } from "react";
+import { type ReactNode, type ReactElement } from "react";
 import { type InitialConfigType } from "@lexical/react/LexicalComposer";
-export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, }: {
+export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, content, }: {
     isLoading: boolean;
     children: ReactNode;
     placeholderText?: string | undefined;
     nodes: InitialConfigType["nodes"];
     plugins?: ReactNode;
     toolbar?: ReactNode;
+    content: ReactElement;
 }) => JSX.Element;

package/dist/rich-text.es.js

@@ -1,61 +1,60 @@
 import { createHeadlessEditor as C } from "@lexical/headless";
 import { $generateHtmlFromNodes as N } from "@lexical/html";
-import { $getRoot as p, ParagraphNode as T, $createParagraphNode as y, $createTextNode as $ } from "lexical";
-import { trimTextContentFromAnchor as S } from "@lexical/selection";
-import { AutoLinkNode as E, LinkNode as v } from "@lexical/link";
-import { ListNode as w, ListItemNode as j } from "@lexical/list";
-import { HeadingNode as F, QuoteNode as L } from "@lexical/rich-text";
+import { $getRoot as h, ParagraphNode as T, $createParagraphNode as y, $createTextNode as S } from "lexical";
+import { trimTextContentFromAnchor as E } from "@lexical/selection";
+import { AutoLinkNode as $, LinkNode as F } from "@lexical/link";
+import { ListNode as L, ListItemNode as j } from "@lexical/list";
+import { HeadingNode as w, QuoteNode as v } from "@lexical/rich-text";
 import { TableNode as R, TableRowNode as H, TableCellNode as k } from "@lexical/table";
-import { j as i } from "./jsx-runtime-d0aa4c5b.js";
-import { createContext as P, useState as B, useRef as h, useCallback as u, useContext as I, useMemo as M } from "react";
-import { c as m, s as f, B as x, S as z } from "./Popover-2318823a.js";
-import { LexicalComposer as q } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin as A } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable as D } from "@lexical/react/LexicalContentEditable";
+import { j as c } from "./jsx-runtime-d0aa4c5b.js";
+import { createContext as P, useState as I, useRef as p, useCallback as u, useContext as M, useMemo as B } from "react";
+import { c as d, s as q, B as f, S as z } from "./Popover-2318823a.js";
+import { LexicalComposer as A } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin as D } from "@lexical/react/LexicalRichTextPlugin";
 import V from "@lexical/react/LexicalErrorBoundary";
 import "react-dom";
 const W = ({
   text: e,
-  maxChars: a,
-  maxLines: n
+  maxChars: i,
+  maxLines: s
 }) => {
   if (e.length === 0)
     return 0;
-  const r = typeof n == "number", o = typeof a == "number";
+  const r = typeof s == "number", o = typeof i == "number";
   if (!r && !o)
     return e.length;
-  let s = 0, t = 0;
-  for (; t < e.length && (!r || s < n) && (!o || t < a); )
+  let n = 0, t = 0;
+  for (; t < e.length && (!r || n < s) && (!o || t < i); )
     e[t] === `
-` && s++, t++;
+` && n++, t++;
   return e.slice(0, t).length;
 }, J = ({
   editor: e,
-  maxChars: a,
-  maxLines: n
+  maxChars: i,
+  maxLines: s
 }) => {
-  const r = p(), o = r.getTextContent(), s = W({ text: o, maxChars: a, maxLines: n }), t = o.length - s, l = r.select().anchor;
-  S(e, l, t);
-  const d = r.getLastChild();
-  return d instanceof T && d.getChildrenSize() === 0 && d.remove(), t;
-}, O = (e) => e[0] === "{", ge = (e, a, n) => {
+  const r = h(), o = r.getTextContent(), n = W({ text: o, maxChars: i, maxLines: s }), t = o.length - n, m = r.select().anchor;
+  E(e, m, t);
+  const l = r.getLastChild();
+  return l instanceof T && l.getChildrenSize() === 0 && l.remove(), t;
+}, O = (e) => e[0] === "{", xe = (e, i, s) => {
   let r = 0;
   const o = C({
-    nodes: a,
+    nodes: i,
     editable: !1
   });
   if (e)
     try {
       if (typeof e == "string" && !O(e))
         o.update(() => {
-          const t = p(), c = y();
-          c.append($(e.trim())), t.append(c);
+          const t = h(), a = y();
+          a.append(S(e.trim())), t.append(a);
         });
       else {
         const t = o.parseEditorState(e, () => {
           r = J({
             editor: o,
-            maxLines: n == null ? void 0 : n.maxLines
+            maxLines: s == null ? void 0 : s.maxLines
           });
         });
         t.isEmpty() || o.setEditorState(t);
@@ -63,62 +62,62 @@ const W = ({
     } catch (t) {
       console.error(t);
     }
-  let s = "";
+  let n = "";
   return o.update(() => {
-    s = N(o);
-  }), { html: s, trimCount: r };
-}, Ce = [
-  F,
-  L,
+    n = N(o);
+  }), { html: n, trimCount: r };
+}, be = [
   w,
-  j,
-  E,
   v,
+  L,
+  j,
+  $,
+  F,
   R,
   H,
   k
-], Q = m({
+], Q = d({
   fontWeight: "bold"
-}), Y = m({
+}), G = d({
   fontStyle: "italic"
-}), G = m({
+}), K = d({
   textDecoration: "underline"
-}), K = m({
+}), U = d({
   listStyleType: "none"
-}), U = m({
+}), X = d({
   borderLeft: "4px solid #ccc",
   color: "#666",
   fontStyle: "italic",
   margin: "1.5em 10px",
   padding: "0.5em 10px"
-}), X = {
-  quote: U().className,
+}), Y = {
+  quote: X().className,
   text: {
     bold: Q().className,
-    italic: Y().className,
-    underline: G().className
+    italic: G().className,
+    underline: K().className
   },
   list: {
     nested: {
-      listitem: K().className
+      listitem: U().className
     }
   }
-}, b = P({ hasFocus: !1, editorRef: { current: null } }), Z = ({ onBlur: e }) => {
-  const [a, n] = B(!1), r = h(null), o = u(() => {
-    n(!0), r.current && window.clearTimeout(r.current);
-  }, []), s = u(() => {
+}, x = P({ hasFocus: !1, editorRef: { current: null } }), Z = ({ onBlur: e }) => {
+  const [i, s] = I(!1), r = p(null), o = u(() => {
+    s(!0), r.current && window.clearTimeout(r.current);
+  }, []), n = u(() => {
     r.current = window.setTimeout(() => {
-      n(!1), e == null || e();
+      s(!1), e == null || e();
     }, 0);
   }, [e]);
   return {
-    hasFocus: a,
+    hasFocus: i,
     attributes: {
       onFocus: o,
-      onBlur: s
+      onBlur: n
     }
   };
-}, Ne = () => I(b), _ = f("div", {
+}, ge = () => M(x), _ = q("div", {
   border: "1px solid $borderDarker",
   borderRadius: "$md",
   position: "relative",
@@ -148,34 +147,10 @@ const W = ({
       }
     }
   ]
-}), ee = f(D, {}, {
-  padding: "0 $4",
-  overflowY: "auto",
-  maxHeight: "30rem",
-  // backgroundColor: "white",
-  "&:focus-visible": {
-    outline: "none"
-  },
-  ".main-content": {
-    padding: 12,
-    border: "1px solid $gray100",
-    borderRadius: "$md",
-    position: "relative",
-    "&::before": {
-      content: "Hovedinnhold",
-      position: "absolute",
-      top: -10,
-      left: 16,
-      backgroundColor: "white",
-      padding: "0 $1",
-      fontSize: 12,
-      color: "$gray500"
-    }
-  }
-}), te = ({
+}), ee = ({
   isLoading: e
-}) => /* @__PURE__ */ i.jsx(
-  x,
+}) => /* @__PURE__ */ c.jsx(
+  f,
   {
     css: {
       visibility: e ? "visible" : "hidden",
@@ -184,51 +159,44 @@ const W = ({
       right: "1rem",
       display: "flex"
     },
-    children: /* @__PURE__ */ i.jsx(z, {})
+    children: /* @__PURE__ */ c.jsx(z, {})
   }
-), Te = ({
+), Ce = ({
   isLoading: e,
-  children: a,
-  placeholderText: n,
+  children: i,
+  placeholderText: s,
   nodes: r,
   plugins: o,
-  toolbar: s
+  toolbar: n,
+  content: t
 }) => {
-  const { hasFocus: t, attributes: c } = Z({}), l = h(null), d = M(() => ({ hasFocus: t, editorRef: l }), [t]);
-  return /* @__PURE__ */ i.jsx(b.Provider, { value: d, children: /* @__PURE__ */ i.jsxs(
-    q,
+  const { hasFocus: a, attributes: m } = Z({}), l = p(null), b = B(() => ({ hasFocus: a, editorRef: l }), [a]);
+  return /* @__PURE__ */ c.jsx(x.Provider, { value: b, children: /* @__PURE__ */ c.jsxs(
+    A,
     {
       initialConfig: {
         namespace: "CommentEditor",
         onError: (g) => {
           console.error(g);
         },
-        theme: X,
+        theme: Y,
         nodes: r,
         editable: !0
       },
       children: [
-        /* @__PURE__ */ i.jsxs(
+        /* @__PURE__ */ c.jsxs(
           _,
           {
             ref: l,
-            hasFocus: t,
-            ...c,
+            hasFocus: a,
+            ...m,
             children: [
-              /* @__PURE__ */ i.jsx(
-                A,
+              /* @__PURE__ */ c.jsx(
+                D,
                 {
-                  contentEditable: /* @__PURE__ */ i.jsx(
-                    ee,
-                    {
-                      css: {
-                        paddingTop: 16,
-                        paddingBottom: 16
-                      }
-                    }
-                  ),
-                  placeholder: n ? /* @__PURE__ */ i.jsx(
-                    x,
+                  contentEditable: t,
+                  placeholder: s ? /* @__PURE__ */ c.jsx(
+                    f,
                     {
                       css: {
                         position: "absolute",
@@ -238,29 +206,29 @@ const W = ({
                         pointerEvents: "none",
                         fontSize: "$sm"
                       },
-                      children: n
+                      children: s
                     }
                   ) : null,
                   ErrorBoundary: V
                 }
               ),
               o,
-              /* @__PURE__ */ i.jsx(te, { isLoading: e }),
-              s
+              /* @__PURE__ */ c.jsx(ee, { isLoading: e }),
+              n
             ]
           }
         ),
-        /* @__PURE__ */ i.jsx(i.Fragment, { children: a })
+        /* @__PURE__ */ c.jsx(c.Fragment, { children: i })
       ]
     }
   ) });
 };
 export {
-  Te as RichTextEditor,
-  Ce as defaultNodes,
+  Ce as RichTextEditor,
+  be as defaultNodes,
   O as isJSON,
-  b as richTextContext,
-  ge as stateToHTML,
+  x as richTextContext,
+  xe as stateToHTML,
   Z as useHasFocusWithin,
-  Ne as useRichTextContext
+  ge as useRichTextContext
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",

package/src/lib/rich-text/Editor.tsx

@@ -1,4 +1,4 @@
-import { useRef, type ReactNode, useMemo } from "react";
+import { useRef, type ReactNode, useMemo, type ReactElement } from "react";
 import { Box, Spinner, styled } from "../ui/ui";
 import { type InitialConfigType, LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
@@ -42,34 +42,6 @@ const Container = styled("div", {
   ],
 });
 
-const NewText = styled(ContentEditable, {}, {
-  padding: "0 $4",
-  overflowY: "auto",
-  maxHeight: "30rem",
-  // backgroundColor: "white",
-  "&:focus-visible": {
-    outline: "none",
-  },
-
-  ".main-content": {
-    padding: 12,
-    border: "1px solid $gray100",
-    borderRadius: "$md",
-    position: "relative",
-
-    "&::before": {
-      content: "Hovedinnhold",
-      position: "absolute",
-      top: -10,
-      left: 16,
-      backgroundColor: "white",
-      padding: "0 $1",
-      fontSize: 12,
-      color: "$gray500",
-    },
-  },
-});
-
 const EditorSpinner = ({
   isLoading,
 }: {
@@ -97,6 +69,7 @@ export const RichTextEditor = ({
   nodes,
   plugins,
   toolbar,
+  content,
 }: {
   isLoading: boolean;
   children: ReactNode;
@@ -104,6 +77,7 @@ export const RichTextEditor = ({
   nodes: InitialConfigType["nodes"];
   plugins?: ReactNode;
   toolbar?: ReactNode;
+  content: ReactElement;
 }) => {
   const { hasFocus, attributes } = useHasFocusWithin({});
   const editorRef = useRef<HTMLDivElement>(null);
@@ -128,14 +102,7 @@ export const RichTextEditor = ({
           {...attributes}
         >
           <RichTextPlugin
-            contentEditable={
-              <NewText
-                css={{
-                  paddingTop: 16,
-                  paddingBottom: 16,
-                }}
-              />
-            }
+            contentEditable={content}
             placeholder={
               placeholderText ? (
                 <Box