@meta-1/editor 0.0.28 → 1.0.0

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

@@ -1,86 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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

package/src/editor/menus/types.ts

@@ -1,21 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

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

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

@@ -1,76 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

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

package/src/editor/panels/index.tsx

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

package/src/editor/types.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

package/src/editor/ui/Icon.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

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

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