Skip to content

Commit c9e49d0

Browse files
authored
Add Result controls (Fullscreen, hide-results, edit snippet) buttons to Snippet View (#440)
* feat: snippet result controls * Linting, changset. * Amend control tests to account for changing dom/edit button * Add extra test for edit code callback * linting * Move back to atomic styles, load atomic styles in based on class-marker * linting * Move to a more succinct add/remove of fullscreen atomic CSS classes * Update icon sizing and button visibility
1 parent 1497b2d commit c9e49d0

File tree

9 files changed

+501
-176
lines changed

9 files changed

+501
-176
lines changed

.changeset/good-sides-make.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@stackoverflow/stacks-editor": minor
3+
---
4+
5+
Add extra controls to Snippet View (Edit, Show/Hide results, Expand/Shrink results)

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

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@ function buildUpdateDocumentCallback(view: EditorView) {
6565
};
6666
}
6767

68-
export function openSnippetModal(options?: StackSnippetOptions): MenuCommand {
68+
export function openSnippetModalCommand(
69+
options?: StackSnippetOptions
70+
): MenuCommand {
6971
return (state, dispatch, view): boolean => {
7072
//If we have no means of opening a modal, reject immediately
7173
if (!options || options.openSnippetsModal == undefined) {
@@ -96,28 +98,41 @@ export function openSnippetModal(options?: StackSnippetOptions): MenuCommand {
9698
return true;
9799
}
98100

99-
const snippetMetadata = getSnippetMetadata(discoveredSnippets[0]);
100-
const [js] = snippetMetadata.langNodes.filter(
101-
(l) => l.metaData.language == "js"
102-
);
103-
const [css] = snippetMetadata.langNodes.filter(
104-
(l) => l.metaData.language == "css"
105-
);
106-
const [html] = snippetMetadata.langNodes.filter(
107-
(l) => l.metaData.language == "html"
108-
);
109-
110-
options.openSnippetsModal(
111-
buildUpdateDocumentCallback(view),
112-
snippetMetadata,
113-
js?.content,
114-
css?.content,
115-
html?.content
116-
);
101+
openSnippetModal(discoveredSnippets[0], view, options);
117102
return true;
118103
};
119104
}
120105

106+
export function openSnippetModal(
107+
node: Node,
108+
view: EditorView,
109+
options?: StackSnippetOptions
110+
): void {
111+
//If we have no means of opening a modal, reject immediately
112+
if (!options || options.openSnippetsModal == undefined) {
113+
return;
114+
}
115+
116+
const snippetMetadata = getSnippetMetadata(node);
117+
const [js] = snippetMetadata.langNodes.filter(
118+
(l) => l.metaData.language == "js"
119+
);
120+
const [css] = snippetMetadata.langNodes.filter(
121+
(l) => l.metaData.language == "css"
122+
);
123+
const [html] = snippetMetadata.langNodes.filter(
124+
(l) => l.metaData.language == "html"
125+
);
126+
127+
options.openSnippetsModal(
128+
buildUpdateDocumentCallback(view),
129+
snippetMetadata,
130+
js?.content,
131+
css?.content,
132+
html?.content
133+
);
134+
}
135+
121136
/**
122137
* Snippets are comprised of a container around customized codeblocks. Some of the default behaviour for key-binds makes them behave
123138
* very strangely.
@@ -142,7 +157,7 @@ export const commandList = (opts?: StackSnippetOptions) => ({
142157
"Mod-Enter": swallowSnippetCommand,
143158
"Shift-Enter": swallowSnippetCommand,
144159
"Mod-r": swallowSnippetCommand,
145-
[OPEN_SNIPPET_SHORTCUT]: openSnippetModal(opts),
160+
[OPEN_SNIPPET_SHORTCUT]: openSnippetModalCommand(opts),
146161
});
147162

148163
export const stackSnippetCommandShortcuts = (opts?: StackSnippetOptions) =>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,8 @@ export const stackSnippetRichTextNodeSpec: { [name: string]: NodeSpec } = {
171171
babelPresetReact: { default: "null" },
172172
babelPresetTS: { default: "null" },
173173
showCode: { default: true },
174+
showResult: { default: true },
175+
fullscreen: { default: false },
174176
},
175177
},
176178
stack_snippet_lang: {

0 commit comments

Comments
 (0)