Not Able to Figure out how this works , HELP !!!!

[NormVg]

hey man , so i am making a Code Editor myself , and i have use codemirror for it , i am not able to figure out how to use lsp in codemirror how i can use this package or is this not going to help me can you guide me how to make it work and how to take it further thx man , your help would be appreciated

project - Kraken Code Editor

<script setup>
import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { python } from "@codemirror/lang-python";
import {gruvboxDark} from "../assets/theme"


const prop = defineProps({
  path: {
    typeof: String,
  }
});

const code = ref("");
const language = ref();

const serverURI = "ws://localhoost:3111"

const ext = prop.path.split(".").pop().toLowerCase();
switch (ext) {
  case "js":
    language.value = javascript();
    break;
  case "ts":
    language.value = javascript();
    break;
  case "py":
    language.value = python();
    break;

}

import { languageServer  } from 'codemirror-languageserver';

import {WebSocketTransport} from  '@open-rpc/client-js'

const transport = new WebSocketTransport(serverURI)


var ls = languageServer({
	// WebSocket server uri and other client options.
	serverURI,
	rootUri: 'file:///',

	// Alternatively, to share the same client across multiple instances of this plugin.
	client: new LanguageServerClient({
		serverURI,
		rootUri: 'file:///'
	}),

	documentUri: `file:///${prop.path}`,
	languageId: 'cpp' // As defined at https://microsoft.github.io/language-server-protocol/specification#textDocumentItem.
});

function readFileSync(filePath) {
  try {
    const data = window.fs.readFileSync(filePath, "utf8"); // Read the file synchronously
    return data;
  } catch (error) {
    console.error("Error reading file:", error.message);
    return null;
  }
}
code.value = readFileSync(prop.path);

</script>

<template>
  <Codemirror
    :extensions=" [gruvboxDark,language,ls]"
    v-model="code"
    :style="{ height: '96vh' }"
    :autofocus="true"
    :indent-with-tab="true"

  />
</template>

<style scoped></style>