custom/external formatting toolbar?

[tconroy]

Hello!
Great work on ink-mde!

I'm currently integrating it into a React Native project, which loads ink-mde inside of a webview.

Since this will be used on mobile devices, I'd like to create a custom formatting toolbar as an InputAccessoryView on the keyboard.

This makes me wonder: how can/could I externally control formatting options in ink-mde? Is it currently possible to do that?

[davidmyersdev]

Hey @tconroy! Thanks so much. I can always export the toolbar as a separate component, but you might need something a bit more custom in the InputAccessoryView doesn't run in the same JS context as the editor itself. Do you know if that's the case?

[tconroy]

Hey @davidmyersdev! Yes I believe that is the case.

React native let's you pass messages from the host app to web views via the postMessage API. So I can serialize commands back and forth between the two, as long as they're serializable to strings.

I think what would be most useful for my use case is for the editor to expose callbacks to perform the various editor actions (ie bold, italic, insert list, etc). Then I can just associate each callback to an "event" that my host RN app is sending through postMessage.

I don't mind implementing the UI myself, just need a way to trigger the behaviors 😊

[davidmyersdev]

In that case, I think you can already do what you are looking to do. The returned instance has a format method on it that formats the current (or given) selection. Hopefully this demo helps. 😄

https://stackblitz.com/edit/davidmyersdev-ink-mde-uyu9gq?file=src%2Fmain.ts,index.html,tsconfig.json

[tstachl]

Awesome, thanks for the example. That definitely works for my use case.