@cyberyozh/text-editor 0.1.1

package/src/editor/controls/callout-menu.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from "react";
+
+import { type Editor } from "@tiptap/react";
+
+import { useTiptapTranslations } from "../context";
+
+const CALLOUT_COLORS = [
+  { bgColor: "#F3F9F6", textColor: "#015629" },
+  { bgColor: "#FFFED8", textColor: "#7c5f00" },
+  { bgColor: "#FFF4E3", textColor: "#774900" },
+  { bgColor: "#FFF1F1", textColor: "#6B0000" },
+  { bgColor: "#FFEBFC", textColor: "#940388" },
+  { bgColor: "#F6F0FF", textColor: "#582f95" },
+  { bgColor: "#EBEFFF", textColor: "#002584" },
+  { bgColor: "#F7F7F8", textColor: "#222025" },
+];
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onColorSelect: (bgColor: string, textColor: string) => void;
+  editor: Editor;
+  nodePos: number | null;
+}
+
+export const CalloutMenu = ({ isOpen, onClose, onColorSelect, editor, nodePos }: Props) => {
+  const translations = useTiptapTranslations();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const colorInputRef = useRef<HTMLInputElement>(null);
+
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+
+  const getCurrentColors = () => {
+    if (nodePos !== null) {
+      const node = editor.view.state.doc.nodeAt(nodePos);
+      return {
+        bgColor: node?.attrs?.bgColor || "#F7F7F8",
+        textColor: node?.attrs?.textColor || "#222025",
+      };
+    }
+    return { bgColor: "#F7F7F8", textColor: "#222025" };
+  };
+
+  const [customColor, setCustomColor] = useState(getCurrentColors().bgColor);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsColorPickerOpen(false);
+      setCustomColor(getCurrentColors().bgColor);
+    }
+  }, [isOpen, nodePos]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className="tiptap__drag-handle-color-menu"
+      style={{ opacity: isColorPickerOpen ? 0 : 1 }}
+    >
+      <div className="tiptap__color-menu-title">{translations.blocks.calloutSelectStyle}</div>
+      <div className="tiptap__color-menu-row">
+        {CALLOUT_COLORS.map(({ bgColor, textColor }) => (
+          <button
+            key={bgColor}
+            className="tiptap__color-option"
+            type="button"
+            onClick={() => onColorSelect(bgColor, textColor)}
+          >
+            <div
+              className="tiptap__color-swatch"
+              style={{
+                backgroundColor: bgColor,
+                color: textColor,
+              }}
+            >
+              А
+            </div>
+          </button>
+        ))}
+      </div>
+      <div className="tiptap__color-menu-custom">
+        <button
+          type="button"
+          className="tiptap__color-option"
+          onClick={() => {
+            colorInputRef.current?.click();
+            setIsColorPickerOpen(true);
+          }}
+        >
+          <div
+            className="tiptap__color-swatch"
+            style={{
+              backgroundColor: customColor,
+              color: (() => {
+                const r = parseInt(customColor.slice(1, 3), 16);
+                const g = parseInt(customColor.slice(3, 5), 16);
+                const b = parseInt(customColor.slice(5, 7), 16);
+                const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+                return brightness > 128 ? "#000000" : "#FFFFFF";
+              })(),
+            }}
+          >
+            А
+          </div>
+        </button>
+        <span className="tiptap__color-menu-custom-label">
+          {translations.blocks.calloutCustomColor}
+        </span>
+        <input
+          ref={colorInputRef}
+          type="color"
+          value={customColor}
+          onInput={(e) => {
+            const bgColor = (e.target as HTMLInputElement).value;
+            setCustomColor(bgColor);
+
+            if (nodePos !== null) {
+              const node = editor.view.state.doc.nodeAt(nodePos);
+              if (node) {
+                const from = nodePos + 1;
+                const to = nodePos + node.nodeSize - 1;
+                const r = parseInt(bgColor.slice(1, 3), 16);
+                const g = parseInt(bgColor.slice(3, 5), 16);
+                const b = parseInt(bgColor.slice(5, 7), 16);
+                const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+                const textColor = brightness > 128 ? "#000000" : "#FFFFFF";
+
+                editor
+                  .chain()
+                  .setTextSelection({ from, to })
+                  .setColor(textColor)
+                  .setNodeSelection(nodePos)
+                  .updateAttributes("callout", { bgColor })
+                  .run();
+              }
+            }
+          }}
+          onBlur={() => setIsColorPickerOpen(false)}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "1px",
+            height: "1px",
+            opacity: 0,
+            pointerEvents: "none",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/editor/controls/character-count.tsx

@@ -0,0 +1,36 @@
+import { useEditorState, type Editor } from "@tiptap/react";
+
+import { pluralize } from "../../utils";
+import { useTiptapTranslations } from "../context";
+
+interface Props {
+  editor: Editor;
+}
+
+export const CharacterCount = ({ editor }: Props) => {
+  const translations = useTiptapTranslations();
+  const { charactersCount, wordsCount } = useEditorState({
+    editor,
+    selector: (context) => ({
+      charactersCount: context.editor.storage.characterCount.characters(),
+      wordsCount: context.editor.storage.characterCount.words(),
+    }),
+  });
+
+  return (
+    <div className="tiptap__character-count">
+      <span className="tiptap__character-count-item">
+        {charactersCount}{" "}
+        {pluralize(
+          charactersCount,
+          translations.characterCount.characters as [string, string, string]
+        )}
+      </span>
+      <span className="tiptap__character-count-separator">/</span>
+      <span className="tiptap__character-count-item">
+        {wordsCount}{" "}
+        {pluralize(wordsCount, translations.characterCount.words as [string, string, string])}
+      </span>
+    </div>
+  );
+};

package/src/editor/controls/commands-list.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useImperativeHandle, useRef, useState, forwardRef } from "react";
+
+import type { Editor } from "@tiptap/core";
+
+import { useDialogCommand } from "../context/dialog-command";
+import { useTiptapTranslations } from "../context";
+
+export interface CommandRange {
+  from: number;
+  to: number;
+}
+
+export interface CommandItem {
+  title: string;
+  icon?: React.ReactNode;
+  command: (props: { editor: Editor; range: CommandRange }) => void;
+  dialogCommand?: "image" | "video" | "link" | "katex";
+}
+
+interface CommandsListProps {
+  items: CommandItem[];
+  command: (item: CommandItem) => void;
+}
+
+export const CommandsList = forwardRef<
+  { onKeyDown: (props: { event: KeyboardEvent }) => boolean },
+  CommandsListProps
+>(({ items, command }, ref) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+  const { openDialogCommand } = useDialogCommand();
+  const translations = useTiptapTranslations();
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items.length]);
+
+  useEffect(() => {
+    // Scroll to active item when selection changes
+    const activeButton = listRef.current?.querySelector(".commands-list-item.active");
+    if (activeButton) {
+      activeButton.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    }
+  }, [selectedIndex]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+        if (event.key === "ArrowUp") {
+          setSelectedIndex((i) => (i - 1 + items.length) % items.length);
+          return true;
+        }
+
+        if (event.key === "ArrowDown") {
+          setSelectedIndex((i) => (i + 1) % items.length);
+          return true;
+        }
+
+        if (event.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+
+        return false;
+      },
+    }),
+    [items, selectedIndex]
+  );
+
+  const selectItem = (index: number) => {
+    const item = items[index];
+    if (item) {
+      if (item.dialogCommand) {
+        openDialogCommand(item.dialogCommand);
+      } else {
+        command(item);
+      }
+    }
+  };
+
+  if (items.length === 0) {
+    return (
+      <div className="commands-list-container">
+        <div className="commands-list-empty">
+          <p>{translations.editor.noCommandsFound}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={listRef}
+      className="commands-list-container"
+    >
+      {items.map((item, index) => (
+        <button
+          key={index}
+          className={`commands-list-item ${index === selectedIndex ? " active" : ""}`}
+          onClick={() => selectItem(index)}
+          onMouseEnter={() => setSelectedIndex(index)}
+        >
+          {item.icon && <span className="commands-list-icon">{item.icon}</span>}
+          <span className="commands-list-title">{item.title}</span>
+        </button>
+      ))}
+    </div>
+  );
+});
+
+CommandsList.displayName = "CommandsList";

package/src/editor/controls/drag-handle.tsx

@@ -0,0 +1,98 @@
+import { useRef, useState } from "react";
+
+import { DragHandle as TiptapDragHandle } from "@tiptap/extension-drag-handle-react";
+import { type Editor } from "@tiptap/react";
+
+import { TiptapDragIcon } from "../../icons";
+import { CalloutMenu } from "./callout-menu";
+
+interface Props {
+  editor: Editor;
+}
+
+export const DragHandle = ({ editor }: Props) => {
+  const currentNodePosRef = useRef<number | null>(null);
+  const [showCalloutMenu, setShowCalloutMenu] = useState(false);
+  const [isCalloutNode, setIsCalloutNode] = useState(false);
+
+  const handleNodeChange = ({ pos }: { pos?: number }) => {
+    if (pos !== undefined && pos >= 0) {
+      const prevPos = currentNodePosRef.current;
+      currentNodePosRef.current = pos;
+
+      try {
+        const node = editor.view.state.doc.nodeAt(pos);
+        const isCallout = node?.type.name === "callout";
+        setIsCalloutNode(isCallout);
+
+        if (prevPos !== null && prevPos !== pos) {
+          setShowCalloutMenu(false);
+        }
+      } catch (error) {
+        setIsCalloutNode(false);
+      }
+    } else {
+      setShowCalloutMenu(false);
+    }
+  };
+
+  const handleClick = () => {
+    if (currentNodePosRef.current !== null) {
+      if (isCalloutNode) {
+        setShowCalloutMenu(!showCalloutMenu);
+      }
+      editor.commands.setNodeSelection(currentNodePosRef.current);
+      editor.view.focus();
+    }
+  };
+
+  const handleColorSelect = (bgColor: string, textColor: string) => {
+    if (currentNodePosRef.current !== null) {
+      const pos = currentNodePosRef.current;
+      const node = editor.view.state.doc.nodeAt(pos);
+
+      if (node) {
+        const from = pos + 1;
+        const to = pos + node.nodeSize - 1;
+
+        editor
+          .chain()
+          .setTextSelection({ from, to })
+          .setColor(textColor)
+          .setNodeSelection(pos)
+          .updateAttributes("callout", { bgColor })
+          .run();
+      }
+
+      setShowCalloutMenu(false);
+    }
+  };
+
+  return (
+    <TiptapDragHandle
+      editor={editor}
+      className="tiptap__drag-handle"
+      onNodeChange={handleNodeChange}
+    >
+      <div style={{ position: "relative" }}>
+        <button
+          className="tiptap__drag-handle-button"
+          type="button"
+          onClick={handleClick}
+        >
+          <TiptapDragIcon />
+        </button>
+
+        {isCalloutNode && (
+          <CalloutMenu
+            isOpen={showCalloutMenu}
+            onClose={() => setShowCalloutMenu(false)}
+            onColorSelect={handleColorSelect}
+            editor={editor}
+            nodePos={currentNodePosRef.current}
+          />
+        )}
+      </div>
+    </TiptapDragHandle>
+  );
+};

package/src/editor/controls/emoji-picker.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from "react";
+import EmojiPicker from "emoji-picker-react";
+import {
+  calloutCustomEmojis,
+  favoriteCustomEmojis,
+  favoriteEmojiIdMap,
+} from "../../utils/custom-emoji";
+import { useTiptapTranslations } from "../context/translations-context";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onEmojiSelect: (emoji: string) => void;
+}
+
+export const EmojiPickerComponent = ({ isOpen, onClose, onEmojiSelect }: Props) => {
+  const pickerRef = useRef<HTMLDivElement>(null);
+  const translations = useTiptapTranslations();
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={pickerRef}
+      className="tiptap__emoji-picker-wrapper"
+    >
+      <EmojiPicker
+        skinTonesDisabled={true}
+        onEmojiClick={(emojiData) => {
+          let emojiToUse: string;
+          if (emojiData.isCustom) {
+            const emojiId = emojiData.unified;
+            emojiToUse = favoriteEmojiIdMap[emojiId] || emojiId;
+          } else {
+            emojiToUse = emojiData.emoji;
+          }
+          onEmojiSelect(emojiToUse);
+          onClose();
+        }}
+        previewConfig={{ showPreview: false }}
+        searchPlaceHolder={translations.editor.emojiSearchPlaceholder}
+        customEmojis={[...favoriteCustomEmojis, ...calloutCustomEmojis]}
+      />
+    </div>
+  );
+};

package/src/editor/controls/index.ts

@@ -0,0 +1,5 @@
+export { BubbleMenuContent } from './bubble-menu-content';
+export { DragHandle } from './drag-handle';
+export { CommandsList } from './commands-list';
+export { CharacterCount } from './character-count';
+export { TableMenu } from './table-menu';