🪲 Set highlighter language and level #6126
Conversation
boryanagoncharenko
changed the title
|
Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork). |
|
This pull request has been removed from the queue for the following reason: Pull request #6126 has been dequeued. The pull request rule doesn't match anymore. The following conditions don't match anymore:
You should look at the reason for the failure and decide if the pull request needs to be fixed or if you want to requeue it. If you want to requeue this pull request, you need to post a comment with the text: |
| @@ -210,8 +210,8 @@ export class HedyCodeMirrorEditor implements HedyEditor { | |||
| state: state | |||
| }); | |||
|
|
|||
| const levelStr = $(element).closest('[data-level]').attr('data-level'); | |||
| const lang = $(element).closest('[data-kwlang]').attr('data-kwlang') ?? 'en'; | |||
| const levelStr = $('[data-level]').attr('data-level'); | |||
There was a problem hiding this comment.
The old code tried to find the closest enclosing element that has a data-level attribute.
The new code finds any data-level attribute anywhere on the page, whether it has a relation to the editor or not.
Why did the old code not work?
There was a problem hiding this comment.
There is no data-level or data-kwlang on any element. This is why it did not work. I added the attributes to the editor but then ofc closest does not work. We could either put the attributes on an enclosing element indeed which is a bit weird or keep them in the editor and fetch them directly from the editor $('#editor').attr('data-*'). What was your intention?
There was a problem hiding this comment.
Putting the level and kwlang directly on the editor works for the main editor because we control the HTML for it, but doesn't work very well for example for all the syntax highlighted preview editors in running text, because those are <pre> tags that are generated from Markdown. So I wanted a place to put it where it's still in context, but not the editor itself, so it become "some enclosing <div>".
I'd like to keep the logic consistent between the read/write editor and the preview-only editors. That allows us to de-dupe this information wherever it makes sense (*).
I for sure though x.closest() would return x if it matched the selector, but perhaps it doesn't. The document seems to bear that out though, I recall looking this up:
https://api.jquery.com/closest/
(*) In general, I'd like to move to a future in which more data is stored in the HTML, via
data-*attributes in strategic locations, than passed via JavaScript toinitializeXxx()functions. The latter requires a very rigid initialization order that doesn't work very well with HTMX.
| @@ -15,7 +15,8 @@ | |||
| <!-- The actual editor --> | |||
| <div id="editor" data-cy="editor" style="background: #272822; font-size:0.95em; color: white; direction: {{ g.dir }};" lang="en" blurred='false' | |||
| {% if editor_readonly %}data-readonly="true"{% endif %} | |||
| class="w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height"></div> | |||
| class="w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height" | |||
| data-kwlang="{{ current_language().lang }}" data-level="{{ level }}"></div> | |||
There was a problem hiding this comment.
An enclosing scope should be good enough, and I think it should be on there already, no?
| @@ -25,7 +25,8 @@ | |||
| <!-- The actual editor --> | |||
| <div id="editor" style="background: #272822; font-size:0.95em; color: white; direction: {{ g.dir }};" lang="en" blurred='false' | |||
| {% if editor_readonly %}data-readonly="true"{% endif %} | |||
| class="w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height"></div> | |||
| class="w-full flex-1 text-lg rounded min-h-0 overflow-hidden fixed-editor-height" | |||
| data-kwlang="{{ current_language().lang }}" data-level="{{ level }}"></div> | |||
There was a problem hiding this comment.
Same here, if we can put this attribute on a <div> that contains all editors, it should work already?
PR #6085 makes uses of
data-levelanddata-kwlangbut these are never set. As a result, the language of the highlighter always defaults to English regardless of the current language. This PR makes some minimal changes to address the issue.Fixes #6112
How to test
As an anonymous user go to /hedy and change the language to Turkish (or any other language). In the editor paste
yazdır testand check that the first word is highlighted as a command. Do the same check for the /tryit page and a logged in user.