@team-monolith/cds 1.86.2 → 1.87.1

package/dist/patterns/LexicalEditor/Plugins.js

@@ -34,6 +34,7 @@ import { SheetSelectPlugin } from "./plugins/SheetSelectPlugin";
 import { SheetInputPlugin } from "./plugins/SheetInputPlugin";
 import { SelfEvaluationPlugin } from "./plugins/SelfEvaluationPlugin";
 import { FilePlugin } from "./plugins/FilePlugin";
+import { DragDropPastePlugin } from "./plugins/DragDropPastePlugin";
 export function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const isEditable = useLexicalEditable();
@@ -44,7 +45,7 @@ export function Plugins(props) {
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { className: contentEditableClassName, isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
+    return (_jsxs(_Fragment, { children: [_jsx(DragDropPastePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { className: contentEditableClassName, isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.

package/dist/patterns/LexicalEditor/plugins/DragDropPastePlugin/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * 이미지/파일을 붙여넣기를 시도하면 이미지/파일을 업로드하고 이미지/파일 노드를 삽입합니다.
+ * https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/DragDropPastePlugin/index.ts
+ */
+export declare function DragDropPastePlugin(): null;

package/dist/patterns/LexicalEditor/plugins/DragDropPastePlugin/index.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { DRAG_DROP_PASTE } from "@lexical/rich-text";
+import { isMimeType, mediaFileReader } from "@lexical/utils";
+import { COMMAND_PRIORITY_LOW } from "lexical";
+import { useContext, useEffect } from "react";
+import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
+import { CdsContext } from "../../../../CdsProvider";
+import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
+import moment from "moment";
+const ACCEPTABLE_IMAGE_TYPES = [
+    "image/",
+    "image/heic",
+    "image/heif",
+    "image/gif",
+    "image/webp",
+];
+const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
+/**
+ * 이미지/파일을 붙여넣기를 시도하면 이미지/파일을 업로드하고 이미지/파일 노드를 삽입합니다.
+ * https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/DragDropPastePlugin/index.ts
+ */
+export function DragDropPastePlugin() {
+    var _a, _b;
+    const [editor] = useLexicalComposerContext();
+    const cdsContext = useContext(CdsContext);
+    const uploadByFile = (_a = cdsContext.lexical) === null || _a === void 0 ? void 0 : _a.uploadByFile;
+    const showFileError = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.showFileError;
+    // eslint-disable-next-line arrow-body-style
+    useEffect(() => {
+        return editor.registerCommand(DRAG_DROP_PASTE, (files) => {
+            (() => __awaiter(this, void 0, void 0, function* () {
+                if (!uploadByFile) {
+                    return false;
+                }
+                const filesResult = yield mediaFileReader(files, [""]);
+                for (const { file } of filesResult) {
+                    if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+                        const result = yield uploadByFile(file);
+                        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                            altText: file.name,
+                            src: result,
+                        });
+                    }
+                    else {
+                        if (file.size >= MAX_FILE_SIZE) {
+                            showFileError === null || showFileError === void 0 ? void 0 : showFileError("upload", "용량이 너무 큽니다. 1GB 이하의 파일을 선택해 주세요.");
+                        }
+                        else {
+                            const result = yield uploadByFile(file);
+                            editor.dispatchCommand(UPLOAD_FILE_COMMAND, {
+                                fileUrl: result,
+                                fileName: file.name,
+                                fileSize: file.size,
+                                fileUploadDate: moment().format("YYYY.MM.DD HH:mm:ss"),
+                            });
+                        }
+                    }
+                }
+            }))();
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, showFileError, uploadByFile]);
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.86.2",
+  "version": "1.87.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -17,14 +17,14 @@
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.17.1",
     "lodash": "^4.17.21",
+    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "remixicon": "^4.3.0",
     "typescript": "^4.9.5",
     "uid": "^2.0.2",
-    "usehooks-ts": "^2.9.1",
-    "moment": "^2.30.1"
+    "usehooks-ts": "^2.9.1"
   },
   "files": [
     "dist/**/*",