diff --git a/.changeset/moody-rabbits-argue.md b/.changeset/moody-rabbits-argue.md new file mode 100644 index 00000000..1747b837 --- /dev/null +++ b/.changeset/moody-rabbits-argue.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": patch +--- + +fix markdown preview toggle bug 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..d239f6d9 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,45 @@ 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); + }); });