diff --git a/spec/InputView-spec.js b/spec/input-view-spec.js similarity index 97% rename from spec/InputView-spec.js rename to spec/input-view-spec.js index 35a4223..2659383 100644 --- a/spec/InputView-spec.js +++ b/spec/input-view-spec.js @@ -33,7 +33,7 @@ describe("InputView", () => { it("description", () => { const view = new InputView({ description: "description" }); - expect(view.element.querySelector(".input-view-description").innerHTML).toBe("description"); + expect(view.element.querySelector(".input-view-description").innerHTML).toBe("
description
"); view.resolve(); }); diff --git a/src/views/input-view.js b/src/views/input-view.js index dc65260..4c0f64b 100644 --- a/src/views/input-view.js +++ b/src/views/input-view.js @@ -5,28 +5,30 @@ const { CompositeDisposable, TextEditor } = require("atom"); const marked = require("marked"); const etch = require("etch"); -const renderer = new marked.Renderer(); -renderer.code = () => ""; -renderer.blockquote = () => ""; -renderer.heading = () => ""; -renderer.html = () => ""; -renderer.image = () => ""; -renderer.list = () => ""; - let oldView; function markedCache(md) { + // eslint-disable-next-line eqeqeq + md = (md == null ? "" : String(md)); + if (!this.cache) { this.cache = {}; } - if (md) { - if (!this.cache[md]) { - this.cache[md] = marked(md, { renderer }).replace(/(.*)<\/p>/, "$1").trim(); - } - return this.cache[md]; + + if (!this.cache[md]) { + this.cache[md] = marked(md).trim(); } + + return this.cache[md]; } +const defaults = { + title: "", + description: "", + placeholder: "", + value: "", +}; + module.exports = class InputView { constructor(props = {}) { if (oldView) { @@ -34,25 +36,29 @@ module.exports = class InputView { } oldView = this; - this.props = { ...props }; + this.props = { ...defaults, ...props }; etch.initialize(this); + this.renderPromise = Promise.resolve(); + + this.element.addEventListener("focusout", (e) => this.didChangeFocus(e)); + this.editor = this.refs.editor; - const editorElement = this.editor.getElement(); - this.updateText(); - for (const element of [this.element, ...this.element.querySelectorAll("*")]) { - element.addEventListener("blur", (e) => this.didChangeFocus(e)); + if (this.props.value) { + this.editor.setText(this.props.value); + this.editor.selectAll(); } this.panel = atom.workspace.addModalPanel({ item: this, autoFocus: true }); - this.editor.selectAll(); + const editorElement = atom.views.getView(this.editor); this.disposables = new CompositeDisposable(); this.disposables.add( + this.editor.onDidStopChanging(() => this.didChangeValue()), atom.commands.add(editorElement, "core:cancel", () => this.destroy()), atom.commands.add(editorElement, "core:confirm", () => this.confirm()), - this.panel.onDidChangeVisible(v => this.didChangeVisibility(v)), + this.panel.onDidChangeVisible(visible => this.didChangeVisibility(visible)), ); this.panel.show(); @@ -76,17 +82,19 @@ module.exports = class InputView { } } - async update(props = {}) { - this.props = { ...this.props, ...props }; - - await etch.update(this); + didChangeValue() { + this.props.value = this.editor.getText(); } - updateText() { - if (this.props.value) { - this.editor.setText(this.props.value); - delete this.props.value; - } + update(props = {}) { + this.props = { ...this.props, ...props }; + + this.renderPromise = etch.update(this).then(() => { + if ("value" in props) { + this.editor.setText(props.value); + } + }); + return this.renderPromise; } render() { @@ -122,8 +130,9 @@ module.exports = class InputView { } async confirm() { - const gistId = this.editor.getText(); - this.resolve(gistId); + this.didChangeValue(); + const value = this.props.value; + this.resolve(value); await this.destroy(); } }; diff --git a/styles/input-view.less b/styles/input-view.less new file mode 100644 index 0000000..211b9e3 --- /dev/null +++ b/styles/input-view.less @@ -0,0 +1,15 @@ +@import 'ui-variables'; + +.input-view { + .input-view-description { + margin-bottom: 0.5em; + + > p:last-child { + margin-bottom: 0; + } + } + + atom-text-editor { + margin-bottom: 0 !important; + } +}