@meta-1/editor 0.0.27

package/src/editor/menus/TextMenu/hooks/useTextmenuContentTypes.ts

@@ -0,0 +1,86 @@
+import type { Editor } from "@tiptap/react";
+
+import { i18n } from "../../../utils/locale";
+import type { ContentPickerOptions } from "../components/ContentTypePicker";
+
+export const useTextmenuContentTypes = (editor: Editor): ContentPickerOptions => {
+  return [
+    {
+      type: "category",
+      label: i18n("textMenu.hierarchy"),
+      id: "hierarchy",
+    },
+    {
+      icon: "Pilcrow",
+      onClick: () => editor.chain().focus().lift("taskItem").liftListItem("listItem").setParagraph().run(),
+      id: "paragraph",
+      disabled: () => !editor.can().setParagraph(),
+      isActive: () =>
+        editor.isActive("paragraph") &&
+        !editor.isActive("orderedList") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("taskList"),
+      label: i18n("textMenu.paragraph"),
+      type: "option",
+    },
+    {
+      icon: "Heading1",
+      onClick: () => editor.chain().focus().lift("taskItem").liftListItem("listItem").setHeading({ level: 1 }).run(),
+      id: "heading1",
+      disabled: () => !editor.can().setHeading({ level: 1 }),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+      label: i18n("textMenu.heading1"),
+      type: "option",
+    },
+    {
+      icon: "Heading2",
+      onClick: () => editor.chain().focus().lift("taskItem").liftListItem("listItem").setHeading({ level: 2 }).run(),
+      id: "heading2",
+      disabled: () => !editor.can().setHeading({ level: 2 }),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+      label: i18n("textMenu.heading2"),
+      type: "option",
+    },
+    {
+      icon: "Heading3",
+      onClick: () => editor.chain().focus().lift("taskItem").liftListItem("listItem").setHeading({ level: 3 }).run(),
+      id: "heading3",
+      disabled: () => !editor.can().setHeading({ level: 3 }),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+      label: i18n("textMenu.heading3"),
+      type: "option",
+    },
+    {
+      type: "category",
+      label: i18n("textMenu.lists"),
+      id: "lists",
+    },
+    {
+      icon: "List",
+      onClick: () => editor.chain().focus().toggleBulletList().run(),
+      id: "bulletList",
+      disabled: () => !editor.can().toggleBulletList(),
+      isActive: () => editor.isActive("bulletList"),
+      label: i18n("textMenu.bulletList"),
+      type: "option",
+    },
+    {
+      icon: "ListOrdered",
+      onClick: () => editor.chain().focus().toggleOrderedList().run(),
+      id: "orderedList",
+      disabled: () => !editor.can().toggleOrderedList(),
+      isActive: () => editor.isActive("orderedList"),
+      label: i18n("textMenu.orderedList"),
+      type: "option",
+    },
+    {
+      icon: "ListTodo",
+      onClick: () => editor.chain().focus().toggleTaskList().run(),
+      id: "todoList",
+      disabled: () => !editor.can().toggleTaskList(),
+      isActive: () => editor.isActive("taskList"),
+      label: i18n("textMenu.ListTodo"),
+      type: "option",
+    },
+  ];
+};

package/src/editor/menus/TextMenu/hooks/useTextmenuStates.ts

@@ -0,0 +1,50 @@
+import { useCallback } from "react";
+import type { Editor } from "@tiptap/react";
+
+import { isCustomNodeSelected, isTextSelected } from "../../../utils";
+import type { ShouldShowProps } from "../../types";
+
+export const useTextMenuStates = (editor: Editor) => {
+  const shouldShow = useCallback(
+    ({ view, from }: ShouldShowProps) => {
+      if (!view) {
+        return false;
+      }
+
+      const dragging = view.dom.classList.contains("dragging");
+      if (dragging) {
+        return false;
+      }
+
+      const domAtPos = view.domAtPos(from || 0).node as HTMLElement;
+      const nodeDOM = view.nodeDOM(from || 0) as HTMLElement;
+      const node = nodeDOM || domAtPos;
+
+      if (isCustomNodeSelected(editor, node)) {
+        return false;
+      }
+
+      return isTextSelected({ editor });
+    },
+    [editor],
+  );
+
+  return {
+    isBold: editor.isActive("bold"),
+    isItalic: editor.isActive("italic"),
+    isStrike: editor.isActive("strike"),
+    isUnderline: editor.isActive("underline"),
+    isCode: editor.isActive("code"),
+    isSubscript: editor.isActive("subscript"),
+    isSuperscript: editor.isActive("superscript"),
+    isAlignLeft: editor.isActive({ textAlign: "left" }),
+    isAlignCenter: editor.isActive({ textAlign: "center" }),
+    isAlignRight: editor.isActive({ textAlign: "right" }),
+    isAlignJustify: editor.isActive({ textAlign: "justify" }),
+    currentColor: editor.getAttributes("textStyle")?.color || undefined,
+    currentHighlight: editor.getAttributes("highlight")?.color || undefined,
+    currentFont: editor.getAttributes("textStyle")?.fontFamily || undefined,
+    currentSize: editor.getAttributes("textStyle")?.fontSize || undefined,
+    shouldShow,
+  };
+};

package/src/editor/menus/TextMenu/index.tsx

@@ -0,0 +1,2 @@
+export type { TextMenuProps } from "./TextMenu";
+export { TextMenu } from "./TextMenu";

package/src/editor/menus/types.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { Editor as CoreEditor } from "@tiptap/core";
+import type { EditorState } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Editor } from "@tiptap/react";
+
+export interface MenuProps {
+  editor: Editor;
+  // biome-ignore lint/suspicious/noExplicitAny: <appendTo>
+  appendTo?: React.RefObject<any>;
+  shouldHide?: boolean;
+}
+
+export interface ShouldShowProps {
+  editor?: CoreEditor;
+  view: EditorView;
+  state?: EditorState;
+  oldState?: EditorState;
+  from?: number;
+  to?: number;
+}

package/src/editor/panels/Colorpicker/ColorButton.tsx

@@ -0,0 +1,35 @@
+import { memo, useCallback } from "react";
+import cn from "classnames";
+
+export type ColorButtonProps = {
+  color?: string;
+  active?: boolean;
+  onColorChange?: (color: string) => void;
+};
+
+export const ColorButton = memo(({ color, active, onColorChange }: ColorButtonProps) => {
+  const wrapperClassName = cn(
+    "group flex items-center justify-center rounded px-1.5 py-1.5",
+    !active && "hover:bg-neutral-100",
+    active && "bg-neutral-100",
+  );
+  const bubbleClassName = cn(
+    "h-4 w-4 rounded bg-slate-100 shadow-sm ring-current ring-offset-2",
+    !active && "hover:ring-1",
+    active && "ring-1",
+  );
+
+  const handleClick = useCallback(() => {
+    if (onColorChange) {
+      onColorChange(color || "");
+    }
+  }, [onColorChange, color]);
+
+  return (
+    <button className={wrapperClassName} onClick={handleClick} type="button">
+      <div className={bubbleClassName} style={{ backgroundColor: color, color: color }} />
+    </button>
+  );
+});
+
+ColorButton.displayName = "ColorButton";

package/src/editor/panels/Colorpicker/Colorpicker.tsx

@@ -0,0 +1,67 @@
+import { type ChangeEvent, useCallback, useState } from "react";
+import { HexColorPicker } from "react-colorful";
+
+import { themeColors } from "../../constants";
+import { Icon } from "../../ui/Icon";
+import { Toolbar } from "../../ui/Toolbar";
+import { i18n } from "../../utils/locale";
+import { ColorButton } from "./ColorButton";
+
+const HEX_COLOR_REGEX = /^#([0-9A-F]{3}){1,2}$/i;
+
+export type ColorPickerProps = {
+  color?: string;
+  onChange?: (color: string) => void;
+  onClear?: () => void;
+};
+
+export const ColorPicker = ({ color, onChange, onClear }: ColorPickerProps) => {
+  const [colorInputValue, setColorInputValue] = useState(color || "");
+
+  const handleColorUpdate = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setColorInputValue(event.target.value);
+  }, []);
+
+  const handleColorChange = useCallback(() => {
+    const isCorrectColor = HEX_COLOR_REGEX.test(colorInputValue);
+
+    if (!isCorrectColor) {
+      if (onChange) {
+        onChange("");
+      }
+
+      return;
+    }
+
+    if (onChange) {
+      onChange(colorInputValue);
+    }
+  }, [colorInputValue, onChange]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <HexColorPicker className="!w-full" color={color || ""} onChange={onChange} />
+      <input
+        className="w-full rounded border border-neutral-200 bg-white p-2 text-black focus:outline-1 focus:outline-neutral-300 focus:ring-0 dark:border-neutral-800 dark:bg-black dark:text-white dark:focus:outline-neutral-700"
+        onBlur={handleColorChange}
+        onChange={handleColorUpdate}
+        placeholder="#000000"
+        type="text"
+        value={colorInputValue}
+      />
+      <div className="flex max-w-[15rem] flex-wrap items-center gap-1">
+        {themeColors.map((currentColor) => (
+          <ColorButton
+            active={currentColor === color}
+            color={currentColor}
+            key={currentColor}
+            onColorChange={onChange}
+          />
+        ))}
+        <Toolbar.Button onClick={onClear} tooltip={i18n("colorPicker.undo")}>
+          <Icon name="Undo" />
+        </Toolbar.Button>
+      </div>
+    </div>
+  );
+};

package/src/editor/panels/Colorpicker/index.tsx

@@ -0,0 +1,2 @@
+export type { ColorPickerProps } from "./Colorpicker";
+export { ColorPicker } from "./Colorpicker";

package/src/editor/panels/LinkEditorPanel/LinkEditorPanel.tsx

@@ -0,0 +1,76 @@
+import { type ChangeEvent, type FormEvent, useCallback, useMemo, useState } from "react";
+
+import { Button } from "../../ui/Button";
+import { Icon } from "../../ui/Icon";
+import { Surface } from "../../ui/Surface";
+import { Toggle } from "../../ui/Toggle";
+import { i18n } from "../../utils/locale";
+
+const URL_REGEX = /^(\S+):(\/\/)?\S+$/;
+
+export type LinkEditorPanelProps = {
+  initialUrl?: string;
+  initialOpenInNewTab?: boolean;
+  onSetLink: (url: string, openInNewTab?: boolean) => void;
+};
+
+export const useLinkEditorState = ({ initialUrl, initialOpenInNewTab, onSetLink }: LinkEditorPanelProps) => {
+  const [url, setUrl] = useState(initialUrl || "");
+  const [openInNewTab, setOpenInNewTab] = useState(initialOpenInNewTab);
+
+  const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setUrl(event.target.value);
+  }, []);
+
+  const isValidUrl = useMemo(() => URL_REGEX.test(url), [url]);
+
+  const handleSubmit = useCallback(
+    (e: FormEvent) => {
+      e.preventDefault();
+      if (isValidUrl) {
+        onSetLink(url, openInNewTab);
+      }
+    },
+    [url, isValidUrl, openInNewTab, onSetLink],
+  );
+
+  return {
+    url,
+    setUrl,
+    openInNewTab,
+    setOpenInNewTab,
+    onChange,
+    handleSubmit,
+    isValidUrl,
+  };
+};
+
+export const LinkEditorPanel = ({ onSetLink, initialOpenInNewTab, initialUrl }: LinkEditorPanelProps) => {
+  const state = useLinkEditorState({ onSetLink, initialOpenInNewTab, initialUrl });
+
+  return (
+    <Surface className="p-2">
+      <form className="flex items-center gap-2" onSubmit={state.handleSubmit}>
+        <label className="flex cursor-text items-center gap-2 rounded-lg bg-neutral-100 p-2 dark:bg-neutral-900">
+          <Icon className="flex-none text-black dark:text-white" name="Link" />
+          <input
+            className="min-w-[12rem] flex-1 bg-transparent text-black text-sm outline-none dark:text-white"
+            onChange={state.onChange}
+            placeholder={i18n("panel.linkEditor.input")}
+            type="url"
+            value={state.url}
+          />
+        </label>
+        <Button buttonSize="small" disabled={!state.isValidUrl} type="submit" variant="primary">
+          {i18n("panel.linkEditor.submit")}
+        </Button>
+      </form>
+      <div className="mt-3">
+        <span className="flex cursor-pointer select-none items-center justify-start gap-2 font-semibold text-neutral-500 text-sm dark:text-neutral-400">
+          {i18n("panel.linkEditor.newTab")}
+          <Toggle active={state.openInNewTab} onChange={state.setOpenInNewTab} />
+        </span>
+      </div>
+    </Surface>
+  );
+};

package/src/editor/panels/LinkEditorPanel/index.tsx

@@ -0,0 +1 @@
+export { LinkEditorPanel } from "./LinkEditorPanel";

package/src/editor/panels/LinkPreviewPanel/LinkPreviewPanel.tsx

@@ -0,0 +1,32 @@
+import { Icon } from "../../ui/Icon";
+import { Surface } from "../../ui/Surface";
+import { Toolbar } from "../../ui/Toolbar";
+import Tooltip from "../../ui/Tooltip";
+import { i18n } from "../../utils/locale";
+
+export type LinkPreviewPanelProps = {
+  url: string;
+  onEdit: () => void;
+  onClear: () => void;
+};
+
+export const LinkPreviewPanel = ({ onClear, onEdit, url }: LinkPreviewPanelProps) => {
+  return (
+    <Surface className="flex items-center gap-2 p-2">
+      <a className="break-all text-sm underline" href={url} rel="noopener noreferrer" target="_blank">
+        {url}
+      </a>
+      <Toolbar.Divider />
+      <Tooltip title={i18n("panel.linkPreview.edit")}>
+        <Toolbar.Button onClick={onEdit}>
+          <Icon name="Pen" />
+        </Toolbar.Button>
+      </Tooltip>
+      <Tooltip title={i18n("panel.linkPreview.delete")}>
+        <Toolbar.Button onClick={onClear}>
+          <Icon name="Trash2" />
+        </Toolbar.Button>
+      </Tooltip>
+    </Surface>
+  );
+};

package/src/editor/panels/LinkPreviewPanel/index.tsx

@@ -0,0 +1 @@
+export { LinkPreviewPanel } from "./LinkPreviewPanel";

package/src/editor/panels/index.tsx

@@ -0,0 +1,3 @@
+export { ColorPicker } from "./Colorpicker";
+export { LinkEditorPanel } from "./LinkEditorPanel";
+export { LinkPreviewPanel } from "./LinkPreviewPanel";

package/src/editor/types.tsx

@@ -0,0 +1,38 @@
+export type EditorUser = {
+  clientId: string;
+  name: string;
+  color: string;
+  initials?: string;
+};
+
+export type LanguageOption = {
+  name: string;
+  label: string;
+  value: string;
+};
+
+export type AiTone =
+  | "academic"
+  | "business"
+  | "casual"
+  | "childfriendly"
+  | "conversational"
+  | "emotional"
+  | "humorous"
+  | "informative"
+  | "inspirational"
+  | string;
+
+export type AiPromptType = "SHORTEN" | "EXTEND" | "SIMPLIFY" | "TONE";
+
+export type AiToneOption = {
+  name: string;
+  label: string;
+  value: AiTone;
+};
+
+export type AiImageStyle = {
+  name: string;
+  label: string;
+  value: string;
+};

package/src/editor/ui/Button/Button.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import cn from "classnames";
+
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "quaternary" | "ghost";
+export type ButtonSize = "medium" | "small" | "icon" | "iconSmall";
+
+export type ButtonProps = {
+  variant?: ButtonVariant;
+  active?: boolean;
+  activeClassname?: string;
+  buttonSize?: ButtonSize;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { active, buttonSize = "medium", children, disabled, variant = "primary", className, activeClassname, ...rest },
+    ref,
+  ) => {
+    const buttonClassName = cn(
+      "group flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent font-semibold text-sm disabled:opacity-50",
+
+      variant === "primary" &&
+        cn(
+          "border-black bg-black text-white dark:border-white dark:bg-white dark:text-black",
+          !(disabled || active) &&
+            "hover:bg-neutral-800 active:bg-neutral-900 dark:active:bg-neutral-300 dark:hover:bg-neutral-200",
+          active && cn("bg-neutral-900 dark:bg-neutral-300", activeClassname),
+        ),
+
+      variant === "secondary" &&
+        cn(
+          "text-neutral-900 dark:text-white",
+          !(disabled || active) &&
+            "hover:bg-neutral-100 active:bg-neutral-200 dark:active:bg-neutral-800 dark:hover:bg-neutral-900",
+          active && "bg-neutral-200 dark:bg-neutral-800",
+        ),
+
+      variant === "tertiary" &&
+        cn(
+          "bg-neutral-50 text-neutral-900 dark:border-neutral-900 dark:bg-neutral-900 dark:text-white",
+          !(disabled || active) &&
+            "hover:bg-neutral-100 active:bg-neutral-200 dark:active:bg-neutral-700 dark:hover:bg-neutral-800",
+          active && cn("bg-neutral-200 dark:bg-neutral-800", activeClassname),
+        ),
+
+      variant === "ghost" &&
+        cn(
+          "border-transparent bg-transparent text-neutral-500 dark:text-neutral-400",
+          !(disabled || active) &&
+            "hover:bg-black/5 hover:text-neutral-700 active:bg-black/10 active:text-neutral-800 dark:active:text-neutral-200 dark:hover:bg-white/10 dark:hover:text-neutral-300",
+          active && cn("bg-black/10 text-neutral-800 dark:bg-white/20 dark:text-neutral-200", activeClassname),
+        ),
+
+      buttonSize === "medium" && "px-3 py-2",
+      buttonSize === "small" && "px-2 py-1",
+      buttonSize === "icon" && "h-8 w-8",
+      buttonSize === "iconSmall" && "h-6 w-6",
+
+      className,
+    );
+
+    return (
+      <button className={buttonClassName} disabled={disabled} ref={ref} {...rest}>
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/editor/ui/Button/index.tsx

@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./Button";
+export { Button } from "./Button";

package/src/editor/ui/Dropdown/Dropdown.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import cn from "classnames";
+
+export const DropdownCategoryTitle = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="mb-1 px-1.5 font-semibold text-[.65rem] text-neutral-500 uppercase dark:text-neutral-400">
+      {children}
+    </div>
+  );
+};
+
+export const DropdownButton = ({
+  children,
+  isActive,
+  onClick,
+  disabled,
+  className,
+}: {
+  children: ReactNode;
+  isActive?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}) => {
+  const buttonClass = cn(
+    "flex w-full items-center gap-2 rounded bg-transparent p-1.5 text-left font-medium text-neutral-500 text-sm dark:text-neutral-400",
+    !(isActive || disabled),
+    "hover:bg-neutral-100 hover:text-neutral-800 dark:hover:bg-neutral-900 dark:hover:text-neutral-200",
+    isActive && !disabled && "bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200",
+    disabled && "cursor-not-allowed text-neutral-400 dark:text-neutral-600",
+    className,
+  );
+
+  return (
+    <button className={buttonClass} disabled={disabled} onClick={onClick} type="button">
+      {children}
+    </button>
+  );
+};

package/src/editor/ui/Dropdown/index.tsx

@@ -0,0 +1 @@
+export { DropdownButton, DropdownCategoryTitle } from "./Dropdown";

package/src/editor/ui/Icon.tsx

@@ -0,0 +1,21 @@
+import { memo } from "react";
+import classNames from "classnames";
+import { icons } from "lucide-react";
+
+export type IconProps = {
+  name: keyof typeof icons;
+  className?: string;
+  strokeWidth?: number;
+};
+
+export const Icon = memo(({ name, className, strokeWidth }: IconProps) => {
+  const IconComponent = icons[name];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent className={classNames("h-4 w-4", className)} strokeWidth={strokeWidth || 2.5} />;
+});
+
+Icon.displayName = "Icon";

package/src/editor/ui/Loader/Loader.tsx

@@ -0,0 +1,39 @@
+import { createPortal } from "react-dom";
+
+import type { LoaderProps, LoadingWrapperProps } from "./types";
+
+const LoadingWrapper = ({ label }: LoadingWrapperProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-black p-4 text-white shadow-2xl dark:bg-white dark:text-black">
+      <svg
+        className="h-8 w-8 animate-spin"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Loading</title>
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+      {label && <p className="font-semibold text-sm text-white leading-tight dark:text-black">{label}</p>}
+    </div>
+  );
+};
+
+export const Loader = ({ hasOverlay = true, label }: LoaderProps) => {
+  return hasOverlay ? (
+    createPortal(
+      <div className="fixed top-0 left-0 z-[9999] flex h-full w-full select-none items-center justify-center bg-black/60">
+        <LoadingWrapper label={label} />
+      </div>,
+      document.body,
+    )
+  ) : (
+    <LoadingWrapper label={label} />
+  );
+};
+
+export default Loader;

package/src/editor/ui/Loader/index.ts

@@ -0,0 +1 @@
+export { Loader } from "./Loader";

package/src/editor/ui/Loader/types.ts

@@ -0,0 +1,7 @@
+export interface LoadingWrapperProps {
+  label?: string;
+}
+
+export interface LoaderProps extends LoadingWrapperProps {
+  hasOverlay?: boolean;
+}