@thanh01.pmt/presentation-kit 0.2.7 → 0.2.9

package/dist/react/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkVLAPHJOC_cjs = require('../chunk-VLAPHJOC.cjs');
-var chunkRHZBBRQL_cjs = require('../chunk-RHZBBRQL.cjs');
+var chunkTGI6YSZP_cjs = require('../chunk-TGI6YSZP.cjs');
+var chunkTV6NFIIV_cjs = require('../chunk-TV6NFIIV.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -21,7 +21,7 @@ function useSlideState(options) {
   const result = react.useMemo(() => {
     if (!markdown || !markdown.trim()) return null;
     renderCountRef.current++;
-    return chunkVLAPHJOC_cjs.renderSlide(markdown, {
+    return chunkTGI6YSZP_cjs.renderSlide(markdown, {
       theme,
       enableMermaid: true,
       enableClicks,
@@ -585,15 +585,28 @@ function SlideDesignOverlay({
   layout,
   onLayoutChange,
   onSave,
+  onDeleteBox,
+  onAddBox,
   onClose,
   isActive,
-  theme = "dark"
+  theme = "dark",
+  selectedBoxId,
+  onSelectBoxId
 }) {
   if (!isActive) return null;
   const [boxes, setBoxes] = react.useState(layout?.boxes ?? []);
-  const [selectedId, setSelectedId] = react.useState(null);
+  const [selectedId, setSelectedIdState] = react.useState(selectedBoxId ?? null);
   const [editingId, setEditingId] = react.useState(null);
   const containerRef = react.useRef(null);
+  const setSelectedId = react.useCallback((id) => {
+    setSelectedIdState(id);
+    if (onSelectBoxId) onSelectBoxId(id);
+  }, [onSelectBoxId]);
+  react.useEffect(() => {
+    if (selectedBoxId !== void 0) {
+      setSelectedIdState(selectedBoxId);
+    }
+  }, [selectedBoxId]);
   react.useEffect(() => {
     setBoxes(layout?.boxes ?? []);
   }, [layout, slideIndex]);
@@ -629,30 +642,38 @@ function SlideDesignOverlay({
             newY = Math.round(Math.max(0, Math.min(720 - origH, origY + dy)));
             break;
           case "se":
-            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
-            newH = Math.round(Math.max(40, Math.min(720 - origY, origH + dy)));
+            newW = Math.round(Math.max(60, Math.min(1280 - origX, origW + dx)));
+            newH = Math.round(Math.max(30, Math.min(720 - origY, origH + dy)));
             break;
           case "e":
-            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
+            newW = Math.round(Math.max(60, Math.min(1280 - origX, origW + dx)));
             break;
           case "s":
-            newH = Math.round(Math.max(40, Math.min(720 - origY, origH + dy)));
+            newH = Math.round(Math.max(30, Math.min(720 - origY, origH + dy)));
             break;
           case "sw":
-            newW = Math.round(Math.max(100, origW - dx));
-            newX = Math.round(Math.min(origX + origW - 100, origX + dx));
-            newH = Math.round(Math.max(40, origH + dy));
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
+            newH = Math.round(Math.max(30, origH + dy));
             break;
           case "ne":
-            newW = Math.round(Math.max(100, origW + dx));
-            newH = Math.round(Math.max(40, origH - dy));
-            newY = Math.round(Math.min(origY + origH - 40, origY + dy));
+            newW = Math.round(Math.max(60, origW + dx));
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
             break;
           case "nw":
-            newW = Math.round(Math.max(100, origW - dx));
-            newX = Math.round(Math.min(origX + origW - 100, origX + dx));
-            newH = Math.round(Math.max(40, origH - dy));
-            newY = Math.round(Math.min(origY + origH - 40, origY + dy));
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
+            break;
+          case "n":
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
+            break;
+          case "w":
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
             break;
         }
         return { ...b, pos: [newX, newY, newW, newH] };
@@ -662,8 +683,11 @@ function SlideDesignOverlay({
     });
   }, [dragging, onLayoutChange]);
   const handleMouseUp = react.useCallback(() => {
+    if (dragging && onSave) {
+      onSave({ boxes });
+    }
     setDragging(null);
-  }, []);
+  }, [dragging, boxes, onSave]);
   react.useEffect(() => {
     if (dragging) {
       window.addEventListener("mousemove", handleMouseMove);
@@ -674,6 +698,33 @@ function SlideDesignOverlay({
       };
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
+  const removeSelectedBox = react.useCallback(() => {
+    if (!selectedId) return;
+    const boxToRemove = boxes.find((b) => b.id === selectedId);
+    setBoxes((prev) => {
+      const updated = prev.filter((b) => b.id !== selectedId);
+      onLayoutChange({ boxes: updated });
+      if (onSave) onSave({ boxes: updated });
+      return updated;
+    });
+    setSelectedId(null);
+    if (boxToRemove && onDeleteBox) {
+      onDeleteBox(boxToRemove);
+    }
+  }, [selectedId, boxes, onLayoutChange, onSave, onDeleteBox, setSelectedId]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (editingId) return;
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
+        e.preventDefault();
+        e.stopPropagation();
+        removeSelectedBox();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedId, editingId, removeSelectedBox]);
   const addNewBox = (targetTag) => {
     const isH1 = targetTag === "h1";
     const newId = `box-${Date.now().toString(36)}`;
@@ -691,6 +742,9 @@ function SlideDesignOverlay({
     setSelectedId(newId);
     setEditingId(newId);
     onLayoutChange({ boxes: updated });
+    if (onAddBox) {
+      onAddBox(newBox);
+    }
   };
   const updateSelectedBox = (partial) => {
     if (!selectedId) return;
@@ -700,15 +754,6 @@ function SlideDesignOverlay({
       return updated;
     });
   };
-  const removeSelectedBox = () => {
-    if (!selectedId) return;
-    setBoxes((prev) => {
-      const updated = prev.filter((b) => b.id !== selectedId);
-      onLayoutChange({ boxes: updated });
-      return updated;
-    });
-    setSelectedId(null);
-  };
   const isLight = theme === "light";
   const isNavy = theme === "navy";
   const toolbarBg = isLight ? "rgba(255, 255, 255, 0.96)" : isNavy ? "rgba(11, 19, 43, 0.95)" : "rgba(24, 25, 32, 0.95)";
@@ -778,7 +823,7 @@ function SlideDesignOverlay({
                 "select",
                 {
                   onChange: (e) => {
-                    const preset = chunkRHZBBRQL_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
+                    const preset = chunkTV6NFIIV_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
                     if (preset) {
                       const clonedBoxes = JSON.parse(JSON.stringify(preset.layout.boxes));
                       setBoxes(clonedBoxes);
@@ -798,7 +843,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)..." }),
-                    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))
+                    chunkTV6NFIIV_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))
                   ]
                 }
               ),
@@ -940,12 +985,14 @@ function SlideDesignOverlay({
                   }
                 ),
                 isSelected && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("se", isLight), onMouseDown: (e) => handleMouseDown(e, box, "se") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("e", isLight), onMouseDown: (e) => handleMouseDown(e, box, "e") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw") })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw"), title: "K\xE9o g\xF3c tr\xEAn-tr\xE1i" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("n", isLight), onMouseDown: (e) => handleMouseDown(e, box, "n"), title: "K\xE9o c\u1EA1nh tr\xEAn" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne"), title: "K\xE9o g\xF3c tr\xEAn-ph\u1EA3i" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("e", isLight), onMouseDown: (e) => handleMouseDown(e, box, "e"), title: "K\xE9o c\u1EA1nh ph\u1EA3i (Ch\u1EC9nh \u0111\u1ED9 r\u1ED9ng / wrap text)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("se", isLight), onMouseDown: (e) => handleMouseDown(e, box, "se"), title: "K\xE9o g\xF3c d\u01B0\u1EDBi-ph\u1EA3i (Ch\u1EC9nh k\xEDch th\u01B0\u1EDBc / wrap text)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s"), title: "K\xE9o c\u1EA1nh d\u01B0\u1EDBi" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw"), title: "K\xE9o g\xF3c d\u01B0\u1EDBi-tr\xE1i" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("w", isLight), onMouseDown: (e) => handleMouseDown(e, box, "w"), title: "K\xE9o c\u1EA1nh tr\xE1i (Ch\u1EC9nh \u0111\u1ED9 r\u1ED9ng / wrap text)" })
                 ] })
               ]
             },
@@ -1029,7 +1076,7 @@ function SlideDesignOverlay({
                 /* @__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 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" })
+              /* @__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 ph\u1EA7n t\u1EED (ho\u1EB7c nh\u1EA5n Delete tr\xEAn b\xE0n ph\xEDm)", children: "X\xF3a ph\u1EA7n t\u1EED (Del)" })
             ]
           }
         )
@@ -1062,6 +1109,10 @@ function handleStyle(pos, isLight = false) {
       return { ...base, right: `-${size / 2}px`, top: `-${size / 2}px`, cursor: "ne-resize" };
     case "nw":
       return { ...base, left: `-${size / 2}px`, top: `-${size / 2}px`, cursor: "nw-resize" };
+    case "n":
+      return { ...base, top: `-${size / 2}px`, left: `calc(50% - ${size / 2}px)`, cursor: "n-resize" };
+    case "w":
+      return { ...base, left: `-${size / 2}px`, top: `calc(50% - ${size / 2}px)`, cursor: "w-resize" };
   }
 }
 var DEFAULT_THEME_OPTIONS = [
@@ -1197,7 +1248,7 @@ function SlideViewer({
       containers.forEach((container) => {
         if (container instanceof HTMLElement) {
           const themeName2 = typeof theme === "string" ? theme : "dark";
-          chunkVLAPHJOC_cjs.renderMermaidDiagrams(container, themeName2).catch(() => {
+          chunkTGI6YSZP_cjs.renderMermaidDiagrams(container, themeName2).catch(() => {
           });
         }
       });
@@ -1414,7 +1465,7 @@ function SlideViewer({
               onSave: (layout) => {
                 setLiveLayout(layout);
                 if (onSaveMarkdown) {
-                  const updated = chunkRHZBBRQL_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                  const updated = chunkTV6NFIIV_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
                   onSaveMarkdown(updated);
                 }
               },
@@ -1450,35 +1501,35 @@ function SlideViewer({
 
 Object.defineProperty(exports, "defineTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.defineTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.defineTheme; }
 });
 Object.defineProperty(exports, "extractMaxClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.extractMaxClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.extractMaxClicks; }
 });
 Object.defineProperty(exports, "generateClickCss", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateClickCss; }
+  get: function () { return chunkTGI6YSZP_cjs.generateClickCss; }
 });
 Object.defineProperty(exports, "postprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.postprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.postprocessClicks; }
 });
 Object.defineProperty(exports, "preprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.preprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.preprocessClicks; }
 });
 Object.defineProperty(exports, "renderSlide", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlide; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlide; }
 });
 Object.defineProperty(exports, "renderSlideAsync", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlideAsync; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlideAsync; }
 });
 Object.defineProperty(exports, "resolveTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.resolveTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.resolveTheme; }
 });
 exports.DeckView = DeckView;
 exports.NavigationBar = NavigationBar;