All files / src/components/Playbooks/steps Notes.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import MDEditor from "@uiw/react-md-editor";
import { addNotes } from "../../../store/features/playbook/playbookSlice.ts";
import rehypeSanitize from "rehype-sanitize";
import { useDispatch } from "react-redux";
import useCurrentStep from "../../../hooks/playbooks/step/useCurrentStep.ts";
import useIsPrefetched from "../../../hooks/playbooks/useIsPrefetched.ts";
import useIsExisting from "../../../hooks/playbooks/useIsExisting.ts";
 
function Notes({ id }) {
  const [step] = useCurrentStep(id);
  const dispatch = useDispatch();
  const isPrefetched = useIsPrefetched();
  const isExisting = useIsExisting();
 
  return (
    <>
      <div
        style={
          isExisting
            ? step?.notes
              ? {
                  display: "flex",
                  marginTop: "5px",
                  marginBottom: "5px",
                  gap: "5px",
                }
              : {}
            : {
                display: "flex",
                marginTop: "5px",
                marginBottom: "5px",
                gap: "5px",
              }
        }>
        <div
          data-color-mode="light"
          style={{ display: "flex", flexDirection: "column", width: "100%" }}>
          {isPrefetched ? (
            step?.notes && (
              <MDEditor.Markdown
                source={step.notes}
                style={{
                  whiteSpace: "pre-wrap",
                  height: "200px",
                  maxHeight: "400px",
                  overflow: "scroll",
                  border: "1px solid black",
                  borderRadius: "5px",
                  padding: "1rem",
                  width: "100%",
                }}
              />
            )
          ) : (
            <>
              <MDEditor
                value={step?.notes}
                onChange={(val) => {
                  dispatch(addNotes({ notes: val, id }));
                }}
                height={200}
                style={{
                  width: "100%",
                }}
                textareaProps={{
                  placeholder: "Please enter Markdown text",
                }}
                preview="live"
                previewOptions={{
                  rehypePlugins: [[rehypeSanitize]],
                }}
              />
            </>
          )}
        </div>
      </div>
    </>
  );
}
 
export default Notes;