Add Result controls (Fullscreen, hide-results, edit snippet) buttons to Snippet View

.changeset/good-sides-make.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-editor": minor
+---
+
+Add extra controls to Snippet View (Edit, Show/Hide results, Expand/Shrink results)

plugins/official/stack-snippets/src/commands.ts

@@ -65,7 +65,9 @@ function buildUpdateDocumentCallback(view: EditorView) {
     };
 }
 
-export function openSnippetModal(options?: StackSnippetOptions): MenuCommand {
+export function openSnippetModalCommand(
+    options?: StackSnippetOptions
+): MenuCommand {
     return (state, dispatch, view): boolean => {
         //If we have no means of opening a modal, reject immediately
         if (!options || options.openSnippetsModal == undefined) {
@@ -96,28 +98,41 @@ export function openSnippetModal(options?: StackSnippetOptions): MenuCommand {
             return true;
         }
 
-        const snippetMetadata = getSnippetMetadata(discoveredSnippets[0]);
-        const [js] = snippetMetadata.langNodes.filter(
-            (l) => l.metaData.language == "js"
-        );
-        const [css] = snippetMetadata.langNodes.filter(
-            (l) => l.metaData.language == "css"
-        );
-        const [html] = snippetMetadata.langNodes.filter(
-            (l) => l.metaData.language == "html"
-        );
-
-        options.openSnippetsModal(
-            buildUpdateDocumentCallback(view),
-            snippetMetadata,
-            js?.content,
-            css?.content,
-            html?.content
-        );
+        openSnippetModal(discoveredSnippets[0], view, options);
         return true;
     };
 }
 
+export function openSnippetModal(
+    node: Node,
+    view: EditorView,
+    options?: StackSnippetOptions
+): void {
+    //If we have no means of opening a modal, reject immediately
+    if (!options || options.openSnippetsModal == undefined) {
+        return;
+    }
+
+    const snippetMetadata = getSnippetMetadata(node);
+    const [js] = snippetMetadata.langNodes.filter(
+        (l) => l.metaData.language == "js"
+    );
+    const [css] = snippetMetadata.langNodes.filter(
+        (l) => l.metaData.language == "css"
+    );
+    const [html] = snippetMetadata.langNodes.filter(
+        (l) => l.metaData.language == "html"
+    );
+
+    options.openSnippetsModal(
+        buildUpdateDocumentCallback(view),
+        snippetMetadata,
+        js?.content,
+        css?.content,
+        html?.content
+    );
+}
+
 /**
  * Snippets are comprised of a container around customized codeblocks. Some of the default behaviour for key-binds makes them behave
  * very strangely.
@@ -142,7 +157,7 @@ export const commandList = (opts?: StackSnippetOptions) => ({
     "Mod-Enter": swallowSnippetCommand,
     "Shift-Enter": swallowSnippetCommand,
     "Mod-r": swallowSnippetCommand,
-    [OPEN_SNIPPET_SHORTCUT]: openSnippetModal(opts),
+    [OPEN_SNIPPET_SHORTCUT]: openSnippetModalCommand(opts),
 });
 
 export const stackSnippetCommandShortcuts = (opts?: StackSnippetOptions) =>

plugins/official/stack-snippets/src/schema.ts

@@ -171,6 +171,8 @@ export const stackSnippetRichTextNodeSpec: { [name: string]: NodeSpec } = {
             babelPresetReact: { default: "null" },
             babelPresetTS: { default: "null" },
             showCode: { default: true },
+            showResult: { default: true },
+            fullscreen: { default: false },
         },
     },
     stack_snippet_lang: {