From 5188ed8cfe347ee2d4521aca242d250ebcbae6bd Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Mon, 21 Nov 2016 21:53:30 -0500 Subject: Rewrite markdown editor in vanilla Javascript --- assets/js/components/text-editor.js | 276 +++++++++++++++++------------------- 1 file changed, 129 insertions(+), 147 deletions(-) (limited to 'assets/js/components') diff --git a/assets/js/components/text-editor.js b/assets/js/components/text-editor.js index 625ade0d..5011318b 100644 --- a/assets/js/components/text-editor.js +++ b/assets/js/components/text-editor.js @@ -1,158 +1,140 @@ -Vue.component('texteditor', { - props: ['text', 'name', 'labelPreview', 'labelWrite', 'placeholder', 'css', 'tabindex', 'required', 'autofocus'], - template: - '
' + - '
' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + - '
' + - '' + - '
' + - '
{{{ renderedText }}}
' + - '
' - , - data: function() { - return { - id: null, - preview: false, - renderedText: '', - textarea: null, - selectionStart: 0, - selectionEnd: 0 - }; - }, - ready: function() { - this.textarea = document.getElementById(this.id); - }, - computed: { - hasAutofocus: function() { - return this.autofocus === '1'; - }, - isPreview: function() { - return this.preview; - }, - getId: function() { - if (! this.id) { - var i = 0; - var uniqueId; - - while (true) { - i++; - uniqueId = 'text-editor-textarea-' + i; - - if (! document.getElementById(uniqueId)) { - break; - } - } +KB.component('text-editor', function (containerElement, options) { + var textarea, viewModeElement, writeModeElement, previewElement, selectionStart, selectionEnd; + + this.render = function() { + writeModeElement = buildWriteMode(); + viewModeElement = buildViewMode(); + + containerElement.appendChild(KB.el('div') + .attr('class', 'text-editor') + .add(viewModeElement) + .add(writeModeElement) + .build()); + }; + + function buildViewMode() { + var toolbarElement = KB.el('div') + .attr('class', 'text-editor-toolbar') + .for('a', [ + {href: '#', html: ' ' + options.labelWrite, click: function() { toggleViewMode(); }} + ]) + .build(); + + previewElement = KB.el('div') + .attr('class', 'text-editor-preview-area markdown') + .build(); + + return KB.el('div') + .attr('class', 'text-editor-view-mode') + .add(toolbarElement) + .add(previewElement) + .hide() + .build(); + } + + function buildWriteMode() { + var toolbarElement = KB.el('div') + .attr('class', 'text-editor-toolbar') + .for('a', [ + {href: '#', html: ' ' + options.labelPreview, click: function() { toggleViewMode(); }}, + {href: '#', html: '', click: function() { insertEnclosedTag('**'); }}, + {href: '#', html: '', click: function() { insertEnclosedTag('_'); }}, + {href: '#', html: '', click: function() { insertEnclosedTag('~~'); }}, + {href: '#', html: '', click: function() { insertPrependTag('> '); }}, + {href: '#', html: '', click: function() { insertPrependTag('* '); }}, + {href: '#', html: '', click: function() { insertBlockTag('```'); }} + ]) + .build(); + + textarea = KB.el('textarea') + .attr('name', options.name) + .attr('tabindex', options.tabindex || '-1') + .attr('required', options.required || false) + .attr('autofocus', options.autofocus || null) + .attr('placeholder', options.placeholder || '') + .text(options.text) + .build(); + + return KB.el('div') + .attr('class', 'text-editor-write-mode') + .add(toolbarElement) + .add(textarea) + .build(); + } + + function toggleViewMode() { + KB.el(previewElement).html(marked(textarea.value, {sanitize: true})); + KB.el(viewModeElement).toggle(); + KB.el(writeModeElement).toggle(); + } + + function getSelectedText() { + return textarea.value.substring(textarea.selectionStart, textarea.selectionEnd); + } + + function replaceTextRange(s, start, end, substitute) { + return s.substring(0, start) + substitute + s.substring(end); + } + + function insertEnclosedTag(tag) { + var selectedText = getSelectedText(); - this.id = uniqueId; + insertText(tag + selectedText + tag); + setCursorBeforeClosingTag(tag); + } + + function insertBlockTag(tag) { + var selectedText = getSelectedText(); + + insertText('\n' + tag + '\n' + selectedText + '\n' + tag); + setCursorBeforeClosingTag(tag, 2); + } + + function insertPrependTag(tag) { + var selectedText = getSelectedText(); + + if (selectedText.indexOf('\n') === -1) { + insertText('\n' + tag + selectedText); + } else { + var lines = selectedText.split('\n'); + + for (var i = 0; i < lines.length; i++) { + if (lines[i].indexOf(tag) === -1) { + lines[i] = tag + lines[i]; + } } - return this.id; + insertText(lines.join('\n')); } - }, - methods: { - toggleEditor: function() { - this.preview = false; - }, - togglePreview: function() { - this.preview = true; - this.renderedText = marked(this.text, {sanitize: true}); - }, - insertBoldTag: function() { - this.insertEnclosedTag('**'); - }, - insertItalicTag: function() { - this.insertEnclosedTag('_'); - }, - insertStrikethroughTag: function() { - this.insertEnclosedTag('~~'); - }, - insertQuoteTag: function() { - this.insertPrependTag('> '); - }, - insertBulletListTag: function() { - this.insertPrependTag('* '); - }, - insertCodeTag: function() { - this.insertBlockTag('```'); - }, - replaceTextRange: function(s, start, end, substitute) { - return s.substring(0, start) + substitute + s.substring(end); - }, - getSelectedText: function() { - return this.text.substring(this.textarea.selectionStart, this.textarea.selectionEnd); - }, - insertEnclosedTag: function(tag) { - var selectedText = this.getSelectedText(); - - this.insertText(tag + selectedText + tag); - this.setCursorBeforeClosingTag(tag); - }, - insertPrependTag: function(tag) { - var selectedText = this.getSelectedText(); - - if (selectedText.indexOf('\n') === -1) { - this.insertText('\n' + tag + selectedText); - } else { - var lines = selectedText.split('\n'); - - for (var i = 0; i < lines.length; i++) { - if (lines[i].indexOf(tag) === -1) { - lines[i] = tag + lines[i]; - } - } + } - this.insertText(lines.join('\n')); - } - }, - insertBlockTag: function(tag) { - var selectedText = this.getSelectedText(); - - this.insertText('\n' + tag + '\n' + selectedText + '\n' + tag); - this.setCursorBeforeClosingTag(tag, 2); - }, - insertText: function(replacedText) { - var result = false; - - this.selectionStart = this.textarea.selectionStart; - this.selectionEnd = this.textarea.selectionEnd; - this.textarea.focus(); - - if (document.queryCommandSupported('insertText')) { - result = document.execCommand('insertText', false, replacedText); - } + function insertText(replacedText) { + var result = false; - if (! result) { - try { - document.execCommand("ms-beginUndoUnit"); - } catch (error) {} + selectionStart = textarea.selectionStart; + selectionEnd = textarea.selectionEnd; + textarea.focus(); - this.textarea.value = this.replaceTextRange(this.text, this.textarea.selectionStart, this.textarea.selectionEnd, replacedText); + if (document.queryCommandSupported('insertText')) { + result = document.execCommand('insertText', false, replacedText); + } - try { - document.execCommand("ms-endUndoUnit"); - } catch (error) {} - } - }, - setCursorBeforeClosingTag: function(tag, offset) { - var position = this.selectionEnd + tag.length + offset; - this.textarea.setSelectionRange(position, position); + if (! result) { + try { + document.execCommand('ms-beginUndoUnit'); + } catch (error) {} + + textarea.value = replaceTextRange(text, textarea.selectionStart, textarea.selectionEnd, replacedText); + + try { + document.execCommand('ms-endUndoUnit'); + } catch (error) {} } } + + function setCursorBeforeClosingTag(tag, offset) { + offset = offset || 0; + var position = selectionEnd + tag.length + offset; + textarea.setSelectionRange(position, position); + } }); -- cgit v1.2.3