update tutorial

Author: jogibear9988

README.md

@@ -1,4 +1,4 @@
-# monaco-editor-esm
+# @node-projects/monaco-editor-esm
 
 ## Real ESM version of Monaco Editor
 
@@ -10,32 +10,24 @@ This package provides a true ESM (EcmaScript Module) build of the [Monaco Editor
 
 ### Usage
 
-#### With a Bundler (Webpack, Rollup, Vite, etc.)
 1. Install the package:
    ```sh
-   npm install monaco-editor-esm
+   npm install @node-projects/monaco-editor-esm
    ```
 2. Import the editor in your code:
    ```js
-   import * as monaco from 'monaco-editor-esm/esm/vs/editor/editor.main.js';
+   import * as monaco from '@node-projects/monaco-editor-esm/esm/vs/editor/editor.main.js';
    ```
 3. Make sure to load the required CSS from `/min`:
    ```js
-   import 'monaco-editor-esm/min/vs/editor/editor.main.css';
+   import editorStyle from '@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css' with { type : 'css' };
+   shadowRoot.adoptedStyleSheets.push(editorStyle);
+   // or
+   document.adoptedStyleSheets.push(editorStyle);
    ```
    Or include it in your HTML:
    ```html
-   <link rel="stylesheet" href="node_modules/monaco-editor-esm/min/vs/editor/editor.main.css">
-   ```
-
-#### Directly in the Browser
-- You can import modules from `/esm` using `<script type="module">`, but **CSS imports in JS are not natively supported in browsers**. You must manually include the CSS in your HTML:
-   ```html
-   <link rel="stylesheet" href="path/to/min/vs/editor/editor.main.css">
-   <script type="module">
-     import * as monaco from './esm/vs/editor/editor.main.js';
-     // ...
-   </script>
+   <link rel="stylesheet" href="node_modules/@node-projects/monaco-editor-esm/min/vs/editor/editor.main.css">
    ```
 
 ### CSS Import Caveats

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "monaco-editor-esm",
+  "name": "@node-projects/monaco-editor-esm",
   "version": "0.55.1",
   "description": "A real ESM (EcmaScript Module) build of the Monaco Editor, suitable for modern build tools and direct browser usage. This package provides the Monaco Editor as native JavaScript modules in the /esm directory, and all required CSS in /min.\n\nNote: Due to current browser and JavaScript limitations, CSS imports in ESM modules are not natively supported in all environments. You may need to handle CSS loading manually or with a bundler. See README for details.",
   "keywords": [
@@ -30,5 +30,17 @@
   "files": [
     "min/",
     "esm/"
-  ]
+  ],
+  "exports": {
+    ".": {
+      "import": "./esm/vs/editor/editor.main.min.js"
+    },
+    "./esm/vs/editor/editor.main.js": "./esm/vs/editor/editor.main.js",
+    "./esm/vs/editor/editor.api.js": "./esm/vs/editor/editor.api.js",
+    "./esm/vs/editor/editor.api2.js": "./esm/vs/editor/editor.api2.js",
+    "./esm/vs/editor/editor.worker.js": "./esm/vs/editor/editor.worker.js",
+    "./esm/vs/language/*": "./esm/vs/language/*",
+    "./esm/vs/basic-languages/*": "./esm/vs/basic-languages/*",
+    "./min/vs/editor/editor.main.css": "./min/vs/editor/editor.main.css"
+  }
 }