@cyberyozh/text-editor 0.1.1

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

@@ -0,0 +1,322 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { useEditorState, type Editor } from "@tiptap/react";
+
+import {
+  TiptapMenuArrowDown,
+  TiptapMenuArrowLeft,
+  TiptapMenuArrowRight,
+  TiptapMenuArrowUp,
+  TiptapMenuDeleteColumn,
+  TiptapMenuDeleteRow,
+  TiptapMenuTableColumnHeading,
+  TiptapMenuTableRowHeading,
+} from "../../icons";
+
+import { useTiptapTranslations } from "../context";
+
+interface Props {
+  editor: Editor;
+}
+
+type MenuType = "row" | "column" | "row-menu" | "column-menu" | null;
+
+interface ButtonPositions {
+  row: { top: number; left: number } | null;
+  column: { top: number; left: number } | null;
+}
+
+export const TableMenu = ({ editor }: Props) => {
+  const translations = useTiptapTranslations();
+  const [activeMenuType, setActiveMenuType] = useState<MenuType>(null);
+  const [buttonPositions, setButtonPositions] = useState<ButtonPositions>({
+    row: null,
+    column: null,
+  });
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { isTable } = useEditorState({
+    editor,
+    selector: (ctx) => ({
+      isTable: ctx.editor.isActive("table"),
+    }),
+  });
+
+  const updateButtonPositions = useCallback(() => {
+    if (!isTable) {
+      setButtonPositions({ row: null, column: null });
+      setActiveMenuType(null);
+      return;
+    }
+
+    const { $from } = editor.state.selection;
+
+    let pos: number;
+    try {
+      pos = $from.before();
+    } catch (e) {
+      pos = $from.pos;
+    }
+
+    const domNode = editor.view.domAtPos(pos);
+    const activeDomCell = (domNode.node as HTMLElement).closest(
+      "td, th"
+    ) as HTMLTableCellElement | null;
+
+    if (!activeDomCell) {
+      setButtonPositions({ row: null, column: null });
+      return;
+    }
+
+    const row = activeDomCell.parentElement as HTMLTableRowElement;
+    const table = activeDomCell.closest("table") as HTMLTableElement;
+    if (!row || !table) {
+      setButtonPositions({ row: null, column: null });
+      return;
+    }
+
+    const firstRow = table.querySelector("tr") as HTMLTableRowElement;
+    if (!firstRow) {
+      setButtonPositions({ row: null, column: null });
+      return;
+    }
+
+    const rowRect = row.getBoundingClientRect();
+    const cellRect = activeDomCell.getBoundingClientRect();
+    const firstRowRect = firstRow.getBoundingClientRect();
+
+    const rowButtonPos = {
+      top: rowRect.top + rowRect.height / 2 - 16,
+      left: rowRect.left - 8,
+    };
+
+    const columnButtonTop = Math.max(0, firstRowRect.top - 8);
+    const columnButtonPos = {
+      top: columnButtonTop,
+      left: cellRect.left + cellRect.width / 2 - 16,
+    };
+
+    setButtonPositions({
+      row: rowButtonPos,
+      column: columnButtonPos,
+    });
+  }, [editor, isTable]);
+
+  useEffect(() => {
+    if (!isTable) return;
+
+    const updateHandler = () => updateButtonPositions();
+    editor.on("selectionUpdate", updateHandler);
+    editor.on("update", updateHandler);
+
+    updateButtonPositions();
+
+    return () => {
+      editor.off("selectionUpdate", updateHandler);
+      editor.off("update", updateHandler);
+    };
+  }, [editor, editor.isEditable, isTable, updateButtonPositions]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolling(true);
+      setActiveMenuType(null);
+
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+
+      scrollTimeoutRef.current = setTimeout(() => {
+        setIsScrolling(false);
+        updateButtonPositions();
+      }, 150);
+    };
+
+    window.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [updateButtonPositions]);
+
+  useEffect(() => {
+    if (activeMenuType === null) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      if (menuRef.current && !menuRef.current.contains(target)) {
+        const isClickOnButton = target.closest('[class*="table-indicator__button"]');
+        if (!isClickOnButton) {
+          setActiveMenuType(null);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [activeMenuType]);
+
+  const executeTableCommand = (command: () => boolean | void) => {
+    command();
+    setActiveMenuType(null);
+  };
+
+  if (activeMenuType === "row-menu" || activeMenuType === "column-menu") {
+    const pos = activeMenuType === "row-menu" ? buttonPositions.row : buttonPositions.column;
+    if (!pos) return null;
+
+    return (
+      <div
+        ref={menuRef}
+        className="table-context-menu"
+        style={{
+          top: `${pos.top + (activeMenuType === "row-menu" ? 32 : 0)}px`,
+          left: `${pos.left}px`,
+        }}
+      >
+        <div className="table-context-menu__content">
+          {activeMenuType === "row-menu" && (
+            <>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.addRowBefore)}
+                title={translations.table.insertRowBefore}
+                type="button"
+              >
+                <TiptapMenuArrowUp />
+                <span>{translations.table.insertRowBefore}</span>
+              </button>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.addRowAfter)}
+                title={translations.table.insertRowAfter}
+                type="button"
+              >
+                <TiptapMenuArrowDown />
+                <span>{translations.table.insertRowAfter}</span>
+              </button>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.toggleHeaderRow)}
+                title={translations.table.toggleHeaderRow}
+                type="button"
+              >
+                <TiptapMenuTableRowHeading />
+                <span>{translations.table.toggleHeaderRow}</span>
+              </button>
+              <div className="table-context-menu__divider" />
+              <button
+                className="table-context-menu__button table-context-menu__button--danger"
+                onClick={() => executeTableCommand(editor.commands.deleteRow)}
+                title={translations.table.deleteRow}
+                type="button"
+              >
+                <TiptapMenuDeleteRow />
+                <span>{translations.table.deleteRow}</span>
+              </button>
+            </>
+          )}
+
+          {activeMenuType === "column-menu" && (
+            <>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.addColumnBefore)}
+                title={translations.table.insertColumnBefore}
+                type="button"
+              >
+                <TiptapMenuArrowLeft />
+                <span>{translations.table.insertColumnBefore}</span>
+              </button>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.addColumnAfter)}
+                title={translations.table.insertColumnAfter}
+                type="button"
+              >
+                <TiptapMenuArrowRight />
+                <span>{translations.table.insertColumnAfter}</span>
+              </button>
+              <button
+                className="table-context-menu__button"
+                onClick={() => executeTableCommand(editor.commands.toggleHeaderColumn)}
+                title={translations.table.toggleHeaderColumn}
+                type="button"
+              >
+                <TiptapMenuTableColumnHeading />
+                <span>{translations.table.toggleHeaderColumn}</span>
+              </button>
+              <div className="table-context-menu__divider" />
+              <button
+                className="table-context-menu__button table-context-menu__button--danger"
+                onClick={() => executeTableCommand(editor.commands.deleteColumn)}
+                title={translations.table.deleteColumn}
+                type="button"
+              >
+                <TiptapMenuDeleteColumn />
+                <span>{translations.table.deleteColumn}</span>
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (isScrolling) {
+    return null;
+  }
+
+  return (
+    <>
+      {buttonPositions.row && (
+        <div
+          className="table-indicator"
+          style={{
+            top: `${buttonPositions.row.top}px`,
+            left: `${buttonPositions.row.left}px`,
+          }}
+        >
+          <button
+            className="table-indicator__button table-indicator__button--row"
+            onClick={() => setActiveMenuType("row-menu")}
+            title={translations.table.insertRowBefore}
+            type="button"
+          >
+            ⋮
+          </button>
+        </div>
+      )}
+
+      {buttonPositions.column && (
+        <div
+          className="table-indicator"
+          style={{
+            top: `${buttonPositions.column.top}px`,
+            left: `${buttonPositions.column.left}px`,
+          }}
+        >
+          <button
+            className="table-indicator__button table-indicator__button--column"
+            onClick={() => setActiveMenuType("column-menu")}
+            title={translations.table.insertColumnBefore}
+            type="button"
+          >
+            ⋯
+          </button>
+        </div>
+      )}
+    </>
+  );
+};

package/src/editor/dialogs/add-katex-dialog/add-katex-dialog.css

@@ -0,0 +1,115 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* ADD KATEX DIALOG */
+/* ═══════════════════════════════════════════════════════════ */
+
+.katex-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.katex-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px soliv var(--tiptap-color-border);
+}
+
+.katex-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+
+.katex-dialog-description {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.katex-dialog-description a {
+  color: var(--ui-color-primary);
+  text-decoration: none;
+  transition: color 150ms ease-in-out;
+}
+
+.katex-dialog-description a:hover {
+  color: var(--ui-color-primary-dark);
+  text-decoration: underline;
+}
+
+.katex-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.katex-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.katex-dialog-textarea {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: monospace;
+  resize: vertical;
+  transition: border-color 150ms ease-in-out;
+}
+
+.katex-dialog-textarea:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+
+.katex-dialog-textarea::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+
+.katex-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.katex-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.katex-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+
+.katex-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.katex-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+
+.katex-dialog-button-submit:active {
+  transform: scale(0.98);
+}

package/src/editor/dialogs/add-katex-dialog/add-katex-dialog.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+
+import { CommonModal } from "../../components";
+import { useTiptapTranslations } from "../../context";
+
+interface AddKatexDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onKatexAdd: (content: string) => void;
+  initialContent?: string;
+}
+
+export const AddKatexDialog = ({
+  open,
+  onClose,
+  onKatexAdd,
+  initialContent = "",
+}: AddKatexDialogProps) => {
+  const translations = useTiptapTranslations();
+  const [content, setContent] = useState(initialContent);
+  const contentInputRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setContent(initialContent);
+      // Focus the textarea after modal opens
+      setTimeout(() => {
+        contentInputRef.current?.focus();
+      }, 0);
+    }
+  }, [open, initialContent]);
+
+  const handleSubmit = () => {
+    if (content.trim()) {
+      onKatexAdd(content);
+      setContent("");
+    }
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setContent(initialContent);
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && e.ctrlKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <CommonModal
+      open={open}
+      handleClose={handleClose}
+    >
+      <p className="katex-dialog-title">
+        {initialContent ? translations.katex.editTitle : translations.katex.addTitle}
+      </p>
+      <hr className="katex-dialog-divider" />
+
+      <div className="katex-dialog-content">
+        <p className="katex-dialog-description">
+          {translations.katex.description}{" "}
+          <a
+            href="https://katex.org/docs/supported.html"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {translations.katex.documentationLink}
+          </a>{" "}
+          {translations.katex.documentationLinkSuffix}
+        </p>
+
+        <div className="katex-dialog-form-group">
+          <label
+            htmlFor="katex-content"
+            className="katex-dialog-label"
+          >
+            {translations.katex.label}
+          </label>
+          <textarea
+            ref={contentInputRef}
+            id="katex-content"
+            className="katex-dialog-textarea"
+            placeholder={translations.katex.placeholder}
+            value={content}
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
+            onKeyDown={handleKeyDown}
+            rows={5}
+          />
+        </div>
+      </div>
+
+      <div className="katex-dialog-actions">
+        <button
+          className="katex-dialog-button-cancel"
+          onClick={handleClose}
+          type="button"
+        >
+          {translations.common.cancel}
+        </button>
+        <button
+          className="katex-dialog-button-submit"
+          onClick={handleSubmit}
+          type="button"
+        >
+          {initialContent ? translations.katex.update : translations.katex.add}
+        </button>
+      </div>
+    </CommonModal>
+  );
+};

package/src/editor/dialogs/add-katex-dialog/index.ts

@@ -0,0 +1 @@
+export { AddKatexDialog } from './add-katex-dialog';

package/src/editor/dialogs/add-link-dialog/add-link-dialog.css

@@ -0,0 +1,105 @@
+/* ═══════════════════════════════════════════════════════════ */
+/* ADD LINK DIALOG */
+/* ═══════════════════════════════════════════════════════════ */
+
+.link-dialog-title {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.link-dialog-divider {
+  margin-bottom: 16px;
+  border: none;
+  border-top: 1px soliv var(--tiptap-color-border);
+}
+
+.link-dialog-content {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  gap: 16px;
+}
+
+.link-dialog-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.link-dialog-label {
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.link-dialog-input {
+  padding: 8px 12px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 150ms ease-in-out;
+}
+
+.link-dialog-input:focus {
+  border-color: var(--ui-color-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-color-primary-subtle);
+}
+
+.link-dialog-input::placeholder {
+  color: var(--tiptap-color-text-placeholder);
+}
+
+.link-dialog-error {
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+
+.link-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.link-dialog-button-cancel {
+  padding: 8px 16px;
+  border: 1px solid var(--tiptap-color-border);
+  border-radius: 4px;
+  background-color: var(--ui-text-white);
+  color: var(--ui-text-primary);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.link-dialog-button-cancel:hover {
+  border-color: var(--ui-secondary-bg-active);
+  background-color: var(--ui-secondary-bg);
+}
+
+.link-dialog-button-submit {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--ui-color-primary);
+  color: var(--ui-text-white);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 150ms ease-in-out;
+}
+
+.link-dialog-button-submit:hover {
+  background-color: var(--ui-color-primary-dark);
+}
+
+.link-dialog-button-submit:active {
+  transform: scale(0.98);
+}