From ab79f247295f63b46b68320b18f22e9854fdaa0c Mon Sep 17 00:00:00 2001 From: zadam Date: Wed, 25 Dec 2019 11:34:45 +0100 Subject: [PATCH] added content style to tar html export as well --- ...keditor-print.css => ckeditor-content.css} | 107 ++++++++---------- src/public/javascripts/desktop.js | 2 +- src/services/export/tar.js | 35 +++++- 3 files changed, 83 insertions(+), 61 deletions(-) rename libraries/ckeditor/{ckeditor-print.css => ckeditor-content.css} (79%) diff --git a/libraries/ckeditor/ckeditor-print.css b/libraries/ckeditor/ckeditor-content.css similarity index 79% rename from libraries/ckeditor/ckeditor-print.css rename to libraries/ckeditor/ckeditor-content.css index 1b7516990..20ad9a607 100644 --- a/libraries/ckeditor/ckeditor-print.css +++ b/libraries/ckeditor/ckeditor-content.css @@ -1,5 +1,6 @@ /* * !!!!!!! This stylesheet is heavily modified compared to the original for similarity with in-editor look !!!!!!! + * This is used for printing and tar HTML export * * CKEditor 5 (v15.0.0) content styles. * Generated on Wed, 27 Nov 2019 13:26:13 GMT. @@ -15,26 +16,23 @@ --ck-highlight-pen-red: #e91313; --ck-image-style-spacing: 1.5em; --ck-todo-list-checkmark-size: 16px; -} - -.ck-content { font-family: Arial, Sans-Serif; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list { +.todo-list { list-style: none; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list li { +.todo-list li { margin-bottom: 5px; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list li .todo-list { +.todo-list li .todo-list { margin-top: 5px; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input { +.todo-list .todo-list__label > input { -webkit-appearance: none; display: inline-block; position: relative; @@ -48,7 +46,7 @@ margin-left: 0; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input::before { +.todo-list .todo-list__label > input::before { display: block; position: absolute; box-sizing: border-box; @@ -60,7 +58,7 @@ transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border; } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input::after { +.todo-list .todo-list__label > input::after { display: block; position: absolute; box-sizing: content-box; @@ -76,38 +74,33 @@ transform: rotate(45deg); } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label > input[checked]::before { - background: hsl(126, 64%, 41%); - border-color: hsl(126, 64%, 41%); -} -/* ckeditor5-list/theme/todolist.css - - checked button is presented as green rectangle otherwise printing is broken for todos -*/ -.ck-content .todo-list .todo-list__label > input[checked]::after { - background: hsl(126, 64%, 41%); +.todo-list .todo-list__label > input[checked]::before { border-color: hsl(126, 64%, 41%); } /* ckeditor5-list/theme/todolist.css */ -.ck-content .todo-list .todo-list__label .todo-list__label__description { +.todo-list .todo-list__label > input[checked]::after { + border-color: hsl(126, 64%, 41%); +} +/* ckeditor5-list/theme/todolist.css */ +.todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; } /* ckeditor5-image/theme/image.css */ -.ck-content .image { +.image { display: table; clear: both; text-align: center; margin: 1em auto; } /* ckeditor5-image/theme/image.css */ -.ck-content .image > img { +.image > img { display: block; margin: 0 auto; max-width: 100%; min-width: 50px; } /* ckeditor5-block-quote/theme/blockquote.css */ -.ck-content blockquote { +blockquote { overflow: hidden; padding-right: 1.5em; padding-left: 1.5em; @@ -122,105 +115,105 @@ border-right: solid 5px hsl(0, 0%, 80%); } /* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized { +.image.image_resized { max-width: 100%; display: block; box-sizing: border-box; } /* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized img { +.image.image_resized img { width: 100%; } /* ckeditor5-image/theme/imageresize.css */ -.ck-content .image.image_resized > figcaption { +.image.image_resized > figcaption { display: block; } /* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-side, -.ck-content .image-style-align-left, -.ck-content .image-style-align-center, -.ck-content .image-style-align-right { +.image-style-side, +.image-style-align-left, +.image-style-align-center, +.image-style-align-right { max-width: 50%; } /* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-side { +.image-style-side { float: right; margin-left: var(--ck-image-style-spacing); } /* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-left { +.image-style-align-left { float: left; margin-right: var(--ck-image-style-spacing); } /* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-center { +.image-style-align-center { margin-left: auto; margin-right: auto; } /* ckeditor5-image/theme/imagestyle.css */ -.ck-content .image-style-align-right { +.image-style-align-right { float: right; margin-left: var(--ck-image-style-spacing); } /* ckeditor5-media-embed/theme/mediaembed.css */ -.ck-content .media { +.media { clear: both; margin: 1em 0; display: block; min-width: 15em; } /* ckeditor5-table/theme/table.css */ -.ck-content .table { +.table { display: table; margin: 0; } /* ckeditor5-table/theme/table.css */ -.ck-content .table table { +.table table { border-collapse: collapse; border-spacing: 0; border: 1px double hsl(0, 0%, 70%); } /* ckeditor5-table/theme/table.css */ -.ck-content .table table td, -.ck-content .table table th { +.table table td, +.table table th { min-width: 2em; padding: .4em; border: 1px solid #d9d9d9; } /* ckeditor5-table/theme/table.css */ -.ck-content .table table th { +.table table th { font-weight: bold; background-color: #f5f5f5; text-align: left; } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-yellow { +.marker-yellow { background-color: var(--ck-highlight-marker-yellow); } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-green { +.marker-green { background-color: var(--ck-highlight-marker-green); } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-pink { +.marker-pink { background-color: var(--ck-highlight-marker-pink); } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .marker-blue { +.marker-blue { background-color: var(--ck-highlight-marker-blue); } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-red { +.pen-red { color: var(--ck-highlight-pen-red); background-color: transparent; } /* ckeditor5-highlight/theme/highlight.css */ -.ck-content .pen-green { +.pen-green { color: var(--ck-highlight-pen-green); background-color: transparent; } /* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break { +.page-break { position: relative; clear: both; padding: 5px 0; @@ -229,14 +222,14 @@ justify-content: center; } /* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break::after { +.page-break::after { content: ''; position: absolute; border-bottom: 2px dashed hsl(0, 0%, 77%); width: 100%; } /* ckeditor5-page-break/theme/pagebreak.css */ -.ck-content .page-break__label { +.page-break__label { position: relative; z-index: 1; padding: .3em .6em; @@ -256,13 +249,13 @@ user-select: none; } /* ckeditor5-basic-styles/theme/code.css */ -.ck-content code { +code { background-color: hsla(0, 0%, 78%, 0.3); padding: .15em; border-radius: 2px; } /* ckeditor5-image/theme/imagecaption.css */ -.ck-content .image > figcaption { +.image > figcaption { display: table-caption; caption-side: bottom; word-break: break-word; @@ -273,14 +266,14 @@ outline-offset: -1px; } /* ckeditor5-horizontal-line/theme/horizontalline.css */ -.ck-content hr { +hr { border-width: 1px 0 0; border-style: solid; border-color: hsl(0, 0%, 37%); margin: 0; } /* ckeditor5-code-block/theme/codeblock.css */ -.ck-content pre { +pre { padding: 1em; color: #353535; background: hsla(0, 0%, 78%, 0.3); @@ -294,24 +287,24 @@ min-width: 200px; } /* ckeditor5-code-block/theme/codeblock.css */ -.ck-content pre code { +pre code { background: unset; padding: 0; border-radius: 0; } -.ck-content .ck-widget__selection-handle { +.ck-widget__selection-handle { display: none; } @media print { /* ckeditor5-page-break/theme/pagebreak.css */ - .ck-content .page-break { + .page-break { padding: 0; } /* ckeditor5-page-break/theme/pagebreak.css */ - .ck-content .page-break::after { + .page-break::after { display: none; } } \ No newline at end of file diff --git a/src/public/javascripts/desktop.js b/src/public/javascripts/desktop.js index 7a89761d3..a6e87558d 100644 --- a/src/public/javascripts/desktop.js +++ b/src/public/javascripts/desktop.js @@ -146,7 +146,7 @@ async function printActiveNote() { importCSS: false, loadCSS: [ "libraries/codemirror/codemirror.css", - "libraries/ckeditor/ckeditor-print.css" + "libraries/ckeditor/ckeditor-content.css" ], debug: true }); diff --git a/src/services/export/tar.js b/src/services/export/tar.js index 4f90eb1af..dae98aae1 100644 --- a/src/services/export/tar.js +++ b/src/services/export/tar.js @@ -11,6 +11,8 @@ const packageInfo = require('../../../package.json'); const utils = require('../utils'); const protectedSessionService = require('../protected_session'); const sanitize = require("sanitize-filename"); +const fs = require("fs"); +const RESOURCE_DIR = require('../../services/resource_dir').RESOURCE_DIR; /** * @param {TaskContext} taskContext @@ -224,8 +226,13 @@ async function exportToTar(taskContext, branch, format, res) { if (noteMeta.format === 'html') { if (!content.substr(0, 100).toLowerCase().includes(" - + + + +

${utils.escapeHtml(title)}

${content} @@ -323,7 +330,15 @@ ${content} return html + ''; } - const fullHtml = '' + const fullHtml = ` + + + + + + + +`; const prettyHtml = html.prettyPrint(fullHtml, {indent_size: 2}); pack.entry({name: navigationMeta.dataFileName, size: prettyHtml.length}, prettyHtml); @@ -360,6 +375,12 @@ ${content} pack.entry({name: indexMeta.dataFileName, size: fullHtml.length}, fullHtml); } + function saveCss(rootMeta, cssMeta) { + const cssContent = fs.readFileSync(RESOURCE_DIR + '/libraries/ckeditor/ckeditor-content.css'); + + pack.entry({name: cssMeta.dataFileName, size: cssContent.length}, cssContent); + } + const existingFileNames = format === 'html' ? ['navigation', 'index'] : []; const rootMeta = await getNoteMeta(branch, { notePath: [] }, existingFileNames); @@ -369,7 +390,7 @@ ${content} files: [ rootMeta ] }; - let navigationMeta, indexMeta; + let navigationMeta, indexMeta, cssMeta; if (format === 'html') { navigationMeta = { @@ -385,6 +406,13 @@ ${content} }; metaFile.files.push(indexMeta); + + cssMeta = { + noImport: true, + dataFileName: "style.css" + }; + + metaFile.files.push(cssMeta); } for (const noteMeta of Object.values(noteIdToMeta)) { @@ -406,6 +434,7 @@ ${content} if (format === 'html') { saveNavigation(rootMeta, navigationMeta); saveIndex(rootMeta, indexMeta); + saveCss(rootMeta, cssMeta); } pack.finalize();