@select-org/select-post-builder 1.1.8 → 1.1.10

package/dist/post-builder.cjs.js

@@ -5221,7 +5221,7 @@ function focusFirst$2(candidates, preventScroll = false) {
 function wrapArray$2(array, startIndex) {
   return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
-var Root$8 = RovingFocusGroup;
+var Root$9 = RovingFocusGroup;
 var Item$1 = RovingFocusGroupItem;
 function useStateMachine(initialState, machine) {
   return React__namespace.useReducer((state2, event) => {
@@ -5401,7 +5401,7 @@ var TabsList$1 = React__namespace.forwardRef(
     const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
     const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeTabs);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Root$8,
+      Root$9,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -13062,7 +13062,7 @@ const arrow$2 = (options, deps) => ({
   ...arrow$1$1(options),
   options: [options, deps]
 });
-var NAME$3 = "Arrow";
+var NAME$4 = "Arrow";
 var Arrow$1 = React__namespace.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13078,8 +13078,8 @@ var Arrow$1 = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$1.displayName = NAME$3;
-var Root$7 = Arrow$1;
+Arrow$1.displayName = NAME$4;
+var Root$8 = Arrow$1;
 function useSize(element) {
   const [size2, setSize] = React__namespace.useState(void 0);
   useLayoutEffect2(() => {
@@ -13325,7 +13325,7 @@ var PopperArrow = React__namespace.forwardRef(function PopperArrow2(props, forwa
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Root$7,
+          Root$8,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -13415,7 +13415,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   whiteSpace: "nowrap",
   wordWrap: "normal"
 });
-var NAME$2 = "VisuallyHidden";
+var NAME$3 = "VisuallyHidden";
 var VisuallyHidden = React__namespace.forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13428,8 +13428,8 @@ var VisuallyHidden = React__namespace.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME$2;
-var Root$6 = VisuallyHidden;
+VisuallyHidden.displayName = NAME$3;
+var Root$7 = VisuallyHidden;
 var getDefaultParent = function(originalTarget) {
   if (typeof document === "undefined") {
     return null;
@@ -16316,12 +16316,12 @@ function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
   }, [image, crossOrigin, referrerPolicy]);
   return loadingStatus;
 }
-var Root$5 = Avatar$1;
+var Root$6 = Avatar$1;
 var Image = AvatarImage$1;
 var Fallback = AvatarFallback$1;
 function Avatar({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$5,
+    Root$6,
     {
       "data-slot": "avatar",
       className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
@@ -16845,7 +16845,7 @@ var TooltipContentImpl = React__namespace.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Slottable, { children }),
-              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntime.jsx(Root$6, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntime.jsx(Root$7, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -17345,7 +17345,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$4 = Dialog$1;
+var Root$5 = Dialog$1;
 var Trigger$2 = DialogTrigger$1;
 var Portal$2 = DialogPortal$1;
 var Overlay = DialogOverlay$1;
@@ -17354,7 +17354,7 @@ var Title = DialogTitle$1;
 var Description = DialogDescription;
 var Close = DialogClose$1;
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-slot": "dialog", ...props });
 }
 const DialogTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Trigger$2, { ref, "data-slot": "dialog-trigger", ...props }));
 function DialogPortal({ ...props }) {
@@ -17443,7 +17443,7 @@ React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.js
     ...props
   }
 ));
-var NAME$1 = "Label";
+var NAME$2 = "Label";
 var Label$2 = React__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Primitive.label,
@@ -17459,11 +17459,11 @@ var Label$2 = React__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Label$2.displayName = NAME$1;
-var Root$3 = Label$2;
+Label$2.displayName = NAME$2;
+var Root$4 = Label$2;
 function Label$1({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$3,
+    Root$4,
     {
       "data-slot": "label",
       className: cn(
@@ -17474,6 +17474,49 @@ function Label$1({ className, ...props }) {
     }
   );
 }
+var NAME$1 = "Separator";
+var DEFAULT_ORIENTATION = "horizontal";
+var ORIENTATIONS = ["horizontal", "vertical"];
+var Separator$2 = React__namespace.forwardRef((props, forwardedRef) => {
+  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
+  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
+  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Primitive.div,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
+    }
+  );
+});
+Separator$2.displayName = NAME$1;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root$3 = Separator$2;
+function Separator$1({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Root$3,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function FieldSet({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "fieldset",
@@ -19436,7 +19479,7 @@ var MenuContentImpl = React__namespace.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Root$8,
+                  Root$9,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -29395,18 +29438,18 @@ const Mention = core.Node.create({
     return {
       id: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-id"),
+        parseHTML: (element) => element.getAttribute("data-mention-id"),
         renderHTML: (attributes) => {
           if (!attributes.id) return {};
-          return { "data-id": attributes.id };
+          return { "data-mention-id": attributes.id };
         }
       },
       label: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-label"),
+        parseHTML: (element) => element.getAttribute("data-mention-label"),
         renderHTML: (attributes) => {
           if (!attributes.label) return {};
-          return { "data-label": attributes.label };
+          return { "data-mention-label": attributes.label };
         }
       },
       mentionSuggestionChar: {
@@ -29416,14 +29459,70 @@ const Mention = core.Node.create({
           return { "data-mention-suggestion-char": attributes.mentionSuggestionChar };
         }
       },
-      avatar: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      inThisThread: { default: 1, parseHTML: () => null, renderHTML: () => ({}) },
-      name: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      selectId: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      type: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      from: { default: PostType.Post, parseHTML: () => null, renderHTML: () => ({}) },
-      isCrossExposureEnable: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      matchStartPosition: { default: -1, parseHTML: () => null, renderHTML: () => ({}) }
+      avatar: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-avatar"),
+        renderHTML: (attributes) => {
+          if (!attributes.avatar) return {};
+          return { "data-mention-avatar": attributes.avatar };
+        }
+      },
+      inThisThread: {
+        default: 1,
+        parseHTML: (element) => element.getAttribute("data-mention-in-this-thread"),
+        renderHTML: (attributes) => {
+          if (!attributes.inThisThread) return {};
+          return { "data-mention-in-this-thread": attributes.inThisThread };
+        }
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-name"),
+        renderHTML: (attributes) => {
+          if (!attributes.name) return {};
+          return { "data-mention-name": attributes.name };
+        }
+      },
+      selectId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-select-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.selectId) return {};
+          return { "data-mention-select-id": attributes.selectId };
+        }
+      },
+      type: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-type"),
+        renderHTML: (attributes) => {
+          if (!attributes.type) return {};
+          return { "data-mention-type": attributes.type };
+        }
+      },
+      from: {
+        default: PostType.Post,
+        parseHTML: (element) => element.getAttribute("data-mention-from"),
+        renderHTML: (attributes) => {
+          if (!attributes.from) return {};
+          return { "data-mention-from": attributes.from };
+        }
+      },
+      isCrossExposureEnable: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-is-cross-exposure-enable"),
+        renderHTML: (attributes) => {
+          if (!attributes.isCrossExposureEnable) return {};
+          return { "data-mention-is-cross-exposure-enable": attributes.isCrossExposureEnable };
+        }
+      },
+      matchStartPosition: {
+        default: -1,
+        parseHTML: (element) => element.getAttribute("data-mention-match-start-position"),
+        renderHTML: (attributes) => {
+          if (!attributes.matchStartPosition) return {};
+          return { "data-mention-match-start-position": attributes.matchStartPosition };
+        }
+      }
     };
   },
   parseHTML() {
@@ -30530,8 +30629,16 @@ const configureMentionExtension = (api, mfs, store) => {
     },
     renderHTML({ node, suggestion: suggestion2, isFocused }) {
       const char = suggestion2?.char ?? "@";
+      const avatar = node?.attrs?.avatar;
+      const type = node?.attrs?.type;
+      const from = node?.attrs?.from;
+      const inThisThread = node?.attrs?.inThisThread;
+      const isCrossExposureEnable = node?.attrs?.isCrossExposureEnable;
+      const matchStartPosition = node?.attrs?.matchStartPosition;
+      const selectId = node?.attrs?.selectId;
       const label = node.attrs.label ?? node.attrs.id;
       const id = node.attrs.id;
+      const name = node?.attrs?.name;
       const isRNWebView = isReactNativeWebView();
       const mentionClasses = char === "@" ? "inline-block rounded italic font-medium cursor-pointer transition-all duration-200 text-blue-700 dark:text-blue-300" : "inline-block rounded italic font-medium cursor-pointer transition-all duration-200 text-blue-700 dark:text-blue-300";
       const baseAttributes = {
@@ -30539,6 +30646,17 @@ const configureMentionExtension = (api, mfs, store) => {
         "data-id": id,
         "data-label": label,
         "data-mention-suggestion-char": char,
+        // Newly added attributes
+        "data-mention-id": id,
+        "data-mention-label": label,
+        "data-mention-avatar": avatar,
+        "data-mention-in-this-thread": inThisThread,
+        "data-mention-name": name,
+        "data-mention-select-id": selectId,
+        "data-mention-type": type,
+        "data-mention-from": from,
+        "data-mention-is-cross-exposure-enable": isCrossExposureEnable,
+        "data-mention-match-start-position": matchStartPosition,
         class: mentionClasses
       };
       if (isRNWebView) {
@@ -31841,9 +31959,7 @@ const PostBuilderEditor = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [editor, sessionId, editorTab]);
-  if (!isMounted || !editor) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse", children: "Loading editor..." }) }) });
-  }
+  if (!isMounted || !editor) return /* @__PURE__ */ jsxRuntime.jsx(EditorSkeleton, {});
   return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsSessionProvider, { sessionId, editorType: editorTab, placement, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.EditorContext.Provider, { value: providerValue, children: openModal ? /* @__PURE__ */ jsxRuntime.jsx(
       PostBuilderEditorInstanceWithDialog,
@@ -31880,6 +31996,16 @@ const PostBuilderEditor = ({
     /* @__PURE__ */ jsxRuntime.jsx(Toaster2, { position: "top-center" })
   ] }) });
 };
+const EditorSkeleton = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-40" }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-60 w-full flex flex-col overflow-hidden rounded-lg border", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-10 rounded-b-none" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator$1, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-44 rounded-none" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Separator$1, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-[47px] rounded-t-none flex items-center justify-end p-2", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full w-20 bg-accent-foreground/20" }) })
+  ] })
+] }) });
 const translationFallback = {
   // General
   addKey: "Add",

package/dist/post-builder.css

@@ -1576,6 +1576,10 @@ body {
     height: calc(var(--spacing) * 38);
   }
 
+[data-theme="select-post-builder"] .h-44 {
+    height: calc(var(--spacing) * 44);
+  }
+
 [data-theme="select-post-builder"] .h-80 {
     height: calc(var(--spacing) * 80);
   }
@@ -1588,6 +1592,10 @@ body {
     height: 1.15rem;
   }
 
+[data-theme="select-post-builder"] .h-\[47px\] {
+    height: 47px;
+  }
+
 [data-theme="select-post-builder"] .h-\[80vh\] {
     height: 80vh;
   }
@@ -1688,10 +1696,18 @@ body {
     width: calc(var(--spacing) * 16);
   }
 
+[data-theme="select-post-builder"] .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+
 [data-theme="select-post-builder"] .w-32 {
     width: calc(var(--spacing) * 32);
   }
 
+[data-theme="select-post-builder"] .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
 [data-theme="select-post-builder"] .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -2066,6 +2082,16 @@ body {
     border-radius: var(--radius-xs);
   }
 
+[data-theme="select-post-builder"] .rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+[data-theme="select-post-builder"] .rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
 [data-theme="select-post-builder"] .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -2156,7 +2182,21 @@ body {
     border-color: #0000;
   }
 
-[data-theme="select-post-builder"] .bg-accent, [data-theme="select-post-builder"] .bg-accent\/10 {
+[data-theme="select-post-builder"] .bg-accent {
+    background-color: var(--accent);
+  }
+
+[data-theme="select-post-builder"] .bg-accent-foreground\/20 {
+    background-color: var(--accent-foreground);
+  }
+
+@supports (color: color-mix(in lab, red, red)) {
+    [data-theme="select-post-builder"] .bg-accent-foreground\/20 {
+      background-color: color-mix(in oklab, var(--accent-foreground) 20%, transparent);
+    }
+  }
+
+[data-theme="select-post-builder"] .bg-accent\/10 {
     background-color: var(--accent);
   }
 
@@ -2422,10 +2462,6 @@ body {
     padding: calc(var(--spacing) * 6);
   }
 
-[data-theme="select-post-builder"] .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
-
 [data-theme="select-post-builder"] .p-\[3px\] {
     padding: 3px;
   }

package/dist/post-builder.js

@@ -5191,7 +5191,7 @@ function focusFirst$2(candidates, preventScroll = false) {
 function wrapArray$2(array, startIndex) {
   return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
-var Root$8 = RovingFocusGroup;
+var Root$9 = RovingFocusGroup;
 var Item$1 = RovingFocusGroupItem;
 function useStateMachine(initialState, machine) {
   return React.useReducer((state, event) => {
@@ -5371,7 +5371,7 @@ var TabsList$1 = React.forwardRef(
     const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);
     const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeTabs);
     return /* @__PURE__ */ jsx(
-      Root$8,
+      Root$9,
       {
         asChild: true,
         ...rovingFocusGroupScope,
@@ -13032,7 +13032,7 @@ const arrow$2 = (options, deps) => ({
   ...arrow$1$1(options),
   options: [options, deps]
 });
-var NAME$3 = "Arrow";
+var NAME$4 = "Arrow";
 var Arrow$1 = React.forwardRef((props, forwardedRef) => {
   const { children, width = 10, height = 5, ...arrowProps } = props;
   return /* @__PURE__ */ jsx(
@@ -13048,8 +13048,8 @@ var Arrow$1 = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Arrow$1.displayName = NAME$3;
-var Root$7 = Arrow$1;
+Arrow$1.displayName = NAME$4;
+var Root$8 = Arrow$1;
 function useSize(element) {
   const [size2, setSize] = React.useState(void 0);
   useLayoutEffect2(() => {
@@ -13295,7 +13295,7 @@ var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
           visibility: contentContext.shouldHideArrow ? "hidden" : void 0
         },
         children: /* @__PURE__ */ jsx(
-          Root$7,
+          Root$8,
           {
             ...arrowProps,
             ref: forwardedRef,
@@ -13385,7 +13385,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   whiteSpace: "nowrap",
   wordWrap: "normal"
 });
-var NAME$2 = "VisuallyHidden";
+var NAME$3 = "VisuallyHidden";
 var VisuallyHidden = React.forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
@@ -13398,8 +13398,8 @@ var VisuallyHidden = React.forwardRef(
     );
   }
 );
-VisuallyHidden.displayName = NAME$2;
-var Root$6 = VisuallyHidden;
+VisuallyHidden.displayName = NAME$3;
+var Root$7 = VisuallyHidden;
 var getDefaultParent = function(originalTarget) {
   if (typeof document === "undefined") {
     return null;
@@ -16286,12 +16286,12 @@ function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
   }, [image, crossOrigin, referrerPolicy]);
   return loadingStatus;
 }
-var Root$5 = Avatar$1;
+var Root$6 = Avatar$1;
 var Image = AvatarImage$1;
 var Fallback = AvatarFallback$1;
 function Avatar({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    Root$5,
+    Root$6,
     {
       "data-slot": "avatar",
       className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className),
@@ -16815,7 +16815,7 @@ var TooltipContentImpl = React.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsx(Slottable, { children }),
-              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$6, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+              /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsx(Root$7, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
             ]
           }
         )
@@ -17315,7 +17315,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root$4 = Dialog$1;
+var Root$5 = Dialog$1;
 var Trigger$2 = DialogTrigger$1;
 var Portal$2 = DialogPortal$1;
 var Overlay = DialogOverlay$1;
@@ -17324,7 +17324,7 @@ var Title = DialogTitle$1;
 var Description = DialogDescription;
 var Close = DialogClose$1;
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx(Root$4, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx(Root$5, { "data-slot": "dialog", ...props });
 }
 const DialogTrigger = forwardRef((props, ref) => /* @__PURE__ */ jsx(Trigger$2, { ref, "data-slot": "dialog-trigger", ...props }));
 function DialogPortal({ ...props }) {
@@ -17413,7 +17413,7 @@ forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ...props
   }
 ));
-var NAME$1 = "Label";
+var NAME$2 = "Label";
 var Label$2 = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     Primitive.label,
@@ -17429,11 +17429,11 @@ var Label$2 = React.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Label$2.displayName = NAME$1;
-var Root$3 = Label$2;
+Label$2.displayName = NAME$2;
+var Root$4 = Label$2;
 function Label$1({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    Root$3,
+    Root$4,
     {
       "data-slot": "label",
       className: cn(
@@ -17444,6 +17444,49 @@ function Label$1({ className, ...props }) {
     }
   );
 }
+var NAME$1 = "Separator";
+var DEFAULT_ORIENTATION = "horizontal";
+var ORIENTATIONS = ["horizontal", "vertical"];
+var Separator$2 = React.forwardRef((props, forwardedRef) => {
+  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
+  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  const ariaOrientation = orientation === "vertical" ? orientation : void 0;
+  const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
+  return /* @__PURE__ */ jsx(
+    Primitive.div,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
+    }
+  );
+});
+Separator$2.displayName = NAME$1;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root$3 = Separator$2;
+function Separator$1({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Root$3,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function FieldSet({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "fieldset",
@@ -19406,7 +19449,7 @@ var MenuContentImpl = React.forwardRef(
                 onInteractOutside,
                 onDismiss,
                 children: /* @__PURE__ */ jsx(
-                  Root$8,
+                  Root$9,
                   {
                     asChild: true,
                     ...rovingFocusGroupScope,
@@ -29365,18 +29408,18 @@ const Mention = Node$1.create({
     return {
       id: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-id"),
+        parseHTML: (element) => element.getAttribute("data-mention-id"),
         renderHTML: (attributes) => {
           if (!attributes.id) return {};
-          return { "data-id": attributes.id };
+          return { "data-mention-id": attributes.id };
         }
       },
       label: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-label"),
+        parseHTML: (element) => element.getAttribute("data-mention-label"),
         renderHTML: (attributes) => {
           if (!attributes.label) return {};
-          return { "data-label": attributes.label };
+          return { "data-mention-label": attributes.label };
         }
       },
       mentionSuggestionChar: {
@@ -29386,14 +29429,70 @@ const Mention = Node$1.create({
           return { "data-mention-suggestion-char": attributes.mentionSuggestionChar };
         }
       },
-      avatar: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      inThisThread: { default: 1, parseHTML: () => null, renderHTML: () => ({}) },
-      name: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      selectId: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      type: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      from: { default: PostType.Post, parseHTML: () => null, renderHTML: () => ({}) },
-      isCrossExposureEnable: { default: null, parseHTML: () => null, renderHTML: () => ({}) },
-      matchStartPosition: { default: -1, parseHTML: () => null, renderHTML: () => ({}) }
+      avatar: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-avatar"),
+        renderHTML: (attributes) => {
+          if (!attributes.avatar) return {};
+          return { "data-mention-avatar": attributes.avatar };
+        }
+      },
+      inThisThread: {
+        default: 1,
+        parseHTML: (element) => element.getAttribute("data-mention-in-this-thread"),
+        renderHTML: (attributes) => {
+          if (!attributes.inThisThread) return {};
+          return { "data-mention-in-this-thread": attributes.inThisThread };
+        }
+      },
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-name"),
+        renderHTML: (attributes) => {
+          if (!attributes.name) return {};
+          return { "data-mention-name": attributes.name };
+        }
+      },
+      selectId: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-select-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.selectId) return {};
+          return { "data-mention-select-id": attributes.selectId };
+        }
+      },
+      type: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-type"),
+        renderHTML: (attributes) => {
+          if (!attributes.type) return {};
+          return { "data-mention-type": attributes.type };
+        }
+      },
+      from: {
+        default: PostType.Post,
+        parseHTML: (element) => element.getAttribute("data-mention-from"),
+        renderHTML: (attributes) => {
+          if (!attributes.from) return {};
+          return { "data-mention-from": attributes.from };
+        }
+      },
+      isCrossExposureEnable: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-mention-is-cross-exposure-enable"),
+        renderHTML: (attributes) => {
+          if (!attributes.isCrossExposureEnable) return {};
+          return { "data-mention-is-cross-exposure-enable": attributes.isCrossExposureEnable };
+        }
+      },
+      matchStartPosition: {
+        default: -1,
+        parseHTML: (element) => element.getAttribute("data-mention-match-start-position"),
+        renderHTML: (attributes) => {
+          if (!attributes.matchStartPosition) return {};
+          return { "data-mention-match-start-position": attributes.matchStartPosition };
+        }
+      }
     };
   },
   parseHTML() {
@@ -30500,8 +30599,16 @@ const configureMentionExtension = (api, mfs, store) => {
     },
     renderHTML({ node, suggestion, isFocused }) {
       const char = suggestion?.char ?? "@";
+      const avatar = node?.attrs?.avatar;
+      const type = node?.attrs?.type;
+      const from = node?.attrs?.from;
+      const inThisThread = node?.attrs?.inThisThread;
+      const isCrossExposureEnable = node?.attrs?.isCrossExposureEnable;
+      const matchStartPosition = node?.attrs?.matchStartPosition;
+      const selectId = node?.attrs?.selectId;
       const label = node.attrs.label ?? node.attrs.id;
       const id = node.attrs.id;
+      const name = node?.attrs?.name;
       const isRNWebView = isReactNativeWebView();
       const mentionClasses = char === "@" ? "inline-block rounded italic font-medium cursor-pointer transition-all duration-200 text-blue-700 dark:text-blue-300" : "inline-block rounded italic font-medium cursor-pointer transition-all duration-200 text-blue-700 dark:text-blue-300";
       const baseAttributes = {
@@ -30509,6 +30616,17 @@ const configureMentionExtension = (api, mfs, store) => {
         "data-id": id,
         "data-label": label,
         "data-mention-suggestion-char": char,
+        // Newly added attributes
+        "data-mention-id": id,
+        "data-mention-label": label,
+        "data-mention-avatar": avatar,
+        "data-mention-in-this-thread": inThisThread,
+        "data-mention-name": name,
+        "data-mention-select-id": selectId,
+        "data-mention-type": type,
+        "data-mention-from": from,
+        "data-mention-is-cross-exposure-enable": isCrossExposureEnable,
+        "data-mention-match-start-position": matchStartPosition,
         class: mentionClasses
       };
       if (isRNWebView) {
@@ -31811,9 +31929,7 @@ const PostBuilderEditor = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [editor, sessionId, editorTab]);
-  if (!isMounted || !editor) {
-    return /* @__PURE__ */ jsx("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx("div", { className: "animate-pulse", children: "Loading editor..." }) }) });
-  }
+  if (!isMounted || !editor) return /* @__PURE__ */ jsx(EditorSkeleton, {});
   return /* @__PURE__ */ jsx(AnalyticsSessionProvider, { sessionId, editorType: editorTab, placement, children: /* @__PURE__ */ jsxs("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: [
     /* @__PURE__ */ jsx(EditorContext.Provider, { value: providerValue, children: openModal ? /* @__PURE__ */ jsx(
       PostBuilderEditorInstanceWithDialog,
@@ -31850,6 +31966,16 @@ const PostBuilderEditor = ({
     /* @__PURE__ */ jsx(Toaster2, { position: "top-center" })
   ] }) });
 };
+const EditorSkeleton = () => /* @__PURE__ */ jsx("div", { className: "max-w-full w-full", "data-theme": "select-post-builder", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+  /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-40" }),
+  /* @__PURE__ */ jsxs("div", { className: "min-h-60 w-full flex flex-col overflow-hidden rounded-lg border", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-10 rounded-b-none" }),
+    /* @__PURE__ */ jsx(Separator$1, {}),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-44 rounded-none" }),
+    /* @__PURE__ */ jsx(Separator$1, {}),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-[47px] rounded-t-none flex items-center justify-end p-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-20 bg-accent-foreground/20" }) })
+  ] })
+] }) });
 const translationFallback = {
   // General
   addKey: "Add",

package/package.json

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