all repos — snow-editor @ 13d855e25e8510a57608b0ce77f62cbeed372d0e

small and cozy markdown, and orgmode editor

src/components/DocumentOutline.jsx (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 
import { STR } from '../lib/strings.js';

// Outline shared by Markdown and Org — receives pre-parsed headings.
export default function DocumentOutline({ headings, onSelectHeading }) {
  if (!headings || headings.length === 0) {
    return null;
  }

  return (
    <aside className="org-outline" aria-label={STR.ORG_OUTLINE}>
      <div className="org-outline__title">{STR.ORG_OUTLINE}</div>
      <ul className="org-outline__list">
        {headings.map((heading) => (
          <li
            key={`${heading.line}-${heading.title}`}
            className="org-outline__item"
            style={{ paddingLeft: `${(heading.level - 1) * 0.65}rem` }}
          >
            <button
              type="button"
              className="org-outline__link"
              onClick={() => onSelectHeading?.(heading.line)}
            >
              {heading.todo && (
                <span className={`org-badge org-${heading.todo.toLowerCase()}`}>
                  {heading.todo}
                </span>
              )}
              {heading.title}
            </button>
          </li>
        ))}
      </ul>
    </aside>
  );
}