diff --git a/.changeset/few-points-clean.md b/.changeset/few-points-clean.md new file mode 100644 index 00000000..e9576fde --- /dev/null +++ b/.changeset/few-points-clean.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": patch +--- + +Fixes bug thats prevents snippets from rerendering on run button click diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index b6f10136..742c2739 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -131,13 +131,7 @@ export class StackSnippetView implements NodeView { //Update the reference used by buttons, etc. for the most up-to-date node reference this.node = node; - //Check to see if the metadata has changed - const updatedMeta = getSnippetMetadata(node); - const metaChanged = - JSON.stringify(updatedMeta) !== - JSON.stringify(this.snippetMetadata); - this.snippetMetadata = updatedMeta; - + this.snippetMetadata = getSnippetMetadata(node); if (this.snippetMetadata.hide === "true") { // Update the visibility of the snippet-code div and toggle link const snippetCode = this.contentDOM; @@ -159,7 +153,6 @@ export class StackSnippetView implements NodeView { : "svg-icon-bg iconArrowRightSm"; } - // Update the result container if metadata has changed const content = this.contentNode; //Show the results, if the node meta allows it @@ -231,7 +224,11 @@ export class StackSnippetView implements NodeView { } //Re-run execution the snippet if something has changed, or we don't yet have a result - if (content && (metaChanged || this.resultContainer.innerHTML === "")) { + if ( + content && + (this.hasContentNodeChanged() || + this.resultContainer.innerHTML === "") + ) { this.hideButton.classList.remove("d-none"); //Clear the node this.resultContainer.innerHTML = ""; @@ -256,6 +253,7 @@ export class StackSnippetView implements NodeView { private readonly getPos: () => number; private snippetMetadata: SnippetMetadata; private contentNode: Node; + private contentNodeSnapshot: string; private showButton: HTMLButtonElement; private hideButton: HTMLButtonElement; private fullscreenButton: HTMLButtonElement; @@ -275,6 +273,20 @@ export class StackSnippetView implements NodeView { "h-screen", ]; + private hasContentNodeChanged(): boolean { + if (this.contentNode?.nodeType !== Node.DOCUMENT_NODE) { + return false; + } + + const documentInnerHtml = (this.contentNode as Document).documentElement + .innerHTML; + const hasChanged = documentInnerHtml !== this.contentNodeSnapshot; + if (hasChanged) { + this.contentNodeSnapshot = documentInnerHtml; + } + return hasChanged; + } + private buildRunButton(container: HTMLDivElement): void { const runCodeButton = document.createElement("button"); runCodeButton.type = "button";