@team-monolith/cds 0.29.13 → 0.29.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,11 +3,6 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
import { hexToCSSFilter } from "hex-to-css-filter";
|
|
4
4
|
import { CalloutStyle, DelimiterStyle, HeaderStyle, NestedListStyle, QuoteStyle, RawStyle, } from "./customTools";
|
|
5
5
|
const Layout = styled.div(({ theme }) => css `
|
|
6
|
-
width: auto;
|
|
7
|
-
margin-top: 8px;
|
|
8
|
-
border: 1px solid ${theme.color.background.neutralAlt};
|
|
9
|
-
border-radius: 8px;
|
|
10
|
-
padding: 32px 74px 32px 16px;
|
|
11
6
|
.codex-editor__redactor {
|
|
12
7
|
padding-bottom: 0 !important;
|
|
13
8
|
}
|
|
@@ -18,12 +13,6 @@ const Layout = styled.div(({ theme }) => css `
|
|
|
18
13
|
margin: 0;
|
|
19
14
|
max-width: unset;
|
|
20
15
|
}
|
|
21
|
-
.ce-toolbar__content {
|
|
22
|
-
position: unset;
|
|
23
|
-
}
|
|
24
|
-
.ce-toolbar__actions {
|
|
25
|
-
left: -5px;
|
|
26
|
-
}
|
|
27
16
|
.ce-paragraph {
|
|
28
17
|
font-family: ${theme.fontFamily.ui};
|
|
29
18
|
font-weight: 400;
|
|
@@ -31,6 +20,11 @@ const Layout = styled.div(({ theme }) => css `
|
|
|
31
20
|
line-height: 24px;
|
|
32
21
|
padding: 0 0 8px;
|
|
33
22
|
}
|
|
23
|
+
// toolbar__actions의 position이 absolute이고, 상위인 toolbar__content의 기본 position이 relative입니다.
|
|
24
|
+
// actions의 위치를 올바르게 변경하기 위해 content의 position을 static으로 변경합니다.
|
|
25
|
+
.ce-toolbar__content {
|
|
26
|
+
position: static;
|
|
27
|
+
}
|
|
34
28
|
|
|
35
29
|
${HeaderStyle(theme)}
|
|
36
30
|
${NestedListStyle}
|
|
@@ -38,10 +32,24 @@ const Layout = styled.div(({ theme }) => css `
|
|
|
38
32
|
${CalloutStyle(theme)}
|
|
39
33
|
${RawStyle(theme)}
|
|
40
34
|
${DelimiterStyle(theme)}
|
|
41
|
-
|
|
42
|
-
//
|
|
35
|
+
|
|
36
|
+
// editorjs에서는 content의 width가 모자라는 경우 narrow모드로 변경합니다.
|
|
37
|
+
// https://github.com/codex-team/editor.js/blob/next/src/components/modules/ui.ts#L268
|
|
38
|
+
// 그런데, narrow모드가 의도하지 않은 상황에 발생하는 버그가 있습니다.
|
|
39
|
+
// 관련이슈: https://github.com/codex-team/editor.js/issues/2457
|
|
40
|
+
// narrow 모드가 아직 제거되지 않아서 narrow모드가 발생했을 때를 고려해야 합니다.
|
|
41
|
+
// 그래서 narrow모드가 변경하는 css를 override합니다.
|
|
42
|
+
.codex-editor--narrow .codex-editor__redactor {
|
|
43
|
+
margin-right: 0;
|
|
44
|
+
}
|
|
43
45
|
.codex-editor--narrow .ce-popover {
|
|
44
46
|
left: 0;
|
|
47
|
+
right: unset;
|
|
48
|
+
}
|
|
49
|
+
// toolbar를 항상 왼쪽에서 나타나게 하기 위해 narrow모드의 right 스타일을 제거하고, left 스타일을 추가합니다.
|
|
50
|
+
.ce-toolbar__actions {
|
|
51
|
+
left: -5px;
|
|
52
|
+
right: unset;
|
|
45
53
|
}
|
|
46
54
|
|
|
47
55
|
// block tool 스타일
|