@fuma-content/studio 0.1.0 → 1.0.1

package/src/components/editor/ui/font-color-toolbar-button.tsx

@@ -1,804 +0,0 @@
-"use client";
-
-import debounce from "lodash.debounce";
-import { EraserIcon, PlusIcon } from "lucide-react";
-import { useEditorRef, useComposedRef, useEditorSelector } from "platejs/react";
-import React from "react";
-
-import { buttonVariants } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-
-import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar";
-
-export function FontColorToolbarButton({
-  children,
-  nodeType,
-  tooltip,
-}: {
-  nodeType: string;
-  tooltip?: string;
-} & React.ComponentProps<typeof DropdownMenu>) {
-  const editor = useEditorRef();
-
-  const selectionDefined = useEditorSelector((editor) => !!editor.selection, []);
-
-  const color = useEditorSelector((editor) => editor.api.mark(nodeType) as string, [nodeType]);
-
-  const [selectedColor, setSelectedColor] = React.useState<string>();
-  const [open, setOpen] = React.useState(false);
-
-  const onToggle = React.useCallback(
-    (value = !open) => {
-      setOpen(value);
-    },
-    [open, setOpen],
-  );
-
-  const updateColor = React.useCallback(
-    (value: string) => {
-      if (editor.selection) {
-        setSelectedColor(value);
-
-        editor.tf.select(editor.selection);
-        editor.tf.focus();
-
-        editor.tf.addMarks({ [nodeType]: value });
-      }
-    },
-    [editor, nodeType],
-  );
-
-  const updateColorAndClose = React.useCallback(
-    (value: string) => {
-      updateColor(value);
-      onToggle();
-    },
-    [onToggle, updateColor],
-  );
-
-  const clearColor = React.useCallback(() => {
-    if (editor.selection) {
-      editor.tf.select(editor.selection);
-      editor.tf.focus();
-
-      if (selectedColor) {
-        editor.tf.removeMarks(nodeType);
-      }
-
-      onToggle();
-    }
-  }, [editor, selectedColor, onToggle, nodeType]);
-
-  React.useEffect(() => {
-    if (selectionDefined) {
-      setSelectedColor(color);
-    }
-  }, [color, selectionDefined]);
-
-  return (
-    <DropdownMenu
-      open={open}
-      onOpenChange={(value) => {
-        setOpen(value);
-      }}
-      modal={false}
-    >
-      <DropdownMenuTrigger asChild>
-        <ToolbarButton pressed={open} tooltip={tooltip}>
-          {children}
-        </ToolbarButton>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="start">
-        <ColorPicker
-          color={selectedColor || color}
-          clearColor={clearColor}
-          colors={DEFAULT_COLORS}
-          customColors={DEFAULT_CUSTOM_COLORS}
-          updateColor={updateColorAndClose}
-          updateCustomColor={updateColor}
-        />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function PureColorPicker({
-  className,
-  clearColor,
-  color,
-  colors,
-  customColors,
-  updateColor,
-  updateCustomColor,
-  ...props
-}: React.ComponentProps<"div"> & {
-  colors: TColor[];
-  customColors: TColor[];
-  clearColor: () => void;
-  updateColor: (color: string) => void;
-  updateCustomColor: (color: string) => void;
-  color?: string;
-}) {
-  return (
-    <div className={cn("flex flex-col", className)} {...props}>
-      <ToolbarMenuGroup label="Custom Colors">
-        <ColorCustom
-          color={color}
-          className="px-2"
-          colors={colors}
-          customColors={customColors}
-          updateColor={updateColor}
-          updateCustomColor={updateCustomColor}
-        />
-      </ToolbarMenuGroup>
-      <ToolbarMenuGroup label="Default Colors">
-        <ColorDropdownMenuItems
-          color={color}
-          className="px-2"
-          colors={colors}
-          updateColor={updateColor}
-        />
-      </ToolbarMenuGroup>
-      {color && (
-        <ToolbarMenuGroup>
-          <DropdownMenuItem className="p-2" onClick={clearColor}>
-            <EraserIcon />
-            <span>Clear</span>
-          </DropdownMenuItem>
-        </ToolbarMenuGroup>
-      )}
-    </div>
-  );
-}
-
-const ColorPicker = React.memo(
-  PureColorPicker,
-  (prev, next) =>
-    prev.color === next.color &&
-    prev.colors === next.colors &&
-    prev.customColors === next.customColors,
-);
-
-function ColorCustom({
-  className,
-  color,
-  colors,
-  customColors,
-  updateColor,
-  updateCustomColor,
-  ...props
-}: {
-  colors: TColor[];
-  customColors: TColor[];
-  updateColor: (color: string) => void;
-  updateCustomColor: (color: string) => void;
-  color?: string;
-} & React.ComponentPropsWithoutRef<"div">) {
-  const [customColor, setCustomColor] = React.useState<string>();
-  const [value, setValue] = React.useState<string>(color || "#000000");
-
-  React.useEffect(() => {
-    if (
-      !color ||
-      customColors.some((c) => c.value === color) ||
-      colors.some((c) => c.value === color)
-    ) {
-      return;
-    }
-
-    setCustomColor(color);
-  }, [color, colors, customColors]);
-
-  const computedColors = React.useMemo(
-    () =>
-      customColor
-        ? [
-            ...customColors,
-            {
-              isBrightColor: false,
-              name: "",
-              value: customColor,
-            },
-          ]
-        : customColors,
-    [customColor, customColors],
-  );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const updateCustomColorDebounced = React.useCallback(debounce(updateCustomColor, 100), [
-    updateCustomColor,
-  ]);
-
-  return (
-    <div className={cn("relative flex flex-col gap-4", className)} {...props}>
-      <ColorDropdownMenuItems color={color} colors={computedColors} updateColor={updateColor}>
-        <ColorInput
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value);
-            updateCustomColorDebounced(e.target.value);
-          }}
-        >
-          <DropdownMenuItem
-            className={cn(
-              buttonVariants({
-                size: "icon",
-                variant: "outline",
-              }),
-              "absolute top-1 right-2 bottom-2 flex size-8 items-center justify-center rounded-full",
-            )}
-            onSelect={(e) => {
-              e.preventDefault();
-            }}
-          >
-            <span className="sr-only">Custom</span>
-            <PlusIcon />
-          </DropdownMenuItem>
-        </ColorInput>
-      </ColorDropdownMenuItems>
-    </div>
-  );
-}
-
-function ColorInput({
-  children,
-  className,
-  value = "#000000",
-  ...props
-}: React.ComponentProps<"input">) {
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-
-  return (
-    <div className="flex flex-col items-center">
-      {React.Children.map(children, (child) => {
-        if (!child) return child;
-
-        return React.cloneElement(
-          child as React.ReactElement<{
-            onClick: () => void;
-          }>,
-          {
-            onClick: () => inputRef.current?.click(),
-          },
-        );
-      })}
-      <input
-        {...props}
-        ref={useComposedRef(props.ref, inputRef)}
-        className={cn("size-0 overflow-hidden border-0 p-0", className)}
-        value={value}
-        type="color"
-      />
-    </div>
-  );
-}
-
-type TColor = {
-  isBrightColor: boolean;
-  name: string;
-  value: string;
-};
-
-function ColorDropdownMenuItem({
-  className,
-  isBrightColor,
-  isSelected,
-  name,
-  updateColor,
-  value,
-  ...props
-}: {
-  isBrightColor: boolean;
-  isSelected: boolean;
-  value: string;
-  updateColor: (color: string) => void;
-  name?: string;
-} & React.ComponentProps<typeof DropdownMenuItem>) {
-  const content = (
-    <DropdownMenuItem
-      className={cn(
-        buttonVariants({
-          size: "icon",
-          variant: "outline",
-        }),
-        "my-1 flex size-6 items-center justify-center rounded-full border border-muted border-solid p-0 transition-all hover:scale-125",
-        !isBrightColor && "border-transparent",
-        isSelected && "border-2 border-primary",
-        className,
-      )}
-      style={{ backgroundColor: value }}
-      onSelect={(e) => {
-        e.preventDefault();
-        updateColor(value);
-      }}
-      {...props}
-    />
-  );
-
-  return name ? (
-    <Tooltip>
-      <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent className="mb-1 capitalize">{name}</TooltipContent>
-    </Tooltip>
-  ) : (
-    content
-  );
-}
-
-export function ColorDropdownMenuItems({
-  className,
-  color,
-  colors,
-  updateColor,
-  ...props
-}: {
-  colors: TColor[];
-  updateColor: (color: string) => void;
-  color?: string;
-} & React.ComponentProps<"div">) {
-  return (
-    <div
-      className={cn("grid grid-cols-[repeat(10,1fr)] place-items-center gap-x-1", className)}
-      {...props}
-    >
-      <TooltipProvider>
-        {colors.map(({ isBrightColor, name, value }) => (
-          <ColorDropdownMenuItem
-            name={name}
-            key={name ?? value}
-            value={value}
-            isBrightColor={isBrightColor}
-            isSelected={color === value}
-            updateColor={updateColor}
-          />
-        ))}
-        {props.children}
-      </TooltipProvider>
-    </div>
-  );
-}
-
-export const DEFAULT_COLORS = [
-  {
-    isBrightColor: false,
-    name: "black",
-    value: "#000000",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 4",
-    value: "#434343",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 3",
-    value: "#666666",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 2",
-    value: "#999999",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 1",
-    value: "#B7B7B7",
-  },
-  {
-    isBrightColor: false,
-    name: "grey",
-    value: "#CCCCCC",
-  },
-  {
-    isBrightColor: false,
-    name: "light grey 1",
-    value: "#D9D9D9",
-  },
-  {
-    isBrightColor: true,
-    name: "light grey 2",
-    value: "#EFEFEF",
-  },
-  {
-    isBrightColor: true,
-    name: "light grey 3",
-    value: "#F3F3F3",
-  },
-  {
-    isBrightColor: true,
-    name: "white",
-    value: "#FFFFFF",
-  },
-  {
-    isBrightColor: false,
-    name: "red berry",
-    value: "#980100",
-  },
-  {
-    isBrightColor: false,
-    name: "red",
-    value: "#FE0000",
-  },
-  {
-    isBrightColor: false,
-    name: "orange",
-    value: "#FE9900",
-  },
-  {
-    isBrightColor: true,
-    name: "yellow",
-    value: "#FEFF00",
-  },
-  {
-    isBrightColor: false,
-    name: "green",
-    value: "#00FF00",
-  },
-  {
-    isBrightColor: false,
-    name: "cyan",
-    value: "#00FFFF",
-  },
-  {
-    isBrightColor: false,
-    name: "cornflower blue",
-    value: "#4B85E8",
-  },
-  {
-    isBrightColor: false,
-    name: "blue",
-    value: "#1300FF",
-  },
-  {
-    isBrightColor: false,
-    name: "purple",
-    value: "#9900FF",
-  },
-  {
-    isBrightColor: false,
-    name: "magenta",
-    value: "#FF00FF",
-  },
-
-  {
-    isBrightColor: false,
-    name: "light red berry 3",
-    value: "#E6B8AF",
-  },
-  {
-    isBrightColor: false,
-    name: "light red 3",
-    value: "#F4CCCC",
-  },
-  {
-    isBrightColor: true,
-    name: "light orange 3",
-    value: "#FCE4CD",
-  },
-  {
-    isBrightColor: true,
-    name: "light yellow 3",
-    value: "#FFF2CC",
-  },
-  {
-    isBrightColor: true,
-    name: "light green 3",
-    value: "#D9EAD3",
-  },
-  {
-    isBrightColor: false,
-    name: "light cyan 3",
-    value: "#D0DFE3",
-  },
-  {
-    isBrightColor: false,
-    name: "light cornflower blue 3",
-    value: "#C9DAF8",
-  },
-  {
-    isBrightColor: true,
-    name: "light blue 3",
-    value: "#CFE1F3",
-  },
-  {
-    isBrightColor: true,
-    name: "light purple 3",
-    value: "#D9D2E9",
-  },
-  {
-    isBrightColor: true,
-    name: "light magenta 3",
-    value: "#EAD1DB",
-  },
-
-  {
-    isBrightColor: false,
-    name: "light red berry 2",
-    value: "#DC7E6B",
-  },
-  {
-    isBrightColor: false,
-    name: "light red 2",
-    value: "#EA9999",
-  },
-  {
-    isBrightColor: false,
-    name: "light orange 2",
-    value: "#F9CB9C",
-  },
-  {
-    isBrightColor: true,
-    name: "light yellow 2",
-    value: "#FFE598",
-  },
-  {
-    isBrightColor: false,
-    name: "light green 2",
-    value: "#B7D6A8",
-  },
-  {
-    isBrightColor: false,
-    name: "light cyan 2",
-    value: "#A1C4C9",
-  },
-  {
-    isBrightColor: false,
-    name: "light cornflower blue 2",
-    value: "#A4C2F4",
-  },
-  {
-    isBrightColor: false,
-    name: "light blue 2",
-    value: "#9FC5E8",
-  },
-  {
-    isBrightColor: false,
-    name: "light purple 2",
-    value: "#B5A7D5",
-  },
-  {
-    isBrightColor: false,
-    name: "light magenta 2",
-    value: "#D5A6BD",
-  },
-
-  {
-    isBrightColor: false,
-    name: "light red berry 1",
-    value: "#CC4125",
-  },
-  {
-    isBrightColor: false,
-    name: "light red 1",
-    value: "#E06666",
-  },
-  {
-    isBrightColor: false,
-    name: "light orange 1",
-    value: "#F6B26B",
-  },
-  {
-    isBrightColor: false,
-    name: "light yellow 1",
-    value: "#FFD966",
-  },
-  {
-    isBrightColor: false,
-    name: "light green 1",
-    value: "#93C47D",
-  },
-  {
-    isBrightColor: false,
-    name: "light cyan 1",
-    value: "#76A5AE",
-  },
-  {
-    isBrightColor: false,
-    name: "light cornflower blue 1",
-    value: "#6C9EEB",
-  },
-  {
-    isBrightColor: false,
-    name: "light blue 1",
-    value: "#6FA8DC",
-  },
-  {
-    isBrightColor: false,
-    name: "light purple 1",
-    value: "#8D7CC3",
-  },
-  {
-    isBrightColor: false,
-    name: "light magenta 1",
-    value: "#C27BA0",
-  },
-
-  {
-    isBrightColor: false,
-    name: "dark red berry 1",
-    value: "#A61B00",
-  },
-  {
-    isBrightColor: false,
-    name: "dark red 1",
-    value: "#CC0000",
-  },
-  {
-    isBrightColor: false,
-    name: "dark orange 1",
-    value: "#E59138",
-  },
-  {
-    isBrightColor: false,
-    name: "dark yellow 1",
-    value: "#F1C231",
-  },
-  {
-    isBrightColor: false,
-    name: "dark green 1",
-    value: "#6AA74F",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cyan 1",
-    value: "#45818E",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cornflower blue 1",
-    value: "#3B78D8",
-  },
-  {
-    isBrightColor: false,
-    name: "dark blue 1",
-    value: "#3E84C6",
-  },
-  {
-    isBrightColor: false,
-    name: "dark purple 1",
-    value: "#664EA6",
-  },
-  {
-    isBrightColor: false,
-    name: "dark magenta 1",
-    value: "#A64D78",
-  },
-
-  {
-    isBrightColor: false,
-    name: "dark red berry 2",
-    value: "#84200D",
-  },
-  {
-    isBrightColor: false,
-    name: "dark red 2",
-    value: "#990001",
-  },
-  {
-    isBrightColor: false,
-    name: "dark orange 2",
-    value: "#B45F05",
-  },
-  {
-    isBrightColor: false,
-    name: "dark yellow 2",
-    value: "#BF9002",
-  },
-  {
-    isBrightColor: false,
-    name: "dark green 2",
-    value: "#38761D",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cyan 2",
-    value: "#124F5C",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cornflower blue 2",
-    value: "#1155CB",
-  },
-  {
-    isBrightColor: false,
-    name: "dark blue 2",
-    value: "#0C5394",
-  },
-  {
-    isBrightColor: false,
-    name: "dark purple 2",
-    value: "#351C75",
-  },
-  {
-    isBrightColor: false,
-    name: "dark magenta 2",
-    value: "#741B47",
-  },
-
-  {
-    isBrightColor: false,
-    name: "dark red berry 3",
-    value: "#5B0F00",
-  },
-  {
-    isBrightColor: false,
-    name: "dark red 3",
-    value: "#660000",
-  },
-  {
-    isBrightColor: false,
-    name: "dark orange 3",
-    value: "#783F04",
-  },
-  {
-    isBrightColor: false,
-    name: "dark yellow 3",
-    value: "#7E6000",
-  },
-  {
-    isBrightColor: false,
-    name: "dark green 3",
-    value: "#274E12",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cyan 3",
-    value: "#0D343D",
-  },
-  {
-    isBrightColor: false,
-    name: "dark cornflower blue 3",
-    value: "#1B4487",
-  },
-  {
-    isBrightColor: false,
-    name: "dark blue 3",
-    value: "#083763",
-  },
-  {
-    isBrightColor: false,
-    name: "dark purple 3",
-    value: "#1F124D",
-  },
-  {
-    isBrightColor: false,
-    name: "dark magenta 3",
-    value: "#4C1130",
-  },
-];
-
-const DEFAULT_CUSTOM_COLORS = [
-  {
-    isBrightColor: false,
-    name: "dark orange 3",
-    value: "#783F04",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 3",
-    value: "#666666",
-  },
-  {
-    isBrightColor: false,
-    name: "dark grey 2",
-    value: "#999999",
-  },
-  {
-    isBrightColor: false,
-    name: "light cornflower blue 1",
-    value: "#6C9EEB",
-  },
-  {
-    isBrightColor: false,
-    name: "dark magenta 3",
-    value: "#4C1130",
-  },
-];