CustomEditor utils.ts

50% Statements 3/6
0% Branches 0/3
0% Functions 0/1
50% Lines 3/6
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109  
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { palette } from "@palette";
 
type TVariant = "onboarding" | "default";
 
export const getToolbarOptionsStyle = ({
  variant = "default",
}: {
  variant?: TVariant;
}) => {
  switch(variant) {
    case "onboarding":
      return onboardingStyle;
    default:
      return defaultStyle;
  }
}
 
const defaultStyle = {
  "& .rdw-inline-wrapper": {
    order: "1",
    flexWrap: "nowrap",
    gap: "4px",
  },
  "& .rdw-list-wrapper": {
    order: "3",
  },
  "& .rdw-text-align-wrapper": {
    order: "4",
    flexWrap: "nowrap",
    gap: "6px",
  },
  "& .rdw-link-wrapper": {
    order: "2",
  },
  "& .rdw-emoji-wrapper": {
    order: "6",
  },
  "& .rdw-option-wrapper": {
    borderRadius: "8px",
    height: "12px",
    background: "inherit",
    border: "none",
    padding: "6px 0px",
    margin: 0,
 
    "& img": {
      width: "12px",
      height: "12px",
    },
  },
  "& .rdw-image-wrapper": {
    order: "7",
  },
}
 
const onboardingStyle = {
  "& .rdw-inline-wrapper": {
    order: "1",
    flexWrap: "nowrap",
    gap: "4px",
    paddingRight: "8px",
    borderRight: `1px solid ${palette.gray[300]}`,
    marginLeft: "auto",
    marginTop: "6px",
  },
  "& .rdw-list-wrapper": {
    order: "3",
    paddingInline: "8px 6px",
    marginTop: "6px",
  },
  "& .rdw-text-align-wrapper": {
    order: "4",
    flexWrap: "nowrap",
    gap: "6px",
    paddingRight: "8px",
    borderRight: `1px solid ${palette.gray[300]}`,
    marginTop: "6px",
  },
  "& .rdw-link-wrapper": {
    order: "2",
    paddingInline: "8px",
    borderRight: `1px solid ${palette.gray[300]}`,
    marginTop: "6px",
  },
  "& .rdw-emoji-wrapper": {
    paddingInline: "8px 6px",
    marginTop: "6px",
    order: "6",
  },
  "& .rdw-option-wrapper": {
    borderRadius: "8px",
    height: "12px",
    background: "inherit",
    border: "none",
    margin: 0,
    padding: 0,
    minWidth: "12px",
 
    "& img": {
      width: "12px",
      height: "12px",
    },
  },
  "& .rdw-image-wrapper": {
    order: "7",
    paddingRight: "8px",
    marginTop: "6px",
  },
}