cleaned up on the fly syntax detection and highlighting in editor
This commit is contained in:
parent
0ed2f1ace7
commit
a423dc2417
4 changed files with 47 additions and 39 deletions
|
@ -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,35 +40,43 @@ 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");
|
||||||
temp.innerText = spiffed;
|
temp.innerText = spiffed;
|
||||||
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":
|
||||||
|
|
|
@ -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",
|
||||||
|
|
13
themes/dash/assets/js/dash.min.js
vendored
13
themes/dash/assets/js/dash.min.js
vendored
|
@ -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
Loading…
Reference in a new issue