test out some colors when editing

src/view/com/composer/text-input/web/TagDecorator.ts

@@ -38,7 +38,7 @@ function getDecorations(doc: ProsemirrorNode) {
 
         decorations.push(
           Decoration.inline(pos + from, pos + to, {
-            class: 'autolink',
+            class: 'inline-tag',
           }),
         )
       }

web/index.html

@@ -48,6 +48,9 @@
         --text: black;
         --background: white;
         --backgroundLight: #F3F3F8;
+        --blue: #0085ff;
+        --teal: #9AD5CA;
+        --yellow: #FED766;
       }
       html.colorMode--dark {
         --text: white;
@@ -136,17 +139,36 @@
       .tippy-content .items {
         width: fit-content;
       }
-      .ProseMirror .inline-tag {
+
+      /* Hashtags in ProseMirror */
+      .ProseMirror .inline-tag,
+      .ProseMirror .mention {
         position: relative;
+        margin: 0 3px;
       }
-      .ProseMirror .inline-tag::after {
+      .ProseMirror .inline-tag::after,
+      .ProseMirror .mention::after {
         content: '';
         position: absolute;
-        top: 0;
+        top: -1px;
-        bottom: 0;
+        bottom: -2px;
-        left: 0;
+        left: -3px;
-        right: 0;
+        right: -3px;
-        background-color: whitesmoke;
+        z-index: -1;
+        opacity: 0.3;
+        border-radius: 4px;
+      }
+      .ProseMirror .inline-tag {
+        color: var(--teal);
+      }
+      .ProseMirror .inline-tag::after {
+        background-color: var(--teal);
+      }
+      .ProseMirror .mention {
+        color: var(--yellow);
+      }
+      .ProseMirror .mention::after {
+        background-color: var(--yellow);
       }
 
       /* Tooltips */