self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-11-24 08:12:24 +02:00
Code Issues Releases Activity

Desktop: Clean up adding custom CSS and remove top margin and padding from rendered html

Browse Source
This commit is contained in:
Laurent Cozic 2019-02-18 00:42:52 +00:00
parent cde1a8f0a8
commit a4e649c82d
2 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ElectronClient/app/gui/NoteText.jsx
View File

@ -909,6 +909,7 @@ class NoteTextComponent extends React.Component {
}, 100);
},
postMessageSyntax: 'ipcProxySendToHost',
userCss: options.useCustomCss ? this.props.customCss : '',
};
const theme = themeStyle(this.props.theme);
@ -924,8 +925,6 @@ class NoteTextComponent extends React.Component {
bodyToRender = '*' + _('This note has no content. Click on "%s" to toggle the editor and edit the note.', _('Layout')) + '*';
}
if (options.useCustomCss) bodyToRender = '<style>' + this.props.customCss + '</style>\n' + bodyToRender;
bodyHtml = this.mdToHtml().render(bodyToRender, theme, mdOptions);
this.setState({ bodyHtml: bodyHtml });

61
ReactNativeClient/lib/MdToHtml.js
View File

@ -17,6 +17,7 @@ class MdToHtml {
this.loadedResources_ = {};
this.cachedContent_ = null;
this.cachedContentKey_ = null;
this.extraCssBlocks_ = [];
// Must include last "/"
this.resourceBaseUrl_ = ('resourceBaseUrl' in options) ? options.resourceBaseUrl : null;
@ -356,31 +357,6 @@ class MdToHtml {
if (closeTag) {
if (closeTag === 'a') {
const currentAnchorAttrs = anchorAttrs.pop();
// NOTE: Disabled for now due to this:
// https://github.com/laurent22/joplin/issues/318#issuecomment-375854848
// const previousContent = output.length ? output[output.length - 1].trim() : '';
// const anchorHref = this.getAttr_(currentAnchorAttrs, 'href', '').trim();
// Optimisation: If the content of the anchor is the same as the URL, we replace the content
// by (Link). This is to shorten the text, which is important especially when the note comes
// from imported HTML, which can contain many such links and make the text unreadble. An example
// would be a movie review that has multiple links to allow a user to rate the film from 1 to 5 stars.
// In the original page, it might be rendered as stars, via CSS, but in the imported note it would look like this:
// http://example.com/rate/1 http://example.com/rate/2 http://example.com/rate/3
// http://example.com/rate/4 http://example.com/rate/5
// which would take a lot of screen space even though it doesn't matter since the user is unlikely
// to rate the film from the note. This is actually a nice example, still readable, but there is way
// worse that this in notes that come from web-clipped content.
// With this change, the links will still be preserved but displayed like
// (link) (link) (link) (link) (link)
// if (this.urldecode_(previousContent) === htmlentities(this.urldecode_(anchorHref))) {
// output.pop();
// output.push(_('(Link)'));
// }
output.push(this.renderCloseLink_(currentAnchorAttrs, options));
} else {
output.push('</' + closeTag + '>');
@ -401,14 +377,16 @@ class MdToHtml {
// Insert the extra CSS at the top of the HTML
if (!ObjectUtils.isEmpty(extraCssBlocks)) {
const temp = ['<style>'];
const temp = [];//['<style>'];
for (let n in extraCssBlocks) {
if (!extraCssBlocks.hasOwnProperty(n)) continue;
temp.push(extraCssBlocks[n]);
}
temp.push('</style>');
// temp.push('</style>');
output = temp.concat(output);
if (temp.length) this.extraCssBlocks_.push(temp.join('\n'));
//output = temp.concat(output);
}
return output.join('');
@ -490,6 +468,8 @@ class MdToHtml {
const env = {};
const tokens = md.parse(body, env);
this.extraCssBlocks_ = [];
let renderedBody = this.renderTokens_(md, tokens, options);
// console.info(body);
@ -552,6 +532,22 @@ class MdToHtml {
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 100, 100, 0.7);
}
/* Remove top padding and margin from first child so that top of rendered text is aligned to top of text editor text */
#rendered-md h1:first-child,
#rendered-md h2:first-child,
#rendered-md h3:first-child,
#rendered-md h4:first-child,
#rendered-md ul:first-child,
#rendered-md ol:first-child,
#rendered-md table:first-child,
#rendered-md blockquote:first-child,
#rendered-md img:first-child,
#rendered-md p:first-child {
margin-top: 0;
padding-top: 0;
}
p, h1, h2, h3, h4, h5, h6, ul, table {
margin-top: .6em;
margin-bottom: .65em;
@ -705,12 +701,13 @@ class MdToHtml {
}
`;
// To style the checkboxes in print when webkit-print-color-adjust is not enabled.
// Keep it there for now in case that CSS parameter needs to be removed.
let cssStrings = [normalizeCss, css];
if (this.extraCssBlocks_) cssStrings = cssStrings.concat(this.extraCssBlocks_);
if (options.userCss) cssStrings.push(options.userCss);
const styleHtml = '<style>' + normalizeCss + "\n" + css + '</style>';
const styleHtml = '<style>' + cssStrings.join('\n') + '</style>';
const output = styleHtml + renderedBody;
const output = styleHtml + '<div id="rendered-md">' + renderedBody + '</div>';
// console.info('<!DOCTYPE html><html><head><meta charset="UTF-8">' + output + '</body></html>');