@tipp/ui-quill-editor 1.0.2 → 1.0.3

package/dist/chunk-4ULZXT3Z.js

@@ -0,0 +1,267 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/editor.tsx
+import { forwardRef, useCallback, useRef, useState } from "react";
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Link,
+  Separator,
+  TextField,
+  Typo,
+  Link2Icon,
+  toast,
+  FileIcon
+} from "@tipp/ui";
+import ReactQuill from "react-quill";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Editor = forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      defaultAttachedFiles,
+      defaultTitle,
+      defaultValue,
+      onClickSave,
+      uploadFile,
+      deleteFile,
+      isLoading,
+      SecondaryButton,
+      clearEditor,
+      minHeight,
+      maxHeight
+    } = _a, quillProps = __objRest(_a, [
+      "defaultAttachedFiles",
+      "defaultTitle",
+      "defaultValue",
+      "onClickSave",
+      "uploadFile",
+      "deleteFile",
+      "isLoading",
+      "SecondaryButton",
+      "clearEditor",
+      "minHeight",
+      "maxHeight"
+    ]);
+    const defaultRef = useRef(null);
+    const editorRef = ref || defaultRef;
+    const [attachedFiles, setAttachedFiles] = useState(
+      defaultAttachedFiles || []
+    );
+    const [fileDeleteLoading, setFileDeleteLoading] = useState(/* @__PURE__ */ new Set());
+    const [title, setTitle] = useState(defaultTitle || "");
+    const [content, setContent] = useState(defaultValue || "");
+    const handleOnChangeContent = useCallback((value) => {
+      setContent(value);
+    }, []);
+    const handleButtonClick = useCallback(() => {
+      let input = document.createElement("input");
+      input.type = "file";
+      input.onchange = (event) => __async(void 0, null, function* () {
+        var _a2;
+        const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
+        if (!file) {
+          toast.error("\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.");
+          return;
+        }
+        const fileName = file.name;
+        const attachment = yield uploadFile == null ? void 0 : uploadFile(file, `hr-notes/${fileName}`);
+        if (attachment) {
+          setAttachedFiles((prev) => [...prev, attachment]);
+        }
+        input = null;
+      });
+      input.click();
+    }, [uploadFile]);
+    const handleDeleteFile = useCallback(
+      (fileUrl) => __async(void 0, null, function* () {
+        try {
+          setFileDeleteLoading((p) => p.add(fileUrl));
+          yield deleteFile == null ? void 0 : deleteFile(fileUrl);
+          setAttachedFiles(
+            (currentFiles) => currentFiles.filter((item) => item.url !== fileUrl)
+          );
+        } catch (err) {
+          toast.error("\uD30C\uC77C \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+        } finally {
+          setFileDeleteLoading((p) => {
+            p.delete(fileUrl);
+            return p;
+          });
+        }
+      }),
+      [deleteFile]
+    );
+    const renderAttachedFiles = useCallback(() => {
+      return /* @__PURE__ */ jsx(Box, { width: "100%", children: attachedFiles.map((file) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, { size: "4" }),
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              align: "center",
+              justify: "between",
+              p: "4",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsx(Link, { href: file.url, size: "2", children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+                  /* @__PURE__ */ jsx(FileIcon, {}),
+                  file.fileName
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    loading: fileDeleteLoading.has(file.url),
+                    onClick: () => {
+                      void handleDeleteFile(file.url);
+                    },
+                    variant: "ghost",
+                    children: "\uCCA8\uBD80 \uD30C\uC77C \uC0AD\uC81C"
+                  }
+                )
+              ]
+            },
+            `${file.url}_${file.fileName}`
+          )
+        ] });
+      }) });
+    }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
+    const handleOnChangeTitle = useCallback((e) => {
+      setTitle(e.target.value);
+    }, []);
+    const clearEditorState = useCallback(() => {
+      setContent("");
+      setAttachedFiles([]);
+      setTitle("");
+    }, []);
+    const handleSaveClick = useCallback(() => {
+      onClickSave == null ? void 0 : onClickSave({
+        title,
+        content,
+        files: attachedFiles
+      });
+    }, [onClickSave, title, content, attachedFiles]);
+    if (props.clearEditor) {
+      props.clearEditor.current = clearEditorState;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tipp-ql-wrapper",
+        style: {
+          minHeight,
+          maxHeight
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              align: "center",
+              columns: "auto auto 1fr",
+              gap: "2",
+              height: "42px",
+              pl: "2",
+              pr: "3",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsx(Box, { pl: "3", pr: "3", children: /* @__PURE__ */ jsx(Typo, { children: "\uC81C\uBAA9" }) }),
+                /* @__PURE__ */ jsx(Separator, { orientation: "vertical", style: { height: "100%" } }),
+                /* @__PURE__ */ jsx(
+                  TextField.Root,
+                  {
+                    className: "editor-title-text-field",
+                    onChange: handleOnChangeTitle,
+                    placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
+                    value: title
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ReactQuill,
+            __spreadValues({
+              className: "tipp-ql-editor write-mode",
+              onChange: handleOnChangeContent,
+              ref: editorRef,
+              theme: "snow",
+              value: content
+            }, quillProps)
+          ),
+          renderAttachedFiles(),
+          /* @__PURE__ */ jsx(Separator, { size: "4" }),
+          /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "gray",
+                onClick: handleButtonClick,
+                variant: "transparent",
+                children: /* @__PURE__ */ jsx(Link2Icon, { height: 20, width: 20 })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+              clearEditor ? /* @__PURE__ */ jsx(Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
+              SecondaryButton ? SecondaryButton : null,
+              /* @__PURE__ */ jsx(Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Editor.displayName = "TIPP-Quill-Editor";
+
+export {
+  Editor
+};
+//# sourceMappingURL=chunk-4ULZXT3Z.js.map

package/dist/chunk-4ULZXT3Z.js.map

@@ -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"]}

package/dist/editor.cjs

@@ -94,7 +94,9 @@ var Editor = (0, import_react.forwardRef)(
       deleteFile,
       isLoading,
       SecondaryButton,
-      clearEditor
+      clearEditor,
+      minHeight,
+      maxHeight
     } = _a, quillProps = __objRest(_a, [
       "defaultAttachedFiles",
       "defaultTitle",
@@ -104,7 +106,9 @@ var Editor = (0, import_react.forwardRef)(
       "deleteFile",
       "isLoading",
       "SecondaryButton",
-      "clearEditor"
+      "clearEditor",
+      "minHeight",
+      "maxHeight"
     ]);
     const defaultRef = (0, import_react.useRef)(null);
     const editorRef = ref || defaultRef;
@@ -207,61 +211,71 @@ var Editor = (0, import_react.forwardRef)(
     if (props.clearEditor) {
       props.clearEditor.current = clearEditorState;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tipp-ql-wrapper", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_ui.Grid,
-        {
-          align: "center",
-          columns: "auto auto 1fr",
-          gap: "2",
-          height: "42px",
-          pl: "2",
-          pr: "3",
-          width: "100%",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, { pl: "3", pr: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Typo, { children: "\uC81C\uBAA9" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { orientation: "vertical", style: { height: "100%" } }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "tipp-ql-wrapper",
+        style: {
+          minHeight,
+          maxHeight
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_ui.Grid,
+            {
+              align: "center",
+              columns: "auto auto 1fr",
+              gap: "2",
+              height: "42px",
+              pl: "2",
+              pr: "3",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, { pl: "3", pr: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Typo, { children: "\uC81C\uBAA9" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { orientation: "vertical", style: { height: "100%" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ui.TextField.Root,
+                  {
+                    className: "editor-title-text-field",
+                    onChange: handleOnChangeTitle,
+                    placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
+                    value: title
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_quill.default,
+            __spreadValues({
+              className: "tipp-ql-editor write-mode",
+              onChange: handleOnChangeContent,
+              ref: editorRef,
+              theme: "snow",
+              value: content
+            }, quillProps)
+          ),
+          renderAttachedFiles(),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { size: "4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ui.TextField.Root,
+              import_ui.Button,
               {
-                className: "editor-title-text-field",
-                onChange: handleOnChangeTitle,
-                placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
-                value: title
+                color: "gray",
+                onClick: handleButtonClick,
+                variant: "transparent",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Link2Icon, { height: 20, width: 20 })
               }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_quill.default,
-        __spreadValues({
-          className: "tipp-ql-editor write-mode",
-          onChange: handleOnChangeContent,
-          ref: editorRef,
-          theme: "snow",
-          value: content
-        }, quillProps)
-      ),
-      renderAttachedFiles(),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { size: "4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ui.Button,
-          {
-            color: "gray",
-            onClick: handleButtonClick,
-            variant: "transparent",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Link2Icon, { height: 20, width: 20 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { gap: "2", children: [
-          clearEditor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
-          SecondaryButton ? SecondaryButton : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
-        ] })
-      ] })
-    ] });
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { gap: "2", children: [
+              clearEditor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
+              SecondaryButton ? SecondaryButton : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
+            ] })
+          ] })
+        ]
+      }
+    );
   }
 );
 Editor.displayName = "TIPP-Quill-Editor";

package/dist/editor.cjs.map

@@ -1 +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}\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      ...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 className=\"tipp-ql-wrapper\">\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","ReactQuill"]}
+{"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","ReactQuill"]}

package/dist/editor.d.cts

@@ -24,6 +24,8 @@ interface TippEditorProps extends ReactQuillProps {
     SecondaryButton?: React.ReactNode;
     /** true인 경우 저장하기 버튼이 비활성 화 됨. 연타 방지 */
     isLoading?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
 }
 declare const Editor: React.ForwardRefExoticComponent<TippEditorProps & React.RefAttributes<ReactQuill>>;
 

package/dist/editor.d.ts

@@ -24,6 +24,8 @@ interface TippEditorProps extends ReactQuillProps {
     SecondaryButton?: React.ReactNode;
     /** true인 경우 저장하기 버튼이 비활성 화 됨. 연타 방지 */
     isLoading?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
 }
 declare const Editor: React.ForwardRefExoticComponent<TippEditorProps & React.RefAttributes<ReactQuill>>;
 

package/dist/editor.js

@@ -1,6 +1,6 @@
 import {
   Editor
-} from "./chunk-ICAKLBT5.js";
+} from "./chunk-4ULZXT3Z.js";
 export {
   Editor
 };

package/dist/index.cjs

@@ -96,7 +96,9 @@ var Editor = (0, import_react.forwardRef)(
       deleteFile,
       isLoading,
       SecondaryButton,
-      clearEditor
+      clearEditor,
+      minHeight,
+      maxHeight
     } = _a, quillProps = __objRest(_a, [
       "defaultAttachedFiles",
       "defaultTitle",
@@ -106,7 +108,9 @@ var Editor = (0, import_react.forwardRef)(
       "deleteFile",
       "isLoading",
       "SecondaryButton",
-      "clearEditor"
+      "clearEditor",
+      "minHeight",
+      "maxHeight"
     ]);
     const defaultRef = (0, import_react.useRef)(null);
     const editorRef = ref || defaultRef;
@@ -209,61 +213,71 @@ var Editor = (0, import_react.forwardRef)(
     if (props.clearEditor) {
       props.clearEditor.current = clearEditorState;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tipp-ql-wrapper", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_ui.Grid,
-        {
-          align: "center",
-          columns: "auto auto 1fr",
-          gap: "2",
-          height: "42px",
-          pl: "2",
-          pr: "3",
-          width: "100%",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, { pl: "3", pr: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Typo, { children: "\uC81C\uBAA9" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { orientation: "vertical", style: { height: "100%" } }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: "tipp-ql-wrapper",
+        style: {
+          minHeight,
+          maxHeight
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_ui.Grid,
+            {
+              align: "center",
+              columns: "auto auto 1fr",
+              gap: "2",
+              height: "42px",
+              pl: "2",
+              pr: "3",
+              width: "100%",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, { pl: "3", pr: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Typo, { children: "\uC81C\uBAA9" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { orientation: "vertical", style: { height: "100%" } }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ui.TextField.Root,
+                  {
+                    className: "editor-title-text-field",
+                    onChange: handleOnChangeTitle,
+                    placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
+                    value: title
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_quill.default,
+            __spreadValues({
+              className: "tipp-ql-editor write-mode",
+              onChange: handleOnChangeContent,
+              ref: editorRef,
+              theme: "snow",
+              value: content
+            }, quillProps)
+          ),
+          renderAttachedFiles(),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { size: "4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_ui.TextField.Root,
+              import_ui.Button,
               {
-                className: "editor-title-text-field",
-                onChange: handleOnChangeTitle,
-                placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694",
-                value: title
+                color: "gray",
+                onClick: handleButtonClick,
+                variant: "transparent",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Link2Icon, { height: 20, width: 20 })
               }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react_quill.default,
-        __spreadValues({
-          className: "tipp-ql-editor write-mode",
-          onChange: handleOnChangeContent,
-          ref: editorRef,
-          theme: "snow",
-          value: content
-        }, quillProps)
-      ),
-      renderAttachedFiles(),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Separator, { size: "4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { align: "center", justify: "between", p: "2", pl: "4", pr: "4", width: "100%", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_ui.Button,
-          {
-            color: "gray",
-            onClick: handleButtonClick,
-            variant: "transparent",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Link2Icon, { height: 20, width: 20 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { gap: "2", children: [
-          clearEditor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
-          SecondaryButton ? SecondaryButton : null,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
-        ] })
-      ] })
-    ] });
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Flex, { gap: "2", children: [
+              clearEditor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { color: "gray", onClick: clearEditorState, variant: "outline", children: "\uCD08\uAE30\uD654" }) : null,
+              SecondaryButton ? SecondaryButton : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { disabled: isLoading, onClick: handleSaveClick, children: "\uC800\uC7A5" })
+            ] })
+          ] })
+        ]
+      }
+    );
   }
 );
 Editor.displayName = "TIPP-Quill-Editor";

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx","../src/editor.tsx"],"sourcesContent":["export { Editor } from './editor';\n","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}\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      ...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 className=\"tipp-ql-wrapper\">\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","ReactQuill"]}
+{"version":3,"sources":["../src/index.tsx","../src/editor.tsx"],"sourcesContent":["export { Editor } from './editor';\n","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","ReactQuill"]}

package/dist/index.css

@@ -925,8 +925,6 @@
     background: var(--color-panel);
     border: 1px solid var(--gray-7);
     --text-field-focus-color: transparent !important;
-    display: grid;
-    grid-template-rows: auto 1fr;
 }
 .tipp-ql-wrapper .editor-title-text-field {
     box-shadow: none;

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   Editor
-} from "./chunk-ICAKLBT5.js";
+} from "./chunk-4ULZXT3Z.js";
 export {
   Editor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui-quill-editor",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "tipp 디자인 시스템이 적용된  quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
   "license": "ISC",
   "author": "",
@@ -46,8 +46,8 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/typescript-config": "1.0.0",
-    "@tipp/eslint-config": "1.0.0"
+    "@tipp/eslint-config": "1.0.0",
+    "@tipp/typescript-config": "1.0.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css",

package/src/editor.tsx

@@ -42,6 +42,8 @@ export interface TippEditorProps extends ReactQuillProps {
   SecondaryButton?: React.ReactNode;
   /** true인 경우 저장하기 버튼이 비활성 화 됨. 연타 방지 */
   isLoading?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
 }
 
 export const Editor = forwardRef<ReactQuill, TippEditorProps>(
@@ -56,6 +58,8 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
       isLoading,
       SecondaryButton,
       clearEditor,
+      minHeight,
+      maxHeight,
       ...quillProps
     } = props;
     const defaultRef = useRef<ReactQuill>(null);
@@ -175,7 +179,13 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
     }
 
     return (
-      <div className="tipp-ql-wrapper">
+      <div
+        className="tipp-ql-wrapper"
+        style={{
+          minHeight,
+          maxHeight,
+        }}
+      >
         {/* 제목 입력창 */}
         <Grid
           align="center"