@cyberyozh/text-editor 0.1.1

package/src/editor/components/common-modal/common-modal.css

@@ -0,0 +1,85 @@
+.modal-overlay {
+  display: flex;
+  z-index: 10000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: modal-fadeIn 0.2s ease-out;
+}
+
+@keyframes modal-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.modal-content {
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: auto;
+  border-radius: 8px;
+  background-color: var(--ui-text-white);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: modal-slideIn 0.2s ease-out;
+}
+
+@keyframes modal-slideIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.modal-close-button {
+  display: flex;
+  z-index: 1001;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background-color: transparent;
+  color: var(--ui-text-secondary);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+}
+
+.modal-close-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.modal-close-button:hover {
+  background-color: var(--ui-secondary-bg);
+  color: var(--ui-text-primary);
+}
+
+.modal-close-button:active {
+  background-color: var(--ui-secondary-bg-hover);
+}
+
+.modal-inner-content {
+  padding: 24px;
+}

package/src/editor/components/common-modal/common-modal.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, ReactNode } from "react";
+
+import { TiptapX } from "../../../icons";
+
+interface CommonModalProps {
+  open: boolean;
+  handleClose: () => void;
+  children: ReactNode;
+}
+
+export const CommonModal = ({ open, handleClose, children }: CommonModalProps) => {
+  useEffect(() => {
+    if (!open) return;
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscapeKey);
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "unset";
+    };
+  }, [open, handleClose]);
+
+  if (!open) return null;
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      handleClose();
+    }
+  };
+
+  return (
+    <div
+      className="modal-overlay"
+      onClick={handleOverlayClick}
+    >
+      <div className="modal-content">
+        <button
+          type="button"
+          className="modal-close-button"
+          onClick={handleClose}
+          aria-label="Close modal"
+        >
+          <TiptapX />
+        </button>
+        <div className="modal-inner-content">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/editor/components/common-modal/index.ts

@@ -0,0 +1 @@
+export { CommonModal } from './common-modal';

package/src/editor/components/index.ts

@@ -0,0 +1,3 @@
+export { Button } from './button';
+export { Input } from './input';
+export { CommonModal } from './common-modal';

package/src/editor/components/input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input';

package/src/editor/components/input/input.css

@@ -0,0 +1,43 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* INPUT COMPONENT */
+/* ═══════════════════════════════════════════════════════════ */
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  gap: 4px;
+}
+
+.input-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.input-field {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-secondary-bg-hover);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.2s ease-out;
+}
+
+.input-field:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: var(--ui-shadow-primary);
+}
+
+.input-field:disabled {
+  background-color: var(--ui-secondary-bg);
+  color: var(--ui-text-disabled);
+  cursor: not-allowed;
+}
+
+.input-error {
+  margin-top: 4px;
+  color: var(--ui-error-text-simple);
+  font-size: 12px;
+}

package/src/editor/components/input/input.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, error, className, ...props }, ref) => {
+    return (
+      <div className="input-wrapper">
+        {label && <label className="input-label">{label}</label>}
+        <input ref={ref} className={`input-field ${className || ''}`} {...props} />
+        {error && <span className="input-error">{error}</span>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';

package/src/editor/context/dialog-command.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { createContext, useContext, useState, ReactNode } from "react";
+
+import type { Editor } from "@tiptap/react";
+
+export type DialogCommandType = "image" | "video" | "link" | "katex";
+
+interface DialogCommandContextType {
+  activeDialog: DialogCommandType | null;
+  openDialogCommand: (command: DialogCommandType) => void;
+  closeDialogCommand: () => void;
+}
+
+const DialogCommandContext = createContext<DialogCommandContextType | undefined>(undefined);
+
+export function DialogCommandProvider({ children }: { children: ReactNode }) {
+  const [activeDialog, setActiveDialog] = useState<DialogCommandType | null>(null);
+
+  const openDialogCommand = (command: DialogCommandType) => {
+    setActiveDialog(command);
+  };
+
+  const closeDialogCommand = () => {
+    setActiveDialog(null);
+  };
+
+  return (
+    <DialogCommandContext.Provider
+      value={{
+        activeDialog,
+        openDialogCommand,
+        closeDialogCommand,
+      }}
+    >
+      {children}
+    </DialogCommandContext.Provider>
+  );
+}
+
+export function useDialogCommand() {
+  const context = useContext(DialogCommandContext);
+  if (!context) {
+    throw new Error("useDialogCommand must be used within DialogCommandProvider");
+  }
+  return context;
+}

package/src/editor/context/index.ts

@@ -0,0 +1,2 @@
+export { DialogCommandProvider, useDialogCommand } from './dialog-command';
+export { TiptapTranslationsProvider, useTiptapTranslations } from './translations-context';

package/src/editor/context/translations-context.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from "react";
+import type { TiptapTranslations } from "@/utils/get-translations";
+
+const TiptapTranslationsContext = createContext<TiptapTranslations | undefined>(undefined);
+
+interface TiptapTranslationsProviderProps {
+  translations: TiptapTranslations;
+  children: React.ReactNode;
+}
+
+export const TiptapTranslationsProvider = ({
+  translations,
+  children,
+}: TiptapTranslationsProviderProps) => {
+  return (
+    <TiptapTranslationsContext.Provider value={translations}>
+      {children}
+    </TiptapTranslationsContext.Provider>
+  );
+};
+
+export const useTiptapTranslations = () => {
+  const context = useContext(TiptapTranslationsContext);
+  if (!context) {
+    throw new Error("useTiptapTranslations must be used within TiptapTranslationsProvider");
+  }
+  return context;
+};

package/src/editor/controls/bubble-menu-content.tsx

@@ -0,0 +1,394 @@
+import { useRef } from "react";
+
+import { useEditorState, type Editor } from "@tiptap/react";
+
+import {
+  TiptapMenuLink,
+  TiptapMenuLinkOff,
+  TiptapMenuAlignCenter,
+  TiptapMenuAlignLeft,
+  TiptapMenuAlignRight,
+  TiptapMenuBold,
+  TiptapMenuClearFormatting,
+  TiptapMenuCopyable,
+  TiptapMenuH2,
+  TiptapMenuH3,
+  TiptapMenuH4,
+  TiptapMenuH5,
+  TiptapMenuH6,
+  TiptapMenuHighlight,
+  TiptapMenuItalic,
+  TiptapMenuRedo,
+  TiptapMenuStrikethrough,
+  TiptapMenuSubscript,
+  TiptapMenuSuperscript,
+  TiptapMenuTextColor,
+  TiptapMenuUnderline,
+  TiptapMenuUndo,
+  TiptapMenuMergeCells,
+  TiptapMenuSplitCells,
+} from "../../icons";
+
+import { useDialogCommand } from "../context/dialog-command";
+import { useTiptapTranslations } from "../context";
+
+interface Props {
+  editor: Editor;
+  onLinkClick?: (selectedText: string, url?: string) => void;
+}
+
+export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
+  const translations = useTiptapTranslations();
+  const textColorInputRef = useRef<HTMLInputElement>(null);
+  const highlightColorInputRef = useRef<HTMLInputElement>(null);
+  const { openDialogCommand } = useDialogCommand();
+  const {
+    canUndo,
+    canRedo,
+    isHeading2,
+    isHeading3,
+    isHeading4,
+    isHeading5,
+    isHeading6,
+    isBold,
+    isItalic,
+    isStrikethrough,
+    isUnderline,
+    isTextAlignLeft,
+    isTextAlignCenter,
+    isTextAlignRight,
+    isSuperscript,
+    isSubscript,
+    canClearMarks,
+    isLink,
+    isCopyable,
+    textColor,
+    highlightColor,
+    isTable,
+  } = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!editor) return {};
+      return {
+        canUndo: ctx.editor.can().undo(),
+        canRedo: ctx.editor.can().redo(),
+        canClearMarks: ctx.editor.can().unsetAllMarks(),
+        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
+        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
+        isHeading4: ctx.editor.isActive("heading", { level: 4 }),
+        isHeading5: ctx.editor.isActive("heading", { level: 5 }),
+        isHeading6: ctx.editor.isActive("heading", { level: 6 }),
+        isBold: ctx.editor.isActive("bold"),
+        isItalic: ctx.editor.isActive("italic"),
+        isStrikethrough: ctx.editor.isActive("strike"),
+        isUnderline: ctx.editor.isActive("underline"),
+        isTextAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+        isTextAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+        isTextAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+        isSuperscript: ctx.editor.isActive("superscript"),
+        isSubscript: ctx.editor.isActive("subscript"),
+        isLink: ctx.editor.isActive("link"),
+        isCopyable: ctx.editor.isActive("copyable-text"),
+        textColor: ctx.editor.getAttributes("textStyle").color || "",
+        highlightColor: ctx.editor.getAttributes("highlight").color || "",
+        isTable: ctx.editor.isActive("table"),
+      };
+    },
+  });
+
+  const handleLinkClick = () => {
+    const selectedText = editor.state.doc.textBetween(
+      editor.state.selection.$from.pos,
+      editor.state.selection.$to.pos
+    );
+
+    let linkUrl: string | undefined;
+    if (isLink) {
+      const link = editor.getAttributes("link");
+      linkUrl = link.href;
+    }
+
+    onLinkClick?.(selectedText, linkUrl);
+    openDialogCommand("link");
+  };
+
+  return (
+    <div className={`bubble-menu ${textColor || highlightColor ? "hide-text-selection" : ""}`}>
+      <div className="tiptap-controls-group">
+        <button
+          className="tiptap-control-button"
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!canUndo}
+          title={translations.history.undo}
+          type="button"
+        >
+          <TiptapMenuUndo />
+        </button>
+        <button
+          className="tiptap-control-button"
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!canRedo}
+          type="button"
+          title={translations.history.redo}
+        >
+          <TiptapMenuRedo />
+        </button>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          type="button"
+          title={translations.headings.h2}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={`tiptap-control-button ${isHeading2 ? "is-active" : ""}`}
+        >
+          <TiptapMenuH2 />
+        </button>
+        <button
+          type="button"
+          title={translations.headings.h3}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+          className={`tiptap-control-button ${isHeading3 ? "is-active" : ""}`}
+        >
+          <TiptapMenuH3 />
+        </button>
+        <button
+          type="button"
+          title={translations.headings.h4}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+          className={`tiptap-control-button ${isHeading4 ? "is-active" : ""}`}
+        >
+          <TiptapMenuH4 />
+        </button>
+        <button
+          type="button"
+          title={translations.headings.h5}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+          className={`tiptap-control-button ${isHeading5 ? "is-active" : ""}`}
+        >
+          <TiptapMenuH5 />
+        </button>
+        <button
+          type="button"
+          title={translations.headings.h6}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+          className={`tiptap-control-button ${isHeading6 ? "is-active" : ""}`}
+        >
+          <TiptapMenuH6 />
+        </button>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={`${isBold ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.bold}
+          type="button"
+        >
+          <TiptapMenuBold />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={`${isItalic ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.italic}
+          type="button"
+        >
+          <TiptapMenuItalic />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          className={`${isUnderline ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.underline}
+          type="button"
+        >
+          <TiptapMenuUnderline />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={`${isStrikethrough ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.strikethrough}
+          type="button"
+        >
+          <TiptapMenuStrikethrough />
+        </button>
+      </div>
+
+      {isTable && (
+        <div className="tiptap-controls-group">
+          <button
+            className="tiptap-control-button"
+            type="button"
+            title={translations.table.mergeCells}
+            onClick={() => editor.chain().focus().mergeCells().run()}
+          >
+            <TiptapMenuMergeCells />
+          </button>
+          <button
+            className="tiptap-control-button"
+            type="button"
+            title={translations.table.splitCell}
+            onClick={() => editor.chain().focus().splitCell().run()}
+          >
+            <TiptapMenuSplitCells />
+          </button>
+        </div>
+      )}
+
+      <div className="tiptap-controls-group">
+        <div style={{ position: "relative" }}>
+          <button
+            onClick={() => {
+              textColorInputRef.current?.click();
+            }}
+            className="tiptap-control-button"
+            type="button"
+            title={translations.textFormatting.textColor}
+            style={{ color: textColor }}
+          >
+            <TiptapMenuTextColor />
+          </button>
+          <input
+            ref={textColorInputRef}
+            type="color"
+            value={textColor}
+            onChange={(e) => {
+              editor.chain().focus().setColor(e.target.value).run();
+            }}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              opacity: 0,
+              pointerEvents: "none",
+            }}
+          />
+        </div>
+        <div style={{ position: "relative" }}>
+          <button
+            onClick={() => {
+              highlightColorInputRef.current?.click();
+            }}
+            className="tiptap-control-button"
+            type="button"
+            title={translations.textFormatting.highlightColor}
+            style={{ color: highlightColor }}
+          >
+            <TiptapMenuHighlight />
+          </button>
+          <input
+            ref={highlightColorInputRef}
+            type="color"
+            value={highlightColor}
+            onChange={(e) => {
+              editor.chain().focus().setHighlight({ color: e.target.value }).run();
+            }}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              opacity: 0,
+              pointerEvents: "none",
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleCopyable().run()}
+          className={`${isCopyable ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.copyableText}
+        >
+          <TiptapMenuCopyable />
+        </button>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          title={isLink ? translations.link.editLink : translations.link.addLinkTitle}
+          onClick={handleLinkClick}
+          className={`${isLink ? "is-active" : ""} tiptap-control-button`}
+          type="button"
+        >
+          <TiptapMenuLink />
+        </button>
+        {isLink && (
+          <button
+            onClick={() => editor.chain().focus().unsetLink().run()}
+            className="tiptap-control-button tiptap-control-button--delete"
+            type="button"
+            title={translations.link.removeLinkTitle}
+          >
+            <TiptapMenuLinkOff />
+          </button>
+        )}
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          onClick={() => editor.chain().focus().setTextAlign("left").run()}
+          className={`${isTextAlignLeft ? "is-active" : ""} tiptap-control-button`}
+          title={translations.alignment.alignLeft}
+          type="button"
+        >
+          <TiptapMenuAlignLeft />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setTextAlign("center").run()}
+          className={`${isTextAlignCenter ? "is-active" : ""} tiptap-control-button`}
+          title={translations.alignment.alignCenter}
+          type="button"
+        >
+          <TiptapMenuAlignCenter />
+        </button>
+        <button
+          onClick={() => editor.chain().focus().setTextAlign("right").run()}
+          className={`${isTextAlignRight ? "is-active" : ""} tiptap-control-button`}
+          title={translations.alignment.alignRight}
+          type="button"
+        >
+          <TiptapMenuAlignRight />
+        </button>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleSuperscript().run()}
+          className={`${isSuperscript ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.superscript}
+        >
+          <TiptapMenuSuperscript />
+        </button>
+        <button
+          type="button"
+          onClick={() => editor.chain().focus().toggleSubscript().run()}
+          className={`${isSubscript ? "is-active" : ""} tiptap-control-button`}
+          title={translations.textFormatting.subscript}
+        >
+          <TiptapMenuSubscript />
+        </button>
+      </div>
+
+      <div className="tiptap-controls-group">
+        <button
+          type="button"
+          onClick={() => {
+            editor.chain().focus().clearNodes().run();
+            editor.chain().focus().unsetAllMarks().run();
+          }}
+          disabled={!canClearMarks}
+          className="tiptap-control-button"
+          title={translations.textFormatting.clearFormatting}
+        >
+          <TiptapMenuClearFormatting />
+        </button>
+      </div>
+    </div>
+  );
+};