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

in-note-text-tagging: HTML tag visible in preview when # used as tag word marker #131

Closed
marcusyoung opened this issue Jul 10, 2021 · 7 comments

Comments

@marcusyoung
Copy link

marcusyoung commented Jul 10, 2021

@Maboroshy

This issue occurs when selecting # as the tag word marker.

Expected behaviour

No tag to be visible in the note preview pane.

Actual behaviour

Part of an HTML tag is visible in the preview pane:

class="preview">

2021-07-10_12-30-54

Seems to be related to #101 as the issue is also resolved when the colour setting for tag highlighting is left blank.

@marcusyoung marcusyoung changed the title HTML tag visible in preview when # used as tag word marker in-note-text-tagging: HTML tag visible in preview when # used as tag word marker Jul 10, 2021
@pbek
Copy link
Member

pbek commented Jul 10, 2021

Something like #76?

@Maboroshy
Copy link
Member

I'll look into this.

Maboroshy added a commit that referenced this issue Jul 14, 2021
@Maboroshy
Copy link
Member

I've updated the script. Please, test if it fixes the issue.

@marcusyoung
Copy link
Author

marcusyoung commented Jul 14, 2021

The issue with the stray tag has been fixed.

However, it has now caused very odd behaviour. It seems that all single quotation marks and forward slashes in code blocks are replaced by ASCII code in the selected preview tag colour (e.g. the default purple) preceded by an & sign. Here is an example.

What code should look like:
correct

What it now looks like in preview:
wrong

@Maboroshy
Copy link
Member

Maboroshy commented Jul 15, 2021

Weird. I can't reproduce your case. I've typed in your text but it renders correctly.

The issue was that I've used post-render hook to put in tag highlighting into hmtl, but it messed with other html tags made by rendering. That caused the issue. For the fix I switched to pre-render hook, so the script puts html tags into markdown text. This hook wasn't available when I've first implemented the highlighting. The pre-render hook should not affect markdown rendering in any way. So that's weird.

Could you post your script setting, a line of markdown that is affected by this and the html the app makes of it (you can right click on the preview pane and export it).

For now it looks like I'd better drop tags highlighting. Maybe make it off by default and put some warnings to the description. Looks like there's no easy way to make it safe. Only parsing whole html DOM will root out all corner cases.

@marcusyoung
Copy link
Author

marcusyoung commented Jul 19, 2021

Requested information below.

Script settings:

2021-07-19_12-35-40

Markdown

```sql
SELECT test from test where path = `/test/path`
```

HTML

<html><head><style>h1 { margin: 5px 0 20px 0; }h2, h3 { margin: 10px 0 15px 0; }table {border-spacing: 0; border-style: solid; border-width: 1px; border-collapse: collapse; margin-top: 0.5em;}th, td {padding: 2px 5px;}a { color: #FF9137; text-decoration: none; } pre, code { font-family: "Fira Code"; font-weight: normal;  }pre { display: block; background-color: #f1f1f1; white-space: pre-wrap } code { padding: 3px; overflow: auto; line-height: 1.45em; background-color: #f1f1f1; border-radius: 5px; color: #000000; } .code-comment { color: #75715E; font-style: italic;} .code-string { color: #E6DB74;} .code-literal { color: #AE81FF;} .code-type { color: #66D9EF;} .code-builtin { color: #A6E22E;} .code-keyword { color: #F92672;} .code-other { color: #F92672;}  code {background-color: transparent;}body {font-family: Tahoma; font-weight: normal; font-size: 10pt; color: #000000; background-color: #ffffff}h1 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 20pt; color: #00316e; background-color: #f1f1f4}h2 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 16pt; color: #003a82; background-color: #f1f1f4}h3 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 13pt; color: #004396; background-color: #f1f1f4}h4 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 10pt; color: #0051b4; background-color: #f1f1f4}h5 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 9pt; color: #0055be; background-color: #f1f1f4}h6 {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 9pt; color: #0055be; background-color: #f1f1f4}a {font-family: Tahoma; font-weight: normal; font-size: 10pt; color: #fc7e00; background-color: #fff8ef}b, strong {font-family: Tahoma; font-weight: normal; font-weight: bold; font-size: 10pt; color: #00428a;}i, em {font-family: Tahoma; font-weight: normal; font-style: italic; font-size: 10pt; color: #0057ae;}code, pre > code, pre {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #006c00; background-color: #edfced}p > code, li > code {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #006c00; background-color: #edfced}.code-keyword {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #f92672; background-color: #edfced}.code-string {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #3ba23f; background-color: #edfced}.code-comment {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #908b74; background-color: #edfced}.code-type {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #636def; background-color: #edfced}.code-other {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #b57c50; background-color: #edfced}.code-literal {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #ae81ff; background-color: #edfced}.code-builtin {font-family: "Fira Code"; font-weight: normal; font-size: 10pt; color: #f92672; background-color: #edfced}mark {background-color:#FFFF00;}</style></head><body class="preview"><pre><code class="language-sql">SELECT test from test where path = &<b><font color="purple">96</font></b>;&<b><font color="purple">47</font></b>;test&<b><font color="purple">47</font></b>;path&<b><font color="purple">96</font></b>;</code></pre>
</body></html>

@Maboroshy
Copy link
Member

I have not found a fix for this. As of now the script should not mess with html, only prerendered markdown. So it's some kind of clash between what the script does and what renderer does. Even worse, the html injection I've used for highlighting messes tags in the code blocks. And that cannot be fixed at all.

I've removed tag highlighting feature from the script. The new version is in the repo.

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

No branches or pull requests

3 participants