From 177b6eeef3b5993c087fcaae1fcc5efbe802a485 Mon Sep 17 00:00:00 2001 From: Mel Massadian Date: Sun, 8 Jun 2025 16:50:12 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20=F0=9F=90=9B=20don't=20break=20note?= =?UTF-8?q?+=20on=20undo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Issuing undo will both undo the last note edit and the last graph edit... I asked upstream about it: https://github.com/Comfy-Org/ComfyUI_frontend/issues/4108 this also fixes height calculation --- web/note_plus.constants.js | 10 ++++- web/note_plus.js | 79 +++++++++++++++++++++++--------------- 2 files changed, 58 insertions(+), 31 deletions(-) diff --git a/web/note_plus.constants.js b/web/note_plus.constants.js index c33ef52..f96a7c3 100644 --- a/web/note_plus.constants.js +++ b/web/note_plus.constants.js @@ -109,7 +109,6 @@ export const THEMES = [ export const CSS_RESET = ` * { - font-family: monospace; line-height: 1.25em; } .shiki{ @@ -119,6 +118,8 @@ export const CSS_RESET = ` .markdown-callout-title { .octicon{ fill:white; + width:29px; + height:29px; } /* background: var(--current-color); */ color: var(--current-color); @@ -127,6 +128,8 @@ export const CSS_RESET = ` /* border-start-start-radius: var(--radius); */ padding: 0.5em; padding-inline-start: 1em; + display: flex; + align-items: center; } .markdown-callout-content { padding: 1em; @@ -139,7 +142,12 @@ export const CSS_RESET = ` border-left: 3px solid var(--current-color); margin-bottom: 1em; margin-top: 1em; + } +.markdown-callout p:nth-child(2) { + padding:1em; + } + .markdown-callout-tip { --text-color: whitesmoke; diff --git a/web/note_plus.js b/web/note_plus.js index 31b3b0c..41c75eb 100644 --- a/web/note_plus.js +++ b/web/note_plus.js @@ -98,7 +98,7 @@ class NotePlus extends LiteGraph.LGraphNode { /** widgets*/ /** used to store the raw value and display the parsed html at the same time*/ - html_widget + preview_widget editorsContainer /** ACE editors instances*/ @@ -135,6 +135,13 @@ class NotePlus extends LiteGraph.LGraphNode { this.live = true this.calculated_height = 0 + // - + this.calculateHeight = shared.debounce(() => { + this.calculated_height = shared.calculateTotalChildrenHeight( + this.inner, + ) + }, 100) + // - add widgets const cinner = document.createElement('div') this.inner = document.createElement('div') @@ -145,16 +152,20 @@ class NotePlus extends LiteGraph.LGraphNode { this.inner.classList.add('note-plus-preview') cinner.style.margin = '0' cinner.style.padding = '0' - this.html_widget = this.addDOMWidget('HTML', 'html', cinner, { + this.preview_widget = this.addDOMWidget('HTML', 'html', cinner, { setValue: (val) => { this._raw_html = val }, getValue: () => this._raw_html, - getMinHeight: () => this.calculated_height, // (the edit button), + getMinHeight: () => { + this.calculateHeight() + return this.calculated_height + }, + onDraw: () => { // HACK: dirty hack for now until it's addressed upstream... // TODO: check if still needed - this.html_widget.element.style.pointerEvents = 'none' + this.preview_widget.element.style.pointerEvents = 'none' // NOTE: not sure about this, it avoid the visual "bugs" but scrolling over the wrong area will affect zoom... // this.html_widget.element.style.overflow = 'scroll' }, @@ -510,9 +521,8 @@ class NotePlus extends LiteGraph.LGraphNode { } window.MTB.ace_loaded = true this.setMode('markdown') - this.setTheme(this.properties.theme) - this.updateHTML(this.html_widget.value) - this.updateCSS(this.properties.css) + this.setTheme() + this.updateView() }) .catch((e) => { errorLogger(e) @@ -529,7 +539,8 @@ class NotePlus extends LiteGraph.LGraphNode { configure(info) { super.configure(info) infoLogger('Restoring serialized values', info) - this.html_widget.element.id = `note-plus-${this.uuid}` + this.preview_widget.element.id = `note-plus-${this.uuid}` + this.updateView() } getExtraMenuOptions() { const debugItems = window.MTB?.DEBUG @@ -537,7 +548,7 @@ class NotePlus extends LiteGraph.LGraphNode { { content: 'Replace with demo content (debug)', callback: () => { - this.html_widget.value = DEMO_CONTENT + this.preview_widget.value = DEMO_CONTENT }, }, ] @@ -547,7 +558,7 @@ class NotePlus extends LiteGraph.LGraphNode { } _setupEditor(editor) { - this.setTheme(this.properties.theme) + this.setTheme() editor.setShowPrintMargin(false) editor.session.setUseWrapMode(true) @@ -562,6 +573,7 @@ class NotePlus extends LiteGraph.LGraphNode { } setTheme(theme) { + theme = theme || this.properties.theme this.properties.theme = theme if (this.html_editor) { this.html_editor.setTheme(`ace/theme/${theme}`) @@ -574,6 +586,11 @@ class NotePlus extends LiteGraph.LGraphNode { } } + updateView() { + this.updateHTML() + this.updateCSS() + this.calculateHeight() + } setMode(mode) { if (this.html_editor) { this.html_editor.session.setMode(`ace/mode/${mode}`) @@ -582,7 +599,7 @@ class NotePlus extends LiteGraph.LGraphNode { this.quickEditor.session.setMode(`ace/mode/${mode}`) } - this.updateHTML(this.html_widget.value) + this.updateView() } setupEditors() { infoLogger('NotePlus setupEditor') @@ -617,7 +634,7 @@ class NotePlus extends LiteGraph.LGraphNode { this.setMode(DEFAULT_MODE) - this.html_editor.setValue(this.html_widget.value, -1) + this.html_editor.setValue(this.preview_widget.value, -1) this.css_editor.setValue(this.properties.css, -1) } @@ -656,14 +673,9 @@ class NotePlus extends LiteGraph.LGraphNode { return styleTag } - calculateHeight() { - this.calculated_height = shared.calculateTotalChildrenHeight( - this.html_widget.element, - ) - this.setDirtyCanvas(true, true) - } updateCSS(css) { infoLogger('NotePlus updateCSS') + css = css || this.properties.css // this.html_widget.element.style = css const scopedCss = this.scopeCss( `${CSS_RESET}\n${css}`, @@ -674,8 +686,6 @@ class NotePlus extends LiteGraph.LGraphNode { cssDom.innerHTML = scopedCss this.properties.css = css - this.calculateHeight() - infoLogger('NotePlus updateCSS', this.calculated_height) // this.setSize(this.computeSize()) } @@ -692,10 +702,14 @@ class NotePlus extends LiteGraph.LGraphNode { } updateHTML(val) { - if (!this.parserInitiated() || !window.MTB?.ace_loaded) { + if ( + !this.parserInitiated() || + !window.MTB?.ace_loaded || + !this.preview_widget + ) { return } - val = val || this.html_widget.value + val = val || this._raw_html const cleanHTML = this.purify(val) @@ -704,19 +718,18 @@ class NotePlus extends LiteGraph.LGraphNode { // .replaceAll('"', '"') // .replaceAll(''', "'") - this.html_widget.value = value + this.preview_widget.value = value MTB.mdParser.parse(value).then((e) => { this.inner.innerHTML = e }) - this.calculateHeight() } /** * Attaches the double-click listener to the preview area. */ setupDoubleClickEdit() { - this.html_widget.element.addEventListener('dblclick', (e) => { + this.preview_widget.element.addEventListener('dblclick', (e) => { e.stopPropagation() e.preventDefault() @@ -752,13 +765,19 @@ class NotePlus extends LiteGraph.LGraphNode { // hide the preview div and append the editor container this.inner.style.display = 'none' - this.html_widget.element.appendChild(this.quickEditorContainer) + this.preview_widget.element.appendChild(this.quickEditorContainer) // init ace - this.quickEditor = ace.edit(this.quickEditorContainer) + this.quickEditor = ace.edit(this.quickEditorContainer, { + mode: 'ace/mode/markdown', + theme: this.properties.theme, + }) + this.quickEditor.setOptions({ + autoScrollEditorIntoView: true, + copyWithEmptySelection: true, + hasCssTransforms: true, + }) this._setupEditor(this.quickEditor) - this.quickEditor.session.setMode('ace/mode/markdown') - this.quickEditor.setTheme(`ace/theme/${this.properties.theme}`) this.quickEditor.setValue(this._raw_html, -1) this.quickEditor.focus() @@ -801,7 +820,7 @@ class NotePlus extends LiteGraph.LGraphNode { const newValue = this.quickEditor.getValue() if (newValue !== this._raw_html) { this._raw_html = newValue - this.updateHTML(newValue) + this.updateView() } } this.quickEditor.destroy()