snow-editor

small markdown and org-mode editor
Log | Files | Refs | README

OrgOutline.jsx (1249B)

      1 import { useMemo } from 'react';
      2 import { parseOrgDocument } from '../lib/org/parseDocument.js';
      3 import { STR } from '../lib/strings.js';
      4 
      5 export default function OrgOutline({ content, onSelectHeading, collapsed = false }) {
      6   const { headings } = useMemo(() => parseOrgDocument(content), [content]);
      7 
      8   if (collapsed || headings.length === 0) {
      9     return null;
     10   }
     11 
     12   return (
     13     <aside className="org-outline" aria-label={STR.ORG_OUTLINE}>
     14       <div className="org-outline__title">{STR.ORG_OUTLINE}</div>
     15       <ul className="org-outline__list">
     16         {headings.map((heading) => (
     17           <li
     18             key={`${heading.line}-${heading.title}`}
     19             className="org-outline__item"
     20             style={{ paddingLeft: `${(heading.level - 1) * 0.65}rem` }}
     21           >
     22             <button
     23               type="button"
     24               className="org-outline__link"
     25               onClick={() => onSelectHeading?.(heading.line)}
     26             >
     27               {heading.todo && (
     28                 <span className={`org-badge org-${heading.todo.toLowerCase()}`}>
     29                   {heading.todo}
     30                 </span>
     31               )}
     32               {heading.title}
     33             </button>
     34           </li>
     35         ))}
     36       </ul>
     37     </aside>
     38   );
     39 }