editor: add code block language to local storage #7086
Conversation
| const cachedLanguage = | ||
| config.get<(typeof Languages)[number]>("codeBlockLanguage"); | ||
|
|
||
| useEffect(() => { | ||
| if (languageDefinition) { | ||
| config.set("codeBlockLanguage", languageDefinition); | ||
| return; | ||
| } | ||
|
|
||
| if (!languageDefinition && cachedLanguage && cachedLanguage.filename) { | ||
| updateAttributes( | ||
| { language: cachedLanguage.filename }, | ||
| { addToHistory: false, preventUpdate: false } | ||
| ); | ||
| } | ||
| }, []); |
There was a problem hiding this comment.
We shouldn't do this here. This will run for all codeblocks even though we just want to set the language once when a new codeblock is added. It'll also cause a flash where a codeblock is plaintext and then switches to the last used language.
Instead let's do this in code-block.ts in the parseHTML function of the language attribute. Not sure if it'll work or not though so give it a try.
There was a problem hiding this comment.
Unfortunately, useEffect is called for all codeblocks when the page loads. Also, I wasn't able to notice a flash when codeblock is plaintext and then switches to the local storage language. But, there is a minor bug in this PR: user won't ever be able to go back to plaintext codeblock until they delete the local storage entry. I think we should add plaintext as a language in languages.json. What do you think?
Instead let's do this in code-block.ts in the parseHTML function of the language attribute. Not sure if it'll work or not though so give it a try.
I tried in parseHTML of the language attribute. The issue here is the parseHTML doesn't get called when a new code block is added, so we can't save the code block language if user pasted a code block from VSCode for example. I'll continue trying with parseHTML.
There was a problem hiding this comment.
Thanks for the comment, I realized we don't need the useEffect at all. Please review the latest changes.
(plus I've added Plaintext in languages, let me know if we should keep this or else I can revert)
01zulfi
force-pushed
the
chore/code-block-changes
branch
2 times, most recently
from
935bfab to
064a6b3
Compare
thecodrr
left a comment
thecodrr
left a comment
There was a problem hiding this comment.
I don't think this is working. It changes the language label in the code block status bar but no highlighting actually happens.
01zulfi
force-pushed
the
chore/code-block-changes
branch
from
064a6b3 to
bcb19ac
Compare
| const cachedLanguage = | ||
| config.get<(typeof Languages)[number]>("codeBlockLanguage"); | ||
| if (!languageDefinition && cachedLanguage && cachedLanguage.filename) { | ||
| this.editor.commands.updateAttributes(this.type, { | ||
| language: cachedLanguage.filename | ||
| }); | ||
| } |
There was a problem hiding this comment.
Thanks again for the thorough review!
I've added the language update from local storage logic here and it works. Please let me know if this is okay. Other place this exact logic works is in the useEffect inside the code block component.
There was a problem hiding this comment.
I just checked again and we can reuse defaultLanguage in the Highlighter to support this. It can be a function since the value can change.
However, the default language doesn't get stored in the code block attributes which you'll need to add support for in appendTransaction.
There was a problem hiding this comment.
Done, please review
01zulfi
force-pushed
the
chore/code-block-changes
branch
2 times, most recently
from
dadcee1 to
016f094
Compare
| attrs: node.attrs, | ||
| defaultLanguage: defaultLanguage() | ||
| }); | ||
| attributes.language = node.attrs.language ?? defaultLanguage(); |
There was a problem hiding this comment.
This works but I think it'll cause issues with old code blocks (added before this change) as they'll get their language changed to the cached language as soon as the user makes a selection or a change in the document.
We should find a way to only run this once when the code block is added in the document. I think we can compare oldState and newState to find that out.
01zulfi
force-pushed
the
chore/code-block-changes
branch
from
016f094 to
73d61c8
Compare
01zulfi
force-pushed
the
chore/code-block-changes
branch
from
0fe67f7 to
74ad99e
Compare
* also add plaintext language option * also fix spacing issues in language selector list Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
01zulfi
force-pushed
the
chore/code-block-changes
branch
from
74ad99e to
ed933c0
Compare
2 participants
Closes #7032 #6932