@cyberyozh/text-editor 0.1.1

package/src/editor/dialogs/image-dialog/image-dialog.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+
+import { TiptapX } from "../../../icons";
+
+import { Button, CommonModal, Input } from "../../components";
+import { ImageUploadHandler, TiptapImageAttrs, ImageGetHandler, FigureAttrs } from "../../../types";
+import { resolveImageSrc } from "../../../utils/image-src-resolver";
+import { useTiptapTranslations } from "../../context";
+
+interface ImageDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onImageAdd?: (attrs: TiptapImageAttrs) => void;
+  onImageEdit?: (attrs: Partial<FigureAttrs>) => void;
+  uploadHandler?: ImageUploadHandler;
+  getImageById?: ImageGetHandler;
+  initialAttrs?: FigureAttrs;
+  mode?: "add" | "edit";
+}
+
+interface ImageFormState {
+  file: File | null;
+  title: string;
+  alt: string;
+  caption: string;
+  fileUrl: string;
+  width: number;
+  height: number;
+}
+
+export const ImageDialog = ({
+  open,
+  onClose,
+  onImageAdd,
+  onImageEdit,
+  uploadHandler,
+  getImageById,
+  initialAttrs,
+  mode = "add",
+}: ImageDialogProps) => {
+  const translations = useTiptapTranslations();
+  const [isUploading, setIsUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // Resolve the image URL from fileId or use src directly
+  const resolvedInitialUrl = initialAttrs
+    ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById })
+    : "";
+
+  const [formState, setFormState] = useState<ImageFormState>({
+    file: null,
+    title: initialAttrs?.title || "",
+    alt: initialAttrs?.alt || "",
+    caption: initialAttrs?.caption || "",
+    fileUrl: resolvedInitialUrl,
+    width: initialAttrs?.width || 0,
+    height: initialAttrs?.height || 0,
+  });
+
+  const handleSelectFile = (file: File | undefined) => {
+    if (!file) return;
+
+    const imageUrl = URL.createObjectURL(file);
+    const img = new Image();
+    img.src = imageUrl;
+
+    img.onload = () => {
+      const { width, height } = img;
+      setFormState((prev) => ({
+        ...prev,
+        file,
+        fileUrl: imageUrl,
+        title: file.name,
+        alt: file.name,
+        width,
+        height,
+      }));
+    };
+  };
+
+  const handleAreaClick = () => {
+    inputRef.current?.click();
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      handleSelectFile(file);
+    }
+  };
+
+  const clearImageFormFields = () => {
+    setFormState({
+      file: null,
+      title: "",
+      alt: "",
+      caption: "",
+      fileUrl: "",
+      width: 0,
+      height: 0,
+    });
+  };
+
+  const handleAddImage = async () => {
+    if (!uploadHandler || !onImageAdd) return;
+    if (!formState.file) return;
+
+    setIsUploading(true);
+    try {
+      const result = await uploadHandler(formState.file);
+
+      onImageAdd({
+        fileId: result.fileId,
+        src: result.fileUrl,
+        alt: formState.alt,
+        title: formState.title,
+        caption: formState.caption,
+        width: formState.width,
+        height: formState.height,
+      });
+
+      handleClose();
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleEditImage = () => {
+    if (!onImageEdit) return;
+
+    onImageEdit({
+      alt: formState.alt,
+      title: formState.title,
+      caption: formState.caption,
+    });
+
+    handleClose();
+  };
+
+  const handleSave = mode === "edit" ? handleEditImage : handleAddImage;
+
+  const handleClose = () => {
+    clearImageFormFields();
+    onClose();
+  };
+
+  const isAddMode = mode === "add";
+  const hasImage = Boolean(formState.fileUrl);
+  const dialogTitle = isAddMode
+    ? translations.imageDialog.addTitle
+    : translations.imageDialog.editTitle;
+  const saveButtonText = isAddMode ? translations.imageDialog.add : translations.imageDialog.save;
+  const dragPlaceholder = dragActive
+    ? translations.imageUpload.dragActive
+    : translations.imageUpload.dragInactive;
+
+  return (
+    <CommonModal
+      open={open}
+      handleClose={handleClose}
+    >
+      <p className="image-dialog-title">{dialogTitle}</p>
+      <hr className="image-dialog-divider" />
+      <div className="image-dialog-form-container">
+        <div className="image-dialog-form">
+          {hasImage ? (
+            <div className="image-dialog-preview-wrapper">
+              {isAddMode && (
+                <button
+                  type="button"
+                  className="image-dialog-delete-button"
+                  onClick={clearImageFormFields}
+                  aria-label={translations.media.deleteImage}
+                >
+                  <TiptapX />
+                </button>
+              )}
+              <img
+                src={formState.fileUrl}
+                alt={formState.alt || translations.media.previewLabel}
+                width={formState.width ?? 696}
+                height={formState.height ?? 400}
+                className="image-dialog-preview"
+              />
+            </div>
+          ) : (
+            isAddMode && (
+              <div
+                className={`image-dialog-drag-area ${
+                  dragActive ? "image-dialog-drag-area-active" : ""
+                }`}
+                onClick={handleAreaClick}
+                onDragOver={handleDragOver}
+                onDragEnter={handleDragEnter}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                <input
+                  type="file"
+                  hidden
+                  name="fileInput"
+                  ref={inputRef}
+                  onChange={(e) => handleSelectFile(e.target.files?.[0])}
+                  accept="image/*"
+                />
+                <p style={{ textAlign: "center" }}>{dragPlaceholder}</p>
+              </div>
+            )
+          )}
+          {hasImage && (
+            <>
+              <Input
+                label={translations.media.imageTitle}
+                value={formState.title}
+                onChange={(e) => setFormState((prev) => ({ ...prev, title: e.target.value }))}
+              />
+              <Input
+                label={translations.media.imageAlt}
+                value={formState.alt}
+                onChange={(e) => setFormState((prev) => ({ ...prev, alt: e.target.value }))}
+              />
+              <Input
+                label={translations.imageDialog.captionLabel}
+                value={formState.caption}
+                onChange={(e) => setFormState((prev) => ({ ...prev, caption: e.target.value }))}
+                placeholder={translations.imageDialog.captionPlaceholder}
+              />
+            </>
+          )}
+        </div>
+      </div>
+      <div className="image-dialog-actions">
+        <Button
+          type="button"
+          onClick={handleClose}
+          variant="secondary"
+          className="image-dialog-cancel-button"
+        >
+          {translations.common.cancel}
+        </Button>
+        <Button
+          isLoading={isUploading}
+          type="button"
+          onClick={handleSave}
+        >
+          {saveButtonText}
+        </Button>
+      </div>
+    </CommonModal>
+  );
+};

package/src/editor/dialogs/image-dialog/index.ts

@@ -0,0 +1 @@
+export { ImageDialog } from './image-dialog';

package/src/editor/dialogs/index.ts

@@ -0,0 +1,4 @@
+export { ImageDialog } from './image-dialog';
+export { AddKatexDialog } from './add-katex-dialog';
+export { AddLinkDialog } from './add-link-dialog';
+export { AddVideoDialog } from './add-video-dialog';

package/src/editor/editor.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useState } from "react";
+
+import { EditorState, NodeSelection } from "@tiptap/pm/state";
+import { Slice } from "@tiptap/pm/model";
+import { useEditor, EditorContent, type JSONContent } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import "highlight.js/styles/github-dark.css";
+import "katex/dist/katex.min.css";
+
+import {
+  DialogCommandProvider,
+  useDialogCommand,
+  TiptapTranslationsProvider,
+  useTiptapTranslations,
+} from "./context";
+import {
+  BubbleMenuContent,
+  CharacterCount as CharacterCountComponent,
+  DragHandle,
+  TableMenu,
+} from "./controls";
+import { ImageDialog, AddKatexDialog, AddLinkDialog, AddVideoDialog } from "./dialogs";
+import { getEditorExtensions } from "../extensions/editor";
+
+import type { FigureAttrs, ImageHandlers } from "../types/image-handler";
+import {
+  createHandleImageAdd,
+  createHandleImageEdit,
+  createHandleKatexAdd,
+  createHandleLinkAdd,
+  createHandleVideoAdd,
+} from "./handlers";
+
+import "../styles/styles.css";
+import { createSuggestions } from "./commands/suggestion";
+import { getTranslations, type SupportedLanguage } from "../utils/get-translations";
+
+interface TiptapProps {
+  isEditable?: boolean;
+  content: string;
+  handleChange?: (value: JSONContent) => void;
+  /**
+   * Image handlers for upload and URL resolution
+   * - upload: Function to upload files, returns fileId
+   * - getImage: Optional function to resolve fileId to display URL
+   */
+  imageHandlers?: ImageHandlers;
+  /**
+   * Language for editor interface
+   * @default 'ru' - Russian
+   */
+  lang?: SupportedLanguage;
+  error?: string;
+}
+
+interface LinkDialogContextProps {
+  selectedText?: string;
+  url?: string;
+}
+
+interface KatexDialogContextProps {
+  latex?: string;
+  pos?: number;
+}
+
+function TiptapContent({
+  content,
+  handleChange,
+  imageHandlers,
+  isEditable = true,
+  lang,
+  error,
+}: TiptapProps) {
+  const [linkDialogContext, setLinkDialogContext] = useState<LinkDialogContextProps | null>(null);
+  const [katexDialogContext, setKatexDialogContext] = useState<KatexDialogContextProps | null>(
+    null
+  );
+  const [editFigureContext, setEditFigureContext] = useState<{
+    attrs: FigureAttrs;
+    pos?: number;
+  } | null>(null);
+  const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
+  const translations = useTiptapTranslations();
+
+  let safeContent: JSONContent;
+
+  try {
+    safeContent = JSON.parse(content);
+  } catch {
+    safeContent = { type: "doc", content: [{ type: "paragraph" }] };
+  }
+
+  const editor = useEditor(
+    {
+      editable: isEditable,
+      extensions: getEditorExtensions({
+        translations,
+        suggestion: createSuggestions(translations, !!imageHandlers),
+        isEditable,
+        getImageById: imageHandlers?.getImage,
+        onKatexClick: (latex, pos) => {
+          setKatexDialogContext({ latex, pos });
+          openDialogCommand("katex");
+        },
+        onFigureClick: (attrs, pos) => {
+          setEditFigureContext({ attrs, pos });
+          openDialogCommand("image");
+        },
+      }),
+      content: safeContent,
+      immediatelyRender: false,
+      editorProps: {
+        handlePaste: (view, event) => {
+          try {
+            const text = event.clipboardData?.getData("text/plain");
+            if (!text) return false;
+
+            const json = JSON.parse(text);
+            if (json.type === "doc" && json.content) {
+              const node = view.state.schema.nodeFromJSON(json);
+              const newSlice = new Slice(node.content, 0, 0);
+              view.dispatch(view.state.tr.replaceSelection(newSlice));
+              return true;
+            }
+          } catch (e) {
+            console.log("Not JSON or invalid Tiptap format", e);
+          }
+          return false;
+        },
+      },
+      onBlur: ({ editor }) => handleChange?.(editor.getJSON()),
+    },
+    [lang]
+  );
+
+  const handleCloseDialog = () => {
+    setLinkDialogContext(null);
+    setKatexDialogContext(null);
+    setEditFigureContext(null);
+    closeDialogCommand();
+  };
+
+  const handleImageAdd = createHandleImageAdd(editor, handleCloseDialog);
+  const handleImageEdit = createHandleImageEdit(editor, handleCloseDialog, editFigureContext?.pos);
+  const handleVideoAdd = createHandleVideoAdd(editor, handleCloseDialog);
+  const handleLinkAdd = createHandleLinkAdd(editor, handleCloseDialog);
+  const handleKatexAdd = (latex: string) => {
+    const katexHandler = createHandleKatexAdd(editor, handleCloseDialog);
+    katexHandler(latex, katexDialogContext?.pos);
+  };
+
+  if (!editor) return null;
+
+  const shouldBubbleMenuShow = ({ state }: { state: EditorState }) => {
+    if (state.selection instanceof NodeSelection) {
+      return false;
+    }
+
+    if (state.selection.empty) {
+      return false;
+    }
+
+    if (state.selection.$from.parent.type.name === "codeBlock") {
+      return false;
+    }
+
+    return true;
+  };
+
+  return (
+    <>
+      <DragHandle editor={editor} />
+      {isEditable && <TableMenu editor={editor} />}
+      <BubbleMenu
+        shouldShow={shouldBubbleMenuShow}
+        editor={editor}
+        options={{ placement: "bottom", offset: 8, flip: true }}
+      >
+        <BubbleMenuContent
+          editor={editor}
+          onLinkClick={(selectedText, url) => setLinkDialogContext({ selectedText, url })}
+        />
+      </BubbleMenu>
+
+      <div className={`tiptap-content-wrapper ${!!error ? "has-error" : ""}`}>
+        <EditorContent editor={editor} />
+        {isEditable && <CharacterCountComponent editor={editor} />}
+      </div>
+      {!!error && <p className="tiptap-error-message">{error}</p>}
+
+      {activeDialog === "image" && isEditable && (
+        <ImageDialog
+          open={true}
+          onClose={handleCloseDialog}
+          onImageAdd={handleImageAdd}
+          onImageEdit={handleImageEdit}
+          uploadHandler={imageHandlers?.upload}
+          getImageById={imageHandlers?.getImage}
+          initialAttrs={editFigureContext?.attrs || undefined}
+          mode={editFigureContext ? "edit" : "add"}
+        />
+      )}
+
+      {activeDialog === "link" && (
+        <AddLinkDialog
+          open={true}
+          onClose={handleCloseDialog}
+          onLinkAdd={handleLinkAdd}
+          initialTitle={linkDialogContext?.selectedText || ""}
+          initialUrl={linkDialogContext?.url || ""}
+        />
+      )}
+
+      {activeDialog === "video" && (
+        <AddVideoDialog
+          open={true}
+          onClose={handleCloseDialog}
+          onVideoAdd={handleVideoAdd}
+        />
+      )}
+
+      {activeDialog === "katex" && (
+        <AddKatexDialog
+          open={true}
+          onClose={handleCloseDialog}
+          onKatexAdd={handleKatexAdd}
+          initialContent={katexDialogContext?.latex || ""}
+        />
+      )}
+    </>
+  );
+}
+
+export const Tiptap = (props: TiptapProps) => {
+  const { lang = "ru" } = props;
+  const translations = getTranslations(lang);
+
+  return (
+    <TiptapTranslationsProvider translations={translations}>
+      <DialogCommandProvider>
+        <TiptapContent {...props} />
+      </DialogCommandProvider>
+    </TiptapTranslationsProvider>
+  );
+};

package/src/editor/handlers/create-image-upload-handler.ts

@@ -0,0 +1,24 @@
+import { ImageUploadHandler } from "../../types";
+
+/**
+ * Creates an image upload handler that wraps a custom upload action
+ * Supports two patterns:
+ * 1. Backend with fileId: { fileId: "file-123" }
+ * 2. Direct CDN: { fileUrl: "https://cdn.com/image.jpg" }
+ */
+export function createImageUploadHandler(
+  uploadAction: (file: File) => Promise<{ data?: { fileId?: string; fileUrl?: string } }>
+): ImageUploadHandler {
+  return async (file: File) => {
+    const { data } = await uploadAction(file);
+
+    if (!data?.fileId && !data?.fileUrl) {
+      throw new Error("Failed to upload file: must return fileId or fileUrl");
+    }
+
+    return {
+      fileId: data.fileId,
+      fileUrl: data.fileUrl,
+    };
+  };
+}

package/src/editor/handlers/dialog-handlers.ts

@@ -0,0 +1,143 @@
+import type { Editor } from "@tiptap/react";
+
+import type { FigureAttrs, TiptapImageAttrs } from "../../types";
+
+export const createHandleImageAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+  return (attrs: TiptapImageAttrs) => {
+    if (!editor) return;
+
+    const { state } = editor;
+    const { $from } = state.selection;
+    const text = $from.parent.textContent;
+
+    if (text.lastIndexOf("/") !== -1) {
+      editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+          const node = editor.schema.nodes.image.create({ ...attrs });
+          tr.replaceWith($from.before(), $from.after(), node);
+          return true;
+        })
+        .run();
+    } else {
+      editor?.chain().focus().setFigure(attrs).run();
+    }
+    closeDialogCommand();
+  };
+};
+
+export const createHandleImageEdit = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  pos?: number
+) => {
+  return (attrs: Partial<FigureAttrs>) => {
+    if (!editor || pos === undefined) return;
+
+    editor.chain().focus().setNodeSelection(pos).updateFigure(attrs).run();
+    closeDialogCommand();
+  };
+};
+
+export const createHandleVideoAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+  return (url: string) => {
+    if (!editor) return;
+
+    const { state } = editor;
+    const { $from } = state.selection;
+
+    editor
+      .chain()
+      .focus()
+      .command(({ tr }) => {
+        tr.replaceWith(
+          $from.before(),
+          $from.after(),
+          editor.schema.nodes.video.create({ src: url })
+        );
+        return true;
+      })
+      .run();
+    closeDialogCommand();
+  };
+};
+
+export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+  return (title: string, url: string) => {
+    if (!editor) return;
+
+    const hasSelection = !editor.state.selection.empty;
+
+    if (hasSelection) {
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const { from, to } = state.selection;
+          tr.insertText(title, from, to);
+          tr.addMark(from, from + title.length, editor.schema.marks.link.create({ href: url }));
+          return true;
+        })
+        .run();
+    } else {
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const { $from } = state.selection;
+          const text = $from.parent.textContent;
+          const nodeStart = $from.start();
+          const beforeCursor = text.substring(0, $from.pos - nodeStart);
+          const slashIndex = beforeCursor.lastIndexOf("/");
+
+          if (slashIndex !== -1) {
+            tr.delete(nodeStart + slashIndex, $from.pos);
+          }
+
+          return true;
+        })
+        .extendMarkRange("link")
+        .setLink({ href: url })
+        .insertContent(title)
+        .run();
+    }
+    closeDialogCommand();
+  };
+};
+
+export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+  return (latex: string, pos?: number) => {
+    if (!editor) return;
+
+    if (pos !== undefined) {
+      editor.chain().setNodeSelection(pos).updateInlineMath({ latex }).focus().run();
+    } else {
+      const { state } = editor;
+      const { $from } = state.selection;
+      const text = $from.parent.textContent;
+      const nodeStart = $from.start();
+      const beforeCursor = text.substring(0, $from.pos - nodeStart);
+      const slashIndex = beforeCursor.lastIndexOf("/");
+
+      if (slashIndex !== -1) {
+        const deleteFrom = nodeStart + slashIndex;
+        const deleteTo = $from.pos;
+
+        editor
+          .chain()
+          .focus()
+          .command(({ tr, state }) => {
+            const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
+            tr.replaceRangeWith(deleteFrom, deleteTo, inlineMathNode);
+            return true;
+          })
+          .run();
+      } else {
+        editor.chain().insertInlineMath({ latex }).focus().run();
+      }
+    }
+
+    closeDialogCommand();
+  };
+};

package/src/editor/handlers/index.ts

@@ -0,0 +1,8 @@
+export { createImageUploadHandler } from './create-image-upload-handler';
+export {
+  createHandleImageAdd,
+  createHandleKatexAdd,
+  createHandleLinkAdd,
+  createHandleVideoAdd,
+  createHandleImageEdit,
+} from './dialog-handlers';