Skip to content

Commit c89c9c9

Browse files
josh-ramos-22Josh Ramos
josh-ramos-22
and
Josh Ramos
authored
[WEB-64] [EDITOR] Code Blocks :D (#352)
* Created code block button * added codeblock to index * added 'code' as a valid type * Stubbed CodeBlock component * added basic code content block w/o syntax highlighting * added types needed for syntax highlighting * integrated code types required with existing implementation * added code from Slate sample implementation * fixed mergeMaps - compiling (yay) but getting runtime errors sads * Added stylesheet - still running into range errors :( * changed element wrapper to only ever return codeline type * YOOO SYNTAX HIGHLIGHTINGS WORKING NOWWWW * added functionality to change language of block - still have to select all text beforehand :/ * added functionality to change language of block w/o having to selectt everything beforehand * right aligned the language selection dropdown * added code to make the language selected in dropdown element persistent after reloads * disabled spellcheck in editor * added support for more languages * tabbing support * moved prism theme to its own file and deleted deprecated style sheet * removed debugging console logs and improved comments * changed code-block prop to be simply 'code' and fixed bg colour of code content block * fixed bg color of codecontentblock * changed default language to Python * removed unused imports * removed unnecessary package json files * removed more unused imports + possible fix for default lang fix * fixed issue where default language would not persist when left unselected --------- Co-authored-by: Josh Ramos <[email protected]>
1 parent 97a9459 commit c89c9c9

15 files changed

+753
-5
lines changed

‎frontend/package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
"@types/draft-js": "0.11.9",
8585
"@types/jest": "26.0.24",
8686
"@types/node": "12.20.55",
87+
"@types/prismjs": "^1.26.0",
8788
"@types/react": "17.0.44",
8889
"@types/react-dom": "17.0.17",
8990
"@types/react-redux": "7.1.24",

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styled from "styled-components";
2+
3+
export type buttonProps = {
4+
background?: string;
5+
};
6+
export const StyledButton = styled.div<buttonProps>`
7+
width: 175px;
8+
height: 45px;
9+
margin: 5px;
10+
background: ${(props) => props.background};
11+
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
border-radius: 10px;
16+
user-select: none;
17+
18+
&:hover {
19+
background: #efeef3;
20+
color: black;
21+
transform: scale(1.04);
22+
}
23+
&:active {
24+
background: #c8d1fa;
25+
transform: scale(0.96);
26+
}
27+
28+
cursor: pointer;
29+
`;

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { ComponentStory, ComponentMeta } from '@storybook/react';
3+
4+
import CreateCodeBlock from './CreateCodeBlock';
5+
6+
import { AiFillEdit } from "react-icons/ai";
7+
8+
export default {
9+
title: 'CSE-UIKIT/CreateCodeBlockButton',
10+
component: CreateCodeBlock,
11+
12+
argTypes: {
13+
backgroundColor: { control: 'color' },
14+
},
15+
} as ComponentMeta<typeof CreateCodeBlock>;
16+
17+
const Template: ComponentStory<typeof CreateCodeBlock> = (args) =>
18+
(
19+
<div
20+
style={{
21+
margin: "30px"
22+
}}
23+
>
24+
Insert Button
25+
<CreateCodeBlock {...args}></CreateCodeBlock>
26+
</div>
27+
)
28+
29+
export const Primary = Template.bind({});
30+
Primary.args = {
31+
background: "#90c2e7",
32+
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { MouseEventHandler } from "react";
2+
import { StyledButton, buttonProps } from "./CreateCodeBlock-Styled";
3+
import { AiOutlineCode } from "react-icons/ai";
4+
5+
type Props = {
6+
onClick?: MouseEventHandler<HTMLDivElement>;
7+
} & buttonProps;
8+
9+
export default function CreateCodeBlock({ onClick, ...styleProps }: Props) {
10+
return (
11+
<StyledButton
12+
data-anchor="CreateCodeBlockButton"
13+
onClick={onClick}
14+
{...styleProps}
15+
>
16+
<AiOutlineCode />
17+
Insert Code Block
18+
</StyledButton>
19+
);
20+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CreateCodeBlock from './CreateCodeBlock';
2+
3+
export default CreateCodeBlock;

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
2+
import styled from "styled-components";
3+
4+
export type StyledProps = {
5+
focused?: boolean;
6+
}
7+
8+
export const StyledCodeContent = styled.div<StyledProps>`
9+
width: 100%;
10+
max-width: 600px;
11+
background: #f7f7f7;
12+
color: #000000;
13+
box-shadow: ${(props) => props.focused && '0px 2px 3px rgba(0, 0, 0, 0.25);'}
14+
padding: 30px 20px;
15+
display: flex;
16+
flex-direction: row;
17+
justify-content: space-between;
18+
align-items: center;
19+
border-radius: 5px;
20+
margin: 5px;
21+
padding: 5px;
22+
font-family: monospace;
23+
`;
24+
25+
export const StyledCodeContentDots = styled.div`
26+
height: 100;
27+
cursor: pointer;
28+
`;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
import { StyledCodeContent, StyledCodeContentDots, StyledProps } from './codecontentblock-Styled';
4+
import { ReactComponent as Dots } from '../../assets/moveable-content-dots.svg';
5+
import { Box } from "@mui/material";
6+
7+
type Props = {
8+
children?: React.ReactElement | any;
9+
onClick?: (...args: any) => void;
10+
} & StyledProps;
11+
12+
export default function MoveableContentBlock({ children, onClick, ...styleProps }: Props) {
13+
const { focused } = styleProps;
14+
return (
15+
<StyledCodeContent
16+
onClick={onClick}
17+
{...styleProps}
18+
data-anchor="ContentBlockWrapper"
19+
>
20+
<div
21+
style={{
22+
width: "90%",
23+
wordWrap: "break-word"
24+
}}
25+
>
26+
{children}
27+
</div>
28+
<StyledCodeContentDots>
29+
{ (focused == true) &&
30+
<Dots
31+
height="18px"
32+
width="18px"
33+
/>
34+
}
35+
</StyledCodeContentDots>
36+
</StyledCodeContent>
37+
);
38+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { ComponentStory, ComponentMeta } from '@storybook/react';
3+
4+
import MoveableCodeContentContentBlock from './codecontentblock-wrapper';
5+
6+
export default {
7+
title: 'CSE-UIKIT/CodeContentContentBlock',
8+
component: MoveableCodeContentContentBlock,
9+
} as ComponentMeta<typeof MoveableCodeContentContentBlock>;
10+
11+
const Template: ComponentStory<typeof MoveableCodeContentContentBlock> = (args) =>
12+
(
13+
<div
14+
style={{
15+
margin: "30px"
16+
}}
17+
>
18+
Moveable Content Block
19+
<MoveableCodeContentContentBlock {...args}>
20+
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.
21+
</MoveableCodeContentContentBlock>
22+
</div>
23+
)
24+
25+
export const Primary = Template.bind({});

‎frontend/src/packages/editor/componentFactory.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from "react";
44
import { BlockData, UpdateCallback, CMSBlockProps } from "./types";
55
import EditorBlock from "./components/EditorBlock";
66
import { OperationManager, slateToCmsOperation } from "./operationManager";
7+
import CodeBlock from "./components/CodeBlock";
78

89
// 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
910
// 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;
1516
// registration of all block constructors
1617
const constructors: Record<string, (props: CMSBlockProps) => JSX.Element> = {
1718
"paragraph": (props) => <EditorBlock {...props} />,
18-
"heading": (props) => <HeadingBlock {...props} />
19+
"heading": (props) => <HeadingBlock {...props} />,
20+
"code" : (props) => <CodeBlock {...props} />
1921
}
2022

2123
/**

0 commit comments

Comments
 (0)