Examples of plugins for ink-mde

[Drei109]

Hi this is an awesome project, I'm not sure if this is the right place but I have a question related to ink-mde.

Is there any examples of how to properly build a plugin for ink-mde? I wanted to add custom styles to some keywords but I haven't been able to figure out how.

[davidmyersdev]

Hey @Drei109! 👋 Do you have an example of the syntax updates you'd like to make? If you can provide some examples of the syntax and the desired output/behavior, I can help you out. The Plugin API does not have a lot of documentation yet, but I think it's finally getting close to stabilizing.

[Drei109]

Hey @davidmyersdev thanks for answering, ink-mde is such a cool project! Anyways, what I have in mind is rather simple I think (hope). I'd like to add custom styles to block of texts that start with certain keywords until a space is found.
Example of input text:
The example event will happen in:London at:12:30 anotherparameter:"Some value with spaces"
This is the html output I would expect:

<div class="cm-line">
	The example event will happen 
	<div class="in-keyword-wrapper">
		<div class="key">in:</div>
		<div class="value">London</div>
	</div> 
	<div class="at-keyword-wrapper">
		<div class="key">at:</div>
		<div class="value">12:30</div>
	</div> 
	<div class="anotherparameter-keyword-wrapper">
		<div class="key">anotherparameter:</div>
		<div class="value">"Some value with spaces"</div>
	</div>
</div>

This behaviour should be very similar to what some text editors have for tags that start with #

Any ideas of how this could be implemented?

[davidmyersdev]

Hey @Drei109. Apologies for the delay. I've been working on a PR that makes some big improvements to the Plugin API. Part of what I'm working on is the ability to declare custom Markdown grammar extensions with a minimal amount of code, and I think what you are looking to do would be covered by that. The API is not finalized yet, but it will likely end up being something like this.

import { defineInlineGrammar, ink, plugin, pluginTypes } from 'ink-mde'

ink(targetElement, {
  plugins: [
    plugin({
      type: pluginTypes.grammar,
      value: () => {
        return defineInlineGrammar({
          prefix: /\w+\:/,
          content: /[^\s]+/,
        }),
      },
    })
  ],
})

[Drei109]

Thanks @davidmyersdev, that looks great!