@mojsica/react-mention-input 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,40 @@
-# Temporary Holding Version
+# @mojsica/react-mention-input
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Contenteditable `@` mention input for React with chips and structured `MentionContentSection[]` value.
+
+Shares behavior with [`@mojsica/angular-mention-input`](../../projects/angular-mention-input) via private `@mojsica/mention-core`.
+
+## Install
+
+```bash
+npm i @mojsica/react-mention-input
+```
+
+```ts
+import { MentionInput } from '@mojsica/react-mention-input';
+import '@mojsica/react-mention-input/styles.css';
+```
+
+```tsx
+<MentionInput
+  value={sections}
+  onChange={setSections}
+  users={users}
+  loading={loading}
+  onMentionQueryChange={onQuery}
+/>
+```
+
+## Theming
+
+Map design-system tokens to `--mi-*` CSS variables on a parent (same as Angular).
+
+## Local demo
+
+```bash
+pnpm --filter demo-react dev
+```
+
+## License
+
+MIT

package/dist/MentionInput.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties } from 'react';
+import type { MentionContentSection, MentionUser } from './models';
+import './styles.css';
+export type MentionInputProps = {
+    value?: MentionContentSection[];
+    defaultValue?: MentionContentSection[];
+    onChange?: (value: MentionContentSection[]) => void;
+    users?: MentionUser[];
+    loading?: boolean;
+    clientFilter?: boolean;
+    emptyText?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    errorMessage?: string | null;
+    helperText?: string;
+    className?: string;
+    style?: CSSProperties;
+    onMentionQueryChange?: (query: string) => void;
+    onMentionSelected?: (user: MentionUser) => void;
+    onMentionOpenChange?: (open: boolean) => void;
+};
+export declare function MentionInput({ value, defaultValue, onChange, users, loading, clientFilter, emptyText, placeholder, disabled, hasError, errorMessage, helperText, className, style, onMentionQueryChange, onMentionSelected, onMentionOpenChange, }: MentionInputProps): import("react").JSX.Element;

package/dist/MentionPicker.d.ts

@@ -0,0 +1,13 @@
+import type { MentionUser } from './models';
+export type MentionPickerProps = {
+    users: MentionUser[];
+    search: string;
+    loading?: boolean;
+    clientFilter?: boolean;
+    emptyText?: string;
+    left: number;
+    top: number;
+    onSelect: (user: MentionUser) => void;
+    onClose: () => void;
+};
+export declare function MentionPicker({ users, search, loading, clientFilter, emptyText, left, top, onSelect, onClose, }: MentionPickerProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),f=require("react"),ee=require("react-dom"),_="mi-mention",k="mi-mention-draft";function te(r){const t=window.getSelection();if(!(t!=null&&t.rangeCount))return;const e=t.getRangeAt(0);e.collapsed||e.deleteContents();let i=null;r.forEach(l=>{e.insertNode(l),i=l,e.setStartAfter(l)}),i&&(e.collapse(!0),t.removeAllRanges(),t.addRange(e))}function H(r){const t=[];return r.forEach(e=>{if(e.type==="text"){const i=e.message.split(`
+`);i.forEach((l,a)=>{l&&t.push(document.createTextNode(l)),a<i.length-1&&t.push(document.createElement("br"))})}if(e.type==="mention"){const i=document.createElement("span");i.classList.add(_),i.setAttribute("contenteditable","false"),i.setAttribute("userId",e.userId||""),i.textContent=` @${e.userName} `,t.push(i)}}),t}function W(r){var i;const t=se(r),e=[];return t.childNodes.length===1&&((i=r.childNodes[0])==null?void 0:i.tagName)==="BR"||t.childNodes.forEach(l=>{var a,b;if(l.nodeType===Node.TEXT_NODE){const c=(a=l.textContent)==null?void 0:a.replace(/\u00A0/g," ");c!=null&&c.trim()&&e.push({type:"text",message:c})}if(l.nodeType===Node.ELEMENT_NODE){const c=l;if(c.classList.contains(_)||c.classList.contains("tag-wrap")){const N=c.getAttribute("userId")||"",o=((b=c.textContent)==null?void 0:b.replace(/^\s*@/,"").trim())||"";e.push({type:"mention",userId:N,userName:o})}else c.tagName==="BR"&&e.push({type:"text",message:`
+`})}}),e}function se(r){const t=r.cloneNode(!0),e=i=>{const l=Array.from(i.childNodes);for(const a of l){if(a.nodeType!==Node.ELEMENT_NODE)continue;const b=a,c=b.parentElement;if(!c)continue;const N=b.tagName.toUpperCase();if(N==="DIV"){const o=Array.from(b.childNodes);if(o.length===1&&o[0].nodeType===Node.ELEMENT_NODE&&o[0].tagName==="BR")c.insertBefore(o[0],a),c.removeChild(a),e(c);else{const y=document.createElement("br");for(c.insertBefore(y,a);a.firstChild;)c.insertBefore(a.firstChild,a);c.removeChild(a),e(c)}}else if(N==="SPAN"&&!b.hasAttribute("userId")||N==="FONT"){for(;a.firstChild;)c.insertBefore(a.firstChild,a);c.removeChild(a),e(c)}else if(N==="BR"||N==="SPAN"&&b.hasAttribute("userId")||N==="LIB-MENTION-PICKER")e(a);else{for(;a.firstChild;)c.insertBefore(a.firstChild,a);c.removeChild(a),e(c)}}};return e(t),t}function re(r){const t=window.getSelection();if(!(t!=null&&t.rangeCount))return;const e=t.getRangeAt(0);let i=e.startContainer.childNodes[e.startOffset-1];(i==null?void 0:i.nodeName)==="BR"&&(i=e.startContainer.childNodes[e.startOffset-2]),(i==null?void 0:i.contentEditable)==="false"&&(r.preventDefault(),i.remove())}function ne(r){const t=window.getSelection();if(!(!r||!t))try{const e=document.createRange();e.selectNodeContents(r),e.collapse(!1),t.removeAllRanges(),t.addRange(e)}catch{}}function ie(r){const t=window.getSelection();if(!(t!=null&&t.rangeCount))return;const e=t.getRangeAt(0);e.collapse(!0),e.insertNode(r),e.setStartAfter(r),e.collapse(!0),t.removeAllRanges(),t.addRange(e)}function ce(r){if(!r)return;const t=window.getSelection();t&&requestAnimationFrame(()=>{const e=document.createRange();e.setStartAfter(r),e.collapse(!0),t.removeAllRanges(),t.addRange(e)})}function F(r){var l,a;const t=r.parentNode;if(!t)return;const e=((a=(l=r.childNodes[0])==null?void 0:l.textContent)==null?void 0:a.trim())||"",i=document.createTextNode(e);t.insertBefore(i,r),t.removeChild(r)}function K(r){const t=window.getSelection(),e=(t==null?void 0:t.anchorNode)??null;return e?r===e||r.contains(e):!1}function ae(r){return r.split(/\s+/).filter(Boolean).slice(0,2).map(t=>{var e;return((e=t[0])==null?void 0:e.toUpperCase())??""}).join("")}function V({users:r,search:t,loading:e=!1,clientFilter:i=!0,emptyText:l="No users found",left:a,top:b,onSelect:c,onClose:N}){const o=f.useMemo(()=>{if(!i)return r;const m=t.trim().toLowerCase();return m?r.filter(h=>{var p;return h.name.toLowerCase().includes(m)||(((p=h.email)==null?void 0:p.toLowerCase().includes(m))??!1)}):r},[r,t,i]),[g,y]=f.useState(0);return f.useEffect(()=>{y(0)},[t,o.length]),f.useEffect(()=>{const m=h=>{if(h.key==="Escape"){h.preventDefault(),N();return}o.length&&(h.key==="ArrowDown"?(h.preventDefault(),y(p=>(p+1)%o.length)):h.key==="ArrowUp"?(h.preventDefault(),y(p=>(p-1+o.length)%o.length)):h.key==="Enter"&&(h.preventDefault(),c(o[g])))};return document.addEventListener("keydown",m),()=>document.removeEventListener("keydown",m)},[o,g,N,c]),E.jsx("div",{className:"mi-picker-host",style:{left:a,top:b},role:"listbox",children:E.jsx("div",{className:"mi-picker",children:e?E.jsx("div",{className:"mi-picker__status",children:"Loading…"}):o.length===0?E.jsx("div",{className:"mi-picker__status",children:l}):o.map((m,h)=>E.jsxs("button",{type:"button",className:`mi-user${h===g?" mi-user--active":""}`,role:"option","aria-selected":h===g,onMouseDown:p=>{p.preventDefault(),c(m)},children:[E.jsx("span",{className:"mi-user-avatar","aria-hidden":"true",children:m.avatarUrl?E.jsx("img",{src:m.avatarUrl,alt:""}):ae(m.name)}),E.jsxs("span",{className:"mi-user-meta",children:[E.jsx("span",{className:"mi-user-name",children:m.name}),m.email?E.jsx("span",{className:"mi-user-email",children:m.email}):null]})]},m.id))})})}function J(r,t){return JSON.stringify(r)===JSON.stringify(t)}function le({value:r,defaultValue:t=[],onChange:e,users:i=[],loading:l=!1,clientFilter:a=!0,emptyText:b="No users found",placeholder:c="Write something… use @ to mention",disabled:N=!1,hasError:o=!1,errorMessage:g="",helperText:y="",className:m,style:h,onMentionQueryChange:p,onMentionSelected:j,onMentionOpenChange:w}){const A=f.useRef(null),X=f.useRef(null),L=f.useRef(!1),C=f.useRef([]),[u,T]=f.useState(null),[G,q]=f.useState(!0),$=r!==void 0,B=f.useCallback((n,s)=>{var x;const d=!!s.querySelector(`span.${k}`),v=!!((x=s.textContent)!=null&&x.replace(/\u00A0/g," ").trim());q(n.length===0&&!d&&!v)},[]),D=f.useCallback(()=>{const n=A.current;if(!n)return;const s=W(n);B(s,n),!J(s,C.current)&&(C.current=s,e==null||e(s))},[e,B]),P=f.useCallback(n=>{const s=A.current;if(!s)return;const d=H(n);s.innerHTML="",d.forEach(v=>s.appendChild(v)),C.current=n,B(n,s)},[B]);f.useLayoutEffect(()=>{if(!$){P(t);return}J(r??[],C.current)||P(r??[])},[$,r,t,P]);const I=f.useCallback(n=>{const s=n.getBoundingClientRect(),d=Math.min(Math.max(8,s.left),window.innerWidth-260),v=Math.min(s.bottom+4,window.innerHeight-16);return{left:d,top:Math.max(8,v)}},[]),S=f.useCallback(n=>{if(!L.current)return;L.current=!1;const s=u==null?void 0:u.span;T(null),w==null||w(!1),(n==null?void 0:n.unwrap)!==!1&&(s!=null&&s.isConnected)&&s.classList.contains(k)&&F(s),D()},[u,D,w]),Y=f.useCallback(()=>{if(!A.current||N)return;const s=document.createElement("span");s.className=k,s.contentEditable="true",s.style.position="relative",s.style.display="inline-block",s.appendChild(document.createTextNode("@")),ie(s),ne(s),L.current=!0;const d=I(s);T({span:s,search:"",...d}),q(!1),w==null||w(!0),p==null||p("")},[N,w,p,I]),Z=f.useCallback(n=>{const s=u==null?void 0:u.span;s&&(L.current=!1,s.innerHTML="",s.classList.remove(k),s.classList.add(_),s.contentEditable="false",s.setAttribute("userId",n.id),s.style.position="",s.style.display="",s.appendChild(document.createTextNode(`@${n.name}`)),ce(s),T(null),j==null||j(n),w==null||w(!1),D())},[u,D,w,j]);f.useEffect(()=>{if(!u)return;const n=()=>{if(!L.current)return;if(!K(u.span)){S();return}const x=A.current,R=x==null?void 0:x.querySelector(`span.${k}[contenteditable="true"]`);if(!R){S({unwrap:!1});return}const U=R.innerText??"";if(!U.startsWith("@")){S();return}const z=U.slice(1),M=I(R);T({span:R,search:z,...M}),p==null||p(z)},s=()=>{if(!L.current||!u.span.isConnected)return;const x=window.getSelection();!(x!=null&&x.rangeCount)||!x.anchorNode||K(u.span)||S()},d=()=>{if(!u.span.isConnected)return;const x=I(u.span);T(R=>R&&{...R,...x})},v=A.current;return v==null||v.addEventListener("input",n),document.addEventListener("selectionchange",s),window.addEventListener("resize",d),window.addEventListener("scroll",d,!0),()=>{v==null||v.removeEventListener("input",n),document.removeEventListener("selectionchange",s),window.removeEventListener("resize",d),window.removeEventListener("scroll",d,!0)}},[u,S,p,I]);const O=n=>{var s;if(n.key==="@"){n.preventDefault(),Y();return}if(n.key==="Backspace"){const d=(s=A.current)==null?void 0:s.querySelector(`span.${k}[contenteditable="true"]`);if(d&&d.innerText==="@"){n.preventDefault(),L.current=!1,T(null),w==null||w(!1),F(d),D();return}re(n.nativeEvent)}},Q=n=>{n.preventDefault();const s=n.clipboardData.getData("text/html")||n.clipboardData.getData("text/plain");if(!s)return;const d=document.createElement("div");d.innerHTML=s;const v=W(d),x=H(v);te(x),D()};return E.jsxs("div",{ref:X,className:`mi-editor-wrap${N?" mi-editor-wrap--disabled":""}${m?` ${m}`:""}`,style:h,children:[c&&G?E.jsx("span",{className:"mi-placeholder",children:c}):null,E.jsx("p",{ref:A,className:`mi-editor${o?" mi-editor--error":""}`,contentEditable:!N,suppressContentEditableWarning:!0,onInput:D,onKeyDown:O,onPaste:Q}),o&&g?E.jsx("span",{className:"mi-message mi-message--error",children:g}):y?E.jsx("span",{className:"mi-message",children:y}):null,u?ee.createPortal(E.jsx(V,{users:i,search:u.search,loading:l,clientFilter:a,emptyText:b,left:u.left,top:u.top,onSelect:Z,onClose:()=>S()}),document.body):null]})}exports.MentionInput=le;exports.MentionPicker=V;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { MentionInput } from './MentionInput';
+export type { MentionInputProps } from './MentionInput';
+export { MentionPicker } from './MentionPicker';
+export type { MentionPickerProps } from './MentionPicker';
+export type { MentionContentSection, MentionSection, MentionSectionType, MentionUser, TextSection, } from './models';

package/dist/index.js

@@ -0,0 +1,376 @@
+import { jsx as v, jsxs as q } from "react/jsx-runtime";
+import { useMemo as se, useState as U, useEffect as z, useRef as _, useCallback as D, useLayoutEffect as ne } from "react";
+import { createPortal as ie } from "react-dom";
+const H = "mi-mention", S = "mi-mention-draft";
+function ce(s) {
+  const t = window.getSelection();
+  if (!(t != null && t.rangeCount))
+    return;
+  const e = t.getRangeAt(0);
+  e.collapsed || e.deleteContents();
+  let i = null;
+  s.forEach((o) => {
+    e.insertNode(o), i = o, e.setStartAfter(o);
+  }), i && (e.collapse(!0), t.removeAllRanges(), t.addRange(e));
+}
+function J(s) {
+  const t = [];
+  return s.forEach((e) => {
+    if (e.type === "text") {
+      const i = e.message.split(`
+`);
+      i.forEach((o, a) => {
+        o && t.push(document.createTextNode(o)), a < i.length - 1 && t.push(document.createElement("br"));
+      });
+    }
+    if (e.type === "mention") {
+      const i = document.createElement("span");
+      i.classList.add(H), i.setAttribute("contenteditable", "false"), i.setAttribute("userId", e.userId || ""), i.textContent = ` @${e.userName} `, t.push(i);
+    }
+  }), t;
+}
+function V(s) {
+  var i;
+  const t = ae(s), e = [];
+  return t.childNodes.length === 1 && ((i = s.childNodes[0]) == null ? void 0 : i.tagName) === "BR" || t.childNodes.forEach((o) => {
+    var a, g;
+    if (o.nodeType === Node.TEXT_NODE) {
+      const c = (a = o.textContent) == null ? void 0 : a.replace(/\u00A0/g, " ");
+      c != null && c.trim() && e.push({ type: "text", message: c });
+    }
+    if (o.nodeType === Node.ELEMENT_NODE) {
+      const c = o;
+      if (c.classList.contains(H) || c.classList.contains("tag-wrap")) {
+        const p = c.getAttribute("userId") || "", l = ((g = c.textContent) == null ? void 0 : g.replace(/^\s*@/, "").trim()) || "";
+        e.push({ type: "mention", userId: p, userName: l });
+      } else c.tagName === "BR" && e.push({ type: "text", message: `
+` });
+    }
+  }), e;
+}
+function ae(s) {
+  const t = s.cloneNode(!0), e = (i) => {
+    const o = Array.from(i.childNodes);
+    for (const a of o) {
+      if (a.nodeType !== Node.ELEMENT_NODE)
+        continue;
+      const g = a, c = g.parentElement;
+      if (!c)
+        continue;
+      const p = g.tagName.toUpperCase();
+      if (p === "DIV") {
+        const l = Array.from(g.childNodes);
+        if (l.length === 1 && l[0].nodeType === Node.ELEMENT_NODE && l[0].tagName === "BR")
+          c.insertBefore(l[0], a), c.removeChild(a), e(c);
+        else {
+          const A = document.createElement("br");
+          for (c.insertBefore(A, a); a.firstChild; )
+            c.insertBefore(a.firstChild, a);
+          c.removeChild(a), e(c);
+        }
+      } else if (p === "SPAN" && !g.hasAttribute("userId") || p === "FONT") {
+        for (; a.firstChild; )
+          c.insertBefore(a.firstChild, a);
+        c.removeChild(a), e(c);
+      } else if (p === "BR" || p === "SPAN" && g.hasAttribute("userId") || p === "LIB-MENTION-PICKER")
+        e(a);
+      else {
+        for (; a.firstChild; )
+          c.insertBefore(a.firstChild, a);
+        c.removeChild(a), e(c);
+      }
+    }
+  };
+  return e(t), t;
+}
+function oe(s) {
+  const t = window.getSelection();
+  if (!(t != null && t.rangeCount))
+    return;
+  const e = t.getRangeAt(0);
+  let i = e.startContainer.childNodes[e.startOffset - 1];
+  (i == null ? void 0 : i.nodeName) === "BR" && (i = e.startContainer.childNodes[e.startOffset - 2]), (i == null ? void 0 : i.contentEditable) === "false" && (s.preventDefault(), i.remove());
+}
+function le(s) {
+  const t = window.getSelection();
+  if (!(!s || !t))
+    try {
+      const e = document.createRange();
+      e.selectNodeContents(s), e.collapse(!1), t.removeAllRanges(), t.addRange(e);
+    } catch {
+    }
+}
+function de(s) {
+  const t = window.getSelection();
+  if (!(t != null && t.rangeCount))
+    return;
+  const e = t.getRangeAt(0);
+  e.collapse(!0), e.insertNode(s), e.setStartAfter(s), e.collapse(!0), t.removeAllRanges(), t.addRange(e);
+}
+function ue(s) {
+  if (!s)
+    return;
+  const t = window.getSelection();
+  t && requestAnimationFrame(() => {
+    const e = document.createRange();
+    e.setStartAfter(s), e.collapse(!0), t.removeAllRanges(), t.addRange(e);
+  });
+}
+function X(s) {
+  var o, a;
+  const t = s.parentNode;
+  if (!t)
+    return;
+  const e = ((a = (o = s.childNodes[0]) == null ? void 0 : o.textContent) == null ? void 0 : a.trim()) || "", i = document.createTextNode(e);
+  t.insertBefore(i, s), t.removeChild(s);
+}
+function G(s) {
+  const t = window.getSelection(), e = (t == null ? void 0 : t.anchorNode) ?? null;
+  return e ? s === e || s.contains(e) : !1;
+}
+function fe(s) {
+  return s.split(/\s+/).filter(Boolean).slice(0, 2).map((t) => {
+    var e;
+    return ((e = t[0]) == null ? void 0 : e.toUpperCase()) ?? "";
+  }).join("");
+}
+function me({
+  users: s,
+  search: t,
+  loading: e = !1,
+  clientFilter: i = !0,
+  emptyText: o = "No users found",
+  left: a,
+  top: g,
+  onSelect: c,
+  onClose: p
+}) {
+  const l = se(() => {
+    if (!i)
+      return s;
+    const f = t.trim().toLowerCase();
+    return f ? s.filter(
+      (N) => {
+        var m;
+        return N.name.toLowerCase().includes(f) || (((m = N.email) == null ? void 0 : m.toLowerCase().includes(f)) ?? !1);
+      }
+    ) : s;
+  }, [s, t, i]), [y, A] = U(0);
+  return z(() => {
+    A(0);
+  }, [t, l.length]), z(() => {
+    const f = (N) => {
+      if (N.key === "Escape") {
+        N.preventDefault(), p();
+        return;
+      }
+      l.length && (N.key === "ArrowDown" ? (N.preventDefault(), A((m) => (m + 1) % l.length)) : N.key === "ArrowUp" ? (N.preventDefault(), A((m) => (m - 1 + l.length) % l.length)) : N.key === "Enter" && (N.preventDefault(), c(l[y])));
+    };
+    return document.addEventListener("keydown", f), () => document.removeEventListener("keydown", f);
+  }, [l, y, p, c]), /* @__PURE__ */ v("div", { className: "mi-picker-host", style: { left: a, top: g }, role: "listbox", children: /* @__PURE__ */ v("div", { className: "mi-picker", children: e ? /* @__PURE__ */ v("div", { className: "mi-picker__status", children: "Loading…" }) : l.length === 0 ? /* @__PURE__ */ v("div", { className: "mi-picker__status", children: o }) : l.map((f, N) => /* @__PURE__ */ q(
+    "button",
+    {
+      type: "button",
+      className: `mi-user${N === y ? " mi-user--active" : ""}`,
+      role: "option",
+      "aria-selected": N === y,
+      onMouseDown: (m) => {
+        m.preventDefault(), c(f);
+      },
+      children: [
+        /* @__PURE__ */ v("span", { className: "mi-user-avatar", "aria-hidden": "true", children: f.avatarUrl ? /* @__PURE__ */ v("img", { src: f.avatarUrl, alt: "" }) : fe(f.name) }),
+        /* @__PURE__ */ q("span", { className: "mi-user-meta", children: [
+          /* @__PURE__ */ v("span", { className: "mi-user-name", children: f.name }),
+          f.email ? /* @__PURE__ */ v("span", { className: "mi-user-email", children: f.email }) : null
+        ] })
+      ]
+    },
+    f.id
+  )) }) });
+}
+function Y(s, t) {
+  return JSON.stringify(s) === JSON.stringify(t);
+}
+function Ee({
+  value: s,
+  defaultValue: t = [],
+  onChange: e,
+  users: i = [],
+  loading: o = !1,
+  clientFilter: a = !0,
+  emptyText: g = "No users found",
+  placeholder: c = "Write something… use @ to mention",
+  disabled: p = !1,
+  hasError: l = !1,
+  errorMessage: y = "",
+  helperText: A = "",
+  className: f,
+  style: N,
+  onMentionQueryChange: m,
+  onMentionSelected: B,
+  onMentionOpenChange: h
+}) {
+  const b = _(null), Z = _(null), R = _(!1), C = _([]), [d, T] = U(null), [O, W] = U(!0), j = s !== void 0, P = D((n, r) => {
+    var E;
+    const u = !!r.querySelector(`span.${S}`), w = !!((E = r.textContent) != null && E.replace(/\u00A0/g, " ").trim());
+    W(n.length === 0 && !u && !w);
+  }, []), x = D(() => {
+    const n = b.current;
+    if (!n)
+      return;
+    const r = V(n);
+    P(r, n), !Y(r, C.current) && (C.current = r, e == null || e(r));
+  }, [e, P]), $ = D(
+    (n) => {
+      const r = b.current;
+      if (!r)
+        return;
+      const u = J(n);
+      r.innerHTML = "", u.forEach((w) => r.appendChild(w)), C.current = n, P(n, r);
+    },
+    [P]
+  );
+  ne(() => {
+    if (!j) {
+      $(t);
+      return;
+    }
+    Y(s ?? [], C.current) || $(s ?? []);
+  }, [j, s, t, $]);
+  const k = D((n) => {
+    const r = n.getBoundingClientRect(), u = Math.min(Math.max(8, r.left), window.innerWidth - 260), w = Math.min(r.bottom + 4, window.innerHeight - 16);
+    return { left: u, top: Math.max(8, w) };
+  }, []), I = D(
+    (n) => {
+      if (!R.current)
+        return;
+      R.current = !1;
+      const r = d == null ? void 0 : d.span;
+      T(null), h == null || h(!1), (n == null ? void 0 : n.unwrap) !== !1 && (r != null && r.isConnected) && r.classList.contains(S) && X(r), x();
+    },
+    [d, x, h]
+  ), Q = D(() => {
+    if (!b.current || p)
+      return;
+    const r = document.createElement("span");
+    r.className = S, r.contentEditable = "true", r.style.position = "relative", r.style.display = "inline-block", r.appendChild(document.createTextNode("@")), de(r), le(r), R.current = !0;
+    const u = k(r);
+    T({ span: r, search: "", ...u }), W(!1), h == null || h(!0), m == null || m("");
+  }, [p, h, m, k]), M = D(
+    (n) => {
+      const r = d == null ? void 0 : d.span;
+      r && (R.current = !1, r.innerHTML = "", r.classList.remove(S), r.classList.add(H), r.contentEditable = "false", r.setAttribute("userId", n.id), r.style.position = "", r.style.display = "", r.appendChild(document.createTextNode(`@${n.name}`)), ue(r), T(null), B == null || B(n), h == null || h(!1), x());
+    },
+    [d, x, h, B]
+  );
+  z(() => {
+    if (!d)
+      return;
+    const n = () => {
+      if (!R.current)
+        return;
+      if (!G(d.span)) {
+        I();
+        return;
+      }
+      const E = b.current, L = E == null ? void 0 : E.querySelector(
+        `span.${S}[contenteditable="true"]`
+      );
+      if (!L) {
+        I({ unwrap: !1 });
+        return;
+      }
+      const F = L.innerText ?? "";
+      if (!F.startsWith("@")) {
+        I();
+        return;
+      }
+      const K = F.slice(1), re = k(L);
+      T({ span: L, search: K, ...re }), m == null || m(K);
+    }, r = () => {
+      if (!R.current || !d.span.isConnected)
+        return;
+      const E = window.getSelection();
+      !(E != null && E.rangeCount) || !E.anchorNode || G(d.span) || I();
+    }, u = () => {
+      if (!d.span.isConnected)
+        return;
+      const E = k(d.span);
+      T((L) => L && { ...L, ...E });
+    }, w = b.current;
+    return w == null || w.addEventListener("input", n), document.addEventListener("selectionchange", r), window.addEventListener("resize", u), window.addEventListener("scroll", u, !0), () => {
+      w == null || w.removeEventListener("input", n), document.removeEventListener("selectionchange", r), window.removeEventListener("resize", u), window.removeEventListener("scroll", u, !0);
+    };
+  }, [d, I, m, k]);
+  const ee = (n) => {
+    var r;
+    if (n.key === "@") {
+      n.preventDefault(), Q();
+      return;
+    }
+    if (n.key === "Backspace") {
+      const u = (r = b.current) == null ? void 0 : r.querySelector(
+        `span.${S}[contenteditable="true"]`
+      );
+      if (u && u.innerText === "@") {
+        n.preventDefault(), R.current = !1, T(null), h == null || h(!1), X(u), x();
+        return;
+      }
+      oe(n.nativeEvent);
+    }
+  }, te = (n) => {
+    n.preventDefault();
+    const r = n.clipboardData.getData("text/html") || n.clipboardData.getData("text/plain");
+    if (!r)
+      return;
+    const u = document.createElement("div");
+    u.innerHTML = r;
+    const w = V(u), E = J(w);
+    ce(E), x();
+  };
+  return /* @__PURE__ */ q(
+    "div",
+    {
+      ref: Z,
+      className: `mi-editor-wrap${p ? " mi-editor-wrap--disabled" : ""}${f ? ` ${f}` : ""}`,
+      style: N,
+      children: [
+        c && O ? /* @__PURE__ */ v("span", { className: "mi-placeholder", children: c }) : null,
+        /* @__PURE__ */ v(
+          "p",
+          {
+            ref: b,
+            className: `mi-editor${l ? " mi-editor--error" : ""}`,
+            contentEditable: !p,
+            suppressContentEditableWarning: !0,
+            onInput: x,
+            onKeyDown: ee,
+            onPaste: te
+          }
+        ),
+        l && y ? /* @__PURE__ */ v("span", { className: "mi-message mi-message--error", children: y }) : A ? /* @__PURE__ */ v("span", { className: "mi-message", children: A }) : null,
+        d ? ie(
+          /* @__PURE__ */ v(
+            me,
+            {
+              users: i,
+              search: d.search,
+              loading: o,
+              clientFilter: a,
+              emptyText: g,
+              left: d.left,
+              top: d.top,
+              onSelect: M,
+              onClose: () => I()
+            }
+          ),
+          document.body
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  Ee as MentionInput,
+  me as MentionPicker
+};

package/dist/models.d.ts

@@ -0,0 +1,18 @@
+export type MentionSectionType = 'text' | 'mention';
+export interface TextSection {
+    type: 'text';
+    message: string;
+}
+export interface MentionSection {
+    type: 'mention';
+    userId: string;
+    userName: string;
+    email?: string;
+}
+export type MentionContentSection = TextSection | MentionSection;
+export interface MentionUser {
+    id: string;
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+}

package/dist/styles.css

@@ -0,0 +1 @@
+.mi-editor-wrap{position:relative;display:block}.mi-editor-wrap--disabled{opacity:.65;pointer-events:none}.mi-placeholder{position:absolute;top:12px;left:14px;color:var(--mi-placeholder-color, #9ca3af);pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1}.mi-editor{min-height:var(--mi-editor-min-height, 88px);max-height:180px;overflow:auto;margin:0;padding:12px 14px;border:1px solid var(--mi-editor-border, #d1d5db);border-radius:var(--mi-editor-radius, 8px);background:var(--mi-editor-bg, #fff);outline:none;line-height:1.5;white-space:pre-wrap;word-break:break-word}.mi-editor:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.mi-editor--error{border-color:#ef4444}.mi-editor>*{pointer-events:none}.mi-editor .mi-mention{pointer-events:none;background:var(--mi-mention-bg, #e0e7ff);color:var(--mi-mention-color, #3730a3);border-radius:4px;padding:0 2px;font-weight:500}.mi-editor .mi-mention-draft{pointer-events:auto;color:var(--mi-mention-draft-color, #4f46e5);font-weight:500}.mi-message{display:block;margin-top:4px;font-size:12px;color:#6b7280}.mi-message--error{color:#ef4444}.mi-picker-host{position:fixed;z-index:10000;min-width:240px;max-width:320px}.mi-picker{max-height:240px;overflow:auto;border:1px solid var(--mi-editor-border, #d1d5db);border-radius:var(--mi-editor-radius, 8px);background:var(--mi-picker-bg, #fff);box-shadow:var(--mi-picker-shadow, 0 8px 24px rgba(0, 0, 0, .12));padding:4px}.mi-picker__status{padding:10px 12px;color:#6b7280;font-size:13px}.mi-user{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer}.mi-user:hover,.mi-user--active{background:var(--mi-user-active-bg, #eef2ff)}.mi-user-avatar{width:var(--mi-avatar-size, 28px);height:var(--mi-avatar-size, 28px);border-radius:50%;background:#e5e7eb;color:#374151;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;overflow:hidden;flex-shrink:0}.mi-user-avatar img{width:100%;height:100%;object-fit:cover}.mi-user-meta{display:flex;flex-direction:column;min-width:0}.mi-user-name{font-size:13px;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mi-user-email{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@mojsica/react-mention-input",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Contenteditable @mention input for React with chips and structured sections.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mojsica/mention-input.git",
+    "directory": "packages/react-mention-input"
+  },
+  "keywords": [
+    "react",
+    "mention",
+    "contenteditable",
+    "chips"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18 <21",
+    "react-dom": ">=18 <21"
+  },
+  "devDependencies": {
+    "@mojsica/mention-core": "workspace:*",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "~5.9.2",
+    "vite": "^6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}