docstar-env-autosuggest 0.1.25

package/README.md

@@ -0,0 +1,176 @@
+# Variable Autosuggest NPM
+
+A React component that provides variable autosuggestion functionality with a rich text editor-like interface. This component allows users to type variables within curly braces `{{}}` and get intelligent suggestions based on predefined variables.
+
+## Features
+
+- 🔍 Real-time variable suggestions as you type
+- 🎯 Smart variable detection within curly braces
+- 💡 Tooltip display for variable details on hover
+- ⌨️ Keyboard navigation support (Arrow Up/Down, Enter)
+- 📋 Copy-paste support with variable preservation
+- 🎨 Customizable styling
+- 📱 Responsive design
+- 🔒 Disable mode support
+
+## Installation
+
+```bash
+npm install env-autosuggest
+```
+
+## Usage
+
+```jsx
+import React, { useRef } from 'react';
+import AutoSuggest from 'variable-autosuggest-npm';
+
+function App() {
+  const contentEditableDivRef = useRef(null);
+  
+  const suggestions = {
+    "apiKey": {
+      "initialValue": "",
+      "currentValue": "",
+      "scope": "Global"
+    },
+    "userToken": {
+      "initialValue": "token12345abcdef",
+      "currentValue": "token67890ghijkl",
+      "scope": "Private"
+    },
+    "apiUrl": {
+      "initialValue": "https://api.example.com",
+      "currentValue": "https://api.tech.com",
+      "scope": "Global"
+    },
+    "username": {
+      "initialValue": "user_one",
+      "currentValue": "user_two",
+      "scope": "Global"
+    },
+    "password": {
+      "initialValue": "pass1234",
+      "currentValue": "securePass5678",
+      "scope": "Private"
+    },
+    "sessionToken": {
+      "initialValue": "sdfg6789asdf1234",
+      "currentValue": "qwerty1234uiop5678",
+      "scope": "Private"
+    }
+  };
+
+  const handleValueChange = () => {
+    // Handle value changes here
+    console.log(contentEditableDivRef.current.innerText);
+  };
+
+  return (
+    <AutoSuggest
+      suggestions={suggestions}
+      contentEditableDivRef={contentEditableDivRef}
+      initial=""
+      handleValueChange={handleValueChange}
+      disable={false}
+      placeholder="Type {{ to see suggestions"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `suggestions` | Object | Yes | Object containing variable suggestions with their metadata (initialValue, currentValue, scope) |
+| `contentEditableDivRef` | Ref | Yes | React ref for the content editable div |
+| `initial` | String | No | Initial content of the editor |
+| `handleValueChange` | Function | No | Callback function triggered on content change |
+| `disable` | Boolean | No | Disables the editor when true |
+| `placeholder` | String | No | Placeholder text when editor is empty |
+
+## Suggestion Format
+
+The suggestions object should follow this structure:
+
+```javascript
+{
+  "variableName": {
+    "initialValue": string,    // Original/default value
+    "currentValue": string,    // Current/modified value
+    "scope": string           // Scope of the variable (e.g., "Global", "Private")
+  }
+}
+```
+
+### Example Suggestion Object
+```javascript
+{
+  "apiKey": {
+    "initialValue": "",
+    "currentValue": "",
+    "scope": "Global"
+  },
+  "userToken": {
+    "initialValue": "token12345abcdef",
+    "currentValue": "token67890ghijkl",
+    "scope": "Private"
+  }
+}
+```
+
+## Features in Detail
+
+### Variable Suggestions
+- Type `{{` to trigger suggestions
+- Use arrow keys to navigate through suggestions
+- Press Enter to select a suggestion
+- Suggestions are filtered based on what you type after `{{`
+- Each suggestion shows its scope and current value in the tooltip
+
+### Variable Display
+- Variables are displayed within curly braces
+- Hover over variables to see their details in a tooltip
+- Variables are preserved during copy-paste operations
+- Tooltip shows:
+  - Variable name
+  - Current value
+  - Initial value
+  - Scope
+
+### Keyboard Navigation
+- ↑ (Arrow Up): Navigate to previous suggestion
+- ↓ (Arrow Down): Navigate to next suggestion
+- Enter: Select current suggestion
+- Type to filter suggestions
+
+## Styling
+
+The component comes with default styles but can be customized using CSS classes:
+
+- `.parent-div`: Main container
+- `.main__div`: Editor container
+- `.__custom-autosuggest-block__`: Content editable area
+- `.placeholder-editable-div`: Placeholder container
+- `.disable-div`: Applied when editor is disabled
+- `.__suggestions__container__`: Suggestions dropdown container
+- `.suggestion-item-div`: Individual suggestion item
+- `.__main__suggestion__container__`: Main suggestions list container
+
+## Author
+
+👨‍💻 **Idris Bohra**
+
+- LinkedIn: [idris-bohra](https://linkedin.com/in/idris-bohra)
+- GitHub: [idris-bohra](https://github.com/idris-bohra)
+
+Feel free to connect with me for any questions, suggestions, or collaboration opportunities!
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT

package/build/index.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e={94:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".parent-div {\n    position: relative;\n    max-height: 36px;\n    min-height: 36px;\n    box-sizing: border-box;\n    width: 100%;\n}\n\n.main__div {\n    width: 100%;\n    min-height: 36px;\n    top: 0px;\n    background-color: white;\n    border: 1px solid rgba(0, 0, 0, 0.1215686275);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-wrap: nowrap;\n    outline: none;\n    position: absolute;\n    box-sizing: border-box;\n    font-family: 'Inter';\n    &:focus-within {\n        border: 1px solid rgba(11, 10, 10, 0.57);\n        height: fit-content;\n        z-index: 98;\n    }\n}\n\n.main__div:focus-within .auto-suggest {\n    overflow: unset !important;\n    height: fit-content;\n}\n\n.main__div:focus-within .auto-suggest .__custom-autosuggest-block__ {\n    overflow: visible !important;\n    height: fit-content;\n    white-space: normal;\n    word-break: break-all;\n    z-index: 98;\n}\n\n.auto-suggest {\n    font-size: 12px;\n    height: 16px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    margin: 7px;\n    overflow-x: auto;\n    overflow-y: hidden;\n}\n\n.__custom-autosuggest-block__ {\n    outline: none;\n    height: 100%;\n    width: 100%;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    z-index: 1;\n}\n\n.__custom-autosuggest-block__::-webkit-scrollbar {\n    display: none;\n}\n\n.placeholder-editable-div {\n    width: 100%;\n    position: absolute;\n    font-size: 12px;\n    color: rgba(128, 128, 128, 0.5);\n    display: flex;\n    justify-content: start;\n    align-items: center;\n}\n\n.placeholder-text {\n    font-family: 'Inter';\n    margin: 7px;\n}\n\nspan[variable-block] {\n    background-color: transparent;\n    color: orangered;\n    z-index: 1;\n    display: inline-block;\n}\n\nspan[text-block] {\n    background-color: transparent;\n    z-index: 1;\n    display: inline-block;\n}\n\nspan[variable-block]:hover {\n    color: rgb(255, 153, 0);\n    transition: .2s;\n}\n\n.disable-div {\n    background-color: rgba(174, 169, 169, 0.2);\n    cursor: not-allowed;\n    opacity: 0.75;\n}",""]);const s=a},702:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".__suggestions__container__ {\n    display: flex;\n    position: absolute;\n    font-size: 12px;\n    background-color: #F9F9F9;\n    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;\n    z-index: 100;\n    font-family: 'Inter';\n}\n\n.suggestion-item-div {\n    cursor: pointer;\n    padding: 4px 8px;\n}\n\n.__main__suggestion__container__ {\n    flex-direction: column;\n    display: flex;\n    border-right: 1px solid rgba(128, 128, 128, 0.2);\n    max-height: 200px;\n    min-height: 200px;\n    min-width: 130px;\n    overflow: scroll;\n}",""]);const s=a},60:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".suggestionValueMainContainer {\n    word-wrap: break-word;\n    margin: 0px 10px;\n    max-height: 200px;\n    min-width: 200px;\n    max-width: 200px;\n    z-index: 99;\n    font-family: 'Inter';\n}\n\n.suggestionTypeContainer {\n    display: flex;\n    align-items: flex-start;\n    justify-content: flex-start;\n    margin: 10px 0px;\n}\n\n.suggestionType {\n    color: grey;\n    font-weight: 200;\n    font-size: 10px;\n    min-width: 60px;\n}\n\n.suggestionTypeValue {\n    font-weight: 300;\n    font-size: 10px;\n    flex-grow: 1;\n    word-wrap: break-word;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 5;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.spacing-block {\n    padding: 10px;\n}\n\n.warning-description {\n    font-size: 10px;\n    color: grey;\n    margin-left: 4px;\n    margin-top: 2px;\n}\n\n.warning-title {\n    display: flex;\n    align-items: center;\n    margin-left: 2px;\n    font-size: 14px;\n    font-weight: 500;\n\n    >span {\n        margin-left: 4px;\n    }\n}",""]);const s=a},782:(e,t,n)=>{n.d(t,{A:()=>s});var r=n(601),o=n.n(r),i=n(314),a=n.n(i)()(o());a.push([e.id,".__tooltip-container__ {\n    font-size: 12px;\n    padding: 4px;\n    margin: 4px;\n    border-radius: 4px;\n    position: absolute;\n    max-width: 320px;\n    height: fit-content;\n    word-wrap: break-word;\n    display: block;\n    background-color: #F9F9F9;\n    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;\n    z-index: 10000;\n    font-family: 'Inter';\n}",""]);const s=a},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s<this.length;s++){var l=this[s][0];null!=l&&(a[l]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);r&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var i={},a=[],s=0;s<e.length;s++){var l=e[s],c=r.base?l[0]+r.base:l[0],u=i[c]||0,d="".concat(c," ").concat(u);i[c]=u+1;var f=n(d),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==f)t[f].references++,t[f].updater(p);else{var g=o(p,r);r.byIndex=s,t.splice(s,0,{identifier:d,updater:g,references:1})}a.push(d)}return a}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var s=n(i[a]);t[s].references--}for(var l=r(e,o),c=0;c<i.length;c++){var u=n(i[c]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}i=l}}},659:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={id:r,exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var r={};n.r(r),n.d(r,{default:()=>K});const o=require("react");var i=n.n(o);function a(e){const t=window.getSelection();if(0===t.rangeCount)return null;const n=t.getRangeAt(0),r=n.cloneRange();return r.selectNodeContents(e),r.setEnd(n.endContainer,n.endOffset),r?.toString()?.length}function s(e,t){const n=window.getSelection(),r=document.createRange();let o=0;const i=e=>{if(e?.nodeType===Node.TEXT_NODE){const i=o+e?.length;if(t<=i)return r.setStart(e,t-o),r.collapse(!0),n.removeAllRanges(),n.addRange(r),!0;o=i}else for(let t=0;t<e?.childNodes?.length;t++)if(i(e?.childNodes[t]))return!0;return!1};i(e)}function l(e){return/^\{\{.*\}\}$/.test(e)}function c(){const e=document.createElement("span");return e.setAttribute("text-block",!0),e}function u(){const e=document.createElement("span");return e.setAttribute("variable-block",!0),e}const d=e=>null==e||"string"!=typeof e||""===e.trim()||(e=e.trim()).startsWith("<span")?e:e.split(/(\{\{[^\}]+\}\})/g).filter((e=>""!==e)).map((e=>e.startsWith("{{")&&e.endsWith("}}")?`<span variable-block='true'>${e}</span>`:`<span text-block='true'>${e}</span>`)).join("");function f(e){const t=window.getSelection();if(0===t.rangeCount)return null;const n=t.getRangeAt(0).cloneRange(),r=document.createElement("span");r.style.position="absolute",r.style.visibility="hidden",r.style.height="0px",n.insertNode(r);const o=r.getBoundingClientRect(),i={left:o.left,top:o.top+16,right:o.right,bottom:o.bottom};return r.parentNode?.removeChild(r),i}var p={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},g=o.createContext&&o.createContext(p),m=["attr","size","title"];function b(){return b=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},b.apply(this,arguments)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function x(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){var r,o,i,a;r=e,o=t,i=n[t],(o="symbol"==typeof(a=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(o))?a:a+"")in r?Object.defineProperty(r,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function v(e){return e&&e.map(((e,t)=>o.createElement(e.tag,x({key:t},e.attr),v(e.child))))}function y(e){return t=>o.createElement(w,b({attr:x({},e.attr)},t),v(e.child))}function w(e){var t=t=>{var n,{attr:r,size:i,title:a}=e,s=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)){if(t.indexOf(r)>=0)continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,m),l=i||t.size||"1em";return t.className&&(n=t.className),e.className&&(n=(n?n+" ":"")+e.className),o.createElement("svg",b({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,r,s,{className:n,style:x(x({color:e.color||t.color},t.style),e.style),height:l,width:l,xmlns:"http://www.w3.org/2000/svg"}),a&&o.createElement("title",null,a),e.children)};return void 0!==g?o.createElement(g.Consumer,null,(e=>t(e))):t(p)}function E(e){return y({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0V0z"},child:[]},{tag:"path",attr:{d:"M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"},child:[]}]})(e)}var A=n(72),N=n.n(A),k=n(825),S=n.n(k),T=n(659),C=n.n(T),O=n(56),_=n.n(O),P=n(540),R=n.n(P),j=n(113),I=n.n(j),M=n(60),D={};function z(e){let{singleSuggestionDetails:t}=e;return t?i().createElement("div",{className:"suggestionValueMainContainer"},i().createElement("div",{className:"suggestionTypeContainer"},i().createElement("div",{className:"suggestionType"},"INITIAL"),i().createElement("div",{className:"suggestionTypeValue"},t?.initialValue?.trim()?t?.initialValue:"NA")),i().createElement("div",{className:"suggestionTypeContainer"},i().createElement("div",{className:"suggestionType"},"CURRENT"),i().createElement("div",{className:"suggestionTypeValue"},t?.currentValue?.trim()?t?.currentValue:"NA"))):i().createElement("div",{className:"suggestionValueMainContainer"},i().createElement("div",{className:"spacing-block"},i().createElement("div",{className:"warning-title"},i().createElement(E,{color:"red",size:22}),i().createElement("span",null,"Unresolved Variable")),i().createElement("div",{className:"warning-description"},"Make sure the variable is in current Environement")))}D.styleTagTransform=I(),D.setAttributes=_(),D.insert=C().bind(null,"head"),D.domAPI=S(),D.insertStyleElement=R(),N()(M.A,D),M.A&&M.A.locals&&M.A.locals;var B=n(702),L={};function V(e){const t=(0,o.useRef)([]),n=(0,o.useRef)(),[r,a]=(0,o.useState)({top:"",left:""});function s(){const t=Object.keys(e?.filteredSuggestions)[e?.suggestionIndex],n=e.filteredSuggestions[t];return i().createElement(z,{singleSuggestionDetails:n})}return(0,o.useEffect)((()=>{t.current[e.suggestionIndex]&&t.current[e.suggestionIndex].scrollIntoView({behavior:"auto",block:"nearest",inline:"start"})}),[e.suggestionIndex]),(0,o.useEffect)((()=>{window.innerWidth;const t=window.innerWidth,r=n?.current?.getBoundingClientRect()?.width;if(e?.caretPosition.left+r>=t-10){const n=e?.caretPosition.left+r-t;a({top:e?.caretPosition?.top,left:e?.caretPosition?.left-n-20})}else a({...e?.caretPosition})}),[e?.filteredSuggestions,e?.caretPosition]),i().createElement(i().Fragment,null,Object.keys(e?.filteredSuggestions||{})?.length>0&&i().createElement("div",{ref:n,className:"__suggestions__container__",style:{top:`${r.top}px`,left:`${r.left}px`}},i().createElement("div",{className:"__main__suggestion__container__"},Object.keys(e?.filteredSuggestions).map(((n,r)=>i().createElement("div",{key:r,ref:e=>function(e,n){t.current[n]=e}(e,r),onMouseDown:()=>e?.insertSuggestion(n),onMouseEnter:()=>(t=>{e?.setSuggestionIndex(t)})(r),className:"suggestion-item-div",style:{backgroundColor:e?.suggestionIndex===r?"rgba(128, 128, 128, 0.1)":"transparent"}},n)))),i().createElement(s,null)))}L.styleTagTransform=I(),L.setAttributes=_(),L.insert=C().bind(null,"head"),L.domAPI=S(),L.insertStyleElement=R(),N()(B.A,L),B.A&&B.A.locals&&B.A.locals;var H=n(782),q={};function F(e){const t=(0,o.useRef)(),[n,r]=(0,o.useState)(e?.tooltipPosition);return(0,o.useEffect)((()=>{window.innerWidth;const n=window.innerWidth,o=t.current.getBoundingClientRect().width;if(e?.tooltipPosition.left+o>=n-10){const t=e?.tooltipPosition.left+o-n;r({top:e?.tooltipPosition?.top,left:e?.tooltipPosition?.left-t-20})}else r({...e?.tooltipPosition})}),[e?.tooltipPosition]),i().createElement("div",{class:"__tooltip-container__",ref:t,style:{top:`${n.top+18}px`,left:`${n.left}px`}},i().createElement(z,{singleSuggestionDetails:e?.tooltipVariableDetails}))}q.styleTagTransform=I(),q.setAttributes=_(),q.insert=C().bind(null,"head"),q.domAPI=S(),q.insertStyleElement=R(),N()(H.A,q),H.A&&H.A.locals&&H.A.locals;const $=require("react-dom");var W=n(94),U={};U.styleTagTransform=I(),U.setAttributes=_(),U.insert=C().bind(null,"head"),U.domAPI=S(),U.insertStyleElement=R(),N()(W.A,U),W.A&&W.A.locals&&W.A.locals;const K=function(e){let{suggestions:t,contentEditableDivRef:n,initial:r,handleValueChange:p,disable:g,placeholder:m}=e;const b=(0,o.useRef)(null),h=(0,o.useRef)(t||{}),[x,v]=(0,o.useState)({left:0,right:0,top:0,bottom:0}),[y,w]=(0,o.useState)({left:0,right:0,top:0,bottom:0}),[E,A]=(0,o.useState)(null),[N,k]=(0,o.useState)(!1),[S,T]=(0,o.useState)(!1),[C,O]=(0,o.useState)(t||{}),[_,P]=(0,o.useState)(null),[R,j]=(0,o.useState)(0),[I,M]=(0,o.useState)(!0);function D(){T(!1),k(!1),j(0)}(0,o.useEffect)((()=>{const e=n?.current;if(e)return e.addEventListener("blur",D),()=>{e.removeEventListener("blur",D)}}),[n]),(0,o.useEffect)((()=>{h.current=t}),[t]),(0,o.useEffect)((()=>{const e=n?.current;e&&(e.innerHTML=r,W(),L(),U())}),[r]);const z=(0,o.useCallback)((e=>{const t=e.target,n=(r=t.innerText||t.textContent).startsWith("{{")&&r.endsWith("}}")?r.slice(2,-2):r;var r;const o=t.getBoundingClientRect();A(h?.current?.[n]),w(o),b.current=setTimeout((()=>{k(!0),T(!1),j(0)}),500)}),[]),B=(0,o.useCallback)((()=>{clearTimeout(b.current),k(!1)}),[]),L=(0,o.useCallback)((()=>{H();const e=n.current;if(!e)return;const t=e.querySelectorAll('span[variable-block="true"]');0!==t.length&&Array.from(t)?.forEach((e=>{e.addEventListener("mouseenter",z),e.addEventListener("mouseleave",B)}))}),[z,B]),H=(0,o.useCallback)((()=>{const e=n.current;if(!e)return;const t=e.querySelectorAll('span[text-block="true"]');Array.from(t)?.forEach((e=>{e.removeEventListener("mouseenter",z)}))}),[z,B]);function q(e){const t=window.getSelection(),r=t.getRangeAt(0),o=t.anchorNode,i=o.parentNode,a=i.parentNode,{textBefore:s,textAfter:l}=function(e,t){const n=window.getSelection().getRangeAt(0);let r=e;null!==t&&(r=e.slice(0,n.startOffset-t?.length)+e.slice(n.startOffset));const o=e.slice(0,n.startOffset),i=o.lastIndexOf("{");let a=o.lastIndexOf("{");for(;a>=0&&"{"===r[a];)a--;return{textBefore:r.substring(0,a+1),textAfter:r.substring(i+1)}}(o.wholeText,_),d=c(),f=u(),g=c();f.innerText=`{{${e}}}`,d.innerText=s,g.innerText=l,s&&a?.insertBefore(d,i),a?.insertBefore(f,i),l&&a?.insertBefore(g,i),a?.removeChild(i),r.setStartAfter(f,0),r.setEndAfter(f,f.textContent.length),t.removeAllRanges(),T(!1),j(0),r.collapse(!1),t.addRange(r),setTimeout((()=>n.current.focus())),L(),W(),U(),p&&p()}const W=()=>{const e=n.current.querySelectorAll("span");Array.from(e)?.forEach((e=>{if(e.querySelector("br")){const t=e.querySelector("br");t?.parentNode===e&&e.parentNode===n.current&&n?.current?.removeChild(e)}0===e.innerText.length&&e.parentNode===n.current&&n?.current?.removeChild(e)}))};function U(){return 0===n?.current?.innerText?.length?M(!0):0!=n?.current?.innerText?.length&&!0===I?M(!1):void 0}return i().createElement(i().Fragment,null,i().createElement("div",{className:"parent-div"},i().createElement("div",{className:"main__div "+(g?"disable-div":"")},I&&!g?i().createElement("div",{className:"placeholder-editable-div"},i().createElement("span",{className:"placeholder-text"},m)):null,i().createElement("div",{className:"auto-suggest"},i().createElement("div",{ref:n,className:"__custom-autosuggest-block__",onKeyDown:e=>{"ArrowUp"===e.key&&function(e){if(e.preventDefault(),0===R)return j(Object.keys(C).length-1);j((e=>e-1))}(e),"ArrowDown"===e.key&&function(e){if(e.preventDefault(),R===Object.keys(C).length-1)return j(0);j((e=>e+1))}(e),"Enter"===e.key&&function(e){e.preventDefault(),R>-1&&S&&q(Object.keys(C)[R])}(e)},onKeyUp:e=>{const n=window.getSelection().anchorNode,r=n?.parentNode;if("{"===e.key&&n?.parentNode.getAttribute("text-block")){const e=f();v(e),k(!1),T(!0),O(t)}!e.key.match(/^[\x20-\x7E]$/)&&r?.getAttribute("variable-block")&&e.preventDefault()},contentEditable:!0!==g,onInput:e=>{const r=a(n.current),o=window.getSelection(),i=o.getRangeAt(0),g=o.anchorNode,m=g.parentNode,b=m.parentNode,h=e.target.innerText;if(0===h.length)return T(!1),void k(!1);if(1===h.length&&"\n"!=h)return function(e){const t=window.getSelection(),r=document.createRange(),o=c();o.innerText=e,n.current.innerText="",n.current.appendChild(o),r.setStart(o,o.textContent.length),t.removeAllRanges(),r.collapse(!1),t.addRange(r),U(),p&&p(),L()}(h);if(g.parentNode.getAttribute("text-block")&&function(){const e=function(){const e=window.getSelection(),t=e.getRangeAt(0),n=e.anchorNode,r=n.wholeText?.slice(0,t.startOffset),o=r?.lastIndexOf("{"),i=n.textContent?.slice(o+1,t.startOffset);return-1!==o?i:null}();if(e){k(!1),P(e);const t=f();v(t),T(!0)}else P(null),T(!1);const n=function(e,t){const n={};if(!e)return t;const r=e?.toLowerCase();for(const e in t)e?.toLowerCase()?.includes(r)&&(n[e]=t[e]);return 0===Object.keys(n).length?{}:n}(e,t)||{};j(0),0===Object.keys(n||{})?.length&&T(!1),O(n||{})}(),m.getAttribute("variable-block"))if(l(g?.textContent?.slice(0,-1))){const e=c(),t=u();e.innerText=g.textContent[g.textContent.length-1],t.innerText=g.textContent.slice(0,-1),b?.insertBefore(t,m),b?.insertBefore(e,m),b?.removeChild(m),i.setStart(e,e.textContent.length),o.removeAllRanges(),i.collapse(!1),o.addRange(i)}else if(l(g?.textContent?.slice(1))){const e=c(),t=u();e.innerText=g.textContent[0],t.innerText=g.textContent.slice(1),b?.insertBefore(e,m),b?.insertBefore(t,m),b?.removeChild(m),i.setStart(e,e.textContent.length),o.removeAllRanges(),i.collapse(!0),o.addRange(i)}let x="";Array.from(b?.childNodes)?.forEach((e=>{if(e.nodeType===Node.ELEMENT_NODE){if(e.getAttribute("text-block"))return;l(e?.textContent)||(e.setAttribute("text-block",!0),e.removeAttribute("variable-block"),x=e?.textContent)}H()})),""!=x&&(()=>{const e=window.getSelection().anchorNode.parentNode,t=d(e.innerText),n=document.createElement("div");n.innerHTML=t;const r=e.parentNode;Array.from(n.childNodes).forEach((t=>{r.insertBefore(t,e)})),r.removeChild(e)})(),(()=>{const e=n.current,t=Array.from(e.querySelectorAll("span"));let r=[],o=0;for(;o<t.length;){let e=t[o];if("text-block"===e.attributes[0]?.name&&e.getAttribute("text-block")){let n=e.textContent;for(o++;o<t.length&&"text-block"===t[o].attributes[0]?.name&&t[o].getAttribute("text-block");)n+=t[o].textContent,o++;let i=document.createElement("span");i.setAttribute("text-block",!0),i.textContent=n,r.push(i)}else r.push(e),o++}e.innerHTML="",r.forEach((t=>{e.appendChild(t)}))})(),(e=>{let t="",n=[];Array.from(e.current?.childNodes)?.forEach((e=>{if(t+=e.outerHTML,e.nodeType===Node.ELEMENT_NODE&&e.getAttribute("text-block")){let r=e.outerHTML.split("").reverse().join(""),o=r.lastIndexOf("{{"),i=r.indexOf("}}");if(-1!==o){let e=t.length-o;n.push({type:"open",index:e})}if(-1!==i){let e=t.length-i;n.push({type:"close",index:e})}}})),n.sort(((e,t)=>e.index-t.index));let r,o,i=0,a=n.length-1;for(;i<=a;){const e=n[i],t=n[a];if("open"===e.type&&"close"===t.type){r=e.index,o=t.index;break}"open"!==e.type&&i++,"close"!==t.type&&a--}if(r>0&&o>0){r-=2;let n=t.substring(r,o);n=`<span text-block='true'>${n}</span>`;let i=(s=n,(new DOMParser).parseFromString(s,"text/html").body.innerText.trim());i=`</span><span id='dynamic' variable-block='true'>${i}</span><span text-block='true'>`,t=t.substring(0,r)+i+t.substring(o),e.current.innerHTML=t;const a=e.current.querySelector("#dynamic"),l=window.getSelection(),c=document.createRange();c.setStartAfter(a),c.setEndAfter(a),c.collapse(!1),l.removeAllRanges(),l.addRange(c),a.removeAttribute("id")}var s})(n),s(n.current,r),L(),W(),U(),p&&p()},onPaste:e=>{e.preventDefault();const t=window.getSelection(),r=t.getRangeAt(0);if(r.startOffset!=r.endOffset&&((()=>{const e=window.getSelection();if(!e.rangeCount)return;const t=e.getRangeAt(0),n=t.startContainer,r=t.endContainer,o=t.startOffset,i=t.endOffset;let a,s;if(n===r){const e=n.textContent,t=e.substring(0,o)+e.substring(i);n.textContent=t,a=n,s=o}else{let e=n.parentNode.nextSibling;for(;e&&e!==r.parentNode;){let t=e.nextSibling;e.parentNode.removeChild(e),e=t}const t=n.textContent.substring(0,o);n.textContent=t;const l=r.textContent.substring(i);r.textContent=l,a=n,s=o}const l=document.createRange();e.removeAllRanges(),l.setStart(a,s),l.setEnd(a,s),e.addRange(l)})(),""===n.current.innerText)){let t=(e.clipboardData||window.clipboardData).getData("text");if(!t||0===t.length)return;let r=d(t);return n.current.innerHTML=r,L(),void(p&&p())}Array.from(n.current?.childNodes)?.forEach((e=>{if(e.nodeType===Node.ELEMENT_NODE){if(e.getAttribute("text-block"))return;l(e?.textContent)||(e.setAttribute("text-block",!0),e.removeAttribute("variable-block"))}H()}));const o=a(n.current),i=t?.anchorNode?.parentNode;if(!i)return;if(!n.current)return;let u=(e.clipboardData||window.clipboardData).getData("text");if(!u||0===u.length)return;if(!t.anchorNode?.parentNode?.getAttribute)return;let f=d(u);if(!n.current.innerHTML||""===n.current.innerHTML.trim())return n.current.innerHTML=f,U(),L(),void(p&&p());const g=document.createElement("div");g.innerHTML=f;const m=g.querySelectorAll("span[variable-block='true']"),b=g.querySelectorAll("span"),{textElementAfter:h,textElementBefore:x}=(()=>{const e=window.getSelection(),t=e.anchorOffset,n=e.anchorNode.parentNode,r=n.innerText.substring(0,t),o=n.innerText.substring(t),i=c(),a=c();return i.innerText=r,a.innerText=o,{textElementAfter:a,textElementBefore:i}})();t.anchorNode.parentNode.getAttribute("variable-block")?t.anchorNode.parentNode.getAttribute("variable-block")&&t.anchorOffset>1&&t.anchorOffset<t.anchorNode.parentNode.innerText.length-1?document.execCommand("insertText",!1,u):t.anchorNode.parentNode.getAttribute("variable-block")&&(1===t.anchorOffset||t.anchorOffset>=t.anchorNode.parentNode.innerText.length-1)&&(0===t.anchorOffset?Array.from(b).forEach((e=>{n.current.insertBefore(e,t.anchorNode.parentNode.nextSibling)})):t.anchorOffset>t.anchorNode.parentNode.innerText.length-1?Array.from(b).forEach((e=>{n.current.insertBefore(e,t.anchorNode.parentNode.nextSibling||null)})):(n.current.insertBefore(x,i),Array.from(b).forEach((e=>{n.current.insertBefore(e,i)})),n.current.insertBefore(h,i),n.current.removeChild(i))):0===Array.from(m).length?document.execCommand("insertText",!1,u):n.current.contains(i)&&(n.current.insertBefore(x,i),Array.from(b).forEach((e=>{n.current.insertBefore(e,i)})),n.current.insertBefore(h,i),n.current.removeChild(i)),W(),L(),s(n.current,o),U(),p&&p()}})))),S&&(0,$.createPortal)(i().createElement(V,{setSuggestionIndex:j,suggestionIndex:R,filteredSuggestions:C,caretPosition:x,insertSuggestion:q}),document.getElementById("root")),N&&(0,$.createPortal)(i().createElement(F,{suggestions:t,tooltipPosition:y,tooltipVariableDetails:E}),document.getElementById("root")))};module.exports=r})();

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "docstar-env-autosuggest",
+  "version": "0.1.25",
+  "author": "Idris Bohra",
+  "main": "build/index.js",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^6.7.1",
+    "file-loader": "^6.2.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
+  },
+  "scripts": {
+    "build": "webpack"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "license": "MIT",
+  "files": [
+    "build",
+    "README.md",
+    "package.json"
+  ],
+  "dependencies": {
+    "react-icons": "^5.3.0"
+  },
+  "description": "A React component that provides variable autosuggestion functionality with a rich text editor-like interface. This component allows users to type variables within curly braces and get intelligent suggestions based on predefined variables.",
+  "keywords": [
+    "react",
+    "autosuggest",
+    "variable-suggestions",
+    "rich-text-editor",
+    "curly-braces",
+    "tooltip",
+    "keyboard-navigation"
+  ]
+}