ngs/draft-js-markdown-shortcuts-plugin

A DraftJS plugin for supporting Markdown syntax shortcuts

draft-js-markdown-shortcuts-plugin

A DraftJS plugin for supporting Markdown syntax shortcuts

This plugin works with DraftJS Plugins wrapper component.

View Demo

Usage

npm i --save draft-js-markdown-shortcuts-plugin

then import from your editor component

import createMarkdownShortcutsPlugin from 'draft-js-markdown-shortcuts-plugin';

Example

import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor';
import createMarkdownShortcutsPlugin from 'draft-js-markdown-shortcuts-plugin';
import { EditorState } from 'draft-js';

const plugins = [createMarkdownShortcutsPlugin()];

export default class DemoEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onChange = editorState => {
    this.setState({
      editorState,
    });
  };

  render() {
    return <Editor editorState={this.state.editorState} onChange={this.onChange} plugins={plugins} />;
  }
}

License

MIT. See LICENSE

draft-js-markdown-shortcuts-plugin's Issues

Link within existing text removes rest of line.

Hello, using 0.6.1, I can repro this on the demo page as well.

Adding markdown for a link removes any trailing characters in the rest of the line.

For example, modifying this text:

This is some sample text

to the following:

This is [some](google.com) sample text

Will result in the below phrase. The trailing characters should be kept after the link.

This is some

Only expand inline styles (bold, italic, whitespace, etc.) when surround by space characters

Problem: The following text "grant_nestor and brian_swichkow" is converted to grant nestor and brian swichkow" (except there aren't spaces between the first and last names like there are here because Github doesn't render mid-word italics).

Solution: Automatically expand inline styles only for text that is surrounded by 1 or more whitespace characters. This is how Github's markdown shortcuts works.

Deleting a markdown block in the very first line

When I type a hash as the very first character, which converts the first line to a heading, I can never make that line leave heading mode again. Pressing backspace when there's no content left doesn't do anything. (the same thing is true for all other blocks too, like code)

Could we do something like: When the cursor is at the very first position in the editor and backspace is pressed revert that block to unstyled?

How to init with pre content?

As the question

setEditorState is not a function

I'm using these versions:
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1",
"draft-js": "^0.11.0",
"draft-js-markdown-shortcuts-plugin": "^0.5.0",
"draft-js-plugins-editor": "^3.0.0"

and whenever I try to use a markdown shortcuts, this error shows up in the console and the shortcut would not work:

Uncaught TypeError: setEditorState is not a function
    at Object.handleBeforeInput (index.js:221)
    at index.js:348
    at Array.some (<anonymous>)
    at Object.handleBeforeInput (index.js:347)
    at editOnBeforeInput (editOnBeforeInput.js:83)
    at DraftEditor.react.js:486
    at unstable_runWithPriority (scheduler.development.js:674)
    at runWithPriority$2 (react-dom.development.js:11834)
    at flushControlled (react-dom.development.js:22993)
    at DraftEditor.react.js:485
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:481)
    at executeDispatch (react-dom.development.js:614)
    at executeDispatchesInOrder (react-dom.development.js:639)
    at executeDispatchesAndRelease (react-dom.development.js:744)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:753)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (react-dom.development.js:723)
    at runEventsInBatch (react-dom.development.js:770)
    at runExtractedPluginEventsInBatch (react-dom.development.js:916)
    at handleTopLevel (react-dom.development.js:6171)
    at batchedEventUpdates (react-dom.development.js:2422)
    at dispatchEventForPluginEventSystem (react-dom.development.js:6271)
    at dispatchEvent (react-dom.development.js:6301)
    at unstable_runWithPriority (scheduler.development.js:674)
    at runWithPriority$2 (react-dom.development.js:11834)
    at discreteUpdates$1 (react-dom.development.js:22935)
    at discreteUpdates (react-dom.development.js:2440)
    at dispatchDiscreteEvent (react-dom.development.js:6254)

Is anyone else having this problem?

Conflicts with emoji plugin/mention plugin?

I find when I use this plugin alongside the emoji and mention plugins, the emoji/mention plugins no longer work.

I'm not sure if the issue is with this plugin or those ones! Here's an example of what happens when I try to choose an emoji: (the picker appears but as soon as I make a selection, I get this error)

Sorry, the stack is a bit big for my screenshot but the former image was where the error finally happens, and this image is where the call

stack begins -

Documentation missing

• of the plugin configuration
• a textual representation of all features (instead only the gif) - I see there are a lot more features that I don't see (checkable list item's, but I can't use them)

Newline doesn't trigger expansion

Behavior observed on the public demo. Entering a newline does not trigger expansion like hitting space does. Example:

input:

text *highlight* text

produces:
text highlight text

(note that 'highlight' is correctly italicized and the * are elided from the rendered output)

but input:

text *highlight*<newline>
text

produces:
text *highlight*
text

(note the * are left literal and the word 'highlight' is not italicized)

Bullet Shortcut does not erase placeholder

Expected Behavior
If you have placeholder specified as a prop for the Editor and you use the markdown shortcuts to create a bullet, the placeholder should not be displayed.

Actual Behavior:
The placeholder is still visible behind the bullet.

Code block seems can't be end

where sdfs is in a code block.

Breaks on latest Draft-JS-Plugins release :( (getEditorState is not a function)

Alas, looks like this broke with the release of the latest two versions of draft-js-plugins. Since those fix some super important bugs for me, it would be great if one could restore compatibility somehow.

Here are the error messages I am getting:

"Uncaught TypeError: getEditorState is not a function

at Object.handleReturn (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:273059:25)
at http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:266875:79
at Array.some (native)
at Object.handleReturn (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:266874:22)
at editOnKeyDown (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:256789:68)
at http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:253856:19
at Object.ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:142347:16)
at executeDispatch (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:142128:21)
at Object.executeDispatchesInOrder (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:142148:7)
at executeDispatchesAndRelease (http://localhost:3000/packages/modules.js?hash=5f2b7e0054b9f5cd9059df7057b90d09e1f819fa:141535:22)

(Extended information)
handleReturn @ modules.js?hash=5f2b7e0…:273059
(anonymous) @ modules.js?hash=5f2b7e0…:266875
(anonymous) @ modules.js?hash=5f2b7e0…:266874
editOnKeyDown @ modules.js?hash=5f2b7e0…:256789
(anonymous) @ modules.js?hash=5f2b7e0…:253856
ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback @ modules.js?hash=5f2b7e0…:142347
executeDispatch @ modules.js?hash=5f2b7e0…:142128
executeDispatchesInOrder @ modules.js?hash=5f2b7e0…:142148
executeDispatchesAndRelease @ modules.js?hash=5f2b7e0…:141535
executeDispatchesAndReleaseTopLevel @ modules.js?hash=5f2b7e0…:141546
forEachAccumulated @ modules.js?hash=5f2b7e0…:142454
processEventQueue @ modules.js?hash=5f2b7e0…:141749
runEventQueueInBatch @ modules.js?hash=5f2b7e0…:148791
handleTopLevel @ modules.js?hash=5f2b7e0…:148802
handleTopLevelImpl @ modules.js?hash=5f2b7e0…:153863
perform @ modules.js?hash=5f2b7e0…:144887
batchedUpdates @ modules.js?hash=5f2b7e0…:153776
batchedUpdates @ modules.js?hash=5f2b7e0…:143557
dispatchEvent @ modules.js?hash=5f2b7e0…:153938"

redraft renderer

redraft is a project to render DraftJS state to React components without having to render a readOnly editor. (this is important for our use case b/c we're rendering hundreds of messages composed with DraftJS and rendering hundreds of DraftJS editors in readOnly mode is slow)

It'd be great to create a renderer from this plugin to React components using redraft. This is what a redraft renderer looks like: (shortened example from the redraft README)

const renderers = {
  // Inlines
  inline: {
    BOLD: (children, { key }) => <strong key={key}>{children}</strong>,
    ITALIC: (children, { key }) => <em key={key}>{children}</em>,
    UNDERLINE: (children, { key }) => <u key={key}>{children}</u>,
    CODE: (children, { key }) => <span key={key} style={styles.code}>{children}</span>,
  },
  // Blocks
  blocks: {
    unstyled: (children) => children.map(child => <p>{child}</p>),
    'header-one': (children) => children.map(child => <h1>{child}</h1>),
    'code-block': (children, { keys }) => <pre style={styles.codeBlock} key={keys[0]} >{addBreaklines(children)}</pre>,

  },
  // Special entities
  entities: {
    LINK: (children, data, { key }) => <Link key={key} to={data.url}>{children}/>,
  },
  // Potentially add decorators
  decorators: [],
}

This seems very possible and would complement @jpuri's awesome draft-to-markdown. (which works beautifully in tandem with this plugin by the way)

What do you think?

Undo markdown

Most other editors have a function where if you hit (⌘ + Z / Ctrl + Z) it will undo the automarkdown, and leave the text as it was.

Eg. if I type **bold**_ ( _ denoting a space) this changes it to bold, however if I undo, it will just make it **bold**, when I want it to be **bold**_.

TL;DR: allow native undo behavior, to stop the auto markdown.

Incompatibility with createLinkPlugin

I want to be able to use both markdown shortcuts plugin and draft-js-anchor-plugin but it's impossible to get them to both work in creating a link. I think the problem is with the name used for the state. For the markdown plugin, it's href. For the anchor plugin, it's url.

Can we make the necessary revisions to get the markdown plugin to be compatible with the anchor plugin? I think at least this file definitely needs to be changed.

If that can't be done, is there a way we can disable a markdown shortcut from createMarkdownShortcutsPlugin()?

Expansion when selected

It would be nice if this worked like Typora.io as much as possible, as Typora rocks.

One thing that Typora does is when you move back over a markdown item, it will expand it back out.

It would be nice for this plugin if it did that too

keyBindingFn not triggering on tab key press

Inlcuding the draft-js-markdown-shortcuts-plugin is blocking key binding for the tab key.

Example:

const keyDown = (e) => {
    
    if(e.key === 'Tab'){
        
        console.log('I never get here...');
        
    }

    console.log('Other keys are working fine.');
    
}

<Editor
    editorState  = {editorState}
    onChange     = {setEditorState}
    keyBindingFn = {keyDown}
    plugins      = {plugins}
/>

If I remove the plugin, everything works as exepected and I'm able to catch tab key presses. I've tried adding onTabmethod to the Editor and works fine, but I get a warning since the method is deprecated.

It's possible to catch tab presses using KeyBindingFn?

Incompatibility with create-react-app?

Hi,

I could not get the example code to run with create-react-app. I also tried a simple web pack deployment solution to no avail.
I get several errors during markdown substitutions such as this one:

Uncaught TypeError: Cannot read property 'get' of undefined at getUpdatedSelectionState (http://localhost:3000/static/js/bundle.js:28787:35) at getDraftEditorSelectionWithNodes (http://localhost:3000/static/js/bundle.js:28298:23) at getDraftEditorSelection (http://localhost:3000/static/js/bundle.js:48661:10) at editOnSelect (http://localhost:3000/static/js/bundle.js:48143:27) at http://localhost:3000/static/js/bundle.js:44738:19 at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:19854:16) at executeDispatch (http://localhost:3000/static/js/bundle.js:19361:21) at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:19384:5) at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:13363:22) at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:13374:10) at Array.forEach (native) at forEachAccumulated (http://localhost:3000/static/js/bundle.js:34862:9) at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:13577:7) at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:68734:18) at Object.handleTopLevel [as _handleTopLevel] (http://localhost:3000/static/js/bundle.js:68745:5) at handleTopLevelImpl (http://localhost:3000/static/js/bundle.js:68832:24) at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:16234:20) at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:68575:26) at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:8655:27) at dispatchEvent (http://localhost:3000/static/js/bundle.js:68907:20) :3000/static/js/bundle.js:47692

I tested the demo code and it works perfectly fine. It's probably a silly oversight on my part but I can't figure out why the demo works but not any of my implementations.

Please look into it.
Thanks

Configure which markdown's are allowed

Enable/disable specific markdown annotations.

problems with image plugin

Hello I tried using this together with imagePlugin/dnd and alignment. Apparently it doesn't work :/ Images created via can't be focused, drag and dropped or aligned. Am I doing sth wrong or is this kind of combination not yet supported?
Best Regards,
Lukas