From a84e713e6a6bb13a7a8fd8b5034f8b65d09791e9 Mon Sep 17 00:00:00 2001 From: Klaus Nielsen Date: Tue, 7 Mar 2017 22:32:40 +0100 Subject: [PATCH] Added media query and configs for editor also added placeholder --- bower.json | 1 + demo/index.html | 1 + markdown-editor.html | 181 ++++++++++++++++++++++------- medium-editor-markdown-import.html | 2 +- 4 files changed, 141 insertions(+), 44 deletions(-) diff --git a/bower.json b/bower.json index b5576fa..1eb010c 100644 --- a/bower.json +++ b/bower.json @@ -4,6 +4,7 @@ "dependencies": { "components-font-awesome": "^4.7.0", "demo-content": "kriss-kross-io/demo-content#^0.0.4", + "iron-media-query": "PolymerElements/iron-media-query#^1.0.8", "marked-element": "PolymerElements/marked-element#^1.2.0", "medium-editor-markdown": "IonicaBizau/medium-editor-markdown#^2.6.1", "paper-input": "PolymerElements/paper-input#^1.1.22", diff --git a/demo/index.html b/demo/index.html index d8d9d0c..204cd68 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,6 +22,7 @@

Basic markdown-editor demo

diff --git a/markdown-editor.html b/markdown-editor.html index f6c5756..ca448de 100644 --- a/markdown-editor.html +++ b/markdown-editor.html @@ -4,6 +4,9 @@ + + + @@ -26,6 +29,12 @@ :host { display: block; } + /*TODO: fix missing styling*/ + /*:host ::content .markdown-html blockquote { + padding: 0 1em; + color: #777; + border-left: 0.25em solid #ddd; + }*/ #preview { background-color: #ededed; overflow-x: scroll; @@ -35,6 +44,8 @@ } + + @@ -54,6 +65,28 @@ is: 'markdown-editor', properties: { + /** + * Instance of MediumEditor class + */ + editor: { + type: Object, + readOnly: true, + observer: '_editorChanged' + }, + /** + * Custom placeholder text shown in the editor window + */ + placeholderText: { + type: String, + value: null + }, + /** + * Hides the placeholder upon clicking the text editor when true + */ + placeholderHide: { + type: Boolean, + value: true + }, /** * The markdown to be rendered */ @@ -68,57 +101,119 @@ type: Boolean, reflectToAttribute: true, value: false + }, + _smallScreen: { + type: Boolean + } + }, + + ready: function () { + this._initializeEditor(); + }, + + _initializeEditor: function () { + if (this.editor) { + this.editor.destroy(); + this._setEditor(null); + } + this._setEditor(new MediumEditor(this.$.input, this._buildOptions())); + + // cleaning span tags + this.editor.subscribe('editableInput', this._handleEditableInput.bind(this)); + }, + + _buildOptions: function () { + var options = {}; + + options['disableExtraSpaces'] = true; + options['buttonLabels'] = 'fontawesome'; + options['targetBlank'] = true; + + // TOOLBAR + var toolbarOptions = {}; + toolbarOptions['buttons'] = [ + 'bold', + 'italic', + 'anchor', + 'h1', + 'h2', + 'h3', + 'quote', + 'unorderedlist', + 'orderedlist', + 'removeFormat' + ]; + if (this._smallScreen) { + toolbarOptions['static'] = true; + toolbarOptions['sticky'] = true; + } + options['toolbar'] = toolbarOptions; + + // PASTE + var pasteOptions = {}; + pasteOptions['forcePlainText'] = true; + options['paste'] = pasteOptions; + + // PLACEHOLDER + placeholderOptions = {}; + if (this.placeholderText) { + if (this.placeholderText) { + placeholderOptions['text'] = this.placeholderText; + } + if (this.placeholderHide) { + placeholderOptions['hideOnClick'] = this.placeholderHide; + } } + options['placeholder'] = placeholderOptions; + + // EXTENSIONS + var extensionOptions = {}; + extensionOptions['markdown'] = new MeMarkdown({ + events: [ + 'input', + 'change', + 'click', + 'focus' + ] + }, function(markdown) { + this._handleOutput(markdown); + }.bind(this)); + options['extensions'] = extensionOptions; + + return options; }, - ready: function() { - this.renderMarkdown(); - - new MediumEditor(this.$.input, { - extensions: { - markdown: new MeMarkdown(function(md) { - // console.log('md:\n%O', md); - this.set('markdown', md); - }.bind(this)) - }, - toolbar: { - buttons: [ - 'bold', - 'italic', - 'anchor', - 'h1', - 'h2', - 'h3', - 'quote', - 'unorderedlist', - 'orderedlist', - 'removeFormat' - ], - static: true, - sticky: true - }, - paste: { - forcePlainText: true - }, - disableExtraSpaces: true, - buttonLabels: 'fontawesome', - targetBlank: true, - placeholder: false - }).subscribe('editableKeypress', function(event, element) { - // cleanse those span tags - var spanList = element.getElementsByTagName('span'); - for (var i = 0; i < spanList.length; i++) { - spanList[i].outerHTML = spanList[i].innerHTML; - }; - }); + _handleEditableInput: function (event, element) { + // clean those span tags + var spanList = element.getElementsByTagName('span'); + for (var i = 0; i < spanList.length; i++) { + spanList[i].outerHTML = spanList[i].innerHTML; + }; + }, + + _handleOutput: function (md) { + if (this._editorReady) { + // console.log('md:\n"%s"', md); + this.set('markdown', md); + } + }, + + _editorChanged: function(editor) { + if (editor) { + this.renderMarkdown(); + this.set('_editorReady', true); + + if (this.markdown) { + this.editor.trigger('focus', {}, this.$.input); + } + } }, /** - * Resets the input and applies the markdown property to `marked-element` + * Applies the markdown property to `marked-element` */ renderMarkdown: function() { - this.$.input.innerHTML = null; - + // console.log('renderMarkdown: %s', this.markdown); this.$.marked.markdown = this.markdown; } diff --git a/medium-editor-markdown-import.html b/medium-editor-markdown-import.html index 6918040..61ffbb2 100644 --- a/medium-editor-markdown-import.html +++ b/medium-editor-markdown-import.html @@ -1,6 +1,6 @@ - +