Forum Documentation Showcase Pricing Learn more

🔥 Markdown Text Editor - Add the power of Markdown to your app

Announcing the Markdown Text Editor plugin :sparkles:

:star: Update

Markdown Plus has been renamed to Markdown Text Editor to better reflect the functionality and direction of this plugin going forward.

The newest version of this plugin is now available, featuring a Markdown Editor with a side-by-side preview and toolbar. Click here for the demo app!

The editor features:

  • A side-by-side preview with scroll syncing
  • A toolbar with commonly used formatting options
  • Built in shortcuts to apply Markdown formatting
  • A responsive design that hides the side-by-side preview when the view becomes too narrow to maintain a good user experience

Editor Keyboard Shortcuts

Shortcut (Windows / Linux) Shortcut (macOS) Action
Ctrl-’ Cmd-’ “toggleBlockquote”
Ctrl-B Cmd-B “toggleBold”
Ctrl-E Cmd-E “cleanBlock”
Ctrl-H Cmd-H “toggleHeadingSmaller”
Ctrl-I Cmd-I “toggleItalic”
Ctrl-K Cmd-K “drawLink”
Ctrl-L Cmd-L “toggleUnorderedList”
Ctrl-P Cmd-P “togglePreview”
Ctrl-Alt-C Cmd-Alt-C “toggleCodeBlock”
Ctrl-Alt-I Cmd-Alt-I “drawImage”
Ctrl-Alt-L Cmd-Alt-L “toggleOrderedList”
Shift-Ctrl-H Shift-Cmd-H “toggleHeadingBigger”

Demo Preview

The plugin also comes with a visual element you can place in your Bubble app that display the contents of the editor with the proper formatting you would see in side-by-side editor preview.

:bulb: Did you know?

The Bubble forums use Markdown and this post that you’re reading right now is written in the same syntax that Markdown Plus uses!

This plugin features Markdown styling the same as Github’s Markdown styling. In addition, the plugin features a resizable and responsive design. :grinning:

What’s next?

Going forward, my plan is to continue working on this plugin to create more value for you.

I do have my own ideas for how to continue building out functionality, but I want to ensure my efforts are aligned with what the Bubble community is needing and how this plugin can help solve your problems.

With that in mind, I would love to hear your thoughts, feedback, and suggestions.

If you have any questions, feel free to shoot me a message or reply in this thread below. :grin:

Check out the plugin :point_down:

Here’s the plugin page: Markdown Text Editor

Here’s a demo app: Markdown Text Editor Demo App

8 Likes

Great work!

IMHO, the benchmark for all markdown editors is the Ghost blog platform (https://ghost.org/): a side by side view of MK to HTML, inline controls and great keyboard shortcuts.

Thank you!

An editor of some sort is definitely planned and I appreciate you showing me the Ghost platform. I’ll definitely check it out :smile:

1 Like

Release 2.0.0 :star_struck:

Just released the latest version of this plugin!

Check out the new and improved demo app here: Markdown Editor demo app

Preview

Change log

  • Now includes a Markdown Editor, featuring:

    • Side-by-side preview with scroll syncing
    • Toolbar with commonly used formatting options
    • Keyboard shortcuts
    • Responsive design
  • Plugin name changed to reflect functionality and direction going forward

Editor Keyboard Shortcuts

Shortcut (Windows / Linux) Shortcut (macOS) Action
Ctrl-’ Cmd-’ “toggleBlockquote”
Ctrl-B Cmd-B “toggleBold”
Ctrl-E Cmd-E “cleanBlock”
Ctrl-H Cmd-H “toggleHeadingSmaller”
Ctrl-I Cmd-I “toggleItalic”
Ctrl-K Cmd-K “drawLink”
Ctrl-L Cmd-L “toggleUnorderedList”
Ctrl-P Cmd-P “togglePreview”
Ctrl-Alt-C Cmd-Alt-C “toggleCodeBlock”
Ctrl-Alt-I Cmd-Alt-I “drawImage”
Ctrl-Alt-L Cmd-Alt-L “toggleOrderedList”
Shift-Ctrl-H Shift-Cmd-H “toggleHeadingBigger”
2 Likes

04/22/2019 Update :star_struck:

Demo app: Markdown Text Editor demo app

  • Added a button to let you manually show/hide the side-by-side preview

  • Changed functionality of the auto-hiding of the side-by-side preview so that it can be set manually by the Bubble app creator. This provides much more flexibility to ensure the editor behaves how you’d want it to within your specific app and its use cases.

  • Added a new exposed state so you can fetch the editor contents converted into HTML. This lets you use the HTML output of the converted Markdown however you wish! More flexibility.

Side note: I’ve had a few people subscribe to the plugin but then unsubscribe shortly after. I’m not sure if they found that the functionality wasn’t what they were looking for, or something else. The lack of insight here makes it more challenging for me to ensure what I’m creating is valuable or solving a problem for the Bubble app creator.

As always, I’m always looking to work this plugin into the direction that most benefits the end users. Feel free to reach to me whenever! :grin:

Super cool plugin! But I can’t save the text as html… I think that’s why people unsubscribe… Would like to use this plugin but can’t use it if I can’t save the output of the editor.

And some extra fonts or custom fonts would be nice :slight_smile:

Also when activate side by side via workflow:

Hey @eddy! Thanks so much for bringing this to my attention… You’ve been the first to reach out about this!

I just released a new version of this plugin where the two issues you described should be fixed now. I ran some testing on my side to verify this.

If you decide to try the plugin again, let me know if everything is okay!

In regards to custom fonts, I definitely have plans to have the overall visuals of the text shown in the Markdown Editor to be customizable. I’ve been swamped with other things these days so I haven’t gotten around to it yet… I really appreciate the feedback!

Thanks @yla :slight_smile:

Will check it out!

Still the same bugs :wink:

:thinking: Hm, this is interesting!

Were you getting the exact same Can't find variable: easyMDE error? If so, your app might be (somehow) loading the plugin code of an old version.

easyMDE is referring to a variable in my code that I named, and in the fixed version, I’ve actually changed that variable name completely - So, if the issue still exists, it might just say Can't find variable: mde instead.

Also, the latest plugin version is 3.0.2 with my bug fixes.

Here’s a test environment I’ve been verifying the bugs and fixing them: https://markdown-plus.bubbleapps.io/version-test/test

Could you maybe provide a bit more context to how you’re using the plugin so I can try to reproduce the issues? Maybe @Bubble is possibly taking a bit of time to propagate out the new version?

Thanks for help and patience in this @eddy, I appreciate it!

@yla Once a new version of the plugin is published, then updating to that version in the app should reflect changes instantaneously

Hi @yla

Thanks for the plugin.

It’s throwing an error

The plugin Markdown Text Editor / element Markdown Editor threw the following error: ReferenceError: instance is not defined
at eval (eval at m.create_code (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/36c8d37224d694fcbf240c79607f42985a8b95ea299232a086ae4ee1942a743f/xfalse/x5:13:1927116), :3:7)
at n (https://dhtiece9044ep.cloudfront.net/package/run_debug_js/36c8d37224d694fcbf240c79607f42985a8b95ea299232a086ae4ee1942a743f/xfalse/x5:13:1951089) (please report this to the plugin author)

Hey @ambarlamedya. How are you using the plugin when the error is thrown? This way I can try to reproduce it on my end and attempt to fix it.

Thanks!

Good morning @yla

Markdown Editor initially hidden. I set it to appear when I press a button. It throws an error when it is displayed.

However, I don’t get this error when I use it on another page.

Thanks for the details :slight_smile: I wasn’t able to reproduce the issue, but I did find some code that might be causing your issue. I released the new version now, so you can try seeing if the issue is still there after the plugin update (Ensure plugin is on v3.0.3).

Though, I’m still curious why it’s only happening on this page :thinking: Are you doing anything with the Markdown Editor in a workflow as you make it visible from the button click?

1 Like

Thank you. Solved!

No. This button has only one workflow.

“When button is clicked show this group”

1 Like