đŸ”„ 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

12 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 @eren. 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.

markdown

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

Hi there @yla, thanks for this plugin.

Was sorely needed for me, as I’m pulling data in from an Airtable rich-text field (uses Markdown).

Paid and installed and works pretty nice, minus one glaring need. Styling? I can’t change the fonts or size to anything that matches my site. I hope I’m missing something but it seems from this thread I might not be. How can anyone possibly use this on a custom site with four font options and no other styling options like size? Is there a reason this doesn’t just have the same options that a normal text box would? Apply a custom style or manual settings?

To be clear, I’m referring to the viewer (not the editor). Personally don’t need the editor (yet), would just like to apply styling at the viewer.

Appreciate some help here, would really like to pay long term for this.

Cheers,
Al

Hey @ALB! Thanks for checking out the plugin and also taking the time to reach out.

Custom styling was something that I had on the map for future updates. I’m sorry for the inconvenience that the functionality to customize styling is not available.

Unfortunately, I’ve had to shift a lot of my time + focus onto other priorities at the moment, so I can’t say when I’ll get around to implementing that feature.

However, there is a way to add styling changes, although it’s a bit more complex. You can use specify custom CSS through custom header code located in Settings, under the SEO / metatags tab where it says “Script/meta tags in header”. In that text box, you can specify something like:

.markdown-body h1 {
  color: blue;
}

to customize all h1 headers to have the text color blue. Essentially, as long as any HTML tag underneath markdown-body is selected, you can modify the style. This definitely requires some CSS knowledge, though it’s not too bad to pick up if necessary.

I understand this isn’t the ideal answer you were looking for, but hopefully, this provides a solution of some kind that could get you the result you seek.

Hey @yla, definitely not ideal but workable. Problem is, it’s not working. /smile

Tried your variation, with and without the h1, replaced with p. Nothing’s changing anything.

Thoughts?

I believe you need to wrap any CSS styles with <style></style>. So, for your example:

<style>
.markdown-body p {
  color: blue;
}
</style>