add docs

docs/javascripts/mendablesearch.js

@@ -0,0 +1,90 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Load the external dependencies
+  function loadScript(src, onLoadCallback) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = onLoadCallback;
+    document.head.appendChild(script);
+  }
+
+  function createRootElement() {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'my-component-root';
+    document.body.appendChild(rootElement);
+    return rootElement;
+  }
+
+  
+
+  function initializeMendable() {
+    const rootElement = createRootElement();
+    const { MendableFloatingButton } = Mendable;
+
+    const textObserver = new MutationObserver(() => {
+      const textArea = document.querySelector('#headlessui-portal-root textarea');
+      if(textArea) {
+        let sibling = textArea.nextSibling;
+        if(sibling){
+          if(textArea.scrollHeight == 37) {
+            sibling.style.display = "none";
+          } else {
+            sibling.style.display = "block";
+          }
+        }
+        
+      }
+    });
+
+    const observer = new MutationObserver(() => {
+      const textArea = document.querySelector('#headlessui-portal-root textarea');
+      if(textArea){
+        let sibling = textArea.nextSibling;
+        if(sibling){
+          sibling.style.display = "none";
+        }
+        textObserver.observe(textArea, {attributes: true, childList: true, subtree: true})
+      }
+    });
+    
+    observer.observe(rootElement, {attributes: true, childList: true, subtree: true})
+    
+
+    const iconSpan1 = React.createElement('img', {
+      src: 'img/chain.png',
+      style: {width: '40px'}
+    }, null);
+
+    const icon = React.createElement('p', {
+      style: { color: '#ffffff', fontSize: '22px',width: '48px', height: '48px', margin: '0px', padding: '0px', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center' },
+    }, [iconSpan1]);
+
+    
+    
+
+    const mendableFloatingButton = React.createElement(
+      MendableFloatingButton,
+      {
+        style: { darkMode: true, accentColor: '#4051b5' },
+        floatingButtonStyle: { color: '#ffffff', backgroundColor: '#010810' },
+        anon_key: 'b7f52734-297c-41dc-8737-edbd13196394', // Mendable Search Public ANON key, ok to be public
+        messageSettings: {
+          openSourcesInNewTab: false,
+        },
+        showSimpleSearch: false,
+        icon: icon,
+      }
+    );
+
+    ReactDOM.render(mendableFloatingButton, rootElement);
+  }
+
+  loadScript('https://unpkg.com/react@17/umd/react.production.min.js', () => {
+    loadScript('https://unpkg.com/react-dom@17/umd/react-dom.production.min.js', () => {
+      loadScript('https://unpkg.com/@mendable/search@0.0.93/dist/umd/mendable.min.js', initializeMendable);
+    });
+  });
+});
+
+
+
+