npm - @tipp/ui-quill-editor - Versions diffs - 4.0.10 → 4.0.12 - Mend

@tipp/ui-quill-editor 4.0.10 → 4.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/editor.cjs CHANGED Viewed

@@ -83,6 +83,24 @@ var import_react = require("react");
 var import_ui = require("@tipp/ui");
 var import_react_quill_new = __toESM(require("react-quill-new"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
+var toolbarOptions = [
+  ["bold", "italic", "underline", "strike"],
+  // toggled buttons
+  ["blockquote"],
+  ["link"],
+  [{ header: 1 }, { header: 2 }, { header: 3 }],
+  // custom button values
+  [{ list: "ordered" }, { list: "bullet" }, { list: "check" }]
+  // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+  // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+  // [{ direction: 'rtl' }], // text direction
+  // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  // [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+  // [{ font: [] }],
+  // [{ align: [] }],
+  // ['clean'], // remove formatting button
+];
 var Editor = (0, import_react.forwardRef)(
   (props, ref) => {
     const _a = props, {
@@ -100,7 +118,13 @@ var Editor = (0, import_react.forwardRef)(
       height,
       hideHeader,
       hideFileAttachment,
-      hideFooter
+      hideFooter,
+      title: controlledTitle,
+      onChangeTitle,
+      content: controlledContent,
+      onChangeContent,
+      attachedFiles: controlledAttachedFiles,
+      onChangeAttachedFiles
     } = _a, quillProps = __objRest(_a, [
       "defaultAttachedFiles",
       "defaultTitle",
@@ -116,19 +140,35 @@ var Editor = (0, import_react.forwardRef)(
       "height",
       "hideHeader",
       "hideFileAttachment",
-      "hideFooter"
+      "hideFooter",
+      "title",
+      "onChangeTitle",
+      "content",
+      "onChangeContent",
+      "attachedFiles",
+      "onChangeAttachedFiles"
     ]);
     const defaultRef = (0, import_react.useRef)(null);
     const editorRef = ref || defaultRef;
-    const [attachedFiles, setAttachedFiles] = (0, import_react.useState)(
-      defaultAttachedFiles || []
-    );
+    const isControlledTitle = controlledTitle !== void 0;
+    const isControlledContent = controlledContent !== void 0;
+    const isControlledAttachedFiles = controlledAttachedFiles !== void 0;
+    const [internalAttachedFiles, setInternalAttachedFiles] = (0, import_react.useState)(defaultAttachedFiles || []);
     const [fileDeleteLoading, setFileDeleteLoading] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-    const [title, setTitle] = (0, import_react.useState)(defaultTitle || "");
-    const [content, setContent] = (0, import_react.useState)(defaultValue || "");
-    const handleOnChangeContent = (0, import_react.useCallback)((value) => {
-      setContent(value);
-    }, []);
+    const [internalTitle, setInternalTitle] = (0, import_react.useState)(defaultTitle || "");
+    const [internalContent, setInternalContent] = (0, import_react.useState)(defaultValue || "");
+    const title = isControlledTitle ? controlledTitle : internalTitle;
+    const content = isControlledContent ? controlledContent : internalContent;
+    const attachedFiles = isControlledAttachedFiles ? controlledAttachedFiles : internalAttachedFiles;
+    const handleOnChangeContent = (0, import_react.useCallback)(
+      (value) => {
+        if (!isControlledContent) {
+          setInternalContent(value);
+        }
+        onChangeContent == null ? void 0 : onChangeContent(value);
+      },
+      [isControlledContent, onChangeContent]
+    );
     const handleButtonClick = (0, import_react.useCallback)(() => {
       let input = document.createElement("input");
       input.type = "file";
@@ -142,20 +182,31 @@ var Editor = (0, import_react.forwardRef)(
         const fileName = file.name;
         const attachment = yield uploadFile == null ? void 0 : uploadFile(file, `hr-notes/${fileName}`);
         if (attachment) {
-          setAttachedFiles((prev) => [...prev, attachment]);
+          const newFiles = [...attachedFiles, attachment];
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(newFiles);
         }
         input = null;
       });
       input.click();
-    }, [uploadFile]);
+    }, [
+      uploadFile,
+      attachedFiles,
+      isControlledAttachedFiles,
+      onChangeAttachedFiles
+    ]);
     const handleDeleteFile = (0, import_react.useCallback)(
       (fileUrl) => __async(null, null, function* () {
         try {
           setFileDeleteLoading((p) => p.add(fileUrl));
           yield deleteFile == null ? void 0 : deleteFile(fileUrl);
-          setAttachedFiles(
-            (currentFiles) => currentFiles.filter((item) => item.url !== fileUrl)
-          );
+          const newFiles = attachedFiles.filter((item) => item.url !== fileUrl);
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(newFiles);
         } catch (err) {
           import_ui.toast.error("\uD30C\uC77C \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
         } finally {
@@ -165,7 +216,12 @@ var Editor = (0, import_react.forwardRef)(
           });
         }
       }),
-      [deleteFile]
+      [
+        deleteFile,
+        attachedFiles,
+        isControlledAttachedFiles,
+        onChangeAttachedFiles
+      ]
     );
     const renderAttachedFiles = (0, import_react.useCallback)(() => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, { width: "100%", children: attachedFiles.map((file) => {
@@ -201,14 +257,40 @@ var Editor = (0, import_react.forwardRef)(
         ] });
       }) });
     }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
-    const handleOnChangeTitle = (0, import_react.useCallback)((e) => {
-      setTitle(e.target.value);
-    }, []);
+    const handleOnChangeTitle = (0, import_react.useCallback)(
+      (e) => {
+        const newTitle = e.target.value;
+        if (!isControlledTitle) {
+          setInternalTitle(newTitle);
+        }
+        onChangeTitle == null ? void 0 : onChangeTitle(newTitle);
+      },
+      [isControlledTitle, onChangeTitle]
+    );
     const clearEditorState = (0, import_react.useCallback)(() => {
-      setContent("");
-      setAttachedFiles([]);
-      setTitle("");
-    }, []);
+      const emptyTitle = "";
+      const emptyContent = "";
+      const emptyFiles = [];
+      if (!isControlledTitle) {
+        setInternalTitle(emptyTitle);
+      }
+      if (!isControlledContent) {
+        setInternalContent(emptyContent);
+      }
+      if (!isControlledAttachedFiles) {
+        setInternalAttachedFiles(emptyFiles);
+      }
+      onChangeTitle == null ? void 0 : onChangeTitle(emptyTitle);
+      onChangeContent == null ? void 0 : onChangeContent(emptyContent);
+      onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(emptyFiles);
+    }, [
+      isControlledTitle,
+      isControlledContent,
+      isControlledAttachedFiles,
+      onChangeTitle,
+      onChangeContent,
+      onChangeAttachedFiles
+    ]);
     const handleSaveClick = (0, import_react.useCallback)(() => {
       onClickSave == null ? void 0 : onClickSave({
         title,
@@ -266,7 +348,10 @@ var Editor = (0, import_react.forwardRef)(
                 onChange: handleOnChangeContent,
                 ref: editorRef,
                 theme: "snow",
-                value: content
+                value: content,
+                modules: {
+                  toolbar: toolbarOptions
+                }
               }, quillProps)
             ),
             renderAttachedFiles()

package/dist/editor.cjs.map CHANGED Viewed

	@@ -1 +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 ReactQuill from 'react-quill-new';\nimport type { Attachment } from './type';\n\nexport interface TippEditorProps extends ReactQuill.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 height?: string;\n /* 제목 입력창 숨김 /\n hideHeader?: boolean;\n /* 첨부 파일 버튼 숨김 /\n hideFileAttachment?: boolean;\n /* 저장 버튼 footer 숨김 /\n hideFooter?: 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 minHeight,\n maxHeight,\n height,\n hideHeader,\n hideFileAttachment,\n hideFooter,\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 const cssVariables = {\n '--max-height': maxHeight,\n '--min-height': minHeight,\n '--height': height \|\| '100%',\n } as React.CSSProperties;\n\n return (\n <div\n className=\"tipp-ql-wrapper\"\n style={{\n ...cssVariables,\n }}\n >\n <Grid height=\"100%\" rows={`${hideHeader ? '' : 'auto 1px'} 1fr`}>\n {/ 제목 입력창 */}\n {hideHeader ? null : (\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 <Separator orientation=\"horizontal\" size=\"4\" />\n </>\n )}\n\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 </Grid>\n\n {hideFooter ? null : (\n <>\n <Separator size=\"4\" />\n <Flex\n align=\"center\"\n justify=\"between\"\n p=\"2\"\n pl=\"4\"\n pr=\"4\"\n width=\"100%\"\n >\n {hideFileAttachment ? (\n <div />\n ) : (\n <Button\n color=\"gray\"\n onClick={handleButtonClick}\n variant=\"transparent\"\n >\n <Link2Icon height={20} width={20} />\n </Button>\n )}\n\n <Flex gap=\"2\">\n {clearEditor ? (\n <Button\n color=\"gray\"\n onClick={clearEditorState}\n variant=\"outline\"\n >\n 초기화\n </Button>\n ) : null}\n {SecondaryButton ? SecondaryButton : null}\n <Button disabled={isLoading} onClick={handleSaveClick}>\n 저장\n </Button>\n </Flex>\n </Flex>\n </>\n )}\n </div>\n );\n }\n);\n\nEditor.displayName = 'TIPP-Quill-Editor';\n"],"mappings":"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","names":["_a","ReactQuill"]}
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 ReactQuill from 'react-quill-new';\nimport type { Attachment } from './type';\n\nexport interface TippEditorProps extends ReactQuill.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 height?: string;\n /* 제목 입력창 숨김 /\n hideHeader?: boolean;\n /* 첨부 파일 버튼 숨김 /\n hideFileAttachment?: boolean;\n /* 저장 버튼 footer 숨김 /\n hideFooter?: boolean;\n title?: string;\n onChangeTitle?: (value: string) => void;\n content?: string;\n onChangeContent?: (value: string) => void;\n attachedFiles?: Attachment[];\n onChangeAttachedFiles?: (files: Attachment[]) => void;\n}\n\nconst toolbarOptions = [\n ['bold', 'italic', 'underline', 'strike'], // toggled buttons\n ['blockquote'],\n ['link'],\n [{ header: 1 }, { header: 2 }, { header: 3 }], // custom button values\n [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],\n // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript\n // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent\n // [{ direction: 'rtl' }], // text direction\n\n // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown\n // [{ header: [1, 2, 3, 4, 5, 6, false] }],\n\n // [{ color: [] }, { background: [] }], // dropdown with defaults from theme\n // [{ font: [] }],\n // [{ align: [] }],\n // ['clean'], // remove formatting button\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 height,\n hideHeader,\n hideFileAttachment,\n hideFooter,\n title: controlledTitle,\n onChangeTitle,\n content: controlledContent,\n onChangeContent,\n attachedFiles: controlledAttachedFiles,\n onChangeAttachedFiles,\n ...quillProps\n } = props;\n const defaultRef = useRef<ReactQuill>(null);\n const editorRef = ref \|\| defaultRef;\n // Controlled vs Uncontrolled 모드 구분\n const isControlledTitle = controlledTitle !== undefined;\n const isControlledContent = controlledContent !== undefined;\n const isControlledAttachedFiles = controlledAttachedFiles !== undefined;\n\n const [internalAttachedFiles, setInternalAttachedFiles] = useState<\n Attachment[]\n >(defaultAttachedFiles \|\| []);\n const [fileDeleteLoading, setFileDeleteLoading] = useState(new Set());\n\n const [internalTitle, setInternalTitle] = useState(defaultTitle \|\| '');\n const [internalContent, setInternalContent] = useState(defaultValue \|\| '');\n\n // 실제 사용할 값들 (controlled일 때는 props 값, uncontrolled일 때는 internal state 값)\n const title = isControlledTitle ? controlledTitle : internalTitle;\n const content = isControlledContent ? controlledContent : internalContent;\n const attachedFiles = isControlledAttachedFiles\n ? controlledAttachedFiles\n : internalAttachedFiles;\n\n const handleOnChangeContent = useCallback(\n (value: string) => {\n if (!isControlledContent) {\n setInternalContent(value);\n }\n onChangeContent?.(value);\n },\n [isControlledContent, onChangeContent]\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 const newFiles = [...attachedFiles, attachment];\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(newFiles);\n }\n onChangeAttachedFiles?.(newFiles);\n }\n input = null;\n };\n input.click();\n }, [\n uploadFile,\n attachedFiles,\n isControlledAttachedFiles,\n onChangeAttachedFiles,\n ]);\n\n const handleDeleteFile = useCallback(\n async (fileUrl: string) => {\n try {\n setFileDeleteLoading((p) => p.add(fileUrl));\n await deleteFile?.(fileUrl);\n const newFiles = attachedFiles.filter((item) => item.url !== fileUrl);\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(newFiles);\n }\n onChangeAttachedFiles?.(newFiles);\n } catch (err) {\n toast.error('파일 삭제에 실패했습니다.');\n } finally {\n setFileDeleteLoading((p) => {\n p.delete(fileUrl);\n return p;\n });\n }\n },\n [\n deleteFile,\n attachedFiles,\n isControlledAttachedFiles,\n onChangeAttachedFiles,\n ]\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 >(\n (e) => {\n const newTitle = e.target.value;\n if (!isControlledTitle) {\n setInternalTitle(newTitle);\n }\n onChangeTitle?.(newTitle);\n },\n [isControlledTitle, onChangeTitle]\n );\n\n const clearEditorState = useCallback(() => {\n const emptyTitle = '';\n const emptyContent = '';\n const emptyFiles: Attachment[] = [];\n\n if (!isControlledTitle) {\n setInternalTitle(emptyTitle);\n }\n if (!isControlledContent) {\n setInternalContent(emptyContent);\n }\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(emptyFiles);\n }\n\n // controlled 모드일 때도 부모에게 알림\n onChangeTitle?.(emptyTitle);\n onChangeContent?.(emptyContent);\n onChangeAttachedFiles?.(emptyFiles);\n }, [\n isControlledTitle,\n isControlledContent,\n isControlledAttachedFiles,\n onChangeTitle,\n onChangeContent,\n onChangeAttachedFiles,\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 const cssVariables = {\n '--max-height': maxHeight,\n '--min-height': minHeight,\n '--height': height \|\| '100%',\n } as React.CSSProperties;\n\n return (\n <div\n className=\"tipp-ql-wrapper\"\n style={{\n ...cssVariables,\n }}\n >\n <Grid height=\"100%\" rows={`${hideHeader ? '' : 'auto 1px'} 1fr`}>\n {/ 제목 입력창 */}\n {hideHeader ? null : (\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 <Separator orientation=\"horizontal\" size=\"4\" />\n </>\n )}\n\n <ReactQuill\n className=\"tipp-ql-editor write-mode\"\n onChange={handleOnChangeContent}\n ref={editorRef}\n theme=\"snow\"\n value={content}\n modules={{\n toolbar: toolbarOptions,\n }}\n {...quillProps}\n />\n {renderAttachedFiles()}\n </Grid>\n\n {hideFooter ? null : (\n <>\n <Separator size=\"4\" />\n <Flex\n align=\"center\"\n justify=\"between\"\n p=\"2\"\n pl=\"4\"\n pr=\"4\"\n width=\"100%\"\n >\n {hideFileAttachment ? (\n <div />\n ) : (\n <Button\n color=\"gray\"\n onClick={handleButtonClick}\n variant=\"transparent\"\n >\n <Link2Icon height={20} width={20} />\n </Button>\n )}\n\n <Flex gap=\"2\">\n {clearEditor ? (\n <Button\n color=\"gray\"\n onClick={clearEditorState}\n variant=\"outline\"\n >\n 초기화\n </Button>\n ) : null}\n {SecondaryButton ? SecondaryButton : null}\n <Button disabled={isLoading} onClick={handleSaveClick}>\n 저장\n </Button>\n </Flex>\n </Flex>\n </>\n )}\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 CHANGED Viewed

@@ -30,6 +30,12 @@ interface TippEditorProps extends ReactQuill.ReactQuillProps {
     hideFileAttachment?: boolean;
     /** 저장 버튼 footer 숨김 */
     hideFooter?: boolean;
+    title?: string;
+    onChangeTitle?: (value: string) => void;
+    content?: string;
+    onChangeContent?: (value: string) => void;
+    attachedFiles?: Attachment[];
+    onChangeAttachedFiles?: (files: Attachment[]) => void;
 }
 declare const Editor: React.ForwardRefExoticComponent<TippEditorProps & React.RefAttributes<ReactQuill>>;

package/dist/editor.d.ts CHANGED Viewed

@@ -30,6 +30,12 @@ interface TippEditorProps extends ReactQuill.ReactQuillProps {
     hideFileAttachment?: boolean;
     /** 저장 버튼 footer 숨김 */
     hideFooter?: boolean;
+    title?: string;
+    onChangeTitle?: (value: string) => void;
+    content?: string;
+    onChangeContent?: (value: string) => void;
+    attachedFiles?: Attachment[];
+    onChangeAttachedFiles?: (files: Attachment[]) => void;
 }
 declare const Editor: React.ForwardRefExoticComponent<TippEditorProps & React.RefAttributes<ReactQuill>>;

package/dist/editor.js CHANGED Viewed

@@ -21,6 +21,24 @@ import {
 } from "@tipp/ui";
 import ReactQuill from "react-quill-new";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var toolbarOptions = [
+  ["bold", "italic", "underline", "strike"],
+  // toggled buttons
+  ["blockquote"],
+  ["link"],
+  [{ header: 1 }, { header: 2 }, { header: 3 }],
+  // custom button values
+  [{ list: "ordered" }, { list: "bullet" }, { list: "check" }]
+  // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+  // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+  // [{ direction: 'rtl' }], // text direction
+  // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  // [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+  // [{ font: [] }],
+  // [{ align: [] }],
+  // ['clean'], // remove formatting button
+];
 var Editor = forwardRef(
   (props, ref) => {
     const _a = props, {
@@ -38,7 +56,13 @@ var Editor = forwardRef(
       height,
       hideHeader,
       hideFileAttachment,
-      hideFooter
+      hideFooter,
+      title: controlledTitle,
+      onChangeTitle,
+      content: controlledContent,
+      onChangeContent,
+      attachedFiles: controlledAttachedFiles,
+      onChangeAttachedFiles
     } = _a, quillProps = __objRest(_a, [
       "defaultAttachedFiles",
       "defaultTitle",
@@ -54,19 +78,35 @@ var Editor = forwardRef(
       "height",
       "hideHeader",
       "hideFileAttachment",
-      "hideFooter"
+      "hideFooter",
+      "title",
+      "onChangeTitle",
+      "content",
+      "onChangeContent",
+      "attachedFiles",
+      "onChangeAttachedFiles"
     ]);
     const defaultRef = useRef(null);
     const editorRef = ref || defaultRef;
-    const [attachedFiles, setAttachedFiles] = useState(
-      defaultAttachedFiles || []
-    );
+    const isControlledTitle = controlledTitle !== void 0;
+    const isControlledContent = controlledContent !== void 0;
+    const isControlledAttachedFiles = controlledAttachedFiles !== void 0;
+    const [internalAttachedFiles, setInternalAttachedFiles] = 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 [internalTitle, setInternalTitle] = useState(defaultTitle || "");
+    const [internalContent, setInternalContent] = useState(defaultValue || "");
+    const title = isControlledTitle ? controlledTitle : internalTitle;
+    const content = isControlledContent ? controlledContent : internalContent;
+    const attachedFiles = isControlledAttachedFiles ? controlledAttachedFiles : internalAttachedFiles;
+    const handleOnChangeContent = useCallback(
+      (value) => {
+        if (!isControlledContent) {
+          setInternalContent(value);
+        }
+        onChangeContent == null ? void 0 : onChangeContent(value);
+      },
+      [isControlledContent, onChangeContent]
+    );
     const handleButtonClick = useCallback(() => {
       let input = document.createElement("input");
       input.type = "file";
@@ -80,20 +120,31 @@ var Editor = forwardRef(
         const fileName = file.name;
         const attachment = yield uploadFile == null ? void 0 : uploadFile(file, `hr-notes/${fileName}`);
         if (attachment) {
-          setAttachedFiles((prev) => [...prev, attachment]);
+          const newFiles = [...attachedFiles, attachment];
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(newFiles);
         }
         input = null;
       });
       input.click();
-    }, [uploadFile]);
+    }, [
+      uploadFile,
+      attachedFiles,
+      isControlledAttachedFiles,
+      onChangeAttachedFiles
+    ]);
     const handleDeleteFile = useCallback(
       (fileUrl) => __async(null, null, function* () {
         try {
           setFileDeleteLoading((p) => p.add(fileUrl));
           yield deleteFile == null ? void 0 : deleteFile(fileUrl);
-          setAttachedFiles(
-            (currentFiles) => currentFiles.filter((item) => item.url !== fileUrl)
-          );
+          const newFiles = attachedFiles.filter((item) => item.url !== fileUrl);
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(newFiles);
         } catch (err) {
           toast.error("\uD30C\uC77C \uC0AD\uC81C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
         } finally {
@@ -103,7 +154,12 @@ var Editor = forwardRef(
           });
         }
       }),
-      [deleteFile]
+      [
+        deleteFile,
+        attachedFiles,
+        isControlledAttachedFiles,
+        onChangeAttachedFiles
+      ]
     );
     const renderAttachedFiles = useCallback(() => {
       return /* @__PURE__ */ jsx(Box, { width: "100%", children: attachedFiles.map((file) => {
@@ -139,14 +195,40 @@ var Editor = forwardRef(
         ] });
       }) });
     }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
-    const handleOnChangeTitle = useCallback((e) => {
-      setTitle(e.target.value);
-    }, []);
+    const handleOnChangeTitle = useCallback(
+      (e) => {
+        const newTitle = e.target.value;
+        if (!isControlledTitle) {
+          setInternalTitle(newTitle);
+        }
+        onChangeTitle == null ? void 0 : onChangeTitle(newTitle);
+      },
+      [isControlledTitle, onChangeTitle]
+    );
     const clearEditorState = useCallback(() => {
-      setContent("");
-      setAttachedFiles([]);
-      setTitle("");
-    }, []);
+      const emptyTitle = "";
+      const emptyContent = "";
+      const emptyFiles = [];
+      if (!isControlledTitle) {
+        setInternalTitle(emptyTitle);
+      }
+      if (!isControlledContent) {
+        setInternalContent(emptyContent);
+      }
+      if (!isControlledAttachedFiles) {
+        setInternalAttachedFiles(emptyFiles);
+      }
+      onChangeTitle == null ? void 0 : onChangeTitle(emptyTitle);
+      onChangeContent == null ? void 0 : onChangeContent(emptyContent);
+      onChangeAttachedFiles == null ? void 0 : onChangeAttachedFiles(emptyFiles);
+    }, [
+      isControlledTitle,
+      isControlledContent,
+      isControlledAttachedFiles,
+      onChangeTitle,
+      onChangeContent,
+      onChangeAttachedFiles
+    ]);
     const handleSaveClick = useCallback(() => {
       onClickSave == null ? void 0 : onClickSave({
         title,
@@ -204,7 +286,10 @@ var Editor = forwardRef(
                 onChange: handleOnChangeContent,
                 ref: editorRef,
                 theme: "snow",
-                value: content
+                value: content,
+                modules: {
+                  toolbar: toolbarOptions
+                }
               }, quillProps)
             ),
             renderAttachedFiles()

package/dist/editor.js.map CHANGED Viewed

	@@ -1 +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 ReactQuill from 'react-quill-new';\nimport type { Attachment } from './type';\n\nexport interface TippEditorProps extends ReactQuill.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 height?: string;\n /* 제목 입력창 숨김 /\n hideHeader?: boolean;\n /* 첨부 파일 버튼 숨김 /\n hideFileAttachment?: boolean;\n /* 저장 버튼 footer 숨김 /\n hideFooter?: 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 minHeight,\n maxHeight,\n height,\n hideHeader,\n hideFileAttachment,\n hideFooter,\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 const cssVariables = {\n '--max-height': maxHeight,\n '--min-height': minHeight,\n '--height': height \|\| '100%',\n } as React.CSSProperties;\n\n return (\n <div\n className=\"tipp-ql-wrapper\"\n style={{\n ...cssVariables,\n }}\n >\n <Grid height=\"100%\" rows={`${hideHeader ? '' : 'auto 1px'} 1fr`}>\n {/ 제목 입력창 */}\n {hideHeader ? null : (\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 <Separator orientation=\"horizontal\" size=\"4\" />\n </>\n )}\n\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 </Grid>\n\n {hideFooter ? null : (\n <>\n <Separator size=\"4\" />\n <Flex\n align=\"center\"\n justify=\"between\"\n p=\"2\"\n pl=\"4\"\n pr=\"4\"\n width=\"100%\"\n >\n {hideFileAttachment ? (\n <div />\n ) : (\n <Button\n color=\"gray\"\n onClick={handleButtonClick}\n variant=\"transparent\"\n >\n <Link2Icon height={20} width={20} />\n </Button>\n )}\n\n <Flex gap=\"2\">\n {clearEditor ? (\n <Button\n color=\"gray\"\n onClick={clearEditorState}\n variant=\"outline\"\n >\n 초기화\n </Button>\n ) : null}\n {SecondaryButton ? SecondaryButton : null}\n <Button disabled={isLoading} onClick={handleSaveClick}>\n 저장\n </Button>\n </Flex>\n </Flex>\n </>\n )}\n </div>\n );\n }\n);\n\nEditor.displayName = 'TIPP-Quill-Editor';\n"],"mappings":"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","names":["_a"]}
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 ReactQuill from 'react-quill-new';\nimport type { Attachment } from './type';\n\nexport interface TippEditorProps extends ReactQuill.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 height?: string;\n /* 제목 입력창 숨김 /\n hideHeader?: boolean;\n /* 첨부 파일 버튼 숨김 /\n hideFileAttachment?: boolean;\n /* 저장 버튼 footer 숨김 /\n hideFooter?: boolean;\n title?: string;\n onChangeTitle?: (value: string) => void;\n content?: string;\n onChangeContent?: (value: string) => void;\n attachedFiles?: Attachment[];\n onChangeAttachedFiles?: (files: Attachment[]) => void;\n}\n\nconst toolbarOptions = [\n ['bold', 'italic', 'underline', 'strike'], // toggled buttons\n ['blockquote'],\n ['link'],\n [{ header: 1 }, { header: 2 }, { header: 3 }], // custom button values\n [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],\n // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript\n // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent\n // [{ direction: 'rtl' }], // text direction\n\n // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown\n // [{ header: [1, 2, 3, 4, 5, 6, false] }],\n\n // [{ color: [] }, { background: [] }], // dropdown with defaults from theme\n // [{ font: [] }],\n // [{ align: [] }],\n // ['clean'], // remove formatting button\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 height,\n hideHeader,\n hideFileAttachment,\n hideFooter,\n title: controlledTitle,\n onChangeTitle,\n content: controlledContent,\n onChangeContent,\n attachedFiles: controlledAttachedFiles,\n onChangeAttachedFiles,\n ...quillProps\n } = props;\n const defaultRef = useRef<ReactQuill>(null);\n const editorRef = ref \|\| defaultRef;\n // Controlled vs Uncontrolled 모드 구분\n const isControlledTitle = controlledTitle !== undefined;\n const isControlledContent = controlledContent !== undefined;\n const isControlledAttachedFiles = controlledAttachedFiles !== undefined;\n\n const [internalAttachedFiles, setInternalAttachedFiles] = useState<\n Attachment[]\n >(defaultAttachedFiles \|\| []);\n const [fileDeleteLoading, setFileDeleteLoading] = useState(new Set());\n\n const [internalTitle, setInternalTitle] = useState(defaultTitle \|\| '');\n const [internalContent, setInternalContent] = useState(defaultValue \|\| '');\n\n // 실제 사용할 값들 (controlled일 때는 props 값, uncontrolled일 때는 internal state 값)\n const title = isControlledTitle ? controlledTitle : internalTitle;\n const content = isControlledContent ? controlledContent : internalContent;\n const attachedFiles = isControlledAttachedFiles\n ? controlledAttachedFiles\n : internalAttachedFiles;\n\n const handleOnChangeContent = useCallback(\n (value: string) => {\n if (!isControlledContent) {\n setInternalContent(value);\n }\n onChangeContent?.(value);\n },\n [isControlledContent, onChangeContent]\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 const newFiles = [...attachedFiles, attachment];\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(newFiles);\n }\n onChangeAttachedFiles?.(newFiles);\n }\n input = null;\n };\n input.click();\n }, [\n uploadFile,\n attachedFiles,\n isControlledAttachedFiles,\n onChangeAttachedFiles,\n ]);\n\n const handleDeleteFile = useCallback(\n async (fileUrl: string) => {\n try {\n setFileDeleteLoading((p) => p.add(fileUrl));\n await deleteFile?.(fileUrl);\n const newFiles = attachedFiles.filter((item) => item.url !== fileUrl);\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(newFiles);\n }\n onChangeAttachedFiles?.(newFiles);\n } catch (err) {\n toast.error('파일 삭제에 실패했습니다.');\n } finally {\n setFileDeleteLoading((p) => {\n p.delete(fileUrl);\n return p;\n });\n }\n },\n [\n deleteFile,\n attachedFiles,\n isControlledAttachedFiles,\n onChangeAttachedFiles,\n ]\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 >(\n (e) => {\n const newTitle = e.target.value;\n if (!isControlledTitle) {\n setInternalTitle(newTitle);\n }\n onChangeTitle?.(newTitle);\n },\n [isControlledTitle, onChangeTitle]\n );\n\n const clearEditorState = useCallback(() => {\n const emptyTitle = '';\n const emptyContent = '';\n const emptyFiles: Attachment[] = [];\n\n if (!isControlledTitle) {\n setInternalTitle(emptyTitle);\n }\n if (!isControlledContent) {\n setInternalContent(emptyContent);\n }\n if (!isControlledAttachedFiles) {\n setInternalAttachedFiles(emptyFiles);\n }\n\n // controlled 모드일 때도 부모에게 알림\n onChangeTitle?.(emptyTitle);\n onChangeContent?.(emptyContent);\n onChangeAttachedFiles?.(emptyFiles);\n }, [\n isControlledTitle,\n isControlledContent,\n isControlledAttachedFiles,\n onChangeTitle,\n onChangeContent,\n onChangeAttachedFiles,\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 const cssVariables = {\n '--max-height': maxHeight,\n '--min-height': minHeight,\n '--height': height \|\| '100%',\n } as React.CSSProperties;\n\n return (\n <div\n className=\"tipp-ql-wrapper\"\n style={{\n ...cssVariables,\n }}\n >\n <Grid height=\"100%\" rows={`${hideHeader ? '' : 'auto 1px'} 1fr`}>\n {/ 제목 입력창 */}\n {hideHeader ? null : (\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 <Separator orientation=\"horizontal\" size=\"4\" />\n </>\n )}\n\n <ReactQuill\n className=\"tipp-ql-editor write-mode\"\n onChange={handleOnChangeContent}\n ref={editorRef}\n theme=\"snow\"\n value={content}\n modules={{\n toolbar: toolbarOptions,\n }}\n {...quillProps}\n />\n {renderAttachedFiles()}\n </Grid>\n\n {hideFooter ? null : (\n <>\n <Separator size=\"4\" />\n <Flex\n align=\"center\"\n justify=\"between\"\n p=\"2\"\n pl=\"4\"\n pr=\"4\"\n width=\"100%\"\n >\n {hideFileAttachment ? (\n <div />\n ) : (\n <Button\n color=\"gray\"\n onClick={handleButtonClick}\n variant=\"transparent\"\n >\n <Link2Icon height={20} width={20} />\n </Button>\n )}\n\n <Flex gap=\"2\">\n {clearEditor ? (\n <Button\n color=\"gray\"\n onClick={clearEditorState}\n variant=\"outline\"\n >\n 초기화\n </Button>\n ) : null}\n {SecondaryButton ? SecondaryButton : null}\n <Button disabled={isLoading} onClick={handleSaveClick}>\n 저장\n </Button>\n </Flex>\n </Flex>\n </>\n )}\n </div>\n );\n }\n);\n\nEditor.displayName = 'TIPP-Quill-Editor';\n"],"mappings":"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","names":["_a"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui-quill-editor",
-  "version": "4.0.10",
+  "version": "4.0.12",
   "private": false,
   "description": "tipp 디자인 시스템이 적용된  quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
   "sideEffects": false,

package/src/editor.tsx CHANGED Viewed

@@ -46,8 +46,33 @@ export interface TippEditorProps extends ReactQuill.ReactQuillProps {
   hideFileAttachment?: boolean;
   /** 저장 버튼 footer 숨김 */
   hideFooter?: boolean;
+  title?: string;
+  onChangeTitle?: (value: string) => void;
+  content?: string;
+  onChangeContent?: (value: string) => void;
+  attachedFiles?: Attachment[];
+  onChangeAttachedFiles?: (files: Attachment[]) => void;
 }
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+  ['blockquote'],
+  ['link'],
+  [{ header: 1 }, { header: 2 }, { header: 3 }], // custom button values
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+  // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+  // [{ direction: 'rtl' }], // text direction
+  // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  // [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+  // [{ font: [] }],
+  // [{ align: [] }],
+  // ['clean'], // remove formatting button
+];
 export const Editor = forwardRef<ReactQuill, TippEditorProps>(
   (props, ref): React.ReactNode => {
     const {
@@ -66,21 +91,45 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
       hideHeader,
       hideFileAttachment,
       hideFooter,
+      title: controlledTitle,
+      onChangeTitle,
+      content: controlledContent,
+      onChangeContent,
+      attachedFiles: controlledAttachedFiles,
+      onChangeAttachedFiles,
       ...quillProps
     } = props;
     const defaultRef = useRef<ReactQuill>(null);
     const editorRef = ref || defaultRef;
-    const [attachedFiles, setAttachedFiles] = useState<Attachment[]>(
-      defaultAttachedFiles || []
-    );
+    // Controlled vs Uncontrolled 모드 구분
+    const isControlledTitle = controlledTitle !== undefined;
+    const isControlledContent = controlledContent !== undefined;
+    const isControlledAttachedFiles = controlledAttachedFiles !== undefined;
+    const [internalAttachedFiles, setInternalAttachedFiles] = useState<
+      Attachment[]
+    >(defaultAttachedFiles || []);
     const [fileDeleteLoading, setFileDeleteLoading] = useState(new Set());
-    const [title, setTitle] = useState(defaultTitle || '');
-    const [content, setContent] = useState(defaultValue || '');
+    const [internalTitle, setInternalTitle] = useState(defaultTitle || '');
+    const [internalContent, setInternalContent] = useState(defaultValue || '');
-    const handleOnChangeContent = useCallback((value: string) => {
-      setContent(value);
-    }, []);
+    // 실제 사용할 값들 (controlled일 때는 props 값, uncontrolled일 때는 internal state 값)
+    const title = isControlledTitle ? controlledTitle : internalTitle;
+    const content = isControlledContent ? controlledContent : internalContent;
+    const attachedFiles = isControlledAttachedFiles
+      ? controlledAttachedFiles
+      : internalAttachedFiles;
+    const handleOnChangeContent = useCallback(
+      (value: string) => {
+        if (!isControlledContent) {
+          setInternalContent(value);
+        }
+        onChangeContent?.(value);
+      },
+      [isControlledContent, onChangeContent]
+    );
     const handleButtonClick = useCallback(() => {
       let input: HTMLInputElement | null = document.createElement('input');
@@ -96,21 +145,32 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
         const fileName = file.name;
         const attachment = await uploadFile?.(file, `hr-notes/${fileName}`);
         if (attachment) {
-          setAttachedFiles((prev) => [...prev, attachment]);
+          const newFiles = [...attachedFiles, attachment];
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles?.(newFiles);
         }
         input = null;
       };
       input.click();
-    }, [uploadFile]);
+    }, [
+      uploadFile,
+      attachedFiles,
+      isControlledAttachedFiles,
+      onChangeAttachedFiles,
+    ]);
     const handleDeleteFile = useCallback(
       async (fileUrl: string) => {
         try {
           setFileDeleteLoading((p) => p.add(fileUrl));
           await deleteFile?.(fileUrl);
-          setAttachedFiles((currentFiles) =>
-            currentFiles.filter((item) => item.url !== fileUrl)
-          );
+          const newFiles = attachedFiles.filter((item) => item.url !== fileUrl);
+          if (!isControlledAttachedFiles) {
+            setInternalAttachedFiles(newFiles);
+          }
+          onChangeAttachedFiles?.(newFiles);
         } catch (err) {
           toast.error('파일 삭제에 실패했습니다.');
         } finally {
@@ -120,7 +180,12 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
           });
         }
       },
-      [deleteFile]
+      [
+        deleteFile,
+        attachedFiles,
+        isControlledAttachedFiles,
+        onChangeAttachedFiles,
+      ]
     );
     const renderAttachedFiles = useCallback(() => {
@@ -162,15 +227,44 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
     const handleOnChangeTitle = useCallback<
       React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
-    >((e) => {
-      setTitle(e.target.value);
-    }, []);
+    >(
+      (e) => {
+        const newTitle = e.target.value;
+        if (!isControlledTitle) {
+          setInternalTitle(newTitle);
+        }
+        onChangeTitle?.(newTitle);
+      },
+      [isControlledTitle, onChangeTitle]
+    );
     const clearEditorState = useCallback(() => {
-      setContent('');
-      setAttachedFiles([]);
-      setTitle('');
-    }, []);
+      const emptyTitle = '';
+      const emptyContent = '';
+      const emptyFiles: Attachment[] = [];
+      if (!isControlledTitle) {
+        setInternalTitle(emptyTitle);
+      }
+      if (!isControlledContent) {
+        setInternalContent(emptyContent);
+      }
+      if (!isControlledAttachedFiles) {
+        setInternalAttachedFiles(emptyFiles);
+      }
+      // controlled 모드일 때도 부모에게 알림
+      onChangeTitle?.(emptyTitle);
+      onChangeContent?.(emptyContent);
+      onChangeAttachedFiles?.(emptyFiles);
+    }, [
+      isControlledTitle,
+      isControlledContent,
+      isControlledAttachedFiles,
+      onChangeTitle,
+      onChangeContent,
+      onChangeAttachedFiles,
+    ]);
     const handleSaveClick = useCallback(() => {
       onClickSave?.({
@@ -231,6 +325,9 @@ export const Editor = forwardRef<ReactQuill, TippEditorProps>(
             ref={editorRef}
             theme="snow"
             value={content}
+            modules={{
+              toolbar: toolbarOptions,
+            }}
             {...quillProps}
           />
           {renderAttachedFiles()}