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/styles/layout.css

@@ -376,10 +376,21 @@ h2 {
 }
 #message-body-form {
   font-size: 1em;
+  height: 60px;
 }
 #message-body-form:disabled{
   opacity: .5;
 }
+#message-body-form img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#message-body-form .emoji {
+  width: 40px;
+}
+
 #message-form-actions {
   flex-direction: row;
   justify-content: space-between;
@@ -387,6 +398,15 @@ h2 {
   width: 100%;
 }
 
+.message-text img {
+  display: inline;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.message-text .emoji {
+  width: 60px;
+}
 
 /* ************************************************8 */
 
@@ -618,18 +638,86 @@ h2 {
   border-radius: 15px;
 }
 
+.message-text .instagram-embed {
+  height: 314px;
+}
+
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+/* Emoji picker */
+#emoji-button {
+  position: relative;
+  top: -65px;
+  right: 10px;
+  cursor: pointer;
+}
+
 .message-text .embedded-image {
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }
 
-.message-text .highlighted {
-  color: orange;
-  font-weight: bold;
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+
+/* Emoji picker */
+#emoji-button {
+  position: relative;
+  top: -65px;
+  right: 10px;
+  cursor: pointer;
+}
+.message-text .embedded-image {
+  width: 100%;
+  height: 170px;
+  border-radius: 15px;
 }
 
 .message-text code {
   background-color:darkslategrey;
   padding: 3px;
-}
+}
+.message-text .highlighted {
+  color: orange;
+  font-weight: 400;
+  font-size: 14px;
+
+}
+
+.message-text code {
+  background-color:darkslategrey;
+  padding: 3px;
+}
+
+/*
+The chat input has a fake placeholder that is styled below.
+It pulls the placeholder text from the div's placeholder attribute.
+But really it's just the innerHTML content.
+*/
+
+/* If the div is empty then show the placeholder */
+#message-body-form:empty:before{
+  content: attr(placeholder);
+  pointer-events: none;
+  display: block; /* For Firefox */
+
+  /* Style the div's placeholder text color */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/* When chat is enabled (contenteditable=true)  */
+#message-body-form[contenteditable=true]:before {
+  opacity: 1.0;
+}
+
+
+/* When chat is disabled (contenteditable=false) chat input div should appear disabled. */
+#message-body-form[contenteditable=false] {
+  opacity: 0.6;
+}
+