@valbuild/ui 0.20.2 → 0.21.0

package/src/stories/RichTextEditor.stories.tsx

@@ -3,7 +3,6 @@ import {
   RichTextEditorProps,
 } from "../components/RichTextEditor/RichTextEditor";
 import { Meta, Story } from "@storybook/react";
-import { AnyRichTextOptions, RichTextSource } from "@valbuild/core";
 
 export default {
   title: "RichTextEditor",
@@ -19,50 +18,7 @@ export const DropdownStory = Template.bind({});
 DropdownStory.args = {
   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 RichTextSource<AnyRichTextOptions>,
+    templateStrings: ["# Title 1"],
+    exprs: [],
+  },
 };

package/src/utils/imageMimeType.ts

@@ -0,0 +1,23 @@
+const MIME_TYPE_REGEX =
+  /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
+
+export function getMimeType(base64Url: string): string | undefined {
+  const match = MIME_TYPE_REGEX.exec(base64Url);
+  if (match && match[1]) {
+    return match[1];
+  }
+  return;
+}
+
+export function mimeTypeToFileExt(mimeType: string) {
+  if (mimeType === "image/svg+xml") {
+    return "svg";
+  }
+  if (mimeType === "image/vnd.microsoft.icon") {
+    return "ico";
+  }
+  if (mimeType.startsWith("image/")) {
+    return mimeType.slice("image/".length);
+  }
+  return mimeType;
+}

package/src/utils/readImage.ts

@@ -1,5 +1,6 @@
 import { Internal } from "@valbuild/core";
 import { ChangeEvent } from "react";
+import { getMimeType, mimeTypeToFileExt } from "./imageMimeType";
 
 const textEncoder = new TextEncoder();
 
@@ -24,7 +25,6 @@ export function readImage(ev: ChangeEvent<HTMLInputElement>) {
           );
           if (image.naturalWidth && image.naturalHeight) {
             const mimeType = getMimeType(result);
-            console.log(result.slice(0, 30), mimeType);
             resolve({
               src: result,
               width: image.naturalWidth,
@@ -52,27 +52,3 @@ export function readImage(ev: ChangeEvent<HTMLInputElement>) {
     }
   });
 }
-
-const MIME_TYPE_REGEX =
-  /^data:(image\/(png|jpeg|jpg|gif|webp|bmp|tiff|ico|svg\+xml));base64,/;
-
-function getMimeType(base64Url: string): string | undefined {
-  const match = MIME_TYPE_REGEX.exec(base64Url);
-  if (match && match[1]) {
-    return match[1];
-  }
-  return;
-}
-
-function mimeTypeToFileExt(mimeType: string) {
-  if (mimeType === "image/svg+xml") {
-    return "svg";
-  }
-  if (mimeType === "image/vnd.microsoft.icon") {
-    return "ico";
-  }
-  if (mimeType.startsWith("image/")) {
-    return mimeType.slice("image/".length);
-  }
-  return mimeType;
-}

package/src/components/RichTextEditor/conversion.test.ts

@@ -1,132 +0,0 @@
-import { AnyRichTextOptions, RichText, RichTextSource } from "@valbuild/core";
-import {
-  fromLexical,
-  fromLexicalFormat,
-  toLexical,
-  toLexicalFormat,
-} from "./conversion";
-
-describe("richtext conversion", () => {
-  test("format conversion", () => {
-    //
-    expect(toLexicalFormat([])).toStrictEqual(0);
-    expect(toLexicalFormat(["bold"])).toStrictEqual(1);
-    expect(toLexicalFormat(["italic"])).toStrictEqual(2);
-    expect(toLexicalFormat(["bold", "italic"])).toStrictEqual(3);
-    expect(toLexicalFormat(["line-through"])).toStrictEqual(4);
-    expect(toLexicalFormat(["bold", "line-through"])).toStrictEqual(5);
-    expect(toLexicalFormat(["italic", "line-through"])).toStrictEqual(6);
-    expect(toLexicalFormat(["bold", "italic", "line-through"])).toStrictEqual(
-      7
-    );
-    //
-    expect(fromLexicalFormat(0)).toStrictEqual([]);
-    expect(fromLexicalFormat(1)).toStrictEqual(["bold"]);
-    expect(fromLexicalFormat(2)).toStrictEqual(["italic"]);
-    expect(fromLexicalFormat(3)).toStrictEqual(["bold", "italic"]);
-    expect(fromLexicalFormat(4)).toStrictEqual(["line-through"]);
-    expect(fromLexicalFormat(5)).toStrictEqual(["bold", "line-through"]);
-    expect(fromLexicalFormat(6)).toStrictEqual(["italic", "line-through"]);
-    expect(fromLexicalFormat(7)).toStrictEqual([
-      "bold",
-      "italic",
-      "line-through",
-    ]);
-  });
-  test("basic lexical text conversion to <-> from", () => {
-    const input: RichTextSource<AnyRichTextOptions> = {
-      _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"] },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-
-    expect(fromLexical(toLexical(input)).node).toStrictEqual(input);
-  });
-
-  // Uncertain whether Val RichText text nodes should allow nested spans - remove this test if that is not the case anymore
-  test("merged lexical text nodes to <-> from", () => {
-    const input: RichTextSource<AnyRichTextOptions> = {
-      _type: "richtext",
-      children: [
-        {
-          tag: "p",
-          children: [
-            {
-              tag: "span",
-              classes: ["bold", "line-through"],
-              children: [
-                {
-                  tag: "span",
-                  classes: ["italic"],
-                  children: ["Formatted nested span"],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-
-    // See inline comments for what changed between input / output
-    const output: RichText<AnyRichTextOptions> = {
-      _type: "richtext",
-      children: [
-        {
-          tag: "p",
-          children: [
-            {
-              tag: "span",
-              classes: ["bold", "italic", "line-through"], // NOTE: classes was merged
-              children: ["Formatted nested span"],
-            },
-          ],
-        },
-      ],
-    };
-
-    expect(fromLexical(toLexical(input)).node).toStrictEqual(output);
-  });
-});

package/src/components/RichTextEditor/conversion.ts

@@ -1,389 +0,0 @@
-import {
-  AnyRichTextOptions,
-  HeadingNode as ValHeadingNode,
-  ListItemNode as ValListItemNode,
-  SpanNode as ValSpanNode,
-  UnorderedListNode as ValUnorderedListNode,
-  OrderedListNode as ValOrderedListNode,
-  ParagraphNode as ValParagraphNode,
-  RichTextSourceNode as ValRichTextSourceNode,
-  RichText,
-  RootNode,
-  VAL_EXTENSION,
-  Internal,
-  FILE_REF_PROP,
-  RichTextSource,
-  FileSource,
-} from "@valbuild/core";
-import { ImagePayload } from "./Nodes/ImageNode";
-
-/// Serialized Lexical Nodes:
-// TODO: replace with Lexical libs types - not currently exported?
-
-type LexicalTextNode = CommonLexicalProps & {
-  type: "text";
-  text: string;
-  format: "" | number;
-};
-
-type LexicalParagraphNode = CommonLexicalProps & {
-  type: "paragraph";
-  children: LexicalNode[];
-};
-type LexicalHeadingNode = CommonLexicalProps & {
-  type: "heading";
-  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  children: LexicalNode[];
-};
-type LexicalListItemNode = CommonLexicalProps & {
-  type: "listitem";
-  children: LexicalNode[];
-};
-type LexicalListNode = CommonLexicalProps & {
-  type: "list";
-  listType: "bullet" | "number" | "checked";
-  direction: "ltr" | "rtl" | null;
-  children: LexicalNode[];
-};
-
-type LexicalImageNode = CommonLexicalProps & {
-  type: "image";
-} & ImagePayload;
-
-type LexicalNode =
-  | LexicalTextNode
-  | LexicalParagraphNode
-  | LexicalHeadingNode
-  | LexicalListItemNode
-  | LexicalListNode
-  | LexicalImageNode;
-
-export type LexicalRootNode = {
-  type: "root";
-  children: LexicalNode[];
-  version: 1;
-  format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
-  direction: null | "ltr" | "rtl";
-} & CommonLexicalProps;
-
-const COMMON_LEXICAL_PROPS = {
-  version: 1,
-  format: "" as number | "",
-  indent: 0,
-  direction: null as null | "ltr" | "rtl",
-} as const;
-
-type CommonLexicalProps = typeof COMMON_LEXICAL_PROPS;
-
-export function toLexicalNode(
-  node: ValRichTextSourceNode<AnyRichTextOptions>
-): LexicalNode {
-  if (typeof node === "string") {
-    return {
-      ...COMMON_LEXICAL_PROPS,
-      type: "text",
-      format: "",
-      text: node,
-    };
-  }
-  if ("tag" in node) {
-    switch (node.tag) {
-      case "h1":
-        return toLexicalHeadingNode(node);
-      case "h2":
-        return toLexicalHeadingNode(node);
-      case "h3":
-        return toLexicalHeadingNode(node);
-      case "h4":
-        return toLexicalHeadingNode(node);
-      case "h5":
-        return toLexicalHeadingNode(node);
-      case "h6":
-        return toLexicalHeadingNode(node);
-      case "li":
-        return toLexicalListItemNode(node);
-      case "p":
-        return toLexicalParagraphNode(node);
-      case "ul":
-        return toLexicalListNode(node);
-      case "ol":
-        return toLexicalListNode(node);
-      case "span":
-        return toLexicalTextNode(node);
-      default:
-        throw Error("Unexpected node tag: " + JSON.stringify(node, null, 2));
-    }
-  } else if (VAL_EXTENSION in node) {
-    switch (node[VAL_EXTENSION]) {
-      case "file":
-        return toLexicalImageNode(node);
-      default:
-        throw Error(
-          "Unexpected val extension: " + JSON.stringify(node, null, 2)
-        );
-    }
-  } else {
-    throw Error("Unexpected node: " + JSON.stringify(node, null, 2));
-  }
-}
-
-function toLexicalImageNode(
-  node: FileSource<{ width: number; height: number; sha256: string }>
-): LexicalImageNode {
-  const url = Internal.convertFileSource(node).url;
-  const fileExt = getFileExtFromUrl(url); // TODO: add file extension to metadata and use this only as fallback
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "image",
-    src: url,
-    width: node.metadata?.width,
-    height: node.metadata?.height,
-    sha256: node.metadata?.sha256,
-    fileExt,
-    // TODO: altText
-  };
-}
-
-const URL_FILE_EXT_REGEX = /.*\/(.*)\?/;
-function getFileExtFromUrl(url: string): string | undefined {
-  const match = url.match(URL_FILE_EXT_REGEX);
-  if (match) {
-    const fileExtension = match[1].split(".").slice(-1)[0];
-    return fileExtension;
-  }
-}
-
-export function toLexical(
-  richtext: RichTextSource<AnyRichTextOptions>
-): LexicalRootNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    format: "",
-    type: "root",
-    children: richtext.children.map(toLexicalNode),
-  };
-}
-
-function toLexicalHeadingNode(
-  heading: ValHeadingNode<AnyRichTextOptions>
-): LexicalHeadingNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "heading",
-    tag: heading.tag,
-    children: heading.children.map(toLexicalNode),
-  };
-}
-
-function toLexicalParagraphNode(
-  paragraph: ValParagraphNode<AnyRichTextOptions>
-): LexicalParagraphNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "paragraph",
-    children: paragraph.children.map(toLexicalNode),
-  };
-}
-
-function toLexicalListItemNode(
-  listItem: ValListItemNode<AnyRichTextOptions>
-): LexicalListItemNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "listitem",
-    children: listItem.children.map(toLexicalNode),
-  };
-}
-
-function toLexicalListNode(
-  list:
-    | ValUnorderedListNode<AnyRichTextOptions>
-    | ValOrderedListNode<AnyRichTextOptions>
-): LexicalListNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "list",
-    listType: list.tag === "ol" ? "number" : "bullet",
-    children: list.children.map(toLexicalNode),
-    ...(list.dir ? { direction: list.dir } : { direction: null }),
-  };
-}
-
-const FORMAT_MAPPING = {
-  bold: 1, // 0001
-  italic: 2, // 0010
-  "line-through": 4, // 0100
-  // underline: 8, // 1000
-};
-
-export function toLexicalFormat(
-  classes: (keyof typeof FORMAT_MAPPING)[]
-): number {
-  return classes.reduce(
-    (prev, curr) => prev | /* bitwise or */ FORMAT_MAPPING[curr],
-    0
-  );
-}
-
-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 [];
-  });
-}
-
-function toLexicalTextNode(
-  spanNode: ValSpanNode<AnyRichTextOptions>
-): LexicalTextNode {
-  const child = spanNode.children[0];
-  if (typeof child === "string") {
-    return {
-      ...COMMON_LEXICAL_PROPS,
-      type: "text",
-      text: child,
-      format: toLexicalFormat(spanNode.classes),
-    };
-  } else {
-    // recurse the spans and merge their classes
-    return toLexicalTextNode({
-      ...child,
-      classes: spanNode.classes.concat(child.classes),
-    });
-  }
-}
-
-export function fromLexical(node: LexicalRootNode): {
-  node: RichText<AnyRichTextOptions>;
-  files: Record<string, string>;
-} {
-  const files = {};
-  return {
-    node: {
-      _type: "richtext",
-      children: node.children.map((node) =>
-        fromLexicalNode(node, files)
-      ) as RootNode<AnyRichTextOptions>[], // TODO: validate
-    },
-    files,
-  };
-}
-
-export function fromLexicalNode(
-  node: LexicalNode,
-  files: Record<string, string>
-) {
-  switch (node.type) {
-    case "heading":
-      return fromLexicalHeadingNode(node, files);
-    case "paragraph":
-      return fromLexicalParagraphNode(node, files);
-    case "text":
-      return fromLexicalTextNode(node);
-    case "list":
-      return fromLexicalListNode(node, files);
-    case "listitem":
-      return fromLexicalListItemNode(node, files);
-    case "image":
-      return fromLexicalImageNode(node, files);
-    default:
-      throw Error(`Unknown lexical node: ${JSON.stringify(node)}`);
-  }
-}
-
-function fromLexicalImageNode(
-  node: LexicalImageNode,
-  files: Record<string, string>
-) {
-  if (node.src.startsWith("data:")) {
-    const filePath = `/public/${node.sha256}.${node.fileExt}`;
-    files[filePath] = node.src;
-    return {
-      [VAL_EXTENSION]: "file",
-      [FILE_REF_PROP]: filePath,
-      metadata: {
-        width: node.width,
-        height: node.width,
-        sha256: node.sha256,
-      },
-    };
-  } else {
-    return {
-      [VAL_EXTENSION]: "file",
-      [FILE_REF_PROP]: `/public${node.src.split("?")[0]}`,
-      metadata: {
-        width: node.width,
-        height: node.width,
-        sha256: node.sha256,
-      },
-    };
-  }
-}
-
-function fromLexicalTextNode(
-  textNode: LexicalTextNode
-): ValSpanNode<AnyRichTextOptions> | string {
-  if (textNode.format === "" || textNode.format === 0) {
-    return textNode.text;
-  }
-  return {
-    tag: "span",
-    classes: fromLexicalFormat(textNode.format),
-    children: [textNode.text],
-  };
-}
-
-function fromLexicalHeadingNode(
-  headingNode: LexicalHeadingNode,
-  files: Record<string, string>
-): ValHeadingNode<AnyRichTextOptions> {
-  return {
-    tag: headingNode.tag,
-    children: headingNode.children.map((node) =>
-      fromLexicalNode(node, files)
-    ) as ValHeadingNode<AnyRichTextOptions>["children"], // TODO: validate children
-  };
-}
-
-function fromLexicalParagraphNode(
-  paragraphNode: LexicalParagraphNode,
-  files: Record<string, string>
-): ValParagraphNode<AnyRichTextOptions> {
-  return {
-    tag: "p",
-    children: paragraphNode.children.map((node) =>
-      fromLexicalNode(node, files)
-    ) as ValParagraphNode<AnyRichTextOptions>["children"], // TODO: validate children
-  };
-}
-
-function fromLexicalListNode(
-  listNode: LexicalListNode,
-  files: Record<string, string>
-):
-  | ValOrderedListNode<AnyRichTextOptions>
-  | ValUnorderedListNode<AnyRichTextOptions> {
-  return {
-    ...(listNode.direction ? { dir: listNode.direction } : {}),
-    tag: listNode.listType === "number" ? "ol" : "ul",
-    children: listNode.children.map((node) => fromLexicalNode(node, files)) as (
-      | ValOrderedListNode<AnyRichTextOptions>
-      | ValUnorderedListNode<AnyRichTextOptions>
-    )["children"], // TODO: validate children
-  };
-}
-
-function fromLexicalListItemNode(
-  listItemNode: LexicalListItemNode,
-  files: Record<string, string>
-): ValListItemNode<AnyRichTextOptions> {
-  return {
-    tag: "li",
-    children: listItemNode.children.map((node) =>
-      fromLexicalNode(node, files)
-    ) as ValListItemNode<AnyRichTextOptions>["children"],
-  };
-}