Live previewing make editor stuck

[m11y]

Description

When I opened live previewing and typed in editor, the editor got stuck for a few seconds, however,
when live previewing is closed, the editor runs smoothly.

• Atom version:

    Atom    : 1.10.2
    Electron: 0.37.8
    Chrome  : 49.0.2623.75
    Node    : 5.10.0

• OS: Mac OSX 10.11.6
• asciidoc-preview version: 2.6.0
• language-asciidoc version: 1.5.1

Activity Monitor shows fontd process at high cpu usage state:

[ldez]

Hello,

Have you trying the same thing with the Markdown preview ?

[m11y]

Yes, Markdown preview is very smooth. But, recently, after I upgrade atom to 1.11.2, it seems that Asciidockor preview back to normal.

[ldez]

We can close this issue ?

[Foadsf]

Same issue here. I'm developing a small library prototype which you can see here. However Atom is stuck rendering it:

[ggrossetie]

@Foadsf Could you please open the devtools and look for errors in the console ?

[Foadsf]

@Mogztter Could you pleas elaborate with the instructions? My code is here BTW if you want to try yourself.

[ggrossetie]

I can't find any documentation on Atom but Ctrl+Alt+I should open the developer tools with console.
On macOS, I think it's Cmd+Opt+I.

https://flight-manual.atom.io/hacking-atom/sections/debugging/#diagnose-runtime-performance

[Foadsf]

@Mogztter Nothing shows up with that keyboard shortcut. from the menu bar maybe?

[Foadsf]

@Mogztter aha ctrl+shift + I on windows link

[Foadsf]

Here is the error:

Uncaught (in promise) TypeError: grammar.tokenizeLines is not a function
    at highlightSync (highlights.coffee:44)
    at tokenizeCodeBlocks (renderer.coffee:145)
    at renderer.coffee:23
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188)

[ggrossetie]

I think it's related to #279 (comment)
And quoting myself, we definitely need to add this issue in the README: #279 (comment)

If I have some time tonight I will submit a pull request 😉

@Foadsf Could you please confirm that disabling tree-sitter parsers, solve your issue ?

[Foadsf]

@Mogztter I have no idea how I should disable the "tree-sitter parsers" but I suppose it is something discuses on those links. I will do this tonight too. Anyways my code is here for testing. I appreciate your kind support.

[ggrossetie]

have no idea how I should disable the "tree-sitter parsers" but I suppose it is something discuses on those links.

Not really, here's a detailed guide:

1. Open the "Settings View"

2. In "Core" tab (ie. the default tab), scroll to the bottom:

3. Uncheck "Use Tree Sitter Parsers"

I appreciate your kind support.

You're welcome, I'm glad to help 🤗

[Foadsf]

@Mogztter It does render now, however the collapsible section oesn't work and the code block inside it doesn't have syntax highlighting!

P.S. in fact none of the syntax highlighting works, and it was one of the main reasons I opted Atom against vscode as I have explained here.

[Foadsf]

@Mogztter I checked on a different computer. Now the syntax highlighting works upon disabling tree-sitter parsers , however the collapsible part doesn't. The collapsible part works on vscode FYI.

[mojavelinux]

however the collapsible part doesn't. The collapsible part works on vscode FYI.

I don't think collapsible blocks is a feature of this plugin.

[Foadsf]

isn't the rendering engine of this plugin and vscode one the same?

[mojavelinux]

Yes and no. The preview window uses Asciidoctor.js. But the editor window uses a very different technology stack.

[Foadsf]

the editors window is great in both atom and vscode. No issues there. foldable / collapsible part I have implementation using HTML tags doesn't work in the preview section of Atom.

[mojavelinux]

I'm afraid I don't know what you are talking about. Is this a custom extension you've added to the converted page? Could you show a screenshot or code?

[Foadsf]

here my code. please note the part with

////
<details>
  <summary>Click to see the source code</summary>
////


collapsible part

////
</details>
////

of course these need to be between +++s the code on the gist is not up to date unfortunately. I will push today. consider this working example for the moment please.

[mojavelinux]

This could be a limitation of the HTML viewer in Atom. Have you tried the same thing in the Markdown preview?

Btw, I strongly recommend against putting HTML directly in your AsciiDoc file. It would be much better if you created a custom block extension (or custom converter). It looks like you are attempting to implement asciidoctor/asciidoctor#1699.

[Foadsf]

Markdown :

Code:

/*

This is the markdown **text** 

used for documentation

<details>
  <summary>Click to see the source code</summary>

``` scilab 
*/
This is the
  actual code
  which will 
be executed
/*
```

</details>

<!--- */ // -->

GitHub:

/*

This is the markdown text

used for documentation

Click to see the source code

*/
This is the
  actual code
  which will 
be executed
/*

Atom:

VSCode:

[Foadsf]

AsciiDoc:

Code:

////
/*
////
This is the markdown **text** 

used for documentation

+++ <details><summary> +++
Click to see the source code
+++ </summary><div> +++

[source,scilab]
....
*/
This is the
  actual code
  which will 
be executed
/*
....

+++ </div></details> +++
////
*/
////

Github

/*
This is the markdown text

used for documentation

+++

+++
Click to see the source code
+++

+++

[source,scilab]
....
/
This is the
actual code
which will
be executed
/
....

+++

+++
////
*/
////

Sadly Github doesn't render AsciiDoc here in the issue section properly. To see the result check this Gist.

Atom:

VSCode:

FireFox:

[Foadsf]

A comparison between different options so far:

	Color layout	Syntax highlighting	Collapsible	Include	Other file extensions	Relevant discussion
Atom	✔️	✔️	❌	✔️	❌	here
VSCode	❌	❌	✔️	✔️	❌	here
Browser	❓✔️	❌	❓✔️	✔️	❓❌	here

[Foadsf]

Dear @mojavelinux and @Mogztter should I open a new issue for the Atom live preview not rendering the summary element properly? It doesn't seem to be relevant here.

[mojavelinux]

The stylesheet provided by Asciidoctor Ruby will carry over to the Atom live preview once Asciidoctor.js is upgraded (the stylesheet is part of the upgrade).

[Foadsf]

@Mogztter and @mojavelinux the Atom plugin just got updated and now the live preview syntax highlighting doesn't work anymore. Should I open a new issue for this or it is relevant to any of other issues we already have and I should just wait for the new PRs?

[ldez]

@Foadsf could you open a new issue?