src/extensions/database-button/database-button-view.tsx - master - effective_wiki/web-client

src/extensions/database-button/database-button-view.tsx

77 строк2 KB

Andrey Lila

fix: reduce size of database-button

19 дек 2025, 12:55

19 дек 2025, 12:55df3c4ff

"use client";

import * as React from "react";
import { NodeViewWrapper } from "@tiptap/react";
import { useAction, useAtom } from "@reatom/npm-react";
import { Database } from "lucide-react";

import { pagesAtom, setActivePageAction } from "@/store/pages";
import type { PageListResponse } from "@/types/page-types";
import { findPageById } from "@/helpers/pages";

interface PageLinkViewProps {
  node: {
    attrs: {
      pageId?: string | null;
      databaseId?: string | null;
      databaseTitle?: string | null;
    };
  };
}

function findTitleById(nodes: PageListResponse[], id: string): string | null {
  for (const item of nodes) {
    if (item.pageId === id) return item.title;
    if (item.children && item.children.length > 0) {
      const nested = findTitleById(item.children, id);
      if (nested) return nested;
    }
  }
  return null;
}

export default function PageLinkView({ node }: PageLinkViewProps) {
  const pageId = (node.attrs.pageId || null) as string | null;

  const [pages] = useAtom(pagesAtom);
  const setActivePage = useAction(setActivePageAction);

  const title = React.useMemo(() => {
    if (!pageId) {
      return "База данных не выбрана";
    }

    const foundTitle = findTitleById(pages as PageListResponse[], pageId);
    return foundTitle || "База данных";
  }, [pageId, pages]);

  const handleClick = async (event: React.MouseEvent) => {
    event.preventDefault();
    event.stopPropagation();

    if (!pageId) return;

    if (!findPageById(pages, pageId)) {
      console.error("Page not found");
      return;
    }

    setActivePage(pageId);
  };

  return (
    <NodeViewWrapper
      as="div"
      data-node-type="page-link"
      className="inline-flex items-center gap-1 cursor-pointer hover:bg-slate-100 rounded px-1 py-0.5 transition-colors"
      onClick={handleClick}
    >
      <span className="flex items-center justify-center text-slate-500">
        <Database className="h-4 w-4" />
      </span>
      <span className="text-slate-700 underline decoration-slate-200 underline-offset-4 font-medium">
        {title}
      </span>
    </NodeViewWrapper>
  );
}