Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't insert text where the cursor is #138

Closed
ungureanustefan opened this issue Oct 23, 2023 · 6 comments
Closed

Can't insert text where the cursor is #138

ungureanustefan opened this issue Oct 23, 2023 · 6 comments
Labels

Comments

@ungureanustefan
Copy link

Hi,

I've got a few issues and I'm not sure what I'm doing wrong:

  1. When I insert a code block, I cannot delete it. Sometimes it can be deleted, but most of the time I can't. It looks like if I press the backspace, it's deleting a white space and then loses focus.
  2. I've got a custom component that is supposed to add tags wherever the cursor is. It works fine with plain text, but once I add a code block, or table, it behave weirdly; it doesn't insert the tag where I click inside the block.
  3. If I inserted a code block and I click above it to add a tag, if there's no text above the code block, the page breaks and returns the following error:

Uncaught Error: No CodeBlockEditor registered for language=null meta=null
at CodeBlockEditorContainer (CodeBlockNode.js:136:11)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at beginWork$1 (react-dom.development.js:27426:14)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopSync (react-dom.development.js:26466:5)
at renderRootSync (react-dom.development.js:26434:7)
at recoverFromConcurrentError (react-dom.development.js:25850:20)
at performSyncWorkOnRoot (react-dom.development.js:26096:20)

@petyosi
Copy link
Contributor

petyosi commented Oct 23, 2023

Hey, to help you further, please reproduce the problems you experience in a codesandbox, and give me some steps to reproduce. Chances are, you've encountered some bugs, but I do need to reproduce them on my side to resolve them.

Thank you,

@ungureanustefan
Copy link
Author

ungureanustefan commented Oct 24, 2023

Hi @petyosi , Thank you very much for the prompt response. I might not be doing something right, but I'll try to be as explicit as possible and I'll also leave some comments in the code.

What I'm trying to achieve is that I want to have my own dropdown button with values that represents "tags" and if I click anywhere in the editor and then select the tag, I expect the tag to be inserted where the cursor was. Also, I would like to be able to delete the code blocks after inserting them and saving them into the DB, but for whatever reason, sometimes it works, and sometimes it doesn't; but most of the time it doesn't.

The codesandbox is this: https://codesandbox.io/p/sandbox/stoic-napier-232h24?file=%2Fsrc%2FApp.css%3A3%2C21

The code is inside App.tsx

The issues are the following:

  1. If I add a code block and I want to add a “tag” from the "Tags" button, the page breaks.

  2. If I add a "table" or an "admonition" and I try to add a “tag”, it behaves weirdly.

  3. If I add a code block and I save it into the DB, next time when I refresh the page I can’t delete the code block.

This is how it's being done with regards to the code block -
image

And this is what happens further.
a) Sent from the editor to the DB -
image

b) Received in the db -
image

c) Retrieved in the front end -
image

It doesn't look different at all, but after this, I cannot delete the code block anymore. I managed to reproduce the error on the live demo on the editor's documentation page as well, but I'm not sure what caused it, because I can't do that anymore.

UPDATE - I was able to reproduce it on the editor's documentation page, inside the live demo.
Repro steps:
1 - Select entire text and delete it
2 - add a code block
3 - press the down arrow 4 times and then try to delete it by pressing the backspace

Thanks again.

@petyosi
Copy link
Contributor

petyosi commented Oct 24, 2023

Thanks for the reproduction instructions. I've traced down the problem to an erratic ref not being correctly passed by the code block editor. Will look for a solution, probably a button of some sort. It's a known issue with code mirror, unfortunately.

As per the sandbox - I'm afraid that the direction you've taken is not going to work out. The proper way to extend the editor is with plugins that interact with the lexical API, including its selection mechanisms and node insertion/manipulation. I understand that this takes a bit more of an investment, as you need to understand how the plugins work (looking at their source code is actually not so scary), and you need to learn a bit of Lexical if you're not familiar with it, however, the model is robust and solves quite a few problems.

@ungureanustefan
Copy link
Author

Hi @petyosi ,

Thank you for your reply.

I'll choose a different approach for the "Tags" then.

However, I've found two more bugs in the documentation live demo:

  1. Click in the middle of a text and insert a code block. Click on "Diff mode" and then click on "Rich text". The page breaks.
  2. Click on an empty space, insert a code block, click underneath it and add some text. Click on "Diff mode" and then click on "Rich text" again. The code block extends and covers a lot of text underneath.

@petyosi
Copy link
Contributor

petyosi commented Oct 24, 2023

Thanks for reporting those! I just pushed a fix for it.

@github-actions
Copy link

🎉 This issue has been resolved in version 1.4.4 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants