Export note with local images #1306

nlopin · 2017-12-17T18:41:09Z

Looks through the note and searches for local images. Copies them to ‘images’ folder in the export path and replaces affected links.

#1261

Looks through the note and searches for local images. Copies them to ‘images’ folder in the export path and replaces affected links. BoostIO#1261

BoostnoteBot · 2017-12-17T18:41:09Z

Be sure to be changed browser/main/Detail/SnippetNoteDetail.js.

nlopin · 2017-12-27T10:58:28Z

@kazup01 any news?

kazup01 · 2017-12-28T01:36:48Z

@nlopin Thanks for your support! We will review it at sometime soon.
Thank you for waiting :)

kazup01 · 2018-01-04T11:36:57Z

Sorry for the long absence. Could you fix some conflicts?

nlopin · 2018-01-05T20:52:29Z

Sure

nlopin · 2018-01-06T22:55:17Z

@kazup01 it will be an issue with html export (#1256). There is a code to receive an HTML for export:

this.exportAsDocument('html', (value) => {
      return this.refs.root.contentWindow.document.documentElement.outerHTML
})

As you can see, the whole HTML of the preview window is fetched and exported then. But, it contains relative links to local styles and fonts. For example, all of those styles will be lost after user copy the exported HTML to another computer:

<link rel="stylesheet" href="file:///Users/nlopin/Workspace/Boostnote/node_modules/katex/dist/katex.min.css">
<link rel="stylesheet" href="file:///Users/nlopin/Workspace/Boostnote/node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" id="codeTheme" href="file:///Users/nlopin/Workspace/Boostnote/node_modules/codemirror/theme/dracula.css">

It is not a good idea to export content like this because it does not provide consistent view on different machines.

We do have markdown-it plugin and I want to try it for rendering an HTML output. But we need to decide what to do with our custom styles:

Should we keep them and include to the export, or ignore them?
Custom font "Lato". It's impossible to embed it into the page. Any ideas what can we do here?

Rokt33r · 2018-01-13T09:10:38Z

@nlopin

I think we can insert style into <head> element of html file.
We can't. The user must install their custom font to each machine.
(I think we should provide a proper instruction, how to install the default font, Lato.)

nlopin · 2018-01-13T21:44:21Z

@Rokt33r thanks for your response.

Looks like you didn't catch the issue in the first question. The question is not about where should we put styles. The issue is: We'll have to export those css files along with html. Otherwise it won't work properly.

If it's ok I'll do this.

Rokt33r · 2018-01-14T02:39:17Z

@nlopin It makes sense. I've realized now that it is just like what Chrome does.

Yea, we should export multiple files, style sheet, images and any other static stuff, including fonts if url is available.

Rokt33r · 2018-01-25T18:59:24Z

@nlopin ping.

Rokt33r · 2018-02-03T04:59:48Z

@nlopin ping.

nlopin · 2018-02-03T08:27:59Z

@Rokt33r hi. Sorry for delay. I'm working on it right now.

# Conflicts: # browser/components/MarkdownPreview.js

nlopin · 2018-02-05T10:06:58Z

@Rokt33r @kazup01 I've finished.

Export is divided by two parts:

export additional files and paths modifications
export the content of the note

Additional files are exported via copy tasks. Task is an object {'src': pathfrom, 'dst': pathto}. Destination path can be relative or absolute.

If all additional files are exported, the content will be exported at the end. If an error happened during export, boostnote remove all already exported files and folders.

Feel free to ask questions here or at Slack.

Rokt33r · 2018-02-05T10:35:52Z

@nlopin Great work! 👍 I'll review this tomorrow!

tatoosh · 2018-02-05T20:00:49Z

Will u also include CSS ?

nlopin · 2018-02-05T20:21:51Z

@tatoosh yes. If you export to HTML two additional folders will be exported – images and css

tatoosh · 2018-02-05T21:51:46Z

THX @nlopin!
Do you have an option for Export CSS, so Form dark theme the Export will transformed to white?

nlopin · 2018-02-06T06:20:21Z

No, it will export the same styles you see on preview. Create feature request if you need it

Rokt33r · 2018-02-06T15:36:05Z

browser/main/lib/dataApi/exportNote.js

+function saveToFile (data, filename) {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(filename, data, (err) => {
+      if (err) throw err


I assume this makes the error go limbo. return reject(err) should be right.

nlopin · 2018-02-06T19:19:59Z

@Rokt33r done! Thank you

Rokt33r · 2018-02-07T10:37:57Z

Now we need to implement UI. I'm going to create another PR against this branch about tomorrow. Let me know if you want to finish it by yourself!

nlopin · 2018-02-07T13:40:06Z

Could you explain what do you mean?
There is no sense in current version of HTML export, because it doesn't work properly. I think it's ok to merge PR because it fixes that issue.

nlopin · 2018-02-09T15:34:44Z

@kazup01 @Rokt33r I'm worried that leaving this PR without merge will lead us to new set of conflicts.

Rokt33r · 2018-02-10T00:03:57Z

@nlopin sorry for my late answer. Everything looks great. I'll merge this today!

Rokt33r · 2018-02-10T00:19:33Z

I found a problem.

Styling of task list seems to be broken after exporting as html. I'm investigating now.

Rokt33r · 2018-02-10T09:46:02Z

Merged!

nlopin · 2018-02-10T11:05:59Z

This is the fundamental issue. Some styles applies directly to Preview HTML in rewriteIframe method. It's not a good practice, so I removed that.

I add class to the li tag at markdown to html transformation and then style it with css. @Rokt33r Please, have a look

Rokt33r · 2018-02-10T12:17:59Z

@nlopin Could you create another PR? I can review it now!

nlopin · 2018-02-10T13:00:35Z

Done #1531

Export note with local images

83da07a

Looks through the note and searches for local images. Copies them to ‘images’ folder in the export path and replaces affected links. BoostIO#1261

kazup01 added the awaiting review ❇️ Pull request is awaiting a review. label Dec 18, 2017

kazup01 requested review from sota1235 and removed request for sota1235 December 20, 2017 08:54

kazup01 requested a review from kohei-takata December 28, 2017 01:35

kazup01 added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Jan 4, 2018

Nikolay Lopin added 4 commits February 5, 2018 02:08

Export images together with document

3da4bb6

Export images together with document

f678a17

Merge branch 'master' into export-note-with-images

98c9132

# Conflicts: # browser/components/MarkdownPreview.js

Semicolon fix

338f9fb

Rokt33r requested review from Rokt33r and removed request for kohei-takata February 5, 2018 10:36

Rokt33r added awaiting review ❇️ Pull request is awaiting a review. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Feb 5, 2018

nlopin mentioned this pull request Feb 5, 2018

[Feature request] Export HTML including all files | pandoc? #1510

Closed

Rokt33r requested changes Feb 6, 2018

View reviewed changes

Reject promise if write to file failed

12447ef

necan mentioned this pull request Feb 8, 2018

Why Font is so blurry on windows than other software? #1247

Closed

Manipulate left margin of task item to hide circle

5ec541c

Rokt33r merged commit 0476ff7 into BoostIO:master Feb 10, 2018

Rokt33r added next release (v0.9.0) and removed awaiting review ❇️ Pull request is awaiting a review. labels Feb 10, 2018

kazup01 removed the next release (v0.10.0) label Feb 25, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Export note with local images #1306

Export note with local images #1306

nlopin commented Dec 17, 2017

BoostnoteBot commented Dec 17, 2017

nlopin commented Dec 27, 2017

kazup01 commented Dec 28, 2017

kazup01 commented Jan 4, 2018

nlopin commented Jan 5, 2018

nlopin commented Jan 6, 2018

Rokt33r commented Jan 13, 2018 •

edited

Loading

nlopin commented Jan 13, 2018

Rokt33r commented Jan 14, 2018

Rokt33r commented Jan 25, 2018

Rokt33r commented Feb 3, 2018

nlopin commented Feb 3, 2018

nlopin commented Feb 5, 2018

Rokt33r commented Feb 5, 2018

tatoosh commented Feb 5, 2018

nlopin commented Feb 5, 2018

tatoosh commented Feb 5, 2018

nlopin commented Feb 6, 2018

Rokt33r Feb 6, 2018

nlopin Feb 6, 2018

nlopin commented Feb 6, 2018

Rokt33r commented Feb 7, 2018 •

edited

Loading

nlopin commented Feb 7, 2018

nlopin commented Feb 9, 2018

Rokt33r commented Feb 10, 2018

Rokt33r commented Feb 10, 2018 •

edited

Loading

Rokt33r commented Feb 10, 2018

nlopin commented Feb 10, 2018 •

edited

Loading

Rokt33r commented Feb 10, 2018

nlopin commented Feb 10, 2018

Export note with local images #1306

Export note with local images #1306

Conversation

nlopin commented Dec 17, 2017

BoostnoteBot commented Dec 17, 2017

nlopin commented Dec 27, 2017

kazup01 commented Dec 28, 2017

kazup01 commented Jan 4, 2018

nlopin commented Jan 5, 2018

nlopin commented Jan 6, 2018

Rokt33r commented Jan 13, 2018 • edited Loading

nlopin commented Jan 13, 2018

Rokt33r commented Jan 14, 2018

Rokt33r commented Jan 25, 2018

Rokt33r commented Feb 3, 2018

nlopin commented Feb 3, 2018

nlopin commented Feb 5, 2018

Rokt33r commented Feb 5, 2018

tatoosh commented Feb 5, 2018

nlopin commented Feb 5, 2018

tatoosh commented Feb 5, 2018

nlopin commented Feb 6, 2018

Rokt33r Feb 6, 2018

Choose a reason for hiding this comment

nlopin Feb 6, 2018

Choose a reason for hiding this comment

nlopin commented Feb 6, 2018

Rokt33r commented Feb 7, 2018 • edited Loading

nlopin commented Feb 7, 2018

nlopin commented Feb 9, 2018

Rokt33r commented Feb 10, 2018

Rokt33r commented Feb 10, 2018 • edited Loading

Rokt33r commented Feb 10, 2018

nlopin commented Feb 10, 2018 • edited Loading

Rokt33r commented Feb 10, 2018

nlopin commented Feb 10, 2018

Rokt33r commented Jan 13, 2018 •

edited

Loading

Rokt33r commented Feb 7, 2018 •

edited

Loading

Rokt33r commented Feb 10, 2018 •

edited

Loading

nlopin commented Feb 10, 2018 •

edited

Loading