Hi I'm new! Question about extensions and Unified

Issues
1

Hello! :wave:

I am trying out the free trial, but I love this product already and am probably going to buy it!

I have been developing markdown utilities in Unified / Remark / Micromark for the past month, and I love that Inkdrop is already using Unified and has extension capabilities!

From my limited understanding of Unified’s ecosystem, it seems there was a major update and plugins after the update are incompatible with unified before the update. There are two remark plugins I want to add to my inkdrop plugin:

  1. remark-directives
  2. some custom code for a micromark wikilink tokenizer and a remark parser to go along with it.

Are there plans to update Inkdrop’s dependencies to the latest unified version so I can integrate my remark plugins with the renderer in inkdrop?

2

@craftzdog Is this still accurate?

    "unified": "^9.2.0",
    "remark-parse": "^8.0.3",
    "remark-rehype": "^7.0.0",
    "rehype-raw": "^4.0.2",
    "rehype-react": "^6.0.0",
3

Update: I got it to work!

So it appears that Inkdrop is still on the old version of remark, so the current remark-directives plugin is incompatible. But that’s not a problem. It wasn’t that much work to write a simple tokenizer for generic directives using inkdrop-admonition as an example.

Results of my POC:

Input:

# Testing directives

::::lvlone[Hey!]{#test .test}
## Directive level one
Should be `<div id="test" class="test">`

:::lvltwo{.hello-world}
### Directive level two
Should be `<div class="hello-world>`

:test [Inline directive. Should be `<span class="bold">`] {.bold}

::div [Leaf directive. Should be `<div foo="bar"></div>`] {foo="bar"}

::div [# Leaf directive as heading] {foo="bar"}

:::

::::

Stylesheet:

.container-directive {
    background-color: rgba(255, 0, 0, .2);
    border-left: 1px solid red;
    margin-left: 1rem;
}

.leaf-directive {
    background-color: rgba(0, 0, 255, .2);
    border-left: 1px solid blue;
    margin-left: 1rem;
}

.inline-directive {
    background-color: rgba(0, 255, 0, .2);
    border-left: 1px solid green;
    margin-left: 1rem;
}

Output:

image
image816Ă—552 20.5 KB

My next goal is to add actions above the directives (kind of like VSCode’s codelens) which when clicked will trigger a custom script to execute.

4

Hi @anon42785936,

Thanks for the question and report.
You are right. Inkdrop is still using the old version of Remark.
Great to know that you got it to work!
I’m planning to upgrade it in the future but as you know it’ll have some breaking changes, so I should be careful to do that.