bugfix wysiwyg
This commit is contained in:
parent
1bcaff892b
commit
705cf9e8ba
|
|
@ -13,7 +13,7 @@ class FroghatEditor extends Froghat {
|
||||||
});
|
});
|
||||||
this.turndown.use([turndownPluginGfm.gfm, turndownPluginGfm.tables]);
|
this.turndown.use([turndownPluginGfm.gfm, turndownPluginGfm.tables]);
|
||||||
this.turndown.keep(['pre']);
|
this.turndown.keep(['pre']);
|
||||||
//this.#bindEvents();
|
this.#bindEvents();
|
||||||
|
|
||||||
this.plugins().forEach(plugin => { plugin.setEditable() });
|
this.plugins().forEach(plugin => { plugin.setEditable() });
|
||||||
this.element.classList.add("loaded");
|
this.element.classList.add("loaded");
|
||||||
|
|
@ -25,17 +25,6 @@ class FroghatEditor extends Froghat {
|
||||||
if (this.state === this.states.VIEW) {
|
if (this.state === this.states.VIEW) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
console.log(this.state, this.states.EDIT);
|
|
||||||
if (this.state === this.states.WYSIWYG) {
|
|
||||||
evt.preventDefault();
|
|
||||||
this.insertAtCursor(document.createTextNode("\n"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (this.cachedMarkdown != this.element.textContent) {
|
if (this.cachedMarkdown != this.element.textContent) {
|
||||||
this.changed = true;
|
this.changed = true;
|
||||||
this.cachedMarkdown = this.element.textContent;
|
this.cachedMarkdown = this.element.textContent;
|
||||||
|
|
@ -74,6 +63,12 @@ class FroghatEditor extends Froghat {
|
||||||
this.changed = false;
|
this.changed = false;
|
||||||
this.element.contentEditable = true;
|
this.element.contentEditable = true;
|
||||||
this.element.innerHTML = this.getHTML();
|
this.element.innerHTML = this.getHTML();
|
||||||
|
Array.from(this.element.querySelectorAll('.macro')).forEach(el => {
|
||||||
|
if (el.dataset.editable == "false") {
|
||||||
|
el.contentEditable = false;
|
||||||
|
el.style.opacity = 0.5;
|
||||||
|
}
|
||||||
|
});
|
||||||
this.setState(this.states.WYSIWYG);
|
this.setState(this.states.WYSIWYG);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -119,13 +119,9 @@ class Froghat {
|
||||||
/*
|
/*
|
||||||
* Convert the markdown source to HTML.
|
* Convert the markdown source to HTML.
|
||||||
*/
|
*/
|
||||||
/*
|
|
||||||
if (this.changed || !this.cachedHTML) {
|
if (this.changed || !this.cachedHTML) {
|
||||||
this.cachedHTML = this.markdownToHTML(this.getMarkdown());
|
this.cachedHTML = this.markdownToHTML(this.getMarkdown());
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
var md = this.getMarkdown();
|
|
||||||
this.cachedHTML = this.markdownToHTML(md);
|
|
||||||
return this.cachedHTML;
|
return this.cachedHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -137,14 +133,12 @@ class Froghat {
|
||||||
/*
|
/*
|
||||||
* Convert the wiki read-only mode and display the current HTML.
|
* Convert the wiki read-only mode and display the current HTML.
|
||||||
*/
|
*/
|
||||||
/*
|
|
||||||
if (this.getState() === this.states.VIEW) {
|
if (this.getState() === this.states.VIEW) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
this.element.innerHTML = this.getHTML();
|
this.element.innerHTML = this.getHTML();
|
||||||
this.setState(this.states.VIEW);
|
this.setState(this.states.VIEW);
|
||||||
this.contentEditable = false;
|
this.element.contentEditable = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -242,6 +236,7 @@ class MacroPlugin extends FroghatPlugin {
|
||||||
|
|
||||||
style: {
|
style: {
|
||||||
inline: false,
|
inline: false,
|
||||||
|
editable: true,
|
||||||
toHTML: (token, node) => {
|
toHTML: (token, node) => {
|
||||||
return node.replace(/class="macro"/, `class="macro ${token.keywords}"`);
|
return node.replace(/class="macro"/, `class="macro ${token.keywords}"`);
|
||||||
}
|
}
|
||||||
|
|
@ -249,6 +244,7 @@ class MacroPlugin extends FroghatPlugin {
|
||||||
|
|
||||||
multiline: {
|
multiline: {
|
||||||
inline: false,
|
inline: false,
|
||||||
|
editable: true,
|
||||||
fromHTML: (node, markdown) => {
|
fromHTML: (node, markdown) => {
|
||||||
var content = node.innerHTML.replaceAll("<br>", "\0");
|
var content = node.innerHTML.replaceAll("<br>", "\0");
|
||||||
content = content.replaceAll("{{{", "{{{");
|
content = content.replaceAll("{{{", "{{{");
|
||||||
|
|
@ -379,6 +375,7 @@ class MacroPlugin extends FroghatPlugin {
|
||||||
macro: this.macros[match.groups.name],
|
macro: this.macros[match.groups.name],
|
||||||
keywords: (match.groups.keywords || '').trim(),
|
keywords: (match.groups.keywords || '').trim(),
|
||||||
inline: this.macros[match.groups.name].inline,
|
inline: this.macros[match.groups.name].inline,
|
||||||
|
editable: this.macros[match.groups.name].editable || false,
|
||||||
params: {},
|
params: {},
|
||||||
rendered: '',
|
rendered: '',
|
||||||
};
|
};
|
||||||
|
|
@ -411,6 +408,8 @@ class MacroPlugin extends FroghatPlugin {
|
||||||
|
|
||||||
node += ` data-inline="${token.inline}"`;
|
node += ` data-inline="${token.inline}"`;
|
||||||
|
|
||||||
|
node += ` data-editable="${token.editable}"`;
|
||||||
|
|
||||||
node += ">";
|
node += ">";
|
||||||
|
|
||||||
if (token.macro.toHTML) {
|
if (token.macro.toHTML) {
|
||||||
|
|
@ -503,7 +502,7 @@ class MacroPlugin extends FroghatPlugin {
|
||||||
const plugin = this;
|
const plugin = this;
|
||||||
this.wiki.turndown.addRule('macros', {
|
this.wiki.turndown.addRule('macros', {
|
||||||
filter: function (node, options) {
|
filter: function (node, options) {
|
||||||
return ((node.nodeName === 'DIV' || node.nodeName === 'SPAN') && node.dataset.pluginName == 'macro')
|
return ((node.nodeName === 'ASIDE' || node.nodeName === 'DIV' || node.nodeName === 'SPAN') && node.dataset.pluginName == 'macro')
|
||||||
},
|
},
|
||||||
replacement: function (content, node, options) {
|
replacement: function (content, node, options) {
|
||||||
var macro = plugin.macros[node.getAttribute('data-macro-name')];
|
var macro = plugin.macros[node.getAttribute('data-macro-name')];
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user