cleaned up on the fly syntax detection and highlighting in editor

This commit is contained in:
Ro 2019-02-24 10:11:45 -05:00
parent 0ed2f1ace7
commit a423dc2417
4 changed files with 47 additions and 39 deletions

View file

@ -1,15 +1,13 @@
import * as DataEvent from '../events/DataEvent'; import * as DataEvent from '../events/DataEvent';
import DateUtils from '../utilities/DateUtils'; import DateUtils from '../utilities/DateUtils';
import import {
{
position, position,
offset offset
} }
from 'caret-pos'; from 'caret-pos';
import EventEmitter from '../events/EventEmitter'; import EventEmitter from '../events/EventEmitter';
import * as EditorEvent from '../events/EditorEvent'; import * as EditorEvent from '../events/EditorEvent';
class TextEditor extends EventEmitter class TextEditor extends EventEmitter {
{
/** /**
* Text Editor UI Component * Text Editor UI Component
* @constructor * @constructor
@ -19,8 +17,7 @@ class TextEditor extends EventEmitter
//-------------------------- //--------------------------
// constructor // constructor
//-------------------------- //--------------------------
constructor(textEditor, scrollLimit) constructor(textEditor, scrollLimit) {
{
super(); super();
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
this.dateUtils = new DateUtils(); this.dateUtils = new DateUtils();
@ -30,15 +27,11 @@ class TextEditor extends EventEmitter
this.url = ''; this.url = '';
let self = this; let self = this;
this.setInputs(); this.setInputs();
window.addEventListener("scroll", f => window.addEventListener("scroll", f => {
{
var fixLimit = this.fixLimit; var fixLimit = this.fixLimit;
if (window.pageYOffset >= fixLimit) if (window.pageYOffset >= fixLimit) {
{
document.getElementById('edit-control').style.position = "fixed" document.getElementById('edit-control').style.position = "fixed"
} } else {
else
{
document.getElementById('edit-control').style.position = "relative" document.getElementById('edit-control').style.position = "relative"
} }
}); });
@ -47,17 +40,28 @@ class TextEditor extends EventEmitter
//-------------------------- //--------------------------
// methods // methods
//-------------------------- //--------------------------
setInputs() setInputs() {
{
let self = this; let self = this;
var editorButtons = document.querySelectorAll('.editor-button'); var editorButtons = document.querySelectorAll('.editor-button');
for (var i = 0, length = editorButtons.length; i < length; i++) for (var i = 0, length = editorButtons.length; i < length; i++) {
{
editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false); editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false);
} }
this.textEditor.addEventListener('input', e => {
let htmlTagRe = /<[a-z][\s\S]*>/g;
let text = this.textEditor.innerText;
if (e.inputType == "insertParagraph") return //cursor setting gets weird on return, so just back out
if (text.search(htmlTagRe) > -1) {
let caret = position(this.textEditor).pos;
self.refresh()
position(this.textEditor, caret);
} }
refresh()
{ })
}
refresh() {
var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value; var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
spiffed = spiffed.replace(new RegExp('\r?\n', 'g'), '<br>'); spiffed = spiffed.replace(new RegExp('\r?\n', 'g'), '<br>');
var temp = document.createElement("div"); var temp = document.createElement("div");
@ -65,17 +69,14 @@ class TextEditor extends EventEmitter
this.textEditor.innerHTML = temp.innerText; this.textEditor.innerHTML = temp.innerText;
this.textEditor.style.maxWidth = '900px'; this.textEditor.style.maxWidth = '900px';
} }
notify(type, data) notify(type, data) {
{ switch (type) {
switch (type)
{
case DataEvent.POST_UPDATED: case DataEvent.POST_UPDATED:
document.getElementById('submit-update').classList.add('icon-hide'); document.getElementById('submit-update').classList.add('icon-hide');
document.getElementById('submit-good').classList.remove('icon-hide'); document.getElementById('submit-good').classList.remove('icon-hide');
document.getElementById('edit-update').classList.remove('submit-start'); document.getElementById('edit-update').classList.remove('submit-start');
document.getElementById('edit-update').classList.add('submit-cool'); document.getElementById('edit-update').classList.add('submit-cool');
setTimeout(f => setTimeout(f => {
{
document.getElementById('submit-update').classList.remove('icon-hide'); document.getElementById('submit-update').classList.remove('icon-hide');
document.getElementById('submit-good').classList.add('icon-hide'); document.getElementById('submit-good').classList.add('icon-hide');
document.getElementById('edit-update').classList.add('submit-start'); document.getElementById('edit-update').classList.add('submit-start');
@ -90,8 +91,7 @@ class TextEditor extends EventEmitter
var sel, range, pulled; var sel, range, pulled;
sel = window.getSelection(); //console.log(sel) sel = window.getSelection(); //console.log(sel)
//console.log(note.message) //console.log(note.message)
if (sel.rangeCount) if (sel.rangeCount) {
{
range = sel.getRangeAt(0); range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString(); pulled = sel.getRangeAt(0).toString();
range.deleteContents(); range.deleteContents();
@ -100,23 +100,21 @@ class TextEditor extends EventEmitter
this.refresh(); this.refresh();
break; break;
} }
} }
//-------------------------- //--------------------------
// event handlers // event handlers
//-------------------------- //--------------------------
handleEditorOption(e) handleEditorOption(e) {
{
e.preventDefault(); e.preventDefault();
var self = this; var self = this;
var sel, range, pulled; var sel, range, pulled;
sel = window.getSelection(); //console.log(sel) sel = window.getSelection(); //console.log(sel)
if (sel.rangeCount) if (sel.rangeCount) {
{
range = sel.getRangeAt(0); range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString(); pulled = sel.getRangeAt(0).toString();
range.deleteContents(); range.deleteContents();
switch (e.target.id) switch (e.target.id) {
{
case "edit-bold": case "edit-bold":
range.insertNode(document.createTextNode("**" + pulled + "**")); range.insertNode(document.createTextNode("**" + pulled + "**"));
break; break;
@ -148,7 +146,6 @@ class TextEditor extends EventEmitter
this.emitEvent(EditorEvent.EDITOR_UPDATE); this.emitEvent(EditorEvent.EDITOR_UPDATE);
break break
case "edit-link": case "edit-link":
console.log("PULLED", pulled)
range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)")); range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
break; break;
case "edit-delete": case "edit-delete":

View file

@ -6,9 +6,9 @@
"repository": "https://code.playvicio.us/Are0h/Fipamo", "repository": "https://code.playvicio.us/Are0h/Fipamo",
"theme": "default-light", "theme": "default-light",
"scripts": { "scripts": {
"start": "pm2 --node-args='-r esm --inspect' start init.js", "start": "pm2 --node-args='-r esm' start init.js",
"stop": "pm2 stop init.js", "stop": "pm2 stop init.js",
"dev": "nodemon -r esm init.js", "dev": "nodemon -r esm init.js --ignore node_modules/ -e js",
"watch-front-scripts": "parcel watch themes/$npm_package_theme/src/com/Start.jsx --out-dir themes/$npm_package_theme/assets/js --out-file start.min.js --public-url /$npm_package_theme/assets/js", "watch-front-scripts": "parcel watch themes/$npm_package_theme/src/com/Start.jsx --out-dir themes/$npm_package_theme/assets/js --out-file start.min.js --public-url /$npm_package_theme/assets/js",
"watch-front-styles": "stylus -w -m -o themes/$npm_package_theme/assets/css themes/$npm_package_theme/src/styles/base.styl", "watch-front-styles": "stylus -w -m -o themes/$npm_package_theme/assets/css themes/$npm_package_theme/src/styles/base.styl",
"build-front-kit": "uglifyjs node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/$npm_package_theme/assets/js/toolkit.min.js", "build-front-kit": "uglifyjs node_modules/scramble-text/dist/ScrambleText.min.js node_modules/animejs/anime.min.js node_modules/reframe.js/dist/reframe.min.js -c -o themes/$npm_package_theme/assets/js/toolkit.min.js",

View file

@ -7851,6 +7851,18 @@ function (_EventEmitter) {
return _this2.handleEditorOption(e); return _this2.handleEditorOption(e);
}, false); }, false);
} }
this.textEditor.addEventListener('input', function (e) {
var htmlTagRe = /<[a-z][\s\S]*>/g;
var text = _this2.textEditor.innerText;
if (e.inputType == "insertParagraph") return; //cursor setting gets weird on return, so just back out
if (text.search(htmlTagRe) > -1) {
var caret = (0, _caretPos.position)(_this2.textEditor).pos;
self.refresh();
(0, _caretPos.position)(_this2.textEditor, caret);
}
});
} }
}, { }, {
key: "refresh", key: "refresh",
@ -7957,7 +7969,6 @@ function (_EventEmitter) {
break; break;
case "edit-link": case "edit-link":
console.log("PULLED", pulled);
range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)")); range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
break; break;

File diff suppressed because one or more lines are too long