@select-org/select-post-builder 1.1.26 → 1.1.28

package/dist/post-builder.cjs.js

@@ -23227,6 +23227,12 @@ const useHostAnalyticsBridge = () => {
     };
   }, [sessionId, editorType, placement, trackPublish, deleteSession, createSession]);
 };
+const generateDraftKey = (editorType, placement) => {
+  if (placement) {
+    return `${editorType}:${placement}-draft`;
+  }
+  return `${editorType}-draft`;
+};
 const extractTextContent = (json) => {
   if (!json) return "";
   let text2 = "";
@@ -23314,25 +23320,27 @@ const createPollContentFromNodes = (paragraphs, existingPollNode) => {
     content
   };
 };
-const syncFromPostToOtherTabs = (postJson) => {
+const syncFromPostToOtherTabs = (postJson, placement) => {
   if (typeof window === "undefined" || typeof localStorage === "undefined") return;
   const postText = extractTextContent(postJson);
   if (!postText) {
     return;
   }
-  const blogDraftString = localStorage.getItem(`${EditorTypes.Blog}-draft`);
+  const blogDraftKey = generateDraftKey(EditorTypes.Blog, placement);
+  const blogDraftString = localStorage.getItem(blogDraftKey);
   if (!blogDraftString) {
-    localStorage.setItem(`${EditorTypes.Blog}-draft`, JSON.stringify(postJson));
+    localStorage.setItem(blogDraftKey, JSON.stringify(postJson));
   }
-  const pollDraftString = localStorage.getItem(`${EditorTypes.Poll}-draft`);
+  const pollDraftKey = generateDraftKey(EditorTypes.Poll, placement);
+  const pollDraftString = localStorage.getItem(pollDraftKey);
   if (!pollDraftString) {
     let postParagraphs = extractParagraphNodes(postJson);
     postParagraphs = removeLinksForPollSync(postParagraphs);
     const pollContent = createPollContentFromNodes(postParagraphs);
-    localStorage.setItem(`${EditorTypes.Poll}-draft`, JSON.stringify(pollContent));
+    localStorage.setItem(pollDraftKey, JSON.stringify(pollContent));
   }
 };
-const usePersistence = () => {
+const usePersistence = (placement) => {
   const saveCurrentTabContent = (editorType, editor) => {
     if (typeof window === "undefined" || typeof localStorage === "undefined" || !editor) return;
     const hasContent = !!getTabContent(editorType);
@@ -23342,18 +23350,23 @@ const usePersistence = () => {
     const filteredJson = filterNodes(json, (node) => !node?.attrs?.uploading);
     if (editorType === EditorTypes.Poll && isPollEmpty(filteredJson)) return;
     if (!shouldSaveContent || !filteredJson) return;
-    localStorage.setItem(`${editorType}-draft`, JSON.stringify(filteredJson));
+    const draftKey = generateDraftKey(editorType, placement);
+    localStorage.setItem(draftKey, JSON.stringify(filteredJson));
     if (editorType === EditorTypes.Media) {
-      syncFromPostToOtherTabs(filteredJson);
+      syncFromPostToOtherTabs(filteredJson, placement);
     }
   };
   const getTabContent = React.useCallback((editorType) => {
-    const jsonString = localStorage.getItem(`${editorType}-draft`);
+    const draftKey = generateDraftKey(editorType, placement);
+    const jsonString = localStorage.getItem(draftKey);
     return jsonString ? JSON.parse(jsonString) : null;
-  }, []);
+  }, [placement]);
   const clearContent = () => {
     const editorTypes2 = enumToOptions(EditorTypes);
-    editorTypes2.forEach((type) => localStorage.removeItem(`${type.value}-draft`));
+    editorTypes2.forEach((type) => {
+      const draftKey = generateDraftKey(type.value, placement);
+      localStorage.removeItem(draftKey);
+    });
   };
   return { saveCurrentTabContent, getTabContent, clearContent };
 };
@@ -33477,12 +33490,12 @@ const initializePollEditor = (editor) => {
     return true;
   }).run();
 };
-const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
+const usePostBuilderEditor = ({ editorType, placement, groupId, postId, user }) => {
   const [, setForceRender] = React.useState(0);
   const [isMounted, setIsMounted] = React.useState(false);
   const api = useApi();
   const store = React.useMemo(() => createPostBuilderStore({ groupId, postId }), [groupId, postId]);
-  const { getTabContent, saveCurrentTabContent } = usePersistence();
+  const { getTabContent, saveCurrentTabContent } = usePersistence(placement);
   React.useEffect(() => {
     setIsMounted(true);
     setForceRender((prev) => prev + 1);
@@ -33504,8 +33517,8 @@ const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
       // Important: Only render after mount to avoid SSR issues
       shouldRerenderOnTransaction: false
     },
-    [editorType, isMounted]
-    // Add isMounted to dependencies
+    [editorType, placement, isMounted]
+    // Add isMounted and placement to dependencies
   );
   React.useEffect(() => {
     let timerId;
@@ -33517,7 +33530,7 @@ const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
     return () => {
       if (timerId) clearTimeout(timerId);
     };
-  }, [editor, editorType, getTabContent, isMounted]);
+  }, [editor, editorType, placement, getTabContent, isMounted]);
   const actions = React.useMemo(() => {
     return editor ? createEditorActions(editor) : null;
   }, [editor]);
@@ -33677,7 +33690,7 @@ const PostBuilderEditorInstance = ({
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const { trackPublish } = useAnalyticsTracking();
-  const { clearContent } = usePersistence();
+  const { clearContent } = usePersistence(placement);
   useHostAnalyticsBridge();
   useEditorTracking({ editor, editorType: editorTab });
   const handleDragOver = (e2) => {
@@ -33814,23 +33827,28 @@ const PostBuilderEditorInstanceWithDialog = ({
       hasUnsavedChanges: metrics?.hasUnsavedChanges ?? false
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogContent,
-    {
-      className: "bg-transparent shadow-none border-0 p-3 lg:max-w-4xl shrink-0 max-h-[calc(100dvh-7rem)]! flex flex-col overflow-y-auto -translate-1/2",
-      showCloseButton: false,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "sr-only", children: "Post Builder Modal" }),
-          !hideGroupSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(GroupSelector, { user, store, onGroupSelect }),
-            /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(X, {}) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PostBuilderEditorInstance, { ...rest, store, placement })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { modal: false, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/50", onClick: () => handleOpenChange(false) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContent,
+      {
+        onInteractOutside: (e2) => e2.preventDefault(),
+        onOpenAutoFocus: (e2) => e2.preventDefault(),
+        className: "bg-transparent shadow-none border-0 p-3 lg:max-w-4xl shrink-0 max-h-[calc(100dvh-7rem)]! flex flex-col overflow-y-auto -translate-1/2",
+        showCloseButton: false,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "sr-only", children: "Post Builder Modal" }),
+            !hideGroupSelector && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(GroupSelector, { user, store, onGroupSelect }),
+              /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(X, {}) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(PostBuilderEditorInstance, { ...rest, store, placement })
+        ]
+      }
+    )
+  ] });
 };
 var M = (e2, i2, s2, u, m, a2, l2, h) => {
   let d = document.documentElement, w = ["light", "dark"];
@@ -33906,6 +33924,7 @@ const PostBuilderEditor = ({
   const trackEditorFocus = useAnalyticsStore((s2) => s2.trackEditorFocus);
   const { editor, actions, store, isMounted } = usePostBuilderEditor({
     editorType: editorTab,
+    placement,
     groupId,
     postId,
     user

package/dist/post-builder.js

@@ -23197,6 +23197,12 @@ const useHostAnalyticsBridge = () => {
     };
   }, [sessionId, editorType, placement, trackPublish, deleteSession, createSession]);
 };
+const generateDraftKey = (editorType, placement) => {
+  if (placement) {
+    return `${editorType}:${placement}-draft`;
+  }
+  return `${editorType}-draft`;
+};
 const extractTextContent = (json) => {
   if (!json) return "";
   let text2 = "";
@@ -23284,25 +23290,27 @@ const createPollContentFromNodes = (paragraphs, existingPollNode) => {
     content
   };
 };
-const syncFromPostToOtherTabs = (postJson) => {
+const syncFromPostToOtherTabs = (postJson, placement) => {
   if (typeof window === "undefined" || typeof localStorage === "undefined") return;
   const postText = extractTextContent(postJson);
   if (!postText) {
     return;
   }
-  const blogDraftString = localStorage.getItem(`${EditorTypes.Blog}-draft`);
+  const blogDraftKey = generateDraftKey(EditorTypes.Blog, placement);
+  const blogDraftString = localStorage.getItem(blogDraftKey);
   if (!blogDraftString) {
-    localStorage.setItem(`${EditorTypes.Blog}-draft`, JSON.stringify(postJson));
+    localStorage.setItem(blogDraftKey, JSON.stringify(postJson));
   }
-  const pollDraftString = localStorage.getItem(`${EditorTypes.Poll}-draft`);
+  const pollDraftKey = generateDraftKey(EditorTypes.Poll, placement);
+  const pollDraftString = localStorage.getItem(pollDraftKey);
   if (!pollDraftString) {
     let postParagraphs = extractParagraphNodes(postJson);
     postParagraphs = removeLinksForPollSync(postParagraphs);
     const pollContent = createPollContentFromNodes(postParagraphs);
-    localStorage.setItem(`${EditorTypes.Poll}-draft`, JSON.stringify(pollContent));
+    localStorage.setItem(pollDraftKey, JSON.stringify(pollContent));
   }
 };
-const usePersistence = () => {
+const usePersistence = (placement) => {
   const saveCurrentTabContent = (editorType, editor) => {
     if (typeof window === "undefined" || typeof localStorage === "undefined" || !editor) return;
     const hasContent = !!getTabContent(editorType);
@@ -23312,18 +23320,23 @@ const usePersistence = () => {
     const filteredJson = filterNodes(json, (node) => !node?.attrs?.uploading);
     if (editorType === EditorTypes.Poll && isPollEmpty(filteredJson)) return;
     if (!shouldSaveContent || !filteredJson) return;
-    localStorage.setItem(`${editorType}-draft`, JSON.stringify(filteredJson));
+    const draftKey = generateDraftKey(editorType, placement);
+    localStorage.setItem(draftKey, JSON.stringify(filteredJson));
     if (editorType === EditorTypes.Media) {
-      syncFromPostToOtherTabs(filteredJson);
+      syncFromPostToOtherTabs(filteredJson, placement);
     }
   };
   const getTabContent = useCallback((editorType) => {
-    const jsonString = localStorage.getItem(`${editorType}-draft`);
+    const draftKey = generateDraftKey(editorType, placement);
+    const jsonString = localStorage.getItem(draftKey);
     return jsonString ? JSON.parse(jsonString) : null;
-  }, []);
+  }, [placement]);
   const clearContent = () => {
     const editorTypes2 = enumToOptions(EditorTypes);
-    editorTypes2.forEach((type) => localStorage.removeItem(`${type.value}-draft`));
+    editorTypes2.forEach((type) => {
+      const draftKey = generateDraftKey(type.value, placement);
+      localStorage.removeItem(draftKey);
+    });
   };
   return { saveCurrentTabContent, getTabContent, clearContent };
 };
@@ -33447,12 +33460,12 @@ const initializePollEditor = (editor) => {
     return true;
   }).run();
 };
-const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
+const usePostBuilderEditor = ({ editorType, placement, groupId, postId, user }) => {
   const [, setForceRender] = useState(0);
   const [isMounted, setIsMounted] = useState(false);
   const api = useApi();
   const store = useMemo(() => createPostBuilderStore({ groupId, postId }), [groupId, postId]);
-  const { getTabContent, saveCurrentTabContent } = usePersistence();
+  const { getTabContent, saveCurrentTabContent } = usePersistence(placement);
   useEffect(() => {
     setIsMounted(true);
     setForceRender((prev) => prev + 1);
@@ -33474,8 +33487,8 @@ const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
       // Important: Only render after mount to avoid SSR issues
       shouldRerenderOnTransaction: false
     },
-    [editorType, isMounted]
-    // Add isMounted to dependencies
+    [editorType, placement, isMounted]
+    // Add isMounted and placement to dependencies
   );
   useEffect(() => {
     let timerId;
@@ -33487,7 +33500,7 @@ const usePostBuilderEditor = ({ editorType, groupId, postId, user }) => {
     return () => {
       if (timerId) clearTimeout(timerId);
     };
-  }, [editor, editorType, getTabContent, isMounted]);
+  }, [editor, editorType, placement, getTabContent, isMounted]);
   const actions = useMemo(() => {
     return editor ? createEditorActions(editor) : null;
   }, [editor]);
@@ -33647,7 +33660,7 @@ const PostBuilderEditorInstance = ({
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const { trackPublish } = useAnalyticsTracking();
-  const { clearContent } = usePersistence();
+  const { clearContent } = usePersistence(placement);
   useHostAnalyticsBridge();
   useEditorTracking({ editor, editorType: editorTab });
   const handleDragOver = (e2) => {
@@ -33784,23 +33797,28 @@ const PostBuilderEditorInstanceWithDialog = ({
       hasUnsavedChanges: metrics?.hasUnsavedChanges ?? false
     });
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      className: "bg-transparent shadow-none border-0 p-3 lg:max-w-4xl shrink-0 max-h-[calc(100dvh-7rem)]! flex flex-col overflow-y-auto -translate-1/2",
-      showCloseButton: false,
-      children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Post Builder Modal" }),
-          !hideGroupSelector && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx(GroupSelector, { user, store, onGroupSelect }),
-            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsx(X, {}) }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(PostBuilderEditorInstance, { ...rest, store, placement })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Dialog, { modal: false, open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50", onClick: () => handleOpenChange(false) }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        onInteractOutside: (e2) => e2.preventDefault(),
+        onOpenAutoFocus: (e2) => e2.preventDefault(),
+        className: "bg-transparent shadow-none border-0 p-3 lg:max-w-4xl shrink-0 max-h-[calc(100dvh-7rem)]! flex flex-col overflow-y-auto -translate-1/2",
+        showCloseButton: false,
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Post Builder Modal" }),
+            !hideGroupSelector && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx(GroupSelector, { user, store, onGroupSelect }),
+              /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", children: /* @__PURE__ */ jsx(X, {}) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(PostBuilderEditorInstance, { ...rest, store, placement })
+        ]
+      }
+    )
+  ] });
 };
 var M = (e2, i2, s2, u, m, a2, l2, h) => {
   let d = document.documentElement, w = ["light", "dark"];
@@ -33876,6 +33894,7 @@ const PostBuilderEditor = ({
   const trackEditorFocus = useAnalyticsStore((s2) => s2.trackEditorFocus);
   const { editor, actions, store, isMounted } = usePostBuilderEditor({
     editorType: editorTab,
+    placement,
     groupId,
     postId,
     user

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@select-org/select-post-builder",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "A reusable, extensible Post Builder widget for the Select platform and beyond.",
   "main": "./dist/post-builder.cjs.js",
   "module": "./dist/post-builder.js",