@thanh01.pmt/presentation-kit 0.2.4 → 0.2.6

package/dist/react/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkVLAPHJOC_cjs = require('../chunk-VLAPHJOC.cjs');
-var chunkO5MCKVEA_cjs = require('../chunk-O5MCKVEA.cjs');
+var chunkRHZBBRQL_cjs = require('../chunk-RHZBBRQL.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -592,6 +592,7 @@ function SlideDesignOverlay({
   if (!isActive) return null;
   const [boxes, setBoxes] = react.useState(layout?.boxes ?? []);
   const [selectedId, setSelectedId] = react.useState(null);
+  const [editingId, setEditingId] = react.useState(null);
   const containerRef = react.useRef(null);
   react.useEffect(() => {
     setBoxes(layout?.boxes ?? []);
@@ -674,16 +675,21 @@ function SlideDesignOverlay({
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
   const addNewBox = (targetTag) => {
+    const isH1 = targetTag === "h1";
     const newId = `box-${Date.now().toString(36)}`;
     const newBox = {
       id: newId,
       target: targetTag,
-      pos: [100, 200, 500, 100],
-      fontSize: targetTag === "h1" ? "2.5rem" : "1.2rem"
+      content: isH1 ? "Ti\xEAu \u0111\u1EC1 b\xE0i gi\u1EA3ng" : "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n t\u1EA1i \u0111\xE2y...",
+      pos: [100, isH1 ? 160 : 300, isH1 ? 700 : 600, isH1 ? 90 : 120],
+      fontSize: isH1 ? "2.5rem" : "1.2rem",
+      color: isLight ? "#0f172a" : "#f8fafc",
+      textAlign: "left"
     };
     const updated = [...boxes, newBox];
     setBoxes(updated);
     setSelectedId(newId);
+    setEditingId(newId);
     onLayoutChange({ boxes: updated });
   };
   const updateSelectedBox = (partial) => {
@@ -772,7 +778,7 @@ function SlideDesignOverlay({
                 "select",
                 {
                   onChange: (e) => {
-                    const preset = chunkO5MCKVEA_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
+                    const preset = chunkRHZBBRQL_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
                     if (preset) {
                       const clonedBoxes = JSON.parse(JSON.stringify(preset.layout.boxes));
                       setBoxes(clonedBoxes);
@@ -792,7 +798,7 @@ function SlideDesignOverlay({
                   title: "\xC1p d\u1EE5ng m\u1EABu b\u1ED1 c\u1EE5c c\xF3 s\u1EB5n",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: subtextColor }, children: "M\u1EABu b\u1ED1 c\u1EE5c (Presets)..." }),
-                    chunkO5MCKVEA_cjs.SLIDE_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: isLight ? "#0f172a" : "#f8fafc" }, children: p.name }, p.id))
+                    chunkRHZBBRQL_cjs.SLIDE_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: isLight ? "#0f172a" : "#f8fafc" }, children: p.name }, p.id))
                   ]
                 }
               ),
@@ -825,12 +831,86 @@ function SlideDesignOverlay({
                 height: `${heightPercent}%`,
                 border: isSelected ? isLight ? "2px solid #0284c7" : "2px solid #38bdf8" : isLight ? "1.5px dashed rgba(2, 132, 199, 0.5)" : "1.5px dashed rgba(56, 189, 248, 0.5)",
                 backgroundColor: isSelected ? isLight ? "rgba(2, 132, 199, 0.08)" : "rgba(56, 189, 248, 0.08)" : isLight ? "rgba(2, 132, 199, 0.02)" : "rgba(56, 189, 248, 0.03)",
-                cursor: "move",
-                userSelect: "none",
+                cursor: editingId === box.id ? "default" : "move",
+                userSelect: editingId === box.id ? "text" : "none",
                 boxSizing: "border-box",
-                zIndex: isSelected ? 40 : 20
+                zIndex: isSelected ? 40 : 20,
+                display: "flex",
+                alignItems: "center",
+                overflow: "visible"
               },
               children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      padding: "4px 8px",
+                      boxSizing: "border-box",
+                      display: "flex",
+                      alignItems: "center",
+                      overflow: "hidden"
+                    },
+                    children: editingId === box.id ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        autoFocus: true,
+                        value: box.content ?? "",
+                        placeholder: box.target === "h1" ? "Nh\u1EADp ti\xEAu \u0111\u1EC1..." : "Nh\u1EADp n\u1ED9i dung...",
+                        onChange: (e) => updateSelectedBox({ content: e.target.value }),
+                        onBlur: () => setEditingId(null),
+                        onKeyDown: (e) => {
+                          if (e.key === "Escape") setEditingId(null);
+                        },
+                        onClick: (e) => e.stopPropagation(),
+                        onMouseDown: (e) => e.stopPropagation(),
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          background: "transparent",
+                          border: "none",
+                          outline: "none",
+                          resize: "none",
+                          fontSize: box.fontSize ?? (box.target === "h1" ? "2.2rem" : "1.1rem"),
+                          color: box.color ?? (isLight ? "#0f172a" : "#f8fafc"),
+                          textAlign: box.textAlign ?? "left",
+                          fontFamily: "Inter, sans-serif",
+                          fontWeight: box.target === "h1" ? 700 : 400,
+                          lineHeight: 1.25,
+                          padding: 0,
+                          margin: 0
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        onDoubleClick: (e) => {
+                          e.stopPropagation();
+                          setSelectedId(box.id);
+                          setEditingId(box.id);
+                        },
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          fontSize: box.fontSize ?? (box.target === "h1" ? "2.2rem" : "1.1rem"),
+                          color: box.color ?? (isLight ? "#0f172a" : "#f8fafc"),
+                          textAlign: box.textAlign ?? "left",
+                          fontFamily: "Inter, sans-serif",
+                          fontWeight: box.target === "h1" ? 700 : 400,
+                          lineHeight: 1.25,
+                          wordBreak: "break-word",
+                          userSelect: "none",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center"
+                        },
+                        title: "Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa ch\u1EEF",
+                        children: box.content ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: box.content }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.45, fontStyle: "italic", fontSize: "12px" }, children: box.target === "h1" ? "Ti\xEAu \u0111\u1EC1 (Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa)..." : "N\u1ED9i dung (Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa)..." })
+                      }
+                    )
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -883,7 +963,7 @@ function SlideDesignOverlay({
               pointerEvents: "auto",
               display: "flex",
               alignItems: "center",
-              gap: "12px",
+              gap: "10px",
               padding: "8px 16px",
               backgroundColor: toolbarBg,
               backdropFilter: "blur(12px)",
@@ -901,16 +981,54 @@ function SlideDesignOverlay({
                 "Khung: ",
                 selectedBox.target
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Ch\u1EEF:" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: selectedBox.content ?? "",
+                    placeholder: "Nh\u1EADp n\u1ED9i dung...",
+                    onChange: (e) => updateSelectedBox({ content: e.target.value }),
+                    style: {
+                      width: "130px",
+                      padding: "2px 8px",
+                      borderRadius: "4px",
+                      border: isLight ? "1px solid #cbd5e1" : "1px solid #334155",
+                      backgroundColor: isLight ? "#f8fafc" : "#0f172a",
+                      color: isLight ? "#0f172a" : "#f8fafc",
+                      fontSize: "11px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setEditingId(selectedBox.id),
+                  style: {
+                    ...btnStyle,
+                    backgroundColor: editingId === selectedBox.id ? "#0284c7" : isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
+                    color: editingId === selectedBox.id ? "#ffffff" : isLight ? "#0f172a" : "#e2e8f0",
+                    height: "24px",
+                    padding: "0 8px"
+                  },
+                  title: "S\u1EEDa ch\u1EEF tr\u1EF1c ti\u1EBFp trong khung",
+                  children: "S\u1EEDa ch\u1EEF"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "14px", backgroundColor: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.15)" } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Size:" }),
-                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: selectedBox.fontSize ?? "1.5rem", onChange: (e) => updateSelectedBox({ fontSize: e.target.value }), style: { width: "60px", padding: "2px 6px", borderRadius: "4px", border: isLight ? "1px solid #cbd5e1" : "1px solid #334155", backgroundColor: isLight ? "#f8fafc" : "#0f172a", color: isLight ? "#0f172a" : "#f8fafc", fontSize: "11px" } })
+                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: selectedBox.fontSize ?? "1.5rem", onChange: (e) => updateSelectedBox({ fontSize: e.target.value }), style: { width: "55px", padding: "2px 6px", borderRadius: "4px", border: isLight ? "1px solid #cbd5e1" : "1px solid #334155", backgroundColor: isLight ? "#f8fafc" : "#0f172a", color: isLight ? "#0f172a" : "#f8fafc", fontSize: "11px" } })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Color:" }),
-                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", value: selectedBox.color ?? (isLight ? "#0f172a" : "#38bdf8"), onChange: (e) => updateSelectedBox({ color: e.target.value }), style: { width: "24px", height: "24px", padding: "0", border: "none", borderRadius: "4px", cursor: "pointer", backgroundColor: "transparent" } })
+                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", value: selectedBox.color ?? (isLight ? "#0f172a" : "#38bdf8"), onChange: (e) => updateSelectedBox({ color: e.target.value }), style: { width: "22px", height: "22px", padding: "0", border: "none", borderRadius: "4px", cursor: "pointer", backgroundColor: "transparent" } })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => updateSelectedBox({ textAlign: align }), style: { ...btnStyle, backgroundColor: selectedBox.textAlign === align ? "#0284c7" : isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)", color: selectedBox.textAlign === align ? "#ffffff" : isLight ? "#0f172a" : "#e2e8f0", textTransform: "capitalize", fontSize: "11px", padding: "2px 8px", height: "24px" }, children: align }, align)) }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: removeSelectedBox, style: { ...btnStyle, backgroundColor: isLight ? "rgba(239, 68, 68, 0.1)" : "rgba(239, 68, 68, 0.2)", color: isLight ? "#dc2626" : "#f87171", border: isLight ? "1px solid rgba(239, 68, 68, 0.3)" : "1px solid rgba(239, 68, 68, 0.4)", fontWeight: 500, height: "24px" }, title: "X\xF3a \u0111\u1ECBnh v\u1ECB t\u1EF1 do c\u1EE7a khung n\xE0y", children: "X\xF3a v\u1ECB tr\xED" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => updateSelectedBox({ textAlign: align }), style: { ...btnStyle, backgroundColor: selectedBox.textAlign === align ? "#0284c7" : isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)", color: selectedBox.textAlign === align ? "#ffffff" : isLight ? "#0f172a" : "#e2e8f0", textTransform: "capitalize", fontSize: "11px", padding: "2px 6px", height: "22px" }, children: align }, align)) }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: removeSelectedBox, style: { ...btnStyle, backgroundColor: isLight ? "rgba(239, 68, 68, 0.1)" : "rgba(239, 68, 68, 0.2)", color: isLight ? "#dc2626" : "#f87171", border: isLight ? "1px solid rgba(239, 68, 68, 0.3)" : "1px solid rgba(239, 68, 68, 0.4)", fontWeight: 500, height: "22px", padding: "0 8px" }, title: "X\xF3a \u0111\u1ECBnh v\u1ECB t\u1EF1 do c\u1EE7a khung n\xE0y", children: "X\xF3a v\u1ECB tr\xED" })
             ]
           }
         )
@@ -1295,7 +1413,7 @@ function SlideViewer({
               onSave: (layout) => {
                 setLiveLayout(layout);
                 if (onSaveMarkdown) {
-                  const updated = chunkO5MCKVEA_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                  const updated = chunkRHZBBRQL_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
                   onSaveMarkdown(updated);
                 }
               },