mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-14 18:26:26 +00:00
652 lines
15 KiB
JavaScript
652 lines
15 KiB
JavaScript
import path from 'path'
|
|
import fileUrl from 'file-url'
|
|
import fs from 'fs'
|
|
import { remote } from 'electron'
|
|
import consts from 'browser/lib/consts'
|
|
import Markdown from 'browser/lib/markdown'
|
|
import attachmentManagement from './attachmentManagement'
|
|
|
|
const { app } = remote
|
|
const appPath = fileUrl(process.env.NODE_ENV === 'production' ? app.getAppPath() : path.resolve())
|
|
|
|
let markdownStyle = ''
|
|
try {
|
|
markdownStyle = require('!!css!stylus?sourceMap!../../../components/markdown.styl')[0][1]
|
|
} catch (e) {}
|
|
|
|
export const CSS_FILES = [
|
|
`${appPath}/node_modules/katex/dist/katex.min.css`,
|
|
`${appPath}/node_modules/codemirror/lib/codemirror.css`
|
|
]
|
|
|
|
const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
|
|
if (global.process.platform !== 'darwin') {
|
|
defaultFontFamily.unshift('Microsoft YaHei')
|
|
defaultFontFamily.unshift('meiryo')
|
|
}
|
|
|
|
const defaultCodeBlockFontFamily = [
|
|
'Monaco',
|
|
'Menlo',
|
|
'Ubuntu Mono',
|
|
'Consolas',
|
|
'source-code-pro',
|
|
'monospace'
|
|
]
|
|
|
|
function unprefix (file) {
|
|
if (global.process.platform === 'win32') {
|
|
return file.replace('file:///', '')
|
|
} else {
|
|
return file.replace('file://', '')
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ```
|
|
* {
|
|
* fontFamily,
|
|
* fontSize,
|
|
* lineNumber,
|
|
* codeBlockFontFamily,
|
|
* codeBlockTheme,
|
|
* scrollPastEnd,
|
|
* theme,
|
|
* allowCustomCSS,
|
|
* customCSS
|
|
* smartQuotes,
|
|
* sanitize,
|
|
* breaks,
|
|
* storagePath,
|
|
* export,
|
|
* indentSize
|
|
* }
|
|
* ```
|
|
*/
|
|
export default function formatHTML (props) {
|
|
const {
|
|
fontFamily,
|
|
fontSize,
|
|
codeBlockFontFamily,
|
|
lineNumber,
|
|
codeBlockTheme,
|
|
scrollPastEnd,
|
|
theme,
|
|
allowCustomCSS,
|
|
customCSS
|
|
} = getStyleParams(props)
|
|
|
|
const inlineStyles = buildStyle(
|
|
fontFamily,
|
|
fontSize,
|
|
codeBlockFontFamily,
|
|
lineNumber,
|
|
scrollPastEnd,
|
|
theme,
|
|
allowCustomCSS,
|
|
customCSS
|
|
)
|
|
|
|
const { smartQuotes, sanitize, breaks } = props
|
|
|
|
let indentSize = parseInt(props.indentSize, 10)
|
|
if (!(indentSize > 0 && indentSize < 132)) {
|
|
indentSize = 4
|
|
}
|
|
|
|
const files = [getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
|
|
|
|
return function (note, targetPath, exportTasks) {
|
|
let styles = files.map(file => `<link rel="stylesheet" href="css/${path.basename(file)}">`).join('\n')
|
|
|
|
let inlineScripts = ''
|
|
let scripts = ''
|
|
|
|
let decodeEntities = false
|
|
function addDecodeEntities () {
|
|
if (decodeEntities) {
|
|
return
|
|
}
|
|
|
|
decodeEntities = true
|
|
|
|
inlineScripts += `
|
|
function decodeEntities (text) {
|
|
var entities = [
|
|
['apos', '\\''],
|
|
['amp', '&'],
|
|
['lt', '<'],
|
|
['gt', '>'],
|
|
['#63', '\\?'],
|
|
['#36', '\\$']
|
|
]
|
|
|
|
for (var i = 0, max = entities.length; i < max; ++i) {
|
|
text = text.replace(new RegExp(\`&\${entities[i][0]};\`, 'g'), entities[i][1])
|
|
}
|
|
|
|
return text
|
|
}`
|
|
}
|
|
|
|
let lodash = false
|
|
function addLodash () {
|
|
if (lodash) {
|
|
return
|
|
}
|
|
|
|
lodash = true
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/lodash/lodash.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/lodash.min.js"></script>`
|
|
}
|
|
|
|
let raphael = false
|
|
function addRaphael () {
|
|
if (raphael) {
|
|
return
|
|
}
|
|
|
|
raphael = true
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/raphael/raphael.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/raphael.min.js"></script>`
|
|
}
|
|
|
|
let yaml = false
|
|
function addYAML () {
|
|
if (yaml) {
|
|
return
|
|
}
|
|
|
|
yaml = true
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/js-yaml/dist/js-yaml.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/js-yaml.min.js"></script>`
|
|
}
|
|
|
|
let chart = false
|
|
function addChart () {
|
|
if (chart) {
|
|
return
|
|
}
|
|
|
|
chart = true
|
|
|
|
addLodash()
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/chart.js/dist/Chart.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/Chart.min.js"></script>`
|
|
|
|
inlineScripts += `
|
|
function displayCharts () {
|
|
_.forEach(
|
|
document.querySelectorAll('.chart'),
|
|
el => {
|
|
try {
|
|
const format = el.attributes.getNamedItem('data-format').value
|
|
const chartConfig = format === 'yaml' ? jsyaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
|
|
el.innerHTML = ''
|
|
|
|
const canvas = document.createElement('canvas')
|
|
el.appendChild(canvas)
|
|
|
|
const height = el.attributes.getNamedItem('data-height')
|
|
if (height && height.value !== 'undefined') {
|
|
el.style.height = height.value + 'vh'
|
|
canvas.height = height.value + 'vh'
|
|
}
|
|
|
|
const chart = new Chart(canvas, chartConfig)
|
|
} catch (e) {
|
|
el.className = 'chart-error'
|
|
el.innerHTML = 'chartjs diagram parse error: ' + e.message
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', displayCharts);
|
|
`
|
|
}
|
|
|
|
let codemirror = false
|
|
function addCodeMirror () {
|
|
if (codemirror) {
|
|
return
|
|
}
|
|
|
|
codemirror = true
|
|
|
|
addDecodeEntities()
|
|
addLodash()
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/codemirror/lib/codemirror.js`),
|
|
dst: 'js/codemirror'
|
|
}, {
|
|
src: unprefix(`${appPath}/node_modules/codemirror/mode/meta.js`),
|
|
dst: 'js/codemirror/mode'
|
|
}, {
|
|
src: unprefix(`${appPath}/node_modules/codemirror/addon/mode/loadmode.js`),
|
|
dst: 'js/codemirror/addon/mode'
|
|
}, {
|
|
src: unprefix(`${appPath}/node_modules/codemirror/addon/runmode/runmode.js`),
|
|
dst: 'js/codemirror/addon/runmode'
|
|
})
|
|
|
|
scripts += `
|
|
<script src="js/codemirror/codemirror.js"></script>
|
|
<script src="js/codemirror/mode/meta.js"></script>
|
|
<script src="js/codemirror/addon/mode/loadmode.js"></script>
|
|
<script src="js/codemirror/addon/runmode/runmode.js"></script>
|
|
`
|
|
|
|
let className = `cm-s-${codeBlockTheme}`
|
|
if (codeBlockTheme.indexOf('solarized') === 0) {
|
|
const [refThema, color] = codeBlockTheme.split(' ')
|
|
className = `cm-s-${refThema} cm-s-${color}`
|
|
}
|
|
|
|
inlineScripts += `
|
|
CodeMirror.modeURL = 'js/codemirror/mode/%N/%N.js';
|
|
|
|
function displayCodeBlocks () {
|
|
_.forEach(
|
|
document.querySelectorAll('.code code'),
|
|
el => {
|
|
let syntax = CodeMirror.findModeByName(el.className)
|
|
if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
|
|
CodeMirror.requireMode(syntax.mode, () => {
|
|
const content = decodeEntities(el.innerHTML)
|
|
el.innerHTML = ''
|
|
el.parentNode.className += ' ${className}'
|
|
CodeMirror.runMode(content, syntax.mime, el, {
|
|
tabSize: ${indentSize}
|
|
})
|
|
})
|
|
}
|
|
)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', displayCodeBlocks);
|
|
`
|
|
}
|
|
|
|
let flowchart = false
|
|
function addFlowchart () {
|
|
if (flowchart) {
|
|
return
|
|
}
|
|
|
|
flowchart = true
|
|
|
|
addDecodeEntities()
|
|
addLodash()
|
|
addRaphael()
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/flowchart.js/release/flowchart.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/flowchart.min.js"></script>`
|
|
|
|
inlineScripts += `
|
|
function displayFlowcharts () {
|
|
_.forEach(
|
|
document.querySelectorAll('.flowchart'),
|
|
el => {
|
|
try {
|
|
const diagram = flowchart.parse(
|
|
decodeEntities(el.innerHTML)
|
|
)
|
|
el.innerHTML = ''
|
|
diagram.drawSVG(el)
|
|
} catch (e) {
|
|
el.className = 'flowchart-error'
|
|
el.innerHTML = 'Flowchart parse error: ' + e.message
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', displayFlowcharts);
|
|
`
|
|
}
|
|
|
|
let mermaid = false
|
|
function addMermaid () {
|
|
if (mermaid) {
|
|
return
|
|
}
|
|
|
|
mermaid = true
|
|
|
|
addLodash()
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/mermaid/dist/mermaid.min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/mermaid.min.js"></script>`
|
|
|
|
const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
|
|
|
|
inlineScripts += `
|
|
function displayMermaids () {
|
|
_.forEach(
|
|
document.querySelectorAll('.mermaid'),
|
|
el => {
|
|
const height = el.attributes.getNamedItem('data-height')
|
|
if (height && height.value !== 'undefined') {
|
|
el.style.height = height.value + 'vh'
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', displayMermaids);
|
|
`
|
|
}
|
|
|
|
let sequence = false
|
|
function addSequence () {
|
|
if (sequence) {
|
|
return
|
|
}
|
|
|
|
sequence = true
|
|
|
|
addDecodeEntities()
|
|
addLodash()
|
|
addRaphael()
|
|
|
|
exportTasks.push({
|
|
src: unprefix(`${appPath}/node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js`),
|
|
dst: 'js'
|
|
})
|
|
|
|
scripts += `<script src="js/sequence-diagram-min.js"></script>`
|
|
|
|
inlineScripts += `
|
|
function displaySequences () {
|
|
_.forEach(
|
|
document.querySelectorAll('.sequence'),
|
|
el => {
|
|
try {
|
|
const diagram = Diagram.parse(
|
|
decodeEntities(el.innerHTML)
|
|
)
|
|
el.innerHTML = ''
|
|
diagram.drawSVG(el, { theme: 'simple' })
|
|
} catch (e) {
|
|
el.className = 'sequence-error'
|
|
el.innerHTML = 'Sequence diagram parse error: ' + e.message
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', displaySequences);
|
|
`
|
|
}
|
|
|
|
const modes = {}
|
|
const markdown = new Markdown({
|
|
typographer: smartQuotes,
|
|
sanitize,
|
|
breaks,
|
|
onFence (type, mode) {
|
|
if (type === 'chart') {
|
|
addChart()
|
|
|
|
if (mode === 'yaml') {
|
|
addYAML()
|
|
}
|
|
}
|
|
else if (type === 'code') {
|
|
addCodeMirror()
|
|
|
|
if (mode && modes[mode] !== true) {
|
|
const file = unprefix(`${appPath}/node_modules/codemirror/mode/${mode}/${mode}.js`)
|
|
|
|
if (fs.existsSync(file)) {
|
|
exportTasks.push({
|
|
src: file,
|
|
dst: `js/codemirror/mode/${mode}`
|
|
})
|
|
|
|
modes[mode] = true
|
|
}
|
|
}
|
|
} else if (type === 'flowchart') {
|
|
addFlowchart()
|
|
} else if (type === 'mermaid') {
|
|
addMermaid()
|
|
} else if (type === 'sequence') {
|
|
addSequence()
|
|
}
|
|
}
|
|
})
|
|
|
|
let body = markdown.render(note.content)
|
|
|
|
const attachmentsAbsolutePaths = attachmentManagement.getAbsolutePathsOfAttachmentsInContent(note.content, props.storagePath)
|
|
|
|
files.forEach(file => {
|
|
exportTasks.push({
|
|
src: unprefix(file),
|
|
dst: 'css'
|
|
})
|
|
})
|
|
|
|
const destinationFolder = props.export.prefixAttachmentFolder ? `${path.parse(targetPath).name} - ${attachmentManagement.DESTINATION_FOLDER}` : attachmentManagement.DESTINATION_FOLDER
|
|
|
|
attachmentsAbsolutePaths.forEach(attachment => {
|
|
exportTasks.push({
|
|
src: attachment,
|
|
dst: destinationFolder
|
|
})
|
|
})
|
|
|
|
body = attachmentManagement.replaceStorageReferences(body, note.key, destinationFolder)
|
|
|
|
return `
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
|
|
<style id="style">${inlineStyles}</style>
|
|
${styles}
|
|
${scripts}
|
|
<script>${inlineScripts}</script>
|
|
</head>
|
|
<body>
|
|
${body}
|
|
</body>
|
|
</html>
|
|
`
|
|
}
|
|
}
|
|
|
|
export function getStyleParams (props) {
|
|
const {
|
|
fontSize,
|
|
lineNumber,
|
|
codeBlockTheme,
|
|
scrollPastEnd,
|
|
theme,
|
|
allowCustomCSS,
|
|
customCSS
|
|
} = props
|
|
|
|
let { fontFamily, codeBlockFontFamily } = props
|
|
|
|
fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
|
|
? fontFamily
|
|
.split(',')
|
|
.map(fontName => fontName.trim())
|
|
.concat(defaultFontFamily)
|
|
: defaultFontFamily
|
|
|
|
codeBlockFontFamily = _.isString(codeBlockFontFamily) &&
|
|
codeBlockFontFamily.trim().length > 0
|
|
? codeBlockFontFamily
|
|
.split(',')
|
|
.map(fontName => fontName.trim())
|
|
.concat(defaultCodeBlockFontFamily)
|
|
: defaultCodeBlockFontFamily
|
|
|
|
return {
|
|
fontFamily,
|
|
fontSize,
|
|
codeBlockFontFamily,
|
|
lineNumber,
|
|
codeBlockTheme,
|
|
scrollPastEnd,
|
|
theme,
|
|
allowCustomCSS,
|
|
customCSS
|
|
}
|
|
}
|
|
|
|
export function getCodeThemeLink (theme) {
|
|
if (consts.THEMES.some(_theme => _theme === theme)) {
|
|
theme = theme !== 'default' ? theme : 'elegant'
|
|
}
|
|
|
|
return theme.startsWith('solarized')
|
|
? `${appPath}/node_modules/codemirror/theme/solarized.css`
|
|
: `${appPath}/node_modules/codemirror/theme/${theme}.css`
|
|
}
|
|
|
|
export function buildStyle (
|
|
fontFamily,
|
|
fontSize,
|
|
codeBlockFontFamily,
|
|
lineNumber,
|
|
scrollPastEnd,
|
|
theme,
|
|
allowCustomCSS,
|
|
customCSS
|
|
) {
|
|
return `
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
|
|
url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
|
|
url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
|
|
url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
|
|
url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Material Icons'),
|
|
local('MaterialIcons-Regular'),
|
|
url('${appPath}/resources/fonts/MaterialIcons-Regular.woff2') format('woff2'),
|
|
url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
|
|
url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
|
|
}
|
|
${markdownStyle}
|
|
|
|
body {
|
|
font-family: '${fontFamily.join("','")}';
|
|
font-size: ${fontSize}px;
|
|
${scrollPastEnd && 'padding-bottom: 90vh;'}
|
|
}
|
|
@media print {
|
|
body {
|
|
padding-bottom: initial;
|
|
}
|
|
}
|
|
code {
|
|
font-family: '${codeBlockFontFamily.join("','")}';
|
|
background-color: rgba(0,0,0,0.04);
|
|
}
|
|
.lineNumber {
|
|
${lineNumber && 'display: block !important;'}
|
|
font-family: '${codeBlockFontFamily.join("','")}';
|
|
}
|
|
|
|
.clipboardButton {
|
|
color: rgba(147,147,149,0.8);;
|
|
fill: rgba(147,147,149,1);;
|
|
border-radius: 50%;
|
|
margin: 0px 10px;
|
|
border: none;
|
|
background-color: transparent;
|
|
outline: none;
|
|
height: 15px;
|
|
width: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clipboardButton:hover {
|
|
transition: 0.2s;
|
|
color: #939395;
|
|
fill: #939395;
|
|
background-color: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h1, h2 {
|
|
border: none;
|
|
}
|
|
|
|
h1 {
|
|
padding-bottom: 4px;
|
|
margin: 1em 0 8px;
|
|
}
|
|
|
|
h2 {
|
|
padding-bottom: 0.2em;
|
|
margin: 1em 0 0.37em;
|
|
}
|
|
|
|
body p {
|
|
white-space: normal;
|
|
}
|
|
|
|
@media print {
|
|
body[data-theme="${theme}"] {
|
|
color: #000;
|
|
background-color: #fff;
|
|
}
|
|
.clipboardButton {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
${allowCustomCSS ? customCSS : ''}
|
|
`
|
|
}
|