mdx-editor / mdx-editor/editor
[BUG] Inserting an inline directive wraps it in a block element
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
If you want to ask for support or request features, sponsor the project and contact me over email.
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- I have read the documentation and cannot find an answer.
Describe the bug
For a project I'm working on, I need to be able to provide my end-user with the ability to apply some basic text formatting (particular combinations of colour, decoration etc). I've got most of it working with a custom editor, but even though I'm setting things up as an inline text directive it keeps adding a linebrak tag after the editor.
Reproduction
Start from https://codesandbox.io/p/sandbox/mdx-editor-base-q8s7zr?file=/src/App.tsx to reproduce the problem so that I can observe the issue on my side and make sure that the fix reliably addresses it.
To Reproduce
Steps to reproduce the behavior:
- Go to https://codesandbox.io/p/sandbox/mdx-editor-base-forked-8z8fjx
- Add some restricted text via the Res button
- Attempt to continue typing on the same line - the editor inserts a linebreak despite it being based around a TextDirective.
Expected behavior
As it's a text directive, I'd expect to be able to continue typing inline - I can do this with the generic editor, but then I can't apply the span formatting I need to display.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows
- Browser [e.g. Chrome, Safari]: Safari
Additional context
I am very pleased that it's taken me getting into the more fiddly bits of the code before running into an issue.
I've also noticed (and you can see this in the Sandbox) that there's no direct way to get the types for the Directives that I can find - locally I'm importing as import type { TextDirective } from 'mdast-util-directive' which feels a bit roundabout?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior in the linked CodeSandbox, especially the Res button flow and continuing to type after restricted text. Compare the generic editor with the custom TextDirective setup and the imported mdast-util-directive TextDirective type; done means inline text remains on the same line without an inserted linebreak.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100