Merge of emoji + autolink + embed + etc (#108)

* Add an emoji picker to chat

* Update to the custom emoji picker and add first pass at using custom emoji in text box

* Add custom emoji endpoint and use it in the app

* Position the emoji picker

* Handle events from the text input

* pair down the number of party parrots

* Size emoji in chat and input

* Add new custom emoji

* Add OMQ stickers as custom emoji

* Show custom category for emoji picker by default

* update omq emojis

* Document basic supported markdown syntax. Closes #95

* Websocket refactor: Pull it out of the UI and support callbacks (#104)

* Websocket refactor: Pull it out of the UI and support listeners

* Changes required for Safari to be happy with modules

* Move to explicit ad-hoc callback registration

* Add an emoji picker to chat

* Update to the custom emoji picker and add first pass at using custom emoji in text box

* Handle events from the text input

* Rebuild autolinking + embed handling for #93

* Re-enable disabling chat

* Document basic supported markdown syntax. Closes #95

* Document basic supported markdown syntax. Closes #95

* Add an emoji picker to chat

* Merge emoji and embeds.

* Merge emoji + embed branches. Rework autolink +embeds. WIP for username
highlighting for #100

* More updates to chat text formatting/embedding/linking

* Fix username autocomplete to work with div instead of form elements

* Post-rebase fixes + tweaks

* Disable text input by setting contentEditable = false

* Remove test that hardcodes pointing to public test server

* Fix re-enable chat with the contentEditable input div

* Style and fix the fake placeholder text in the input div

* Missing file.  Were did it go?

* Set a height for instagram embeds

* Cleanup

Co-authored-by: Ginger Wong <omqmail@gmail.com>

webroot/index.html

@@ -28,7 +28,6 @@
   <link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet" />
   <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
   <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
-  <script src="vendor/autolink.js"></script>
 
   <link href="./styles/layout.css" rel="stylesheet" />
 </head>
@@ -156,14 +155,11 @@
           <form id="message-form" class="flex">
 
             <input type="hidden" name="inputAuthor" id="self-message-author" />
-            
-            <textarea
-              disabled
-              id="message-body-form"
-              placeholder="Message"
-              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
-            ></textarea>
-            
+            <div id="message-body-form" contenteditable="true" placeholder=""
+            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
+            ></div>
+              <div id="emoji-button">😏</div>
+
             <div id="message-form-actions" class="flex">
               <span id="message-form-warning" class="text-red-600 text-xs"></span>
               <button
@@ -219,5 +215,7 @@
       </p>
     </div>
   </noscript>
+
+  <script type='module' src="/js/emoji.js"></script>
 </body>
-</html>
+</html>