From 3c238862e4ded4613830a32d1fe26f997366d045 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 30 Mar 2023 18:32:15 +1100 Subject: [PATCH 01/10] stubbed code format btn --- .../cse-ui-kit/small_buttons/CodeButton.tsx | 23 +++++++++++++++++++ .../components/buttons/EditorCodeButton.tsx | 20 ++++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx create mode 100644 frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx diff --git a/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx b/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx new file mode 100644 index 00000000..18dd9f70 --- /dev/null +++ b/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx @@ -0,0 +1,23 @@ +import React, { MouseEventHandler } from 'react'; +import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled'; +import { ReactComponent as Bold } from 'src/cse-ui-kit/assets/bold-button.svg'; + +type Props = { + onClick?: MouseEventHandler; + onMouseDown?: MouseEventHandler; +} & buttonProps; + +export default function CodeButton({ + onClick, + onMouseDown, + ...styleProps +}: Props) { + return ( + + + + ); +} diff --git a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx new file mode 100644 index 00000000..82622043 --- /dev/null +++ b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx @@ -0,0 +1,20 @@ +import React, { FC } from "react"; +import { useSlate } from "slate-react"; +import BoldButton from "src/cse-ui-kit/small_buttons/BoldButton"; +import { toggleMark } from "./buttonHelpers"; + +const EditorCodeButton: FC = () => { + const editor = useSlate(); + return ( + { + event.preventDefault(); + // TODO switch mark to code (not sure if this has to be defined) + toggleMark(editor, "bold"); + }} + /> + ); +}; + +export default EditorCodeButton; From ea2b31245d3859741b6b5accc004c3992bbd28ca Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 30 Mar 2023 18:38:03 +1100 Subject: [PATCH 02/10] imported code icon --- frontend/src/cse-ui-kit/assets/code-icon.svg | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 frontend/src/cse-ui-kit/assets/code-icon.svg diff --git a/frontend/src/cse-ui-kit/assets/code-icon.svg b/frontend/src/cse-ui-kit/assets/code-icon.svg new file mode 100644 index 00000000..e676ad31 --- /dev/null +++ b/frontend/src/cse-ui-kit/assets/code-icon.svg @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file From 9758cdb33d97fe23632aa1e397de46b699511578 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 30 Mar 2023 18:42:04 +1100 Subject: [PATCH 03/10] Stubbed btn appearing in editor (tho only half of the icon rip --- .../src/cse-ui-kit/assets/{code-icon.svg => code-button.svg} | 0 frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx | 4 ++-- frontend/src/packages/editor/components/EditorBlock.tsx | 2 ++ .../packages/editor/components/buttons/EditorCodeButton.tsx | 4 ++-- 4 files changed, 6 insertions(+), 4 deletions(-) rename frontend/src/cse-ui-kit/assets/{code-icon.svg => code-button.svg} (100%) diff --git a/frontend/src/cse-ui-kit/assets/code-icon.svg b/frontend/src/cse-ui-kit/assets/code-button.svg similarity index 100% rename from frontend/src/cse-ui-kit/assets/code-icon.svg rename to frontend/src/cse-ui-kit/assets/code-button.svg diff --git a/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx b/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx index 18dd9f70..d8463670 100644 --- a/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx +++ b/frontend/src/cse-ui-kit/small_buttons/CodeButton.tsx @@ -1,6 +1,6 @@ import React, { MouseEventHandler } from 'react'; import { StyledButton, buttonProps, scaleRate } from './small_buttons-Styled'; -import { ReactComponent as Bold } from 'src/cse-ui-kit/assets/bold-button.svg'; +import { ReactComponent as Code } from 'src/cse-ui-kit/assets/code-button.svg'; type Props = { onClick?: MouseEventHandler; @@ -14,7 +14,7 @@ export default function CodeButton({ }: Props) { return ( - diff --git a/frontend/src/packages/editor/components/EditorBlock.tsx b/frontend/src/packages/editor/components/EditorBlock.tsx index 9a54d351..ae117464 100644 --- a/frontend/src/packages/editor/components/EditorBlock.tsx +++ b/frontend/src/packages/editor/components/EditorBlock.tsx @@ -19,6 +19,7 @@ import EditorRightAlignButton from "./buttons/EditorRightAlignButton"; import ContentBlock from "../../../cse-ui-kit/contentblock/contentblock-wrapper"; import { handleKey } from "./buttons/buttonHelpers"; +import EditorCodeButton from "./buttons/EditorCodeButton"; const defaultTextSize = 16; @@ -84,6 +85,7 @@ const EditorBlock: FC = ({ + diff --git a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx index 82622043..ca064f3c 100644 --- a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx +++ b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx @@ -1,12 +1,12 @@ import React, { FC } from "react"; import { useSlate } from "slate-react"; -import BoldButton from "src/cse-ui-kit/small_buttons/BoldButton"; +import CodeButton from "src/cse-ui-kit/small_buttons/CodeButton"; import { toggleMark } from "./buttonHelpers"; const EditorCodeButton: FC = () => { const editor = useSlate(); return ( - { event.preventDefault(); From 8d53285e590474feabac6b7d63afa841ac3c5504 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 30 Mar 2023 19:13:41 +1100 Subject: [PATCH 04/10] initial imp --- .../editor/components/EditorBlock.tsx | 20 ++++++++++++++++--- .../components/buttons/EditorCodeButton.tsx | 2 +- .../components/buttons/buttonHelpers.ts | 10 ++++++++-- frontend/src/packages/editor/types.ts | 1 + 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/frontend/src/packages/editor/components/EditorBlock.tsx b/frontend/src/packages/editor/components/EditorBlock.tsx index ae117464..09fd3eb2 100644 --- a/frontend/src/packages/editor/components/EditorBlock.tsx +++ b/frontend/src/packages/editor/components/EditorBlock.tsx @@ -35,6 +35,7 @@ const Text = styled.span<{ bold: boolean; italic: boolean; underline: boolean; + code: boolean | string; textSize: number; align: string; }>` @@ -43,9 +44,11 @@ const Text = styled.span<{ font-size: ${(props) => props.textSize}px; text-decoration-line: ${(props) => (props.underline ? "underline" : "none")}; text-align: ${(props) => props.align}; + background-color: ${(props) => props.code ? "grey" : "white"} `; const AlignedText = Text.withComponent("div"); +const CodeText = Text.withComponent("code"); const EditorBlock: FC = ({ id, @@ -62,14 +65,25 @@ const EditorBlock: FC = ({ bold: leaf.bold ?? false, italic: leaf.italic ?? false, underline: leaf.underline ?? false, + code: leaf.code ?? false, align: leaf.align ?? "left", textSize: leaf.textSize ?? defaultTextSize, ...attributes } - return leaf.align == null - ? {children} - : {children}; + return leaf.code ? ( + {children} + ) : leaf.align == null ? ( + {children} + ) : ( + {children} + ); + // return leaf.align == null + // ? {children} + // : leaf.code + // ? {children} + // : + // {children}; }, [] ); diff --git a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx index ca064f3c..d8d9328b 100644 --- a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx +++ b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx @@ -11,7 +11,7 @@ const EditorCodeButton: FC = () => { onMouseDown={(event) => { event.preventDefault(); // TODO switch mark to code (not sure if this has to be defined) - toggleMark(editor, "bold"); + toggleMark(editor, "code"); }} /> ); diff --git a/frontend/src/packages/editor/components/buttons/buttonHelpers.ts b/frontend/src/packages/editor/components/buttons/buttonHelpers.ts index 21da441c..5b0c1206 100644 --- a/frontend/src/packages/editor/components/buttons/buttonHelpers.ts +++ b/frontend/src/packages/editor/components/buttons/buttonHelpers.ts @@ -8,7 +8,7 @@ import { ReactEditor } from "slate-react"; */ const toggleMark = ( editor: BaseEditor & ReactEditor, - format: "bold" | "italic" | "underline" + format: "bold" | "italic" | "underline" | "code" ): void => { const isActive = isMarkActive(editor, format); @@ -27,7 +27,7 @@ const toggleMark = ( */ const isMarkActive = ( editor: BaseEditor & ReactEditor, - format: "bold" | "italic" | "underline" + format: "bold" | "italic" | "underline" | "code" ): boolean => { // https://docs.slatejs.org/concepts/07-editor // Editor object exposes properties of the current editor @@ -64,6 +64,12 @@ const handleKey = ( toggleMark(editor, "underline"); } } + switch (event.key) { + case '`': { + event.preventDefault(); + toggleMark(editor, "code"); + } + } } export { toggleMark, isMarkActive, handleKey }; diff --git a/frontend/src/packages/editor/types.ts b/frontend/src/packages/editor/types.ts index 36fbcf25..8aca24e1 100644 --- a/frontend/src/packages/editor/types.ts +++ b/frontend/src/packages/editor/types.ts @@ -15,6 +15,7 @@ export type CustomText = { underline?: boolean; type?: string; align?: string; + code?: string; }; export interface CMSBlockProps { From 52fdbd91cac6a3c986d57038fa0b8e6ad5b06a19 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Sat, 1 Apr 2023 13:52:07 +1100 Subject: [PATCH 05/10] fixed bg color of code blocks --- .../editor/components/EditorBlock.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/frontend/src/packages/editor/components/EditorBlock.tsx b/frontend/src/packages/editor/components/EditorBlock.tsx index 09fd3eb2..2bb2a33b 100644 --- a/frontend/src/packages/editor/components/EditorBlock.tsx +++ b/frontend/src/packages/editor/components/EditorBlock.tsx @@ -42,13 +42,17 @@ const Text = styled.span<{ font-weight: ${(props) => (props.bold ? 600 : 400)}; font-style: ${(props) => (props.italic ? "italic" : "normal")}; font-size: ${(props) => props.textSize}px; + 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 ? "grey" : "white"} + background-color: ${(props) => props.code ? "#eee" : "#fff"}; `; -const AlignedText = Text.withComponent("div"); -const CodeText = Text.withComponent("code"); +const InlineDiv = styled.div` + display: inline-flex; +`; + +const AlignedText = Text.withComponent('div'); const EditorBlock: FC = ({ id, @@ -70,20 +74,12 @@ const EditorBlock: FC = ({ textSize: leaf.textSize ?? defaultTextSize, ...attributes } - - return leaf.code ? ( - {children} - ) : leaf.align == null ? ( + + return leaf.align == null + ? {children} - ) : ( - {children} - ); - // return leaf.align == null - // ? {children} - // : leaf.code - // ? {children} - // : - // {children}; + : + {children}; }, [] ); From 2c90b11e8a8d1e97e3f5969c467b913c41198c5f Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Sat, 1 Apr 2023 14:05:29 +1100 Subject: [PATCH 06/10] fixed code icon --- frontend/src/cse-ui-kit/assets/code-button.svg | 15 +-------------- .../packages/editor/components/EditorBlock.tsx | 4 ---- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/frontend/src/cse-ui-kit/assets/code-button.svg b/frontend/src/cse-ui-kit/assets/code-button.svg index e676ad31..2878321d 100644 --- a/frontend/src/cse-ui-kit/assets/code-button.svg +++ b/frontend/src/cse-ui-kit/assets/code-button.svg @@ -1,14 +1 @@ - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/packages/editor/components/EditorBlock.tsx b/frontend/src/packages/editor/components/EditorBlock.tsx index 2bb2a33b..e10ed8f5 100644 --- a/frontend/src/packages/editor/components/EditorBlock.tsx +++ b/frontend/src/packages/editor/components/EditorBlock.tsx @@ -48,10 +48,6 @@ const Text = styled.span<{ background-color: ${(props) => props.code ? "#eee" : "#fff"}; `; -const InlineDiv = styled.div` - display: inline-flex; -`; - const AlignedText = Text.withComponent('div'); const EditorBlock: FC = ({ From 7eada0c78f5217ab70307e470e3cb13768c59997 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Sat, 1 Apr 2023 14:06:37 +1100 Subject: [PATCH 07/10] found icon closer to the spec --- frontend/src/cse-ui-kit/assets/code-button.svg | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/cse-ui-kit/assets/code-button.svg b/frontend/src/cse-ui-kit/assets/code-button.svg index 2878321d..8baa053a 100644 --- a/frontend/src/cse-ui-kit/assets/code-button.svg +++ b/frontend/src/cse-ui-kit/assets/code-button.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file From e8142128f0903141840ee938048c7ba0f95bebf8 Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Wed, 5 Apr 2023 20:47:57 +1000 Subject: [PATCH 08/10] reverted style in ternary operator --- frontend/src/packages/editor/components/EditorBlock.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/packages/editor/components/EditorBlock.tsx b/frontend/src/packages/editor/components/EditorBlock.tsx index e10ed8f5..03b6a1bc 100644 --- a/frontend/src/packages/editor/components/EditorBlock.tsx +++ b/frontend/src/packages/editor/components/EditorBlock.tsx @@ -72,10 +72,8 @@ const EditorBlock: FC = ({ } return leaf.align == null - ? - {children} - : - {children}; + ? {children} + : {children}; }, [] ); From 008f72f3c0cd25894fdac4693d9fd897e80d1b9e Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 6 Apr 2023 23:07:43 +1000 Subject: [PATCH 09/10] Removed TODO comment --- .../src/packages/editor/components/buttons/EditorCodeButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx index d8d9328b..f5c6a7ad 100644 --- a/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx +++ b/frontend/src/packages/editor/components/buttons/EditorCodeButton.tsx @@ -10,7 +10,6 @@ const EditorCodeButton: FC = () => { size={30} onMouseDown={(event) => { event.preventDefault(); - // TODO switch mark to code (not sure if this has to be defined) toggleMark(editor, "code"); }} /> From 373b602fa2eb95ab84ac86bd2a0141db6af8becf Mon Sep 17 00:00:00 2001 From: Josh Ramos Date: Thu, 6 Apr 2023 23:15:53 +1000 Subject: [PATCH 10/10] fixed merge conflict --- .../editor/components/buttons/buttonHelpers.ts | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/frontend/src/packages/editor/components/buttons/buttonHelpers.ts b/frontend/src/packages/editor/components/buttons/buttonHelpers.ts index 4be48d54..872f2af8 100644 --- a/frontend/src/packages/editor/components/buttons/buttonHelpers.ts +++ b/frontend/src/packages/editor/components/buttons/buttonHelpers.ts @@ -8,11 +8,7 @@ import { ReactEditor } from 'slate-react'; */ const toggleMark = ( editor: BaseEditor & ReactEditor, -<<<<<<< HEAD - format: "bold" | "italic" | "underline" | "code" -======= - format: 'bold' | 'italic' | 'underline' | 'quote' ->>>>>>> main + format: 'bold' | 'italic' | 'underline' | 'quote' | 'code' ): void => { const isActive = isMarkActive(editor, format); @@ -31,11 +27,7 @@ const toggleMark = ( */ const isMarkActive = ( editor: BaseEditor & ReactEditor, -<<<<<<< HEAD - format: "bold" | "italic" | "underline" | "code" -======= - format: 'bold' | 'italic' | 'underline' | 'quote' ->>>>>>> main + format: 'bold' | 'italic' | 'underline' | 'quote' | 'code' ): boolean => { // https://docs.slatejs.org/concepts/07-editor // Editor object exposes properties of the current editor @@ -77,7 +69,6 @@ const handleKey = ( toggleMark(editor, 'quote'); } } -<<<<<<< HEAD switch (event.key) { case '`': { event.preventDefault(); @@ -85,8 +76,5 @@ const handleKey = ( } } } -======= -}; ->>>>>>> main export { toggleMark, isMarkActive, handleKey };