video 블록 및 리펙터링

src/features/editor/utils/listHelpers.ts

@@ -0,0 +1,154 @@
+import type { CSSProperties } from "react";
+import type { ListBlockProps } from "@/features/editor/state/editorStore";
+
+export interface ListExportTokens {
+  Tag: "ul" | "ol";
+  items: string[];
+  listStyleParts: string[];
+}
+
+export const computeListExportTokens = (props: ListBlockProps): ListExportTokens => {
+  const ordered = Boolean(props.ordered);
+  const Tag: "ul" | "ol" = ordered ? "ol" : "ul";
+
+  const items: string[] = [];
+
+  if (Array.isArray(props.itemsTree) && props.itemsTree.length > 0) {
+    const walk = (nodes: { text?: string; children?: any[] }[]) => {
+      for (const node of nodes) {
+        if (typeof node.text === "string" && node.text.trim() !== "") {
+          items.push(node.text);
+        }
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          walk(node.children);
+        }
+      }
+    };
+    walk(props.itemsTree as any);
+  } else if (Array.isArray(props.items)) {
+    for (const raw of props.items) {
+      if (typeof raw === "string" && raw.trim() !== "") {
+        items.push(raw);
+      }
+    }
+  }
+
+  const alignToken = props.align;
+  const align = alignToken === "center" ? "center" : alignToken === "right" ? "right" : "left";
+
+  const listStyleParts: string[] = [`text-align:${align}`];
+  if (typeof props.backgroundColorCustom === "string" && props.backgroundColorCustom.trim() !== "") {
+    listStyleParts.push(`background-color:${props.backgroundColorCustom.trim()}`);
+  }
+
+  return {
+    Tag,
+    items,
+    listStyleParts,
+  };
+};
+
+export interface ListEditorTokens {
+  gapPx: number;
+  listStyle: CSSProperties;
+  bulletStyle: string;
+}
+
+export const computeListEditorTokens = (props: ListBlockProps): ListEditorTokens => {
+  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
+
+  const gapPx =
+    typeof props.gapYPx === "number"
+      ? props.gapYPx
+      : props.gapY === "sm"
+        ? 4
+        : props.gapY === "lg"
+          ? 16
+          : 8;
+
+  const listStyle: CSSProperties = {};
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    listStyle.fontSize = props.fontSizeCustom;
+  }
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    listStyle.lineHeight = props.lineHeightCustom;
+  }
+  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+    listStyle.color = props.textColorCustom;
+  }
+
+  const bulletStyle = bulletStyleRaw;
+
+  return {
+    gapPx,
+    listStyle,
+    bulletStyle,
+  };
+};
+
+export interface ListPublicTokens {
+  alignClass: string;
+  gapEm: number;
+  listStyle: CSSProperties;
+  bulletStyle: string;
+}
+
+const pxToEm = (px: number, base = 16) => `${px / base}em`;
+
+const convertPxStringToEm = (value?: string | null) => {
+  if (!value) return null;
+  const match = value.trim().match(/-?\d+(?:\.\d+)?/);
+  if (!match) return null;
+  const px = parseFloat(match[0]);
+  if (!Number.isFinite(px)) return null;
+  return pxToEm(px);
+};
+
+export const computeListPublicTokens = (props: ListBlockProps): ListPublicTokens => {
+  const alignClass =
+    props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left";
+
+  const bulletStyleRaw = props.bulletStyle ?? (props.ordered ? "decimal" : "disc");
+
+  const gapPx =
+    typeof props.gapYPx === "number"
+      ? props.gapYPx
+      : props.gapY === "sm"
+        ? 4
+        : props.gapY === "lg"
+          ? 16
+          : 8;
+
+  const gapEm = gapPx / 16;
+
+  const listStyle: CSSProperties = {};
+  if (props.fontSizeCustom && props.fontSizeCustom.trim() !== "") {
+    const fontSizeValue = props.fontSizeCustom.trim();
+    if (fontSizeValue.endsWith("px")) {
+      const fontSizeEm = convertPxStringToEm(fontSizeValue);
+      if (fontSizeEm) {
+        listStyle.fontSize = fontSizeEm;
+      }
+    } else {
+      listStyle.fontSize = fontSizeValue;
+    }
+  }
+  if (props.lineHeightCustom && props.lineHeightCustom.trim() !== "") {
+    listStyle.lineHeight = props.lineHeightCustom;
+  }
+  if (props.textColorCustom && props.textColorCustom.trim() !== "") {
+    listStyle.color = props.textColorCustom;
+  }
+  if (props.backgroundColorCustom && props.backgroundColorCustom.trim() !== "") {
+    listStyle.backgroundColor = props.backgroundColorCustom.trim();
+  }
+
+  const bulletStyle = bulletStyleRaw;
+
+  return {
+    alignClass,
+    gapEm,
+    listStyle,
+    bulletStyle,
+  };
+};