@arkitektbedriftene/fe-lib 0.3.10 → 0.3.11

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

@@ -1,6 +1,6 @@
 import { type ReactNode, type ReactElement } from "react";
 import { type InitialConfigType } from "@lexical/react/LexicalComposer";
-export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, content, }: {
+export declare const RichTextEditor: ({ isLoading, children, placeholderText, nodes, plugins, toolbar, content, hideBorder, onBlur, }: {
     isLoading: boolean;
     children: ReactNode;
     placeholderText?: string | undefined;
@@ -8,4 +8,6 @@ export declare const RichTextEditor: ({ isLoading, children, placeholderText, no
     plugins?: ReactNode;
     toolbar?: ReactNode;
     content: ReactElement;
+    hideBorder?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
 }) => JSX.Element;

package/dist/rich-text.es.js

@@ -1,19 +1,19 @@
-import { createHeadlessEditor as C } from "@lexical/headless";
-import { $generateHtmlFromNodes as N } from "@lexical/html";
-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 { 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 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 { 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: i,
   maxLines: s
@@ -28,31 +28,31 @@ const W = ({
     e[t] === `
 ` && n++, t++;
   return e.slice(0, t).length;
-}, J = ({
+}, Q = ({
   editor: e,
   maxChars: i,
   maxLines: s
 }) => {
-  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) => {
+  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({
+  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 = h(), a = y();
-          a.append(S(e.trim())), t.append(a);
+          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: s == null ? void 0 : s.maxLines
           });
@@ -64,48 +64,48 @@ const W = ({
     }
   let n = "";
   return o.update(() => {
-    n = N(o);
+    n = y(o);
   }), { html: n, trimCount: r };
-}, be = [
+}, Ce = [
+  R,
+  H,
   w,
   v,
   L,
   j,
-  $,
-  F,
-  R,
-  H,
-  k
-], Q = d({
+  k,
+  P,
+  I
+], K = d({
   fontWeight: "bold"
-}), G = d({
+}), U = d({
   fontStyle: "italic"
-}), K = d({
+}), X = d({
   textDecoration: "underline"
-}), U = d({
+}), Y = d({
   listStyleType: "none"
-}), X = d({
+}), Z = d({
   borderLeft: "4px solid #ccc",
   color: "#666",
   fontStyle: "italic",
   margin: "1.5em 10px",
   padding: "0.5em 10px"
-}), Y = {
-  quote: X().className,
+}), _ = {
+  quote: Z().className,
   text: {
-    bold: Q().className,
-    italic: G().className,
-    underline: K().className
+    bold: K().className,
+    italic: U().className,
+    underline: X().className
   },
   list: {
     nested: {
-      listitem: U().className
+      listitem: Y().className
     }
   }
-}, x = P({ hasFocus: !1, editorRef: { current: null } }), Z = ({ onBlur: e }) => {
-  const [i, s] = I(!1), r = p(null), o = 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 = u(() => {
+  }, []), n = h(() => {
     r.current = window.setTimeout(() => {
       s(!1), e == null || e();
     }, 0);
@@ -117,7 +117,7 @@ const W = ({
       onBlur: n
     }
   };
-}, ge = () => M(x), _ = q("div", {
+}, Ne = () => q(b), te = A("div", {
   border: "1px solid $borderDarker",
   borderRadius: "$md",
   position: "relative",
@@ -147,10 +147,10 @@ const W = ({
       }
     }
   ]
-}), ee = ({
+}), oe = ({
   isLoading: e
 }) => /* @__PURE__ */ c.jsx(
-  f,
+  x,
   {
     css: {
       visibility: e ? "visible" : "hidden",
@@ -159,44 +159,47 @@ const W = ({
       right: "1rem",
       display: "flex"
     },
-    children: /* @__PURE__ */ c.jsx(z, {})
+    children: /* @__PURE__ */ c.jsx(D, {})
   }
-), Ce = ({
+), Te = ({
   isLoading: e,
   children: i,
   placeholderText: s,
   nodes: r,
   plugins: o,
   toolbar: n,
-  content: t
+  content: t,
+  hideBorder: l,
+  onBlur: m
 }) => {
-  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,
+  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: Y,
+        theme: _,
         nodes: r,
         editable: !0
       },
       children: [
         /* @__PURE__ */ c.jsxs(
-          _,
+          te,
           {
-            ref: l,
+            ref: u,
             hasFocus: a,
-            ...m,
+            hideBorder: l,
+            ...g,
             children: [
               /* @__PURE__ */ c.jsx(
-                D,
+                W,
                 {
                   contentEditable: t,
                   placeholder: s ? /* @__PURE__ */ c.jsx(
-                    f,
+                    x,
                     {
                       css: {
                         position: "absolute",
@@ -209,11 +212,11 @@ const W = ({
                       children: s
                     }
                   ) : null,
-                  ErrorBoundary: V
+                  ErrorBoundary: J
                 }
               ),
               o,
-              /* @__PURE__ */ c.jsx(ee, { isLoading: e }),
+              /* @__PURE__ */ c.jsx(oe, { isLoading: e }),
               n
             ]
           }
@@ -224,11 +227,11 @@ const W = ({
   ) });
 };
 export {
-  Ce as RichTextEditor,
-  be as defaultNodes,
-  O as isJSON,
-  x as richTextContext,
-  xe as stateToHTML,
-  Z as useHasFocusWithin,
-  ge as useRichTextContext
+  Te as RichTextEditor,
+  Ce as defaultNodes,
+  G as isJSON,
+  b as richTextContext,
+  ge as stateToHTML,
+  ee as useHasFocusWithin,
+  Ne as useRichTextContext
 };

package/package.json

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

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

@@ -2,7 +2,6 @@ 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";
@@ -70,6 +69,8 @@ export const RichTextEditor = ({
   plugins,
   toolbar,
   content,
+  hideBorder,
+  onBlur,
 }: {
   isLoading: boolean;
   children: ReactNode;
@@ -78,8 +79,10 @@ export const RichTextEditor = ({
   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]);
 
@@ -99,6 +102,7 @@ export const RichTextEditor = ({
         <Container
           ref={editorRef}
           hasFocus={hasFocus}
+          hideBorder={hideBorder}
           {...attributes}
         >
           <RichTextPlugin