@valbuild/ui 0.12.0 → 0.13.0

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

@@ -0,0 +1,381 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  INSERT_CHECK_LIST_COMMAND,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $createHeadingNode,
+  $isHeadingNode,
+  HeadingTagType,
+} from "@lexical/rich-text";
+import {
+  $getSelectionStyleValueForProperty,
+  $patchStyleText,
+  $setBlocksType,
+} from "@lexical/selection";
+import {
+  $findMatchingParent,
+  $getNearestBlockElementAncestorOrThrow,
+  mergeRegister,
+  $getNearestNodeOfType,
+} from "@lexical/utils";
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  $isTextNode,
+  COMMAND_PRIORITY_CRITICAL,
+  DEPRECATED_$isGridSelection,
+  FORMAT_TEXT_COMMAND,
+  LexicalEditor,
+  NodeKey,
+  REDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  SerializedLexicalNode,
+  UNDO_COMMAND,
+} from "lexical";
+import { SerializedEditorState } from "lexical/LexicalEditorState";
+import { FC, useCallback, useEffect, useState } from "react";
+import Bold from "../../../assets/icons/Bold";
+import ImageIcon from "../../../assets/icons/ImageIcon";
+import Italic from "../../../assets/icons/Italic";
+import Strikethrough from "../../../assets/icons/Strikethrough";
+import Underline from "../../../assets/icons/Underline";
+import Undo from "../../../assets/icons/Undo";
+import Button from "../../Button";
+import Dropdown from "../../Dropdown";
+import UploadModal from "../../UploadModal";
+import { INSERT_IMAGE_COMMAND } from "./ImagePlugin";
+
+export interface ToolbarSettingsProps {
+  fontsFamilies?: string[];
+  fontSizes?: string[];
+  colors?: string[];
+  onEditor?: (editor: LexicalEditor) => void;
+}
+
+const Toolbar: FC<ToolbarSettingsProps> = ({
+  fontSizes,
+  fontsFamilies,
+  onEditor,
+  colors,
+}) => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (onEditor) {
+      onEditor(editor);
+    }
+  }, [editor]);
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [selectedElementKey, setSelectedElementKey] = useState<NodeKey | null>(
+    null
+  );
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [fontSize, setFontSize] = useState<string>("15px");
+  const [fontColor, setFontColor] = useState<string>("#000");
+  const [fontFamily, setFontFamily] = useState<string>("Sans");
+  const [blockType, setBlockType] =
+    useState<keyof typeof blockTypes>("paragraph");
+
+  const [showModal, setShowModal] = useState<boolean>(false);
+  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 blockTypes: { [key: string]: string } = {
+    paragraph: "Normal",
+    h1: "Heading 1",
+    h2: "Heading 2",
+    h3: "Heading 3",
+    h4: "Heading 4",
+    h5: "Heading 5",
+    h6: "Heading 6",
+    number: "Numbered List",
+    bullet: "Bulleted List",
+  };
+  const blockTypesLookup: { [key: string]: string } = {};
+
+  for (const key in blockTypes) {
+    blockTypesLookup[blockTypes[key]] = key;
+  }
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      let element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : $findMatchingParent(anchorNode, (e) => {
+              const parent = e.getParent();
+              return parent !== null && $isRootOrShadowRoot(parent);
+            });
+
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+
+      const elementKey = element.getKey();
+      const elementDOM = activeEditor.getElementByKey(elementKey);
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsUnderline(selection.hasFormat("underline"));
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(
+            anchorNode,
+            ListNode
+          );
+          const type = parentList
+            ? parentList.getListType()
+            : element.getListType();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType();
+          if (type in blockTypes) {
+            setBlockType(type as keyof typeof blockTypes);
+          }
+        }
+      }
+
+      setFontSize(
+        $getSelectionStyleValueForProperty(selection, "font-size", "15px")
+      );
+      setFontColor(
+        $getSelectionStyleValueForProperty(selection, "color", "#000")
+      );
+      setFontFamily(
+        $getSelectionStyleValueForProperty(selection, "font-family", "Arial")
+      );
+    }
+  }, [activeEditor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [updateToolbar, activeEditor, editor]);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        updateToolbar();
+        setActiveEditor(newEditor);
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, updateToolbar]);
+
+  const formatText = (format: keyof typeof blockTypes) => {
+    if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(format as string)) {
+      if (blockType !== format) {
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $setBlocksType(selection, () => {
+              return $createHeadingNode(format as HeadingTagType);
+            });
+          }
+        });
+      }
+    } else if (format === "paragraph" && blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+        if (
+          $isRangeSelection(selection) ||
+          DEPRECATED_$isGridSelection(selection)
+        ) {
+          $setBlocksType(selection, () => $createParagraphNode());
+        }
+      });
+    } else {
+      if (format === "number" && blockType !== "number") {
+        editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+      } else if (format === "bullet" && blockType !== "bullet") {
+        editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+      } else {
+        editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+      }
+    }
+  };
+
+  const clearFormatting = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const anchor = selection.anchor;
+        const focus = selection.focus;
+        const nodes = selection.getNodes();
+
+        if (anchor.key === focus.key && anchor.offset === focus.offset) {
+          return;
+        }
+        nodes.forEach((node, idx) => {
+          if ($isTextNode(node)) {
+            if (idx === 0 && anchor.offset !== 0) {
+              node = node.splitText(anchor.offset)[1] || node;
+            }
+            if (idx === nodes.length - 1) {
+              node = node.splitText(focus.offset)[0] || node;
+            }
+
+            if (node.__style !== "") {
+              node.setStyle("");
+            }
+            if (node.__format !== 0) {
+              node.setFormat(0);
+              $getNearestBlockElementAncestorOrThrow(node).setFormat("");
+            }
+          } else if ($isHeadingNode(node)) {
+            node.replace($createParagraphNode(), true);
+          }
+        });
+      }
+    });
+  }, [activeEditor]);
+
+  const changeFontFamily = (fontFamily: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, {
+          ["font-family"]: fontFamily,
+        });
+      }
+    });
+  };
+
+  const changeFontSize = (fontSize: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        $patchStyleText(selection, {
+          ["font-size"]: fontSize,
+        });
+      }
+    });
+  };
+
+  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-scroll">
+      {/* <div className="flex flex-row gap-2">
+        <button className="hidden w-0 h-0 " disabled></button>
+        <Button
+          icon={<Undo />}
+          onClick={() => {
+            editor.dispatchCommand(UNDO_COMMAND, undefined);
+          }}
+        ></Button>
+        <Button
+          icon={<Undo className="transform -scale-x-100" />}
+          onClick={() => {
+            editor.dispatchCommand(REDO_COMMAND, undefined);
+          }}
+        />
+      </div> */}
+      <div className="flex flex-row gap-2">
+        <Dropdown
+          options={Object.values(blockTypes)}
+          label={
+            blockTypes[blockType as string] ?? blockType + " (not supported)"
+          }
+          onChange={(selectedOption) => {
+            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]"}`} />}
+        />
+        <Button
+          active={isStrikethrough}
+          onClick={(ev) => {
+            ev.preventDefault();
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+          }}
+          icon={
+            <Strikethrough className={`${isStrikethrough && "stroke-[2px]"}`} />
+          }
+        />
+        <Button
+          active={isItalic}
+          onClick={(ev) => {
+            ev.preventDefault();
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+          }}
+          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]"}`} />}
+        />
+      </div>
+      <Button
+        icon={<ImageIcon />}
+        onClick={(ev) => {
+          ev.preventDefault();
+          setShowModal(true);
+        }}
+      ></Button>
+      <UploadModal
+        setShowModal={setShowModal}
+        showModal={showModal}
+        uploadImage={uploadImage}
+      />
+    </div>
+  );
+};
+
+export default Toolbar;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  LexicalEditor,
+  LexicalNode,
+} from "lexical";
+import {
+  ListItemNode,
+  ListNode,
+  $createListNode,
+  $createListItemNode,
+} from "@lexical/list";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+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 { 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 {
+  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";
+
+export interface RichTextEditorProps {
+  richtext: RichText;
+  onEditor?: (editor: LexicalEditor) => void; // Not the ideal way of passing the editor to the upper context, we need it to be able to save
+}
+
+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);
+  node.setDirection(heading.direction);
+  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);
+  node.setDirection(paragraph.direction);
+  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);
+  node.setDirection(listItem.direction);
+  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);
+  node.setDirection(list.direction);
+  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);
+  return node;
+}
+
+export const RichTextEditor: FC<RichTextEditorProps> = ({
+  richtext,
+  onEditor,
+}) => {
+  const prePopulatedState = () => {
+    const root = $getRoot();
+    $getRoot().append(
+      ...richtext.children.map((child) => toLexicalNode(child))
+    );
+    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",
+      text: {
+        bold: "font-semibold",
+        underline: "underline",
+        italic: "italic",
+        strikethrough: "line-through",
+        underlineStrikethrough: "underlined-line-through",
+      },
+      list: {
+        listitem: "ml-[20px]",
+        ol: "list-decimal",
+        ul: "list-disc",
+      },
+      heading: {
+        h1: "text-4xl font-bold",
+        h2: "text-3xl font-bold",
+        h3: "text-2xl font-bold",
+        h4: "text-xl font-bold",
+        h5: "text-lg font-bold",
+        h6: "text-base font-bold",
+      },
+    },
+    onError,
+  };
+  return (
+    <div className=" relative bg-base min-h-[200px] mt-2 border border-highlight rounded">
+      <LexicalComposer initialConfig={initialConfig}>
+        <Toolbar onEditor={onEditor} />
+        <ImagesPlugin />
+        <RichTextPlugin
+          contentEditable={
+            <LexicalContentEditable className="relative bg-fill flex flex-col h-full w-full min-h-[200px] text-primary outline-none" />
+          }
+          placeholder={
+            <div className="absolute top-[calc(58px+1rem)] left-4 text-base/25 ">
+              Enter some text...
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        <ListPlugin />
+        <AutoFocus />
+        <HistoryPlugin />
+      </LexicalComposer>
+    </div>
+  );
+};

package/src/components/UploadModal.tsx

@@ -0,0 +1,109 @@
+import { FC, useEffect, useState } from "react";
+import Button from "./Button";
+
+interface UploadModalProps {
+  showModal: boolean;
+  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+  uploadImage: (url: string, alt?: string) => void;
+}
+
+const UploadModal: FC<UploadModalProps> = ({
+  showModal,
+  setShowModal,
+  uploadImage,
+}) => {
+  const [uploadUrl, setUploadUrl] = useState<boolean>(true);
+  const [url, setUrl] = useState<string>("");
+
+  useEffect(() => {
+    setUrl("");
+  }, [uploadUrl]);
+
+  const loadImage = (files: FileList | null) => {
+    const reader = new FileReader();
+    reader.onload = function () {
+      if (typeof reader.result === "string") {
+        setUrl(reader.result);
+      }
+      return "";
+    };
+    if (files !== null) {
+      reader.readAsDataURL(files[0]);
+    }
+  };
+
+  const onSubmit = () => {
+    if (url) {
+      uploadImage(url);
+      setUrl("");
+      setShowModal(false);
+      setUploadUrl(true);
+    }
+  };
+
+  return (
+    <div className="absolute z-10 flex flex-col justify-center items-center top-[50%] left-[50%] font-mono">
+      {showModal && (
+        <div className="flex flex-col items-center justify-center">
+          <div className="flex flex-col items-start justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div className="fixed inset-0 transition-opacity">
+              <div className="absolute inset-0 bg-gray-500 opacity-75" />
+            </div>
+
+            <div className="flex flex-col items-center justify-between bg-fill rounded-lg transform transition-all min-h-[300px] min-w-[500px] h-full px-5 py-7">
+              <div className="flex flex-col items-center w-full gap-5">
+                <div className="mb-4">
+                  <Button
+                    variant={uploadUrl ? "primary" : "secondary"}
+                    onClick={() => setUploadUrl(true)}
+                  >
+                    Paste URL
+                  </Button>
+                  <Button
+                    variant={uploadUrl ? "secondary" : "primary"}
+                    onClick={() => setUploadUrl(false)}
+                  >
+                    Upload file
+                  </Button>
+                </div>
+                {uploadUrl ? (
+                  <div className="flex flex-col items-center justify-center w-full gap-5">
+                    <label className="text-primary">Upload URL</label>
+                    <input
+                      className="w-full h-10 rounded-lg bg-border"
+                      value={url}
+                      onChange={(event) => setUrl(event.target.value)}
+                    />
+                  </div>
+                ) : (
+                  <div className="flex flex-col items-center justify-center w-full gap-5">
+                    <label className="text-primary">Choose File</label>
+                    <input
+                      className="h-10 rounded-lg w-fit"
+                      type="file"
+                      onChange={(e) => loadImage(e.target.files)}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-row items-center justify-center gap-5 ">
+                <Button variant="secondary" onClick={() => setShowModal(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  variant="primary"
+                  disabled={url === ""}
+                  onClick={() => onSubmit()}
+                >
+                  Upload
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UploadModal;

package/src/components/ValOverlay.tsx

@@ -0,0 +1,41 @@
+import { EditButton } from "./EditButton";
+import { Form, FormProps } from "./forms/Form";
+import { ValWindow } from "./ValWindow";
+
+type ValWindow = {
+  position: {
+    left: number;
+    top: number;
+  };
+} & FormProps;
+
+export type ValOverlayProps = {
+  editMode: boolean;
+  setEditMode: (editMode: boolean) => void;
+  valWindow?: ValWindow;
+  closeValWindow: () => void;
+};
+
+export function ValOverlay({
+  editMode,
+  setEditMode,
+  valWindow,
+  closeValWindow,
+}: ValOverlayProps) {
+  return (
+    <>
+      <div className="fixed -translate-x-1/2 left-1/2 bottom-4">
+        <EditButton
+          onClick={() => {
+            setEditMode(!editMode);
+          }}
+        />
+      </div>
+      {editMode && valWindow && (
+        <ValWindow onClose={closeValWindow} position={valWindow.position}>
+          <Form onSubmit={valWindow.onSubmit} inputs={valWindow.inputs} />
+        </ValWindow>
+      )}
+    </>
+  );
+}