@arkitektbedriftene/fe-lib 0.3.7 → 0.3.9

package/dist/ui.es.js

@@ -1,5 +1,5 @@
-import { P as t, a as n, b as p } from "./Popover-e50ca73e.js";
-import { A as v, B as j, d as u, O as C, S as P, c as b, g as h, k as y, s as O } from "./Popover-e50ca73e.js";
+import { P as t, a as n, b as p } from "./Popover-2318823a.js";
+import { A as v, B as j, d as u, O as C, S as P, c as b, g as h, k as y, s as O } from "./Popover-2318823a.js";
 import { j as o } from "./jsx-runtime-d0aa4c5b.js";
 import { useState as i } from "react";
 import "react-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkitektbedriftene/fe-lib",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.es.js",
@@ -55,15 +55,15 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@floating-ui/react": "^0.26.0",
-    "lexical": "0.12.0",
-    "@lexical/headless": "0.12.0",
-    "@lexical/html": "0.12.0",
-    "@lexical/link": "0.12.0",
-    "@lexical/rich-text": "0.12.0",
-    "@lexical/table": "0.12.0",
-    "@lexical/selection": "0.12.0",
-    "@lexical/list": "0.12.0",
-    "@lexical/react": "0.12.0",
+    "lexical": "^0.12.0",
+    "@lexical/headless": "^0.12.0",
+    "@lexical/html": "^0.12.0",
+    "@lexical/link": "^0.12.0",
+    "@lexical/rich-text": "^0.12.0",
+    "@lexical/table": "^0.12.0",
+    "@lexical/selection": "^0.12.0",
+    "@lexical/list": "^0.12.0",
+    "@lexical/react": "^0.12.0",
     "@types/react": "*",
     "@types/react-dom": "*"
   },

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

@@ -1,12 +1,11 @@
-import type { ReactNode } from "react";
+import { useRef, type ReactNode, useMemo } 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 { useMergeRefs } from "@floating-ui/react";
 import { lexicalTheme } from "./theme";
-import { useHasFocusWithin, editorFocusContext } from "./editorFocus";
+import { useHasFocusWithin, richTextContext } from "./editorContext";
 
 const Container = styled("div", {
   border: "1px solid $borderDarker",
@@ -98,7 +97,6 @@ export const RichTextEditor = ({
   nodes,
   plugins,
   toolbar,
-  refs,
 }: {
   isLoading: boolean;
   children: ReactNode;
@@ -106,12 +104,13 @@ export const RichTextEditor = ({
   nodes: InitialConfigType["nodes"];
   plugins?: ReactNode;
   toolbar?: ReactNode;
-  refs?: React.RefObject<HTMLElement>[];
 }) => {
   const { hasFocus, attributes } = useHasFocusWithin({});
+  const editorRef = useRef<HTMLDivElement>(null);
+  const contextValue = useMemo(() => ({ hasFocus, editorRef }), [hasFocus]);
 
   return (
-    <editorFocusContext.Provider value={hasFocus}>
+    <richTextContext.Provider value={contextValue}>
       <LexicalComposer
         initialConfig={{
           namespace: "CommentEditor",
@@ -124,7 +123,7 @@ export const RichTextEditor = ({
         }}
       >
         <Container
-          ref={refs ? useMergeRefs(refs) : undefined}
+          ref={editorRef}
           hasFocus={hasFocus}
           {...attributes}
         >
@@ -162,6 +161,6 @@ export const RichTextEditor = ({
         {/* biome-ignore lint/complexity/noUselessFragments: <explanation> */}
         <>{children}</>
       </LexicalComposer>
-    </editorFocusContext.Provider>
+    </richTextContext.Provider>
   );
 };

package/src/lib/rich-text/{editorFocus.ts → editorContext.ts}

@@ -1,8 +1,6 @@
-import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { type RefObject, createContext, useCallback, useContext, useRef, useState } from "react";
 
-export const editorFocusContext = createContext(false);
-
-export const useIsEditorFocused = () => useContext(editorFocusContext);
+export const richTextContext = createContext({ hasFocus: false, editorRef: { current: null } } as { hasFocus: boolean, editorRef: RefObject<HTMLElement | null> });
 
 export const useHasFocusWithin = ({ onBlur }: { onBlur?: () => void }) => {
   const [hasFocus, setHasFocus] = useState(false);
@@ -30,3 +28,7 @@ export const useHasFocusWithin = ({ onBlur }: { onBlur?: () => void }) => {
     },
   };
 };
+
+export const useRichTextContext = () => {
+  return useContext(richTextContext);
+}

package/src/lib/rich-text/rich-text.ts

@@ -1,3 +1,4 @@
 export * from './state'
 export * from './config'
-export * from './Editor'
+export * from './Editor'
+export * from './editorContext'

package/vite.config.ts

@@ -26,13 +26,7 @@ export default defineConfig({
         "react",
         "react-dom",
         "lexical",
-        "@lexical/headless",
-        "@lexical/html",
-        "@lexical/link",
-        "@lexical/rich-text",
-        "@lexical/table",
-        "@lexical/selection",
-        "@lexical/list",
+        /^@lexical\/.*/,
       ],
       output: {
         globals: {

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const editorFocusContext: import("react").Context<boolean>;
-export declare const useIsEditorFocused: () => boolean;
-export declare const useHasFocusWithin: ({ onBlur }: {
-    onBlur?: (() => void) | undefined;
-}) => {
-    hasFocus: boolean;
-    attributes: {
-        onFocus: () => void;
-        onBlur: () => void;
-    };
-};