[ { "path": ".babelrc", "content": "{\n \"presets\": [\"react\", \"es2015\"],\n \"env\": {\n \"development\": {\n \"presets\": [\"react-hmre\"]\n },\n \"test\": {\n \"presets\": [\"env\" ,\"react\", \"es2015\"],\n \"plugins\": [\n [ \"babel-plugin-webpack-alias\", { \"config\": \"/webpack.config.js\" } ]\n ]\n }\n }\n}\n" }, { "path": ".boostnoterc.sample", "content": "{\n \"amaEnabled\": true,\n \"editor\": {\n \"fontFamily\": \"Monaco, Consolas\",\n \"fontSize\": \"14\",\n \"indentSize\": \"2\",\n \"indentType\": \"space\",\n \"keyMap\": \"vim\",\n \"switchPreview\": \"BLUR\",\n \"theme\": \"monokai\"\n },\n \"hotkey\": {\n \"toggleMain\": \"Cmd + Alt + L\"\n },\n \"isSideNavFolded\": false,\n \"listStyle\": \"DEFAULT\",\n \"listWidth\": 174,\n \"navWidth\": 200,\n \"preview\": {\n \"codeBlockTheme\": \"dracula\",\n \"fontFamily\": \"Lato\",\n \"fontSize\": \"14\",\n \"lineNumber\": true\n },\n \"sortBy\": {\n \"default\": \"UPDATED_AT\"\n },\n \"sortTagsBy\": \"ALPHABETICAL\",\n \"ui\": {\n \"defaultNote\": \"ALWAYS_ASK\",\n \"disableDirectWrite\": false,\n \"theme\": \"default\"\n },\n \"zoom\": 1\n}\n" }, { "path": ".editorconfig", "content": "# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n# Space indentation\n[*]\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\n\n# The indent size used in the `package.json` file cannot be changed\n# https://github.com/npm/npm/pull/3180#issuecomment-16336516\n[{*.yml,*.yaml,package.json}]\nindent_style = space\nindent_size = 2\n" }, { "path": ".eslintignore", "content": "node_modules/\ncompiled/\ndist/\nextra_scripts/" }, { "path": ".eslintrc", "content": "{\n \"extends\": [\"standard\", \"standard-jsx\", \"plugin:react/recommended\", \"prettier\"],\n \"plugins\": [\"react\", \"prettier\"],\n \"rules\": {\n \"no-useless-escape\": 0,\n \"prefer-const\": [\"warn\", {\n \"destructuring\": \"all\"\n }],\n \"no-unused-vars\": \"warn\",\n \"no-undef\": \"warn\",\n \"no-lone-blocks\": \"warn\",\n \"react/prop-types\": 0,\n \"react/no-string-refs\": 0,\n \"react/no-find-dom-node\": \"warn\",\n \"react/no-render-return-value\": \"warn\",\n \"react/no-deprecated\": \"warn\",\n \"prettier/prettier\": [\"error\"]\n },\n \"globals\": {\n \"FileReader\": true,\n \"localStorage\": true,\n \"fetch\": true,\n \"Image\": true,\n \"MutationObserver\": true\n },\n \"env\": {\n \"jest\": true\n }\n}\n" }, { "path": ".github/FUNDING.yml", "content": "issuehunt: BoostIo/Boostnote\n" }, { "path": ".gitignore", "content": ".DS_Store\n.env\nDesktop.ini\nThumbs.db\nnode_modules/*\n!node_modules/boost\n/dist\n/compiled\n/secret\n*.log\n.idea\n.vscode\npackage-lock.json\nconfig.json\n" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"semi\": false,\n \"jsxSingleQuote\": true\n}" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - 8\nscript:\n - npm run lint && npm run test\n - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = \"master\" ]]; then npm install -g grunt npm@6.4 && grunt pre-build; fi'\nafter_success:\n - openssl aes-256-cbc -K $encrypted_440d7f9a3c38_key -iv $encrypted_440d7f9a3c38_iv\n -in .snapcraft/travis_snapcraft.cfg -out .snapcraft/snapcraft.cfg -d\nsudo: required\nservices:\n - docker\ndeploy:\n 'on':\n branch: master\n provider: script\n script: if [ ${TRAVIS_NODE_VERSION} = \"stable\" ];then docker run -v $(pwd):$(pwd) -t snapcore/snapcraft sh -c \"apt update -qq\n && cd $(pwd) && snapcraft && snapcraft push *.snap --release edge\"; fi\n skip_cleanup: true\n" }, { "path": "FAQ.md", "content": "# Frequently Asked Questions\n\n\n
Allowing dangerous HTML tags\n\nSometimes it is useful to allow dangerous HTML tags to add interactivity to your notebook. One of the example is to use details/summary as a way to expand/collaps your todo-list.\n\n* How to enable:\n * Go to **Preferences** → **Interface** → **Sanitization** → **Allow dangerous html tags**\n* Example note: Multiple todo-list\n * Create new notes\n * Paste the below code, and you'll see that you can expand/collaps the todo-list, and you can have multiple todo-list in your note.\n \n```html\n
What I want to do\n\n- [x] Create an awesome feature X\n- [ ] Do my homework\n\n
\n```\n\n
\n\n## Other questions\n\nYou can ask [here][ISSUES]\n\n[ISSUES]: https://github.com/BoostIO/Boostnote/issues\n" }, { "path": "ISSUE_TEMPLATE.md", "content": "# Current behavior\n\n\n\n# Expected behavior\n\n\n\n# Steps to reproduce\n\n\n\n1. \n2. \n3. \n\n# Environment\n\n- Boostnote version: \n- OS version and name: \n\n\n" }, { "path": "LICENSE", "content": "GPL-3.0\n\nBoostnote - an open source note-taking app made for programmers just like you.\n\nCopyright (C) 2017 - 2019 BoostIO\n\nThis program is free software: you can redistribute it and/or modify\nit under the terms of the GNU General Public License as published by\nthe Free Software Foundation, either version 3 of the License, or\n(at your option) any later version.\n\nThis program is distributed in the hope that it will be useful,\nbut WITHOUT ANY WARRANTY; without even the implied warranty of\nMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\nGNU General Public License for more details.\n\nYou should have received a copy of the GNU General Public License\nalong with this program. If not, see .\n" }, { "path": "PULL_REQUEST_TEMPLATE.md", "content": "\n\n## Description\n\n\n\n## Issue fixed\n\n\n\n\n\n## Type of changes\n\n- :white_circle: Bug fix (Change that fixed an issue)\n- :white_circle: Breaking change (Change that can cause existing functionality to change)\n- :white_circle: Improvement (Change that improves the code. Maybe performance or development improvement)\n- :white_circle: Feature (Change that adds new functionality)\n- :white_circle: Documentation change (Change that modifies documentation. Maybe typo fixes)\n\n## Checklist:\n\n- :white_circle: My code follows [the project code style](docs/code_style.md)\n- :white_circle: I have written test for my code and it has been tested\n- :white_circle: All existing tests have been passed\n- :white_circle: I have attached a screenshot/video to visualize my change if possible\n- :white_circle: This PR will modify the UI or affects the UX\n- :white_circle: This PR will add/update/delete a keybinding\n" }, { "path": "__mocks__/electron.js", "content": "module.exports = {\n require: jest.genMockFunction(),\n match: jest.genMockFunction(),\n app: jest.genMockFunction(),\n remote: jest.genMockFunction(),\n dialog: jest.genMockFunction()\n}\n" }, { "path": "appdmg.json", "content": "{\n \"title\": \"Boostnote\",\n \"icon\": \"resources/dmg.icns\",\n \"background\": \"resources/boostnote-install.png\",\n \"icon-size\": 80,\n \"contents\": [\n { \"x\": 448, \"y\": 344, \"type\": \"link\", \"path\": \"/Applications\" },\n { \"x\": 192, \"y\": 344, \"type\": \"file\", \"path\": \"dist/Boostnote-darwin-x64/Boostnote.app\" }\n ]\n\n}\n" }, { "path": "browser/components/CodeEditor.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport _ from 'lodash'\nimport CodeMirror from 'codemirror'\nimport hljs from 'highlight.js'\nimport 'codemirror-mode-elixir'\nimport attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'\nimport convertModeName from 'browser/lib/convertModeName'\nimport { options, TableEditor, Alignment } from '@susisu/mte-kernel'\nimport TextEditorInterface from 'browser/lib/TextEditorInterface'\nimport eventEmitter from 'browser/main/lib/eventEmitter'\nimport iconv from 'iconv-lite'\n\nimport { isMarkdownTitleURL } from 'browser/lib/utils'\nimport styles from '../components/CodeEditor.styl'\nconst { ipcRenderer, remote, clipboard } = require('electron')\nimport normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'\nconst spellcheck = require('browser/lib/spellcheck')\nconst buildEditorContextMenu = require('browser/lib/contextMenuBuilder')\n .buildEditorContextMenu\nimport { createTurndownService } from '../lib/turndown'\nimport { languageMaps } from '../lib/CMLanguageList'\nimport snippetManager from '../lib/SnippetManager'\nimport { findStorage } from 'browser/lib/findStorage'\nimport { sendWakatimeHeartBeat } from 'browser/lib/wakatime-plugin'\nimport {\n generateInEditor,\n tocExistsInEditor\n} from 'browser/lib/markdown-toc-generator'\nimport markdownlint from 'markdownlint'\nimport Jsonlint from 'jsonlint-mod'\nimport { DEFAULT_CONFIG } from '../main/lib/ConfigManager'\nimport prettier from 'prettier'\n\nCodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'\n\nconst buildCMRulers = (rulers, enableRulers) =>\n enableRulers\n ? rulers.map(ruler => ({\n column: ruler\n }))\n : []\n\nfunction translateHotkey(hotkey) {\n return hotkey\n .replace(/\\s*\\+\\s*/g, '-')\n .replace(/Command/g, 'Cmd')\n .replace(/Control/g, 'Ctrl')\n}\n\nexport default class CodeEditor extends React.Component {\n constructor(props) {\n super(props)\n\n this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {\n leading: false,\n trailing: true\n })\n this.changeHandler = (editor, changeObject) =>\n this.handleChange(editor, changeObject)\n this.highlightHandler = (editor, changeObject) =>\n this.handleHighlight(editor, changeObject)\n this.focusHandler = () => {\n ipcRenderer.send('editor:focused', true)\n }\n this.debouncedDeletionOfAttachments = _.debounce(\n attachmentManagement.deleteAttachmentsNotPresentInNote,\n 30000\n )\n this.blurHandler = (editor, e) => {\n ipcRenderer.send('editor:focused', false)\n if (e == null) return null\n let el = e.relatedTarget\n while (el != null) {\n if (el === this.refs.root) {\n return\n }\n el = el.parentNode\n }\n this.props.onBlur != null && this.props.onBlur(e)\n const { storageKey, noteKey } = this.props\n if (this.props.deleteUnusedAttachments === true) {\n this.debouncedDeletionOfAttachments(\n this.editor.getValue(),\n storageKey,\n noteKey\n )\n }\n }\n this.pasteHandler = (editor, e) => {\n e.preventDefault()\n\n this.handlePaste(editor, false)\n }\n this.loadStyleHandler = e => {\n this.editor.refresh()\n }\n this.searchHandler = (e, msg) => this.handleSearch(msg)\n this.searchState = null\n this.scrollToLineHandeler = this.scrollToLine.bind(this)\n this.getCodeEditorLintConfig = this.getCodeEditorLintConfig.bind(this)\n this.validatorOfMarkdown = this.validatorOfMarkdown.bind(this)\n\n this.formatTable = () => this.handleFormatTable()\n\n if (props.switchPreview !== 'RIGHTCLICK') {\n this.contextMenuHandler = function(editor, event) {\n const menu = buildEditorContextMenu(editor, event)\n if (menu != null) {\n setTimeout(() => menu.popup(remote.getCurrentWindow()), 30)\n }\n }\n }\n\n this.editorActivityHandler = () => this.handleEditorActivity()\n\n this.turndownService = createTurndownService()\n\n // wakatime\n const { storageKey, noteKey } = this.props\n const storage = findStorage(storageKey)\n if (storage)\n sendWakatimeHeartBeat(storage.path, noteKey, storage.name, {\n isWrite: false,\n hasFileChanges: false,\n isFileChange: true\n })\n }\n\n handleSearch(msg) {\n const cm = this.editor\n const component = this\n\n if (component.searchState) cm.removeOverlay(component.searchState)\n if (msg.length < 1) return\n\n cm.operation(function() {\n component.searchState = makeOverlay(msg, 'searching')\n cm.addOverlay(component.searchState)\n\n function makeOverlay(query, style) {\n query = new RegExp(\n query.replace(/[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g, '\\\\$&'),\n 'gi'\n )\n return {\n token: function(stream) {\n query.lastIndex = stream.pos\n var match = query.exec(stream.string)\n if (match && match.index === stream.pos) {\n stream.pos += match[0].length || 1\n return style\n } else if (match) {\n stream.pos = match.index\n } else {\n stream.skipToEnd()\n }\n }\n }\n }\n })\n }\n\n handleFormatTable() {\n this.tableEditor.formatAll(\n options({\n textWidthOptions: {}\n })\n )\n }\n\n handleEditorActivity() {\n if (this.props.onCursorActivity) {\n this.props.onCursorActivity(this.editor)\n }\n\n if (!this.textEditorInterface.transaction) {\n this.updateTableEditorState()\n }\n }\n\n updateDefaultKeyMap() {\n const { hotkey } = this.props\n const self = this\n const expandSnippet = snippetManager.expandSnippet\n\n this.defaultKeyMap = CodeMirror.normalizeKeyMap({\n Tab: function(cm) {\n const cursor = cm.getCursor()\n const line = cm.getLine(cursor.line)\n const cursorPosition = cursor.ch\n const charBeforeCursor = line.substr(cursorPosition - 1, 1)\n if (cm.somethingSelected()) cm.indentSelection('add')\n else {\n const tabs = cm.getOption('indentWithTabs')\n if (line.trimLeft().match(/^(-|\\*|\\+) (\\[( |x)] )?$/)) {\n cm.execCommand('goLineStart')\n if (tabs) {\n cm.execCommand('insertTab')\n } else {\n cm.execCommand('insertSoftTab')\n }\n cm.execCommand('goLineEnd')\n } else if (\n !charBeforeCursor.match(/\\t|\\s|\\r|\\n|\\$/) &&\n cursor.ch > 1\n ) {\n // text expansion on tab key if the char before is alphabet\n const wordBeforeCursor = self.getWordBeforeCursor(\n line,\n cursor.line,\n cursor.ch\n )\n if (expandSnippet(wordBeforeCursor, cursor, cm) === false) {\n if (tabs) {\n cm.execCommand('insertTab')\n } else {\n cm.execCommand('insertSoftTab')\n }\n }\n } else {\n if (tabs) {\n cm.execCommand('insertTab')\n } else {\n cm.execCommand('insertSoftTab')\n }\n }\n }\n },\n 'Cmd-Left': function(cm) {\n cm.execCommand('goLineLeft')\n },\n 'Cmd-T': function(cm) {\n // Do nothing\n },\n [translateHotkey(hotkey.insertDate)]: function(cm) {\n const dateNow = new Date()\n if (self.props.dateFormatISO8601) {\n cm.replaceSelection(dateNow.toISOString().split('T')[0])\n } else {\n cm.replaceSelection(dateNow.toLocaleDateString())\n }\n },\n [translateHotkey(hotkey.insertDateTime)]: function(cm) {\n const dateNow = new Date()\n if (self.props.dateFormatISO8601) {\n cm.replaceSelection(dateNow.toISOString())\n } else {\n cm.replaceSelection(dateNow.toLocaleString())\n }\n },\n Enter: 'boostNewLineAndIndentContinueMarkdownList',\n 'Ctrl-C': cm => {\n if (cm.getOption('keyMap').substr(0, 3) === 'vim') {\n document.execCommand('copy')\n }\n return CodeMirror.Pass\n },\n [translateHotkey(hotkey.prettifyMarkdown)]: cm => {\n // Default / User configured prettier options\n const currentConfig = JSON.parse(self.props.prettierConfig)\n\n // Parser type will always need to be markdown so we override the option before use\n currentConfig.parser = 'markdown'\n\n // Get current cursor position\n const cursorPos = cm.getCursor()\n currentConfig.cursorOffset = cm.doc.indexFromPos(cursorPos)\n\n // Prettify contents of editor\n const formattedTextDetails = prettier.formatWithCursor(\n cm.doc.getValue(),\n currentConfig\n )\n\n const formattedText = formattedTextDetails.formatted\n const formattedCursorPos = formattedTextDetails.cursorOffset\n cm.doc.setValue(formattedText)\n\n // Reset Cursor position to be at the same markdown as was before prettifying\n const newCursorPos = cm.doc.posFromIndex(formattedCursorPos)\n cm.doc.setCursor(newCursorPos)\n },\n [translateHotkey(hotkey.sortLines)]: cm => {\n const selection = cm.doc.getSelection()\n const appendLineBreak = /\\n$/.test(selection)\n\n const sorted = _.split(selection.trim(), '\\n').sort()\n const sortedString =\n _.join(sorted, '\\n') + (appendLineBreak ? '\\n' : '')\n\n cm.doc.replaceSelection(sortedString)\n },\n [translateHotkey(hotkey.pasteSmartly)]: cm => {\n this.handlePaste(cm, true)\n }\n })\n }\n\n updateTableEditorState() {\n const active = this.tableEditor.cursorIsInTable(this.tableEditorOptions)\n if (active) {\n if (this.extraKeysMode !== 'editor') {\n this.extraKeysMode = 'editor'\n this.editor.setOption('extraKeys', this.editorKeyMap)\n }\n } else {\n if (this.extraKeysMode !== 'default') {\n this.extraKeysMode = 'default'\n this.editor.setOption('extraKeys', this.defaultKeyMap)\n this.tableEditor.resetSmartCursor()\n }\n }\n }\n\n componentDidMount() {\n const { rulers, enableRulers, enableMarkdownLint, RTL } = this.props\n eventEmitter.on('line:jump', this.scrollToLineHandeler)\n\n snippetManager.init()\n this.updateDefaultKeyMap()\n\n this.value = this.props.value\n this.editor = CodeMirror(this.refs.root, {\n rulers: buildCMRulers(rulers, enableRulers),\n value: this.props.value,\n linesHighlighted: this.props.linesHighlighted,\n lineNumbers: this.props.displayLineNumbers,\n lineWrapping: this.props.lineWrapping,\n theme: this.props.theme,\n indentUnit: this.props.indentSize,\n tabSize: this.props.indentSize,\n indentWithTabs: this.props.indentType !== 'space',\n keyMap: this.props.keyMap,\n scrollPastEnd: this.props.scrollPastEnd,\n inputStyle: 'textarea',\n dragDrop: false,\n direction: RTL ? 'rtl' : 'ltr',\n rtlMoveVisually: RTL,\n foldGutter: true,\n lint: enableMarkdownLint ? this.getCodeEditorLintConfig() : false,\n gutters: [\n 'CodeMirror-linenumbers',\n 'CodeMirror-foldgutter',\n 'CodeMirror-lint-markers'\n ],\n autoCloseBrackets: {\n codeBlock: {\n pairs: this.props.codeBlockMatchingPairs,\n closeBefore: this.props.codeBlockMatchingCloseBefore,\n triples: this.props.codeBlockMatchingTriples,\n explode: this.props.codeBlockExplodingPairs\n },\n markdown: {\n pairs: this.props.matchingPairs,\n closeBefore: this.props.matchingCloseBefore,\n triples: this.props.matchingTriples,\n explode: this.props.explodingPairs\n }\n },\n extraKeys: this.defaultKeyMap,\n prettierConfig: this.props.prettierConfig\n })\n\n document.querySelector(\n '.CodeMirror-lint-markers'\n ).style.display = enableMarkdownLint ? 'inline-block' : 'none'\n\n if (!this.props.mode && this.props.value && this.props.autoDetect) {\n this.autoDetectLanguage(this.props.value)\n } else {\n this.setMode(this.props.mode)\n }\n\n this.editor.on('focus', this.focusHandler)\n this.editor.on('blur', this.blurHandler)\n this.editor.on('change', this.changeHandler)\n this.editor.on('gutterClick', this.highlightHandler)\n this.editor.on('paste', this.pasteHandler)\n if (this.props.switchPreview !== 'RIGHTCLICK') {\n this.editor.on('contextmenu', this.contextMenuHandler)\n }\n eventEmitter.on('top:search', this.searchHandler)\n\n eventEmitter.emit('code:init')\n this.editor.on('scroll', this.scrollHandler)\n this.editor.on('cursorActivity', this.editorActivityHandler)\n\n const editorTheme = document.getElementById('editorTheme')\n editorTheme.addEventListener('load', this.loadStyleHandler)\n\n CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)\n CodeMirror.Vim.defineEx('q!', 'q!', this.quitEditor)\n CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)\n CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)\n CodeMirror.Vim.map('ZZ', ':q', 'normal')\n\n this.textEditorInterface = new TextEditorInterface(this.editor)\n this.tableEditor = new TableEditor(this.textEditorInterface)\n if (this.props.spellCheck) {\n this.editor.addPanel(this.createSpellCheckPanel(), { position: 'bottom' })\n }\n\n eventEmitter.on('code:format-table', this.formatTable)\n\n this.tableEditorOptions = options({\n smartCursor: true\n })\n\n this.editorKeyMap = CodeMirror.normalizeKeyMap({\n Tab: () => {\n this.tableEditor.nextCell(this.tableEditorOptions)\n },\n 'Shift-Tab': () => {\n this.tableEditor.previousCell(this.tableEditorOptions)\n },\n Enter: () => {\n this.tableEditor.nextRow(this.tableEditorOptions)\n },\n 'Ctrl-Enter': () => {\n this.tableEditor.escape(this.tableEditorOptions)\n },\n 'Cmd-Enter': () => {\n this.tableEditor.escape(this.tableEditorOptions)\n },\n 'Shift-Ctrl-Left': () => {\n this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions)\n },\n 'Shift-Cmd-Left': () => {\n this.tableEditor.alignColumn(Alignment.LEFT, this.tableEditorOptions)\n },\n 'Shift-Ctrl-Right': () => {\n this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions)\n },\n 'Shift-Cmd-Right': () => {\n this.tableEditor.alignColumn(Alignment.RIGHT, this.tableEditorOptions)\n },\n 'Shift-Ctrl-Up': () => {\n this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions)\n },\n 'Shift-Cmd-Up': () => {\n this.tableEditor.alignColumn(Alignment.CENTER, this.tableEditorOptions)\n },\n 'Shift-Ctrl-Down': () => {\n this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions)\n },\n 'Shift-Cmd-Down': () => {\n this.tableEditor.alignColumn(Alignment.NONE, this.tableEditorOptions)\n },\n 'Ctrl-Left': () => {\n this.tableEditor.moveFocus(0, -1, this.tableEditorOptions)\n },\n 'Cmd-Left': () => {\n this.tableEditor.moveFocus(0, -1, this.tableEditorOptions)\n },\n 'Ctrl-Right': () => {\n this.tableEditor.moveFocus(0, 1, this.tableEditorOptions)\n },\n 'Cmd-Right': () => {\n this.tableEditor.moveFocus(0, 1, this.tableEditorOptions)\n },\n 'Ctrl-Up': () => {\n this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions)\n },\n 'Cmd-Up': () => {\n this.tableEditor.moveFocus(-1, 0, this.tableEditorOptions)\n },\n 'Ctrl-Down': () => {\n this.tableEditor.moveFocus(1, 0, this.tableEditorOptions)\n },\n 'Cmd-Down': () => {\n this.tableEditor.moveFocus(1, 0, this.tableEditorOptions)\n },\n 'Ctrl-K Ctrl-I': () => {\n this.tableEditor.insertRow(this.tableEditorOptions)\n },\n 'Cmd-K Cmd-I': () => {\n this.tableEditor.insertRow(this.tableEditorOptions)\n },\n 'Ctrl-L Ctrl-I': () => {\n this.tableEditor.deleteRow(this.tableEditorOptions)\n },\n 'Cmd-L Cmd-I': () => {\n this.tableEditor.deleteRow(this.tableEditorOptions)\n },\n 'Ctrl-K Ctrl-J': () => {\n this.tableEditor.insertColumn(this.tableEditorOptions)\n },\n 'Cmd-K Cmd-J': () => {\n this.tableEditor.insertColumn(this.tableEditorOptions)\n },\n 'Ctrl-L Ctrl-J': () => {\n this.tableEditor.deleteColumn(this.tableEditorOptions)\n },\n 'Cmd-L Cmd-J': () => {\n this.tableEditor.deleteColumn(this.tableEditorOptions)\n },\n 'Alt-Shift-Ctrl-Left': () => {\n this.tableEditor.moveColumn(-1, this.tableEditorOptions)\n },\n 'Alt-Shift-Cmd-Left': () => {\n this.tableEditor.moveColumn(-1, this.tableEditorOptions)\n },\n 'Alt-Shift-Ctrl-Right': () => {\n this.tableEditor.moveColumn(1, this.tableEditorOptions)\n },\n 'Alt-Shift-Cmd-Right': () => {\n this.tableEditor.moveColumn(1, this.tableEditorOptions)\n },\n 'Alt-Shift-Ctrl-Up': () => {\n this.tableEditor.moveRow(-1, this.tableEditorOptions)\n },\n 'Alt-Shift-Cmd-Up': () => {\n this.tableEditor.moveRow(-1, this.tableEditorOptions)\n },\n 'Alt-Shift-Ctrl-Down': () => {\n this.tableEditor.moveRow(1, this.tableEditorOptions)\n },\n 'Alt-Shift-Cmd-Down': () => {\n this.tableEditor.moveRow(1, this.tableEditorOptions)\n }\n })\n\n if (this.props.enableTableEditor) {\n this.editor.on('changes', this.editorActivityHandler)\n }\n\n this.setState({\n clientWidth: this.refs.root.clientWidth\n })\n\n this.initialHighlighting()\n }\n\n getWordBeforeCursor(line, lineNumber, cursorPosition) {\n let wordBeforeCursor = ''\n const originCursorPosition = cursorPosition\n const emptyChars = /\\t|\\s|\\r|\\n|\\$/\n\n // to prevent the word is long that will crash the whole app\n // the safeStop is there to stop user to expand words that longer than 20 chars\n const safeStop = 20\n\n while (cursorPosition > 0) {\n const currentChar = line.substr(cursorPosition - 1, 1)\n // if char is not an empty char\n if (!emptyChars.test(currentChar)) {\n wordBeforeCursor = currentChar + wordBeforeCursor\n } else if (wordBeforeCursor.length >= safeStop) {\n throw new Error('Stopped after 20 loops for safety reason !')\n } else {\n break\n }\n cursorPosition--\n }\n\n return {\n text: wordBeforeCursor,\n range: {\n from: {\n line: lineNumber,\n ch: originCursorPosition\n },\n to: {\n line: lineNumber,\n ch: cursorPosition\n }\n }\n }\n }\n\n quitEditor() {\n document.querySelector('textarea').blur()\n }\n\n componentWillUnmount() {\n this.editor.off('focus', this.focusHandler)\n this.editor.off('blur', this.blurHandler)\n this.editor.off('change', this.changeHandler)\n this.editor.off('paste', this.pasteHandler)\n eventEmitter.off('top:search', this.searchHandler)\n this.editor.off('scroll', this.scrollHandler)\n this.editor.off('cursorActivity', this.editorActivityHandler)\n this.editor.off('contextmenu', this.contextMenuHandler)\n\n const editorTheme = document.getElementById('editorTheme')\n editorTheme.removeEventListener('load', this.loadStyleHandler)\n\n spellcheck.setLanguage(null, spellcheck.SPELLCHECK_DISABLED)\n eventEmitter.off('code:format-table', this.formatTable)\n\n if (this.props.enableTableEditor) {\n this.editor.off('changes', this.editorActivityHandler)\n }\n }\n\n componentDidUpdate(prevProps, prevState) {\n let needRefresh = false\n const {\n rulers,\n enableRulers,\n enableMarkdownLint,\n customMarkdownLintConfig\n } = this.props\n if (prevProps.mode !== this.props.mode) {\n this.setMode(this.props.mode)\n }\n if (prevProps.theme !== this.props.theme) {\n this.editor.setOption('theme', this.props.theme)\n // editor should be refreshed after css loaded\n }\n if (prevProps.fontSize !== this.props.fontSize) {\n needRefresh = true\n }\n if (prevProps.fontFamily !== this.props.fontFamily) {\n needRefresh = true\n }\n if (prevProps.keyMap !== this.props.keyMap) {\n needRefresh = true\n }\n if (prevProps.RTL !== this.props.RTL) {\n this.editor.setOption('direction', this.props.RTL ? 'rtl' : 'ltr')\n this.editor.setOption('rtlMoveVisually', this.props.RTL)\n }\n if (\n prevProps.enableMarkdownLint !== enableMarkdownLint ||\n prevProps.customMarkdownLintConfig !== customMarkdownLintConfig\n ) {\n if (!enableMarkdownLint) {\n this.editor.setOption('lint', { default: false })\n document.querySelector('.CodeMirror-lint-markers').style.display =\n 'none'\n } else {\n this.editor.setOption('lint', this.getCodeEditorLintConfig())\n document.querySelector('.CodeMirror-lint-markers').style.display =\n 'inline-block'\n }\n needRefresh = true\n }\n\n if (\n prevProps.enableRulers !== enableRulers ||\n prevProps.rulers !== rulers\n ) {\n this.editor.setOption('rulers', buildCMRulers(rulers, enableRulers))\n }\n\n if (prevProps.indentSize !== this.props.indentSize) {\n this.editor.setOption('indentUnit', this.props.indentSize)\n this.editor.setOption('tabSize', this.props.indentSize)\n }\n if (prevProps.indentType !== this.props.indentType) {\n this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')\n }\n\n if (prevProps.displayLineNumbers !== this.props.displayLineNumbers) {\n this.editor.setOption('lineNumbers', this.props.displayLineNumbers)\n }\n\n if (prevProps.lineWrapping !== this.props.lineWrapping) {\n this.editor.setOption('lineWrapping', this.props.lineWrapping)\n }\n\n if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {\n this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)\n }\n\n if (\n prevProps.matchingPairs !== this.props.matchingPairs ||\n prevProps.matchingCloseBefore !== this.props.matchingCloseBefore ||\n prevProps.matchingTriples !== this.props.matchingTriples ||\n prevProps.explodingPairs !== this.props.explodingPairs ||\n prevProps.codeBlockMatchingPairs !== this.props.codeBlockMatchingPairs ||\n prevProps.codeBlockMatchingCloseBefore !==\n this.props.codeBlockMatchingCloseBefore ||\n prevProps.codeBlockMatchingTriples !==\n this.props.codeBlockMatchingTriples ||\n prevProps.codeBlockExplodingPairs !== this.props.codeBlockExplodingPairs\n ) {\n const autoCloseBrackets = {\n codeBlock: {\n pairs: this.props.codeBlockMatchingPairs,\n closeBefore: this.props.codeBlockMatchingCloseBefore,\n triples: this.props.codeBlockMatchingTriples,\n explode: this.props.codeBlockExplodingPairs\n },\n markdown: {\n pairs: this.props.matchingPairs,\n closeBefore: this.props.matchingCloseBefore,\n triples: this.props.matchingTriples,\n explode: this.props.explodingPairs\n }\n }\n\n this.editor.setOption('autoCloseBrackets', autoCloseBrackets)\n }\n\n if (prevProps.enableTableEditor !== this.props.enableTableEditor) {\n if (this.props.enableTableEditor) {\n this.editor.on('cursorActivity', this.editorActivityHandler)\n this.editor.on('changes', this.editorActivityHandler)\n } else {\n this.editor.off('cursorActivity', this.editorActivityHandler)\n this.editor.off('changes', this.editorActivityHandler)\n }\n\n this.extraKeysMode = 'default'\n this.editor.setOption('extraKeys', this.defaultKeyMap)\n }\n\n if (prevProps.hotkey !== this.props.hotkey) {\n this.updateDefaultKeyMap()\n\n if (this.extraKeysMode === 'default') {\n this.editor.setOption('extraKeys', this.defaultKeyMap)\n }\n }\n\n if (this.state.clientWidth !== this.refs.root.clientWidth) {\n this.setState({\n clientWidth: this.refs.root.clientWidth\n })\n\n needRefresh = true\n }\n\n if (prevProps.spellCheck !== this.props.spellCheck) {\n if (this.props.spellCheck === false) {\n spellcheck.setLanguage(this.editor, spellcheck.SPELLCHECK_DISABLED)\n const elem = document.getElementById('editor-bottom-panel')\n elem.parentNode.removeChild(elem)\n } else {\n this.editor.addPanel(this.createSpellCheckPanel(), {\n position: 'bottom'\n })\n }\n }\n if (\n prevProps.deleteUnusedAttachments !== this.props.deleteUnusedAttachments\n ) {\n this.editor.setOption(\n 'deleteUnusedAttachments',\n this.props.deleteUnusedAttachments\n )\n }\n\n if (needRefresh) {\n this.editor.refresh()\n }\n }\n\n getCodeEditorLintConfig() {\n const { mode } = this.props\n const checkMarkdownNoteIsOpen = mode === 'Boost Flavored Markdown'\n\n return checkMarkdownNoteIsOpen\n ? {\n getAnnotations: this.validatorOfMarkdown,\n async: true\n }\n : false\n }\n\n validatorOfMarkdown(text, updateLinting) {\n const { customMarkdownLintConfig } = this.props\n let lintConfigJson\n try {\n Jsonlint.parse(customMarkdownLintConfig)\n lintConfigJson = JSON.parse(customMarkdownLintConfig)\n } catch (err) {\n eventEmitter.emit('APP_SETTING_ERROR')\n return\n }\n const lintOptions = {\n strings: {\n content: text\n },\n config: lintConfigJson\n }\n\n return markdownlint(lintOptions, (err, result) => {\n if (!err) {\n const foundIssues = []\n const splitText = text.split('\\n')\n result.content.map(item => {\n let ruleNames = ''\n item.ruleNames.map((ruleName, index) => {\n ruleNames += ruleName\n ruleNames += index === item.ruleNames.length - 1 ? ': ' : '/'\n })\n const lineNumber = item.lineNumber - 1\n foundIssues.push({\n from: CodeMirror.Pos(lineNumber, 0),\n to: CodeMirror.Pos(lineNumber, splitText[lineNumber].length),\n message: ruleNames + item.ruleDescription,\n severity: 'warning'\n })\n })\n updateLinting(foundIssues)\n }\n })\n }\n\n setMode(mode) {\n let syntax = CodeMirror.findModeByName(convertModeName(mode || 'text'))\n if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')\n\n this.editor.setOption('mode', syntax.mime)\n CodeMirror.autoLoadMode(this.editor, syntax.mode)\n }\n\n handleChange(editor, changeObject) {\n this.debouncedDeletionOfAttachments.cancel()\n\n spellcheck.handleChange(editor, changeObject)\n\n // The current note contains an toc. We'll check for changes on headlines.\n // origin is undefined when markdownTocGenerator replace the old tod\n if (tocExistsInEditor(editor) && changeObject.origin !== undefined) {\n let requireTocUpdate\n\n // Check if one of the changed lines contains a headline\n for (let line = 0; line < changeObject.text.length; line++) {\n if (\n this.linePossibleContainsHeadline(\n editor.getLine(changeObject.from.line + line)\n )\n ) {\n requireTocUpdate = true\n break\n }\n }\n\n if (!requireTocUpdate) {\n // Check if one of the removed lines contains a headline\n for (let line = 0; line < changeObject.removed.length; line++) {\n if (this.linePossibleContainsHeadline(changeObject.removed[line])) {\n requireTocUpdate = true\n break\n }\n }\n }\n\n if (requireTocUpdate) {\n generateInEditor(editor)\n }\n }\n\n this.updateHighlight(editor, changeObject)\n\n this.value = editor.getValue()\n\n const { storageKey, noteKey } = this.props\n const storage = findStorage(storageKey)\n if (this.props.onChange) {\n this.props.onChange(editor)\n }\n\n const isWrite = !!this.props.onChange\n const hasFileChanges = isWrite\n\n if (storage) {\n sendWakatimeHeartBeat(storage.path, noteKey, storage.name, {\n isWrite,\n hasFileChanges,\n isFileChange: false\n })\n }\n }\n\n linePossibleContainsHeadline(currentLine) {\n // We can't check if the line start with # because when some write text before\n // the # we also need to update the toc\n return currentLine.includes('# ')\n }\n\n incrementLines(start, linesAdded, linesRemoved, editor) {\n const highlightedLines = editor.options.linesHighlighted\n\n const totalHighlightedLines = highlightedLines.length\n\n const offset = linesAdded - linesRemoved\n\n // Store new items to be added as we're changing the lines\n const newLines = []\n\n let i = totalHighlightedLines\n\n while (i--) {\n const lineNumber = highlightedLines[i]\n\n // Interval that will need to be updated\n // Between start and (start + offset) remove highlight\n if (lineNumber >= start) {\n highlightedLines.splice(highlightedLines.indexOf(lineNumber), 1)\n\n // Lines that need to be relocated\n if (lineNumber >= start + linesRemoved) {\n newLines.push(lineNumber + offset)\n }\n }\n }\n\n // Adding relocated lines\n highlightedLines.push(...newLines)\n\n if (this.props.onChange) {\n this.props.onChange(editor)\n }\n }\n\n handleHighlight(editor, changeObject) {\n const lines = editor.options.linesHighlighted\n\n if (!lines.includes(changeObject)) {\n lines.push(changeObject)\n editor.addLineClass(\n changeObject,\n 'text',\n 'CodeMirror-activeline-background'\n )\n } else {\n lines.splice(lines.indexOf(changeObject), 1)\n editor.removeLineClass(\n changeObject,\n 'text',\n 'CodeMirror-activeline-background'\n )\n }\n if (this.props.onChange) {\n this.props.onChange(editor)\n }\n }\n\n updateHighlight(editor, changeObject) {\n const linesAdded = changeObject.text.length - 1\n const linesRemoved = changeObject.removed.length - 1\n\n // If no lines added or removed return\n if (linesAdded === 0 && linesRemoved === 0) {\n return\n }\n\n let start = changeObject.from.line\n\n switch (changeObject.origin) {\n case '+insert\", \"undo':\n start += 1\n break\n\n case 'paste':\n case '+delete':\n case '+input':\n if (changeObject.to.ch !== 0 || changeObject.from.ch !== 0) {\n start += 1\n }\n break\n\n default:\n return\n }\n\n this.incrementLines(start, linesAdded, linesRemoved, editor)\n }\n\n moveCursorTo(row, col) {}\n\n scrollToLine(event, num) {\n const cursor = {\n line: num,\n ch: 1\n }\n this.editor.setCursor(cursor)\n const top = this.editor.charCoords({ line: num, ch: 0 }, 'local').top\n const middleHeight = this.editor.getScrollerElement().offsetHeight / 2\n this.editor.scrollTo(null, top - middleHeight - 5)\n }\n\n focus() {\n this.editor.focus()\n }\n\n blur() {\n this.editor.blur()\n }\n\n reload() {\n // Change event shouldn't be fired when switch note\n this.editor.off('change', this.changeHandler)\n this.value = this.props.value\n this.editor.setValue(this.props.value)\n this.editor.clearHistory()\n this.restartHighlighting()\n this.editor.on('change', this.changeHandler)\n this.editor.refresh()\n\n // wakatime\n const { storageKey, noteKey } = this.props\n const storage = findStorage(storageKey)\n if (storage)\n sendWakatimeHeartBeat(storage.path, noteKey, storage.name, {\n isWrite: false,\n hasFileChanges: false,\n isFileChange: true\n })\n }\n\n setValue(value) {\n const cursor = this.editor.getCursor()\n this.editor.setValue(value)\n this.editor.setCursor(cursor)\n }\n\n /**\n * Update content of one line\n * @param {Number} lineNumber\n * @param {String} content\n */\n setLineContent(lineNumber, content) {\n const prevContent = this.editor.getLine(lineNumber)\n const prevContentLength = prevContent ? prevContent.length : 0\n this.editor.replaceRange(\n content,\n { line: lineNumber, ch: 0 },\n { line: lineNumber, ch: prevContentLength }\n )\n }\n\n handleDropImage(dropEvent) {\n dropEvent.preventDefault()\n const { storageKey, noteKey } = this.props\n attachmentManagement.handleAttachmentDrop(\n this,\n storageKey,\n noteKey,\n dropEvent\n )\n }\n\n insertAttachmentMd(imageMd) {\n this.editor.replaceSelection(imageMd)\n }\n\n autoDetectLanguage(content) {\n const res = hljs.highlightAuto(content, Object.keys(languageMaps))\n this.setMode(languageMaps[res.language])\n }\n\n handlePaste(editor, forceSmartPaste) {\n const { storageKey, noteKey, fetchUrlTitle, enableSmartPaste } = this.props\n\n const isURL = str =>\n /(?:^\\w+:|^)\\/\\/(?:[^\\s\\.]+\\.\\S{2}|localhost[\\:?\\d]*)/.test(str)\n\n const isInLinkTag = editor => {\n const startCursor = editor.getCursor('start')\n const prevChar = editor.getRange(\n {\n line: startCursor.line,\n ch: startCursor.ch - 2\n },\n {\n line: startCursor.line,\n ch: startCursor.ch\n }\n )\n const endCursor = editor.getCursor('end')\n const nextChar = editor.getRange(\n {\n line: endCursor.line,\n ch: endCursor.ch\n },\n {\n line: endCursor.line,\n ch: endCursor.ch + 1\n }\n )\n return prevChar === '](' && nextChar === ')'\n }\n\n const isInFencedCodeBlock = editor => {\n const cursor = editor.getCursor()\n\n let token = editor.getTokenAt(cursor)\n if (token.state.fencedState) {\n return true\n }\n\n let line = (line = cursor.line - 1)\n while (line >= 0) {\n token = editor.getTokenAt({\n ch: 3,\n line\n })\n\n if (token.start === token.end) {\n --line\n } else if (token.type === 'comment') {\n if (line > 0) {\n token = editor.getTokenAt({\n ch: 3,\n line: line - 1\n })\n\n return token.type !== 'comment'\n } else {\n return true\n }\n } else {\n return false\n }\n }\n\n return false\n }\n\n const pastedTxt = clipboard.readText()\n\n if (isInFencedCodeBlock(editor)) {\n this.handlePasteText(editor, pastedTxt)\n } else if (\n fetchUrlTitle &&\n isMarkdownTitleURL(pastedTxt) &&\n !isInLinkTag(editor)\n ) {\n this.handlePasteUrl(editor, pastedTxt)\n } else if (fetchUrlTitle && isURL(pastedTxt) && !isInLinkTag(editor)) {\n this.handlePasteUrl(editor, pastedTxt)\n } else if (attachmentManagement.isAttachmentLink(pastedTxt)) {\n attachmentManagement\n .handleAttachmentLinkPaste(storageKey, noteKey, pastedTxt)\n .then(modifiedText => {\n this.editor.replaceSelection(modifiedText)\n })\n } else {\n const image = clipboard.readImage()\n if (!image.isEmpty()) {\n attachmentManagement.handlePasteNativeImage(\n this,\n storageKey,\n noteKey,\n image\n )\n } else if (enableSmartPaste || forceSmartPaste) {\n const pastedHtml = clipboard.readHTML()\n if (pastedHtml.length > 0) {\n this.handlePasteHtml(editor, pastedHtml)\n } else {\n this.handlePasteText(editor, pastedTxt)\n }\n } else {\n this.handlePasteText(editor, pastedTxt)\n }\n }\n\n if (!this.props.mode && this.props.autoDetect) {\n this.autoDetectLanguage(editor.doc.getValue())\n }\n }\n\n handleScroll(e) {\n if (this.props.onScroll) {\n this.props.onScroll(e)\n }\n }\n\n handlePasteUrl(editor, pastedTxt) {\n let taggedUrl = `<${pastedTxt}>`\n let urlToFetch = pastedTxt\n let titleMark = ''\n\n if (isMarkdownTitleURL(pastedTxt)) {\n const pastedTxtSplitted = pastedTxt.split(' ')\n titleMark = `${pastedTxtSplitted[0]} `\n urlToFetch = pastedTxtSplitted[1]\n taggedUrl = `<${urlToFetch}>`\n }\n\n editor.replaceSelection(taggedUrl)\n\n const isImageReponse = response => {\n return (\n response.headers.has('content-type') &&\n response.headers.get('content-type').match(/^image\\/.+$/)\n )\n }\n const replaceTaggedUrl = replacement => {\n const value = editor.getValue()\n const cursor = editor.getCursor()\n const newValue = value.replace(taggedUrl, titleMark + replacement)\n const newCursor = Object.assign({}, cursor, {\n ch: cursor.ch + newValue.length - (value.length - titleMark.length)\n })\n\n editor.setValue(newValue)\n editor.setCursor(newCursor)\n }\n\n fetch(urlToFetch, {\n method: 'get'\n })\n .then(response => {\n if (isImageReponse(response)) {\n return this.mapImageResponse(response, urlToFetch)\n } else {\n return this.mapNormalResponse(response, urlToFetch)\n }\n })\n .then(replacement => {\n replaceTaggedUrl(replacement)\n })\n .catch(e => {\n replaceTaggedUrl(pastedTxt)\n })\n }\n\n handlePasteHtml(editor, pastedHtml) {\n const markdown = this.turndownService.turndown(pastedHtml)\n editor.replaceSelection(markdown)\n }\n\n handlePasteText(editor, pastedTxt) {\n editor.replaceSelection(pastedTxt)\n }\n\n mapNormalResponse(response, pastedTxt) {\n return this.decodeResponse(response).then(body => {\n return new Promise((resolve, reject) => {\n try {\n const parsedBody = new window.DOMParser().parseFromString(\n body,\n 'text/html'\n )\n const escapePipe = str => {\n return str.replace('|', '\\\\|')\n }\n const linkWithTitle = `[${escapePipe(\n parsedBody.title\n )}](${pastedTxt})`\n resolve(linkWithTitle)\n } catch (e) {\n reject(e)\n }\n })\n })\n }\n\n initialHighlighting() {\n if (this.editor.options.linesHighlighted == null) {\n return\n }\n\n const totalHighlightedLines = this.editor.options.linesHighlighted.length\n const totalAvailableLines = this.editor.lineCount()\n\n for (let i = 0; i < totalHighlightedLines; i++) {\n const lineNumber = this.editor.options.linesHighlighted[i]\n if (lineNumber > totalAvailableLines) {\n // make sure that we skip the invalid lines althrough this case should not be happened.\n continue\n }\n this.editor.addLineClass(\n lineNumber,\n 'text',\n 'CodeMirror-activeline-background'\n )\n }\n }\n\n restartHighlighting() {\n this.editor.options.linesHighlighted = this.props.linesHighlighted\n this.initialHighlighting()\n }\n\n mapImageResponse(response, pastedTxt) {\n return new Promise((resolve, reject) => {\n try {\n const url = response.url\n const name = url.substring(url.lastIndexOf('/') + 1)\n const imageLinkWithName = `![${name}](${pastedTxt})`\n resolve(imageLinkWithName)\n } catch (e) {\n reject(e)\n }\n })\n }\n\n decodeResponse(response) {\n const headers = response.headers\n const _charset = headers.has('content-type')\n ? this.extractContentTypeCharset(headers.get('content-type'))\n : undefined\n return response.arrayBuffer().then(buff => {\n return new Promise((resolve, reject) => {\n try {\n const charset =\n _charset !== undefined && iconv.encodingExists(_charset)\n ? _charset\n : 'utf-8'\n resolve(iconv.decode(Buffer.from(buff), charset).toString())\n } catch (e) {\n reject(e)\n }\n })\n })\n }\n\n extractContentTypeCharset(contentType) {\n return contentType\n .split(';')\n .filter(str => {\n return str\n .trim()\n .toLowerCase()\n .startsWith('charset')\n })\n .map(str => {\n return str.replace(/['\"]/g, '').split('=')[1]\n })[0]\n }\n\n render() {\n const { className, fontSize, fontFamily, width, height } = this.props\n const normalisedFontFamily = normalizeEditorFontFamily(fontFamily)\n\n return (\n this.handleDropImage(e)}\n />\n )\n }\n\n createSpellCheckPanel() {\n const panel = document.createElement('div')\n panel.className = 'panel bottom'\n panel.id = 'editor-bottom-panel'\n const dropdown = document.createElement('select')\n dropdown.title = 'Spellcheck'\n dropdown.className = styles['spellcheck-select']\n dropdown.addEventListener('change', e =>\n spellcheck.setLanguage(this.editor, dropdown.value)\n )\n const options = spellcheck.getAvailableDictionaries()\n for (const op of options) {\n const option = document.createElement('option')\n option.value = op.value\n option.innerHTML = op.label\n dropdown.appendChild(option)\n }\n panel.appendChild(dropdown)\n return panel\n }\n}\n\nCodeEditor.propTypes = {\n value: PropTypes.string,\n enableRulers: PropTypes.bool,\n rulers: PropTypes.arrayOf(Number),\n mode: PropTypes.string,\n className: PropTypes.string,\n onBlur: PropTypes.func,\n onChange: PropTypes.func,\n readOnly: PropTypes.bool,\n autoDetect: PropTypes.bool,\n spellCheck: PropTypes.bool,\n enableMarkdownLint: PropTypes.bool,\n customMarkdownLintConfig: PropTypes.string,\n deleteUnusedAttachments: PropTypes.bool,\n RTL: PropTypes.bool\n}\n\nCodeEditor.defaultProps = {\n readOnly: false,\n theme: 'xcode',\n keyMap: 'sublime',\n fontSize: 14,\n fontFamily: 'Monaco, Consolas',\n indentSize: 4,\n indentType: 'space',\n autoDetect: false,\n spellCheck: false,\n enableMarkdownLint: DEFAULT_CONFIG.editor.enableMarkdownLint,\n customMarkdownLintConfig: DEFAULT_CONFIG.editor.customMarkdownLintConfig,\n prettierConfig: DEFAULT_CONFIG.editor.prettierConfig,\n deleteUnusedAttachments: DEFAULT_CONFIG.editor.deleteUnusedAttachments,\n RTL: false\n}\n" }, { "path": "browser/components/CodeEditor.styl", "content": ".codeEditor-typo\n text-decoration underline wavy red\n\n.spellcheck-select\n border: none\n" }, { "path": "browser/components/ColorPicker.js", "content": "import React from 'react'\nimport PropTypes from 'prop-types'\nimport { SketchPicker } from 'react-color'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './ColorPicker.styl'\n\nconst componentHeight = 330\n\nclass ColorPicker extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n color: this.props.color || '#939395'\n }\n\n this.onColorChange = this.onColorChange.bind(this)\n this.handleConfirm = this.handleConfirm.bind(this)\n }\n\n componentWillReceiveProps(nextProps) {\n this.onColorChange(nextProps.color)\n }\n\n onColorChange(color) {\n this.setState({\n color\n })\n }\n\n handleConfirm() {\n this.props.onConfirm(this.state.color)\n }\n\n render() {\n const { onReset, onCancel, targetRect } = this.props\n const { color } = this.state\n\n const clientHeight = document.body.clientHeight\n const alignX = targetRect.right + 4\n let alignY = targetRect.top\n if (targetRect.top + componentHeight > clientHeight) {\n alignY = targetRect.bottom - componentHeight\n }\n\n return (\n \n
\n \n
\n \n \n \n
\n
\n )\n }\n}\n\nColorPicker.propTypes = {\n color: PropTypes.string,\n targetRect: PropTypes.object,\n onConfirm: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n onReset: PropTypes.func.isRequired\n}\n\nexport default CSSModules(ColorPicker, styles)\n" }, { "path": "browser/components/ColorPicker.styl", "content": ".colorPicker\n position fixed\n z-index 2\n display flex\n flex-direction column\n\n.cover\n position fixed\n top 0\n right 0\n bottom 0\n left 0\n\n.footer\n display flex\n justify-content center\n z-index 2\n align-items center\n & > button + button\n margin-left 10px\n\n.btn-cancel,\n.btn-confirm,\n.btn-reset\n vertical-align middle\n height 25px\n margin-top 2.5px\n border-radius 2px\n border none\n padding 0 5px\n background-color $default-button-background\n &:hover\n background-color $default-button-background--hover\n.btn-confirm\n background-color #1EC38B\n &:hover\n background-color darken(#1EC38B, 25%)\n\n\n" }, { "path": "browser/components/MarkdownEditor.js", "content": "/* eslint-disable camelcase */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './MarkdownEditor.styl'\nimport CodeEditor from 'browser/components/CodeEditor'\nimport MarkdownPreview from 'browser/components/MarkdownPreview'\nimport eventEmitter from 'browser/main/lib/eventEmitter'\nimport { findStorage } from 'browser/lib/findStorage'\nimport ConfigManager from 'browser/main/lib/ConfigManager'\nimport attachmentManagement from 'browser/main/lib/dataApi/attachmentManagement'\n\nclass MarkdownEditor extends React.Component {\n constructor(props) {\n super(props)\n\n // char codes for ctrl + w\n this.escapeFromEditor = [17, 87]\n\n // ctrl + shift + ;\n this.supportMdSelectionBold = [16, 17, 186]\n\n this.state = {\n status:\n props.config.editor.switchPreview === 'RIGHTCLICK'\n ? props.config.editor.delfaultStatus\n : 'CODE',\n renderValue: props.value,\n keyPressed: new Set(),\n isLocked: props.isLocked\n }\n\n this.lockEditorCode = this.handleLockEditor.bind(this)\n this.focusEditor = this.focusEditor.bind(this)\n\n this.previewRef = React.createRef()\n }\n\n componentDidMount() {\n this.value = this.refs.code.value\n eventEmitter.on('editor:lock', this.lockEditorCode)\n eventEmitter.on('editor:focus', this.focusEditor)\n }\n\n componentDidUpdate() {\n this.value = this.refs.code.value\n }\n\n UNSAFE_componentWillReceiveProps(props) {\n if (props.value !== this.props.value) {\n this.queueRendering(props.value)\n }\n }\n\n componentWillUnmount() {\n this.cancelQueue()\n eventEmitter.off('editor:lock', this.lockEditorCode)\n eventEmitter.off('editor:focus', this.focusEditor)\n }\n\n focusEditor() {\n this.setState(\n {\n status: 'CODE'\n },\n () => {\n if (this.refs.code == null) {\n return\n }\n this.refs.code.focus()\n }\n )\n }\n\n queueRendering(value) {\n clearTimeout(this.renderTimer)\n this.renderTimer = setTimeout(() => {\n this.renderPreview(value)\n }, 500)\n }\n\n cancelQueue() {\n clearTimeout(this.renderTimer)\n }\n\n renderPreview(value) {\n this.setState({\n renderValue: value\n })\n }\n\n setValue(value) {\n this.refs.code.setValue(value)\n }\n\n handleChange(e) {\n this.value = this.refs.code.value\n this.props.onChange(e)\n }\n\n handleContextMenu(e) {\n if (this.state.isLocked) return\n const { config } = this.props\n if (config.editor.switchPreview === 'RIGHTCLICK') {\n const newStatus = this.state.status === 'PREVIEW' ? 'CODE' : 'PREVIEW'\n this.setState(\n {\n status: newStatus\n },\n () => {\n if (newStatus === 'CODE') {\n this.refs.code.focus()\n } else {\n this.previewRef.current.focus()\n }\n eventEmitter.emit('topbar:togglelockbutton', this.state.status)\n\n const newConfig = Object.assign({}, config)\n newConfig.editor.delfaultStatus = newStatus\n ConfigManager.set(newConfig)\n }\n )\n }\n }\n\n handleBlur(e) {\n if (this.state.isLocked) return\n this.setState({ keyPressed: new Set() })\n const { config } = this.props\n if (\n config.editor.switchPreview === 'BLUR' ||\n (config.editor.switchPreview === 'DBL_CLICK' &&\n this.state.status === 'CODE')\n ) {\n const cursorPosition = this.refs.code.editor.getCursor()\n this.setState(\n {\n status: 'PREVIEW'\n },\n () => {\n this.previewRef.current.focus()\n this.previewRef.current.scrollToLine(cursorPosition.line)\n }\n )\n eventEmitter.emit('topbar:togglelockbutton', this.state.status)\n }\n }\n\n handleDoubleClick(e) {\n if (this.state.isLocked) return\n this.setState({ keyPressed: new Set() })\n const { config } = this.props\n if (config.editor.switchPreview === 'DBL_CLICK') {\n this.setState(\n {\n status: 'CODE'\n },\n () => {\n this.refs.code.focus()\n eventEmitter.emit('topbar:togglelockbutton', this.state.status)\n }\n )\n }\n }\n\n handlePreviewMouseDown(e) {\n this.previewMouseDownedAt = new Date()\n }\n\n handlePreviewMouseUp(e) {\n const { config } = this.props\n if (\n config.editor.switchPreview === 'BLUR' &&\n new Date() - this.previewMouseDownedAt < 200\n ) {\n this.setState(\n {\n status: 'CODE'\n },\n () => {\n this.refs.code.focus()\n }\n )\n eventEmitter.emit('topbar:togglelockbutton', this.state.status)\n }\n }\n\n handleCheckboxClick(e) {\n e.preventDefault()\n e.stopPropagation()\n const idMatch = /checkbox-([0-9]+)/\n const checkedMatch = /^(\\s*>?)*\\s*[+\\-*] \\[x]/i\n const uncheckedMatch = /^(\\s*>?)*\\s*[+\\-*] \\[ ]/\n const checkReplace = /\\[x]/i\n const uncheckReplace = /\\[ ]/\n if (idMatch.test(e.target.getAttribute('id'))) {\n const lineIndex =\n parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1\n const lines = this.refs.code.value.split('\\n')\n\n const targetLine = lines[lineIndex]\n let newLine = targetLine\n\n if (targetLine.match(checkedMatch)) {\n newLine = targetLine.replace(checkReplace, '[ ]')\n }\n if (targetLine.match(uncheckedMatch)) {\n newLine = targetLine.replace(uncheckReplace, '[x]')\n }\n this.refs.code.setLineContent(lineIndex, newLine)\n }\n }\n\n focus() {\n if (this.state.status === 'PREVIEW') {\n this.setState(\n {\n status: 'CODE'\n },\n () => {\n this.refs.code.focus()\n }\n )\n } else {\n this.refs.code.focus()\n }\n eventEmitter.emit('topbar:togglelockbutton', this.state.status)\n }\n\n reload() {\n this.refs.code.reload()\n this.cancelQueue()\n this.renderPreview(this.props.value)\n }\n\n handleKeyDown(e) {\n const { config } = this.props\n if (this.state.status !== 'CODE') return false\n const keyPressed = this.state.keyPressed\n keyPressed.add(e.keyCode)\n this.setState({ keyPressed })\n const isNoteHandlerKey = el => {\n return keyPressed.has(el)\n }\n // These conditions are for ctrl-e and ctrl-w\n if (\n keyPressed.size === this.escapeFromEditor.length &&\n !this.state.isLocked &&\n this.state.status === 'CODE' &&\n this.escapeFromEditor.every(isNoteHandlerKey)\n ) {\n this.handleContextMenu()\n if (config.editor.switchPreview === 'BLUR') document.activeElement.blur()\n }\n if (\n keyPressed.size === this.supportMdSelectionBold.length &&\n this.supportMdSelectionBold.every(isNoteHandlerKey)\n ) {\n this.addMdAroundWord('**')\n }\n }\n\n addMdAroundWord(mdElement) {\n if (this.refs.code.editor.getSelection()) {\n return this.addMdAroundSelection(mdElement)\n }\n const currentCaret = this.refs.code.editor.getCursor()\n const word = this.refs.code.editor.findWordAt(currentCaret)\n const cmDoc = this.refs.code.editor.getDoc()\n cmDoc.replaceRange(mdElement, word.anchor)\n cmDoc.replaceRange(mdElement, {\n line: word.head.line,\n ch: word.head.ch + mdElement.length\n })\n }\n\n addMdAroundSelection(mdElement) {\n this.refs.code.editor.replaceSelection(\n `${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`\n )\n }\n\n handleDropImage(dropEvent) {\n dropEvent.preventDefault()\n const { storageKey, noteKey } = this.props\n\n this.setState(\n {\n status: 'CODE'\n },\n () => {\n this.refs.code.focus()\n\n this.refs.code.editor.execCommand('goDocEnd')\n this.refs.code.editor.execCommand('goLineEnd')\n this.refs.code.editor.execCommand('newlineAndIndent')\n\n attachmentManagement.handleAttachmentDrop(\n this.refs.code,\n storageKey,\n noteKey,\n dropEvent\n )\n }\n )\n }\n\n handleKeyUp(e) {\n const keyPressed = this.state.keyPressed\n keyPressed.delete(e.keyCode)\n this.setState({ keyPressed })\n }\n\n handleLockEditor() {\n this.setState({ isLocked: !this.state.isLocked })\n }\n\n render() {\n const {\n className,\n value,\n config,\n storageKey,\n noteKey,\n linesHighlighted,\n getNote,\n RTL\n } = this.props\n\n let editorFontSize = parseInt(config.editor.fontSize, 10)\n if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14\n let editorIndentSize = parseInt(config.editor.indentSize, 10)\n if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4\n\n const previewStyle = {}\n if (this.props.ignorePreviewPointerEvents)\n previewStyle.pointerEvents = 'none'\n\n const storage = findStorage(storageKey)\n\n return (\n this.handleContextMenu(e)}\n tabIndex='-1'\n onKeyDown={e => this.handleKeyDown(e)}\n onKeyUp={e => this.handleKeyUp(e)}\n >\n this.handleChange(e)}\n onBlur={e => this.handleBlur(e)}\n spellCheck={config.editor.spellcheck}\n enableSmartPaste={config.editor.enableSmartPaste}\n hotkey={config.hotkey}\n switchPreview={config.editor.switchPreview}\n enableMarkdownLint={config.editor.enableMarkdownLint}\n customMarkdownLintConfig={config.editor.customMarkdownLintConfig}\n dateFormatISO8601={config.editor.dateFormatISO8601}\n prettierConfig={config.editor.prettierConfig}\n deleteUnusedAttachments={config.editor.deleteUnusedAttachments}\n RTL={RTL}\n />\n this.handleContextMenu(e)}\n onDoubleClick={e => this.handleDoubleClick(e)}\n tabIndex='0'\n value={this.state.renderValue}\n onMouseUp={e => this.handlePreviewMouseUp(e)}\n onMouseDown={e => this.handlePreviewMouseDown(e)}\n onCheckboxClick={e => this.handleCheckboxClick(e)}\n showCopyNotification={config.ui.showCopyNotification}\n storagePath={storage.path}\n noteKey={noteKey}\n customCSS={config.preview.customCSS}\n allowCustomCSS={config.preview.allowCustomCSS}\n lineThroughCheckbox={config.preview.lineThroughCheckbox}\n getNote={getNote}\n export={config.export}\n onDrop={e => this.handleDropImage(e)}\n RTL={RTL}\n />\n \n )\n }\n}\n\nMarkdownEditor.propTypes = {\n className: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n ignorePreviewPointerEvents: PropTypes.bool\n}\n\nexport default CSSModules(MarkdownEditor, styles)\n" }, { "path": "browser/components/MarkdownEditor.styl", "content": ".root\n position relative\n\n.codeEditor\n absolute top bottom left right\n\n.hide\n z-index 0\n opacity 0\n pointer-events none\n\n.codeEditor--hide\n @extend .codeEditor\n @extend .hide\n\n.preview\n display block\n absolute top bottom left right\n background-color white\n height 100%\n width 100%\n\n.preview--hide\n @extend .preview\n @extend .hide\n\n" }, { "path": "browser/components/MarkdownPreview.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport { connect } from 'react-redux'\nimport Markdown from 'browser/lib/markdown'\nimport _ from 'lodash'\nimport CodeMirror from 'codemirror'\nimport 'codemirror-mode-elixir'\nimport consts from 'browser/lib/consts'\nimport Raphael from 'raphael'\nimport flowchart from 'flowchart'\nimport mermaidRender from './render/MermaidRender'\nimport SequenceDiagram from '@rokt33r/js-sequence-diagrams'\nimport Chart from 'chart.js'\nimport eventEmitter from 'browser/main/lib/eventEmitter'\nimport config from 'browser/main/lib/ConfigManager'\nimport htmlTextHelper from 'browser/lib/htmlTextHelper'\nimport convertModeName from 'browser/lib/convertModeName'\nimport copy from 'copy-to-clipboard'\nimport mdurl from 'mdurl'\nimport exportNote from 'browser/main/lib/dataApi/exportNote'\nimport formatMarkdown from 'browser/main/lib/dataApi/formatMarkdown'\nimport formatHTML, {\n CSS_FILES,\n buildStyle,\n getCodeThemeLink,\n getStyleParams,\n escapeHtmlCharactersInCodeTag\n} from 'browser/main/lib/dataApi/formatHTML'\nimport formatPDF from 'browser/main/lib/dataApi/formatPDF'\nimport yaml from 'js-yaml'\nimport i18n from 'browser/lib/i18n'\nimport path from 'path'\nimport { remote, shell } from 'electron'\nimport attachmentManagement from '../main/lib/dataApi/attachmentManagement'\nimport filenamify from 'filenamify'\nimport { render } from 'react-dom'\nimport Carousel from 'react-image-carousel'\nimport { push } from 'connected-react-router'\nimport ConfigManager from '../main/lib/ConfigManager'\nimport uiThemes from 'browser/lib/ui-themes'\nimport { buildMarkdownPreviewContextMenu } from 'browser/lib/contextMenuBuilder'\n\nconst dialog = remote.dialog\n\nconst scrollBarStyle = `\n::-webkit-scrollbar {\n ${config.get().ui.showScrollBar ? '' : 'display: none;'}\n width: 12px;\n}\n\n::-webkit-scrollbar-thumb {\n ${config.get().ui.showScrollBar ? '' : 'display: none;'}\n background-color: rgba(0, 0, 0, 0.15);\n}\n\n::-webkit-scrollbar-track-piece {\n background-color: inherit;\n}\n`\nconst scrollBarDarkStyle = `\n::-webkit-scrollbar {\n ${config.get().ui.showScrollBar ? '' : 'display: none;'}\n width: 12px;\n}\n\n::-webkit-scrollbar-thumb {\n ${config.get().ui.showScrollBar ? '' : 'display: none;'}\n background-color: rgba(0, 0, 0, 0.3);\n}\n\n::-webkit-scrollbar-track-piece {\n background-color: inherit;\n}\n`\n\n// return the line number of the line that used to generate the specified element\n// return -1 if the line is not found\nfunction getSourceLineNumberByElement(element) {\n let isHasLineNumber = element.dataset.line !== undefined\n let parent = element\n while (!isHasLineNumber && parent.parentElement !== null) {\n parent = parent.parentElement\n isHasLineNumber = parent.dataset.line !== undefined\n }\n return parent.dataset.line !== undefined ? parseInt(parent.dataset.line) : -1\n}\n\nclass MarkdownPreview extends React.Component {\n constructor(props) {\n super(props)\n\n this.contextMenuHandler = e => this.handleContextMenu(e)\n this.mouseDownHandler = e => this.handleMouseDown(e)\n this.mouseUpHandler = e => this.handleMouseUp(e)\n this.DoubleClickHandler = e => this.handleDoubleClick(e)\n this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {\n leading: false,\n trailing: true\n })\n this.checkboxClickHandler = e => this.handleCheckboxClick(e)\n this.saveAsTextHandler = () => this.handleSaveAsText()\n this.saveAsMdHandler = () => this.handleSaveAsMd()\n this.saveAsHtmlHandler = () => this.handleSaveAsHtml()\n this.saveAsPdfHandler = () => this.handleSaveAsPdf()\n this.printHandler = () => this.handlePrint()\n this.resizeHandler = _.throttle(this.handleResize.bind(this), 100)\n\n this.linkClickHandler = this.handleLinkClick.bind(this)\n this.initMarkdown = this.initMarkdown.bind(this)\n this.initMarkdown()\n }\n\n initMarkdown() {\n const { smartQuotes, sanitize, breaks } = this.props\n this.markdown = new Markdown({\n typographer: smartQuotes,\n sanitize,\n breaks\n })\n }\n\n handleCheckboxClick(e) {\n this.props.onCheckboxClick(e)\n }\n\n handleScroll(e) {\n if (this.props.onScroll) {\n this.props.onScroll(e)\n }\n }\n\n handleContextMenu(event) {\n const menu = buildMarkdownPreviewContextMenu(this, event)\n const switchPreview = ConfigManager.get().editor.switchPreview\n if (menu != null && switchPreview !== 'RIGHTCLICK') {\n menu.popup(remote.getCurrentWindow())\n } else if (_.isFunction(this.props.onContextMenu)) {\n this.props.onContextMenu(event)\n }\n }\n\n handleDoubleClick(e) {\n if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)\n }\n\n handleMouseDown(e) {\n const config = ConfigManager.get()\n const clickElement = e.target\n const targetTag = clickElement.tagName // The direct parent HTML of where was clicked ie \"BODY\" or \"DIV\"\n const lineNumber = getSourceLineNumberByElement(clickElement) // Line location of element clicked.\n\n if (\n config.editor.switchPreview === 'RIGHTCLICK' &&\n e.buttons === 2 &&\n config.editor.type === 'SPLIT'\n ) {\n eventEmitter.emit('topbar:togglemodebutton', 'CODE')\n }\n if (e.ctrlKey) {\n if (config.editor.type === 'SPLIT') {\n if (lineNumber !== -1) {\n eventEmitter.emit('line:jump', lineNumber)\n }\n } else {\n if (lineNumber !== -1) {\n eventEmitter.emit('editor:focus')\n eventEmitter.emit('line:jump', lineNumber)\n }\n }\n }\n\n if (this.props.onMouseDown != null && targetTag === 'BODY')\n this.props.onMouseDown(e)\n }\n\n handleMouseUp(e) {\n if (!this.props.onMouseUp) return\n if (e.target != null && e.target.tagName === 'A') {\n return null\n }\n if (this.props.onMouseUp != null) this.props.onMouseUp(e)\n }\n\n handleSaveAsText() {\n this.exportAsDocument('txt')\n }\n\n handleSaveAsMd() {\n this.exportAsDocument('md', formatMarkdown(this.props))\n }\n\n handleSaveAsHtml() {\n this.exportAsDocument('html', formatHTML(this.props))\n }\n\n handleSaveAsPdf() {\n this.exportAsDocument('pdf', formatPDF(this.props))\n }\n\n handlePrint() {\n this.refs.root.contentWindow.print()\n }\n\n exportAsDocument(fileType, contentFormatter) {\n const note = this.props.getNote()\n\n const options = {\n defaultPath: filenamify(note.title, {\n replacement: '_'\n }),\n filters: [{ name: 'Documents', extensions: [fileType] }],\n properties: ['openFile', 'createDirectory']\n }\n\n dialog.showSaveDialog(remote.getCurrentWindow(), options, filename => {\n if (filename) {\n const storagePath = this.props.storagePath\n\n exportNote(storagePath, note, filename, contentFormatter)\n .then(res => {\n dialog.showMessageBox(remote.getCurrentWindow(), {\n type: 'info',\n message: `Exported to ${filename}`,\n buttons: [i18n.__('Ok')]\n })\n })\n .catch(err => {\n dialog.showErrorBox(\n 'Export error',\n err ? err.message || err : 'Unexpected error during export'\n )\n throw err\n })\n }\n })\n }\n\n fixDecodedURI(node) {\n if (\n node &&\n node.children.length === 1 &&\n typeof node.children[0] === 'string'\n ) {\n const { innerText, href } = node\n\n node.innerText = mdurl.decode(href) === innerText ? href : innerText\n }\n }\n\n getScrollBarStyle() {\n const { theme } = this.props\n\n return uiThemes.some(item => item.name === theme && item.isDark)\n ? scrollBarDarkStyle\n : scrollBarStyle\n }\n\n componentDidMount() {\n const { onDrop } = this.props\n\n this.refs.root.setAttribute('sandbox', 'allow-scripts')\n this.refs.root.contentWindow.document.body.addEventListener(\n 'contextmenu',\n this.contextMenuHandler\n )\n\n let styles = `\n \n \n \n \n `\n\n CSS_FILES.forEach(file => {\n styles += ``\n })\n\n this.refs.root.contentWindow.document.head.innerHTML = styles\n this.rewriteIframe()\n this.applyStyle()\n\n this.refs.root.contentWindow.document.addEventListener(\n 'mousedown',\n this.mouseDownHandler\n )\n this.refs.root.contentWindow.document.addEventListener(\n 'mouseup',\n this.mouseUpHandler\n )\n this.refs.root.contentWindow.document.addEventListener(\n 'dblclick',\n this.DoubleClickHandler\n )\n this.refs.root.contentWindow.document.addEventListener(\n 'drop',\n onDrop || this.preventImageDroppedHandler\n )\n this.refs.root.contentWindow.document.addEventListener(\n 'dragover',\n this.preventImageDroppedHandler\n )\n this.refs.root.contentWindow.document.addEventListener(\n 'scroll',\n this.scrollHandler\n )\n this.refs.root.contentWindow.addEventListener('resize', this.resizeHandler)\n eventEmitter.on('export:save-text', this.saveAsTextHandler)\n eventEmitter.on('export:save-md', this.saveAsMdHandler)\n eventEmitter.on('export:save-html', this.saveAsHtmlHandler)\n eventEmitter.on('export:save-pdf', this.saveAsPdfHandler)\n eventEmitter.on('print', this.printHandler)\n }\n\n componentWillUnmount() {\n const { onDrop } = this.props\n\n this.refs.root.contentWindow.document.body.removeEventListener(\n 'contextmenu',\n this.contextMenuHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'mousedown',\n this.mouseDownHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'mouseup',\n this.mouseUpHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'dblclick',\n this.DoubleClickHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'drop',\n onDrop || this.preventImageDroppedHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'dragover',\n this.preventImageDroppedHandler\n )\n this.refs.root.contentWindow.document.removeEventListener(\n 'scroll',\n this.scrollHandler\n )\n this.refs.root.contentWindow.removeEventListener(\n 'resize',\n this.resizeHandler\n )\n eventEmitter.off('export:save-text', this.saveAsTextHandler)\n eventEmitter.off('export:save-md', this.saveAsMdHandler)\n eventEmitter.off('export:save-html', this.saveAsHtmlHandler)\n eventEmitter.off('export:save-pdf', this.saveAsPdfHandler)\n eventEmitter.off('print', this.printHandler)\n }\n\n componentDidUpdate(prevProps) {\n // actual rewriteIframe function should be called only once\n let needsRewriteIframe = false\n if (prevProps.value !== this.props.value) needsRewriteIframe = true\n if (\n prevProps.smartQuotes !== this.props.smartQuotes ||\n prevProps.sanitize !== this.props.sanitize ||\n prevProps.mermaidHTMLLabel !== this.props.mermaidHTMLLabel ||\n prevProps.smartArrows !== this.props.smartArrows ||\n prevProps.breaks !== this.props.breaks ||\n prevProps.lineThroughCheckbox !== this.props.lineThroughCheckbox\n ) {\n this.initMarkdown()\n needsRewriteIframe = true\n }\n if (\n prevProps.fontFamily !== this.props.fontFamily ||\n prevProps.fontSize !== this.props.fontSize ||\n prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||\n prevProps.codeBlockTheme !== this.props.codeBlockTheme ||\n prevProps.lineNumber !== this.props.lineNumber ||\n prevProps.showCopyNotification !== this.props.showCopyNotification ||\n prevProps.theme !== this.props.theme ||\n prevProps.scrollPastEnd !== this.props.scrollPastEnd ||\n prevProps.allowCustomCSS !== this.props.allowCustomCSS ||\n prevProps.customCSS !== this.props.customCSS ||\n prevProps.RTL !== this.props.RTL\n ) {\n this.applyStyle()\n needsRewriteIframe = true\n }\n\n if (needsRewriteIframe) {\n this.rewriteIframe()\n }\n\n // Should scroll to top after selecting another note\n if (prevProps.noteKey !== this.props.noteKey) {\n this.scrollTo(0, 0)\n }\n }\n\n applyStyle() {\n const {\n fontFamily,\n fontSize,\n codeBlockFontFamily,\n lineNumber,\n codeBlockTheme,\n scrollPastEnd,\n theme,\n allowCustomCSS,\n customCSS,\n RTL\n } = getStyleParams(this.props)\n\n this.getWindow().document.getElementById(\n 'codeTheme'\n ).href = getCodeThemeLink(codeBlockTheme)\n\n this.getWindow().document.getElementById('style').innerHTML = buildStyle(\n fontFamily,\n fontSize,\n codeBlockFontFamily,\n lineNumber,\n scrollPastEnd,\n theme,\n allowCustomCSS,\n customCSS,\n RTL\n )\n }\n\n rewriteIframe() {\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll(\n 'input[type=\"checkbox\"]'\n ),\n el => {\n el.removeEventListener('click', this.checkboxClickHandler)\n }\n )\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('a'),\n el => {\n el.removeEventListener('click', this.linkClickHandler)\n }\n )\n\n const {\n theme,\n indentSize,\n showCopyNotification,\n storagePath,\n noteKey,\n sanitize,\n mermaidHTMLLabel\n } = this.props\n let { value, codeBlockTheme } = this.props\n\n this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)\n if (sanitize === 'NONE') {\n const splitWithCodeTag = value.split('```')\n value = escapeHtmlCharactersInCodeTag(splitWithCodeTag)\n }\n const renderedHTML = this.markdown.render(value)\n attachmentManagement.migrateAttachments(value, storagePath, noteKey)\n this.refs.root.contentWindow.document.body.innerHTML = attachmentManagement.fixLocalURLS(\n renderedHTML,\n storagePath\n )\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll(\n 'input[type=\"checkbox\"]'\n ),\n el => {\n el.addEventListener('click', this.checkboxClickHandler)\n }\n )\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('a'),\n el => {\n this.fixDecodedURI(el)\n el.addEventListener('click', this.linkClickHandler)\n }\n )\n\n codeBlockTheme = consts.THEMES.find(theme => theme.name === codeBlockTheme)\n\n const codeBlockThemeClassName = codeBlockTheme\n ? codeBlockTheme.className\n : 'cm-s-default'\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.code code'),\n el => {\n let syntax = CodeMirror.findModeByName(convertModeName(el.className))\n if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')\n CodeMirror.requireMode(syntax.mode, () => {\n const content = htmlTextHelper.decodeEntities(el.innerHTML)\n const copyIcon = document.createElement('i')\n copyIcon.innerHTML =\n ''\n copyIcon.onclick = e => {\n e.preventDefault()\n e.stopPropagation()\n copy(content)\n if (showCopyNotification) {\n this.notify('Saved to Clipboard!', {\n body: 'Paste it wherever you want!',\n silent: true\n })\n }\n }\n\n el.parentNode.appendChild(copyIcon)\n el.innerHTML = ''\n el.parentNode.className += ` ${codeBlockThemeClassName}`\n\n CodeMirror.runMode(content, syntax.mime, el, {\n tabSize: indentSize\n })\n })\n }\n )\n\n const opts = {}\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.flowchart'),\n el => {\n Raphael.setWindow(this.getWindow())\n try {\n const diagram = flowchart.parse(\n htmlTextHelper.decodeEntities(el.innerHTML)\n )\n el.innerHTML = ''\n diagram.drawSVG(el, opts)\n _.forEach(el.querySelectorAll('a'), el => {\n el.addEventListener('click', this.linkClickHandler)\n })\n } catch (e) {\n el.className = 'flowchart-error'\n el.innerHTML = 'Flowchart parse error: ' + e.message\n }\n }\n )\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.sequence'),\n el => {\n Raphael.setWindow(this.getWindow())\n try {\n const diagram = SequenceDiagram.parse(\n htmlTextHelper.decodeEntities(el.innerHTML)\n )\n el.innerHTML = ''\n diagram.drawSVG(el, { theme: 'simple' })\n _.forEach(el.querySelectorAll('a'), el => {\n el.addEventListener('click', this.linkClickHandler)\n })\n } catch (e) {\n el.className = 'sequence-error'\n el.innerHTML = 'Sequence diagram parse error: ' + e.message\n }\n }\n )\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.chart'),\n el => {\n try {\n const format = el.attributes.getNamedItem('data-format').value\n const chartConfig =\n format === 'yaml'\n ? yaml.load(el.innerHTML)\n : JSON.parse(el.innerHTML)\n el.innerHTML = ''\n\n const canvas = document.createElement('canvas')\n el.appendChild(canvas)\n\n const height = el.attributes.getNamedItem('data-height')\n if (height && height.value !== 'undefined') {\n el.style.height = height.value + 'vh'\n canvas.height = height.value + 'vh'\n }\n\n // eslint-disable-next-line no-unused-vars\n const chart = new Chart(canvas, chartConfig)\n } catch (e) {\n el.className = 'chart-error'\n el.innerHTML = 'chartjs diagram parse error: ' + e.message\n }\n }\n )\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),\n el => {\n mermaidRender(\n el,\n htmlTextHelper.decodeEntities(el.innerHTML),\n theme,\n mermaidHTMLLabel\n )\n }\n )\n\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('.gallery'),\n el => {\n const images = el.innerHTML.split(/\\n/g).filter(i => i.length > 0)\n el.innerHTML = ''\n\n const height = el.attributes.getNamedItem('data-height')\n if (height && height.value !== 'undefined') {\n el.style.height = height.value + 'vh'\n }\n\n let autoplay = el.attributes.getNamedItem('data-autoplay')\n if (autoplay && autoplay.value !== 'undefined') {\n autoplay = parseInt(autoplay.value, 10) || 0\n } else {\n autoplay = 0\n }\n\n render(, el)\n }\n )\n\n const markdownPreviewIframe = document.querySelector('.MarkdownPreview')\n const rect = markdownPreviewIframe.getBoundingClientRect()\n const config = { attributes: true, subtree: true }\n const imgObserver = new MutationObserver(mutationList => {\n for (const mu of mutationList) {\n if (mu.target.className === 'carouselContent-enter-done') {\n this.setImgOnClickEventHelper(mu.target, rect)\n break\n }\n }\n })\n\n const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(\n 'img'\n )\n for (const img of imgList) {\n const parentEl = img.parentElement\n this.setImgOnClickEventHelper(img, rect)\n imgObserver.observe(parentEl, config)\n }\n\n const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(\n 'a'\n )\n for (const a of aList) {\n a.removeEventListener('click', this.linkClickHandler)\n a.addEventListener('click', this.linkClickHandler)\n }\n }\n\n setImgOnClickEventHelper(img, rect) {\n img.onclick = () => {\n const widthMagnification = document.body.clientWidth / img.width\n const heightMagnification = document.body.clientHeight / img.height\n const baseOnWidth = widthMagnification < heightMagnification\n const magnification = baseOnWidth\n ? widthMagnification\n : heightMagnification\n\n const zoomImgWidth = img.width * magnification\n const zoomImgHeight = img.height * magnification\n const zoomImgTop = (document.body.clientHeight - zoomImgHeight) / 2\n const zoomImgLeft = (document.body.clientWidth - zoomImgWidth) / 2\n const originalImgTop = img.y + rect.top\n const originalImgLeft = img.x + rect.left\n const originalImgRect = {\n top: `${originalImgTop}px`,\n left: `${originalImgLeft}px`,\n width: `${img.width}px`,\n height: `${img.height}px`\n }\n const zoomInImgRect = {\n top: `${baseOnWidth ? zoomImgTop : 0}px`,\n left: `${baseOnWidth ? 0 : zoomImgLeft}px`,\n width: `${zoomImgWidth}px`,\n height: `${zoomImgHeight}px`\n }\n const animationSpeed = 300\n\n const zoomImg = document.createElement('img')\n zoomImg.src = img.src\n zoomImg.style = `\n position: absolute;\n top: ${baseOnWidth ? zoomImgTop : 0}px;\n left: ${baseOnWidth ? 0 : zoomImgLeft}px;\n width: ${zoomImgWidth};\n height: ${zoomImgHeight}px;\n `\n zoomImg.animate([originalImgRect, zoomInImgRect], animationSpeed)\n\n const overlay = document.createElement('div')\n overlay.style = `\n background-color: rgba(0,0,0,0.5);\n cursor: zoom-out;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: ${document.body.clientHeight}px;\n z-index: 100;\n `\n overlay.onclick = () => {\n zoomImg.style = `\n position: absolute;\n top: ${originalImgTop}px;\n left: ${originalImgLeft}px;\n width: ${img.width}px;\n height: ${img.height}px;\n `\n const zoomOutImgAnimation = zoomImg.animate(\n [zoomInImgRect, originalImgRect],\n animationSpeed\n )\n zoomOutImgAnimation.onfinish = () => overlay.remove()\n }\n\n overlay.appendChild(zoomImg)\n document.body.appendChild(overlay)\n }\n }\n\n handleResize() {\n _.forEach(\n this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),\n el => {\n el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))\n }\n )\n }\n\n focus() {\n this.refs.root.focus()\n }\n\n getWindow() {\n return this.refs.root.contentWindow\n }\n\n /**\n * @public\n * @param {Number} targetLine\n */\n scrollToLine(targetLine) {\n const blocks = this.getWindow().document.querySelectorAll(\n 'body [data-line]'\n )\n\n for (let index = 0; index < blocks.length; index++) {\n let block = blocks[index]\n const line = parseInt(block.getAttribute('data-line'))\n\n if (line > targetLine || index === blocks.length - 1) {\n block = blocks[index - 1]\n block != null && this.scrollTo(0, block.offsetTop)\n break\n }\n }\n }\n\n /**\n * `document.body.scrollTo`\n * @param {Number} x\n * @param {Number} y\n */\n scrollTo(x, y) {\n this.getWindow().document.body.scrollTo(x, y)\n }\n\n preventImageDroppedHandler(e) {\n e.preventDefault()\n e.stopPropagation()\n }\n\n notify(title, options) {\n if (global.process.platform === 'win32') {\n options.icon = path.join(\n 'file://',\n global.__dirname,\n '../../resources/app.png'\n )\n }\n return new window.Notification(title, options)\n }\n\n handleLinkClick(e) {\n e.preventDefault()\n e.stopPropagation()\n\n const el = e.target.closest('a[href]')\n if (!el) return\n\n const rawHref = el.getAttribute('href')\n const { dispatch } = this.props\n if (!rawHref) return // not checked href because parser will create file://... string for [empty link]()\n\n const parser = document.createElement('a')\n parser.href = rawHref\n const isStartWithHash = rawHref[0] === '#'\n const { href, hash } = parser\n\n const linkHash = hash === '' ? rawHref : hash // needed because we're having special link formats that are removed by parser e.g. :line:10\n\n const extractIdRegex = /file:\\/\\/.*main.?\\w*.html#/ // file://path/to/main(.development.)html\n const regexNoteInternalLink = new RegExp(`${extractIdRegex.source}(.+)`)\n if (isStartWithHash || regexNoteInternalLink.test(rawHref)) {\n const posOfHash = linkHash.indexOf('#')\n if (posOfHash > -1) {\n const extractedId = linkHash.slice(posOfHash + 1)\n const targetId = mdurl.encode(extractedId)\n const targetElement = this.getWindow().document.getElementById(targetId)\n\n if (targetElement != null) {\n this.scrollTo(0, targetElement.offsetTop)\n }\n return\n }\n }\n\n // this will match the new uuid v4 hash and the old hash\n // e.g.\n // :note:1c211eb7dcb463de6490 and\n // :note:7dd23275-f2b4-49cb-9e93-3454daf1af9c\n const regexIsNoteLink = /^:note:([a-zA-Z0-9-]{20,36})$/\n if (regexIsNoteLink.test(linkHash)) {\n eventEmitter.emit('list:jump', linkHash.replace(':note:', ''))\n return\n }\n\n const regexIsLine = /^:line:[0-9]/\n if (regexIsLine.test(linkHash)) {\n const numberPattern = /\\d+/g\n\n const lineNumber = parseInt(linkHash.match(numberPattern)[0])\n eventEmitter.emit('line:jump', lineNumber)\n return\n }\n\n // this will match the old link format storage.key-note.key\n // e.g.\n // 877f99c3268608328037-1c211eb7dcb463de6490\n const regexIsLegacyNoteLink = /^(.{20})-(.{20})$/\n if (regexIsLegacyNoteLink.test(linkHash)) {\n eventEmitter.emit('list:jump', linkHash.split('-')[1])\n return\n }\n\n const regexIsTagLink = /^:tag:([\\w]+)$/\n if (regexIsTagLink.test(rawHref)) {\n const tag = rawHref.match(regexIsTagLink)[1]\n dispatch(push(`/tags/${encodeURIComponent(tag)}`))\n return\n }\n\n // other case\n this.openExternal(href)\n }\n\n openExternal(href) {\n try {\n const success =\n shell.openExternal(href) || shell.openExternal(decodeURI(href))\n if (!success) console.error('failed to open url ' + href)\n } catch (e) {\n // URI Error threw from decodeURI\n console.error(e)\n }\n }\n\n render() {\n const { className, style, tabIndex } = this.props\n return (\n \n )\n }\n}\n\nMarkdownPreview.propTypes = {\n onClick: PropTypes.func,\n onDoubleClick: PropTypes.func,\n onMouseUp: PropTypes.func,\n onMouseDown: PropTypes.func,\n onContextMenu: PropTypes.func,\n className: PropTypes.string,\n value: PropTypes.string,\n showCopyNotification: PropTypes.bool,\n storagePath: PropTypes.string,\n smartQuotes: PropTypes.bool,\n smartArrows: PropTypes.bool,\n breaks: PropTypes.bool\n}\n\nexport default connect(\n null,\n null,\n null,\n { forwardRef: true }\n)(MarkdownPreview)\n" }, { "path": "browser/components/MarkdownSplitEditor.js", "content": "import React from 'react'\nimport CodeEditor from 'browser/components/CodeEditor'\nimport MarkdownPreview from 'browser/components/MarkdownPreview'\nimport { findStorage } from 'browser/lib/findStorage'\nimport _ from 'lodash'\n\nimport styles from './MarkdownSplitEditor.styl'\nimport CSSModules from 'browser/lib/CSSModules'\n\nclass MarkdownSplitEditor extends React.Component {\n constructor(props) {\n super(props)\n this.value = props.value\n this.focus = () => this.refs.code.focus()\n this.reload = () => this.refs.code.reload()\n this.userScroll = props.config.preview.scrollSync\n this.state = {\n isSliderFocused: false,\n codeEditorWidthInPercent: 50,\n codeEditorHeightInPercent: 50\n }\n }\n\n componentDidUpdate(prevProps) {\n if (\n this.props.config.preview.scrollSync !==\n prevProps.config.preview.scrollSync\n ) {\n this.userScroll = this.props.config.preview.scrollSync\n }\n }\n\n handleCursorActivity(editor) {\n if (this.userScroll) {\n const previewDoc = _.get(\n this,\n 'refs.preview.refs.root.contentWindow.document'\n )\n const previewTop = _.get(previewDoc, 'body.scrollTop')\n\n const line = editor.doc.getCursor().line\n let top\n if (line === 0) {\n top = 0\n } else {\n const blockElements = previewDoc.querySelectorAll('body [data-line]')\n const blocks = []\n for (const block of blockElements) {\n const l = parseInt(block.getAttribute('data-line'))\n\n blocks.push({\n line: l,\n top: block.offsetTop\n })\n\n if (l > line) {\n break\n }\n }\n\n if (blocks.length === 1) {\n const block = blockElements[blockElements.length - 1]\n\n blocks.push({\n line: editor.doc.size,\n top: block.offsetTop + block.offsetHeight\n })\n }\n\n const i = blocks.length - 1\n\n const ratio =\n (blocks[i].top - blocks[i - 1].top) /\n (blocks[i].line - blocks[i - 1].line)\n\n const delta = Math.floor(_.get(previewDoc, 'body.clientHeight') / 3)\n\n top =\n blocks[i - 1].top +\n Math.floor((line - blocks[i - 1].line) * ratio) -\n delta\n }\n\n this.scrollTo(previewTop, top, y =>\n _.set(previewDoc, 'body.scrollTop', y)\n )\n }\n }\n\n setValue(value) {\n this.refs.code.setValue(value)\n }\n\n handleOnChange(e) {\n this.value = this.refs.code.value\n this.props.onChange(e)\n }\n\n handleEditorScroll(e) {\n if (this.userScroll) {\n const previewDoc = _.get(\n this,\n 'refs.preview.refs.root.contentWindow.document'\n )\n const codeDoc = _.get(this, 'refs.code.editor.doc')\n\n const from = codeDoc.cm.coordsChar({ left: 0, top: 0 }).line\n const to = codeDoc.cm.coordsChar({\n left: 0,\n top: codeDoc.cm.display.lastWrapHeight * 1.125\n }).line\n const previewTop = _.get(previewDoc, 'body.scrollTop')\n\n let top\n if (from === 0) {\n top = 0\n } else if (to === codeDoc.lastLine()) {\n top =\n _.get(previewDoc, 'body.scrollHeight') -\n _.get(previewDoc, 'body.clientHeight')\n } else {\n const line = from + Math.floor((to - from) / 3)\n\n const blockElements = previewDoc.querySelectorAll('body [data-line]')\n const blocks = []\n for (const block of blockElements) {\n const l = parseInt(block.getAttribute('data-line'))\n\n blocks.push({\n line: l,\n top: block.offsetTop\n })\n\n if (l > line) {\n break\n }\n }\n\n if (blocks.length === 1) {\n const block = blockElements[blockElements.length - 1]\n\n blocks.push({\n line: codeDoc.size,\n top: block.offsetTop + block.offsetHeight\n })\n }\n\n const i = blocks.length - 1\n\n const ratio =\n (blocks[i].top - blocks[i - 1].top) /\n (blocks[i].line - blocks[i - 1].line)\n\n top =\n blocks[i - 1].top + Math.floor((line - blocks[i - 1].line) * ratio)\n }\n\n this.scrollTo(previewTop, top, y =>\n _.set(previewDoc, 'body.scrollTop', y)\n )\n }\n }\n\n handlePreviewScroll(e) {\n if (this.userScroll) {\n const previewDoc = _.get(\n this,\n 'refs.preview.refs.root.contentWindow.document'\n )\n const codeDoc = _.get(this, 'refs.code.editor.doc')\n\n const srcTop = _.get(previewDoc, 'body.scrollTop')\n const editorTop = _.get(codeDoc, 'scrollTop')\n\n let top\n if (srcTop === 0) {\n top = 0\n } else {\n const delta = Math.floor(_.get(previewDoc, 'body.clientHeight') / 3)\n const previewTop = srcTop + delta\n\n const blockElements = previewDoc.querySelectorAll('body [data-line]')\n const blocks = []\n for (const block of blockElements) {\n const top = block.offsetTop\n\n blocks.push({\n line: parseInt(block.getAttribute('data-line')),\n top\n })\n\n if (top > previewTop) {\n break\n }\n }\n\n if (blocks.length === 1) {\n const block = blockElements[blockElements.length - 1]\n\n blocks.push({\n line: codeDoc.size,\n top: block.offsetTop + block.offsetHeight\n })\n }\n\n const i = blocks.length - 1\n\n const from = codeDoc.cm.heightAtLine(blocks[i - 1].line, 'local')\n const to = codeDoc.cm.heightAtLine(blocks[i].line, 'local')\n\n const ratio =\n (previewTop - blocks[i - 1].top) / (blocks[i].top - blocks[i - 1].top)\n\n top = from + Math.floor((to - from) * ratio) - delta\n }\n\n this.scrollTo(editorTop, top, y => codeDoc.cm.scrollTo(0, y))\n }\n }\n\n handleCheckboxClick(e) {\n e.preventDefault()\n e.stopPropagation()\n const idMatch = /checkbox-([0-9]+)/\n const checkedMatch = /^(\\s*>?)*\\s*[+\\-*] \\[x]/i\n const uncheckedMatch = /^(\\s*>?)*\\s*[+\\-*] \\[ ]/\n const checkReplace = /\\[x]/i\n const uncheckReplace = /\\[ ]/\n if (idMatch.test(e.target.getAttribute('id'))) {\n const lineIndex =\n parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1\n const lines = this.refs.code.value.split('\\n')\n\n const targetLine = lines[lineIndex]\n let newLine = targetLine\n\n if (targetLine.match(checkedMatch)) {\n newLine = targetLine.replace(checkReplace, '[ ]')\n }\n if (targetLine.match(uncheckedMatch)) {\n newLine = targetLine.replace(uncheckReplace, '[x]')\n }\n this.refs.code.setLineContent(lineIndex, newLine)\n }\n }\n\n handleMouseMove(e) {\n if (this.state.isSliderFocused) {\n const rootRect = this.refs.root.getBoundingClientRect()\n if (this.props.isStacking) {\n const rootHeight = rootRect.height\n const offset = rootRect.top\n let newCodeEditorHeightInPercent =\n ((e.pageY - offset) / rootHeight) * 100\n\n // limit minSize to 10%, maxSize to 90%\n if (newCodeEditorHeightInPercent <= 10) {\n newCodeEditorHeightInPercent = 10\n }\n\n if (newCodeEditorHeightInPercent >= 90) {\n newCodeEditorHeightInPercent = 90\n }\n\n this.setState({\n codeEditorHeightInPercent: newCodeEditorHeightInPercent\n })\n } else {\n const rootWidth = rootRect.width\n const offset = rootRect.left\n let newCodeEditorWidthInPercent = ((e.pageX - offset) / rootWidth) * 100\n\n // limit minSize to 10%, maxSize to 90%\n if (newCodeEditorWidthInPercent <= 10) {\n newCodeEditorWidthInPercent = 10\n }\n\n if (newCodeEditorWidthInPercent >= 90) {\n newCodeEditorWidthInPercent = 90\n }\n\n this.setState({\n codeEditorWidthInPercent: newCodeEditorWidthInPercent\n })\n }\n }\n }\n\n handleMouseUp(e) {\n e.preventDefault()\n this.setState({\n isSliderFocused: false\n })\n }\n\n handleMouseDown(e) {\n e.preventDefault()\n this.setState({\n isSliderFocused: true\n })\n }\n\n scrollTo(from, to, scroller) {\n const distance = to - from\n const framerate = 1000 / 60\n const frames = 20\n const refractory = frames * framerate\n\n this.userScroll = false\n\n let frame = 0\n let scrollPos, time\n const timer = setInterval(() => {\n time = frame / frames\n scrollPos =\n time < 0.5\n ? 2 * time * time // ease in\n : -1 + (4 - 2 * time) * time // ease out\n\n scroller(from + scrollPos * distance)\n\n if (frame >= frames) {\n clearInterval(timer)\n setTimeout(() => {\n this.userScroll = true\n }, refractory)\n }\n frame++\n }, framerate)\n }\n\n render() {\n const {\n config,\n value,\n storageKey,\n noteKey,\n linesHighlighted,\n getNote,\n isStacking,\n RTL\n } = this.props\n let storage\n try {\n storage = findStorage(storageKey)\n } catch (e) {\n return
\n }\n\n let editorStyle = {}\n let previewStyle = {}\n let sliderStyle = {}\n\n let editorFontSize = parseInt(config.editor.fontSize, 10)\n if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14\n editorStyle.fontSize = editorFontSize\n\n let editorIndentSize = parseInt(config.editor.indentSize, 10)\n if (!(editorStyle.fontSize > 0 && editorStyle.fontSize < 132))\n editorIndentSize = 4\n editorStyle.indentSize = editorIndentSize\n\n editorStyle = Object.assign(\n editorStyle,\n isStacking\n ? {\n width: '100%',\n height: `${this.state.codeEditorHeightInPercent}%`\n }\n : {\n width: `${this.state.codeEditorWidthInPercent}%`,\n height: '100%'\n }\n )\n\n previewStyle = Object.assign(\n previewStyle,\n isStacking\n ? {\n width: '100%',\n height: `${100 - this.state.codeEditorHeightInPercent}%`\n }\n : {\n width: `${100 - this.state.codeEditorWidthInPercent}%`,\n height: '100%'\n }\n )\n\n sliderStyle = Object.assign(\n sliderStyle,\n isStacking\n ? {\n left: 0,\n top: `${this.state.codeEditorHeightInPercent}%`\n }\n : {\n left: `${this.state.codeEditorWidthInPercent}%`,\n top: 0\n }\n )\n\n if (this.props.ignorePreviewPointerEvents || this.state.isSliderFocused)\n previewStyle.pointerEvents = 'none'\n\n return (\n this.handleMouseMove(e)}\n onMouseUp={e => this.handleMouseUp(e)}\n >\n this.handleOnChange(e)}\n onScroll={e => this.handleEditorScroll(e)}\n onCursorActivity={e => this.handleCursorActivity(e)}\n spellCheck={config.editor.spellcheck}\n enableSmartPaste={config.editor.enableSmartPaste}\n hotkey={config.hotkey}\n switchPreview={config.editor.switchPreview}\n enableMarkdownLint={config.editor.enableMarkdownLint}\n customMarkdownLintConfig={config.editor.customMarkdownLintConfig}\n dateFormatISO8601={config.editor.dateFormatISO8601}\n deleteUnusedAttachments={config.editor.deleteUnusedAttachments}\n RTL={RTL}\n />\n this.handleMouseDown(e)}\n >\n
\n
\n this.handleCheckboxClick(e)}\n onScroll={e => this.handlePreviewScroll(e)}\n showCopyNotification={config.ui.showCopyNotification}\n storagePath={storage.path}\n noteKey={noteKey}\n customCSS={config.preview.customCSS}\n allowCustomCSS={config.preview.allowCustomCSS}\n lineThroughCheckbox={config.preview.lineThroughCheckbox}\n getNote={getNote}\n export={config.export}\n RTL={RTL}\n />\n
\n )\n }\n}\n\nexport default CSSModules(MarkdownSplitEditor, styles)\n" }, { "path": "browser/components/MarkdownSplitEditor.styl", "content": ".root\n width 100%\n height 100%\n font-size 30px\n display flex\n flex-wrap wrap\n .slider\n absolute top bottom\n top -2px\n width 0\n z-index 0\n border-left 1px solid $ui-borderColor\n .slider-hitbox\n absolute top bottom left right\n width 7px\n left -3px\n z-index 10\n cursor col-resize\n .slider-hoz\n absolute left right\n .slider-hitbox\n absolute left right\n width: 100%\n height 7px\n cursor row-resize\n\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n .slider\n border-left 1px solid get-theme-var(theme, 'borderColor')\n\nfor theme in 'dark' 'dracula' 'solarized-dark'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/ModalEscButton.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './ModalEscButton.styl'\n\nconst ModalEscButton = ({ handleEscButtonClick }) => (\n \n)\n\nModalEscButton.propTypes = {\n handleEscButtonClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(ModalEscButton, styles)\n" }, { "path": "browser/components/ModalEscButton.styl", "content": ".escButton\n height 50px\n position absolute\n background-color transparent\n color $ui-inactive-text-color\n border none\n top 1px\n right 10px\n text-align center\n width top-bar--height\n height top-bar-height\n\n.esc-mark\n font-size 28px\n margin-top -5px\n margin-bottom -7px" }, { "path": "browser/components/NavToggleButton.js", "content": "/**\n * @fileoverview Micro component for toggle SideNav\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport styles from './NavToggleButton.styl'\nimport CSSModules from 'browser/lib/CSSModules'\n\n/**\n * @param {boolean} isFolded\n * @param {Function} handleToggleButtonClick\n */\n\nconst NavToggleButton = ({ isFolded, handleToggleButtonClick }) => (\n \n)\n\nNavToggleButton.propTypes = {\n isFolded: PropTypes.bool.isRequired,\n handleToggleButtonClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(NavToggleButton, styles)\n" }, { "path": "browser/components/NavToggleButton.styl", "content": ".navToggle\n navButtonColor()\n display block\n position absolute\n left 5px\n bottom 5px\n border-radius 16.5px\n height 34px\n width 34px\n line-height 100%\n padding 0\n &:hover\n border: 1px solid #1EC38B;\n background-color: alpha(#1EC38B, 30%)\n border-radius: 50%;\n\nbody[data-theme=\"white\"]\n navWhiteButtonColor()\n\napply-theme(theme)\n body[data-theme={theme}]\n .navToggle:hover\n background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)\n border 1px solid get-theme-var(theme, 'button--active-backgroundColor')\n transition 0.15s\n color get-theme-var(theme, 'text-color')\n\nfor theme in 'dark' 'dracula' 'solarized-dark'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/NoteItem.js", "content": "/**\n * @fileoverview Note item component.\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport { isArray, sortBy } from 'lodash'\nimport invertColor from 'invert-color'\nimport Emoji from 'react-emoji-render'\nimport CSSModules from 'browser/lib/CSSModules'\nimport { getTodoStatus } from 'browser/lib/getTodoStatus'\nimport styles from './NoteItem.styl'\nimport TodoProcess from './TodoProcess'\nimport i18n from 'browser/lib/i18n'\n\n/**\n * @description Tag element component.\n * @param {string} tagName\n * @param {string} color\n * @return {React.Component}\n */\nconst TagElement = ({ tagName, color }) => {\n const style = {}\n if (color) {\n style.backgroundColor = color\n style.color = invertColor(color, {\n black: '#222',\n white: '#f1f1f1',\n threshold: 0.3\n })\n }\n return (\n \n #{tagName}\n \n )\n}\n\n/**\n * @description Tag element list component.\n * @param {Array|null} tags\n * @param {boolean} showTagsAlphabetically\n * @param {Object} coloredTags\n * @return {React.Component}\n */\nconst TagElementList = (tags, showTagsAlphabetically, coloredTags) => {\n if (!isArray(tags)) {\n return []\n }\n\n if (showTagsAlphabetically) {\n return sortBy(tags).map(tag =>\n TagElement({ tagName: tag, color: coloredTags[tag] })\n )\n } else {\n return tags.map(tag =>\n TagElement({ tagName: tag, color: coloredTags[tag] })\n )\n }\n}\n\n/**\n * @description Note item component when using normal display mode.\n * @param {boolean} isActive\n * @param {Object} note\n * @param {Function} handleNoteClick\n * @param {Function} handleNoteContextMenu\n * @param {Function} handleDragStart\n * @param {Object} coloredTags\n * @param {string} dateDisplay\n */\nconst NoteItem = ({\n isActive,\n note,\n dateDisplay,\n handleNoteClick,\n handleNoteContextMenu,\n handleDragStart,\n pathname,\n storageName,\n folderName,\n viewType,\n showTagsAlphabetically,\n coloredTags\n}) => (\n handleNoteClick(e, note.key)}\n onContextMenu={e => handleNoteContextMenu(e, note.key)}\n onDragStart={e => handleDragStart(e, note)}\n draggable='true'\n >\n
\n {note.type === 'SNIPPET_NOTE' ? (\n \n ) : (\n \n )}\n
\n {note.title.trim().length > 0 ? (\n \n ) : (\n {i18n.__('Empty note')}\n )}\n
\n
\n
{dateDisplay}
\n
\n \n {viewType === 'ALL' && storageName}\n {viewType === 'STORAGE' && folderName}\n
\n
\n
\n
\n
\n {note.tags.length > 0 ? (\n TagElementList(note.tags, showTagsAlphabetically, coloredTags)\n ) : (\n \n {i18n.__('No tags')}\n \n )}\n
\n
\n {note.isStarred ? (\n \n ) : (\n ''\n )}\n {note.isPinned && !pathname.match(/\\/starred|\\/trash/) ? (\n \n ) : (\n ''\n )}\n {note.type === 'MARKDOWN_NOTE' ? (\n \n ) : (\n ''\n )}\n
\n
\n \n \n)\n\nNoteItem.propTypes = {\n isActive: PropTypes.bool.isRequired,\n dateDisplay: PropTypes.string.isRequired,\n coloredTags: PropTypes.object,\n note: PropTypes.shape({\n storage: PropTypes.string.isRequired,\n key: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n title: PropTypes.string.isrequired,\n tags: PropTypes.array,\n isStarred: PropTypes.bool.isRequired,\n isTrashed: PropTypes.bool.isRequired,\n blog: PropTypes.shape({\n blogLink: PropTypes.string,\n blogId: PropTypes.number\n })\n }),\n handleNoteClick: PropTypes.func.isRequired,\n handleNoteContextMenu: PropTypes.func.isRequired,\n handleDragStart: PropTypes.func.isRequired\n}\n\nexport default CSSModules(NoteItem, styles)\n" }, { "path": "browser/components/NoteItem.styl", "content": "$control-height = 30px\n\n.root\n absolute left bottom\n top $topBar-height - 1\n background-color $ui-noteList-backgroundColor\n\n.item\n position relative\n padding 0 20px\n user-select none\n cursor pointer\n background-color $ui-noteList-backgroundColor\n transition 0.2s\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 20%)\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-text-color\n .item-bottom-tagList-item\n background-color alpha(white, 0.6)\n color $ui-text-color\n .item-star\n color $ui-favorite-star-button-color\n &:active\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color $ui-text-color\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-text-color\n .item-bottom-tagList-item\n background-color alpha(white, 0.6)\n color $ui-text-color\n\n.item-wrapper\n padding 15px 0\n border-bottom $ui-border\n position relative\n\n.item--active\n @extend .item\n background-color alpha($ui-button--active-backgroundColor, 60%)\n color $ui-text-color\n .item-title\n .item-title-empty\n .item-bottom-tagList-empty\n .item-bottom-time\n .item-title-icon\n color $ui-text-color\n .item-bottom-tagList-item\n background-color alpha(white, 0.6)\n color $ui-text-color\n .item-wrapper\n border-color transparent\n .item-star\n color $ui-favorite-star-button-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n &:active, &:active:hover\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n\n.item-title-icon\n position relative\n font-size 12px\n color $ui-inactive-text-color\n top 2px\n\n.item-title\n font-size 15px\n font-weight 700\n position relative\n top -12px\n left 20px\n padding 0px 15px 0px 0px\n margin-bottom 4px\n overflow ellipsis\n color $ui-inactive-text-color\n\n.item-title-empty\n font-weight normal\n color $ui-inactive-text-color\n\n.item-middle\n font-size 13px\n padding-left 2px\n padding-bottom 2px\n\n.item-middle-time\n color $ui-inactive-text-color\n display inline-block\n\n.item-middle-app-meta\n float right\n .item-middle-app-meta-label\n opacity 0.4\n color $ui-inactive-text-color\n padding 0 3px\n white-space nowrap\n text-overflow ellipsis\n overflow hidden\n max-width 200px\n\n.item-bottom\n position relative\n bottom 0px\n margin-top 10px\n font-size 12px\n line-height 20px\n overflow ellipsis\n display block\n\n.item-bottom-tagList\n flex 1\n overflow ellipsis\n line-height 25px\n padding-left 2px\n margin-right 40px\n\n.item-bottom-tagList-item\n font-size 11px\n margin-right 8px\n padding 0\n box-sizing border-box\n border-radius 2px\n padding 4px\n vertical-align middle\n background-color white\n color $ui-inactive-text-color\n\n.item-bottom-time\n color $ui-inactive-text-color\n font-size 13px\n padding-left 2px\n padding-bottom 2px\n\n.item-star\n position absolute\n right 2px\n top 5px\n color alpha($ui-favorite-star-button-color, 60%)\n font-size 12px\n padding 0\n border-radius 17px\n\n.item-pin\n position absolute\n right 25px\n top 7px\n color #E54D42\n font-size 14px\n padding 0\n border-radius 17px\n\nbody[data-theme=\"white\"]\n .item\n background-color $ui-white-noteList-backgroundColor\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n &:active\n background-color $ui-button--active-backgroundColor\n\n .item--active\n @extend .item\n background-color $ui-button--active-backgroundColor\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n\nbody[data-theme=\"dark\"]\n .root\n border-color $ui-dark-borderColor\n background-color $ui-dark-noteList-backgroundColor\n\n .item\n border-color $ui-dark-borderColor\n background-color $ui-dark-noteList-backgroundColor\n &:hover\n transition 0.15s\n background-color alpha($ui-dark-button--active-backgroundColor, 20%)\n color $ui-dark-text-color\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-dark-text-color\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha($ui-dark-tagList-backgroundColor, 20%)\n color $ui-dark-text-color\n &:active\n transition 0.15s\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-text-color\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-dark-text-color\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha($ui-dark-tagList-backgroundColor, 10%)\n color $ui-dark-text-color\n\n .item-wrapper\n border-color alpha($ui-dark-button--active-backgroundColor, 60%)\n\n .item--active\n border-color $ui-dark-borderColor\n background-color $ui-dark-button--active-backgroundColor\n .item-wrapper\n border-color transparent\n .item-title\n .item-title-icon\n .item-bottom-time\n color $ui-dark-text-color\n .item-bottom-tagList-item\n background-color alpha($ui-dark-tagList-backgroundColor, 10%)\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 60%)\n color $ui-dark-button--hover-color\n .item-bottom-tagList-item\n background-color alpha($ui-dark-tagList-backgroundColor, 20%)\n\n .item-title\n color $ui-inactive-text-color\n\n .item-title-icon\n color $ui-inactive-text-color\n\n .item-title-empty\n color $ui-inactive-text-color\n\n .item-bottom-tagList-item\n background-color alpha($ui-dark-button--active-backgroundColor, 40%)\n color $ui-inactive-text-color\n\n .item-bottom-tagList-empty\n color $ui-inactive-text-color\n vertical-align middle\n\n\nbody[data-theme=\"solarized-dark\"]\n .root\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-noteList-backgroundColor\n\n .item\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-noteList-backgroundColor\n &:hover\n transition 0.15s\n // background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)\n color $ui-solarized-dark-text-color\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-solarized-dark-text-color\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)\n color $ui-solarized-dark-text-color\n &:active\n transition 0.15s\n background-color $ui-solarized-dark-noteList-backgroundColor\n color $ui-solarized-dark-text-color\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color $ui-solarized-dark-text-color\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%)\n color $ui-solarized-dark-text-color\n\n .item-wrapper\n border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)\n\n .item--active\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-button-backgroundColor\n .item-wrapper\n border-color transparent\n .item-title\n .item-title-icon\n .item-bottom-time\n color $ui-solarized-dark-text-color\n .item-bottom-tagList-item\n background-color alpha(white, 10%)\n color $ui-solarized-dark-text-color\n &:hover\n // background-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)\n color #c0392b\n .item-bottom-tagList-item\n background-color alpha(#fff, 20%)\n\n .item-title\n color $ui-inactive-text-color\n\n .item-title-icon\n color $ui-inactive-text-color\n\n .item-title-empty\n color $ui-inactive-text-color\n\n .item-bottom-tagList-item\n background-color alpha($ui-dark-button--active-backgroundColor, 40%)\n color $ui-inactive-text-color\n\n .item-bottom-tagList-empty\n color $ui-inactive-text-color\n vertical-align middle\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n\n .item\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n &:hover\n transition 0.15s\n // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)\n color get-theme-var(theme, 'text-color')\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color get-theme-var(theme, 'text-color')\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)\n color get-theme-var(theme, 'text-color')\n &:active\n transition 0.15s\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n color get-theme-var(theme, 'text-color')\n .item-title\n .item-title-icon\n .item-bottom-time\n transition 0.15s\n color get-theme-var(theme, 'text-color')\n .item-bottom-tagList-item\n transition 0.15s\n background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)\n color get-theme-var(theme, 'text-color')\n\n .item-wrapper\n border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)\n\n .item--active\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'button-backgroundColor')\n .item-wrapper\n border-color transparent\n .item-title\n .item-title-icon\n .item-bottom-time\n color get-theme-var(theme, 'active-color')\n .item-bottom-tagList-item\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)\n color get-theme-var(theme, 'text-color')\n &:hover\n // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)\n color get-theme-var(theme, 'button--hover-color')\n .item-bottom-tagList-item\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)\n\n .item-title\n color $ui-inactive-text-color\n\n .item-title-icon\n color $ui-inactive-text-color\n\n .item-title-empty\n color $ui-inactive-text-color\n\n .item-bottom-tagList-item\n background-color alpha($ui-dark-button--active-backgroundColor, 40%)\n color $ui-inactive-text-color\n\n .item-bottom-tagList-empty\n color $ui-inactive-text-color\n vertical-align middle\n\nfor theme in 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/NoteItemSimple.js", "content": "/**\n * @fileoverview Note item component with simple display mode.\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './NoteItemSimple.styl'\nimport i18n from 'browser/lib/i18n'\n\n/**\n * @description Note item component when using simple display mode.\n * @param {boolean} isActive\n * @param {Object} note\n * @param {Function} handleNoteClick\n * @param {Function} handleNoteContextMenu\n * @param {Function} handleDragStart\n */\nconst NoteItemSimple = ({\n isActive,\n isAllNotesView,\n note,\n handleNoteClick,\n handleNoteContextMenu,\n handleDragStart,\n pathname,\n storage\n}) => (\n handleNoteClick(e, note.key)}\n onContextMenu={e => handleNoteContextMenu(e, note.key)}\n onDragStart={e => handleDragStart(e, note)}\n draggable='true'\n >\n
\n {note.type === 'SNIPPET_NOTE' ? (\n \n ) : (\n \n )}\n {note.isPinned && !pathname.match(/\\/starred|\\/trash/) ? (\n \n ) : (\n ''\n )}\n {note.title.trim().length > 0 ? (\n note.title\n ) : (\n {i18n.__('Empty note')}\n )}\n {isAllNotesView && (\n
\n {storage.name}\n
\n )}\n
\n \n)\n\nNoteItemSimple.propTypes = {\n isActive: PropTypes.bool.isRequired,\n note: PropTypes.shape({\n storage: PropTypes.string.isRequired,\n key: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n title: PropTypes.string.isrequired\n }),\n handleNoteClick: PropTypes.func.isRequired,\n handleNoteContextMenu: PropTypes.func.isRequired,\n handleDragStart: PropTypes.func.isRequired\n}\n\nexport default CSSModules(NoteItemSimple, styles)\n" }, { "path": "browser/components/NoteItemSimple.styl", "content": "$control-height = 30px\n\n.root\n absolute left bottom\n top $topBar-height - 1\n background-color $ui-noteList-backgroundColor\n\n.item-simple\n position relative\n padding 0 20px\n user-select none\n cursor pointer\n background-color $ui-noteList-backgroundColor\n transition 0.2s\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 20%)\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n color $ui-text-color\n &:active\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color $ui-text-color\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n color $ui-text-color\n\n.item-simple--active\n @extend .item-simple\n background-color alpha($ui-button--active-backgroundColor, 60%)\n color $ui-text-color\n .item-simple-title\n .item-simple-title-empty\n border-color transparent\n color $ui-text-color\n .item-simple-title-icon\n color $ui-text-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n &:active, &:active:hover\n background-color alpha($ui-button--active-backgroundColor, 40%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n\n.item-simple-title\n font-size 13px\n height 40px\n padding-right 20px\n box-sizing border-box\n line-height 24px\n padding-top 8px\n overflow ellipsis\n color $ui-inactive-text-color\n border-bottom $ui-border\n position relative\n\n.item-simple-title-icon\n font-size 12px\n color $ui-inactive-text-color\n padding-right 6px\n\n.item-simple-title-empty\n font-weight normal\n color $ui-inactive-text-color\n\n.item-pin\n position absolute\n right 0px\n top 12px\n color #E54D42\n font-size 14px\n padding 0\n border-radius 17px\n\nbody[data-theme=\"white\"]\n .item-simple\n background-color $ui-white-noteList-backgroundColor\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n &:active\n background-color $ui-button--active-backgroundColor\n\n .item-simple--active\n @extend .item-simple\n background-color $ui-button--active-backgroundColor\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n\nbody[data-theme=\"dark\"]\n .root\n border-color $ui-dark-borderColor\n background-color $ui-dark-noteList-backgroundColor\n\n .item-simple\n border-color $ui-dark-borderColor\n background-color $ui-dark-noteList-backgroundColor\n &:hover\n transition 0.15s\n background-color alpha($ui-dark-button--active-backgroundColor, 20%)\n color $ui-dark-text-color\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color $ui-dark-text-color\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(#fff, 20%)\n color $ui-dark-text-color\n &:active\n transition 0.15s\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-text-color\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color $ui-dark-text-color\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(white, 10%)\n color $ui-dark-text-color\n\n .item-simple--active\n border-color $ui-dark-borderColor\n background-color $ui-dark-button--active-backgroundColor\n .item-simple-wrapper\n border-color transparent\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n color $ui-dark-text-color\n .item-simple-bottom-tagList-item\n background-color alpha(white, 10%)\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 60%)\n color #c0392b\n .item-simple-bottom-tagList-item\n background-color alpha(#fff, 20%)\n\n .item-simple-title\n color $ui-inactive-text-color\n border-color alpha($ui-dark-button--active-backgroundColor, 60%)\n\n .item-simple-title-icon\n color $ui-darkinactive-text-color\n\n .item-simple-title-empty\n color $ui-dark-inactive-text-color\n\n\nbody[data-theme=\"solarized-dark\"]\n .root\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-noteList-backgroundColor\n\n .item-simple\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-noteList-backgroundColor\n &:hover\n transition 0.15s\n background-color alpha($ui-dark-button--active-backgroundColor, 60%)\n color $ui-solarized-dark-text-color\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color $ui-solarized-dark-text-color\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(#fff, 20%)\n color $ui-solarized-dark-text-color\n &:active\n transition 0.15s\n // background-color $ui-solarized-dark-button--active-backgroundColor\n color $ui-dark-text-color\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color $ui-solarized-dark-text-color\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(white, 10%)\n color $ui-solarized-dark-text-color\n\n .item-simple--active\n border-color $ui-solarized-dark-borderColor\n background-color $ui-solarized-dark-tag-backgroundColor\n .item-simple-wrapper\n border-color transparent\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n color $ui-dark-text-color\n .item-simple-bottom-time\n color $ui-solarized-dark-text-color\n .item-simple-bottom-tagList-item\n background-color alpha(white, 10%)\n color $ui-solarized-dark-text-color\n &:hover\n // background-color alpha($ui-dark-button--active-backgroundColor, 60%)\n color #c0392b\n .item-simple-bottom-tagList-item\n background-color alpha(#fff, 20%)\n .item-simple-title\n color $ui-dark-text-color\n border-bottom $ui-dark-borderColor\n .item-simple-right\n float right\n .item-simple-right-storageName\n padding-left 4px\n opacity 0.4\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n\n .item-simple\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n &:hover\n transition 0.15s\n background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)\n color get-theme-var(theme, 'text-color')\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color get-theme-var(theme, 'text-color')\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)\n color get-theme-var(theme, 'text-color')\n &:active\n transition 0.15s\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n color get-theme-var(theme, 'text-color')\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n transition 0.15s\n color get-theme-var(theme, 'text-color')\n .item-simple-bottom-tagList-item\n transition 0.15s\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)\n color get-theme-var(theme, 'text-color')\n\n .item-simple--active\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n .item-simple-wrapper\n border-color transparent\n .item-simple-title\n .item-simple-title-empty\n .item-simple-title-icon\n .item-simple-bottom-time\n color get-theme-var(theme, 'text-color')\n .item-simple-bottom-tagList-item\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)\n color get-theme-var(theme, 'text-color')\n &:hover\n // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)\n color #c0392b\n .item-simple-bottom-tagList-item\n background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)\n .item-simple-title\n color $ui-dark-text-color\n border-bottom $ui-dark-borderColor\n .item-simple-right\n float right\n .item-simple-right-storageName\n padding-left 4px\n opacity 0.4\n\nfor theme in 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/RealtimeNotification.js", "content": "import React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './RealtimeNotification.styl'\n\nconst electron = require('electron')\nconst { shell } = electron\n\nclass RealtimeNotification extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n notifications: []\n }\n }\n\n componentDidMount() {\n this.fetchNotifications()\n }\n\n fetchNotifications() {\n const notificationsUrl =\n 'https://raw.githubusercontent.com/BoostIO/notification/master/notification.json'\n fetch(notificationsUrl)\n .then(response => {\n return response.json()\n })\n .then(json => {\n this.setState({ notifications: json.notifications })\n })\n }\n\n handleLinkClick(e) {\n shell.openExternal(e.currentTarget.href)\n e.preventDefault()\n }\n\n render() {\n const { notifications } = this.state\n const link =\n notifications.length > 0 ? (\n this.handleLinkClick(e)}\n >\n Info: {notifications[0].text}\n \n ) : (\n ''\n )\n\n return (\n
\n {link}\n
\n )\n }\n}\n\nRealtimeNotification.propTypes = {}\n\nexport default CSSModules(RealtimeNotification, styles)\n" }, { "path": "browser/components/RealtimeNotification.styl", "content": ".notification-area\n z-index 1000\n font-size 12px\n position: relative\n top: 12px\n background-color none\n\n.notification-link\n position absolute\n text-decoration none\n color #282A36\n font-size 14px\n border 1px solid #6FA8E6\n background-color alpha(#6FA8E6, 0.2)\n padding 5px 12px\n border-radius 2px\n transition 0.2s\n &:hover\n color #1378BD\n\nbody[data-theme=\"dark\"]\n .notification-area\n background-color none\n\n .notification-link\n color #fff\n border 1px solid alpha(#5CB85C, 0.6)\n background-color alpha(#5CB85C, 0.2)\n transition 0.2s\n &:hover\n color #5CB85C\n\napply-theme(theme)\n body[data-theme={theme}]\n .notification-area\n background-color none\n\n .notification-link\n color get-theme-var(theme, 'text-color')\n border none\n background-color get-theme-var(theme, 'button-backgroundColor')\n &:hover\n color get-theme-var(theme, 'button--hover-color')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/SideNavFilter.js", "content": "/**\n * @fileoverview Filter for all notes.\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './SideNavFilter.styl'\nimport i18n from 'browser/lib/i18n'\n\n/**\n * @param {boolean} isFolded\n * @param {boolean} isHomeActive\n * @param {Function} handleAllNotesButtonClick\n * @param {boolean} isStarredActive\n * @param {Function} handleStarredButtonClick\n * @return {React.Component}\n */\nconst SideNavFilter = ({\n isFolded,\n isHomeActive,\n handleAllNotesButtonClick,\n isStarredActive,\n handleStarredButtonClick,\n isTrashedActive,\n handleTrashedButtonClick,\n counterDelNote,\n counterTotalNote,\n counterStarredNote,\n handleFilterButtonContextMenu\n}) => (\n
\n \n
\n \n
\n {i18n.__('All Notes')}\n {counterTotalNote}\n \n\n \n
\n \n
\n {i18n.__('Starred')}\n {counterStarredNote}\n \n\n \n
\n \n
\n {i18n.__('Trash')}\n {counterDelNote}\n \n
\n)\n\nSideNavFilter.propTypes = {\n isFolded: PropTypes.bool,\n isHomeActive: PropTypes.bool.isRequired,\n handleAllNotesButtonClick: PropTypes.func.isRequired,\n isStarredActive: PropTypes.bool.isRequired,\n isTrashedActive: PropTypes.bool.isRequired,\n handleStarredButtonClick: PropTypes.func.isRequired,\n handleTrashedButtonClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(SideNavFilter, styles)\n" }, { "path": "browser/components/SideNavFilter.styl", "content": ".menu\n margin-bottom 20px\n\n.menu-button\n navButtonColor()\n height 36px\n padding 0 15px 0 20px\n font-size 14px\n width 100%\n text-align left\n overflow ellipsis\n display flex\n align-items center\n &:hover, &:active, &:active:hover\n color #1EC38B\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n\n.iconWrap\n width 20px\n text-align center\n\n.counters\n float right\n color $ui-inactive-text-color\n\n.menu-button--active\n @extend .menu-button\n SideNavFilter()\n color #1EC38B\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n .menu-button-label, .counters\n color #1EC38B\n &:hover\n color #1EC38B\n\n.menu-button-star--active\n @extend .menu-button\n SideNavFilter()\n color #1EC38B\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n .menu-button-label, .counters\n color #1EC38B\n\n.menu-button-trash--active\n @extend .menu-button\n SideNavFilter()\n color #1EC38B\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n .menu-button-label, .counters\n color #1EC38B\n\n.menu-button-label\n margin-left 10px\n flex 1\n\n.menu--folded\n @extend .menu\n .menu-button, .menu-button--active, .menu-button-star--active, .menu-button-trash--active\n text-align center\n padding 0 12px\n &:hover .menu-button-label\n transition opacity 0.15s\n opacity 1\n color $ui-tooltip-text-color\n background-color $ui-tooltip-backgroundColor\n\n\n .menu-button-label\n position fixed\n display inline-block\n height 36px\n left 44px\n padding 0 10px\n margin-left 0\n overflow ellipsis\n z-index 10\n line-height 32px\n border-top-right-radius 2px\n border-bottom-right-radius 2px\n pointer-events none\n opacity 0\n font-size 13px\n .counters\n display none\n\nbody[data-theme=\"white\"]\n .menu-button\n navWhiteButtonColor()\n\n .counters\n color $ui-inactive-text-color\n\n .menu-button--active\n color #e74c3c\n background-color $ui-button--active-backgroundColor\n .menu-button-label\n color $ui-text-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n &:active, &:active:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #e74c3c\n .menu-button-label\n color $ui-text-color\n\n .menu-button-star--active\n color #F9BF3B\n background-color $ui-button--active-backgroundColor\n .menu-button-label\n color $ui-text-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #F9BF3B\n .menu-button-label\n color $ui-text-color\n &:active, &:active:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #F9BF3B\n .menu-button-label\n color $ui-text-color\n\n .menu-button-trash--active\n color #5D9E36\n background-color $ui-button--active-backgroundColor\n .menu-button-label\n color $ui-text-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #5D9E36\n .menu-button-label\n color $ui-text-color\n &:active, &:active:hover\n background-color alpha($ui-button--active-backgroundColor, 50%)\n color #5D9E36\n .menu-button-label\n color $ui-text-color\n\nbody[data-theme=\"dark\"]\n .menu-button\n &:active\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 20%)\n color $ui-dark-text-color\n\n .menu-button--active\n color #c0392b\n background-color $ui-dark-button--active-backgroundColor\n .menu-button-label\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 50%)\n color #c0392b\n .menu-button-label\n color $ui-dark-text-color\n\n .menu-button-star--active\n color $ui-favorite-star-button-color\n background-color $ui-dark-button--active-backgroundColor\n .menu-button-label\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 50%)\n color $ui-favorite-star-button-color\n .menu-button-label\n color $ui-dark-text-color\n\n .menu-button-trash--active\n color #5D9E36\n background-color $ui-dark-button--active-backgroundColor\n .menu-button-label\n color $ui-dark-text-color\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 50%)\n color #5D9E36\n .menu-button-label\n color $ui-dark-text-color\n\napply-theme(theme)\n body[data-theme={theme}]\n .menu-button\n &:active\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n color get-theme-var(theme, 'text-color')\n &:hover\n background-color get-theme-var(theme, 'button-backgroundColor')\n color get-theme-var(theme, 'text-color')\n\n .menu-button--active\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n &:hover\n background-color get-theme-var(theme, 'button-backgroundColor')\n color get-theme-var(theme, 'text-color')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n\n .menu-button-star--active\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n &:hover\n background-color get-theme-var(theme, 'button-backgroundColor')\n color get-theme-var(theme, 'text-color')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n\n .menu-button-trash--active\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n &:hover\n background-color get-theme-var(theme, 'button-backgroundColor')\n color get-theme-var(theme, 'text-color')\n .menu-button-label\n color get-theme-var(theme, 'text-color')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/SnippetTab.js", "content": "import React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './SnippetTab.styl'\nimport context from 'browser/lib/context'\nimport i18n from 'browser/lib/i18n'\n\nclass SnippetTab extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n isRenaming: false,\n name: props.snippet.name\n }\n }\n\n componentWillUpdate(nextProps) {\n if (nextProps.snippet.name !== this.props.snippet.name) {\n this.setState({\n name: nextProps.snippet.name\n })\n }\n }\n\n handleClick(e) {\n this.props.onClick(e)\n }\n\n handleContextMenu(e) {\n context.popup([\n {\n label: i18n.__('Rename'),\n click: e => this.handleRenameClick(e)\n }\n ])\n }\n\n handleRenameClick(e) {\n this.startRenaming()\n }\n\n handleNameInputBlur(e) {\n this.handleRename()\n }\n\n handleNameInputChange(e) {\n this.setState({\n name: e.target.value\n })\n }\n\n handleNameInputKeyDown(e) {\n switch (e.keyCode) {\n case 13:\n this.handleRename()\n break\n case 27:\n this.setState((prevState, props) => ({\n name: props.snippet.name,\n isRenaming: false\n }))\n break\n }\n }\n\n handleRename() {\n this.setState(\n {\n isRenaming: false\n },\n () => {\n if (this.props.snippet.name !== this.state.name) {\n this.props.onRename(this.state.name)\n }\n }\n )\n }\n\n handleDeleteButtonClick(e) {\n this.props.onDelete(e)\n }\n\n startRenaming() {\n this.setState(\n {\n isRenaming: true\n },\n () => {\n this.refs.name.focus()\n this.refs.name.select()\n }\n )\n }\n\n handleDragStart(e) {\n e.dataTransfer.dropEffect = 'move'\n this.props.onDragStart(e)\n }\n\n handleDrop(e) {\n this.props.onDrop(e)\n }\n\n render() {\n const { isActive, snippet, isDeletable } = this.props\n return (\n
\n {!this.state.isRenaming ? (\n this.handleClick(e)}\n onDoubleClick={e => this.handleRenameClick(e)}\n onContextMenu={e => this.handleContextMenu(e)}\n onDragStart={e => this.handleDragStart(e)}\n onDrop={e => this.handleDrop(e)}\n draggable='true'\n >\n {snippet.name.trim().length > 0 ? (\n snippet.name\n ) : (\n {i18n.__('Unnamed')}\n )}\n \n ) : (\n this.handleNameInputChange(e)}\n onBlur={e => this.handleNameInputBlur(e)}\n onKeyDown={e => this.handleNameInputKeyDown(e)}\n />\n )}\n {isDeletable && (\n this.handleDeleteButtonClick(e)}\n >\n \n \n )}\n
\n )\n }\n}\n\nSnippetTab.propTypes = {}\n\nexport default CSSModules(SnippetTab, styles)\n" }, { "path": "browser/components/SnippetTab.styl", "content": ".root\n position relative\n flex 1\n min-width 70px\n overflow hidden\n border-left 1px solid $ui-borderColor\n border-top 1px solid $ui-borderColor\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 20%)\n .deleteButton\n color: $ui-text-color\n visibility visible\n transition 0.15s\n .button\n color: $ui-text-color\n transition 0.15s\n\n.root--active\n @extend .root\n min-width 100px\n background-color alpha($ui-button--active-backgroundColor, 60%)\n .deleteButton\n visibility visible\n color: $ui-text-color\n transition 0.15s\n .button\n font-weight bold\n color: $ui-text-color\n transition 0.15s\n\n.button\n width 100%\n height 29px\n overflow ellipsis\n text-align left\n padding-right 23px\n border none\n background-color transparent\n transition 0.15s\n border-left 4px solid transparent\n color $ui-inactive-text-color\n\n.deleteButton\n position absolute\n top 5px\n height 20px\n right 5px\n width 20px\n text-align center\n border none\n padding 0\n color $ui-inactive-text-color\n background-color transparent\n border-radius 2px\n visibility hidden\n\n.input\n height 29px\n border $ui-active-color\n padding 0 5px\n width 100%\n outline none\n\nbody[data-theme=\"default\"], body[data-theme=\"white\"]\n .root--active\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n\nbody[data-theme=\"dark\"]\n .root\n border-color $ui-dark-borderColor\n border-top 1px solid $ui-dark-borderColor\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 20%)\n transition 0.15s\n .button\n color $ui-dark-text-color\n transition 0.15s\n .deleteButton\n color $ui-dark-text-color\n transition 0.15s\n\n .root--active\n background-color $ui-dark-button--active-backgroundColor\n border-left 1px solid $ui-dark-borderColor\n border-top 1px solid $ui-dark-borderColor\n .button\n color $ui-dark-text-color\n .deleteButton\n color $ui-dark-text-color\n\n .button\n border none\n background-color transparent\n transition color background-color 0.15s\n border-left 4px solid transparent\n\n .input\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-text-color\n transition 0.15s\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n border-color get-theme-var(theme, 'borderColor')\n &:hover\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n transition 0.15s\n .deleteButton\n color get-theme-var(theme, 'text-color')\n transition 0.15s\n .button\n color get-theme-var(theme, 'text-color')\n transition 0.15s\n\n .root--active\n color get-theme-var(theme, 'active-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n border-color get-theme-var(theme, 'borderColor')\n .deleteButton\n color get-theme-var(theme, 'text-color')\n .button\n color get-theme-var(theme, 'active-color')\n\n .button\n border none\n color $ui-inactive-text-color\n background-color transparent\n transition color background-color 0.15s\n border-left 4px solid transparent\n\n .input\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n color get-theme-var(theme, 'text-color')\n transition 0.15s\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/StorageItem.js", "content": "/**\n * @fileoverview Micro component for showing storage.\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport styles from './StorageItem.styl'\nimport CSSModules from 'browser/lib/CSSModules'\nimport _ from 'lodash'\nimport { SortableHandle } from 'react-sortable-hoc'\n\nconst DraggableIcon = SortableHandle(({ className }) => (\n \n))\n\nconst FolderIcon = ({ className, color, isActive }) => {\n const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'\n return (\n \n )\n}\n\n/**\n * @param {boolean} isActive\n * @param {object} tooltipRef,\n * @param {Function} handleButtonClick\n * @param {Function} handleMouseEnter\n * @param {Function} handleContextMenu\n * @param {string} folderName\n * @param {string} folderColor\n * @param {boolean} isFolded\n * @param {number} noteCount\n * @param {Function} handleDrop\n * @param {Function} handleDragEnter\n * @param {Function} handleDragOut\n * @return {React.Component}\n */\nconst StorageItem = ({\n styles,\n isActive,\n tooltipRef,\n handleButtonClick,\n handleMouseEnter,\n handleContextMenu,\n folderName,\n folderColor,\n isFolded,\n noteCount,\n handleDrop,\n handleDragEnter,\n handleDragLeave\n}) => {\n return (\n \n {!isFolded && (\n \n )}\n \n \n {isFolded\n ? _.truncate(folderName, { length: 1, omission: '' })\n : folderName}\n \n {!isFolded && _.isNumber(noteCount) && (\n {noteCount}\n )}\n {isFolded && (\n \n {folderName}\n \n )}\n \n )\n}\n\nStorageItem.propTypes = {\n isActive: PropTypes.bool.isRequired,\n tooltipRef: PropTypes.object,\n handleButtonClick: PropTypes.func,\n handleMouseEnter: PropTypes.func,\n handleContextMenu: PropTypes.func,\n folderName: PropTypes.string.isRequired,\n folderColor: PropTypes.string,\n isFolded: PropTypes.bool.isRequired,\n handleDragEnter: PropTypes.func.isRequired,\n handleDragLeave: PropTypes.func.isRequired,\n noteCount: PropTypes.number\n}\n\nexport default CSSModules(StorageItem, styles)\n" }, { "path": "browser/components/StorageItem.styl", "content": ".root\n width 100%\n user-select none\n\n.folderList-item\n display flex\n width 100%\n height 34px\n background-color transparent\n color $ui-inactive-text-color\n padding 0\n text-align left\n border none\n overflow ellipsis\n font-size 14px\n align-items: center\n &:first-child\n margin-top 0\n &:hover\n color #1EC38B;\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n transition background-color 0.15s\n &:active\n color $$ui-button-default-color\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n\n.folderList-item--active\n @extend .folderList-item\n color #1EC38B\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n &:hover\n color #1EC38B;\n background-color alpha($ui-button-default--active-backgroundColor, 50%)\n\n.folderList-item-name\n display block\n flex 1\n padding-right: 10px\n border-width 0 0 0 2px\n border-style solid\n border-color transparent\n overflow hidden\n text-overflow ellipsis\n\n.folderList-item-noteCount\n float right\n line-height 26px\n padding-right 15px\n font-size 13px\n\n.folderList-item-tooltip\n tooltip()\n position fixed\n padding 0 10px\n left 44px\n z-index 10\n pointer-events none\n opacity 0\n border-top-right-radius 2px\n border-bottom-right-radius 2px\n height 34px\n line-height 32px\n transition-property opacity\n\n.folderList-item:hover, .folderList-item--active:hover\n .folderList-item-tooltip\n opacity 1\n\n.folderList-item-name--folded\n @extend .folderList-item-name\n padding-left 7px\n .folderList-item-icon\n font-size 9px\n\n.folderList-item-icon\n padding-right: 10px\n\n.folderList-item-reorder\n font-size: 9px\n padding: 10px 8px 10px 9px;\n color: rgba(147, 147, 149, 0.3)\n cursor: ns-resize\n &:before\n content: \"\\f142 \\f142\"\n\nbody[data-theme=\"white\"]\n .folderList-item\n color $ui-inactive-text-color\n &:hover\n color $ui-text-color\n background-color alpha($ui-button--active-backgroundColor, 20%)\n transition background-color 0.15s\n &:active\n color $ui-text-color\n background-color $ui-button--active-backgroundColor\n\n .folderList-item--active\n @extend .folderList-item\n color $ui-text-color\n background-color $ui-button--active-backgroundColor\n &:hover\n color $ui-text-color\n background-color alpha($ui-button--active-backgroundColor, 50%)\n\nbody[data-theme=\"dark\"]\n .folderList-item\n &:hover\n background-color alpha($ui-dark-button--active-backgroundColor, 20%)\n color $ui-dark-text-color\n &:active\n color $ui-dark-text-color\n background-color $ui-dark-button--active-backgroundColor\n\n .folderList-item--active\n @extend .folderList-item\n color $ui-dark-text-color\n background-color $ui-dark-button--active-backgroundColor\n &:active\n background-color alpha($ui-dark-button--active-backgroundColor, 50%)\n &:hover\n color $ui-dark-text-color\n background-color alpha($ui-dark-button--active-backgroundColor, 50%)\n\napply-theme(theme)\n body[data-theme={theme}]\n .folderList-item\n &:hover\n background-color get-theme-var(theme, 'button-backgroundColor')\n color get-theme-var(theme, 'text-color')\n &:active\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n\n .folderList-item--active\n @extend .folderList-item\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n &:active\n background-color get-theme-var(theme, 'button-backgroundColor')\n &:hover\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/StorageList.js", "content": "/**\n * @fileoverview Micro component for showing StorageList\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport styles from './StorageList.styl'\nimport CSSModules from 'browser/lib/CSSModules'\n\n/**\n * @param {Array} storageList\n */\n\nconst StorageList = ({ storageList, isFolded }) => (\n
\n {storageList.length > 0 ? (\n storageList\n ) : (\n
No storage mount.
\n )}\n
\n)\n\nStorageList.propTypes = {\n storageList: PropTypes.arrayOf(PropTypes.element).isRequired\n}\nexport default CSSModules(StorageList, styles)\n" }, { "path": "browser/components/StorageList.styl", "content": ".storageList\n absolute left right\n bottom 37px\n top 180px\n overflow-y auto\n\n.storageList-folded\n @extend .storageList\n width 44px\n\n.storageList-empty\n padding 0 10px\n margin-top 15px\n line-height 24px\n color $ui-inactive-text-color\n\nbody[data-theme=\"dark\"]\n .storageList-empty\n color $ui-dark-inactive-text-color\n\n.root-folded\n .storageList-empty\n white-space nowrap\n transform rotate(90deg)\n" }, { "path": "browser/components/TagListItem.js", "content": "/**\n * @fileoverview Micro component for showing TagList.\n */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport styles from './TagListItem.styl'\nimport CSSModules from 'browser/lib/CSSModules'\n\n/**\n * @param {string} name\n * @param {Function} handleClickTagListItem\n * @param {Function} handleClickNarrowToTag\n * @param {boolean} isActive\n * @param {boolean} isRelated\n * @param {string} bgColor tab backgroundColor\n */\n\nconst TagListItem = ({\n name,\n handleClickTagListItem,\n handleClickNarrowToTag,\n handleContextMenu,\n isActive,\n isRelated,\n count,\n color\n}) => (\n handleContextMenu(e, name)}\n >\n {isRelated ? (\n handleClickNarrowToTag(name)}\n >\n \n \n ) : (\n \n )}\n handleClickTagListItem(name)}\n >\n \n \n {`# ${name}`}\n {count !== 0 ? count : ''}\n \n \n \n)\n\nTagListItem.propTypes = {\n name: PropTypes.string.isRequired,\n handleClickTagListItem: PropTypes.func.isRequired,\n color: PropTypes.string\n}\n\nexport default CSSModules(TagListItem, styles)\n" }, { "path": "browser/components/TagListItem.styl", "content": ".tagList-itemContainer\n display flex\n\n.tagList-item\n display flex\n flex 1\n width 100%\n height 26px\n background-color transparent\n color $ui-inactive-text-color\n padding 0\n margin-bottom 5px\n text-align left\n border none\n overflow ellipsis\n font-size 13px\n &:first-child\n margin-top 0\n &:hover\n color $ui-button-default-color\n background-color alpha($ui-button-default--active-backgroundColor, 20%)\n transition background-color 0.15s\n &:active, &:active:hover\n color $ui-button-default-color\n background-color $ui-button-default--active-backgroundColor\n\n.tagList-itemNarrow\n composes tagList-item\n flex none\n width 20px\n padding 0 4px\n\n.tagList-item-active\n background-color $ui-button-default--active-backgroundColor\n display flex\n flex 1\n width 100%\n height 26px\n padding 0\n margin-bottom 5px\n text-align left\n border none\n overflow ellipsis\n font-size 13px\n color $ui-button-default-color\n &:hover\n background-color alpha($ui-button-default--active-backgroundColor, 60%)\n transition 0.2s\n\n.tagList-itemNarrow-active\n composes tagList-item-active\n flex none\n width 20px\n padding 0 4px\n\n.tagList-item-name\n display block\n flex 1\n padding 0 8px 0 4px\n height 26px\n line-height 26px\n border-width 0 0 0 2px\n border-style solid\n border-color transparent\n overflow hidden\n text-overflow ellipsis\n\n.tagList-item-count\n float right\n line-height 26px\n padding-right 15px\n font-size 13px\n\n.tagList-item-color\n height 26px\n width 3px\n display inline-block\n\nbody[data-theme=\"white\"]\n .tagList-item\n color $ui-inactive-text-color\n &:hover\n color $ui-text-color\n background-color alpha($ui-button--active-backgroundColor, 20%)\n &:active\n color $ui-text-color\n background-color $ui-button--active-backgroundColor\n\n .tagList-item-active\n background-color $ui-button--active-backgroundColor\n color $ui-text-color\n &:hover\n background-color alpha($ui-button--active-backgroundColor, 60%)\n .tagList-item-count\n color $ui-text-color\n\napply-theme(theme)\n body[data-theme={theme}]\n .tagList-item\n color get-theme-var(theme, 'inactive-text-color')\n &:hover\n color get-theme-var(theme, 'text-color')\n background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)\n &:active\n color get-theme-var(theme, 'text-color')\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n\n .tagList-item-active\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n color get-theme-var(theme, 'text-color')\n &:active\n background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)\n &:hover\n color get-theme-var(theme, 'text-color')\n background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)\n .tagList-item-count\n color get-theme-var(theme, 'button--active-color')\n\nfor theme in 'dark'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/TodoListPercentage.js", "content": "/**\n * @fileoverview Percentage of todo achievement.\n */\n\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './TodoListPercentage.styl'\n\n/**\n * @param {number} percentageOfTodo\n */\n\nconst TodoListPercentage = ({ percentageOfTodo, onClearCheckboxClick }) => (\n \n
\n
\n

{percentageOfTodo}%

\n
\n
\n
\n

onClearCheckboxClick(e)}>\n clear\n

\n
\n \n)\n\nTodoListPercentage.propTypes = {\n percentageOfTodo: PropTypes.number.isRequired,\n onClearCheckboxClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(TodoListPercentage, styles)\n" }, { "path": "browser/components/TodoListPercentage.styl", "content": ".percentageBar\n display: flex\n position absolute\n top 72px\n right 0px\n left 0px\n background-color #DADFE1\n width 100%\n height: 17px\n font-size: 12px\n z-index 100\n border-radius 2px\n\n.progressBar\n background-color: #1EC38B\n height 17px\n border-radius 2px\n transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)\n\n.progressBarInner\n padding 0 10px\n min-width 1px\n height 100%\n display -webkit-box\n display box\n justify-content center\n align-items center\n\n\n.percentageText\n color #f4f4f4\n font-weight 600\n\n.todoClear\n display flex\n justify-content: flex-end\n position absolute\n z-index 120\n width 100%\n height 100%\n padding 2px 10px\n\n.todoClearText\n color #f4f4f4\n cursor pointer\n font-weight 500\n\nbody[data-theme=\"dark\"]\n .percentageBar\n background-color #444444\n\n .progressBar\n background-color: #1EC38B\n\n .percentageText\n color $ui-dark-text-color\n\n .todoClearText\n color $ui-dark-text-color\n\nbody[data-theme=\"solarized-dark\"]\n .percentageBar\n background-color #002b36\n\n .progressBar\n background-color: #2aa198\n\n .percentageText\n color #fdf6e3\n\n .todoClearText\n color #fdf6e3\n\napply-theme(theme)\n body[data-theme={theme}]\n .percentageBar\n background-color: get-theme-var(theme, 'borderColor')\n\n .progressBar\n background-color get-theme-var(theme, 'active-color')\n\n .percentageText\n color get-theme-var(theme, 'text-color')\n\nfor theme in 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/components/TodoProcess.js", "content": "/**\n * @fileoverview Percentage of todo achievement.\n */\n\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './TodoProcess.styl'\n\nconst TodoProcess = ({\n todoStatus: { total: totalTodo, completed: completedTodo }\n}) => (\n 0 ? '' : 'none' }}\n >\n
\n \n {completedTodo} of {totalTodo}\n
\n
\n \n
\n \n)\n\nTodoProcess.propTypes = {\n todoStatus: PropTypes.exact({\n total: PropTypes.number.isRequired,\n completed: PropTypes.number.isRequired\n })\n}\n\nexport default CSSModules(TodoProcess, styles)\n" }, { "path": "browser/components/TodoProcess.styl", "content": ".todo-process\n font-size 12px\n display flex\n padding-top 15px\n width 85%\n\n.todo-process-text\n display inline-block\n padding-right 10px\n white-space nowrap\n text-overflow ellipsis\n color $ui-inactive-text-color\n i\n color $ui-inactive-text-color\n padding-right 5px\n\n.todo-process-bar\n display inline-block\n margin auto\n height 4px\n border-radius 10px\n background-color #DADFE1\n border-radius 2px\n flex-grow 1\n border 1px solid alpha(#6C7A89, 10%)\n\n.todo-process-bar--inner\n height 100%\n border-radius 5px\n background-color #6C7A89\n transition 0.3s\n\n\nbody[data-theme=\"dark\"]\n .todo-process\n color $ui-dark-text-color\n\n .todo-process-bar\n background-color #363A3D\n\n .todo-process-text\n color $ui-inactive-text-color\n\n .todo-process-bar--inner\n background-color: alpha(#939395, 50%)\n" }, { "path": "browser/components/markdown.styl", "content": "global-reset()\n\nborderColor = #D0D0D0 // using\nhighlightenBorderColor = darken(borderColor, 20%)\ninvBorderColor = #404849\nbrandBorderColor = #3FB399\n\nfocusBorderColor = #369DCD\n\nbuttonBorderColor = #4C4C4C\n\nlightButtonColor = #898989\n\nhoverBackgroundColor= transparentify(#444, 4%) // using\n\ninactiveTextColor = #888 // using\ntextColor = #4D4D4D // using\nbackgroundColor= white\nfontSize= 14px // using\n\nshadowColor= #C5C5C5\n\ninvBackgroundColor = #4C4C4C\ninvTextColor = white\n\nbtnColor = #888\nbtnHighlightenColor = #000\n\nbrandColor = #2BAC8F\n\npopupShadow = 0 0 5px 0 #888\n\n\ntableHeadBgColor = white\ntableOddBgColor = #F9F9F9\ntableEvenBgColor = white\n\nfacebookColor= #3b5998\ngithubBtn= #201F1F\n\n// using\nsuccessBackgroundColor= #E0F0D9\nsuccessTextColor= #3E753F\nerrorBackgroundColor= #F2DEDE\nerrorTextColor= #A64444\ninfoBackgroundColor= #D9EDF7\ninfoTextColor= #34708E\n\npopupZIndex= 500\n\nbody\n font-size 16px\n padding 15px\n font-family helvetica, arial, sans-serif\n line-height 1.6\n overflow-x hidden\n background-color $ui-noteDetail-backgroundColor\n // do not allow display line breaks\n .katex-display > .katex\n white-space nowrap\n // allow inline line breaks\n .katex\n white-space initial\n .katex .katex-html\n display inline-flex\n .katex .mfrac>.vlist>span:nth-child(2)\n top 0 !important\n .katex-error\n background-color errorBackgroundColor\n color errorTextColor\n padding 5px\n margin -5px\n border-radius 5px\n .flowchart-error, .sequence-error .chart-error\n background-color errorBackgroundColor\n color errorTextColor\n padding 5px\n border-radius 5px\n justify-content left\nli\n label.taskListItem\n margin-left -1.8em\n &.checked\n text-decoration line-through\n opacity 0.5\n &.taskListItem.checked\n text-decoration line-through\n opacity 0.5\ndiv.math-rendered\n text-align center\n.math-failed\n background-color alpha(red, 0.1)\n color darken(red, 15%)\n padding 5px\n margin 5px 0\n border-radius 5px\nsup\n position relative\n top -.4em\n font-size 0.8em\n vertical-align top\nsub\n position relative\n bottom -.4em\n font-size 0.8em\n vertical-align top\na\n color brandColor\n text-decoration none\n padding 5px\n border-radius 5px\n margin -5px\n transition .1s\n img\n vertical-align sub\n &:hover\n color lighten(brandColor, 5%)\n text-decoration underline\n background-color alpha(#FFC95C, 0.3)\n &:visited\n color brandColor\nhr\n border-top none\n border-bottom solid 1px borderColor\n margin 15px 0\nh1, h2, h3, h4, h5, h6\n margin 1em 0 1.5em\n line-height 1.4\n font-weight bold\n word-wrap break-word\n padding .2em 0 .2em\nh1\n font-size 2.55em\n line-height 1.2\n border-bottom solid 1px borderColor\n &:first-child\n margin-top 0\nh2\n font-size 1.75em\n line-height 1.225\n border-bottom solid 1px borderColor\n &:first-child\n margin-top 0\nh3\n font-size 1.5em\n line-height 1.43\nh4\n font-size 1.25em\n line-height 1.4\nh5\n font-size 1em\n line-height 1.1\nh6\n font-size 1em\n color #777\np\n line-height 1.6em\n margin 0 0 1em\n white-space pre-line\n word-wrap break-word\nimg\n cursor zoom-in\n max-width 100%\nstrong, b\n font-weight bold\nem, i\n font-style italic\ns, del, strike\n text-decoration line-through\nu\n text-decoration underline\nblockquote\n border-left solid 4px brandBorderColor\n margin 0 0 1em\n padding 0 25px\nul\n list-style-type disc\n padding-left 2em\n margin-bottom 1em\n li\n display list-item\n &.taskListItem\n list-style none\n &>input\n margin-left -1.6em\n &>p\n margin-left -1.8em\n p\n margin 0\n &>li>ul, &>li>ol\n margin 0\n &>li>ul\n list-style-type circle\n &>li>ul\n list-style-type square\nol\n list-style-type decimal\n padding-left 2em\n margin-bottom 1em\n li\n display list-item\n p\n margin 0\n &>li>ul, &>li>ol\n margin 0\ncode\n padding 0.2em 0.4em\n background-color #f7f7f7\n border-radius 3px\n font-size 1em\n text-decoration none\n margin-right 2px\npre\n padding 0.5rem !important\n border solid 1px #D1D1D1\n border-radius 5px\n overflow-x auto\n margin 0 0 1rem\n display flex\n line-height 1.4em\n code\n background-color inherit\n margin 0\n padding 0\n border none\n border-radius 0\n &.CodeMirror\n height initial\n flex-wrap wrap\n &>code\n flex 1\n overflow-x auto\n &.mermaid svg\n max-width 100% !important\n &>span.filename\n margin -0.5rem 100% 0.5rem -0.5rem\n padding 0.125rem 0.375rem\n background-color #777;\n color white\n &:empty\n display none\n &>span.lineNumber\n display none\n font-size 1em\n padding 0.5rem 0\n margin -0.5rem 0.5rem -0.5rem -0.5rem\n border-right 1px solid\n text-align right\n border-top-left-radius 4px\n border-bottom-left-radius 4px\n &.CodeMirror-gutters\n position initial\n top initial\n left initial\n min-height 0 !important\n &>span\n display block\n padding 0 .5em 0\ntable\n display block\n width 100%\n margin 0 0 1em\n overflow-x auto\n thead\n tr\n background-color tableHeadBgColor\n th\n border-style solid\n padding 6px 13px\n line-height 1.6\n border-width 1px 0 2px 1px\n border-color borderColor\n font-weight bold\n &:last-child\n border-right solid 1px borderColor\n tbody\n tr:nth-child(2n + 1)\n background-color tableOddBgColor\n tr:nth-child(2n)\n background-color tableEvenBgColor\n td\n border-style solid\n padding 6px 13px\n line-height 1.6\n border-width 0 0 1px 1px\n border-color borderColor\n &:last-child\n border-right solid 1px borderColor\nkbd\n background-color #fafbfc\n border solid 1px borderColor\n border-bottom-color btnColor\n border-radius 3px\n box-shadow inset 0 -1px 0 #959da5\n display inline-block\n font-size .8em\n line-height 1\n padding 3px 5px\n\n$admonition\n box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)\n position relative\n margin 1.5625em 0\n padding 0 1.2rem\n border-left .4rem solid #448aff\n border-radius .2rem\n overflow auto\n\nhtml .admonition>:last-child\n margin-bottom 1.2rem\n\n.admonition .admonition\n margin 1em 0\n\n.admonition p\n margin-top: 0.5em\n\n$admonition-icon\n position absolute\n left 1.2rem\n font-family: \"Material Icons\"\n font-weight: normal;\n font-style: normal;\n font-size: 24px\n display: inline-block;\n line-height: 1;\n text-transform: none;\n letter-spacing: normal;\n word-wrap: normal;\n white-space: nowrap;\n direction: ltr;\n\n /* Support for all WebKit browsers. */\n -webkit-font-smoothing: antialiased;\n /* Support for Safari and Chrome. */\n text-rendering: optimizeLegibility;\n\n /* Support for Firefox. */\n -moz-osx-font-smoothing: grayscale;\n\n /* Support for IE. */\n font-feature-settings: 'liga';\n\n$admonition-title\n margin 0 -1.2rem\n padding .8rem 1.2rem .8rem 4rem\n border-bottom .1rem solid rgba(68,138,255,.1)\n background-color rgba(68,138,255,.1)\n font-weight 700\n\n.admonition>.admonition-title:last-child\n margin-bottom 0\n\nadmonition_types = {\n note: {color: #0288D1, icon: \"note\"},\n hint: {color: #009688, icon: \"info_outline\"},\n danger: {color: #c2185b, icon: \"block\"},\n caution: {color: #ffa726, icon: \"warning\"},\n error: {color: #d32f2f, icon: \"error_outline\"},\n question: {color: #64dd17, icon: \"help_outline\"},\n quote: {color: #9e9e9e, icon: \"format_quote\"},\n abstract: {color: #00b0ff, icon: \"subject\"},\n attention: {color: #455a64, icon: \"priority_high\"},\n}\n\nfor name, val in admonition_types\n .admonition.{name}\n @extend $admonition\n border-left-color: val[color]\n\n .admonition.{name}>.admonition-title\n @extend $admonition-title\n border-bottom-color: .1rem solid rgba(val[color], 0.2)\n background-color: rgba(val[color], 0.2)\n\n .admonition.{name}>.admonition-title:before\n @extend $admonition-icon\n color: val[color]\n content: val[icon]\n\ndl\n margin 2rem 0\n padding 0\n display flex\n width 100%\n flex-wrap wrap\n align-items flex-start\n border-bottom 1px solid borderColor\n background-color tableHeadBgColor\n\ndt\n border-top 1px solid borderColor\n font-weight bold\n text-align right\n overflow hidden\n flex-basis 20%\n padding 0.4rem 0.9rem\n box-sizing border-box\n\ndd\n border-top 1px solid borderColor\n flex-basis 80%\n padding 0.4rem 0.9rem\n min-height 2.5rem\n background-color $ui-noteDetail-backgroundColor\n box-sizing border-box\n\ndd + dd\n margin-left 20%\n\npre.fence\n flex-wrap wrap\n\n .chart, .flowchart, .mermaid, .sequence\n display flex\n justify-content center\n background-color white\n max-width 100%\n flex-grow 1\n\n canvas, svg\n max-width 100% !important\n\n svg[ratio]\n width 100%\n\n .gallery\n width 100%\n height 50vh\n\n .carousel\n .carousel-main img\n min-width auto\n max-width 100%\n min-height auto\n max-height 100%\n\n .carousel-footer::-webkit-scrollbar-corner\n background-color transparent\n\n .carousel-main, .carousel-footer\n background-color $ui-noteDetail-backgroundColor\n .prev, .next\n color $ui-text-color\n background-color $ui-tag-backgroundColor\n\n.markdownIt-TOC-wrapper\n list-style none\n position fixed\n right 0\n top 0\n margin-left 15px\n z-index 1000\n transition transform .2s ease-in-out\n transform translateX(100%)\n\n .markdownIt-TOC\n display block\n max-height 90vh\n overflow-y auto\n padding 25px\n padding-left 38px\n\n &,\n &:before\n background-color $ui-dark-backgroundColor\n color: $ui-dark-text-color\n\n &:hover\n transform translateX(-15px)\n\n &:before\n content 'TOC'\n position absolute\n width 60px\n height 30px\n top 60px\n left -29px\n display flex\n align-items center\n justify-content center\n transform-origin top left\n transform rotate(-90deg)\n\nthemeDarkBackground = darken(#21252B, 10%)\nthemeDarkText = #f9f9f9\nthemeDarkBorder = lighten(themeDarkBackground, 20%)\nthemeDarkPreview = $ui-dark-noteDetail-backgroundColor\nthemeDarkTableOdd = themeDarkPreview\nthemeDarkTableEven = darken(themeDarkPreview, 10%)\nthemeDarkTableHead = themeDarkTableEven\nthemeDarkTableBorder = themeDarkBorder\nthemeDarkModalButtonDefault = themeDarkPreview\nthemeDarkModalButtonDanger = #BF360C\n\nbody[data-theme=\"dark\"]\n color themeDarkText\n border-color themeDarkBorder\n background-color themeDarkPreview\n a:hover\n background-color alpha(lighten(brandColor, 30%), 0.2) !important\n\n code\n color #EA6730\n border-color darken(themeDarkBorder, 10%)\n background-color lighten(themeDarkPreview, 5%)\n\n pre\n border-color lighten(#21252B, 20%)\n code\n background-color transparent\n\n label.taskListItem\n background-color themeDarkPreview\n table\n thead\n tr\n background-color themeDarkTableHead\n th\n border-color themeDarkTableBorder\n &:last-child\n border-right solid 1px themeDarkTableBorder\n tbody\n tr:nth-child(2n + 1)\n background-color themeDarkTableOdd\n tr:nth-child(2n)\n background-color themeDarkTableEven\n td\n border-color themeDarkTableBorder\n &:last-child\n border-right solid 1px themeDarkTableBorder\n kbd\n background-color themeDarkBorder\n color themeDarkText\n dl\n border-color themeDarkBorder\n background-color themeDarkTableHead\n dt\n border-color themeDarkBorder\n dd\n border-color themeDarkBorder\n background-color themeDarkPreview\n\n pre.fence\n .gallery\n .carousel-main, .carousel-footer\n background-color $ui-dark-noteDetail-backgroundColor\n .prev, .next\n color $ui-dark-text-color\n background-color $ui-dark-tag-backgroundColor\n\n .markdownIt-TOC-wrapper\n &,\n &:before\n background-color darken(themeDarkBackground, 5%)\n color themeDarkText\n\napply-theme(theme)\n body[data-theme={theme}]\n color get-theme-var(theme, 'text-color')\n border-color themeDarkBorder\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n table\n thead\n tr\n background-color get-theme-var(theme, 'table-head-backgroundColor')\n th\n border-color get-theme-var(theme, 'table-borderColor')\n &:last-child\n border-right solid 1px get-theme-var(theme, 'table-borderColor')\n tbody\n tr:nth-child(2n + 1)\n background-color get-theme-var(theme, 'table-odd-backgroundColor')\n tr:nth-child(2n)\n background-color get-theme-var(theme, 'table-even-backgroundColor')\n td\n border-color get-theme-var(theme, 'table-borderColor')\n &:last-child\n border-right solid 1px get-theme-var(theme, 'table-borderColor')\n kbd\n background-color get-theme-var(theme, 'kbd-backgroundColor')\n color get-theme-var(theme, 'kbd-color')\n\n dl\n border-color themeDarkBorder\n background-color get-theme-var(theme, 'table-head-backgroundColor')\n dt\n border-color themeDarkBorder\n dd\n border-color themeDarkBorder\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n\n pre.fence\n .gallery\n .carousel-main, .carousel-footer\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n .prev, .next\n color get-theme-var(theme, 'button--active-color')\n background-color get-theme-var(theme, 'button-backgroundColor')\n\n .markdownIt-TOC-wrapper\n &,\n &:before\n background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)\n color themeDarkText\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)\n" }, { "path": "browser/components/render/MermaidRender.js", "content": "import mermaidAPI from 'mermaid/dist/mermaid.min.js'\nimport uiThemes from 'browser/lib/ui-themes'\n\n// fixes bad styling in the mermaid dark theme\nconst darkThemeStyling = `\n.loopText tspan {\n fill: white;\n}`\n\nfunction getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min)) + min\n}\n\nfunction getId() {\n const pool = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'\n let id = 'm-'\n for (let i = 0; i < 7; i++) {\n id += pool[getRandomInt(0, 16)]\n }\n return id\n}\n\nfunction render(element, content, theme, enableHTMLLabel) {\n try {\n const height = element.attributes.getNamedItem('data-height')\n const isPredefined = height && height.value !== 'undefined'\n\n if (isPredefined) {\n element.style.height = height.value + 'vh'\n }\n\n const isDarkTheme = uiThemes.some(\n item => item.name === theme && item.isDark\n )\n\n mermaidAPI.initialize({\n theme: isDarkTheme ? 'dark' : 'default',\n themeCSS: isDarkTheme ? darkThemeStyling : '',\n flowchart: {\n htmlLabels: enableHTMLLabel\n },\n gantt: {\n useWidth: element.clientWidth\n }\n })\n\n mermaidAPI.render(getId(), content, svgGraph => {\n element.innerHTML = svgGraph\n\n if (!isPredefined) {\n const el = element.firstChild\n const viewBox = el.getAttribute('viewBox').split(' ')\n\n let ratio = viewBox[2] / viewBox[3]\n\n if (el.style.maxWidth) {\n const maxWidth = parseFloat(el.style.maxWidth)\n\n ratio *= el.parentNode.clientWidth / maxWidth\n }\n\n el.setAttribute('ratio', ratio)\n el.setAttribute('height', el.parentNode.clientWidth / ratio)\n }\n })\n } catch (e) {\n element.className = 'mermaid-error'\n element.innerHTML = 'mermaid diagram parse error: ' + e.message\n }\n}\n\nexport default render\n" }, { "path": "browser/lib/CMLanguageList.js", "content": "export const languageMaps = {\n brainfuck: 'Brainfuck',\n cpp: 'C++',\n cs: 'C#',\n clojure: 'Clojure',\n 'clojure-repl': 'ClojureScript',\n cmake: 'CMake',\n coffeescript: 'CoffeeScript',\n crystal: 'Crystal',\n css: 'CSS',\n d: 'D',\n dart: 'Dart',\n delphi: 'Pascal',\n diff: 'Diff',\n django: 'Django',\n dockerfile: 'Dockerfile',\n ebnf: 'EBNF',\n elm: 'Elm',\n erlang: 'Erlang',\n 'erlang-repl': 'Erlang',\n fortran: 'Fortran',\n fsharp: 'F#',\n gherkin: 'Gherkin',\n go: 'Go',\n groovy: 'Groovy',\n haml: 'HAML',\n haskell: 'Haskell',\n haxe: 'Haxe',\n http: 'HTTP',\n ini: 'toml',\n java: 'Java',\n javascript: 'JavaScript',\n json: 'JSON',\n julia: 'Julia',\n kotlin: 'Kotlin',\n less: 'LESS',\n livescript: 'LiveScript',\n lua: 'Lua',\n markdown: 'Markdown',\n mathematica: 'Mathematica',\n nginx: 'Nginx',\n nsis: 'NSIS',\n objectivec: 'Objective-C',\n ocaml: 'Ocaml',\n perl: 'Perl',\n php: 'PHP',\n powershell: 'PowerShell',\n properties: 'Properties files',\n protobuf: 'ProtoBuf',\n python: 'Python',\n puppet: 'Puppet',\n q: 'Q',\n r: 'R',\n ruby: 'Ruby',\n rust: 'Rust',\n sas: 'SAS',\n scala: 'Scala',\n scheme: 'Scheme',\n scss: 'SCSS',\n shell: 'Shell',\n smalltalk: 'Smalltalk',\n sml: 'SML',\n sql: 'SQL',\n stylus: 'Stylus',\n swift: 'Swift',\n tcl: 'Tcl',\n tex: 'LaTex',\n typescript: 'TypeScript',\n twig: 'Twig',\n vbnet: 'VB.NET',\n vbscript: 'VBScript',\n verilog: 'Verilog',\n vhdl: 'VHDL',\n xml: 'HTML',\n xquery: 'XQuery',\n yaml: 'YAML',\n elixir: 'Elixir'\n}\n" }, { "path": "browser/lib/CSSModules.js", "content": "import CSSModules from 'react-css-modules'\n\nexport default function(component, styles) {\n return CSSModules(component, styles, { handleNotFoundStyleName: 'log' })\n}\n" }, { "path": "browser/lib/Languages.js", "content": "const languages = [\n {\n name: 'Albanian',\n locale: 'sq'\n },\n {\n name: 'Chinese (zh-CN)',\n locale: 'zh-CN'\n },\n {\n name: 'Chinese (zh-TW)',\n locale: 'zh-TW'\n },\n {\n name: 'Czech',\n locale: 'cs'\n },\n {\n name: 'Danish',\n locale: 'da'\n },\n {\n name: 'English',\n locale: 'en'\n },\n {\n name: 'French',\n locale: 'fr'\n },\n {\n name: 'German',\n locale: 'de'\n },\n {\n name: 'Hungarian',\n locale: 'hu'\n },\n {\n name: 'Japanese',\n locale: 'ja'\n },\n {\n name: 'Korean',\n locale: 'ko'\n },\n {\n name: 'Norwegian',\n locale: 'no'\n },\n {\n name: 'Polish',\n locale: 'pl'\n },\n {\n name: 'Portuguese (PT-BR)',\n locale: 'pt-BR'\n },\n {\n name: 'Portuguese (PT-PT)',\n locale: 'pt-PT'\n },\n {\n name: 'Russian',\n locale: 'ru'\n },\n {\n name: 'Spanish',\n locale: 'es-ES'\n },\n {\n name: 'Turkish',\n locale: 'tr'\n },\n {\n name: 'Thai',\n locale: 'th'\n }\n]\n\nmodule.exports = {\n getLocales() {\n return languages.reduce(function(localeList, locale) {\n localeList.push(locale.locale)\n return localeList\n }, [])\n },\n getLanguages() {\n return languages\n }\n}\n" }, { "path": "browser/lib/Mutable.js", "content": "class MutableMap {\n constructor(iterable) {\n this._map = new Map(iterable)\n Object.defineProperty(this, 'size', {\n get: () => this._map.size,\n set: function(value) {\n this['size'] = value\n }\n })\n }\n\n get(...args) {\n return this._map.get(...args)\n }\n\n set(...args) {\n return this._map.set(...args)\n }\n\n delete(...args) {\n return this._map.delete(...args)\n }\n\n has(...args) {\n return this._map.has(...args)\n }\n\n clear(...args) {\n return this._map.clear(...args)\n }\n\n forEach(...args) {\n return this._map.forEach(...args)\n }\n\n [Symbol.iterator]() {\n return this._map[Symbol.iterator]()\n }\n\n map(cb) {\n const result = []\n for (const [key, value] of this._map) {\n result.push(cb(value, key))\n }\n return result\n }\n\n toJS() {\n const result = {}\n for (let [key, value] of this._map) {\n if (value instanceof MutableSet || value instanceof MutableMap) {\n value = value.toJS()\n }\n result[key] = value\n }\n return result\n }\n}\n\nclass MutableSet {\n constructor(iterable) {\n this._set = new Set(iterable)\n Object.defineProperty(this, 'size', {\n get: () => this._set.size,\n set: function(value) {\n this['size'] = value\n }\n })\n }\n\n add(...args) {\n return this._set.add(...args)\n }\n\n delete(...args) {\n return this._set.delete(...args)\n }\n\n forEach(...args) {\n return this._set.forEach(...args)\n }\n\n [Symbol.iterator]() {\n return this._set[Symbol.iterator]()\n }\n\n map(cb) {\n const result = []\n this._set.forEach(function(value, key) {\n result.push(cb(value, key))\n })\n\n return result\n }\n\n toJS() {\n return Array.from(this._set)\n }\n}\n\nconst Mutable = {\n Map: MutableMap,\n Set: MutableSet\n}\n\nmodule.exports = Mutable\n" }, { "path": "browser/lib/RcParser.js", "content": "import path from 'path'\nimport sander from 'sander'\n\nconst BOOSTNOTERC = '.boostnoterc'\nconst homePath = global.process.env.HOME || global.process.env.USERPROFILE\nconst _boostnotercPath = path.join(homePath, BOOSTNOTERC)\n\nexport function parse(boostnotercPath = _boostnotercPath) {\n if (!sander.existsSync(boostnotercPath)) return {}\n try {\n return JSON.parse(sander.readFileSync(boostnotercPath).toString())\n } catch (e) {\n console.warn(e)\n console.warn(\"Your .boostnoterc is broken so it's not used.\")\n return {}\n }\n}\n\nexport default {\n parse\n}\n" }, { "path": "browser/lib/SnippetManager.js", "content": "import crypto from 'crypto'\nimport fs from 'fs'\nimport consts from './consts'\n\nclass SnippetManager {\n constructor() {\n this.defaultSnippet = [\n {\n id: crypto.randomBytes(16).toString('hex'),\n name: 'Dummy text',\n prefix: ['lorem', 'ipsum'],\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n }\n ]\n this.snippets = []\n this.expandSnippet = this.expandSnippet.bind(this)\n this.init = this.init.bind(this)\n this.assignSnippets = this.assignSnippets.bind(this)\n }\n\n init() {\n if (fs.existsSync(consts.SNIPPET_FILE)) {\n try {\n this.snippets = JSON.parse(\n fs.readFileSync(consts.SNIPPET_FILE, { encoding: 'UTF-8' })\n )\n } catch (error) {\n console.log('Error while parsing snippet file')\n }\n return\n }\n fs.writeFileSync(\n consts.SNIPPET_FILE,\n JSON.stringify(this.defaultSnippet, null, 4),\n 'utf8'\n )\n this.snippets = this.defaultSnippet\n }\n\n assignSnippets(snippets) {\n this.snippets = snippets\n }\n\n expandSnippet(wordBeforeCursor, cursor, cm) {\n const templateCursorString = ':{}'\n for (let i = 0; i < this.snippets.length; i++) {\n if (this.snippets[i].prefix.indexOf(wordBeforeCursor.text) === -1) {\n continue\n }\n if (this.snippets[i].content.indexOf(templateCursorString) !== -1) {\n const snippetLines = this.snippets[i].content.split('\\n')\n let cursorLineNumber = 0\n let cursorLinePosition = 0\n\n let cursorIndex\n for (let j = 0; j < snippetLines.length; j++) {\n cursorIndex = snippetLines[j].indexOf(templateCursorString)\n\n if (cursorIndex !== -1) {\n cursorLineNumber = j\n cursorLinePosition = cursorIndex\n\n break\n }\n }\n\n cm.replaceRange(\n this.snippets[i].content.replace(templateCursorString, ''),\n wordBeforeCursor.range.from,\n wordBeforeCursor.range.to\n )\n cm.setCursor({\n line: cursor.line + cursorLineNumber,\n ch: cursorLinePosition + cursor.ch - wordBeforeCursor.text.length\n })\n } else {\n cm.replaceRange(\n this.snippets[i].content,\n wordBeforeCursor.range.from,\n wordBeforeCursor.range.to\n )\n }\n return true\n }\n\n return false\n }\n}\n\nconst manager = new SnippetManager()\nexport default manager\n" }, { "path": "browser/lib/TextEditorInterface.js", "content": "import { Point } from '@susisu/mte-kernel'\n\nexport default class TextEditorInterface {\n constructor(editor) {\n this.editor = editor\n this.doc = editor.getDoc()\n this.transaction = false\n }\n\n getCursorPosition() {\n const { line, ch } = this.doc.getCursor()\n return new Point(line, ch)\n }\n\n setCursorPosition(pos) {\n this.doc.setCursor({\n line: pos.row,\n ch: pos.column\n })\n }\n\n setSelectionRange(range) {\n this.doc.setSelection(\n { line: range.start.row, ch: range.start.column },\n { line: range.end.row, ch: range.end.column }\n )\n }\n\n getLastRow() {\n return this.doc.lineCount() - 1\n }\n\n acceptsTableEdit() {\n return true\n }\n\n getLine(row) {\n return this.doc.getLine(row)\n }\n\n insertLine(row, line) {\n const lastRow = this.getLastRow()\n if (row > lastRow) {\n const lastLine = this.getLine(lastRow)\n this.doc.replaceRange(\n '\\n' + line,\n { line: lastRow, ch: lastLine.length },\n { line: lastRow, ch: lastLine.length }\n )\n } else {\n this.doc.replaceRange(\n line + '\\n',\n { line: row, ch: 0 },\n { line: row, ch: 0 }\n )\n }\n }\n\n deleteLine(row) {\n const lastRow = this.getLastRow()\n if (row >= lastRow) {\n if (lastRow > 0) {\n const preLastLine = this.getLine(lastRow - 1)\n const lastLine = this.getLine(lastRow)\n this.doc.replaceRange(\n '',\n { line: lastRow - 1, ch: preLastLine.length },\n { line: lastRow, ch: lastLine.length }\n )\n } else {\n const lastLine = this.getLine(lastRow)\n this.doc.replaceRange(\n '',\n { line: lastRow, ch: 0 },\n { line: lastRow, ch: lastLine.length }\n )\n }\n } else {\n this.doc.replaceRange('', { line: row, ch: 0 }, { line: row + 1, ch: 0 })\n }\n }\n\n replaceLines(startRow, endRow, lines) {\n const lastRow = this.getLastRow()\n if (endRow > lastRow) {\n const lastLine = this.getLine(lastRow)\n this.doc.replaceRange(\n lines.join('\\n'),\n { line: startRow, ch: 0 },\n { line: lastRow, ch: lastLine.length }\n )\n } else {\n this.doc.replaceRange(\n lines.join('\\n') + '\\n',\n { line: startRow, ch: 0 },\n { line: endRow, ch: 0 }\n )\n }\n }\n\n transact(func) {\n this.transaction = true\n func()\n this.transaction = false\n if (this.onDidFinishTransaction) {\n this.onDidFinishTransaction.call(undefined)\n }\n }\n}\n" }, { "path": "browser/lib/confirmDeleteNote.js", "content": "import electron from 'electron'\nimport i18n from 'browser/lib/i18n'\nconst { remote } = electron\nconst { dialog } = remote\n\nexport function confirmDeleteNote(confirmDeletion, permanent) {\n if (confirmDeletion || permanent) {\n const alertConfig = {\n type: 'warning',\n message: i18n.__('Confirm note deletion'),\n detail: i18n.__('This will permanently remove this note.'),\n buttons: [i18n.__('Confirm'), i18n.__('Cancel')]\n }\n\n const dialogButtonIndex = dialog.showMessageBox(\n remote.getCurrentWindow(),\n alertConfig\n )\n\n return dialogButtonIndex === 0\n }\n\n return true\n}\n" }, { "path": "browser/lib/consts.js", "content": "const path = require('path')\nconst fs = require('sander')\nconst { remote } = require('electron')\nconst { app } = remote\n\nconst CODEMIRROR_THEME_PATH = 'node_modules/codemirror/theme'\nconst CODEMIRROR_EXTRA_THEME_PATH = 'extra_scripts/codemirror/theme'\n\nconst isProduction = process.env.NODE_ENV === 'production'\n\nconst paths = [\n isProduction\n ? path.join(app.getAppPath(), CODEMIRROR_THEME_PATH)\n : path.resolve(CODEMIRROR_THEME_PATH),\n isProduction\n ? path.join(app.getAppPath(), CODEMIRROR_EXTRA_THEME_PATH)\n : path.resolve(CODEMIRROR_EXTRA_THEME_PATH)\n]\n\nconst themes = paths\n .map(directory =>\n fs.readdirSync(directory).map(file => {\n const name = file.substring(0, file.lastIndexOf('.'))\n\n return {\n name,\n path: path.join(directory, file),\n className: `cm-s-${name}`\n }\n })\n )\n .reduce((accumulator, value) => accumulator.concat(value), [])\n .sort((a, b) => a.name.localeCompare(b.name))\n\nthemes.splice(\n themes.findIndex(({ name }) => name === 'solarized'),\n 1,\n {\n name: 'solarized dark',\n path: path.join(paths[0], 'solarized.css'),\n className: `cm-s-solarized cm-s-dark`\n },\n {\n name: 'solarized light',\n path: path.join(paths[0], 'solarized.css'),\n className: `cm-s-solarized cm-s-light`\n }\n)\nthemes.splice(0, 0, {\n name: 'default',\n path: path.join(paths[0], 'elegant.css'),\n className: `cm-s-default`\n})\n\nconst snippetFile =\n process.env.NODE_ENV !== 'test'\n ? path.join(app.getPath('userData'), 'snippets.json')\n : '' // return nothing as we specified different path to snippets.json in test\n\nconst consts = {\n FOLDER_COLORS: [\n '#E10051',\n '#FF8E00',\n '#E8D252',\n '#3FD941',\n '#30D5C8',\n '#2BA5F7',\n '#B013A4'\n ],\n FOLDER_COLOR_NAMES: [\n 'Razzmatazz (Red)',\n 'Pizazz (Orange)',\n 'Confetti (Yellow)',\n 'Emerald (Green)',\n 'Turquoise',\n 'Dodger Blue',\n 'Violet Eggplant'\n ],\n THEMES: themes,\n SNIPPET_FILE: snippetFile,\n DEFAULT_EDITOR_FONT_FAMILY: [\n 'Monaco',\n 'Menlo',\n 'Ubuntu Mono',\n 'Consolas',\n 'source-code-pro',\n 'monospace'\n ]\n}\n\nmodule.exports = consts\n" }, { "path": "browser/lib/context.js", "content": "const { remote } = require('electron')\nconst { Menu, MenuItem } = remote\n\nfunction popup(templates) {\n const menu = new Menu()\n templates.forEach(item => {\n menu.append(new MenuItem(item))\n })\n menu.popup(remote.getCurrentWindow())\n}\n\nconst context = {\n popup\n}\n\nmodule.export = context\nexport default context\n" }, { "path": "browser/lib/contextMenuBuilder.js", "content": "import i18n from 'browser/lib/i18n'\nimport fs from 'fs'\n\nconst { remote } = require('electron')\nconst { Menu } = remote.require('electron')\nconst { clipboard } = remote.require('electron')\nconst { shell } = remote.require('electron')\nconst spellcheck = require('./spellcheck')\nconst uri2path = require('file-uri-to-path')\n\n/**\n * Creates the context menu that is shown when there is a right click in the editor of a (not-snippet) note.\n * If the word is does not contains a spelling error (determined by the 'error style'), no suggestions for corrections are requested\n * => they are not visible in the context menu\n * @param editor CodeMirror editor\n * @param {MouseEvent} event that has triggered the creation of the context menu\n * @returns {Electron.Menu} The created electron context menu\n */\nconst buildEditorContextMenu = function(editor, event) {\n if (\n editor == null ||\n event == null ||\n event.pageX == null ||\n event.pageY == null\n ) {\n return null\n }\n const cursor = editor.coordsChar({ left: event.pageX, top: event.pageY })\n const wordRange = editor.findWordAt(cursor)\n const word = editor.getRange(wordRange.anchor, wordRange.head)\n const existingMarks = editor.findMarks(wordRange.anchor, wordRange.head) || []\n let isMisspelled = false\n for (const mark of existingMarks) {\n if (mark.className === spellcheck.getCSSClassName()) {\n isMisspelled = true\n break\n }\n }\n let suggestion = []\n if (isMisspelled) {\n suggestion = spellcheck.getSpellingSuggestion(word)\n }\n\n const selection = {\n isMisspelled: isMisspelled,\n spellingSuggestions: suggestion\n }\n const template = [\n {\n role: 'cut'\n },\n {\n role: 'copy'\n },\n {\n role: 'paste'\n },\n {\n role: 'selectall'\n }\n ]\n\n if (selection.isMisspelled) {\n const suggestions = selection.spellingSuggestions\n template.unshift.apply(\n template,\n suggestions\n .map(function(suggestion) {\n return {\n label: suggestion,\n click: function(suggestion) {\n if (editor != null) {\n editor.replaceRange(\n suggestion.label,\n wordRange.anchor,\n wordRange.head\n )\n }\n }\n }\n })\n .concat({\n type: 'separator'\n })\n )\n }\n return Menu.buildFromTemplate(template)\n}\n\n/**\n * Creates the context menu that is shown when there is a right click Markdown preview of a (not-snippet) note.\n * @param {MarkdownPreview} markdownPreview\n * @param {MouseEvent} event that has triggered the creation of the context menu\n * @returns {Electron.Menu} The created electron context menu\n */\nconst buildMarkdownPreviewContextMenu = function(markdownPreview, event) {\n if (\n markdownPreview == null ||\n event == null ||\n event.pageX == null ||\n event.pageY == null\n ) {\n return null\n }\n\n // Default context menu inclusions\n const template = [\n {\n role: 'copy'\n },\n {\n role: 'selectall'\n }\n ]\n\n if (\n event.target.tagName.toLowerCase() === 'a' &&\n event.target.getAttribute('href')\n ) {\n // Link opener for files on the local system pointed to by href\n const href = event.target.href\n const isLocalFile = href.startsWith('file:')\n if (isLocalFile) {\n const absPath = uri2path(href)\n try {\n if (fs.lstatSync(absPath).isFile()) {\n template.push({\n label: i18n.__('Show in explorer'),\n click: e => shell.showItemInFolder(absPath)\n })\n }\n } catch (e) {\n console.log(\n 'Error while evaluating if the file is locally available',\n e\n )\n }\n }\n\n // Add option to context menu to copy url\n template.push({\n label: i18n.__('Copy Url'),\n click: e => clipboard.writeText(href)\n })\n }\n return Menu.buildFromTemplate(template)\n}\n\nmodule.exports = {\n buildEditorContextMenu: buildEditorContextMenu,\n buildMarkdownPreviewContextMenu: buildMarkdownPreviewContextMenu\n}\n" }, { "path": "browser/lib/convertModeName.js", "content": "export default function convertModeName(name) {\n switch (name) {\n case 'ejs':\n return 'Embedded Javascript'\n case 'html_ruby':\n return 'Embedded Ruby'\n case 'objectivec':\n return 'Objective C'\n case 'text':\n return 'Plain Text'\n default:\n return name\n }\n}\n" }, { "path": "browser/lib/customMeta.js", "content": "import CodeMirror from 'codemirror'\nimport 'codemirror-mode-elixir'\n\nconst stylusCodeInfo = CodeMirror.modeInfo.find(info => info.name === 'Stylus')\nif (stylusCodeInfo == null) {\n CodeMirror.modeInfo.push({\n name: 'Stylus',\n mime: 'text/x-styl',\n mode: 'stylus',\n ext: ['styl'],\n alias: ['styl']\n })\n} else {\n stylusCodeInfo.alias = ['styl']\n}\nCodeMirror.modeInfo.push({\n name: 'Elixir',\n mime: 'text/x-elixir',\n mode: 'elixir',\n ext: ['ex']\n})\n" }, { "path": "browser/lib/date-formatter.js", "content": "/**\n * @fileoverview Formatting date string.\n */\nimport moment from 'moment'\n\n/**\n * @description Return date string. For example, 'Sep.9, 2016 12:00'.\n * @param {mixed}\n * @return {string}\n */\nexport function formatDate(date) {\n const m = moment(date)\n if (!m.isValid()) {\n throw Error('Invalid argument.')\n }\n\n return m.format('MMM D, gggg H:mm')\n}\n" }, { "path": "browser/lib/findNoteTitle.js", "content": "export function findNoteTitle(\n value,\n enableFrontMatterTitle,\n frontMatterTitleField = 'title'\n) {\n const splitted = value.split('\\n')\n let title = null\n let isInsideCodeBlock = false\n\n if (splitted[0] === '---') {\n let line = 0\n while (++line < splitted.length) {\n if (\n enableFrontMatterTitle &&\n splitted[line].startsWith(frontMatterTitleField + ':')\n ) {\n title = splitted[line]\n .substring(frontMatterTitleField.length + 1)\n .trim()\n\n break\n }\n if (splitted[line] === '---') {\n splitted.splice(0, line + 1)\n\n break\n }\n }\n }\n\n if (title === null) {\n splitted.some((line, index) => {\n const trimmedLine = line.trim()\n const trimmedNextLine =\n splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()\n if (trimmedLine.match('```')) {\n isInsideCodeBlock = !isInsideCodeBlock\n }\n if (\n isInsideCodeBlock === false &&\n (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))\n ) {\n title = trimmedLine\n return true\n }\n })\n }\n\n if (title === null) {\n title = ''\n splitted.some(line => {\n if (line.trim().length > 0) {\n title = line.trim()\n return true\n }\n })\n }\n\n return title\n}\n\nexport default {\n findNoteTitle\n}\n" }, { "path": "browser/lib/findStorage.js", "content": "const _ = require('lodash')\n\nexport function findStorage(storageKey) {\n const cachedStorageList = JSON.parse(localStorage.getItem('storages'))\n if (!_.isArray(cachedStorageList))\n throw new Error(\"Target storage doesn't exist.\")\n const storage = _.find(cachedStorageList, { key: storageKey })\n if (storage === undefined) throw new Error(\"Target storage doesn't exist.\")\n\n return storage\n}\n\nexport default {\n findStorage\n}\n" }, { "path": "browser/lib/getTodoStatus.js", "content": "export function getTodoStatus(content) {\n const splitted = content.split('\\n')\n let numberOfTodo = 0\n let numberOfCompletedTodo = 0\n\n splitted.forEach(line => {\n const trimmedLine = line.trim().replace(/^(>\\s*)*/, '')\n if (trimmedLine.match(/^[+\\-*] \\[(\\s|x)] ./i)) {\n numberOfTodo++\n }\n if (trimmedLine.match(/^[+\\-*] \\[x] ./i)) {\n numberOfCompletedTodo++\n }\n })\n\n return {\n total: numberOfTodo,\n completed: numberOfCompletedTodo\n }\n}\n\nexport function getTodoPercentageOfCompleted(content) {\n const state = getTodoStatus(content)\n return Math.floor((state.completed / state.total) * 100)\n}\n" }, { "path": "browser/lib/htmlTextHelper.js", "content": "/**\n * @fileoverview Text trimmer for html.\n */\n\n/**\n * @param {string} text\n * @return {string}\n */\n\nexport function decodeEntities(text) {\n var entities = [\n ['apos', \"'\"],\n ['amp', '&'],\n ['lt', '<'],\n ['gt', '>'],\n ['#63', '\\\\?'],\n ['#36', '\\\\$']\n ]\n\n for (var i = 0, max = entities.length; i < max; ++i) {\n text = text.replace(new RegExp(`&${entities[i][0]};`, 'g'), entities[i][1])\n }\n\n return text\n}\n\nexport function encodeEntities(text) {\n const entities = [\n [\"'\", 'apos'],\n ['<', 'lt'],\n ['>', 'gt'],\n ['\\\\?', '#63'],\n ['\\\\$', '#36']\n ]\n\n entities.forEach(entity => {\n text = text.replace(new RegExp(entity[0], 'g'), `&${entity[1]};`)\n })\n return text\n}\n\nexport default {\n decodeEntities,\n encodeEntities\n}\n" }, { "path": "browser/lib/i18n.js", "content": "const path = require('path')\nconst { remote } = require('electron')\nconst { app } = remote\nconst { getLocales } = require('./Languages.js')\n\n// load package for localization\nconst i18n = new (require('i18n-2'))({\n // setup some locales - other locales default to the first locale\n locales: getLocales(),\n extension: '.json',\n directory:\n process.env.NODE_ENV === 'production'\n ? path.join(app.getAppPath(), './locales')\n : path.resolve('./locales'),\n devMode: false\n})\n\nexport default i18n\n" }, { "path": "browser/lib/keygen.js", "content": "const crypto = require('crypto')\nconst uuidv4 = require('uuid/v4')\n\nmodule.exports = function(uuid) {\n if (typeof uuid === typeof true && uuid) {\n return uuidv4()\n }\n const length = 10\n return crypto.randomBytes(length).toString('hex')\n}\n" }, { "path": "browser/lib/markdown-it-deflist.js", "content": "'use strict'\n\nmodule.exports = function definitionListPlugin(md) {\n var isSpace = md.utils.isSpace\n\n // Search `[:~][\\n ]`, returns next pos after marker on success\n // or -1 on fail.\n function skipMarker(state, line) {\n let start = state.bMarks[line] + state.tShift[line]\n const max = state.eMarks[line]\n\n if (start >= max) {\n return -1\n }\n\n // Check bullet\n const marker = state.src.charCodeAt(start++)\n if (marker !== 0x7e /* ~ */ && marker !== 0x3a /* : */) {\n return -1\n }\n\n const pos = state.skipSpaces(start)\n\n // require space after \":\"\n if (start === pos) {\n return -1\n }\n\n return start\n }\n\n function markTightParagraphs(state, idx) {\n const level = state.level + 2\n\n let i\n let l\n for (i = idx + 2, l = state.tokens.length - 2; i < l; i++) {\n if (\n state.tokens[i].level === level &&\n state.tokens[i].type === 'paragraph_open'\n ) {\n state.tokens[i + 2].hidden = true\n state.tokens[i].hidden = true\n i += 2\n }\n }\n }\n\n function deflist(state, startLine, endLine, silent) {\n var ch,\n contentStart,\n ddLine,\n dtLine,\n itemLines,\n listLines,\n listTokIdx,\n max,\n newEndLine,\n nextLine,\n offset,\n oldDDIndent,\n oldIndent,\n oldLineMax,\n oldParentType,\n oldSCount,\n oldTShift,\n oldTight,\n pos,\n prevEmptyEnd,\n tight,\n token\n\n if (silent) {\n // quirk: validation mode validates a dd block only, not a whole deflist\n if (state.ddIndent < 0) {\n return false\n }\n return skipMarker(state, startLine) >= 0\n }\n\n nextLine = startLine + 1\n if (nextLine >= endLine) {\n return false\n }\n\n if (state.isEmpty(nextLine)) {\n nextLine++\n if (nextLine >= endLine) {\n return false\n }\n }\n\n if (state.sCount[nextLine] < state.blkIndent) {\n return false\n }\n contentStart = skipMarker(state, nextLine)\n if (contentStart < 0) {\n return false\n }\n\n // Start list\n listTokIdx = state.tokens.length\n tight = true\n\n token = state.push('dl_open', 'dl', 1)\n token.map = listLines = [startLine, 0]\n\n //\n // Iterate list items\n //\n\n dtLine = startLine\n ddLine = nextLine\n\n // One definition list can contain multiple DTs,\n // and one DT can be followed by multiple DDs.\n //\n // Thus, there is two loops here, and label is\n // needed to break out of the second one\n //\n /* eslint no-labels:0,block-scoped-var:0 */\n OUTER: for (;;) {\n prevEmptyEnd = false\n\n token = state.push('dt_open', 'dt', 1)\n token.map = [dtLine, dtLine]\n\n token = state.push('inline', '', 0)\n token.map = [dtLine, dtLine]\n token.content = state\n .getLines(dtLine, dtLine + 1, state.blkIndent, false)\n .trim()\n token.children = []\n\n token = state.push('dt_close', 'dt', -1)\n\n for (;;) {\n token = state.push('dd_open', 'dd', 1)\n token.map = itemLines = [ddLine, 0]\n\n pos = contentStart\n max = state.eMarks[ddLine]\n offset =\n state.sCount[ddLine] +\n contentStart -\n (state.bMarks[ddLine] + state.tShift[ddLine])\n\n while (pos < max) {\n ch = state.src.charCodeAt(pos)\n\n if (isSpace(ch)) {\n if (ch === 0x09) {\n offset += 4 - (offset % 4)\n } else {\n offset++\n }\n } else {\n break\n }\n\n pos++\n }\n\n contentStart = pos\n\n oldTight = state.tight\n oldDDIndent = state.ddIndent\n oldIndent = state.blkIndent\n oldTShift = state.tShift[ddLine]\n oldSCount = state.sCount[ddLine]\n oldParentType = state.parentType\n state.blkIndent = state.ddIndent = state.sCount[ddLine] + 2\n state.tShift[ddLine] = contentStart - state.bMarks[ddLine]\n state.sCount[ddLine] = offset\n state.tight = true\n state.parentType = 'deflist'\n\n newEndLine = ddLine\n while (\n ++newEndLine < endLine &&\n (state.sCount[newEndLine] >= state.sCount[ddLine] ||\n state.isEmpty(newEndLine))\n ) {}\n\n oldLineMax = state.lineMax\n state.lineMax = newEndLine\n\n state.md.block.tokenize(state, ddLine, newEndLine, true)\n\n state.lineMax = oldLineMax\n\n // If any of list item is tight, mark list as tight\n if (!state.tight || prevEmptyEnd) {\n tight = false\n }\n // Item become loose if finish with empty line,\n // but we should filter last element, because it means list finish\n prevEmptyEnd = state.line - ddLine > 1 && state.isEmpty(state.line - 1)\n\n state.tShift[ddLine] = oldTShift\n state.sCount[ddLine] = oldSCount\n state.tight = oldTight\n state.parentType = oldParentType\n state.blkIndent = oldIndent\n state.ddIndent = oldDDIndent\n\n token = state.push('dd_close', 'dd', -1)\n\n itemLines[1] = nextLine = state.line\n\n if (nextLine >= endLine) {\n break OUTER\n }\n\n if (state.sCount[nextLine] < state.blkIndent) {\n break OUTER\n }\n contentStart = skipMarker(state, nextLine)\n if (contentStart < 0) {\n break\n }\n\n ddLine = nextLine\n\n // go to the next loop iteration:\n // insert DD tag and repeat checking\n }\n\n if (nextLine >= endLine) {\n break\n }\n dtLine = nextLine\n\n if (state.isEmpty(dtLine)) {\n break\n }\n if (state.sCount[dtLine] < state.blkIndent) {\n break\n }\n\n ddLine = dtLine + 1\n if (ddLine >= endLine) {\n break\n }\n if (state.isEmpty(ddLine)) {\n ddLine++\n }\n if (ddLine >= endLine) {\n break\n }\n\n if (state.sCount[ddLine] < state.blkIndent) {\n break\n }\n contentStart = skipMarker(state, ddLine)\n if (contentStart < 0) {\n break\n }\n\n // go to the next loop iteration:\n // insert DT and DD tags and repeat checking\n }\n\n // Finilize list\n token = state.push('dl_close', 'dl', -1)\n\n listLines[1] = nextLine\n\n state.line = nextLine\n\n // mark paragraphs tight if needed\n if (tight) {\n markTightParagraphs(state, listTokIdx)\n }\n\n return true\n }\n\n md.block.ruler.before('paragraph', 'deflist', deflist, {\n alt: ['paragraph', 'reference']\n })\n}\n" }, { "path": "browser/lib/markdown-it-fence.js", "content": "'use strict'\n\nmodule.exports = function(md, renderers, defaultRenderer) {\n const paramsRE = /^[ \\t]*([\\w+#-]+)?(?:\\(((?:\\s*\\w[-\\w]*(?:=(?:'(?:.*?[^\\\\])?'|\"(?:.*?[^\\\\])?\"|(?:[^'\"][^\\s]*)))?)*)\\))?(?::([^:]*)(?::(\\d+))?)?\\s*$/\n\n function fence(state, startLine, endLine, silent) {\n let pos = state.bMarks[startLine] + state.tShift[startLine]\n let max = state.eMarks[startLine]\n\n if (state.sCount[startLine] - state.blkIndent >= 4 || pos + 3 > max) {\n return false\n }\n\n const marker = state.src.charCodeAt(pos)\n if (marker !== 0x7e /* ~ */ && marker !== 0x60 /* ` */) {\n return false\n }\n\n let mem = pos\n pos = state.skipChars(pos, marker)\n\n let len = pos - mem\n if (len < 3) {\n return false\n }\n\n const markup = state.src.slice(mem, pos)\n const params = state.src.slice(pos, max)\n\n if (silent) {\n return true\n }\n\n let nextLine = startLine\n let haveEndMarker = false\n\n while (true) {\n nextLine++\n if (nextLine >= endLine) {\n break\n }\n\n pos = mem = state.bMarks[nextLine] + state.tShift[nextLine]\n max = state.eMarks[nextLine]\n\n if (pos < max && state.sCount[nextLine] < state.blkIndent) {\n break\n }\n if (\n state.src.charCodeAt(pos) !== marker ||\n state.sCount[nextLine] - state.blkIndent >= 4\n ) {\n continue\n }\n\n pos = state.skipChars(pos, marker)\n\n if (pos - mem < len) {\n continue\n }\n\n pos = state.skipSpaces(pos)\n\n if (pos >= max) {\n haveEndMarker = true\n break\n }\n }\n\n len = state.sCount[startLine]\n state.line = nextLine + (haveEndMarker ? 1 : 0)\n\n const parameters = {}\n let langType = ''\n let fileName = ''\n let firstLineNumber = 1\n\n let match = paramsRE.exec(params)\n if (match) {\n if (match[1]) {\n langType = match[1]\n }\n if (match[3]) {\n fileName = match[3]\n }\n if (match[4]) {\n firstLineNumber = parseInt(match[4], 10)\n }\n\n if (match[2]) {\n const params = match[2]\n const regex = /(\\w[-\\w]*)(?:=(?:'(.*?[^\\\\])?'|\"(.*?[^\\\\])?\"|([^'\"][^\\s]*)))?/g\n\n let name, value\n while ((match = regex.exec(params))) {\n name = match[1]\n value = match[2] || match[3] || match[4] || null\n\n const height = /^(\\d+)h$/.exec(name)\n if (height && !value) {\n parameters.height = height[1]\n } else {\n parameters[name] = value\n }\n }\n }\n }\n\n let token\n if (renderers[langType]) {\n token = state.push(`${langType}_fence`, 'div', 0)\n } else {\n token = state.push('_fence', 'code', 0)\n }\n\n token.langType = langType\n token.fileName = fileName\n token.firstLineNumber = firstLineNumber\n token.parameters = parameters\n\n token.content = state.getLines(startLine + 1, nextLine, len, true)\n token.markup = markup\n token.map = [startLine, state.line]\n\n return true\n }\n\n md.block.ruler.before('fence', '_fence', fence, {\n alt: ['paragraph', 'reference', 'blockquote', 'list']\n })\n\n for (const name in renderers) {\n md.renderer.rules[`${name}_fence`] = (tokens, index) =>\n renderers[name](tokens[index])\n }\n\n if (defaultRenderer) {\n md.renderer.rules['_fence'] = (tokens, index) =>\n defaultRenderer(tokens[index])\n }\n}\n" }, { "path": "browser/lib/markdown-it-frontmatter.js", "content": "'use strict'\n\nmodule.exports = function frontMatterPlugin(md) {\n function frontmatter(state, startLine, endLine, silent) {\n if (\n startLine !== 0 ||\n state.src.substr(startLine, state.eMarks[0]) !== '---'\n ) {\n return false\n }\n\n let line = 0\n while (++line < state.lineMax) {\n if (\n state.src.substring(state.bMarks[line], state.eMarks[line]) === '---'\n ) {\n state.line = line + 1\n\n return true\n }\n }\n\n return false\n }\n\n md.block.ruler.before('table', 'frontmatter', frontmatter, {\n alt: ['paragraph', 'reference', 'blockquote', 'list']\n })\n}\n" }, { "path": "browser/lib/markdown-it-sanitize-html.js", "content": "'use strict'\n\nimport sanitizeHtml from 'sanitize-html'\nimport { escapeHtmlCharacters } from './utils'\nimport url from 'url'\n\nmodule.exports = function sanitizePlugin(md, options) {\n options = options || {}\n\n md.core.ruler.after('linkify', 'sanitize_inline', state => {\n for (let tokenIdx = 0; tokenIdx < state.tokens.length; tokenIdx++) {\n if (state.tokens[tokenIdx].type === 'html_block') {\n state.tokens[tokenIdx].content = sanitizeHtml(\n state.tokens[tokenIdx].content,\n options\n )\n }\n if (state.tokens[tokenIdx].type.match(/.*_fence$/)) {\n // escapeHtmlCharacters has better performance\n state.tokens[tokenIdx].content = escapeHtmlCharacters(\n state.tokens[tokenIdx].content,\n { skipSingleQuote: true }\n )\n }\n if (state.tokens[tokenIdx].type === 'inline') {\n const inlineTokens = state.tokens[tokenIdx].children\n for (let childIdx = 0; childIdx < inlineTokens.length; childIdx++) {\n if (inlineTokens[childIdx].type === 'html_inline') {\n inlineTokens[childIdx].content = sanitizeInline(\n inlineTokens[childIdx].content,\n options\n )\n }\n }\n }\n }\n })\n}\n\nconst tagRegex = /<([A-Z][A-Z0-9]*)\\s*((?:\\s*[A-Z][A-Z0-9]*(?:=(\"|')(?:[^\\3]+?)\\3)?)*)\\s*\\/?>|<\\/([A-Z][A-Z0-9]*)\\s*>/i\nconst attributesRegex = /([A-Z][A-Z0-9]*)(?:=(\"|')([^\\2]+?)\\2)?/gi\n\nfunction sanitizeInline(html, options) {\n let match = tagRegex.exec(html)\n if (!match) {\n return ''\n }\n\n const {\n allowedTags,\n allowedAttributes,\n selfClosing,\n allowedSchemesAppliedToAttributes\n } = options\n\n if (match[1] !== undefined) {\n // opening tag\n const tag = match[1].toLowerCase()\n if (allowedTags.indexOf(tag) === -1) {\n return ''\n }\n\n const attributes = match[2]\n\n let attrs = ''\n let name\n let value\n\n while ((match = attributesRegex.exec(attributes))) {\n name = match[1].toLowerCase()\n value = match[3]\n\n if (\n allowedAttributes['*'].indexOf(name) !== -1 ||\n (allowedAttributes[tag] && allowedAttributes[tag].indexOf(name) !== -1)\n ) {\n if (allowedSchemesAppliedToAttributes.indexOf(name) !== -1) {\n if (\n naughtyHRef(value, options) ||\n (tag === 'iframe' &&\n name === 'src' &&\n naughtyIFrame(value, options))\n ) {\n continue\n }\n }\n\n attrs += ` ${name}`\n if (match[2]) {\n attrs += `=\"${value}\"`\n }\n }\n }\n\n if (selfClosing.indexOf(tag) === -1) {\n return '<' + tag + attrs + '>'\n } else {\n return '<' + tag + attrs + ' />'\n }\n } else {\n // closing tag\n if (allowedTags.indexOf(match[4].toLowerCase()) !== -1) {\n return html\n } else {\n return ''\n }\n }\n}\n\nfunction naughtyHRef(href, options) {\n // href = href.replace(/[\\x00-\\x20]+/g, '')\n if (!href) {\n // No href\n return false\n }\n href = href.replace(/<\\!\\-\\-.*?\\-\\-\\>/g, '')\n\n const matches = href.match(/^([a-zA-Z]+)\\:/)\n if (!matches) {\n if (href.match(/^[\\/\\\\]{2}/)) {\n return !options.allowProtocolRelative\n }\n\n // No scheme\n return false\n }\n\n const scheme = matches[1].toLowerCase()\n\n return options.allowedSchemes.indexOf(scheme) === -1\n}\n\nfunction naughtyIFrame(src, options) {\n try {\n const parsed = url.parse(src, false, true)\n\n return options.allowedIframeHostnames.index(parsed.hostname) === -1\n } catch (e) {\n return true\n }\n}\n" }, { "path": "browser/lib/markdown-toc-generator.js", "content": "/**\n * @fileoverview Markdown table of contents generator\n */\n\nimport { EOL } from 'os'\nimport toc from 'markdown-toc'\nimport mdlink from 'markdown-link'\nimport slugify from './slugify'\n\nconst hasProp = Object.prototype.hasOwnProperty\n\n/**\n * From @enyaxu/markdown-it-anchor\n */\nfunction uniqueSlug(slug, slugs, opts) {\n let uniq = slug\n let i = opts.uniqueSlugStartIndex\n while (hasProp.call(slugs, uniq)) uniq = `${slug}-${i++}`\n slugs[uniq] = true\n return uniq\n}\n\nfunction linkify(token) {\n token.content = mdlink(token.content, `#${decodeURI(token.slug)}`)\n return token\n}\n\nconst TOC_MARKER_START = ''\nconst TOC_MARKER_END = ''\n\nconst tocRegex = new RegExp(`${TOC_MARKER_START}[\\\\s\\\\S]*?${TOC_MARKER_END}`)\n\n/**\n * Takes care of proper updating given editor with TOC.\n * If TOC doesn't exit in the editor, it's inserted at current caret position.\n * Otherwise,TOC is updated in place.\n * @param editor CodeMirror editor to be updated with TOC\n */\nexport function generateInEditor(editor) {\n function updateExistingToc() {\n const toc = generate(editor.getValue())\n const search = editor.getSearchCursor(tocRegex)\n while (search.findNext()) {\n search.replace(toc)\n }\n }\n\n function addTocAtCursorPosition() {\n const toc = generate(\n editor.getRange(editor.getCursor(), { line: Infinity })\n )\n editor.replaceRange(wrapTocWithEol(toc, editor), editor.getCursor())\n }\n\n if (tocExistsInEditor(editor)) {\n updateExistingToc()\n } else {\n addTocAtCursorPosition()\n }\n}\n\nexport function tocExistsInEditor(editor) {\n return tocRegex.test(editor.getValue())\n}\n\n/**\n * Generates MD TOC based on MD document passed as string.\n * @param markdownText MD document\n * @returns generatedTOC String containing generated TOC\n */\nexport function generate(markdownText) {\n const slugs = {}\n const opts = {\n uniqueSlugStartIndex: 1\n }\n\n const result = toc(markdownText, {\n slugify: title => {\n return uniqueSlug(slugify(title), slugs, opts)\n },\n linkify: false\n })\n\n const md = toc.bullets(result.json.map(linkify), {\n highest: result.highest\n })\n\n return TOC_MARKER_START + EOL + EOL + md + EOL + EOL + TOC_MARKER_END\n}\n\nfunction wrapTocWithEol(toc, editor) {\n const leftWrap = editor.getCursor().ch === 0 ? '' : EOL\n const rightWrap =\n editor.getLine(editor.getCursor().line).length === editor.getCursor().ch\n ? ''\n : EOL\n return leftWrap + toc + rightWrap\n}\n\nexport default {\n generate,\n generateInEditor,\n tocExistsInEditor\n}\n" }, { "path": "browser/lib/markdown.js", "content": "import markdownit from 'markdown-it'\nimport sanitize from './markdown-it-sanitize-html'\nimport emoji from 'markdown-it-emoji'\nimport math from '@rokt33r/markdown-it-math'\nimport mdurl from 'mdurl'\nimport smartArrows from 'markdown-it-smartarrows'\nimport markdownItTocAndAnchor from '@hikerpig/markdown-it-toc-and-anchor'\nimport _ from 'lodash'\nimport ConfigManager from 'browser/main/lib/ConfigManager'\nimport katex from 'katex'\nimport { escapeHtmlCharacters, lastFindInArray } from './utils'\n\nfunction createGutter(str, firstLineNumber) {\n if (Number.isNaN(firstLineNumber)) firstLineNumber = 1\n const lastLineNumber = (str.match(/\\n/g) || []).length + firstLineNumber - 1\n const lines = []\n for (let i = firstLineNumber; i <= lastLineNumber; i++) {\n lines.push('' + i + '')\n }\n return (\n '' + lines.join('') + ''\n )\n}\n\nclass Markdown {\n constructor(options = {}) {\n const config = ConfigManager.get()\n const defaultOptions = {\n typographer: config.preview.smartQuotes,\n linkify: true,\n html: true,\n xhtmlOut: true,\n breaks: config.preview.breaks,\n sanitize: 'STRICT',\n onFence: () => {}\n }\n\n const updatedOptions = Object.assign(defaultOptions, options)\n this.md = markdownit(updatedOptions)\n this.md.linkify.set({ fuzzyLink: false })\n\n if (updatedOptions.sanitize !== 'NONE') {\n const allowedTags = [\n 'iframe',\n 'input',\n 'b',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'h7',\n 'h8',\n 'br',\n 'b',\n 'i',\n 'strong',\n 'em',\n 'a',\n 'pre',\n 'code',\n 'img',\n 'tt',\n 'div',\n 'ins',\n 'del',\n 'sup',\n 'sub',\n 'p',\n 'ol',\n 'ul',\n 'table',\n 'thead',\n 'tbody',\n 'tfoot',\n 'blockquote',\n 'dl',\n 'dt',\n 'dd',\n 'kbd',\n 'q',\n 'samp',\n 'var',\n 'hr',\n 'ruby',\n 'rt',\n 'rp',\n 'li',\n 'tr',\n 'td',\n 'th',\n 's',\n 'strike',\n 'summary',\n 'details'\n ]\n const allowedAttributes = [\n 'abbr',\n 'accept',\n 'accept-charset',\n 'accesskey',\n 'action',\n 'align',\n 'alt',\n 'axis',\n 'border',\n 'cellpadding',\n 'cellspacing',\n 'char',\n 'charoff',\n 'charset',\n 'checked',\n 'clear',\n 'cols',\n 'colspan',\n 'color',\n 'compact',\n 'coords',\n 'datetime',\n 'dir',\n 'disabled',\n 'enctype',\n 'for',\n 'frame',\n 'headers',\n 'height',\n 'hreflang',\n 'hspace',\n 'ismap',\n 'label',\n 'lang',\n 'maxlength',\n 'media',\n 'method',\n 'multiple',\n 'name',\n 'nohref',\n 'noshade',\n 'nowrap',\n 'open',\n 'prompt',\n 'readonly',\n 'rel',\n 'rev',\n 'rows',\n 'rowspan',\n 'rules',\n 'scope',\n 'selected',\n 'shape',\n 'size',\n 'span',\n 'start',\n 'summary',\n 'tabindex',\n 'target',\n 'title',\n 'type',\n 'usemap',\n 'valign',\n 'value',\n 'vspace',\n 'width',\n 'itemprop'\n ]\n\n if (updatedOptions.sanitize === 'ALLOW_STYLES') {\n allowedTags.push('style')\n allowedAttributes.push('style')\n }\n\n // Sanitize use rinput before other plugins\n this.md.use(sanitize, {\n allowedTags,\n allowedAttributes: {\n '*': allowedAttributes,\n a: ['href'],\n div: ['itemscope', 'itemtype'],\n blockquote: ['cite'],\n del: ['cite'],\n ins: ['cite'],\n q: ['cite'],\n img: ['src', 'width', 'height'],\n iframe: ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],\n input: ['type', 'id', 'checked']\n },\n allowedIframeHostnames: ['www.youtube.com'],\n selfClosing: ['img', 'br', 'hr', 'input'],\n allowedSchemes: ['http', 'https', 'ftp', 'mailto'],\n allowedSchemesAppliedToAttributes: ['href', 'src', 'cite'],\n allowProtocolRelative: true\n })\n }\n\n this.md.use(emoji, {\n shortcuts: {}\n })\n this.md.use(math, {\n inlineOpen: config.preview.latexInlineOpen,\n inlineClose: config.preview.latexInlineClose,\n blockOpen: config.preview.latexBlockOpen,\n blockClose: config.preview.latexBlockClose,\n inlineRenderer: function(str) {\n let output = ''\n try {\n output = katex.renderToString(str.trim())\n } catch (err) {\n output = `${err.message}`\n }\n return output\n },\n blockRenderer: function(str) {\n let output = ''\n try {\n output = katex.renderToString(str.trim(), { displayMode: true })\n } catch (err) {\n output = `
${err.message}
`\n }\n return output\n }\n })\n this.md.use(require('markdown-it-imsize'))\n this.md.use(require('markdown-it-footnote'))\n this.md.use(require('markdown-it-multimd-table'))\n this.md.use(require('@enyaxu/markdown-it-anchor'), {\n slugify: require('./slugify')\n })\n this.md.use(require('markdown-it-kbd'))\n this.md.use(require('markdown-it-admonition'), {\n types: [\n 'note',\n 'hint',\n 'attention',\n 'caution',\n 'danger',\n 'error',\n 'quote',\n 'abstract',\n 'question'\n ]\n })\n this.md.use(require('markdown-it-abbr'))\n this.md.use(require('markdown-it-sub'))\n this.md.use(require('markdown-it-sup'))\n\n this.md.use(md => {\n markdownItTocAndAnchor(md, {\n toc: true,\n tocPattern: /\\[TOC\\]/i,\n anchorLink: false,\n appendIdToHeading: false\n })\n\n md.renderer.rules.toc_open = () => '
'\n md.renderer.rules.toc_close = () => '
'\n })\n\n this.md.use(require('./markdown-it-deflist'))\n this.md.use(require('./markdown-it-frontmatter'))\n\n this.md.use(\n require('./markdown-it-fence'),\n {\n chart: token => {\n if (token.parameters.hasOwnProperty('yaml')) {\n token.parameters.format = 'yaml'\n }\n\n updatedOptions.onFence('chart', token.parameters.format)\n\n return `
\n            ${token.fileName}\n            
${\n            token.content\n          }
\n
`\n },\n flowchart: token => {\n updatedOptions.onFence('flowchart')\n\n return `
\n            ${token.fileName}\n            
${\n            token.content\n          }
\n
`\n },\n gallery: token => {\n const content = token.content\n .split('\\n')\n .slice(0, -1)\n .map(line => {\n const match = /!\\[[^\\]]*]\\(([^\\)]*)\\)/.exec(line)\n if (match) {\n return mdurl.encode(match[1])\n } else {\n return mdurl.encode(line)\n }\n })\n .join('\\n')\n\n return `
\n              ${token.fileName}\n              
${content}
\n
`\n },\n mermaid: token => {\n updatedOptions.onFence('mermaid')\n\n return `
\n            ${token.fileName}\n            
${\n            token.content\n          }
\n
`\n },\n sequence: token => {\n updatedOptions.onFence('sequence')\n\n return `
\n            ${token.fileName}\n            
${\n            token.content\n          }
\n
`\n }\n },\n token => {\n updatedOptions.onFence('code', token.langType)\n\n return `
\n          ${token.fileName}\n          ${createGutter(token.content, token.firstLineNumber)}\n          ${token.content}\n
`\n }\n )\n\n const deflate = require('markdown-it-plantuml/lib/deflate')\n const plantuml = require('markdown-it-plantuml')\n const plantUmlStripTrailingSlash = url =>\n url.endsWith('/') ? url.slice(0, -1) : url\n const plantUmlServerAddress = plantUmlStripTrailingSlash(\n config.preview.plantUMLServerAddress\n )\n const parsePlantUml = function(umlCode, openMarker, closeMarker, type) {\n const s = unescape(encodeURIComponent(umlCode))\n const zippedCode = deflate.encode64(\n deflate.zip_deflate(`${openMarker}\\n${s}\\n${closeMarker}`, 9)\n )\n return `${plantUmlServerAddress}/${type}/${zippedCode}`\n }\n\n this.md.use(plantuml, {\n generateSource: umlCode =>\n parsePlantUml(umlCode, '@startuml', '@enduml', 'svg')\n })\n\n // Ditaa support. PlantUML server doesn't support Ditaa in SVG, so we set the format as PNG at the moment.\n this.md.use(plantuml, {\n openMarker: '@startditaa',\n closeMarker: '@endditaa',\n generateSource: umlCode =>\n parsePlantUml(umlCode, '@startditaa', '@endditaa', 'png')\n })\n\n // Mindmap support\n this.md.use(plantuml, {\n openMarker: '@startmindmap',\n closeMarker: '@endmindmap',\n generateSource: umlCode =>\n parsePlantUml(umlCode, '@startmindmap', '@endmindmap', 'svg')\n })\n\n // WBS support\n this.md.use(plantuml, {\n openMarker: '@startwbs',\n closeMarker: '@endwbs',\n generateSource: umlCode =>\n parsePlantUml(umlCode, '@startwbs', '@endwbs', 'svg')\n })\n\n // Gantt support\n this.md.use(plantuml, {\n openMarker: '@startgantt',\n closeMarker: '@endgantt',\n generateSource: umlCode =>\n parsePlantUml(umlCode, '@startgantt', '@endgantt', 'svg')\n })\n\n // Override task item\n this.md.block.ruler.at('paragraph', function(\n state,\n startLine /*, endLine */\n ) {\n let content, terminate, i, l, token\n let nextLine = startLine + 1\n const terminatorRules = state.md.block.ruler.getRules('paragraph')\n const endLine = state.lineMax\n\n // jump line-by-line until empty one or EOF\n for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {\n // this would be a code block normally, but after paragraph\n // it's considered a lazy continuation regardless of what's there\n if (state.sCount[nextLine] - state.blkIndent > 3) {\n continue\n }\n\n // quirk for blockquotes, this line should already be checked by that rule\n if (state.sCount[nextLine] < 0) {\n continue\n }\n\n // Some tags can terminate paragraph without empty line.\n terminate = false\n for (i = 0, l = terminatorRules.length; i < l; i++) {\n if (terminatorRules[i](state, nextLine, endLine, true)) {\n terminate = true\n break\n }\n }\n if (terminate) {\n break\n }\n }\n\n content = state\n .getLines(startLine, nextLine, state.blkIndent, false)\n .trim()\n\n state.line = nextLine\n\n token = state.push('paragraph_open', 'p', 1)\n token.map = [startLine, state.line]\n\n if (state.parentType === 'list') {\n const match = content.match(/^\\[( |x)\\] ?(.+)/i)\n if (match) {\n const liToken = lastFindInArray(\n state.tokens,\n token => token.type === 'list_item_open'\n )\n if (liToken) {\n if (!liToken.attrs) {\n liToken.attrs = []\n }\n if (config.preview.lineThroughCheckbox) {\n liToken.attrs.push([\n 'class',\n `taskListItem${match[1] !== ' ' ? ' checked' : ''}`\n ])\n } else {\n liToken.attrs.push(['class', 'taskListItem'])\n }\n }\n content = ``\n }\n }\n\n token = state.push('inline', '', 0)\n token.content = content\n token.map = [startLine, state.line]\n token.children = []\n\n token = state.push('paragraph_close', 'p', -1)\n\n return true\n })\n\n this.md.renderer.rules.code_inline = function(tokens, idx) {\n const token = tokens[idx]\n\n return (\n '' +\n escapeHtmlCharacters(token.content) +\n ''\n )\n }\n\n if (config.preview.smartArrows) {\n this.md.use(smartArrows)\n }\n\n // Add line number attribute for scrolling\n const originalRender = this.md.renderer.render\n this.md.renderer.render = (tokens, options, env) => {\n tokens.forEach(token => {\n switch (token.type) {\n case 'blockquote_open':\n case 'dd_open':\n case 'dt_open':\n case 'heading_open':\n case 'list_item_open':\n case 'paragraph_open':\n case 'table_open':\n if (token.map) {\n token.attrPush(['data-line', token.map[0]])\n }\n }\n })\n const result = originalRender.call(this.md.renderer, tokens, options, env)\n return result\n }\n // FIXME We should not depend on global variable.\n window.md = this.md\n }\n\n render(content) {\n if (!_.isString(content)) content = ''\n return this.md.render(content)\n }\n}\n\nexport default Markdown\n" }, { "path": "browser/lib/markdown2.js", "content": "" }, { "path": "browser/lib/markdownTextHelper.js", "content": "/**\n * @fileoverview Text trimmer for markdown note.\n */\n\n/**\n * @param {string} input\n * @return {string}\n */\nexport function strip(input) {\n let output = input\n try {\n output = output\n .replace(/^([\\s\\t]*)([\\*\\-\\+]|\\d+\\.)\\s+/gm, '$1')\n .replace(/\\n={2,}/g, '\\n')\n .replace(/~~/g, '')\n .replace(/`{3}.*\\n/g, '')\n .replace(/<(.*?)>/g, '$1')\n .replace(/^[=\\-]{2,}\\s*$/g, '')\n .replace(/\\[\\^.+?\\](: .*?$)?/g, '')\n .replace(/\\s{0,2}\\[.*?\\]: .*?$/g, '')\n .replace(/!\\[.*?\\][\\[\\(].*?[\\]\\)]/g, '')\n .replace(/\\[(.*?)\\][\\[\\(].*?[\\]\\)]/g, '$1')\n .replace(/>/g, '')\n .replace(/^\\s{1,2}\\[(.*?)\\]: (\\S+)( \".*?\")?\\s*$/g, '')\n .replace(/^#{1,6}\\s*/gm, '')\n .replace(/(`{3,})(.*?)\\1/gm, '$2')\n .replace(/^-{3,}\\s*$/g, '')\n .replace(/`(.+?)`/g, '$1')\n .replace(/\\n{2,}/g, '\\n\\n')\n } catch (e) {\n console.error(e)\n return input\n }\n return output\n}\n\nexport default {\n strip\n}\n" }, { "path": "browser/lib/newNote.js", "content": "import dataApi from 'browser/main/lib/dataApi'\nimport ee from 'browser/main/lib/eventEmitter'\nimport AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'\nimport queryString from 'query-string'\nimport { push } from 'connected-react-router'\n\nexport function createMarkdownNote(\n storage,\n folder,\n dispatch,\n location,\n params,\n config\n) {\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')\n\n let tags = []\n if (\n config.ui.tagNewNoteWithFilteringTags &&\n location.pathname.match(/\\/tags/)\n ) {\n tags = params.tagname.split(' ')\n }\n\n return dataApi\n .createNote(storage, {\n type: 'MARKDOWN_NOTE',\n folder: folder,\n title: '',\n tags,\n content: '',\n linesHighlighted: []\n })\n .then(note => {\n const noteHash = note.key\n dispatch({\n type: 'UPDATE_NOTE',\n note: note\n })\n\n dispatch(\n push({\n pathname: location.pathname,\n search: queryString.stringify({ key: noteHash })\n })\n )\n ee.emit('list:jump', noteHash)\n ee.emit('detail:focus')\n })\n}\n\nexport function createSnippetNote(\n storage,\n folder,\n dispatch,\n location,\n params,\n config\n) {\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')\n\n let tags = []\n if (\n config.ui.tagNewNoteWithFilteringTags &&\n location.pathname.match(/\\/tags/)\n ) {\n tags = params.tagname.split(' ')\n }\n\n const defaultLanguage =\n config.editor.snippetDefaultLanguage === 'Auto Detect'\n ? null\n : config.editor.snippetDefaultLanguage\n\n return dataApi\n .createNote(storage, {\n type: 'SNIPPET_NOTE',\n folder: folder,\n title: '',\n tags,\n description: '',\n snippets: [\n {\n name: '',\n mode: defaultLanguage,\n content: '',\n linesHighlighted: []\n }\n ]\n })\n .then(note => {\n const noteHash = note.key\n dispatch({\n type: 'UPDATE_NOTE',\n note: note\n })\n dispatch(\n push({\n pathname: location.pathname,\n search: queryString.stringify({ key: noteHash })\n })\n )\n ee.emit('list:jump', noteHash)\n ee.emit('detail:focus')\n })\n}\n" }, { "path": "browser/lib/normalizeEditorFontFamily.js", "content": "import consts from 'browser/lib/consts'\nimport isString from 'lodash/isString'\n\nexport default function normalizeEditorFontFamily(fontFamily) {\n const defaultEditorFontFamily = consts.DEFAULT_EDITOR_FONT_FAMILY\n return isString(fontFamily) && fontFamily.length > 0\n ? [fontFamily].concat(defaultEditorFontFamily).join(', ')\n : defaultEditorFontFamily.join(', ')\n}\n" }, { "path": "browser/lib/search.js", "content": "import _ from 'lodash'\n\nexport default function searchFromNotes(notes, search) {\n if (search.trim().length === 0) return []\n const searchBlocks = search.split(' ').filter(block => {\n return block !== ''\n })\n\n let foundNotes = notes\n searchBlocks.forEach(block => {\n foundNotes = findByWordOrTag(foundNotes, block)\n })\n return foundNotes\n}\n\nfunction findByWordOrTag(notes, block) {\n let tag = block\n if (tag.match(/^#.+/)) {\n tag = tag.match(/#(.+)/)[1]\n }\n const tagRegExp = new RegExp(_.escapeRegExp(tag), 'i')\n const wordRegExp = new RegExp(_.escapeRegExp(block), 'i')\n return notes.filter(note => {\n if (_.isArray(note.tags) && note.tags.some(_tag => _tag.match(tagRegExp))) {\n return true\n }\n if (note.type === 'SNIPPET_NOTE') {\n return (\n note.description.match(wordRegExp) ||\n note.snippets.some(snippet => {\n return (\n snippet.name.match(wordRegExp) || snippet.content.match(wordRegExp)\n )\n })\n )\n } else if (note.type === 'MARKDOWN_NOTE') {\n return note.content.match(wordRegExp)\n }\n return false\n })\n}\n" }, { "path": "browser/lib/slugify.js", "content": "module.exports = function slugify(title) {\n const slug = encodeURI(\n title\n .trim()\n .replace(/^\\s+/, '')\n .replace(/\\s+$/, '')\n .replace(/\\s+/g, '-')\n .replace(\n /[\\]\\[\\!\\'\\#\\$\\%\\&\\(\\)\\*\\+\\,\\.\\/\\:\\;\\<\\=\\>\\?\\@\\\\\\^\\{\\|\\}\\~\\`]/g,\n ''\n )\n )\n\n return slug\n}\n" }, { "path": "browser/lib/spellcheck.js", "content": "import styles from '../components/CodeEditor.styl'\nimport i18n from 'browser/lib/i18n'\n\nconst Typo = require('typo-js')\nconst _ = require('lodash')\n\nconst CSS_ERROR_CLASS = 'codeEditor-typo'\nconst SPELLCHECK_DISABLED = 'NONE'\nconst DICTIONARY_PATH = '../dictionaries'\nconst MILLISECONDS_TILL_LIVECHECK = 500\n\nlet dictionary = null\nlet self\n\nfunction getAvailableDictionaries() {\n return [\n { label: i18n.__('Spellcheck disabled'), value: SPELLCHECK_DISABLED },\n { label: i18n.__('English'), value: 'en_GB' },\n { label: i18n.__('German'), value: 'de_DE' },\n { label: i18n.__('French'), value: 'fr_FR' }\n ]\n}\n\n/**\n * Only to be used in the tests :)\n */\nfunction setDictionaryForTestsOnly(newDictionary) {\n dictionary = newDictionary\n}\n\n/**\n * @description Initializes the spellcheck. It removes all existing marks of the current editor.\n * If a language was given (i.e. lang !== this.SPELLCHECK_DISABLED) it will load the stated dictionary and use it to check the whole document.\n * @param {Codemirror} editor CodeMirror-Editor\n * @param {String} lang on of the values from getAvailableDictionaries()-Method\n */\nfunction setLanguage(editor, lang) {\n self = this\n dictionary = null\n\n if (editor == null) {\n return\n }\n\n const existingMarks = editor.getAllMarks() || []\n for (const mark of existingMarks) {\n mark.clear()\n }\n if (lang !== SPELLCHECK_DISABLED) {\n dictionary = new Typo(lang, false, false, {\n dictionaryPath: DICTIONARY_PATH,\n asyncLoad: true,\n loadedCallback: () => checkWholeDocument(editor)\n })\n }\n}\n\n/**\n * Checks the whole content of the editor for typos\n * @param {Codemirror} editor CodeMirror-Editor\n */\nfunction checkWholeDocument(editor) {\n const lastLine = editor.lineCount() - 1\n const textOfLastLine = editor.getLine(lastLine) || ''\n const lastChar = textOfLastLine.length\n const from = { line: 0, ch: 0 }\n const to = { line: lastLine, ch: lastChar }\n checkMultiLineRange(editor, from, to)\n}\n\n/**\n * Checks the given range for typos\n * @param {Codemirror} editor CodeMirror-Editor\n * @param {line, ch} from starting position of the spellcheck\n * @param {line, ch} to end position of the spellcheck\n */\nfunction checkMultiLineRange(editor, from, to) {\n function sortRange(pos1, pos2) {\n if (\n pos1.line > pos2.line ||\n (pos1.line === pos2.line && pos1.ch > pos2.ch)\n ) {\n return { from: pos2, to: pos1 }\n }\n return { from: pos1, to: pos2 }\n }\n\n const { from: smallerPos, to: higherPos } = sortRange(from, to)\n for (let l = smallerPos.line; l <= higherPos.line; l++) {\n const line = editor.getLine(l) || ''\n let w = 0\n if (l === smallerPos.line) {\n w = smallerPos.ch\n }\n let wEnd = line.length\n if (l === higherPos.line) {\n wEnd = higherPos.ch\n }\n while (w <= wEnd) {\n const wordRange = editor.findWordAt({ line: l, ch: w })\n self.checkWord(editor, wordRange)\n w += wordRange.head.ch - wordRange.anchor.ch + 1\n }\n }\n}\n\n/**\n * @description Checks whether a certain range of characters in the editor (i.e. a word) contains a typo.\n * If so the ranged will be marked with the class CSS_ERROR_CLASS.\n * Note: Due to performance considerations, only words with more then 3 signs are checked.\n * @param {Codemirror} editor CodeMirror-Editor\n * @param wordRange Object specifying the range that should be checked.\n * Having the following structure: {anchor: {line: integer, ch: integer}, head: {line: integer, ch: integer}}\n */\nfunction checkWord(editor, wordRange) {\n const word = editor.getRange(wordRange.anchor, wordRange.head)\n if (word == null || word.length <= 3) {\n return\n }\n if (!dictionary.check(word)) {\n editor.markText(wordRange.anchor, wordRange.head, {\n className: styles[CSS_ERROR_CLASS]\n })\n }\n}\n\n/**\n * Checks the changes recently made (aka live check)\n * @param {Codemirror} editor CodeMirror-Editor\n * @param fromChangeObject codeMirror changeObject describing the start of the editing\n * @param toChangeObject codeMirror changeObject describing the end of the editing\n */\nfunction checkChangeRange(editor, fromChangeObject, toChangeObject) {\n /**\n * Calculate the smallest respectively largest position as a start, resp. end, position and return it\n * @param start CodeMirror change object\n * @param end CodeMirror change object\n * @returns {{start: {line: *, ch: *}, end: {line: *, ch: *}}}\n */\n function getStartAndEnd(start, end) {\n const possiblePositions = [start.from, start.to, end.from, end.to]\n let smallest = start.from\n let biggest = end.to\n for (const currentPos of possiblePositions) {\n if (\n currentPos.line < smallest.line ||\n (currentPos.line === smallest.line && currentPos.ch < smallest.ch)\n ) {\n smallest = currentPos\n }\n if (\n currentPos.line > biggest.line ||\n (currentPos.line === biggest.line && currentPos.ch > biggest.ch)\n ) {\n biggest = currentPos\n }\n }\n return { start: smallest, end: biggest }\n }\n\n if (dictionary === null || editor == null) {\n return\n }\n\n try {\n const { start, end } = getStartAndEnd(fromChangeObject, toChangeObject)\n\n // Expand the range to include words after/before whitespaces\n start.ch = Math.max(start.ch - 1, 0)\n end.ch = end.ch + 1\n\n // clean existing marks\n const existingMarks = editor.findMarks(start, end) || []\n for (const mark of existingMarks) {\n mark.clear()\n }\n\n self.checkMultiLineRange(editor, start, end)\n } catch (e) {\n console.info(\n 'Error during the spell check. It might be due to problems figuring out the range of the new text..',\n e\n )\n }\n}\n\nfunction saveLiveSpellCheckFrom(changeObject) {\n liveSpellCheckFrom = changeObject\n}\nlet liveSpellCheckFrom\nconst debouncedSpellCheckLeading = _.debounce(\n saveLiveSpellCheckFrom,\n MILLISECONDS_TILL_LIVECHECK,\n {\n leading: true,\n trailing: false\n }\n)\nconst debouncedSpellCheck = _.debounce(\n checkChangeRange,\n MILLISECONDS_TILL_LIVECHECK,\n {\n leading: false,\n trailing: true\n }\n)\n\n/**\n * Handles a keystroke. Buffers the input and performs a live spell check after a certain time. Uses _debounce from lodash to buffer the input\n * @param {Codemirror} editor CodeMirror-Editor\n * @param changeObject codeMirror changeObject\n */\nfunction handleChange(editor, changeObject) {\n if (dictionary === null) {\n return\n }\n debouncedSpellCheckLeading(changeObject)\n debouncedSpellCheck(editor, liveSpellCheckFrom, changeObject)\n}\n\n/**\n * Returns an array of spelling suggestions for the given (wrong written) word.\n * Returns an empty array if the dictionary is null (=> spellcheck is disabled) or the given word was null\n * @param word word to be checked\n * @returns {String[]} Array of suggestions\n */\nfunction getSpellingSuggestion(word) {\n if (dictionary == null || word == null) {\n return []\n }\n return dictionary.suggest(word)\n}\n\n/**\n * Returns the name of the CSS class used for errors\n */\nfunction getCSSClassName() {\n return styles[CSS_ERROR_CLASS]\n}\n\nmodule.exports = {\n DICTIONARY_PATH,\n CSS_ERROR_CLASS,\n SPELLCHECK_DISABLED,\n getAvailableDictionaries,\n setLanguage,\n checkChangeRange,\n handleChange,\n getSpellingSuggestion,\n checkWord,\n checkMultiLineRange,\n checkWholeDocument,\n setDictionaryForTestsOnly,\n getCSSClassName\n}\n" }, { "path": "browser/lib/turndown.js", "content": "const TurndownService = require('turndown')\nconst { gfm } = require('turndown-plugin-gfm')\n\nexport const createTurndownService = function() {\n const turndown = new TurndownService()\n turndown.use(gfm)\n turndown.remove('script')\n return turndown\n}\n" }, { "path": "browser/lib/ui-themes.js", "content": "import i18n from 'browser/lib/i18n'\n\nexport default [\n {\n name: 'dark',\n label: i18n.__('Dark'),\n isDark: true\n },\n {\n name: 'default',\n label: i18n.__('Default'),\n isDark: false\n },\n {\n name: 'dracula',\n label: i18n.__('Dracula'),\n isDark: true\n },\n {\n name: 'monokai',\n label: i18n.__('Monokai'),\n isDark: true\n },\n {\n name: 'nord',\n label: i18n.__('Nord'),\n isDark: true\n },\n {\n name: 'solarized-dark',\n label: i18n.__('Solarized Dark'),\n isDark: true\n },\n {\n name: 'vulcan',\n label: i18n.__('Vulcan'),\n isDark: true\n },\n {\n name: 'white',\n label: i18n.__('White'),\n isDark: false\n }\n]\n" }, { "path": "browser/lib/utils.js", "content": "export function lastFindInArray(array, callback) {\n for (let i = array.length - 1; i >= 0; --i) {\n if (callback(array[i], i, array)) {\n return array[i]\n }\n }\n}\n\nexport function escapeHtmlCharacters(\n html,\n opt = { detectCodeBlock: false, skipSingleQuote: false }\n) {\n const matchHtmlRegExp = /[\"'&<>]/g\n const matchCodeBlockRegExp = /```/g\n const escapes = ['"', '&', ''', '<', '>']\n let match = null\n const replaceAt = (str, index, replace) =>\n str.substr(0, index) +\n replace +\n str.substr(index + replace.length - (replace.length - 1))\n\n while ((match = matchHtmlRegExp.exec(html)) !== null) {\n const current = { char: match[0], index: match.index }\n const codeBlockIndexs = []\n let openCodeBlock = null\n // if the detectCodeBlock option is activated then this function should skip\n // characters that needed to be escape but located in code block\n if (opt.detectCodeBlock) {\n // The first type of code block is lines that start with 4 spaces\n // Here we check for the \\n character located before the character that\n // needed to be escape. It means we check for the begining of the line that\n // contain that character, then we check if there are 4 spaces next to the\n // \\n character (the line start with 4 spaces)\n let previousLineEnd = current.index - 1\n while (html[previousLineEnd] !== '\\n' && previousLineEnd !== -1) {\n previousLineEnd--\n }\n // 4 spaces means this character is in a code block\n if (\n html[previousLineEnd + 1] === ' ' &&\n html[previousLineEnd + 2] === ' ' &&\n html[previousLineEnd + 3] === ' ' &&\n html[previousLineEnd + 4] === ' '\n ) {\n // skip the current character\n continue\n }\n // The second type of code block is lines that wrapped in ```\n // We will get the position of each ```\n // then push it into an array\n // then the array returned will be like this:\n // [startCodeblock, endCodeBlock, startCodeBlock, endCodeBlock]\n while ((openCodeBlock = matchCodeBlockRegExp.exec(html)) !== null) {\n codeBlockIndexs.push(openCodeBlock.index)\n }\n let shouldSkipChar = false\n // we loop through the array of positions\n // we skip 2 element as the i index position is the position of ``` that\n // open the codeblock and the i + 1 is the position of the ``` that close\n // the code block\n for (let i = 0; i < codeBlockIndexs.length; i += 2) {\n // the i index position is the position of the ``` that open code block\n // so we have to + 2 as that position is the position of the first ` in the ````\n // but we need to make sure that the position current character is larger\n // that the last ` in the ``` that open the code block so we have to take\n // the position of the first ` and + 2\n // the i + 1 index position is the closing ``` so the char must less than it\n if (\n current.index > codeBlockIndexs[i] + 2 &&\n current.index < codeBlockIndexs[i + 1]\n ) {\n // skip it\n shouldSkipChar = true\n break\n }\n }\n if (shouldSkipChar) {\n // skip the current character\n continue\n }\n }\n // otherwise, escape it !!!\n if (current.char === '&') {\n // when escaping character & we have to be becareful as the & could be a part\n // of an escaped character like " will be came &quot;\n let nextStr = ''\n let nextIndex = current.index\n let escapedStr = false\n // maximum length of an escaped string is 5. For example ('"')\n // we take the next 5 character of the next string if it is one of the string:\n // ['"', '&', ''', '<', '>'] then we will not escape the & character\n // as it is a part of the escaped string and should not be escaped\n while (nextStr.length <= 5) {\n nextStr += html[nextIndex]\n nextIndex++\n if (escapes.indexOf(nextStr) !== -1) {\n escapedStr = true\n break\n }\n }\n if (!escapedStr) {\n // this & char is not a part of an escaped string\n html = replaceAt(html, current.index, '&')\n }\n } else if (current.char === '\"') {\n html = replaceAt(html, current.index, '"')\n } else if (current.char === \"'\" && !opt.skipSingleQuote) {\n html = replaceAt(html, current.index, ''')\n } else if (current.char === '<') {\n html = replaceAt(html, current.index, '<')\n } else if (current.char === '>') {\n html = replaceAt(html, current.index, '>')\n }\n }\n return html\n}\n\nexport function isObjectEqual(a, b) {\n const aProps = Object.getOwnPropertyNames(a)\n const bProps = Object.getOwnPropertyNames(b)\n\n if (aProps.length !== bProps.length) {\n return false\n }\n\n for (var i = 0; i < aProps.length; i++) {\n const propName = aProps[i]\n if (a[propName] !== b[propName]) {\n return false\n }\n }\n return true\n}\n\nexport function isMarkdownTitleURL(str) {\n return /(^#{1,6}\\s)(?:\\w+:|^)\\/\\/(?:[^\\s\\.]+\\.\\S{2}|localhost[\\:?\\d]*)/.test(\n str\n )\n}\n\nexport function humanFileSize(bytes) {\n const threshold = 1000\n if (Math.abs(bytes) < threshold) {\n return bytes + ' B'\n }\n var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n var u = -1\n do {\n bytes /= threshold\n ++u\n } while (Math.abs(bytes) >= threshold && u < units.length - 1)\n return bytes.toFixed(1) + ' ' + units[u]\n}\n\nexport default {\n lastFindInArray,\n escapeHtmlCharacters,\n isObjectEqual,\n isMarkdownTitleURL,\n humanFileSize\n}\n" }, { "path": "browser/lib/wakatime-plugin.js", "content": "import config from 'browser/main/lib/ConfigManager'\nconst exec = require('child_process').exec\nconst path = require('path')\nlet lastHeartbeat = 0\n\nfunction sendWakatimeHeartBeat(\n storagePath,\n noteKey,\n storageName,\n { isWrite, hasFileChanges, isFileChange }\n) {\n if (\n config.get().wakatime.isActive &&\n !!config.get().wakatime.key &&\n (new Date().getTime() - lastHeartbeat > 120000 || isFileChange)\n ) {\n const notePath = path.join(storagePath, 'notes', noteKey + '.cson')\n\n if (!isWrite && !hasFileChanges && !isFileChange) {\n return\n }\n\n lastHeartbeat = new Date()\n const wakatimeKey = config.get().wakatime.key\n if (wakatimeKey) {\n exec(\n `wakatime --file ${notePath} --project '${storageName}' --key ${wakatimeKey} --plugin Boostnote-wakatime`,\n (error, stdOut, stdErr) => {\n if (error) {\n console.log(error)\n lastHeartbeat = 0\n } else {\n console.log(\n 'wakatime',\n 'isWrite',\n isWrite,\n 'hasChanges',\n hasFileChanges,\n 'isFileChange',\n isFileChange\n )\n }\n }\n )\n }\n }\n}\n\nexport { sendWakatimeHeartBeat }\n" }, { "path": "browser/main/Detail/Detail.styl", "content": ".root\n absolute top bottom right\n display flex\n align-items center\n justify-content center\n\n.empty\n height 320px\n display flex\n align-items center\n\n.empty-message\n width 100%\n font-size 36px\n font-weight 600\n line-height 56px\n text-align center\n color $ui-inactive-text-color\n\nbody[data-theme=\"dark\"]\n .root\n background-color $ui-dark-backgroundColor\n border-left 1px solid $ui-dark-borderColor\n .empty-message\n color $ui-dark-inactive-text-color\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n border-left 1px solid get-theme-var(theme, 'borderColor')\n .empty-message\n color get-theme-var(theme, 'text-color')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/main/Detail/DetailVars.styl", "content": "/**\n * Varibales for note detail space.\n */\n\n// Margin on the left side and the right side for NoteDetail component.\n$note-detail-left-margin = 100px\n$note-detail-right-margin = 120px\n$snippet-note-detail-left-margin = 60px\n$snippet-note-detail-right-margin = 80px\n\n$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset\n" }, { "path": "browser/main/Detail/FolderSelect.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './FolderSelect.styl'\nimport _ from 'lodash'\nimport i18n from 'browser/lib/i18n'\n\nclass FolderSelect extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n status: 'IDLE',\n search: '',\n optionIndex: -1\n }\n }\n\n componentDidMount() {\n this.value = this.props.value\n }\n\n componentDidUpdate() {\n this.value = this.props.value\n }\n\n handleClick(e) {\n this.setState(\n {\n status: 'SEARCH',\n optionIndex: -1\n },\n () => {\n this.refs.search.focus()\n }\n )\n }\n\n handleFocus(e) {\n if (this.state.status === 'IDLE') {\n this.setState({\n status: 'FOCUS'\n })\n }\n }\n\n handleBlur(e) {\n if (this.state.status === 'FOCUS') {\n this.setState({\n status: 'IDLE'\n })\n }\n }\n\n handleKeyDown(e) {\n switch (e.keyCode) {\n case 13:\n if (this.state.status === 'FOCUS') {\n this.setState(\n {\n status: 'SEARCH',\n optionIndex: -1\n },\n () => {\n this.refs.search.focus()\n }\n )\n }\n break\n case 40:\n case 38:\n if (this.state.status === 'FOCUS') {\n this.setState(\n {\n status: 'SEARCH',\n optionIndex: 0\n },\n () => {\n this.refs.search.focus()\n }\n )\n }\n break\n case 9:\n if (e.shiftKey) {\n e.preventDefault()\n const tabbable = document.querySelectorAll(\n 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex=\"-1\"])'\n )\n const previousEl =\n tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]\n if (previousEl != null) previousEl.focus()\n }\n }\n }\n\n handleSearchInputBlur(e) {\n if (e.relatedTarget !== this.refs.root) {\n this.setState({\n status: 'IDLE'\n })\n }\n }\n\n handleSearchInputChange(e) {\n const { folders } = this.props\n const search = this.refs.search.value\n const optionIndex =\n search.length > 0\n ? _.findIndex(folders, folder => {\n return folder.name.match(\n new RegExp('^' + _.escapeRegExp(search), 'i')\n )\n })\n : -1\n\n this.setState({\n search: this.refs.search.value,\n optionIndex: optionIndex\n })\n }\n\n handleSearchInputKeyDown(e) {\n switch (e.keyCode) {\n case 40:\n e.stopPropagation()\n this.nextOption()\n break\n case 38:\n e.stopPropagation()\n this.previousOption()\n break\n case 13:\n e.stopPropagation()\n this.selectOption()\n break\n case 27:\n e.stopPropagation()\n this.setState(\n {\n status: 'FOCUS'\n },\n () => {\n this.refs.root.focus()\n }\n )\n }\n }\n\n nextOption() {\n let { optionIndex } = this.state\n const { folders } = this.props\n\n optionIndex++\n if (optionIndex >= folders.length) optionIndex = 0\n\n this.setState({\n optionIndex\n })\n }\n\n previousOption() {\n const { folders } = this.props\n let { optionIndex } = this.state\n\n optionIndex--\n if (optionIndex < 0) optionIndex = folders.length - 1\n\n this.setState({\n optionIndex\n })\n }\n\n selectOption() {\n const { folders } = this.props\n const optionIndex = this.state.optionIndex\n\n const folder = folders[optionIndex]\n if (folder != null) {\n this.setState(\n {\n status: 'FOCUS'\n },\n () => {\n this.setValue(folder.key)\n this.refs.root.focus()\n }\n )\n }\n }\n\n handleOptionClick(storageKey, folderKey) {\n return e => {\n e.stopPropagation()\n this.setState(\n {\n status: 'FOCUS'\n },\n () => {\n this.setValue(storageKey + '-' + folderKey)\n this.refs.root.focus()\n }\n )\n }\n }\n\n setValue(value) {\n this.value = value\n this.props.onChange()\n }\n\n render() {\n const { className, data, value } = this.props\n const splitted = value.split('-')\n const storageKey = splitted.shift()\n const folderKey = splitted.shift()\n let options = []\n data.storageMap.forEach((storage, index) => {\n storage.folders.forEach(folder => {\n options.push({\n storage: storage,\n folder: folder\n })\n })\n })\n\n const currentOption = options.filter(\n option =>\n option.storage.key === storageKey && option.folder.key === folderKey\n )[0]\n\n if (this.state.search.trim().length > 0) {\n const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')\n options = options.filter(option => filter.test(option.folder.name))\n }\n\n const optionList = options.map((option, index) => {\n return (\n \n this.handleOptionClick(option.storage.key, option.folder.key)(e)\n }\n >\n \n {option.folder.name}\n \n in {option.storage.name}\n \n \n \n )\n })\n\n return (\n this.handleClick(e)}\n onFocus={e => this.handleFocus(e)}\n onBlur={e => this.handleBlur(e)}\n onKeyDown={e => this.handleKeyDown(e)}\n >\n {this.state.status === 'SEARCH' ? (\n
\n this.handleSearchInputChange(e)}\n onBlur={e => this.handleSearchInputBlur(e)}\n onKeyDown={e => this.handleSearchInputKeyDown(e)}\n />\n
\n {optionList}\n
\n
\n ) : currentOption ? (\n
\n
\n \n \n {currentOption.folder.name}\n \n
\n
\n ) : null}\n \n )\n }\n}\n\nFolderSelect.propTypes = {\n className: PropTypes.string,\n onChange: PropTypes.func,\n value: PropTypes.string,\n folders: PropTypes.arrayOf(\n PropTypes.shape({\n key: PropTypes.string,\n name: PropTypes.string,\n color: PropTypes.string\n })\n )\n}\n\nexport default CSSModules(FolderSelect, styles)\n" }, { "path": "browser/main/Detail/FolderSelect.styl", "content": ".root\n position relative\n border solid 1px transparent\n vertical-align middle\n border-radius 2px\n height 30px\n transition 0.15s\n user-select none\n margin-right 10px\n\n.root--search, .root--focus\n @extend .root\n border-color $ui-input--focus-borderColor\n\n.idle\n position relative\n cursor pointer\n\n.idle-label\n right 20px\n overflow ellipsis\n display flex\n align-items center\n\n.idle-label-name\n font-size 13px\n font-weight 600\n margin-left 4px\n\n.idle-label-name-surfix\n font-size 15px\n color $ui-inactive-text-color\n margin-left 5px\n.idle-caret\n absolute right top\n height 34px\n width 20px\n line-height 34px\n\n.search-input\n vertical-align middle\n position relative\n top 0\n font-size 14px\n outline none\n border none\n width 100%\n background-color transparent\n padding 0 10px\n\n.search-optionList\n position absolute\n top 30px\n max-height 450px\n min-width 150px\n overflow auto\n z-index 200\n border $ui-border\n background-color white\n border-radius 2px\n padding 10px 6px\n\n.search-optionList-item\n width 140px\n height 34px\n display flex\n align-items center\n box-sizing border-box\n padding 0\n margin-bottom 10px\n overflow ellipsis\n cursor pointer\n &:hover\n background-color $ui-button--hover-backgroundColor\n\n.search-optionList-item--active\n @extend .search-optionList-item\n background-color $ui-button--active-backgroundColor\n color $ui-button--active-color\n &:hover\n background-color $ui-button--active-backgroundColor\n color $ui-button--active-color\n.search-optionList-item-name\n border-left solid 3px transparent\n padding 6px\n.search-optionList-item-name-surfix\n font-size 10px\n color $ui-inactive-text-color\n margin-left 5px\n\n\n\n\n\nbody[data-theme=\"dark\"]\n .root\n color $ui-dark-text-color\n &:hover\n color white\n background-color $ui-dark-button--hover-backgroundColor\n border-color $ui-dark-borderColor\n\n .root--search, .root--focus\n @extend .root\n background-color $ui-dark-button--hover-backgroundColor\n border-color $ui-input--focus-borderColor\n &:hover\n background-color $ui-dark-button--hover-backgroundColor\n border-color $ui-input--focus-borderColor\n\n .idle-label-name-surfix\n color $ui-dark-inactive-text-color\n\n .search-input\n color white\n background-color transparent\n border-color $ui-dark-borderColor\n\n .search-optionList\n color white\n border-color $ui-dark-borderColor\n background-color $ui-dark-button--hover-backgroundColor\n\n .search-optionList-item\n &:hover\n background-color lighten($ui-dark-button--hover-backgroundColor, 15%)\n\n .search-optionList-item--active\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-button--active-color\n &:hover\n background-color $ui-dark-button--active-backgroundColor\n color $ui-dark-button--active-color\n .search-optionList-item-name-surfix\n color $ui-dark-inactive-text-color\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n &:hover\n background-color get-theme-var(theme, 'button--hover-backgroundColor')\n border-color get-theme-var(theme, 'borderColor')\n\n .search-input\n color get-theme-var(theme, 'text-color')\n background-color transparent\n border-color get-theme-var(theme, 'borderColor')\n\n .search-optionList\n color get-theme-var(theme, 'text-color')\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'button-backgroundColor')\n\n .search-optionList-item\n &:hover\n background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)\n\n .search-optionList-item--active\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n color get-theme-var(theme, 'button--active-color')\n &:hover\n background-color get-theme-var(theme, 'button--active-backgroundColor')\n color get-theme-var(theme, 'button--active-color')\n\n .search-optionList-item-name-surfix\n color get-theme-var(theme, 'inactive-text-color')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/main/Detail/FromUrlButton.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './FromUrlButton.styl'\nimport _ from 'lodash'\nimport i18n from 'browser/lib/i18n'\n\nclass FromUrlButton extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n isActive: false\n }\n }\n\n handleMouseDown(e) {\n this.setState({\n isActive: true\n })\n }\n\n handleMouseUp(e) {\n this.setState({\n isActive: false\n })\n }\n\n handleMouseLeave(e) {\n this.setState({\n isActive: false\n })\n }\n\n render() {\n const { className } = this.props\n\n return (\n this.handleMouseDown(e)}\n onMouseUp={e => this.handleMouseUp(e)}\n onMouseLeave={e => this.handleMouseLeave(e)}\n onClick={this.props.onClick}\n >\n \n {i18n.__('Convert URL to Markdown')}\n \n )\n }\n}\n\nFromUrlButton.propTypes = {\n isActive: PropTypes.bool,\n onClick: PropTypes.func,\n className: PropTypes.string\n}\n\nexport default CSSModules(FromUrlButton, styles)\n" }, { "path": "browser/main/Detail/FromUrlButton.styl", "content": ".root\n top 45px\n topBarButtonRight()\n &:hover\n transition 0.2s\n color alpha($ui-favorite-star-button-color, 0.6)\n &:hover .tooltip\n opacity 1\n\n.tooltip\n tooltip()\n position absolute\n pointer-events none\n top 50px\n right 125px\n width 90px\n z-index 200\n padding 5px\n line-height normal\n border-radius 2px\n opacity 0\n transition 0.1s\n\n.root--active\n @extend .root\n transition 0.15s\n color $ui-favorite-star-button-color\n &:hover\n transition 0.2s\n color alpha($ui-favorite-star-button-color, 0.6)\n\n.icon\n transition transform 0.15s\n height 13px\n\nbody[data-theme=\"dark\"]\n .root\n topBarButtonDark()\n &:hover\n transition 0.2s\n color alpha($ui-favorite-star-button-color, 0.6)\n" }, { "path": "browser/main/Detail/FullscreenButton.js", "content": "import PropTypes from 'prop-types'\r\nimport React from 'react'\r\nimport CSSModules from 'browser/lib/CSSModules'\r\nimport styles from './FullscreenButton.styl'\r\nimport i18n from 'browser/lib/i18n'\r\n\r\nconst OSX = global.process.platform === 'darwin'\r\nconst FullscreenButton = ({ onClick }) => {\r\n const hotkey = (OSX ? i18n.__('Command(⌘)') : i18n.__('Ctrl(^)')) + '+B'\r\n return (\r\n onClick(e)}\r\n >\r\n \r\n \r\n {i18n.__('Fullscreen')}({hotkey})\r\n \r\n \r\n )\r\n}\r\n\r\nFullscreenButton.propTypes = {\r\n onClick: PropTypes.func.isRequired\r\n}\r\n\r\nexport default CSSModules(FullscreenButton, styles)\r\n" }, { "path": "browser/main/Detail/FullscreenButton.styl", "content": ".control-fullScreenButton\n top 80px\n topBarButtonRight()\n &:hover .tooltip\n opacity 1\n\n.tooltip\n tooltip()\n position absolute\n pointer-events none\n top 50px\n right 70px\n z-index 200\n padding 5px\n line-height normal\n border-radius 2px\n opacity 0\n transition 0.1s\n\n.tooltip:lang(ja)\n @extend .tooltip\n right 35px\n\nbody[data-theme=\"dark\"]\n .control-fullScreenButton\n topBarButtonDark()" }, { "path": "browser/main/Detail/InfoButton.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './InfoButton.styl'\nimport i18n from 'browser/lib/i18n'\n\nconst InfoButton = ({ onClick }) => (\n \n)\n\nInfoButton.propTypes = {\n onClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(InfoButton, styles)\n" }, { "path": "browser/main/Detail/InfoButton.styl", "content": ".control-infoButton\n top 10px\n topBarButtonRight()\n &:hover .tooltip\n opacity 1\n\n.tooltip\n tooltip()\n position absolute\n pointer-events none\n top 50px\n right 20px\n z-index 200\n padding 5px\n line-height normal\n border-radius 2px\n opacity 0\n transition 0.1s\n\n.infoButton\n padding 0px\n\nbody[data-theme=\"dark\"]\n .control-infoButton\n topBarButtonDark()\n" }, { "path": "browser/main/Detail/InfoPanel.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './InfoPanel.styl'\nimport copy from 'copy-to-clipboard'\nimport i18n from 'browser/lib/i18n'\n\nclass InfoPanel extends React.Component {\n copyNoteLink() {\n const { noteLink } = this.props\n this.refs.noteLink.select()\n copy(noteLink)\n }\n\n render() {\n const {\n storageName,\n folderName,\n noteLink,\n updatedAt,\n createdAt,\n exportAsMd,\n exportAsTxt,\n exportAsHtml,\n exportAsPdf,\n wordCount,\n letterCount,\n type,\n print\n } = this.props\n return (\n \n
\n

{updatedAt}

\n

\n {i18n.__('MODIFICATION DATE')}\n

\n
\n\n
\n\n {type === 'SNIPPET_NOTE' ? (\n ''\n ) : (\n
\n
\n

{wordCount}

\n

{i18n.__('Words')}

\n
\n
\n

{letterCount}

\n

{i18n.__('Letters')}

\n
\n
\n )}\n\n {type === 'SNIPPET_NOTE' ? '' :
}\n\n
\n

{storageName}

\n

{i18n.__('STORAGE')}

\n
\n\n
\n

{folderName}

\n

{i18n.__('FOLDER')}

\n
\n\n
\n

{createdAt}

\n

{i18n.__('CREATION DATE')}

\n
\n\n
\n {\n e.target.select()\n }}\n />\n this.copyNoteLink()}\n styleName='infoPanel-copyButton'\n >\n \n \n

{i18n.__('NOTE LINK')}

\n
\n\n
\n\n
\n exportAsMd(e, 'export-md')}\n >\n \n

{i18n.__('.md')}

\n \n\n exportAsTxt(e, 'export-txt')}\n >\n \n

{i18n.__('.txt')}

\n \n\n exportAsHtml(e, 'export-html')}\n >\n \n

{i18n.__('.html')}

\n \n\n exportAsPdf(e, 'export-pdf')}\n >\n \n

{i18n.__('.pdf')}

\n \n\n \n
\n \n )\n }\n}\n\nInfoPanel.propTypes = {\n storageName: PropTypes.string.isRequired,\n folderName: PropTypes.string.isRequired,\n noteLink: PropTypes.string.isRequired,\n updatedAt: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n exportAsMd: PropTypes.func.isRequired,\n exportAsTxt: PropTypes.func.isRequired,\n exportAsHtml: PropTypes.func.isRequired,\n exportAsPdf: PropTypes.func.isRequired,\n wordCount: PropTypes.number,\n letterCount: PropTypes.number,\n type: PropTypes.string.isRequired,\n print: PropTypes.func.isRequired\n}\n\nexport default CSSModules(InfoPanel, styles)\n" }, { "path": "browser/main/Detail/InfoPanel.styl", "content": ".control-infoPanel\n position fixed\n pointer-events none\n top 50px\n z-index 200\n line-height normal\n border-radius 4px\n opacity 0\n transition 0.2s\n\n.control-infoButton-panel\n z-index 200\n margin-top 0px\n top: 50px\n right 25px\n position absolute\n padding 20px 25px 0 25px\n // width 300px\n overflow auto\n background-color $ui-noteList-backgroundColor\n box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)\n border-radius 2px\n\n.modification-date\n font-size 18px\n line-height 30px\n color $ui-text-color\n\n.modification-date-desc\n font-size 18px\n color $ui-inactive-text-color\n\n.control-infoButton-panel-trash\n z-index 200\n margin-top 0px\n top 50px\n right 0px\n position absolute\n padding 20px 25px 0 25px\n width 300px\n background-color $ui-noteList-backgroundColor\n box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)\n border-radius 2px\n\n.count-wrap\n\tdisplay flex\n\tposition relative\n\twidth 100%\n\n.count-number\n\tposition relative\n\tdisplay block\n\twidth 50%\n\toverflow hidden\n\tmargin 0\n\tpadding 0\n\n.infoPanel-defaul-count\n font-size 16px\n line-height 30px\n color $ui-text-color\n\n.infoPanel-sub-count\n font-size 16px\n color $ui-inactive-text-color\n padding-bottom 8px\n\n.infoPanel-default\n font-size 14px\n line-height 30px\n color $ui-text-color\n\n.infoPanel-sub\n font-size 12px\n font-weight 600\n color $ui-inactive-text-color\n padding-bottom 8px\n\n.infoPanel-noteLink\n padding-right 5px\n width 210px\n height 25px\n margin 6px 0\n\n.infoPanel-copyButton\n outline none\n font-size 16px\n color #A0A0A0\n background-color transparent\n border none\n margin 0 5px\n border-radius 5px\n cursor pointer\n &:hover\n transition 0.2s\n background-color alpha($ui-button--hover-backgroundColor, 30%)\n color $ui-inactive-text-color\n\n.infoPanel-trash\n color #EA4447\n font-weight 600\n font-size 14px\n width 70px\n background-color rgba(226,33,113,0.1)\n border none\n outline none\n border-radius 2px\n margin-right 5px\n padding 2px 5px\n\n[id=export-wrap]\n height 90px\n display flex\n justify-content center\n margin 20px 0 10px 0\n button\n outline none\n font-size 48px\n color #A0A0A0\n background-color transparent\n border none\n margin 0 5px\n border-radius 5px\n &:hover\n transition 0.2s\n background-color alpha($ui-button--hover-backgroundColor, 30%)\n color $ui-inactive-text-color\n p\n font-size 13px\n color #A0A0A0\n font-weight light\n &:hover\n color $ui-inactive-text-color\n\n.export--enable\n cursor pointer\n\n.export--unable\n cursor not-allowed\n\napply-theme(theme)\n body[data-theme={theme}]\n .control-infoButton-panel\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n\n .control-infoButton-panel-trash\n background-color get-theme-var(theme, 'noteList-backgroundColor')\n\n .modification-date\n color get-theme-var(theme, 'text-color')\n\n .modification-date-desc\n color $ui-inactive-text-color\n\n .infoPanel-defaul-count\n color get-theme-var(theme, 'text-color')\n\n .infoPanel-sub-count\n color $ui-inactive-text-color\n\n .infoPanel-default\n color get-theme-var(theme, 'text-color')\n\n .infoPanel-sub\n color $ui-inactive-text-color\n\n .infoPanel-noteLink\n background-color alpha(get-theme-var(theme, 'borderColor'), 20%)\n color get-theme-var(theme, 'text-color')\n\n [id=export-wrap]\n button\n color $ui-dark-inactive-text-color\n &:hover\n background-color alpha(get-theme-var(theme, 'borderColor'), 20%)\n color get-theme-var(theme, 'text-color')\n p\n color $ui-dark-inactive-text-color\n &:hover\n color get-theme-var(theme, 'text-color')\n\nfor theme in 'dark' 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)" }, { "path": "browser/main/Detail/InfoPanelTrashed.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './InfoPanel.styl'\nimport i18n from 'browser/lib/i18n'\n\nconst InfoPanelTrashed = ({\n storageName,\n folderName,\n updatedAt,\n createdAt,\n exportAsMd,\n exportAsTxt,\n exportAsHtml,\n exportAsPdf\n}) => (\n \n
\n

{updatedAt}

\n

{i18n.__('MODIFICATION DATE')}

\n
\n\n
\n\n
\n

{storageName}

\n

{i18n.__('STORAGE')}

\n
\n\n
\n

\n Trash\n {folderName}\n

\n

{i18n.__('FOLDER')}

\n
\n\n
\n

{createdAt}

\n

{i18n.__('CREATION DATE')}

\n
\n\n
\n exportAsMd(e, 'export-md')}\n >\n \n

.md

\n \n\n exportAsTxt(e, 'export-txt')}\n >\n \n

.txt

\n \n\n exportAsHtml(e, 'export-html')}\n >\n \n

.html

\n \n\n exportAsPdf(e, 'export-pdf')}\n >\n \n

.pdf

\n \n
\n \n)\n\nInfoPanelTrashed.propTypes = {\n storageName: PropTypes.string.isRequired,\n folderName: PropTypes.string.isRequired,\n updatedAt: PropTypes.string.isRequired,\n createdAt: PropTypes.string.isRequired,\n exportAsMd: PropTypes.func.isRequired,\n exportAsTxt: PropTypes.func.isRequired,\n exportAsHtml: PropTypes.func.isRequired,\n exportAsPdf: PropTypes.func.isRequired\n}\n\nexport default CSSModules(InfoPanelTrashed, styles)\n" }, { "path": "browser/main/Detail/MarkdownNoteDetail.js", "content": "/* eslint-disable camelcase */\nimport PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './MarkdownNoteDetail.styl'\nimport MarkdownEditor from 'browser/components/MarkdownEditor'\nimport MarkdownSplitEditor from 'browser/components/MarkdownSplitEditor'\nimport TodoListPercentage from 'browser/components/TodoListPercentage'\nimport StarButton from './StarButton'\nimport TagSelect from './TagSelect'\nimport FolderSelect from './FolderSelect'\nimport dataApi from 'browser/main/lib/dataApi'\nimport ee from 'browser/main/lib/eventEmitter'\nimport markdown from 'browser/lib/markdownTextHelper'\nimport StatusBar from '../StatusBar'\nimport _ from 'lodash'\nimport { findNoteTitle } from 'browser/lib/findNoteTitle'\nimport AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'\nimport ConfigManager from 'browser/main/lib/ConfigManager'\nimport TrashButton from './TrashButton'\nimport FullscreenButton from './FullscreenButton'\nimport RestoreButton from './RestoreButton'\nimport PermanentDeleteButton from './PermanentDeleteButton'\nimport InfoButton from './InfoButton'\nimport ToggleModeButton from './ToggleModeButton'\nimport InfoPanel from './InfoPanel'\nimport InfoPanelTrashed from './InfoPanelTrashed'\nimport { formatDate } from 'browser/lib/date-formatter'\nimport { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'\nimport striptags from 'striptags'\nimport { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'\nimport markdownToc from 'browser/lib/markdown-toc-generator'\nimport queryString from 'query-string'\nimport { replace } from 'connected-react-router'\nimport ToggleDirectionButton from 'browser/main/Detail/ToggleDirectionButton'\n\nclass MarkdownNoteDetail extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n isMovingNote: false,\n note: Object.assign(\n {\n title: '',\n content: '',\n linesHighlighted: []\n },\n props.note\n ),\n isLockButtonShown: props.config.editor.type !== 'SPLIT',\n isLocked: false,\n editorType: props.config.editor.type,\n switchPreview: props.config.editor.switchPreview,\n RTL: false\n }\n\n this.dispatchTimer = null\n\n this.generateToc = this.handleGenerateToc.bind(this)\n this.toggleLockButton = this.handleToggleLockButton.bind(this)\n this.handleUpdateContent = this.handleUpdateContent.bind(this)\n this.handleSwitchStackDirection = this.handleSwitchStackDirection.bind(this)\n this.getNote = this.getNote.bind(this)\n }\n\n focus() {\n this.refs.content.focus()\n }\n\n componentDidMount() {\n ee.on('editor:orientation', this.handleSwitchStackDirection)\n ee.on('topbar:togglelockbutton', this.toggleLockButton)\n ee.on('topbar:toggledirectionbutton', () => this.handleSwitchDirection())\n ee.on('topbar:togglemodebutton', () => {\n const reversedType =\n this.state.editorType === 'SPLIT' ? 'EDITOR_PREVIEW' : 'SPLIT'\n this.handleSwitchMode(reversedType)\n })\n ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))\n ee.on('code:generate-toc', this.generateToc)\n }\n\n UNSAFE_componentWillReceiveProps(nextProps) {\n const isNewNote = nextProps.note.key !== this.props.note.key\n const hasDeletedTags =\n nextProps.note.tags.length < this.props.note.tags.length\n if (!this.state.isMovingNote && (isNewNote || hasDeletedTags)) {\n if (this.saveQueue != null) this.saveNow()\n this.setState(\n {\n note: Object.assign({ linesHighlighted: [] }, nextProps.note)\n },\n () => {\n this.refs.content.reload()\n if (this.refs.tags) this.refs.tags.reset()\n }\n )\n }\n\n // Focus content if using blur or double click\n // --> Moved here from componentDidMount so a re-render during search won't set focus to the editor\n const { switchPreview } = nextProps.config.editor\n\n if (this.state.switchPreview !== switchPreview) {\n this.setState({\n switchPreview\n })\n if (switchPreview === 'BLUR' || switchPreview === 'DBL_CLICK') {\n console.log('setting focus', switchPreview)\n this.focus()\n }\n }\n }\n\n componentWillUnmount() {\n ee.off('topbar:togglelockbutton', this.toggleLockButton)\n ee.on('topbar:toggledirectionbutton', this.handleSwitchDirection)\n ee.off('code:generate-toc', this.generateToc)\n if (this.saveQueue != null) this.saveNow()\n }\n\n handleUpdateTag() {\n const { note } = this.state\n if (this.refs.tags) note.tags = this.refs.tags.value\n this.updateNote(note)\n }\n\n handleUpdateContent() {\n const { note } = this.state\n note.content = this.refs.content.value\n\n let title = findNoteTitle(\n note.content,\n this.props.config.editor.enableFrontMatterTitle,\n this.props.config.editor.frontMatterTitleField\n )\n title = striptags(title)\n title = markdown.strip(title)\n note.title = title\n\n this.updateNote(note)\n }\n\n updateNote(note) {\n note.updatedAt = new Date()\n this.setState({ note }, () => {\n this.save()\n })\n }\n\n save() {\n clearTimeout(this.saveQueue)\n this.saveQueue = setTimeout(() => {\n this.saveNow()\n }, 1000)\n }\n\n saveNow() {\n const { note, dispatch } = this.props\n clearTimeout(this.saveQueue)\n this.saveQueue = null\n\n dataApi.updateNote(note.storage, note.key, this.state.note).then(note => {\n dispatch({\n type: 'UPDATE_NOTE',\n note: note\n })\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')\n })\n }\n\n handleFolderChange(e) {\n const { note } = this.state\n const value = this.refs.folder.value\n const splitted = value.split('-')\n const newStorageKey = splitted.shift()\n const newFolderKey = splitted.shift()\n\n dataApi\n .moveNote(note.storage, note.key, newStorageKey, newFolderKey)\n .then(newNote => {\n this.setState(\n {\n isMovingNote: true,\n note: Object.assign({}, newNote)\n },\n () => {\n const { dispatch, location } = this.props\n dispatch({\n type: 'MOVE_NOTE',\n originNote: note,\n note: newNote\n })\n dispatch(\n replace({\n pathname: location.pathname,\n search: queryString.stringify({\n key: newNote.key\n })\n })\n )\n this.setState({\n isMovingNote: false\n })\n }\n )\n })\n }\n\n handleStarButtonClick(e) {\n const { note } = this.state\n if (!note.isStarred)\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')\n\n note.isStarred = !note.isStarred\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n }\n )\n }\n\n exportAsFile() {}\n\n exportAsMd() {\n ee.emit('export:save-md')\n }\n\n exportAsTxt() {\n ee.emit('export:save-text')\n }\n\n exportAsHtml() {\n ee.emit('export:save-html')\n }\n\n exportAsPdf() {\n ee.emit('export:save-pdf')\n }\n\n handleKeyDown(e) {\n switch (e.keyCode) {\n // tab key\n case 9:\n if (e.ctrlKey && !e.shiftKey) {\n e.preventDefault()\n this.jumpNextTab()\n } else if (e.ctrlKey && e.shiftKey) {\n e.preventDefault()\n this.jumpPrevTab()\n } else if (\n !e.ctrlKey &&\n !e.shiftKey &&\n e.target === this.refs.description\n ) {\n e.preventDefault()\n this.focusEditor()\n }\n break\n // I key\n case 73:\n {\n const isSuper =\n global.process.platform === 'darwin' ? e.metaKey : e.ctrlKey\n if (isSuper) {\n e.preventDefault()\n this.handleInfoButtonClick(e)\n }\n }\n break\n }\n }\n\n handleTrashButtonClick(e) {\n const { note } = this.state\n const { isTrashed } = note\n const { confirmDeletion } = this.props.config.ui\n\n if (isTrashed) {\n if (confirmDeleteNote(confirmDeletion, true)) {\n const { note, dispatch } = this.props\n dataApi\n .deleteNote(note.storage, note.key)\n .then(data => {\n const dispatchHandler = () => {\n dispatch({\n type: 'DELETE_NOTE',\n storageKey: data.storageKey,\n noteKey: data.noteKey\n })\n }\n ee.once('list:next', dispatchHandler)\n })\n .then(() => ee.emit('list:next'))\n }\n } else {\n if (confirmDeleteNote(confirmDeletion, false)) {\n note.isTrashed = true\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n }\n )\n\n ee.emit('list:next')\n }\n }\n }\n\n handleUndoButtonClick(e) {\n const { note } = this.state\n\n note.isTrashed = false\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n this.refs.content.reload()\n ee.emit('list:next')\n }\n )\n }\n\n handleFullScreenButton(e) {\n ee.emit('editor:fullscreen')\n }\n\n handleLockButtonMouseDown(e) {\n e.preventDefault()\n ee.emit('editor:lock')\n this.setState({ isLocked: !this.state.isLocked })\n if (this.state.isLocked) this.focus()\n }\n\n getToggleLockButton() {\n return this.state.isLocked\n ? '../resources/icon/icon-lock.svg'\n : '../resources/icon/icon-unlock.svg'\n }\n\n handleDeleteKeyDown(e) {\n if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)\n }\n\n handleToggleLockButton(event, noteStatus) {\n // first argument event is not used\n if (noteStatus === 'CODE') {\n this.setState({ isLockButtonShown: true })\n } else {\n this.setState({ isLockButtonShown: false })\n }\n }\n\n handleGenerateToc() {\n const editor = this.refs.content.refs.code.editor\n markdownToc.generateInEditor(editor)\n }\n\n handleFocus(e) {\n this.focus()\n }\n\n handleInfoButtonClick(e) {\n const infoPanel = document.querySelector('.infoPanel')\n if (infoPanel.style)\n infoPanel.style.display =\n infoPanel.style.display === 'none' ? 'inline' : 'none'\n }\n\n print(e) {\n ee.emit('print')\n }\n\n handleSwitchMode(type) {\n // If in split mode, hide the lock button\n this.setState(\n { editorType: type, isLockButtonShown: type !== 'SPLIT' },\n () => {\n this.focus()\n const newConfig = Object.assign({}, this.props.config)\n newConfig.editor.type = type\n ConfigManager.set(newConfig)\n }\n )\n }\n\n handleSwitchStackDirection() {\n this.setState(\n prevState => ({ isStacking: !prevState.isStacking }),\n () => {\n this.focus()\n const newConfig = Object.assign({}, this.props.config)\n newConfig.ui.isStacking = this.state.isStacking\n ConfigManager.set(newConfig)\n }\n )\n }\n\n handleSwitchDirection() {\n if (!this.props.config.editor.rtlEnabled) {\n return\n }\n // If in split mode, hide the lock button\n const direction = this.state.RTL\n this.setState({ RTL: !direction })\n }\n\n handleDeleteNote() {\n this.handleTrashButtonClick()\n }\n\n handleClearTodo() {\n const { note } = this.state\n const splitted = note.content.split('\\n')\n\n const clearTodoContent = splitted\n .map(line => {\n const trimmedLine = line.trim()\n if (trimmedLine.match(/\\[x\\]/i)) {\n return line.replace(/\\[x\\]/i, '[ ]')\n } else {\n return line\n }\n })\n .join('\\n')\n\n note.content = clearTodoContent\n this.refs.content.setValue(note.content)\n\n this.updateNote(note)\n }\n\n getNote() {\n return this.state.note\n }\n\n renderEditor() {\n const { config, ignorePreviewPointerEvents } = this.props\n const { note, isStacking } = this.state\n\n if (this.state.editorType === 'EDITOR_PREVIEW') {\n return (\n \n )\n } else {\n return (\n \n )\n }\n }\n\n render() {\n const { data, dispatch, location, config } = this.props\n const { note, editorType } = this.state\n const storageKey = note.storage\n const folderKey = note.folder\n\n const options = []\n data.storageMap.forEach((storage, index) => {\n storage.folders.forEach(folder => {\n options.push({\n storage: storage,\n folder: folder\n })\n })\n })\n\n const currentOption = _.find(\n options,\n option =>\n option.storage.key === storageKey && option.folder.key === folderKey\n )\n\n // currentOption may be undefined\n const storageName = _.get(currentOption, 'storage.name') || ''\n const folderName = _.get(currentOption, 'folder.name') || ''\n\n const trashTopBar = (\n
\n
\n this.handleUndoButtonClick(e)} />\n
\n
\n this.handleTrashButtonClick(e)}\n />\n this.handleInfoButtonClick(e)} />\n \n
\n
\n )\n\n const detailTopBar = (\n
\n
\n
\n this.handleFolderChange(e)}\n />\n
\n\n \n this.handleClearTodo(e)}\n percentageOfTodo={getTodoPercentageOfCompleted(note.content)}\n />\n
\n
\n this.handleSwitchMode(e)}\n editorType={editorType}\n />\n {this.props.config.editor.rtlEnabled && (\n this.handleSwitchDirection(e)}\n isRTL={this.state.RTL}\n />\n )}\n this.handleStarButtonClick(e)}\n isActive={note.isStarred}\n />\n\n {(() => {\n const imgSrc = `${this.getToggleLockButton()}`\n const lockButtonComponent = (\n this.handleFocus(e)}\n onMouseDown={e => this.handleLockButtonMouseDown(e)}\n >\n \n {this.state.isLocked ? (\n Unlock\n ) : (\n Lock\n )}\n \n )\n\n return this.state.isLockButtonShown ? lockButtonComponent : ''\n })()}\n\n this.handleFullScreenButton(e)} />\n\n this.handleTrashButtonClick(e)} />\n\n this.handleInfoButtonClick(e)} />\n\n \n
\n
\n )\n\n return (\n this.handleKeyDown(e)}\n >\n {location.pathname === '/trashed' ? trashTopBar : detailTopBar}\n\n
{this.renderEditor()}
\n\n \n \n )\n }\n}\n\nMarkdownNoteDetail.propTypes = {\n dispatch: PropTypes.func,\n repositories: PropTypes.array,\n note: PropTypes.shape({}),\n style: PropTypes.shape({\n left: PropTypes.number\n }),\n ignorePreviewPointerEvents: PropTypes.bool\n}\n\nexport default CSSModules(MarkdownNoteDetail, styles)\n" }, { "path": "browser/main/Detail/MarkdownNoteDetail.styl", "content": "@import('NoteDetailInfo')\n@import('DetailVars')\n\n.root\n absolute top right bottom\n border-left 1px solid alpha(#DEDEDE, 60%)\n background-color $ui-noteDetail-backgroundColor\n box-shadow none\n padding 20px 40px\n overflow hidden\n\n.lock-button\n padding-bottom 3px\n\n.control-lockButton\n topBarButtonRight()\n position absolute\n right 265px\n &:hover .tooltip\n opacity 1\n\n .tooltip\n tooltip()\n position absolute\n pointer-events none\n top 35px\n right -10px\n width 50px\n z-index 200\n padding 5px\n line-height normal\n border-radius 2px\n opacity 0\n transition 0.1s\n\n.trashed-infopanel\n position relative\n\n.body\n absolute left right\n left 0\n right 0\n top $info-height + $info-margin-under-border\n bottom $statusBar-height\n margin 0 30px\n.body-noteEditor\n absolute top bottom left right\n\nbody[data-theme=\"white\"]\n .root\n box-shadow $note-detail-box-shadow\n border none\n\nbody[data-theme=\"dark\"]\n .root\n background-color $ui-dark-noteDetail-backgroundColor\n box-shadow none\n border-left 1px solid $ui-dark-borderColor\n\n .control-lockButton\n topBarButtonDark()\n\n .control-lockButton-tooltip\n darkTooltip()\n\n .control-fullScreenButton\n topBarButtonDark()\n\napply-theme(theme)\n body[data-theme={theme}]\n .root\n border-left 1px solid get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)\n" }, { "path": "browser/main/Detail/NoteDetailInfo.styl", "content": "@import('DetailVars')\n\n$info-height = 60px\n$info-margin-under-border = 30px\n\n.info\n absolute top left right\n left 0\n right 0\n height $info-height\n background-color $ui-noteDetail-backgroundColor\n width 100%\n display flex\n align-items center\n padding 0 20px\n z-index 99\n\n.info > div\n > button\n -webkit-user-drag none\n user-select none\n > img, span\n -webkit-user-drag none\n user-select none\n\n.info-left\n padding 0 10px\n width 100%\n display flex\n align-items center\n\n.info-left-top-folderSelect\n display flex\n align-items center\n justify-content center\n\n.info-left-button\n width 34px\n height 34px\n navButtonColor()\n color $ui-favorite-star-button-color\n font-size 14px\n line-height 0\n margin 13px 2px\n padding 0\n border-radius 17px\n &:hover .info-left-button-tooltip\n opacity 1\n &:focus\n border-color $ui-favorite-star-button-color\n &:active, &:active:hover\n background-color $ui-favorite-star-button-color\n color $ui-button--color\n\n.info-right\n z-index 101\n display inline-flex\n margin-top 3px\n\n.undo-button\n width 34px\n height 34px\n border-radius 17px\n font-size 14px\n margin 5px 0px\n border none\n color $ui-button-color\n display flex\n align-items center\n justify-content center\n fill $ui-button-color\n background-color transparent\n cursor pointer\n &:active\n border-color $ui-button--active-backgroundColor\n &:hover\n background-color alpha($ui-button--hover-backgroundColor, 60%)\n transition 0.2s\n .control-lockButton-tooltip\n opacity 1\n\nbody[data-theme=\"dark\"]\n .info\n border-color $ui-dark-borderColor\n background-color $ui-dark-noteDetail-backgroundColor\n\n .info-delete\n color $ui-dark-text-color\n\n .info-delete-confirmButton\n colorDarkDangerButton()\n color $ui-dark-text-color\n\n .info-delete-cancelButton\n colorDarkDefaultButton()\n border-color $ui-dark-borderColor\n color $ui-dark-text-color\n\n .info-right\n background-color $ui-dark-noteDetail-backgroundColor\n\n .undo-button\n topBarButtonDark()\n\napply-theme(theme)\n body[data-theme={theme}]\n .info\n border-color get-theme-var(theme, 'borderColor')\n background-color get-theme-var(theme, 'noteDetail-backgroundColor')\n\nfor theme in 'solarized-dark' 'dracula'\n apply-theme(theme)\n\nfor theme in $themes\n apply-theme(theme)\n" }, { "path": "browser/main/Detail/PermanentDeleteButton.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './TrashButton.styl'\nimport i18n from 'browser/lib/i18n'\n\nconst PermanentDeleteButton = ({ onClick }) => (\n \n)\n\nPermanentDeleteButton.propTypes = {\n onClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(PermanentDeleteButton, styles)\n" }, { "path": "browser/main/Detail/RestoreButton.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './RestoreButton.styl'\nimport i18n from 'browser/lib/i18n'\n\nconst RestoreButton = ({ onClick }) => (\n \n)\n\nRestoreButton.propTypes = {\n onClick: PropTypes.func.isRequired\n}\n\nexport default CSSModules(RestoreButton, styles)\n" }, { "path": "browser/main/Detail/RestoreButton.styl", "content": ".control-restoreButton\n top 115px\n topBarButtonRight()\n &:hover .tooltip\n opacity 1\n\n.tooltip\n tooltip()\n position absolute\n pointer-events none\n top 50px\n left 25px\n z-index 200\n padding 5px\n line-height normal\n border-radius 2px\n opacity 0\n transition 0.1s\n\nbody[data-theme=\"dark\"]\n .control-restoreButton\n topBarButtonDark()\n" }, { "path": "browser/main/Detail/SnippetNoteDetail.js", "content": "import PropTypes from 'prop-types'\nimport React from 'react'\nimport CSSModules from 'browser/lib/CSSModules'\nimport styles from './SnippetNoteDetail.styl'\nimport CodeEditor from 'browser/components/CodeEditor'\nimport MarkdownEditor from 'browser/components/MarkdownEditor'\nimport StarButton from './StarButton'\nimport TagSelect from './TagSelect'\nimport FolderSelect from './FolderSelect'\nimport dataApi from 'browser/main/lib/dataApi'\nimport ee from 'browser/main/lib/eventEmitter'\nimport CodeMirror from 'codemirror'\nimport 'codemirror-mode-elixir'\nimport SnippetTab from 'browser/components/SnippetTab'\nimport StatusBar from '../StatusBar'\nimport context from 'browser/lib/context'\nimport ConfigManager from 'browser/main/lib/ConfigManager'\nimport _ from 'lodash'\nimport { findNoteTitle } from 'browser/lib/findNoteTitle'\nimport AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'\nimport FullscreenButton from './FullscreenButton'\nimport TrashButton from './TrashButton'\nimport RestoreButton from './RestoreButton'\nimport PermanentDeleteButton from './PermanentDeleteButton'\nimport InfoButton from './InfoButton'\nimport InfoPanel from './InfoPanel'\nimport InfoPanelTrashed from './InfoPanelTrashed'\nimport { formatDate } from 'browser/lib/date-formatter'\nimport i18n from 'browser/lib/i18n'\nimport { confirmDeleteNote } from 'browser/lib/confirmDeleteNote'\nimport markdownToc from 'browser/lib/markdown-toc-generator'\nimport queryString from 'query-string'\nimport { replace } from 'connected-react-router'\n\nconst electron = require('electron')\nconst { remote } = electron\nconst { dialog } = remote\n\nclass SnippetNoteDetail extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n isMovingNote: false,\n snippetIndex: 0,\n showArrows: false,\n enableLeftArrow: false,\n enableRightArrow: false,\n note: Object.assign(\n {\n description: ''\n },\n props.note,\n {\n snippets: props.note.snippets.map(snippet =>\n Object.assign({ linesHighlighted: [] }, snippet)\n )\n }\n )\n }\n\n this.scrollToNextTabThreshold = 0.7\n this.generateToc = () => this.handleGenerateToc()\n }\n\n componentDidMount() {\n const visibleTabs = this.visibleTabs\n const allTabs = this.allTabs\n\n if (visibleTabs.offsetWidth < allTabs.scrollWidth) {\n this.setState({\n showArrows: visibleTabs.offsetWidth < allTabs.scrollWidth,\n enableRightArrow:\n allTabs.offsetLeft !== visibleTabs.offsetWidth - allTabs.scrollWidth,\n enableLeftArrow: allTabs.offsetLeft !== 0\n })\n }\n ee.on('code:generate-toc', this.generateToc)\n }\n\n componentWillReceiveProps(nextProps) {\n if (\n nextProps.note.key !== this.props.note.key &&\n !this.state.isMovingNote\n ) {\n if (this.saveQueue != null) this.saveNow()\n const nextNote = Object.assign(\n {\n description: ''\n },\n nextProps.note,\n {\n snippets: nextProps.note.snippets.map(snippet =>\n Object.assign({ linesHighlighted: [] }, snippet)\n )\n }\n )\n\n this.setState(\n {\n snippetIndex: 0,\n note: nextNote\n },\n () => {\n const { snippets } = this.state.note\n snippets.forEach((snippet, index) => {\n this.refs['code-' + index].reload()\n })\n if (this.refs.tags) this.refs.tags.reset()\n this.setState(this.getArrowsState())\n }\n )\n }\n }\n\n componentWillUnmount() {\n if (this.saveQueue != null) this.saveNow()\n ee.off('code:generate-toc', this.generateToc)\n }\n\n handleGenerateToc() {\n const { note, snippetIndex } = this.state\n const currentMode = note.snippets[snippetIndex].mode\n if (currentMode.includes('Markdown')) {\n const currentEditor = this.refs[`code-${snippetIndex}`].refs.code.editor\n markdownToc.generateInEditor(currentEditor)\n }\n }\n\n handleChange(e) {\n const { note } = this.state\n\n if (this.refs.tags) note.tags = this.refs.tags.value\n note.description = this.refs.description.value\n note.updatedAt = new Date()\n note.title = findNoteTitle(note.description, false)\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n }\n )\n }\n\n save() {\n clearTimeout(this.saveQueue)\n this.saveQueue = setTimeout(() => {\n this.saveNow()\n }, 1000)\n }\n\n saveNow() {\n const { note, dispatch } = this.props\n clearTimeout(this.saveQueue)\n this.saveQueue = null\n\n dataApi.updateNote(note.storage, note.key, this.state.note).then(note => {\n dispatch({\n type: 'UPDATE_NOTE',\n note: note\n })\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')\n })\n }\n\n handleFolderChange(e) {\n const { note } = this.state\n const value = this.refs.folder.value\n const splitted = value.split('-')\n const newStorageKey = splitted.shift()\n const newFolderKey = splitted.shift()\n\n dataApi\n .moveNote(note.storage, note.key, newStorageKey, newFolderKey)\n .then(newNote => {\n this.setState(\n {\n isMovingNote: true,\n note: Object.assign({}, newNote)\n },\n () => {\n const { dispatch, location } = this.props\n dispatch({\n type: 'MOVE_NOTE',\n originNote: note,\n note: newNote\n })\n dispatch(\n replace({\n pathname: location.pathname,\n search: queryString.stringify({\n key: newNote.key\n })\n })\n )\n this.setState({\n isMovingNote: false\n })\n }\n )\n })\n }\n\n handleStarButtonClick(e) {\n const { note } = this.state\n if (!note.isStarred)\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')\n\n note.isStarred = !note.isStarred\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n }\n )\n }\n\n exportAsFile() {}\n\n handleTrashButtonClick(e) {\n const { note } = this.state\n const { isTrashed } = note\n const { confirmDeletion } = this.props.config.ui\n\n if (isTrashed) {\n if (confirmDeleteNote(confirmDeletion, true)) {\n const { note, dispatch } = this.props\n dataApi\n .deleteNote(note.storage, note.key)\n .then(data => {\n const dispatchHandler = () => {\n dispatch({\n type: 'DELETE_NOTE',\n storageKey: data.storageKey,\n noteKey: data.noteKey\n })\n }\n ee.once('list:next', dispatchHandler)\n })\n .then(() => ee.emit('list:next'))\n }\n } else {\n if (confirmDeleteNote(confirmDeletion, false)) {\n note.isTrashed = true\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n }\n )\n\n ee.emit('list:next')\n }\n }\n }\n\n handleUndoButtonClick(e) {\n const { note } = this.state\n\n note.isTrashed = false\n\n this.setState(\n {\n note\n },\n () => {\n this.save()\n ee.emit('list:next')\n }\n )\n }\n\n handleFullScreenButton(e) {\n ee.emit('editor:fullscreen')\n }\n\n handleTabMoveLeftButtonClick(e) {\n {\n const left = this.visibleTabs.scrollLeft\n\n const tabs = this.allTabs.querySelectorAll('div')\n const lastVisibleTab = Array.from(tabs).find(tab => {\n return tab.offsetLeft + tab.offsetWidth >= left\n })\n\n if (lastVisibleTab) {\n const visiblePart =\n lastVisibleTab.offsetWidth + lastVisibleTab.offsetLeft - left\n const isFullyVisible =\n visiblePart >\n lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold\n const scrollToTab =\n isFullyVisible && lastVisibleTab.previousSibling\n ? lastVisibleTab.previousSibling\n : lastVisibleTab\n\n // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)\n this.moveToTab(scrollToTab)\n // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'start', block: 'start'})\n }\n }\n }\n\n handleTabMoveRightButtonClick(e) {\n const left = this.visibleTabs.scrollLeft\n const width = this.visibleTabs.offsetWidth\n\n const tabs = this.allTabs.querySelectorAll('div')\n const lastVisibleTab = Array.from(tabs).find(tab => {\n return tab.offsetLeft + tab.offsetWidth >= width + left\n })\n\n if (lastVisibleTab) {\n const visiblePart = width + left - lastVisibleTab.offsetLeft\n const isFullyVisible =\n visiblePart > lastVisibleTab.offsetWidth * this.scrollToNextTabThreshold\n const scrollToTab =\n isFullyVisible && lastVisibleTab.nextSibling\n ? lastVisibleTab.nextSibling\n : lastVisibleTab\n\n // FIXME use `scrollIntoView()` instead of custom method after update to Electron2.0 (with Chrome 61 its possible animate the scroll)\n this.moveToTab(scrollToTab)\n // scrollToTab.scrollIntoView({behavior: 'smooth', inline: 'end', block: 'end'})\n }\n }\n\n handleTabPlusButtonClick(e) {\n this.addSnippet()\n }\n\n handleTabButtonClick(e, index) {\n this.setState({\n snippetIndex: index\n })\n }\n\n handleTabDragStart(e, index) {\n e.dataTransfer.setData('text/plain', index)\n }\n\n handleTabDrop(e, index) {\n const oldIndex = parseInt(e.dataTransfer.getData('text'))\n\n const snippets = this.state.note.snippets.slice()\n const draggedSnippet = snippets[oldIndex]\n snippets[oldIndex] = snippets[index]\n snippets[index] = draggedSnippet\n const snippetIndex = index\n\n const note = Object.assign({}, this.state.note, { snippets })\n this.setState({ note, snippetIndex }, () => {\n this.save()\n this.refs['code-' + index].reload()\n this.refs['code-' + oldIndex].reload()\n })\n }\n\n handleTabDeleteButtonClick(e, index) {\n if (this.state.note.snippets.length > 1) {\n if (this.state.note.snippets[index].content.trim().length > 0) {\n const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {\n type: 'warning',\n message: i18n.__('Delete a snippet'),\n detail: i18n.__('This work cannot be undone.'),\n buttons: [i18n.__('Confirm'), i18n.__('Cancel')]\n })\n if (dialogIndex === 0) {\n this.deleteSnippetByIndex(index)\n }\n } else {\n this.deleteSnippetByIndex(index)\n }\n }\n }\n\n deleteSnippetByIndex(index) {\n const snippets = this.state.note.snippets.slice()\n snippets.splice(index, 1)\n const note = Object.assign({}, this.state.note, { snippets })\n const snippetIndex =\n this.state.snippetIndex >= snippets.length\n ? snippets.length - 1\n : this.state.snippetIndex\n this.setState({ note, snippetIndex }, () => {\n this.save()\n this.refs['code-' + this.state.snippetIndex].reload()\n\n if (this.visibleTabs.offsetWidth > this.allTabs.scrollWidth) {\n this.moveTabBarBy(0)\n } else {\n const lastTab = this.allTabs.lastChild\n if (\n lastTab.offsetLeft + lastTab.offsetWidth <\n this.visibleTabs.offsetWidth\n ) {\n const width = this.visibleTabs.offsetWidth\n const newLeft = lastTab.offsetLeft + lastTab.offsetWidth - width\n this.moveTabBarBy(newLeft > 0 ? -newLeft : 0)\n } else {\n this.setState(this.getArrowsState())\n }\n }\n })\n }\n\n renameSnippetByIndex(index, name) {\n const snippets = this.state.note.snippets.slice()\n snippets[index].name = name\n const syntax = CodeMirror.findModeByFileName(name.trim())\n const mode = syntax != null ? syntax.name : null\n if (mode != null) {\n snippets[index].mode = mode\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SNIPPET_LANG', {\n name: mode\n })\n }\n this.setState(state => ({\n note: Object.assign(state.note, { snippets: snippets })\n }))\n\n this.setState(\n state => ({\n note: state.note\n }),\n () => {\n this.save()\n }\n )\n }\n\n handleModeOptionClick(index, name) {\n return e => {\n const snippets = this.state.note.snippets.slice()\n snippets[index].mode = name\n this.setState(state => ({\n note: Object.assign(state.note, { snippets: snippets })\n }))\n\n this.setState(\n state => ({\n note: state.note\n }),\n () => {\n this.save()\n }\n )\n\n AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SELECT_LANG', {\n name\n })\n }\n }\n\n handleCodeChange(index) {\n return e => {\n const snippets = this.state.note.snippets.slice()\n snippets[index].content = this.refs['code-' + index].value\n snippets[index].linesHighlighted = e.options.linesHighlighted\n\n this.setState(state => ({\n note: Object.assign(state.note, { snippets: snippets })\n }))\n this.setState(\n state => ({\n note: state.note\n }),\n () => {\n this.save()\n }\n )\n }\n }\n\n handleKeyDown(e) {\n switch (e.keyCode) {\n // tab key\n case 9:\n if (e.ctrlKey && !e.shiftKey) {\n e.preventDefault()\n this.jumpNextTab()\n } else if (e.ctrlKey && e.shiftKey) {\n e.preventDefault()\n this.jumpPrevTab()\n } else if (\n !e.ctrlKey &&\n !e.shiftKey &&\n e.target === this.refs.description\n ) {\n e.preventDefault()\n this.focusEditor()\n }\n break\n // I key\n case 73:\n {\n const isSuper =\n global.process.platform === 'darwin' ? e.metaKey : e.ctrlKey\n if (isSuper) {\n e.preventDefault()\n this.handleInfoButtonClick(e)\n }\n }\n break\n // L key\n case 76:\n {\n const isSuper =\n global.process.platform === 'darwin' ? e.metaKey : e.ctrlKey\n if (isSuper) {\n e.preventDefault()\n this.focus()\n }\n }\n break\n // T key\n case 84:\n {\n const isSuper =\n global.process.platform === 'darwin' ? e.metaKey : e.ctrlKey\n if (isSuper && !e.shiftKey && !e.altKey) {\n e.preventDefault()\n this.addSnippet()\n }\n }\n break\n }\n }\n\n handleModeButtonClick(e, index) {\n const templetes = []\n CodeMirror.modeInfo\n .sort(function(a, b) {\n return a.name.localeCompare(b.name)\n })\n .forEach(mode => {\n templetes.push({\n label: mode.name,\n click: e => this.handleModeOptionClick(index, mode.name)(e)\n })\n })\n context.popup(templetes)\n }\n\n handleIndentTypeButtonClick(e) {\n context.popup([\n {\n label: 'tab',\n click: e => this.handleIndentTypeItemClick(e, 'tab')\n },\n {\n label: 'space',\n click: e => this.handleIndentTypeItemClick(e, 'space')\n }\n ])\n }\n\n handleIndentSizeButtonClick(e) {\n context.popup([\n {\n label: '2',\n click: e => this.handleIndentSizeItemClick(e, 2)\n },\n {\n label: '4',\n click: e => this.handleIndentSizeItemClick(e, 4)\n },\n {\n label: '8',\n click: e => this.handleIndentSizeItemClick(e, 8)\n }\n ])\n }\n\n handleWrapLineButtonClick(e) {\n context.popup([\n {\n label: 'on',\n click: e => this.handleWrapLineItemClick(e, true)\n },\n {\n label: 'off',\n click: e => this.handleWrapLineItemClick(e, false)\n }\n ])\n }\n\n handleIndentSizeItemClick(e, indentSize) {\n const { config, dispatch } = this.props\n const editor = Object.assign({}, config.editor, {\n indentSize\n })\n ConfigManager.set({\n editor\n })\n dispatch({\n type: 'SET_CONFIG',\n config: {\n editor\n }\n })\n }\n\n handleIndentTypeItemClick(e, indentType) {\n const { config, dispatch } = this.props\n const editor = Object.assign({}, config.editor, {\n indentType\n })\n ConfigManager.set({\n editor\n })\n dispatch({\n type: 'SET_CONFIG',\n config: {\n editor\n }\n })\n }\n\n handleWrapLineItemClick(e, lineWrapping) {\n const { config, dispatch } = this.props\n const editor = Object.assign({}, config.editor, {\n lineWrapping\n })\n ConfigManager.set({\n editor\n })\n dispatch({\n type: 'SET_CONFIG',\n config: {\n editor\n }\n })\n }\n\n focus() {\n this.refs.description.focus()\n }\n\n moveToTab(tab) {\n const easeOutCubic = t => --t * t * t + 1\n const startScrollPosition = this.visibleTabs.scrollLeft\n const animationTiming = 300\n const scrollMoreCoeff = 1.4 // introduce coefficient, because we want to scroll a bit further to see next tab\n\n let scrollBy = tab.offsetLeft - startScrollPosition\n\n if (tab.offsetLeft > startScrollPosition) {\n // if tab is on the right side and we want to show the whole tab in visible area,\n // we need to include width of the tab and visible area in the formula\n // ___________________________________________\n // |____|_______|________|________|_show_this_|\n // ↑_____________________↑\n // visible area\n scrollBy += tab.offsetWidth - this.visibleTabs.offsetWidth\n }\n\n let startTime = null\n const scrollAnimation = time => {\n startTime = startTime || time\n const elapsed = (time - startTime) / animationTiming\n\n this.visibleTabs.scrollLeft =\n startScrollPosition + easeOutCubic(elapsed) * scrollBy * scrollMoreCoeff\n if (elapsed < 1) {\n window.requestAnimationFrame(scrollAnimation)\n } else {\n this.setState(this.getArrowsState())\n }\n }\n\n window.requestAnimationFrame(scrollAnimation)\n }\n\n getArrowsState() {\n const allTabs = this.allTabs\n const visibleTabs = this.visibleTabs\n\n const showArrows = visibleTabs.offsetWidth < allTabs.scrollWidth\n const enableRightArrow =\n visibleTabs.scrollLeft !== allTabs.scrollWidth - visibleTabs.offsetWidth\n const enableLeftArrow = visibleTabs.scrollLeft !== 0\n\n return { showArrows, enableRightArrow, enableLeftArrow }\n }\n\n addSnippet() {\n const {\n config: {\n editor: { snippetDefaultLanguage }\n }\n } = this.props\n const { note } = this.state\n\n const defaultLanguage =\n snippetDefaultLanguage === 'Auto Detect' ? null : snippetDefaultLanguage\n\n note.snippets = note.snippets.concat([\n {\n name: '',\n mode: defaultLanguage,\n content: '',\n linesHighlighted: []\n }\n ])\n const snippetIndex = note.snippets.length - 1\n\n this.setState(\n Object.assign(\n {\n note,\n snippetIndex\n },\n this.getArrowsState()\n ),\n () => {\n if (this.state.showArrows) {\n const tabs = this.allTabs.querySelectorAll('div')\n if (tabs) {\n this.moveToTab(tabs[snippetIndex])\n }\n }\n this.refs['tab-' + snippetIndex].startRenaming()\n }\n )\n }\n\n jumpNextTab() {\n this.setState(\n state => ({\n snippetIndex: (state.snippetIndex + 1) % state.note.snippets.length\n }),\n () => {\n this.focusEditor()\n }\n )\n }\n\n jumpPrevTab() {\n this.setState(\n state => ({\n snippetIndex:\n (state.snippetIndex - 1 + state.note.snippets.length) %\n state.note.snippets.length\n }),\n () => {\n this.focusEditor()\n }\n )\n }\n\n focusEditor() {\n this.refs['code-' + this.state.snippetIndex].focus()\n }\n\n handleInfoButtonClick(e) {\n const infoPanel = document.querySelector('.infoPanel')\n if (infoPanel.style)\n infoPanel.style.display =\n infoPanel.style.display === 'none' ? 'inline' : 'none'\n }\n\n showWarning(e, msg) {\n const warningMessage = msg =>\n ({\n 'export-txt': 'Text export',\n 'export-md': 'Markdown export',\n 'export-html': 'HTML export',\n 'export-pdf': 'PDF export',\n print: 'Print'\n }[msg])\n\n dialog.showMessageBox(remote.getCurrentWindow(), {\n type: 'warning',\n message: i18n.__('Sorry!'),\n detail: i18n.__(\n warningMessage(msg) + ' is available only in markdown notes.'\n ),\n buttons: [i18n.__('OK')]\n })\n }\n\n render() {\n const { data, dispatch, config, location } = this.props\n const { note } = this.state\n\n const storageKey = note.storage\n const folderKey = note.folder\n\n const autoDetect = config.editor.snippetDefaultLanguage === 'Auto Detect'\n\n let editorFontSize = parseInt(config.editor.fontSize, 10)\n if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14\n let editorIndentSize = parseInt(config.editor.indentSize, 10)\n if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4\n\n const tabList = note.snippets.map((snippet, index) => {\n const isActive = this.state.snippetIndex === index\n\n return (\n this.handleTabButtonClick(e, index)}\n onDelete={e => this.handleTabDeleteButtonClick(e, index)}\n onRename={name => this.renameSnippetByIndex(index, name)}\n isDeletable={note.snippets.length > 1}\n onDragStart={e => this.handleTabDragStart(e, index)}\n onDrop={e => this.handleTabDrop(e, index)}\n />\n )\n })\n\n const viewList = note.snippets.map((snippet, index) => {\n const isActive = this.state.snippetIndex === index\n return (\n \n {snippet.mode === 'Markdown' ||\n snippet.mode === 'GitHub Flavored Markdown' ? (\n this.handleCodeChange(index)(e)}\n ref={'code-' + index}\n ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}\n storageKey={storageKey}\n />\n ) : (\n this.handleCodeChange(index)(e)}\n ref={'code-' + index}\n enableSmartPaste={config.editor.enableSmartPaste}\n hotkey={config.hotkey}\n autoDetect={autoDetect}\n dateFormatISO8601={config.editor.dateFormatISO8601}\n storageKey={storageKey}\n noteKey={note.key}\n />\n )}\n \n )\n })\n\n const options = []\n data.storageMap.forEach((storage, index) => {\n storage.folders.forEach(folder => {\n options.push({\n storage: storage,\n folder: folder\n })\n })\n })\n\n const currentOption = _.find(\n options,\n option =>\n option.storage.key === storageKey && option.folder.key === folderKey\n )\n\n // currentOption may be undefined\n const storageName = _.get(currentOption, 'storage.name') || ''\n const folderName = _.get(currentOption, 'folder.name') || ''\n\n const trashTopBar = (\n
\n
\n this.handleUndoButtonClick(e)} />\n
\n
\n this.handleTrashButtonClick(e)}\n />\n this.handleInfoButtonClick(e)} />\n \n
\n
\n )\n\n const detailTopBar = (\n
\n
\n
\n this.handleFolderChange(e)}\n />\n
\n\n this.handleChange(e)}\n coloredTags={config.coloredTags}\n />\n
\n
\n this.handleStarButtonClick(e)}\n isActive={note.isStarred}\n />\n\n this.handleFullScreenButton(e)} />\n\n this.handleTrashButtonClick(e)} />\n\n this.handleInfoButtonClick(e)} />\n\n \n
\n
\n )\n\n return (\n this.handleKeyDown(e)}\n >\n {location.pathname === '/trashed' ? trashTopBar : detailTopBar}\n\n
\n
\n this.handleChange(e)}\n />\n
\n
\n
\n
\n