Editor Commands (#1450)

* add commands hook

* add commands in editor

* add command auto complete menu

* add commands in room input

* remove old reply code from room input

* fix video component css

* do not auto focus input on android or ios

* fix crash on enable block after selection

* fix circular deps in editor

* fix autocomplete return focus move editor cursor

* remove unwanted keydown from room input

* fix emoji alignment in editor

* test ipad user agent

* refactor isAndroidOrIOS to mobileOrTablet

* update slate & slate-react

* downgrade slate-react to 0.98.4
0.99.0 has breaking changes with ReactEditor.focus

* add sql to readable ext mimetype

* fix empty editor formatting gets saved as draft

* add option to use enter for newline

* remove empty msg draft from atom family

* prevent msg ctx menu from open on text selection

src/app/styles/CustomHtml.css.ts

@@ -142,6 +142,31 @@ export const Mention = recipe({
   },
 });
 
+export const Command = recipe({
+  base: [
+    DefaultReset,
+    {
+      padding: `0 ${toRem(2)}`,
+      borderRadius: config.radii.R300,
+      fontWeight: config.fontWeight.W500,
+    },
+  ],
+  variants: {
+    focus: {
+      true: {
+        boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Warning.OnContainer}`,
+      },
+    },
+    active: {
+      true: {
+        backgroundColor: color.Warning.Container,
+        color: color.Warning.OnContainer,
+        boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Warning.ContainerLine}`,
+      },
+    },
+  },
+});
+
 export const EmoticonBase = style([
   DefaultReset,
   {
@@ -166,7 +191,7 @@ export const Emoticon = recipe({
       lineHeight: '1em',
       verticalAlign: 'middle',
       position: 'relative',
-      top: '-0.25em',
+      top: '-0.32em',
       borderRadius: config.radii.R300,
     },
   ],