@valbuild/ui 0.20.0 → 0.21.0

package/src/components/ValWindow.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AnyRichTextOptions, RichText as RichTextType } from "@valbuild/core";
 import { RichTextEditor } from "../exports";
 import { FormContainer } from "./forms/FormContainer";
 import { ImageForm } from "./forms/ImageForm";
@@ -75,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 RichTextType<AnyRichTextOptions>
-          }
+          richtext={{
+            _type: "richtext",
+            templateStrings: ["# Title 1"],
+            exprs: [],
+          }}
         />
       </FormContainer>
     ),

package/src/components/ValWindow.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { AlignJustify, X } from "react-feather";
 import classNames from "classnames";
 import { Resizable } from "react-resizable";
+import { useValOverlayContext } from "./ValOverlayContext";
 
 export type ValWindowProps = {
   children:
@@ -35,17 +36,34 @@ export function ValWindow({
       document.removeEventListener("keyup", closeOnEscape);
     };
   }, []);
-
   //
-  const [size, setSize] = useState<{ height: number; width: number }>();
+  const { windowSize, setWindowSize } = useValOverlayContext();
+  useEffect(() => {
+    if (!windowSize) {
+      setWindowSize({
+        height: MIN_HEIGHT,
+        width: MIN_WIDTH,
+        innerHeight:
+          MIN_HEIGHT -
+          (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+      });
+    }
+  }, [windowSize]);
   //
   const bottomRef = useRef<HTMLDivElement>(null);
 
   return (
     <Resizable
-      width={size?.width || MIN_WIDTH}
-      height={size?.height || MIN_HEIGHT}
-      onResize={(_, { size }) => setSize(size)}
+      width={windowSize?.width || MIN_WIDTH}
+      height={windowSize?.height || MIN_HEIGHT}
+      onResize={(_, { size }) =>
+        setWindowSize({
+          ...size,
+          innerHeight:
+            (windowSize?.height || MIN_HEIGHT) -
+            (64 + (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+        })
+      }
       handle={
         <div className="fixed bottom-0 right-0 cursor-se-resize">
           <svg
@@ -63,7 +81,7 @@ export function ValWindow({
       }
       draggableOpts={{}}
       className={classNames(
-        "absolute inset-0  w-full tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75 max-w-full",
+        "absolute inset-0  tablet:w-auto tablet:h-auto tablet:min-h-fit tablet:rounded bg-base text-primary drop-shadow-2xl min-w-[320px] transition-opacity duration-300 delay-75",
         {
           "opacity-0": !isInitialized,
           "opacity-100": isInitialized,
@@ -72,8 +90,8 @@ export function ValWindow({
     >
       <div
         style={{
-          width: size?.width || MIN_WIDTH,
-          height: size?.height || MIN_HEIGHT,
+          width: windowSize?.width || MIN_WIDTH,
+          height: windowSize?.height || MIN_HEIGHT,
           left: draggedPosition.left,
           top: draggedPosition.top,
         }}
@@ -108,10 +126,7 @@ export function ValWindow({
           <div
             className="relative overflow-scroll"
             style={{
-              height:
-                (size?.height || MIN_HEIGHT) -
-                (64 +
-                  (bottomRef.current?.getBoundingClientRect()?.height || 0)),
+              height: windowSize?.innerHeight,
             }}
           >
             {Array.isArray(children) ? children.slice(1, -1) : children}

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/components/forms/Form.tsx

@@ -1,4 +1,4 @@
-import { AnyRichTextOptions, RichText } from "@valbuild/core";
+import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
 import { LexicalEditor } from "lexical";
 import { useEffect, useState } from "react";
 import { RichTextEditor } from "../RichTextEditor/RichTextEditor";
@@ -18,7 +18,7 @@ export type Inputs = {
     | {
         status: "completed";
         type: "richtext";
-        data: RichText<AnyRichTextOptions>;
+        data: RichTextSource<AnyRichTextOptions>;
       };
 };
 

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;
+}

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

@@ -0,0 +1,89 @@
+import { initVal } from "@valbuild/core";
+import { parseRichTextSource } from "./parseRichTextSource";
+
+const { val } = initVal();
+
+describe("lexical to RichTextSource", () => {
+  test("parse empty richtext source", () => {
+    const output = parseRichTextSource({
+      _type: "richtext",
+      templateStrings: [""],
+      exprs: [],
+    });
+    expect(output).toStrictEqual({ _type: "richtext", children: [] });
+  });
+
+  test("parse basic richtext source", () => {
+    const output = parseRichTextSource<{
+      a: true;
+      li: true;
+      ul: true;
+      heading: ["h1"];
+    }>(val.richtext`
+# Title 1
+
+${val.link("**link**", { href: "https://link.com" })}
+
+<br>
+
+- List 1
+    1. List 1.1
+    1. List 1.2
+Test 123
+`);
+    expect(output).toStrictEqual({
+      _type: "richtext",
+      children: [
+        {
+          tag: "h1",
+          children: ["Title 1"],
+        },
+        {
+          tag: "p",
+          children: [
+            {
+              tag: "a",
+              href: "https://link.com",
+              children: [
+                {
+                  tag: "span",
+                  classes: ["bold"],
+                  children: ["link"],
+                },
+              ],
+            },
+          ],
+        },
+        { tag: "br", children: [] },
+        {
+          tag: "ul",
+          children: [
+            {
+              tag: "li",
+              children: [
+                "List 1",
+                {
+                  tag: "ol",
+                  children: [
+                    {
+                      tag: "li",
+                      children: ["List 1.1"],
+                    },
+                    {
+                      tag: "li",
+                      children: [
+                        "List 1.2",
+                        { tag: "br", children: [] },
+                        "Test 123",
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+  });
+});

package/src/richtext/conversion/lexicalToRichTextSource.ts

@@ -0,0 +1,286 @@
+import {
+  LinkSource,
+  FILE_REF_PROP,
+  Internal,
+  VAL_EXTENSION,
+  RichTextSource,
+  AnyRichTextOptions,
+} from "@valbuild/core";
+import { getMimeType, mimeTypeToFileExt } from "../../utils/imageMimeType";
+
+import {
+  LexicalImageNode,
+  LexicalLineBreakNode,
+  LexicalLinkNode,
+  LexicalListItemNode,
+  LexicalListNode,
+  LexicalRootNode,
+  LexicalTextNode,
+} from "./richTextSourceToLexical";
+
+const HeaderRegEx = /^h([\d+])$/;
+// Promise<
+//   RichTextSource<AnyRichTextOptions> & { files: Record<string, string> }
+// >
+
+type MarkdownIR = {
+  type: "block";
+  children: (string | LexicalImageNode | LexicalLinkNode)[];
+};
+
+const MAX_LINE_LENGTH = 80;
+export function lexicalToRichTextSource(
+  node: LexicalRootNode
+): Promise<
+  RichTextSource<AnyRichTextOptions> & { files: Record<string, string> }
+> {
+  const markdownIRBlocks: MarkdownIR[] = node.children.map(createBlock);
+  return fromIRToRichTextSource(markdownIRBlocks);
+}
+
+function createBlock(node: LexicalRootNode["children"][number]): MarkdownIR {
+  if (node.type === "heading") {
+    let headingTag = "";
+    const depth = Number(node.tag.match(HeaderRegEx)?.[1]);
+    if (Number.isNaN(depth)) {
+      throw new Error("Invalid header depth");
+    }
+    for (let i = 0; i < Number(depth); i++) {
+      headingTag += "#";
+    }
+    const headingText: MarkdownIR["children"] = [`${headingTag} `];
+    return {
+      type: "block",
+      children: headingText.concat(...node.children.map(transformLeafNode)),
+    };
+  } else if (node.type === "paragraph") {
+    if (node.children.length === 0) {
+      return {
+        type: "block",
+        children: ["<br />"],
+      };
+    }
+    return {
+      type: "block",
+      children: node.children.map((child) => transformLeafNode(child)),
+    };
+  } else if (node.type === "list") {
+    return {
+      type: "block",
+      children: node.children.flatMap((child, i) =>
+        formatListItemNode(getListPrefix(node), child, 0, i === 0)
+      ),
+    };
+  } else {
+    const exhaustiveCheck: never = node;
+    throw new Error(
+      `Unhandled node type: ${
+        "type" in exhaustiveCheck ? "exhaustiveCheck.type" : "unknown"
+      }`
+    );
+  }
+}
+
+async function fromIRToRichTextSource(
+  markdownIRBlocks: MarkdownIR[]
+): Promise<
+  RichTextSource<AnyRichTextOptions> & { files: Record<string, string> }
+> {
+  const templateStrings = ["\n"];
+  const exprs = [];
+  const files: Record<string, string> = {};
+  for (let blockIdx = 0; blockIdx < markdownIRBlocks.length; blockIdx++) {
+    const block = markdownIRBlocks[blockIdx];
+    for (const child of block.children) {
+      if (typeof child === "string") {
+        templateStrings[templateStrings.length - 1] += child;
+      } else {
+        if (child.type === "image") {
+          exprs.push(await fromLexicalImageNode(child, files));
+        } else if (child.type === "link") {
+          exprs.push(fromLexicalLinkNode(child));
+        } else {
+          const exhaustiveCheck: never = child;
+          throw new Error(
+            `Unexpected node type: ${JSON.stringify(exhaustiveCheck, null, 2)}`
+          );
+        }
+        templateStrings.push("");
+      }
+    }
+    if (blockIdx === markdownIRBlocks.length - 1) {
+      templateStrings[templateStrings.length - 1] += "\n";
+    } else {
+      templateStrings[templateStrings.length - 1] += "\n\n";
+    }
+  }
+  return { [VAL_EXTENSION]: "richtext", templateStrings, exprs: exprs, files };
+}
+
+function formatText(node: LexicalTextNode): string {
+  const classes =
+    typeof node.format === "number" ? fromLexicalFormat(node.format) : [];
+  let text = node.text.trimStart();
+  const prefixWS = node.text.length - text.length;
+  text = text.trimEnd();
+  const suffixWS = node.text.length - text.length - prefixWS;
+  if (classes.includes("bold") && classes.includes("italic")) {
+    text = `***${text}***`;
+  } else if (classes.includes("bold")) {
+    text = `**${text}**`;
+  } else if (classes.includes("italic")) {
+    text = `_${text}_`;
+  }
+  if (classes.includes("line-through")) {
+    text = `~~${text}~~`;
+  }
+  // TODO:
+  // text = splitIntoChunks(text);
+  return `${" ".repeat(prefixWS)}${text}${" ".repeat(suffixWS)}`;
+}
+
+function transformLeafNode(
+  node:
+    | LexicalTextNode
+    | LexicalImageNode
+    | LexicalLinkNode
+    | LexicalLineBreakNode
+): string | LexicalImageNode | LexicalLinkNode {
+  if (node.type === "text") {
+    return formatText(node);
+  } else if (node.type === "linebreak") {
+    return "\n";
+  } else {
+    return node;
+  }
+}
+
+function formatListItemNode(
+  listPrefix: string,
+  node: LexicalListItemNode,
+  indent: number,
+  isFirstTopLevelListItem = false
+): (string | LexicalImageNode | LexicalLinkNode)[] {
+  const newLine = isFirstTopLevelListItem ? "" : "\n";
+  const prefix: (string | LexicalImageNode | LexicalLinkNode)[] = [
+    `${newLine}${" ".repeat(indent)}${listPrefix}`,
+  ];
+  if (node.children?.[0]?.type !== "list") {
+    prefix.push(" ");
+  }
+
+  return prefix.concat(
+    node.children.flatMap((child) => {
+      if (child.type === "list") {
+        return child.children.flatMap((subChild) =>
+          formatListItemNode(getListPrefix(child), subChild, indent + 4)
+        );
+      } else {
+        return [transformLeafNode(child)];
+      }
+    })
+  );
+}
+
+function getListPrefix(node: LexicalListNode): string {
+  if (node.listType === "bullet") {
+    return "-";
+  } else if (node.listType === "number") {
+    return "1.";
+  } else {
+    throw new Error(`Unhandled list type: ${node.listType}`);
+  }
+}
+
+const FORMAT_MAPPING = {
+  bold: 1, // 0001
+  italic: 2, // 0010
+  "line-through": 4, // 0100
+  // underline: 8, // 1000
+};
+
+export function fromLexicalFormat(
+  format: number
+): (keyof typeof FORMAT_MAPPING)[] {
+  return Object.entries(FORMAT_MAPPING).flatMap(([key, value]) => {
+    if ((value & /* bitwise and */ format) === value) {
+      return [key as keyof typeof FORMAT_MAPPING];
+    }
+    return [];
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function splitIntoChunks(str: string) {
+  let line = "";
+  for (let i = 0; i < str.length; i += 80) {
+    const chunk = str.substring(i, i + MAX_LINE_LENGTH);
+    line += chunk;
+    if (i !== str.length - 1 && chunk.length >= 80) {
+      line += "\n";
+    }
+  }
+  return line;
+}
+
+const textEncoder = new TextEncoder();
+async function fromLexicalImageNode(
+  node: LexicalImageNode,
+  files: Record<string, string>
+) {
+  if (node.src.startsWith("data:")) {
+    console.log("node", node);
+    const sha256 = await Internal.getSHA256Hash(textEncoder.encode(node.src));
+    const mimeType = getMimeType(node.src);
+    if (mimeType === undefined) {
+      throw new Error(`Could not detect Mime Type for image: ${node.src}`);
+    }
+    const fileExt = mimeTypeToFileExt(mimeType);
+    const filePath = `/public/${sha256}.${fileExt}`;
+    files[filePath] = node.src;
+    return {
+      [VAL_EXTENSION]: "file" as const,
+      [FILE_REF_PROP]: filePath,
+      metadata: {
+        width: node.width || 0,
+        height: node.width || 0,
+        sha256: sha256 || "",
+      },
+    };
+  } else {
+    const sha256 = getParam("sha256", node.src);
+    return {
+      [VAL_EXTENSION]: "file" as const,
+      [FILE_REF_PROP]: `/public${node.src.split("?")[0]}`,
+      metadata: {
+        width: node.width || 0,
+        height: node.width || 0,
+        sha256: sha256 || "",
+      },
+    };
+  }
+}
+
+function getParam(param: string, url: string) {
+  const urlParts = url.split("?");
+  if (urlParts.length < 2) {
+    return undefined;
+  }
+
+  const queryString = urlParts[1];
+  const params = new URLSearchParams(queryString);
+
+  if (params.has(param)) {
+    return params.get(param);
+  }
+
+  return undefined;
+}
+
+function fromLexicalLinkNode(node: LexicalLinkNode): LinkSource {
+  return {
+    [VAL_EXTENSION]: "link",
+    href: node.url,
+    children: node.children.map(formatText) as LinkSource["children"],
+  };
+}