@valbuild/ui 0.20.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "sideEffects": false,
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -9,6 +9,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@lexical/link": "^0.10.0",
     "@lexical/list": "^0.10.0",
     "@lexical/react": "^0.10.0",
     "@lexical/rich-text": "^0.10.0",
@@ -16,10 +17,11 @@
     "@lexical/utils": "^0.10.0",
     "@types/express": "^4.17.17",
     "@types/react": "^18.0.26",
-    "@valbuild/core": "~0.20.0",
+    "@valbuild/core": "~0.21.0",
     "classnames": "^2.3.2",
     "esbuild": "^0.17.19",
     "lexical": "^0.10.0",
+    "marked": "^9.0.3",
     "react-feather": "^2.0.10",
     "react-resizable": "^3.0.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/src/components/Button.tsx

@@ -7,7 +7,6 @@ export interface ButtonProps
   icon?: React.ReactElement<SVGProps<SVGSVGElement>>;
   active?: boolean;
   disabled?: boolean;
-  tooltip?: string;
 }
 
 export function PrimaryButton({
@@ -34,7 +33,6 @@ const Button: FC<ButtonProps> = ({
   icon,
   // active = false,
   disabled = false,
-  tooltip,
 }) => {
   return (
     <button
@@ -51,13 +49,6 @@ const Button: FC<ButtonProps> = ({
       )}
       onClick={onClick}
     >
-      {tooltip && (
-        <div
-          className={`absolute bottom-[-75%] left-0 z-20 bg-black w-fit h-fit text-primary hidden group-hover:block`}
-        >
-          <div>{tooltip}</div>
-        </div>
-      )}
       <span className="flex flex-row items-center justify-center gap-2">
         {icon && icon}
         {children}

package/src/components/Dropdown.tsx

@@ -1,6 +1,7 @@
 import React, { SVGProps, useEffect, useRef, useState } from "react";
 import Chevron from "../assets/icons/Chevron";
 import Button from "./Button";
+import { useValOverlayContext } from "./ValOverlayContext";
 
 export interface DropdownProps {
   options: string[];
@@ -15,11 +16,11 @@ const Dropdown: React.FC<DropdownProps> = ({
   onChange,
   label,
   icon,
-  // variant = "primary",
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [selectedOption, setSelectedOption] = useState<number>(0);
+  const { windowSize } = useValOverlayContext();
 
   const handleToggle = () => {
     setIsOpen(!isOpen);
@@ -62,31 +63,37 @@ const Dropdown: React.FC<DropdownProps> = ({
           />
         }
       >
-        <span className="flex flex-row items-center justify-center gap-1">
-          {label}
-          {icon && icon}
-        </span>
-      </Button>
-      {isOpen && (
-        <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
-                key={option}
-                onClick={(ev) => {
-                  ev.preventDefault();
-                  handleSelect(option, idx);
-                }}
-                className={`w-full text-left px-4 py-2 hover:bg-base hover:text-highlight  ${
-                  idx === selectedOption && "font-bold bg-base hover:bg-base"
-                }`}
-              >
-                {option}
-              </button>
-            ))}
-          </div>
+        <div className="relative">
+          <span className="flex flex-row items-center justify-center gap-1">
+            {label}
+            {icon && icon}
+          </span>
+          {isOpen && (
+            <div
+              className="absolute -top-[4px] overflow-scroll shadow-lg -left-2 text-primary bg-border w-fit z-overlay"
+              style={{ maxHeight: windowSize?.innerHeight }}
+            >
+              <div className="flex flex-col ">
+                {options?.map((option, idx) => (
+                  <button
+                    key={option}
+                    onClick={(ev) => {
+                      ev.preventDefault();
+                      handleSelect(option, idx);
+                    }}
+                    className={`text-left px-2 py-1 hover:bg-base hover:text-highlight  ${
+                      idx === selectedOption &&
+                      "font-bold bg-base hover:bg-base truncate"
+                    }`}
+                  >
+                    {option}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
-      )}
+      </Button>
     </div>
   );
 };

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

@@ -8,8 +8,6 @@ import {
 
 export type ImagePayload = {
   src: string;
-  sha256?: string;
-  fileExt?: string;
   altText?: string;
   height?: number;
   width?: number;
@@ -32,11 +30,9 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
   static clone(node: ImageNode): ImageNode {
     return new ImageNode({
       src: node.__src,
-      sha256: node.__sha256,
       altText: node.__altText,
       width: node.__width,
       height: node.__height,
-      fileExt: node.__fileExt,
     });
   }
 
@@ -46,8 +42,6 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
     this.__altText = payload.altText;
     this.__width = payload.width;
     this.__height = payload.height;
-    this.__imageFileExt = payload.fileExt;
-    this.__sha256 = payload.sha256;
   }
 
   exportJSON(): SerializedImageNode {
@@ -57,9 +51,7 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
       src: this.__src,
       type: "image",
       version: 1,
-      fileExt: this.__imageFileExt,
       width: this.__width,
-      sha256: this.__sha256,
     };
   }
 

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

@@ -0,0 +1,58 @@
+import { $isLinkNode } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isAtNodeEnd } from "@lexical/selection";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import {
+  $getSelection,
+  $isRangeSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  ElementNode,
+  RangeSelection,
+  TextNode,
+} from "lexical";
+import { useEffect } from "react";
+
+export function getSelectedNode(
+  selection: RangeSelection
+): TextNode | ElementNode {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+}
+
+export default function LinkEditorPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkNode = $findMatchingParent(node, $isLinkNode);
+            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+              window.open(linkNode.getURL(), "_blank");
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, []);
+  return null;
+}

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

@@ -53,6 +53,9 @@ import Dropdown from "../../Dropdown";
 import UploadModal from "../../UploadModal";
 import { INSERT_IMAGE_COMMAND } from "./ImagePlugin";
 import { readImage } from "../../../utils/readImage";
+import { $isLinkNode, LinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { getSelectedNode } from "./LinkEditorPlugin";
+import { Check, Link, X } from "react-feather";
 
 export interface ToolbarSettingsProps {
   fontsFamilies?: string[];
@@ -91,7 +94,12 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
   const [inputUrl, setInputUrl] = useState<boolean>(false);
   const [uploadMode, setUploadMode] = useState<"url" | "file">("url");
   const [file, setFile] = useState<File | null>(null);
-  const [url, setUrl] = useState<string>("");
+
+  const [url, setUrl] = useState<string | null>(null);
+
+  const dispatchLinkChange = (url: string | null) => {
+    editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+  };
 
   const blockTypes: { [key: string]: string } = {
     paragraph: "Normal",
@@ -126,6 +134,20 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
         element = anchorNode.getTopLevelElementOrThrow();
       }
 
+      // LINK STUFF
+      const node = getSelectedNode(selection);
+      const linkParent = $findMatchingParent(
+        node,
+        $isLinkNode
+      ) as LinkNode | null;
+      if (linkParent !== null) {
+        const href = linkParent.getURL();
+        setUrl(href);
+      } else {
+        setUrl(null);
+      }
+      // ====================
+
       const elementKey = element.getKey();
       const elementDOM = activeEditor.getElementByKey(elementKey);
       setIsBold(selection.hasFormat("bold"));
@@ -278,7 +300,7 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
   };
 
   return (
-    <div className="sticky top-0 border-b bg-base border-highlight">
+    <div className="sticky top-0 border-b bg-base border-highlight flex flex-col">
       <div className="flex flex-row gap-1">
         <Dropdown
           options={Object.values(blockTypes)}
@@ -316,6 +338,21 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
           }}
           icon={<Italic className={`${isItalic && "stroke-[3px]"}`} />}
         />
+        <Button
+          active={url !== null}
+          onClick={(ev) => {
+            ev.preventDefault();
+            setUrl("");
+            dispatchLinkChange("");
+          }}
+          icon={
+            <Link
+              width={12}
+              height={12}
+              className={`${url !== null && "stroke-[3px]"}`}
+            />
+          }
+        />
         <label className="flex items-center justify-center">
           <ImageIcon />
           <input
@@ -337,6 +374,37 @@ const Toolbar: FC<ToolbarSettingsProps> = ({
           />
         </label>
       </div>
+      {url !== null && (
+        <div className="flex flex-row p-2">
+          <input
+            type="text"
+            placeholder="Enter URL"
+            className="w-1/3 text-primary bg-base px-2"
+            value={url}
+            onChange={(ev) => {
+              ev.preventDefault();
+              setUrl(ev.target.value);
+            }}
+          ></input>
+          <Button
+            variant="primary"
+            onClick={(ev) => {
+              ev.preventDefault();
+              // empty url will remove link
+              dispatchLinkChange(url || null);
+            }}
+            icon={<Check size={14} />}
+          />
+          <Button
+            variant="primary"
+            onClick={(ev) => {
+              ev.preventDefault();
+              dispatchLinkChange(null);
+            }}
+            icon={<X size={14} />}
+          />
+        </div>
+      )}
     </div>
   );
 };

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { LexicalEditor } from "lexical";
 import { ListItemNode, ListNode } from "@lexical/list";
@@ -6,18 +8,23 @@ import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { FC } from "react";
 import LexicalContentEditable from "./ContentEditable";
 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 { richTextSourceToLexical } from "../../richtext/conversion/richTextSourceToLexical";
+import { useValOverlayContext } from "../ValOverlayContext";
+import { parseRichTextSource } from "../../exports";
+import { LinkNode } from "@lexical/link";
+import LinkEditorPlugin from "./Plugins/LinkEditorPlugin";
 
 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,21 +32,25 @@ 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) })
+      editor.parseEditorState({
+        root: richTextSourceToLexical(parseRichTextSource(richtext)),
+      })
     );
   };
   const initialConfig = {
     namespace: "val",
     editorState: prePopulatedState,
-    nodes: [HeadingNode, ImageNode, ListNode, ListItemNode],
+    nodes: [HeadingNode, ImageNode, ListNode, ListItemNode, LinkNode],
     theme: {
-      root: "p-4 bg-fill text-white font-roboto border-b border-highlight",
       text: {
         bold: "font-semibold",
         underline: "underline",
@@ -58,8 +69,9 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
         h3: "text-2xl font-bold",
         h4: "text-xl font-bold",
         h5: "text-lg font-bold",
-        h6: "text-base font-bold",
+        h6: "text-md font-bold",
       },
+      link: "text-highlight underline",
     },
     onError,
   };
@@ -68,10 +80,23 @@ 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}
       />
+      <LinkPlugin />
+      <LinkEditorPlugin />
       <ListPlugin />
       <ImagesPlugin />
       <HistoryPlugin />

package/src/components/ValOverlay.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Dispatch,
   SetStateAction,
@@ -8,7 +10,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";
@@ -16,7 +23,7 @@ import {
   AnyRichTextOptions,
   FileSource,
   Internal,
-  RichText,
+  RichTextSource,
   SerializedSchema,
   SourcePath,
   VAL_EXTENSION,
@@ -25,9 +32,10 @@ import { Modules, resolvePath } from "../utils/resolvePath";
 import { ValApi } from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { LexicalEditor } from "lexical";
-import { LexicalRootNode, fromLexical } from "./RichTextEditor/conversion";
+import { LexicalRootNode } from "../richtext/conversion/richTextSourceToLexical";
 import { PatchJSON } from "@valbuild/core/patch";
 import { readImage } from "../utils/readImage";
+import { lexicalToRichTextSource } from "../richtext/conversion/lexicalToRichTextSource";
 
 export type ValOverlayProps = {
   defaultTheme?: "dark" | "light";
@@ -54,7 +62,7 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
   );
 
   const [state, setState] = useState<{
-    [path: SourcePath]: () => PatchJSON;
+    [path: SourcePath]: () => Promise<PatchJSON>;
   }>({});
   const initPatchCallback = useCallback((currentPath: SourcePath | null) => {
     return (callback: PatchCallback) => {
@@ -83,6 +91,8 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
     });
   }, [windowTarget?.path]);
 
+  const [windowSize, setWindowSize] = useState<WindowSize>();
+
   return (
     <ValOverlayContext.Provider
       value={{
@@ -94,6 +104,8 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
         highlight,
         setHighlight,
         setTheme,
+        windowSize,
+        setWindowSize,
       }}
     >
       <div data-mode={theme}>
@@ -137,7 +149,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 &&
@@ -157,16 +171,22 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
                     const [moduleId] = Internal.splitModuleIdAndModulePath(
                       windowTarget.path
                     );
-                    const patch = state[windowTarget.path]();
-                    console.log("Submitting", patch);
-                    api
-                      .postPatches(moduleId, patch)
-                      .then((res) => {
-                        console.log(res);
-                      })
-                      .finally(() => {
-                        console.log("done");
-                      });
+                    const res = state[windowTarget.path]();
+                    if (res) {
+                      res
+                        .then((patch) => {
+                          console.log("Submitting", patch);
+                          return api.postPatches(moduleId, patch);
+                        })
+                        .then((res) => {
+                          console.log(res);
+                        })
+                        .finally(() => {
+                          console.log("done");
+                        });
+                    } else {
+                      console.error("No patch");
+                    }
                   }
                 }}
               />
@@ -178,7 +198,7 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
   );
 }
 
-type PatchCallback = (modulePath: string) => PatchJSON;
+type PatchCallback = (modulePath: string) => Promise<PatchJSON>;
 
 function ImageField({
   defaultValue,
@@ -195,7 +215,7 @@ function ImageField({
   } | null>(null);
   const url = defaultValue && Internal.convertFileSource(defaultValue).url;
   useEffect(() => {
-    registerPatchCallback((path) => {
+    registerPatchCallback(async (path) => {
       const pathParts = path.split("/");
       if (!data) {
         return [];
@@ -256,27 +276,31 @@ function RichTextField({
   registerPatchCallback,
 }: {
   registerPatchCallback: (callback: PatchCallback) => void;
-  defaultValue?: RichText<AnyRichTextOptions>;
+  defaultValue?: RichTextSource<AnyRichTextOptions>;
 }) {
   const [editor, setEditor] = useState<LexicalEditor | null>(null);
   useEffect(() => {
     if (editor) {
-      registerPatchCallback((path) => {
-        const { node, files } = editor?.toJSON()?.editorState
-          ? fromLexical(editor?.toJSON()?.editorState.root as LexicalRootNode)
-          : {
-              node: {
-                [VAL_EXTENSION]: "richtext",
-                children: [],
-              } as RichText<AnyRichTextOptions>,
+      registerPatchCallback(async (path) => {
+        const { templateStrings, exprs, files } = editor?.toJSON()?.editorState
+          ? await lexicalToRichTextSource(
+              editor?.toJSON()?.editorState.root as LexicalRootNode
+            )
+          : ({
+              [VAL_EXTENSION]: "richtext",
+              templateStrings: [""],
+              exprs: [],
               files: {},
-            };
+            } as RichTextSource<AnyRichTextOptions> & {
+              files: Record<string, string>;
+            });
         return [
           {
-            op: "replace",
+            op: "replace" as const,
             path,
             value: {
-              ...node,
+              templateStrings,
+              exprs,
               [VAL_EXTENSION]: "richtext",
             },
           },
@@ -301,7 +325,7 @@ function RichTextField({
         ({
           children: [],
           [VAL_EXTENSION]: "root",
-        } as unknown as RichText<AnyRichTextOptions>)
+        } as unknown as RichTextSource<AnyRichTextOptions>)
       }
     />
   );
@@ -322,7 +346,7 @@ function TextField({
   // to avoid registering a new callback every time the value changes
   const ref = useRef<HTMLTextAreaElement>(null);
   useEffect(() => {
-    registerPatchCallback((path) => {
+    registerPatchCallback(async (path) => {
       return [
         {
           op: "replace",

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() {