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.

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 😅

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

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

There are breaking changes for this upgrade.

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

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

Description

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

Preview:

Could be this line?

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.

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.

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
}

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.

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.

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

In my usecase full screen mode would be pretty useful.

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.

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)

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.

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?

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.

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

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?

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!

most likely due to

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

Maybe it should be moved here?

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.

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

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.♥️

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

#5

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).

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

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.

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!

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?

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?

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

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

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?

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.