@valbuild/ui 0.26.0 → 0.27.0

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

@@ -1,381 +0,0 @@
-import { RichText, AnyRichTextOptions } from "@valbuild/core";
-import {
-  toLexicalFormat,
-  fromLexicalFormat,
-  richTextSourceToLexical,
-  LexicalRootNode,
-} from "./richTextSourceToLexical";
-
-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 toLexical", () => {
-    const input: RichText<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: "p",
-          children: ["Inline line break", { tag: "br", children: [] }],
-        },
-        { tag: "br", children: [] },
-        { tag: "br", children: [] },
-        {
-          tag: "p",
-          children: [
-            { tag: "a", href: "https://example.com", children: ["Link"] },
-          ],
-        },
-        {
-          tag: "ul",
-          children: [
-            {
-              tag: "li",
-              children: [
-                {
-                  tag: "ol",
-                  dir: "rtl",
-                  children: [
-                    {
-                      tag: "li",
-                      children: [
-                        {
-                          tag: "span",
-                          classes: ["italic"],
-                          children: ["number 1.1. breaking lines: "],
-                        },
-                        { tag: "br", children: [] },
-                        "after line break",
-                      ],
-                    },
-                    { tag: "li", children: ["number 1.2"] },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-    const output: LexicalRootNode = {
-      version: 1,
-      format: "",
-      indent: 0,
-      direction: null,
-      type: "root",
-      children: [
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h1",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 1",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h2",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 2",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h3",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 3",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h4",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 4",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h5",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 5",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "heading",
-          tag: "h6",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Title 6",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "paragraph",
-          children: [
-            {
-              version: 1,
-              format: 7,
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Formatted span",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "paragraph",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "text",
-              text: "Inline line break",
-            },
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "linebreak",
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "paragraph",
-          children: [],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "paragraph",
-          children: [],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "paragraph",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "link",
-              url: "https://example.com",
-              children: [
-                {
-                  version: 1,
-                  format: "",
-                  indent: 0,
-                  direction: null,
-                  type: "text",
-                  text: "Link",
-                },
-              ],
-            },
-          ],
-        },
-        {
-          version: 1,
-          format: "",
-          indent: 0,
-          direction: null,
-          type: "list",
-          listType: "bullet",
-          children: [
-            {
-              version: 1,
-              format: "",
-              indent: 0,
-              direction: null,
-              type: "listitem",
-              children: [
-                {
-                  version: 1,
-                  format: "",
-                  indent: 0,
-                  direction: "rtl",
-                  type: "list",
-                  listType: "number",
-                  children: [
-                    {
-                      version: 1,
-                      format: "",
-                      indent: 0,
-                      direction: null,
-                      type: "listitem",
-                      children: [
-                        {
-                          version: 1,
-                          format: 2,
-                          indent: 0,
-                          direction: null,
-                          type: "text",
-                          text: "number 1.1. breaking lines: ",
-                        },
-                        {
-                          version: 1,
-                          format: "",
-                          indent: 0,
-                          direction: null,
-                          type: "linebreak",
-                        },
-                        {
-                          version: 1,
-                          format: "",
-                          indent: 0,
-                          direction: null,
-                          type: "text",
-                          text: "after line break",
-                        },
-                      ],
-                    },
-                    {
-                      version: 1,
-                      format: "",
-                      indent: 0,
-                      direction: null,
-                      type: "listitem",
-                      children: [
-                        {
-                          version: 1,
-                          format: "",
-                          indent: 0,
-                          direction: null,
-                          type: "text",
-                          text: "number 1.2",
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    };
-    expect(richTextSourceToLexical(input)).toStrictEqual(output);
-  });
-});

package/src/richtext/conversion/richTextSourceToLexical.ts

@@ -1,293 +0,0 @@
-import {
-  AnyRichTextOptions,
-  HeadingNode as ValHeadingNode,
-  ListItemNode as ValListItemNode,
-  SpanNode as ValSpanNode,
-  UnorderedListNode as ValUnorderedListNode,
-  OrderedListNode as ValOrderedListNode,
-  ParagraphNode as ValParagraphNode,
-  RichTextNode as ValRichTextNode,
-  LinkNode as ValLinkNode,
-  ImageNode as ValImageNode,
-  RichText,
-} from "@valbuild/core";
-import { ImagePayload } from "../../components/RichTextEditor/Nodes/ImageNode";
-
-/// Serialized Lexical Nodes:
-// TODO: replace with Lexical libs types - not currently exported?
-
-export type LexicalTextNode = CommonLexicalProps & {
-  type: "text";
-  text: string;
-  format: "" | number;
-};
-
-type InlineNode = LexicalTextNode | LexicalLinkNode;
-
-export type LexicalParagraphNode = CommonLexicalProps & {
-  type: "paragraph";
-  children: (InlineNode | LexicalLineBreakNode)[];
-};
-
-export type LexicalHeadingNode = CommonLexicalProps & {
-  type: "heading";
-  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  children: InlineNode[];
-};
-
-export type LexicalListItemNode = CommonLexicalProps & {
-  type: "listitem";
-  children: (InlineNode | LexicalListNode | LexicalLineBreakNode)[];
-};
-
-export type LexicalListNode = CommonLexicalProps & {
-  type: "list";
-  listType: "bullet" | "number" | "checked";
-  direction: "ltr" | "rtl" | null;
-  children: LexicalListItemNode[];
-};
-
-export type LexicalImageNode = CommonLexicalProps & {
-  type: "image";
-} & ImagePayload;
-
-export type LexicalLinkNode = CommonLexicalProps & {
-  type: "link";
-  url: string;
-  children: LexicalTextNode[];
-};
-
-export type LexicalLineBreakNode = CommonLexicalProps & {
-  type: "linebreak";
-};
-
-export type LexicalNode =
-  | LexicalTextNode
-  | LexicalParagraphNode
-  | LexicalHeadingNode
-  | LexicalListItemNode
-  | LexicalListNode
-  | LexicalImageNode
-  | LexicalLineBreakNode
-  | LexicalLinkNode;
-
-export type LexicalRootNode = {
-  type: "root";
-  children: (LexicalHeadingNode | LexicalParagraphNode | LexicalListNode)[];
-  version: 1;
-  format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
-  direction: null | "ltr" | "rtl";
-} & CommonLexicalProps;
-
-export 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: ValRichTextNode<AnyRichTextOptions>,
-  useBreakNode = false
-): 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);
-      case "a":
-        return toLexicalLinkNode(node);
-      case "img":
-        return toLexicalImageNode(node);
-      case "br":
-        if (useBreakNode) {
-          return {
-            ...COMMON_LEXICAL_PROPS,
-            type: "linebreak",
-          };
-        }
-        return toLexicalPseudoLineBreakNode();
-      default:
-        throw Error("Unexpected node tag: " + JSON.stringify(node, null, 2));
-    }
-  } else {
-    throw Error("Unexpected node: " + JSON.stringify(node, null, 2));
-  }
-}
-
-function toLexicalImageNode(
-  node: ValImageNode<AnyRichTextOptions>
-): LexicalImageNode {
-  const url = node.src;
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "image",
-    src: url,
-    width: node.width,
-    height: node.height,
-    // TODO: altText
-  };
-}
-
-function toLexicalLinkNode(
-  link: ValLinkNode<AnyRichTextOptions>
-): LexicalLinkNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "link",
-    url: link.href,
-    children: link.children.map((child) =>
-      toLexicalNode(child)
-    ) as LexicalLinkNode["children"],
-  };
-}
-export function richTextSourceToLexical(
-  richtext: RichText<AnyRichTextOptions>
-): LexicalRootNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    format: "",
-    type: "root",
-    children: richtext.children.map((child) =>
-      toLexicalNode(child)
-    ) as LexicalRootNode["children"],
-  };
-}
-
-function toLexicalHeadingNode(
-  heading: ValHeadingNode<AnyRichTextOptions>
-): LexicalHeadingNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "heading",
-    tag: heading.tag,
-    children: heading.children.map((child) =>
-      toLexicalNode(child)
-    ) as LexicalHeadingNode["children"],
-  };
-}
-
-function toLexicalParagraphNode(
-  paragraph: ValParagraphNode<AnyRichTextOptions>
-): LexicalParagraphNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "paragraph",
-    children: paragraph.children.map((child) =>
-      toLexicalNode(child, true)
-    ) as LexicalParagraphNode["children"],
-  };
-}
-
-// Lexical does not support line breaks, so we convert them to empty paragraphs
-function toLexicalPseudoLineBreakNode(): LexicalParagraphNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "paragraph",
-    children: [] as LexicalParagraphNode["children"],
-  };
-}
-
-function toLexicalListItemNode(
-  listItem: ValListItemNode<AnyRichTextOptions>
-): LexicalListItemNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "listitem",
-    children: listItem.children.map((child) =>
-      toLexicalNode(child, true)
-    ) as LexicalListItemNode["children"],
-  };
-}
-
-function toLexicalListNode(
-  list:
-    | ValUnorderedListNode<AnyRichTextOptions>
-    | ValOrderedListNode<AnyRichTextOptions>
-): LexicalListNode {
-  return {
-    ...COMMON_LEXICAL_PROPS,
-    type: "list",
-    listType: list.tag === "ol" ? "number" : "bullet",
-    children: list.children.map((child) =>
-      toLexicalNode(child)
-    ) as LexicalListNode["children"],
-    ...(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),
-    });
-  }
-}