@valbuild/ui 0.20.2 → 0.21.0

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

@@ -0,0 +1,424 @@
+import { initVal } from "@valbuild/core";
+import { parseRichTextSource } from "./parseRichTextSource";
+
+const { val } = initVal();
+
+//MD to HTML
+describe("richtext", () => {
+  test("basic h1", () => {
+    const r = val.richtext`# Title 1`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+    ]);
+  });
+
+  test("basic complete", () => {
+    const r = val.richtext`# Title 1
+## Title 2
+
+Paragraph 1 2 3 4 5. Words *italic* **bold**
+`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      { tag: "h2", children: ["Title 2"] },
+      {
+        tag: "p",
+        children: [
+          "Paragraph 1 2 3 4 5. Words ",
+          { tag: "span", classes: ["italic"], children: ["italic"] },
+          " ",
+          { tag: "span", classes: ["bold"], children: ["bold"] },
+        ],
+      },
+    ]);
+  });
+
+  test.skip("strong and emphasis merged spans", () => {
+    // TODO: currently we do not merge
+    const r = val.richtext`Which classes?
+***All of them!***
+  `;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      {
+        tag: "p",
+        children: [
+          "Which classes?\n",
+          {
+            tag: "span",
+            classes: ["italic", "bold"],
+            children: ["All of them!"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("line through", () => {
+    // TODO: currently we do not merge
+    const r = val.richtext`~~line through~~`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      {
+        tag: "p",
+        children: [
+          {
+            tag: "span",
+            classes: ["line-through"],
+            children: ["line through"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("2 paragraphs", () => {
+    const r = val.richtext`# Title 1
+
+First paragraph
+
+Second paragraph
+`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      { tag: "p", children: ["First paragraph"] },
+      { tag: "p", children: ["Second paragraph"] },
+    ]);
+  });
+
+  test("basic lists", () => {
+    const r = val.richtext`A bullet list:
+
+- bullet 1
+- bullet 2
+`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "p", children: ["A bullet list:"] },
+      {
+        tag: "ul",
+        children: [
+          { tag: "li", children: ["bullet 1"] },
+          { tag: "li", children: ["bullet 2"] },
+        ],
+      },
+    ]);
+  });
+
+  test("lists with line breaks", () => {
+    const r = val.richtext`A bullet list:
+  
+  - bullet 1
+  - bullet 2
+break this line
+  `;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "p", children: ["A bullet list:"] },
+      {
+        tag: "ul",
+        children: [
+          {
+            tag: "li",
+            children: ["bullet 1"],
+          },
+          {
+            tag: "li",
+            children: [
+              "bullet 2",
+              { tag: "br", children: [] },
+              "break this line",
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("special chars", () => {
+    const r = val.richtext`# "Title 1"
+
+Beautiful "quotes" and 'single quotes'
+
+Some crocodiles: < >
+
+Ampersand: &
+
+  `;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ['"Title 1"'] },
+      { tag: "p", children: [`Beautiful "quotes" and 'single quotes'`] },
+      { tag: "p", children: ["Some crocodiles: < >"] },
+      { tag: "p", children: ["Ampersand: &"] },
+    ]);
+  });
+
+  test("lists", () => {
+    const r = val.richtext`# Title 1
+
+A paragraph
+
+A bullet list:
+- bullet 1
+- bullet 2
+
+A numbered list:
+1. number 1
+2. number 2
+
+A nested list:
+- bullet 1:
+    1. number 1.1
+    2. number 1.2
+- bullet 2:
+    - bullet 2.1
+    - bullet 2.2
+`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      { tag: "p", children: ["A paragraph"] },
+      { tag: "p", children: ["A bullet list:"] },
+      {
+        tag: "ul",
+        children: [
+          { tag: "li", children: ["bullet 1"] },
+          { tag: "li", children: ["bullet 2"] },
+        ],
+      },
+      { tag: "p", children: ["A numbered list:"] },
+      {
+        tag: "ol",
+        children: [
+          { tag: "li", children: ["number 1"] },
+          { tag: "li", children: ["number 2"] },
+        ],
+      },
+      { tag: "p", children: ["A nested list:"] },
+      {
+        tag: "ul",
+        children: [
+          {
+            tag: "li",
+            children: [
+              "bullet 1:",
+              {
+                tag: "ol",
+                children: [
+                  { tag: "li", children: ["number 1.1"] },
+                  { tag: "li", children: ["number 1.2"] },
+                ],
+              },
+            ],
+          },
+          {
+            tag: "li",
+            children: [
+              "bullet 2:",
+              {
+                tag: "ul",
+                children: [
+                  { tag: "li", children: ["bullet 2.1"] },
+                  { tag: "li", children: ["bullet 2.2"] },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("image", () => {
+    const r = val.richtext`# Title 1
+
+Below we have an image block:
+
+${val.file("/public/foo.png", {
+  width: 100,
+  height: 100,
+  sha256: "123",
+})}`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      { tag: "p", children: ["Below we have an image block:"] },
+      {
+        tag: "p",
+        children: [
+          {
+            src: "/foo.png?sha256=123",
+            tag: "img",
+            width: 100,
+            height: 100,
+            children: [],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("markdown link", () => {
+    const r = val.richtext`# Title 1
+
+Below we have a url: [google](https://google.com)`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: [
+          "Below we have a url: ",
+          {
+            href: "https://google.com",
+            tag: "a",
+            children: ["google"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("block link", () => {
+    const r = val.richtext`# Title 1
+
+Below we have a url:
+
+${val.link("google", { href: "https://google.com" })}`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      { tag: "p", children: ["Below we have a url:"] },
+      {
+        tag: "p",
+        children: [
+          {
+            tag: "a",
+            href: "https://google.com",
+            children: ["google"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("inline link", () => {
+    const r = val.richtext`# Title 1
+
+Below we have a url: ${val.link("google", { href: "https://google.com" })}`;
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: [
+          "Below we have a url: ",
+          {
+            href: "https://google.com",
+            tag: "a",
+            children: ["google"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("inline link with bold", () => {
+    const r = val.richtext`# Title 1
+
+Inline link -> ${val.link("**google**", { href: "https://google.com" })}`;
+
+    // source:
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: [
+          "Inline link -> ",
+          {
+            href: "https://google.com",
+            tag: "a",
+            children: [
+              {
+                tag: "span",
+                classes: ["bold"],
+                children: ["google"],
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("https:// in link description", () => {
+    const r = val.richtext`# Title 1
+
+Inline link -> ${val.link("https://google.com", {
+      href: "https://google.com",
+    })}`;
+
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: [
+          "Inline link -> ",
+          {
+            tag: "a",
+            href: "https://google.com",
+            children: ["https://google.com"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("auto link does nothing", () => {
+    const r = val.richtext`# Title 1
+
+No transform here -> https://google.com
+
+Transform this:
+[https://google.com](https://google.com)
+`;
+
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: ["No transform here -> ", "https://google.com"],
+      },
+      {
+        tag: "p",
+        children: [
+          "Transform this:\n",
+          {
+            tag: "a",
+            href: "https://google.com",
+            children: ["https://google.com"],
+          },
+        ],
+      },
+    ]);
+  });
+
+  test("breaks", () => {
+    const r = val.richtext`
+# Title 1
+
+Foo
+
+<br>
+
+Bar
+`;
+    // source:
+    expect(parseRichTextSource(r).children).toStrictEqual([
+      { tag: "h1", children: ["Title 1"] },
+      {
+        tag: "p",
+        children: ["Foo"],
+      },
+      {
+        tag: "br",
+        children: [],
+      },
+      {
+        tag: "p",
+        children: ["Bar"],
+      },
+    ]);
+  });
+});

package/src/richtext/conversion/parseRichTextSource.ts

@@ -0,0 +1,228 @@
+import * as marked from "marked";
+import {
+  OrderedListNode,
+  AnyRichTextOptions,
+  UnorderedListNode,
+  LinkSource,
+  RichTextNode,
+  SpanNode,
+  LinkNode,
+  ListItemNode,
+  RichTextOptions,
+  RichTextSource,
+  RichText,
+  VAL_EXTENSION,
+  FileSource,
+  ParagraphNode,
+  HeadingNode,
+  Internal,
+} from "@valbuild/core";
+
+const VAL_START_TAG_PREFIX = '<val value="';
+const VAL_START_TAG_SUFFIX = '">';
+const VAL_END_TAG = "</val>";
+
+type AnyListChildren =
+  | OrderedListNode<AnyRichTextOptions>["children"]
+  | UnorderedListNode<AnyRichTextOptions>["children"];
+
+type ImageSource = FileSource<{
+  width: number;
+  height: number;
+  sha256: string;
+}>;
+
+function parseTokens(
+  tokens: marked.Token[],
+  sourceNodes: (ImageSource | LinkSource)[],
+  cursor: number,
+  insideList = false
+): { children: RichTextNode<AnyRichTextOptions>[]; cursor: number } {
+  const children: RichTextNode<AnyRichTextOptions>[] = [];
+  while (cursor < tokens.length) {
+    const token = tokens[cursor];
+    if (token.type === "heading") {
+      children.push({
+        tag: `h${token.depth as 1 | 2 | 3 | 4 | 5 | 6}`,
+        children: parseTokens(token.tokens ? token.tokens : [], sourceNodes, 0)
+          .children as HeadingNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "paragraph") {
+      children.push({
+        tag: "p",
+        children: parseTokens(token.tokens ? token.tokens : [], sourceNodes, 0)
+          .children as ParagraphNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "strong") {
+      children.push({
+        tag: "span",
+        classes: ["bold"],
+        children: parseTokens(token.tokens ? token.tokens : [], sourceNodes, 0)
+          .children as SpanNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "em") {
+      children.push({
+        tag: "span",
+        classes: ["italic"],
+        children: parseTokens(token.tokens ? token.tokens : [], sourceNodes, 0)
+          .children as SpanNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "del") {
+      children.push({
+        tag: "span",
+        classes: ["line-through"],
+        children: parseTokens(token.tokens ? token.tokens : [], sourceNodes, 0)
+          .children as SpanNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "text") {
+      if ("tokens" in token && Array.isArray(token.tokens)) {
+        children.push(
+          ...parseTokens(token.tokens, sourceNodes, cursor, insideList).children
+        );
+      } else {
+        if (insideList && typeof token.raw === "string") {
+          const lines = token.raw.split("\n");
+          const tags: RichTextNode<AnyRichTextOptions>[] = lines.flatMap(
+            (line, i) => {
+              if (i === lines.length - 1) return [line];
+              return [line, { tag: "br", children: [] }];
+            }
+          );
+          children.push(...tags);
+        } else {
+          children.push(token.raw);
+        }
+      }
+    } else if (token.type === "list") {
+      children.push({
+        tag: token.ordered ? "ol" : "ul",
+        children: parseTokens(token.items, sourceNodes, 0)
+          .children as AnyListChildren,
+      });
+    } else if (token.type === "list_item") {
+      children.push({
+        tag: "li",
+        children: parseTokens(
+          token.tokens ? token.tokens : [],
+          sourceNodes,
+          0,
+          true
+        ).children as ListItemNode<AnyRichTextOptions>["children"],
+      });
+    } else if (token.type === "space") {
+      // do nothing
+    } else if (token.type === "html") {
+      if (token.text === VAL_END_TAG) {
+        return { children, cursor };
+      }
+      const suffixIndex = token.text.indexOf(VAL_START_TAG_SUFFIX);
+      if (token.text.startsWith(VAL_START_TAG_PREFIX) && suffixIndex > -1) {
+        const number = Number(
+          token.text.slice(VAL_START_TAG_PREFIX.length, suffixIndex)
+        );
+        if (Number.isNaN(number)) {
+          throw Error(
+            `Illegal val intermediate node: ${JSON.stringify(token)}`
+          );
+        }
+        const { children: subChildren, cursor: subCursor } = parseTokens(
+          tokens.map((token) => {
+            if (token.type === "link" || token.type === "list") {
+              return {
+                type: "text",
+                raw: token.raw,
+                text: token.raw,
+              };
+            }
+            return token;
+          }),
+          sourceNodes,
+          cursor + 1
+        );
+        const sourceNode = sourceNodes[number];
+        if (sourceNode._type === "link") {
+          children.push({
+            tag: "a",
+            href: sourceNode.href,
+            children: subChildren as LinkNode<AnyRichTextOptions>["children"],
+          });
+        } else if (sourceNode._type === "file") {
+          children.push({
+            tag: "img",
+            src: Internal.convertFileSource(sourceNode).url,
+            width: sourceNode.metadata?.width,
+            height: sourceNode.metadata?.height,
+            children: [],
+          });
+        }
+
+        cursor = subCursor;
+      }
+      const br_html_regex = /<br\s*\/?>/gi; // matches <br>, <br/>, <br />; case insensitive
+      if (token.text.trim().match(br_html_regex)) {
+        children.push({
+          tag: "br",
+          children: [],
+        });
+      }
+    } else if (token.type === "link") {
+      if (token.raw === token.href) {
+        // avoid auto-linking (provided by github flavoured markdown, but we want strikethrough so keep it enabled)
+        children.push(token.raw);
+      } else {
+        children.push({
+          tag: "a",
+          href: token.href,
+          children: parseTokens(
+            token.tokens ? token.tokens : [],
+            sourceNodes,
+            0
+          ).children as LinkNode<AnyRichTextOptions>["children"],
+        });
+      }
+    } else {
+      console.error(
+        `Could not parse markdown: unsupported token type: ${token.type}. Found: ${token.raw}`
+      );
+    }
+    cursor++;
+  }
+  return { children, cursor };
+}
+
+export function parseRichTextSource<O extends RichTextOptions>({
+  templateStrings,
+  exprs: nodes,
+}: RichTextSource<O>): RichText<O> {
+  // TODO: validate that templateStrings does not contain VAL_NODE_PREFIX
+  const inputText = templateStrings
+    .flatMap((templateString, i) => {
+      const node = nodes[i];
+      if (node) {
+        if (node[VAL_EXTENSION] === "link") {
+          return templateString.concat(
+            `${VAL_START_TAG_PREFIX}${i}${VAL_START_TAG_SUFFIX}${node.children[0]}${VAL_END_TAG}`
+          );
+        } else {
+          return templateString.concat(
+            `${VAL_START_TAG_PREFIX}${i}${VAL_START_TAG_SUFFIX}${VAL_END_TAG}`
+          );
+        }
+      }
+      return templateString;
+    })
+    .join("");
+  const tokenList = marked.lexer(inputText, {
+    gfm: true,
+  });
+  const { children, cursor } = parseTokens(tokenList, nodes, 0);
+  if (cursor !== tokenList.length) {
+    throw Error(
+      "Unexpectedly terminated markdown parsing. Possible reason: unclosed html tag?"
+    );
+  }
+  return {
+    [VAL_EXTENSION]: "richtext",
+    children,
+  } as RichText<O>;
+}