fix(preview): Preview showing in markdown-only mode

.changeset/moody-rabbits-argue.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-editor": patch
+---
+
+fix markdown preview toggle bug

src/commonmark/plugins/preview.ts

@@ -118,7 +118,7 @@ class PreviewPluginKey extends StatefulPluginKey<PreviewPluginState> {
         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 */

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

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