Add code block copy and collapse functionality (#2361)

* add buttons to codeblocks

* add functionality

* Document functions

* Improve accessibility

* Remove pointless DefaultReset

* implement some requested changes

* fix content shift when expanding or collapsing

---------

Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>

src/app/styles/CustomHtml.css.ts

@@ -85,10 +85,35 @@ export const CodeBlock = style([
   MarginSpaced,
   {
     fontStyle: 'normal',
+    position: 'relative',
   },
 ]);
-export const CodeBlockInternal = style({
-  padding: `${config.space.S200} ${config.space.S200} 0`,
+export const CodeBlockInternal = recipe({
+  base: {
+    padding: `${config.space.S200} ${config.space.S200} 0`,
+    minWidth: toRem(100),
+  },
+  variants: {
+    collapsed: {
+      true: {
+        maxHeight: `calc(${config.lineHeight.T400} * 9.6)`,
+      },
+    },
+  },
+});
+export const CodeBlockControls = style({
+  position: 'absolute',
+  top: config.space.S200,
+  right: config.space.S200,
+  visibility: 'hidden',
+  selectors: {
+    [`${CodeBlock}:hover &`]: {
+      visibility: 'visible',
+    },
+    [`${CodeBlock}:focus-within &`]: {
+      visibility: 'visible',
+    },
+  },
 });
 
 export const List = style([