{"_id":"@databilitytech/mentions-text-field","_rev":"4-a727224fe9102653a89c8ca5184e8c50","name":"@databilitytech/mentions-text-field","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@databilitytech/mentions-text-field","version":"1.0.0","_id":"@databilitytech/mentions-text-field@1.0.0","maintainers":[{"name":"databilitytech","email":"npm@izooto.com"}],"dist":{"shasum":"ba41a555531523a79af9ff56a728d7ecbe52b167","tarball":"https://registry.npmjs.org/@databilitytech/mentions-text-field/-/mentions-text-field-1.0.0.tgz","fileCount":9,"integrity":"sha512-rL4IpBtsW4EMuhzUJPY8EoVJjcMnzUpT7zXeGV88ZyNVE+7yC7wVAkWUNeo6qgMCQVqt/J/43dBu/JnArhzTjg==","signatures":[{"sig":"MEUCIA4E/9YDxTQXRmkSc/dPBZcncuMBaw8yRLHR/I86iREtAiEA9qXK7AwC7l2GlIfE42dNPLKKtAOb28BGmhvpMU3hQdM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86479},"main":"dist/index.umd.js","type":"module","module":"dist/index.es.js","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"databilitytech","email":"npm@izooto.com"},"description":"--- ## ✨ Features","directories":{},"dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.5","react":"18.2.0","eslint":"^9.33.0","globals":"^16.3.0","react-dom":"18.2.0","@eslint/js":"^9.33.0","emoji-mart":"^5.6.0","@types/react":"^19.1.10","@emoji-mart/data":"^1.2.1","@types/react-dom":"^19.1.7","@emoji-mart/react":"^1.1.1","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","emoji-mart":"^5.6.0","@emoji-mart/data":"^1.2.1","@emoji-mart/react":"^1.1.1"},"_npmOperationalInternal":{"tmp":"tmp/mentions-text-field_1.0.0_1757589446576_0.07437219298123576","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@databilitytech/mentions-text-field","version":"1.0.1","_id":"@databilitytech/mentions-text-field@1.0.1","maintainers":[{"name":"databilitytech","email":"npm@izooto.com"}],"dist":{"shasum":"5c451905688216733c18c466edb2dac50cd11b85","tarball":"https://registry.npmjs.org/@databilitytech/mentions-text-field/-/mentions-text-field-1.0.1.tgz","fileCount":9,"integrity":"sha512-QcJ3yb3jeef8yfnFmcdHxamutDTvHiZYyN1XnXg1jzl+Epv/B0bSb09CyDWUBjz8UW/Uktm+TFtjWGSoOw5uLA==","signatures":[{"sig":"MEUCIQCB8KTIUz21llsRtHeWoL8a+whfSNMB9hlmZU5XkUFk2QIgIG5BKXHtU4zPl5lXs8N8Llq62BwMK05Ih2IQzmjmoD4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86432},"main":"dist/index.umd.js","type":"module","module":"dist/index.es.js","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"databilitytech","email":"npm@izooto.com"},"description":"--- ## ✨ Features","directories":{},"dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.5","react":"18.2.0","eslint":"^9.33.0","globals":"^16.3.0","react-dom":"18.2.0","@eslint/js":"^9.33.0","emoji-mart":"^5.6.0","@types/react":"^19.1.10","@emoji-mart/data":"^1.2.1","@types/react-dom":"^19.1.7","@emoji-mart/react":"^1.1.1","@vitejs/plugin-react":"^5.0.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","emoji-mart":"^5.6.0","@emoji-mart/data":"^1.2.1","@emoji-mart/react":"^1.1.1"},"_npmOperationalInternal":{"tmp":"tmp/mentions-text-field_1.0.1_1757592925497_0.6310079653354572","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@databilitytech/mentions-text-field","version":"1.0.3","main":"dist/index.umd.js","module":"dist/index.es.js","type":"module","scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"@emoji-mart/data":"^1.2.1","@emoji-mart/react":"^1.1.1","emoji-mart":"^5.6.0","react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@emoji-mart/data":"^1.2.1","@emoji-mart/react":"^1.1.1","@eslint/js":"^9.33.0","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react":"^5.0.0","emoji-mart":"^5.6.0","eslint":"^9.33.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","react":"18.2.0","react-dom":"18.2.0","vite":"^7.1.5"},"dependencies":{},"_id":"@databilitytech/mentions-text-field@1.0.3","gitHead":"03950f5558da9e29acf68144a06209baf6d8a215","description":"--- ## ✨ Features","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-dVm+jqC3OzazabgRUAIqZw9oBIExIiPj08/9HDGYqo8fKk1j4ih0HxqTt7jQXuvqr1zytwkkdH5HUL2gJNrR5A==","shasum":"dcc39053357b4cc5a1a060b3fb1d89f3c20c2126","tarball":"https://registry.npmjs.org/@databilitytech/mentions-text-field/-/mentions-text-field-1.0.3.tgz","fileCount":7,"unpackedSize":86432,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDuzEIVG1BjZxE83mbVkqhGIfxC4IV2RoHAtbwb71b1cQIhANweGPZCBkm3/Ph7YH0WQcqjNG+D5p+Cq/5SOmg6GziS"}]},"_npmUser":{"name":"databilitytech","email":"npm@izooto.com"},"directories":{},"maintainers":[{"name":"databilitytech","email":"npm@izooto.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mentions-text-field_1.0.3_1759209832799_0.314079904610824"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-11T11:17:26.575Z","modified":"2025-09-30T05:23:53.154Z","1.0.0":"2025-09-11T11:17:26.770Z","1.0.1":"2025-09-11T12:15:25.701Z","1.0.3":"2025-09-30T05:23:52.977Z"},"description":"--- ## ✨ Features","maintainers":[{"name":"databilitytech","email":"npm@izooto.com"}],"readme":"# React + Vite + MentionsTextField\n---\n## ✨ Features\n\n- ✅ Custom Mentions Editor (`MentionsTextField`).\n- ✅ Emoji support with emoji-mart.\n- ✅ Mentions input with dynamic tags like `@tag`.\n- ✅ Customize styling of mentionList,MentionListItem,editor,container.\n- ✅ Customize your mention as `@tag` or `@tag[input_field]`.\n\n---\n\n## Example\n\n```jsx\nimport { useCallback, useState } from \"react\"\nimport MentionsTextField from '@databilitytech//mentions-text-field'\n\nfunction Example() {\n  const [mentionValues, setMentionsValues] = useState({ add_to_cart: \"value of cart\" })\n  const [value, setValue] = useState(\"\");\n\n  const mentionTags = ['add_to_cart', 'price', 'flying_to']\n  const onContentChange = useCallback((text, html) => {\n    setValue(text)\n  }, [])\n  const onMentionValueChange = useCallback((id, value) => {\n    setMentionsValues((prevMentions) => ({\n      ...prevMentions,\n      [id]: value\n    }));\n  }, [])\n\n  const initialValues = {\n    mentionFieldValue1: '',\n    mentionFieldValue2: ''\n  }\n\n  const handleBlur = () => {\n\n  }\n\n  return (\n    <div style={{ margin: \"10rem\" }}>\n       \n       <div style={{margin:'1rem' ,width:\"30rem\"}}>\n        <MentionsTextField\n          editorId='mentionFieldValue'\n          mentionTags={mentionTags}\n          initialContent={initialValues.mentionFieldValue1}\n          placeholder='Type your message...'\n          showEmoji\n          onContentChange={(text, html) => onContentChange(text, html)}\n          onValidationChange={(isValid, error) => {}}\n          onMentionValueChange={onMentionValueChange}\n          className=''\n          disabled={false}\n          showMentionInput\n          mentionValues={mentionValues}\n          onBlur={handleBlur}\n          error={''}\n        />\n       </div>\n\n        \n      <div style={{margin:'1rem' ,width:\"30rem\"}}>\n        <MentionsTextField\n          editorId='mentionFieldValue2'\n          mentionTags={mentionTags}\n          initialContent={initialValues.mentionFieldValue2}\n          placeholder='Type your message...'\n          // showEmoji\n          onContentChange={(text, html) => { }}\n          onValidationChange={(isValid, error) => {}}\n          onMentionValueChange={onMentionValueChange}\n          className=''\n          disabled={false}\n          mentionValues={mentionValues}\n          onBlur={(e) => { }}\n          error=''\n          isUrlField\n          style = {{containerStyle : {\n            backgroundColor:'red'\n          },\n           editorStyle : {\n            backgroundColor : \"yellow\"\n           },\n           mentionListStyle : {\n             backgroundColor:\"white\"\n           },\n           mentionItemStyle : {\n            backgroundColor : \"grey\",\n           },\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default Example\n\n```\n\n\n\n\n\n\n| Prop Name              | Type                        | Required | Default | Description                                                      |\n| ---------------------- | --------------------------- | -------- | ------- | ---------------------------------------------------------------- |\n| `editorId`             | `string`                    | ✅        | —       | A unique ID for the editor instance.                             |\n| `mentionTags`          | `string[]`                  | ✅        | —       | Array of mention tags (e.g., `['@tag1', '@tag2']`).              |\n| `onContentChange`      | `(text, html) => void`      | ✅        | —       | Callback when content changes.                                   |\n| `onValidationChange`   | `(arg1, arg2) => void`      | ✅        | —       | Callback to return validation state.                             |\n| `onMentionValueChange` | `(id: string, val: string)` | ✅        | —       | Called when a mention input value is changed.                    |\n| `mentionValues`        | `object`                    | ✅        | `{}`    | Object storing values of all mentions with `@inputField`.        |\n| `showMentionInput`     | `boolean`                   | ❌        | `false` | If `true`, renders mentions like `@tag[input field]`.            |\n| `showEmoji`            | `boolean`                   | ❌        | `false` | If `true`, enables emoji support in the editor.                  |\n| `disabled`             | `boolean`                   | ❌        | `false` | If `true`, disables the editor.                                  |\n| `error`                | `string`                    | ❌        | `''`    | Displays error message if any.                                   |\n| `onBlur`               | `() => void`                | ❌        | —       | Callback when the editor loses focus.                            |\n| `style`                | `object`                    | ❌        | —       | Inline styles for the editor container.                        |\n| `isUrlField`           | `boolean`                   | ❌        | `false` | If `true`, treats input as URL (styling or behavior may differ). |\n","readmeFilename":"README.md"}