@tipp/ui-quill-editor 1.0.3 → 1.1.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.
- package/dist/chunk-6W7GMBAM.js +20 -0
- package/dist/chunk-6W7GMBAM.js.map +1 -0
- package/dist/chunk-AYPEDHDL.js +55 -0
- package/dist/chunk-AYPEDHDL.js.map +1 -0
- package/dist/chunk-EZ2MSXWD.js +211 -0
- package/dist/chunk-EZ2MSXWD.js.map +1 -0
- package/dist/chunk-IWRASGLB.js +215 -0
- package/dist/chunk-IWRASGLB.js.map +1 -0
- package/dist/chunk-KLFBBLJB.js +212 -0
- package/dist/chunk-KLFBBLJB.js.map +1 -0
- package/dist/chunk-MX3IDKDT.js +215 -0
- package/dist/chunk-MX3IDKDT.js.map +1 -0
- package/dist/chunk-NFVMYQC2.js +215 -0
- package/dist/chunk-NFVMYQC2.js.map +1 -0
- package/dist/chunk-QC5RGGRB.js +224 -0
- package/dist/chunk-QC5RGGRB.js.map +1 -0
- package/dist/chunk-RVTX55MD.js +215 -0
- package/dist/chunk-RVTX55MD.js.map +1 -0
- package/dist/chunk-UE5CSHOY.js +211 -0
- package/dist/chunk-UE5CSHOY.js.map +1 -0
- package/dist/chunk-WITVYZYX.js +211 -0
- package/dist/chunk-WITVYZYX.js.map +1 -0
- package/dist/chunk-WZQACNB7.js +215 -0
- package/dist/chunk-WZQACNB7.js.map +1 -0
- package/dist/chunk-Z7OJPAOK.js +211 -0
- package/dist/chunk-Z7OJPAOK.js.map +1 -0
- package/dist/chunk-ZJXLAGSA.js +213 -0
- package/dist/chunk-ZJXLAGSA.js.map +1 -0
- package/dist/editor.cjs.map +1 -1
- package/dist/editor.d.cts +1 -0
- package/dist/editor.d.ts +1 -0
- package/dist/editor.js +2 -1
- package/dist/html-container.cjs +40 -0
- package/dist/html-container.cjs.map +1 -0
- package/dist/html-container.d.cts +9 -0
- package/dist/html-container.d.ts +9 -0
- package/dist/html-container.js +8 -0
- package/dist/html-container.js.map +1 -0
- package/dist/index.cjs +201 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +4 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +8 -2
- package/dist/read-card.cjs +255 -0
- package/dist/read-card.cjs.map +1 -0
- package/dist/read-card.d.cts +16 -0
- package/dist/read-card.d.ts +16 -0
- package/dist/read-card.js +9 -0
- package/dist/read-card.js.map +1 -0
- package/package.json +5 -3
- package/src/editor.tsx +1 -0
- package/src/html-container.tsx +25 -0
- package/src/index.tsx +1 -0
- package/src/read-card.tsx +255 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// src/html-container.tsx
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var QuillHtmlOutputContainer = forwardRef(({ html, className }, ref) => {
|
|
5
|
+
return /* @__PURE__ */ jsx("div", { className: "ql-snow ql-container read-mode", children: /* @__PURE__ */ jsx(
|
|
6
|
+
"div",
|
|
7
|
+
{
|
|
8
|
+
className: `ql-editor ${className || ""}`,
|
|
9
|
+
dangerouslySetInnerHTML: { __html: html },
|
|
10
|
+
ref
|
|
11
|
+
}
|
|
12
|
+
) });
|
|
13
|
+
});
|
|
14
|
+
QuillHtmlOutputContainer.displayName = "QuillHtmlOutputContainer";
|
|
15
|
+
var html_container_default = QuillHtmlOutputContainer;
|
|
16
|
+
|
|
17
|
+
export {
|
|
18
|
+
html_container_default
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=chunk-6W7GMBAM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/html-container.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n html: string;\n className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n HTMLDivElement,\n QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactNode => {\n return (\n <div className=\"ql-snow ql-container read-mode\">\n <div\n className={`ql-editor ${className || ''}`}\n dangerouslySetInnerHTML={{ __html: html }}\n ref={ref}\n />\n </div>\n );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAa5B;AANN,IAAM,2BAA2B,WAG/B,CAAC,EAAE,MAAM,UAAU,GAAG,QAAyB;AAC/C,SACE,oBAAC,SAAI,WAAU,kCACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,aAAa,EAAE;AAAA,MACvC,yBAAyB,EAAE,QAAQ,KAAK;AAAA,MACxC;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,yBAAyB,cAAc;AAEvC,IAAO,yBAAQ;","names":[]}
|
|
@@ -0,0 +1,55 @@
|
|
|
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
|
+
export {
|
|
51
|
+
__spreadValues,
|
|
52
|
+
__objRest,
|
|
53
|
+
__async
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=chunk-AYPEDHDL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import {
|
|
2
|
+
html_container_default
|
|
3
|
+
} from "./chunk-6W7GMBAM.js";
|
|
4
|
+
import {
|
|
5
|
+
__async
|
|
6
|
+
} from "./chunk-AYPEDHDL.js";
|
|
7
|
+
|
|
8
|
+
// src/read-card.tsx
|
|
9
|
+
import {
|
|
10
|
+
useCallback,
|
|
11
|
+
useEffect,
|
|
12
|
+
useMemo,
|
|
13
|
+
useRef,
|
|
14
|
+
useState
|
|
15
|
+
} from "react";
|
|
16
|
+
import Dompurify from "dompurify";
|
|
17
|
+
import {
|
|
18
|
+
AlertDialog,
|
|
19
|
+
Badge,
|
|
20
|
+
FileIcon,
|
|
21
|
+
Button,
|
|
22
|
+
Card,
|
|
23
|
+
ChevronDownIcon,
|
|
24
|
+
ChevronUpIcon,
|
|
25
|
+
DotsVerticalIcon,
|
|
26
|
+
Flex,
|
|
27
|
+
Heading,
|
|
28
|
+
IconButton,
|
|
29
|
+
Link,
|
|
30
|
+
toast,
|
|
31
|
+
Typo,
|
|
32
|
+
Separator,
|
|
33
|
+
DropdownMenu,
|
|
34
|
+
Pencil1Icon,
|
|
35
|
+
TrashIcon
|
|
36
|
+
} from "@tipp/ui";
|
|
37
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
38
|
+
function ReadCard(props) {
|
|
39
|
+
const {
|
|
40
|
+
onClickDelete: propsOnClickDelete,
|
|
41
|
+
onClickEdit: propsOnClickEdit,
|
|
42
|
+
content = "",
|
|
43
|
+
title = "",
|
|
44
|
+
writer,
|
|
45
|
+
createAt,
|
|
46
|
+
files
|
|
47
|
+
} = props;
|
|
48
|
+
const ref = useRef(null);
|
|
49
|
+
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
50
|
+
const onClickDelete = useCallback(() => __async(this, null, function* () {
|
|
51
|
+
try {
|
|
52
|
+
yield propsOnClickDelete == null ? void 0 : propsOnClickDelete();
|
|
53
|
+
toast.success("\uB178\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
|
|
54
|
+
} catch (err) {
|
|
55
|
+
toast.error("\uB178\uD2B8 \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
|
|
56
|
+
}
|
|
57
|
+
}), [propsOnClickDelete]);
|
|
58
|
+
const safeContent = useMemo(() => {
|
|
59
|
+
return Dompurify.sanitize(content || "");
|
|
60
|
+
}, [content]);
|
|
61
|
+
const optionItems = useMemo(() => {
|
|
62
|
+
return [
|
|
63
|
+
{
|
|
64
|
+
title: "\uC218\uC815\uD558\uAE30",
|
|
65
|
+
icon: /* @__PURE__ */ jsx(Pencil1Icon, {}),
|
|
66
|
+
onClick: () => {
|
|
67
|
+
void (propsOnClickEdit == null ? void 0 : propsOnClickEdit());
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
title: "\uC0AD\uC81C\uD558\uAE30",
|
|
72
|
+
onClick: () => {
|
|
73
|
+
setDeleteDialogOpen(true);
|
|
74
|
+
},
|
|
75
|
+
icon: /* @__PURE__ */ jsx(TrashIcon, {})
|
|
76
|
+
}
|
|
77
|
+
];
|
|
78
|
+
}, [propsOnClickEdit]);
|
|
79
|
+
const [className, setClassName] = useState("closed");
|
|
80
|
+
const [openBtnVisible, setOpenBtnVisible] = useState(false);
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (!ref.current)
|
|
83
|
+
return;
|
|
84
|
+
setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);
|
|
85
|
+
ref.current.style.height = `${ref.current.clientHeight}px`;
|
|
86
|
+
}, [ref, content]);
|
|
87
|
+
const renderOpenBtns = () => {
|
|
88
|
+
if (openBtnVisible) {
|
|
89
|
+
if (className) {
|
|
90
|
+
return /* @__PURE__ */ jsxs(
|
|
91
|
+
Button,
|
|
92
|
+
{
|
|
93
|
+
color: "gray",
|
|
94
|
+
onClick: () => {
|
|
95
|
+
setClassName(void 0);
|
|
96
|
+
if (ref.current) {
|
|
97
|
+
ref.current.style.height = "initial";
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
variant: "outline",
|
|
101
|
+
children: [
|
|
102
|
+
"\uBA54\uBAA8 \uD3BC\uCE58\uAE30",
|
|
103
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
return /* @__PURE__ */ jsxs(
|
|
109
|
+
Button,
|
|
110
|
+
{
|
|
111
|
+
color: "gray",
|
|
112
|
+
onClick: () => {
|
|
113
|
+
setClassName("closed");
|
|
114
|
+
},
|
|
115
|
+
variant: "outline",
|
|
116
|
+
children: [
|
|
117
|
+
"\uBA54\uBAA8 \uC811\uAE30",
|
|
118
|
+
/* @__PURE__ */ jsx(ChevronUpIcon, {})
|
|
119
|
+
]
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}
|
|
123
|
+
return null;
|
|
124
|
+
};
|
|
125
|
+
return /* @__PURE__ */ jsxs(Card, { size: "2", children: [
|
|
126
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", justify: "between", children: [
|
|
127
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
|
|
128
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading5", weight: "regular", children: title }),
|
|
129
|
+
/* @__PURE__ */ jsx(Badge, { color: "neutral", size: "small", children: `\uC791\uC131 : ${writer}` })
|
|
130
|
+
] }),
|
|
131
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
|
|
132
|
+
/* @__PURE__ */ jsx(Typo, { children: `\uB4F1\uB85D\uC77C\uC790: ${createAt == null ? void 0 : createAt.toLocaleDateString()} ` }),
|
|
133
|
+
/* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
134
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }) }),
|
|
135
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: optionItems.map((item) => {
|
|
136
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.Item, { onClick: item.onClick, children: [
|
|
137
|
+
item.icon,
|
|
138
|
+
item.title
|
|
139
|
+
] }, item.title);
|
|
140
|
+
}) })
|
|
141
|
+
] })
|
|
142
|
+
] }),
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
AlertDialog.Root,
|
|
145
|
+
{
|
|
146
|
+
onOpenChange: setDeleteDialogOpen,
|
|
147
|
+
open: deleteDialogOpen,
|
|
148
|
+
children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
|
|
149
|
+
/* @__PURE__ */ jsx(AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
150
|
+
/* @__PURE__ */ jsx(AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
151
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
152
|
+
/* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
|
|
153
|
+
/* @__PURE__ */ jsx(AlertDialog.Action, { children: /* @__PURE__ */ jsx(Button, { color: "tomato", onClick: () => void onClickDelete(), children: "\uC0AD\uC81C" }) })
|
|
154
|
+
] })
|
|
155
|
+
] })
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] }),
|
|
159
|
+
Boolean(files == null ? void 0 : files.length) && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: files == null ? void 0 : files.map((file) => {
|
|
160
|
+
var _a;
|
|
161
|
+
return /* @__PURE__ */ jsx(
|
|
162
|
+
Link,
|
|
163
|
+
{
|
|
164
|
+
download: file.fileName,
|
|
165
|
+
href: file.url,
|
|
166
|
+
children: /* @__PURE__ */ jsx(
|
|
167
|
+
IconButton,
|
|
168
|
+
{
|
|
169
|
+
mt: "3",
|
|
170
|
+
size: "4",
|
|
171
|
+
style: { width: 400, height: 56 },
|
|
172
|
+
variant: "soft",
|
|
173
|
+
children: /* @__PURE__ */ jsxs(Flex, { gap: "3", pl: "4", width: "100%", children: [
|
|
174
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: /* @__PURE__ */ jsx(FileIcon, { height: 20, width: 20 }) }),
|
|
175
|
+
/* @__PURE__ */ jsx(
|
|
176
|
+
Typo,
|
|
177
|
+
{
|
|
178
|
+
as: "p",
|
|
179
|
+
color: "gray",
|
|
180
|
+
style: { width: "100%", textAlign: "left" },
|
|
181
|
+
children: file.fileName
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
] })
|
|
185
|
+
}
|
|
186
|
+
)
|
|
187
|
+
},
|
|
188
|
+
((_a = file.createdAt) == null ? void 0 : _a.valueOf()) + file.fileName
|
|
189
|
+
);
|
|
190
|
+
}) }),
|
|
191
|
+
content ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
192
|
+
/* @__PURE__ */ jsx(Separator, { mb: "4", mt: "4", style: { width: "100%" } }),
|
|
193
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", direction: "column", gap: "3", children: [
|
|
194
|
+
/* @__PURE__ */ jsx(
|
|
195
|
+
html_container_default,
|
|
196
|
+
{
|
|
197
|
+
className,
|
|
198
|
+
html: safeContent,
|
|
199
|
+
ref
|
|
200
|
+
}
|
|
201
|
+
),
|
|
202
|
+
renderOpenBtns()
|
|
203
|
+
] })
|
|
204
|
+
] }) : null
|
|
205
|
+
] });
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
export {
|
|
209
|
+
ReadCard
|
|
210
|
+
};
|
|
211
|
+
//# sourceMappingURL=chunk-EZ2MSXWD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n toast,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './editor';\n\ninterface ReadCardProps {\n onClickDelete?: () => Promise<void>;\n onClickEdit?: () => Promise<void>;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const onClickDelete = useCallback(async () => {\n try {\n await propsOnClickDelete?.();\n toast.success('노트가 삭제되었습니다.');\n } catch (err) {\n toast.error('노트 삭제에 실패했습니다.');\n }\n }, [propsOnClickDelete]);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content || '');\n }, [content]);\n\n const optionItems = useMemo<\n {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }[]\n >(() => {\n return [\n {\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: () => {\n void propsOnClickEdit?.();\n },\n },\n {\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n },\n ];\n }, [propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined | 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Flex align=\"center\" gap=\"2\" justify=\"between\">\n <Flex align=\"center\" gap=\"4\">\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n <Badge color=\"neutral\" size=\"small\">{`작성 : ${writer}`}</Badge>\n </Flex>\n\n <Flex align=\"center\" gap=\"4\">\n <Typo>{`등록일자: ${createAt?.toLocaleDateString()} `}</Typo>\n\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={() => void onClickDelete()}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Flex>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: 400, height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={20} width={20} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
import {
|
|
2
|
+
html_container_default
|
|
3
|
+
} from "./chunk-6W7GMBAM.js";
|
|
4
|
+
import {
|
|
5
|
+
__async
|
|
6
|
+
} from "./chunk-AYPEDHDL.js";
|
|
7
|
+
|
|
8
|
+
// src/read-card.tsx
|
|
9
|
+
import {
|
|
10
|
+
useCallback,
|
|
11
|
+
useEffect,
|
|
12
|
+
useMemo,
|
|
13
|
+
useRef,
|
|
14
|
+
useState
|
|
15
|
+
} from "react";
|
|
16
|
+
import Dompurify from "dompurify";
|
|
17
|
+
import {
|
|
18
|
+
AlertDialog,
|
|
19
|
+
Badge,
|
|
20
|
+
FileIcon,
|
|
21
|
+
Button,
|
|
22
|
+
Card,
|
|
23
|
+
ChevronDownIcon,
|
|
24
|
+
ChevronUpIcon,
|
|
25
|
+
DotsVerticalIcon,
|
|
26
|
+
Flex,
|
|
27
|
+
Heading,
|
|
28
|
+
IconButton,
|
|
29
|
+
Link,
|
|
30
|
+
toast,
|
|
31
|
+
Typo,
|
|
32
|
+
Separator,
|
|
33
|
+
DropdownMenu,
|
|
34
|
+
Pencil1Icon,
|
|
35
|
+
TrashIcon
|
|
36
|
+
} from "@tipp/ui";
|
|
37
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
38
|
+
function ReadCard(props) {
|
|
39
|
+
const {
|
|
40
|
+
onClickDelete: propsOnClickDelete,
|
|
41
|
+
onClickEdit: propsOnClickEdit,
|
|
42
|
+
content = "",
|
|
43
|
+
title = "",
|
|
44
|
+
writer,
|
|
45
|
+
createAt,
|
|
46
|
+
files
|
|
47
|
+
} = props;
|
|
48
|
+
const ref = useRef(null);
|
|
49
|
+
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
50
|
+
const onClickDelete = useCallback(() => __async(this, null, function* () {
|
|
51
|
+
try {
|
|
52
|
+
yield propsOnClickDelete == null ? void 0 : propsOnClickDelete();
|
|
53
|
+
toast.success("\uB178\uD2B8\uAC00 \uC0AD\uC81C\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
|
|
54
|
+
} catch (err) {
|
|
55
|
+
toast.error("\uB178\uD2B8 \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
|
|
56
|
+
}
|
|
57
|
+
}), [propsOnClickDelete]);
|
|
58
|
+
const safeContent = useMemo(() => {
|
|
59
|
+
return Dompurify.sanitize(content || "");
|
|
60
|
+
}, [content]);
|
|
61
|
+
const optionItems = useMemo(() => {
|
|
62
|
+
const result = [];
|
|
63
|
+
if (propsOnClickEdit) {
|
|
64
|
+
result.push({
|
|
65
|
+
title: "\uC218\uC815\uD558\uAE30",
|
|
66
|
+
icon: /* @__PURE__ */ jsx(Pencil1Icon, {}),
|
|
67
|
+
onClick: () => {
|
|
68
|
+
void propsOnClickEdit();
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
if (propsOnClickDelete) {
|
|
73
|
+
result.push({
|
|
74
|
+
title: "\uC0AD\uC81C\uD558\uAE30",
|
|
75
|
+
onClick: () => {
|
|
76
|
+
setDeleteDialogOpen(true);
|
|
77
|
+
},
|
|
78
|
+
icon: /* @__PURE__ */ jsx(TrashIcon, {})
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
return result;
|
|
82
|
+
}, [propsOnClickDelete, propsOnClickEdit]);
|
|
83
|
+
const [className, setClassName] = useState("closed");
|
|
84
|
+
const [openBtnVisible, setOpenBtnVisible] = useState(false);
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
if (!ref.current)
|
|
87
|
+
return;
|
|
88
|
+
setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);
|
|
89
|
+
ref.current.style.height = `${ref.current.clientHeight}px`;
|
|
90
|
+
}, [ref, content]);
|
|
91
|
+
const renderOpenBtns = () => {
|
|
92
|
+
if (openBtnVisible) {
|
|
93
|
+
if (className) {
|
|
94
|
+
return /* @__PURE__ */ jsxs(
|
|
95
|
+
Button,
|
|
96
|
+
{
|
|
97
|
+
color: "gray",
|
|
98
|
+
onClick: () => {
|
|
99
|
+
setClassName(void 0);
|
|
100
|
+
if (ref.current) {
|
|
101
|
+
ref.current.style.height = "initial";
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
variant: "outline",
|
|
105
|
+
children: [
|
|
106
|
+
"\uBA54\uBAA8 \uD3BC\uCE58\uAE30",
|
|
107
|
+
/* @__PURE__ */ jsx(ChevronDownIcon, {})
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
return /* @__PURE__ */ jsxs(
|
|
113
|
+
Button,
|
|
114
|
+
{
|
|
115
|
+
color: "gray",
|
|
116
|
+
onClick: () => {
|
|
117
|
+
setClassName("closed");
|
|
118
|
+
},
|
|
119
|
+
variant: "outline",
|
|
120
|
+
children: [
|
|
121
|
+
"\uBA54\uBAA8 \uC811\uAE30",
|
|
122
|
+
/* @__PURE__ */ jsx(ChevronUpIcon, {})
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
return null;
|
|
128
|
+
};
|
|
129
|
+
return /* @__PURE__ */ jsxs(Card, { size: "2", children: [
|
|
130
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", justify: "between", children: [
|
|
131
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
|
|
132
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading5", weight: "regular", children: title }),
|
|
133
|
+
writer ? /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "small", children: `\uC791\uC131\uC790 : ${writer}` }) : null
|
|
134
|
+
] }),
|
|
135
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", children: [
|
|
136
|
+
createAt ? /* @__PURE__ */ jsx(Typo, { children: `\uB4F1\uB85D\uC77C\uC790: ${createAt.toLocaleDateString()} ` }) : null,
|
|
137
|
+
optionItems.length ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
|
|
138
|
+
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(IconButton, { variant: "ghost", children: /* @__PURE__ */ jsx(DotsVerticalIcon, {}) }) }),
|
|
139
|
+
/* @__PURE__ */ jsx(DropdownMenu.Content, { children: optionItems.map((item) => {
|
|
140
|
+
return /* @__PURE__ */ jsxs(DropdownMenu.Item, { onClick: item.onClick, children: [
|
|
141
|
+
item.icon,
|
|
142
|
+
item.title
|
|
143
|
+
] }, item.title);
|
|
144
|
+
}) })
|
|
145
|
+
] }) : null
|
|
146
|
+
] }),
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
AlertDialog.Root,
|
|
149
|
+
{
|
|
150
|
+
onOpenChange: setDeleteDialogOpen,
|
|
151
|
+
open: deleteDialogOpen,
|
|
152
|
+
children: /* @__PURE__ */ jsxs(AlertDialog.Content, { children: [
|
|
153
|
+
/* @__PURE__ */ jsx(AlertDialog.Title, { children: "\uB178\uD2B8\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
154
|
+
/* @__PURE__ */ jsx(AlertDialog.Description, { children: "\uC0AD\uC81C\uB41C \uB178\uD2B8\uB294 \uBCF5\uAD6C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
|
|
155
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
156
|
+
/* @__PURE__ */ jsx(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uCDE8\uC18C" }) }),
|
|
157
|
+
/* @__PURE__ */ jsx(AlertDialog.Action, { children: /* @__PURE__ */ jsx(Button, { color: "tomato", onClick: () => void onClickDelete(), children: "\uC0AD\uC81C" }) })
|
|
158
|
+
] })
|
|
159
|
+
] })
|
|
160
|
+
}
|
|
161
|
+
)
|
|
162
|
+
] }),
|
|
163
|
+
Boolean(files == null ? void 0 : files.length) && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: files == null ? void 0 : files.map((file) => {
|
|
164
|
+
var _a;
|
|
165
|
+
return /* @__PURE__ */ jsx(
|
|
166
|
+
Link,
|
|
167
|
+
{
|
|
168
|
+
download: file.fileName,
|
|
169
|
+
href: file.url,
|
|
170
|
+
children: /* @__PURE__ */ jsx(
|
|
171
|
+
IconButton,
|
|
172
|
+
{
|
|
173
|
+
mt: "3",
|
|
174
|
+
size: "4",
|
|
175
|
+
style: { width: 400, height: 56 },
|
|
176
|
+
variant: "soft",
|
|
177
|
+
children: /* @__PURE__ */ jsxs(Flex, { gap: "3", pl: "4", width: "100%", children: [
|
|
178
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", children: /* @__PURE__ */ jsx(FileIcon, { height: 20, width: 20 }) }),
|
|
179
|
+
/* @__PURE__ */ jsx(
|
|
180
|
+
Typo,
|
|
181
|
+
{
|
|
182
|
+
as: "p",
|
|
183
|
+
color: "gray",
|
|
184
|
+
style: { width: "100%", textAlign: "left" },
|
|
185
|
+
children: file.fileName
|
|
186
|
+
}
|
|
187
|
+
)
|
|
188
|
+
] })
|
|
189
|
+
}
|
|
190
|
+
)
|
|
191
|
+
},
|
|
192
|
+
((_a = file.createdAt) == null ? void 0 : _a.valueOf()) + file.fileName
|
|
193
|
+
);
|
|
194
|
+
}) }),
|
|
195
|
+
content ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
196
|
+
/* @__PURE__ */ jsx(Separator, { mb: "4", mt: "4", style: { width: "100%" } }),
|
|
197
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", direction: "column", gap: "3", children: [
|
|
198
|
+
/* @__PURE__ */ jsx(
|
|
199
|
+
html_container_default,
|
|
200
|
+
{
|
|
201
|
+
className,
|
|
202
|
+
html: safeContent,
|
|
203
|
+
ref
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
renderOpenBtns()
|
|
207
|
+
] })
|
|
208
|
+
] }) : null
|
|
209
|
+
] });
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
export {
|
|
213
|
+
ReadCard
|
|
214
|
+
};
|
|
215
|
+
//# sourceMappingURL=chunk-IWRASGLB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Dompurify from 'dompurify';\nimport {\n AlertDialog,\n Badge,\n FileIcon,\n Button,\n Card,\n ChevronDownIcon,\n ChevronUpIcon,\n DotsVerticalIcon,\n Flex,\n Heading,\n IconButton,\n Link,\n toast,\n Typo,\n Separator,\n DropdownMenu,\n Pencil1Icon,\n TrashIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './editor';\n\ninterface ReadCardProps {\n onClickDelete?: () => Promise<void>;\n onClickEdit?: () => Promise<void>;\n content?: string;\n title?: string;\n writer?: string;\n createAt?: Date;\n files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n const {\n onClickDelete: propsOnClickDelete,\n onClickEdit: propsOnClickEdit,\n content = '',\n title = '',\n writer,\n createAt,\n files,\n } = props;\n const ref = useRef<HTMLDivElement>(null);\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n const onClickDelete = useCallback(async () => {\n try {\n await propsOnClickDelete?.();\n toast.success('노트가 삭제되었습니다.');\n } catch (err) {\n toast.error('노트 삭제에 실패했습니다.');\n }\n }, [propsOnClickDelete]);\n\n const safeContent = useMemo(() => {\n return Dompurify.sanitize(content || '');\n }, [content]);\n\n interface OptionItem {\n title: string;\n icon: React.ReactNode;\n onClick: () => void;\n }\n const optionItems = useMemo<OptionItem[]>(() => {\n const result: OptionItem[] = [];\n if (propsOnClickEdit) {\n result.push({\n title: '수정하기',\n icon: <Pencil1Icon />,\n onClick: () => {\n void propsOnClickEdit();\n },\n });\n }\n\n if (propsOnClickDelete) {\n result.push({\n title: '삭제하기',\n onClick: () => {\n setDeleteDialogOpen(true);\n },\n icon: <TrashIcon />,\n });\n }\n\n return result;\n }, [propsOnClickDelete, propsOnClickEdit]);\n\n const [className, setClassName] = useState<undefined | 'closed'>('closed');\n const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n ref.current.style.height = `${ref.current.clientHeight}px`;\n }, [ref, content]);\n\n const renderOpenBtns = (): React.ReactNode => {\n if (openBtnVisible) {\n if (className) {\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName(undefined);\n if (ref.current) {\n ref.current.style.height = 'initial';\n }\n }}\n variant=\"outline\"\n >\n 메모 펼치기\n <ChevronDownIcon />\n </Button>\n );\n }\n return (\n <Button\n color=\"gray\"\n onClick={() => {\n setClassName('closed');\n }}\n variant=\"outline\"\n >\n 메모 접기\n <ChevronUpIcon />\n </Button>\n );\n }\n return null;\n };\n\n return (\n <Card size=\"2\">\n <Flex align=\"center\" gap=\"2\" justify=\"between\">\n <Flex align=\"center\" gap=\"4\">\n <Heading variant=\"heading5\" weight=\"regular\">\n {title}\n </Heading>\n {writer ? (\n <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n ) : null}\n </Flex>\n\n <Flex align=\"center\" gap=\"4\">\n {createAt ? (\n <Typo>{`등록일자: ${createAt.toLocaleDateString()} `}</Typo>\n ) : null}\n\n {optionItems.length ? (\n <DropdownMenu.Root>\n <DropdownMenu.Trigger>\n <IconButton variant=\"ghost\">\n <DotsVerticalIcon />\n </IconButton>\n </DropdownMenu.Trigger>\n <DropdownMenu.Content>\n {optionItems.map((item) => {\n return (\n <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n {item.icon}\n {item.title}\n </DropdownMenu.Item>\n );\n })}\n </DropdownMenu.Content>\n </DropdownMenu.Root>\n ) : null}\n </Flex>\n\n <AlertDialog.Root\n onOpenChange={setDeleteDialogOpen}\n open={deleteDialogOpen}\n >\n <AlertDialog.Content>\n <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n <AlertDialog.Description>\n 삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n </AlertDialog.Description>\n <Flex gap=\"3\" justify=\"end\">\n <AlertDialog.Cancel>\n <Button color=\"gray\" variant=\"outline\">\n 취소\n </Button>\n </AlertDialog.Cancel>\n <AlertDialog.Action>\n <Button color=\"tomato\" onClick={() => void onClickDelete()}>\n 삭제\n </Button>\n </AlertDialog.Action>\n </Flex>\n </AlertDialog.Content>\n </AlertDialog.Root>\n </Flex>\n\n {Boolean(files?.length) && (\n <Flex direction=\"column\" gap=\"1\">\n {files?.map((file) => {\n return (\n <Link\n download={file.fileName}\n href={file.url}\n key={file.createdAt?.valueOf() + file.fileName}\n >\n <IconButton\n mt=\"3\"\n size=\"4\"\n style={{ width: 400, height: 56 }}\n variant=\"soft\"\n >\n <Flex gap=\"3\" pl=\"4\" width=\"100%\">\n <Typo color=\"gray\">\n <FileIcon height={20} width={20} />\n </Typo>\n <Typo\n as=\"p\"\n color=\"gray\"\n style={{ width: '100%', textAlign: 'left' }}\n >\n {file.fileName}\n </Typo>\n </Flex>\n </IconButton>\n </Link>\n );\n })}\n </Flex>\n )}\n\n {content ? (\n <>\n <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n <Flex align=\"center\" direction=\"column\" gap=\"3\">\n <QuillHtmlOutputContainer\n className={className}\n html={safeContent}\n ref={ref}\n />\n {renderOpenBtns()}\n </Flex>\n </>\n ) : null}\n </Card>\n );\n}\n"],"mappings":"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","names":[]}
|