[WEB-28] [EDITOR] implement code blocks (#346)

* stubbed code format btn

* imported code icon

* Stubbed btn appearing in editor (tho only half of the icon rip

* initial imp

* fixed bg color of code blocks

* fixed code icon

* found icon closer to the spec

* reverted style in ternary operator

* Removed TODO comment

* fixed merge conflict

---------

Co-authored-by: Josh Ramos <josh.ramos@student.unsw.edu.au>

Author: josh-ramos-22

frontend/src/cse-ui-kit/assets/code-button.svg

@@ -0,0 +1,23 @@
+import React, { MouseEventHandler } from 'react';
+import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled';
+import { ReactComponent as Code } from 'src/cse-ui-kit/assets/code-button.svg';
+
+type Props = {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: MouseEventHandler<HTMLDivElement>;
+} & buttonProps;
+
+export default function CodeButton({
+  onClick,
+  onMouseDown,
+  ...styleProps
+}: Props) {
+  return (
+    <StyledButton onClick={onClick} onMouseDown={onMouseDown} {...styleProps}>
+      <Code        
+        height={styleProps.size * scaleRate}
+        width={styleProps.size * scaleRate}
+      />
+    </StyledButton>
+  );
+}

frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx

@@ -13,8 +13,9 @@ import EditorCenterAlignButton from './buttons/EditorCenterAlignButton';
 import EditorLeftAlignButton from './buttons/EditorLeftAlignButton';
 import EditorRightAlignButton from './buttons/EditorRightAlignButton';
 
-import ContentBlock from '../../../cse-ui-kit/contentblock/contentblock-wrapper';
-import { handleKey } from './buttons/buttonHelpers';
+import ContentBlock from "../../../cse-ui-kit/contentblock/contentblock-wrapper";
+import { handleKey } from "./buttons/buttonHelpers";
+import EditorCodeButton from "./buttons/EditorCodeButton";
 
 const defaultTextSize = 16;
 
@@ -30,6 +31,7 @@ const Text = styled.span<{
   bold: boolean;
   italic: boolean;
   underline: boolean;
+  code: boolean | string;
   quote: boolean;
   textSize: number;
   align: string;
@@ -38,8 +40,10 @@ const Text = styled.span<{
   font-style: ${(props) => (props.italic || props.quote ? 'italic' : 'normal')};
   color: ${(props) => (props.quote ? '#9e9e9e' : 'black')};
   font-size: ${(props) => props.textSize}px;
-  text-decoration-line: ${(props) => (props.underline ? 'underline' : 'none')};
+  font-family: ${(props) => props.code ? "monospace" : "inherit"};
+  text-decoration-line: ${(props) => (props.underline ? "underline" : "none")};
   text-align: ${(props) => props.align};
+  background-color: ${(props) => props.code ? "#eee" : "#fff"};
 `;
 
 const Quote = styled.blockquote`
@@ -66,6 +70,7 @@ const EditorBlock: FC<CMSBlockProps> = ({
         italic: leaf.italic ?? false,
         underline: leaf.underline ?? false,
         quote: leaf.quote ?? false,
+        code: leaf.code ?? false,
         align: leaf.align ?? 'left',
         textSize: leaf.textSize ?? defaultTextSize,
         ...attributes,
@@ -93,6 +98,7 @@ const EditorBlock: FC<CMSBlockProps> = ({
           <EditorBoldButton />
           <EditorItalicButton />
           <EditorUnderlineButton />
+          <EditorCodeButton />
           <EditorQuoteButton />
           <EditorSelectFont />
           <EditorLeftAlignButton />

frontend/src/packages/editor/components/EditorBlock.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import { useSlate } from "slate-react";
+import CodeButton from "src/cse-ui-kit/small_buttons/CodeButton";
+import { toggleMark } from "./buttonHelpers";
+
+const EditorCodeButton: FC = () => {
+  const editor = useSlate();
+  return (
+    <CodeButton
+      size={30}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        toggleMark(editor, "code");
+      }}
+    />
+  );
+};
+
+export default EditorCodeButton;

frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx

@@ -8,7 +8,7 @@ import { ReactEditor } from 'slate-react';
  */
 const toggleMark = (
   editor: BaseEditor & ReactEditor,
-  format: 'bold' | 'italic' | 'underline' | 'quote'
+  format: 'bold' | 'italic' | 'underline' | 'quote' | 'code'
 ): void => {
   const isActive = isMarkActive(editor, format);
 
@@ -27,7 +27,7 @@ const toggleMark = (
  */
 const isMarkActive = (
   editor: BaseEditor & ReactEditor,
-  format: 'bold' | 'italic' | 'underline' | 'quote'
+  format: 'bold' | 'italic' | 'underline' | 'quote' | 'code'
 ): boolean => {
   // https://docs.slatejs.org/concepts/07-editor
   // Editor object exposes properties of the current editor
@@ -69,6 +69,12 @@ const handleKey = (
       toggleMark(editor, 'quote');
     }
   }
-};
+  switch (event.key) {
+    case '`': {
+      event.preventDefault();
+      toggleMark(editor, "code");
+    }
+  }
+}
 
 export { toggleMark, isMarkActive, handleKey };

frontend/src/packages/editor/components/buttons/buttonHelpers.ts

@@ -16,6 +16,7 @@ export type CustomText = {
   quote?: boolean;
   type?: string;
   align?: string;
+  code?: string;
 };
 
 export interface CMSBlockProps {