@valbuild/ui 0.26.0 → 0.27.0

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

@@ -1,469 +0,0 @@
-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("br tokens", () => {
-    const r = val.richtext`1 år 400,- kinokveld  
-5 år 5000,- en kveld i tretoppene`;
-    expect(parseRichTextSource(r).children).toStrictEqual([
-      {
-        tag: "p",
-        children: [
-          "1 år 400,- kinokveld",
-          { tag: "br", children: [] },
-          "5 år 5000,- en kveld i tretoppene",
-        ],
-      },
-    ]);
-  });
-
-  test("multiple br tokens", () => {
-    const r = val.richtext`1 år 400,- kinokveld  
-2 år 1000,- kulturell opplevelse  
-3 år 2000,- mat i fjeset  
-4 år 500,- nørding i bokhandel  
-5 år 5000,- en kveld i tretoppene  
-6 år 1200,- ta smaksløkene på trim  
-7 år 2500,- gjør en forskjell`;
-    expect(parseRichTextSource(r).children).toStrictEqual([
-      {
-        tag: "p",
-        children: [
-          "1 år 400,- kinokveld",
-          { tag: "br", children: [] },
-          "2 år 1000,- kulturell opplevelse",
-          { tag: "br", children: [] },
-          "3 år 2000,- mat i fjeset",
-          { tag: "br", children: [] },
-          "4 år 500,- nørding i bokhandel",
-          { tag: "br", children: [] },
-          "5 år 5000,- en kveld i tretoppene",
-          { tag: "br", children: [] },
-          "6 år 1200,- ta smaksløkene på trim",
-          { tag: "br", children: [] },
-          "7 år 2500,- gjør en forskjell",
-        ],
-      },
-    ]);
-  });
-
-  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

@@ -1,233 +0,0 @@
-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 if (token.type === "br") {
-      children.push({
-        tag: "br",
-        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>;
-}