fix: ensure Emmet wrap only applies to active editor

Author: lahcenelhadi2001-a11y

src/components/editor/core/EditorEmmet.tsx

@@ -0,0 +1,63 @@
+import { createEffect, onCleanup } from "solid-js";
+import type { Accessor } from "solid-js";
+import type * as Monaco from "monaco-editor";
+import {
+  balanceInward,
+  balanceOutward,
+  wrapWithAbbreviation,
+  getSelectionForWrap,
+} from "@/utils/emmet";
+
+interface EditorEmmetProps {
+  editor: Accessor<Monaco.editor.IStandaloneCodeEditor | null>;
+  monaco: Accessor<typeof Monaco | null>;
+}
+
+export function EditorEmmet(props: EditorEmmetProps) {
+  createEffect(() => {
+    const editor = props.editor();
+    const monaco = props.monaco();
+    if (!editor || !monaco) return;
+
+    const isFocused = () => editor.hasTextFocus() || editor.getDomNode()?.contains(document.activeElement);
+
+    const handleEmmetBalanceInward = () => {
+      if (!isFocused()) return;
+      balanceInward(editor, monaco);
+      editor.focus();
+    };
+
+    const handleEmmetBalanceOutward = () => {
+      if (!isFocused()) return;
+      balanceOutward(editor, monaco);
+      editor.focus();
+    };
+
+    const handleEmmetWrap = (e: any) => {
+      if (!isFocused()) return;
+      const abbreviation = e.detail;
+      wrapWithAbbreviation(editor, monaco, abbreviation);
+      editor.focus();
+    };
+
+    const handleEmmetGetSelection = () => {
+      if (!isFocused()) return;
+      const selection = getSelectionForWrap(editor, monaco);
+      window.dispatchEvent(new CustomEvent("emmet:selection", { detail: selection }));
+    };
+
+    window.addEventListener("emmet:balance-inward", handleEmmetBalanceInward);
+    window.addEventListener("emmet:balance-outward", handleEmmetBalanceOutward);
+    window.addEventListener("emmet:wrap", handleEmmetWrap);
+    window.addEventListener("emmet:get-selection", handleEmmetGetSelection);
+
+    onCleanup(() => {
+      window.removeEventListener("emmet:balance-inward", handleEmmetBalanceInward);
+      window.removeEventListener("emmet:balance-outward", handleEmmetBalanceOutward);
+      window.removeEventListener("emmet:wrap", handleEmmetWrap);
+      window.removeEventListener("emmet:get-selection", handleEmmetGetSelection);
+    });
+  });
+
+  return null;
+}