@tipp/ui-quill-editor 1.1.2 → 1.2.0

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 (116) hide show
  1. package/dist/editor.cjs.map +1 -1
  2. package/dist/editor.d.cts +2 -6
  3. package/dist/editor.d.ts +2 -6
  4. package/dist/editor.js +218 -3
  5. package/dist/editor.js.map +1 -1
  6. package/dist/read-card.cjs.map +1 -1
  7. package/dist/read-card.d.cts +1 -2
  8. package/dist/read-card.d.ts +1 -2
  9. package/dist/read-card.js +189 -3
  10. package/dist/read-card.js.map +1 -1
  11. package/dist/type.cjs +19 -0
  12. package/dist/type.cjs.map +1 -0
  13. package/dist/type.d.cts +7 -0
  14. package/dist/type.d.ts +7 -0
  15. package/dist/type.js +1 -0
  16. package/package.json +26 -6
  17. package/src/editor.tsx +1 -6
  18. package/src/read-card.tsx +1 -1
  19. package/src/type.ts +5 -0
  20. package/dist/chunk-4ULZXT3Z.js +0 -267
  21. package/dist/chunk-4ULZXT3Z.js.map +0 -1
  22. package/dist/chunk-5WZL7EM7.js +0 -272
  23. package/dist/chunk-5WZL7EM7.js.map +0 -1
  24. package/dist/chunk-63UMKKIY.js +0 -254
  25. package/dist/chunk-63UMKKIY.js.map +0 -1
  26. package/dist/chunk-6Z3DIHNP.js +0 -253
  27. package/dist/chunk-6Z3DIHNP.js.map +0 -1
  28. package/dist/chunk-7346KRGN.js +0 -224
  29. package/dist/chunk-7346KRGN.js.map +0 -1
  30. package/dist/chunk-ACJWK26B.js +0 -272
  31. package/dist/chunk-ACJWK26B.js.map +0 -1
  32. package/dist/chunk-AEDRFU3N.js +0 -273
  33. package/dist/chunk-AEDRFU3N.js.map +0 -1
  34. package/dist/chunk-CCOIRSYJ.js +0 -258
  35. package/dist/chunk-CCOIRSYJ.js.map +0 -1
  36. package/dist/chunk-EQCXRM42.js +0 -253
  37. package/dist/chunk-EQCXRM42.js.map +0 -1
  38. package/dist/chunk-EZ2MSXWD.js +0 -211
  39. package/dist/chunk-EZ2MSXWD.js.map +0 -1
  40. package/dist/chunk-FFENCIRE.js +0 -254
  41. package/dist/chunk-FFENCIRE.js.map +0 -1
  42. package/dist/chunk-HZN6OVD6.js +0 -253
  43. package/dist/chunk-HZN6OVD6.js.map +0 -1
  44. package/dist/chunk-ICAKLBT5.js +0 -253
  45. package/dist/chunk-ICAKLBT5.js.map +0 -1
  46. package/dist/chunk-IIBNGFLN.mjs +0 -273
  47. package/dist/chunk-IIBNGFLN.mjs.map +0 -1
  48. package/dist/chunk-IWRASGLB.js +0 -215
  49. package/dist/chunk-IWRASGLB.js.map +0 -1
  50. package/dist/chunk-K4Q6PRQ3.js +0 -272
  51. package/dist/chunk-K4Q6PRQ3.js.map +0 -1
  52. package/dist/chunk-KBRYMAW4.js +0 -254
  53. package/dist/chunk-KBRYMAW4.js.map +0 -1
  54. package/dist/chunk-KLFBBLJB.js +0 -212
  55. package/dist/chunk-KLFBBLJB.js.map +0 -1
  56. package/dist/chunk-KYAHTSA6.js +0 -253
  57. package/dist/chunk-KYAHTSA6.js.map +0 -1
  58. package/dist/chunk-MX3IDKDT.js +0 -215
  59. package/dist/chunk-MX3IDKDT.js.map +0 -1
  60. package/dist/chunk-NFVMYQC2.js +0 -215
  61. package/dist/chunk-NFVMYQC2.js.map +0 -1
  62. package/dist/chunk-NQOX4TPA.js +0 -258
  63. package/dist/chunk-NQOX4TPA.js.map +0 -1
  64. package/dist/chunk-OLRR6W3N.js +0 -272
  65. package/dist/chunk-OLRR6W3N.js.map +0 -1
  66. package/dist/chunk-PSI2XOKW.js +0 -272
  67. package/dist/chunk-PSI2XOKW.js.map +0 -1
  68. package/dist/chunk-PWBZK7KO.js +0 -272
  69. package/dist/chunk-PWBZK7KO.js.map +0 -1
  70. package/dist/chunk-QAD3RXYR.js +0 -253
  71. package/dist/chunk-QAD3RXYR.js.map +0 -1
  72. package/dist/chunk-QC5RGGRB.js +0 -224
  73. package/dist/chunk-QC5RGGRB.js.map +0 -1
  74. package/dist/chunk-QGCFWTOT.js +0 -253
  75. package/dist/chunk-QGCFWTOT.js.map +0 -1
  76. package/dist/chunk-QVPYAKUW.js +0 -253
  77. package/dist/chunk-QVPYAKUW.js.map +0 -1
  78. package/dist/chunk-RC5DDS52.js +0 -272
  79. package/dist/chunk-RC5DDS52.js.map +0 -1
  80. package/dist/chunk-RVTX55MD.js +0 -215
  81. package/dist/chunk-RVTX55MD.js.map +0 -1
  82. package/dist/chunk-UE5CSHOY.js +0 -211
  83. package/dist/chunk-UE5CSHOY.js.map +0 -1
  84. package/dist/chunk-VWJC7GOO.js +0 -253
  85. package/dist/chunk-VWJC7GOO.js.map +0 -1
  86. package/dist/chunk-WITVYZYX.js +0 -211
  87. package/dist/chunk-WITVYZYX.js.map +0 -1
  88. package/dist/chunk-WQQTLSPU.js +0 -253
  89. package/dist/chunk-WQQTLSPU.js.map +0 -1
  90. package/dist/chunk-WZQACNB7.js +0 -215
  91. package/dist/chunk-WZQACNB7.js.map +0 -1
  92. package/dist/chunk-X5ODDFPU.js +0 -272
  93. package/dist/chunk-X5ODDFPU.js.map +0 -1
  94. package/dist/chunk-XFOLCHPG.js +0 -257
  95. package/dist/chunk-XFOLCHPG.js.map +0 -1
  96. package/dist/chunk-XO4BXXHE.js +0 -258
  97. package/dist/chunk-XO4BXXHE.js.map +0 -1
  98. package/dist/chunk-Y7747DJG.js +0 -195
  99. package/dist/chunk-Y7747DJG.js.map +0 -1
  100. package/dist/chunk-Z7OJPAOK.js +0 -211
  101. package/dist/chunk-Z7OJPAOK.js.map +0 -1
  102. package/dist/chunk-ZJXLAGSA.js +0 -213
  103. package/dist/chunk-ZJXLAGSA.js.map +0 -1
  104. package/dist/editor.d.mts +0 -30
  105. package/dist/editor.mjs +0 -7
  106. package/dist/index.cjs +0 -477
  107. package/dist/index.cjs.map +0 -1
  108. package/dist/index.d.cts +0 -4
  109. package/dist/index.d.mts +0 -3
  110. package/dist/index.d.ts +0 -4
  111. package/dist/index.js +0 -13
  112. package/dist/index.js.map +0 -1
  113. package/dist/index.mjs +0 -7
  114. package/dist/index.mjs.map +0 -1
  115. package/src/index.tsx +0 -2
  116. /package/dist/{editor.mjs.map → type.js.map} +0 -0
package/dist/type.cjs ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/type.ts
17
+ var type_exports = {};
18
+ module.exports = __toCommonJS(type_exports);
19
+ //# sourceMappingURL=type.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/type.ts"],"sourcesContent":["export interface Attachment {\n fileName: string;\n url: string;\n createdAt?: Date;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -0,0 +1,7 @@
1
+ interface Attachment {
2
+ fileName: string;
3
+ url: string;
4
+ createdAt?: Date;
5
+ }
6
+
7
+ export type { Attachment };
package/dist/type.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ interface Attachment {
2
+ fileName: string;
3
+ url: string;
4
+ createdAt?: Date;
5
+ }
6
+
7
+ export type { Attachment };
package/dist/type.js ADDED
@@ -0,0 +1 @@
1
+ //# sourceMappingURL=type.js.map
package/package.json CHANGED
@@ -1,19 +1,39 @@
1
1
  {
2
2
  "name": "@tipp/ui-quill-editor",
3
- "version": "1.1.2",
3
+ "version": "1.2.0",
4
4
  "description": "tipp 디자인 시스템이 적용된 quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
5
5
  "license": "ISC",
6
6
  "author": "",
7
7
  "type": "module",
8
8
  "exports": {
9
- ".": {
9
+ "./editor": {
10
10
  "require": {
11
- "types": "./dist/index.d.ts",
12
- "default": "./dist/index.cjs"
11
+ "types": "./dist/editor.d.ts",
12
+ "default": "./dist/editor.cjs"
13
13
  },
14
14
  "import": {
15
- "types": "./dist/index.d.ts",
16
- "default": "./dist/index.js"
15
+ "types": "./dist/editor.d.ts",
16
+ "default": "./dist/editor.js"
17
+ }
18
+ },
19
+ "./read-card": {
20
+ "require": {
21
+ "types": "./dist/read-card.d.ts",
22
+ "default": "./dist/read-card.cjs"
23
+ },
24
+ "import": {
25
+ "types": "./dist/read-card.d.ts",
26
+ "default": "./dist/read-card.js"
27
+ }
28
+ },
29
+ "./type": {
30
+ "require": {
31
+ "types": "./dist/type.d.ts",
32
+ "default": "./dist/type.cjs"
33
+ },
34
+ "import": {
35
+ "types": "./dist/type.d.ts",
36
+ "default": "./dist/type.js"
17
37
  }
18
38
  },
19
39
  "./*": "./*"
package/src/editor.tsx CHANGED
@@ -14,12 +14,7 @@ import {
14
14
  } from '@tipp/ui';
15
15
  import type { ReactQuillProps } from 'react-quill';
16
16
  import ReactQuill from 'react-quill';
17
-
18
- export interface Attachment {
19
- fileName: string;
20
- url: string;
21
- createdAt?: Date;
22
- }
17
+ import type { Attachment } from './type';
23
18
 
24
19
  export interface TippEditorProps extends ReactQuillProps {
25
20
  defaultTitle?: string;
package/src/read-card.tsx CHANGED
@@ -20,7 +20,7 @@ import {
20
20
  TrashIcon,
21
21
  } from '@tipp/ui';
22
22
  import QuillHtmlOutputContainer from './html-container';
23
- import type { Attachment } from './editor';
23
+ import type { Attachment } from './type';
24
24
 
25
25
  interface ReadCardProps {
26
26
  onClickDelete?: () => void;
package/src/type.ts ADDED
@@ -0,0 +1,5 @@
1
+ export interface Attachment {
2
+ fileName: string;
3
+ url: string;
4
+ createdAt?: Date;
5
+ }
@@ -1,267 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
- var __hasOwnProp = Object.prototype.hasOwnProperty;
4
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __spreadValues = (a, b) => {
7
- for (var prop in b || (b = {}))
8
- if (__hasOwnProp.call(b, prop))
9
- __defNormalProp(a, prop, b[prop]);
10
- if (__getOwnPropSymbols)
11
- for (var prop of __getOwnPropSymbols(b)) {
12
- if (__propIsEnum.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- }
15
- return a;
16
- };
17
- var __objRest = (source, exclude) => {
18
- var target = {};
19
- for (var prop in source)
20
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
21
- target[prop] = source[prop];
22
- if (source != null && __getOwnPropSymbols)
23
- for (var prop of __getOwnPropSymbols(source)) {
24
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
25
- target[prop] = source[prop];
26
- }
27
- return target;
28
- };
29
- var __async = (__this, __arguments, generator) => {
30
- return new Promise((resolve, reject) => {
31
- var fulfilled = (value) => {
32
- try {
33
- step(generator.next(value));
34
- } catch (e) {
35
- reject(e);
36
- }
37
- };
38
- var rejected = (value) => {
39
- try {
40
- step(generator.throw(value));
41
- } catch (e) {
42
- reject(e);
43
- }
44
- };
45
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
46
- step((generator = generator.apply(__this, __arguments)).next());
47
- });
48
- };
49
-
50
- // src/editor.tsx
51
- import { forwardRef, useCallback, useRef, useState } from "react";
52
- import {
53
- Box,
54
- Button,
55
- Flex,
56
- Grid,
57
- Link,
58
- Separator,
59
- TextField,
60
- Typo,
61
- Link2Icon,
62
- toast,
63
- FileIcon
64
- } from "@tipp/ui";
65
- import ReactQuill from "react-quill";
66
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
67
- var Editor = forwardRef(
68
- (props, ref) => {
69
- const _a = props, {
70
- defaultAttachedFiles,
71
- defaultTitle,
72
- defaultValue,
73
- onClickSave,
74
- uploadFile,
75
- deleteFile,
76
- isLoading,
77
- SecondaryButton,
78
- clearEditor,
79
- minHeight,
80
- maxHeight
81
- } = _a, quillProps = __objRest(_a, [
82
- "defaultAttachedFiles",
83
- "defaultTitle",
84
- "defaultValue",
85
- "onClickSave",
86
- "uploadFile",
87
- "deleteFile",
88
- "isLoading",
89
- "SecondaryButton",
90
- "clearEditor",
91
- "minHeight",
92
- "maxHeight"
93
- ]);
94
- const defaultRef = useRef(null);
95
- const editorRef = ref || defaultRef;
96
- const [attachedFiles, setAttachedFiles] = useState(
97
- defaultAttachedFiles || []
98
- );
99
- const [fileDeleteLoading, setFileDeleteLoading] = useState(/* @__PURE__ */ new Set());
100
- const [title, setTitle] = useState(defaultTitle || "");
101
- const [content, setContent] = useState(defaultValue || "");
102
- const handleOnChangeContent = useCallback((value) => {
103
- setContent(value);
104
- }, []);
105
- const handleButtonClick = useCallback(() => {
106
- let input = document.createElement("input");
107
- input.type = "file";
108
- input.onchange = (event) => __async(void 0, null, function* () {
109
- var _a2;
110
- const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
111
- if (!file) {
112
- toast.error("\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.");
113
- return;
114
- }
115
- const fileName = file.name;
116
- const attachment = yield uploadFile == null ? void 0 : uploadFile(file, `hr-notes/${fileName}`);
117
- if (attachment) {
118
- setAttachedFiles((prev) => [...prev, attachment]);
119
- }
120
- input = null;
121
- });
122
- input.click();
123
- }, [uploadFile]);
124
- const handleDeleteFile = useCallback(
125
- (fileUrl) => __async(void 0, null, function* () {
126
- try {
127
- setFileDeleteLoading((p) => p.add(fileUrl));
128
- yield deleteFile == null ? void 0 : deleteFile(fileUrl);
129
- setAttachedFiles(
130
- (currentFiles) => currentFiles.filter((item) => item.url !== fileUrl)
131
- );
132
- } catch (err) {
133
- toast.error("\uD30C\uC77C \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
134
- } finally {
135
- setFileDeleteLoading((p) => {
136
- p.delete(fileUrl);
137
- return p;
138
- });
139
- }
140
- }),
141
- [deleteFile]
142
- );
143
- const renderAttachedFiles = useCallback(() => {
144
- return /* @__PURE__ */ jsx(Box, { width: "100%", children: attachedFiles.map((file) => {
145
- return /* @__PURE__ */ jsxs(Fragment, { children: [
146
- /* @__PURE__ */ jsx(Separator, { size: "4" }),
147
- /* @__PURE__ */ jsxs(
148
- Flex,
149
- {
150
- align: "center",
151
- justify: "between",
152
- p: "4",
153
- width: "100%",
154
- children: [
155
- /* @__PURE__ */ jsx(Link, { href: file.url, size: "2", children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
156
- /* @__PURE__ */ jsx(FileIcon, {}),
157
- file.fileName
158
- ] }) }),
159
- /* @__PURE__ */ jsx(
160
- Button,
161
- {
162
- loading: fileDeleteLoading.has(file.url),
163
- onClick: () => {
164
- void handleDeleteFile(file.url);
165
- },
166
- variant: "ghost",
167
- children: "\uCCA8\uBD80 \uD30C\uC77C \uC0AD\uC81C"
168
- }
169
- )
170
- ]
171
- },
172
- `${file.url}_${file.fileName}`
173
- )
174
- ] });
175
- }) });
176
- }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
177
- const handleOnChangeTitle = useCallback((e) => {
178
- setTitle(e.target.value);
179
- }, []);
180
- const clearEditorState = useCallback(() => {
181
- setContent("");
182
- setAttachedFiles([]);
183
- setTitle("");
184
- }, []);
185
- const handleSaveClick = useCallback(() => {
186
- onClickSave == null ? void 0 : onClickSave({
187
- title,
188
- content,
189
- files: attachedFiles
190
- });
191
- }, [onClickSave, title, content, attachedFiles]);
192
- if (props.clearEditor) {
193
- props.clearEditor.current = clearEditorState;
194
- }
195
- return /* @__PURE__ */ jsxs(
196
- "div",
197
- {
198
- className: "tipp-ql-wrapper",
199
- style: {
200
- minHeight,
201
- maxHeight
202
- },
203
- children: [
204
- /* @__PURE__ */ jsxs(
205
- Grid,
206
- {
207
- align: "center",
208
- columns: "auto auto 1fr",
209
- gap: "2",
210
- height: "42px",
211
- pl: "2",
212
- pr: "3",
213
- width: "100%",
214
- children: [
215
- /* @__PURE__ */ jsx(Box, { pl: "3", pr: "3", children: /* @__PURE__ */ jsx(Typo, { children: "\uC81C\uBAA9" }) }),
216
- /* @__PURE__ */ jsx(Separator, { orientation: "vertical", style: { height: "100%" } }),
217
- /* @__PURE__ */ jsx(
218
- TextField.Root,
219
- {
220
- className: "editor-title-text-field",
221
- onChange: handleOnChangeTitle,
222
- placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
223
- value: title
224
- }
225
- )
226
- ]
227
- }
228
- ),
229
- /* @__PURE__ */ jsx(
230
- ReactQuill,
231
- __spreadValues({
232
- className: "tipp-ql-editor write-mode",
233
- onChange: handleOnChangeContent,
234
- ref: editorRef,
235
- theme: "snow",
236
- value: content
237
- }, quillProps)
238
- ),
239
- renderAttachedFiles(),
240
- /* @__PURE__ */ jsx(Separator, { size: "4" }),
241
- /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
242
- /* @__PURE__ */ jsx(
243
- Button,
244
- {
245
- color: "gray",
246
- onClick: handleButtonClick,
247
- variant: "transparent",
248
- children: /* @__PURE__ */ jsx(Link2Icon, { height: 20, width: 20 })
249
- }
250
- ),
251
- /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
252
- clearEditor ? /* @__PURE__ */ jsx(Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
253
- SecondaryButton ? SecondaryButton : null,
254
- /* @__PURE__ */ jsx(Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
255
- ] })
256
- ] })
257
- ]
258
- }
259
- );
260
- }
261
- );
262
- Editor.displayName = "TIPP-Quill-Editor";
263
-
264
- export {
265
- Editor
266
- };
267
- //# sourceMappingURL=chunk-4ULZXT3Z.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/editor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from 'react';\nimport {\n Box,\n Button,\n Flex,\n Grid,\n Link,\n Separator,\n TextField,\n Typo,\n Link2Icon,\n toast,\n FileIcon,\n} from '@tipp/ui';\nimport type { ReactQuillProps } from 'react-quill';\nimport ReactQuill from 'react-quill';\n\nexport interface Attachment {\n fileName: string;\n url: string;\n}\n\nexport interface TippEditorProps extends ReactQuillProps {\n defaultTitle?: string;\n defaultValue?: string;\n defaultAttachedFiles?: Attachment[];\n /** 저장하기 버튼 클릭 시 실행 */\n onClickSave?: (values: {\n title: string;\n content: string;\n files: Attachment[];\n }) => void;\n /** 파일 업로드 버튼 클릭 시 실행 */\n uploadFile?: (\n file: File,\n destination: string\n ) => Promise<Attachment | undefined>;\n deleteFile?: (fileUrl: string) => Promise<void>;\n /** 외부에서 Editor를 빈 상태로 초기화 시켜야 할 때 사용 */\n clearEditor?: React.MutableRefObject<(() => void) | undefined>;\n /** 초기화 버튼말고 다른 버튼 추가시 */\n SecondaryButton?: React.ReactNode;\n /** true인 경우 저장하기 버튼이 비활성 화 됨. 연타 방지 */\n isLoading?: boolean;\n minHeight?: string;\n maxHeight?: string;\n}\n\nexport const Editor = forwardRef<ReactQuill, TippEditorProps>(\n (props, ref): React.ReactNode => {\n const {\n defaultAttachedFiles,\n defaultTitle,\n defaultValue,\n onClickSave,\n uploadFile,\n deleteFile,\n isLoading,\n SecondaryButton,\n clearEditor,\n minHeight,\n maxHeight,\n ...quillProps\n } = props;\n const defaultRef = useRef<ReactQuill>(null);\n const editorRef = ref || defaultRef;\n const [attachedFiles, setAttachedFiles] = useState<Attachment[]>(\n defaultAttachedFiles || []\n );\n const [fileDeleteLoading, setFileDeleteLoading] = useState(new Set());\n\n const [title, setTitle] = useState(defaultTitle || '');\n const [content, setContent] = useState(defaultValue || '');\n\n const handleOnChangeContent = useCallback((value: string) => {\n setContent(value);\n }, []);\n\n const handleButtonClick = useCallback(() => {\n let input: HTMLInputElement | null = document.createElement('input');\n input.type = 'file';\n input.onchange = async (event) => {\n const file = (event.target as HTMLInputElement).files?.[0];\n if (!file) {\n // console.log('DEBUG: no file');\n toast.error('파일을 선택해주세요.');\n return;\n }\n\n const fileName = file.name;\n const attachment = await uploadFile?.(file, `hr-notes/${fileName}`);\n if (attachment) {\n setAttachedFiles((prev) => [...prev, attachment]);\n }\n input = null;\n };\n input.click();\n }, [uploadFile]);\n\n const handleDeleteFile = useCallback(\n async (fileUrl: string) => {\n try {\n setFileDeleteLoading((p) => p.add(fileUrl));\n await deleteFile?.(fileUrl);\n setAttachedFiles((currentFiles) =>\n currentFiles.filter((item) => item.url !== fileUrl)\n );\n } catch (err) {\n toast.error('파일 삭제에 실패했습니다.');\n } finally {\n setFileDeleteLoading((p) => {\n p.delete(fileUrl);\n return p;\n });\n }\n },\n [deleteFile]\n );\n\n const renderAttachedFiles = useCallback(() => {\n return (\n <Box width=\"100%\">\n {attachedFiles.map((file) => {\n return (\n <>\n <Separator size=\"4\" />\n <Flex\n align=\"center\"\n justify=\"between\"\n key={`${file.url}_${file.fileName}`}\n p=\"4\"\n width=\"100%\"\n >\n <Link href={file.url} size=\"2\">\n <Flex align=\"center\" gap=\"3\">\n <FileIcon />\n {file.fileName}\n </Flex>\n </Link>\n <Button\n loading={fileDeleteLoading.has(file.url)}\n onClick={() => {\n void handleDeleteFile(file.url);\n }}\n variant=\"ghost\"\n >\n 첨부 파일 삭제\n </Button>\n </Flex>\n </>\n );\n })}\n </Box>\n );\n }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);\n\n const handleOnChangeTitle = useCallback<\n React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>\n >((e) => {\n setTitle(e.target.value);\n }, []);\n\n const clearEditorState = useCallback(() => {\n setContent('');\n setAttachedFiles([]);\n setTitle('');\n }, []);\n\n const handleSaveClick = useCallback(() => {\n onClickSave?.({\n title,\n content,\n files: attachedFiles,\n });\n }, [onClickSave, title, content, attachedFiles]);\n\n if (props.clearEditor) {\n props.clearEditor.current = clearEditorState;\n }\n\n return (\n <div\n className=\"tipp-ql-wrapper\"\n style={{\n minHeight,\n maxHeight,\n }}\n >\n {/* 제목 입력창 */}\n <Grid\n align=\"center\"\n columns=\"auto auto 1fr\"\n gap=\"2\"\n height=\"42px\"\n pl=\"2\"\n pr=\"3\"\n width=\"100%\"\n >\n <Box pl=\"3\" pr=\"3\">\n <Typo>제목</Typo>\n </Box>\n <Separator orientation=\"vertical\" style={{ height: '100%' }} />\n <TextField.Root\n className=\"editor-title-text-field\"\n onChange={handleOnChangeTitle}\n placeholder=\"제목을 입력해주세요\"\n value={title}\n />\n </Grid>\n <ReactQuill\n className=\"tipp-ql-editor write-mode\"\n onChange={handleOnChangeContent}\n ref={editorRef}\n theme=\"snow\"\n value={content}\n {...quillProps}\n />\n {renderAttachedFiles()}\n <Separator size=\"4\" />\n <Flex align=\"center\" justify=\"between\" p=\"2\" pl=\"4\" pr=\"4\" width=\"100%\">\n <Button\n color=\"gray\"\n onClick={handleButtonClick}\n variant=\"transparent\"\n >\n <Link2Icon height={20} width={20} />\n </Button>\n\n <Flex gap=\"2\">\n {clearEditor ? (\n <Button color=\"gray\" onClick={clearEditorState} variant=\"outline\">\n 초기화\n </Button>\n ) : null}\n {SecondaryButton ? SecondaryButton : null}\n <Button disabled={isLoading} onClick={handleSaveClick}>\n 저장\n </Button>\n </Flex>\n </Flex>\n </div>\n );\n }\n);\n\nEditor.displayName = 'TIPP-Quill-Editor';\n"],"mappings":"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","names":["_a"]}
@@ -1,272 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
- var __hasOwnProp = Object.prototype.hasOwnProperty;
4
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __spreadValues = (a, b) => {
7
- for (var prop in b || (b = {}))
8
- if (__hasOwnProp.call(b, prop))
9
- __defNormalProp(a, prop, b[prop]);
10
- if (__getOwnPropSymbols)
11
- for (var prop of __getOwnPropSymbols(b)) {
12
- if (__propIsEnum.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- }
15
- return a;
16
- };
17
- var __objRest = (source, exclude) => {
18
- var target = {};
19
- for (var prop in source)
20
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
21
- target[prop] = source[prop];
22
- if (source != null && __getOwnPropSymbols)
23
- for (var prop of __getOwnPropSymbols(source)) {
24
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
25
- target[prop] = source[prop];
26
- }
27
- return target;
28
- };
29
- var __async = (__this, __arguments, generator) => {
30
- return new Promise((resolve, reject) => {
31
- var fulfilled = (value) => {
32
- try {
33
- step(generator.next(value));
34
- } catch (e) {
35
- reject(e);
36
- }
37
- };
38
- var rejected = (value) => {
39
- try {
40
- step(generator.throw(value));
41
- } catch (e) {
42
- reject(e);
43
- }
44
- };
45
- var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
46
- step((generator = generator.apply(__this, __arguments)).next());
47
- });
48
- };
49
-
50
- // src/editor.tsx
51
- import { forwardRef, useCallback, useRef, useState } from "react";
52
- import {
53
- Box,
54
- Button,
55
- Flex,
56
- Grid,
57
- Link,
58
- Separator,
59
- TextField,
60
- Typo,
61
- Link2Icon,
62
- toast,
63
- FileIcon
64
- } from "@tipp/ui";
65
- import ReactQuill from "react-quill";
66
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
67
- var Editor = forwardRef(
68
- (props, ref) => {
69
- const _a = props, {
70
- defaultAttachedFiles,
71
- defaultTitle,
72
- defaultValue,
73
- onClickSave,
74
- uploadFile,
75
- deleteFile,
76
- isLoading,
77
- SecondaryButton,
78
- clearEditor
79
- } = _a, quillProps = __objRest(_a, [
80
- "defaultAttachedFiles",
81
- "defaultTitle",
82
- "defaultValue",
83
- "onClickSave",
84
- "uploadFile",
85
- "deleteFile",
86
- "isLoading",
87
- "SecondaryButton",
88
- "clearEditor"
89
- ]);
90
- const defaultRef = useRef(null);
91
- const editorRef = ref || defaultRef;
92
- const [attachedFiles, setAttachedFiles] = useState(
93
- defaultAttachedFiles || []
94
- );
95
- const [title, setTitle] = useState(defaultTitle || "");
96
- const [content, setContent] = useState(defaultValue || "");
97
- const handleOnChangeContent = useCallback((value) => {
98
- setContent(value);
99
- }, []);
100
- const handleButtonClick = useCallback(() => {
101
- let input = document.createElement("input");
102
- input.type = "file";
103
- input.onchange = (event) => __async(void 0, null, function* () {
104
- var _a2;
105
- const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
106
- if (!file) {
107
- toast.error("\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.");
108
- return;
109
- }
110
- const fileName = file.name;
111
- const attachment = yield uploadFile == null ? void 0 : uploadFile(file, `hr-notes/${fileName}`);
112
- if (attachment) {
113
- setAttachedFiles((prev) => [...prev, attachment]);
114
- }
115
- input = null;
116
- });
117
- input.click();
118
- }, [uploadFile]);
119
- const [fileDeleteLoading, setFileDeleteLoading] = useState(/* @__PURE__ */ new Set());
120
- const handleDeleteFile = useCallback(
121
- (fileUrl) => __async(void 0, null, function* () {
122
- try {
123
- setFileDeleteLoading((p) => p.add(fileUrl));
124
- yield deleteFile == null ? void 0 : deleteFile(fileUrl);
125
- setAttachedFiles(
126
- (currentFiles) => currentFiles.filter((item) => item.url !== fileUrl)
127
- );
128
- } catch (err) {
129
- toast.error("\uD30C\uC77C \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
130
- } finally {
131
- setFileDeleteLoading((p) => {
132
- p.delete(fileUrl);
133
- return p;
134
- });
135
- }
136
- }),
137
- [deleteFile]
138
- );
139
- const renderAttachedFiles = useCallback(() => {
140
- return /* @__PURE__ */ jsx(Box, { width: "100%", children: attachedFiles == null ? void 0 : attachedFiles.map((file) => {
141
- return /* @__PURE__ */ jsxs(Fragment, { children: [
142
- /* @__PURE__ */ jsx(Separator, { size: "4" }),
143
- /* @__PURE__ */ jsxs(
144
- Flex,
145
- {
146
- align: "center",
147
- justify: "between",
148
- p: "4",
149
- width: "100%",
150
- children: [
151
- /* @__PURE__ */ jsx(Link, { href: file.url, size: "2", children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
152
- /* @__PURE__ */ jsx(FileIcon, {}),
153
- file.fileName
154
- ] }) }),
155
- /* @__PURE__ */ jsx(
156
- Button,
157
- {
158
- loading: fileDeleteLoading.has(file.url),
159
- onClick: () => {
160
- void handleDeleteFile(file.url);
161
- },
162
- variant: "ghost",
163
- children: "\uCCA8\uBD80 \uD30C\uC77C \uC0AD\uC81C"
164
- }
165
- )
166
- ]
167
- },
168
- `${file.url}_${file.fileName}`
169
- )
170
- ] });
171
- }) });
172
- }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
173
- const handleOnChangeTitle = useCallback((e) => {
174
- setTitle(e.target.value);
175
- }, []);
176
- const clearEditorState = useCallback(() => {
177
- setContent("");
178
- setAttachedFiles([]);
179
- setTitle("");
180
- }, []);
181
- const handleSaveClick = useCallback(() => {
182
- onClickSave == null ? void 0 : onClickSave({
183
- title,
184
- content,
185
- files: attachedFiles
186
- });
187
- }, [onClickSave, title, content, attachedFiles]);
188
- if (props.clearEditor) {
189
- props.clearEditor.current = clearEditorState;
190
- }
191
- return /* @__PURE__ */ jsx("div", { className: "tipp-ql-wrapper", children: /* @__PURE__ */ jsxs(Grid, { rows: "auto 1fr auto auto", height: "100%", children: [
192
- /* @__PURE__ */ jsxs(
193
- Grid,
194
- {
195
- align: "center",
196
- columns: "auto auto 1fr",
197
- gap: "2",
198
- height: "42px",
199
- pl: "2",
200
- pr: "3",
201
- width: "100%",
202
- children: [
203
- /* @__PURE__ */ jsx(Box, { pl: "3", pr: "3", children: /* @__PURE__ */ jsx(Typo, { children: "\uC81C\uBAA9" }) }),
204
- /* @__PURE__ */ jsx(Separator, { orientation: "vertical", style: { height: "100%" } }),
205
- /* @__PURE__ */ jsx(
206
- TextField.Root,
207
- {
208
- className: "editor-title-text-field",
209
- onChange: handleOnChangeTitle,
210
- placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
211
- value: title
212
- }
213
- )
214
- ]
215
- }
216
- ),
217
- /* @__PURE__ */ jsx(
218
- ReactQuill,
219
- __spreadValues({
220
- className: "tipp-ql-editor write-mode",
221
- onChange: handleOnChangeContent,
222
- ref: editorRef,
223
- theme: "snow",
224
- value: content
225
- }, quillProps)
226
- ),
227
- renderAttachedFiles(),
228
- /* @__PURE__ */ jsx(Separator, { size: "4" }),
229
- /* @__PURE__ */ jsxs(
230
- Flex,
231
- {
232
- align: "center",
233
- justify: "between",
234
- p: "2",
235
- pl: "4",
236
- pr: "4",
237
- width: "100%",
238
- children: [
239
- /* @__PURE__ */ jsx(
240
- Button,
241
- {
242
- color: "gray",
243
- onClick: handleButtonClick,
244
- variant: "transparent",
245
- children: /* @__PURE__ */ jsx(Link2Icon, { height: 20, width: 20 })
246
- }
247
- ),
248
- /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
249
- clearEditor ? /* @__PURE__ */ jsx(
250
- Button,
251
- {
252
- color: "gray",
253
- onClick: clearEditorState,
254
- variant: "outline",
255
- children: "\uCD08\uAE30\uD654"
256
- }
257
- ) : null,
258
- SecondaryButton ? SecondaryButton : null,
259
- /* @__PURE__ */ jsx(Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
260
- ] })
261
- ]
262
- }
263
- )
264
- ] }) });
265
- }
266
- );
267
- Editor.displayName = "TIPP-Quill-Editor";
268
-
269
- export {
270
- Editor
271
- };
272
- //# sourceMappingURL=chunk-5WZL7EM7.js.map