[wip] refactor playground editor

[ahdinosaur]

TODO:

• types
  • span
    • sourceId
    • from
    • to
  • label
    • span
    • message
  • note
    • message
  • report
    • id
    • span
    • labels
    • notes
• understand state of codemirror/diagnostic
• state
  • reports
  • activeReportId
• remove diagnostic panel from codemirror/diagnostic
• add similar panel as React component
  • using react-resplit for a resizable panel
  • using Chakra List for correct aria attributes
• decide on keyboard shortcuts to navigate diagnostics
• decide on which messages (transactions or effects) can be sent to CodeMirror diagnostics
  • setReports
  • setActiveReportId
• decide on what state will be received back
  • activeReportId

rendering a diagnostic report:

{span} : {message}

{labels.map(({ span, message }) => (
  {span} : { message}
)}

click on a span, and your cursor highlights the span range.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rimu-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2023 3:05am
rimu-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2023 3:05am

[ahdinosaur]

i should see how vscode does error messages. keen to find multi-span error diagnostics in the wild. here's something interesting: microsoft/TypeScript#25257

[ahdinosaur]

is there a way to use CodeMirror Tooltips with React Portals? or we just render the tooltip with a standalone React render.

uses CodeMirror view.hoverTooltip