Hey 👋🏽. I really have a question. So I'm building a markdown editor and I have buttons that can add text

Question

What I want to ask is that how can I place the cursor between say the ** which makes text bold programmatically? And for the others too

Answer 1

Why you want to move the cursor between the '**' ?

There can be many markers in a markdown text. Placing cursor between markers? I think you need to explain more on what it is you intend to do ...

Answer 2

Majay
What are you using to display & edit the text in your project a text input or textarea? I think it's an intriguing task either way, cause it involves replacing selected text. If I get what you meant right...

Answer 3

https://code.sololearn.com/Wif6M8eAmlr6/?ref=app
https://code.sololearn.com/WEW1j1rY1nbl/?ref=app
https://code.sololearn.com/Wnk7uDLZbmW3/?ref=app

Answer 4

You can have something like this:
Probably i didn't understand placement of **
I always check markdown documentation when I need it.

<div>
**
<input id="select"/>
**
</div>

Then you need to add focus on this input, and it will move cursor, exualy it will select input for user to start typing input. If this is what you are trying to do.

If you are doing free code camp project check their code from codepen, they used some helper library what convert full markdown text to html output. So user type marked text in textarea for example and full text is converted to html code using library, then you can embed this to some "screen/output".
There is also full tutorial with step by step guide how to make it using this library.

Answer 5

Have you used Hashnode's editor before? If you have I'm sure you've noticed how when you click the button that adds the double asterisk to the text field, it places the cursor in-between the asterisk. That is what I'm trying to replicate using JavaScript

Answer 6

Calviղ appreciate for the code but you didn't address my question. Let me try and break it down as simple as possible. I'm building a markdown editor and I have added buttons to help writing the markdown faster. For example, among the buttons I added, there's one with the italics icon. When that button is clicked, four asterisk should populate the text area. And place the cursor within those asterisk.