elements due
+ // to https://bugs.webkit.org/show_bug.cgi?id=142737.
+ a:not([href]) {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ // Link Colors
+ .absent {
+ color: #c00;
+ }
+
+ .anchor {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ padding-right: 6px;
+ padding-left: 30px;
+ margin-left: -30px;
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ // Headings
+ h1, h2, h3, h4, h5, h6 {
+ position: relative;
+ margin-top: 1em;
+ margin-bottom: @margin;
+ font-weight: bold;
+ line-height: 1.4;
+
+ .octicon-link {
+ display: none;
+ color: #000;
+ vertical-align: middle;
+ }
+
+ &:hover .anchor {
+ padding-left: 8px;
+ margin-left: -30px;
+ text-decoration: none;
+
+ .octicon-link {
+ display: inline-block;
+ }
+ }
+
+ tt,
+ code {
+ font-size: inherit;
+ }
+ }
+
+ h1 {
+ padding-bottom: 0.3em;
+ font-size: 2.25em;
+ line-height: 1.2;
+ border-bottom: 1px solid #eee;
+
+ .anchor {
+ line-height: 1;
+ }
+ }
+
+ h2 {
+ padding-bottom: 0.3em;
+ font-size: 1.75em;
+ line-height: 1.225;
+ border-bottom: 1px solid #eee;
+
+ .anchor {
+ line-height: 1;
+ }
+ }
+
+ h3 {
+ font-size: 1.5em;
+ line-height: 1.43;
+
+ .anchor {
+ line-height: 1.2;
+ }
+ }
+
+ h4 {
+ font-size: 1.25em;
+
+ .anchor {
+ line-height: 1.2;
+ }
+ }
+
+ h5 {
+ font-size: 1em;
+
+ .anchor {
+ line-height: 1.1;
+ }
+ }
+
+ h6 {
+ font-size: 1em;
+ color: #777;
+
+ .anchor {
+ line-height: 1.1;
+ }
+ }
+
+ p,
+ blockquote,
+ ul, ol, dl,
+ table,
+ pre {
+ margin-top: 0;
+ margin-bottom: @margin;
+ }
+
+ hr {
+ height: 4px;
+ padding: 0;
+ margin: @margin 0;
+ background-color: #e7e7e7;
+ border: 0 none;
+ }
+
+ // Lists, Blockquotes & Such
+ ul,
+ ol {
+ padding-left: 2em;
+
+ &.no-list {
+ padding: 0;
+ list-style-type: none;
+ }
+ }
+
+ // Did someone complain about list spacing? Encourage them
+ // to create the spacing with their markdown formatting.
+ // List behavior should be controled by the markup, not the css.
+ //
+ // For lists with padding between items, use blank
+ // lines between items. This will generate paragraphs with
+ // padding to space things out.
+ //
+ // - item
+ //
+ // - item
+ //
+ // - item
+ //
+ // For list without padding, don't use blank lines.
+ //
+ // - item
+ // - item
+ // - item
+ //
+ // Modifying the css to emulate these behaviors merely brakes
+ // one case in the process of solving another. Don't change
+ // this unless it's really really a bug.
+ ul ul,
+ ul ol,
+ ol ol,
+ ol ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ li > p {
+ margin-top: @margin;
+ }
+
+ dl {
+ padding: 0;
+ }
+
+ dl dt {
+ padding: 0;
+ margin-top: @margin;
+ font-size: 1em;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ dl dd {
+ padding: 0 @margin;
+ margin-bottom: @margin;
+ }
+
+ blockquote {
+ padding: 0 15px;
+ color: #777;
+ border-left: 4px solid #ddd;
+
+ > :first-child {
+ margin-top: 0;
+ }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // Tables
+ table {
+ display: block;
+ width: 100%;
+ overflow: auto;
+ word-break: normal;
+ word-break: keep-all; // For Firefox to horizontally scroll wider tables.
+
+ th {
+ font-weight: bold;
+ }
+
+ th, td {
+ padding: 6px 13px;
+ border: 1px solid #ddd;
+ }
+
+ tr {
+ background-color: #fff;
+ border-top: 1px solid #ccc;
+
+ &:nth-child(2n) {
+ background-color: #f8f8f8;
+ }
+ }
+ }
+
+ // Images & Stuff
+ img {
+ max-width: 100%;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ .emoji {
+ max-width: none;
+ }
+
+ // Gollum Image Tags
+
+ // Framed
+ span.frame {
+ display: block;
+ overflow: hidden;
+
+ & > span {
+ display: block;
+ float: left;
+ width: auto;
+ padding: 7px;
+ margin: 13px 0 0;
+ overflow: hidden;
+ border: 1px solid #ddd;
+ }
+
+ span img {
+ display: block;
+ float: left;
+ }
+
+ span span {
+ display: block;
+ padding: 5px 0 0;
+ clear: both;
+ color: #333;
+ }
+ }
+
+ span.align-center {
+ display: block;
+ overflow: hidden;
+ clear: both;
+
+ & > span {
+ display: block;
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: center;
+ }
+
+ span img {
+ margin: 0 auto;
+ text-align: center;
+ }
+ }
+
+ span.align-right {
+ display: block;
+ overflow: hidden;
+ clear: both;
+
+ & > span {
+ display: block;
+ margin: 13px 0 0;
+ overflow: hidden;
+ text-align: right;
+ }
+
+ span img {
+ margin: 0;
+ text-align: right;
+ }
+ }
+
+ span.float-left {
+ display: block;
+ float: left;
+ margin-right: 13px;
+ overflow: hidden;
+
+ span {
+ margin: 13px 0 0;
+ }
+ }
+
+ span.float-right {
+ display: block;
+ float: right;
+ margin-left: 13px;
+ overflow: hidden;
+
+ & > span {
+ display: block;
+ margin: 13px auto 0;
+ overflow: hidden;
+ text-align: right;
+ }
+ }
+
+ // Inline code snippets
+ code,
+ tt {
+ padding: 0;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ margin: 0;
+ font-size: 85%;
+ background-color: rgba(0,0,0,0.04);
+ border-radius: 3px; // don't add padding, gives scrollbars
+
+ &:before,
+ &:after {
+ letter-spacing: -0.2em; // this creates padding
+ content: "\00a0";
+ }
+
+ br { display: none; }
+ }
+
+ del code { text-decoration: inherit; }
+
+ // Code tags within code blocks (s)
+ pre > code {
+ padding: 0;
+ margin: 0;
+ font-size: 100%;
+ word-break: normal;
+ white-space: pre;
+ background: transparent;
+ border: 0;
+ }
+
+ .highlight {
+ margin-bottom: @margin;
+ }
+
+ .highlight pre,
+ pre {
+ padding: @margin;
+ overflow: auto;
+ font-size: 85%;
+ line-height: 1.45;
+ background-color: #f7f7f7;
+ border-radius: 3px;
+ }
+
+ .highlight pre {
+ margin-bottom: 0;
+ word-break: normal;
+ }
+
+ pre {
+ word-wrap: normal;
+ }
+
+ pre code,
+ pre tt {
+ display: inline;
+ max-width: initial;
+ padding: 0;
+ margin: 0;
+ overflow: initial;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: transparent;
+ border: 0;
+
+ &:before,
+ &:after {
+ content: normal;
+ }
+ }
+
+ kbd {
+ display: inline-block;
+ padding: 3px 5px;
+ font-size: 11px;
+ line-height: 10px;
+ color: #555;
+ vertical-align: middle;
+ background-color: #fcfcfc;
+ border: solid 1px #ccc;
+ border-bottom-color: #bbb;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 #bbb;
+ }
+}
diff --git a/packages/markdown-preview/keymaps/markdown-preview.cson b/packages/markdown-preview/keymaps/markdown-preview.cson
new file mode 100644
index 0000000000..79a9fa3eac
--- /dev/null
+++ b/packages/markdown-preview/keymaps/markdown-preview.cson
@@ -0,0 +1,18 @@
+'atom-text-editor':
+ 'ctrl-shift-m': 'markdown-preview:toggle'
+
+'.platform-darwin .markdown-preview':
+ 'cmd-a': 'markdown-preview:select-all'
+ 'cmd-+': 'markdown-preview:zoom-in'
+ 'cmd-=': 'markdown-preview:zoom-in'
+ 'cmd--': 'markdown-preview:zoom-out'
+ 'cmd-_': 'markdown-preview:zoom-out'
+ 'cmd-0': 'markdown-preview:reset-zoom'
+
+'.platform-win32 .markdown-preview, .platform-linux .markdown-preview':
+ 'ctrl-a': 'markdown-preview:select-all'
+ 'ctrl-+': 'markdown-preview:zoom-in'
+ 'ctrl-=': 'markdown-preview:zoom-in'
+ 'ctrl--': 'markdown-preview:zoom-out'
+ 'ctrl-_': 'markdown-preview:zoom-out'
+ 'ctrl-0': 'markdown-preview:reset-zoom'
diff --git a/packages/markdown-preview/lib/extension-helper.js b/packages/markdown-preview/lib/extension-helper.js
new file mode 100644
index 0000000000..a2a464ecad
--- /dev/null
+++ b/packages/markdown-preview/lib/extension-helper.js
@@ -0,0 +1,50 @@
+const scopesByFenceName = {
+ bash: 'source.shell',
+ sh: 'source.shell',
+ powershell: 'source.powershell',
+ ps1: 'source.powershell',
+ c: 'source.c',
+ 'c++': 'source.cpp',
+ cpp: 'source.cpp',
+ coffee: 'source.coffee',
+ 'coffee-script': 'source.coffee',
+ coffeescript: 'source.coffee',
+ cs: 'source.cs',
+ csharp: 'source.cs',
+ css: 'source.css',
+ sass: 'source.sass',
+ scss: 'source.css.scss',
+ erlang: 'source.erl',
+ go: 'source.go',
+ html: 'text.html.basic',
+ java: 'source.java',
+ javascript: 'source.js',
+ js: 'source.js',
+ json: 'source.json',
+ less: 'source.less',
+ mustache: 'text.html.mustache',
+ objc: 'source.objc',
+ 'objective-c': 'source.objc',
+ php: 'text.html.php',
+ py: 'source.python',
+ python: 'source.python',
+ rb: 'source.ruby',
+ ruby: 'source.ruby',
+ text: 'text.plain',
+ toml: 'source.toml',
+ ts: 'source.ts',
+ typescript: 'source.ts',
+ xml: 'text.xml',
+ yaml: 'source.yaml',
+ yml: 'source.yaml'
+}
+
+module.exports = {
+ scopeForFenceName (fenceName) {
+ fenceName = fenceName.toLowerCase()
+
+ return scopesByFenceName.hasOwnProperty(fenceName)
+ ? scopesByFenceName[fenceName]
+ : `source.${fenceName}`
+ }
+}
diff --git a/packages/markdown-preview/lib/main.js b/packages/markdown-preview/lib/main.js
new file mode 100644
index 0000000000..0b87479b74
--- /dev/null
+++ b/packages/markdown-preview/lib/main.js
@@ -0,0 +1,228 @@
+const fs = require('fs-plus')
+const { CompositeDisposable } = require('atom')
+
+let MarkdownPreviewView = null
+let renderer = null
+
+const isMarkdownPreviewView = function (object) {
+ if (MarkdownPreviewView == null) {
+ MarkdownPreviewView = require('./markdown-preview-view')
+ }
+ return object instanceof MarkdownPreviewView
+}
+
+module.exports = {
+ activate () {
+ this.disposables = new CompositeDisposable()
+ this.commandSubscriptions = new CompositeDisposable()
+
+ this.disposables.add(
+ atom.config.observe('markdown-preview.grammars', grammars => {
+ this.commandSubscriptions.dispose()
+ this.commandSubscriptions = new CompositeDisposable()
+
+ if (grammars == null) {
+ grammars = []
+ }
+
+ for (const grammar of grammars.map(grammar =>
+ grammar.replace(/\./g, ' ')
+ )) {
+ this.commandSubscriptions.add(
+ atom.commands.add(`atom-text-editor[data-grammar='${grammar}']`, {
+ 'markdown-preview:toggle': () => this.toggle(),
+ 'markdown-preview:copy-html': {
+ displayName: 'Markdown Preview: Copy HTML',
+ didDispatch: () => this.copyHTML()
+ },
+ 'markdown-preview:save-as-html': {
+ displayName: 'Markdown Preview: Save as HTML',
+ didDispatch: () => this.saveAsHTML()
+ },
+ 'markdown-preview:toggle-break-on-single-newline': () => {
+ const keyPath = 'markdown-preview.breakOnSingleNewline'
+ atom.config.set(keyPath, !atom.config.get(keyPath))
+ },
+ 'markdown-preview:toggle-github-style': () => {
+ const keyPath = 'markdown-preview.useGitHubStyle'
+ atom.config.set(keyPath, !atom.config.get(keyPath))
+ }
+ })
+ )
+ }
+ })
+ )
+
+ const previewFile = this.previewFile.bind(this)
+ for (const extension of [
+ 'markdown',
+ 'md',
+ 'mdown',
+ 'mkd',
+ 'mkdown',
+ 'ron',
+ 'txt'
+ ]) {
+ this.disposables.add(
+ atom.commands.add(
+ `.tree-view .file .name[data-name$=\\.${extension}]`,
+ 'markdown-preview:preview-file',
+ previewFile
+ )
+ )
+ }
+
+ this.disposables.add(
+ atom.workspace.addOpener(uriToOpen => {
+ let [protocol, path] = uriToOpen.split('://')
+ if (protocol !== 'markdown-preview') {
+ return
+ }
+
+ try {
+ path = decodeURI(path)
+ } catch (error) {
+ return
+ }
+
+ if (path.startsWith('editor/')) {
+ return this.createMarkdownPreviewView({ editorId: path.substring(7) })
+ } else {
+ return this.createMarkdownPreviewView({ filePath: path })
+ }
+ })
+ )
+ },
+
+ deactivate () {
+ this.disposables.dispose()
+ this.commandSubscriptions.dispose()
+ },
+
+ createMarkdownPreviewView (state) {
+ if (state.editorId || fs.isFileSync(state.filePath)) {
+ if (MarkdownPreviewView == null) {
+ MarkdownPreviewView = require('./markdown-preview-view')
+ }
+ return new MarkdownPreviewView(state)
+ }
+ },
+
+ toggle () {
+ if (isMarkdownPreviewView(atom.workspace.getActivePaneItem())) {
+ atom.workspace.destroyActivePaneItem()
+ return
+ }
+
+ const editor = atom.workspace.getActiveTextEditor()
+ if (editor == null) {
+ return
+ }
+
+ const grammars = atom.config.get('markdown-preview.grammars') || []
+ if (!grammars.includes(editor.getGrammar().scopeName)) {
+ return
+ }
+
+ if (!this.removePreviewForEditor(editor)) {
+ return this.addPreviewForEditor(editor)
+ }
+ },
+
+ uriForEditor (editor) {
+ return `markdown-preview://editor/${editor.id}`
+ },
+
+ removePreviewForEditor (editor) {
+ const uri = this.uriForEditor(editor)
+ const previewPane = atom.workspace.paneForURI(uri)
+ if (previewPane != null) {
+ previewPane.destroyItem(previewPane.itemForURI(uri))
+ return true
+ } else {
+ return false
+ }
+ },
+
+ addPreviewForEditor (editor) {
+ const uri = this.uriForEditor(editor)
+ const previousActivePane = atom.workspace.getActivePane()
+ const options = { searchAllPanes: true }
+ if (atom.config.get('markdown-preview.openPreviewInSplitPane')) {
+ options.split = 'right'
+ }
+
+ return atom.workspace
+ .open(uri, options)
+ .then(function (markdownPreviewView) {
+ if (isMarkdownPreviewView(markdownPreviewView)) {
+ previousActivePane.activate()
+ }
+ })
+ },
+
+ previewFile ({ target }) {
+ const filePath = target.dataset.path
+ if (!filePath) {
+ return
+ }
+
+ for (const editor of atom.workspace.getTextEditors()) {
+ if (editor.getPath() === filePath) {
+ return this.addPreviewForEditor(editor)
+ }
+ }
+
+ atom.workspace.open(`markdown-preview://${encodeURI(filePath)}`, {
+ searchAllPanes: true
+ })
+ },
+
+ async copyHTML () {
+ const editor = atom.workspace.getActiveTextEditor()
+ if (editor == null) {
+ return
+ }
+
+ if (renderer == null) {
+ renderer = require('./renderer')
+ }
+ const text = editor.getSelectedText() || editor.getText()
+ const html = await renderer.toHTML(
+ text,
+ editor.getPath(),
+ editor.getGrammar()
+ )
+
+ atom.clipboard.write(html)
+ },
+
+ saveAsHTML () {
+ const activePaneItem = atom.workspace.getActivePaneItem()
+ if (isMarkdownPreviewView(activePaneItem)) {
+ atom.workspace.getActivePane().saveItemAs(activePaneItem)
+ return
+ }
+
+ const editor = atom.workspace.getActiveTextEditor()
+ if (editor == null) {
+ return
+ }
+
+ const grammars = atom.config.get('markdown-preview.grammars') || []
+ if (!grammars.includes(editor.getGrammar().scopeName)) {
+ return
+ }
+
+ const uri = this.uriForEditor(editor)
+ const markdownPreviewPane = atom.workspace.paneForURI(uri)
+ const markdownPreviewPaneItem =
+ markdownPreviewPane != null
+ ? markdownPreviewPane.itemForURI(uri)
+ : undefined
+
+ if (isMarkdownPreviewView(markdownPreviewPaneItem)) {
+ return markdownPreviewPane.saveItemAs(markdownPreviewPaneItem)
+ }
+ }
+}
diff --git a/packages/markdown-preview/lib/markdown-preview-view.js b/packages/markdown-preview/lib/markdown-preview-view.js
new file mode 100644
index 0000000000..40ee87b982
--- /dev/null
+++ b/packages/markdown-preview/lib/markdown-preview-view.js
@@ -0,0 +1,513 @@
+const path = require('path')
+
+const { Emitter, Disposable, CompositeDisposable, File } = require('atom')
+const _ = require('underscore-plus')
+const fs = require('fs-plus')
+
+const renderer = require('./renderer')
+
+module.exports = class MarkdownPreviewView {
+ static deserialize (params) {
+ return new MarkdownPreviewView(params)
+ }
+
+ constructor ({ editorId, filePath }) {
+ this.editorId = editorId
+ this.filePath = filePath
+ this.element = document.createElement('div')
+ this.element.classList.add('markdown-preview')
+ this.element.tabIndex = -1
+ this.emitter = new Emitter()
+ this.loaded = false
+ this.disposables = new CompositeDisposable()
+ this.registerScrollCommands()
+ if (this.editorId != null) {
+ this.resolveEditor(this.editorId)
+ } else if (atom.packages.hasActivatedInitialPackages()) {
+ this.subscribeToFilePath(this.filePath)
+ } else {
+ this.disposables.add(
+ atom.packages.onDidActivateInitialPackages(() => {
+ this.subscribeToFilePath(this.filePath)
+ })
+ )
+ }
+ }
+
+ serialize () {
+ return {
+ deserializer: 'MarkdownPreviewView',
+ filePath: this.getPath() != null ? this.getPath() : this.filePath,
+ editorId: this.editorId
+ }
+ }
+
+ copy () {
+ return new MarkdownPreviewView({
+ editorId: this.editorId,
+ filePath: this.getPath() != null ? this.getPath() : this.filePath
+ })
+ }
+
+ destroy () {
+ this.disposables.dispose()
+ this.element.remove()
+ }
+
+ registerScrollCommands () {
+ this.disposables.add(
+ atom.commands.add(this.element, {
+ 'core:move-up': () => {
+ this.element.scrollTop -= document.body.offsetHeight / 20
+ },
+ 'core:move-down': () => {
+ this.element.scrollTop += document.body.offsetHeight / 20
+ },
+ 'core:page-up': () => {
+ this.element.scrollTop -= this.element.offsetHeight
+ },
+ 'core:page-down': () => {
+ this.element.scrollTop += this.element.offsetHeight
+ },
+ 'core:move-to-top': () => {
+ this.element.scrollTop = 0
+ },
+ 'core:move-to-bottom': () => {
+ this.element.scrollTop = this.element.scrollHeight
+ }
+ })
+ )
+ }
+
+ onDidChangeTitle (callback) {
+ return this.emitter.on('did-change-title', callback)
+ }
+
+ onDidChangeModified (callback) {
+ // No op to suppress deprecation warning
+ return new Disposable()
+ }
+
+ onDidChangeMarkdown (callback) {
+ return this.emitter.on('did-change-markdown', callback)
+ }
+
+ subscribeToFilePath (filePath) {
+ this.file = new File(filePath)
+ this.emitter.emit('did-change-title')
+ this.disposables.add(
+ this.file.onDidRename(() => this.emitter.emit('did-change-title'))
+ )
+ this.handleEvents()
+ return this.renderMarkdown()
+ }
+
+ resolveEditor (editorId) {
+ const resolve = () => {
+ this.editor = this.editorForId(editorId)
+
+ if (this.editor != null) {
+ this.emitter.emit('did-change-title')
+ this.disposables.add(
+ this.editor.onDidDestroy(() =>
+ this.subscribeToFilePath(this.getPath())
+ )
+ )
+ this.handleEvents()
+ this.renderMarkdown()
+ } else {
+ this.subscribeToFilePath(this.filePath)
+ }
+ }
+
+ if (atom.packages.hasActivatedInitialPackages()) {
+ resolve()
+ } else {
+ this.disposables.add(atom.packages.onDidActivateInitialPackages(resolve))
+ }
+ }
+
+ editorForId (editorId) {
+ for (const editor of atom.workspace.getTextEditors()) {
+ if (editor.id != null && editor.id.toString() === editorId.toString()) {
+ return editor
+ }
+ }
+ return null
+ }
+
+ handleEvents () {
+ const lazyRenderMarkdown = _.debounce(() => this.renderMarkdown(), 250)
+ this.disposables.add(
+ atom.grammars.onDidAddGrammar(() => lazyRenderMarkdown())
+ )
+ if (typeof atom.grammars.onDidRemoveGrammar === 'function') {
+ this.disposables.add(
+ atom.grammars.onDidRemoveGrammar(() => lazyRenderMarkdown())
+ )
+ } else {
+ // TODO: Remove onDidUpdateGrammar hook once onDidRemoveGrammar is released
+ this.disposables.add(
+ atom.grammars.onDidUpdateGrammar(() => lazyRenderMarkdown())
+ )
+ }
+
+ atom.commands.add(this.element, {
+ 'core:copy': event => {
+ event.stopPropagation()
+ return this.copyToClipboard()
+ },
+ 'markdown-preview:select-all': () => {
+ this.selectAll()
+ },
+ 'markdown-preview:zoom-in': () => {
+ const zoomLevel = parseFloat(getComputedStyle(this.element).zoom)
+ this.element.style.zoom = zoomLevel + 0.1
+ },
+ 'markdown-preview:zoom-out': () => {
+ const zoomLevel = parseFloat(getComputedStyle(this.element).zoom)
+ this.element.style.zoom = zoomLevel - 0.1
+ },
+ 'markdown-preview:reset-zoom': () => {
+ this.element.style.zoom = 1
+ },
+ 'markdown-preview:toggle-break-on-single-newline' () {
+ const keyPath = 'markdown-preview.breakOnSingleNewline'
+ atom.config.set(keyPath, !atom.config.get(keyPath))
+ },
+ 'markdown-preview:toggle-github-style' () {
+ const keyPath = 'markdown-preview.useGitHubStyle'
+ atom.config.set(keyPath, !atom.config.get(keyPath))
+ }
+ })
+
+ const changeHandler = () => {
+ this.renderMarkdown()
+
+ const pane = atom.workspace.paneForItem(this)
+ if (pane != null && pane !== atom.workspace.getActivePane()) {
+ pane.activateItem(this)
+ }
+ }
+
+ if (this.file) {
+ this.disposables.add(this.file.onDidChange(changeHandler))
+ } else if (this.editor) {
+ this.disposables.add(
+ this.editor.getBuffer().onDidStopChanging(function () {
+ if (atom.config.get('markdown-preview.liveUpdate')) {
+ changeHandler()
+ }
+ })
+ )
+ this.disposables.add(
+ this.editor.onDidChangePath(() => this.emitter.emit('did-change-title'))
+ )
+ this.disposables.add(
+ this.editor.getBuffer().onDidSave(function () {
+ if (!atom.config.get('markdown-preview.liveUpdate')) {
+ changeHandler()
+ }
+ })
+ )
+ this.disposables.add(
+ this.editor.getBuffer().onDidReload(function () {
+ if (!atom.config.get('markdown-preview.liveUpdate')) {
+ changeHandler()
+ }
+ })
+ )
+ }
+
+ this.disposables.add(
+ atom.config.onDidChange(
+ 'markdown-preview.breakOnSingleNewline',
+ changeHandler
+ )
+ )
+
+ this.disposables.add(
+ atom.config.observe('markdown-preview.useGitHubStyle', useGitHubStyle => {
+ if (useGitHubStyle) {
+ this.element.setAttribute('data-use-github-style', '')
+ } else {
+ this.element.removeAttribute('data-use-github-style')
+ }
+ })
+ )
+
+ document.onselectionchange = () => {
+ const selection = window.getSelection()
+ const selectedNode = selection.baseNode
+ if (
+ selectedNode === null ||
+ this.element === selectedNode ||
+ this.element.contains(selectedNode)
+ ) {
+ if (selection.isCollapsed) {
+ this.element.classList.remove('has-selection')
+ } else {
+ this.element.classList.add('has-selection')
+ }
+ }
+ }
+ }
+
+ renderMarkdown () {
+ if (!this.loaded) {
+ this.showLoading()
+ }
+ return this.getMarkdownSource()
+ .then(source => {
+ if (source != null) {
+ return this.renderMarkdownText(source)
+ }
+ })
+ .catch(reason => this.showError({ message: reason }))
+ }
+
+ getMarkdownSource () {
+ if (this.file && this.file.getPath()) {
+ return this.file
+ .read()
+ .then(source => {
+ if (source === null) {
+ return Promise.reject(
+ new Error(`${this.file.getBaseName()} could not be found`)
+ )
+ } else {
+ return Promise.resolve(source)
+ }
+ })
+ .catch(reason => Promise.reject(reason))
+ } else if (this.editor != null) {
+ return Promise.resolve(this.editor.getText())
+ } else {
+ return Promise.reject(new Error('No editor found'))
+ }
+ }
+
+ async getHTML () {
+ const source = await this.getMarkdownSource()
+
+ if (source == null) {
+ return
+ }
+
+ return renderer.toHTML(source, this.getPath(), this.getGrammar())
+ }
+
+ async renderMarkdownText (text) {
+ const { scrollTop } = this.element
+
+ try {
+ const domFragment = await renderer.toDOMFragment(
+ text,
+ this.getPath(),
+ this.getGrammar()
+ )
+
+ this.loading = false
+ this.loaded = true
+ this.element.textContent = ''
+ this.element.appendChild(domFragment)
+ this.emitter.emit('did-change-markdown')
+ this.element.scrollTop = scrollTop
+ } catch (error) {
+ this.showError(error)
+ }
+ }
+
+ getTitle () {
+ if (this.file != null && this.getPath() != null) {
+ return `${path.basename(this.getPath())} Preview`
+ } else if (this.editor != null) {
+ return `${this.editor.getTitle()} Preview`
+ } else {
+ return 'Markdown Preview'
+ }
+ }
+
+ getIconName () {
+ return 'markdown'
+ }
+
+ getURI () {
+ if (this.file != null) {
+ return `markdown-preview://${this.getPath()}`
+ } else {
+ return `markdown-preview://editor/${this.editorId}`
+ }
+ }
+
+ getPath () {
+ if (this.file != null) {
+ return this.file.getPath()
+ } else if (this.editor != null) {
+ return this.editor.getPath()
+ }
+ }
+
+ getGrammar () {
+ return this.editor != null ? this.editor.getGrammar() : undefined
+ }
+
+ getDocumentStyleSheets () {
+ // This function exists so we can stub it
+ return document.styleSheets
+ }
+
+ getTextEditorStyles () {
+ const textEditorStyles = document.createElement('atom-styles')
+ textEditorStyles.initialize(atom.styles)
+ textEditorStyles.setAttribute('context', 'atom-text-editor')
+ document.body.appendChild(textEditorStyles)
+
+ // Extract style elements content
+ return Array.prototype.slice
+ .apply(textEditorStyles.childNodes)
+ .map(styleElement => styleElement.innerText)
+ }
+
+ getMarkdownPreviewCSS () {
+ const markdownPreviewRules = []
+ const ruleRegExp = /\.markdown-preview/
+ const cssUrlRegExp = /url\(atom:\/\/markdown-preview\/assets\/(.*)\)/
+
+ for (const stylesheet of this.getDocumentStyleSheets()) {
+ if (stylesheet.rules != null) {
+ for (const rule of stylesheet.rules) {
+ // We only need `.markdown-review` css
+ if (rule.selectorText && rule.selectorText.match(ruleRegExp)) {
+ markdownPreviewRules.push(rule.cssText)
+ }
+ }
+ }
+ }
+
+ return markdownPreviewRules
+ .concat(this.getTextEditorStyles())
+ .join('\n')
+ .replace(/atom-text-editor/g, 'pre.editor-colors')
+ .replace(/:host/g, '.host') // Remove shadow-dom :host selector causing problem on FF
+ .replace(cssUrlRegExp, function (match, assetsName, offset, string) {
+ // base64 encode assets
+ const assetPath = path.join(__dirname, '../assets', assetsName)
+ const originalData = fs.readFileSync(assetPath, 'binary')
+ const base64Data = Buffer.from(originalData, 'binary').toString(
+ 'base64'
+ )
+ return `url('data:image/jpeg;base64,${base64Data}')`
+ })
+ }
+
+ showError (result) {
+ this.element.textContent = ''
+ const h2 = document.createElement('h2')
+ h2.textContent = 'Previewing Markdown Failed'
+ this.element.appendChild(h2)
+ if (result) {
+ const h3 = document.createElement('h3')
+ h3.textContent = result.message
+ this.element.appendChild(h3)
+ }
+ }
+
+ showLoading () {
+ this.loading = true
+ this.element.textContent = ''
+ const div = document.createElement('div')
+ div.classList.add('markdown-spinner')
+ div.textContent = 'Loading Markdown\u2026'
+ this.element.appendChild(div)
+ }
+
+ selectAll () {
+ if (this.loading) {
+ return
+ }
+
+ const selection = window.getSelection()
+ selection.removeAllRanges()
+ const range = document.createRange()
+ range.selectNodeContents(this.element)
+ selection.addRange(range)
+ }
+
+ async copyToClipboard () {
+ if (this.loading) {
+ return
+ }
+
+ const selection = window.getSelection()
+ const selectedText = selection.toString()
+ const selectedNode = selection.baseNode
+
+ // Use default copy event handler if there is selected text inside this view
+ if (
+ selectedText &&
+ selectedNode != null &&
+ (this.element === selectedNode || this.element.contains(selectedNode))
+ ) {
+ atom.clipboard.write(selectedText)
+ } else {
+ try {
+ const html = await this.getHTML()
+
+ atom.clipboard.write(html)
+ } catch (error) {
+ atom.notifications.addError('Copying Markdown as HTML failed', {
+ dismissable: true,
+ detail: error.message
+ })
+ }
+ }
+ }
+
+ getSaveDialogOptions () {
+ let defaultPath = this.getPath()
+ if (defaultPath) {
+ defaultPath += '.html'
+ } else {
+ let projectPath
+ defaultPath = 'untitled.md.html'
+ if ((projectPath = atom.project.getPaths()[0])) {
+ defaultPath = path.join(projectPath, defaultPath)
+ }
+ }
+
+ return { defaultPath }
+ }
+
+ async saveAs (htmlFilePath) {
+ if (this.loading) {
+ atom.notifications.addWarning(
+ 'Please wait until the Markdown Preview has finished loading before saving'
+ )
+ return
+ }
+
+ const filePath = this.getPath()
+ let title = 'Markdown to HTML'
+ if (filePath) {
+ title = path.parse(filePath).name
+ }
+
+ const htmlBody = await this.getHTML()
+
+ const html =
+ `\
+
+
+
+ ${title}
+
+
+ ${htmlBody}
+` + '\n' // Ensure trailing newline
+
+ fs.writeFileSync(htmlFilePath, html)
+ return atom.workspace.open(htmlFilePath)
+ }
+}
diff --git a/packages/markdown-preview/lib/renderer.js b/packages/markdown-preview/lib/renderer.js
new file mode 100644
index 0000000000..ecc9139d91
--- /dev/null
+++ b/packages/markdown-preview/lib/renderer.js
@@ -0,0 +1,243 @@
+const { TextEditor } = require('atom')
+const path = require('path')
+const createDOMPurify = require('dompurify')
+const emoji = require('emoji-images')
+const fs = require('fs-plus')
+let marked = null // Defer until used
+let renderer = null
+let cheerio = null
+let yamlFrontMatter = null
+
+const { scopeForFenceName } = require('./extension-helper')
+const { resourcePath } = atom.getLoadSettings()
+const packagePath = path.dirname(__dirname)
+
+const emojiFolder = path.join(
+ path.dirname(require.resolve('emoji-images')),
+ 'pngs'
+)
+
+exports.toDOMFragment = async function (text, filePath, grammar, callback) {
+ if (text == null) {
+ text = ''
+ }
+
+ const domFragment = render(text, filePath)
+
+ await highlightCodeBlocks(domFragment, grammar, makeAtomEditorNonInteractive)
+
+ return domFragment
+}
+
+exports.toHTML = async function (text, filePath, grammar) {
+ if (text == null) {
+ text = ''
+ }
+
+ const domFragment = render(text, filePath)
+ const div = document.createElement('div')
+
+ div.appendChild(domFragment)
+ document.body.appendChild(div)
+
+ await highlightCodeBlocks(div, grammar, convertAtomEditorToStandardElement)
+
+ const result = div.innerHTML
+ div.remove()
+
+ return result
+}
+
+var render = function (text, filePath) {
+ if (marked == null || yamlFrontMatter == null || cheerio == null) {
+ marked = require('marked')
+ yamlFrontMatter = require('yaml-front-matter')
+ cheerio = require('cheerio')
+
+ renderer = new marked.Renderer()
+ renderer.listitem = function (text, isTask) {
+ const listAttributes = isTask ? ' class="task-list-item"' : ''
+
+ return ` ${text} \n`
+ }
+ }
+
+ marked.setOptions({
+ sanitize: false,
+ breaks: atom.config.get('markdown-preview.breakOnSingleNewline'),
+ renderer
+ })
+
+ const { __content, ...vars } = yamlFrontMatter.loadFront(text)
+
+ let html = marked(renderYamlTable(vars) + __content)
+
+ // emoji-images is too aggressive, so replace images in monospace tags with the actual emoji text.
+ const $ = cheerio.load(emoji(html, emojiFolder, 20))
+ $('pre img').each((index, element) =>
+ $(element).replaceWith($(element).attr('title'))
+ )
+ $('code img').each((index, element) =>
+ $(element).replaceWith($(element).attr('title'))
+ )
+
+ html = $.html()
+
+ html = createDOMPurify().sanitize(html, {
+ ALLOW_UNKNOWN_PROTOCOLS: atom.config.get(
+ 'markdown-preview.allowUnsafeProtocols'
+ )
+ })
+
+ const template = document.createElement('template')
+ template.innerHTML = html.trim()
+ const fragment = template.content.cloneNode(true)
+
+ resolveImagePaths(fragment, filePath)
+
+ return fragment
+}
+
+function renderYamlTable (variables) {
+ const entries = Object.entries(variables)
+
+ if (!entries.length) {
+ return ''
+ }
+
+ const markdownRows = [
+ entries.map(entry => entry[0]),
+ entries.map(entry => '--'),
+ entries.map(entry => entry[1])
+ ]
+
+ return (
+ markdownRows.map(row => '| ' + row.join(' | ') + ' |').join('\n') + '\n'
+ )
+}
+
+var resolveImagePaths = function (element, filePath) {
+ const [rootDirectory] = atom.project.relativizePath(filePath)
+
+ const result = []
+ for (const img of element.querySelectorAll('img')) {
+ // We use the raw attribute instead of the .src property because the value
+ // of the property seems to be transformed in some cases.
+ let src
+
+ if ((src = img.getAttribute('src'))) {
+ if (src.match(/^(https?|atom):\/\//)) {
+ continue
+ }
+ if (src.startsWith(process.resourcesPath)) {
+ continue
+ }
+ if (src.startsWith(resourcePath)) {
+ continue
+ }
+ if (src.startsWith(packagePath)) {
+ continue
+ }
+
+ if (src[0] === '/') {
+ if (!fs.isFileSync(src)) {
+ if (rootDirectory) {
+ result.push((img.src = path.join(rootDirectory, src.substring(1))))
+ } else {
+ result.push(undefined)
+ }
+ } else {
+ result.push(undefined)
+ }
+ } else {
+ result.push((img.src = path.resolve(path.dirname(filePath), src)))
+ }
+ } else {
+ result.push(undefined)
+ }
+ }
+
+ return result
+}
+
+var highlightCodeBlocks = function (domFragment, grammar, editorCallback) {
+ let defaultLanguage, fontFamily
+ if (
+ (grammar != null ? grammar.scopeName : undefined) === 'source.litcoffee'
+ ) {
+ defaultLanguage = 'coffee'
+ } else {
+ defaultLanguage = 'text'
+ }
+
+ if ((fontFamily = atom.config.get('editor.fontFamily'))) {
+ for (const codeElement of domFragment.querySelectorAll('code')) {
+ codeElement.style.fontFamily = fontFamily
+ }
+ }
+
+ const promises = []
+ for (const preElement of domFragment.querySelectorAll('pre')) {
+ const codeBlock =
+ preElement.firstElementChild != null
+ ? preElement.firstElementChild
+ : preElement
+ const className = codeBlock.getAttribute('class')
+ const fenceName =
+ className != null ? className.replace(/^language-/, '') : defaultLanguage
+
+ const editor = new TextEditor({
+ readonly: true,
+ keyboardInputEnabled: false
+ })
+ const editorElement = editor.getElement()
+
+ preElement.classList.add('editor-colors', `lang-${fenceName}`)
+ editorElement.setUpdatedSynchronously(true)
+ preElement.innerHTML = ''
+ preElement.parentNode.insertBefore(editorElement, preElement)
+ editor.setText(codeBlock.textContent.replace(/\r?\n$/, ''))
+ atom.grammars.assignLanguageMode(editor, scopeForFenceName(fenceName))
+ editor.setVisible(true)
+
+ promises.push(editorCallback(editorElement, preElement))
+ }
+ return Promise.all(promises)
+}
+
+var makeAtomEditorNonInteractive = function (editorElement, preElement) {
+ preElement.remove()
+ editorElement.setAttributeNode(document.createAttribute('gutter-hidden')) // Hide gutter
+ editorElement.removeAttribute('tabindex') // Make read-only
+
+ // Remove line decorations from code blocks.
+ for (const cursorLineDecoration of editorElement.getModel()
+ .cursorLineDecorations) {
+ cursorLineDecoration.destroy()
+ }
+}
+
+var convertAtomEditorToStandardElement = (editorElement, preElement) => {
+ return new Promise(function (resolve) {
+ const editor = editorElement.getModel()
+ const done = () =>
+ editor.component.getNextUpdatePromise().then(function () {
+ for (const line of editorElement.querySelectorAll(
+ '.line:not(.dummy)'
+ )) {
+ const line2 = document.createElement('div')
+ line2.className = 'line'
+ line2.innerHTML = line.firstChild.innerHTML
+ preElement.appendChild(line2)
+ }
+ editorElement.remove()
+ resolve()
+ })
+ const languageMode = editor.getBuffer().getLanguageMode()
+ if (languageMode.fullyTokenized || languageMode.tree) {
+ done()
+ } else {
+ editor.onDidTokenize(done)
+ }
+ })
+}
diff --git a/packages/markdown-preview/menus/markdown-preview.cson b/packages/markdown-preview/menus/markdown-preview.cson
new file mode 100644
index 0000000000..a0966c8129
--- /dev/null
+++ b/packages/markdown-preview/menus/markdown-preview.cson
@@ -0,0 +1,37 @@
+menu: [
+ label: 'Packages'
+ submenu: [
+ label: 'Markdown Preview'
+ submenu: [
+ {label: 'Toggle Preview', command: 'markdown-preview:toggle'}
+ {label: 'Toggle Break on Single Newline', command: 'markdown-preview:toggle-break-on-single-newline'}
+ {label: 'Toggle GitHub Style', command: 'markdown-preview:toggle-github-style'}
+ ]
+ ]
+]
+
+'context-menu':
+ '.markdown-preview': [
+ {label: 'Select All', command: 'markdown-preview:select-all'}
+ {label: 'Save As HTML\u2026', command: 'core:save-as'}
+ ]
+ '.markdown-preview.has-selection': [
+ {label: 'Copy', command: 'core:copy'}
+ ]
+ '.markdown-preview:not(.has-selection)': [
+ {label: 'Copy As HTML', command: 'core:copy'}
+ ]
+ '.tree-view .file .name[data-name$=\\.markdown]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.md]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.mdown]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.mkd]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.mkdown]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.ron]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
+ '.tree-view .file .name[data-name$=\\.txt]':
+ [{label: 'Markdown Preview', command: 'markdown-preview:preview-file'}]
diff --git a/packages/markdown-preview/package-lock.json b/packages/markdown-preview/package-lock.json
new file mode 100644
index 0000000000..b3a9d9fc2e
--- /dev/null
+++ b/packages/markdown-preview/package-lock.json
@@ -0,0 +1,426 @@
+{
+ "name": "markdown-preview",
+ "version": "0.160.2",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "markdown-preview",
+ "version": "0.160.2",
+ "license": "MIT",
+ "dependencies": {
+ "cheerio": "^1.0.0-rc.3",
+ "dompurify": "^2.0.17",
+ "emoji-images": "^0.1.1",
+ "fs-plus": "^3.0.0",
+ "marked": "^0.7.0",
+ "underscore-plus": "^1.0.0",
+ "yaml-front-matter": "^4.0.0"
+ },
+ "devDependencies": {
+ "temp": "^0.8.1"
+ },
+ "engines": {
+ "atom": "*"
+ }
+ },
+ "node_modules/@types/node": {
+ "version": "11.13.7",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-11.13.7.tgz",
+ "integrity": "sha512-suFHr6hcA9mp8vFrZTgrmqW2ZU3mbWsryQtQlY/QvwTISCw7nw/j+bCQPPohqmskhmqa5wLNuMHTTsc+xf1MQg=="
+ },
+ "node_modules/argparse": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+ "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+ "dependencies": {
+ "sprintf-js": "~1.0.2"
+ }
+ },
+ "node_modules/async": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+ "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+ },
+ "node_modules/balanced-match": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+ "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+ },
+ "node_modules/boolbase": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+ },
+ "node_modules/brace-expansion": {
+ "version": "1.1.11",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+ "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+ "dependencies": {
+ "balanced-match": "^1.0.0",
+ "concat-map": "0.0.1"
+ }
+ },
+ "node_modules/cheerio": {
+ "version": "1.0.0-rc.3",
+ "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+ "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
+ "dependencies": {
+ "css-select": "~1.2.0",
+ "dom-serializer": "~0.1.1",
+ "entities": "~1.1.1",
+ "htmlparser2": "^3.9.1",
+ "lodash": "^4.15.0",
+ "parse5": "^3.0.1"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/commander": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/commander/-/commander-1.0.0.tgz",
+ "integrity": "sha1-XmqI5wcP9ZCINurRkWlUjDD5C80=",
+ "engines": {
+ "node": ">= 0.4.x"
+ }
+ },
+ "node_modules/concat-map": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+ },
+ "node_modules/css-select": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+ "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+ "dependencies": {
+ "boolbase": "~1.0.0",
+ "css-what": "2.1",
+ "domutils": "1.5.1",
+ "nth-check": "~1.0.1"
+ }
+ },
+ "node_modules/css-what": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+ "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/dom-serializer": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+ "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+ "dependencies": {
+ "domelementtype": "^1.3.0",
+ "entities": "^1.1.1"
+ }
+ },
+ "node_modules/domelementtype": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+ "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+ },
+ "node_modules/domhandler": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+ "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+ "dependencies": {
+ "domelementtype": "1"
+ }
+ },
+ "node_modules/dompurify": {
+ "version": "2.0.17",
+ "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.17.tgz",
+ "integrity": "sha512-nNwwJfW55r8akD8MSFz6k75bzyT2y6JEa1O3JrZFBf+Y5R9JXXU4OsRl0B9hKoPgHTw2b7ER5yJ5Md97MMUJPg=="
+ },
+ "node_modules/domutils": {
+ "version": "1.5.1",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+ "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+ "dependencies": {
+ "dom-serializer": "0",
+ "domelementtype": "1"
+ }
+ },
+ "node_modules/emoji-images": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/emoji-images/-/emoji-images-0.1.1.tgz",
+ "integrity": "sha1-+ZLccgksA/vgkoJ2MZh+s7Exm2c="
+ },
+ "node_modules/entities": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+ "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+ },
+ "node_modules/fs-plus": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/fs-plus/-/fs-plus-3.1.1.tgz",
+ "integrity": "sha512-Se2PJdOWXqos1qVTkvqqjb0CSnfBnwwD+pq+z4ksT+e97mEShod/hrNg0TRCCsXPbJzcIq+NuzQhigunMWMJUA==",
+ "dependencies": {
+ "async": "^1.5.2",
+ "mkdirp": "^0.5.1",
+ "rimraf": "^2.5.2",
+ "underscore-plus": "1.x"
+ }
+ },
+ "node_modules/fs.realpath": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+ "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+ },
+ "node_modules/glob": {
+ "version": "7.1.3",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+ "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+ "dependencies": {
+ "fs.realpath": "^1.0.0",
+ "inflight": "^1.0.4",
+ "inherits": "2",
+ "minimatch": "^3.0.4",
+ "once": "^1.3.0",
+ "path-is-absolute": "^1.0.0"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/htmlparser2": {
+ "version": "3.10.1",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+ "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+ "dependencies": {
+ "domelementtype": "^1.3.1",
+ "domhandler": "^2.3.0",
+ "domutils": "^1.5.1",
+ "entities": "^1.1.1",
+ "inherits": "^2.0.1",
+ "readable-stream": "^3.1.1"
+ }
+ },
+ "node_modules/inflight": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+ "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+ "dependencies": {
+ "once": "^1.3.0",
+ "wrappy": "1"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+ },
+ "node_modules/js-yaml": {
+ "version": "3.13.1",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+ "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+ "dependencies": {
+ "argparse": "^1.0.7",
+ "esprima": "^4.0.0"
+ },
+ "bin": {
+ "js-yaml": "bin/js-yaml.js"
+ }
+ },
+ "node_modules/js-yaml/node_modules/esprima": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+ "bin": {
+ "esparse": "bin/esparse.js",
+ "esvalidate": "bin/esvalidate.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ },
+ "node_modules/marked": {
+ "version": "0.7.0",
+ "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
+ "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg==",
+ "bin": {
+ "marked": "bin/marked"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/minimatch": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+ "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+ "dependencies": {
+ "brace-expansion": "^1.1.7"
+ },
+ "engines": {
+ "node": "*"
+ }
+ },
+ "node_modules/minimist": {
+ "version": "0.0.8",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+ "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+ },
+ "node_modules/mkdirp": {
+ "version": "0.5.1",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+ "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+ "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)",
+ "dependencies": {
+ "minimist": "0.0.8"
+ },
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ }
+ },
+ "node_modules/nth-check": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+ "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+ "dependencies": {
+ "boolbase": "~1.0.0"
+ }
+ },
+ "node_modules/once": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+ "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+ "dependencies": {
+ "wrappy": "1"
+ }
+ },
+ "node_modules/os-tmpdir": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+ "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+ "dev": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/parse5": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+ "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+ "dependencies": {
+ "@types/node": "*"
+ }
+ },
+ "node_modules/path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/readable-stream": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.3.0.tgz",
+ "integrity": "sha512-EsI+s3k3XsW+fU8fQACLN59ky34AZ14LoeVZpYwmZvldCFo0r0gnelwF2TcMjLor/BTL5aDJVBMkss0dthToPw==",
+ "dependencies": {
+ "inherits": "^2.0.3",
+ "string_decoder": "^1.1.1",
+ "util-deprecate": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/rimraf": {
+ "version": "2.6.3",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+ "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+ "dependencies": {
+ "glob": "^7.1.3"
+ },
+ "bin": {
+ "rimraf": "bin.js"
+ }
+ },
+ "node_modules/safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+ },
+ "node_modules/sprintf-js": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+ },
+ "node_modules/string_decoder": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
+ "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+ "dependencies": {
+ "safe-buffer": "~5.1.0"
+ }
+ },
+ "node_modules/temp": {
+ "version": "0.8.3",
+ "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",
+ "integrity": "sha1-4Ma8TSa5AxJEEOT+2BEDAU38H1k=",
+ "dev": true,
+ "engines": [
+ "node >=0.8.0"
+ ],
+ "dependencies": {
+ "os-tmpdir": "^1.0.0",
+ "rimraf": "~2.2.6"
+ }
+ },
+ "node_modules/temp/node_modules/rimraf": {
+ "version": "2.2.8",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+ "integrity": "sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=",
+ "dev": true,
+ "bin": {
+ "rimraf": "bin.js"
+ }
+ },
+ "node_modules/underscore": {
+ "version": "1.13.1",
+ "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.1.tgz",
+ "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g=="
+ },
+ "node_modules/underscore-plus": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/underscore-plus/-/underscore-plus-1.7.0.tgz",
+ "integrity": "sha512-A3BEzkeicFLnr+U/Q3EyWwJAQPbA19mtZZ4h+lLq3ttm9kn8WC4R3YpuJZEXmWdLjYP47Zc8aLZm9kwdv+zzvA==",
+ "dependencies": {
+ "underscore": "^1.9.1"
+ }
+ },
+ "node_modules/util-deprecate": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+ },
+ "node_modules/wrappy": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+ "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+ },
+ "node_modules/yaml-front-matter": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-4.0.0.tgz",
+ "integrity": "sha1-EcN4xU6sMGGoLLr2k6abTkxE9IQ=",
+ "dependencies": {
+ "commander": "1.0.0",
+ "js-yaml": "^3.10.0"
+ },
+ "bin": {
+ "yaml-front-matter": "bin/js-yaml-front.js"
+ }
+ }
+ }
+}
diff --git a/packages/markdown-preview/package.json b/packages/markdown-preview/package.json
new file mode 100644
index 0000000000..05bd4695ee
--- /dev/null
+++ b/packages/markdown-preview/package.json
@@ -0,0 +1,66 @@
+{
+ "name": "markdown-preview",
+ "version": "0.160.2",
+ "main": "./lib/main",
+ "description": "Open a rendered version of the Markdown in the current editor with `ctrl-shift-m`.",
+ "repository": "https://github.com/pulsar-edit/pulsar",
+ "license": "MIT",
+ "engines": {
+ "atom": "*"
+ },
+ "dependencies": {
+ "cheerio": "^1.0.0-rc.3",
+ "dompurify": "^2.0.17",
+ "emoji-images": "^0.1.1",
+ "fs-plus": "^3.0.0",
+ "marked": "^0.7.0",
+ "underscore-plus": "^1.0.0",
+ "yaml-front-matter": "^4.0.0"
+ },
+ "devDependencies": {
+ "temp": "^0.8.1"
+ },
+ "deserializers": {
+ "MarkdownPreviewView": "createMarkdownPreviewView"
+ },
+ "configSchema": {
+ "breakOnSingleNewline": {
+ "type": "boolean",
+ "default": false,
+ "description": "In Markdown, a single newline character doesn't cause a line break in the generated HTML. In GitHub Flavored Markdown, that is not true. Enable this config option to insert line breaks in rendered HTML for single newlines in Markdown source."
+ },
+ "liveUpdate": {
+ "type": "boolean",
+ "default": true,
+ "description": "Re-render the preview as the contents of the source changes, without requiring the source buffer to be saved. If disabled, the preview is re-rendered only when the buffer is saved to disk."
+ },
+ "openPreviewInSplitPane": {
+ "type": "boolean",
+ "default": true,
+ "description": "Open the preview in a split pane. If disabled, the preview is opened in a new tab in the same pane."
+ },
+ "allowUnsafeProtocols": {
+ "type": "boolean",
+ "default": false,
+ "description": "Allow HTML attributes to use protocols normally considered unsafe such as `file://` and absolute paths on Windows."
+ },
+ "grammars": {
+ "type": "array",
+ "default": [
+ "source.gfm",
+ "source.litcoffee",
+ "text.html.basic",
+ "text.md",
+ "text.plain",
+ "text.plain.null-grammar"
+ ],
+ "description": "List of scopes for languages for which previewing is enabled. See [this README](https://github.com/pulsar-edit/spell-check#readme) for more information on finding the correct scope for a specific language."
+ },
+ "useGitHubStyle": {
+ "title": "Use GitHub.com style",
+ "type": "boolean",
+ "default": false,
+ "description": "Use the same CSS styles for preview as the ones used on GitHub.com."
+ }
+ }
+}
diff --git "a/packages/markdown-preview/spec/fixtures/subdir/a\314\201cce\314\201nte\314\201d.md" "b/packages/markdown-preview/spec/fixtures/subdir/a\314\201cce\314\201nte\314\201d.md"
new file mode 100644
index 0000000000..f00b526a98
--- /dev/null
+++ "b/packages/markdown-preview/spec/fixtures/subdir/a\314\201cce\314\201nte\314\201d.md"
@@ -0,0 +1 @@
+# Testing
diff --git a/packages/markdown-preview/spec/fixtures/subdir/code-block.md b/packages/markdown-preview/spec/fixtures/subdir/code-block.md
new file mode 100644
index 0000000000..4e88d4689f
--- /dev/null
+++ b/packages/markdown-preview/spec/fixtures/subdir/code-block.md
@@ -0,0 +1,9 @@
+# Code Block
+
+```javascript
+if a === 3 {
+ b = 5
+}
+```
+
+encoding → issue
diff --git a/packages/markdown-preview/spec/fixtures/subdir/doctype-tag.md b/packages/markdown-preview/spec/fixtures/subdir/doctype-tag.md
new file mode 100644
index 0000000000..ec44f34a3b
--- /dev/null
+++ b/packages/markdown-preview/spec/fixtures/subdir/doctype-tag.md
@@ -0,0 +1,4 @@
+
+
+content
+
diff --git a/packages/markdown-preview/spec/fixtures/subdir/evil.md b/packages/markdown-preview/spec/fixtures/subdir/evil.md
new file mode 100644
index 0000000000..cb4fe4c4fb
--- /dev/null
+++ b/packages/markdown-preview/spec/fixtures/subdir/evil.md
@@ -0,0 +1,5 @@
+hello
+
+
+hey
diff --git a/packages/markdown-preview/spec/fixtures/subdir/simple.md b/packages/markdown-preview/spec/fixtures/subdir/simple.md
new file mode 100644
index 0000000000..20d93cc6a8
--- /dev/null
+++ b/packages/markdown-preview/spec/fixtures/subdir/simple.md
@@ -0,0 +1,5 @@
+*italic*
+
+**bold**
+
+encoding → issue
diff --git "a/packages/markdown-preview/spec/fixtures/subdir/\303\241cc\303\251nt\303\251d.md" "b/packages/markdown-preview/spec/fixtures/subdir/\303\241cc\303\251nt\303\251d.md"
new file mode 100644
index 0000000000..f00b526a98
--- /dev/null
+++ "b/packages/markdown-preview/spec/fixtures/subdir/\303\241cc\303\251nt\303\251d.md"
@@ -0,0 +1 @@
+# Testing
diff --git a/packages/markdown-preview/spec/markdown-preview-spec.js b/packages/markdown-preview/spec/markdown-preview-spec.js
new file mode 100644
index 0000000000..6a90d8ce14
--- /dev/null
+++ b/packages/markdown-preview/spec/markdown-preview-spec.js
@@ -0,0 +1,839 @@
+const path = require('path')
+const fs = require('fs-plus')
+const temp = require('temp').track()
+const MarkdownPreviewView = require('../lib/markdown-preview-view')
+const { TextEditor } = require('atom')
+const TextMateLanguageMode = new TextEditor().getBuffer().getLanguageMode()
+ .constructor
+
+describe('Markdown Preview', function () {
+ let preview = null
+
+ beforeEach(function () {
+ const fixturesPath = path.join(__dirname, 'fixtures')
+ const tempPath = temp.mkdirSync('atom')
+ fs.copySync(fixturesPath, tempPath)
+ atom.project.setPaths([tempPath])
+
+ jasmine.unspy(TextMateLanguageMode.prototype, 'tokenizeInBackground')
+
+ jasmine.useRealClock()
+ jasmine.attachToDOM(atom.views.getView(atom.workspace))
+
+ waitsForPromise(() => atom.packages.activatePackage('markdown-preview'))
+
+ waitsForPromise(() => atom.packages.activatePackage('language-gfm'))
+
+ runs(() =>
+ spyOn(atom.packages, 'hasActivatedInitialPackages').andReturn(true)
+ )
+ })
+
+ const expectPreviewInSplitPane = function () {
+ waitsFor(() => atom.workspace.getCenter().getPanes().length === 2)
+
+ waitsFor(
+ 'markdown preview to be created',
+ () =>
+ (preview = atom.workspace
+ .getCenter()
+ .getPanes()[1]
+ .getActiveItem())
+ )
+
+ runs(() => {
+ expect(preview).toBeInstanceOf(MarkdownPreviewView)
+ expect(preview.getPath()).toBe(
+ atom.workspace.getActivePaneItem().getPath()
+ )
+ })
+ }
+
+ describe('when a preview has not been created for the file', function () {
+ it('displays a markdown preview in a split pane', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/file.markdown'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() => {
+ const [editorPane] = atom.workspace.getCenter().getPanes()
+ expect(editorPane.getItems()).toHaveLength(1)
+ expect(editorPane.isActive()).toBe(true)
+ })
+ })
+
+ describe("when the editor's path does not exist", function () {
+ it('splits the current pane to the right with a markdown preview for the file', function () {
+ waitsForPromise(() => atom.workspace.open('new.markdown'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+ })
+
+ describe('when the editor does not have a path', function () {
+ it('splits the current pane to the right with a markdown preview for the file', function () {
+ waitsForPromise(() => atom.workspace.open(''))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+ })
+
+ describe('when the path contains a space', function () {
+ it('renders the preview', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/file with space.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+ })
+
+ describe('when the path contains accented characters', function () {
+ it('renders the preview', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/áccéntéd.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+ })
+ })
+
+ describe('when a preview has been created for the file', function () {
+ beforeEach(function () {
+ waitsForPromise(() => atom.workspace.open('subdir/file.markdown'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+
+ it('closes the existing preview when toggle is triggered a second time on the editor', function () {
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+
+ const [editorPane, previewPane] = atom.workspace.getCenter().getPanes()
+ expect(editorPane.isActive()).toBe(true)
+ expect(previewPane.getActiveItem()).toBeUndefined()
+ })
+
+ it('closes the existing preview when toggle is triggered on it and it has focus', function () {
+ const [editorPane, previewPane] = atom.workspace.getCenter().getPanes()
+ previewPane.activate()
+
+ atom.commands.dispatch(
+ editorPane.getActiveItem().getElement(),
+ 'markdown-preview:toggle'
+ )
+ expect(previewPane.getActiveItem()).toBeUndefined()
+ })
+
+ describe('when the editor is modified', function () {
+ it('re-renders the preview', function () {
+ spyOn(preview, 'showLoading')
+
+ const markdownEditor = atom.workspace.getActiveTextEditor()
+ markdownEditor.setText('Hey!')
+
+ waitsFor(() => preview.element.textContent.includes('Hey!'))
+
+ runs(() => expect(preview.showLoading).not.toHaveBeenCalled())
+ })
+
+ it('invokes ::onDidChangeMarkdown listeners', function () {
+ let listener
+ const markdownEditor = atom.workspace.getActiveTextEditor()
+ preview.onDidChangeMarkdown(
+ (listener = jasmine.createSpy('didChangeMarkdownListener'))
+ )
+
+ runs(() => markdownEditor.setText('Hey!'))
+
+ waitsFor(
+ '::onDidChangeMarkdown handler to be called',
+ () => listener.callCount > 0
+ )
+ })
+
+ describe('when the preview is in the active pane but is not the active item', function () {
+ it('re-renders the preview but does not make it active', function () {
+ const markdownEditor = atom.workspace.getActiveTextEditor()
+ const previewPane = atom.workspace.getCenter().getPanes()[1]
+ previewPane.activate()
+
+ waitsForPromise(() => atom.workspace.open())
+
+ runs(() => markdownEditor.setText('Hey!'))
+
+ waitsFor(() => preview.element.textContent.includes('Hey!'))
+
+ runs(() => {
+ expect(previewPane.isActive()).toBe(true)
+ expect(previewPane.getActiveItem()).not.toBe(preview)
+ })
+ })
+ })
+
+ describe('when the preview is not the active item and not in the active pane', function () {
+ it('re-renders the preview and makes it active', function () {
+ const markdownEditor = atom.workspace.getActiveTextEditor()
+ const [
+ editorPane,
+ previewPane
+ ] = atom.workspace.getCenter().getPanes()
+ previewPane.splitRight({ copyActiveItem: true })
+ previewPane.activate()
+
+ waitsForPromise(() => atom.workspace.open())
+
+ runs(() => {
+ editorPane.activate()
+ markdownEditor.setText('Hey!')
+ })
+
+ waitsFor(() => preview.element.textContent.includes('Hey!'))
+
+ runs(() => {
+ expect(editorPane.isActive()).toBe(true)
+ expect(previewPane.getActiveItem()).toBe(preview)
+ })
+ })
+ })
+
+ describe('when the liveUpdate config is set to false', function () {
+ it('only re-renders the markdown when the editor is saved, not when the contents are modified', function () {
+ atom.config.set('markdown-preview.liveUpdate', false)
+
+ const didStopChangingHandler = jasmine.createSpy(
+ 'didStopChangingHandler'
+ )
+ atom.workspace
+ .getActiveTextEditor()
+ .getBuffer()
+ .onDidStopChanging(didStopChangingHandler)
+ atom.workspace.getActiveTextEditor().setText('ch ch changes')
+
+ waitsFor(() => didStopChangingHandler.callCount > 0)
+
+ runs(() => {
+ expect(preview.element.textContent).not.toMatch('ch ch changes')
+ atom.workspace.getActiveTextEditor().save()
+ })
+
+ waitsFor(() => preview.element.textContent.includes('ch ch changes'))
+ })
+ })
+ })
+
+ describe('when the original preview is split', function () {
+ it('renders another preview in the new split pane', function () {
+ atom.workspace
+ .getCenter()
+ .getPanes()[1]
+ .splitRight({ copyActiveItem: true })
+
+ expect(atom.workspace.getCenter().getPanes()).toHaveLength(3)
+
+ waitsFor(
+ 'split markdown preview to be created',
+ () =>
+ (preview = atom.workspace
+ .getCenter()
+ .getPanes()[2]
+ .getActiveItem())
+ )
+
+ runs(() => {
+ expect(preview).toBeInstanceOf(MarkdownPreviewView)
+ expect(preview.getPath()).toBe(
+ atom.workspace.getActivePaneItem().getPath()
+ )
+ })
+ })
+ })
+
+ describe('when the editor is destroyed', function () {
+ beforeEach(() =>
+ atom.workspace
+ .getCenter()
+ .getPanes()[0]
+ .destroyActiveItem()
+ )
+
+ it('falls back to using the file path', function () {
+ atom.workspace
+ .getCenter()
+ .getPanes()[1]
+ .activate()
+ expect(preview.file.getPath()).toBe(
+ atom.workspace.getActivePaneItem().getPath()
+ )
+ })
+
+ it('continues to update the preview if the file is changed on #win32 and #darwin', function () {
+ let listener
+ const titleChangedCallback = jasmine.createSpy('titleChangedCallback')
+
+ runs(() => {
+ expect(preview.getTitle()).toBe('file.markdown Preview')
+ preview.onDidChangeTitle(titleChangedCallback)
+ fs.renameSync(
+ preview.getPath(),
+ path.join(path.dirname(preview.getPath()), 'file2.md')
+ )
+ })
+
+ waitsFor(
+ 'title to update',
+ () => preview.getTitle() === 'file2.md Preview'
+ )
+
+ runs(() => expect(titleChangedCallback).toHaveBeenCalled())
+
+ spyOn(preview, 'showLoading')
+
+ runs(() => fs.writeFileSync(preview.getPath(), 'Hey!'))
+
+ waitsFor('contents to update', () =>
+ preview.element.textContent.includes('Hey!')
+ )
+
+ runs(() => expect(preview.showLoading).not.toHaveBeenCalled())
+
+ preview.onDidChangeMarkdown(
+ (listener = jasmine.createSpy('didChangeMarkdownListener'))
+ )
+
+ runs(() => fs.writeFileSync(preview.getPath(), 'Hey!'))
+
+ waitsFor(
+ '::onDidChangeMarkdown handler to be called',
+ () => listener.callCount > 0
+ )
+ })
+
+ it('allows a new split pane of the preview to be created', function () {
+ atom.workspace
+ .getCenter()
+ .getPanes()[1]
+ .splitRight({ copyActiveItem: true })
+
+ expect(atom.workspace.getCenter().getPanes()).toHaveLength(3)
+
+ waitsFor(
+ 'split markdown preview to be created',
+ () =>
+ (preview = atom.workspace
+ .getCenter()
+ .getPanes()[2]
+ .getActiveItem())
+ )
+
+ runs(() => {
+ expect(preview).toBeInstanceOf(MarkdownPreviewView)
+ expect(preview.getPath()).toBe(
+ atom.workspace.getActivePaneItem().getPath()
+ )
+ })
+ })
+ })
+ })
+
+ describe('when the markdown preview view is requested by file URI', function () {
+ it('opens a preview editor and watches the file for changes', function () {
+ waitsForPromise('atom.workspace.open promise to be resolved', () =>
+ atom.workspace.open(
+ `markdown-preview://${atom.project
+ .getDirectories()[0]
+ .resolve('subdir/file.markdown')}`
+ )
+ )
+
+ runs(() => {
+ preview = atom.workspace.getActivePaneItem()
+ expect(preview).toBeInstanceOf(MarkdownPreviewView)
+
+ spyOn(preview, 'renderMarkdownText')
+ preview.file.emitter.emit('did-change')
+ })
+
+ waitsFor(
+ 'markdown to be re-rendered after file changed',
+ () => preview.renderMarkdownText.callCount > 0
+ )
+ })
+ })
+
+ describe("when the editor's grammar it not enabled for preview", function () {
+ it('does not open the markdown preview', function () {
+ atom.config.set('markdown-preview.grammars', [])
+
+ waitsForPromise(() => atom.workspace.open('subdir/file.markdown'))
+
+ runs(() => {
+ spyOn(atom.workspace, 'open').andCallThrough()
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ expect(atom.workspace.open).not.toHaveBeenCalled()
+ })
+ })
+ })
+
+ describe("when the editor's path changes on #win32 and #darwin", function () {
+ it("updates the preview's title", function () {
+ const titleChangedCallback = jasmine.createSpy('titleChangedCallback')
+
+ waitsForPromise(() => atom.workspace.open('subdir/file.markdown'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+
+ expectPreviewInSplitPane()
+
+ runs(() => {
+ expect(preview.getTitle()).toBe('file.markdown Preview')
+ preview.onDidChangeTitle(titleChangedCallback)
+ fs.renameSync(
+ atom.workspace.getActiveTextEditor().getPath(),
+ path.join(
+ path.dirname(atom.workspace.getActiveTextEditor().getPath()),
+ 'file2.md'
+ )
+ )
+ })
+
+ waitsFor(() => preview.getTitle() === 'file2.md Preview')
+
+ runs(() => expect(titleChangedCallback).toHaveBeenCalled())
+ })
+ })
+
+ describe('when the URI opened does not have a markdown-preview protocol', function () {
+ it('does not throw an error trying to decode the URI (regression)', function () {
+ waitsForPromise(() => atom.workspace.open('%'))
+
+ runs(() => expect(atom.workspace.getActiveTextEditor()).toBeTruthy())
+ })
+ })
+
+ describe('markdown-preview:toggle', function () {
+ beforeEach(() =>
+ waitsForPromise(() => atom.workspace.open('code-block.md'))
+ )
+
+ it('does not exist for text editors that are not set to a grammar defined in `markdown-preview.grammars`', function () {
+ atom.config.set('markdown-preview.grammars', ['source.weird-md'])
+ const editorElement = atom.workspace.getActiveTextEditor().getElement()
+ const commands = atom.commands
+ .findCommands({ target: editorElement })
+ .map(command => command.name)
+ expect(commands).not.toContain('markdown-preview:toggle')
+ })
+
+ it('exists for text editors that are set to a grammar defined in `markdown-preview.grammars`', function () {
+ atom.config.set('markdown-preview.grammars', ['source.gfm'])
+ const editorElement = atom.workspace.getActiveTextEditor().getElement()
+ const commands = atom.commands
+ .findCommands({ target: editorElement })
+ .map(command => command.name)
+ expect(commands).toContain('markdown-preview:toggle')
+ })
+
+ it('updates whenever the list of grammars changes', function () {
+ // Last two tests combined
+ atom.config.set('markdown-preview.grammars', ['source.gfm', 'text.plain'])
+ const editorElement = atom.workspace.getActiveTextEditor().getElement()
+ let commands = atom.commands
+ .findCommands({ target: editorElement })
+ .map(command => command.name)
+ expect(commands).toContain('markdown-preview:toggle')
+
+ atom.config.set('markdown-preview.grammars', [
+ 'source.weird-md',
+ 'text.plain'
+ ])
+ commands = atom.commands
+ .findCommands({ target: editorElement })
+ .map(command => command.name)
+ expect(commands).not.toContain('markdown-preview:toggle')
+ })
+ })
+
+ describe('when markdown-preview:copy-html is triggered', function () {
+ it('copies the HTML to the clipboard', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/simple.md'))
+
+ waitsForPromise(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:copy-html'
+ )
+ )
+
+ runs(() => {
+ expect(atom.clipboard.read()).toBe(`\
+italic
+bold
+encoding \u2192 issue
\
+`)
+
+ atom.workspace
+ .getActiveTextEditor()
+ .setSelectedBufferRange([[0, 0], [1, 0]])
+ })
+
+ waitsForPromise(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:copy-html'
+ )
+ )
+
+ runs(() =>
+ expect(atom.clipboard.read()).toBe(`\
+italic
\
+`)
+ )
+ })
+
+ describe('code block tokenization', function () {
+ beforeEach(function () {
+ waitsForPromise(() => atom.packages.activatePackage('language-ruby'))
+
+ waitsForPromise(() => atom.packages.activatePackage('markdown-preview'))
+
+ waitsForPromise(() => atom.workspace.open('subdir/file.markdown'))
+
+ waitsForPromise(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:copy-html'
+ )
+ )
+
+ runs(() => {
+ preview = document.createElement('div')
+ preview.innerHTML = atom.clipboard.read()
+ })
+ })
+
+ describe("when the code block's fence name has a matching grammar", function () {
+ it('tokenizes the code block with the grammar', function () {
+ expect(
+ preview.querySelector('pre span.entity.name.function.ruby')
+ ).toBeDefined()
+ })
+ })
+
+ describe("when the code block's fence name doesn't have a matching grammar", function () {
+ it('does not tokenize the code block', function () {
+ expect(
+ preview.querySelectorAll(
+ 'pre.lang-kombucha .line .syntax--null-grammar'
+ ).length
+ ).toBe(2)
+ })
+ })
+
+ describe('when the code block contains empty lines', function () {
+ it("doesn't remove the empty lines", function () {
+ expect(preview.querySelector('pre.lang-python').children.length).toBe(
+ 6
+ )
+ expect(
+ preview
+ .querySelector('pre.lang-python div:nth-child(2)')
+ .textContent.trim()
+ ).toBe('')
+ expect(
+ preview
+ .querySelector('pre.lang-python div:nth-child(4)')
+ .textContent.trim()
+ ).toBe('')
+ expect(
+ preview
+ .querySelector('pre.lang-python div:nth-child(5)')
+ .textContent.trim()
+ ).toBe('')
+ })
+ })
+
+ describe('when the code block is nested in a list', function () {
+ it('detects and styles the block', function () {
+ expect(preview.querySelector('pre.lang-javascript')).toHaveClass(
+ 'editor-colors'
+ )
+ })
+ })
+ })
+ })
+
+ describe('sanitization', function () {
+ it('removes script tags and attributes that commonly contain inline scripts', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/evil.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() =>
+ expect(preview.element.innerHTML).toBe(`\
+hello
+
+
+content
+
\
+`)
+ )
+ })
+ })
+
+ describe('when the markdown contains an tag', function () {
+ it('does not throw an exception', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/html-tag.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() => expect(preview.element.innerHTML).toBe('content'))
+ })
+ })
+
+ describe('when the markdown contains a tag', function () {
+ it('does not throw an exception', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/pre-tag.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() =>
+ expect(preview.element.querySelector('atom-text-editor')).toBeDefined()
+ )
+ })
+ })
+
+ describe('when there is an image with a relative path and no directory', function () {
+ it('does not alter the image src', function () {
+ for (let projectPath of atom.project.getPaths()) {
+ atom.project.removePath(projectPath)
+ }
+
+ const filePath = path.join(temp.mkdirSync('atom'), 'bar.md')
+ fs.writeFileSync(filePath, '')
+
+ waitsForPromise(() => atom.workspace.open(filePath))
+
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() =>
+ expect(preview.element.innerHTML).toBe(`\
+
\
+`)
+ )
+ })
+ })
+
+ describe('GitHub style markdown preview', function () {
+ beforeEach(() => atom.config.set('markdown-preview.useGitHubStyle', false))
+
+ it('renders markdown using the default style when GitHub styling is disabled', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/simple.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() =>
+ expect(preview.element.getAttribute('data-use-github-style')).toBeNull()
+ )
+ })
+
+ it('renders markdown using the GitHub styling when enabled', function () {
+ atom.config.set('markdown-preview.useGitHubStyle', true)
+
+ waitsForPromise(() => atom.workspace.open('subdir/simple.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() =>
+ expect(preview.element.getAttribute('data-use-github-style')).toBe('')
+ )
+ })
+
+ it('updates the rendering style immediately when the configuration is changed', function () {
+ waitsForPromise(() => atom.workspace.open('subdir/simple.md'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+
+ runs(() => {
+ expect(preview.element.getAttribute('data-use-github-style')).toBeNull()
+
+ atom.config.set('markdown-preview.useGitHubStyle', true)
+ expect(
+ preview.element.getAttribute('data-use-github-style')
+ ).not.toBeNull()
+
+ atom.config.set('markdown-preview.useGitHubStyle', false)
+ expect(preview.element.getAttribute('data-use-github-style')).toBeNull()
+ })
+ })
+ })
+
+ describe('when markdown-preview:save-as-html is triggered', function () {
+ beforeEach(function () {
+ waitsForPromise(() => atom.workspace.open('subdir/simple.markdown'))
+ runs(() =>
+ atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:toggle'
+ )
+ )
+ expectPreviewInSplitPane()
+ })
+
+ it('saves the HTML when it is triggered and the editor has focus', function () {
+ const [editorPane] = atom.workspace.getCenter().getPanes()
+ editorPane.activate()
+
+ const outputPath = temp.path({ suffix: '.html' })
+ expect(fs.existsSync(outputPath)).toBe(false)
+
+ runs(() => {
+ spyOn(preview, 'getSaveDialogOptions').andReturn({
+ defaultPath: outputPath
+ })
+ spyOn(atom.applicationDelegate, 'showSaveDialog').andCallFake(function (
+ options,
+ callback
+ ) {
+ if (typeof callback === 'function') {
+ callback(options.defaultPath)
+ }
+ // TODO: When https://github.com/atom/atom/pull/16245 lands remove the return
+ // and the existence check on the callback
+ return options.defaultPath
+ })
+ return atom.commands.dispatch(
+ atom.workspace.getActiveTextEditor().getElement(),
+ 'markdown-preview:save-as-html'
+ )
+ })
+
+ waitsFor(() => fs.existsSync(outputPath))
+
+ runs(() => expect(fs.existsSync(outputPath)).toBe(true))
+ })
+
+ it('saves the HTML when it is triggered and the preview pane has focus', function () {
+ const [editorPane, previewPane] = atom.workspace.getCenter().getPanes()
+ previewPane.activate()
+
+ const outputPath = temp.path({ suffix: '.html' })
+ expect(fs.existsSync(outputPath)).toBe(false)
+
+ runs(() => {
+ spyOn(preview, 'getSaveDialogOptions').andReturn({
+ defaultPath: outputPath
+ })
+ spyOn(atom.applicationDelegate, 'showSaveDialog').andCallFake(function (
+ options,
+ callback
+ ) {
+ if (typeof callback === 'function') {
+ callback(options.defaultPath)
+ }
+ // TODO: When https://github.com/atom/atom/pull/16245 lands remove the return
+ // and the existence check on the callback
+ return options.defaultPath
+ })
+ return atom.commands.dispatch(
+ editorPane.getActiveItem().getElement(),
+ 'markdown-preview:save-as-html'
+ )
+ })
+
+ waitsFor(() => fs.existsSync(outputPath))
+
+ runs(() => expect(fs.existsSync(outputPath)).toBe(true))
+ })
+ })
+})
diff --git a/packages/markdown-preview/spec/markdown-preview-view-spec.js b/packages/markdown-preview/spec/markdown-preview-view-spec.js
new file mode 100644
index 0000000000..45a81eaeeb
--- /dev/null
+++ b/packages/markdown-preview/spec/markdown-preview-view-spec.js
@@ -0,0 +1,604 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
+ */
+const path = require('path')
+const fs = require('fs-plus')
+const temp = require('temp').track()
+const url = require('url')
+const { TextEditor } = require('atom')
+const MarkdownPreviewView = require('../lib/markdown-preview-view')
+const TextMateLanguageMode = new TextEditor().getBuffer().getLanguageMode()
+ .constructor
+
+describe('MarkdownPreviewView', function () {
+ let preview = null
+
+ beforeEach(function () {
+ // Makes _.debounce work
+ jasmine.useRealClock()
+
+ jasmine.unspy(TextMateLanguageMode.prototype, 'tokenizeInBackground')
+
+ spyOn(atom.packages, 'hasActivatedInitialPackages').andReturn(true)
+
+ const filePath = atom.project
+ .getDirectories()[0]
+ .resolve('subdir/file.markdown')
+ preview = new MarkdownPreviewView({ filePath })
+ jasmine.attachToDOM(preview.element)
+
+ waitsForPromise(() => atom.packages.activatePackage('language-ruby'))
+
+ waitsForPromise(() => atom.packages.activatePackage('language-javascript'))
+
+ waitsForPromise(() => atom.packages.activatePackage('markdown-preview'))
+ })
+
+ afterEach(() => preview.destroy())
+
+ describe('::constructor', function () {
+ it('shows a loading spinner and renders the markdown', function () {
+ preview.showLoading()
+ expect(preview.element.querySelector('.markdown-spinner')).toBeDefined()
+
+ waitsForPromise(() => preview.renderMarkdown())
+
+ runs(() => expect(preview.element.querySelector('.emoji')).toBeDefined())
+ })
+
+ it('shows an error message when there is an error', function () {
+ preview.showError('Not a real file')
+ expect(preview.element.textContent).toMatch('Failed')
+ })
+
+ it('rerenders the markdown and the scrollTop stays the same', function () {
+ waitsForPromise(() => preview.renderMarkdown())
+
+ runs(function () {
+ preview.element.style.maxHeight = '10px'
+ preview.element.scrollTop = 24
+ expect(preview.element.scrollTop).toBe(24)
+ })
+
+ waitsForPromise(() => preview.renderMarkdown())
+
+ runs(() => expect(preview.element.scrollTop).toBe(24))
+ })
+ })
+
+ describe('serialization', function () {
+ let newPreview = null
+
+ afterEach(function () {
+ if (newPreview) {
+ newPreview.destroy()
+ }
+ })
+
+ it('recreates the preview when serialized/deserialized', function () {
+ newPreview = atom.deserializers.deserialize(preview.serialize())
+ jasmine.attachToDOM(newPreview.element)
+ expect(newPreview.getPath()).toBe(preview.getPath())
+ })
+
+ it('does not recreate a preview when the file no longer exists', function () {
+ const filePath = path.join(temp.mkdirSync('markdown-preview-'), 'foo.md')
+ fs.writeFileSync(filePath, '# Hi')
+
+ preview.destroy()
+ preview = new MarkdownPreviewView({ filePath })
+ const serialized = preview.serialize()
+ fs.removeSync(filePath)
+
+ newPreview = atom.deserializers.deserialize(serialized)
+ expect(newPreview).toBeUndefined()
+ })
+
+ it('serializes the editor id when opened for an editor', function () {
+ preview.destroy()
+
+ waitsForPromise(() => atom.workspace.open('new.markdown'))
+
+ runs(function () {
+ preview = new MarkdownPreviewView({
+ editorId: atom.workspace.getActiveTextEditor().id
+ })
+
+ jasmine.attachToDOM(preview.element)
+ expect(preview.getPath()).toBe(
+ atom.workspace.getActiveTextEditor().getPath()
+ )
+
+ newPreview = atom.deserializers.deserialize(preview.serialize())
+ jasmine.attachToDOM(newPreview.element)
+ expect(newPreview.getPath()).toBe(preview.getPath())
+ })
+ })
+ })
+
+ describe('code block conversion to atom-text-editor tags', function () {
+ beforeEach(function () {
+ waitsForPromise(() => preview.renderMarkdown())
+ })
+
+ it('removes line decorations on rendered code blocks', function () {
+ const editor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='text plain null-grammar']"
+ )
+ const decorations = editor
+ .getModel()
+ .getDecorations({ class: 'cursor-line', type: 'line' })
+ expect(decorations.length).toBe(0)
+ })
+
+ it('sets the editors as read-only', function () {
+ preview.element
+ .querySelectorAll('atom-text-editor')
+ .forEach(editorElement =>
+ expect(editorElement.getAttribute('tabindex')).toBeNull()
+ )
+ })
+
+ describe("when the code block's fence name has a matching grammar", function () {
+ it('assigns the grammar on the atom-text-editor', function () {
+ const rubyEditor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='source ruby']"
+ )
+ expect(rubyEditor.getModel().getText()).toBe(`\
+def func
+ x = 1
+end\
+`)
+
+ // nested in a list item
+ const jsEditor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='source js']"
+ )
+ expect(jsEditor.getModel().getText()).toBe(`\
+if a === 3 {
+b = 5
+}\
+`)
+ })
+ })
+
+ describe("when the code block's fence name doesn't have a matching grammar", function () {
+ it('does not assign a specific grammar', function () {
+ const plainEditor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='text plain null-grammar']"
+ )
+ expect(plainEditor.getModel().getText()).toBe(`\
+function f(x) {
+ return x++;
+}\
+`)
+ })
+ })
+
+ describe('when an editor cannot find the grammar that is later loaded', function () {
+ it('updates the editor grammar', function () {
+ let renderSpy = null
+
+ if (typeof atom.grammars.onDidRemoveGrammar !== 'function') {
+ // TODO: Remove once atom.grammars.onDidRemoveGrammar is released
+ waitsForPromise(() => atom.packages.activatePackage('language-gfm'))
+ }
+
+ runs(
+ () => (renderSpy = spyOn(preview, 'renderMarkdown').andCallThrough())
+ )
+
+ waitsForPromise(() => atom.packages.deactivatePackage('language-ruby'))
+
+ waitsFor(
+ 'renderMarkdown to be called after disabling a language',
+ () => renderSpy.callCount === 1
+ )
+
+ runs(function () {
+ const rubyEditor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='source ruby']"
+ )
+ expect(rubyEditor).toBeNull()
+ })
+
+ waitsForPromise(() => atom.packages.activatePackage('language-ruby'))
+
+ waitsFor(
+ 'renderMarkdown to be called after enabling a language',
+ () => renderSpy.callCount === 2
+ )
+
+ runs(function () {
+ const rubyEditor = preview.element.querySelector(
+ "atom-text-editor[data-grammar='source ruby']"
+ )
+ expect(rubyEditor.getModel().getText()).toBe(`\
+def func
+ x = 1
+end\
+`)
+ })
+ })
+ })
+ })
+
+ describe('image resolving', function () {
+ beforeEach(function () {
+ waitsForPromise(() => preview.renderMarkdown())
+ })
+
+ describe('when the image uses a relative path', function () {
+ it('resolves to a path relative to the file', function () {
+ const image = preview.element.querySelector('img[alt=Image1]')
+ expect(image.getAttribute('src')).toBe(
+ atom.project.getDirectories()[0].resolve('subdir/image1.png')
+ )
+ })
+ })
+
+ describe('when the image uses an absolute path that does not exist', function () {
+ it('resolves to a path relative to the project root', function () {
+ const image = preview.element.querySelector('img[alt=Image2]')
+ expect(image.src).toMatch(
+ url.parse(atom.project.getDirectories()[0].resolve('tmp/image2.png'))
+ )
+ })
+ })
+
+ describe('when the image uses an absolute path that exists', function () {
+ it("doesn't change the URL when allowUnsafeProtocols is true", function () {
+ preview.destroy()
+
+ atom.config.set('markdown-preview.allowUnsafeProtocols', true)
+
+ const filePath = path.join(temp.mkdirSync('atom'), 'foo.md')
+ fs.writeFileSync(filePath, ``)
+ preview = new MarkdownPreviewView({ filePath })
+ jasmine.attachToDOM(preview.element)
+
+ waitsForPromise(() => preview.renderMarkdown())
+
+ runs(() =>
+ expect(
+ preview.element.querySelector('img[alt=absolute]').src
+ ).toMatch(url.parse(filePath))
+ )
+ })
+ })
+
+ it('removes the URL when allowUnsafeProtocols is false', function () {
+ preview.destroy()
+
+ atom.config.set('markdown-preview.allowUnsafeProtocols', false)
+
+ const filePath = path.join(temp.mkdirSync('atom'), 'foo.md')
+ fs.writeFileSync(filePath, ``)
+ preview = new MarkdownPreviewView({ filePath })
+ jasmine.attachToDOM(preview.element)
+
+ waitsForPromise(() => preview.renderMarkdown())
+
+ runs(() =>
+ expect(preview.element.querySelector('img[alt=absolute]').src).toMatch(
+ ''
+ )
+ )
+ })
+
+ describe('when the image uses a web URL', function () {
+ it("doesn't change the URL", function () {
+ const image = preview.element.querySelector('img[alt=Image3]')
+ expect(image.src).toBe('http://github.com/image3.png')
+ })
+ })
+ })
+
+ describe('gfm newlines', function () {
+ describe('when gfm newlines are not enabled', function () {
+ it('creates a single paragraph with cmd-ctrl-shift-g (macOS) and ctrl-shift-g (Windows and Linux) opens it in a new tab
+* You can click on the section headings to expand/collapse them
+
+
diff --git a/packages/styleguide/keymaps/styleguide.cson b/packages/styleguide/keymaps/styleguide.cson
new file mode 100644
index 0000000000..bc48b6d1a2
--- /dev/null
+++ b/packages/styleguide/keymaps/styleguide.cson
@@ -0,0 +1,5 @@
+'.platform-darwin':
+ 'cmd-ctrl-G': 'styleguide:show'
+
+'.platform-win32, .platform-linux':
+ 'ctrl-G': 'styleguide:show'
diff --git a/packages/styleguide/lib/code-block.js b/packages/styleguide/lib/code-block.js
new file mode 100644
index 0000000000..02eaf06548
--- /dev/null
+++ b/packages/styleguide/lib/code-block.js
@@ -0,0 +1,17 @@
+const {TextEditor} = require('atom')
+
+module.exports =
+class CodeBlock {
+ constructor (props) {
+ this.editor = new TextEditor({readonly: true, keyboardInputEnabled: false})
+ this.element = document.createElement('div')
+ this.element.appendChild(this.editor.getElement())
+ atom.grammars.assignLanguageMode(this.editor, props.grammarScopeName)
+ this.update(props)
+ }
+
+ update ({cssClass, code}) {
+ this.editor.setText(code)
+ this.element.classList.add(cssClass)
+ }
+}
diff --git a/packages/styleguide/lib/example-select-list-view.js b/packages/styleguide/lib/example-select-list-view.js
new file mode 100644
index 0000000000..1454251ea9
--- /dev/null
+++ b/packages/styleguide/lib/example-select-list-view.js
@@ -0,0 +1,68 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import SelectListView from 'atom-select-list'
+import etch from 'etch'
+import dedent from 'dedent'
+import CodeBlock from './code-block'
+
+export default class ExampleSelectListView {
+ constructor () {
+ this.jsExampleCode = dedent`
+ import SelectListView from 'atom-select-list'
+
+ const selectListView = new SelectListView({
+ items: ['one', 'two', 'three'],
+ elementForItem: (item) => {
+ const li = document.createElement('li')
+ li.textContent = item
+ return li
+ },
+ didConfirmSelection: (item) => {
+ console.log('confirmed', item)
+ },
+ didCancelSelection: () => {
+ console.log('cancelled')
+ }
+ })
+ `
+ etch.initialize(this)
+ }
+
+ elementForItem (item) {
+ const li = document.createElement('li')
+ li.textContent = item
+ return li
+ }
+
+ didConfirmSelection (item) {
+ console.log('confirmed', item)
+ }
+
+ didCancelSelection () {
+ console.log('cancelled')
+ }
+
+ render () {
+ return (
+
+ )
+ }
+
+ update () {
+
+ }
+}
diff --git a/packages/styleguide/lib/styleguide-section.js b/packages/styleguide/lib/styleguide-section.js
new file mode 100644
index 0000000000..afd49e6b86
--- /dev/null
+++ b/packages/styleguide/lib/styleguide-section.js
@@ -0,0 +1,73 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import etch from 'etch'
+
+export default class StyleguideSection {
+ constructor (props, children) {
+ this.collapsed = props.collapsed
+ this.title = props.title
+ this.name = props.name
+ this.children = children
+ etch.initialize(this)
+ if (props.onDidInitialize) {
+ props.onDidInitialize(this)
+ }
+ }
+
+ render () {
+ if (this.loaded) {
+ let className = 'bordered'
+ if (this.collapsed) {
+ className += ' collapsed'
+ }
+ return (
+
+ this.toggle()}>{this.title}
+ {this.children}
+
+ )
+ } else {
+ return (
+
+ this.toggle()}>{this.title}
+
+ )
+ }
+ }
+
+ update (props, children) {
+ if (props.title) {
+ this.title = props.title
+ }
+
+ if (props.name) {
+ this.name = props.name
+ }
+
+ if (children) {
+ this.children = children
+ }
+
+ if (props.didExpandOrCollapseSection) {
+ this.didExpandOrCollapseSection = props.onDidExpandOrCollapseSection
+ }
+
+ return etch.update(this)
+ }
+
+ toggle () {
+ return this.collapsed ? this.expand() : this.collapse()
+ }
+
+ expand () {
+ this.collapsed = false
+ this.loaded = true
+ return etch.update(this)
+ }
+
+ collapse () {
+ this.collapsed = true
+ return etch.update(this)
+ }
+}
diff --git a/packages/styleguide/lib/styleguide-view.js b/packages/styleguide/lib/styleguide-view.js
new file mode 100644
index 0000000000..ad0a326a7c
--- /dev/null
+++ b/packages/styleguide/lib/styleguide-view.js
@@ -0,0 +1,1266 @@
+/** @babel */
+/** @jsx etch.dom */
+
+import etch from 'etch'
+import dedent from 'dedent'
+import CodeBlock from './code-block'
+import StyleguideSection from './styleguide-section'
+import ExampleSelectListView from './example-select-list-view'
+
+export default class StyleguideView {
+ constructor (props) {
+ this.uri = props.uri
+ this.collapsedSections = props.collapsedSections ? new Set(props.collapsedSections) : new Set()
+ this.sections = []
+ etch.initialize(this)
+ for (const section of this.sections) {
+ if (this.collapsedSections.has(section.name)) {
+ section.collapse()
+ } else {
+ section.expand()
+ }
+ }
+ }
+
+ destroy () {
+ this.sections = null
+ }
+
+ serialize () {
+ return {
+ deserializer: this.constructor.name,
+ collapsedSections: this.sections.filter((s) => s.collapsed).map((s) => s.name),
+ uri: this.uri
+ }
+ }
+
+ update () {
+ // intentionally empty.
+ }
+
+ getURI () {
+ return this.uri
+ }
+
+ getTitle () {
+ return 'Styleguide'
+ }
+
+ getIconName () {
+ return 'paintcan'
+ }
+
+ expandAll () {
+ for (const section of this.sections) {
+ section.expand()
+ }
+ }
+
+ collapseAll () {
+ for (const section of this.sections) {
+ section.collapse()
+ }
+ }
+
+ render () {
+ return (
+
+
+ Styleguide
+ This exercises all UI components and acts as a styleguide.
+
+
+ this.collapseAll()}>Collapse All
+ this.expandAll()}>Expand All
+
+
+
+
+
+ Use these UI variables in your package's stylesheets. They are set by UI themes and therefore your package will match the overall look. Make sure to @import 'ui-variables' in your stylesheets to use these variables.
+ Text colors
+ {this.renderExampleHTML(dedent`
+ @text-color
+ @text-color-subtle
+ @text-color-highlight
+ @text-color-selected
+
+ @text-color-info
+ @text-color-success
+ @text-color-warning
+ @text-color-error
+ `)}
+
+ Background colors
+ {this.renderExampleHTML(dedent`
+ @background-color-info
+ @background-color-success
+ @background-color-warning
+ @background-color-error
+
+ @background-color-highlight
+ @background-color-selected
+ @app-background-color
+ `)}
+
+ Base colors
+ {this.renderExampleHTML(dedent`
+ @base-background-color
+ @base-border-color
+ `)}
+
+ Component colors
+ {this.renderExampleHTML(dedent`
+ @pane-item-background-color
+ @pane-item-border-color
+
+ @input-background-color
+ @input-border-color
+
+ @tool-panel-background-color
+ @tool-panel-border-color
+ @inset-panel-background-color
+ @inset-panel-border-color
+ @panel-heading-background-color
+ @panel-heading-border-color
+ @overlay-background-color
+ @overlay-border-color
+
+ @button-background-color
+ @button-background-color-hover
+ @button-background-color-selected
+ @button-border-color
+
+ @tab-bar-background-color
+ @tab-bar-border-color
+ @tab-background-color
+ @tab-background-color-active
+ @tab-border-color
+
+ @tree-view-background-color
+ @tree-view-border-color
+ `)}
+
+ Site colors
+ {this.renderExampleHTML(dedent`
+ @ui-site-color-1
+ @ui-site-color-2
+ @ui-site-color-3
+ @ui-site-color-4
+ @ui-site-color-5
+ `)}
+
+ Sizes
+ {this.renderExampleHTML(dedent`
+ @disclosure-arrow-size
+ @component-padding
+ @component-icon-padding
+ @component-icon-size
+ @component-line-height
+ @tab-height
+ @font-size
+ `)}
+
+ Misc
+ {this.renderExampleHTML(dedent`
+ @component-border-radius
+ @font-family
+ `)}
+
+
+
+ Atom comes bundled with the Octicons. It lets you easily add icons to your packages.
+ Currently version 4.4.0 is available. In addition some older icons from version 2.1.2 are still kept for backwards compatibility. Make sure to use the icon icon- prefix in front of an icon name. See the documentation for more details.
+
+ Octicons
+ {this.renderExampleHTML(dedent`
+ alert
+ alignment-align
+ alignment-aligned-to
+ alignment-unalign
+ arrow-down
+ arrow-left
+ arrow-right
+ arrow-small-down
+ arrow-small-left
+ arrow-small-right
+ arrow-small-up
+ arrow-up
+ beaker
+ beer
+ bell
+ bold
+ book
+ bookmark
+ briefcase
+ broadcast
+ browser
+ bug
+ calendar
+ check
+ checklist
+ chevron-down
+ chevron-left
+ chevron-right
+ chevron-up
+ circle-slash
+ circuit-board
+ clippy
+ clock
+ cloud-download
+ cloud-upload
+ code
+ color-mode
+
+
+
+ credit-card
+ dash
+ dashboard
+ database
+ desktop-download
+ device-camera
+ device-camera-video
+ device-desktop
+ device-mobile
+ diff
+ diff-added
+ diff-ignored
+ diff-modified
+ diff-removed
+ diff-renamed
+ ellipses
+ ellipsis
+ eye
+ eye-unwatch
+ eye-watch
+ file
+ file-add
+ file-binary
+ file-code
+ file-directory
+ file-directory-create
+ file-media
+ file-pdf
+ file-submodule
+ file-symlink-directory
+ file-symlink-file
+ file-text
+ file-zip
+ flame
+ fold
+ gear
+ gift
+ gist
+ gist-fork
+ gist-new
+ gist-private
+ gist-secret
+ git-branch
+ git-branch-create
+ git-branch-delete
+ git-commit
+ git-compare
+ git-fork-private
+ git-merge
+ git-pull-request
+ git-pull-request-abandoned
+ globe
+ grabber
+ graph
+ heart
+ history
+ home
+ horizontal-rule
+ hourglass
+ hubot
+ inbox
+ info
+ issue-closed
+ issue-opened
+ issue-reopened
+ italic
+ jersey
+ jump-down
+ jump-left
+ jump-right
+ jump-up
+ key
+ keyboard
+ law
+ light-bulb
+ link
+ link-external
+ list-ordered
+ list-unordered
+ location
+ lock
+ log-in
+ log-out
+ logo-gist
+ logo-github
+ mail
+ mail-read
+ mail-reply
+ mark-github
+ markdown
+ megaphone
+ mention
+ microscope
+ milestone
+ mirror
+ mirror-private
+ mirror-public
+ mortar-board
+ move-down
+ move-left
+ move-right
+ move-up
+ mute
+ no-newline
+ octoface
+ organization
+ package
+ paintcan
+ pencil
+ person
+ person-add
+ person-follow
+ pin
+ playback-fast-forward
+ playback-pause
+ playback-play
+ playback-rewind
+ plug
+ plus-small
+ plus
+ podium
+ primitive-dot
+ primitive-square
+ pulse
+ puzzle
+ question
+ quote
+ radio-tower
+ remove-close
+ reply
+ repo
+ repo-clone
+ repo-create
+ repo-delete
+ repo-force-push
+ repo-forked
+ repo-pull
+ repo-push
+ repo-sync
+ rocket
+
+ ruby
+ screen-full
+ screen-normal
+ search
+ search-save
+ server
+ settings
+ shield
+ sign-in
+ sign-out
+ smiley
+ split
+ squirrel
+ star
+ star-add
+ star-delete
+ steps
+ stop
+ sync
+ tag
+ tag-add
+ tag-remove
+ tasklist
+ telescope
+ terminal
+ text-size
+ three-bars
+ thumbsdown
+ thumbsup
+ tools
+ trashcan
+ triangle-down
+ triangle-left
+ triangle-right
+ triangle-up
+ unfold
+ unmute
+ unverified
+ verified
+ versions
+ watch
+ x
+ zap
+ `)}
+
+
+
+ Various inputs and controls.
+
+ Text Inputs
+ {this.renderExampleHTML(dedent`
+ Controls
+ {this.renderExampleHTML(dedent`
+ Misc
+ {this.renderExampleHTML(dedent`
+ Option 1 Option 2 Option 3
+
+
+ There are a number of text classes.
+
+ text-* classes
+ {this.renderExampleHTML(dedent`
+ Smaller text
+ Normal text
+ Subtle text
+ Highlighted text
+ Info text
+ Success text
+ Warning text
+ Error text
+ `)}
+
+ highlight-* classes
+ {this.renderExampleHTML(dedent`
+ Normal
+ Highlighted
+ Info
+ Success
+ Warning
+ Error
+ `)}
+
+
+
+ A few things that might be useful for general layout.
+
+ .block
+ Sometimes you need to separate components vertically. Say in a form.
+ {this.renderExampleHTML(dedent`
+
+
You might want to type something here.
+
Something you typed...
+
+
Another field with an icon
+
Something else you typed...
+
+ Do it
+
+ `)}
+
+ .inline-block
+ Sometimes you need to separate components horizontally.
+ {this.renderExampleHTML(dedent`
+
+ Do it
+ Another
+ OMG again
+
+ `)}
+
+ .inline-block-tight
+ You might want things to be a little closer to each other.
+ {this.renderExampleHTML(dedent`
+
+ Do it
+ Another
+ OMG again
+
+ `)}
+
+
+
+ Often we need git related classes to specify status.
+
+ status-* classes
+ {this.renderExampleHTML(dedent`
+ Ignored
+ Added
+ Modified
+ Removed
+ Renamed
+ `)}
+
+ status-* classes with related icons
+ {this.renderExampleHTML(dedent`
+
+
+
+ Site colors are used for collaboration. A site is another collaborator.
+
+ ui-site-* classes
+
+ These classes only set the background color, no other styles.
+ You can also use LESS variables @ui-site-# in your plugins where
+ # is a number between 1 and 5.
+
+ Site colors will always be in the color progression you see here.
+ {this.renderExampleHTML(dedent`
+
+
+
+
+
+ `)}
+
+
+
+ Badges are typically used to show numbers.
+
+ Standalone badges
+ {this.renderExampleHTML(dedent`
+
+ 0
+ 8
+ 27
+ 450
+ 2869
+
+ `)}
+
+ Colored badges
+ {this.renderExampleHTML(dedent`
+
+ 78
+ 3
+ 14
+ 1845
+
+ `)}
+
+ Badge sizes
+ By default the @font-size variable from themes is used. Additionally there are also 3 predefined sizes.
+ {this.renderExampleHTML(dedent`
+ Large 8
+ Medium 2
+ Small 7
+ `)}
+
+ If you like the size change depending on the parent, use the badge-flexible class. Note: Best used for larger sizes. For smaller sizes it could cause the number to be mis-aligned by a pixel.
+ {this.renderExampleHTML(dedent`
+ Heading 1
+ Heading 2
+ Heading 3
+ `)}
+
+ Icon Badges
+ See the icons section to get an overview of all Octicons.
+ {this.renderExampleHTML(dedent`
+
+ 4
+ 13
+ 5
+
+ `)}
+
+
+
+ Buttons are similar to bootstrap buttons
+
+ Standalone buttons
+ {this.renderExampleHTML(dedent`
+
+ Button
+
+
+ Extra Small Button
+
+
+ Small Button
+
+
+ Large Button
+
+ `)}
+
+ Colored buttons
+ {this.renderExampleHTML(dedent`
+
+ Primary
+ Selected Primary
+
+
+
+ Info
+ Selected Info
+
+
+
+ Success
+ Selected Success
+
+
+
+ Warning
+ Selected Warning
+
+
+
+ Error
+ Selected Error
+
+ `)}
+
+ Icon buttons
+ Overview of all Octicons .
+ {this.renderExampleHTML(dedent`
+
+ Settings
+ Install
+ Danger
+
+ `)}
+
+ Button Groups
+ {this.renderExampleHTML(dedent`
+
+
Normal size
+
+ One
+ Two
+ Three
+
+
+
Extra Small
+
+ One
+ Two
+ Three
+
+
+
Small
+
+ One
+ Two
+ Three
+
+
+
Large
+
+ One
+ Two
+ Three
+
+
Button Toolbars
+ {this.renderExampleHTML(dedent`
+
+ `)}
+
+ Selected buttons
+ Buttons can be marked selected by adding a .selected class. Useful for toggle groups.
+ {this.renderExampleHTML(dedent`
+
+
+ One
+ Two
+ Three
+
+
+
+ One
+ Two
+ Three
+
+
+
+ One
+ Two
+ Three
+
+
+
+ One
+ Two
+ Three
+
+
+
+
+ A container attached to some side of the Atom UI.
+ {this.renderExampleHTML(dedent`
+
+ Some content
+
+ `)}
+
+ Inset Panel
+ Use inside a panel
+ {this.renderExampleHTML(dedent`
+
+ Some inset content
+
+ `)}
+
+ With a heading
+ {this.renderExampleHTML(dedent`
+
+
+
An inset-panel heading
+
Some Content
+
+ `)}
+
+
+
+ Use for anything that requires a list.
+ {this.renderExampleHTML(dedent`
+
+ Normal item This is the Selected item Subtle Info Success Warning Error
+ `)}
+
+ With icons
+ {this.renderExampleHTML(dedent`
+
+
+ Using a span with an icon
+
+
+ With .icon-file-directory using <i> tags
+
+
+ Selected with .icon-file-directory
+
+
+ With .no-icon
+
+
+ With icon-file-text
+
+
+ With icon-file-media
+
+
+ With icon-file-symlink-file
+
+
+ With icon-file-submodule
+
+
+ With icon-book
+
+
+ `)}
+
+
+
+ A .list-tree is a special case of .list-group.
+ {this.renderExampleHTML(dedent`
+
+
+
+ A Directory
+
+
+
+
+
+
+ .icon-file-text
+
+
+
+ .icon-file-symlink-file
+
+ `)}
+
+ With disclosure arrows
+ Add the class .has-collapsable-children to give the children with nested items disclosure arrows.
+ {this.renderExampleHTML(dedent`
+
+
+
+ A Directory
+
+
+
+
+
+
+ .icon-file-text
+
+
+
+ .icon-file-symlink-file
+
+
+ `)}
+
+ With disclosure arrows at only one level.
+ Add the class .has-flat-children to sub-.list-trees to indicate that the children will not be collapsable.
+ {this.renderExampleHTML(dedent`
+
+ `)}
+
+
+
+ This is how you will typically specify a .select-list.
+ The list items have many options you can use, and shows you how they will display.
+
+ Basic example with one item selected
+ {this.renderExampleHTML(dedent`
+
+
+
+ one
+ two
+ three
+
+
+ `)}
+
+ Single line with icons
+ {this.renderExampleHTML(dedent`
+
+
+
+
+
+ Some file
+
+
+
+
+ Another file
+
+
+
+
+ Yet another file
+
+
+
+ `)}
+
+ Single line with key-bindings
+ {this.renderExampleHTML(dedent`
+
+
+
+
+
+ ⌘⌥↓
+
+
+ Some file
+
+
+
+
+ ⌘⌥A
+ ⌘⌥O
+
+
+ Another file with a long name
+
+
+
+
+ ⌘⌥↓
+
+
+ Yet another file
+
+
+
+ `)}
+
+ Multiple lines with no icons
+ {this.renderExampleHTML(dedent`
+
+
+
+
+ Primary line
+ Secondary line
+
+
+
+ A thing
+ Description of the thing
+
+
+
+ `)}
+
+ Multiple lines with icons
+ {this.renderExampleHTML(dedent`
+
+
+
+
+
+ Primary line
+ Secondary line
+
+
+
+
+ A thing
+ Description of the thing
+
+
+
+
+ A thing
+ Description of the thing
+
+
+
+ `)}
+
+ Using mark-active class to indicate the active item
+ Use ...
+ {this.renderExampleHTML(dedent`
+
+
+
+ Selected — user is arrowing through the list.
+ This is the active item
+ Selected AND Active!
+
+
+ `)}
+
+ Error messages
+ {this.renderExampleHTML(dedent`
+
+
+
I searched for this
+
Nothing has been found!
+
+ `)}
+
+ Loading message
+ {this.renderExampleHTML(dedent`
+
+
+
User input
+
+ Chill, bro. Things are loading.
+ 1234
+
+
+ `)}
+
+
+
+
+ A .popover-list is a .select-list that
+ is meant to popover the code for something like autocomplete.
+
+
+ Basic example with one item selected
+ {this.renderExampleHTML(dedent`
+
+
'User types here..'
+
+ one
+ two
+ three
+
+
+
+
+ Modals are like dialog boxes.
+ {this.renderExampleHTML(dedent`
+
+ Some content
+
+ `)}
+
+
+
+
+ You do not create the markup directly. You call
+ {`element.setTooltip(title, {command, commandElement}={})`}.
+ Passing in a command (like find-and-replace:show-find) and
+ commandElement (context for the command) will yield a tip with a keystroke.
+
+
+ {this.renderExampleHTML(dedent`
+
+
+
+ `)}
+
+
+
+
+ Use to convey info to the user when something happens. See find-and-replace
+ for an example.
+
+
+ Error messages
+ {this.renderExampleHTML(dedent`
+
+ This is an error!
+ And another
+
+ `)}
+
+ Info messages
+ {this.renderExampleHTML(dedent`
+
+ Info line
+ Another info line
+
+ `)}
+
+ Background Messages
+
+ Subtle background messages for panes. Use for cases when there are no results.
+
+
+ {this.renderExampleHTML(dedent`
+
+ `)}
+
+
+ Centered background messages will center horizontally and vertically.
+ Your container for this element must have position set with relative or
+ absolute.
+
+
+ {this.renderExampleHTML(dedent`
+
+ `)}
+
+
+
+ Progress Bars
+ {this.renderExampleHTML(dedent`
+
+
+
+
+
+
+
+
+
+ `)}
+
+ Loading Spinners
+ {this.renderExampleHTML(dedent`
+
+
+
