@team-monolith/cds 1.122.3 → 1.122.5

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.
Files changed (191) hide show
  1. package/@types/emotion.d.ts +162 -162
  2. package/README.md +37 -37
  3. package/dist/CdsProvider.js +4 -4
  4. package/dist/components/AlertDialog/AlertDialog.js +54 -54
  5. package/dist/components/AlertDialog/AlertDialogActions.js +7 -7
  6. package/dist/components/AlertDialog/AlertDialogContent.js +8 -8
  7. package/dist/components/AlertDialog/AlertDialogTitle.js +34 -34
  8. package/dist/components/AnimatedButton.js +32 -32
  9. package/dist/components/Banner.js +51 -51
  10. package/dist/components/Book/Book.js +174 -174
  11. package/dist/components/Button.js +179 -179
  12. package/dist/components/CheckboxInput.js +148 -148
  13. package/dist/components/FileTypeAlertDialog.js +4 -4
  14. package/dist/components/Input.js +53 -53
  15. package/dist/components/InputBase.js +72 -72
  16. package/dist/components/Modal.js +4 -4
  17. package/dist/components/OverflowTooltip.js +4 -4
  18. package/dist/components/Pagination.js +56 -56
  19. package/dist/components/PinInput.js +64 -64
  20. package/dist/components/Popover.js +27 -27
  21. package/dist/components/RadioInput.js +73 -73
  22. package/dist/components/Slider.js +58 -58
  23. package/dist/components/SquareButton.js +109 -109
  24. package/dist/components/Switch.js +69 -69
  25. package/dist/components/SwitchButton.js +107 -107
  26. package/dist/components/Tag.js +72 -72
  27. package/dist/components/Tooltip.js +19 -19
  28. package/dist/foundation/breakpoints.d.ts +2 -0
  29. package/dist/foundation/breakpoints.js +18 -16
  30. package/dist/icons/custom/colored/ai-helper.svg +4 -4
  31. package/dist/icons/custom/colored/ai-quiz-color.svg +20 -20
  32. package/dist/icons/custom/colored/ai-socroom-color.svg +14 -14
  33. package/dist/icons/custom/colored/badge-color.svg +4 -4
  34. package/dist/icons/custom/colored/badge-gold.svg +11 -11
  35. package/dist/icons/custom/colored/badge-green.svg +11 -11
  36. package/dist/icons/custom/colored/badge-silver.svg +11 -11
  37. package/dist/icons/custom/colored/basic-plus.svg +31 -31
  38. package/dist/icons/custom/colored/basic.svg +3 -3
  39. package/dist/icons/custom/colored/board-color.svg +5 -5
  40. package/dist/icons/custom/colored/cast-cloudy-color.svg +6 -6
  41. package/dist/icons/custom/colored/cast-partly-color.svg +7 -7
  42. package/dist/icons/custom/colored/cast-rainbow-color.svg +13 -13
  43. package/dist/icons/custom/colored/cast-sunny-color.svg +4 -4
  44. package/dist/icons/custom/colored/clap-bronze.svg +8 -8
  45. package/dist/icons/custom/colored/clap-gold.svg +8 -8
  46. package/dist/icons/custom/colored/clap-silver.svg +8 -8
  47. package/dist/icons/custom/colored/class.svg +13 -13
  48. package/dist/icons/custom/colored/codap-color.svg +13 -13
  49. package/dist/icons/custom/colored/ebook-color.svg +5 -5
  50. package/dist/icons/custom/colored/embedded-color.svg +38 -38
  51. package/dist/icons/custom/colored/emo-clap-color.svg +252 -252
  52. package/dist/icons/custom/colored/emo-good-color.svg +68 -68
  53. package/dist/icons/custom/colored/emo-great-color.svg +67 -67
  54. package/dist/icons/custom/colored/emo-heart-color.svg +239 -239
  55. package/dist/icons/custom/colored/emo-hundred-color.svg +194 -194
  56. package/dist/icons/custom/colored/emo-neutral-color.svg +76 -76
  57. package/dist/icons/custom/colored/emo-stars-color.svg +121 -121
  58. package/dist/icons/custom/colored/emo-thumbup-color.svg +238 -238
  59. package/dist/icons/custom/colored/empty.svg +1 -1
  60. package/dist/icons/custom/colored/entry-color.svg +4 -4
  61. package/dist/icons/custom/colored/filename-all-color.svg +4 -4
  62. package/dist/icons/custom/colored/filename-doc-color.svg +5 -5
  63. package/dist/icons/custom/colored/filename-hwp-color.svg +6 -6
  64. package/dist/icons/custom/colored/filename-img-color.svg +6 -6
  65. package/dist/icons/custom/colored/filename-mp4-color.svg +5 -5
  66. package/dist/icons/custom/colored/filename-pdf-color.svg +12 -12
  67. package/dist/icons/custom/colored/filename-ppt-color.svg +6 -6
  68. package/dist/icons/custom/colored/filename-xls-color.svg +5 -5
  69. package/dist/icons/custom/colored/filename-zip-color.svg +5 -5
  70. package/dist/icons/custom/colored/google.svg +13 -13
  71. package/dist/icons/custom/colored/hand-fill.svg +4 -4
  72. package/dist/icons/custom/colored/judge-color.svg +6 -6
  73. package/dist/icons/custom/colored/makecode-color.svg +4 -4
  74. package/dist/icons/custom/colored/master.svg +12 -12
  75. package/dist/icons/custom/colored/material.svg +6 -6
  76. package/dist/icons/custom/colored/medal-bronze.svg +9 -9
  77. package/dist/icons/custom/colored/medal-gold.svg +9 -9
  78. package/dist/icons/custom/colored/medal-silver.svg +9 -9
  79. package/dist/icons/custom/colored/pro.svg +4 -4
  80. package/dist/icons/custom/colored/problem.svg +7 -7
  81. package/dist/icons/custom/colored/python-color.svg +4 -4
  82. package/dist/icons/custom/colored/quiz-color.svg +12 -12
  83. package/dist/icons/custom/colored/resource-color.svg +13 -13
  84. package/dist/icons/custom/colored/scratch-color.svg +6 -6
  85. package/dist/icons/custom/colored/type-helper.svg +9 -9
  86. package/dist/icons/custom/colored/whale.svg +7 -7
  87. package/dist/icons/custom/colored/worksheet-color.svg +5 -5
  88. package/dist/icons/custom/default/ai-quiz.svg +8 -8
  89. package/dist/icons/custom/default/ai-socroom.svg +13 -13
  90. package/dist/icons/custom/default/badge.svg +4 -4
  91. package/dist/icons/custom/default/board.svg +5 -5
  92. package/dist/icons/custom/default/cast-cloudy.svg +3 -3
  93. package/dist/icons/custom/default/cast-partly.svg +4 -4
  94. package/dist/icons/custom/default/cast-rainbow.svg +12 -12
  95. package/dist/icons/custom/default/cast-sunny.svg +3 -3
  96. package/dist/icons/custom/default/codap.svg +11 -11
  97. package/dist/icons/custom/default/ebook.svg +3 -3
  98. package/dist/icons/custom/default/embedded.svg +4 -4
  99. package/dist/icons/custom/default/emo-clap.svg +6 -6
  100. package/dist/icons/custom/default/emo-good.svg +12 -12
  101. package/dist/icons/custom/default/emo-great.svg +12 -12
  102. package/dist/icons/custom/default/emo-heart.svg +5 -5
  103. package/dist/icons/custom/default/emo-hundred.svg +3 -3
  104. package/dist/icons/custom/default/emo-neutral.svg +14 -14
  105. package/dist/icons/custom/default/emo-stars.svg +14 -14
  106. package/dist/icons/custom/default/emo-thumbup.svg +3 -3
  107. package/dist/icons/custom/default/entry.svg +4 -4
  108. package/dist/icons/custom/default/fab.svg +10 -10
  109. package/dist/icons/custom/default/grant-alt.svg +5 -5
  110. package/dist/icons/custom/default/grant.svg +4 -4
  111. package/dist/icons/custom/default/hand-line.svg +3 -3
  112. package/dist/icons/custom/default/judge.svg +3 -3
  113. package/dist/icons/custom/default/makecode.svg +5 -5
  114. package/dist/icons/custom/default/pdf.svg +3 -3
  115. package/dist/icons/custom/default/python.svg +7 -7
  116. package/dist/icons/custom/default/quiz.svg +4 -4
  117. package/dist/icons/custom/default/resource.svg +11 -11
  118. package/dist/icons/custom/default/scratch.svg +3 -3
  119. package/dist/icons/custom/default/scroll-alt.svg +5 -5
  120. package/dist/icons/custom/default/scroll-fill.svg +4 -4
  121. package/dist/icons/custom/default/scroll-line.svg +5 -5
  122. package/dist/icons/custom/default/symbol.svg +4 -4
  123. package/dist/icons/custom/default/worksheet.svg +4 -4
  124. package/dist/icons/custom/svgrColoredTemplate.js +26 -26
  125. package/dist/icons/custom/svgrDefaultTemplate.js +26 -26
  126. package/dist/patterns/Accordion.js +20 -20
  127. package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js +60 -60
  128. package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.js +27 -27
  129. package/dist/patterns/Dropdown/DropdownMenu/style.js +19 -19
  130. package/dist/patterns/LexicalEditor/Plugins.js +36 -36
  131. package/dist/patterns/LexicalEditor/components/FileSelectInput.js +23 -23
  132. package/dist/patterns/LexicalEditor/components/InsertImageDialog/ImagePreview.js +4 -4
  133. package/dist/patterns/LexicalEditor/components/InsertImageDialog/InsertImageDialog.js +15 -15
  134. package/dist/patterns/LexicalEditor/components/InsertVideoDialog/InsertVideoDialog.js +17 -17
  135. package/dist/patterns/LexicalEditor/components/UploadFileDialog/UploadFileDialog.js +2 -2
  136. package/dist/patterns/LexicalEditor/hr.svg +3 -3
  137. package/dist/patterns/LexicalEditor/nodes/FileNode/FileComponent.js +44 -44
  138. package/dist/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.js +25 -25
  139. package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js +12 -9
  140. package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageResizer.js +60 -60
  141. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js +19 -19
  142. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.js +49 -49
  143. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.js +7 -7
  144. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/SettingForm.js +73 -73
  145. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/TextTypeDropdown.js +5 -5
  146. package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/TextInput.js +7 -7
  147. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxComponent.js +69 -69
  148. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxEdit.js +3 -3
  149. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js +15 -15
  150. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js +28 -28
  151. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/FormSelection.js +54 -54
  152. package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js +61 -61
  153. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/Evaluation.js +75 -75
  154. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormIconAndLabel.js +17 -17
  155. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormIconAndLabel/FormLabel.js +7 -7
  156. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/FormQuestion.js +28 -28
  157. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/Evaluation/SettingForm/SettingForm.js +52 -52
  158. package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js +7 -7
  159. package/dist/patterns/LexicalEditor/nodes/SheetInputNode/InputComponent.js +25 -25
  160. package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.js +53 -53
  161. package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.js +54 -54
  162. package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.js +5 -5
  163. package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js +21 -21
  164. package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/FormSelection.js +42 -42
  165. package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js +71 -71
  166. package/dist/patterns/LexicalEditor/nodes/VideoNode/VideoComponent.js +7 -7
  167. package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdder.js +51 -51
  168. package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js +11 -11
  169. package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/menu.svg +7 -7
  170. package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/plus.svg +2 -2
  171. package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuItem.js +32 -32
  172. package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuList.js +32 -32
  173. package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js +12 -12
  174. package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/componentPickerOptionUtils.js +2 -2
  175. package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js +49 -49
  176. package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatPopup.js +36 -36
  177. package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/index.js +1 -1
  178. package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/{imageNodeTransform.js → useImageNodeTransform.js} +2 -8
  179. package/dist/patterns/LexicalEditor/plugins/ParagraphPlaceholderPlugin/index.js +7 -7
  180. package/dist/patterns/LexicalEditor/theme.js +243 -243
  181. package/dist/patterns/SegmentedControl/SegmentedControlButton.js +10 -10
  182. package/dist/patterns/SegmentedControl/SegmentedControlGroup.js +8 -8
  183. package/dist/patterns/SegmentedControl/SegmentedControlSquareButton.js +2 -2
  184. package/dist/patterns/Tabs.js +43 -43
  185. package/dist/patterns/ToggleButtonGroup/ToggleButton.js +40 -40
  186. package/dist/patterns/ToggleButtonGroup/ToggleButtonGroup.js +11 -11
  187. package/dist/utils/hover.js +12 -12
  188. package/dist/utils/reset.js +19 -19
  189. package/dist/utils/visuallyHidden.js +10 -10
  190. package/package.json +109 -109
  191. /package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/{imageNodeTransform.d.ts → useImageNodeTransform.d.ts} +0 -0
@@ -58,9 +58,9 @@ export function SettingForm(props) {
58
58
  return true;
59
59
  return getTexts(t, "errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
60
60
  }
61
- return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
62
- width: 12px;
63
- height: 12px;
61
+ return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
62
+ width: 12px;
63
+ height: 12px;
64
64
  ` }), t("선택형 입력 칸", { context: "렉시컬 도구 설정창" })] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("선택지") }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, rules: {
65
65
  validate: {
66
66
  validateRequired,
@@ -82,82 +82,82 @@ export function SettingForm(props) {
82
82
  },
83
83
  value: uid(),
84
84
  });
85
- }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
86
- min-width: 14px;
87
- width: 14px;
88
- height: 14px;
85
+ }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
86
+ min-width: 14px;
87
+ width: 14px;
88
+ height: 14px;
89
89
  ` }), t("다중 선택을 허용한 문제에는 여러 선택지를 고를 수 있다는 안내가 제공됩니다.")] }))] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));
90
90
  }
91
- const Form = styled.form(({ theme }) => css `
92
- display: flex;
93
- width: 620px;
94
- flex-direction: column;
95
- border-radius: 6px;
96
- border: 1px solid ${theme.color.background.neutralAltActive};
97
- background: ${theme.color.background.neutralBase};
98
- box-shadow: ${shadows.shadow08};
91
+ const Form = styled.form(({ theme }) => css `
92
+ display: flex;
93
+ width: 620px;
94
+ flex-direction: column;
95
+ border-radius: 6px;
96
+ border: 1px solid ${theme.color.background.neutralAltActive};
97
+ background: ${theme.color.background.neutralBase};
98
+ box-shadow: ${shadows.shadow08};
99
99
  `);
100
- const Title = styled.div(({ theme }) => css `
101
- display: flex;
102
- padding: 8px 12px;
103
- gap: 4px;
104
- align-items: center;
105
- color: ${theme.color.foreground.neutralBase};
106
- /* Default/Label/12px-Md */
107
- font-family: ${theme.fontFamily.ui};
108
- font-size: 12px;
109
- font-style: normal;
110
- font-weight: 500;
111
- line-height: 16px; /* 133.333% */
100
+ const Title = styled.div(({ theme }) => css `
101
+ display: flex;
102
+ padding: 8px 12px;
103
+ gap: 4px;
104
+ align-items: center;
105
+ color: ${theme.color.foreground.neutralBase};
106
+ /* Default/Label/12px-Md */
107
+ font-family: ${theme.fontFamily.ui};
108
+ font-size: 12px;
109
+ font-style: normal;
110
+ font-weight: 500;
111
+ line-height: 16px; /* 133.333% */
112
112
  `);
113
- const Content = styled.div(({ theme }) => css `
114
- display: flex;
115
- border-top: 1px solid ${theme.color.background.neutralAltActive};
116
- border-bottom: 1px solid ${theme.color.background.neutralAltActive};
113
+ const Content = styled.div(({ theme }) => css `
114
+ display: flex;
115
+ border-top: 1px solid ${theme.color.background.neutralAltActive};
116
+ border-bottom: 1px solid ${theme.color.background.neutralAltActive};
117
117
  `);
118
- const Left = styled.div `
119
- flex: 1;
120
- display: flex;
121
- flex-direction: column;
122
- gap: 12px;
123
- padding: 12px;
118
+ const Left = styled.div `
119
+ flex: 1;
120
+ display: flex;
121
+ flex-direction: column;
122
+ gap: 12px;
123
+ padding: 12px;
124
124
  `;
125
- const Right = styled.div `
126
- width: 240px;
127
- display: flex;
128
- flex-direction: column;
129
- gap: 12px;
130
- padding: 12px;
125
+ const Right = styled.div `
126
+ width: 240px;
127
+ display: flex;
128
+ flex-direction: column;
129
+ gap: 12px;
130
+ padding: 12px;
131
131
  `;
132
- const FormArea = styled.div `
133
- display: flex;
134
- flex-direction: column;
135
- gap: 8px;
132
+ const FormArea = styled.div `
133
+ display: flex;
134
+ flex-direction: column;
135
+ gap: 8px;
136
136
  `;
137
- const Label = styled.div(({ theme }) => css `
138
- color: ${theme.color.foreground.neutralBaseDisabled};
139
- /* Default/Label/12px-Md */
140
- font-family: ${theme.fontFamily.ui};
141
- font-size: 12px;
142
- font-style: normal;
143
- font-weight: 500;
144
- line-height: 16px; /* 133.333% */
137
+ const Label = styled.div(({ theme }) => css `
138
+ color: ${theme.color.foreground.neutralBaseDisabled};
139
+ /* Default/Label/12px-Md */
140
+ font-family: ${theme.fontFamily.ui};
141
+ font-size: 12px;
142
+ font-style: normal;
143
+ font-weight: 500;
144
+ line-height: 16px; /* 133.333% */
145
145
  `);
146
- const Buttons = styled.div `
147
- display: flex;
148
- padding: 12px;
149
- justify-content: flex-end;
150
- align-items: center;
151
- gap: 8px;
146
+ const Buttons = styled.div `
147
+ display: flex;
148
+ padding: 12px;
149
+ justify-content: flex-end;
150
+ align-items: center;
151
+ gap: 8px;
152
152
  `;
153
- const Alert = styled.div(({ theme }) => css `
154
- display: flex;
155
- gap: 4px;
156
- color: ${theme.color.foreground.neutralBaseDisabled};
157
- /* Default/Label/12px-Md */
158
- font-family: ${theme.fontFamily.ui};
159
- font-size: 12px;
160
- font-style: normal;
161
- font-weight: 500;
162
- line-height: 16px; /* 133.333% */
153
+ const Alert = styled.div(({ theme }) => css `
154
+ display: flex;
155
+ gap: 4px;
156
+ color: ${theme.color.foreground.neutralBaseDisabled};
157
+ /* Default/Label/12px-Md */
158
+ font-family: ${theme.fontFamily.ui};
159
+ font-size: 12px;
160
+ font-style: normal;
161
+ font-weight: 500;
162
+ line-height: 16px; /* 133.333% */
163
163
  `);
@@ -18,10 +18,10 @@ import { useTranslation } from "react-i18next";
18
18
  * @returns
19
19
  */
20
20
  function VideoPlayer(props) {
21
- return (_jsx(ReactPlayer, { css: css `
22
- background: black;
23
- max-width: 1200px;
24
- aspect-ratio: 16 / 9;
21
+ return (_jsx(ReactPlayer, { css: css `
22
+ background: black;
23
+ max-width: 1200px;
24
+ aspect-ratio: 16 / 9;
25
25
  `, width: "100%" // 기본값 640px. emotion css보다 우선 적용되어 prop으로 지정함.
26
26
  , height: "auto" // 기본값 360px. emotion css보다 우선 적용되어 prop으로 지정함.
27
27
  , url: props.url, controls: true, config: {
@@ -58,7 +58,7 @@ export function VideoComponent({ src, nodeKey, }) {
58
58
  }
59
59
  return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(VideoPlayer, { url: src }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setOpen(true), "aria-label": t("동영상 수정하기") })] }), _jsx(InsertVideoDialog, { open: open, title: t("동영상 수정하기"), onClose: () => setOpen(false), videoProps: { src }, onChange: handleChange, onDelete: handleDelete })] }));
60
60
  }
61
- const EditContainer = styled.div `
62
- display: flex;
63
- gap: 4px;
61
+ const EditContainer = styled.div `
62
+ display: flex;
63
+ gap: 4px;
64
64
  `;
@@ -9,59 +9,59 @@ export const ComponentAdder = forwardRef(function ComponentAdder(props, ref) {
9
9
  const [editor] = useLexicalComposerContext();
10
10
  return (_jsxs(Container, { ref: ref, className: className, children: [_jsx(PlusContainer, { onClick: onPlusClick, children: editor._editable && _jsx(PlusIcon, {}) }), _jsx(MenuContainer, { draggable: true, onClick: onMenuClick, onDragStart: onMenuDragStart, onDragEnd: onMenuDragEnd, children: editor._editable && _jsx(MenuIcon, {}) })] }));
11
11
  });
12
- const Container = styled.div `
13
- display: flex;
14
- align-items: flex-start;
15
- gap: 3px;
16
-
17
- position: absolute;
18
- left: 0;
19
- top: 0;
20
- will-change: transform;
12
+ const Container = styled.div `
13
+ display: flex;
14
+ align-items: flex-start;
15
+ gap: 3px;
16
+
17
+ position: absolute;
18
+ left: 0;
19
+ top: 0;
20
+ will-change: transform;
21
21
  `;
22
- const PlusContainer = styled.div `
23
- display: flex;
24
- width: 26px;
25
- height: 26px;
26
- justify-content: center;
27
- align-items: center;
28
- border-radius: 5px;
29
- background: ${({ theme }) => theme.color.foreground.neutralAlt};
30
-
31
- cursor: pointer;
32
-
33
- &:hover {
34
- background-color: #eff2f5;
35
- }
22
+ const PlusContainer = styled.div `
23
+ display: flex;
24
+ width: 26px;
25
+ height: 26px;
26
+ justify-content: center;
27
+ align-items: center;
28
+ border-radius: 5px;
29
+ background: ${({ theme }) => theme.color.foreground.neutralAlt};
30
+
31
+ cursor: pointer;
32
+
33
+ &:hover {
34
+ background-color: #eff2f5;
35
+ }
36
36
  `;
37
- const PlusIcon = styled.div `
38
- width: 24px;
39
- height: 24px;
40
- // svg는 hover 이벤트를 path마다 받아서 불편함
41
- // Lexical에서 동일한 접근법을 사용하고 있음
42
- background-image: url(${plus});
37
+ const PlusIcon = styled.div `
38
+ width: 24px;
39
+ height: 24px;
40
+ // svg는 hover 이벤트를 path마다 받아서 불편함
41
+ // Lexical에서 동일한 접근법을 사용하고 있음
42
+ background-image: url(${plus});
43
43
  `;
44
- const MenuContainer = styled.div `
45
- display: flex;
46
- width: 26px;
47
- height: 26px;
48
- justify-content: center;
49
- align-items: center;
50
- border-radius: 5px;
51
- background: ${({ theme }) => theme.color.foreground.neutralAlt};
52
-
53
- cursor: grab;
54
-
55
- &:active {
56
- cursor: grabbing;
57
- }
58
-
59
- &:hover {
60
- background-color: #eff2f5;
61
- }
44
+ const MenuContainer = styled.div `
45
+ display: flex;
46
+ width: 26px;
47
+ height: 26px;
48
+ justify-content: center;
49
+ align-items: center;
50
+ border-radius: 5px;
51
+ background: ${({ theme }) => theme.color.foreground.neutralAlt};
52
+
53
+ cursor: grab;
54
+
55
+ &:active {
56
+ cursor: grabbing;
57
+ }
58
+
59
+ &:hover {
60
+ background-color: #eff2f5;
61
+ }
62
62
  `;
63
- const MenuIcon = styled.div `
64
- width: 24px;
65
- height: 24px;
66
- background-image: url(${menu});
63
+ const MenuIcon = styled.div `
64
+ width: 24px;
65
+ height: 24px;
66
+ background-image: url(${menu});
67
67
  `;
@@ -167,8 +167,8 @@ export function ComponentAdderPlugin(props) {
167
167
  editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
168
168
  }, shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
169
169
  editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
170
- } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
171
- z-index: ${ZINDEX.DIALOG + 1};
170
+ } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
171
+ z-index: ${ZINDEX.DIALOG + 1};
172
172
  `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
173
173
  ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
174
174
  : null, onSelectOption: onSelectOption, onClose: () => {
@@ -259,13 +259,13 @@ export function ComponentAdderPlugin(props) {
259
259
  }));
260
260
  }), onMenuDragStart: onDragStart, onMenuDragEnd: onDragEnd }), _jsx(TargetLine, { ref: targetLineRef })] }), anchorElem)] }));
261
261
  }
262
- const TargetLine = styled.div `
263
- pointer-events: none;
264
- background: deepskyblue;
265
- height: 4px;
266
- position: absolute;
267
- left: 0;
268
- top: 0;
269
- opacity: 0;
270
- will-change: transform;
262
+ const TargetLine = styled.div `
263
+ pointer-events: none;
264
+ background: deepskyblue;
265
+ height: 4px;
266
+ position: absolute;
267
+ left: 0;
268
+ top: 0;
269
+ opacity: 0;
270
+ will-change: transform;
271
271
  `;
@@ -1,8 +1,8 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
- <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
3
- <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
4
- <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
5
- <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
6
- <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
7
- <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
+ <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
3
+ <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
4
+ <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
5
+ <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
6
+ <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
7
+ <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
8
8
  </svg>
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
- <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2
+ <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
3
3
  </svg>
@@ -4,38 +4,38 @@ export function ComponentPickerMenuItem(props) {
4
4
  const { index, isSelected, onClick, onMouseEnter, option } = props;
5
5
  return (_jsxs(ItemContainer, { tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected, children: [_jsx(IconContainer, { className: option.iconContainerClassName, children: option.icon }), _jsx(Title, { children: option.title })] }, option.key));
6
6
  }
7
- const ItemContainer = styled.li `
8
- display: flex;
9
- padding: 3px 2px;
10
- align-items: center;
11
- gap: 10px;
12
- width: 100%;
13
- cursor: pointer;
14
-
15
- ${({ isSelected }) => isSelected && "background: #eee;"}
7
+ const ItemContainer = styled.li `
8
+ display: flex;
9
+ padding: 3px 2px;
10
+ align-items: center;
11
+ gap: 10px;
12
+ width: 100%;
13
+ cursor: pointer;
14
+
15
+ ${({ isSelected }) => isSelected && "background: #eee;"}
16
16
  `;
17
- const IconContainer = styled.div `
18
- display: flex;
19
- width: 26px;
20
- height: 26px;
21
- justify-content: center;
22
- align-items: center;
23
-
24
- border-radius: 5px;
25
-
26
- background: ${({ theme }) => theme.color.foreground.neutralAlt};
27
- box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
28
-
29
- svg {
30
- width: 18px;
31
- height: 18px;
32
- }
17
+ const IconContainer = styled.div `
18
+ display: flex;
19
+ width: 26px;
20
+ height: 26px;
21
+ justify-content: center;
22
+ align-items: center;
23
+
24
+ border-radius: 5px;
25
+
26
+ background: ${({ theme }) => theme.color.foreground.neutralAlt};
27
+ box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
28
+
29
+ svg {
30
+ width: 18px;
31
+ height: 18px;
32
+ }
33
33
  `;
34
- const Title = styled.span `
35
- color: ${({ theme }) => theme.color.foreground.neutralBase};
36
- font-family: ${({ theme }) => theme.fontFamily.ui};
37
- font-size: 14px;
38
- font-style: normal;
39
- font-weight: 500;
40
- line-height: 20px; /* 142.857% */
34
+ const Title = styled.span `
35
+ color: ${({ theme }) => theme.color.foreground.neutralBase};
36
+ font-family: ${({ theme }) => theme.fontFamily.ui};
37
+ font-size: 14px;
38
+ font-style: normal;
39
+ font-weight: 500;
40
+ line-height: 20px; /* 142.857% */
41
41
  `;
@@ -17,37 +17,37 @@ export function ComponentPickerMenuList(props) {
17
17
  }, option: option }, option.key));
18
18
  }) }) }));
19
19
  }
20
- const Container = styled.div `
21
- position: absolute;
22
-
23
- display: flex;
24
- width: 200px;
25
- padding: 4px;
26
- flex-direction: column;
27
- align-items: flex-start;
28
- gap: 5px;
29
-
30
- border-radius: 8px;
31
- border: 1px solid #e8e8eb;
32
- background: ${({ theme }) => theme.color.background.neutralBase};
33
- box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
20
+ const Container = styled.div `
21
+ position: absolute;
22
+
23
+ display: flex;
24
+ width: 200px;
25
+ padding: 4px;
26
+ flex-direction: column;
27
+ align-items: flex-start;
28
+ gap: 5px;
29
+
30
+ border-radius: 8px;
31
+ border: 1px solid #e8e8eb;
32
+ background: ${({ theme }) => theme.color.background.neutralBase};
33
+ box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
34
34
  `;
35
- const ListContainer = styled.ul `
36
- padding: 0;
37
- list-style: none;
38
- margin: 0;
39
-
40
- display: flex;
41
- flex-direction: column;
42
- align-items: flex-start;
43
- gap: 1px;
44
- align-self: stretch;
45
-
46
- overflow-y: scroll;
47
-
48
- scrollbar-width: none;
49
- -ms-overflow-style: none;
50
- &::-webkit-scrollbar {
51
- display: none;
52
- }
35
+ const ListContainer = styled.ul `
36
+ padding: 0;
37
+ list-style: none;
38
+ margin: 0;
39
+
40
+ display: flex;
41
+ flex-direction: column;
42
+ align-items: flex-start;
43
+ gap: 1px;
44
+ align-self: stretch;
45
+
46
+ overflow-y: scroll;
47
+
48
+ scrollbar-width: none;
49
+ -ms-overflow-style: none;
50
+ &::-webkit-scrollbar {
51
+ display: none;
52
+ }
53
53
  `;
@@ -131,11 +131,11 @@ function getSheetContextOptions(editor, theme, t) {
131
131
  placeholder: "",
132
132
  }),
133
133
  }, t, theme),
134
- new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
135
- width: 100%;
136
- height: 1px;
137
- background: ${theme.color.background.neutralAltActive};
138
- margin: 4px 0;
134
+ new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
135
+ width: 100%;
136
+ height: 1px;
137
+ background: ${theme.color.background.neutralAltActive};
138
+ margin: 4px 0;
139
139
  ` }))),
140
140
  ];
141
141
  }
@@ -175,11 +175,11 @@ function getQuizContextOptions(editor, theme, t) {
175
175
  });
176
176
  },
177
177
  }, t, theme),
178
- new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
179
- width: 100%;
180
- height: 1px;
181
- background: ${theme.color.background.neutralAltActive};
182
- margin: 4px 0;
178
+ new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
179
+ width: 100%;
180
+ height: 1px;
181
+ background: ${theme.color.background.neutralAltActive};
182
+ margin: 4px 0;
183
183
  ` }))),
184
184
  ];
185
185
  }
@@ -338,8 +338,8 @@ export function ComponentPickerMenuPlugin(props) {
338
338
  editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
339
339
  }, onClose: () => setVideoOpen(false), shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
340
340
  editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
341
- } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
342
- z-index: ${ZINDEX.DIALOG + 1};
341
+ } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
342
+ z-index: ${ZINDEX.DIALOG + 1};
343
343
  `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
344
344
  ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
345
345
  : null })] }));
@@ -197,8 +197,8 @@ export function getQuoteColorOptions(editor, node, colorKey, t, theme) {
197
197
  const { title, iconColor, containerColor, keywords } = getColoredQuoteInfo(colorKey, t, theme);
198
198
  return new ComponentPickerOption(title, {
199
199
  icon: _jsx(InputMethodLineIcon, { color: iconColor }),
200
- iconContainerClassName: css `
201
- background: ${containerColor};
200
+ iconContainerClassName: css `
201
+ background: ${containerColor};
202
202
  `,
203
203
  keywords,
204
204
  onSelect: () => {