@valbuild/ui 0.26.0 → 0.27.0

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

@@ -1,412 +0,0 @@
-/* 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";
-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[];
-  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 | null>(null);
-
-  const dispatchLinkChange = (url: string | null) => {
-    editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
-  };
-
-  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();
-      }
-
-      // 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"));
-      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,
-        });
-      }
-    });
-  };
-
-  return (
-    <div className="sticky top-0 border-b bg-background border-highlight flex flex-col">
-      <div className="flex flex-row gap-1">
-        <Dropdown
-          options={Object.values(blockTypes)}
-          label={
-            blockTypes[blockType as string] ?? blockType + " (not supported)"
-          }
-          onChange={(selectedOption) => {
-            formatText(blockTypesLookup[selectedOption]);
-          }}
-        />
-        <Button
-          variant="primary"
-          onClick={(ev) => {
-            ev.preventDefault();
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "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={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
-            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>
-      {url !== null && (
-        <div className="flex flex-row p-2">
-          <input
-            type="text"
-            placeholder="Enter URL"
-            className="w-1/3 text-primary bg-background 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>
-  );
-};
-
-export default Toolbar;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,105 +0,0 @@
-"use client";
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-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";
-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, RichTextSource } from "@valbuild/core";
-import { HeadingNode } from "@lexical/rich-text";
-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: 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
-}
-
-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: richTextSourceToLexical(parseRichTextSource(richtext)),
-      })
-    );
-  };
-  const initialConfig = {
-    namespace: "val",
-    editorState: prePopulatedState,
-    nodes: [HeadingNode, ImageNode, ListNode, ListItemNode, LinkNode],
-    theme: {
-      text: {
-        bold: "font-semibold",
-        underline: "underline",
-        italic: "italic",
-        strikethrough: "line-through",
-        underlineStrikethrough: "underline 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-md font-bold",
-      },
-      link: "text-highlight underline",
-    },
-    onError,
-  };
-  return (
-    <LexicalComposer initialConfig={initialConfig}>
-      <AutoFocus />
-      <Toolbar onEditor={onEditor} />
-      <RichTextPlugin
-        contentEditable={
-          <div
-            className="font-sans border-b text-primary border-highlight"
-            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 />
-    </LexicalComposer>
-  );
-};

package/src/components/UploadModal.tsx

@@ -1,109 +0,0 @@
-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/User.tsx

@@ -1,17 +0,0 @@
-import { FC } from "react";
-
-const User: FC<{ name: string }> = ({ name }) => {
-  return (
-    <div className="flex flex-row items-center gap-2">
-      <div className="w-[32px] h-[32px] rounded-full bg-light-gray flex justify-center items-center">
-        {name
-          .split(" ")
-          .map((name) => name.charAt(0))
-          .join("")}
-      </div>
-      <div className="text-white">{name}</div>
-    </div>
-  );
-};
-
-export default User;