Better editor#135

I would like a more comprehensive editor a bit more like Ghost’s

I like the Ghost editor, but for Bear I think something similar to Micro.blog (see screenshot) would be more in line with the “bear necessities” approach.

Yes, an improved editor like the one in Micro.blog would be perfect.

Especially for those not accustomed to using Markdown, or text formatting in general.

…and making that editor optional to keep things as lean as possible for others.

(Because writing site code should be done with external software anyways if you’re doing more than simple bloggng.)

…as long as no markdown is written, everything will look exactly the same as now.

I was thinking about loading times and runtime performance of the site. More Js is more data to transfer and tends to be more resource - intensive (I know we’re talking very little amounts here - but they do matter to some.)

So Bear isn’t going to be getting a built-in JS real-time editor. However I’ve recently added the ability to set some editor elements on the dashboard.

If you go to Settings / Advanced settings there’s a Custom dashboard footer content field. You can paste the follwing to add EasyMDE to your editors which will give you the markdown editor you’re after. Just note that the preview will not be correct since it uses a different renderer to Bear.

<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>new EasyMDE({element: document.getElementById('body_content')});</script>

Now located at https://bearblog.dev/dashboard/customise/

Would it be possible to install Lexical or similar editors of choice by applying the same logic?
https://editorjs.io/
https://playground.lexical.dev/ < this one is interesting, has plenty of options
https://www.npmjs.com/package/lexical
https://tiptap.dev/
https://github.com/ueberdosis/tiptap

I can’t seem to get any of them to work. In order for an external editor library to work, it needs to be available via CDN, and also needs to be able to transpose on top of an existing textarea. That’s why EasyMDE works.

The closest I could get to working here was Lexical, but it requires a div rather than a textarea. It is possible to write JS that hides the textarea and shows the div with Lexical, then on each keystroke copy the content over, but that just seems overkill to me.