comment-md-react-ui

React UI components for comment-md - sidebar, highlights, and themes for collaborative commenting.

Installation

npm install comment-md-react-ui comment-md-core

Usage

import { parse } from 'comment-md-core';
import { remarkCommentMd } from 'comment-md-remark-plugin';
import {
  CommentProvider,
  CommentSidebar,
  ThemeProvider,
  I18nProvider,
} from 'comment-md-react-ui';
import ReactMarkdown from 'react-markdown';

function App() {
  const markdown = `...`; // Your markdown with annotations
  const { annotations } = parse(markdown);

  return (
    <I18nProvider locale="en">
      <ThemeProvider>
        <CommentProvider annotations={annotations}>
          <div style={{ display: 'flex' }}>
            <ReactMarkdown remarkPlugins={[remarkCommentMd]}>
              {markdown}
            </ReactMarkdown>
            <CommentSidebar />
          </div>
        </CommentProvider>
      </ThemeProvider>
    </I18nProvider>
  );
}

Components

<CommentProvider>

Context provider for managing comment state.

<CommentProvider
  annotations={annotations}
  onAnnotationsChange={(annotations) => { /* handle changes */ }}
>
  {children}
</CommentProvider>

<CommentSidebar>

Displays all comments in a sidebar.

<CommentSidebar />

<SelectionHandler>

Handles text selection for creating new annotations.

<SelectionHandler
  containerRef={contentRef}
  onCreateAnnotation={(annotation) => { /* handle new annotation */ }}
/>

<ThemeProvider>

Provides theming support with light/dark modes.

import { ThemeProvider, defaultLightTheme } from 'comment-md-react-ui';

const customTheme = {
  ...defaultLightTheme,
  colors: {
    ...defaultLightTheme.colors,
    accentPrimary: '#8b5cf6',
  },
};

<ThemeProvider theme={customTheme}>
  {children}
</ThemeProvider>

<I18nProvider>

Internationalization support.

<I18nProvider locale="zh-CN">
  {children}
</I18nProvider>

Supported locales: en, zh-CN

Hooks

useComments()

Access comment state and actions.

const {
  annotations,
  activeAnnotationId,
  setActiveAnnotation,
  addComment,
  resolveAnnotation,
} = useComments();

useTheme()

Access current theme.

const { theme } = useTheme();

useI18n()

Access translations.

const { t, locale } = useI18n();

Related Packages

• comment-md-core - Core parser and API
• comment-md-remark-plugin - Remark plugin

Links

• GitHub
• Demo

License

MIT