@team-monolith/cds 1.130.0-alpha.3 → 1.130.0-alpha.4

package/dist/patterns/LexicalEditor/nodes/FileNode/FileComponent.js

@@ -1,126 +1,55 @@
-import { stdin_default as e } from "../../../../icons/custom/colored/filename-all-color.js";
-import { stdin_default as t } from "../../../../icons/custom/colored/filename-doc-color.js";
-import { stdin_default as n } from "../../../../icons/custom/colored/filename-hwp-color.js";
-import { stdin_default as r } from "../../../../icons/custom/colored/filename-img-color.js";
-import { stdin_default as i } from "../../../../icons/custom/colored/filename-mp4-color.js";
-import { stdin_default as a } from "../../../../icons/custom/colored/filename-pdf-color.js";
-import { stdin_default as o } from "../../../../icons/custom/colored/filename-ppt-color.js";
-import { stdin_default as s } from "../../../../icons/custom/colored/filename-xls-color.js";
-import { stdin_default as c } from "../../../../icons/custom/colored/filename-zip-color.js";
-import { OverflowTooltip as l } from "../../../../components/OverflowTooltip.js";
+import { OverflowTooltip as e } from "../../../../components/OverflowTooltip.js";
+import { LexicalCustomConfigContext as t } from "../../LexicalCustomConfigContext.js";
+import { FileDetailContainer as n, FileInfo as r, FileName as i, FileOptionalInfo as a, FileSize as o, IconContainer as s, getFileIcon as c } from "./fileStyles.js";
+import { CompactFileView as l } from "./CompactFileView.js";
 import { FileDownloadButton as u } from "./FileDownloadButton.js";
 import { $isFileNode as d } from "./FileNode.js";
-import { css as f } from "@emotion/react";
-import { useCallback as p, useEffect as m, useRef as h } from "react";
-import g from "@emotion/styled";
-import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
-import { $getSelection as b, $isNodeSelection as x, CLICK_COMMAND as S, COMMAND_PRIORITY_LOW as C, KEY_BACKSPACE_COMMAND as w, KEY_DELETE_COMMAND as T } from "lexical";
-import { mergeRegister as E } from "@lexical/utils";
-import { useLexicalComposerContext as D } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection as O } from "@lexical/react/useLexicalNodeSelection";
-import { useLexicalEditable as k } from "@lexical/react/useLexicalEditable";
+import { useCallback as f, useContext as p, useEffect as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
+import { $getSelection as y, $isNodeSelection as b, CLICK_COMMAND as x, COMMAND_PRIORITY_LOW as S, KEY_BACKSPACE_COMMAND as C, KEY_DELETE_COMMAND as w } from "lexical";
+import { mergeRegister as T } from "@lexical/utils";
+import { useLexicalComposerContext as E } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection as D } from "@lexical/react/useLexicalNodeSelection";
+import { useLexicalEditable as O } from "@lexical/react/useLexicalEditable";
 //#region src/cds/patterns/LexicalEditor/nodes/FileNode/FileComponent.tsx
-function A({ fileName: e, fileSize: t, nodeKey: n, fileUrl: r, fileUploadDate: i }) {
-	let [a] = D(), [o, s, c] = O(n), f = h(null), g = k(), A = p((e) => {
-		let t = b();
-		return o && x(t) && (e.preventDefault(), a.update(() => {
+function k({ fileName: k, fileSize: A, nodeKey: j, fileUrl: M, fileUploadDate: N }) {
+	let [P] = E(), [F, I, L] = D(j), R = h(null), z = O(), { compactEditorMode: B } = p(t), V = f((e) => {
+		let t = y();
+		return F && b(t) && (e.preventDefault(), P.update(() => {
 			t.getNodes().forEach((e) => {
 				d(e) && e.remove();
 			});
 		})), !1;
-	}, [a, o]);
-	return m(() => E(a.registerCommand(S, (e) => f.current && f.current.contains(e.target) ? (e.shiftKey || c(), s(!0), !0) : !1, C), a.registerCommand(T, A, C), a.registerCommand(w, A, C)), [
-		c,
-		a,
-		o,
-		n,
-		A,
-		s
-	]), /* @__PURE__ */ v(_, { children: g ? /* @__PURE__ */ v(N, {
-		isSelected: o,
-		ref: f,
-		children: /* @__PURE__ */ y(F, { children: [
-			/* @__PURE__ */ v(P, { children: M(e) }),
-			/* @__PURE__ */ v(j, { children: /* @__PURE__ */ v(l, { text: e }) }),
-			/* @__PURE__ */ v(L, { children: i }),
-			/* @__PURE__ */ y(I, { children: [(t / (1024 * 1024)).toFixed(1), " MB"] })
+	}, [P, F]);
+	return m(() => {
+		if (!B) return T(P.registerCommand(x, (e) => R.current && R.current.contains(e.target) ? (e.shiftKey || L(), I(!0), !0) : !1, S), P.registerCommand(w, V, S), P.registerCommand(C, V, S));
+	}, [
+		L,
+		P,
+		F,
+		j,
+		V,
+		I,
+		B
+	]), B && z ? /* @__PURE__ */ _(l, {
+		fileName: k,
+		fileSize: A,
+		fileUploadDate: N,
+		nodeKey: j
+	}) : /* @__PURE__ */ _(g, { children: z ? /* @__PURE__ */ _(n, {
+		isSelected: F,
+		ref: R,
+		children: /* @__PURE__ */ v(r, { children: [
+			/* @__PURE__ */ _(s, { children: c(k) }),
+			/* @__PURE__ */ _(i, { children: /* @__PURE__ */ _(e, { text: k }) }),
+			/* @__PURE__ */ _(a, { children: N }),
+			/* @__PURE__ */ v(o, { children: [(A / (1024 * 1024)).toFixed(1), " MB"] })
 		] })
-	}) : /* @__PURE__ */ v(u, {
-		fileName: e,
-		fileUrl: r,
-		fileSize: t
+	}) : /* @__PURE__ */ _(u, {
+		fileName: k,
+		fileUrl: M,
+		fileSize: A
 	}) });
 }
-var j = g.div`
-  flex: 1;
-  overflow: hidden;
-`;
-function M(l) {
-	switch (l.split(".").pop()?.toLowerCase()) {
-		case "zip":
-		case "rar":
-		case "7z": return /* @__PURE__ */ v(c, {});
-		case "ppt":
-		case "pptx": return /* @__PURE__ */ v(o, {});
-		case "xlsx":
-		case "xls": return /* @__PURE__ */ v(s, {});
-		case "hwp": return /* @__PURE__ */ v(n, {});
-		case "doc":
-		case "docx": return /* @__PURE__ */ v(t, {});
-		case "png":
-		case "jpg":
-		case "jpeg":
-		case "gif":
-		case "bmp": return /* @__PURE__ */ v(r, {});
-		case "mp4":
-		case "avi":
-		case "mov":
-		case "wmv": return /* @__PURE__ */ v(i, {});
-		case "pdf": return /* @__PURE__ */ v(a, {});
-		default: return /* @__PURE__ */ v(e, {});
-	}
-}
-var N = g.div(({ isSelected: e, theme: t }) => f`
-    display: flex;
-    flex-direction: column;
-    width: 620px;
-    min-width: 400px;
-    background: ${e ? t.color.background.neutralAltActive : t.color.background.neutralAlt};
-    border-radius: 10px;
-  `), P = g.div`
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-`, F = g.div(({ theme: e }) => f`
-    display: flex;
-    padding: 16px;
-    align-items: center;
-    height: 48px;
-    gap: 8px;
-    color: ${e.color.foreground.neutralBase};
-    font-family: ${e.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 20px; /* 125% */
-    border-radius: 10px;
-    cursor: pointer;
-  `), I = g.span(({ theme: e }) => f`
-    flex-shrink: 0;
-    margin-left: auto;
-    color: ${e.color.foreground.neutralBaseDisabled};
-    font-family: ${e.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px; /* 142.857% */
-  `), L = g.div(({ theme: e }) => f`
-    font-family: ${e.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    color: ${e.color.foreground.neutralBaseDisabled};
-    text-align: right;
-    flex-shrink: 0;
-  `);
 //#endregion
-export { A as FileComponent, I as FileSize, P as IconContainer, M as getFileIcon };
+export { k as FileComponent };

package/dist/patterns/LexicalEditor/nodes/FileNode/FileDownloadButton.js

@@ -1,7 +1,7 @@
 import { HOVER as e } from "../../../../utils/hover.js";
 import { OverflowTooltip as t } from "../../../../components/OverflowTooltip.js";
 import { CdsContext as n } from "../../../../CdsProvider.js";
-import { FileSize as r, IconContainer as i, getFileIcon as a } from "./FileComponent.js";
+import { FileSize as r, IconContainer as i, getFileIcon as a } from "./fileStyles.js";
 import { css as o, useTheme as s } from "@emotion/react";
 import { useContext as c } from "react";
 import l from "@emotion/styled";

package/dist/patterns/LexicalEditor/nodes/FileNode/fileStyles.d.ts

@@ -0,0 +1,27 @@
+export declare function getFileIcon(fileName: string): import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
+export declare const FileName: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileDetailContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    isSelected: boolean;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileInfo: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FileSize: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const FileOptionalInfo: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/patterns/LexicalEditor/nodes/FileNode/fileStyles.js

@@ -0,0 +1,85 @@
+import { stdin_default as e } from "../../../../icons/custom/colored/filename-all-color.js";
+import { stdin_default as t } from "../../../../icons/custom/colored/filename-doc-color.js";
+import { stdin_default as n } from "../../../../icons/custom/colored/filename-hwp-color.js";
+import { stdin_default as r } from "../../../../icons/custom/colored/filename-img-color.js";
+import { stdin_default as i } from "../../../../icons/custom/colored/filename-mp4-color.js";
+import { stdin_default as a } from "../../../../icons/custom/colored/filename-pdf-color.js";
+import { stdin_default as o } from "../../../../icons/custom/colored/filename-ppt-color.js";
+import { stdin_default as s } from "../../../../icons/custom/colored/filename-xls-color.js";
+import { stdin_default as c } from "../../../../icons/custom/colored/filename-zip-color.js";
+import { css as l } from "@emotion/react";
+import u from "@emotion/styled";
+import { jsx as d } from "@emotion/react/jsx-runtime";
+//#region src/cds/patterns/LexicalEditor/nodes/FileNode/fileStyles.tsx
+function f(l) {
+	switch (l.split(".").pop()?.toLowerCase()) {
+		case "zip":
+		case "rar":
+		case "7z": return /* @__PURE__ */ d(c, {});
+		case "ppt":
+		case "pptx": return /* @__PURE__ */ d(o, {});
+		case "xlsx":
+		case "xls": return /* @__PURE__ */ d(s, {});
+		case "hwp": return /* @__PURE__ */ d(n, {});
+		case "doc":
+		case "docx": return /* @__PURE__ */ d(t, {});
+		case "png":
+		case "jpg":
+		case "jpeg":
+		case "gif":
+		case "bmp": return /* @__PURE__ */ d(r, {});
+		case "mp4":
+		case "avi":
+		case "mov":
+		case "wmv": return /* @__PURE__ */ d(i, {});
+		case "pdf": return /* @__PURE__ */ d(a, {});
+		default: return /* @__PURE__ */ d(e, {});
+	}
+}
+var p = u.div`
+  flex: 1;
+  overflow: hidden;
+`, m = u.div(({ isSelected: e, theme: t }) => l`
+    display: flex;
+    flex-direction: column;
+    width: 620px;
+    min-width: 400px;
+    background: ${e ? t.color.background.neutralAltActive : t.color.background.neutralAlt};
+    border-radius: 10px;
+  `), h = u.div`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+`, g = u.div(({ theme: e }) => l`
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    height: 48px;
+    gap: 8px;
+    color: ${e.color.foreground.neutralBase};
+    font-family: ${e.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px; /* 125% */
+    border-radius: 10px;
+    cursor: pointer;
+  `), _ = u.span(({ theme: e }) => l`
+    flex-shrink: 0;
+    margin-left: auto;
+    color: ${e.color.foreground.neutralBaseDisabled};
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+  `), v = u.div(({ theme: e }) => l`
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    color: ${e.color.foreground.neutralBaseDisabled};
+    text-align: right;
+    flex-shrink: 0;
+  `);
+//#endregion
+export { m as FileDetailContainer, g as FileInfo, p as FileName, v as FileOptionalInfo, _ as FileSize, h as IconContainer, f as getFileIcon };

package/dist/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.d.ts

@@ -0,0 +1,6 @@
+import { NodeKey } from 'lexical';
+export declare function CompactImageView({ src, altText, nodeKey, }: {
+    src: string;
+    altText: string;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.js

@@ -0,0 +1,91 @@
+import { stdin_default as e } from "../../../../node_modules/.pnpm/remixicon@4.3.0/node_modules/remixicon/icons/System/delete-bin-line.js";
+import { css as t } from "@emotion/react";
+import { useState as n } from "react";
+import r from "@emotion/styled";
+import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
+import { useTranslation as o } from "react-i18next";
+import { $getNodeByKey as s } from "lexical";
+import { useLexicalComposerContext as c } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as l } from "@lexical/react/useLexicalEditable";
+//#region src/cds/patterns/LexicalEditor/nodes/ImageNode/CompactImageView.tsx
+function u({ src: t, altText: r, nodeKey: u }) {
+	let [g] = c(), _ = l(), [v, y] = n(!1), { t: b } = o();
+	return v ? /* @__PURE__ */ i(h, { children: r || b("이미지를 불러올 수 없습니다.") }) : _ ? /* @__PURE__ */ a(d, { children: [/* @__PURE__ */ i(p, {
+		src: t,
+		alt: r,
+		onError: () => y(!0)
+	}), /* @__PURE__ */ i(m, {
+		type: "button",
+		onClick: () => {
+			g.update(() => {
+				s(u)?.remove();
+			});
+		},
+		"aria-label": b("삭제", { context: "버튼, 게시글 본문 이미지" }),
+		children: /* @__PURE__ */ i(e, {})
+	})] }) : /* @__PURE__ */ i(f, {
+		type: "button",
+		onClick: () => window.open(t, "_blank", "noopener"),
+		title: b("클릭해서 원본 이미지 보기"),
+		children: /* @__PURE__ */ i(p, {
+			src: t,
+			alt: r,
+			onError: () => y(!0)
+		})
+	});
+}
+var d = r.div`
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+`, f = r.button`
+  display: inline-block;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+`, p = r.img`
+  display: block;
+  max-width: 100%;
+  max-height: 400px;
+  height: auto;
+  object-fit: contain;
+  border-radius: 10px;
+`, m = r.button(({ theme: e }) => t`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: ${e.color.background.neutralAlt};
+    color: ${e.color.foreground.neutralBase};
+    cursor: pointer;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  `), h = r.div(({ theme: e }) => t`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 80px;
+    padding: 16px;
+    border-radius: 10px;
+    background: ${e.color.background.neutralAlt};
+    color: ${e.color.foreground.neutralBaseDisabled};
+    font-family: ${e.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+  `);
+//#endregion
+export { u as CompactImageView };