Export: uses markdown preview dom. Supports diagrams

[shmolf]

Description

Changed from re-rendering the Markdown (which doesn't render the SVGs from Mermaid), to referencing the Preview DOM that's already rendered, thereby incorporating the already produced SVGs.

Issue fixed

• Exported web page shows flowchart markup instead of rendered flowchart #2648
• Export diagrams in PDF and HTML #3229
• Render equations in PDF and HTML exports #3202
• Exported PDF content missing (except codes in blocks) #3349

TestText.txt
TestPDF.pdf

HTML and MD files are not supported by Github, so am not able to attach.

Type of changes

• 🔘 Bug fix (Change that fixed an issue)
• ⚪ Breaking change (Change that can cause existing functionality to change)
• 🔘 Improvement (Change that improves the code. Maybe performance or development improvement)
• ⚪ Feature (Change that adds new functionality)
• ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

• 🔘 My code follows the project code style
• ⚪ I have written test for my code and it has been tested
• 🔘 All existing tests have been passed
• 🔘 I have attached a screenshot/video to visualize my change if possible

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #3621: to reward https://github.com/BoostIO/Boostnote/pull/3317

---

[Flexo013]

Just wondering if this helps with issue #3202 as well?

[shmolf]

I tried the following:

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

Neither one turned out well.

MathPDF.pdf

MathTEXT.txt

[shmolf]

@Flexo013 I've added a new commit to allow for properly showing Latex.

Sample PDF from branch
example.pdf

[shmolf]

@Flexo013 Does this need any more changes before review?

[ZeroX-DG]

This one looks ok to me. Will test this when I get home.

[shmolf]

@ZeroX-DG, did you encounter any issues?

[ZeroX-DG]

Somehow when I export to pdf the latex text still disappear. I'm on Linux Mint.

[ZeroX-DG]

That's strange, I tried to include the latex font (it was missing when exported) then the pdf export start working again. Then I remove the font completely and it still work. Does it related to cache or something?

[shmolf]

Possibly.

I'll setup a Linux VM, and test it out

[ZeroX-DG]

Confirm it's a cache issue. When I tried to clear all application data, the bug appears again. Solution for this is to include the katex font when we export the pdf.

[Flexo013]

@shmolf Could you apply the fix that @ZeroX-DG mentioned above? That way we can include this feature as part of the next release.

[shmolf]

Sorry for the delay. Been racking my brain trying to think of a simpler solution but I think the real solution for the Katex font requires some significant code.

Issue layout:

• HTML is grabbed for the export
• and passed to exportAsDocument
• that'll pass the html to exportNote, which passes it to getAbsolutePathsOfAttachmentsInContent

All normal. All CSS references are properly exported, including the katex.css.
However, the katex.css itself is referencing the font families, which aren't ever handled by the export process.

/* stylelint-disable font-family-no-missing-generic-family-keyword */
@font-face {
  font-family: 'KaTeX_AMS';
  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

Other exporters, like the PDF, locally render the HTML, will pull any sub-referenced assets like the font files.

Solution: I think a new ticket should be created to parse through all sub-references to load the assets for the export. I don't know how/which node modules might carry a CSS file that's importing another CSS file, that may be importing yet another CSS file.

And I can't seem to get webcontents' savePage to work either. It works, but doesn't include the fonts.

  handleSaveAsHtml () {
    this.exportAsDocument('html', (noteContent, exportTasks, targetDir) => {
      const browser = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false, javascript: false}})
      browser.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
      browser.webContents.on('did-finish-load', () => {
        browser.webContents.savePage(targetDir, 'HTMLComplete', () => {
          browser.destroy()
        })
      })
    })
  }

[shmolf]

I propose removing the Katex issues from the Issue fixed list, and continuing to merge this in for the Diagram's sake.
And trying to resolve Katex fonts separately.

[ZeroX-DG]

@shmolf I agree to separate the katex problem into a separate PR. I think the fix is just exporting the fonts to css/fonts/ folder in the same directory of the exported site (try export HTML and check console). But there maybe more to it.

[facorazza]

@shmolf I agree to separate the katex problem into a separate PR. I think the fix is just exporting the fonts to css/fonts/ folder in the same directory of the exported site (try export HTML and check console). But there maybe more to it.

Where can I find the fonts dir?

[ZeroX-DG]

@Imperator26 When exporting a note, Boostnote will export CSS to a folder called css. Now you need to export the fonts to the fonts folder inside of the css folder and it should fix the problem

[facorazza]

@Imperator26 When exporting a note, Boostnote will export CSS to a folder called css. Now you need to export the fonts to the fonts folder inside of the css folder and it should fix the problem

Where can I find the fonts folder?

[ZeroX-DG]

@Imperator26 you should support Boostnote to create it, because Boostnote currently doesn't export it automatically.

[shmolf]

New issue for the Font Export