@arkitektbedriftene/fe-lib 0.3.9 → 0.3.11

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

@@ -1,10 +1,13 @@
-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, hideBorder, onBlur, }: {
     isLoading: boolean;
     children: ReactNode;
     placeholderText?: string | undefined;
     nodes: InitialConfigType["nodes"];
     plugins?: ReactNode;
     toolbar?: ReactNode;
+    content: ReactElement;
+    hideBorder?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
 }) => 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 { 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 V from "@lexical/react/LexicalErrorBoundary";
+import { createHeadlessEditor as T } from "@lexical/headless";
+import { $generateHtmlFromNodes as y } from "@lexical/html";
+import { $getRoot as p, ParagraphNode as S, $createParagraphNode as E, $createTextNode as $ } from "lexical";
+import { trimTextContentFromAnchor as F } from "@lexical/selection";
+import { AutoLinkNode as L, LinkNode as j } from "@lexical/link";
+import { ListNode as w, ListItemNode as v } from "@lexical/list";
+import { HeadingNode as R, QuoteNode as H } from "@lexical/rich-text";
+import { TableNode as k, TableRowNode as P, TableCellNode as I } from "@lexical/table";
+import { j as c } from "./jsx-runtime-d0aa4c5b.js";
+import { createContext as M, useState as B, useRef as f, useCallback as h, useContext as q, useMemo as z } from "react";
+import { c as d, s as A, B as x, S as D } from "./Popover-2318823a.js";
+import { LexicalComposer as V } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin as W } from "@lexical/react/LexicalRichTextPlugin";
+import J from "@lexical/react/LexicalErrorBoundary";
 import "react-dom";
-const W = ({
+const O = ({
   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 = ({
+}, Q = ({
   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 = p(), o = r.getTextContent(), n = O({ text: o, maxChars: i, maxLines: s }), t = o.length - n, m = r.select().anchor;
+  F(e, m, t);
+  const a = r.getLastChild();
+  return a instanceof S && a.getChildrenSize() === 0 && a.remove(), t;
+}, G = (e) => e[0] === "{", ge = (e, i, s) => {
   let r = 0;
-  const o = C({
-    nodes: a,
+  const o = T({
+    nodes: i,
     editable: !1
   });
   if (e)
     try {
-      if (typeof e == "string" && !O(e))
+      if (typeof e == "string" && !G(e))
         o.update(() => {
-          const t = p(), c = y();
-          c.append($(e.trim())), t.append(c);
+          const t = p(), l = E();
+          l.append($(e.trim())), t.append(l);
         });
       else {
         const t = o.parseEditorState(e, () => {
-          r = J({
+          r = Q({
             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 };
+    n = y(o);
+  }), { html: n, trimCount: r };
 }, Ce = [
-  F,
-  L,
-  w,
-  j,
-  E,
-  v,
   R,
   H,
-  k
-], Q = m({
+  w,
+  v,
+  L,
+  j,
+  k,
+  P,
+  I
+], K = d({
   fontWeight: "bold"
-}), Y = m({
+}), U = d({
   fontStyle: "italic"
-}), G = m({
+}), X = d({
   textDecoration: "underline"
-}), K = m({
+}), Y = d({
   listStyleType: "none"
-}), U = m({
+}), Z = d({
   borderLeft: "4px solid #ccc",
   color: "#666",
   fontStyle: "italic",
   margin: "1.5em 10px",
   padding: "0.5em 10px"
-}), X = {
-  quote: U().className,
+}), _ = {
+  quote: Z().className,
   text: {
-    bold: Q().className,
-    italic: Y().className,
-    underline: G().className
+    bold: K().className,
+    italic: U().className,
+    underline: X().className
   },
   list: {
     nested: {
-      listitem: K().className
+      listitem: Y().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(() => {
+}, b = M({ hasFocus: !1, editorRef: { current: null } }), ee = ({ onBlur: e }) => {
+  const [i, s] = B(!1), r = f(null), o = h(() => {
+    s(!0), r.current && window.clearTimeout(r.current);
+  }, []), n = h(() => {
     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", {
+}, Ne = () => q(b), te = A("div", {
   border: "1px solid $borderDarker",
   borderRadius: "$md",
   position: "relative",
@@ -148,33 +147,9 @@ 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 = ({
+}), oe = ({
   isLoading: e
-}) => /* @__PURE__ */ i.jsx(
+}) => /* @__PURE__ */ c.jsx(
   x,
   {
     css: {
@@ -184,50 +159,46 @@ const W = ({
       right: "1rem",
       display: "flex"
     },
-    children: /* @__PURE__ */ i.jsx(z, {})
+    children: /* @__PURE__ */ c.jsx(D, {})
   }
 ), Te = ({
   isLoading: e,
-  children: a,
-  placeholderText: n,
+  children: i,
+  placeholderText: s,
   nodes: r,
   plugins: o,
-  toolbar: s
+  toolbar: n,
+  content: t,
+  hideBorder: l,
+  onBlur: m
 }) => {
-  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: g } = ee({ onBlur: m }), u = f(null), C = z(() => ({ hasFocus: a, editorRef: u }), [a]);
+  return /* @__PURE__ */ c.jsx(b.Provider, { value: C, children: /* @__PURE__ */ c.jsxs(
+    V,
     {
       initialConfig: {
         namespace: "CommentEditor",
-        onError: (g) => {
-          console.error(g);
+        onError: (N) => {
+          console.error(N);
         },
-        theme: X,
+        theme: _,
         nodes: r,
         editable: !0
       },
       children: [
-        /* @__PURE__ */ i.jsxs(
-          _,
+        /* @__PURE__ */ c.jsxs(
+          te,
           {
-            ref: l,
-            hasFocus: t,
-            ...c,
+            ref: u,
+            hasFocus: a,
+            hideBorder: l,
+            ...g,
             children: [
-              /* @__PURE__ */ i.jsx(
-                A,
+              /* @__PURE__ */ c.jsx(
+                W,
                 {
-                  contentEditable: /* @__PURE__ */ i.jsx(
-                    ee,
-                    {
-                      css: {
-                        paddingTop: 16,
-                        paddingBottom: 16
-                      }
-                    }
-                  ),
-                  placeholder: n ? /* @__PURE__ */ i.jsx(
+                  contentEditable: t,
+                  placeholder: s ? /* @__PURE__ */ c.jsx(
                     x,
                     {
                       css: {
@@ -238,19 +209,19 @@ const W = ({
                         pointerEvents: "none",
                         fontSize: "$sm"
                       },
-                      children: n
+                      children: s
                     }
                   ) : null,
-                  ErrorBoundary: V
+                  ErrorBoundary: J
                 }
               ),
               o,
-              /* @__PURE__ */ i.jsx(te, { isLoading: e }),
-              s
+              /* @__PURE__ */ c.jsx(oe, { isLoading: e }),
+              n
             ]
           }
         ),
-        /* @__PURE__ */ i.jsx(i.Fragment, { children: a })
+        /* @__PURE__ */ c.jsx(c.Fragment, { children: i })
       ]
     }
   ) });
@@ -258,9 +229,9 @@ const W = ({
 export {
   Te as RichTextEditor,
   Ce as defaultNodes,
-  O as isJSON,
+  G as isJSON,
   b as richTextContext,
   ge as stateToHTML,
-  Z as useHasFocusWithin,
+  ee as useHasFocusWithin,
   Ne as useRichTextContext
 };

package/package.json

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

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

@@ -1,8 +1,7 @@
-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";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { lexicalTheme } from "./theme";
 import { useHasFocusWithin, richTextContext } from "./editorContext";
@@ -42,34 +41,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 +68,9 @@ export const RichTextEditor = ({
   nodes,
   plugins,
   toolbar,
+  content,
+  hideBorder,
+  onBlur,
 }: {
   isLoading: boolean;
   children: ReactNode;
@@ -104,8 +78,11 @@ export const RichTextEditor = ({
   nodes: InitialConfigType["nodes"];
   plugins?: ReactNode;
   toolbar?: ReactNode;
+  content: ReactElement;
+  hideBorder?: boolean;
+  onBlur?: () => void;
 }) => {
-  const { hasFocus, attributes } = useHasFocusWithin({});
+  const { hasFocus, attributes } = useHasFocusWithin({ onBlur });
   const editorRef = useRef<HTMLDivElement>(null);
   const contextValue = useMemo(() => ({ hasFocus, editorRef }), [hasFocus]);
 
@@ -125,17 +102,11 @@ export const RichTextEditor = ({
         <Container
           ref={editorRef}
           hasFocus={hasFocus}
+          hideBorder={hideBorder}
           {...attributes}
         >
           <RichTextPlugin
-            contentEditable={
-              <NewText
-                css={{
-                  paddingTop: 16,
-                  paddingBottom: 16,
-                }}
-              />
-            }
+            contentEditable={content}
             placeholder={
               placeholderText ? (
                 <Box