bugfix wysiwyg

This commit is contained in:
evilchili 2026-01-17 11:54:12 -08:00
parent 1bcaff892b
commit 705cf9e8ba
2 changed files with 14 additions and 20 deletions

View File

@ -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);
} }

View File

@ -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("{{{", "&#123;&#123;&#123;"); content = content.replaceAll("{{{", "&#123;&#123;&#123;");
@ -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')];