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

package/dist/index.d.ts

@@ -47,6 +47,7 @@ declare type BaseProps = {
         json: JSONContent;
         text: string;
     }) => void;
+    onGroupSelect?: (groupId: string) => void;
 };
 
 export declare enum EditorPlacement {

package/dist/post-builder.cjs.js

@@ -16351,7 +16351,7 @@ function AvatarFallback({ className, ...props }) {
     }
   );
 }
-const GroupSelector = ({ store }) => {
+const GroupSelector = ({ store, onGroupSelect }) => {
   const { core: core2 } = useApi();
   const [groups, setGroups] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -16388,6 +16388,7 @@ const GroupSelector = ({ store }) => {
   }, [core2]);
   const handleValueChange = (value) => {
     store.getState().selectGroup(value);
+    onGroupSelect?.(value);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: currentValue, onValueChange: handleValueChange, disabled: isLoading, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -25671,8 +25672,23 @@ const PollCreator = ({ choices, onChange }) => {
   };
   const handleFileUpload = async (files) => {
     if (!files || !canAddMore) return;
-    const filesArray = files.slice(0, remainingSlots);
+    let filesArray = files.slice(0, remainingSlots);
     const startIndex = internalChoices.length;
+    filesArray = await Promise.all(
+      filesArray.map(async (file) => {
+        if (file.type.startsWith("image/")) {
+          try {
+            const compressed = await imageCompression(file, {
+              maxSizeMB: 10
+            });
+            return compressed;
+          } catch (error) {
+            return file;
+          }
+        }
+        return file;
+      })
+    );
     const placeholders = filesArray.map((_, i2) => ({
       type: "placeholder",
       key: `placeholder-${Date.now()}-${i2}`
@@ -32465,7 +32481,7 @@ const MentionList = React.forwardRef((props, ref) => {
 });
 MentionList.displayName = "MentionList";
 const isReactNativeWebView = () => typeof window !== "undefined" && window.ReactNativeWebView !== void 0;
-const mentionService = (api, mfs, store) => {
+const mentionService = (api, mfs, store, user) => {
   const fetchMentions = async () => {
     const params = store.getState().getMentionParams();
     if (!params) {
@@ -32473,7 +32489,7 @@ const mentionService = (api, mfs, store) => {
     }
     const { groupId, postId } = params;
     const response = postId ? await mfs.getRecommendationPost(groupId, postId, 0, 999) : await mfs.getRecommendationGroup(groupId, 0, 999);
-    return response.entries?.filter((item) => Boolean(item?.user_data))?.map(
+    const apiResults = response.entries?.filter((item) => Boolean(item?.user_data))?.map(
       (item) => ({
         id: item?.user_data?.id,
         label: item?.user_data?.name,
@@ -32484,7 +32500,22 @@ const mentionService = (api, mfs, store) => {
         type: MentionType.User,
         from: PostType.Post
       })
-    );
+    ) ?? [];
+    if (user) {
+      const loggedInUserMention = {
+        id: user.id,
+        label: user.name,
+        avatar: user.avatar,
+        inThisThread: 1,
+        name: user.name,
+        selectId: user.username,
+        type: MentionType.User,
+        from: PostType.Post
+      };
+      const filteredResults = apiResults.filter((item) => item.id !== user.id);
+      return [loggedInUserMention, ...filteredResults];
+    }
+    return apiResults;
   };
   const fetchHashtags = async () => {
     const { selectedGroupId, groupId } = store.getState();
@@ -32556,8 +32587,8 @@ function createSuggestion(char, fetchItems) {
     }
   };
 }
-const configureMentionExtension = (api, mfs, store) => {
-  const service = mentionService(api, mfs, store);
+const configureMentionExtension = (api, mfs, store, user) => {
+  const service = mentionService(api, mfs, store, user);
   return Mention.configure({
     HTMLAttributes: {
       class: "inline-block px-1.5 py-0.5 rounded font-medium no-underline cursor-pointer transition-all duration-200"
@@ -33298,7 +33329,7 @@ const getPlaceholderExtension = (placeholder) => extensions.Placeholder.configur
   // emptyEditorClass:
   //   'first:before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:h-0 before:pointer-events-none',
 });
-const getMentionExtension = (core2, mfs, store) => configureMentionExtension(core2, mfs, store);
+const getMentionExtension = (core2, mfs, store, user) => configureMentionExtension(core2, mfs, store, user);
 const getExtensions = ({ editorType, api, store, user }) => {
   const extensionMap = {
     [EditorTypes.Blog]: getDefaultExtensions,
@@ -33330,12 +33361,12 @@ const getDefaultExtensions = ({ api, store, user }) => {
       api: core2
     }),
     LinkPreview,
-    getMentionExtension(core2, mfs, store),
+    getMentionExtension(core2, mfs, store, user),
     SmartMediaUpload.configure({ api: fileStore }),
     SmartLinkPaste.configure({ api: core2 })
   ];
 };
-const getPollExtensions = ({ api, store }) => {
+const getPollExtensions = ({ api, store, user }) => {
   const { core: core2, mfs } = api;
   return [
     PollDoc,
@@ -33346,7 +33377,7 @@ const getPollExtensions = ({ api, store }) => {
     getPlaceholderExtension("Ask a Question"),
     EnterHardBreak,
     Poll,
-    getMentionExtension(core2, mfs, store)
+    getMentionExtension(core2, mfs, store, user)
   ];
 };
 const getMediaExtensions = ({ api, store, user }) => {
@@ -33374,7 +33405,7 @@ const getMediaExtensions = ({ api, store, user }) => {
       // selectable: false,
       draggable: false
     }),
-    getMentionExtension(core2, mfs, store),
+    getMentionExtension(core2, mfs, store, user),
     SmartMediaUpload.configure({ api: fileStore }),
     SmartLinkPaste.configure({ api: core2, autoEmbed: false, autoLinkSelection: false })
   ];
@@ -33641,7 +33672,8 @@ const PostBuilderEditorInstance = ({
   clearOnSuccess,
   onCreatePost,
   className,
-  store
+  store,
+  placement
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
   const { trackPublish } = useAnalyticsTracking();
@@ -33707,11 +33739,12 @@ const PostBuilderEditorInstance = ({
     "div",
     {
       className: cn(
-        "post-builder-editor bg-background border rounded-md overflow-hidden min-h-60 max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        placement === EditorPlacement.Comment ? "min-h-32" : "min-h-60",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
+        placement !== EditorPlacement.Comment && /* @__PURE__ */ jsxRuntime.jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,
           {
@@ -33765,6 +33798,8 @@ const PostBuilderEditorInstanceWithDialog = ({
   hideGroupSelector,
   open,
   onOpenChange,
+  onGroupSelect,
+  placement,
   ...rest
 }) => {
   const { trackAbandon } = useAnalyticsTracking();
@@ -33788,11 +33823,11 @@ const PostBuilderEditorInstanceWithDialog = ({
         /* @__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 }),
+            /* @__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 })
+        /* @__PURE__ */ jsxRuntime.jsx(PostBuilderEditorInstance, { ...rest, store, placement })
       ]
     }
   ) });
@@ -33861,7 +33896,8 @@ const PostBuilderEditor = ({
   openModal,
   onModalOpenChange,
   isSubmitting,
-  onCreatePost
+  onCreatePost,
+  onGroupSelect
 }) => {
   const [editorTab, setEditorTab] = React.useState(EditorTypes.Media);
   const [sessionId, setSessionId] = React.useState("");
@@ -33917,7 +33953,7 @@ const PostBuilderEditor = ({
     /* @__PURE__ */ jsxRuntime.jsx(react.EditorContext.Provider, { value: providerValue, children: openModal ? /* @__PURE__ */ jsxRuntime.jsx(
       PostBuilderEditorInstanceWithDialog,
       {
-        placement: EditorPlacement.Modal,
+        placement,
         hideGroupSelector,
         user,
         editor,
@@ -33929,10 +33965,11 @@ const PostBuilderEditor = ({
         onOpenChange: onModalOpenChange,
         onCreatePost,
         isSubmitting,
-        clearOnSuccess
+        clearOnSuccess,
+        onGroupSelect
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "prose-blockquote: flex-1 flex flex-col space-y-3 max-w-full max-h-[calc(100dvh-7rem)]", children: [
-      !hideGroupSelector && /* @__PURE__ */ jsxRuntime.jsx(GroupSelector, { user, store }),
+      !hideGroupSelector && /* @__PURE__ */ jsxRuntime.jsx(GroupSelector, { user, store, onGroupSelect }),
       /* @__PURE__ */ jsxRuntime.jsx(
         PostBuilderEditorInstance,
         {
@@ -33943,7 +33980,8 @@ const PostBuilderEditor = ({
           store,
           isSubmitting,
           onCreatePost,
-          clearOnSuccess
+          clearOnSuccess,
+          placement
         }
       )
     ] }) }),

package/dist/post-builder.css

@@ -1648,6 +1648,10 @@ body {
     min-height: calc(var(--spacing) * 16);
   }
 
+[data-theme="select-post-builder"] .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
+
 [data-theme="select-post-builder"] .min-h-44 {
     min-height: calc(var(--spacing) * 44);
   }

package/dist/post-builder.js

@@ -16321,7 +16321,7 @@ function AvatarFallback({ className, ...props }) {
     }
   );
 }
-const GroupSelector = ({ store }) => {
+const GroupSelector = ({ store, onGroupSelect }) => {
   const { core } = useApi();
   const [groups, setGroups] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -16358,6 +16358,7 @@ const GroupSelector = ({ store }) => {
   }, [core]);
   const handleValueChange = (value) => {
     store.getState().selectGroup(value);
+    onGroupSelect?.(value);
   };
   return /* @__PURE__ */ jsx("div", { className: "not-prose flex items-center gap-3", children: /* @__PURE__ */ jsxs(Select, { value: currentValue, onValueChange: handleValueChange, disabled: isLoading, children: [
     /* @__PURE__ */ jsx(
@@ -25641,8 +25642,23 @@ const PollCreator = ({ choices, onChange }) => {
   };
   const handleFileUpload = async (files) => {
     if (!files || !canAddMore) return;
-    const filesArray = files.slice(0, remainingSlots);
+    let filesArray = files.slice(0, remainingSlots);
     const startIndex = internalChoices.length;
+    filesArray = await Promise.all(
+      filesArray.map(async (file) => {
+        if (file.type.startsWith("image/")) {
+          try {
+            const compressed = await imageCompression(file, {
+              maxSizeMB: 10
+            });
+            return compressed;
+          } catch (error) {
+            return file;
+          }
+        }
+        return file;
+      })
+    );
     const placeholders = filesArray.map((_, i2) => ({
       type: "placeholder",
       key: `placeholder-${Date.now()}-${i2}`
@@ -32435,7 +32451,7 @@ const MentionList = forwardRef((props, ref) => {
 });
 MentionList.displayName = "MentionList";
 const isReactNativeWebView = () => typeof window !== "undefined" && window.ReactNativeWebView !== void 0;
-const mentionService = (api, mfs, store) => {
+const mentionService = (api, mfs, store, user) => {
   const fetchMentions = async () => {
     const params = store.getState().getMentionParams();
     if (!params) {
@@ -32443,7 +32459,7 @@ const mentionService = (api, mfs, store) => {
     }
     const { groupId, postId } = params;
     const response = postId ? await mfs.getRecommendationPost(groupId, postId, 0, 999) : await mfs.getRecommendationGroup(groupId, 0, 999);
-    return response.entries?.filter((item) => Boolean(item?.user_data))?.map(
+    const apiResults = response.entries?.filter((item) => Boolean(item?.user_data))?.map(
       (item) => ({
         id: item?.user_data?.id,
         label: item?.user_data?.name,
@@ -32454,7 +32470,22 @@ const mentionService = (api, mfs, store) => {
         type: MentionType.User,
         from: PostType.Post
       })
-    );
+    ) ?? [];
+    if (user) {
+      const loggedInUserMention = {
+        id: user.id,
+        label: user.name,
+        avatar: user.avatar,
+        inThisThread: 1,
+        name: user.name,
+        selectId: user.username,
+        type: MentionType.User,
+        from: PostType.Post
+      };
+      const filteredResults = apiResults.filter((item) => item.id !== user.id);
+      return [loggedInUserMention, ...filteredResults];
+    }
+    return apiResults;
   };
   const fetchHashtags = async () => {
     const { selectedGroupId, groupId } = store.getState();
@@ -32526,8 +32557,8 @@ function createSuggestion(char, fetchItems) {
     }
   };
 }
-const configureMentionExtension = (api, mfs, store) => {
-  const service = mentionService(api, mfs, store);
+const configureMentionExtension = (api, mfs, store, user) => {
+  const service = mentionService(api, mfs, store, user);
   return Mention.configure({
     HTMLAttributes: {
       class: "inline-block px-1.5 py-0.5 rounded font-medium no-underline cursor-pointer transition-all duration-200"
@@ -33268,7 +33299,7 @@ const getPlaceholderExtension = (placeholder) => Placeholder.configure({
   // emptyEditorClass:
   //   'first:before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:h-0 before:pointer-events-none',
 });
-const getMentionExtension = (core, mfs, store) => configureMentionExtension(core, mfs, store);
+const getMentionExtension = (core, mfs, store, user) => configureMentionExtension(core, mfs, store, user);
 const getExtensions = ({ editorType, api, store, user }) => {
   const extensionMap = {
     [EditorTypes.Blog]: getDefaultExtensions,
@@ -33300,12 +33331,12 @@ const getDefaultExtensions = ({ api, store, user }) => {
       api: core
     }),
     LinkPreview,
-    getMentionExtension(core, mfs, store),
+    getMentionExtension(core, mfs, store, user),
     SmartMediaUpload.configure({ api: fileStore }),
     SmartLinkPaste.configure({ api: core })
   ];
 };
-const getPollExtensions = ({ api, store }) => {
+const getPollExtensions = ({ api, store, user }) => {
   const { core, mfs } = api;
   return [
     PollDoc,
@@ -33316,7 +33347,7 @@ const getPollExtensions = ({ api, store }) => {
     getPlaceholderExtension("Ask a Question"),
     EnterHardBreak,
     Poll,
-    getMentionExtension(core, mfs, store)
+    getMentionExtension(core, mfs, store, user)
   ];
 };
 const getMediaExtensions = ({ api, store, user }) => {
@@ -33344,7 +33375,7 @@ const getMediaExtensions = ({ api, store, user }) => {
       // selectable: false,
       draggable: false
     }),
-    getMentionExtension(core, mfs, store),
+    getMentionExtension(core, mfs, store, user),
     SmartMediaUpload.configure({ api: fileStore }),
     SmartLinkPaste.configure({ api: core, autoEmbed: false, autoLinkSelection: false })
   ];
@@ -33611,7 +33642,8 @@ const PostBuilderEditorInstance = ({
   clearOnSuccess,
   onCreatePost,
   className,
-  store
+  store,
+  placement
 }) => {
   const [isDragging, setIsDragging] = useState(false);
   const { trackPublish } = useAnalyticsTracking();
@@ -33677,11 +33709,12 @@ const PostBuilderEditorInstance = ({
     "div",
     {
       className: cn(
-        "post-builder-editor bg-background border rounded-md overflow-hidden min-h-60 max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        placement === EditorPlacement.Comment ? "min-h-32" : "min-h-60",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
+        placement !== EditorPlacement.Comment && /* @__PURE__ */ jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
         /* @__PURE__ */ jsx(
           Toolbar,
           {
@@ -33735,6 +33768,8 @@ const PostBuilderEditorInstanceWithDialog = ({
   hideGroupSelector,
   open,
   onOpenChange,
+  onGroupSelect,
+  placement,
   ...rest
 }) => {
   const { trackAbandon } = useAnalyticsTracking();
@@ -33758,11 +33793,11 @@ const PostBuilderEditorInstanceWithDialog = ({
         /* @__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 }),
+            /* @__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 })
+        /* @__PURE__ */ jsx(PostBuilderEditorInstance, { ...rest, store, placement })
       ]
     }
   ) });
@@ -33831,7 +33866,8 @@ const PostBuilderEditor = ({
   openModal,
   onModalOpenChange,
   isSubmitting,
-  onCreatePost
+  onCreatePost,
+  onGroupSelect
 }) => {
   const [editorTab, setEditorTab] = useState(EditorTypes.Media);
   const [sessionId, setSessionId] = useState("");
@@ -33887,7 +33923,7 @@ const PostBuilderEditor = ({
     /* @__PURE__ */ jsx(EditorContext.Provider, { value: providerValue, children: openModal ? /* @__PURE__ */ jsx(
       PostBuilderEditorInstanceWithDialog,
       {
-        placement: EditorPlacement.Modal,
+        placement,
         hideGroupSelector,
         user,
         editor,
@@ -33899,10 +33935,11 @@ const PostBuilderEditor = ({
         onOpenChange: onModalOpenChange,
         onCreatePost,
         isSubmitting,
-        clearOnSuccess
+        clearOnSuccess,
+        onGroupSelect
       }
     ) : /* @__PURE__ */ jsxs("div", { className: "prose-blockquote: flex-1 flex flex-col space-y-3 max-w-full max-h-[calc(100dvh-7rem)]", children: [
-      !hideGroupSelector && /* @__PURE__ */ jsx(GroupSelector, { user, store }),
+      !hideGroupSelector && /* @__PURE__ */ jsx(GroupSelector, { user, store, onGroupSelect }),
       /* @__PURE__ */ jsx(
         PostBuilderEditorInstance,
         {
@@ -33913,7 +33950,8 @@ const PostBuilderEditor = ({
           store,
           isSubmitting,
           onCreatePost,
-          clearOnSuccess
+          clearOnSuccess,
+          placement
         }
       )
     ] }) }),

package/package.json

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