redmine-reactions-frontend/src/content.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import Reactions from './components/Reactions';

console.log('Redmine Reactions Extension Loaded!');

// Функция для извлечения ID задачи из URL
function getIssueId(): number | null {
  const match = window.location.pathname.match(/\/issues\/(\d+)/);
  return match && match[1] ? parseInt(match[1], 10) : null;
}

// Находим все блоки с комментариями на странице
const commentContainers = document.querySelectorAll('div.journal.has-notes');

const issueId = getIssueId();

if (issueId) {
  commentContainers.forEach(container => {
    // Находим вложенный div с ID комментария
    const noteElement = container.querySelector<HTMLDivElement>('div[id^="note-"]');
    if (!noteElement) return;

    const commentId = noteElement.id;

    // Создаем div, в который будем рендерить наш React-компонент
    const reactionRootEl = document.createElement('div');
    reactionRootEl.className = 'reactions-app-root';

    // Вставляем наш div в конец контейнера, как вы и определили
    container.appendChild(reactionRootEl);

    // Создаем React-root и рендерим компонент
    const root = ReactDOM.createRoot(reactionRootEl);
    root.render(
      <React.StrictMode>
        <Reactions issueId={issueId} commentId={commentId} />
      </React.StrictMode>
    );
  });
}