@platecms/delta-smart-text 0.6.0 → 0.8.0

package/src/react/components/menus/link/LinkInput.tsx

@@ -0,0 +1,195 @@
+import { useLazyQuery } from "@apollo/client";
+import {
+  AllContentExperiencesDocument,
+  ContentExperience,
+  SortingDirection,
+} from "../../../../../__generated__/graphql";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { debounce } from "lodash";
+import { useClickOutside } from "../../../utils/index";
+import { LinkData } from "./LinkMenu";
+import { FontAwesomeIcon } from "../../FontAwesomeIcon";
+import { useTranslation } from "react-i18next";
+
+export function LinkInput({
+  onChange,
+  onContentExperienceChanged,
+  value,
+  placeholder,
+  label,
+  contentExperiencePrn,
+  gridPlacementPrn,
+}: {
+  onChange: (partial: Partial<LinkData>) => void;
+  onContentExperienceChanged: (contentExperience?: ContentExperience) => void;
+  value: string;
+  placeholder?: string;
+  label: string;
+  contentExperiencePrn?: string;
+  gridPlacementPrn?: string;
+}): React.ReactElement {
+  const perPage = 5;
+  const wrapperRef = useRef(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [loadContentExperiences, { data, loading: isLoading }] = useLazyQuery(AllContentExperiencesDocument, {
+    variables: {
+      paginate: {
+        first: perPage,
+      },
+      orderBy: {
+        key: "createdAt",
+        direction: SortingDirection.Desc,
+      },
+      where: {
+        title: [
+          {
+            _ilike: searchValue,
+          },
+        ],
+      },
+    },
+    notifyOnNetworkStatusChange: true,
+  });
+
+  const { t: translate } = useTranslation();
+
+  const selectedContentExperience = useMemo(
+    () => data?.contentExperiences.edges.find((edge) => (edge.node as ContentExperience).prn === contentExperiencePrn),
+    [data, contentExperiencePrn],
+  );
+
+  useClickOutside(wrapperRef, () => {
+    setIsExpanded(false);
+  });
+
+  useEffect(() => {
+    if (!isExpanded) {
+      return;
+    }
+
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+
+    void loadContentExperiences();
+  }, [isExpanded]);
+
+  const debouncedUpdateValue = useCallback(
+    debounce((newValue: string) => {
+      setSearchValue(newValue);
+      setIsTyping(false);
+    }, 1000),
+    [],
+  );
+
+  function onInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    if (event.target.value.length > 0) {
+      setIsExpanded(true);
+    }
+
+    setIsTyping(true);
+    onContentExperienceChanged(undefined);
+    onChange({ url: event.target.value });
+
+    debouncedUpdateValue(event.target.value);
+  }
+
+  function onContentExperienceClicked(clickedContentExperience: ContentExperience): void {
+    onContentExperienceChanged(clickedContentExperience);
+    setSearchValue("");
+    setIsExpanded(false);
+  }
+
+  return (
+    <div className={"flex flex-col gap-1 w-full"}>
+      <label className={"font-semibold text-xs"}>{label}</label>
+
+      <div ref={wrapperRef} className={"relative w-full"}>
+        <div
+          className={`flex items-center gap-4 border border-gray-300 rounded-md h-12 px-5`}
+        >
+          <div className="">
+            {contentExperiencePrn !== undefined || gridPlacementPrn !== undefined ? (
+              <FontAwesomeIcon icon={["fal", "sparkles"]} className={"text-primary"} />
+            ) : (
+              <FontAwesomeIcon icon={["fal", "globe"]} className={"text-primary"} />
+            )}
+          </div>
+          {isExpanded ? (
+            <input
+              ref={inputRef}
+              onChange={onInputChange}
+              placeholder={placeholder}
+              value={value}
+              className={`w-full outline-none`}
+              type="text"
+              data-testid="link-input"
+            />
+          ) : null}
+
+          {!isExpanded ? (
+            <div className="w-full truncate leading-none" onClick={() => setIsExpanded(!isExpanded)}>
+              {selectedContentExperience ? (
+                <p className="text-sm">{(selectedContentExperience?.node as ContentExperience)?.title}</p>
+              ) : null}
+              <p
+                data-testid="link-input-value"
+                className={`${selectedContentExperience ? "text-xs text-gray-500" : ""}`}
+              >
+                {value !== "" ? value : placeholder}
+              </p>
+            </div>
+          ) : null}
+
+          <div onClick={() => setIsExpanded(!isExpanded)} className="p-3 -mr-5 cursor-pointer">
+            <FontAwesomeIcon
+              icon={["fal", "chevron-down"]}
+              className={`text-gray-500 transition-all duration-300 ${isExpanded ? "rotate-180" : ""}`}
+            />
+          </div>
+        </div>
+
+        {isExpanded ? (
+          <div className={"absolute w-full bg-white shadow-md rounded-md border border-gray-300 mt-1 z-10"}>
+            {isLoading || isTyping
+              ? Array.from({ length: perPage }).map((_, index) => (
+                  <div className={"px-5 py-3 flex items-center gap-2"} key={`loading-${index}`}>
+                    <div className={"w-full h-5 bg-slate-100 rounded-sm animate-pulse"} />
+                  </div>
+                ))
+              : null}
+
+            {data?.contentExperiences.edges.length === 0 && !isTyping ? (
+              <div className={"px-5 py-3"}>
+                <p>{translate("smart_text.toolbar.link.no_results_found")}</p>
+              </div>
+            ) : null}
+
+            {!isTyping &&
+              data?.contentExperiences.edges.map((edge) => (
+                <div
+                  className={"px-5 py-2 hover:bg-gray-100/20 cursor-pointer flex justify-between items-center"}
+                  key={(edge.node as ContentExperience).prn}
+                  onClick={() => onContentExperienceClicked(edge.node as ContentExperience)}
+                >
+                  <div>
+                    <p>{(edge.node as ContentExperience).title}</p>
+                    <p className={"text-sm text-gray-500"}>
+                      {`${(edge.node as ContentExperience).pathPart.channel.domain}${(edge.node as ContentExperience).pathPart.path}`}
+                    </p>
+                  </div>
+                  {contentExperiencePrn === (edge.node as ContentExperience).prn ? (
+                    <FontAwesomeIcon icon={["fal", "check"]} className={"text-primary"} />
+                  ) : null}
+                </div>
+              ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/react/components/menus/link/LinkMenu.spec.tsx

@@ -0,0 +1,145 @@
+import { render, screen } from "@testing-library/react";
+import { MockedProvider } from "@apollo/client/testing";
+import { LinkMenu } from "./LinkMenu";
+import { beforeEach, describe, it, vi } from "vitest";
+import { Descendant, createEditor } from "slate";
+import { Slate, withReact } from "slate-react";
+import { LinkElement } from "../../../types";
+
+// Mock only the findElement function
+vi.mock("../../../utils", () => ({
+  findElement: vi.fn(),
+}));
+
+describe("LinkMenu", () => {
+  const mockOnClose = vi.fn();
+  const editor = withReact(createEditor());
+  const slateEditorValue: Descendant[] = [
+    {
+      type: "paragraph",
+      children: [{ text: "Test text" }],
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    editor.selection = {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 4 },
+    };
+  });
+
+  it("should render", () => {
+    render(
+      <MockedProvider>
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <LinkMenu buttonText={"Add link"} onClose={mockOnClose} showMenu={true} />,
+        </Slate>
+      </MockedProvider>,
+    );
+  });
+
+  it("should show urlText if there is an active link", async () => {
+    // Import the mocked function
+    const { findElement, useClickOutside } = await import("../../../utils");
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    vi.mocked(useClickOutside).mockImplementation(() => {});
+
+    // Mock the findElement to return a link element
+    const mockLinkElement: LinkElement = {
+      type: "link",
+      url: "https://example.com",
+      target: "blank",
+      children: [{ text: "Example Link Text" }],
+    };
+
+    vi.mocked(findElement).mockReturnValue([mockLinkElement, [0, 0]]);
+
+    // Create a real editor with selection
+    const initialValue: Descendant[] = [
+      {
+        type: "paragraph",
+        children: [{ text: "Test text" }],
+      },
+    ];
+
+    // Set up the editor selection
+    editor.selection = {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 4 },
+    };
+
+    // Render the component wrapped in Slate context
+    render(
+      <MockedProvider>
+        <Slate editor={editor} initialValue={initialValue}>
+          <LinkMenu buttonText={"Add link"} onClose={mockOnClose} showLinkTextInput={false} showMenu={true} />,
+        </Slate>
+      </MockedProvider>,
+    );
+
+    // Check that the URL input shows the correct URL
+    const urlInput: HTMLParagraphElement = screen.getByTestId("link-input-value");
+    expect(urlInput.textContent).toBe("https://example.com");
+  });
+
+  it("should not show urlText if there is no active link", async () => {
+    // Import the mocked function
+    const { findElement, useClickOutside } = await import("../../../utils");
+
+    // Mock the findElement to return undefined (no link)
+    vi.mocked(findElement).mockReturnValue(undefined);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    vi.mocked(useClickOutside).mockImplementation(() => {});
+
+    const initialValue: Descendant[] = [
+      {
+        type: "paragraph",
+        children: [{ text: "Test text" }],
+      },
+    ];
+
+    // Set up the editor selection
+    editor.selection = {
+      anchor: { path: [0, 0], offset: 0 },
+      focus: { path: [0, 0], offset: 4 },
+    };
+
+    // Render the component wrapped in Slate context
+    render(
+      <MockedProvider>
+        <Slate editor={editor} initialValue={initialValue}>
+          <LinkMenu buttonText={"Add link"} onClose={mockOnClose} showLinkTextInput={false} showMenu={true} />,
+        </Slate>
+      </MockedProvider>,
+    );
+
+    const textInputs: HTMLInputElement[] = screen.queryAllByTestId("text-input");
+
+    expect(textInputs.length).toBe(0);
+  });
+
+  it("should show link text input if showLinkTextInput is true", async () => {
+    // Import the mocked function
+    vi.mock("../../../utils", () => ({
+      findElement: vi.fn().mockReturnValue([{ type: "link", children: [{ text: "Test text" }] }, [0, 0]]),
+      hasElementSelected: vi.fn().mockReturnValue(true),
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      useClickOutside: vi.fn().mockImplementation(() => {}),
+    }));
+
+    render(
+      <MockedProvider>
+        <Slate editor={editor} initialValue={slateEditorValue}>
+          <LinkMenu buttonText={"Add link"} onClose={mockOnClose} showLinkTextInput={true} showMenu={true} />,
+        </Slate>
+      </MockedProvider>,
+    );
+
+    const linkTextInputs: HTMLParagraphElement[] = screen.getAllByTestId("link-input-value");
+    const textInputs: HTMLInputElement[] = screen.getAllByTestId("text-input");
+
+    expect(linkTextInputs.length).toBe(1);
+    expect(textInputs.length).toBe(1);
+  });
+});

package/src/react/components/menus/link/LinkMenu.tsx

@@ -0,0 +1,289 @@
+import React, { useEffect, useState } from "react";
+import { LinkInput } from "./LinkInput";
+import { useSlate } from "slate-react";
+import { Editor, Range, Transforms } from "slate";
+import { URL_REGEX } from "@platecms/delta-cast";
+import { findElement } from "../../../utils";
+import { FontAwesomeIcon } from "../../FontAwesomeIcon";
+import { LinkElement } from "../../../types";
+import { TextInput } from "../../inputs/TextInput";
+import { AnchorInput } from "./AnchorInput";
+import { useTranslation } from "react-i18next";
+import { capitalCase } from "change-case";
+export interface LinkData {
+  text: string;
+  url: string;
+  target: LinkElement["target"];
+  internal?: {
+    prn: string;
+    anchor?: boolean;
+  };
+}
+
+export function LinkMenu({
+  showLinkTextInput = false,
+  buttonText,
+  menuClass,
+  showMenu,
+  onClose,
+}: {
+  showLinkTextInput?: boolean;
+  buttonText: string;
+  menuClass?: string;
+  showMenu?: boolean;
+  onClose: () => void;
+}): React.ReactElement | null {
+  const editor = useSlate();
+
+  const { selection } = editor;
+
+  const [start, end] = Range.edges(
+    selection ?? { anchor: { path: [0, 0], offset: 0 }, focus: { path: [0, 0], offset: 0 } },
+  );
+
+  const [link, setLink] = useState<LinkData>({
+    text: Editor.string(editor, Editor.range(editor, start, end)),
+    url: "",
+    target: "self",
+  });
+
+  const [contentExperiencePrn, setContentExperiencePrn] = useState<string | undefined>(undefined);
+  const [gridPlacementPrn, setGridPlacementPrn] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent): void {
+      if (event.key === "Escape") {
+        onClose?.();
+      }
+    }
+
+    // Attach listener when component mounts
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Clean up when component unmounts
+    return (): void => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!hasActiveLink()) {
+      return;
+    }
+
+    initialize();
+  }, [showMenu]);
+
+  function partialUpdate(updated: Partial<LinkData>): void {
+    setLink({
+      text: updated.text ?? link.text,
+      url: updated.url ?? link.url,
+      target: updated.target ?? link.target,
+      // If the internal is undefined, we want to remove it
+      internal: updated.internal === undefined ? undefined : (updated.internal ?? link.internal),
+    });
+  }
+
+  function hasActiveLink(): boolean {
+    return findElement(editor, "link") !== undefined;
+  }
+
+  function insertOrUpdateLink(): void {
+    if (hasActiveLink()) {
+      updateLink();
+    } else {
+      insertLink();
+    }
+
+    reset();
+    onClose();
+  }
+
+  function insertLink(): void {
+    Transforms.insertNodes(
+      editor,
+      {
+        type: "link",
+        url: link.url,
+        target: link.target,
+        children: [{ text: link.text }],
+        internal: link.internal,
+      },
+      {
+        at: { anchor: start, focus: end },
+      },
+    );
+  }
+
+  const { t: translate } = useTranslation();
+
+  function updateLink(): void {
+    const linkEntry = findElement(editor, "link");
+    if (!linkEntry) {
+      return;
+    }
+
+    const [, path] = linkEntry;
+    Transforms.setNodes(
+      editor,
+      {
+        url: link.url,
+        target: link.target,
+        internal: link.internal,
+      },
+      { at: path },
+    );
+  }
+
+  function reset(): void {
+    setLink({
+      text: "",
+      url: "",
+      target: "self",
+    });
+  }
+
+  function initialize(): void {
+    const linkEntry = findElement(editor, "link");
+
+    if (!linkEntry) {
+      return;
+    }
+
+    const [linkElement] = linkEntry as [LinkElement, number[]];
+
+    setLink({
+      text: linkElement.children[0].text,
+      url: linkElement.url,
+      target: linkElement.target,
+      internal: linkElement.internal,
+    });
+
+    if (linkElement.internal?.anchor) {
+      setGridPlacementPrn(linkElement.internal.prn);
+    } else if (linkElement.internal?.prn) {
+      setContentExperiencePrn(linkElement.internal.prn);
+    }
+  }
+
+  const isValidUrl = URL_REGEX.test(link.url);
+
+  if (!selection) {
+    return null;
+  }
+
+  return (
+    <div className={`absolute left-0 mt-1 z-10 min-w-sm w-[20vw] ${menuClass ?? ""}`}>
+      {showMenu ? (
+        <div className={"bg-white py-3 shadow-2xl outline-1 outline-gray-100 rounded-md"}>
+          <div className="px-4 flex flex-col gap-4">
+            <LinkInput
+              onChange={partialUpdate}
+              placeholder={translate("smart_text.toolbar.link.enter_link")}
+              label={translate("smart_text.toolbar.link.title")}
+              value={link.url}
+              contentExperiencePrn={contentExperiencePrn}
+              gridPlacementPrn={gridPlacementPrn}
+              onContentExperienceChanged={(contentExperience) => {
+                if (contentExperience) {
+                  setContentExperiencePrn(contentExperience.prn as string);
+                  setGridPlacementPrn(undefined);
+                  partialUpdate({
+                    url: `${contentExperience.pathPart.channel.domain}${contentExperience.pathPart.path}`,
+                    text: link.text,
+                    internal: {
+                      prn: contentExperience.prn,
+                      anchor: false,
+                    },
+                  });
+                } else {
+                  setContentExperiencePrn(undefined);
+                  setGridPlacementPrn(undefined);
+                  partialUpdate({
+                    internal: undefined,
+                  });
+                }
+              }}
+            />
+            {contentExperiencePrn ? (
+              <AnchorInput
+                label={translate("smart_text.toolbar.link.select_section")}
+                value={link.url}
+                contentExperiencePrn={contentExperiencePrn}
+                gridPlacementPrn={gridPlacementPrn}
+                onGridPlacementChanged={(gridPlacement) => {
+                  if (gridPlacement) {
+                    setGridPlacementPrn(gridPlacement.prn as string);
+                    partialUpdate({
+                      url: `${link.url.split("#")[0]}#${gridPlacement.row}`,
+                      internal: { prn: gridPlacement.prn, anchor: true },
+                    });
+                  } else {
+                    setGridPlacementPrn(undefined);
+                    partialUpdate({
+                      url: link.url.split("#")[0],
+                      internal: { prn: contentExperiencePrn, anchor: false },
+                    });
+                  }
+                }}
+              />
+            ) : null}
+            {showLinkTextInput ? (
+              <TextInput
+                onChange={(text) => partialUpdate({ text })}
+                placeholder={translate("smart_text.toolbar.link.enter_display_text")}
+                value={link.text}
+                label={translate("smart_text.toolbar.link.display_text")}
+              />
+            ) : null}
+
+            <div className={"flex items-center gap-2"}>
+              <div
+                className="flex items-center gap-2 cursor-pointer pt-1 pb-3"
+                onClick={() => setLink({ ...link, target: link.target === "blank" ? "self" : "blank" })}
+              >
+                <div className="relative w-5 h-5">
+                  <input
+                    type="checkbox"
+                    name="target"
+                    id="target"
+                    className="w-5 h-5 opacity-0 z-10 absolute cursor-pointer pointer-events-none"
+                    checked={link.target === "blank"}
+                    onChange={() => setLink({ ...link, target: link.target === "blank" ? "self" : "blank" })}
+                  />
+                  <div
+                    className={`h-5 w-5 rounded-md absolute z-0 top-0 left-0 flex items-center justify-center border border-gray-200 ${
+                      link.target === "blank" ? "bg-primary" : "bg-white"
+                    }`}
+                  >
+                    {link.target === "blank" ? (
+                      <FontAwesomeIcon icon={["fal", "check"]} className="text-white" size="sm" />
+                    ) : null}
+                  </div>
+                </div>
+                <label className="cursor-pointer pointer-events-none -mb-1" htmlFor="target">
+                  {translate("smart_text.toolbar.link.new_tab")}
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className={"flex justify-end gap-2 border-t border-gray-100 px-4 pt-4"}>
+            <button
+              onClick={onClose}
+              className={"border border-gray-300 text-gray-500 px-4 pt-2 pb-1.5 rounded-md cursor-pointer hover:shadow-md transition-all duration-300"}
+            >
+              {capitalCase(translate("general.word.cancel"))}
+            </button>
+            <button
+              onClick={insertOrUpdateLink}
+              disabled={!isValidUrl}
+              className={`bg-primary text-white px-4 pt-2 pb-1.5 rounded-md cursor-pointer hover:shadow-md transition-all duration-300 ${!isValidUrl ? "opacity-50 cursor-not-allowed" : ""}`}
+            >
+              {buttonText}
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/react/components/menus/partials/MenuButton.tsx

@@ -0,0 +1,52 @@
+import React, { ReactNode, useRef, useState } from "react";
+import { useClickOutside } from "../../../utils";
+import { FontAwesomeIcon } from "../../FontAwesomeIcon";
+
+export function MenuButton({
+  icon,
+  text,
+  onClick,
+  children,
+}: {
+  icon?: [string, string];
+  text: string;
+  onClick?: (event: React.MouseEvent) => void;
+  children?: ReactNode;
+}): React.ReactElement {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const wrapperRef = useRef(null);
+  useClickOutside(wrapperRef, () => {
+    setIsExpanded(false);
+  });
+
+  function handleOnClick(event: React.MouseEvent): void {
+    if (children) {
+      setIsExpanded(!isExpanded);
+    }
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    event.preventDefault();
+  }
+
+  return (
+    <div ref={wrapperRef}>
+      <div
+        onClick={(event) => handleOnClick(event)}
+        className={`px-3 py-2 flex items-center justify-between gap-2 cursor-pointer hover:bg-gray-50 transition-colors rounded-md ${isExpanded ? "bg-primary-light" : ""}`}
+      >
+        <div className={"flex items-center gap-2"}>
+          {icon ? <FontAwesomeIcon icon={icon} className={"text-[#705ED9]"} /> : null}
+          <p className={"w-40 text-base"}>{text}</p>
+        </div>
+
+        {children ? <FontAwesomeIcon icon={["fal", "chevron-right"]} className={"text-gray-400"} size={"xs"} /> : null}
+      </div>
+
+      {isExpanded ? <div className={"absolute top-0 left-full ml-1"}>{children}</div> : null}
+    </div>
+  );
+}

package/src/react/components/menus/partials/MenuContainer.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+
+export function MenuContainer({ children }: { children?: ReactNode }): React.ReactElement {
+  return (
+    <div className={"bg-white px-4 py-2 shadow-2xl outline outline-1 outline-gray-100 rounded-md space-y-2"}>
+      {children}
+    </div>
+  );
+}

package/src/react/components/menus/partials/MenuHeader.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { FontAwesomeIcon } from "../../FontAwesomeIcon";
+
+export function MenuHeader({ text, icon }: { text: string; icon?: [string, string] }): React.ReactElement {
+  return (
+    <div className={"px-2 py-2 whitespace-nowrap flex items-center gap-2"}>
+      {icon ? <FontAwesomeIcon icon={icon} size={"xs"} /> : null}
+      <p className={"font-semibold uppercase text-xs"}>{text}</p>
+    </div>
+  );
+}