Code editor events

One use-case is integrating the video animation with accompanying content on the page. For example, you might want to synchronize an article or documentation with the editor.

So I added events for when the timeline start/stops and when steps start/stop.

<div id="editor"
  on:timelinestart={...}
  on:timelineend={...}
  on:stepstart={...}
  on:stepend={...}
  />

The event contains the step data, which the event handler can use to scroll or change the accompanying content.

Here’s the code:

joshnuss/svelte-codemirror-test@2c5732a

Here’s a video:

The events are displayed at the bottom, in the DevTool’s console.