[WEB-72] Implement checklists

frontend/package.json

@@ -22,6 +22,7 @@
     "redux-persist": "^6.0.0",
     "redux-saga": "1.1.3",
     "slate": "0.78.0",
+    "slate-history": "^0.93.0",
     "slate-react": "0.79.0",
     "socket.io": "^4.5.3",
     "socket.io-client": "^4.5.3",

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

@@ -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/checklist-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/packages/editor/components/EditorBlock.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { createEditor } from 'slate';
 import React, { FC, useMemo, useCallback } from 'react';
-import { Slate, Editable, withReact, RenderLeafProps } from 'slate-react';
+import { Slate, Editable, withReact, RenderLeafProps, useReadOnly } from 'slate-react';
+import { createEditor } from 'slate'
 
 import { CMSBlockProps } from '../types';
 import EditorBoldButton from './buttons/EditorBoldButton';
@@ -12,10 +12,12 @@ import EditorSelectFont from './buttons/EditorSelectFont';
 import EditorCenterAlignButton from './buttons/EditorCenterAlignButton';
 import EditorLeftAlignButton from './buttons/EditorLeftAlignButton';
 import EditorRightAlignButton from './buttons/EditorRightAlignButton';
+import EditorCodeButton from "./buttons/EditorCodeButton";
+import EditorChecklistButton from "./buttons/EditorChecklistButton";
 
 import ContentBlock from "../../../cse-ui-kit/contentblock/contentblock-wrapper";
 import { handleKey } from "./buttons/buttonHelpers";
-import EditorCodeButton from "./buttons/EditorCodeButton";
+import { withHistory } from 'slate-history';
 
 const defaultTextSize = 16;
 
@@ -46,6 +48,51 @@ const Text = styled.span<{
   background-color: ${(props) => props.code ? "#eee" : "#fff"};
 `;
 
+
+const CheckListItemElement = ({children, attributes, leaf}: any) => {
+  const readOnly = useReadOnly()
+  const [checked, setChecked] = React.useState(false)
+  return (
+    <div {...attributes} style={{display: 'flex', alignItems: 'left'}}>
+      <div
+        style={{ userSelect: "none" }}
+        contentEditable={false}
+      >
+        <span
+          contentEditable={false}
+          style={{
+            marginRight: '0.75em'
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={checked}
+            onChange={event => {
+              // Figure out why ReactEditor.findPath does not work
+              // const path = ReactEditor.findPath(editor as ReactEditor, leaf);
+              // const newProperties = {
+              //   checked: event.target.checked,
+              // }
+              // Transforms.setNodes(editor, newProperties, { at: path })
+              setChecked(event.target.checked);
+            }}
+          />
+        </span>
+    </div>
+    <span
+        contentEditable={!readOnly}
+        suppressContentEditableWarning
+        style = {{ 
+          flex: 1,
+          opacity: checked ? 0.666 : 1,
+          textDecoration: checked ? 'line-through' : 'none',}}
+      >
+        {children}
+    </span>
+  </div>
+)}
+
+
 const Quote = styled.blockquote`
   border-left: 3px solid #9e9e9e;
   margin: 0px;
@@ -61,7 +108,7 @@ const EditorBlock: FC<CMSBlockProps> = ({
   showToolBar,
   onEditorClick,
 }) => {
-  const editor = useMemo(() => withReact(createEditor()), []);
+  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   const renderLeaf: (props: RenderLeafProps) => JSX.Element = useCallback(
     ({ attributes, children, leaf }) => {
@@ -73,9 +120,17 @@ const EditorBlock: FC<CMSBlockProps> = ({
         code: leaf.code ?? false,
         align: leaf.align ?? 'left',
         textSize: leaf.textSize ?? defaultTextSize,
+        checklist: leaf.checklist ?? false,
+        checked: leaf.checklist ?? false,
         ...attributes,
       };
 
+
+      if (leaf.checklist) {
+        const checklistProps = {attributes, children, leaf}
+        return <CheckListItemElement {...checklistProps}/>
+      }
+
       return leaf.quote ? (
         <QuoteText {...props}>{children}</QuoteText>
       ) : leaf.align == null ? (
@@ -100,6 +155,7 @@ const EditorBlock: FC<CMSBlockProps> = ({
           <EditorUnderlineButton />
           <EditorCodeButton />
           <EditorQuoteButton />
+          <EditorChecklistButton/>
           <EditorSelectFont />
           <EditorLeftAlignButton />
           <EditorCenterAlignButton />

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

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

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' | 'quote' | 'code'
+  format: 'bold' | 'italic' | 'underline' | 'quote' | 'code' | 'checklist'
 ): void => {
   const isActive = isMarkActive(editor, format);
 
@@ -27,7 +27,7 @@ const toggleMark = (
  */
 const isMarkActive = (
   editor: BaseEditor & ReactEditor,
-  format: 'bold' | 'italic' | 'underline' | 'quote' | 'code'
+  format: 'bold' | 'italic' | 'underline' | 'quote' | 'code' | 'checklist'
 ): boolean => {
   // https://docs.slatejs.org/concepts/07-editor
   // Editor object exposes properties of the current editor

frontend/src/packages/editor/types.ts

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