@valbuild/core 0.18.0 → 0.19.0

package/src/source/richtext.ts

@@ -1,116 +1,322 @@
+import * as marked from "marked";
+import { FileSource } from "./file";
 import { VAL_EXTENSION } from ".";
-import { SourcePath } from "../val";
+import { convertFileSource } from "../schema/image";
 
-type Node = {
-  version?: 1;
+export type RichTextOptions = {
+  headings?: ("h1" | "h2" | "h3" | "h4" | "h5" | "h6")[];
+  img?: boolean;
+  ul?: boolean; // TODO: naming
+  ol?: boolean; // TODO: naming
+  lineThrough?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  // link?: boolean;
+  // fontFamily?: Record<string, string[]>;
+  // fontSize?: Record<string, string[]>;
+  // blockQuote?: boolean; // TODO: naming
 };
 
-type NodeType = Node & {
-  format?: FormatType;
-  direction?: DirectionType;
-  indent?: number;
+export type ParagraphNode<O extends RichTextOptions> = {
+  tag: "p";
+  children: (string | SpanNode<O> | ImageNode<O>)[];
+  // AnchorNode<O>
 };
 
-type FormatType =
-  | "left"
-  | "start"
-  | "center"
-  | "right"
-  | "end"
-  | "justify"
-  | "";
-type DirectionType = "ltr" | "rtl" | null;
-
-export type TextNode = Node & {
-  type: "text";
-  format?: FormatType | number;
-  detail?: number;
-  mode?: "normal" | "code" | "quote";
-  style?: string;
-  text: string;
-  direction?: DirectionType;
-  indent?: number;
-};
+export type LineThrough<O extends RichTextOptions> =
+  O["lineThrough"] extends true ? "line-through" : never;
+export type Italic<O extends RichTextOptions> = O["italic"] extends true
+  ? "italic"
+  : never;
+export type Bold<O extends RichTextOptions> = O["bold"] extends true
+  ? "bold"
+  : never;
+// export type FontFamily<O extends RichTextOptions> =
+//   O["fontFamily"] extends Record<string, unknown>
+//     ? `font-${keyof O["fontFamily"] & string}`
+//     : never;
+// export type FontSize<O extends RichTextOptions> = O["fontSize"] extends Record<
+//   string,
+//   unknown
+// >
+//   ? `text-${keyof O["fontSize"] & string}`
+//   : never;
 
-export type ParagraphNode<VN = TextNode> = NodeType & {
-  children: (TextNode | VN)[];
-  type: "paragraph";
-};
+export type Classes<O extends RichTextOptions> =
+  | LineThrough<O>
+  | Italic<O>
+  | Bold<O>;
+// | FontFamily<O>
+// | FontSize<O>;
 
-export type HeadingNode<HT extends HeadingTags = HeadingTags> = NodeType & {
-  children: TextNode[];
-  type: "heading";
-  tag: HT;
+export type SpanNode<O extends RichTextOptions> = {
+  tag: "span";
+  classes: Classes<O>[];
+  children: [string | SpanNode<O>];
 };
 
-export type ListItemNode<VN = TextNode> = NodeType & {
-  children: (TextNode | VN)[];
-  type: "listitem";
-  value: number;
-  checked?: boolean;
-};
+// export type AnchorNode<O extends RichTextOptions> = never; // TODO:
+// O["link"] extends true
+//   ? {
+//       tag: "a";
+//       href: string;
+//       children: [string];
+//     }
+//   : never;
 
-export type ListNode<VN = TextNode> = NodeType & {
-  children: ListItemNode<VN>[];
-  type: "list";
-  tag: "ol" | "ul";
-  listType: "number" | "bullet" | "check";
-  start?: number;
+export type ImageNode<O extends RichTextOptions> = O["img"] extends true
+  ? {
+      tag: "img";
+      src: string;
+      height?: number;
+      width?: number;
+    }
+  : never;
+
+export type ListItemNode<O extends RichTextOptions> = {
+  tag: "li";
+  children: (
+    | string
+    | SpanNode<O>
+    // | AnchorNode<O>
+    | ImageNode<O>
+    | UnorderedListNode<O>
+    | OrderedListNode<O>
+  )[];
 };
 
-type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type RootNode<HT extends HeadingTags, VN> = Node & {
-  children: (HeadingNode<HT> | ParagraphNode<VN> | ListNode<VN>)[];
-  type?: "root";
-  format?: FormatType;
-  direction?: DirectionType;
-  indent?: number;
+export type UnorderedListNode<O extends RichTextOptions> = O["ul"] extends true
+  ? {
+      tag: "ul";
+      dir?: "ltr" | "rtl";
+      children: ListItemNode<O>[];
+    }
+  : never;
+
+export type OrderedListNode<O extends RichTextOptions> = O["ol"] extends true
+  ? {
+      tag: "ol";
+      dir?: "ltr" | "rtl";
+      children: ListItemNode<O>[];
+    }
+  : never;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type HeadingNode<O extends RichTextOptions> = O["headings"] extends any[]
+  ? {
+      tag: O["headings"][number];
+      children: (string | SpanNode<O>)[];
+      // | AnchorNode<O>
+    }
+  : never;
+
+// export type BlockQuoteNode<O extends RichTextOptions> =
+//   O["blockQuote"] extends true
+//     ? { tag: "blockquote"; children: [string] }
+//     : never;
+
+type ImageSource = FileSource<{
+  width: number;
+  height: number;
+  sha256: string;
+}>;
+
+export type SourceNode<O extends RichTextOptions> = O["img"] extends true
+  ? ImageSource
+  : never;
+
+export type AnyRichTextOptions = {
+  headings: ("h1" | "h2" | "h3" | "h4" | "h5" | "h6")[];
+  img: true;
+  ul: true;
+  ol: true;
+  lineThrough: true;
+  bold: true;
+  italic: true;
+  // blockQuote: true;
+  // fontFamily: Record<string, string[]>;
+  // fontSize: Record<string, string[]>;
 };
 
-const brand = Symbol("richtext");
-export type RichText<
-  HT extends HeadingTags = HeadingTags,
-  VN extends TextNode = TextNode
-> = RootNode<HT, VN> & {
-  [brand]: "richtext";
-  valPath: SourcePath;
+export type RichTextSourceNode<O extends RichTextOptions> =
+  | Exclude<RichTextNode<O>, { tag: "img" }>
+  | ParagraphNode<O>
+  | ListItemNode<O>
+  | ImageNode<O>
+  | SourceNode<O>;
+
+export type RichTextSource<O extends RichTextOptions> = {
+  [VAL_EXTENSION]: "richtext";
+  children: (
+    | HeadingNode<O>
+    | ParagraphNode<O>
+    | UnorderedListNode<O>
+    | OrderedListNode<O>
+    // | BlockQuoteNode<O>
+    | SourceNode<O>
+  )[];
 };
 
-export type RichTextSource = RichText & {
-  readonly [VAL_EXTENSION]: "richtext";
+export type RichTextNode<O extends RichTextOptions> =
+  | string
+  | HeadingNode<O>
+  | ParagraphNode<O>
+  | UnorderedListNode<O>
+  | OrderedListNode<O>
+  | ListItemNode<O>
+  | SpanNode<O>
+  // | BlockQuoteNode<O>
+  | ImageNode<O>;
+
+export type RootNode<O extends RichTextOptions> =
+  | HeadingNode<O>
+  | ParagraphNode<O>
+  | UnorderedListNode<O>
+  | OrderedListNode<O>
+  // | BlockQuoteNode<O>
+  | ImageNode<O>;
+
+// TODO: rename to RichTextSelector?
+export type RichText<O extends RichTextOptions> = {
+  [VAL_EXTENSION]: "richtext";
+  children: RootNode<O>[];
 };
 
-export function richtext(
-  data: RootNode<HeadingTags, TextNode> | string
-): RichTextSource {
-  if (typeof data === "string") {
-    return {
-      [VAL_EXTENSION]: "richtext",
-      type: "root",
-      children: [
+function parseTokens<O extends RichTextOptions>(
+  tokens: marked.Token[]
+): RichTextSource<O>["children"] {
+  return tokens.flatMap((token) => {
+    if (token.type === "heading") {
+      return [
+        {
+          tag: `h${token.depth}`,
+          children: parseTokens(token.tokens ? token.tokens : []),
+        },
+      ];
+    }
+    if (token.type === "paragraph") {
+      return [
+        {
+          tag: "p",
+          children: parseTokens(token.tokens ? token.tokens : []),
+        },
+      ];
+    }
+    if (token.type === "strong") {
+      return [
+        {
+          tag: "span",
+          classes: ["bold"],
+          children: parseTokens(token.tokens ? token.tokens : []),
+        },
+      ];
+    }
+    if (token.type === "em") {
+      return [
         {
-          type: "paragraph",
-          children: [
-            {
-              type: "text",
-              text: data,
-            },
-          ],
+          tag: "span",
+          classes: ["italic"],
+          children: parseTokens(token.tokens ? token.tokens : []),
         },
-      ],
-    } as RichTextSource;
+      ];
+    }
+    if (token.type === "del") {
+      return [
+        {
+          tag: "span",
+          classes: ["line-through"],
+          children: parseTokens(token.tokens ? token.tokens : []),
+        },
+      ];
+    }
+    if (token.type === "text") {
+      return [token.text];
+    }
+    if (token.type === "list") {
+      return [
+        {
+          tag: token.ordered ? "ol" : "ul",
+          children: parseTokens(token.items),
+        },
+      ];
+    }
+    if (token.type === "list_item") {
+      return [
+        {
+          tag: "li",
+          children: parseTokens(token.tokens ? token.tokens : []),
+        },
+      ];
+    }
+    if (token.type === "space") {
+      return [];
+    }
+
+    if (token.type === "code") {
+      return [
+        {
+          tag: "span",
+          classes: [],
+          children: [token.text],
+        },
+      ];
+    }
+    console.error(
+      `Could not parse markdown: unsupported token type: ${token.type}. Found: ${token.raw}`
+    );
+    return [token.raw];
+  });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function nodeToTag(node: any): any {
+  if (node[VAL_EXTENSION] === "file") {
+    return node;
   }
+  throw Error(`Unexpected node: ${JSON.stringify(node)}`);
+}
+
+function imgSrcToImgTag<O extends RichTextOptions>(
+  imageSrc: ImageSource
+): ImageNode<O> {
+  const converted = convertFileSource(imageSrc);
+  return {
+    tag: "img",
+    src: converted.url,
+    width: imageSrc.metadata?.width,
+    height: imageSrc.metadata?.height,
+  } as ImageNode<O>;
+}
+
+export function convertRichTextSource<O extends RichTextOptions>(
+  src: RichTextSource<O>
+): RichText<O> {
   return {
-    ...data,
     [VAL_EXTENSION]: "richtext",
-  } as RichTextSource;
+    children: src.children.map((source) => {
+      if (VAL_EXTENSION in source && source[VAL_EXTENSION] === "file") {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return imgSrcToImgTag(source as any);
+      }
+      return source;
+    }),
+  } as RichText<O>;
 }
 
-export function isRichText(obj: unknown): obj is RichTextSource {
-  return (
-    typeof obj === "object" &&
-    obj !== null &&
-    VAL_EXTENSION in obj &&
-    obj[VAL_EXTENSION] === "richtext"
-  );
+export function richtext<
+  O extends RichTextOptions,
+  Nodes extends never | ImageSource
+>(templateStrings: TemplateStringsArray, ...expr: Nodes[]): RichTextSource<O> {
+  return {
+    [VAL_EXTENSION]: "richtext",
+    children: templateStrings.flatMap((templateString, i) => {
+      const lex = marked.lexer(templateString, {
+        gfm: true,
+      });
+      if (expr[i]) {
+        return parseTokens(lex).concat(nodeToTag(expr[i]));
+      }
+      return parseTokens(lex);
+    }),
+  };
 }

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "skipLibCheck": true
   }
 }