@loword/loword-design-system 0.7.0 → 0.7.1

package/dist/components/LDEditor/LDEditor.d.ts

@@ -16,7 +16,14 @@ export interface LDEditorProps {
     allowedImageHosts?: string[];
     /** 툴바 업로드·이미지 붙여넣기에서 허용할 MIME 타입. 지정하지 않으면 기본 허용 형식을 쓴다. */
     allowedExtensions?: TMimeType[];
+    /** 툴바 업로드·이미지 붙여넣기에서 허용할 최대 파일 크기(byte). 기본 5MB. */
+    maxSize?: number;
+    /** 툴바 업로드·이미지 붙여넣기에서 허용할 최대 해상도(px). 기본 16000x16000. */
+    maxImageSize?: {
+        width: number;
+        height: number;
+    };
 }
-declare const LDEditor: ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDEditor: ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default LDEditor;
 //# sourceMappingURL=LDEditor.d.ts.map

package/dist/components/LDEditor/LDEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAqH1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;CACjC;AAqVD,QAAA,MAAM,QAAQ,GAAI,4FAOf,aAAa,4CAgCf,CAAC;AAwmBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAqH1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD;AA+UD,QAAA,MAAM,QAAQ,GAAI,mHASf,aAAa,4CAsCf,CAAC;AAimBF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDEditor.js

@@ -80,17 +80,17 @@ const LDDivider = () => _jsx("div", { className: "mx-1 h-6 w-px bg-neutral200" }
 // 두어 줄이 바뀌어도 새 줄이 구분선으로 시작하지 않게 한다.
 const ToolbarGroup = ({ children }) => (_jsx("div", { className: "flex items-center gap-2", children: children }));
 // 검증을 통과하면 업로드한 URL을 반환하고, 실패하면 토스트에 띄울 사유를 담아 throw한다.
-const uploadImageFile = async (file, handleImageUpload, allowedExtensions = TOOLBAR_ALLOWED_EXTENSIONS) => {
+const uploadImageFile = async (file, { handleImageUpload, allowedExtensions = TOOLBAR_ALLOWED_EXTENSIONS, maxSize = TOOLBAR_MAX_SIZE, maxImageSize, }) => {
     if (!validAllowedExtensions(file, allowedExtensions)) {
         const allowedFiles = allowedExtensions
             .map((item) => FILE_EXTENSIONS[item].toUpperCase())
             .join(', ');
         throw new Error(`지원하지 않는 파일 형식입니다. ${allowedFiles} 파일만 업로드 가능합니다.`);
     }
-    if (!validFileSize(file, TOOLBAR_MAX_SIZE)) {
-        throw new Error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(TOOLBAR_MAX_SIZE)} 이하 파일을 선택해주세요.`);
+    if (!validFileSize(file, maxSize)) {
+        throw new Error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`);
     }
-    if (isImage(file.name) && !(await validImageSize(file))) {
+    if (isImage(file.name) && !(await validImageSize(file, maxImageSize))) {
         throw new Error('이미지 해상도가 너무 큽니다. 더 작은 이미지를 선택해주세요.');
     }
     let src;
@@ -259,7 +259,8 @@ const ImagePaste = Extension.create({
                 props: {
                     decorations: (state) => placeholderKey.getState(state),
                     handlePaste: (view, event, slice) => {
-                        const { handleImageUpload, allowedImageHosts, allowedExtensions } = getConfig();
+                        const config = getConfig();
+                        const { handleImageUpload, allowedImageHosts } = config;
                         if (!handleImageUpload)
                             return false;
                         const html = event.clipboardData?.getData('text/html') ?? '';
@@ -286,10 +287,10 @@ const ImagePaste = Extension.create({
                                 ? files[0]
                                 : undefined;
                             pasteAfterUpload(view, uploadAll(list.map((src) => isDataUrl(src)
-                                ? dataUrlToFile(src).then((file) => uploadImageFile(file, handleImageUpload, allowedExtensions))
+                                ? dataUrlToFile(src).then((file) => uploadImageFile(file, config))
                                 : (copiedImage
                                     ? Promise.resolve(copiedImage)
-                                    : urlToFile(src)).then((file) => uploadImageFile(file, handleImageUpload, allowedExtensions)))).then((srcs) => {
+                                    : urlToFile(src)).then((file) => uploadImageFile(file, config)))).then((srcs) => {
                                 const urls = new Map(list.map((src, index) => [src, srcs[index] ?? null]));
                                 return new Slice(replaceImages(slice.content, urls), slice.openStart, slice.openEnd);
                             }));
@@ -298,7 +299,7 @@ const ImagePaste = Extension.create({
                         // Office는 HTML과 함께 선택 영역을 찍은 PNG를 files에 넣는다. HTML이 있으면 파일은 무시한다.
                         if (html || !files.length)
                             return false;
-                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, handleImageUpload, allowedExtensions))).then((srcs) => {
+                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, config))).then((srcs) => {
                             const nodes = files.flatMap((file, index) => {
                                 const src = srcs[index];
                                 return src
@@ -320,26 +321,30 @@ const ImagePaste = Extension.create({
         ];
     },
 });
-const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, }) => {
+const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }) => {
     // 에디터는 첫 렌더의 extensions로 한 번만 만들어진다. 붙여넣기는 최신 props를 ref로 읽는다.
     const pasteConfigRef = useRef({
         handleImageUpload,
         allowedImageHosts,
         allowedExtensions,
+        maxSize,
+        maxImageSize,
     });
     useEffect(() => {
         pasteConfigRef.current = {
             handleImageUpload,
             allowedImageHosts,
             allowedExtensions,
+            maxSize,
+            maxImageSize,
         };
     });
     return (_jsxs(EditorBase.Root, { extensions: [
             ...createEditorExtensions(),
             ImagePaste.configure({ getConfig: () => pasteConfigRef.current }),
-        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions }), _jsx(EditorBase.Content, {})] }));
+        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions, maxSize: maxSize, maxImageSize: maxImageSize }), _jsx(EditorBase.Content, {})] }));
 };
-const EditorToolbar = ({ handleImageUpload, allowedExtensions, }) => {
+const EditorToolbar = (uploadConfig) => {
     const [linkUrl, setLinkUrl] = useState('');
     const [isMobile, setIsMobile] = useState(false);
     const { editor } = useEditorContext();
@@ -388,7 +393,7 @@ const EditorToolbar = ({ handleImageUpload, allowedExtensions, }) => {
             return;
         const file = files[0];
         try {
-            const src = await uploadImageFile(file, handleImageUpload, allowedExtensions);
+            const src = await uploadImageFile(file, uploadConfig);
             editor.commands.setImage({
                 src,
                 alt: file.name,

package/dist/utils/file.d.ts

@@ -11,7 +11,10 @@ export declare const isImage: (src: string) => boolean;
 export declare const isImageOrPdf: (src: string) => boolean;
 export declare const getFileIcon: (fileName: string) => ReactElement;
 export declare const getFileExtensionFromMimeType: (mimeType: TMimeType) => TFileExtension | string;
-export declare const validImageSize: (file: File) => Promise<boolean>;
+export declare const validImageSize: (file: File, maxImageSize?: {
+    width: number;
+    height: number;
+}) => Promise<boolean>;
 export declare const validFileSize: (file: File, maxSize: number) => boolean;
 export declare const validAllowedExtensions: (file: File, allowedExtensions: TMimeType[]) => boolean;
 export declare const getFileSizeUnit: (number: number) => string | number;

package/dist/utils/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/utils/file.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,YACW,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YACU,CAAC;AAgCnD,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,YAM9C,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,UAAU,SAAS,KAClB,cAAc,GAAG,MAEnB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,OAAO,CAoB1D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,YAExD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,MAAM,IAAI,EACV,mBAAmB,SAAS,EAAE,YAS/B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,oBAS7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAM5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAU,MAAM,IAAI,KAAG,OAAO,CAAC,KAAK,CAa5D,CAAC"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/utils/file.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,YACW,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YACU,CAAC;AAgCnD,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,YAM9C,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,UAAU,SAAS,KAClB,cAAc,GAAG,MAEnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,IAAI,EACV,eAAc;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAmB,KAC/D,OAAO,CAAC,OAAO,CAoBjB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,YAExD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,MAAM,IAAI,EACV,mBAAmB,SAAS,EAAE,YAS/B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,oBAS7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAM5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAU,MAAM,IAAI,KAAG,OAAO,CAAC,KAAK,CAa5D,CAAC"}

package/dist/utils/file.js

@@ -42,13 +42,13 @@ export const getFileIcon = (fileName) => {
 export const getFileExtensionFromMimeType = (mimeType) => {
     return FILE_EXTENSIONS[mimeType] || mimeType.split('/')[1] || 'unknown';
 };
-export const validImageSize = (file) => {
+export const validImageSize = (file, maxImageSize = MAX_IMAGE_SIZE) => {
     return new Promise((resolve) => {
         const image = new Image();
         const url = URL.createObjectURL(file);
         image.onload = () => {
-            const isValid = image.naturalWidth <= MAX_IMAGE_SIZE.width &&
-                image.naturalHeight <= MAX_IMAGE_SIZE.height;
+            const isValid = image.naturalWidth <= maxImageSize.width &&
+                image.naturalHeight <= maxImageSize.height;
             URL.revokeObjectURL(url);
             resolve(isValid);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",