From ebe934fab6c082c37d4af665ef61d1caab822612 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Fri, 25 Apr 2025 00:14:50 -0400 Subject: [PATCH 01/17] add a show/hide link to code snippet use node attr to persist toggle --- plugins/official/stack-snippets/src/schema.ts | 1 + .../stack-snippets/src/snippet-view.ts | 59 ++++++++++++++++++- 2 files changed, 58 insertions(+), 2 deletions(-) diff --git a/plugins/official/stack-snippets/src/schema.ts b/plugins/official/stack-snippets/src/schema.ts index 20c4dde4..913a6970 100644 --- a/plugins/official/stack-snippets/src/schema.ts +++ b/plugins/official/stack-snippets/src/schema.ts @@ -170,6 +170,7 @@ export const stackSnippetRichTextNodeSpec: { [name: string]: NodeSpec } = { babel: { default: "null" }, babelPresetReact: { default: "null" }, babelPresetTS: { default: "null" }, + showCode: { default: true } }, }, stack_snippet_lang: { diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 319f1174..fb3edaf3 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -19,6 +19,9 @@ export class StackSnippetView implements NodeView { this.getPos = getPos; this.snippetMetadata = getSnippetMetadata(node); + const codeIsShown: boolean = typeof node.attrs.showCode === "boolean" + ? node.attrs.showCode + : true; //We want to render the language blocks in the middle of some content, // so we need to custom-render stuff here ("holes" must be last) @@ -26,12 +29,51 @@ export class StackSnippetView implements NodeView { this.dom = snippetContainer; snippetContainer.className = "snippet"; + let toggleContainer: HTMLDivElement; + + if (this.snippetMetadata.hide === "true") { + // Create the show/hide link container + toggleContainer = document.createElement("div"); + toggleContainer.className = "snippet-toggle-container"; + + // Create the arrow span + const arrowSpan = document.createElement("span"); + arrowSpan.className = codeIsShown + ? "svg-icon-bg iconArrowDownSm va-middle" + : "svg-icon-bg iconArrowRightSm va-middle"; + toggleContainer.appendChild(arrowSpan); + + // Create the show/hide link + const toggleLink = document.createElement("a"); + toggleLink.href = "#"; + toggleLink.className = "snippet-toggle fs-body1"; + toggleLink.textContent = codeIsShown ? "Hide Code" : "Show Code"; + toggleContainer.appendChild(toggleLink); + + snippetContainer.appendChild(toggleContainer); + } + //This is the div where we're going to render any language blocks const snippetCode = document.createElement("div"); snippetCode.className = "snippet-code"; + snippetCode.style.display = codeIsShown ? "" : "none"; snippetContainer.appendChild(snippetCode); this.contentDOM = snippetCode; + if (this.snippetMetadata.hide === "true") { + toggleContainer.addEventListener("click", (e) => { + e.preventDefault(); + const isVisible = snippetCode.style.display !== "none"; +e + this.view.dispatch( + this.view.state.tr.setNodeMarkup(this.getPos(), null, { + ...node.attrs, + showCode: !isVisible, + }) + ); + }); + } + //And this is where we stash our CTAs and results, which are statically rendered. const snippetResult = document.createElement("div"); snippetResult.className = "snippet-result"; @@ -122,6 +164,19 @@ export class StackSnippetView implements NodeView { JSON.stringify(this.snippetMetadata); this.snippetMetadata = updatedMeta; + // Update the visibility of the snippet-code div and toggle link + const snippetCode = this.contentDOM; + const toggleLink = this.dom.querySelector(".snippet-toggle"); + const arrowSpan = this.dom.querySelector(".svg-icon-bg"); + + const isVisible = node.attrs.showCode as boolean; + snippetCode.style.display = isVisible ? "" : "none"; + toggleLink.textContent = isVisible ? "Hide Code" : "Show Code"; + arrowSpan.className = isVisible + ? "svg-icon-bg iconArrowDownSm va-middle" + : "svg-icon-bg iconArrowRightSm va-middle"; + + // Update the result container if metadata has changed const content = this.contentNode; if (metaChanged && content) { //Clear the node @@ -134,7 +189,7 @@ export class StackSnippetView implements NodeView { "allow-forms allow-modals allow-scripts" ); if (content.nodeType === Node.DOCUMENT_NODE) { - const document = content; + const document = content as Document; iframe.srcdoc = document.documentElement.innerHTML; } this.resultContainer.appendChild(iframe); @@ -148,6 +203,6 @@ export class StackSnippetView implements NodeView { private contentNode: Node; private getPos: () => number; resultContainer: HTMLDivElement; - dom: Node; + dom: HTMLElement; contentDOM: HTMLElement; } From bc06cd0d9ba38595ecc08d90f51de5e5b97cb219 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Fri, 25 Apr 2025 00:49:15 -0400 Subject: [PATCH 02/17] fix copy --- plugins/official/stack-snippets/src/snippet-view.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index fb3edaf3..9b9bbac2 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -47,7 +47,7 @@ export class StackSnippetView implements NodeView { const toggleLink = document.createElement("a"); toggleLink.href = "#"; toggleLink.className = "snippet-toggle fs-body1"; - toggleLink.textContent = codeIsShown ? "Hide Code" : "Show Code"; + toggleLink.textContent = codeIsShown ? "Hide code snippet" : "Show code snippet"; toggleContainer.appendChild(toggleLink); snippetContainer.appendChild(toggleContainer); @@ -171,7 +171,7 @@ e const isVisible = node.attrs.showCode as boolean; snippetCode.style.display = isVisible ? "" : "none"; - toggleLink.textContent = isVisible ? "Hide Code" : "Show Code"; + toggleLink.textContent = isVisible ? "Hide code snippet" : "Show code snippet"; arrowSpan.className = isVisible ? "svg-icon-bg iconArrowDownSm va-middle" : "svg-icon-bg iconArrowRightSm va-middle"; From 16290949ce1ce1504f27fa2d56da6d53e3dac40e Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Fri, 25 Apr 2025 00:53:00 -0400 Subject: [PATCH 03/17] add tests --- .../stack-snippets/test/snippet-view.test.ts | 62 +++++++++++++++---- 1 file changed, 49 insertions(+), 13 deletions(-) diff --git a/plugins/official/stack-snippets/test/snippet-view.test.ts b/plugins/official/stack-snippets/test/snippet-view.test.ts index a2928e45..33dd2187 100644 --- a/plugins/official/stack-snippets/test/snippet-view.test.ts +++ b/plugins/official/stack-snippets/test/snippet-view.test.ts @@ -14,19 +14,20 @@ describe("StackSnippetView", () => { { language: "js" }, schema.text("console.log('test');") ); - const validSnippet = schema.nodes.stack_snippet.createChecked( - { - id: "1234", - babel: "true", - babelPresetReact: "true", - babelPresetTS: "null", - console: "true", - hide: "false", - }, - langNode - ); + const validSnippet = (hide: string) => + schema.nodes.stack_snippet.createChecked( + { + id: "1234", + babel: "true", + babelPresetReact: "true", + babelPresetTS: "null", + console: "true", + hide: hide, + }, + langNode + ); - const buildView = (options?: StackSnippetOptions): EditorView => { + const buildView = (options?: StackSnippetOptions, hide: string = "false"): EditorView => { const state = EditorState.create({ schema: schema, plugins: [stackSnippetPasteHandler], @@ -48,7 +49,7 @@ describe("StackSnippetView", () => { view.state.tr.replaceRangeWith( 0, view.state.doc.nodeSize - 2, - validSnippet + validSnippet(hide) ) ); @@ -128,4 +129,39 @@ describe("StackSnippetView", () => { const [resultDiv] = resultDoc.getElementsByTagName("div"); expect(resultDiv.textContent).toBe("test!"); }); + + it("should render show/hide link if hide attr is true", () => { + const view = buildView(undefined, "true"); + const toggleLink = view.dom.querySelectorAll(".snippet-toggle"); + + expect(toggleLink).toHaveLength(1); + expect(toggleLink[0].textContent).toBe("Hide code snippet"); + }); + + it("should not render show/hide link if hide attr is false", () => { + const view = buildView(undefined, "false"); + const toggleLink = view.dom.querySelectorAll(".snippet-toggle"); + + expect(toggleLink).toHaveLength(0); + }); + + it("should toggle visibility of code snippet when show/hide link is clicked", () => { + const view = buildView(undefined, "true"); + const toggleLink = view.dom.querySelector(".snippet-toggle"); + const snippetCode = view.dom.querySelector(".snippet-code"); + + // Initial state: Code is visible + expect((snippetCode).style.display).toBe(""); + expect(toggleLink.textContent).toBe("Hide code snippet"); + + // Click to hide + (toggleLink).click(); + expect((snippetCode).style.display).toBe("none"); + expect(toggleLink.textContent).toBe("Show code snippet"); + + // Click to show + (toggleLink).click(); + expect((snippetCode).style.display).toBe(""); + expect(toggleLink.textContent).toBe("Hide code snippet"); + }); }); From fe999426f2adbee9b1e474404483b4a81e95f6da Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Fri, 25 Apr 2025 00:56:00 -0400 Subject: [PATCH 04/17] format --- plugins/official/stack-snippets/src/schema.ts | 2 +- .../stack-snippets/src/snippet-view.ts | 18 +++++++++++------- .../stack-snippets/test/snippet-view.test.ts | 5 ++++- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/plugins/official/stack-snippets/src/schema.ts b/plugins/official/stack-snippets/src/schema.ts index 913a6970..ff403a0f 100644 --- a/plugins/official/stack-snippets/src/schema.ts +++ b/plugins/official/stack-snippets/src/schema.ts @@ -170,7 +170,7 @@ export const stackSnippetRichTextNodeSpec: { [name: string]: NodeSpec } = { babel: { default: "null" }, babelPresetReact: { default: "null" }, babelPresetTS: { default: "null" }, - showCode: { default: true } + showCode: { default: true }, }, }, stack_snippet_lang: { diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 9b9bbac2..0e4965ba 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -19,9 +19,10 @@ export class StackSnippetView implements NodeView { this.getPos = getPos; this.snippetMetadata = getSnippetMetadata(node); - const codeIsShown: boolean = typeof node.attrs.showCode === "boolean" - ? node.attrs.showCode - : true; + const codeIsShown: boolean = + typeof node.attrs.showCode === "boolean" + ? node.attrs.showCode + : true; //We want to render the language blocks in the middle of some content, // so we need to custom-render stuff here ("holes" must be last) @@ -47,7 +48,9 @@ export class StackSnippetView implements NodeView { const toggleLink = document.createElement("a"); toggleLink.href = "#"; toggleLink.className = "snippet-toggle fs-body1"; - toggleLink.textContent = codeIsShown ? "Hide code snippet" : "Show code snippet"; + toggleLink.textContent = codeIsShown + ? "Hide code snippet" + : "Show code snippet"; toggleContainer.appendChild(toggleLink); snippetContainer.appendChild(toggleContainer); @@ -56,7 +59,7 @@ export class StackSnippetView implements NodeView { //This is the div where we're going to render any language blocks const snippetCode = document.createElement("div"); snippetCode.className = "snippet-code"; - snippetCode.style.display = codeIsShown ? "" : "none"; + snippetCode.style.display = codeIsShown ? "" : "none"; snippetContainer.appendChild(snippetCode); this.contentDOM = snippetCode; @@ -64,7 +67,6 @@ export class StackSnippetView implements NodeView { toggleContainer.addEventListener("click", (e) => { e.preventDefault(); const isVisible = snippetCode.style.display !== "none"; -e this.view.dispatch( this.view.state.tr.setNodeMarkup(this.getPos(), null, { ...node.attrs, @@ -171,7 +173,9 @@ e const isVisible = node.attrs.showCode as boolean; snippetCode.style.display = isVisible ? "" : "none"; - toggleLink.textContent = isVisible ? "Hide code snippet" : "Show code snippet"; + toggleLink.textContent = isVisible + ? "Hide code snippet" + : "Show code snippet"; arrowSpan.className = isVisible ? "svg-icon-bg iconArrowDownSm va-middle" : "svg-icon-bg iconArrowRightSm va-middle"; diff --git a/plugins/official/stack-snippets/test/snippet-view.test.ts b/plugins/official/stack-snippets/test/snippet-view.test.ts index 33dd2187..bf2e142a 100644 --- a/plugins/official/stack-snippets/test/snippet-view.test.ts +++ b/plugins/official/stack-snippets/test/snippet-view.test.ts @@ -27,7 +27,10 @@ describe("StackSnippetView", () => { langNode ); - const buildView = (options?: StackSnippetOptions, hide: string = "false"): EditorView => { + const buildView = ( + options?: StackSnippetOptions, + hide: string = "false" + ): EditorView => { const state = EditorState.create({ schema: schema, plugins: [stackSnippetPasteHandler], From b9836d3c08660aa215e8c3c0947730aafe857b77 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Mon, 28 Apr 2025 12:10:11 -0400 Subject: [PATCH 05/17] fix test and icon --- .../stack-snippets/src/snippet-view.ts | 29 ++++++++++--------- src/styles/icons.css | 6 ++++ 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 0e4965ba..763020e5 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -166,19 +166,22 @@ export class StackSnippetView implements NodeView { JSON.stringify(this.snippetMetadata); this.snippetMetadata = updatedMeta; - // Update the visibility of the snippet-code div and toggle link - const snippetCode = this.contentDOM; - const toggleLink = this.dom.querySelector(".snippet-toggle"); - const arrowSpan = this.dom.querySelector(".svg-icon-bg"); - - const isVisible = node.attrs.showCode as boolean; - snippetCode.style.display = isVisible ? "" : "none"; - toggleLink.textContent = isVisible - ? "Hide code snippet" - : "Show code snippet"; - arrowSpan.className = isVisible - ? "svg-icon-bg iconArrowDownSm va-middle" - : "svg-icon-bg iconArrowRightSm va-middle"; + if (this.snippetMetadata.hide === "true") { + + // Update the visibility of the snippet-code div and toggle link + const snippetCode = this.contentDOM; + const toggleLink = this.dom.querySelector(".snippet-toggle"); + const arrowSpan = this.dom.querySelector(".svg-icon-bg"); + + const isVisible = node.attrs.showCode as boolean; + snippetCode.style.display = isVisible ? "" : "none"; + toggleLink.textContent = isVisible + ? "Hide code snippet" + : "Show code snippet"; + arrowSpan.className = isVisible + ? "svg-icon-bg iconArrowDownSm va-middle" + : "svg-icon-bg iconArrowRightSm va-middle"; + } // Update the result container if metadata has changed const content = this.contentNode; diff --git a/src/styles/icons.css b/src/styles/icons.css index 957685ab..5d702699 100644 --- a/src/styles/icons.css +++ b/src/styles/icons.css @@ -13,3 +13,9 @@ .svg-icon-bg.iconEllipsisHorizontal { --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/EllipsisHorizontal.svg"); } +.svg-icon-bg.iconArrowDownSm { + --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/ArrowDownSm.svg"); +} +.svg-icon-bg.iconArrowRightSm { + --bg-icon: url("~@stackoverflow/stacks-icons/src/Icon/ArrowRightSm.svg"); +} From 14170dff42086691e2694b242f4168b14a8cf817 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Mon, 28 Apr 2025 13:14:46 -0400 Subject: [PATCH 06/17] format --- plugins/official/stack-snippets/src/snippet-view.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 763020e5..329b42d2 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -167,7 +167,6 @@ export class StackSnippetView implements NodeView { this.snippetMetadata = updatedMeta; if (this.snippetMetadata.hide === "true") { - // Update the visibility of the snippet-code div and toggle link const snippetCode = this.contentDOM; const toggleLink = this.dom.querySelector(".snippet-toggle"); From 46398864bdbca49fcfeeeb562a0c4cc638ba1b08 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Mon, 28 Apr 2025 13:23:12 -0400 Subject: [PATCH 07/17] add changeset --- .changeset/fifty-tips-listen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fifty-tips-listen.md diff --git a/.changeset/fifty-tips-listen.md b/.changeset/fifty-tips-listen.md new file mode 100644 index 00000000..245b7764 --- /dev/null +++ b/.changeset/fifty-tips-listen.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": minor +--- + +Adds show/hide functionality to Snippets From df6c39236ae90629401bb00bdf89db2059c549ac Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Tue, 29 Apr 2025 23:51:06 -0400 Subject: [PATCH 08/17] always set preview visibility when toggling modes --- src/commonmark/plugins/preview.ts | 6 ++--- src/stacks-editor/editor.ts | 6 ++--- test/commonmark/plugins/preview.test.ts | 34 ++++++++++++++++++++++--- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/commonmark/plugins/preview.ts b/src/commonmark/plugins/preview.ts index b356cd26..9b0fe694 100644 --- a/src/commonmark/plugins/preview.ts +++ b/src/commonmark/plugins/preview.ts @@ -118,7 +118,7 @@ class PreviewPluginKey extends StatefulPluginKey { super("preview"); } - togglePreviewVisibility(view: EditorView, isShown: boolean) { + setPreviewVisibility(view: EditorView, isShown: boolean) { const tr = this.setMeta(view.state.tr, { isShown }); view.dispatch(tr); } @@ -142,8 +142,8 @@ export function previewIsVisible(view: EditorView) { * @param view The current editor view * @param isShown Whether the preview should be visible */ -export function togglePreviewVisibility(view: EditorView, isShown: boolean) { - PREVIEW_KEY.togglePreviewVisibility(view, isShown); +export function setPreviewVisibility(view: EditorView, isShown: boolean) { + PREVIEW_KEY.setPreviewVisibility(view, isShown); } /** Singleton instance of @see PreviewPluginKey */ diff --git a/src/stacks-editor/editor.ts b/src/stacks-editor/editor.ts index ea3af3c3..82932887 100644 --- a/src/stacks-editor/editor.ts +++ b/src/stacks-editor/editor.ts @@ -20,7 +20,7 @@ import { } from "../shared/editor-plugin"; import type { Transaction } from "prosemirror-state"; import { - togglePreviewVisibility, + setPreviewVisibility, previewIsVisible, } from "../commonmark/plugins/preview"; @@ -446,9 +446,7 @@ export class StacksEditor implements View { // set the view type for this button this.setView(type); - if (showPreview !== inPreviewNow) { - togglePreviewVisibility(this.backingView.editorView, showPreview); - } + setPreviewVisibility(this.backingView.editorView, showPreview); // TODO better event name? // trigger an event on the target for consumers to listen for diff --git a/test/commonmark/plugins/preview.test.ts b/test/commonmark/plugins/preview.test.ts index 442e8567..8f084efd 100644 --- a/test/commonmark/plugins/preview.test.ts +++ b/test/commonmark/plugins/preview.test.ts @@ -1,7 +1,7 @@ import { createPreviewPlugin, previewIsVisible, - togglePreviewVisibility, + setPreviewVisibility, } from "../../../src/commonmark/plugins/preview"; import { createView } from "../../rich-text/test-helpers"; import { createState } from "../test-helpers"; @@ -145,18 +145,46 @@ describe("preview plugin", () => { expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); expect(renderer).toHaveBeenCalledTimes(0); - togglePreviewVisibility(view, true); + setPreviewVisibility(view, true); // expect it to be rendered expect(previewIsVisible(view)).toBe(true); expect(pluginContainer.querySelector(".js-md-preview")).toBeTruthy(); expect(renderer).toHaveBeenCalledTimes(1); - togglePreviewVisibility(view, false); + setPreviewVisibility(view, false); // expect it not to be rendered again expect(previewIsVisible(view)).toBe(false); expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); expect(renderer).toHaveBeenCalledTimes(1); }); + + it("should not render preview if default is true but visibility was toggled off", () => { + const renderer = jest.fn(() => Promise.resolve()); + pluginContainer = document.createElement("div"); + + const state = createState("", [ + createPreviewPlugin({ + enabled: true, + shownByDefault: true, + parentContainer: () => pluginContainer, + renderDelayMs: 0, + renderer, + }), + ]); + + const view = createView(state); + + //this is called when the markdown mode (without preview) is selected + setPreviewVisibility(view, false); + + // expect it to not be rendered + expect(previewIsVisible(view)).toBe(false); + expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); + + //renderer will have been called once on init before preview was toggled off + expect(renderer).toHaveBeenCalledTimes(1); + + }); }); From 0bc88c21c8ba958cb12fb7aff6036dfcba1f1883 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:06:01 -0400 Subject: [PATCH 09/17] remove changeset --- .changeset/fifty-tips-listen.md | 5 ----- .gitignore | 34 +++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 5 deletions(-) delete mode 100644 .changeset/fifty-tips-listen.md diff --git a/.changeset/fifty-tips-listen.md b/.changeset/fifty-tips-listen.md deleted file mode 100644 index 245b7764..00000000 --- a/.changeset/fifty-tips-listen.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@stackoverflow/stacks-editor": minor ---- - -Adds show/hide functionality to Snippets diff --git a/.gitignore b/.gitignore index b6e6c373..ec74b405 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,37 @@ dist/ test-results/ .idea/ +/.vs +/.vs/slnx.sqlite +/.vs/Stacks-Editor +/.vs/Stacks-Editor/config +/.vs/Stacks-Editor/config/applicationhost.config +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/21f02b70-0696-4735-88a8-16187fc34782 +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/cadace3d-fd6e-495b-ad80-e0b01dd77b04 +/.vs/Stacks-Editor/CopilotIndices +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929 +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/CodeChunks.db +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-shm +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-wal +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481 +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-shm +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-wal +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-shm +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-wal +/.vs/Stacks-Editor/FileContentIndex +/.vs/Stacks-Editor/FileContentIndex/2502a5cd-9100-4810-b9a4-74b5a7f51883.vsidx +/.vs/Stacks-Editor/FileContentIndex/3ac5c41d-d801-4dde-91a6-b72039dfb5fd.vsidx +/.vs/Stacks-Editor/FileContentIndex/4f45839f-c457-4de3-a563-73c24e7b788a.vsidx +/.vs/Stacks-Editor/FileContentIndex/ee0afd1b-1b22-4d17-946e-54409ec466e7.vsidx +/.vs/Stacks-Editor/v17 +/.vs/Stacks-Editor/v17/.wsuo +/.vs/Stacks-Editor/v17/DocumentLayout.backup.json +/.vs/Stacks-Editor/v17/DocumentLayout.json +/.vs/Stacks-Editor/v17/TestStore/0 +/.vs/Stacks-Editor/v17/TestStore/0/000.testlog +/.vs/Stacks-Editor/v17/TestStore/0/testlog.manifest +/.vs/VSWorkspaceState.json From 407eeaf3eda1f8affdcef99ca93d454d4f3364ae Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Tue, 29 Apr 2025 23:51:06 -0400 Subject: [PATCH 10/17] always set preview visibility when toggling modes --- src/commonmark/plugins/preview.ts | 6 ++--- src/stacks-editor/editor.ts | 6 ++--- test/commonmark/plugins/preview.test.ts | 34 ++++++++++++++++++++++--- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/commonmark/plugins/preview.ts b/src/commonmark/plugins/preview.ts index b356cd26..9b0fe694 100644 --- a/src/commonmark/plugins/preview.ts +++ b/src/commonmark/plugins/preview.ts @@ -118,7 +118,7 @@ class PreviewPluginKey extends StatefulPluginKey { super("preview"); } - togglePreviewVisibility(view: EditorView, isShown: boolean) { + setPreviewVisibility(view: EditorView, isShown: boolean) { const tr = this.setMeta(view.state.tr, { isShown }); view.dispatch(tr); } @@ -142,8 +142,8 @@ export function previewIsVisible(view: EditorView) { * @param view The current editor view * @param isShown Whether the preview should be visible */ -export function togglePreviewVisibility(view: EditorView, isShown: boolean) { - PREVIEW_KEY.togglePreviewVisibility(view, isShown); +export function setPreviewVisibility(view: EditorView, isShown: boolean) { + PREVIEW_KEY.setPreviewVisibility(view, isShown); } /** Singleton instance of @see PreviewPluginKey */ diff --git a/src/stacks-editor/editor.ts b/src/stacks-editor/editor.ts index ea3af3c3..82932887 100644 --- a/src/stacks-editor/editor.ts +++ b/src/stacks-editor/editor.ts @@ -20,7 +20,7 @@ import { } from "../shared/editor-plugin"; import type { Transaction } from "prosemirror-state"; import { - togglePreviewVisibility, + setPreviewVisibility, previewIsVisible, } from "../commonmark/plugins/preview"; @@ -446,9 +446,7 @@ export class StacksEditor implements View { // set the view type for this button this.setView(type); - if (showPreview !== inPreviewNow) { - togglePreviewVisibility(this.backingView.editorView, showPreview); - } + setPreviewVisibility(this.backingView.editorView, showPreview); // TODO better event name? // trigger an event on the target for consumers to listen for diff --git a/test/commonmark/plugins/preview.test.ts b/test/commonmark/plugins/preview.test.ts index 442e8567..8f084efd 100644 --- a/test/commonmark/plugins/preview.test.ts +++ b/test/commonmark/plugins/preview.test.ts @@ -1,7 +1,7 @@ import { createPreviewPlugin, previewIsVisible, - togglePreviewVisibility, + setPreviewVisibility, } from "../../../src/commonmark/plugins/preview"; import { createView } from "../../rich-text/test-helpers"; import { createState } from "../test-helpers"; @@ -145,18 +145,46 @@ describe("preview plugin", () => { expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); expect(renderer).toHaveBeenCalledTimes(0); - togglePreviewVisibility(view, true); + setPreviewVisibility(view, true); // expect it to be rendered expect(previewIsVisible(view)).toBe(true); expect(pluginContainer.querySelector(".js-md-preview")).toBeTruthy(); expect(renderer).toHaveBeenCalledTimes(1); - togglePreviewVisibility(view, false); + setPreviewVisibility(view, false); // expect it not to be rendered again expect(previewIsVisible(view)).toBe(false); expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); expect(renderer).toHaveBeenCalledTimes(1); }); + + it("should not render preview if default is true but visibility was toggled off", () => { + const renderer = jest.fn(() => Promise.resolve()); + pluginContainer = document.createElement("div"); + + const state = createState("", [ + createPreviewPlugin({ + enabled: true, + shownByDefault: true, + parentContainer: () => pluginContainer, + renderDelayMs: 0, + renderer, + }), + ]); + + const view = createView(state); + + //this is called when the markdown mode (without preview) is selected + setPreviewVisibility(view, false); + + // expect it to not be rendered + expect(previewIsVisible(view)).toBe(false); + expect(pluginContainer.querySelector(".js-md-preview")).toBeNull(); + + //renderer will have been called once on init before preview was toggled off + expect(renderer).toHaveBeenCalledTimes(1); + + }); }); From 3a9dc727eefee72d57028b7b0244d3543dc47d71 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:06:01 -0400 Subject: [PATCH 11/17] remove changeset --- .changeset/fifty-tips-listen.md | 5 ----- .gitignore | 34 +++++++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 5 deletions(-) delete mode 100644 .changeset/fifty-tips-listen.md diff --git a/.changeset/fifty-tips-listen.md b/.changeset/fifty-tips-listen.md deleted file mode 100644 index 245b7764..00000000 --- a/.changeset/fifty-tips-listen.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@stackoverflow/stacks-editor": minor ---- - -Adds show/hide functionality to Snippets diff --git a/.gitignore b/.gitignore index b6e6c373..ec74b405 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,37 @@ dist/ test-results/ .idea/ +/.vs +/.vs/slnx.sqlite +/.vs/Stacks-Editor +/.vs/Stacks-Editor/config +/.vs/Stacks-Editor/config/applicationhost.config +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/21f02b70-0696-4735-88a8-16187fc34782 +/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/cadace3d-fd6e-495b-ad80-e0b01dd77b04 +/.vs/Stacks-Editor/CopilotIndices +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929 +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/CodeChunks.db +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-shm +/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-wal +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481 +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-shm +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-wal +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-shm +/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-wal +/.vs/Stacks-Editor/FileContentIndex +/.vs/Stacks-Editor/FileContentIndex/2502a5cd-9100-4810-b9a4-74b5a7f51883.vsidx +/.vs/Stacks-Editor/FileContentIndex/3ac5c41d-d801-4dde-91a6-b72039dfb5fd.vsidx +/.vs/Stacks-Editor/FileContentIndex/4f45839f-c457-4de3-a563-73c24e7b788a.vsidx +/.vs/Stacks-Editor/FileContentIndex/ee0afd1b-1b22-4d17-946e-54409ec466e7.vsidx +/.vs/Stacks-Editor/v17 +/.vs/Stacks-Editor/v17/.wsuo +/.vs/Stacks-Editor/v17/DocumentLayout.backup.json +/.vs/Stacks-Editor/v17/DocumentLayout.json +/.vs/Stacks-Editor/v17/TestStore/0 +/.vs/Stacks-Editor/v17/TestStore/0/000.testlog +/.vs/Stacks-Editor/v17/TestStore/0/testlog.manifest +/.vs/VSWorkspaceState.json From ad5ec32ed040bbe1b2f5918d9d500c82c977fa0f Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:19:17 -0400 Subject: [PATCH 12/17] fix --- .gitignore | 46 ---------------------------------------------- 1 file changed, 46 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index ec74b405..00000000 --- a/.gitignore +++ /dev/null @@ -1,46 +0,0 @@ -node_modules/ -.DS_Store -.vscode/* -!.vscode/extensions.json -!.vscode/launch.json -!.vscode/settings.json -!.vscode/tasks.json -stats.json -dist/ -test-results/ - -.idea/ -/.vs -/.vs/slnx.sqlite -/.vs/Stacks-Editor -/.vs/Stacks-Editor/config -/.vs/Stacks-Editor/config/applicationhost.config -/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions -/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/21f02b70-0696-4735-88a8-16187fc34782 -/.vs/Stacks-Editor/copilot-chat/e7978f8a/sessions/cadace3d-fd6e-495b-ad80-e0b01dd77b04 -/.vs/Stacks-Editor/CopilotIndices -/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929 -/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/CodeChunks.db -/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db -/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-shm -/.vs/Stacks-Editor/CopilotIndices/0.2.1657.32929/SemanticSymbols.db-wal -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481 -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-shm -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/CodeChunks.db-wal -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-shm -/.vs/Stacks-Editor/CopilotIndices/17.12.68.61481/SemanticSymbols.db-wal -/.vs/Stacks-Editor/FileContentIndex -/.vs/Stacks-Editor/FileContentIndex/2502a5cd-9100-4810-b9a4-74b5a7f51883.vsidx -/.vs/Stacks-Editor/FileContentIndex/3ac5c41d-d801-4dde-91a6-b72039dfb5fd.vsidx -/.vs/Stacks-Editor/FileContentIndex/4f45839f-c457-4de3-a563-73c24e7b788a.vsidx -/.vs/Stacks-Editor/FileContentIndex/ee0afd1b-1b22-4d17-946e-54409ec466e7.vsidx -/.vs/Stacks-Editor/v17 -/.vs/Stacks-Editor/v17/.wsuo -/.vs/Stacks-Editor/v17/DocumentLayout.backup.json -/.vs/Stacks-Editor/v17/DocumentLayout.json -/.vs/Stacks-Editor/v17/TestStore/0 -/.vs/Stacks-Editor/v17/TestStore/0/000.testlog -/.vs/Stacks-Editor/v17/TestStore/0/testlog.manifest -/.vs/VSWorkspaceState.json From 168680d23a150d37ab0afe88146c6bd27328f0d7 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:21:48 -0400 Subject: [PATCH 13/17] whoops --- .gitignore | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..b6e6c373 --- /dev/null +++ b/.gitignore @@ -0,0 +1,12 @@ +node_modules/ +.DS_Store +.vscode/* +!.vscode/extensions.json +!.vscode/launch.json +!.vscode/settings.json +!.vscode/tasks.json +stats.json +dist/ +test-results/ + +.idea/ From 719478c3300225c3ad369866de87c31fb4dd921a Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:27:15 -0400 Subject: [PATCH 14/17] revert --- .changeset/fifty-tips-listen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fifty-tips-listen.md diff --git a/.changeset/fifty-tips-listen.md b/.changeset/fifty-tips-listen.md new file mode 100644 index 00000000..245b7764 --- /dev/null +++ b/.changeset/fifty-tips-listen.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": minor +--- + +Adds show/hide functionality to Snippets From 58197f8cd96e9d13ec4621172b53dacf18468a46 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:30:21 -0400 Subject: [PATCH 15/17] add changeset --- .changeset/moody-rabbits-argue.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/moody-rabbits-argue.md diff --git a/.changeset/moody-rabbits-argue.md b/.changeset/moody-rabbits-argue.md new file mode 100644 index 00000000..32e04ef5 --- /dev/null +++ b/.changeset/moody-rabbits-argue.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": minor +--- + +fix markdown preview toggle bug From c8cb0eb92a0a054fa308b5306e7fb84befc056bf Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 00:31:59 -0400 Subject: [PATCH 16/17] format --- test/commonmark/plugins/preview.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/test/commonmark/plugins/preview.test.ts b/test/commonmark/plugins/preview.test.ts index 8f084efd..d239f6d9 100644 --- a/test/commonmark/plugins/preview.test.ts +++ b/test/commonmark/plugins/preview.test.ts @@ -185,6 +185,5 @@ describe("preview plugin", () => { //renderer will have been called once on init before preview was toggled off expect(renderer).toHaveBeenCalledTimes(1); - }); }); From 572bec3d3237d6db082aa3440fbe5440b102bb33 Mon Sep 17 00:00:00 2001 From: Aliza Berger Date: Wed, 30 Apr 2025 08:11:47 -0400 Subject: [PATCH 17/17] make changeset a patch Co-authored-by: Alex Warren --- .changeset/moody-rabbits-argue.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/moody-rabbits-argue.md b/.changeset/moody-rabbits-argue.md index 32e04ef5..1747b837 100644 --- a/.changeset/moody-rabbits-argue.md +++ b/.changeset/moody-rabbits-argue.md @@ -1,5 +1,5 @@ --- -"@stackoverflow/stacks-editor": minor +"@stackoverflow/stacks-editor": patch --- fix markdown preview toggle bug