From ea768f982eae519f87c0f678c140159b0fa48daa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Vi=E1=BB=87t=20H=C6=B0ng?= Date: Tue, 29 May 2018 00:37:59 +0700 Subject: [PATCH 1/4] Added custom markdown css --- browser/components/MarkdownEditor.js | 2 ++ browser/components/MarkdownPreview.js | 20 +++++++++------ browser/components/MarkdownSplitEditor.js | 2 ++ browser/main/lib/ConfigManager.js | 2 ++ browser/main/modals/PreferencesModal/UiTab.js | 25 ++++++++++++++++++- 5 files changed, 42 insertions(+), 9 deletions(-) diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js index 2bd5d951..2a1016cb 100644 --- a/browser/components/MarkdownEditor.js +++ b/browser/components/MarkdownEditor.js @@ -296,6 +296,8 @@ class MarkdownEditor extends React.Component { showCopyNotification={config.ui.showCopyNotification} storagePath={storage.path} noteKey={noteKey} + customCSS={config.preview.customCSS} + allowCustomCSS={config.preview.allowCustomCSS} /> ) diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 69340ae5..7e4a3853 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -32,7 +32,7 @@ const CSS_FILES = [ `${appPath}/node_modules/codemirror/lib/codemirror.css` ] -function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) { +function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) { return ` @font-face { font-family: 'Lato'; @@ -62,7 +62,9 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scro url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'), url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype'); } +${allowCustomCSS ? customCSS : ''} ${markdownStyle} + body { font-family: '${fontFamily.join("','")}'; font-size: ${fontSize}px; @@ -209,9 +211,9 @@ export default class MarkdownPreview extends React.Component { handleSaveAsHtml () { this.exportAsDocument('html', (noteContent, exportTasks) => { - const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams() + const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams() - const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) + const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) let body = this.markdown.render(escapeHtmlCharacters(noteContent)) const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES] @@ -347,14 +349,16 @@ export default class MarkdownPreview extends React.Component { prevProps.lineNumber !== this.props.lineNumber || prevProps.showCopyNotification !== this.props.showCopyNotification || prevProps.theme !== this.props.theme || - prevProps.scrollPastEnd !== this.props.scrollPastEnd) { + prevProps.scrollPastEnd !== this.props.scrollPastEnd || + prevProps.allowCustomCSS !== this.props.allowCustomCSS || + prevProps.customCSS !== this.props.customCSS) { this.applyStyle() this.rewriteIframe() } } getStyleParams () { - const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme } = this.props + const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS } = this.props let { fontFamily, codeBlockFontFamily } = this.props fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0 ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily) @@ -363,14 +367,14 @@ export default class MarkdownPreview extends React.Component { ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily) : defaultCodeBlockFontFamily - return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} + return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} } applyStyle () { - const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme} = this.getStyleParams() + const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd, theme, allowCustomCSS, customCSS} = this.getStyleParams() this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme) - this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme) + this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, theme, allowCustomCSS, customCSS) } GetCodeThemeLink (theme) { diff --git a/browser/components/MarkdownSplitEditor.js b/browser/components/MarkdownSplitEditor.js index 2bee5c24..7016d0f4 100644 --- a/browser/components/MarkdownSplitEditor.js +++ b/browser/components/MarkdownSplitEditor.js @@ -141,6 +141,8 @@ class MarkdownSplitEditor extends React.Component { showCopyNotification={config.ui.showCopyNotification} storagePath={storage.path} noteKey={noteKey} + customCSS={config.preview.customCSS} + allowCustomCSS={config.preview.allowCustomCSS} /> ) diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js index 228692d6..e23ba5fc 100644 --- a/browser/main/lib/ConfigManager.js +++ b/browser/main/lib/ConfigManager.js @@ -59,6 +59,8 @@ export const DEFAULT_CONFIG = { scrollPastEnd: false, smartQuotes: true, breaks: true, + allowCustomCSS: true, + customCSS: 'h1 { color: red }', sanitize: 'STRICT' // 'STRICT', 'ALLOW_STYLES', 'NONE' }, blog: { diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index e059d72d..173b8465 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -28,6 +28,8 @@ class UiTab extends React.Component { componentDidMount () { CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript') + CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css') + this.customCSSCM.getCodeMirror().setSize(null, '300px') this.handleSettingDone = () => { this.setState({UiAlert: { type: 'success', @@ -98,7 +100,9 @@ class UiTab extends React.Component { scrollPastEnd: this.refs.previewScrollPastEnd.checked, smartQuotes: this.refs.previewSmartQuotes.checked, breaks: this.refs.previewBreaks.checked, - sanitize: this.refs.previewSanitize.value + sanitize: this.refs.previewSanitize.value, + allowCustomCSS: this.refs.previewAllowCustomCSS.checked, + customCSS: this.customCSSCM.getCodeMirror().getValue() } } @@ -159,6 +163,7 @@ class UiTab extends React.Component { const { config, codemirrorTheme } = this.state const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t console.log("I am Happy!")\n\t} else {\n\t console.log("I am not Happy!")\n\t}\n};' const enableEditRulersStyle = config.editor.enableRulers ? 'block' : 'none' + const customCSS = config.preview.customCSS return (
@@ -569,6 +574,24 @@ class UiTab extends React.Component { />
+
+ +
+
+
+ {i18n.__('Custom CSS')} +
+
+ this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> +
+
- this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> +
+ this.handleUIChange(e)} ref={e => (this.customCSSCM = e)} value={config.preview.customCSS} options={{ lineNumbers: true, mode: 'css', theme: codemirrorTheme }} /> +
From 72fbefa300ac9d669d5135b503f7707fcbc61f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Vi=E1=BB=87t=20H=C6=B0ng?= Date: Sun, 3 Jun 2018 08:51:53 +0700 Subject: [PATCH 4/4] moved custom markdown checkbox & fixed codemirror size --- browser/main/modals/PreferencesModal/UiTab.js | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 3a4c7142..e14f2279 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -29,7 +29,7 @@ class UiTab extends React.Component { componentDidMount () { CodeMirror.autoLoadMode(this.codeMirrorInstance.getCodeMirror(), 'javascript') CodeMirror.autoLoadMode(this.customCSSCM.getCodeMirror(), 'css') - this.customCSSCM.getCodeMirror().setSize(null, '250px') + this.customCSSCM.getCodeMirror().setSize('400px', '400px') this.handleSettingDone = () => { this.setState({UiAlert: { type: 'success', @@ -574,24 +574,18 @@ class UiTab extends React.Component { /> -
-