Maintaining Cursor Position at the End of Line After Using .setMarkdown

[katefadeeva]

I use .setMarkdown, but after using it, the cursor always jumps to the beginning. Could you please tell me how to make the cursor stay at the end of the line after applying .setMarkdown?

[petyosi]

Did you try calling the focus() method afterwards? it has options for the selection location.

[katefadeeva]

Did you try calling the focus() method afterwards? it has options for the selection location.

Yes, I've tried the .focus() function, both inside onChange and through useEffect. I'm trying to solve the issue of limiting the number of characters for input. I was able to limit it, but when I use .setMarkdown inside onChange, it throws me back to the beginning of the line, but I need the cursor to stay in place.

[github-actions[bot]]

:tada: This issue has been resolved in version 2.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[petyosi]

I see. What you want to do makes sense, but doing it through setMarkdown is not the way to go. I shipped a maxLengthPlugin in the latest version, check it out.

[katefadeeva]

I see. What you want to do makes sense, but doing it through setMarkdown is not the way to go. I shipped a maxLengthPlugin in the latest version, check it out.

Can you please advise if it's possible to add getTextContentSize (used in the plugin) to the Interface: MDXEditorMethods (besides focus, getMarkdown, insertMarkdown, setMarkdown)?

[petyosi]

There's no point in doing that .The Lexical API is quite rich, and there's no point in trying to re-wrap it to the editor instance. You can use the MDXEditor plugin interface design and its inner utilities to access the lexical editor instance and use practically all of the API available.

[katefadeeva]

There's no point in doing that .The Lexical API is quite rich, and there's no point in trying to re-wrap it to the editor instance. You can use the MDXEditor plugin interface design and its inner utilities to access the lexical editor instance and use practically all of the API available.

If you want to display a counter for available characters, how can you do that?

[petyosi]

I don't have a ready made recipe for that, I'm afraid. Take a look at the source code of the plugin I published, it should be fairly easy to extract the count from there. If you have more concrete questions about how to do something, let me know.

[katefadeeva]

I don't have a ready made recipe for that, I'm afraid. Take a look at the source code of the plugin I published, it should be fairly easy to extract the count from there. If you have more concrete questions about how to do something, let me know.

Can you please tell me the formula you use for character truncation? I can't find it in your code. I would be very grateful for the help; I want to display the remaining available number of characters to the user, but all my functions calculate it differently than yours. Thank you in advance for your response :)

[petyosi]

It's this part over here? https://github.com/mdx-editor/editor/blob/749e5596295a336938c987a6ebcb73947027373b/src/plugins/maxlength/index.ts#L27-L28

Notice that I just adapted some of the sample code from Lexical.

[katefadeeva]

Notice that I just adapted some of the sample code from Lexical.

When I get textContent?.length, the number of characters doesn't match up. Line breaks are not accounted for in textContent, but even after adding the number of line breaks, the value still doesn't match by 3 characters. Here is my component:

<div ref={editorContainerRef}>
      <StyledMDXEditor
          ref={editorRef}
          markdown={text}
          contentEditableClassName="content"
          plugins={pluginsEditor()}
          autoFocus={{defaultSelection: 'rootEnd', preventScroll: true}}
          onChange={(changedMarkdown) => {
              changeText(
                  changedMarkdown.length === 0 || !changedMarkdown
                      ? ''
                      : changedMarkdown,
              );
          }} />
</div>

I get the number of characters using the formula:

editorContainerRef.current?.firstElementChild?.children[1].firstElementChild?.textContent?.length + (text.split('\n').length - 1)

What am I doing wrong?))