highlight text manually if focused in other input

app/globals.css

···
   @apply rounded-[4px];
   @apply box-decoration-clone;
 }
+
+.selection-highlight {
+  background-color: Highlight;
+  @apply py-[1.5px];
+}
+
+.ProseMirror:focus-within .selection-highlight {
+  background-color: transparent;
+}
+
+.Multiple-Selected:focus-within .selection-highlight {
+  background-color: transparent;
+}

components/Blocks/TextBlock/index.tsx

···
 import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { useHandlePaste } from "./useHandlePaste";
+import { highlightSelectionPlugin } from "./plugins";
 
 export function TextBlock(props: BlockProps & { className: string }) {
   let initialized = useInitialPageLoad();
···
             ySyncPlugin(value),
             TextBlockKeymap(propsRef, repRef),
             keymap(baseKeymap),
+            highlightSelectionPlugin,
           ],
         }),
       });

components/Blocks/TextBlock/plugins.ts

···
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+export const highlightSelectionPlugin = new Plugin({
+  state: {
+    init(_, { doc }) {
+      return DecorationSet.empty;
+    },
+    apply(tr, oldDecorations, oldState, newState) {
+      let decorations = [];
+
+      // Check if there's a selection
+      const { from, to } = newState.selection;
+      if (from !== to) {
+        decorations.push(
+          Decoration.inline(from, to, { class: "selection-highlight" }),
+        );
+      }
+
+      return DecorationSet.create(newState.doc, decorations);
+    },
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    },
+  },
+});

components/Blocks/index.tsx

···
         props.type !== "heading" &&
         props.type !== "text" &&
         `first:pt-0 sm:first:pt-0 pl-3 pr-3 sm:pl-4 sm:pr-4 pt-1 pb-2`
-      }`}
+      }
+      ${selectedBlocks.length > 1 ? "Multiple-Selected" : ""}
+      `}
       id={elementId.block(props.entityID).container}
     >
       {selected && selectedBlocks.length > 1 && (