Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@walkover/autosuggest-custom

Package Overview
Dependencies
Maintainers
2
Versions
49
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@walkover/autosuggest-custom - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

src/customAutoSuggest/groupedSuggestion/GroupedSuggestion.js
src/customAutoSuggest/SimpleAutoSuggest/SimpleAutoSuggest.js

2

build/index.js

@@ -1,1 +0,1 @@

!function(){"use strict";var e={649:function(e,t,n){var r=n(81),o=n.n(r),i=n(645),a=n.n(i)()(o());a.push([e.id,".suggestionBox::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.editable-div::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.suggestionBox {\r\n display: absolute;\r\n width: auto;\r\n border: 1px solid #ccc;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n max-height: 200px;\r\n height: auto;\r\n overflow: auto;\r\n}\r\n\r\n.editable-div {\r\n border: 1px solid #ccc;\r\n width: 300px;\r\n height: 100px;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n border-radius: 0px;\r\n margin-bottom: 2px;\r\n padding-left: 5px;\r\n overflow: scroll;\r\n}\r\n\r\n.chip {\r\n display: inline-block;\r\n padding: 5px 10px;\r\n margin: 5px;\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n font-family: Arial, sans-serif;\r\n font-size: 14px;\r\n color: #555;\r\n}\r\n\r\nli {\r\n list-style-type: none;\r\n padding: 5px;\r\n}\r\n\r\n.suggestionMainContainer{\r\n display: relative;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n",""]),t.Z=a},645:function(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 u=0;u<this.length;u++){var c=this[u][0];null!=c&&(a[c]=!0)}for(var l=0;l<e.length;l++){var s=[].concat(e[l]);r&&a[s[0]]||(void 0!==i&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=i),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:function(e){e.exports=function(e){return e[1]}},379:function(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=[],u=0;u<e.length;u++){var c=e[u],l=r.base?c[0]+r.base:c[0],s=i[l]||0,f="".concat(l," ").concat(s);i[l]=s+1;var d=n(f),p={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var v=o(p,r);r.byIndex=u,t.splice(u,0,{identifier:f,updater:v,references:1})}a.push(f)}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 u=n(i[a]);t[u].references--}for(var c=r(e,o),l=0;l<i.length;l++){var s=n(i[l]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}i=c}}},569:function(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)}},216:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:function(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:function(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)}}}},589:function(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=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(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=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(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={};!function(){n.r(r),n.d(r,{default:function(){return x}});var e=require("react"),t=n.n(e),o=n(379),i=n.n(o),a=n(795),u=n.n(a),c=n(569),l=n.n(c),s=n(565),f=n.n(s),d=n(216),p=n.n(d),v=n(589),g=n.n(v),m=n(649),h={};function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,a,u=[],c=!0,l=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(u.push(r.value),u.length!==t);c=!0);}catch(e){l=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(l)throw o}}return u}}(e,t)||function(e,t){if(e){if("string"==typeof e)return y(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}h.styleTagTransform=g(),h.setAttributes=f(),h.insert=l().bind(null,"head"),h.domAPI=u(),h.insertStyleElement=p(),i()(m.Z,h),m.Z&&m.Z.locals&&m.Z.locals;var x=function(n){var r=n.id,o=n.suggestion,i=n.chipClass,a=n.editableDivClass,u=n.suggestionBoxClass,c=n.onEnterBtnEvent,l=n.getInputValueWithContext,s=n.setHtml,f=n.setText,d=n.defaultValue,p=n.disAble,v=o||[],g=(0,e.useRef)(),m=(0,e.useRef)(),h=b((0,e.useState)([]),2),y=h[0],x=h[1],w=b((0,e.useState)(-1),2),C=w[0],S=w[1],T=b((0,e.useState)(),2),E=T[0],N=T[1],A=b((0,e.useState)({left:0,top:0}),2),M=A[0],O=A[1],k=b((0,e.useState)(""),2),I=(k[0],k[1],function(){if(g.current){var e=g.current.innerHTML,t=document.createElement("div");t.innerHTML=e;for(var n=t.getElementsByTagName("span"),r=n.length-1;r>=0;r--){var o=n[r];if(o.getAttribute("walkover-attribute")){var i=o.getAttribute("data-attribute")+" ",a=document.createTextNode(i);o.parentNode.replaceChild(a,o)}}var u=t.innerText;s&&s((function(){return e})),f&&f(u),l&&l(u,e)}}),B=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,u=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var c,l,s,f=document.createElement("span");f.className=i||"chip",f.contentEditable="false",f.textContent=e.name,f.setAttribute("walkover-attribute",e.content),f.setAttribute("data-attribute",e.content);var d=a.nodeValue.substring(0,u),p=a.nodeValue.substring(u,a.nodeValue.length),v=d.lastIndexOf(E),m=a.nodeValue.substring(0,v),h=document.createTextNode(m);a.parentNode.insertBefore(h,a),a.parentNode.insertBefore(f,a),(1===(null===(c=p.substring(0,1))||void 0===c?void 0:c.length)&&" "!==(null===(l=p)||void 0===l?void 0:l.substring(0,1))||0===(null===(s=p.substring(0,1))||void 0===s?void 0:s.length))&&(p=" "+p);var b=document.createTextNode(p);a.parentNode.insertBefore(b,a),t=b,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}I(),x([]),setTimeout((function(){g.current&&g.current.focus()}))};return(0,e.useEffect)((function(){g.current&&(g.current.innerHTML=d||"")}),[]),t().createElement("div",{ref:m,className:"suggestionMainContainer",style:{position:"relative"}},t().createElement("div",{id:r||"",contentEditable:!0!==p,ref:g,onKeyDown:function(e){if("ArrowUp"===e.key)e.preventDefault(),S((function(e){return-1===e?y.length-1:Math.max(0,e-1)}));else if("ArrowDown"===e.key)e.preventDefault(),S((function(e){return e===y.length-1?-1:Math.min(y.length-1,e+1)}));else if("Enter"===e.key){e.preventDefault();var t=y[C];t?(B(t),S(-1)):c&&c()}},onInput:function(e){!function(e){if(g.current||0!==g.current.innerText.length){I();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=r.trim(),i=function(){if(m.current||g.current){var e=m.current,t=g.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var i=o.getBoundingClientRect(),a=e.getBoundingClientRect(),u=o.getBoundingClientRect().height;return{left:i.left-a.left,top:i.top-a.top+u}}}();O(i);var a=(o=r.split(/ |\u00A0/))[o.length-1];if(0!==a.length){N(a);var u=v.filter((function(e){var t;return null==e||null===(t=e.name)||void 0===t?void 0:t.toLowerCase().startsWith(a.trim().toLowerCase())}));x(u),S(-1)}}else x([])}()},className:a||"editable-div",suppressContentEditableWarning:!0}),t().createElement("div",{className:u||"suggestionBox",style:{position:"absolute",left:M.left,top:M.top,zIndex:100,opacity:y.length>0?1:0}},null==y?void 0:y.map((function(e,n){return t().createElement("li",{key:n,style:{background:C===n?"#D3D3D3":"",cursor:"pointer"},onMouseDown:function(){return B(e)},onClick:function(){return B(e)}},e.name)}))))}}(),module.exports=r}();
!function(){"use strict";var e={649:function(e,t,n){var r=n(81),o=n.n(r),a=n(645),i=n.n(a)()(o());i.push([e.id,"/* COMMON CLASSES FOR BOTH GROUPED AND SIMPLE AUTOSUGGEST */\r\n.suggestionBox::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.editable-div::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n.suggestionBox {\r\n display: absolute;\r\n width: auto;\r\n border: 1px solid #ccc;\r\n background-color: #f9f9f9;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n max-height: 70vh;\r\n height: auto;\r\n overflow: auto;\r\n}\r\n\r\n.editable-div {\r\n border: 1px solid #ccc;\r\n width: 300px;\r\n height: 100px;\r\n font-family: Arial, sans-serif;\r\n font-size: 16px;\r\n border-radius: 0px;\r\n margin-bottom: 2px;\r\n padding-left: 5px;\r\n overflow: scroll;\r\n}\r\n\r\n.chip {\r\n display: inline-block;\r\n padding: 5px 10px;\r\n margin: 5px;\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n font-family: Arial, sans-serif;\r\n font-size: 14px;\r\n color: #555;\r\n}\r\n\r\n.suggestionMainContainer {\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\r\n.hoverValueContainer {\r\n position: absolute !important;\r\n right: 102% !important;\r\n top: 5px !important;\r\n min-width: 100px !important;\r\n max-width: 200px !important;\r\n padding: 10px !important;\r\n word-wrap: break-word;\r\n color: white;\r\n background-color: rgb(31, 32, 30);\r\n font-size: 14px !important;\r\n border-radius: 5px;\r\n z-index: 30;\r\n}\r\n\r\n/* SIMPLE AUTO-SUGGESTIONS CLASSES */\r\n.listSuggestionContainerForSimpleAutosuggest {\r\n list-style-type: none;\r\n font-size: 16px;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainerForSimpleAutosuggest:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}\r\n\r\n.listSuggestionTag{\r\n font-size: 16px !important;\r\n}\r\n\r\n.listSuggestionTagContent{\r\n font-size: 12px !important;\r\n}\r\n\r\n/* GROUPED SUGGESTIONS CLASSES */\r\n.listSuggestions {\r\n list-style-type: none;\r\n font-size: 16px !important;\r\n padding: 0px 0px 0px 17px;\r\n}\r\n\r\n.valueContent {\r\n font-size: 12px !important;\r\n list-style-type: none;\r\n margin: 0px 0px 0px 17px;\r\n}\r\n\r\n.ulTag {\r\n font-size: 21px !important;\r\n padding: 5px;\r\n background-color: black;\r\n color: white;\r\n width: 100% !important;\r\n}\r\n\r\n.listSuggestionContainer {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 5px;\r\n}\r\n\r\n.listSuggestionContainer:hover {\r\n background-color: rgb(128, 128, 128, 0.5);\r\n}",""]),t.Z=i},645:function(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,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var u=0;u<this.length;u++){var l=this[u][0];null!=l&&(i[l]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),o&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=o):s[4]="".concat(o)),t.push(s))}},t}},81:function(e){e.exports=function(e){return e[1]}},379:function(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 a={},i=[],u=0;u<e.length;u++){var l=e[u],c=r.base?l[0]+r.base:l[0],s=a[c]||0,f="".concat(c," ").concat(s);a[c]=s+1;var d=n(f),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var g=o(p,r);r.byIndex=u,t.splice(u,0,{identifier:f,updater:g,references:1})}i.push(f)}return i}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 a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var u=n(a[i]);t[u].references--}for(var l=r(e,o),c=0;c<a.length;c++){var s=n(a[c]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}a=l}}},569:function(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)}},216:function(e){e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:function(e,t,n){e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:function(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 a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:function(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 a=t[r]={id:r,exports:{}};return e[r](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(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=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(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={};!function(){n.r(r),n.d(r,{default:function(){return T}});var e=require("react"),t=n.n(e);function o(){return o=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},o.apply(this,arguments)}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,u=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw o}}return u}}(e,t)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function u(n){var r,i=n.id,u=n.suggestion,l=n.chipClass,c=n.editableDivClass,s=n.suggestionBoxClass,f=n.onEnterBtnEvent,d=n.getInputValueWithContext,p=n.setHtml,g=n.setText,v=n.defaultValue,m=n.disable,h=u||[],b=(0,e.useRef)(),y=(0,e.useRef)(),x=a((0,e.useState)([]),2),S=x[0],w=x[1],E=a((0,e.useState)(-1),2),N=E[0],C=E[1],A=a((0,e.useState)(),2),T=A[0],O=A[1],k=a((0,e.useState)({left:0,top:0}),2),M=k[0],R=k[1],B=a((0,e.useState)(""),2),j=B[0],I=B[1];(0,e.useEffect)((function(){b.current&&(b.current.innerHTML=v||"")}),[]),(0,e.useEffect)((function(){var e=l||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){D(e)})),n.forEach((function(e){L(e)}))}),[null==b||null===(r=b.current)||void 0===r?void 0:r.innerText.length]);var D=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?I(e.target.getAttribute("walkover-attribute")):I("")}))},L=function(e){e.addEventListener("mouseleave",(function(){I("")}))},V=function(){if(b.current){var e=b.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){p&&p((function(){return t})),g&&g(e),d&&d(e,t)}(t.innerText,e)}},z=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,i=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var u,c,s,f=document.createElement("span");f.className=l||"chip",f.contentEditable="false",f.textContent=e.name,f.setAttribute("walkover-attribute",e.content),f.setAttribute("data-attribute",e.content);var d=a.nodeValue.substring(0,i),p=a.nodeValue.substring(i,a.nodeValue.length),g=d.lastIndexOf(T),v=a.nodeValue.substring(0,g),m=document.createTextNode(v);a.parentNode.insertBefore(m,a),a.parentNode.insertBefore(f,a),(1===(null===(u=p.substring(0,1))||void 0===u?void 0:u.length)&&" "!==(null===(c=p)||void 0===c?void 0:c.substring(0,1))||0===(null===(s=p.substring(0,1))||void 0===s?void 0:s.length))&&(p=" "+p);var h=document.createTextNode(p);a.parentNode.insertBefore(h,a),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}V(),w([]),setTimeout((function(){b.current&&b.current.focus()}))},U={ref:y,className:"suggestionMainContainer"},P={id:i||"",contentEditable:!0!==m,ref:b,className:c||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){var t,n,r,o,a;"ArrowUp"===e.key?(e.preventDefault(),C((function(e){return-1===e?S.length-1:Math.max(0,e-1)}))):"ArrowDown"===e.key?(e.preventDefault(),C((function(e){return e===S.length-1?-1:Math.min(S.length-1,e+1)}))):"Enter"===e.key&&(e.preventDefault(),(t=S[N])?(z(t),C(-1)):f?f():(n=b.current,r=window.getSelection(),o=r.getRangeAt(0),a=document.createElement("br"),o.insertNode(a),o.setStartAfter(a),o.collapse(!0),r.removeAllRanges(),r.addRange(o),n.normalize(),n.focus()))},onInput:function(e){!function(e){if(b.current&&0===b.current.innerText.length)return w([]);V();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(y.current||b.current){var e=y.current,t=b.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var a=o.getBoundingClientRect(),i=e.getBoundingClientRect(),u=o.getBoundingClientRect().height;return{left:a.left-i.left,top:a.top-i.top+u}}}();R(o);var a=r.split(/ |\u00A0/),i=a[a.length-1];if(0!==i.length){O(i);var u=h.filter((function(e){var t;return null==e||null===(t=e.name)||void 0===t?void 0:t.toLowerCase().startsWith(i.trim().toLowerCase())}));w(u),C(-1)}}()}},H={position:"absolute",left:M.left,top:M.top,opacity:Object.entries(S).length>0?1:0,zIndex:100},G=function(e){return{background:N===e?"#D3D3D3":"",cursor:"pointer"}};return t().createElement("div",o({},U,{style:{position:"relative"}}),t().createElement("div",P),j.length>0&&t().createElement("div",{className:"hoverValueContainer"},j),t().createElement("div",{className:s||"suggestionBox",style:H},null==S?void 0:S.map((function(e,n){return function(e,n){return t().createElement("div",o({},function(e,t){return{key:t,className:"listSuggestionContainerForSimpleAutosuggest",onMouseDown:function(){return z(e)},onClick:function(){return z(e)}}}(e,n),{style:G(n)}),t().createElement("div",{className:"listSuggestionTag"}," ",e.name," "),t().createElement("div",{className:"listSuggestionTagContent"}," ",e.content," "))}(e,n)}))))}function l(){return l=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},l.apply(this,arguments)}function c(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,u=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(u.push(r.value),u.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw o}}return u}}(e,t)||s(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function s(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function d(n){var r,o=n.id,a=n.suggestion,i=n.chipClass,u=n.editableDivClass,f=n.suggestionBoxClass,d=n.onEnterBtnEvent,p=n.getInputValueWithContext,g=n.setHtml,v=n.setText,m=n.defaultValue,h=n.disable,b=a||[],y=(0,e.useRef)(),x=(0,e.useRef)(),S=c((0,e.useState)({}),2),w=S[0],E=S[1],N=c((0,e.useState)(-1),2),C=N[0],A=N[1],T=c((0,e.useState)(),2),O=T[0],k=T[1],M=c((0,e.useState)({left:0,top:0}),2),R=M[0],B=M[1],j=c((0,e.useState)(""),2),I=j[0],D=j[1];(0,e.useEffect)((function(){y.current&&(y.current.innerHTML=m||"")}),[]),(0,e.useEffect)((function(){var e=i||"chip",t=document.getElementsByClassName(e),n=Array.from(t);n.forEach((function(e){L(e)})),n.forEach((function(e){V(e)}))}),[null==y||null===(r=y.current)||void 0===r?void 0:r.innerText.length]);var L=function(e){e.addEventListener("mouseenter",(function(e){e.target.getAttribute("walkover-attribute")?D(e.target.getAttribute("walkover-attribute")):D("")}))},V=function(e){e.addEventListener("mouseleave",(function(){D("")}))},z=function(){if(y.current){var e=y.current.innerHTML,t=document.createElement("div");t.innerHTML=e,function(e){for(var t=e.length-1;t>=0;t--){var n=e[t];if(n.getAttribute("walkover-attribute")){var r=n.getAttribute("data-attribute")+" ",o=document.createTextNode(r);n.parentNode.replaceChild(o,n)}}}(t.getElementsByTagName("span")),function(e,t){g&&g((function(){return t})),v&&v(e),p&&p(e,t)}(t.innerText,e)}};var U=function(e){if(y.current&&0===y.current.innerText.length)return E([]);z();var t=window.getSelection(),n=t.anchorOffset,r=t.anchorNode.textContent.substring(0,n).trim(),o=function(){if(x.current||y.current){var e=x.current,t=y.current,n=window.getSelection(),r=document.createRange();r.selectNodeContents(t),r.setEnd(n.anchorNode,n.anchorOffset);var o=r.cloneRange();o.collapse(!1);var a=o.getBoundingClientRect(),i=e.getBoundingClientRect(),u=o.getBoundingClientRect().height;return{left:a.left-i.left,top:a.top-i.top+u}}}();B(o);var a=r.split(/ |\u00A0/),i=a[a.length-1];if(0!==i.length){k(i);var u=function(e,t){var n,r={},o=function(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=s(e))){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return i=e.done,e},e:function(e){u=!0,a=e},f:function(){try{i||null==n.return||n.return()}finally{if(u)throw a}}}}(e);try{for(o.s();!(n=o.n()).done;){var a=n.value;a.name.includes(t)&&(r[a.groupName]||(r[a.groupName]=[]),r[a.groupName].push(a))}}catch(e){o.e(e)}finally{o.f()}return r}(b,i.trim().toLowerCase());E(u),A(-1)}},P=function(e){var t,n,r,o=window.getSelection(),a=o.anchorNode,u=o.anchorOffset;if(a&&a.nodeType===Node.TEXT_NODE){var l,c,s,f=document.createElement("span");f.className=i||"chip",f.contentEditable="false",f.textContent=e.name,f.setAttribute("walkover-attribute",e.content),f.setAttribute("data-attribute",e.content);var d=a.nodeValue.substring(0,u),p=a.nodeValue.substring(u,a.nodeValue.length),g=d.lastIndexOf(O),v=a.nodeValue.substring(0,g),m=document.createTextNode(v);a.parentNode.insertBefore(m,a),a.parentNode.insertBefore(f,a),(1===(null===(l=p.substring(0,1))||void 0===l?void 0:l.length)&&" "!==(null===(c=p)||void 0===c?void 0:c.substring(0,1))||0===(null===(s=p.substring(0,1))||void 0===s?void 0:s.length))&&(p=" "+p);var h=document.createTextNode(p);a.parentNode.insertBefore(h,a),t=h,0,e.name.length,n=document.createRange(),r=window.getSelection(),n.setStart(t,0),n.collapse(!0),r.removeAllRanges(),r.addRange(n),a.parentNode.removeChild(a)}z(),E([]),setTimeout((function(){y.current&&y.current.focus()}))},H={ref:x,className:"suggestionMainContainer"},G={id:o||"",contentEditable:!0!==h,ref:y,className:u||"editable-div",suppressContentEditableWarning:!0,onKeyDown:function(e){var t,n,r,o,a;"ArrowUp"===e.key?A((function(e){return-1===e?w.length-1:Math.max(0,e-1)})):"ArrowDown"===e.key?A((function(e){return e===w.length-1?-1:Math.min(w.length-1,e+1)})):"Enter"===e.key&&(e.preventDefault(),(t=w[C])?(P(t),A(-1)):d?d():(n=y.current,r=window.getSelection(),o=r.getRangeAt(0),a=document.createElement("br"),o.insertNode(a),o.setStartAfter(a),o.collapse(!0),r.removeAllRanges(),r.addRange(o),n.normalize(),n.focus()))},onInput:function(e){U()}},F={position:"absolute",left:R.left,top:R.top,opacity:Object.entries(w).length>0?1:0,zIndex:100},_=function(e,t){return{key:t,className:"listSuggestionContainer",onMouseDown:function(){return P(e)},onClick:function(){return P(e)}}};return t().createElement("div",l({},H,{style:{position:"relative"}}),t().createElement("div",G),I.length>0&&t().createElement("div",{className:"hoverValueContainer"},I),t().createElement("div",{className:f||"suggestionBox",style:F},Object.entries(w).map((function(e){var n=c(e,2);return function(e,n){return t().createElement("div",{className:"groupBlock",key:e},t().createElement("div",{className:"ulTag"},e),function(e){return e.map((function(e,n){return t().createElement("div",_(e,n),t().createElement("span",{className:"listSuggestions"},e.name),t().createElement("span",{className:"valueContent"},e.content))}))}(n))}(n[0],n[1])}))))}var p=n(379),g=n.n(p),v=n(795),m=n.n(v),h=n(569),b=n.n(h),y=n(565),x=n.n(y),S=n(216),w=n.n(S),E=n(589),N=n.n(E),C=n(649),A={};A.styleTagTransform=N(),A.setAttributes=x(),A.insert=b().bind(null,"head"),A.domAPI=m(),A.insertStyleElement=w(),g()(C.Z,A),C.Z&&C.Z.locals&&C.Z.locals;var T=function(e){return null!=e&&e.groupByGroupName?t().createElement(d,e):t().createElement(u,e)}}(),module.exports=r}();

2

package.json
{
"name": "@walkover/autosuggest-custom",
"version": "0.2.7",
"version": "0.3.0",
"author": "walkover-web",

@@ -5,0 +5,0 @@ "main": "build/index.js",

146

README.md
## CustomAutoSuggest
CustomAutoSuggest is a React component that provides auto-suggestion functionality for an editable text input. It allows users to type in text and suggests possible completions based on a provided list of suggestions.
The "CustomAutoSuggest" React component enhances an editable text input by providing auto-suggestion functionality. It empowers users to type text and receive suggestions for possible completions based on a provided list of suggestions.
One notable feature of CustomAutoSuggest is the ability for users to group their suggestions using group names. This grouping functionality allows users to organize and categorize their suggestions for a more organized and intuitive experience. Additionally, CustomAutoSuggest also supports using suggestions without grouping, providing flexibility to accommodate different use cases.
For a comprehensive understanding of the component and its capabilities, it is recommended to thoroughly read the accompanying documentation and example.
## Installation

@@ -35,3 +39,4 @@ You can install the CustomAutoSuggest component using npm:

defaultValue={defaultValue}
disAble={false}
disable={false}
groupByGroupName={false}
/>

@@ -60,10 +65,12 @@

- onEnterBtnEvent (optional): Function handles the event when enter button is pressed on Input Field.
- onEnterBtnEvent (optional): The function handles the event that occurs when the enter button is pressed on the input field. If the user has not provided the "onEnterBtnEvent" function, the default behavior for the input text will be to move to a new line.
- defaultValue (optional): The initial value of the editable div.
- disAble (optional) : It is used to make the Editable Div disable.
- disable (boolean): Set to true to disable the auto-suggestion feature.
- groupByGroupName (boolean): Set to true to group the suggestions by their group names.
### Example
Here's an example usage of the CustomAutoSuggest component:
Here's an example usage of the Simple CustomAutoSuggest component:

@@ -86,9 +93,121 @@ ```

const suggestions = [
{ name: 'Apple', content: 'Fruit' },
{ name: 'Banana', content: 'Fruit' },
{ name: 'Carrot', content: 'Vegetable' },
{ name: 'Tomato', content: 'Fruit/Vegetable' },
];
const getInputValueWithContext = (convertedHtmlCode, htmlCode) => {
// Handle the converted input value and HTML code
console.log('Converted Value:', convertedHtmlCode);
console.log('HTML Code:', htmlCode);
setdefaultValue(htmlCode);
}
const handleEnterBtn = ()=>{
console.log('Handled Enter Btn');
}
return (
<div style={{ display: 'flex', justifyContent: 'center' }} >
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<CustomAutoSuggest
id={'editableDivid'}
suggestion={suggestionWithGroups}
chipClass="chip"
editableDivClass="editable-div"
suggestionBoxClass="suggestionBox"
setHtml={setHtml}
setText={setText}
onEnterBtnEvent={handleEnterBtn}
getInputValueWithContext={getInputValueWithContext}
defaultValue={defaultValue}
disable={false}
groupByGroupName={false}
/>
</div>
</div>
</div>
);
};
export default MyComponent;
```
### Example
Here's an example usage of the Grouped CustomAutoSuggest component:
```
import React from 'react';
import CustomAutoSuggest from '@walkover/autosuggest-custom';
const MyComponent = () => {
const [defaultValue, setdefaultValue] = useState("Start Typing");
const [html, setHtml] = useState("");
const [text, setText] = useState("");
const suggestionWithGroups = [
{ name: 'blocks', groupName: 'blocks', content: 'context.blocks' },
{
name: 'current_time',
groupName: 'blocks',
content: 'context.blocks.current_time'
},
{
name: 'type',
groupName: 'blocks',
content: 'context.blocks.send_sms.type'
},
{
name: 'code',
groupName: 'blocks',
content: 'context.blocks.send_sms.code'
},
{
name: 'add_to_spreadsheet',
groupName: 'blocks',
content: 'context.blocks.add_to_spreadsheet'
},
{
name: 'type',
groupName: 'blocks',
content: 'context.blocks.add_to_spreadsheet.type'
},
{
name: 'code',
groupName: 'blocks',
content: 'context.blocks.add_to_spreadsheet.code'
},
{
name: 'add_to_airtable',
groupName: 'blocks',
content: 'context.blocks.add_to_airtable'
},
{
name: 'type',
groupName: 'blocks',
content: 'context.blocks.add_to_airtable.type'
},
{
name: 'code',
groupName: 'blocks',
content: 'context.blocks.add_to_airtable.code'
},
{
name: 'non_nested_key',
groupName: 'blocks',
content: 'context.blocks.non_nested_key'
},
{
name: 'another_non_nested_key',
groupName: 'blocks',
content: 'context.blocks.another_non_nested_key'
},
{ name: 'order', groupName: 'order', content: 'context.order' },
{ name: 'root', groupName: 'order', content: 'context.order.root' },
{
name: 'check_time_condition',
groupName: 'order',
content: 'context.order.check_time_condition'
},
{ name: 'order2', groupName: 'order2', content: 'context.order2' },
{ name: 'root', groupName: 'order2', content: 'context.order2.root' }
]
const getInputValueWithContext = (convertedHtmlCode, htmlCode) => {

@@ -111,3 +230,3 @@ // Handle the converted input value and HTML code

id={'editableDivid'}
suggestion={suggestions}
suggestion={suggestionWithGroups}
chipClass="chip"

@@ -121,2 +240,4 @@ editableDivClass="editable-div"

defaultValue={defaultValue}
disable={false}
groupByGroupName={true}
/>

@@ -132,3 +253,4 @@ </div>

```
## Credits
The CustomAutoSuggest component was developed by [Tanish Jain](https://www.linkedin.com/in/tanish-jain-bb87b5203/) and [Idris Bohra](https://www.linkedin.com/in/idris-bohra-89715616b/)

195

src/customAutoSuggest/CustomAutoSuggest.js

@@ -1,193 +0,10 @@

/* eslint-disable */
import React, { useState, useRef, useEffect } from 'react';
import React from 'react';
import SimpleAutoSuggest from './SimpleAutoSuggest/SimpleAutoSuggest';
import GroupedSuggestion from './groupedSuggestion/GroupedSuggestion';
import './customAutoSuggest.css';
const CustomAutoSuggest = ({ id, suggestion, chipClass, editableDivClass, suggestionBoxClass, onEnterBtnEvent, getInputValueWithContext, setHtml, setText, defaultValue, disAble }) => {
let suggestions = suggestion || [];
const editableDivRef = useRef();
const parentDivRef = useRef();
const [filteredSuggestions, setFilteredSuggestions] = useState([]);
const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
const [currentValuee, setcurrentValuee] = useState();
const [suggestionPosition, setSuggestionPosition] = useState({ left: 0, top: 0 });
const [innerText, setInnerText] = useState('');
const handleGetCaretCoordinates = () => {
if (!parentDivRef.current && !editableDivRef.current) return;
const parentDiv = parentDivRef.current;
const editableDiv = editableDivRef.current;
const selection = window.getSelection();
const range = document.createRange();
// Set the range to the editable div's contents
range.selectNodeContents(editableDiv);
// Set the range's end to the current selection
range.setEnd(selection.anchorNode, selection.anchorOffset);
// Calculate the caret position
const caretRange = range.cloneRange();
caretRange.collapse(false);
const caretRect = caretRange.getBoundingClientRect();
const parentRect = parentDiv.getBoundingClientRect();
const characterHeight = caretRange.getBoundingClientRect().height;
const caretCoordinates = {
left: caretRect.left - parentRect.left,
top: caretRect.top - parentRect.top + characterHeight,
};
return caretCoordinates;
};
const getInputValueWithContent = () => {
if (!editableDivRef.current) return;
let htmlCode = editableDivRef.current.innerHTML;
var temporaryElement = document.createElement('div');
temporaryElement.innerHTML = htmlCode;
var spanElements = temporaryElement.getElementsByTagName('span');
for (var i = spanElements.length - 1; i >= 0; i--) {
var span = spanElements[i];
if (span.getAttribute('walkover-attribute')) {
var dataAttribute = span.getAttribute('data-attribute') + " ";
var textNode = document.createTextNode(dataAttribute);
span.parentNode.replaceChild(textNode, span);
}
}
var convertedHtmlCode = temporaryElement.innerText;
if (setHtml) setHtml(() => htmlCode);
if (setText) setText(convertedHtmlCode);
if (getInputValueWithContext) {
getInputValueWithContext(convertedHtmlCode, htmlCode);
}
}
const handleKeyDown = (event) => {
if (event.key === 'ArrowUp') {
event.preventDefault();
setSelectedSuggestionIndex((prevIndex) => {
if (prevIndex === -1) {
return filteredSuggestions.length - 1;
}
return Math.max(0, prevIndex - 1);
});
} else if (event.key === 'ArrowDown') {
event.preventDefault();
setSelectedSuggestionIndex((prevIndex) => {
if (prevIndex === filteredSuggestions.length - 1) {
return -1;
}
return Math.min(filteredSuggestions.length - 1, prevIndex + 1);
});
} else if (event.key === 'Enter') {
event.preventDefault();
const selectedSuggestion = filteredSuggestions[selectedSuggestionIndex];
if (selectedSuggestion) {
insertSuggestion(selectedSuggestion);
setSelectedSuggestionIndex(-1);
}
else {
onEnterBtnEvent && onEnterBtnEvent();
}
}
};
const handleInputChange = (e) => {
if (!editableDivRef.current && editableDivRef.current.innerText.length === 0) {
setFilteredSuggestions([]);
return;
};
getInputValueWithContent();
const sel = window.getSelection();
const caretOffset = sel.anchorOffset;
const currentNode = sel.anchorNode.textContent.substring(0, caretOffset).trim();
var words = currentNode.trim();
const caretPosition = handleGetCaretCoordinates();
setSuggestionPosition(caretPosition);
words = currentNode.split(/ |\u00A0/);
const currentWord = words[words.length - 1];
if (currentWord.length === 0) return
setcurrentValuee(currentWord);
const filtered = suggestions.filter((suggestion) =>
suggestion?.name?.toLowerCase().startsWith(currentWord.trim().toLowerCase())
)
setFilteredSuggestions(filtered);
setSelectedSuggestionIndex(-1);
};
function setCursorPosition(element, offset) {
const range = document.createRange();
const selection = window.getSelection();
range.setStart(element, offset);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
const insertSuggestion = (replace) => {
const sel = window.getSelection();
const currentNode = sel.anchorNode;
const caretOffset = sel.anchorOffset;
if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
const span = document.createElement('span');
span.className = chipClass || 'chip';
span.contentEditable = 'false';
span.textContent = replace.name;
span.setAttribute("walkover-attribute", replace.content);
span.setAttribute("data-attribute", replace.content);
var strwithrepsecttocursor = currentNode.nodeValue.substring(0, caretOffset);
var strwithrepsecttocursor2 = currentNode.nodeValue.substring(caretOffset, currentNode.nodeValue.length);
let index = strwithrepsecttocursor.lastIndexOf(currentValuee);
var finalstr = currentNode.nodeValue.substring(0, index);
const textNode = document.createTextNode(finalstr);
currentNode.parentNode.insertBefore(textNode, currentNode);
currentNode.parentNode.insertBefore(span, currentNode);
if ((strwithrepsecttocursor2.substring(0, 1)?.length === 1 && !(strwithrepsecttocursor2?.substring(0, 1) === " ")) || strwithrepsecttocursor2.substring(0, 1)?.length === 0) {
strwithrepsecttocursor2 = `\u00A0` + strwithrepsecttocursor2;
}
const textNode1 = document.createTextNode(strwithrepsecttocursor2);
currentNode.parentNode.insertBefore(textNode1, currentNode);
setCursorPosition(textNode1, 0, replace.name.length);
currentNode.parentNode.removeChild(currentNode);
}
getInputValueWithContent();
setFilteredSuggestions([]);
setTimeout(() => {
if (!editableDivRef.current) return;
editableDivRef.current.focus();
},);
};
useEffect(() => {
if (!editableDivRef.current) return;
editableDivRef.current.innerHTML = defaultValue || "";
}, [])
return (
<div ref={parentDivRef} className="suggestionMainContainer" style={{ position: "relative" }}>
<div id={id ? id : ''} contentEditable={disAble === true ? false : true} ref={editableDivRef} onKeyDown={handleKeyDown} onInput={(e) => { handleInputChange(e); }} className={editableDivClass || 'editable-div'} suppressContentEditableWarning={true} />
<div className={suggestionBoxClass || 'suggestionBox'}
style={{ position: 'absolute', left: suggestionPosition.left, top: suggestionPosition.top, zIndex: 100, opacity: filteredSuggestions.length > 0 ? 1 : 0 }}
>
{
filteredSuggestions?.map((suggestion, index) => (
<li key={index} style={{ background: selectedSuggestionIndex === index ? '#D3D3D3' : '', cursor: 'pointer' }} onMouseDown={() => insertSuggestion(suggestion)} onClick={() => insertSuggestion(suggestion)}>
{suggestion.name}
</li>
))
}
</div>
</div>
);
const CustomAutoSuggest = (props) => {
if (props?.groupByGroupName) return <GroupedSuggestion {...props} />
return <SimpleAutoSuggest {...props} />
};
export default CustomAutoSuggest;
src/customAutoSuggest/customAutoSuggest.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc