@valbuild/ui 0.19.0 → 0.20.2

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -12,12 +12,13 @@ import { ImageNode } from "./Nodes/ImageNode";
 import { AutoFocus } from "./Plugins/AutoFocus";
 import ImagesPlugin from "./Plugins/ImagePlugin";
 import Toolbar from "./Plugins/Toolbar";
-import { AnyRichTextOptions, RichText } from "@valbuild/core";
+import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
 import { HeadingNode } from "@lexical/rich-text";
 import { toLexical } from "./conversion";
+import { useValOverlayContext } from "../ValOverlayContext";
 
 export interface RichTextEditorProps {
-  richtext: RichText<AnyRichTextOptions>;
+  richtext: RichTextSource<AnyRichTextOptions>;
   onEditor?: (editor: LexicalEditor) => void; // Not the ideal way of passing the editor to the upper context, we need it to be able to save
 }
 
@@ -25,10 +26,13 @@ function onError(error: any) {
   console.error(error);
 }
 
+const TOOLBAR_HEIGHT = 28;
+
 export const RichTextEditor: FC<RichTextEditorProps> = ({
   richtext,
   onEditor,
 }) => {
+  const { windowSize } = useValOverlayContext();
   const prePopulatedState = (editor: LexicalEditor) => {
     editor.setEditorState(
       editor.parseEditorState({ root: toLexical(richtext) })
@@ -39,7 +43,6 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
     editorState: prePopulatedState,
     nodes: [HeadingNode, ImageNode, ListNode, ListItemNode],
     theme: {
-      root: "p-4 bg-fill text-white font-roboto border-b border-highlight",
       text: {
         bold: "font-semibold",
         underline: "underline",
@@ -68,7 +71,18 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
       <AutoFocus />
       <Toolbar onEditor={onEditor} />
       <RichTextPlugin
-        contentEditable={<LexicalContentEditable className="outline-none" />}
+        contentEditable={
+          <div
+            className="text-white border-b border-highlight font-roboto"
+            style={{
+              minHeight: windowSize?.innerHeight
+                ? windowSize?.innerHeight - TOOLBAR_HEIGHT
+                : undefined,
+            }}
+          >
+            <LexicalContentEditable className="p-4 outline-none bg-fill" />
+          </div>
+        }
         placeholder={<div className="">Enter some text...</div>}
         ErrorBoundary={LexicalErrorBoundary}
       />

package/src/components/RichTextEditor/conversion.ts

@@ -154,7 +154,7 @@ function getFileExtFromUrl(url: string): string | undefined {
 }
 
 export function toLexical(
-  richtext: RichTextSource<AnyRichTextOptions> | RichText<AnyRichTextOptions>
+  richtext: RichTextSource<AnyRichTextOptions>
 ): LexicalRootNode {
   return {
     ...COMMON_LEXICAL_PROPS,

package/src/components/ValOverlay.tsx

@@ -8,7 +8,12 @@ import {
 } from "react";
 import { Session } from "../dto/Session";
 import { ValMenu } from "./ValMenu";
-import { EditMode, Theme, ValOverlayContext } from "./ValOverlayContext";
+import {
+  EditMode,
+  Theme,
+  ValOverlayContext,
+  WindowSize,
+} from "./ValOverlayContext";
 import { Remote } from "../utils/Remote";
 import { ValWindow } from "./ValWindow";
 import { result } from "@valbuild/core/fp";
@@ -17,6 +22,7 @@ import {
   FileSource,
   Internal,
   RichText,
+  RichTextSource,
   SerializedSchema,
   SourcePath,
   VAL_EXTENSION,
@@ -83,6 +89,8 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
     });
   }, [windowTarget?.path]);
 
+  const [windowSize, setWindowSize] = useState<WindowSize>();
+
   return (
     <ValOverlayContext.Provider
       value={{
@@ -94,6 +102,8 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
         highlight,
         setHighlight,
         setTheme,
+        windowSize,
+        setWindowSize,
       }}
     >
       <div data-mode={theme}>
@@ -137,7 +147,9 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
               selectedSource[VAL_EXTENSION] === "richtext" && (
                 <RichTextField
                   registerPatchCallback={initPatchCallback(windowTarget.path)}
-                  defaultValue={selectedSource as RichText<AnyRichTextOptions>}
+                  defaultValue={
+                    selectedSource as RichTextSource<AnyRichTextOptions>
+                  }
                 />
               )}
             {selectedSource &&
@@ -256,7 +268,7 @@ function RichTextField({
   registerPatchCallback,
 }: {
   registerPatchCallback: (callback: PatchCallback) => void;
-  defaultValue?: RichText<AnyRichTextOptions>;
+  defaultValue?: RichTextSource<AnyRichTextOptions>;
 }) {
   const [editor, setEditor] = useState<LexicalEditor | null>(null);
   useEffect(() => {
@@ -301,7 +313,7 @@ function RichTextField({
         ({
           children: [],
           [VAL_EXTENSION]: "root",
-        } as unknown as RichText<AnyRichTextOptions>)
+        } as unknown as RichTextSource<AnyRichTextOptions>)
       }
     />
   );

package/src/components/ValOverlayContext.tsx

@@ -5,6 +5,11 @@ import { ValApi } from "@valbuild/core";
 
 export type Theme = "dark" | "light";
 export type EditMode = "off" | "hover" | "window" | "full";
+export type WindowSize = {
+  width: number;
+  height: number;
+  innerHeight: number;
+};
 
 export const ValOverlayContext = React.createContext<{
   api: ValApi;
@@ -15,6 +20,8 @@ export const ValOverlayContext = React.createContext<{
   setEditMode: Dispatch<SetStateAction<EditMode>>;
   theme: Theme;
   setTheme: (theme: Theme) => void;
+  setWindowSize: (size: WindowSize) => void;
+  windowSize?: WindowSize;
 }>({
   get api(): never {
     throw Error(
@@ -56,6 +63,16 @@ export const ValOverlayContext = React.createContext<{
       "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
     );
   },
+  get setWindowSize(): never {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
+  get windowSize(): never {
+    throw Error(
+      "ValOverlayContext not found. Ensure components are wrapped by ValOverlayProvider!"
+    );
+  },
 });
 
 export function useValOverlayContext() {

package/src/components/ValWindow.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AnyRichTextOptions, RichText as RichTextType } from "@valbuild/core";
+import {
+  AnyRichTextOptions,
+  RichTextSource as RichTextSourceType,
+} from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { FormContainer } from "./forms/FormContainer";
 import { ImageForm } from "./forms/ImageForm";
@@ -123,7 +126,7 @@ export const RichText: Story = {
                   ],
                 },
               ],
-            } as RichTextType<AnyRichTextOptions>
+            } as RichTextSourceType<AnyRichTextOptions>
           }
         />
       </FormContainer>

package/src/components/ValWindow.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { AlignJustify, X } from "react-feather";
 import classNames from "classnames";
 import { Resizable } from "react-resizable";
+import { useValOverlayContext } from "./ValOverlayContext";
 
 export type ValWindowProps = {
   children:
@@ -35,17 +36,34 @@ export function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
-
   //
-  const [size, setSize] = useState<{ height: number; width: number }>();
+  const { windowSize, setWindowSize } = useValOverlayContext();
+  useEffect(() => {
+    if (!windowSize) {
+      setWindowSize({
+        height: MIN_HEIGHT,
+        width: MIN_WIDTH,
+        innerHeight:
+          MIN_HEIGHT -
+          (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+      });
+    }
+  }, [windowSize]);
   //
   const bottomRef = useRef<HTMLDivElement>(null);
 
   return (
     <Resizable
-      width={size?.width || MIN_WIDTH}
-      height={size?.height || MIN_HEIGHT}
-      onResize={(_, { size }) => setSize(size)}
+      width={windowSize?.width || MIN_WIDTH}
+      height={windowSize?.height || MIN_HEIGHT}
+      onResize={(_, { size }) =>
+        setWindowSize({
+          ...size,
+          innerHeight:
+            (windowSize?.height || MIN_HEIGHT) -
+            (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+        })
+      }
       handle={
         <div className="fixed bottom-0 right-0 cursor-se-resize">
           <svg
@@ -63,7 +81,7 @@ export function ValWindow({
       }
       draggableOpts={{}}
       className={classNames(
-        "absolute inset-0  w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
+        "absolute inset-0  tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75",
         {
           "opacity-0": !isInitialized,
           "opacity-100": isInitialized,
@@ -72,8 +90,8 @@ export function ValWindow({
     >
       <div
         style={{
-          width: size?.width || MIN_WIDTH,
-          height: size?.height || MIN_HEIGHT,
+          width: windowSize?.width || MIN_WIDTH,
+          height: windowSize?.height || MIN_HEIGHT,
           left: draggedPosition.left,
           top: draggedPosition.top,
         }}
@@ -108,10 +126,7 @@ export function ValWindow({
           <div
             className="relative overflow-scroll"
             style={{
-              height:
-                (size?.height || MIN_HEIGHT) -
-                (64 +
-                  (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+              height: windowSize?.innerHeight,
             }}
           >
             {Array.isArray(children) ? children.slice(1, -1) : children}

package/src/components/forms/Form.tsx

@@ -1,4 +1,4 @@
-import { AnyRichTextOptions, RichText } from "@valbuild/core";
+import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
 import { LexicalEditor } from "lexical";
 import { useEffect, useState } from "react";
 import { RichTextEditor } from "../RichTextEditor/RichTextEditor";
@@ -18,7 +18,7 @@ export type Inputs = {
     | {
         status: "completed";
         type: "richtext";
-        data: RichText<AnyRichTextOptions>;
+        data: RichTextSource<AnyRichTextOptions>;
       };
 };
 

package/src/stories/RichTextEditor.stories.tsx

@@ -3,7 +3,7 @@ import {
   RichTextEditorProps,
 } from "../components/RichTextEditor/RichTextEditor";
 import { Meta, Story } from "@storybook/react";
-import { AnyRichTextOptions, RichText } from "@valbuild/core";
+import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
 
 export default {
   title: "RichTextEditor",
@@ -64,5 +64,5 @@ DropdownStory.args = {
         ],
       },
     ],
-  } as RichText<AnyRichTextOptions>,
+  } as RichTextSource<AnyRichTextOptions>,
 };