@tipp/ui-quill-editor 1.0.1

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { Editor } from './editor.cjs';
+import 'react';
+import 'react-quill';

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export { Editor } from './editor.mjs';
+import 'react';
+import 'react-quill';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Editor } from './editor.js';
+import 'react';
+import 'react-quill';

package/dist/index.js

@@ -0,0 +1,7 @@
+import {
+  Editor
+} from "./chunk-ICAKLBT5.js";
+export {
+  Editor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/index.mjs

@@ -0,0 +1,7 @@
+import {
+  Editor
+} from "./chunk-IIBNGFLN.mjs";
+export {
+  Editor
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@tipp/ui-quill-editor",
+  "version": "1.0.1",
+  "description": "tipp 디자인 시스템이 적용된  quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./*": "./*"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src/**",
+    "*.css",
+    "dist/**"
+  ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-quill": "^2.0.0",
+    "@tipp/ui": "1.2.21"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "10.4.19",
+    "eslint": "^8.57.0",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-custom-media": "10.0.2",
+    "postcss-discard-empty": "6.0.1",
+    "postcss-import": "16.0.0",
+    "postcss-nesting": "12.0.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "@tipp/eslint-config": "1.0.0",
+    "@tipp/typescript-config": "1.0.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:css",
+    "build:css": "postcss ./style/index.css -o dist/index.css",
+    "build:js": "tsup",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "pnpm run dev:js & pnpm run dev:css",
+    "dev:css": "pnpm run build:css --watch",
+    "dev:js": "pnpm run build:js --watch",
+    "lint": "eslint . --max-warnings 0",
+    "lint-staged": "lint-staged ./src",
+    "type-check": "tsc --noEmit"
+  }
+}

package/src/editor.tsx

@@ -0,0 +1,236 @@
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Link,
+  Separator,
+  TextField,
+  Typo,
+  Link2Icon,
+  toast,
+  FileIcon,
+} from '@tipp/ui';
+import type { ReactQuillProps } from 'react-quill';
+import ReactQuill from 'react-quill';
+
+export interface Attachment {
+  fileName: string;
+  url: string;
+}
+
+export interface TippEditorProps extends ReactQuillProps {
+  defaultTitle?: string;
+  defaultValue?: string;
+  defaultAttachedFiles?: Attachment[];
+  /** 저장하기 버튼 클릭 시 실행 */
+  onClickSave?: (values: {
+    title: string;
+    content: string;
+    files: Attachment[];
+  }) => void;
+  /** 파일 업로드 버튼 클릭 시 실행 */
+  uploadFile?: (
+    file: File,
+    destination: string
+  ) => Promise<Attachment | undefined>;
+  deleteFile?: (fileUrl: string) => Promise<void>;
+  /** 외부에서 Editor를 빈 상태로 초기화 시켜야 할 때 사용 */
+  clearEditor?: React.MutableRefObject<(() => void) | undefined>;
+  /** 초기화 버튼말고 다른 버튼 추가시 */
+  SecondaryButton?: React.ReactNode;
+  /** true인 경우 저장하기 버튼이 비활성 화 됨. 연타 방지 */
+  isLoading?: boolean;
+}
+
+export const Editor = forwardRef<ReactQuill, TippEditorProps>(
+  (props, ref): React.ReactNode => {
+    const {
+      defaultAttachedFiles,
+      defaultTitle,
+      defaultValue,
+      onClickSave,
+      uploadFile,
+      deleteFile,
+      isLoading,
+      SecondaryButton,
+      clearEditor,
+      ...quillProps
+    } = props;
+    const defaultRef = useRef<ReactQuill>(null);
+    const editorRef = ref || defaultRef;
+    const [attachedFiles, setAttachedFiles] = useState<Attachment[]>(
+      defaultAttachedFiles || []
+    );
+    const [fileDeleteLoading, setFileDeleteLoading] = useState(new Set());
+
+    const [title, setTitle] = useState(defaultTitle || '');
+    const [content, setContent] = useState(defaultValue || '');
+
+    const handleOnChangeContent = useCallback((value: string) => {
+      setContent(value);
+    }, []);
+
+    const handleButtonClick = useCallback(() => {
+      let input: HTMLInputElement | null = document.createElement('input');
+      input.type = 'file';
+      input.onchange = async (event) => {
+        const file = (event.target as HTMLInputElement).files?.[0];
+        if (!file) {
+          // console.log('DEBUG: no file');
+          toast.error('파일을 선택해주세요.');
+          return;
+        }
+
+        const fileName = file.name;
+        const attachment = await uploadFile?.(file, `hr-notes/${fileName}`);
+        if (attachment) {
+          setAttachedFiles((prev) => [...prev, attachment]);
+        }
+        input = null;
+      };
+      input.click();
+    }, [uploadFile]);
+
+    const handleDeleteFile = useCallback(
+      async (fileUrl: string) => {
+        try {
+          setFileDeleteLoading((p) => p.add(fileUrl));
+          await deleteFile?.(fileUrl);
+          setAttachedFiles((currentFiles) =>
+            currentFiles.filter((item) => item.url !== fileUrl)
+          );
+        } catch (err) {
+          toast.error('파일 삭제에 실패했습니다.');
+        } finally {
+          setFileDeleteLoading((p) => {
+            p.delete(fileUrl);
+            return p;
+          });
+        }
+      },
+      [deleteFile]
+    );
+
+    const renderAttachedFiles = useCallback(() => {
+      return (
+        <Box width="100%">
+          {attachedFiles.map((file) => {
+            return (
+              <>
+                <Separator size="4" />
+                <Flex
+                  align="center"
+                  justify="between"
+                  key={`${file.url}_${file.fileName}`}
+                  p="4"
+                  width="100%"
+                >
+                  <Link href={file.url} size="2">
+                    <Flex align="center" gap="3">
+                      <FileIcon />
+                      {file.fileName}
+                    </Flex>
+                  </Link>
+                  <Button
+                    loading={fileDeleteLoading.has(file.url)}
+                    onClick={() => {
+                      void handleDeleteFile(file.url);
+                    }}
+                    variant="ghost"
+                  >
+                    첨부 파일 삭제
+                  </Button>
+                </Flex>
+              </>
+            );
+          })}
+        </Box>
+      );
+    }, [attachedFiles, fileDeleteLoading, handleDeleteFile]);
+
+    const handleOnChangeTitle = useCallback<
+      React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+    >((e) => {
+      setTitle(e.target.value);
+    }, []);
+
+    const clearEditorState = useCallback(() => {
+      setContent('');
+      setAttachedFiles([]);
+      setTitle('');
+    }, []);
+
+    const handleSaveClick = useCallback(() => {
+      onClickSave?.({
+        title,
+        content,
+        files: attachedFiles,
+      });
+    }, [onClickSave, title, content, attachedFiles]);
+
+    if (props.clearEditor) {
+      props.clearEditor.current = clearEditorState;
+    }
+
+    return (
+      <div className="tipp-ql-wrapper">
+        {/* 제목 입력창 */}
+        <Grid
+          align="center"
+          columns="auto auto 1fr"
+          gap="2"
+          height="42px"
+          pl="2"
+          pr="3"
+          width="100%"
+        >
+          <Box pl="3" pr="3">
+            <Typo>제목</Typo>
+          </Box>
+          <Separator orientation="vertical" style={{ height: '100%' }} />
+          <TextField.Root
+            className="editor-title-text-field"
+            onChange={handleOnChangeTitle}
+            placeholder="제목을 입력해주세요"
+            value={title}
+          />
+        </Grid>
+        <ReactQuill
+          className="tipp-ql-editor write-mode"
+          onChange={handleOnChangeContent}
+          ref={editorRef}
+          theme="snow"
+          value={content}
+          {...quillProps}
+        />
+        {renderAttachedFiles()}
+        <Separator size="4" />
+        <Flex align="center" justify="between" p="2" pl="4" pr="4" width="100%">
+          <Button
+            color="gray"
+            onClick={handleButtonClick}
+            variant="transparent"
+          >
+            <Link2Icon height={20} width={20} />
+          </Button>
+
+          <Flex gap="2">
+            {clearEditor ? (
+              <Button color="gray" onClick={clearEditorState} variant="outline">
+                초기화
+              </Button>
+            ) : null}
+            {SecondaryButton ? SecondaryButton : null}
+            <Button disabled={isLoading} onClick={handleSaveClick}>
+              저장
+            </Button>
+          </Flex>
+        </Flex>
+      </div>
+    );
+  }
+);
+
+Editor.displayName = 'TIPP-Quill-Editor';

package/src/index.tsx

@@ -0,0 +1 @@
+export { Editor } from './editor';