@valbuild/ui 0.20.2 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/ui",
-  "version": "0.20.2",
+  "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.2",
+    "@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/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,6 +8,7 @@ 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";
@@ -14,8 +17,11 @@ import ImagesPlugin from "./Plugins/ImagePlugin";
 import Toolbar from "./Plugins/Toolbar";
 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: RichTextSource<AnyRichTextOptions>;
@@ -35,13 +41,15 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
   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: {
       text: {
         bold: "font-semibold",
@@ -61,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,
   };
@@ -86,6 +95,8 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
         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,
@@ -21,7 +23,6 @@ import {
   AnyRichTextOptions,
   FileSource,
   Internal,
-  RichText,
   RichTextSource,
   SerializedSchema,
   SourcePath,
@@ -31,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";
@@ -60,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) => {
@@ -169,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");
+                    }
                   }
                 }}
               />
@@ -190,7 +198,7 @@ export function ValOverlay({ defaultTheme, api }: ValOverlayProps) {
   );
 }
 
-type PatchCallback = (modulePath: string) => PatchJSON;
+type PatchCallback = (modulePath: string) => Promise<PatchJSON>;
 
 function ImageField({
   defaultValue,
@@ -207,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 [];
@@ -273,22 +281,26 @@ function RichTextField({
   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",
             },
           },
@@ -334,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/ValWindow.stories.tsx

@@ -1,8 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  AnyRichTextOptions,
-  RichTextSource as RichTextSourceType,
-} from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { FormContainer } from "./forms/FormContainer";
 import { ImageForm } from "./forms/ImageForm";
@@ -78,56 +74,11 @@ export const RichText: Story = {
         }}
       >
         <RichTextEditor
-          richtext={
-            {
-              _type: "richtext",
-              children: [
-                { tag: "h1", children: ["Title 1"] },
-                { tag: "h2", children: ["Title 2"] },
-                { tag: "h3", children: ["Title 3"] },
-                { tag: "h4", children: ["Title 4"] },
-                { tag: "h5", children: ["Title 5"] },
-                { tag: "h6", children: ["Title 6"] },
-                {
-                  tag: "p",
-                  children: [
-                    {
-                      tag: "span",
-                      classes: ["bold", "italic", "line-through"],
-                      children: ["Formatted span"],
-                    },
-                  ],
-                },
-                {
-                  tag: "ul",
-                  children: [
-                    {
-                      tag: "li",
-                      children: [
-                        {
-                          tag: "ol",
-                          dir: "rtl",
-                          children: [
-                            {
-                              tag: "li",
-                              children: [
-                                {
-                                  tag: "span",
-                                  classes: ["italic"],
-                                  children: ["number 1.1"],
-                                },
-                              ],
-                            },
-                            { tag: "li", children: ["number 1.2"] },
-                          ],
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            } as RichTextSourceType<AnyRichTextOptions>
-          }
+          richtext={{
+            _type: "richtext",
+            templateStrings: ["# Title 1"],
+            exprs: [],
+          }}
         />
       </FormContainer>
     ),

package/src/components/dashboard/ValDashboard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SerializedModule } from "@valbuild/core";
 import { Json } from "@valbuild/core/src/Json";
 import { ValApi } from "@valbuild/core";

package/src/exports.ts

@@ -2,3 +2,4 @@ export { RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
 export { ValOverlay } from "./components/ValOverlay";
 export { type Inputs } from "./components/forms/Form";
 export { ValDashboard } from "./components/dashboard/ValDashboard";
+export { parseRichTextSource } from "./richtext/conversion/parseRichTextSource";

package/src/richtext/conversion/conversion.test.ts

@@ -0,0 +1,146 @@
+import {
+  initVal,
+  RichTextSource,
+  AnyRichTextOptions,
+  FILE_REF_PROP,
+} from "@valbuild/core";
+import { richTextSourceToLexical } from "./richTextSourceToLexical";
+import { lexicalToRichTextSource } from "./lexicalToRichTextSource";
+import { parseRichTextSource } from "./parseRichTextSource";
+
+const { val } = initVal();
+const cases: {
+  description: string;
+  input: RichTextSource<AnyRichTextOptions>;
+}[] = [
+  {
+    description: "basic",
+    input: val.richtext`
+# Title 1
+
+## Title 2
+
+### Title 3
+
+#### Title 4
+
+##### Title 5
+
+###### Title 6
+
+Some paragraph. Another sentence.
+
+Another paragraph.
+
+Formatting: **bold**, _italic_, ~~line-through~~, ***bold and italic***.
+
+- List 1
+    1. List 1.1
+    1. List 1.2
+`,
+  },
+  {
+    description: "all features",
+    input: val.richtext`
+# Title 1
+
+Title 1 content.
+
+## Title 2
+
+Title 2 content.
+
+### Title 3
+
+Title 3 content.
+
+#### Title 4
+
+Title 4 content.
+
+##### Title 5
+
+###### Title 6
+
+Some paragraph. Another sentence.
+
+Another paragraph.
+
+Formatting: **bold**, _italic_, ~~line-through~~, ***bold and italic***.
+
+- List 1
+    1. List 1.1
+    1. List 1.2
+
+Inline link: ${val.link("**link**", { href: "https://link.com" })}
+
+<br />
+
+Block link:
+
+${val.link("**link**", { href: "https://link.com" })}
+
+<br />
+
+Block Image:
+
+${val.file("/public/test.jpg", {
+  width: 100,
+  height: 100,
+  sha256: "123",
+})}
+
+<br />
+
+<br />
+
+- List 1
+    1. List 1.1
+    1. List 1.2
+- List 2
+- List 3
+    1. Formatted **list**
+Test 123
+`,
+  },
+];
+
+describe("isomorphic richtext <-> conversion", () => {
+  test.each(cases)("$description", async ({ input }) => {
+    const inputSource = input;
+
+    const res = await lexicalToRichTextSource(
+      richTextSourceToLexical(parseRichTextSource(inputSource))
+    );
+
+    const output = stringifyRichTextSource(res);
+    // console.log("EOF>>" + output + "<<EOF");
+    expect(stringifyRichTextSource(inputSource)).toStrictEqual(output);
+  });
+});
+
+function stringifyRichTextSource({
+  templateStrings,
+  exprs,
+}: RichTextSource<AnyRichTextOptions>): string {
+  let lines = "";
+  for (let i = 0; i < templateStrings.length; i++) {
+    const line = templateStrings[i];
+    const expr = exprs[i];
+    lines += line;
+    if (expr) {
+      if (expr._type === "file") {
+        lines += `\${val.file("${expr[FILE_REF_PROP]}", ${JSON.stringify(
+          expr.metadata
+        )})}`;
+      } else if (expr._type === "link") {
+        lines += `\${val.link("${expr.children[0]}", ${JSON.stringify({
+          href: expr.href,
+        })})}`;
+      } else {
+        throw Error("Unknown expr: " + JSON.stringify(expr, null, 2));
+      }
+    }
+  }
+  return lines;
+}