[WEB-64] [EDITOR] Code Blocks :D

frontend/package.json

@@ -83,6 +83,7 @@
     "@types/draft-js": "0.11.9",
     "@types/jest": "26.0.24",
     "@types/node": "12.20.55",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
     "@types/react-dom": "17.0.17",
     "@types/react-redux": "7.1.24",

frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock-Styled.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export type buttonProps = {
+  background?: string;
+};
+export const StyledButton = styled.div<buttonProps>`
+  width: 175px;
+  height: 45px;
+  margin: 5px;
+  background: ${(props) => props.background};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  user-select: none;
+
+  &:hover {
+    background: #efeef3;
+    color: black;
+    transform: scale(1.04);
+  }
+  &:active {
+    background: #c8d1fa;
+    transform: scale(0.96);
+  }
+
+  cursor: pointer;
+`;

frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import CreateCodeBlock from './CreateCodeBlock';
+
+import { AiFillEdit } from "react-icons/ai";
+
+export default {
+  title: 'CSE-UIKIT/CreateCodeBlockButton',
+  component: CreateCodeBlock,
+
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof CreateCodeBlock>;
+
+const Template: ComponentStory<typeof CreateCodeBlock> = (args) =>
+(
+  <div
+    style={{
+      margin: "30px"
+    }}
+  >
+    Insert Button
+    <CreateCodeBlock {...args}></CreateCodeBlock>
+  </div>
+)
+
+export const Primary = Template.bind({});
+Primary.args = {
+  background: "#90c2e7",
+}

frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.tsx

@@ -0,0 +1,20 @@
+import React, { MouseEventHandler } from "react";
+import { StyledButton, buttonProps } from "./CreateCodeBlock-Styled";
+import { AiOutlineCode } from "react-icons/ai";
+
+type Props = {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+} & buttonProps;
+
+export default function CreateCodeBlock({ onClick, ...styleProps }: Props) {
+  return (
+    <StyledButton
+      data-anchor="CreateCodeBlockButton"
+      onClick={onClick}
+      {...styleProps}
+    >
+      <AiOutlineCode />
+      Insert Code Block
+    </StyledButton>
+  );
+}

frontend/src/cse-ui-kit/CreateCodeBlock_button /index.ts

@@ -0,0 +1,3 @@
+import CreateCodeBlock from './CreateCodeBlock';
+
+export default CreateCodeBlock;

frontend/src/cse-ui-kit/codeblock/codecontentblock-Styled.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import styled from "styled-components";
+
+export type StyledProps = {
+  focused?: boolean;
+}
+
+export const StyledCodeContent = styled.div<StyledProps>`
+  width: 100%;
+  max-width: 600px;
+  background: #f7f7f7;
+  color: #000000;
+  box-shadow: ${(props) => props.focused && '0px 2px 3px rgba(0, 0, 0, 0.25);'}
+  padding: 30px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 5px;
+  font-family: monospace;
+`;
+
+export const StyledCodeContentDots = styled.div`
+  height: 100;
+  cursor: pointer;
+`;

frontend/src/cse-ui-kit/codeblock/codecontentblock-wrapper.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable */
+import React from 'react';
+import { StyledCodeContent, StyledCodeContentDots, StyledProps } from './codecontentblock-Styled';
+import { ReactComponent as Dots } from '../../assets/moveable-content-dots.svg';
+import { Box } from "@mui/material";
+
+type Props = {
+  children?: React.ReactElement | any;
+  onClick?: (...args: any) => void;
+} & StyledProps;
+
+export default function MoveableContentBlock({ children, onClick, ...styleProps }: Props) {
+  const { focused } = styleProps;
+  return (
+    <StyledCodeContent
+      onClick={onClick}
+      {...styleProps}
+      data-anchor="ContentBlockWrapper"
+    >
+      <div
+        style={{
+          width: "90%",
+          wordWrap: "break-word"
+        }}
+      >
+        {children}
+      </div>
+      <StyledCodeContentDots>
+        { (focused == true) &&
+          <Dots
+            height="18px"
+            width="18px"
+          />
+        }
+      </StyledCodeContentDots>
+    </StyledCodeContent>
+  );
+}

frontend/src/cse-ui-kit/codeblock/codecontentblock.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import MoveableCodeContentContentBlock from './codecontentblock-wrapper';
+
+export default {
+  title: 'CSE-UIKIT/CodeContentContentBlock',
+  component: MoveableCodeContentContentBlock,
+} as ComponentMeta<typeof MoveableCodeContentContentBlock>;
+
+const Template: ComponentStory<typeof MoveableCodeContentContentBlock> = (args) =>
+(
+  <div
+    style={{
+      margin: "30px"
+    }}
+  >
+    Moveable Content Block
+    <MoveableCodeContentContentBlock {...args}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </MoveableCodeContentContentBlock>
+  </div>
+)
+
+export const Primary = Template.bind({});

frontend/src/packages/editor/componentFactory.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { BlockData, UpdateCallback, CMSBlockProps } from "./types";
 import EditorBlock from "./components/EditorBlock";
 import { OperationManager, slateToCmsOperation } from "./operationManager";
+import CodeBlock from "./components/CodeBlock";
 
 // TODO: not now because I want to get this over and done with but the idea of attaching the operation path to the id irks me
 //  because logically the operation paths aren't actually coupled to the id, it is just a coincidence, ideally the source of the operation path index
@@ -15,7 +16,8 @@ type callbackHandler = (id: number, update: BlockData) => void;
 // registration of all block constructors
 const constructors: Record<string, (props: CMSBlockProps) => JSX.Element> = {
     "paragraph": (props) => <EditorBlock {...props} />,
-    "heading": (props) => <HeadingBlock {...props} />
+    "heading": (props) => <HeadingBlock {...props} />,
+    "code" : (props) => <CodeBlock {...props} />
 }
 
 /**