@platecms/delta-smart-text 0.6.0 → 0.8.0

package/src/react/components/Element.spec.tsx

@@ -0,0 +1,244 @@
+import { render, screen } from "@testing-library/react";
+import { Element } from "./Element";
+import { describe, it } from "vitest";
+import { c } from "@platecms/delta-castscript";
+import { Leaf } from "./Leaf";
+import { Descendant, createEditor } from "slate";
+import { Slate, withReact } from "slate-react";
+
+describe("Element", () => {
+  const editor = withReact(createEditor());
+  const slateEditorValue: Descendant[] = [
+    {
+      type: "paragraph",
+      children: [{ text: "Test text" }],
+    },
+  ];
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+  });
+
+  it("should render element as blockquote", () => {
+    // Arrange
+    render(
+      <Slate editor={editor} initialValue={slateEditorValue}>
+        <Element attributes={{}} children={[]} element={{ type: "blockquote", children: [] }} />
+      </Slate>,
+    );
+
+    // Act
+
+    // Assert
+    expect(screen.getByRole("blockquote")).toBeDefined();
+  });
+
+  describe("heading", () => {
+    it("should render element as h1", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "heading", level: 1, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("heading", { level: 1 })).toBeDefined();
+    });
+
+    it("should render element as h2", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "heading", level: 2, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("heading", { level: 2 })).toBeDefined();
+    });
+
+    it("should render element as h3", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "heading", level: 3, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("heading", { level: 3 })).toBeDefined();
+    });
+
+    it("should render element as h4", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "heading", level: 4, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("heading", { level: 4 })).toBeDefined();
+    });
+
+    it("should render element as h5", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "heading", level: 5, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("heading", { level: 5 })).toBeDefined();
+    });
+  });
+
+  describe("list", () => {
+    it("should render element as ul", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "list", ordered: false, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("list")).toBeDefined();
+    });
+
+    it("should render element as ol", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "list", ordered: true, children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("list")).toBeDefined();
+    });
+
+    it("should render element as list item", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "listItem", children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("listitem")).toBeDefined();
+    });
+
+    it("should render list with list items", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element
+            attributes={{}}
+            element={{ type: "list", ordered: false, children: [{ type: "listItem", children: [] }] }}
+          >
+            <Element attributes={{}} children={[]} element={{ type: "listItem", children: [] }} />
+          </Element>
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("list")).toBeDefined();
+      expect(screen.getByRole("listitem")).toBeDefined();
+    });
+  });
+
+  describe("code", () => {
+    it("should render element as code", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element attributes={{}} children={[]} element={{ type: "code", children: [] }} />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByRole("code")).toBeDefined();
+    });
+  });
+
+  describe("contentValue", () => {
+    it("should render element as contentValue", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element
+            attributes={{}}
+            children={[]}
+            element={{
+              type: "contentValue",
+              prn: "test",
+              root: c("root", "welcome"),
+              children: [{ text: "" }],
+            }}
+          />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByText("welcome")).toBeDefined();
+    });
+  });
+
+  describe("link", () => {
+    it("should render element as link", () => {
+      // Arrange
+      render(
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <Element
+            attributes={{}}
+            children={[
+              <Leaf
+                attributes={{ "data-slate-leaf": true }}
+                children={[<p>Test</p>]}
+                leaf={{ text: "Test", bold: true, italic: true }}
+                text={{ text: "Test", bold: true, italic: true }}
+              />,
+            ]}
+            element={{
+              type: "link",
+              url: "https://www.google.com",
+              children: [{ bold: true, italic: true, text: "Test" }],
+              target: "blank",
+            }}
+          />
+        </Slate>,
+      );
+
+      // Act
+
+      // Assert
+      expect(screen.getByText("Test")).toBeDefined();
+    });
+  });
+});

package/src/react/components/Element.tsx

@@ -0,0 +1,151 @@
+import React, { HTMLAttributes, ReactNode, useEffect } from "react";
+import { DeltaElement, ListElement } from "../types";
+import ContentValueElement from "./elements/ContentValueElement";
+import CodeElement from "./elements/CodeElement";
+import LinkElement from "./elements/LinkElement";
+import { Editor, Element as SlateElement, Transforms } from "slate";
+import { useSlate } from "slate-react";
+import { findElement } from "../utils";
+
+export function Element({
+  attributes,
+  children,
+  element,
+  lastKey,
+}: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: DeltaElement;
+  lastKey: string | undefined;
+}): React.ReactElement {
+  const style = {};
+  const editor = useSlate();
+
+  useEffect(() => {
+    if(element.type === "list" || element.type === "listItem") {
+      const list = findElement(editor, "list") as [ListElement, number[]] | undefined;
+      if(!list) return;
+      if(lastKey === "Enter") {
+        // If the last list item is empty, remove the last list item and continue with a paragraph node
+        if(list[0].children?.length > 1 && list[0].children[list[0].children.length - 2].children?.[0]?.text?.length === 0) {
+          Transforms.removeNodes(editor, {
+            match: node =>
+              !Editor.isEditor(node) &&
+              SlateElement.isElement(node) &&
+              node.type === "listItem" && node.children?.[0]?.text?.length === 0,
+          });
+          Transforms.unwrapNodes(editor, {
+            match: node =>
+              !Editor.isEditor(node) &&
+              SlateElement.isElement(node) &&
+              node.type === "list",
+            split: true,
+          });
+        
+          Transforms.setNodes(editor, { type: "paragraph" });
+        }
+      }
+      if(lastKey === "Backspace") {
+        // If the first list item is empty, remove the list and insert a paragraph
+        if(list[0].children?.[0]?.children?.[0]?.text?.length === 0) {
+          Transforms.removeNodes(editor, {
+            match: (node) => !Editor.isEditor(node) && SlateElement.isElement(node) && node.type === "list",
+          });
+          Transforms.insertNodes(editor, { type: 'paragraph', children: [{ text: '' }] });
+        }
+      }
+    }
+    
+  }, [lastKey]);
+
+  switch (element.type) {
+    case "heading":
+      switch (element.level) {
+        case 1:
+          return (
+            <h1 style={style} {...attributes} className={"text-5xl"}>
+              {children}
+            </h1>
+          );
+        case 2:
+          return (
+            <h2 style={style} {...attributes} className={"text-4xl"}>
+              {children}
+            </h2>
+          );
+        case 3:
+          return (
+            <h3 style={style} {...attributes} className={"text-3xl"}>
+              {children}
+            </h3>
+          );
+        case 4:
+          return (
+            <h4 style={style} {...attributes} className={"text-2xl"}>
+              {children}
+            </h4>
+          );
+        case 5:
+          return (
+            <h5 style={style} {...attributes} className={"text-xl"}>
+              {children}
+            </h5>
+          );
+        default:
+          return (
+            <h5 style={style} {...attributes} className={"text-xl"}>
+              {children}
+            </h5>
+          );
+      }
+    case "list":
+      if (element.ordered) {
+        return (
+          <ol style={style} {...attributes} className={"list-decimal pl-4"}>
+            {children}
+          </ol>
+        );
+      }
+      return (
+        <ul style={style} {...attributes} className={"list-disc pl-4"}>
+          {children}
+        </ul>
+      );
+    case "blockquote":
+      return (
+        <blockquote style={style} {...attributes}>
+          {children}
+        </blockquote>
+      );
+    case "listItem":
+      return (
+        <li style={style} {...attributes}>
+          {children}
+        </li>
+      );
+    case "code":
+      return (
+        <CodeElement element={element} attributes={attributes}>
+          {children}
+        </CodeElement>
+      );
+    case "contentValue":
+      return (
+        <ContentValueElement element={element} attributes={attributes}>
+          {children}
+        </ContentValueElement>
+      );
+    case "link":
+      return (
+        <LinkElement element={element} attributes={attributes}>
+          {children}
+        </LinkElement>
+      );
+    default:
+      return (
+        <p style={style} {...attributes}>
+          {children}
+        </p>
+      );
+  }
+}

package/src/react/components/FontAwesomeIcon.tsx

@@ -0,0 +1,17 @@
+export function FontAwesomeIcon({
+  icon,
+  className,
+  size = "md",
+  spin = false,
+}: {
+  icon: [string, string];
+  className?: string;
+  size?: "lg" | "md" | "sm" | "xs";
+  spin?: boolean;
+}): React.ReactElement {
+  return (
+    <i
+      className={`fa-light fa-${icon[1]} ${className ?? ""} ${size !== "md" ? `text-${size}` : "text-[16px]"} ${spin ? "fa-spin" : ""}`}
+    ></i>
+  );
+}

package/src/react/components/Leaf.spec.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from "@testing-library/react";
+import { Leaf } from "./Leaf";
+import { describe, expect, it } from "vitest";
+
+describe("Leaf", () => {
+  it("should render text inside leaf", () => {
+    // Arrange
+    render(
+      <Leaf attributes={{}} leaf={{ text: "Hello" }}>
+        Hello
+      </Leaf>,
+    );
+
+    // Act
+
+    // Assert
+    expect(screen.getByText("Hello")).toBeDefined();
+  });
+
+  it("should render bold text inside leaf", () => {
+    // Arrange
+    const { container } = render(
+      <Leaf attributes={{}} leaf={{ text: "Hello", bold: true }}>
+        Hello
+      </Leaf>,
+    );
+
+    // Act
+
+    // Assert
+    expect(container.getElementsByClassName("bold")).toBeDefined();
+  });
+
+  it("should render italic text inside leaf", () => {
+    // Arrange
+    const { container } = render(
+      <Leaf attributes={{}} leaf={{ text: "Hello", italic: true }}>
+        Hello
+      </Leaf>,
+    );
+
+    // Act
+
+    // Assert
+    expect(container.getElementsByClassName("italic")).toBeDefined();
+  });
+
+  it("should render underline text inside leaf", () => {
+    // Arrange
+    const { container } = render(
+      <Leaf attributes={{}} leaf={{ text: "Hello", underline: true }}>
+        Hello
+      </Leaf>,
+    );
+
+    // Act
+
+    // Assert
+    expect(container.getElementsByClassName("underline")).toBeDefined();
+  });
+});

package/src/react/components/Leaf.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { DeltaLeaf } from "../types";
+import { DecoratorBuilder, fontSize, fontStyle, fontWeight, textDecoration } from "../utils/decorator";
+import { RenderLeafProps } from "slate-react";
+
+export function Leaf(props: RenderLeafProps): React.ReactElement {
+  function buildDecorations(): string {
+    return new DecoratorBuilder<DeltaLeaf>(props.leaf)
+      .add(fontWeight)
+      .add(fontSize)
+      .add(fontStyle)
+      .add(textDecoration)
+      .build()([])
+      .join(" ");
+  }
+
+  return (
+    <span {...props.attributes} className={`${buildDecorations()} ${props.leaf.text === "" ? "pl-0.5" : ""}`}>
+      {props.children}
+    </span>
+  );
+}

package/src/react/components/elements/CodeElement.tsx

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { CodeElement as CodeElementType } from "../../types";
+
+export function CodeElement(props: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: CodeElementType;
+}): React.ReactElement {
+  return (
+    <pre {...props.attributes}>
+      <code>{props.children}</code>
+    </pre>
+  );
+}
+
+export default CodeElement;

package/src/react/components/elements/ContentValueElement.tsx

@@ -0,0 +1,33 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { ContentValueElement as ContentValueElementType } from "../../types";
+import { useSelected } from "slate-react";
+import { toPlaintext } from "@platecms/delta-cast-util-to-plaintext";
+
+export function ContentValueElement({
+  attributes,
+  children,
+  element,
+}: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: ContentValueElementType;
+}): React.ReactElement {
+  const selected = useSelected();
+
+  const style: React.CSSProperties = {
+    fontWeight: element.children[0].bold ? "bold" : "normal",
+    fontStyle: element.children[0].italic ? "italic" : "normal",
+    textDecoration: `${element.children[0].underline ? "underline" : ""} ${element.children[0].strikethrough ? "line-through" : ""}`,
+  };
+
+  return (
+    <span className={`${selected ? "bg-[#EAEAFA]" : ""} border border-[#705ED9] py-1 rounded-l-sm`}>
+      <span {...attributes} contentEditable={false} className={`border-[#705ED9] px-2 py-1.5 border-r-3`} style={style}>
+        {children}
+        {element.root ? toPlaintext(element.root) : ""}
+      </span>
+    </span>
+  );
+}
+
+export default ContentValueElement;

package/src/react/components/elements/LinkElement.tsx

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes, ReactNode, useEffect } from "react";
+import { useSelected, useSlate } from "slate-react";
+import { LinkElement as LinkElementType } from "../../types";
+import { Editor, Element, Transforms } from "slate";
+
+export function LinkElement({
+  attributes,
+  children,
+  element,
+}: {
+  attributes: HTMLAttributes<HTMLElement>;
+  children: ReactNode;
+  element: LinkElementType;
+}): React.ReactElement {
+  const selected = useSelected();
+  const editor = useSlate();
+
+  const style: React.CSSProperties = {
+    fontWeight: element.children[0].bold ? "bold" : "normal",
+    fontStyle: element.children[0].italic ? "italic" : "normal",
+  };
+
+  useEffect(() => {
+    if (element.children[0].text.length === 0) {
+      Transforms.unwrapNodes(editor, {
+        match: (node) => !Editor.isEditor(node) && Element.isElement(node) && node.type === "link",
+      });
+    }
+  }, [element]);
+
+  return (
+    <span className="relative">
+      <div
+        className={`${selected ? "bg-blue-400/20 px-1" : "border-transparent underline text-primary"} inline-block transition-all duration-300`}
+        style={style}
+        {...attributes}
+      >
+        {children}
+      </div>
+    </span>
+  );
+}
+
+export default LinkElement;

package/src/react/components/inputs/SearchInput.tsx

@@ -0,0 +1,22 @@
+export function SearchInput({
+  onChange,
+  value,
+  placeholder,
+}: {
+  onChange: (value: string) => void;
+  value: string;
+  placeholder: string;
+}): React.ReactElement {
+  return (
+    <input
+      onChange={(event) => {
+        onChange(event.target.value);
+      }}
+      placeholder={placeholder}
+      value={value}
+      name="search"
+      className={"bg-gray-50 w-full outline-none rounded-md px-3 py-2"}
+      type="text"
+    />
+  );
+}

package/src/react/components/inputs/TextInput.tsx

@@ -0,0 +1,30 @@
+export function TextInput({
+  onChange,
+  name = "text",
+  value,
+  placeholder,
+  label,
+}: {
+  onChange: (value: string) => void;
+  name?: string;
+  label: string;
+  value: string;
+  placeholder: string;
+}): React.ReactElement {
+  return (
+    <div className={"flex flex-col gap-1 w-full"}>
+      <label className={"font-semibold text-xs"}>{label}</label>
+      <input
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
+        placeholder={placeholder}
+        value={value}
+        name={name}
+        className={"w-full outline-none rounded-md px-5 py-3 border border-gray-300"}
+        type="text"
+        data-testid="text-input"
+      />
+    </div>
+  );
+}