davidmyersdev / ink-mde

A beautiful, modern, customizable Markdown editor powered by CodeMirror 6 and TypeScript

Hi. I'm David (he/him). ✌🏻

A little bit about me.

• I'm a Staff Software Engineer at Doximity.
• I maintain a knowledge management tool called Octo.
• I run an inclusive Discord community called Curious Humans.
• I have an OSS roadmap to track what I'm working on.
• I write about the technologies I use at davidmyers.dev.
• Say hello at [email protected].

ink-mde's Issues

[Feature Request] Full screen mode

In my usecase full screen mode would be pretty useful.

Ability to Get Codemirror Instance

Is there any way I can get the Codemirror instance from Ink MDE?

I'm likely missing something, but if there isn't this feature already, this will be very useful. Thank you for the awesome project!

Add option for readonly mode

https://codemirror.net/6/docs/ref/#state.EditorState^readOnly

Inline syntax highlighting is broken in the latest version(s)

It looks like recent changes to reduce the final package size have omitted whatever code/files were necessary for the inline Markdown syntax highlighting. I recently updated the version of Ink that I use and pointed at https://cdn.jsdelivr.net/npm/[email protected]/+esm and just noticed that the inline Markdown styles no longer work. I had to go back a few versions to find one that jsdelivr would serve (other recent versions run into the issue where they exceed 100MB); it looks like https://cdn.jsdelivr.net/npm/[email protected]/+esm is the most recent working version that is also small enough for jsdelivr to serve up.

Plugin system for rendering custom Liquid tags

I think a plugin system for rendering user-defined liquid tags is necessary to solve davidmyersdev/octo#37 since DEV by default support several liquid tags

Compare alternative UI libraries

Svelte has been introduced as a UI library for Ink (for the file-upload drop zone), but there are some lighter-weight options out there that are worth exploring.

Some examples

• https://github.com/luwes/sinuous
• https://github.com/facebook/jsx
• https://github.com/websyncs/skratch

Expose the Extension API

Editor broken when used with Shadow DOM

It appears the editor is broken when you attempt to create a Web Component out of it that leverages the Shadow DOM. Is there a know way to make Ink compatible with this use?

Toolbar buttons submit the form

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

submit:
The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with <form>, or if the attribute is an empty or invalid value.

When putting Ink into a form, clicking on the button on the toolbar will submit the form, as the toolbar buttons does not have a type attribute.

Add ESLint rules and CI job

Use https://github.com/antfu/eslint-config to start

Update checkbox styles

Checkboxes should match the container background color (or be closer in color) with a border that provides a high contrast with the background.

Option to hide markdown syntax for links, headers, bold, and italic blocks

Similar to how this already exists for lists, add an option that can hide the underlying markup syntax for headers, bold text, italic text, and links. When the cursor is within the relevant area, show the syntax.

Build Vue component with Vue 2 & 3 support

https://github.com/vueuse/vue-demi

Allow opt-out/opt-in for language specific syntax library

We use Ink-MDE in a Vue.js app as a Markdown editor for its wonderful wysiwyg-syntax-highlighting. When building the project (yarn build), I noticed more than forty dependencies, most of which are specific to a certain programming language. At the end, yarn printed a warning:

(!) Some chunks are larger than 500 KiB after minification. Consider:

• Using dynamic import() to code-split the application
• Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
• Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

I would like to be able to restrict the language-dependencies bundled into my app to the one I need, Markdown in our case. As this relates to bundle size, I imagine other users, too, to appreciate the possibility to reduce the supported languages to only the subset needed. Could this be a future feature—or is there already a way to do this?

Add KaTeX support

I feel like this would be a really nice feature and I use it daily, at least maybe highlighting $ and $$ signs would be nice.

(This is obv just an enhancement that I would rly appreciate)

Bottom border for headers

First of all thanks for this awesome editor. This is already the 3rd I'm trying out, best so far.

I've tried to add bottom borders to the h1 and h2 elements inside the editor:

So I've checked, they have

<div class="cm-line"><span class="ͼ14 ͼ1i">#</span><span class="ͼ14"> Header 1</span></div>
<div class="cm-line"><span class="ͼ15 ͼ1i">##</span><span class="ͼ15"> Header 2</span></div>
<div class="cm-line"><span class="ͼ16 ͼ1i">###</span><span class="ͼ16"> Header 3</span></div>

So there is the css I've come up with:

.cm-line:has(.ͼ14), .cm-line:has(.ͼ15) {
  padding-bottom: .3em;
  border-bottom: 1px solid #eaecef;
}

Afterward I've noticed that after deploying the code the class name changed:

<div class="cm-line"><span class="ͼl ͼy">##</span><span class="ͼl"> Header 1</span></div>

Is there a way to add the bottom borders?

Is there a way to use CodeMirror's `placeholder` extension?

Hello! First off, thank you so much for Ink. I've been wanting to plug a markdown editor into my personal Rails site for a while and was dreading it, but I couldn't believe how easy it was to put Ink into an import map and just plug it in.

I was wondering if there's an out-of-the-box way to use CodeMirror 6's placeholder extension to get a… well, placeholder into my editor 😄 It's easy enough to provide an initial doc but it would be even better to get true placeholder functionality so that it isn't considered content and is automatically overridden as soon as content is typed in.

Add note to README about v0 version changes

For v0, changes to minor versions should be considered as "breaking" changes. The API is still being actively developed as we approach v1.

Upgrade CodeMirror dependencies to v0.20.x

There are breaking changes for this upgrade.

Add markdown toolbar

Hi!

This is an idea, actually.

In my experience, markdown is simple but scary for newbies. Toolbars help new users to learn markdown. You could go one step ahead and hide the markup on element blur, as they are drawing a lot of attention right now.

Thank you!

Input lag on Safari

My college noticed a severe input lag on Safari 17.1.2 on macOS Sonoma 14.1.2 spec: Macbook Pro 2018 15" i7, 32 GB

It doesn't happen on Chrome on the same computer.

We have also tested the editor https://octo.app/docs/new with more or less the same result.

I guess it's because recalculating styles each keypress is quite expensive. Could we introduce debounce time before recalculating the styles?

Add SSR support

To better support the migration of Octo to Nuxt 3, Ink should support being included in an SSR context. Full SSR support (server-side initialization) will happen later.

Add list item styles

Bug: Toolbar Actions Don't Work Expectedly When No Selection

Summary

When you use the toolbar to perform an action with nothing selected, the default should not be to select whatever has changed, but rather to put the cursor into a position which can edit that change.

For example, when I click Bold on the toolbar, it should automatically put double asterisks around my current cursor position. Rather, it creates 4 asterisks and selects all of them.

custom/external formatting toolbar?

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?

Which flavor of Markdown?

Which flavor of Markdown is supported? CommonMark? Shouldn't it be added to the readme.md?

It would be good to support Markdown Extra, so Ink could be used within system which render using the original PHP lib.

Missing Keymap support

Hi there, great project you've built here.

Was wondering if there'll be support for custom keymaps anytime soon?, (as available on CodeMirror).

Relevant discussion I found: https://discuss.codemirror.net/t/keymap-for-bold-text-in-lang-markdown/3150

I can probably do this manually right now by listening for keyup events. but i think it'll be much nicer if we had this as part of our configuration.

svelte wrapper

i dont know if you have any interest on a svelte wrapper for this component, but i have created the following ink-mde-svelte package. Also published on npm.

if you want to move it to this repo, or move it to your account, i'd be happy to help.

Add support for file uploads

#5

Consolidate UI tooling

The UI layer is currently split between Svelte and Sinuous. While I like Sinuous more than Svelte (for the interoperability with TS and non-UI modules), I think SolidJS is actually going to be a great replacement for them both.

List indentation with tabs

I often use outlines to organize my notes. One little thing is that I can easily create a list, but when I want a sublist, things get difficult.

As a user, I expect that I can hit tab to indent a list item, but this doesn't work. Instead, I have to backspace to delete the new list item, then tab a few times, and then start a new list item. This works and new items will be indented, but this is a bit of a drag and disrupts the note-taking flow.

Ideally, when it hit tab on a list, it indents the whole line, not the text inline. It would also be nice if the sub items had a different bullet style, but that isn't super important today.

Add helper methods to the Focus/Select API

Simple helper methods for "start" and "end" would improve the UX of Ink.

Allow a text element to be supplied in constructor

For better progressive enhancement, a text element should be an acceptable "parent" element. It might require some investigation, but a naive approach, for now, would be to replace that element with a normal container (such as a div).

Add markdown toolbar

Maybe it should be moved here?

Add API to insert text

Expose an API in Ink that inserts text at the supplied range or the current range if a range is not provided.

https://codemirror.net/6/docs/ref/#state.TransactionSpec

Example

const insert = (text: string, selection?: Ink.Editor.Selection) => {
  // fetch current selection if no selection supplied
  // dispatch update with text to insert
}

Automatically load external `katex` CSS

When the katex plugin is enabled, it should automatically inject the external CSS link tag.

Multi-line formatting does not work properly

Description

It seems that multi-line formatting does not work correctly (e.g. lists, quotes)

Preview:

Could be this line?

Add quote block styles

Support smart punctuation

When GFM is involved, a common parsing/formatting option is to allow support for smart punctuation, so it would be nice to be able to configure Ink to use smart quotes/punctuation for writing and editing markdown, updating as punctuation, quotes, or matching quote-pairs are found. For example:

• "Hello, world!" they exclaimed. ➡️ “Hello, world!” they exclaimed.
• That's a smart looking apostrophe. ➡️ That’s a smart looking apostrophe.
• The 's' is silent. ➡️ The ‘s’ is silent.
• 2020--2022 was a bad time. ➡️ 2020–2022 was a bad time.
• I wondered---out loud---if they were being serious. ➡️ I wondered—out loud—if they were being serious.
• You don't say... ➡️ You don’t say…
  • I think this one isn't usually included, but it's the other "smart punctuation" I miss that other editors or modern operating systems do for you 😅

Add search plugin

https://codemirror.net/6/docs/ref/#search

How Do I get an instance object of codemirror from AwaitableInstance

Hi there, great project you've built here.

I created an ink instance using the following method：

const editor = ink(document.getElementById('editor')!, options)

But how can I obtain the object of the codemirror editor?
For example, I need to call the cm.getDoc().getCursor() method of codemirror to obtain the current cursor position, etc. to use the https://github.com/susisu/mte-kernel provided Table tools

It needs to implement the following interfaces：

So can you tell me how to obtain the instance of codemirror from AwaitableInstance, or is there any other way，look forward your prompt reply.♥️

Set up Verdaccio for local development

cant install ink-mde when using svelte 4

most likely due to

ink-mde/package.json

Line 124 in f1e8503

"svelte": "^3.0.0",

what do you think of instead of providing a component for the framework (such as svelte or vue), just providing a "copy-pastable" component (since it is very likely that a wrapper will fit in a single component, no matter the framework), which could be shown in the readme, for example? one clear benefit is that version conflicts would never occur.

i believe this is a plausible approach, given that the core of the package itself (i.e. the ink export from the package) works in native js.

another approach to avoid version conflicts would be to provide the framework-specific components in a separate package, such as @ink-mde/svelte or @ink-mde/vue. however, probably not worth the effort

Integrate into a react project

Thanks for osing this neat library, is there a guide to integrating ink into an existing react project?