@valbuild/ui 0.18.0 → 0.20.0

package/jest.config.js

@@ -0,0 +1,4 @@
+/** @type {import("jest").Config} */
+module.exports = {
+  preset: "../../jest.preset",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -16,17 +16,19 @@
     "@lexical/utils": "^0.10.0",
     "@types/express": "^4.17.17",
     "@types/react": "^18.0.26",
+    "@valbuild/core": "~0.20.0",
     "classnames": "^2.3.2",
     "esbuild": "^0.17.19",
     "lexical": "^0.10.0",
     "react-feather": "^2.0.10",
+    "react-resizable": "^3.0.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
-    "zod": "^3.22.2",
-    "@valbuild/core": "~0.18.0"
+    "zod": "^3.22.2"
   },
   "devDependencies": {
+    "@lexical/headless": "^0.10.0",
     "@storybook/addon-essentials": "^7.0.12",
     "@storybook/addon-interactions": "^7.0.12",
     "@storybook/addon-links": "^7.0.12",
@@ -36,6 +38,7 @@
     "@storybook/react": "^7.0.12",
     "@storybook/react-vite": "^7.0.12",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/react-resizable": "^3.0.5",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "prop-types": "^15.8.1",

package/src/assets/icons/Bold.tsx

@@ -3,6 +3,8 @@ import { FC } from "react";
 const Bold: FC<{ className?: string }> = ({ className }) => {
   return (
     <svg
+      height={12}
+      width={12}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill="none"
@@ -11,8 +13,6 @@ const Bold: FC<{ className?: string }> = ({ className }) => {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={className}
-      width={25}
-      height={25}
     >
       <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
       <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>

package/src/assets/icons/Chevron.tsx

@@ -3,8 +3,8 @@ import { FC } from "react";
 const Chevron: FC<{ className?: string }> = ({ className }) => {
   return (
     <svg
-      width="16"
-      height="16"
+      width="10"
+      height="10"
       viewBox="0 0 12 12"
       xmlns="http://www.w3.org/2000/svg"
       className={className}

package/src/assets/icons/ImageIcon.tsx

@@ -3,8 +3,8 @@ import { FC } from "react";
 const ImageIcon: FC<{ className?: string }> = ({ className }) => {
   return (
     <svg
-      width="9"
-      height="10"
+      width="12"
+      height="12"
       viewBox="0 0 9 10"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

package/src/assets/icons/Italic.tsx

@@ -11,8 +11,8 @@ const Italic: FC<{ className?: string }> = ({ className }) => {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={className}
-      width={25}
-      height={25}
+      width={12}
+      height={12}
     >
       <line x1="19" y1="4" x2="10" y2="4"></line>
       <line x1="14" y1="20" x2="5" y2="20"></line>

package/src/assets/icons/Strikethrough.tsx

@@ -8,8 +8,8 @@ const Strikethrough: FC<{ className?: string }> = ({ className }) => {
       stroke="currentColor"
       strokeWidth="1"
       className={className}
-      width={25}
-      height={25}
+      width={12}
+      height={12}
     >
       <path
         fillRule="evenodd"

package/src/assets/icons/Underline.tsx

@@ -11,8 +11,8 @@ const Underline: FC<{ className?: string }> = ({ className }) => {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={className}
-      width={25}
-      height={25}
+      width={12}
+      height={12}
     >
       <path d="M18 4V11C18 14.3137 15.3137 17 12 17C8.68629 17 6 14.3137 6 11V4M4 21H20" />
     </svg>

package/src/components/Button.tsx

@@ -40,7 +40,7 @@ const Button: FC<ButtonProps> = ({
     <button
       disabled={disabled}
       className={classNames(
-        "font-sans font-[12px] tracking-[0.04em] py-[8px] px-[12px] h-[40px] rounded whitespace-nowrap group relative text-primary",
+        "font-sans font-[12px] tracking-[0.04em] py-1 px-2 rounded whitespace-nowrap group relative text-primary",
         {
           "font-bold": variant === "primary",
           "bg-base hover:bg-base text-fill disabled:bg-fill disabled:text-base":
@@ -53,7 +53,7 @@ const Button: FC<ButtonProps> = ({
     >
       {tooltip && (
         <div
-          className={`absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-base hidden group-hover:block`}
+          className={`absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-primary hidden group-hover:block`}
         >
           <div>{tooltip}</div>
         </div>

package/src/components/Dropdown.tsx

@@ -48,7 +48,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   }, []);
 
   return (
-    <div ref={dropdownRef}>
+    <div className="text-[12px]" ref={dropdownRef}>
       <Button
         onClick={(ev) => {
           ev.preventDefault();
@@ -68,7 +68,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         </span>
       </Button>
       {isOpen && (
-        <div className="absolute left-0 mt-2 w-48 border shadow-lg font-mono font-[500] tracking-[0.04em] text-[14px] border-base text-primary bg-border z-10">
+        <div className="absolute left-0 mt-2 w-48 shadow-lg font-mono text-[14px] text-primary bg-border z-overlay">
           <div className="py-1 rounded-md">
             {options?.map((option, idx) => (
               <button

package/src/components/RichTextEditor/Nodes/ImageNode.tsx

@@ -6,80 +6,65 @@ import {
   Spread,
 } from "lexical";
 
-export interface ImagePayload {
-  altText: string;
-  height?: number;
-  key?: NodeKey;
-  maxWidth?: number;
+export type ImagePayload = {
   src: string;
+  sha256?: string;
+  fileExt?: string;
+  altText?: string;
+  height?: number;
   width?: number;
-}
+};
 
-export type SerializedImageNode = Spread<
-  {
-    altText: string;
-    width?: number;
-    maxWidth: number;
-    height?: number;
-    src: string;
-  },
-  SerializedLexicalNode
->;
+export type SerializedImageNode = Spread<ImagePayload, SerializedLexicalNode>;
 
 export class ImageNode extends DecoratorNode<JSX.Element> {
   __src: string;
-  __altText: string;
-  __width: "inherit" | number;
-  __height: "inherit" | number;
-  __maxWidth: number;
+  __sha256?: string;
+  __imageFileExt?: string;
+  __altText?: string;
+  __width?: number;
+  __height?: number;
 
   static getType(): string {
     return "image";
   }
 
   static clone(node: ImageNode): ImageNode {
-    return new ImageNode(
-      node.__src,
-      node.__altText,
-      node.__width,
-      node.__height,
-      node.__maxWidth,
-      node.__key
-    );
+    return new ImageNode({
+      src: node.__src,
+      sha256: node.__sha256,
+      altText: node.__altText,
+      width: node.__width,
+      height: node.__height,
+      fileExt: node.__fileExt,
+    });
   }
 
-  constructor(
-    src: string,
-    altText?: string,
-    width?: "inherit" | number,
-    height?: "inherit" | number,
-    maxWidth?: number,
-    key?: NodeKey
-  ) {
+  constructor(payload: ImagePayload, key?: NodeKey) {
     super(key);
-    this.__src = src;
-    this.__altText = altText || "";
-    this.__width = width || "inherit";
-    this.__height = height || "inherit";
-    this.__maxWidth = maxWidth || 0;
+    this.__src = payload.src;
+    this.__altText = payload.altText;
+    this.__width = payload.width;
+    this.__height = payload.height;
+    this.__imageFileExt = payload.fileExt;
+    this.__sha256 = payload.sha256;
   }
 
   exportJSON(): SerializedImageNode {
     return {
       altText: this.__altText,
-      height: this.__height === "inherit" ? 0 : this.__height,
-      maxWidth: this.__maxWidth,
+      height: this.__width,
       src: this.__src,
       type: "image",
       version: 1,
-      width: this.__width === "inherit" ? 0 : this.__width,
+      fileExt: this.__imageFileExt,
+      width: this.__width,
+      sha256: this.__sha256,
     };
   }
 
   static importJSON(serializedNode: SerializedImageNode): ImageNode {
-    const { src } = serializedNode;
-    const node = $createImageNode(src);
-    return node;
+    return $createImageNode(serializedNode);
   }
 
   createDOM(): HTMLElement {
@@ -92,24 +77,30 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
 
   decorate(): JSX.Element {
     return (
-      <img
-        key={this.__key}
+      <ImageComponent
         src={this.__src}
-        alt={this.__altText}
-        width={this.__width}
+        altText={this.__altText}
+        empty={this.__empty}
         height={this.__height}
+        nodeKey={this.getKey()}
       />
     );
   }
 }
-export function $createImageNode(
-  src: string,
-  altText?: string,
-  width?: "inherit" | number,
-  height?: "inherit" | number,
-  maxWidth?: number
-): ImageNode {
-  return new ImageNode(src, altText, width, height, maxWidth);
+
+function ImageComponent(props: {
+  empty: boolean;
+  altText?: string;
+  height?: number;
+  nodeKey?: NodeKey;
+  src: string;
+  width?: number;
+}): JSX.Element {
+  return <img src={props.src}></img>;
+}
+
+export function $createImageNode(payload: ImagePayload): ImageNode {
+  return new ImageNode(payload);
 }
 
 export function $isImageNode(node: LexicalNode | null): boolean {

package/src/components/RichTextEditor/Plugins/ImagePlugin.tsx

@@ -29,12 +29,11 @@ export default function ImagesPlugin(): JSX.Element | null {
       editor.registerCommand<InsertImagePayload>(
         INSERT_IMAGE_COMMAND,
         (payload) => {
-          const imageNode = $createImageNode(payload.src);
+          const imageNode = $createImageNode(payload);
           $insertNodes([imageNode]);
           if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
             $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
           }
-
           return true;
         },
         COMMAND_PRIORITY_EDITOR

package/src/components/RichTextEditor/Plugins/Toolbar.tsx

@@ -52,6 +52,7 @@ import Button from "../../Button";
 import Dropdown from "../../Dropdown";
 import UploadModal from "../../UploadModal";
 import { INSERT_IMAGE_COMMAND } from "./ImagePlugin";
+import { readImage } from "../../../utils/readImage";
 
 export interface ToolbarSettingsProps {
   fontsFamilies?: string[];
@@ -152,15 +153,15 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
         }
       }
 
-      setFontSize(
-        $getSelectionStyleValueForProperty(selection, "font-size", "15px")
-      );
-      setFontColor(
-        $getSelectionStyleValueForProperty(selection, "color", "#000")
-      );
-      setFontFamily(
-        $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
-      );
+      // setFontSize(
+      //   $getSelectionStyleValueForProperty(selection, "font-size", "15px")
+      // );
+      // setFontColor(
+      //   $getSelectionStyleValueForProperty(selection, "color", "#000")
+      // );
+      // setFontFamily(
+      //   $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
+      // );
     }
   }, [activeEditor]);
 
@@ -276,16 +277,9 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
     });
   };
 
-  const uploadImage = (url: string, alt?: string) => {
-    editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-      altText: "URL image",
-      src: url,
-    });
-  };
-
   return (
-    <div className="flex flex-row items-center gap-6 p-2 overflow-clip">
-      <div className="flex flex-row gap-2">
+    <div className="sticky top-0 border-b bg-base border-highlight">
+      <div className="flex flex-row gap-1">
         <Dropdown
           options={Object.values(blockTypes)}
           label={
@@ -295,28 +289,12 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
             formatText(blockTypesLookup[selectedOption]);
           }}
         />
-        <Dropdown
-          onChange={changeFontFamily}
-          options={fontsFamilies ?? ["sans", "serif", "solina"]}
-          label={fontFamily}
-        />
-        <Dropdown
-          onChange={changeFontSize}
-          options={
-            fontSizes ??
-            [11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map((size) => `${size}px`)
-          }
-          label={fontSize}
-        />
-      </div>
-      <div className="flex flex-row gap-2">
         <Button
           variant="primary"
           onClick={(ev) => {
             ev.preventDefault();
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
           }}
-          tooltip="Format text as bold"
           active={isBold}
           icon={<Bold className={`${isBold && "stroke-[3px]"}`} />}
         />
@@ -338,27 +316,27 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
           }}
           icon={<Italic className={`${isItalic && "stroke-[3px]"}`} />}
         />
-        <Button
-          active={isUnderline}
-          onClick={(ev) => {
-            ev.preventDefault();
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-          }}
-          icon={<Underline className={`${isUnderline && "stroke-[3px]"}`} />}
-        />
+        <label className="flex items-center justify-center">
+          <ImageIcon />
+          <input
+            type="file"
+            hidden={true}
+            onChange={(ev) => {
+              ev.preventDefault();
+
+              readImage(ev)
+                .then((res) => {
+                  editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                    ...res,
+                  });
+                })
+                .catch((err) => {
+                  console.error("Error reading image", err);
+                });
+            }}
+          />
+        </label>
       </div>
-      <Button
-        icon={<ImageIcon />}
-        onClick={(ev) => {
-          ev.preventDefault();
-          setShowModal(true);
-        }}
-      ></Button>
-      <UploadModal
-        setShowModal={setShowModal}
-        showModal={showModal}
-        uploadImage={uploadImage}
-      />
     </div>
   );
 };

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,17 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  $createParagraphNode,
-  $createTextNode,
-  $getRoot,
-  LexicalEditor,
-  LexicalNode,
-} from "lexical";
-import {
-  ListItemNode,
-  ListNode,
-  $createListNode,
-  $createListItemNode,
-} from "@lexical/list";
+import { LexicalEditor } from "lexical";
+import { ListItemNode, ListNode } from "@lexical/list";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
@@ -23,18 +12,12 @@ import { ImageNode } from "./Nodes/ImageNode";
 import { AutoFocus } from "./Plugins/AutoFocus";
 import ImagesPlugin from "./Plugins/ImagePlugin";
 import Toolbar from "./Plugins/Toolbar";
-import {
-  RichText,
-  TextNode as ValTextNode,
-  HeadingNode as ValHeadingNode,
-  ListItemNode as ValListItemNode,
-  ParagraphNode as ValParagraphNode,
-  ListNode as ValListNode,
-} from "@valbuild/core";
-import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { AnyRichTextOptions, RichText } from "@valbuild/core";
+import { HeadingNode } from "@lexical/rich-text";
+import { toLexical } from "./conversion";
 
 export interface RichTextEditorProps {
-  richtext: RichText;
+  richtext: RichText<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
 }
 
@@ -42,92 +25,21 @@ function onError(error: any) {
   console.error(error);
 }
 
-type ValNode =
-  | ValTextNode
-  | ValHeadingNode
-  | ValListItemNode
-  | ValParagraphNode
-  | ValListNode;
-function toLexicalNode(node: ValNode): LexicalNode {
-  switch (node.type) {
-    case "heading":
-      return toLexicalHeadingNode(node);
-    case "listitem":
-      return toLexicalListItemNode(node);
-    case "paragraph":
-      return toLexicalParagraphNode(node);
-    case "list":
-      return toLexicalListNode(node);
-    case "text":
-      return toLexicalTextNode(node);
-  }
-}
-
-function toLexicalHeadingNode(heading: ValHeadingNode): LexicalNode {
-  const node = $createHeadingNode(heading.tag);
-  node.setFormat(heading.format || "");
-  node.setIndent(heading.indent || 0);
-  node.setDirection(heading.direction || "ltr");
-  node.append(...heading.children.map((child) => toLexicalNode(child)));
-  return node;
-}
-
-function toLexicalParagraphNode(paragraph: ValParagraphNode): LexicalNode {
-  const node = $createParagraphNode();
-  node.setFormat(paragraph.format || "");
-  node.setIndent(paragraph.indent || 0);
-  node.setDirection(paragraph.direction || "ltr");
-  node.append(...paragraph.children.map((child) => toLexicalNode(child)));
-  return node;
-}
-
-function toLexicalListItemNode(listItem: ValListItemNode): LexicalNode {
-  const node = $createListItemNode();
-  node.setFormat(listItem.format || "");
-  node.setIndent(listItem.indent || 0);
-  node.setDirection(listItem.direction || "ltr");
-  node.setValue(listItem.value);
-  node.setChecked(listItem.checked);
-  node.append(...listItem.children.map((child) => toLexicalNode(child)));
-  return node;
-}
-
-function toLexicalListNode(list: ValListNode): LexicalNode {
-  const node = $createListNode(list.listType, list.start);
-  node.setFormat(list.format || "");
-  node.setIndent(list.indent || 0);
-  node.setDirection(list.direction || "ltr");
-  node.append(...list.children.map((child) => toLexicalNode(child)));
-  return node;
-}
-
-function toLexicalTextNode(text: ValTextNode): LexicalNode {
-  const node = $createTextNode(text.text);
-  node.setFormat(text.format as any); // TODO: why is text.format numbers when we are trying it out?
-  text.indent && node.setIndent(text.indent);
-  text.direction && node.setDirection(text.direction);
-  node.setStyle(text.style || "");
-  node.setDetail(text.detail || 0);
-  return node;
-}
-
 export const RichTextEditor: FC<RichTextEditorProps> = ({
   richtext,
   onEditor,
 }) => {
-  const prePopulatedState = () => {
-    const root = $getRoot();
-    $getRoot().append(
-      ...richtext.children.map((child) => toLexicalNode(child))
+  const prePopulatedState = (editor: LexicalEditor) => {
+    editor.setEditorState(
+      editor.parseEditorState({ root: toLexical(richtext) })
     );
-    root.selectEnd();
   };
   const initialConfig = {
     namespace: "val",
     editorState: prePopulatedState,
     nodes: [HeadingNode, ImageNode, ListNode, ListItemNode],
     theme: {
-      root: "relative p-4 bg-base min-h-[200px] text-white font-roboto",
+      root: "p-4 bg-fill text-white font-roboto border-b border-highlight",
       text: {
         bold: "font-semibold",
         underline: "underline",
@@ -152,25 +64,17 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
     onError,
   };
   return (
-    <div className=" relative bg-base min-h-[200px] mt-2 border border-highlight rounded overflow-none resize">
-      <LexicalComposer initialConfig={initialConfig}>
-        <Toolbar onEditor={onEditor} />
-        <ImagesPlugin />
-        <RichTextPlugin
-          contentEditable={
-            <LexicalContentEditable className="relative bg-fill flex flex-col h-full w-full min-h-[200px] min-w-[566px] text-primary outline-none overflow-auto resize" />
-          }
-          placeholder={
-            <div className="absolute top-[calc(58px+1rem)] left-4 text-base/25 text-primary">
-              Enter some text...
-            </div>
-          }
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <ListPlugin />
-        <AutoFocus />
-        <HistoryPlugin />
-      </LexicalComposer>
-    </div>
+    <LexicalComposer initialConfig={initialConfig}>
+      <AutoFocus />
+      <Toolbar onEditor={onEditor} />
+      <RichTextPlugin
+        contentEditable={<LexicalContentEditable className="outline-none" />}
+        placeholder={<div className="">Enter some text...</div>}
+        ErrorBoundary={LexicalErrorBoundary}
+      />
+      <ListPlugin />
+      <ImagesPlugin />
+      <HistoryPlugin />
+    </LexicalComposer>
   );
 };