diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index bc0933ccf..7c44b8517 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,58 +1,53 @@
 {
-	"name": "Jupyter UI",
-	"build": {
-		"dockerfile": "Dockerfile",
-		"context": "../",
-		"target": "dev"
-	},
-	"remoteUser": "mambauser",
-	"postStartCommand": "yarn install",
-	"hostRequirements": {
-		"memory": "2gb",
-		"cpus": 2
-	},
-	"portsAttributes": {
-		"8686": {
-			"label": "Jupyter Server",
-			"onAutoForward": "notify"
-		},
-		"3208": {
-			"label": "Webpack Application",
-			"onAutoForward": "notify"
-		},
-		"3000": {
-			"label": "CRA, Docusaurus, Next.js... ",
-			"onAutoForward": "notify"
-		}
-	},
-	"customizations": {
-		"vscode": {
-			"settings": { 
-				"terminal.integrated.profiles.linux": {
-					"bash": {
-						"path": "/bin/bash"
-					}
-				},
-				"python.defaultInterpreterPath": "/usr/local/bin/python",
-				"python.languageServer": "Default",
-				"pylinting.enabled": true,
-				"pylinting.pylintEnabled": true,
-				"autopep8.path": [
-					"/usr/local/py-utils/bin/autopep8"
-				],
-				"autopep8.blackPath": "/usr/local/py-utils/bin/black",
-				"autopep8.yapfPath": "/usr/local/py-utils/bin/yapf",
-				"pylinting.banditPath": "/usr/local/py-utils/bin/bandit",
-				"pylinting.flake8Path": "/usr/local/py-utils/bin/flake8",
-				"pylinting.mypyPath": "/usr/local/py-utils/bin/mypy",
-				"pylinting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
-				"pylinting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
-				"pylinting.pylintPath": "/usr/local/py-utils/bin/pylint"
-			},
-			"extensions": [
-				"ms-python.python",
-				"ms-python.vscode-pylance"
-			]
-		}
-	}
+  "name": "Jupyter UI",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": "../",
+    "target": "dev"
+  },
+  "remoteUser": "mambauser",
+  "postStartCommand": "yarn install",
+  "hostRequirements": {
+    "memory": "2gb",
+    "cpus": 2
+  },
+  "portsAttributes": {
+    "8686": {
+      "label": "Jupyter Server",
+      "onAutoForward": "notify"
+    },
+    "3208": {
+      "label": "Webpack Application",
+      "onAutoForward": "notify"
+    },
+    "3000": {
+      "label": "CRA, Docusaurus, Next.js... ",
+      "onAutoForward": "notify"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "terminal.integrated.profiles.linux": {
+          "bash": {
+            "path": "/bin/bash"
+          }
+        },
+        "python.defaultInterpreterPath": "/usr/local/bin/python",
+        "python.languageServer": "Default",
+        "pylinting.enabled": true,
+        "pylinting.pylintEnabled": true,
+        "autopep8.path": ["/usr/local/py-utils/bin/autopep8"],
+        "autopep8.blackPath": "/usr/local/py-utils/bin/black",
+        "autopep8.yapfPath": "/usr/local/py-utils/bin/yapf",
+        "pylinting.banditPath": "/usr/local/py-utils/bin/bandit",
+        "pylinting.flake8Path": "/usr/local/py-utils/bin/flake8",
+        "pylinting.mypyPath": "/usr/local/py-utils/bin/mypy",
+        "pylinting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
+        "pylinting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
+        "pylinting.pylintPath": "/usr/local/py-utils/bin/pylint"
+      },
+      "extensions": ["ms-python.python", "ms-python.vscode-pylance"]
+    }
+  }
 }
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 000000000..a40d01822
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,54 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# TypeScript, JavaScript, JSX, TSX files
+[*.{ts,tsx,js,jsx}]
+indent_style = space
+indent_size = 2
+
+# JSON files
+[*.json]
+indent_style = space
+indent_size = 2
+
+# YAML files
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2
+
+# Markdown files
+[*.{md,mdx}]
+trim_trailing_whitespace = false
+
+# Python files
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Makefile
+[Makefile]
+indent_style = tab
+
+# Package files
+[package.json]
+indent_style = space
+indent_size = 2
+
+# CSS files
+[*.css]
+indent_style = space
+indent_size = 2
+
+# HTML files
+[*.html]
+indent_style = space
+indent_size = 2
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..1fcc7711d
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    es2020: true,
+    node: true,
+    jest: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended', // This must be last
+  ],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'prettier'],
+  rules: {
+    // TypeScript specific rules
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'warn',
+
+    // React specific rules
+    'react/react-in-jsx-scope': 'off', // Not needed with React 17+
+    'react/prop-types': 'off', // We use TypeScript for type checking
+    'react/display-name': 'off',
+    'react/no-unescaped-entities': 'warn',
+
+    // General rules
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'no-debugger': 'warn',
+    'prefer-const': 'warn',
+    'no-var': 'error',
+
+    // Prettier integration
+    'prettier/prettier': 'warn',
+  },
+  overrides: [
+    {
+      // Test files
+      files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      // JavaScript files
+      files: ['**/*.js', '**/*.jsx'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    {
+      // Storybook files
+      files: ['**/*.stories.tsx', '**/*.stories.ts'],
+      rules: {
+        'import/no-anonymous-default-export': 'off',
+      },
+    },
+  ],
+  ignorePatterns: [
+    'node_modules/',
+    'dist/',
+    'build/',
+    'lib/',
+    '*.min.js',
+    'coverage/',
+    '.next/',
+    'storybook-static/',
+  ],
+};
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 19f4b97ec..8affb14f1 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -19,144 +19,55 @@ jobs:
       matrix:
         os: [ubuntu-latest]
         # os: [ubuntu-latest, windows-latest, macos-latest]
-        python-version: [3.11]
-    defaults:
-      run:
-        shell: bash -l {0}
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Setup conda
-      uses: conda-incubator/setup-miniconda@v3
-      with:
-        mamba-version: "*"
-        channels: conda-forge,defaults
-        channel-priority: true
-        environment-file: environment.yml
-        activate-environment: datalayer
-    - name: Setup npm cache
-      uses: actions/cache@v4
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json', '**/package.json') }}
-        restore-keys: |
-          ${{ runner.os }}-npm-
-    - name: Install the npm dependencies
-      run: |
-        npm install
-    - name: Run the build
-      run: |
-        npm run build
-
-  visual-test:
-    runs-on: ubuntu-latest
-    needs: build
-    name: Stories visual tests
-    timeout-minutes: 60
-    env:
-      PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/pw-browsers
-
-    steps:
-      - name: Checkout 🛎️
+      - name: Checkout
         uses: actions/checkout@v4
-
-      - name: Setup Node 💾
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
-      -
+          node-version: '20'
+      - name: Install the npm dependencies
         run: |
-          corepack enable
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
-      - name: Setup yarn cache
-        uses: actions/cache@v4
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            yarn-
-
-      - name: Install Dependencies 📥
-        env:
-          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
-        run: yarn install
-
-      - name: Set up browser cache
-        uses: actions/cache@v4
-        with:
-          path: |
-            ${{ github.workspace }}/pw-browsers
-          key: ${{ runner.os }}-${{ hashFiles('ui-tests/yarn.lock') }}
-
-      - name: Install Playwright Browsers
-        run: yarn run playwright install chromium --with-deps
-        working-directory: packages/react
-
-      - name: Run Visual Tests 🧪
-        run: yarn run test:visual
-        working-directory: packages/react
-
-      - name: Update Snapshots
-        if: ${{ failure() }}
+          npm install
+      - name: Run the build
         run: |
-          mv test-results test-assets
-          yarn run test:visual -u
-        working-directory: packages/react
-
-      - uses: actions/upload-artifact@v4
-        if: ${{ failure() }}
-        with:
-          name: jupyter-react-test
-          path: |
-            packages/react/test-assets/
-            packages/react/stories/**/*-snapshots/*
+          npm run build
 
   storybook-test:
     name: Test Storybook Stories and Docs
     runs-on: ubuntu-latest
     timeout-minutes: 30
-    
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
-      
-      - name: Setup npm cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: npm-${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/package.json') }}
-          restore-keys: |
-            npm-${{ runner.os }}-
-      
+          node-version: '20'
+
       - name: Install Dependencies
         run: npm install
-      
+
       - name: Build all packages
         run: npm run build
-      
+
       - name: Install Playwright
         run: npx playwright install chromium --with-deps
         working-directory: storybook
-      
+
       - name: Build Storybook
         run: npm run build:storybook
         working-directory: storybook
-      
+
       - name: Serve Storybook and run all tests
         run: |
           npx serve -l 6006 storybook-static &
-          sleep 5
-          npm run test:all
+          npx wait-on http://localhost:6006 --timeout 30000
+          npm run test:all:ci
         working-directory: storybook
-      
+
       - name: Upload test results
         if: failure()
         uses: actions/upload-artifact@v4
@@ -165,53 +76,3 @@ jobs:
           path: |
             storybook/test-results/
             storybook/html-report/
-
-  docker-dev:
-    # Don't run if the previous case fails
-    needs: build
-
-    name: Build on dev container
-    runs-on: ubuntu-latest
-
-    permissions:
-      contents: read
-      packages: write
-
-    env:
-      REGISTRY: ghcr.io
-      IMAGE_NAME: ${{ github.repository }}
-
-    steps:
-      -
-        name: Checkout
-        uses: actions/checkout@v4
-
-      - 
-        name: Log in to the Container registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      -
-        name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-      -
-        name: Build and push
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ".devcontainer/Dockerfile"
-          target: "builder"
-          # For now never push
-          # push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml
new file mode 100644
index 000000000..8688595f6
--- /dev/null
+++ b/.github/workflows/code-quality.yml
@@ -0,0 +1,53 @@
+name: Code Quality
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['*']
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  code-quality:
+    name: Code Quality Checks
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Lint Checks
+        run: |
+          echo "::group::Running Lint Checks"
+          echo "Running ESLint..."
+          npm run lint
+          echo "✓ ESLint passed"
+          echo ""
+          echo "::endgroup::"
+
+      - name: Run Format Checks
+        run: |
+          echo "::group::Running Format Checks"
+          npm run format:check
+          echo "✓ Prettier passed"
+          echo ""
+          echo "::endgroup::"
+      - name: Build project
+        run: npm run build
+      - name: Run Type Checks
+        run: |
+          echo "::group::Running Type Checks"
+          npm run type-check
+          echo "✓ TypeScript passed"
+          echo "::endgroup::"
diff --git a/.github/workflows/docker.yml.disabled b/.github/workflows/docker.yml.disabled
new file mode 100644
index 000000000..01ae7f77e
--- /dev/null
+++ b/.github/workflows/docker.yml.disabled
@@ -0,0 +1,77 @@
+name: Build
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Run build on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        # os: [ubuntu-latest, windows-latest, macos-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install the npm dependencies
+        run: |
+          npm install
+      - name: Run the build
+        run: |
+          npm run build
+
+  docker-dev:
+    # Don't run if the previous case fails
+    needs: build
+
+    name: Build on dev container
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    env:
+      REGISTRY: ghcr.io
+      IMAGE_NAME: ${{ github.repository }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ".devcontainer/Dockerfile"
+          target: "builder"
+          # For now never push
+          # push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
diff --git a/.github/workflows/fix-license-header.yml b/.github/workflows/fix-license-header.yml
index 10386f6be..a78c66a84 100644
--- a/.github/workflows/fix-license-header.yml
+++ b/.github/workflows/fix-license-header.yml
@@ -6,7 +6,7 @@ on:
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
-    
+
 jobs:
   header-license-fix:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/publish-dev.yml b/.github/workflows/publish-dev.yml
index c2e57b4a8..69024d6e2 100644
--- a/.github/workflows/publish-dev.yml
+++ b/.github/workflows/publish-dev.yml
@@ -2,16 +2,16 @@ name: Publish package to GitHub Packages
 on:
   push:
     branches:
-        - main
+      - main
   release:
     types: [published]
   # FIXME workflow_dispatch should not be needed
-  workflow_dispatch: 
+  workflow_dispatch:
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
-    
+
 jobs:
   publish:
     # Forbid manual execution on non-main branches
@@ -23,19 +23,16 @@ jobs:
     env:
       NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     steps:
-      -
-        uses: actions/checkout@v4
-      -
-        # Setup .npmrc file to publish to GitHub Packages
+      - uses: actions/checkout@v4
+      - # Setup .npmrc file to publish to GitHub Packages
         uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://npm.pkg.github.com'
           # Defaults to the user or organization that owns the workflow file
           scope: '@datalayer'
-      -
-        run: |
-            corepack enable
+      - run: |
+          corepack enable
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -48,30 +45,26 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/package.json') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-      
-      -
-        run: |
-            yarn install
-            yarn run build
-      -
-        if: github.event_name == 'push'
+
+      - run: |
+          yarn install
+          yarn run build
+      - if: github.event_name == 'push'
         # Bump the version
         run: |
-            npm version --preid dev --no-git-tag-version prerelease \
-              --workspace ./packages/react
+          npm version --preid dev --no-git-tag-version prerelease \
+            --workspace ./packages/react
 
-            git config --global user.name "github-actions[bot]"
-            git config --global user.email "github-actions[bot]@users.noreply.github.com"
-            git commit -a -m "Bump dev version"
-      -
-        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git commit -a -m "Bump dev version"
+      - run: |
           npm publish --access public --tag next \
             --workspace ./packages/react
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      -
-        if: github.event_name == 'push'
+      - if: github.event_name == 'push'
         # Push version bump
         run: |
           git push
@@ -84,4 +77,4 @@ jobs:
           package-name: 'jupyter-react'
           package-type: 'npm'
           min-versions-to-keep: 3
-          delete-only-pre-release-versions: "true"
+          delete-only-pre-release-versions: 'true'
diff --git a/.gitignore b/.gitignore
index 57cd2a6b6..cd1544448 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,6 @@ lib
 *.sqlite
 *.tsbuildinfo
 *.egg-info
-*-lock.json
 *-error.log
 *.log
 *.lock
@@ -178,3 +177,4 @@ packages/react/.vscode/launch.json
 !dev/notebooks/.datalayer
 !docs/static/img
 !**/static/README.md
+*-lock.json
diff --git a/.husky/_/.gitignore b/.husky/_/.gitignore
new file mode 100644
index 000000000..f59ec20aa
--- /dev/null
+++ b/.husky/_/.gitignore
@@ -0,0 +1 @@
+*
\ No newline at end of file
diff --git a/.husky/_/applypatch-msg b/.husky/_/applypatch-msg
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/applypatch-msg
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/commit-msg b/.husky/_/commit-msg
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/commit-msg
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/h b/.husky/_/h
new file mode 100644
index 000000000..bf7c89640
--- /dev/null
+++ b/.husky/_/h
@@ -0,0 +1,22 @@
+#!/usr/bin/env sh
+[ "$HUSKY" = "2" ] && set -x
+n=$(basename "$0")
+s=$(dirname "$(dirname "$0")")/$n
+
+[ ! -f "$s" ] && exit 0
+
+if [ -f "$HOME/.huskyrc" ]; then
+	echo "husky - '~/.huskyrc' is DEPRECATED, please move your code to ~/.config/husky/init.sh"
+fi
+i="${XDG_CONFIG_HOME:-$HOME/.config}/husky/init.sh"
+[ -f "$i" ] && . "$i"
+
+[ "${HUSKY-}" = "0" ] && exit 0
+
+export PATH="node_modules/.bin:$PATH"
+sh -e "$s" "$@"
+c=$?
+
+[ $c != 0 ] && echo "husky - $n script failed (code $c)"
+[ $c = 127 ] && echo "husky - command not found in PATH=$PATH"
+exit $c
diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh
new file mode 100644
index 000000000..f9d063790
--- /dev/null
+++ b/.husky/_/husky.sh
@@ -0,0 +1,9 @@
+echo "husky - DEPRECATED
+
+Please remove the following two lines from $0:
+
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
+
+They WILL FAIL in v10.0.0
+"
\ No newline at end of file
diff --git a/.husky/_/post-applypatch b/.husky/_/post-applypatch
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/post-applypatch
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/post-checkout b/.husky/_/post-checkout
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/post-checkout
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/post-commit b/.husky/_/post-commit
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/post-commit
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/post-merge b/.husky/_/post-merge
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/post-merge
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/post-rewrite b/.husky/_/post-rewrite
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/post-rewrite
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-applypatch b/.husky/_/pre-applypatch
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-applypatch
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-auto-gc b/.husky/_/pre-auto-gc
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-auto-gc
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-commit b/.husky/_/pre-commit
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-commit
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-merge-commit b/.husky/_/pre-merge-commit
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-merge-commit
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-push b/.husky/_/pre-push
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-push
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/pre-rebase b/.husky/_/pre-rebase
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/pre-rebase
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/_/prepare-commit-msg b/.husky/_/prepare-commit-msg
new file mode 100755
index 000000000..16aae78f5
--- /dev/null
+++ b/.husky/_/prepare-commit-msg
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..2312dc587
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.licenserc.yaml b/.licenserc.yaml
index 84595521d..842054635 100644
--- a/.licenserc.yaml
+++ b/.licenserc.yaml
@@ -39,5 +39,22 @@ header:
     - 'packages/react/third-party-license.txt'
     - 'patches/'
     - '**/robots.txt'
+    - '.husky/_/applypatch-msg'
+    - '.husky/_/commit-msg'
+    - '.husky/_/h'
+    - '.husky/_/post-applypatch'
+    - '.husky/_/post-checkout'
+    - '.husky/_/post-commit'
+    - '.husky/_/post-merge'
+    - '.husky/_/post-rewrite'
+    - '.husky/_/pre-applypatch'
+    - '.husky/_/pre-auto-gc'
+    - '.husky/_/pre-commit'
+    - '.husky/_/pre-merge-commit'
+    - '.husky/_/pre-push'
+    - '.husky/_/pre-rebase'
+    - '.husky/_/prepare-commit-msg'
+    - '.husky/pre-commit'
+    - '**/*.disabled'
 
-  comment: on-failure
\ No newline at end of file
+  comment: on-failure
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
new file mode 100644
index 000000000..a8e658e24
--- /dev/null
+++ b/.lintstagedrc.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+module.exports = {
+  // TypeScript and TSX files
+  '*.{ts,tsx}': ['eslint --fix', 'prettier --write'],
+
+  // JavaScript and JSX files
+  '*.{js,jsx}': ['eslint --fix', 'prettier --write'],
+
+  // JSON files
+  '*.json': ['prettier --write'],
+
+  // Markdown and MDX files
+  '*.{md,mdx}': ['prettier --write'],
+
+  // YAML files
+  '*.{yml,yaml}': ['prettier --write'],
+
+  // CSS files
+  '*.css': ['prettier --write'],
+
+  // HTML files
+  '*.html': ['prettier --write'],
+};
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..2edeafb09
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 22e4c841f..c6bdb5b7b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +1,59 @@
-node_modules
-**/node_modules
-**/dist
-**/lib
-**/package.json
+# Attic folder - excluded from formatting
+attic/
+
+# Dependencies
+node_modules/
+**/node_modules/
+.pnp
+.pnp.js
+
+# Build outputs
+dist/
+**/dist/
+build/
+lib/
+**/lib/
+*.min.js
+*.bundle.js
+coverage/
+
+# Next.js
+.next/
+out/
+
+# Storybook  
+storybook-static/
+
+# Cache
+.cache/
+.turbo/
+
+# Logs
+*.log
+
+# Python
+__pycache__/
+*.py[cod]
+
+# Jupyter
+.ipynb_checkpoints/
+*.ipynb
 **/jupyter_react/
+
+# Package files
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Generated files
+*.generated.*
+
+# Patches
+patches/
+
+# Data files
+*.csv
+*.xml
+
+# Markdown files with specific formatting
+CHANGELOG.md
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..c952fe6e3
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "printWidth": 80,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "endOfLine": "lf"
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 20d1c8fbe..511fa423e 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "ms-toolsai.jupyter",
-    "ms-python.autopep8"
-  ]
+  "recommendations": ["ms-toolsai.jupyter", "ms-python.autopep8"]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8cda1d873..f198b1446 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,17 +1,49 @@
 {
-    "[javascript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features",
-      },
-      "[javascriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
-      },
-      "[typescript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
-      },
-      "[typescriptreact]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
-      },
-      "githubPullRequests.ignoredPullRequestBranches": [
-        "main"
-      ],
-}
\ No newline at end of file
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/dist": true,
+    "**/build": true,
+    "**/lib": true,
+    "**/.next": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/dist": true,
+    "**/build": true,
+    "**/lib": true,
+    "**/.next": true,
+    "**/package-lock.json": true,
+    "**/yarn.lock": true
+  },
+  "githubPullRequests.ignoredPullRequestBranches": ["main"]
+}
diff --git a/.yarnrc.yml b/.yarnrc.yml
deleted file mode 100644
index 05fb81872..000000000
--- a/.yarnrc.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-# Copyright (c) Datalayer, Inc. https://datalayer.io
-# Distributed under the terms of the MIT License.
-
-enableImmutableInstalls: false
-enableInlineBuilds: false
-enableTelemetry: false
-httpTimeout: 60000
-nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
-
-# This will fix the build error with @lerna/legacy-package-management
-# See https://github.com/lerna/repro/pull/11
-packageExtensions:
-  "@lerna/legacy-package-management@*":
-    dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
-    peerDependencies:
-      "nx": "*"
diff --git a/CLAUDE.md b/CLAUDE.md
index 25ae2f557..67c72afb0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,58 +1,66 @@
 # Jupyter UI - AI Assistant Guide
 
 ## Quick Overview
-React component library for building Jupyter-compatible applications. Monorepo with Lerna managing 4 main packages and multiple examples.
+
+React component library for Jupyter notebooks. Monorepo with 4 packages managed by Lerna.
 
 ## Core Packages
-- `@datalayer/jupyter-react` - Main React components for notebooks, cells, terminals
-- `@datalayer/jupyter-lexical` - Rich text editor with Lexical framework integration  
-- `@datalayer/jupyter-docusaurus-plugin` - Plugin for Docusaurus sites
-- `datalayer-jupyter-vscode` - VS Code extension for notebooks
 
-## Key Commands
+- `@datalayer/jupyter-react` - React components for notebooks, cells, terminals
+- `@datalayer/jupyter-lexical` - Rich text editor integration
+- `@datalayer/jupyter-docusaurus-plugin` - Docusaurus plugin
+- `datalayer-jupyter-vscode` - VS Code extension
+
+## Essential Commands
+
 ```bash
-# Install dependencies
-npm install
+npm install                   # Install dependencies
+npm run build                 # Build all packages
+npm run jupyter:server        # Start Jupyter server (port 8686)
+npm run storybook            # Start Storybook (port 6006)
+npm run lint                 # Check errors only (--quiet)
+npm run lint:fix             # Auto-fix issues
+npm run format               # Format code
+npm run type-check           # TypeScript checking
+npm run check                # Run all checks (format, lint, type)
+npm run check:fix            # Auto-fix and check all
+npm test                     # Run tests
+```
 
-# Build all packages
-npm run build
+## Requirements
 
-# Start Jupyter server (required for development)
-npm run jupyter:server
+- Node.js >= 20.0.0 (use .nvmrc)
+- npm (not yarn)
+- Server token: `60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6`
 
-# Run specific examples
-npm run jupyter:ui:vite       # Vite example
-npm run jupyter:ui:nextjs     # Next.js example
-npm run jupyter:ui:lexical    # Lexical editor example
+## Key Files
 
-# Run tests
-npm test
+- `eslint.config.js` - ESLint v9 flat config
+- `.prettierrc.json` - Formatter config
+- `.prettierignore` - Excludes MDX files
+- `patches/` - Third-party fixes (auto-applied)
+- `packages/react/webpack.config.js` - Build config
 
-# Lint and format
-npm run lint
+## Recent Fixes (2024)
 
-# Storybook
-npm run storybook
-```
+- MDX comments: `{/_` → `{/** **/}` in 13 files
+- Node requirement: 18 → 20+
+- Webpack warnings: 7 → 2 (source-map exclusions)
+- @jupyterlite patch for missing logos
+- ESLint v9 flat config migration
+- React 18 deprecations fixed
+- Storybook CI: Added wait-on and --url for test reliability
+- Terminal component: Fixed BoxPanel initialization issue
+
+## Common Issues
+
+1. **Storybook errors**: Check MDX syntax, run `npx patch-package`
+2. **Node version**: Use Node 20+ (`nvm use`)
+3. **Lint errors**: Run `npm run lint:fix`
+4. **Build fails**: Run `npm run type-check`
+
+## AI Assistant Notes
 
-## Development Setup
-1. Requires Node.js >= 18.0.0
-2. Uses port 8686 for Jupyter server, 3208 for frontend
-3. Server token: `60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6`
-
-## Architecture Notes
-- Components wrap JupyterLab functionality in React declarative API
-- Supports IPyWidgets, kernels, outputs, file browser
-- Server communication via ServiceManager
-- Uses Lumino widgets under the hood but exposes React interface
-
-## Common Tasks
-- Adding components: Create in `packages/react/src/components/`
-- Testing examples: Use `examples/` folders with various frameworks
-- Documentation: Update in `docs/` (Docusaurus site)
-- Storybook: Components showcased in `storybook/`
-
-## Important Files
-- `lerna.json` - Monorepo configuration
-- `dev/config/jupyter_server_config.py` - Server settings
-- `packages/react/src/jupyter/JupyterContext.tsx` - Core context provider
\ No newline at end of file
+- Always use npm, not yarn
+- Prefer editing over creating files
+- Run lint/type checks before committing
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 789e5c455..1e18df206 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,56 +1,310 @@
-# How to contribute?
+# Contributing to Jupyter UI
 
-If you are reading this file, you have some ideas to improve this code; thanks a lot for that.
+Thank you for your interest in contributing to Jupyter UI! We welcome all contributions: issue reporting, documentation improvements, bug fixes, or code enhancements.
 
-Datalayer welcomes all contributions: issue reporting, documentation improvements, bug fixes
-or code enhancements.
+## 📋 Prerequisites
 
-## Development
+Before you begin, ensure you have the following installed:
 
-We will focus here on the `packages/react` folder that is the corner stone of jupyter-ui; aka
-providing Jupyter React components.
+- **Node.js** >= 20.0.0 (preferably the LTS version)
+- **npm** >= 8.0.0
+- **Python** >= 3.9 (for running Jupyter server)
+- **Git** >= 2.0.0
 
-### Installation
+## 🚀 Development Setup
 
-To install it in dev mode, you first must install:
-- [node.js](https://nodejs.org) (preferably the LTS version)
+This is a monorepo managed by Lerna with multiple packages. Here's how to get started:
 
-Then execute the following commands in the `packages/react` folder:
+### Initial Setup
 
-```sh
-# Install npm - https://yarnpkg.com/getting-started/install
-corepack enable
+```bash
+# Clone the repository
+git clone https://github.com/datalayer/jupyter-ui.git
+cd jupyter-ui
+
+# Install dependencies for all packages
 npm install
+
+# Build all packages
 npm run build
+
+# Start the Jupyter server (required for development)
+npm run jupyter:server
+```
+
+The Jupyter server will run on port 8686 with a predefined token for development.
+
+## 📦 Project Structure
+
+```
+jupyter-ui/
+├── packages/              # Core library packages
+│   ├── react/            # Main React components (@datalayer/jupyter-react)
+│   ├── lexical/          # Rich text editor (@datalayer/jupyter-lexical)
+│   ├── docusaurus-plugin/# Docusaurus integration
+│   └── vscode/           # VS Code extension
+├── examples/             # Example implementations
+│   ├── vite/            # Vite example
+│   ├── next-js/         # Next.js example
+│   ├── docusaurus/      # Docusaurus example
+│   └── lexical/         # Lexical editor example
+├── storybook/           # Component showcase and testing
+├── docs/                # Documentation site
+└── dev/                 # Development utilities
 ```
 
-### Code changes
+## 🛠️ Development Workflow
+
+### 1. Working with Components
 
-The best way to test your changes is to use the storybook - a third-party tool allowing to
-interact with an isolated component.  
-To start it, execute
+The best way to test your changes is using Storybook:
 
-```sh
+```bash
+# Start Storybook (runs on http://localhost:6006)
 npm run storybook
 ```
 
-It should open a web browser tab pointing to `http://localhost:6006` in which you will
-be able to pick a story in the left sidebar.
+Storybook provides:
+
+- Isolated component development
+- Hot module replacement
+- Interactive props testing
+- Visual regression testing
+
+### 2. Running Examples
+
+Test your changes with different frameworks:
 
-You can now change the code of the component and the storybook will get updated right
-away when you save the source code.
+```bash
+# Vite example
+npm run jupyter:ui:vite
 
-**FAQ**:
+# Next.js example
+npm run jupyter:ui:nextjs
+
+# Lexical editor example
+npm run jupyter:ui:lexical
+```
+
+### 3. Creating New Components
+
+When adding a new component:
+
+1. Create the component in `packages/react/src/components/`
+2. Export it from the appropriate index file
+3. Add a story in `storybook/src/stories/`
+4. Add tests if applicable
+5. Update documentation
+
+Example story creation:
+
+```tsx
+// storybook/src/stories/YourComponent.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { YourComponent } from '@datalayer/jupyter-react';
+
+const meta: Meta<typeof YourComponent> = {
+  title: 'Components/YourComponent',
+  component: YourComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // your props
+  },
+};
+```
 
-- *No story available* for a component?  
-  You can create a story for a component by adding a new file `*.stories.tsx` in the folder `packages/react/stories`.
-  Hint: start by copying the file `Console.stories.tsx`
+## 📝 Code Quality Standards
 
-### Linting the code
+### ESLint & Prettier
 
-The code follows some rules for format and prevent bad practices.
-To check that and apply auto fixes, you must execute:
+We use ESLint (v9 flat config) and Prettier for code quality:
 
-```sh
+```bash
+# Check for linting issues (errors only)
 npm run lint
+
+# Fix auto-fixable issues
+npm run lint:fix
+
+# Format code with Prettier
+npm run format
+
+# Check formatting without fixing
+npm run format:check
+```
+
+### TypeScript
+
+Type checking is enforced:
+
+```bash
+# Run type checking
+npm run type-check
+```
+
+### Combined Checks
+
+For convenience, you can run all checks at once:
+
+```bash
+# Run all checks (format, lint, type-check)
+npm run check
+
+# Run all checks with auto-fix where possible
+npm run check:fix
+```
+
+### Pre-commit Hooks
+
+We use Husky and lint-staged for pre-commit checks:
+
+- ESLint validation
+- Prettier formatting
+- TypeScript type checking
+- Conventional commit messages
+
+### Commit Messages
+
+Follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+```
+feat: add new notebook toolbar
+fix: resolve kernel connection issue
+docs: update README with examples
+chore: update dependencies
+test: add cell component tests
+```
+
+## 🧪 Testing
+
+### Unit Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+```
+
+### Storybook Tests
+
+```bash
+# Test all stories
+npm run test:storybook
+
+# Test MDX documentation
+npm run test:mdx
+
+# Run all Storybook tests
+npm run test:all
 ```
+
+## 📚 Documentation
+
+### Adding Documentation
+
+1. **Component Documentation**: Add JSDoc comments to your components
+2. **Storybook Stories**: Create stories with MDX documentation
+3. **API Documentation**: Update TypeDoc comments
+4. **User Documentation**: Update files in `docs/` folder
+
+### Building Documentation
+
+```bash
+# Build documentation site
+cd docs
+npm run build
+
+# Start documentation dev server
+npm run start
+```
+
+## 🐛 Reporting Issues
+
+When reporting issues, please include:
+
+1. **Description**: Clear description of the problem
+2. **Reproduction**: Steps to reproduce the issue
+3. **Expected Behavior**: What should happen
+4. **Actual Behavior**: What actually happens
+5. **Environment**: Node version, OS, browser
+6. **Screenshots**: If applicable
+
+## 🚢 Submitting Pull Requests
+
+### Process
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/your-feature`
+3. Make your changes
+4. Run tests: `npm test`
+5. Run code quality checks: `npm run check`
+6. Commit with conventional message: `git commit -m "feat: add feature"`
+7. Push to your fork: `git push origin feature/your-feature`
+8. Open a Pull Request
+
+### PR Guidelines
+
+- **Title**: Use conventional commit format
+- **Description**: Explain what and why (not how)
+- **Tests**: Include tests for new features
+- **Documentation**: Update relevant documentation
+- **Screenshots**: Add for UI changes
+- **Breaking Changes**: Clearly mark if any
+
+### Review Process
+
+1. CI checks must pass
+2. Code review by maintainers
+3. Address review feedback
+4. Merge when approved
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+**Dependencies Issues**
+
+```bash
+# Clean install
+rm -rf node_modules package-lock.json
+npm install
+```
+
+**Build Issues**
+
+```bash
+# Clean and rebuild
+npm run clean
+npm run build
+```
+
+**Jupyter Server Issues**
+
+```bash
+# Check server is running
+curl http://localhost:8686/api
+
+# Restart server
+npm run jupyter:server
+```
+
+## 📬 Getting Help
+
+- **Documentation**: https://jupyter-ui.datalayer.tech
+- **Issues**: https://github.com/datalayer/jupyter-ui/issues
+- **Discussions**: https://github.com/datalayer/jupyter-ui/discussions
+- **Storybook**: https://jupyter-ui-storybook.datalayer.tech
+
+## 📄 License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.
diff --git a/README.md b/README.md
index 5f734e83c..61df031ec 100644
--- a/README.md
+++ b/README.md
@@ -4,25 +4,107 @@
 
 # 🪐 ⚛️ Jupyter UI
 
+[![Build Status](https://github.com/datalayer/jupyter-ui/actions/workflows/build.yml/badge.svg)](https://github.com/datalayer/jupyter-ui/actions/workflows/build.yml)
+[![npm version](https://img.shields.io/npm/v/@datalayer/jupyter-react)](https://www.npmjs.com/package/@datalayer/jupyter-react)
+[![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.8.3-blue)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-18.3.1-blue)](https://reactjs.org/)
+
 > React.js components 💯% compatible with 🪐 Jupyter.
 >
 > Documentation: https://jupyter-ui.datalayer.tech
 >
 > Storybook: https://jupyter-ui-storybook.datalayer.tech
 
-Jupyter UI is a set of [React.js](https://react.dev) components that allow a frontend/webapp developer to build data products compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter noteboks.
+Jupyter UI is a set of [React.js](https://react.dev) components that allow a frontend/webapp developer to build data products compatible with the [Jupyter](https://jupyter.org) ecosystem. The user interface delivers executable notebooks, cells, terminals, file browsers and allows the developer to manage a full integrated React tree instead of relying on iframes to display the Jupyter notebooks.
+
+## 📦 Packages
+
+| Package                                                              | Version                                                                                                                                                                                         | Description                                   |
+| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
+| [@datalayer/jupyter-react](./packages/react)                         | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-react)](https://www.npmjs.com/package/@datalayer/jupyter-react)                                                                         | Core React components for Jupyter integration |
+| [@datalayer/jupyter-lexical](./packages/lexical)                     | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-lexical)](https://www.npmjs.com/package/@datalayer/jupyter-lexical)                                                                     | Rich text editor with Lexical framework       |
+| [@datalayer/jupyter-docusaurus-plugin](./packages/docusaurus-plugin) | [![npm](https://img.shields.io/npm/v/@datalayer/jupyter-docusaurus-plugin)](https://www.npmjs.com/package/@datalayer/jupyter-docusaurus-plugin)                                                 | Docusaurus plugin for Jupyter notebooks       |
+| [datalayer-jupyter-vscode](./packages/vscode)                        | [![marketplace](https://img.shields.io/visual-studio-marketplace/v/datalayer.datalayer-jupyter-vscode)](https://marketplace.visualstudio.com/items?itemName=datalayer.datalayer-jupyter-vscode) | VS Code extension                             |
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+npm install @datalayer/jupyter-react
+```
+
+### Basic Usage
+
+```tsx
+import { Jupyter, Notebook } from '@datalayer/jupyter-react';
+
+function App() {
+  return (
+    <Jupyter
+      jupyterServerUrl="http://localhost:8686"
+      jupyterServerToken="your-token"
+      startDefaultKernel
+    >
+      <Notebook />
+    </Jupyter>
+  );
+}
+```
 
-<hr/>
+### Development Setup
 
 As a developer start with the [setup of your environment](https://jupyter-ui.datalayer.tech/docs/develop/setup) and try [one of the examples](https://jupyter-ui.datalayer.tech/docs/category/examples). We have [documentation](https://jupyter-ui.datalayer.tech) for more details.
 
-> You can try the CodeSanbox examples.
+```bash
+# Clone the repository
+git clone https://github.com/datalayer/jupyter-ui.git
+cd jupyter-ui
+
+# Install dependencies
+npm install
+
+# Build all packages
+npm run build
+
+# Start Jupyter server (required for development)
+npm run jupyter:server
+
+# Run an example
+npm run jupyter:ui:vite
+```
+
+## 🎮 Try It Online
+
+You can try the CodeSandbox examples:
+
+- [Notebook with Create React App](https://codesandbox.io/p/sandbox/jupyter-react-cra-notebook-66r25c-66r25c)
+- [Notebook with Next.js](https://codesandbox.io/p/devbox/jupyter-react-nextjs-qzv8cz)
+- [Simple Cell Component](https://codesandbox.io/p/sandbox/jupyter-react-cra-cell-te6hii-te6hii) - You may need to refresh the sandbox navigator
+
+We host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that showcases various low-level and high-level React.js components useful to build a Data Product.
 
-- [A Notebook with CRA](https://codesandbox.io/p/sandbox/jupyter-react-cra-notebook-66r25c-66r25c).
-- [A Notebook with Next JS](https://codesandbox.io/p/devbox/jupyter-react-nextjs-qzv8cz).
-- [A simple Cell](https://codesandbox.io/p/sandbox/jupyter-react-cra-cell-te6hii-te6hii) - You may need to refesh the sandbox navigator.
+## ✨ Features
 
-We host a Storybook on ✨ https://jupyter-ui-storybook.datalayer.tech that showcases various low-level as high-level React.js components useful to build a Data Product.
+### Core Components
+
+- **📓 Notebook** - Full notebook interface with cells, outputs, and toolbar
+- **📝 Cell** - Individual code/markdown cells with execution
+- **💻 Console** - Interactive Jupyter console
+- **🖥️ Terminal** - Web-based terminal interface
+- **📁 FileBrowser** - File system navigation and management
+- **⚙️ Kernel Management** - Kernel lifecycle and execution control
+- **📊 Output Rendering** - Display of execution results, plots, and widgets
+
+### Advanced Features
+
+- **🔌 IPyWidgets Support** - Full support for interactive widgets
+- **👥 Collaborative Editing** - Real-time collaboration using Y.js
+- **🎨 Theming** - JupyterLab theme support with dark/light modes
+- **🔧 Extensible** - Plugin system for custom functionality
+- **🚀 Performance** - Virtual scrolling, lazy loading, and optimizations
+- **🔒 Security** - Token authentication, CORS, XSS protection
 
 <div align="center" style="text-align: center">
   <img alt="Jupyter UI Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
@@ -42,28 +124,77 @@ IPyWidgets are supported (the Comm feature needs to be fixed). JupyterLite and P
 
 You can find more context reading this [abstract](https://fosdem.org/2022/schedule/event/lt_jupyter) of the talk given at [FOSDEM 2022](https://fosdem.org/2022) ([video recording](http://bofh.nikhef.nl/events/FOSDEM/2022/L.lightningtalks/lt_jupyter.webm)).
 
-## Next.js Integration
+## 🔗 Framework Integrations
+
+### Next.js
 
-See the [Next.js example](https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js).
+Full server-side rendering support with the [Next.js example](https://github.com/datalayer/jupyter-ui/tree/main/examples/next-js).
 
 <div align="center" style="text-align: center">
-  <img alt="Jupyter UI Docusaurus" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-nextjs.png" />
+  <img alt="Jupyter UI Next.js" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-nextjs.png" />
 </div>
 
-## Docusaurus Integration
+### Docusaurus
 
-We maintain a plugin for [Docusaurus](https://docusaurus.io) in the [docusaurus](https://github.com/datalayer/jupyter-ui/tree/main/packages/docusaurus-plugin) package folder (see the [Docusaurus example](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus)).
+We maintain a plugin for [Docusaurus](https://docusaurus.io) in the [docusaurus-plugin](https://github.com/datalayer/jupyter-ui/tree/main/packages/docusaurus-plugin) package (see the [Docusaurus example](https://github.com/datalayer/jupyter-ui/tree/main/examples/docusaurus)).
 
 <div align="center" style="text-align: center">
   <img alt="Jupyter UI Docusaurus" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-docusaurus.png" />
 </div>
 
-## Support
+### Other Integrations
+
+- **Vite** - Modern build tool integration ([example](https://github.com/datalayer/jupyter-ui/tree/main/examples/vite))
+- **Create React App** - Classic React app setup
+- **Lexical** - Rich text editing capabilities ([example](https://github.com/datalayer/jupyter-ui/tree/main/examples/lexical))
+- **VS Code** - Extension for notebook editing ([package](https://github.com/datalayer/jupyter-ui/tree/main/packages/vscode))
+
+## 📋 Requirements
+
+- **Node.js** >= 18.0.0
+- **npm** >= 8.0.0
+- **Python** >= 3.8 (for Jupyter server)
+- **JupyterLab** >= 4.0.0
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.
+
+### Development Workflow
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Run tests (`npm test`)
+5. Run code quality checks (`npm run check`)
+6. Commit your changes (`git commit -m 'Add amazing feature'`)
+7. Push to your branch (`git push origin feature/amazing-feature`)
+8. Open a Pull Request
+
+### Code Quality
+
+- **TypeScript** - Strict type checking enabled
+- **ESLint** - Modern flat config with React and TypeScript rules
+- **Prettier** - Consistent code formatting
+- **Husky** - Pre-commit hooks for quality checks
+- **Commitlint** - Conventional commit messages
+
+Run all checks with a single command:
+
+```bash
+npm run check        # Run format check, lint, and type-check
+npm run check:fix    # Run format, lint fix, and type-check
+```
+
+## 💬 Support
 
-Please open [issues](https://github.com/datalayer/jupyter-ui/issues) for questions, feature requests, bug reports... We also welcome [pull requests](https://github.com/datalayer/jupyter-ui/pulls).
+- 📝 [Documentation](https://jupyter-ui.datalayer.tech)
+- 🐛 [Issues](https://github.com/datalayer/jupyter-ui/issues)
+- 💡 [Discussions](https://github.com/datalayer/jupyter-ui/discussions)
+- 🎨 [Storybook](https://jupyter-ui-storybook.datalayer.tech)
 
 ## ⚖️ License
 
-Copyright (c) 2022 Datalayer, Inc.
+Copyright (c) 2022-2025 Datalayer, Inc.
 
 Released under the terms of the MIT license (see [LICENSE](./LICENSE)).
diff --git a/SUMMARY.md b/SUMMARY.md
index 2e81301e5..1a806ae3f 100644
--- a/SUMMARY.md
+++ b/SUMMARY.md
@@ -7,6 +7,7 @@ Jupyter UI is an open-source React.js component library that bridges the gap bet
 ### Core Problem Solved
 
 Traditional JupyterLab uses the Lumino widget toolkit, an imperative UI framework that isn't compatible with modern declarative frameworks like React. This forces developers to either:
+
 - Use iframes to embed Jupyter notebooks (limiting integration)
 - Work within the rigid extension system of JupyterLab
 - Build entirely from scratch
@@ -44,6 +45,7 @@ jupyter-ui/
 The main package providing React components for Jupyter functionality.
 
 **Key Components:**
+
 - **Notebook Components**: Full notebook interface with cells, outputs, toolbar
 - **Cell Components**: Individual code/markdown cells with execution
 - **Console**: Interactive Jupyter console
@@ -53,12 +55,14 @@ The main package providing React components for Jupyter functionality.
 - **Output Rendering**: Display of execution results, plots, widgets
 
 **Architecture:**
+
 - Uses JupyterLab's underlying services (kernels, sessions, contents)
 - Provides React context providers for state management
 - Supports both local and remote Jupyter servers
 - Implements WebSocket communication for real-time updates
 
 **Key Files:**
+
 - `src/jupyter/JupyterContext.tsx` - Core context provider
 - `src/components/notebook/Notebook.tsx` - Main notebook component
 - `src/providers/ServiceManagerProvider.tsx` - Service management
@@ -68,6 +72,7 @@ The main package providing React components for Jupyter functionality.
 Integration with Meta's Lexical framework for rich text editing in notebooks.
 
 **Features:**
+
 - Rich text editing with Jupyter cell support
 - Code highlighting and syntax support
 - Equation rendering (KaTeX)
@@ -76,6 +81,7 @@ Integration with Meta's Lexical framework for rich text editing in notebooks.
 - Conversion between Lexical and nbformat
 
 **Components:**
+
 - Custom Lexical nodes for Jupyter cells
 - Plugins for Jupyter-specific functionality
 - Toolbar and formatting controls
@@ -86,6 +92,7 @@ Integration with Meta's Lexical framework for rich text editing in notebooks.
 Plugin enabling Jupyter notebook integration in Docusaurus documentation sites.
 
 **Capabilities:**
+
 - Embed live notebooks in documentation
 - Interactive code execution
 - Syntax highlighting
@@ -96,6 +103,7 @@ Plugin enabling Jupyter notebook integration in Docusaurus documentation sites.
 VS Code extension for notebook editing using the Jupyter UI components.
 
 **Features:**
+
 - Custom notebook editor
 - Kernel management within VS Code
 - Runtime picker
@@ -106,21 +114,49 @@ VS Code extension for notebook editing using the Jupyter UI components.
 ### Build System
 
 **Technologies:**
+
 - TypeScript for type safety
 - Webpack for bundling
 - Gulp for resource management
 - Babel for transpilation
 - Lerna for monorepo management
+- npm workspaces for dependency management
 
 **Build Process:**
+
 1. Resource copying via Gulp
 2. TypeScript compilation
 3. Webpack bundling
 4. Package-specific builds
 
+### Code Quality & Linting
+
+**Pre-commit Hooks (Husky + lint-staged):**
+
+- ESLint for code quality (v9 flat config)
+- Prettier for code formatting
+- TypeScript type checking
+- Conventional commit messages (commitlint)
+
+**Linting Stack:**
+
+- ESLint with TypeScript support
+- React and React Hooks plugins
+- Prettier integration
+- Custom rules for JupyterLab compatibility
+
+**Available Scripts:**
+
+- `npm run lint` - Check for linting issues
+- `npm run lint:fix` - Auto-fix linting issues
+- `npm run format` - Format all files with Prettier
+- `npm run format:check` - Check formatting
+- `npm run type-check` - TypeScript type checking
+
 ### Development Server
 
 **Jupyter Server Configuration:**
+
 - Port: 8686
 - Token authentication enabled
 - CORS configured for development
@@ -128,12 +164,29 @@ VS Code extension for notebook editing using the Jupyter UI components.
 - Terminal support enabled
 
 **Frontend Development:**
+
 - Hot module replacement
 - Port: 3208 (varies by example)
 - Proxy configuration for API calls
 
 ### Testing Infrastructure
 
+### Storybook Testing
+
+- **@storybook/test-runner** for automated story testing
+- Custom MDX documentation testing with Playwright
+- 38 component stories with smoke tests
+- 13 MDX documentation files verified
+- CI integration with GitHub Actions
+
+### Test Commands
+
+- `npm run test:storybook` - Test all stories
+- `npm run test:mdx` - Test MDX documentation
+- `npm run test:all` - Run both test suites
+
+### Other Testing
+
 - Jest for unit testing
 - Playwright for UI testing
 - Coverage reporting
@@ -142,6 +195,7 @@ VS Code extension for notebook editing using the Jupyter UI components.
 ## Key Technologies & Dependencies
 
 ### Frontend Stack
+
 - **React 18.3.1** - UI framework
 - **TypeScript 5.8.3** - Type safety
 - **JupyterLab packages** - Core Jupyter functionality
@@ -150,12 +204,14 @@ VS Code extension for notebook editing using the Jupyter UI components.
 - **IPyWidgets** - Interactive widget support
 
 ### Styling & Theming
+
 - CSS modules
 - JupyterLab themes
 - Tailwind CSS (v4 in lexical package)
 - Custom theme providers
 
 ### Communication Layer
+
 - WebSocket for kernel communication
 - REST API for server operations
 - Service Manager pattern
@@ -176,7 +232,7 @@ function App() {
   });
 
   return (
-    <Notebook 
+    <Notebook
       kernel={defaultKernel}
       serviceManager={serviceManager}
     />
@@ -220,13 +276,14 @@ Developers can register custom output renderers:
 ```typescript
 registerRenderer({
   mimeType: 'application/custom',
-  renderer: CustomComponent
+  renderer: CustomComponent,
 });
 ```
 
 ### Plugin System
 
 The Lexical package supports plugins for:
+
 - Custom cell types
 - Toolbar extensions
 - Keyboard shortcuts
@@ -235,17 +292,20 @@ The Lexical package supports plugins for:
 ## Deployment Scenarios
 
 ### 1. Static Sites
+
 - Build-time notebook rendering
 - Client-side kernel execution (Pyodide)
 - No server required
 
 ### 2. Server-Based
+
 - Full Jupyter server backend
 - Multi-user support
 - Persistent storage
 - Real-time collaboration
 
 ### 3. Hybrid
+
 - Static content with on-demand execution
 - Serverless function backends
 - Edge computing scenarios
@@ -266,19 +326,117 @@ The Lexical package supports plugins for:
 - Sandboxed iframe execution
 - Content Security Policy support
 
+## CI/CD Pipeline
+
+### GitHub Actions Workflows
+
+**build.yml:**
+
+- Runs on main branch and PRs
+- Build verification across packages
+- Visual testing with Playwright
+- Storybook story and MDX testing
+- Docker container builds
+- Uses npm instead of yarn
+- TypeScript type checking
+- ESLint error checking (no warnings)
+- Prettier formatting validation
+
+**Key Jobs:**
+
+1. **build** - Compiles all packages
+2. **visual-test** - Playwright visual regression tests
+3. **storybook-test** - Tests all stories and documentation
+4. **docker-dev** - Dev container verification
+
+**Other Workflows:**
+
+- `fix-license-header.yml` - Automatic license header corrections
+- `publish-dev.yml` - Publishes dev versions to GitHub Packages
+
+## Recent Improvements (2024-2025)
+
+### Configuration Modernization
+
+- **ESLint v9 Flat Config**: Migrated from deprecated .eslintignore to modern flat config format
+- **Prettier JSON Config**: Replaced CommonJS config with .prettierrc.json
+- **Line Endings**: Enforced LF line endings for cross-platform consistency
+- **Trailing Commas**: Added support for better TypeScript compatibility
+- **Node.js 20+**: Updated minimum requirement from Node 18 to Node 20
+- **NVM Support**: Added .nvmrc file for consistent Node version management
+
+### Code Quality Fixes
+
+- **React 18 Migration**: Fixed deprecated ReactDOM.render usage
+- **TypeScript Strictness**: Replaced @ts-ignore with @ts-expect-error
+- **React Best Practices**: Added missing key props in list renderings
+- **Security**: Added rel="noreferrer" to external links
+- **Hook Rules**: Fixed conditional hook calls
+
+### Storybook Fixes
+
+- **MDX Comment Syntax**: Fixed malformed comments in 13 MDX files from `{/_` to `{/** **/}`
+- **Prettier Exclusion**: Added MDX files to .prettierignore to prevent comment corruption
+- **Missing Logo Files**: Created patch for @jupyterlite/javascript-kernel-extension to fix missing logo references
+
+### Build & CI Improvements
+
+- **Webpack Warnings**: Reduced source map warnings from 7 to 2 by excluding problematic packages
+- **Patch-Package**: Added automatic patching of third-party modules during npm install
+- **GitHub Actions**: Updated all workflows to use Node 20
+- **Build Stability**: Fixed CI build failures in Storybook
+- **Storybook CI Testing**: Fixed test runner connection issues with wait-on and explicit URL configuration
+- **Terminal Component**: Fixed BoxPanel initialization error with proper direction setting and delayed widget addition
+
+### Testing Infrastructure
+
+- **Storybook Test Runner**: Automated testing for all component stories
+- **MDX Documentation Testing**: Verification of documentation examples
+- **CI Integration**: Full test suite runs on every PR
+
+## Latest Session Updates (Aug 15, 2025)
+
+### Storybook CI Test Fixes
+
+- **Problem**: Test runner couldn't connect to Storybook static server (127.0.0.1 vs localhost mismatch)
+- **Solution**:
+  - Created `test:all:ci` script with explicit `--url http://localhost:6006`
+  - Added `npx wait-on` to ensure server is ready before tests
+  - Removed fixed sleep duration for more reliable CI runs
+
+### Terminal Component Fixes
+
+- **Problem**: `TypeError: Cannot read properties of null (reading 'addWidget')` in BoxPanel
+- **Solution**:
+  - Added `direction = 'top-to-bottom'` to BoxPanel initialization
+  - Added defensive check in `setTheme` method
+  - Implemented delayed widget addition with error handling
+  - Added error logging for better debugging
+
+### Files Modified in Latest Session
+
+- `.github/workflows/build.yml` - Updated Storybook test runner configuration
+- `storybook/package.json` - Added test:all:ci script
+- `packages/react/src/components/terminal/TerminalAdapter.ts` - Fixed BoxPanel initialization
+
 ## Notable Features
 
 ### IPyWidgets Support
+
 Full support for interactive widgets with two-way communication between Python and JavaScript.
 
 ### Collaborative Editing
+
 Real-time collaboration using Y.js for conflict-free replicated data types.
 
 ### Multiple Kernel Support
+
 Simultaneous connections to different kernels (Python, R, Julia, etc.).
 
 ### Extensible Output System
+
 Support for various output types including:
+
 - Plain text/HTML/Markdown
 - Images (PNG, JPEG, SVG)
 - Plots (Matplotlib, Plotly, Bokeh)
@@ -313,4 +471,4 @@ The repository includes several example implementations:
 
 ## Conclusion
 
-Jupyter UI represents a significant advancement in making Jupyter notebooks accessible to modern web developers. By providing React components that wrap Jupyter functionality, it enables the creation of custom data products that leverage the full power of the Jupyter ecosystem while maintaining the flexibility and composability that React developers expect. The monorepo structure, comprehensive examples, and extensive documentation make it a robust solution for integrating computational notebooks into web applications.
\ No newline at end of file
+Jupyter UI represents a significant advancement in making Jupyter notebooks accessible to modern web developers. By providing React components that wrap Jupyter functionality, it enables the creation of custom data products that leverage the full power of the Jupyter ecosystem while maintaining the flexibility and composability that React developers expect. The monorepo structure, comprehensive examples, and extensive documentation make it a robust solution for integrating computational notebooks into web applications.
diff --git a/dev/py/templates/error.html b/dev/py/templates/error.html
index e319d5edc..c4e29928f 100644
--- a/dev/py/templates/error.html
+++ b/dev/py/templates/error.html
@@ -4,62 +4,58 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <!--
 Copyright (c) Jupyter Development Team.
 Distributed under the terms of the Modified BSD License.
 -->
 <html>
+  <head>
+    <meta charset="utf-8" />
 
-<head>
-  <meta charset="utf-8">
+    <title>{% block title %}{{page_title | e}}{% endblock %}</title>
 
-  <title>{% block title %}{{page_title | e}}{% endblock %}</title>
-
-  {% block favicon %}<link rel="shortcut icon" type="image/x-icon" href="/static/favicons/favicon.ico">{% endblock %}
-
-</head>
-
-<body>
-
-{% block stylesheet %}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
-{% endblock %}
-{% block site %}
-
-<div class="error">
-    {% block h1_error %}
-    <h1>{{status_code | e}} : {{status_message | e}}</h1>
-    {% endblock h1_error %}
-    {% block error_detail %}
-    {% if message %}
-    <p>The error was:</p>
-    <div class="traceback-wrapper">
-    <pre class="traceback">{{message | e}}</pre>
-    </div>
-    {% endif %}
+    {% block favicon %}
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="/static/favicons/favicon.ico"
+    />
     {% endblock %}
-</header>
-
-{% endblock %}
-
-{% block script %}
-<script type='text/javascript'>
-window.onload = function () {
-  var tb = document.getElementsByClassName('traceback')[0];
-  tb.scrollTop = tb.scrollHeight;
-  {% if message %}
-  console.error("{{message | e}}")
-  {% endif %}
-};
-</script>
-{% endblock script %}
-
-</body>
+  </head>
+
+  <body>
+    {% block stylesheet %}
+    <style type="text/css">
+      /* disable initial hide */
+      div#header,
+      div#site {
+        display: block;
+      }
+    </style>
+    {% endblock %} {% block site %}
+
+    <div class="error">
+      {% block h1_error %}
+      <h1>{{status_code | e}} : {{status_message | e}}</h1>
+      {% endblock h1_error %} {% block error_detail %} {% if message %}
+      <p>The error was:</p>
+      <div class="traceback-wrapper">
+        <pre class="traceback">{{message | e}}</pre>
+      </div>
+      {% endif %} {% endblock %}
+    </div>
 
+    {% endblock %} {% block script %}
+    <script type="text/javascript">
+      window.onload = function () {
+        var tb = document.getElementsByClassName('traceback')[0];
+        tb.scrollTop = tb.scrollHeight;
+        {% if message %}
+        console.error("{{message | e}}")
+        {% endif %}
+      };
+    </script>
+    {% endblock script %}
+  </body>
 </html>
diff --git a/dev/py/templates/index.html b/dev/py/templates/index.html
index 2102108ad..c466aa284 100644
--- a/dev/py/templates/index.html
+++ b/dev/py/templates/index.html
@@ -4,34 +4,34 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <title>{{page_config['appName'] | e}}</title>
-</head>
-<body>
+  <head>
+    <title>{{page_config['appName'] | e}}</title>
+  </head>
+  <body>
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
 
-  {# Copy so we do not modify the page_config with updates. #}
-  {% set page_config_full = page_config.copy() %}
-    
-  {# Set a dummy variable - we just want the side effect of the update. #}
-  {% set _ = page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
-    
-  <script id="jupyter-config-data" type="application/json">
-    {{ page_config_full | tojson }}
-  </script>
-  <script src="{{page_config['fullStaticUrl'] | e}}/bundle.js" main="index"></script>
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+    <script
+      src="{{page_config['fullStaticUrl'] | e}}/bundle.js"
+      main="index"
+    ></script>
 
-  <script type="text/javascript">
-    /* Remove token from URL. */
-    (function () {
-      var parsedUrl = new URL(window.location.href);
-      if (parsedUrl.searchParams.get('token')) {
-        parsedUrl.searchParams.delete('token');
-        window.history.replaceState({ }, '', parsedUrl.href);
-      }
-    })();
-  </script>
-
-</body>
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
 </html>
diff --git a/docs/README.md b/docs/README.md
index e0aa5ae3f..97aece7f8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -19,7 +19,7 @@ npm start
 ```
 
 ```bash
-# Build: This command generates static content into the `build` directory 
+# Build: This command generates static content into the `build` directory
 # and can be served using any static contents hosting service.
 npm run build
 ```
diff --git a/docs/_tmp/ipyreactive/_category_.yml b/docs/_tmp/ipyreactive/_category_.yml
index 9f0ce4c8f..22fadd98a 100644
--- a/docs/_tmp/ipyreactive/_category_.yml
+++ b/docs/_tmp/ipyreactive/_category_.yml
@@ -1,2 +1,2 @@
-label: "IPyReactive"
+label: 'IPyReactive'
 position: 12
diff --git a/docs/_tmp/ipyreactive/index.mdx b/docs/_tmp/ipyreactive/index.mdx
index b62343366..b65aa725e 100644
--- a/docs/_tmp/ipyreactive/index.mdx
+++ b/docs/_tmp/ipyreactive/index.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-description: IPyReactive.
----
+
+## description: IPyReactive.
 
 # 🪐 🔥 IPyReactive
 
diff --git a/docs/_tmp/ipyscript/_category_.yml b/docs/_tmp/ipyscript/_category_.yml
index 3648f940e..056de3ce3 100644
--- a/docs/_tmp/ipyscript/_category_.yml
+++ b/docs/_tmp/ipyscript/_category_.yml
@@ -1,2 +1,2 @@
-label: "IPyScript"
+label: 'IPyScript'
 position: 11
diff --git a/docs/_tmp/ipyscript/index.mdx b/docs/_tmp/ipyscript/index.mdx
index fdd3a1bfa..36355277c 100644
--- a/docs/_tmp/ipyscript/index.mdx
+++ b/docs/_tmp/ipyscript/index.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-description: IPyScript.
----
+
+## description: IPyScript.
 
 # 🪐 🐉 IPyScript
 
diff --git a/docs/_tmp/lumino/_category_.yml b/docs/_tmp/lumino/_category_.yml
index ea2a6dbfd..7ae6defd9 100644
--- a/docs/_tmp/lumino/_category_.yml
+++ b/docs/_tmp/lumino/_category_.yml
@@ -1,2 +1,2 @@
-label: "Lumino"
+label: 'Lumino'
 position: 14
diff --git a/docs/_tmp/lumino/index.mdx b/docs/_tmp/lumino/index.mdx
index a7c6b710b..c7581ddd4 100644
--- a/docs/_tmp/lumino/index.mdx
+++ b/docs/_tmp/lumino/index.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-description: Jupyter Lumino.
----
+
+## description: Jupyter Lumino.
 
 # 🪐 Jupyter Lumino
 
diff --git a/docs/_tmp/native/_category_.yml b/docs/_tmp/native/_category_.yml
index 8950a6c80..69fefb4e2 100644
--- a/docs/_tmp/native/_category_.yml
+++ b/docs/_tmp/native/_category_.yml
@@ -1,2 +1,2 @@
-label: "Native"
+label: 'Native'
 position: 9
diff --git a/docs/_tmp/native/index.mdx b/docs/_tmp/native/index.mdx
index ae05fd5d3..9990efd95 100644
--- a/docs/_tmp/native/index.mdx
+++ b/docs/_tmp/native/index.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-description: Jupyter UI Native components for mobile platforms.
----
+
+## description: Jupyter UI Native components for mobile platforms.
 
 # 🪐 📱 Jupyter UI Native
 
diff --git a/docs/docs/about/_category_.yml b/docs/docs/about/_category_.yml
index 089109989..de68a6583 100644
--- a/docs/docs/about/_category_.yml
+++ b/docs/docs/about/_category_.yml
@@ -1,2 +1,2 @@
-label: "About"
+label: 'About'
 position: 1
diff --git a/docs/docs/about/index.mdx b/docs/docs/about/index.mdx
index 94c83ce59..e55b96555 100644
--- a/docs/docs/about/index.mdx
+++ b/docs/docs/about/index.mdx
@@ -1,4 +1,4 @@
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # 🪐 ⚛️ About Jupyter UI
 
diff --git a/docs/docs/components/_category_.yaml b/docs/docs/components/_category_.yaml
index 4b1f50565..7ffc858e4 100644
--- a/docs/docs/components/_category_.yaml
+++ b/docs/docs/components/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Components"
+label: 'Components'
 position: 3
diff --git a/docs/docs/components/button/_category_.yml b/docs/docs/components/button/_category_.yml
index e3b0cf730..3eb786066 100644
--- a/docs/docs/components/button/_category_.yml
+++ b/docs/docs/components/button/_category_.yml
@@ -1,2 +1,2 @@
-label: "Button"
+label: 'Button'
 position: 5
diff --git a/docs/docs/components/button/index.mdx b/docs/docs/components/button/index.mdx
index 98883ca19..d1bac38b0 100644
--- a/docs/docs/components/button/index.mdx
+++ b/docs/docs/components/button/index.mdx
@@ -6,6 +6,4 @@ import { StorybookView } from '@theme/StorybookView';
 
 # 🪐 Button Component
 
-<StorybookView 
-    story='components-button--docs'
-/>
+<StorybookView story="components-button--docs" />
diff --git a/docs/docs/components/cell/_category_.yml b/docs/docs/components/cell/_category_.yml
index 7f536271c..11ef1c990 100644
--- a/docs/docs/components/cell/_category_.yml
+++ b/docs/docs/components/cell/_category_.yml
@@ -1,2 +1,2 @@
-label: "Cell"
+label: 'Cell'
 position: 3
diff --git a/docs/docs/components/cell/index.mdx b/docs/docs/components/cell/index.mdx
index 667818556..087360e13 100644
--- a/docs/docs/components/cell/index.mdx
+++ b/docs/docs/components/cell/index.mdx
@@ -10,14 +10,14 @@ This component displays a Jupyter Cell.
 
 ## With a Jupyter server
 
-<StorybookView story='components-cell--default' />
+<StorybookView story="components-cell--default" />
 
 ```jsx
 <Jupyter
-    jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
-    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+  jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
 >
-    <Cell />
+  <Cell />
 </Jupyter>
 ```
 
@@ -48,17 +48,15 @@ plt.show()
 
 You can use an in-browser kernel by setting the `lite` property of `Jupyter` component:
 
-<StorybookView 
-    story='components-cell--lite-python'
-/>
+<StorybookView story="components-cell--lite-python" />
 
 ```jsx
 <Jupyter lite={true}>
-    <Cell
-        source={`import sys
+  <Cell
+    source={`import sys
 print(f"{sys.platform=}")
 
 #...`}
-    />
+  />
 </Jupyter>
 ```
diff --git a/docs/docs/components/console/_category_.yml b/docs/docs/components/console/_category_.yml
index 393e9c527..7ab57c2c5 100644
--- a/docs/docs/components/console/_category_.yml
+++ b/docs/docs/components/console/_category_.yml
@@ -1,2 +1,2 @@
-label: "Console"
+label: 'Console'
 position: 3
diff --git a/docs/docs/components/console/index.mdx b/docs/docs/components/console/index.mdx
index 64e7df3f8..5c6e61280 100644
--- a/docs/docs/components/console/index.mdx
+++ b/docs/docs/components/console/index.mdx
@@ -10,20 +10,19 @@ This component displays a Jupyter Console.
 
 ## With a Jupyter server
 
-<StorybookView 
-    story='components-console--default'
-/>
+<StorybookView story="components-console--default" />
 
 ```jsx
 <Jupyter
-    jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
-    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+  jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
 >
-    <Console />
+  <Console />
 </Jupyter>
 ```
 
 You can set the following props to connect it to a running Jupyter Server:
+
 - `jupyterServerUrl`: The server URL
 - `jupyterServerToken`: The server authentication token
 
@@ -36,34 +35,29 @@ It supports in-browser kernel (using [JupyterLite kernels](https://jupyterlite.r
 To use the [Pyodide](https://pyodide.org/) Python [kernel](https://github.com/jupyterlite/pyodide-kernel),
 you can simply set `lite` to `true`:
 
-<StorybookView 
-    story='components-console--lite-python'
-/>
+<StorybookView story="components-console--lite-python" />
 
 ```jsx
-<Jupyter
-    lite={true}
->
-    <Console />
+<Jupyter lite={true}>
+  <Console />
 </Jupyter>
 ```
 
 But you can also load your own JupyterLite kernel. For example here, the console loads
 the [JavaScript kernel](https://github.com/jupyterlite/jupyterlite/tree/main/py/jupyterlite-javascript-kernel).
 
-<StorybookView 
-    story='components-console--lite-javascript'
-/>
+<StorybookView story="components-console--lite-javascript" />
 
 ```jsx
 <Jupyter
-    lite={import('@jupyterlite/javascript-kernel-extension')}
-    defaultKernelName={'javascript'}
+  lite={import('@jupyterlite/javascript-kernel-extension')}
+  defaultKernelName={'javascript'}
 >
-    <Console />
+  <Console />
 </Jupyter>
 ```
 
 To do so, you will need to specify two props:
+
 - `lite`: Should be set with the dynamic import of the kernel NPM package
 - `defaultKernelName`: Should match the name of the dynamically imported kernel
diff --git a/docs/docs/components/context/_category_.yml b/docs/docs/components/context/_category_.yml
index 43cc24f74..9d1735c38 100644
--- a/docs/docs/components/context/_category_.yml
+++ b/docs/docs/components/context/_category_.yml
@@ -1,2 +1,2 @@
-label: "Context"
+label: 'Context'
 position: 9
diff --git a/docs/docs/components/context/index.mdx b/docs/docs/components/context/index.mdx
index 65ae2c72f..c0eb8ac4c 100644
--- a/docs/docs/components/context/index.mdx
+++ b/docs/docs/components/context/index.mdx
@@ -19,9 +19,9 @@ If you prefer to not wrap in a Context, you can just use the JupyterLabCss compo
 ```tsx
 root.render(
   <>
-    <JupyterLabCss colorMode='dark' />
+    <JupyterLabCss colorMode="dark" />
     <Cell />
-  </>
+  </>,
 );
 ```
 
@@ -39,11 +39,11 @@ root.render(
       nbformat={notebookExample1 as INotebookContent}
       CellSidebar={CellSidebar}
       Toolbar={NotebookToolbar}
-      height='calc(100vh - 2.6rem)' // (Height - Toolbar Height).
+      height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
       cellSidebarMargin={120}
       uid="notebook-uid"
     />
-  </Jupyter>
+  </Jupyter>,
 );
 ```
 
diff --git a/docs/docs/components/file-manager/_category_.yml b/docs/docs/components/file-manager/_category_.yml
index 784250afe..1c76d41cc 100644
--- a/docs/docs/components/file-manager/_category_.yml
+++ b/docs/docs/components/file-manager/_category_.yml
@@ -1,2 +1,2 @@
-label: "File Manager"
+label: 'File Manager'
 position: 5
diff --git a/docs/docs/components/file-manager/index.mdx b/docs/docs/components/file-manager/index.mdx
index e63ae5c94..b2e9500fd 100644
--- a/docs/docs/components/file-manager/index.mdx
+++ b/docs/docs/components/file-manager/index.mdx
@@ -6,6 +6,4 @@ import { StorybookView } from '@theme/StorybookView';
 
 # 🪐 File Manager Component
 
-<StorybookView 
-    story='components-filemanager--docs'
-/>
+<StorybookView story="components-filemanager--docs" />
diff --git a/docs/docs/components/index.mdx b/docs/docs/components/index.mdx
index 62e7d9908..a733050ee 100644
--- a/docs/docs/components/index.mdx
+++ b/docs/docs/components/index.mdx
@@ -1,5 +1,5 @@
 import DocCardList from '@theme/DocCardList';
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # Components
 
@@ -36,4 +36,4 @@ The Jupyter UI components support:
 
 :::
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/components/jupyterlab-app/_category_.yml b/docs/docs/components/jupyterlab-app/_category_.yml
index 3dabe0f6c..2df36cfd6 100644
--- a/docs/docs/components/jupyterlab-app/_category_.yml
+++ b/docs/docs/components/jupyterlab-app/_category_.yml
@@ -1,2 +1,2 @@
-label: "JupyterLab App"
+label: 'JupyterLab App'
 position: 13
diff --git a/docs/docs/components/kernel/_category_.yml b/docs/docs/components/kernel/_category_.yml
index a0c394163..6ab4626ef 100644
--- a/docs/docs/components/kernel/_category_.yml
+++ b/docs/docs/components/kernel/_category_.yml
@@ -1,2 +1,2 @@
-label: "Kernels"
+label: 'Kernels'
 position: 7
diff --git a/docs/docs/components/notebook/_category_.yml b/docs/docs/components/notebook/_category_.yml
index 87051aaf9..f744900f2 100644
--- a/docs/docs/components/notebook/_category_.yml
+++ b/docs/docs/components/notebook/_category_.yml
@@ -1,2 +1,2 @@
-label: "Notebook"
+label: 'Notebook'
 position: 2
diff --git a/docs/docs/components/notebook/index.mdx b/docs/docs/components/notebook/index.mdx
index 072b66a8c..6ce9e01c0 100644
--- a/docs/docs/components/notebook/index.mdx
+++ b/docs/docs/components/notebook/index.mdx
@@ -4,26 +4,25 @@ description: The Notebook component.
 
 import { StorybookView } from '@theme/StorybookView';
 
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # 🪐 Notebook Component
 
 ## With a Jupyter server
 
-<StorybookView 
-    story='components-notebook--default'
-/>
+<StorybookView story="components-notebook--default" />
 
 ```jsx
 <Jupyter
-    jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
-    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+  jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
 >
-    <Notebook />
+  <Notebook />
 </Jupyter>
 ```
 
 You can set the following props to connect it to a running Jupyter Server:
+
 - `jupyterServerUrl`: The server URL
 - `jupyterServerToken`: The server authentication token
 
@@ -40,9 +39,7 @@ It supports in-browser kernel (using [JupyterLite kernels](https://jupyterlite.r
 To use the [Pyodide](https://pyodide.org/) Python [kernel](https://github.com/jupyterlite/pyodide-kernel),
 you can simply set `lite` to `true`:
 
-<StorybookView 
-    story='components-notebook--lite-python'
-/>
+<StorybookView story="components-notebook--lite-python" />
 
 ```jsx
 <Jupyter
@@ -64,7 +61,7 @@ you can simply set `lite` to `true`:
             outputs: [],
             source: 'import ipywidgets as widgets\nw = widgets.IntSlider()\nw',
           }
-        ],  
+        ],
         metadata: {
           kernelspec: {
             display_name: 'Python 3 (ipykernel)',
diff --git a/docs/docs/components/terminal/_category_.yml b/docs/docs/components/terminal/_category_.yml
index c179e710b..fc0644396 100644
--- a/docs/docs/components/terminal/_category_.yml
+++ b/docs/docs/components/terminal/_category_.yml
@@ -1,2 +1,2 @@
-label: "Terminal"
+label: 'Terminal'
 position: 4
diff --git a/docs/docs/components/terminal/index.mdx b/docs/docs/components/terminal/index.mdx
index 8481fef37..07046ca51 100644
--- a/docs/docs/components/terminal/index.mdx
+++ b/docs/docs/components/terminal/index.mdx
@@ -6,6 +6,4 @@ import { StorybookView } from '@theme/StorybookView';
 
 # 🪐 Terminal Component
 
-<StorybookView 
-    story='components-terminal--docs'
-/>
+<StorybookView story="components-terminal--docs" />
diff --git a/docs/docs/components/viewer/_category_.yml b/docs/docs/components/viewer/_category_.yml
index 7977d6ed4..04b077234 100644
--- a/docs/docs/components/viewer/_category_.yml
+++ b/docs/docs/components/viewer/_category_.yml
@@ -1,2 +1,2 @@
-label: "Viewer"
+label: 'Viewer'
 position: 6
diff --git a/docs/docs/components/viewer/index.mdx b/docs/docs/components/viewer/index.mdx
index be1901b48..3a04a8721 100644
--- a/docs/docs/components/viewer/index.mdx
+++ b/docs/docs/components/viewer/index.mdx
@@ -6,6 +6,4 @@ import { StorybookView } from '@theme/StorybookView';
 
 # 🪐 Viewer Component
 
-<StorybookView 
-    story='components-viewer--docs'
-/>
+<StorybookView story="components-viewer--docs" />
diff --git a/docs/docs/demos/_category_.yaml b/docs/docs/demos/_category_.yaml
index 3967ba5a1..025b227fb 100644
--- a/docs/docs/demos/_category_.yaml
+++ b/docs/docs/demos/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Demos"
+label: 'Demos'
 position: 9
diff --git a/docs/docs/demos/cell/_category_.yml b/docs/docs/demos/cell/_category_.yml
index aa85c15b8..4f927e0b7 100644
--- a/docs/docs/demos/cell/_category_.yml
+++ b/docs/docs/demos/cell/_category_.yml
@@ -1,2 +1,2 @@
-label: "Cell"
+label: 'Cell'
 position: 1
diff --git a/docs/docs/demos/cell/index.mdx b/docs/docs/demos/cell/index.mdx
index c3d0500f3..cfe3a3e71 100644
--- a/docs/docs/demos/cell/index.mdx
+++ b/docs/docs/demos/cell/index.mdx
@@ -8,12 +8,12 @@ import JupyterCell from '@theme/JupyterCell';
 
 :::tip
 
-✨ Type your code in the below cell and hit `SHIFT+ENTER` to execute your  code.
+✨ Type your code in the below cell and hit `SHIFT+ENTER` to execute your code.
 
 :::
 
 <JupyterCell
-  source= {`import numpy as np
+  source={`import numpy as np
 import matplotlib.pyplot as plt
 x1 = np.linspace(0.0, 5.0)
 x2 = np.linspace(0.0, 2.0)
diff --git a/docs/docs/demos/index.mdx b/docs/docs/demos/index.mdx
index 46ff992aa..698d0ff43 100644
--- a/docs/docs/demos/index.mdx
+++ b/docs/docs/demos/index.mdx
@@ -2,4 +2,4 @@ import DocCardList from '@theme/DocCardList';
 
 # Demos
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/deployments/_category_.yaml b/docs/docs/deployments/_category_.yaml
index 338de7018..0226d7af8 100644
--- a/docs/docs/deployments/_category_.yaml
+++ b/docs/docs/deployments/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Deployments"
+label: 'Deployments'
 position: 7
diff --git a/docs/docs/deployments/aws-amplify/_category_.yml b/docs/docs/deployments/aws-amplify/_category_.yml
index 02ac03843..907779df0 100644
--- a/docs/docs/deployments/aws-amplify/_category_.yml
+++ b/docs/docs/deployments/aws-amplify/_category_.yml
@@ -1,2 +1,2 @@
-label: "AWS Amplify"
+label: 'AWS Amplify'
 position: 3
diff --git a/docs/docs/deployments/aws-amplify/index.mdx b/docs/docs/deployments/aws-amplify/index.mdx
index ed8eb89c5..942328374 100644
--- a/docs/docs/deployments/aws-amplify/index.mdx
+++ b/docs/docs/deployments/aws-amplify/index.mdx
@@ -1,6 +1,6 @@
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
-# AWS Amplify 
+# AWS Amplify
 
 To use jupyter-react in Amplify, you need to make some changes to the build process and the Node versions.
 
@@ -12,20 +12,21 @@ To use jupyter-react in Amplify, you need to make some changes to the build proc
 
 After setting up your repository, follow these steps:
 
-1.	In your repository's App Settings, navigate to the Build settings tab.
-	<ModalImage
-		small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings.png"
-		large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings.png"
-		alt="Tab Settings"
-	/>
-2.	Locate the App build specification section, which contains the amplify.yml file editor. This file manages the build settings.
-	<ModalImage
-		small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-app-build-spec.png"
-		large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-app-build-spec.png"
-		alt="App build specification"
-	/>
-3.	Click the Edit button to modify the amplify.yml file.
-4.	Replace the existing content with the following code to use Yarn v3 instead of npm:
+1. In your repository's App Settings, navigate to the Build settings tab.
+   <ModalImage
+     small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings.png"
+     large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings.png"
+     alt="Tab Settings"
+   />
+2. Locate the App build specification section, which contains the amplify.yml file editor. This file manages the build settings.
+   <ModalImage
+     small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-app-build-spec.png"
+     large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-app-build-spec.png"
+     alt="App build specification"
+   />
+3. Click the Edit button to modify the amplify.yml file.
+4. Replace the existing content with the following code to use Yarn v3 instead of npm:
+
 ```yaml
 version: 1
 frontend:
@@ -46,14 +47,15 @@ frontend:
     paths:
       - node_modules/**/*
 ```
-5.	Save the changes to the amplify.yml file.            
-6.	Scroll down to the Edit build image settings section and click Edit.
-	<ModalImage
-		small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings-build-image.png"
-		large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings-build-image.png"
-		alt="Build image settings"
-	/>
-7.	By default, it uses Node version 16.0, which may not work correctly. Set the build image to node:18.17.3 (or your preferred Node version).
-8.	Save the changes.
+
+5. Save the changes to the amplify.yml file.
+6. Scroll down to the Edit build image settings section and click Edit.
+   <ModalImage
+     small="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings-build-image.png"
+     large="https://datalayer-jupyter-examples.s3.us-east-1.amazonaws.com/deploy/amplify-settings-build-image.png"
+     alt="Build image settings"
+   />
+7. By default, it uses Node version 16.0, which may not work correctly. Set the build image to node:18.17.3 (or your preferred Node version).
+8. Save the changes.
 
 Once you've completed these steps, the next time you push to the main branch or the branch you've configured in Amplify, it will use these updated build settings. Your Amplify setup should work as expected.
diff --git a/docs/docs/deployments/index.mdx b/docs/docs/deployments/index.mdx
index ae33095ae..c51d32658 100644
--- a/docs/docs/deployments/index.mdx
+++ b/docs/docs/deployments/index.mdx
@@ -2,4 +2,4 @@ import DocCardList from '@theme/DocCardList';
 
 # Deployments
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/deployments/jupyter-server/_category_.yml b/docs/docs/deployments/jupyter-server/_category_.yml
index e789c9712..a09d40bb8 100644
--- a/docs/docs/deployments/jupyter-server/_category_.yml
+++ b/docs/docs/deployments/jupyter-server/_category_.yml
@@ -1,2 +1,2 @@
-label: "Jupyter Server"
+label: 'Jupyter Server'
 position: 1
diff --git a/docs/docs/deployments/jupyter-server/index.mdx b/docs/docs/deployments/jupyter-server/index.mdx
index 5597492dd..c9f060ecf 100644
--- a/docs/docs/deployments/jupyter-server/index.mdx
+++ b/docs/docs/deployments/jupyter-server/index.mdx
@@ -35,14 +35,14 @@ Alternatively, you can to define a `script` tag in the head section your host in
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <script id="datalayer-config-data" type="application/json">
-    {
-      "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
-      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
-    }
-  </script>
-</head>
+  <head>
+    <script id="datalayer-config-data" type="application/json">
+      {
+        "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
+        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+      }
+    </script>
+  </head>
 </html>
 ```
 
@@ -98,7 +98,7 @@ Please tune the following example to fit your security requirements, this is in
 
 <details>
 
-  <summary>⚠️ Use the following at your own risk!.</summary>
+<summary>⚠️ Use the following at your own risk!.</summary>
 
 ```py
 #################
@@ -144,19 +144,19 @@ c.IdentityProvider.cookie_options = {
 If you are using the [JupyterLabApp](/docs/components/jupyterlab-app) component, additional information will be needed (see [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html))
 
 ```html
-  <script id="jupyter-config-data" type="application/json">
-    {
-      "baseUrl": "https://oss.datalayer.run/api/jupyter-server",
-      "wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
-      "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-      "appUrl": "/lab",
-      "themesUrl": "/lab/api/themes",
-      "disableRTC": false,
-      "terminalsAvailable": "false",
-      "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
-      "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
-    }
-  </script>
+<script id="jupyter-config-data" type="application/json">
+  {
+    "baseUrl": "https://oss.datalayer.run/api/jupyter-server",
+    "wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
+    "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+    "appUrl": "/lab",
+    "themesUrl": "/lab/api/themes",
+    "disableRTC": false,
+    "terminalsAvailable": "false",
+    "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
+    "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
+  }
+</script>
 ```
 
 :::
diff --git a/docs/docs/deployments/jupyterhub/_category_.yml b/docs/docs/deployments/jupyterhub/_category_.yml
index 9aecf3a9e..dbff9000a 100644
--- a/docs/docs/deployments/jupyterhub/_category_.yml
+++ b/docs/docs/deployments/jupyterhub/_category_.yml
@@ -1,2 +1,2 @@
-label: "JupyterHub"
+label: 'JupyterHub'
 position: 2
diff --git a/docs/docs/develop/_category_.yaml b/docs/docs/develop/_category_.yaml
index c379266ad..eed1d4a03 100644
--- a/docs/docs/develop/_category_.yaml
+++ b/docs/docs/develop/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Develop"
+label: 'Develop'
 position: 2
diff --git a/docs/docs/develop/dev-environment/_category_.yml b/docs/docs/develop/dev-environment/_category_.yml
index b64ba58f9..758cecea2 100644
--- a/docs/docs/develop/dev-environment/_category_.yml
+++ b/docs/docs/develop/dev-environment/_category_.yml
@@ -1,2 +1,2 @@
-label: "Development Environment"
+label: 'Development Environment'
 position: 1
diff --git a/docs/docs/develop/dev-environment/conda/_category_.yml b/docs/docs/develop/dev-environment/conda/_category_.yml
index ec0d89356..716eb1831 100644
--- a/docs/docs/develop/dev-environment/conda/_category_.yml
+++ b/docs/docs/develop/dev-environment/conda/_category_.yml
@@ -1,2 +1,2 @@
-label: "Conda"
+label: 'Conda'
 position: 1
diff --git a/docs/docs/develop/dev-environment/devcontainers/_category_.yml b/docs/docs/develop/dev-environment/devcontainers/_category_.yml
index 7050b6538..8083dfb03 100644
--- a/docs/docs/develop/dev-environment/devcontainers/_category_.yml
+++ b/docs/docs/develop/dev-environment/devcontainers/_category_.yml
@@ -1,2 +1,2 @@
-label: "Devcontainers"
+label: 'Devcontainers'
 position: 2
diff --git a/docs/docs/develop/dev-environment/index.mdx b/docs/docs/develop/dev-environment/index.mdx
index fefc85604..98f14979f 100644
--- a/docs/docs/develop/dev-environment/index.mdx
+++ b/docs/docs/develop/dev-environment/index.mdx
@@ -12,19 +12,20 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
 ```
+
 :::
 
 Choose the way you want to develop Jupyter UI:
diff --git a/docs/docs/develop/extension/_category_.yml b/docs/docs/develop/extension/_category_.yml
index 52f93c48d..afa3f251d 100644
--- a/docs/docs/develop/extension/_category_.yml
+++ b/docs/docs/develop/extension/_category_.yml
@@ -1,2 +1,2 @@
-label: "JupyterLab Extension"
+label: 'JupyterLab Extension'
 position: 4
diff --git a/docs/docs/develop/index.mdx b/docs/docs/develop/index.mdx
index 6786c004e..df840d3b1 100644
--- a/docs/docs/develop/index.mdx
+++ b/docs/docs/develop/index.mdx
@@ -20,4 +20,4 @@ Environment is sensible to avoid build failures.
 
 :::
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/develop/webapp/_category_.yml b/docs/docs/develop/webapp/_category_.yml
index 7f599f566..3190bcf3c 100644
--- a/docs/docs/develop/webapp/_category_.yml
+++ b/docs/docs/develop/webapp/_category_.yml
@@ -1,2 +1,2 @@
-label: "Web App"
+label: 'Web App'
 position: 2
diff --git a/docs/docs/integrations/_category_.yaml b/docs/docs/integrations/_category_.yaml
index 288fc2997..73abd4d5d 100644
--- a/docs/docs/integrations/_category_.yaml
+++ b/docs/docs/integrations/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Integrations"
+label: 'Integrations'
 position: 6
diff --git a/docs/docs/integrations/cra/_category_.yml b/docs/docs/integrations/cra/_category_.yml
index 172b97da6..a986805b8 100644
--- a/docs/docs/integrations/cra/_category_.yml
+++ b/docs/docs/integrations/cra/_category_.yml
@@ -1,2 +1,2 @@
-label: "Create React App (Deprecated)"
+label: 'Create React App (Deprecated)'
 position: 8
diff --git a/docs/docs/integrations/cra/index.mdx b/docs/docs/integrations/cra/index.mdx
index 8053a444d..c9bbd87ae 100644
--- a/docs/docs/integrations/cra/index.mdx
+++ b/docs/docs/integrations/cra/index.mdx
@@ -75,13 +75,13 @@ npm install
 You need to add in the `<head/>` section of `public/index.html` the metadata to indicate where you Jupyter server is running, as the `require` javascript.
 
 ```html
-    <script id="datalayer-config-data" type="application/json">
-      {
-        "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
-        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
-      }
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
+<script id="datalayer-config-data" type="application/json">
+  {
+    "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
+    "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+  }
+</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
 ```
 
 ## Dot Env
diff --git a/docs/docs/integrations/docusaurus/_category_.yml b/docs/docs/integrations/docusaurus/_category_.yml
index d8e2faa37..a82fa1b83 100644
--- a/docs/docs/integrations/docusaurus/_category_.yml
+++ b/docs/docs/integrations/docusaurus/_category_.yml
@@ -1,2 +1,2 @@
-label: "Docusaurus"
+label: 'Docusaurus'
 position: 4
diff --git a/docs/docs/integrations/docusaurus/index.mdx b/docs/docs/integrations/docusaurus/index.mdx
index 912f07f2f..c25e9909d 100644
--- a/docs/docs/integrations/docusaurus/index.mdx
+++ b/docs/docs/integrations/docusaurus/index.mdx
@@ -2,7 +2,7 @@
 description: Integration with Docusaurus.
 ---
 
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # 🪐 🦕 Docusaurus
 
diff --git a/docs/docs/integrations/index.mdx b/docs/docs/integrations/index.mdx
index 393866c58..e4c6aff44 100644
--- a/docs/docs/integrations/index.mdx
+++ b/docs/docs/integrations/index.mdx
@@ -2,4 +2,4 @@ import DocCardList from '@theme/DocCardList';
 
 # Integrations
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/integrations/next-js/_category_.yml b/docs/docs/integrations/next-js/_category_.yml
index 10b6de0a5..497180e80 100644
--- a/docs/docs/integrations/next-js/_category_.yml
+++ b/docs/docs/integrations/next-js/_category_.yml
@@ -1,2 +1,2 @@
-label: "Next.js"
+label: 'Next.js'
 position: 3
diff --git a/docs/docs/integrations/next-js/index.mdx b/docs/docs/integrations/next-js/index.mdx
index 5eb900ceb..53202a154 100644
--- a/docs/docs/integrations/next-js/index.mdx
+++ b/docs/docs/integrations/next-js/index.mdx
@@ -2,7 +2,7 @@
 description: Example with Next.js.
 ---
 
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # Next.js
 
@@ -13,28 +13,27 @@ There are a couple of configuration and requirement to run Jupyter React in Next
 You need to render in client-mode the Jupyter part. To achieve this, you can e.g. load your page with external components dynamically loaded.
 
 ```js
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
-const HomePageNoSSR = dynamic(
-  () => import('../components/HomeComponent'),
-  { ssr: false }
-);
+const HomePageNoSSR = dynamic(() => import('../components/HomeComponent'), {
+  ssr: false,
+});
 
 function Home() {
   return (
     <>
       <HomePageNoSSR />
     </>
-  )
+  );
 }
 
-export default Home
+export default Home;
 ```
 
 The components should ideally reside outside of the `app` folder. Add `'use client'` at the top of your React.js components.
 
 ```js
-'use client'
+'use client';
 
 import { Jupyter, Notebook, CellSidebar } from '@datalayer/jupyter-react';
 
diff --git a/docs/docs/integrations/pyodide/_category_.yml b/docs/docs/integrations/pyodide/_category_.yml
index 29abe385f..57b3be64b 100644
--- a/docs/docs/integrations/pyodide/_category_.yml
+++ b/docs/docs/integrations/pyodide/_category_.yml
@@ -1,2 +1,2 @@
-label: "Pyodide"
+label: 'Pyodide'
 position: 4
diff --git a/docs/docs/integrations/ssr/_category_.yml b/docs/docs/integrations/ssr/_category_.yml
index 6bac5b04a..9b5d0f0c7 100644
--- a/docs/docs/integrations/ssr/_category_.yml
+++ b/docs/docs/integrations/ssr/_category_.yml
@@ -1,2 +1,2 @@
-label: "Server Side Rendering"
+label: 'Server Side Rendering'
 position: 5
diff --git a/docs/docs/integrations/vite/_category_.yml b/docs/docs/integrations/vite/_category_.yml
index 1abf6e6c7..40d1cf9f5 100644
--- a/docs/docs/integrations/vite/_category_.yml
+++ b/docs/docs/integrations/vite/_category_.yml
@@ -1,2 +1,2 @@
-label: "Vite"
+label: 'Vite'
 position: 1
diff --git a/docs/docs/integrations/vscode/_category_.yml b/docs/docs/integrations/vscode/_category_.yml
index 4b380f562..e643aa750 100644
--- a/docs/docs/integrations/vscode/_category_.yml
+++ b/docs/docs/integrations/vscode/_category_.yml
@@ -1,2 +1,2 @@
-label: "VS Code"
+label: 'VS Code'
 position: 6
diff --git a/docs/docs/integrations/vscode/index.mdx b/docs/docs/integrations/vscode/index.mdx
index 48a1d6a2c..8936b5762 100644
--- a/docs/docs/integrations/vscode/index.mdx
+++ b/docs/docs/integrations/vscode/index.mdx
@@ -1,4 +1,4 @@
-import ModalImage from "react-modal-image";
+import ModalImage from 'react-modal-image';
 
 # 🚧 VS Code
 
@@ -31,7 +31,7 @@ Styling
 
 - No connection between dark/light vs code theme and notebook theme
 - No resizing with the panel
-- Button to select the runtime is not displayed in a toolbar that stays visible  - No connection between dark/light vs code theme and notebook theme
+- Button to select the runtime is not displayed in a toolbar that stays visible - No connection between dark/light vs code theme and notebook theme
   - No resizing with the panel
   - Button to select the runtime is not displayed in a toolbar that stays visible
 
diff --git a/docs/docs/integrations/webpack/_category_.yml b/docs/docs/integrations/webpack/_category_.yml
index 294a6b7a3..9db255863 100644
--- a/docs/docs/integrations/webpack/_category_.yml
+++ b/docs/docs/integrations/webpack/_category_.yml
@@ -1,2 +1,2 @@
-label: "Webpack"
+label: 'Webpack'
 position: 2
diff --git a/docs/docs/license/_category_.yml b/docs/docs/license/_category_.yml
index 0460bf76a..c0cfb8279 100644
--- a/docs/docs/license/_category_.yml
+++ b/docs/docs/license/_category_.yml
@@ -1,2 +1,2 @@
-label: "⚖️ MIT License"
+label: '⚖️ MIT License'
 position: 12
diff --git a/docs/docs/state/_category_.yml b/docs/docs/state/_category_.yml
index df2ac7806..3696a5ad2 100644
--- a/docs/docs/state/_category_.yml
+++ b/docs/docs/state/_category_.yml
@@ -1,2 +1,2 @@
-label: "State"
+label: 'State'
 position: 4
diff --git a/docs/docs/support/_category_.yml b/docs/docs/support/_category_.yml
index d5db3837c..fbbc79485 100644
--- a/docs/docs/support/_category_.yml
+++ b/docs/docs/support/_category_.yml
@@ -1,2 +1,2 @@
-label: "Support"
+label: 'Support'
 position: 11
diff --git a/docs/docs/support/index.mdx b/docs/docs/support/index.mdx
index ef4ff6f00..cb17210ea 100644
--- a/docs/docs/support/index.mdx
+++ b/docs/docs/support/index.mdx
@@ -2,7 +2,7 @@
 description: Support
 ---
 
-import { InlineWidget } from "react-calendly";
+import { InlineWidget } from 'react-calendly';
 
 # Support
 
diff --git a/docs/docs/themes/_category_.yaml b/docs/docs/themes/_category_.yaml
index 8a2c21f8d..49d98f56b 100644
--- a/docs/docs/themes/_category_.yaml
+++ b/docs/docs/themes/_category_.yaml
@@ -1,2 +1,2 @@
-label: "Themes"
+label: 'Themes'
 position: 8
diff --git a/docs/docs/themes/index.mdx b/docs/docs/themes/index.mdx
index 58d9f9685..f91785df4 100644
--- a/docs/docs/themes/index.mdx
+++ b/docs/docs/themes/index.mdx
@@ -2,4 +2,4 @@ import DocCardList from '@theme/DocCardList';
 
 # Themes
 
-<DocCardList/>
+<DocCardList />
diff --git a/docs/docs/themes/themes/_category_.yml b/docs/docs/themes/themes/_category_.yml
index b4b01767a..17daddb55 100644
--- a/docs/docs/themes/themes/_category_.yml
+++ b/docs/docs/themes/themes/_category_.yml
@@ -1,2 +1,2 @@
-label: "Themes"
+label: 'Themes'
 position: 1
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 79db26c48..f7b259dd5 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -30,161 +30,159 @@ module.exports = {
         tsconfig: '../tsconfig.json',
 			},
   */
-    themes: [
-      '@docusaurus/theme-mermaid',
-    ],
-    themeConfig: {
-      colorMode: {
-        defaultMode: 'light',
-        disableSwitch: true,
-      },
-      prism: {
-        additionalLanguages: ['bash'],
-      },
-      liveCodeBlock: {
-        playgroundPosition: 'bottom',
-      },
-      navbar: {
-        title: 'Jupyter UI',
-        logo: {
-          alt: 'Datalayer Logo',
-          src: 'img/datalayer/logo.svg',
-        },
-        items: [
-          {
-            type: 'doc',
-            docId: 'about/index',
-            position: 'left',
-            label: 'About',
-          },
-          {
-            type: 'doc',
-            docId: 'develop/index',
-            position: 'left',
-            label: 'Develop',
-          },
-          {
-            type: 'doc',
-            docId: 'components/index',
-            position: 'left',
-            label: 'Components',
-          },
-          {
-            type: 'doc',
-            docId: 'state/index',
-            position: 'left',
-            label: 'State',
-          },
-          {
-            type: 'doc',
-            docId: 'integrations/index',
-            position: 'left',
-            label: 'Integrations',
-          },
-          {
-            type: 'doc',
-            docId: 'deployments/index',
-            position: 'left',
-            label: 'Deployments',
-          },
-          {
-            type: 'doc',
-            docId: 'themes/index',
-            position: 'left',
-            label: 'Themes',
-          },
-          {
-            type: 'doc',
-            docId: 'demos/index',
-            position: 'left',
-            label: 'Demos',
-          },
-          {
-            type: 'doc',
-            docId: 'support/index',
-            position: 'left',
-            label: 'Support',
-          },
-          {
-            type: 'doc',
-            docId: 'license/index',
-            position: 'left',
-            label: 'License',
-          },
-          {
-            href: 'https://www.linkedin.com/company/datalayer',
-            position: 'right',
-            className: 'header-linkedin-link',
-            'aria-label': 'LinkedIn',
-          },
-          {
-            href: 'https://bsky.app/profile/datalayer.ai',
-            position: 'right',
-            className: 'header-bluesky-link',
-            'aria-label': 'Bluesky',
-          },
-          {
-            href: 'https://github.com/datalayer/jupyter-ui',
-            position: 'right',
-            className: 'header-github-link',
-            'aria-label': 'GitHub',
-          },
-          {
-            href: 'https://datalayer.tech',
-            position: 'right',
-            className: 'header-datalayer-io-link',
-            'aria-label': 'Datalayer Tech',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'GitHub',
-                href: 'https://github.com/datalayer',
-              },
-              {
-                label: 'Bluesky',
-                href: 'https://assets.datalayer.tech/logos-social-grey/youtube.svg',
-              },
-              {
-                label: 'LinkedIn',
-                href: 'https://www.linkedin.com/company/datalayer',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Datalayer',
-                href: 'https://datalayer.io',
-              },
-              {
-                label: 'Datalayer Docs',
-                href: 'https://docs.datalayer.app',
-              },
-              {
-                label: 'Datalayer Tech',
-                href: 'https://datalayer.tech',
-              },
-              {
-                label: 'Datalayer Guide',
-                href: 'https://datalayer.guide',
-              },
-              {
-                label: 'Datalayer Blog',
-                href: 'https://datalayer.blog',
-              },
-            ],
-          }
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Datalayer, Inc.`,
+  themes: ['@docusaurus/theme-mermaid'],
+  themeConfig: {
+    colorMode: {
+      defaultMode: 'light',
+      disableSwitch: true,
+    },
+    prism: {
+      additionalLanguages: ['bash'],
+    },
+    liveCodeBlock: {
+      playgroundPosition: 'bottom',
+    },
+    navbar: {
+      title: 'Jupyter UI',
+      logo: {
+        alt: 'Datalayer Logo',
+        src: 'img/datalayer/logo.svg',
       },
+      items: [
+        {
+          type: 'doc',
+          docId: 'about/index',
+          position: 'left',
+          label: 'About',
+        },
+        {
+          type: 'doc',
+          docId: 'develop/index',
+          position: 'left',
+          label: 'Develop',
+        },
+        {
+          type: 'doc',
+          docId: 'components/index',
+          position: 'left',
+          label: 'Components',
+        },
+        {
+          type: 'doc',
+          docId: 'state/index',
+          position: 'left',
+          label: 'State',
+        },
+        {
+          type: 'doc',
+          docId: 'integrations/index',
+          position: 'left',
+          label: 'Integrations',
+        },
+        {
+          type: 'doc',
+          docId: 'deployments/index',
+          position: 'left',
+          label: 'Deployments',
+        },
+        {
+          type: 'doc',
+          docId: 'themes/index',
+          position: 'left',
+          label: 'Themes',
+        },
+        {
+          type: 'doc',
+          docId: 'demos/index',
+          position: 'left',
+          label: 'Demos',
+        },
+        {
+          type: 'doc',
+          docId: 'support/index',
+          position: 'left',
+          label: 'Support',
+        },
+        {
+          type: 'doc',
+          docId: 'license/index',
+          position: 'left',
+          label: 'License',
+        },
+        {
+          href: 'https://www.linkedin.com/company/datalayer',
+          position: 'right',
+          className: 'header-linkedin-link',
+          'aria-label': 'LinkedIn',
+        },
+        {
+          href: 'https://bsky.app/profile/datalayer.ai',
+          position: 'right',
+          className: 'header-bluesky-link',
+          'aria-label': 'Bluesky',
+        },
+        {
+          href: 'https://github.com/datalayer/jupyter-ui',
+          position: 'right',
+          className: 'header-github-link',
+          'aria-label': 'GitHub',
+        },
+        {
+          href: 'https://datalayer.tech',
+          position: 'right',
+          className: 'header-datalayer-io-link',
+          'aria-label': 'Datalayer Tech',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'GitHub',
+              href: 'https://github.com/datalayer',
+            },
+            {
+              label: 'Bluesky',
+              href: 'https://assets.datalayer.tech/logos-social-grey/youtube.svg',
+            },
+            {
+              label: 'LinkedIn',
+              href: 'https://www.linkedin.com/company/datalayer',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'Datalayer',
+              href: 'https://datalayer.io',
+            },
+            {
+              label: 'Datalayer Docs',
+              href: 'https://docs.datalayer.app',
+            },
+            {
+              label: 'Datalayer Tech',
+              href: 'https://datalayer.tech',
+            },
+            {
+              label: 'Datalayer Guide',
+              href: 'https://datalayer.guide',
+            },
+            {
+              label: 'Datalayer Blog',
+              href: 'https://datalayer.blog',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} Datalayer, Inc.`,
+    },
   },
   presets: [
     [
@@ -192,13 +190,11 @@ module.exports = {
       {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
-          editUrl:
-            'https://github.com/datalayer/jupyter-ui/edit/main',
+          editUrl: 'https://github.com/datalayer/jupyter-ui/edit/main',
         },
         blog: {
           showReadingTime: true,
-          editUrl:
-            'https://datalayer.blog',
+          editUrl: 'https://datalayer.blog',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 4b5848685..7298e72cd 100644
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -24,7 +24,7 @@ const sidebars = {
       type: 'autogenerated',
       dirName: '.',
     },
-  ]
+  ],
 };
 
 module.exports = sidebars;
diff --git a/docs/src/components/HomepageFeatures.js b/docs/src/components/HomepageFeatures.js
index a7eadfa8c..3f69cf7d2 100644
--- a/docs/src/components/HomepageFeatures.js
+++ b/docs/src/components/HomepageFeatures.js
@@ -7,20 +7,31 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
+import TargetSvg from '../../static/img/target.svg';
 
 const FeatureList = [
   {
     title: 'Professional support',
-    Svg: require('../../static/img/target.svg').default,
+    Svg: TargetSvg,
     description: (
       <>
-        Jupyter UI lets you focus on your work, and we&apos;ll do the chores. Check the <a href="https://jupyter-ui.datalayer.tech/docs/support" target="_blank" style={{ textDecoration: "underline" }}>support options</a>.
+        Jupyter UI lets you focus on your work, and we&apos;ll do the chores.
+        Check the{' '}
+        <a
+          href="https://jupyter-ui.datalayer.tech/docs/support"
+          target="_blank"
+          rel="noreferrer"
+          style={{ textDecoration: 'underline' }}
+        >
+          support options
+        </a>
+        .
       </>
     ),
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
diff --git a/docs/src/components/HomepageProducts.js b/docs/src/components/HomepageProducts.js
index 33c35969a..ef1d6c250 100644
--- a/docs/src/components/HomepageProducts.js
+++ b/docs/src/components/HomepageProducts.js
@@ -7,66 +7,93 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageProducts.module.css';
+import ReactJsSvg from '../../static/img/react-js.svg';
+import JupyterSvg from '../../static/img/jupyter.svg';
+import BricksSvg from '../../static/img/bricks.svg';
+import MemoSvg from '../../static/img/memo.svg';
+import RocketSvg from '../../static/img/rocket.svg';
+import OpenSourceSvg from '../../static/img/open-source.svg';
 
 const ProductList = [
   {
     title: 'React.js components',
-    Svg: require('../../static/img/react-js.svg').default,
+    Svg: ReactJsSvg,
     description: (
       <>
-        A variety of React.js components from Notebook, Cell, Output and Terminal allow you to get the best of Jupyter, with authentication and authorization.
+        A variety of React.js components from Notebook, Cell, Output and
+        Terminal allow you to get the best of Jupyter, with authentication and
+        authorization.
       </>
     ),
   },
   {
     title: '100% compatible with Jupyter',
-    Svg: require('../../static/img/jupyter.svg').default,
+    Svg: JupyterSvg,
     description: (
       <>
-        If you need more batteries for Jupyter, have a look to our <a href="./docs/category/components" style={{ textDecoration: "underline" }}>Jupyter components</a>.
+        If you need more batteries for Jupyter, have a look to our{' '}
+        <a
+          href="./docs/category/components"
+          style={{ textDecoration: 'underline' }}
+        >
+          Jupyter components
+        </a>
+        .
       </>
     ),
   },
   {
     title: 'Components with a Storybook',
-    Svg: require('../../static/img/bricks.svg').default,
+    Svg: BricksSvg,
     description: (
       <>
-        You build your custom Data Product with well crafted Datalayer UI components. Have a look at the <a href="https://jupyter-ui-storybook.datalayer.tech" target="_blank" style={{ textDecoration: "underline" }}>Storybook</a>.
+        You build your custom Data Product with well crafted Datalayer UI
+        components. Have a look at the{' '}
+        <a
+          href="https://jupyter-ui-storybook.datalayer.tech"
+          target="_blank"
+          rel="noreferrer"
+          style={{ textDecoration: 'underline' }}
+        >
+          Storybook
+        </a>
+        .
       </>
     ),
   },
   {
     title: 'Literate Notebook',
-    Svg: require('../../static/img/memo.svg').default,
+    Svg: MemoSvg,
     description: (
       <>
-        For a truly collaborative and accessible notebook, Literate Notebook is a better single-page editor for your data analysis.
+        For a truly collaborative and accessible notebook, Literate Notebook is
+        a better single-page editor for your data analysis.
       </>
     ),
   },
   {
     title: 'Easy to use',
-    Svg: require('../../static/img/rocket.svg').default,
+    Svg: RocketSvg,
     description: (
       <>
-        Juyter UI is designed from the ground up to be easily installed, used and extended
-        to get your custom data analysis up and running quickly.
+        Juyter UI is designed from the ground up to be easily installed, used
+        and extended to get your custom data analysis up and running quickly.
       </>
     ),
   },
   {
     title: 'Open source',
-    Svg: require('../../static/img/open-source.svg').default,
+    Svg: OpenSourceSvg,
     description: (
       <>
-        Jupyter UI is built on top of renowed open source libraries and is also fully opensource.
+        Jupyter UI is built on top of renowed open source libraries and is also
+        fully opensource.
       </>
     ),
   },
 ];
 
-function Product({Svg, title, description}) {
+function Product({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index ed679bf7d..a3371b320 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -19,19 +19,21 @@ body {
   background-color: white !important;
 }
 
-.hero__title, .hero__subtitle {
+.hero__title,
+.hero__subtitle {
   color: white !important;
 }
 
 .container {
   color: rgb(28, 30, 33) !important;
-/*  color: var(--ifm-heading-color) !important; */
+  /*  color: var(--ifm-heading-color) !important; */
 }
 
 .theme-doc-markdown a {
   color: var(--ifm-link-color) !important;
   text-decoration: var(--ifm-link-decoration) !important;
-  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default) !important;
+  transition: color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default) !important;
 }
 
 /* You can override the default Infima variables here. */
@@ -94,7 +96,7 @@ body {
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2224%22%0A%20%20%20height%3D%2224%22%0A%20%20%20viewBox%3D%220%200%202.88%202.88%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg4%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs8%22%20%2F%3E%0A%20%20%3Cpath%0A%20%20%20%20%20fill%3D%22%23959da5%22%0A%20%20%20%20%20d%3D%22M%201.44%2C1.306859%20C%201.30956%2C1.053179%200.95447995%2C0.58049901%200.62423999%2C0.34745901%200.30791999%2C0.12413901%200.18732%2C0.16277901%200.10824%2C0.19865901%200.01668%2C0.23981901%200%2C0.38045901%200%2C0.46301901%20c%200%2C0.0828%200.04536%2C0.67799999%200.07488%2C0.77747999%200.0978%2C0.32832%200.44556%2C0.4392%200.76595999%2C0.4036799%200.01632%2C-0.0024%200.033%2C-0.00468%200.0498%2C-0.00672%20-0.01656%2C0.00264%20-0.03312%2C0.0048%20-0.0498%2C0.00672%20C%200.3714%2C1.7137789%20-0.0456%2C1.884779%200.50124%2C2.493539%201.1027999%2C3.1163391%201.3256399%2C2.359979%201.44%2C1.976579%201.55436%2C2.359979%201.686%2C3.0890991%202.36796%2C2.493539%202.88%2C1.976579%202.5086%2C1.713779%202.0391599%2C1.6441789%20a%201.04892%2C1.04892%200%200%201%20-0.0498%2C-0.00672%20c%200.0168%2C0.00204%200.03348%2C0.00432%200.0498%2C0.00672%20C%202.35956%2C1.6798189%202.7073199%2C1.5688189%202.80512%2C1.240499%202.8346401%2C1.141139%202.88%2C0.54569891%202.88%2C0.46313901%20c%200%2C-0.0828%20-0.01668%2C-0.22332%20-0.10824%2C-0.26472%20-0.07908%2C-0.03576%20-0.19968%2C-0.0744%20-0.516%2C0.1488%20C%201.92552%2C0.58061901%201.5704399%2C1.053299%201.44%2C1.306859%22%0A%20%20%20%20%20style%3D%22stroke-width%3A0.12%22%0A%20%20%20%20%20id%3D%22path2%22%20%2F%3E%0A%3C%2Fsvg%3E%0A")
+  background: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2224%22%0A%20%20%20height%3D%2224%22%0A%20%20%20viewBox%3D%220%200%202.88%202.88%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg4%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs8%22%20%2F%3E%0A%20%20%3Cpath%0A%20%20%20%20%20fill%3D%22%23959da5%22%0A%20%20%20%20%20d%3D%22M%201.44%2C1.306859%20C%201.30956%2C1.053179%200.95447995%2C0.58049901%200.62423999%2C0.34745901%200.30791999%2C0.12413901%200.18732%2C0.16277901%200.10824%2C0.19865901%200.01668%2C0.23981901%200%2C0.38045901%200%2C0.46301901%20c%200%2C0.0828%200.04536%2C0.67799999%200.07488%2C0.77747999%200.0978%2C0.32832%200.44556%2C0.4392%200.76595999%2C0.4036799%200.01632%2C-0.0024%200.033%2C-0.00468%200.0498%2C-0.00672%20-0.01656%2C0.00264%20-0.03312%2C0.0048%20-0.0498%2C0.00672%20C%200.3714%2C1.7137789%20-0.0456%2C1.884779%200.50124%2C2.493539%201.1027999%2C3.1163391%201.3256399%2C2.359979%201.44%2C1.976579%201.55436%2C2.359979%201.686%2C3.0890991%202.36796%2C2.493539%202.88%2C1.976579%202.5086%2C1.713779%202.0391599%2C1.6441789%20a%201.04892%2C1.04892%200%200%201%20-0.0498%2C-0.00672%20c%200.0168%2C0.00204%200.03348%2C0.00432%200.0498%2C0.00672%20C%202.35956%2C1.6798189%202.7073199%2C1.5688189%202.80512%2C1.240499%202.8346401%2C1.141139%202.88%2C0.54569891%202.88%2C0.46313901%20c%200%2C-0.0828%20-0.01668%2C-0.22332%20-0.10824%2C-0.26472%20-0.07908%2C-0.03576%20-0.19968%2C-0.0744%20-0.516%2C0.1488%20C%201.92552%2C0.58061901%201.5704399%2C1.053299%201.44%2C1.306859%22%0A%20%20%20%20%20style%3D%22stroke-width%3A0.12%22%0A%20%20%20%20%20id%3D%22path2%22%20%2F%3E%0A%3C%2Fsvg%3E%0A')
     no-repeat;
 }
 
@@ -103,7 +105,7 @@ body {
 }
 
 [data-theme='dark'] .header-bluesky-link::before {
-  background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2224%22%0A%20%20%20height%3D%2224%22%0A%20%20%20viewBox%3D%220%200%202.88%202.88%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg4%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs8%22%20%2F%3E%0A%20%20%3Cpath%0A%20%20%20%20%20fill%3D%22%23959da5%22%0A%20%20%20%20%20d%3D%22M%201.44%2C1.306859%20C%201.30956%2C1.053179%200.95447995%2C0.58049901%200.62423999%2C0.34745901%200.30791999%2C0.12413901%200.18732%2C0.16277901%200.10824%2C0.19865901%200.01668%2C0.23981901%200%2C0.38045901%200%2C0.46301901%20c%200%2C0.0828%200.04536%2C0.67799999%200.07488%2C0.77747999%200.0978%2C0.32832%200.44556%2C0.4392%200.76595999%2C0.4036799%200.01632%2C-0.0024%200.033%2C-0.00468%200.0498%2C-0.00672%20-0.01656%2C0.00264%20-0.03312%2C0.0048%20-0.0498%2C0.00672%20C%200.3714%2C1.7137789%20-0.0456%2C1.884779%200.50124%2C2.493539%201.1027999%2C3.1163391%201.3256399%2C2.359979%201.44%2C1.976579%201.55436%2C2.359979%201.686%2C3.0890991%202.36796%2C2.493539%202.88%2C1.976579%202.5086%2C1.713779%202.0391599%2C1.6441789%20a%201.04892%2C1.04892%200%200%201%20-0.0498%2C-0.00672%20c%200.0168%2C0.00204%200.03348%2C0.00432%200.0498%2C0.00672%20C%202.35956%2C1.6798189%202.7073199%2C1.5688189%202.80512%2C1.240499%202.8346401%2C1.141139%202.88%2C0.54569891%202.88%2C0.46313901%20c%200%2C-0.0828%20-0.01668%2C-0.22332%20-0.10824%2C-0.26472%20-0.07908%2C-0.03576%20-0.19968%2C-0.0744%20-0.516%2C0.1488%20C%201.92552%2C0.58061901%201.5704399%2C1.053299%201.44%2C1.306859%22%0A%20%20%20%20%20style%3D%22stroke-width%3A0.12%22%0A%20%20%20%20%20id%3D%22path2%22%20%2F%3E%0A%3C%2Fsvg%3E%0A")
+  background: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20width%3D%2224%22%0A%20%20%20height%3D%2224%22%0A%20%20%20viewBox%3D%220%200%202.88%202.88%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22svg4%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs8%22%20%2F%3E%0A%20%20%3Cpath%0A%20%20%20%20%20fill%3D%22%23959da5%22%0A%20%20%20%20%20d%3D%22M%201.44%2C1.306859%20C%201.30956%2C1.053179%200.95447995%2C0.58049901%200.62423999%2C0.34745901%200.30791999%2C0.12413901%200.18732%2C0.16277901%200.10824%2C0.19865901%200.01668%2C0.23981901%200%2C0.38045901%200%2C0.46301901%20c%200%2C0.0828%200.04536%2C0.67799999%200.07488%2C0.77747999%200.0978%2C0.32832%200.44556%2C0.4392%200.76595999%2C0.4036799%200.01632%2C-0.0024%200.033%2C-0.00468%200.0498%2C-0.00672%20-0.01656%2C0.00264%20-0.03312%2C0.0048%20-0.0498%2C0.00672%20C%200.3714%2C1.7137789%20-0.0456%2C1.884779%200.50124%2C2.493539%201.1027999%2C3.1163391%201.3256399%2C2.359979%201.44%2C1.976579%201.55436%2C2.359979%201.686%2C3.0890991%202.36796%2C2.493539%202.88%2C1.976579%202.5086%2C1.713779%202.0391599%2C1.6441789%20a%201.04892%2C1.04892%200%200%201%20-0.0498%2C-0.00672%20c%200.0168%2C0.00204%200.03348%2C0.00432%200.0498%2C0.00672%20C%202.35956%2C1.6798189%202.7073199%2C1.5688189%202.80512%2C1.240499%202.8346401%2C1.141139%202.88%2C0.54569891%202.88%2C0.46313901%20c%200%2C-0.0828%20-0.01668%2C-0.22332%20-0.10824%2C-0.26472%20-0.07908%2C-0.03576%20-0.19968%2C-0.0744%20-0.516%2C0.1488%20C%201.92552%2C0.58061901%201.5704399%2C1.053299%201.44%2C1.306859%22%0A%20%20%20%20%20style%3D%22stroke-width%3A0.12%22%0A%20%20%20%20%20id%3D%22path2%22%20%2F%3E%0A%3C%2Fsvg%3E%0A')
     no-repeat;
 }
 
diff --git a/docs/src/index.ts b/docs/src/index.ts
index f47f9bd36..9ab0e630e 100644
--- a/docs/src/index.ts
+++ b/docs/src/index.ts
@@ -3,4 +3,3 @@
  *
  * MIT License
  */
-
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 71fead8b9..3c17e237e 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -14,7 +14,7 @@ import HomepageFeatures from '../components/HomepageFeatures';
 import HomepageProducts from '../components/HomepageProducts';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -23,7 +23,8 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/about">
+            to="/docs/about"
+          >
             🚀 Get Started
           </Link>
         </div>
@@ -33,14 +34,15 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`${siteConfig.title}`}
-      description="Jupyter UI, by Datalayer">
+      description="Jupyter UI, by Datalayer"
+    >
       <HomepageHeader />
       <main>
-        <br/>
+        <br />
         <HomepageProducts />
         <HomepageFeatures />
       </main>
diff --git a/docs/src/theme/ReactLiveScope/index.tsx b/docs/src/theme/ReactLiveScope/index.tsx
index e1b1ff134..6d1942ec8 100644
--- a/docs/src/theme/ReactLiveScope/index.tsx
+++ b/docs/src/theme/ReactLiveScope/index.tsx
@@ -11,11 +11,16 @@ import { ContentLoader } from '@datalayer/primer-addons';
 const Cell = (props: any) => {
   return (
     <BrowserOnly
-      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}>
+      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}
+    >
       {() => {
         // Keep the import via require in the BrowserOnly code block.
-        const { Jupyter } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
-        const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
+        const {
+          Jupyter,
+        } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
+        const {
+          Cell,
+        } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
         return (
           <>
             <Jupyter
@@ -23,16 +28,16 @@ const Cell = (props: any) => {
               jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
               disableCssLoading={true}
               starDefaultKernel
-              skeleton={<ContentLoader/>}
+              skeleton={<ContentLoader />}
             >
-              <Cell {...props}/>
+              <Cell {...props} />
             </Jupyter>
           </>
-        )
-     }}
+        );
+      }}
     </BrowserOnly>
-  )
-}
+  );
+};
 
 // Add react-live imports you need here
 const ReactLiveScope = {
diff --git a/docs/src/types.ts b/docs/src/types.ts
index f47f9bd36..9ab0e630e 100644
--- a/docs/src/types.ts
+++ b/docs/src/types.ts
@@ -3,4 +3,3 @@
  *
  * MIT License
  */
-
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index d67893242..bde71c78a 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -6,10 +6,7 @@
     "outDir": "lib",
     "target": "ES2022",
     "module": "commonjs",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "declaration": true,
     "declarationMap": false,
     "jsx": "react",
@@ -33,9 +30,5 @@
     "importHelpers": true,
     "noEmitHelpers": true
   },
-  "exclude": [
-    "node_modules", 
-    "**/__tests__/**/*", 
-    "**/lib/**/*"
-  ]
+  "exclude": ["node_modules", "**/__tests__/**/*", "**/lib/**/*"]
 }
diff --git a/environment.yml b/environment.yml
index c21184c3d..fee4756bf 100644
--- a/environment.yml
+++ b/environment.yml
@@ -14,4 +14,4 @@ dependencies:
   - build
   - hatch
   - pip:
-    - jupyterlab==4.1.0
+      - jupyterlab==4.1.0
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 000000000..ccac8941e
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,150 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+const js = require('@eslint/js');
+const tseslint = require('typescript-eslint');
+const reactPlugin = require('eslint-plugin-react');
+const reactHooksPlugin = require('eslint-plugin-react-hooks');
+const prettierPlugin = require('eslint-plugin-prettier');
+const prettierConfig = require('eslint-config-prettier');
+
+module.exports = tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      prettier: prettierPlugin,
+    },
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        global: 'readonly',
+        setImmediate: 'readonly',
+        clearImmediate: 'readonly',
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      ...reactHooksPlugin.configs.recommended.rules,
+      ...prettierConfig.rules,
+
+      // TypeScript specific rules
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/no-namespace': 'off',
+
+      // React specific rules
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+      'react/no-unescaped-entities': 'warn',
+
+      // General rules
+      'no-console': ['warn', { allow: ['warn', 'error'] }],
+      'no-debugger': 'warn',
+      'prefer-const': 'warn',
+      'no-var': 'error',
+
+      // Prettier integration
+      'prettier/prettier': 'warn',
+    },
+  },
+  {
+    // Configuration for Node.js files (config files)
+    files: [
+      '**/*.config.js',
+      '**/*.config.ts',
+      '.commitlintrc.js',
+      '.eslintrc.js',
+      '.lintstagedrc.js',
+      '**/gulpfile.js',
+      '**/webpack.config.js',
+      '**/sidebars.js',
+      '**/docusaurus.config.js',
+      '**/babel.config.js',
+      '**/jest.config.js',
+      '**/prettier.config.js',
+      '**/test-runner-jest.config.js',
+      '**/test-storybook.js',
+      '**/copyUntypedFiles.js',
+      '**/helper.js',
+      '**/extension.js',
+    ],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: {
+        module: 'writable',
+        exports: 'writable',
+        require: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        process: 'readonly',
+        console: 'readonly',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+  {
+    // Allow require() in Docusaurus theme files for SSR compatibility
+    files: [
+      '**/packages/docusaurus-plugin/src/theme/**/*.tsx',
+      '**/docs/src/theme/**/*.tsx',
+    ],
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      'no-undef': 'off',
+    },
+  },
+  {
+    ignores: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/build/**',
+      '**/lib/**',
+      '**/*.min.js',
+      '**/coverage/**',
+      '**/.next/**',
+      '**/storybook-static/**',
+      '**/.husky/**',
+      '**/patches/**',
+      '**/*.patch',
+      'attic/**',
+      '**/.docusaurus/**',
+      '**/emptyshim.js',
+      '**/empty-shim.js',
+      'packages/ipyreactive/**',
+      'packages/ipyscript/**',
+    ],
+  },
+);
diff --git a/examples/README.md b/examples/README.md
index 2330cef41..a4e0b4a4e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -1,4 +1,3 @@
-
 [![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
diff --git a/examples/docusaurus/README.md b/examples/docusaurus/README.md
index 0101abb25..93b56fbbc 100644
--- a/examples/docusaurus/README.md
+++ b/examples/docusaurus/README.md
@@ -29,12 +29,12 @@ Add the following code in any Markdown file.
 ```jsx
 import JupyterCell from '@theme/JupyterCell';
 
-<JupyterCell 
+<JupyterCell
   source={`print('Hello world')
 for i in range(10):
   print(i)
 `}
-  jupyterServerUrl='http://localhost:8686/api/jupyter-server'
-  jupyterServerToken='60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6'
-/>
+  jupyterServerUrl="http://localhost:8686/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+/>;
 ```
diff --git a/examples/docusaurus/docs/intro.mdx b/examples/docusaurus/docs/intro.mdx
index 782ef077b..f53e80c92 100644
--- a/examples/docusaurus/docs/intro.mdx
+++ b/examples/docusaurus/docs/intro.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-sidebar_position: 1
----
+
+## sidebar_position: 1
 
 import JupyterCell from '@theme/JupyterCell';
 
@@ -15,7 +15,7 @@ import JupyterCell from '@theme/JupyterCell';
 Let's discover **Docusaurus in less than 5 minutes**.
 
 <JupyterCell
-  source= {`import numpy as np
+  source={`import numpy as np
 import matplotlib.pyplot as plt
 x1 = np.linspace(0.0, 5.0)
 x2 = np.linspace(0.0, 2.0)
@@ -29,9 +29,9 @@ ax2.plot(x2, y2, '.-')
 ax2.set_xlabel('time (s)')
 ax2.set_ylabel('Undamped')
 plt.show()`}
-  jupyterServerUrl='http://localhost:8686/api/jupyter-server'
-  jupyterServerToken='60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6'
- />
+  jupyterServerUrl="http://localhost:8686/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+/>
 
 ## Getting Started
 
diff --git a/examples/docusaurus/docs/tutorial-basics/markdown-features.mdx b/examples/docusaurus/docs/tutorial-basics/markdown-features.mdx
index e0f26bedc..ec8e044a3 100644
--- a/examples/docusaurus/docs/tutorial-basics/markdown-features.mdx
+++ b/examples/docusaurus/docs/tutorial-basics/markdown-features.mdx
@@ -5,8 +5,8 @@
 -->
 
 ---
-sidebar_position: 4
----
+
+## sidebar_position: 4
 
 # Markdown Features
 
@@ -129,7 +129,7 @@ This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
 This is <Highlight color="#1877F2">Facebook blue</Highlight> !
 ```
 
-export const Highlight = ({children, color}) => (
+export const Highlight = ({ children, color }) => (
   <span
     style={{
       backgroundColor: color,
@@ -140,7 +140,8 @@ export const Highlight = ({children, color}) => (
     }}
     onClick={() => {
       alert(`You clicked the color ${color} with label ${children}`);
-    }}>
+    }}
+  >
     {children}
   </span>
 );
diff --git a/examples/docusaurus/docusaurus.config.js b/examples/docusaurus/docusaurus.config.js
index e3687f0d6..6586c8304 100644
--- a/examples/docusaurus/docusaurus.config.js
+++ b/examples/docusaurus/docusaurus.config.js
@@ -6,7 +6,7 @@
 
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-const path = require('path')
+const path = require('path');
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
@@ -17,9 +17,7 @@ module.exports = {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
-  plugins: [
-    '@datalayer/jupyter-docusaurus-plugin'
-  ],
+  plugins: ['@datalayer/jupyter-docusaurus-plugin'],
   organizationName: 'datalayer', // Usually your GitHub org/user name.
   projectName: 'docusaurus', // Usually your repo name.
   themeConfig: {
@@ -36,7 +34,7 @@ module.exports = {
           position: 'left',
           label: 'Tutorial',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: 'https://github.com/datalayer/jupyter-ui',
           label: 'GitHub',
diff --git a/examples/docusaurus/sidebars.js b/examples/docusaurus/sidebars.js
index 6ac3038ad..14af8f303 100644
--- a/examples/docusaurus/sidebars.js
+++ b/examples/docusaurus/sidebars.js
@@ -17,7 +17,7 @@
 
 module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+  tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
 
   // But you can create a sidebar manually
   /*
diff --git a/examples/docusaurus/src/components/HomepageFeatures.js b/examples/docusaurus/src/components/HomepageFeatures.js
index 0a3db5501..507f24155 100644
--- a/examples/docusaurus/src/components/HomepageFeatures.js
+++ b/examples/docusaurus/src/components/HomepageFeatures.js
@@ -7,11 +7,14 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './HomepageFeatures.module.css';
+import DocusaurusMountainSvg from '../../static/img/undraw_docusaurus_mountain.svg';
+import DocusaurusTreeSvg from '../../static/img/undraw_docusaurus_tree.svg';
+import DocusaurusReactSvg from '../../static/img/undraw_docusaurus_react.svg';
 
 const FeatureList = [
   {
     title: 'Easy to Use',
-    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    Svg: DocusaurusMountainSvg,
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and
@@ -21,7 +24,7 @@ const FeatureList = [
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    Svg: DocusaurusTreeSvg,
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
@@ -31,7 +34,7 @@ const FeatureList = [
   },
   {
     title: 'Powered by React',
-    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+    Svg: DocusaurusReactSvg,
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can
@@ -41,7 +44,7 @@ const FeatureList = [
   },
 ];
 
-function Feature({Svg, title, description}) {
+function Feature({ Svg, title, description }) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
diff --git a/examples/docusaurus/src/css/custom.css b/examples/docusaurus/src/css/custom.css
index 024e1fa4c..bfcd16754 100644
--- a/examples/docusaurus/src/css/custom.css
+++ b/examples/docusaurus/src/css/custom.css
@@ -19,9 +19,15 @@ body {
   background-color: white !important;
 }
 
-h1, h2, h3, h4, h5, h6, p {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
   color: rgb(28, 30, 33) !important;
-/*  color: var(--ifm-heading-color) !important; */
+  /*  color: var(--ifm-heading-color) !important; */
 }
 
 /* You can override the default Infima variables here. */
diff --git a/examples/docusaurus/src/pages/index.js b/examples/docusaurus/src/pages/index.js
index 7bc5d8f6f..05609bd32 100644
--- a/examples/docusaurus/src/pages/index.js
+++ b/examples/docusaurus/src/pages/index.js
@@ -13,7 +13,7 @@ import styles from './index.module.css';
 import HomepageFeatures from '../components/HomepageFeatures';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
@@ -22,7 +22,8 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
+            to="/docs/intro"
+          >
             Docusaurus Tutorial - 5min ⏱️
           </Link>
         </div>
@@ -32,11 +33,12 @@ function HomepageHeader() {
 }
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />
diff --git a/examples/lexical/public/index.html b/examples/lexical/public/index.html
index 6ca96c8ee..ad0be0e6b 100644
--- a/examples/lexical/public/index.html
+++ b/examples/lexical/public/index.html
@@ -4,7 +4,7 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Jupyter UI for Lexical Example</title>
@@ -14,7 +14,11 @@
         "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
       }
     </script>
-    <link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC" type="image/x-icon" />
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
     <script type="module" src="../src/index.tsx"></script>
   </head>
   <body>
diff --git a/examples/lexical/src/AppNbformat.tsx b/examples/lexical/src/AppNbformat.tsx
index 0129f8fc0..5e166436b 100644
--- a/examples/lexical/src/AppNbformat.tsx
+++ b/examples/lexical/src/AppNbformat.tsx
@@ -4,51 +4,66 @@
  * MIT License
  */
 
-import { useState } from "react";
-import { $getRoot } from "lexical";
-import styled from "styled-components";
-import { lexicalToNbformat,useLexical, LexicalProvider, Editor } from "@datalayer/jupyter-lexical";
-import { useNotebookStore, Jupyter, Notebook, CellSidebar, CellSidebarExtension } from "@datalayer/jupyter-react";
-import { Box, Button, UnderlineNav } from "@primer/react";
-import { ThreeBarsIcon } from "@primer/octicons-react"
-import { JSONTree } from "react-json-tree";
-import { INotebookContent } from "@jupyterlab/nbformat";
-import { INotebookModel } from "@jupyterlab/notebook";
+import { useState } from 'react';
+import { $getRoot } from 'lexical';
+import styled from 'styled-components';
+import {
+  lexicalToNbformat,
+  useLexical,
+  LexicalProvider,
+  Editor,
+} from '@datalayer/jupyter-lexical';
+import {
+  useNotebookStore,
+  Jupyter,
+  Notebook,
+  CellSidebar,
+  CellSidebarExtension,
+} from '@datalayer/jupyter-react';
+import { Box, Button, UnderlineNav } from '@primer/react';
+import { ThreeBarsIcon } from '@primer/octicons-react';
+import { JSONTree } from 'react-json-tree';
+import { INotebookContent } from '@jupyterlab/nbformat';
+import { INotebookModel } from '@jupyterlab/notebook';
 
 import './../style/index.css';
 
 import '@datalayer/jupyter-lexical/style/index.css';
 
-import INITIAL_LEXICAL_MODEL from "./content/Example.lexical.json";
+import INITIAL_LEXICAL_MODEL from './content/Example.lexical.json';
 
-import INITIAL_NBFORMAT_MODEL from "./content/Example.ipynb.json";
+import INITIAL_NBFORMAT_MODEL from './content/Example.ipynb.json';
 
 const NOTEBOOK_UID = 'notebook-uid-lexical';
 
-type TabType = 'editor'
-  | 'notebook'
-  | 'nbformat';
+type TabType = 'editor' | 'notebook' | 'nbformat';
 
 const StyledNotebook = styled.div`
   &[style] {
     height: 100vh !important;
   }
-`
+`;
 
 const Tabs = () => {
   const { editor } = useLexical();
   const notebookStore = useNotebookStore();
   const [tab, setTab] = useState<TabType>('editor');
-  const [notebookContent, setNotebookContent] = useState<INotebookContent>(INITIAL_NBFORMAT_MODEL);
+  const [notebookContent, setNotebookContent] = useState<INotebookContent>(
+    INITIAL_NBFORMAT_MODEL,
+  );
   const notebook = notebookStore.selectNotebook(NOTEBOOK_UID);
-  const goToTab = (e: any, toTab: TabType, notebookModel: INotebookModel | undefined) => {
+  const goToTab = (
+    e: any,
+    toTab: TabType,
+    notebookModel: INotebookModel | undefined,
+  ) => {
     e.preventDefault();
     if (tab === 'notebook' && toTab === 'editor') {
       if (notebookModel && editor) {
         setNotebookContent(notebookModel.toJSON() as INotebookContent);
       }
     }
-    if (tab === 'editor' && toTab === "notebook") {
+    if (tab === 'editor' && toTab === 'notebook') {
       editor?.update(() => {
         const root = $getRoot();
         const children = root.getChildren();
@@ -62,36 +77,51 @@ const Tabs = () => {
       }
     }
     setTab(toTab);
-  }
+  };
   return (
     <Box className="center">
       <UnderlineNav aria-label="Underline navigation">
-        <UnderlineNav.Item href="" aria-current={tab === 'editor' ? 'page' : undefined} onClick={(e: any) => goToTab(e, 'editor', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'editor' ? 'page' : undefined}
+          onClick={(e: any) => goToTab(e, 'editor', notebook?.model)}
+        >
           Editor
         </UnderlineNav.Item>
-        <UnderlineNav.Item href="" aria-current={tab === 'notebook' ? 'page' : undefined} onClick={(e: any) => goToTab(e, 'notebook', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'notebook' ? 'page' : undefined}
+          onClick={(e: any) => goToTab(e, 'notebook', notebook?.model)}
+        >
           Notebook
         </UnderlineNav.Item>
-        <UnderlineNav.Item href="" aria-current={tab === 'nbformat' ? 'page' : undefined} onClick={(e: any) => goToTab(e, 'nbformat', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'nbformat' ? 'page' : undefined}
+          onClick={(e: any) => goToTab(e, 'nbformat', notebook?.model)}
+        >
           NbFormat
         </UnderlineNav.Item>
       </UnderlineNav>
-      { tab === 'editor' &&
+      {tab === 'editor' && (
         <Box>
           <Editor notebook={notebookContent} />
           <Button
             onClick={(e: React.MouseEvent) => {
               e.preventDefault();
               if (editor) {
-                const editorState = editor.parseEditorState(INITIAL_LEXICAL_MODEL as any);
-                editor.setEditorState(editorState);  
+                const editorState = editor.parseEditorState(
+                  INITIAL_LEXICAL_MODEL as any,
+                );
+                editor.setEditorState(editorState);
               }
-            }}>
-              Load Lexical Model
+            }}
+          >
+            Load Lexical Model
           </Button>
         </Box>
-      }
-      { tab === 'notebook' &&
+      )}
+      {tab === 'notebook' && (
         <StyledNotebook>
           <Box mb={3}>
             <Notebook
@@ -103,20 +133,21 @@ const Tabs = () => {
               onClick={(e: React.MouseEvent) => {
                 e.preventDefault();
                 setNotebookContent(INITIAL_NBFORMAT_MODEL);
-              }}>
-                Reset Nbformat
+              }}
+            >
+              Reset Nbformat
             </Button>
           </Box>
         </StyledNotebook>
-      }
-      { tab === 'nbformat' &&
+      )}
+      {tab === 'nbformat' && (
         <Box>
-          <JSONTree data={notebookContent}/>;
+          <JSONTree data={notebookContent} />;
         </Box>
-      }
+      )}
     </Box>
-  )
-}
+  );
+};
 
 export function AppNbformat() {
   return (
@@ -126,25 +157,34 @@ export function AppNbformat() {
       </div>
       <Jupyter startDefaultKernel>
         <LexicalProvider>
-          <Tabs/>
+          <Tabs />
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
-        <br/>
-        <a href="https://datalayer.ai" target="_blank">
-          <ThreeBarsIcon/>
+        <br />
+        <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+          <ThreeBarsIcon />
         </a>
         <h2>
-          Copyright © <a href="https://datalayer.ai" target="_blank">2022 Datalayer, Inc.</a>
+          Copyright ©{' '}
+          <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+            2022 Datalayer, Inc.
+          </a>
         </h2>
         <ul>
           <li>
-            <a href="https://github.com/datalayer/jupyter-ui" target="_blank">Jupyter UI open-source repository</a>
+            <a
+              href="https://github.com/datalayer/jupyter-ui"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Jupyter UI open-source repository
+            </a>
           </li>
         </ul>
       </div>
     </>
-  )
+  );
 }
 
 export default AppNbformat;
diff --git a/examples/lexical/src/content/Example.ipynb.json b/examples/lexical/src/content/Example.ipynb.json
index aa25371c8..2bb297099 100644
--- a/examples/lexical/src/content/Example.ipynb.json
+++ b/examples/lexical/src/content/Example.ipynb.json
@@ -1,98 +1,89 @@
 {
- "cells": [
-  {
-   "cell_type": "markdown",
-   "id": "3ce565a1-7756-4fee-af81-32682a8eb1b3",
-   "metadata": {},
-   "source": [
-    "# Hello Lexical"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "23622f4a-62c9-4915-87b4-af1f4d6e30ec",
-   "metadata": {},
-   "source": [
-    "The Receiver Operating Characteristic \"ROC\" illustrates the performance of the binary classifier by plotting the false alarm probability ($P_{FA}$) on the horizontal axis and the detection probability ($P_D$) on the vertical axis. The area under the ROC-curve (AUC) is used to provide a single-figure quantification of the performance of the binary classifier based on the ROC. This article provides an interpretation of the AUC and connects the AUC to the Wilcoxon–Mann–Whitney statistic, which is a nonparametic test to compare two populations. This derivation is pretty hard to find but the connection between the AUC and the Wilcoxon–Mann–Whitney test is important insofar as it provides some perspective on the seemingly arbitrary use of AUC to quantify the performance of the binary classifier.\n",
-    "\n",
-    "Let's proceed with some definitions and some notation. A binary classifier can make two kinds of mistakes, usually and unhelpfully called Type I and Type II errors.  The *detection probability* is \n",
-    "\n",
-    "$$P_D= \\mathbb{P}(1|x \\in C_1)$$"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "id": "5d1c1fb7-59b6-4d52-a9e2-6294ddc9758a",
-   "metadata": {},
-   "outputs": [
+  "cells": [
     {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "1\n"
-     ]
-    }
-   ],
-   "source": [
-    "x=1\n",
-    "print(x)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 4,
-   "id": "1fcf3d25-cb81-4977-9cc5-91855f3c1b28",
-   "metadata": {},
-   "outputs": [
+      "cell_type": "markdown",
+      "id": "3ce565a1-7756-4fee-af81-32682a8eb1b3",
+      "metadata": {},
+      "source": ["# Hello Lexical"]
+    },
+    {
+      "cell_type": "markdown",
+      "id": "23622f4a-62c9-4915-87b4-af1f4d6e30ec",
+      "metadata": {},
+      "source": [
+        "The Receiver Operating Characteristic \"ROC\" illustrates the performance of the binary classifier by plotting the false alarm probability ($P_{FA}$) on the horizontal axis and the detection probability ($P_D$) on the vertical axis. The area under the ROC-curve (AUC) is used to provide a single-figure quantification of the performance of the binary classifier based on the ROC. This article provides an interpretation of the AUC and connects the AUC to the Wilcoxon–Mann–Whitney statistic, which is a nonparametic test to compare two populations. This derivation is pretty hard to find but the connection between the AUC and the Wilcoxon–Mann–Whitney test is important insofar as it provides some perspective on the seemingly arbitrary use of AUC to quantify the performance of the binary classifier.\n",
+        "\n",
+        "Let's proceed with some definitions and some notation. A binary classifier can make two kinds of mistakes, usually and unhelpfully called Type I and Type II errors.  The *detection probability* is \n",
+        "\n",
+        "$$P_D= \\mathbb{P}(1|x \\in C_1)$$"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 5,
+      "id": "5d1c1fb7-59b6-4d52-a9e2-6294ddc9758a",
+      "metadata": {},
+      "outputs": [
+        {
+          "name": "stdout",
+          "output_type": "stream",
+          "text": ["1\n"]
+        }
+      ],
+      "source": ["x=1\n", "print(x)"]
+    },
     {
-     "data": {
-      "image/png": "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\n",
-      "text/plain": [
-       "<Figure size 432x288 with 1 Axes>"
+      "cell_type": "code",
+      "execution_count": 4,
+      "id": "1fcf3d25-cb81-4977-9cc5-91855f3c1b28",
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "image/png": "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\n",
+            "text/plain": ["<Figure size 432x288 with 1 Axes>"]
+          },
+          "metadata": {
+            "needs_background": "light"
+          },
+          "output_type": "display_data"
+        }
+      ],
+      "source": [
+        "import matplotlib.pyplot as plt\n",
+        "plt.plot([1, 2, 3, 4])\n",
+        "plt.ylabel('y=x')\n",
+        "plt.show()"
       ]
-     },
-     "metadata": {
-      "needs_background": "light"
-     },
-     "output_type": "display_data"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "8c7e5a40-5092-4ae7-98ea-e140da4f4328",
+      "metadata": {},
+      "outputs": [],
+      "source": []
+    }
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python 3 (ipykernel)",
+      "language": "python",
+      "name": "python3"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.10.4"
     }
-   ],
-   "source": [
-    "import matplotlib.pyplot as plt\n",
-    "plt.plot([1, 2, 3, 4])\n",
-    "plt.ylabel('y=x')\n",
-    "plt.show()"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "8c7e5a40-5092-4ae7-98ea-e140da4f4328",
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
   },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.10.4"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
+  "nbformat": 4,
+  "nbformat_minor": 5
 }
diff --git a/examples/lexical/src/content/Example.lexical.json b/examples/lexical/src/content/Example.lexical.json
index b527662dd..556e58211 100644
--- a/examples/lexical/src/content/Example.lexical.json
+++ b/examples/lexical/src/content/Example.lexical.json
@@ -256,4 +256,4 @@
     "type": "root",
     "version": 1
   }
-}
\ No newline at end of file
+}
diff --git a/examples/lexical/src/index.tsx b/examples/lexical/src/index.tsx
index 27b65bd7f..1fb21e0c6 100644
--- a/examples/lexical/src/index.tsx
+++ b/examples/lexical/src/index.tsx
@@ -4,9 +4,9 @@
  * MIT License
  */
 
-import { createRoot } from "react-dom/client";
-import { AppNbformat } from "./AppNbformat";
+import { createRoot } from 'react-dom/client';
+import { AppNbformat } from './AppNbformat';
 
-const rootElement = document.getElementById("root");
+const rootElement = document.getElementById('root');
 
 createRoot(rootElement!).render(<AppNbformat />);
diff --git a/examples/lexical/src/typings.d.ts b/examples/lexical/src/typings.d.ts
index f6989cc55..4cb6d6d6d 100755
--- a/examples/lexical/src/typings.d.ts
+++ b/examples/lexical/src/typings.d.ts
@@ -4,22 +4,22 @@
  * MIT License
  */
 
-declare module "*.jpg" {
+declare module '*.jpg' {
   const value: any;
   export default value;
 }
 
-declare module "*.jpeg" {
+declare module '*.jpeg' {
   const value: any;
   export default value;
 }
 
-declare module "*.png" {
+declare module '*.png' {
   const value: any;
   export default value;
 }
 
-declare module "*.svg" {
+declare module '*.svg' {
   const value: any;
   export default value;
 }
diff --git a/examples/lexical/tsconfig.json b/examples/lexical/tsconfig.json
index 692dfff1e..787b2986c 100644
--- a/examples/lexical/tsconfig.json
+++ b/examples/lexical/tsconfig.json
@@ -1,16 +1,11 @@
 {
-  "include": [
-    "./src/**/*"
-  ],
+  "include": ["./src/**/*"],
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "downlevelIteration": true,
     "esModuleInterop": true,
-    "lib": [
-      "dom",
-      "es2021",
-    ],
+    "lib": ["dom", "es2021"],
     "jsx": "react-jsx",
     "target": "ES2022",
     "allowJs": true,
diff --git a/examples/lexical/webpack.config.js b/examples/lexical/webpack.config.js
index 2d7d34328..06832f628 100644
--- a/examples/lexical/webpack.config.js
+++ b/examples/lexical/webpack.config.js
@@ -4,25 +4,25 @@
  * MIT License
  */
 
-const webpack = require("webpack");
-const path = require("path");
+const webpack = require('webpack');
+const path = require('path');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
 
-const shimJS = path.resolve(__dirname, "src", "emptyshim.js");
+const shimJS = path.resolve(__dirname, 'src', 'emptyshim.js');
 
 function shim(regExp) {
   return new webpack.NormalModuleReplacementPlugin(regExp, shimJS);
 }
 
 const IS_PRODUCTION = process.argv.indexOf('--mode=production') > -1;
-let mode = "development";
+let mode = 'development';
 if (IS_PRODUCTION) {
-  mode = "production";
+  mode = 'production';
 }
 
-let devtool = "inline-source-map";
+let devtool = 'inline-source-map';
 if (IS_PRODUCTION) {
   devtool = false;
 }
@@ -38,7 +38,7 @@ module.exports = {
   watchOptions: {
     aggregateTimeout: 300,
     poll: 5000, // Seems to stabilise HMR file change detection.
-    ignored: "/node_modules/"
+    ignored: '/node_modules/',
   },
   devServer: {
     port: 3208,
@@ -53,36 +53,36 @@ module.exports = {
     minimize,
   },
   output: {
-    publicPath: "http://localhost:3208/",
+    publicPath: 'http://localhost:3208/',
     filename: '[name].[contenthash].jupyterReactLexicalExample.js',
   },
   resolve: {
-    extensions: [ '.tsx', '.ts', 'jsx', '.js' ],
-    alias: { 
-      "stream": "stream-browserify",
+    extensions: ['.tsx', '.ts', 'jsx', '.js'],
+    alias: {
+      stream: 'stream-browserify',
+    },
+    fallback: {
+      assert: require.resolve('assert/'),
     },
-    fallback: { 
-      "assert": require.resolve("assert/"),
-    }
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          plugins: [
-            "@babel/plugin-proposal-class-properties",
-          ],
+          plugins: ['@babel/plugin-proposal-class-properties'],
           presets: [
-            ["@babel/preset-react", {
+            [
+              '@babel/preset-react',
+              {
                 runtime: 'automatic',
-                importSource: 'react'
+                importSource: 'react',
               },
             ],
-            "@babel/preset-typescript",
+            '@babel/preset-typescript',
           ],
-          cacheDirectory: true
+          cacheDirectory: true,
         },
         exclude: /node_modules/,
       },
@@ -119,20 +119,20 @@ module.exports = {
         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
         issuer: /\.js$/,
         use: {
-          loader: 'raw-loader'
-        }
+          loader: 'raw-loader',
+        },
       },
       {
         test: /\.m?js/,
         resolve: {
-          fullySpecified: false
-        }
+          fullySpecified: false,
+        },
       },
       {
         test: /\.c?js/,
         resolve: {
-          fullySpecified: false
-        }
+          fullySpecified: false,
+        },
       },
       // Special webpack rule for the JupyterLab theme style sheets.
       {
@@ -163,16 +163,16 @@ module.exports = {
           filename: 'schema/[name][ext][query]',
         },
       },
-    ]
+    ],
   },
   plugins: [
     shim(/@fortawesome/),
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser',
     }),
     new HtmlWebpackPlugin({
       title: 'Jupyter UI',
-      template : 'public/index.html'
+      template: 'public/index.html',
     }),
     new HtmlWebpackTagsPlugin({
       links: [
@@ -180,10 +180,10 @@ module.exports = {
         'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
       ],
       tags: [
-//        'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js'
+        //        'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js'
       ],
-      append: false, 
-      publicPath: false
+      append: false,
+      publicPath: false,
     }),
-  ]
+  ],
 };
diff --git a/examples/next-js/README.md b/examples/next-js/README.md
index 2d6db3acb..29955c06e 100644
--- a/examples/next-js/README.md
+++ b/examples/next-js/README.md
@@ -51,7 +51,7 @@ index 912458d..5edaa11 100644
 @@ -24,4 +24,4 @@ export * from './widget_string';
  export * from './widget_description';
  export * from './widget_upload';
- 
+
 -export const version = (require('../package.json') as any).version;
 +export const version = "5.0.12";
 ```
diff --git a/examples/next-js/next.config.ts b/examples/next-js/next.config.ts
index 45470a600..055cac1fa 100644
--- a/examples/next-js/next.config.ts
+++ b/examples/next-js/next.config.ts
@@ -19,23 +19,20 @@ const nextConfig = {
     config.plugins.push(
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
-      })
+      }),
     );
     // Fix json5 import issue for JupyterLab packages
     config.resolve.alias = {
       ...config.resolve.alias,
-      'json5': require.resolve('json5/lib/index.js'),
+      json5: require.resolve('json5/lib/index.js'),
       '~': path.resolve(__dirname, 'node_modules'),
     };
     // Add a plugin to strip `~` from import paths
     config.plugins.push(
-      new webpack.NormalModuleReplacementPlugin(
-        /^~(.*)/,
-        (resource: any) => {
-          resource.request = resource.request.replace(/^~/, '');
-        },
-      ),
-    );    
+      new webpack.NormalModuleReplacementPlugin(/^~(.*)/, (resource: any) => {
+        resource.request = resource.request.replace(/^~/, '');
+      }),
+    );
     config.module.rules.push(
       { test: /\.js.map$/, type: 'asset/resource' },
       {
@@ -85,9 +82,9 @@ const nextConfig = {
           filename: 'schema/[name][ext][query]',
         },
       },
-    )
-    return config
+    );
+    return config;
   },
-}
+};
 
 module.exports = nextConfig;
diff --git a/examples/next-js/src/app/globals.css b/examples/next-js/src/app/globals.css
index f29fc321a..63e2014e5 100644
--- a/examples/next-js/src/app/globals.css
+++ b/examples/next-js/src/app/globals.css
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-@import "tailwindcss";
+@import 'tailwindcss';
 
 :root {
   --background: #ffffff;
diff --git a/examples/next-js/src/app/layout.tsx b/examples/next-js/src/app/layout.tsx
index b60558815..ee65e24f0 100644
--- a/examples/next-js/src/app/layout.tsx
+++ b/examples/next-js/src/app/layout.tsx
@@ -4,23 +4,23 @@
  * MIT License
  */
 
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 };
 
 export default function RootLayout({
diff --git a/examples/next-js/src/app/page.tsx b/examples/next-js/src/app/page.tsx
index 7707992a5..766571057 100644
--- a/examples/next-js/src/app/page.tsx
+++ b/examples/next-js/src/app/page.tsx
@@ -6,21 +6,21 @@
 
 'use client';
 
-import Image from "next/image";
+import Image from 'next/image';
 import dynamic from 'next/dynamic';
 
 const JupyterComponentNoSSR = dynamic(
   () => import('../components/NotebookComponent'),
-  { 
+  {
     ssr: false,
-    loading: () => <p>Loading Jupyter Component...</p>
-  }
+    loading: () => <p>Loading Jupyter Component...</p>,
+  },
 );
 
 export default function Home() {
   return (
     <>
-      <JupyterComponentNoSSR/>
+      <JupyterComponentNoSSR />
       <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
         <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
           <Image
@@ -33,7 +33,7 @@ export default function Home() {
           />
           <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
             <li className="mb-2 tracking-[-.01em]">
-              Get started by editing{" "}
+              Get started by editing{' '}
               <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
                 src/app/page.tsx
               </code>
diff --git a/examples/next-js/src/components/CellComponent.tsx b/examples/next-js/src/components/CellComponent.tsx
index 143629784..7d868514b 100644
--- a/examples/next-js/src/components/CellComponent.tsx
+++ b/examples/next-js/src/components/CellComponent.tsx
@@ -19,15 +19,16 @@ const Cell = dynamic(
 */
 export const CellComponent = () => {
   const { defaultKernel } = useJupyter({
-    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
-    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+    jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
+    jupyterServerToken:
+      '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
     startDefaultKernel: true,
   });
   return (
     <>
-      {defaultKernel ?
+      {defaultKernel ? (
         <>
-          <div style={{fontSize: 20}}>Jupyter Cell in Next.js</div>
+          <div style={{ fontSize: 20 }}>Jupyter Cell in Next.js</div>
           <JupyterReactTheme>
             <Cell
               id="test-cell"
@@ -38,11 +39,11 @@ export const CellComponent = () => {
             />
           </JupyterReactTheme>
         </>
-      :
+      ) : (
         <p>Loading Jupyter Cell...</p>
-      }
+      )}
     </>
-  )
-}
+  );
+};
 
 export default CellComponent;
diff --git a/examples/next-js/src/components/NotebookComponent.tsx b/examples/next-js/src/components/NotebookComponent.tsx
index ac070dab1..ed464f14d 100644
--- a/examples/next-js/src/components/NotebookComponent.tsx
+++ b/examples/next-js/src/components/NotebookComponent.tsx
@@ -4,9 +4,16 @@
  * MIT License
  */
 
-'use client'
+'use client';
 
-import { useJupyter, JupyterReactTheme, Notebook2, NotebookToolbar, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
+import {
+  useJupyter,
+  JupyterReactTheme,
+  Notebook2,
+  NotebookToolbar,
+  CellSidebarExtension,
+  CellSidebarButton,
+} from '@datalayer/jupyter-react';
 import { Box } from '@primer/react';
 import { PrimerTheme } from './PrimerTheme';
 import { useMemo } from 'react';
@@ -14,59 +21,61 @@ import { useMemo } from 'react';
 type INotebookComponentProps = {
   colorMode?: 'light' | 'dark';
   theme?: PrimerTheme;
-}
+};
 
 export const NotebookComponent = (props: INotebookComponentProps) => {
-//  const { colorMode, theme } = props;
+  //  const { colorMode, theme } = props;
   const { defaultKernel, serviceManager } = useJupyter({
-    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
-    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+    jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
+    jupyterServerToken:
+      '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
     startDefaultKernel: true,
   });
-  const extensions = useMemo(() => [
-    new CellSidebarExtension({ factory: CellSidebarButton })
-  ], []);
+  const extensions = useMemo(
+    () => [new CellSidebarExtension({ factory: CellSidebarButton })],
+    [],
+  );
   return (
     <>
-     { defaultKernel && serviceManager ?
-      <>
-        <div style={{fontSize: 20}}>Jupyter Notebook in Next.js</div>
-        <JupyterReactTheme>
-          <Box
-            sx={{
-              '& .jp-NotebookPanel': {
-                height: '500px !important',
-                maxHeight: '500px !important',
-                width: '100%',
-                overflowY: 'hidden',
-              },
-              '& .jp-Notebook': {
-                flex: '1 1 auto !important',
-                height: '500px !important',
-                maxHeight: '500px !important',
-                overflowY: 'scroll',
-              },
-            }}
-          >
-            <Notebook2
-              path="ipywidgets.ipynb"
-              id="notebook-nextjs-1"
-              cellSidebarMargin={120}
-              height="500px"
-              kernelId={defaultKernel.id}
-              serviceManager={serviceManager}
-              extensions={extensions}
-              Toolbar={NotebookToolbar}
-            />
-          </Box>
-        </JupyterReactTheme>
-      </>
-    :
-      <p>Loading Jupyter Notebook...</p>
-    }
-  </>
-  )
-}
+      {defaultKernel && serviceManager ? (
+        <>
+          <div style={{ fontSize: 20 }}>Jupyter Notebook in Next.js</div>
+          <JupyterReactTheme>
+            <Box
+              sx={{
+                '& .jp-NotebookPanel': {
+                  height: '500px !important',
+                  maxHeight: '500px !important',
+                  width: '100%',
+                  overflowY: 'hidden',
+                },
+                '& .jp-Notebook': {
+                  flex: '1 1 auto !important',
+                  height: '500px !important',
+                  maxHeight: '500px !important',
+                  overflowY: 'scroll',
+                },
+              }}
+            >
+              <Notebook2
+                path="ipywidgets.ipynb"
+                id="notebook-nextjs-1"
+                cellSidebarMargin={120}
+                height="500px"
+                kernelId={defaultKernel.id}
+                serviceManager={serviceManager}
+                extensions={extensions}
+                Toolbar={NotebookToolbar}
+              />
+            </Box>
+          </JupyterReactTheme>
+        </>
+      ) : (
+        <p>Loading Jupyter Notebook...</p>
+      )}
+    </>
+  );
+};
 
 NotebookComponent.defaultProps = {
   colorMode: 'light' as 'light' | 'dark',
diff --git a/examples/next-js/src/components/PrimerTheme.tsx b/examples/next-js/src/components/PrimerTheme.tsx
index 609c7a826..3cc90c185 100644
--- a/examples/next-js/src/components/PrimerTheme.tsx
+++ b/examples/next-js/src/components/PrimerTheme.tsx
@@ -4,10 +4,10 @@
  * MIT License
  */
 
-'use client'
+'use client';
 
 export type PrimerTheme = {
-    [key: string]: any;
+  [key: string]: any;
 };
 
 export default PrimerTheme;
diff --git a/examples/vite/.yarnrc.yml b/examples/vite/.yarnrc.yml
index 05fb81872..96052a87f 100644
--- a/examples/vite/.yarnrc.yml
+++ b/examples/vite/.yarnrc.yml
@@ -6,15 +6,15 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/examples/vite/README.md b/examples/vite/README.md
index 27f4fb32d..4f037bc76 100644
--- a/examples/vite/README.md
+++ b/examples/vite/README.md
@@ -1,71 +1,71 @@
-[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)
-
-[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
-
-# 🪐 ⚛️ Jupyter React Vite Example
-
-> Live example on https://jupyter-react-vite-example.vercel.app
-
-Example to run [Jupyter React](https://github.com/datalayer/jupyter-ui/tree/main/packages/react) in a [Vite.js](https://vitejs.dev) Web application.
-
-```bash
-npm i
-npm run dev
-```
-
-Ensure to add the following script in the head of your HTML.
-
-```html
-    <!-- Needed for ipywidgets -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
-    <script type="module">
-      globalThis.__webpack_public_path__ = "";
-    </script>
-```
-
-To create a production build, you first need to patch `@jupyter-widgets/controls` to avoid issues with early loadings via `require.js`.
-
-```patch
-diff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js
-index 0063f69..ade0862 100644
---- a/node_modules/@jupyter-widgets/controls/lib/index.js
-+++ b/node_modules/@jupyter-widgets/controls/lib/index.js
-@@ -22,5 +22,5 @@ export * from './widget_tagsinput';
- export * from './widget_string';
- export * from './widget_description';
- export * from './widget_upload';
--export const version = require('../package.json').version;
-+export const version = "0.1.0";
- //# sourceMappingURL=index.js.map
-\ No newline at end of file
-diff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts
-index 912458d..5edaa11 100644
---- a/node_modules/@jupyter-widgets/controls/src/index.ts
-+++ b/node_modules/@jupyter-widgets/controls/src/index.ts
-@@ -24,4 +24,4 @@ export * from './widget_string';
- export * from './widget_description';
- export * from './widget_upload';
- 
--export const version = (require('../package.json') as any).version;
-+export const version = "5.0.12";
-```
-
-Then run the following command to build and test the artifacts in the `dist` folder.
-
-```bash
-# make run
-npm run build
-cd dist
-python -m http.server 8675 # Or any other local server.
-open http://localhost:8675
-```
-
-<div align="center" style="text-align: center">
-  <img alt="Jupyter React Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
-</div>
-
-## ⚖️ License
-
-Copyright (c) 2025 Datalayer, Inc.
-
-Released under the terms of the MIT license (see [LICENSE](https://github.com/datalayer/jupyter-ui/blob/main/LICENSE).
+[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)
+
+[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
+
+# 🪐 ⚛️ Jupyter React Vite Example
+
+> Live example on https://jupyter-react-vite-example.vercel.app
+
+Example to run [Jupyter React](https://github.com/datalayer/jupyter-ui/tree/main/packages/react) in a [Vite.js](https://vitejs.dev) Web application.
+
+```bash
+npm i
+npm run dev
+```
+
+Ensure to add the following script in the head of your HTML.
+
+```html
+<!-- Needed for ipywidgets -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
+<script type="module">
+  globalThis.__webpack_public_path__ = '';
+</script>
+```
+
+To create a production build, you first need to patch `@jupyter-widgets/controls` to avoid issues with early loadings via `require.js`.
+
+```patch
+diff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js
+index 0063f69..ade0862 100644
+--- a/node_modules/@jupyter-widgets/controls/lib/index.js
++++ b/node_modules/@jupyter-widgets/controls/lib/index.js
+@@ -22,5 +22,5 @@ export * from './widget_tagsinput';
+ export * from './widget_string';
+ export * from './widget_description';
+ export * from './widget_upload';
+-export const version = require('../package.json').version;
++export const version = "0.1.0";
+ //# sourceMappingURL=index.js.map
+\ No newline at end of file
+diff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts
+index 912458d..5edaa11 100644
+--- a/node_modules/@jupyter-widgets/controls/src/index.ts
++++ b/node_modules/@jupyter-widgets/controls/src/index.ts
+@@ -24,4 +24,4 @@ export * from './widget_string';
+ export * from './widget_description';
+ export * from './widget_upload';
+
+-export const version = (require('../package.json') as any).version;
++export const version = "5.0.12";
+```
+
+Then run the following command to build and test the artifacts in the `dist` folder.
+
+```bash
+# make run
+npm run build
+cd dist
+python -m http.server 8675 # Or any other local server.
+open http://localhost:8675
+```
+
+<div align="center" style="text-align: center">
+  <img alt="Jupyter React Gallery" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif" />
+</div>
+
+## ⚖️ License
+
+Copyright (c) 2025 Datalayer, Inc.
+
+Released under the terms of the MIT license (see [LICENSE](https://github.com/datalayer/jupyter-ui/blob/main/LICENSE).
diff --git a/examples/vite/index.html b/examples/vite/index.html
index 7619ca3dd..b99c50c49 100644
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@@ -4,7 +4,7 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/examples/vite/src/App.css b/examples/vite/src/App.css
index 20455d1a5..96761330a 100644
--- a/examples/vite/src/App.css
+++ b/examples/vite/src/App.css
@@ -4,45 +4,45 @@
  * MIT License
  */
 
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(1) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(1) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
index ec2a78fe8..cb3567436 100644
--- a/examples/vite/src/App.tsx
+++ b/examples/vite/src/App.tsx
@@ -1,64 +1,70 @@
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
-import { CellExample } from "./examples/CellExample";
-import { NotebookExample } from "./examples/NotebookExample";
-
-// Fix for controls version failing to load in Vite.
-// import * as controls from "@jupyter-widgets/controls/lib/index";
-// const c = { ...controls }
-// c.version = "0.1.0";
-
-import "./App.css";
-
-function App() {
-  const { defaultKernel, serviceManager } = useJupyter({
-    jupyterServerUrl: "https://oss.datalayer.run/api/jupyter-server",
-    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-    startDefaultKernel: true,
-  });
-  const [count, setCount] = useState(0);
-  return (
-    <div className="App">
-      <>
-        <JupyterReactTheme>
-          { defaultKernel && <CellExample kernel={defaultKernel}/> }
-          { defaultKernel && serviceManager && <NotebookExample kernel={defaultKernel} serviceManager={serviceManager}/> }
-        </JupyterReactTheme>
-      </>
-      <div>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-      </div>
-      <h1>React + Vite</h1>
-      <h2>On CodeSandbox!</h2>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR.
-        </p>
-        <p>
-          Tip: you can use the inspector button next to address bar to click on
-          components in the preview and open the code in the editor!
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  );
-}
-
-export default App;
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
+import { CellExample } from './examples/CellExample';
+import { NotebookExample } from './examples/NotebookExample';
+
+// Fix for controls version failing to load in Vite.
+// import * as controls from "@jupyter-widgets/controls/lib/index";
+// const c = { ...controls }
+// c.version = "0.1.0";
+
+import './App.css';
+
+function App() {
+  const { defaultKernel, serviceManager } = useJupyter({
+    jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
+    jupyterServerToken:
+      '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
+    startDefaultKernel: true,
+  });
+  const [count, setCount] = useState(0);
+  return (
+    <div className="App">
+      <>
+        <JupyterReactTheme>
+          {defaultKernel && <CellExample kernel={defaultKernel} />}
+          {defaultKernel && serviceManager && (
+            <NotebookExample
+              kernel={defaultKernel}
+              serviceManager={serviceManager}
+            />
+          )}
+        </JupyterReactTheme>
+      </>
+      <div>
+        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        </a>
+      </div>
+      <h1>React + Vite</h1>
+      <h2>On CodeSandbox!</h2>
+      <div className="card">
+        <button onClick={() => setCount(count => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR.
+        </p>
+        <p>
+          Tip: you can use the inspector button next to address bar to click on
+          components in the preview and open the code in the editor!
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/vite/src/examples/CellExample.tsx b/examples/vite/src/examples/CellExample.tsx
index 00c0abb8b..e2c76dfb9 100644
--- a/examples/vite/src/examples/CellExample.tsx
+++ b/examples/vite/src/examples/CellExample.tsx
@@ -5,7 +5,13 @@
  */
 
 import { Box, Button, Label } from '@primer/react';
-import { Cell, KernelIndicator, useKernelsStore, useCellsStore, Kernel } from '@datalayer/jupyter-react';
+import {
+  Cell,
+  KernelIndicator,
+  useKernelsStore,
+  useCellsStore,
+  Kernel,
+} from '@datalayer/jupyter-react';
 
 const CELL_ID = 'cell-example-1';
 
@@ -16,7 +22,7 @@ for i in range(10):
 
 type ICellExampleProps = {
   kernel: Kernel;
-}
+};
 
 export const CellExample = (props: ICellExampleProps) => {
   const { kernel } = props;
@@ -25,12 +31,8 @@ export const CellExample = (props: ICellExampleProps) => {
   return (
     <>
       <Box as="h1">A Jupyter Cell</Box>
-      <Box>
-        Source: {cellsStore.getSource(CELL_ID)}
-      </Box>
-      <Box>
-        Outputs Count: {cellsStore.getOutputsCount(CELL_ID)}
-      </Box>
+      <Box>Source: {cellsStore.getSource(CELL_ID)}</Box>
+      <Box>Outputs Count: {cellsStore.getOutputsCount(CELL_ID)}</Box>
       <Box>
         Kernel State: <Label>{kernelsStore.getExecutionState(kernel.id)}</Label>
       </Box>
@@ -38,19 +40,17 @@ export const CellExample = (props: ICellExampleProps) => {
         Kernel Phase: <Label>{kernelsStore.getExecutionPhase(kernel.id)}</Label>
       </Box>
       <Box display="flex">
-        <Box>
-          Kernel Indicator:
-        </Box>
+        <Box>Kernel Indicator:</Box>
         <Box ml={3}>
-          <KernelIndicator kernel={kernel.connection}/>
+          <KernelIndicator kernel={kernel.connection} />
         </Box>
       </Box>
       <Box>
         <Button onClick={() => cellsStore.execute(CELL_ID)}>Run cell</Button>
       </Box>
-      <Cell source={DEFAULT_SOURCE} id={CELL_ID}/>
+      <Cell source={DEFAULT_SOURCE} id={CELL_ID} />
     </>
-  )
-}
+  );
+};
 
 export default CellExample;
diff --git a/examples/vite/src/examples/NotebookExample.tsx b/examples/vite/src/examples/NotebookExample.tsx
index e3a9387f2..167fbbcaa 100644
--- a/examples/vite/src/examples/NotebookExample.tsx
+++ b/examples/vite/src/examples/NotebookExample.tsx
@@ -6,7 +6,13 @@
 
 import { useMemo } from 'react';
 import { Box } from '@primer/react';
-import { Notebook2, Kernel, NotebookToolbar, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
+import {
+  Notebook2,
+  Kernel,
+  NotebookToolbar,
+  CellSidebarExtension,
+  CellSidebarButton,
+} from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
 
 const NOTEBOOK_ID = 'notebook-example-1';
@@ -14,13 +20,14 @@ const NOTEBOOK_ID = 'notebook-example-1';
 type INotebookExampleProps = {
   kernel: Kernel;
   serviceManager: ServiceManager.IManager;
-}
+};
 
 export const NotebookExample = (props: INotebookExampleProps) => {
   const { kernel, serviceManager } = props;
-  const extensions = useMemo(() => [
-    new CellSidebarExtension({ factory: CellSidebarButton })
-  ], []);
+  const extensions = useMemo(
+    () => [new CellSidebarExtension({ factory: CellSidebarButton })],
+    [],
+  );
   return (
     <>
       <Box as="h1">A Jupyter Notebook</Box>
@@ -33,7 +40,7 @@ export const NotebookExample = (props: INotebookExampleProps) => {
         Toolbar={NotebookToolbar}
       />
     </>
-  )
-}
+  );
+};
 
 export default NotebookExample;
diff --git a/examples/vite/src/main.tsx b/examples/vite/src/main.tsx
index 2418179e2..69a55102f 100644
--- a/examples/vite/src/main.tsx
+++ b/examples/vite/src/main.tsx
@@ -4,14 +4,14 @@
  * MIT License
  */
 
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/vite/src/vite-env.d.ts b/examples/vite/src/vite-env.d.ts
index 91b70208a..a143462cf 100644
--- a/examples/vite/src/vite-env.d.ts
+++ b/examples/vite/src/vite-env.d.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json
index bf09555c3..86457a74a 100644
--- a/examples/vite/tsconfig.json
+++ b/examples/vite/tsconfig.json
@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -20,12 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
\ No newline at end of file
+  "include": ["src"]
+}
diff --git a/examples/vite/tsconfig.node.json b/examples/vite/tsconfig.node.json
index 842a5f345..daa004dc4 100644
--- a/examples/vite/tsconfig.node.json
+++ b/examples/vite/tsconfig.node.json
@@ -1,11 +1,14 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": [
-    "vite.config.ts"
-  ]
-}
\ No newline at end of file
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
index e14f7c77c..ad3474df0 100644
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
@@ -4,9 +4,9 @@
  * MIT License
  */
 
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { treatAsCommonjs } from "vite-plugin-treat-umd-as-commonjs";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { treatAsCommonjs } from 'vite-plugin-treat-umd-as-commonjs';
 
 export default defineConfig({
   plugins: [
@@ -18,20 +18,24 @@ export default defineConfig({
       async resolveId(source, importer) {
         if (source.endsWith('.raw.css') && !source.includes('?raw')) {
           // rewrite import to append ?raw query
-          const resolved = await this.resolve(source + '?raw', importer, { skipSelf: true });
+          const resolved = await this.resolve(source + '?raw', importer, {
+            skipSelf: true,
+          });
           if (resolved) return resolved.id;
           return null;
         }
         return null;
-      }
+      },
     },
     {
-      name: "fix-text-query",
-      enforce: "pre",
+      name: 'fix-text-query',
+      enforce: 'pre',
       async resolveId(source, importer) {
-        if (source.includes("?text")) {
-          let fixed = source.replace("?text", "?raw");
-          const resolved = await this.resolve(fixed, importer, { skipSelf: true });
+        if (source.includes('?text')) {
+          const fixed = source.replace('?text', '?raw');
+          const resolved = await this.resolve(fixed, importer, {
+            skipSelf: true,
+          });
           if (resolved) {
             return resolved.id;
           }
@@ -41,12 +45,12 @@ export default defineConfig({
       },
     },
   ],
-  assetsInclude: ["**/*.whl", "**/*.raw.css"],
+  assetsInclude: ['**/*.whl', '**/*.raw.css'],
   resolve: {
     alias: [
       {
         find: /^~(.*)$/,
-        replacement: "$1",
+        replacement: '$1',
       },
     ],
   },
@@ -54,14 +58,17 @@ export default defineConfig({
     global: 'globalThis',
     __webpack_public_path__: '""',
   },
+  worker: {
+    format: 'es',
+  },
   build: {
     rollupOptions: {
       output: {
-        assetFileNames: (assetInfo) => {
+        assetFileNames: assetInfo => {
           if (/pypi\//.test(assetInfo.name)) {
-            return "pypi/[name][extname]";
+            return 'pypi/[name][extname]';
           }
-          return "assets/[name][extname]";
+          return 'assets/[name][extname]';
         },
       },
     },
@@ -69,7 +76,7 @@ export default defineConfig({
   optimizeDeps: {
     esbuildOptions: {
       loader: {
-        ".whl": "text",
+        '.whl': 'text',
       },
     },
   },
diff --git a/jest.config.js b/jest.config.js
index ecc55397a..c60356962 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,8 +7,6 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-  testMatch: [
-    "**/?(*.)+(spec|test).[jt]s?(x)"
-  ],
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 };
diff --git a/package.json b/package.json
index 08bbe1464..873a9c3e2 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "datalayer"
   ],
   "engines": {
-    "node": ">= 18.0.0"
+    "node": ">= 20.0.0"
   },
   "os": [
     "darwin",
@@ -39,7 +39,15 @@
     "jupyter:ui:slate": "lerna run --parallel --scope @datalayer/jupyter-slate-example start",
     "storybook": "lerna run --scope @datalayer/jupyter-ui-storybook storybook",
     "test": "lerna run test",
-    "postinstall": "patch-package"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,mdx,yml,yaml,css,html}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,mdx,yml,yaml,css,html}\"",
+    "type-check": "tsc --build --noEmit",
+    "check": "npm run format:check && npm run lint && npm run type-check",
+    "check:fix": "npm run format && npm run lint:fix && npm run type-check",
+    "postinstall": "patch-package",
+    "prepare": "husky"
   },
   "workspaces": [
     "docs",
@@ -48,24 +56,37 @@
     "storybook"
   ],
   "devDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
     "concurrently": "^6.2.0",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "fkill-cli": "^7.1.0",
+    "husky": "^9.1.7",
     "lerna": "^6.6.2",
+    "lint-staged": "^16.1.5",
     "npm-run-all": "^4.1.5",
-    "patch-package": "^8.0.0"
+    "patch-package": "^8.0.0",
+    "typescript-eslint": "^8.39.1"
   },
   "resolutions": {
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^5.8.3"
   },
   "overrides": {
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "^5.8.3"
   }
 }
diff --git a/packages/docusaurus-plugin/README.md b/packages/docusaurus-plugin/README.md
index b93a0fead..91207c11f 100644
--- a/packages/docusaurus-plugin/README.md
+++ b/packages/docusaurus-plugin/README.md
@@ -35,14 +35,14 @@ Add the following in any Markdown file.
 ```jsx
 import JupyterCell from '@theme/JupyterCell';
 
-<JupyterCell 
+<JupyterCell
   source={`print('Hello world')
 for i in range(10):
   print(i)
 `}
-  jupyterServerUrl='http://localhost:8686/api/jupyter-server'
-  jupyterServerToken='60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6'
-/>
+  jupyterServerUrl="http://localhost:8686/api/jupyter-server"
+  jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+/>;
 ```
 
 ## ⚖️ License
diff --git a/packages/docusaurus-plugin/src/index.ts b/packages/docusaurus-plugin/src/index.ts
index 2ff0b9e0c..77c9dccbf 100644
--- a/packages/docusaurus-plugin/src/index.ts
+++ b/packages/docusaurus-plugin/src/index.ts
@@ -4,47 +4,45 @@
  * MIT License
  */
 
-const webpack = require("webpack");
-
 import { LoadContext, Plugin } from '@docusaurus/types';
 import { PluginOptions } from './types';
-import { Configuration, ProvidePlugin } from 'webpack';
+import { Configuration } from 'webpack';
+import webpack from 'webpack';
 
 import path from 'path';
 
 export default function (
   _context: LoadContext,
-  options: PluginOptions,
+  _options: PluginOptions,
 ): Plugin<void> {
-  const isProd = process.env.NODE_ENV === 'production';
   return {
     name: 'docusaurus-plugin-jupyter',
     getThemePath() {
       return path.resolve(__dirname, './theme');
     },
-    configureWebpack(_config: Configuration, isServer: boolean) {
+    configureWebpack(_config: Configuration, _isServer: boolean) {
       return {
         mergeStrategy: {
-          'resolve': 'prepend',
+          resolve: 'prepend',
           'module.rules': 'prepend',
-          'plugins': 'prepend',
+          plugins: 'prepend',
         },
         resolve: {
-          extensions: [ '.tsx', '.ts', 'jsx', '.js' ],
-          alias: { 
-            "stream": "stream-browserify",
+          extensions: ['.tsx', '.ts', 'jsx', '.js'],
+          alias: {
+            stream: 'stream-browserify',
+          },
+          fallback: {
+            assert: require.resolve('assert/'),
           },
-          fallback: { 
-            "assert": require.resolve("assert/"),
-          }
         },
         module: {
           rules: [
             {
               test: /\.m?js/,
               resolve: {
-                  fullySpecified: false
-              }
+                fullySpecified: false,
+              },
             },
             // Ship the JupyterLite service worker.
             {
@@ -73,14 +71,14 @@ export default function (
         },
         plugins: [
           new webpack.DefinePlugin({
-//            'process.env': '{}',
-//            'process.cwd': '() => "/"',
-//            'process.argv': 'undefined'
+            //            'process.env': '{}',
+            //            'process.cwd': '() => "/"',
+            //            'process.argv': 'undefined'
           }),
           new webpack.ProvidePlugin({
             process: 'process/browser',
           }),
-        ]
+        ],
       };
     },
   };
diff --git a/packages/docusaurus-plugin/src/theme/JupyterCell.tsx b/packages/docusaurus-plugin/src/theme/JupyterCell.tsx
index 879af18d4..2f8b0d918 100644
--- a/packages/docusaurus-plugin/src/theme/JupyterCell.tsx
+++ b/packages/docusaurus-plugin/src/theme/JupyterCell.tsx
@@ -12,18 +12,23 @@ type JupyterCellProps = {
   jupyterServerUrl: string;
   jupyterServerToken: string;
   source: string;
-}
+};
 
 const JupyterCell = (props: JupyterCellProps) => {
   return (
     <BrowserOnly
-      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}>
+      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}
+    >
       {() => {
         // Keep the import via require and keep it into the BrowserOnly code block..
         // const { JupyterReactTheme } = require('@datalayer/jupyter-react/lib/theme');
         // const { useJupyter } = require('@datalayer/jupyter-react/lib/jupyter/JupyterContext');
-        const { Jupyter } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
-        const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
+        const {
+          Jupyter,
+        } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
+        const {
+          Cell,
+        } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
         const {
           jupyterServerUrl = 'https://oss.datalayer.run/api/jupyter-server',
           jupyterServerToken = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
@@ -38,15 +43,15 @@ const JupyterCell = (props: JupyterCellProps) => {
               jupyterServerUrl={jupyterServerUrl}
               jupyterServerToken={jupyterServerToken}
               startDefaultKernel
-              skeleton={<ContentLoader/>}
+              skeleton={<ContentLoader />}
             >
               <Cell source={source} />
             </Jupyter>
           </>
-        )
+        );
       }}
     </BrowserOnly>
-  )
-}
+  );
+};
 
 export default JupyterCell;
diff --git a/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx b/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx
index 4d5341458..dbf429769 100644
--- a/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx
+++ b/packages/docusaurus-plugin/src/theme/ReactLiveScope/index.tsx
@@ -11,11 +11,16 @@ import { ContentLoader } from '@datalayer/primer-addons';
 const Cell = (props: any) => {
   return (
     <BrowserOnly
-      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}>
+      fallback={<div>Jupyter Cell fallback content for prerendering.</div>}
+    >
       {() => {
         // Keep the import via require in the BrowserOnly code block.
-        const { Jupyter } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
-        const { Cell } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
+        const {
+          Jupyter,
+        } = require('@datalayer/jupyter-react/lib/jupyter/Jupyter');
+        const {
+          Cell,
+        } = require('@datalayer/jupyter-react/lib/components/cell/Cell');
         return (
           <>
             <Jupyter
@@ -23,16 +28,16 @@ const Cell = (props: any) => {
               jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
               disableCssLoading={true}
               startDefaultKernel
-              skeleton={<ContentLoader/>}
+              skeleton={<ContentLoader />}
             >
-              <Cell {...props}/>
+              <Cell {...props} />
             </Jupyter>
           </>
         );
       }}
     </BrowserOnly>
-  )
-}
+  );
+};
 
 // Add react-live imports you need here
 const ReactLiveScope = {
diff --git a/packages/docusaurus-plugin/src/theme/StorybookView.tsx b/packages/docusaurus-plugin/src/theme/StorybookView.tsx
index 5670c9936..3e3ab1bd0 100644
--- a/packages/docusaurus-plugin/src/theme/StorybookView.tsx
+++ b/packages/docusaurus-plugin/src/theme/StorybookView.tsx
@@ -4,11 +4,11 @@
  * MIT License
  */
 
-import React from 'react'
+import React from 'react';
 
 const FRAME_STYLE = {
   border: '1px solid #aaa',
-}
+};
 
 /**
  * Embeds a Storybook example
@@ -19,9 +19,11 @@ const FRAME_STYLE = {
 export function StorybookView({ story = '', args }: any) {
   let queryArgs = '';
   if (args) {
-    const params = Object.entries(args).map(([k, v]: any) => `${encodeURIComponent(k)}:${encodeURIComponent(v)}`).join(';')
+    const params = Object.entries(args)
+      .map(([k, v]: any) => `${encodeURIComponent(k)}:${encodeURIComponent(v)}`)
+      .join(';');
     if (params) {
-      queryArgs = `&args=${params}`
+      queryArgs = `&args=${params}`;
     }
   }
   return (
@@ -31,7 +33,7 @@ export function StorybookView({ story = '', args }: any) {
       width="100%"
       height="600"
       style={FRAME_STYLE}
-      allow='clipboard-write;'
+      allow="clipboard-write;"
     />
-  )
+  );
 }
diff --git a/packages/docusaurus-plugin/tsconfig.json b/packages/docusaurus-plugin/tsconfig.json
index 11a2cac20..9ce72dd8f 100644
--- a/packages/docusaurus-plugin/tsconfig.json
+++ b/packages/docusaurus-plugin/tsconfig.json
@@ -6,10 +6,7 @@
     "outDir": "lib",
     "target": "ESNext",
     "module": "ESNext",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
+    "lib": ["ESNext", "DOM"],
     "declaration": true,
     "declarationMap": false,
     "jsx": "react",
@@ -33,9 +30,5 @@
     "importHelpers": true,
     "noEmitHelpers": true
   },
-  "exclude": [
-    "node_modules", 
-    "**/__tests__/**/*", 
-    "**/lib/**/*"
-  ]
+  "exclude": ["node_modules", "**/__tests__/**/*", "**/lib/**/*"]
 }
diff --git a/packages/ipyreactive/.eslintrc.js b/packages/ipyreactive/.eslintrc.js
index 9fb27ea5b..6c45c7955 100644
--- a/packages/ipyreactive/.eslintrc.js
+++ b/packages/ipyreactive/.eslintrc.js
@@ -3,12 +3,12 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: 'tsconfig.eslint.json',
-    sourceType: 'module'
+    sourceType: 'module',
   },
   plugins: ['@typescript-eslint'],
   rules: {
@@ -19,10 +19,10 @@ module.exports = {
     '@typescript-eslint/quotes': [
       'error',
       'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
+      { avoidEscape: true, allowTemplateLiterals: false },
     ],
     curly: ['error', 'all'],
     eqeqeq: 'error',
-    'prefer-arrow-callback': 'error'
-  }
-};
\ No newline at end of file
+    'prefer-arrow-callback': 'error',
+  },
+};
diff --git a/packages/ipyreactive/.yarnrc.yml b/packages/ipyreactive/.yarnrc.yml
index 7126b6d6a..0d0b2c083 100644
--- a/packages/ipyreactive/.yarnrc.yml
+++ b/packages/ipyreactive/.yarnrc.yml
@@ -6,16 +6,16 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 checksumBehavior: update
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/packages/ipyreactive/README.md b/packages/ipyreactive/README.md
index 58ecfe72b..ade7e0956 100644
--- a/packages/ipyreactive/README.md
+++ b/packages/ipyreactive/README.md
@@ -1,4 +1,3 @@
-
 [![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
@@ -12,7 +11,6 @@ Reactive IPyWidgets https://ipyreactive.datalayer.tech for the Datalayer literat
 [![Build Status](https://travis-ci.org/datalayer/ipyreactive.svg?branch=master)](https://travis-ci.org/datalayer/ipyreactive)
 [![codecov](https://codecov.io/gh/datalayer/ipyreactive/branch/master/graph/badge.svg)](https://codecov.io/gh/datalayer/ipyreactive)
 
-
 A Custom Jupyter Widget Library
 
 ## Installation
@@ -25,6 +23,7 @@ pip install ipyreactive
 
 If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
 the nbextension:
+
 ```bash
 jupyter nbextension enable --py [--sys-prefix|--user|--system] ipyreactive
 ```
@@ -32,12 +31,14 @@ jupyter nbextension enable --py [--sys-prefix|--user|--system] ipyreactive
 ## Development Installation
 
 Create a dev environment:
+
 ```bash
 conda create -n ipyreactive-dev -c conda-forge nodejs npm python jupyterlab
 conda activate ipyreactive-dev
 ```
 
 Install the python. This will also build the TS package.
+
 ```bash
 pip install -e ".[test, examples]"
 ```
@@ -63,7 +64,9 @@ you might also need another flag instead of `--sys-prefix`, but we won't cover t
 of those flags here.
 
 ### How to see your changes
+
 #### Typescript:
+
 If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
 terminals to watch for changes in the extension's source and automatically rebuild the widget.
 
@@ -77,4 +80,5 @@ jupyter lab
 After a change wait for the build to finish and then refresh your browser and the changes should take effect.
 
 #### Python:
+
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
diff --git a/packages/ipyreactive/codecov.yml b/packages/ipyreactive/codecov.yml
index e03ae69b2..64fba2601 100644
--- a/packages/ipyreactive/codecov.yml
+++ b/packages/ipyreactive/codecov.yml
@@ -9,4 +9,4 @@ coverage:
       default:
         target: 0%
 ignore:
-  - "ipyreactive/tests"
+  - 'ipyreactive/tests'
diff --git a/packages/ipyreactive/docs/source/_static/helper.js b/packages/ipyreactive/docs/source/_static/helper.js
index db746877c..17f4d40a0 100644
--- a/packages/ipyreactive/docs/source/_static/helper.js
+++ b/packages/ipyreactive/docs/source/_static/helper.js
@@ -6,6 +6,6 @@
 
 var cache_require = window.require;
 
-window.addEventListener('load', function() {
+window.addEventListener('load', function () {
   window.require = cache_require;
 });
diff --git a/packages/ipyreactive/ipyreactive/nbextension/extension.js b/packages/ipyreactive/ipyreactive/nbextension/extension.js
index 7cf182368..80affc5a6 100644
--- a/packages/ipyreactive/ipyreactive/nbextension/extension.js
+++ b/packages/ipyreactive/ipyreactive/nbextension/extension.js
@@ -6,18 +6,18 @@
 
 // Entry point for the notebook bundle containing custom model definitions.
 //
-define(function() {
-    "use strict";
+define(function () {
+  'use strict';
 
-    window['requirejs'].config({
-        map: {
-            '*': {
-                '@datalayer/ipyreactive': 'nbextensions/ipyreactive/index',
-            },
-        }
-    });
-    // Export the required load_ipython_extension function
-    return {
-        load_ipython_extension : function() {}
-    };
-});
\ No newline at end of file
+  window['requirejs'].config({
+    map: {
+      '*': {
+        '@datalayer/ipyreactive': 'nbextensions/ipyreactive/index',
+      },
+    },
+  });
+  // Export the required load_ipython_extension function
+  return {
+    load_ipython_extension: function () {},
+  };
+});
diff --git a/packages/ipyreactive/package_tmp.json b/packages/ipyreactive/package_tmp.json
index 861792fe8..a690f8f7a 100644
--- a/packages/ipyreactive/package_tmp.json
+++ b/packages/ipyreactive/package_tmp.json
@@ -2,17 +2,8 @@
   "name": "@datalayer/ipyreactive",
   "version": "0.1.0",
   "description": "A Custom Jupyter Widget Library",
-  "keywords": [
-    "jupyter",
-    "jupyterlab",
-    "jupyterlab-extension",
-    "widgets"
-  ],
-  "files": [
-    "lib/**/*.js",
-    "dist/*.js",
-    "css/*.css"
-  ],
+  "keywords": ["jupyter", "jupyterlab", "jupyterlab-extension", "widgets"],
+  "files": ["lib/**/*.js", "dist/*.js", "css/*.css"],
   "homepage": "https://github.com/datalayer/ipyreactive",
   "bugs": {
     "url": "https://github.com/datalayer/ipyreactive/issues"
diff --git a/packages/ipyreactive/src/__tests__/utils.ts b/packages/ipyreactive/src/__tests__/utils.ts
index 5f2fe18a5..a8dd8b268 100644
--- a/packages/ipyreactive/src/__tests__/utils.ts
+++ b/packages/ipyreactive/src/__tests__/utils.ts
@@ -59,7 +59,7 @@ export class DummyManager extends widgets.ManagerBase<HTMLElement> {
   display_view(
     msg: services.KernelMessage.IMessage,
     view: widgets.DOMWidgetView,
-    options: any
+    options: any,
   ) {
     // TODO: make this a spy
     // TODO: return an html element
@@ -73,7 +73,7 @@ export class DummyManager extends widgets.ManagerBase<HTMLElement> {
   protected loadClass(
     className: string,
     moduleName: string,
-    moduleVersion: string
+    moduleVersion: string,
   ): Promise<any> {
     if (moduleName === '@jupyter-widgets/base') {
       if ((widgets as any)[className]) {
@@ -111,7 +111,7 @@ export interface Constructor<T> {
 
 export function createTestModel<T extends widgets.WidgetModel>(
   constructor: Constructor<T>,
-  attributes?: any
+  attributes?: any,
 ): T {
   const id = widgets.uuid();
   const widget_manager = new DummyManager();
diff --git a/packages/ipyreactive/src/plugin.ts b/packages/ipyreactive/src/plugin.ts
index 17f5c969a..3c72d8631 100644
--- a/packages/ipyreactive/src/plugin.ts
+++ b/packages/ipyreactive/src/plugin.ts
@@ -38,7 +38,7 @@ export default examplePlugin;
  */
 function activateWidgetExtension(
   app: Application<Widget>,
-  registry: IJupyterWidgetRegistry
+  registry: IJupyterWidgetRegistry,
 ): void {
   registry.registerWidget({
     name: MODULE_NAME,
diff --git a/packages/ipyreactive/tsconfig.eslint.json b/packages/ipyreactive/tsconfig.eslint.json
index 737e3e680..0a76836c5 100644
--- a/packages/ipyreactive/tsconfig.eslint.json
+++ b/packages/ipyreactive/tsconfig.eslint.json
@@ -2,4 +2,4 @@
   "extends": "./tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": []
-}
\ No newline at end of file
+}
diff --git a/packages/ipyreactive/tsconfig.json b/packages/ipyreactive/tsconfig.json
index 025054836..e77f51b83 100644
--- a/packages/ipyreactive/tsconfig.json
+++ b/packages/ipyreactive/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
-    "esModuleInterop":true,
+    "esModuleInterop": true,
     "lib": ["es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
@@ -18,9 +18,6 @@
     "target": "ES2022",
     "types": ["jest"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/__tests__"]
 }
diff --git a/packages/ipyreactive/webpack.config.js b/packages/ipyreactive/webpack.config.js
index 42c88a82a..f828953e7 100644
--- a/packages/ipyreactive/webpack.config.js
+++ b/packages/ipyreactive/webpack.config.js
@@ -11,7 +11,7 @@ const version = require('./package.json').version;
 const rules = [
   { test: /\.ts$/, loader: 'ts-loader' },
   { test: /\.js$/, loader: 'source-map-loader' },
-  { test: /\.css$/, use: ['style-loader', 'css-loader']}
+  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
 ];
 
 // Packages that shouldn't be bundled but loaded at runtime
@@ -19,7 +19,7 @@ const externals = ['@jupyter-widgets/base'];
 
 const resolve = {
   // Add '.ts' and '.tsx' as resolvable extensions.
-  extensions: [".webpack.js", ".web.js", ".ts", ".js"]
+  extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
 };
 
 module.exports = [
@@ -38,7 +38,7 @@ module.exports = [
       publicPath: '',
     },
     module: {
-      rules: rules
+      rules: rules,
     },
     devtool: 'source-map',
     externals,
@@ -58,21 +58,21 @@ module.exports = [
   {
     entry: './src/index.ts',
     output: {
-        filename: 'index.js',
-        path: path.resolve(__dirname, 'dist'),
-        libraryTarget: 'amd',
-        library: "@datalayer/ipyreactive",
-        publicPath: 'https://unpkg.com/@datalayer/ipyreactive@' + version + '/dist/'
+      filename: 'index.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'amd',
+      library: '@datalayer/ipyreactive',
+      publicPath:
+        'https://unpkg.com/@datalayer/ipyreactive@' + version + '/dist/',
     },
     devtool: 'source-map',
     module: {
-        rules: rules
+      rules: rules,
     },
     externals,
     resolve,
   },
 
-
   /**
    * Documentation widget bundle
    *
@@ -83,15 +83,14 @@ module.exports = [
     output: {
       filename: 'embed-bundle.js',
       path: path.resolve(__dirname, 'docs', 'source', '_static'),
-      library: "@datalayer/ipyreactive",
-      libraryTarget: 'amd'
+      library: '@datalayer/ipyreactive',
+      libraryTarget: 'amd',
     },
     module: {
-      rules: rules
+      rules: rules,
     },
     devtool: 'source-map',
     externals,
     resolve,
-  }
-
+  },
 ];
diff --git a/packages/ipyscript/.eslintrc.js b/packages/ipyscript/.eslintrc.js
index 9fb27ea5b..6c45c7955 100644
--- a/packages/ipyscript/.eslintrc.js
+++ b/packages/ipyscript/.eslintrc.js
@@ -3,12 +3,12 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: 'tsconfig.eslint.json',
-    sourceType: 'module'
+    sourceType: 'module',
   },
   plugins: ['@typescript-eslint'],
   rules: {
@@ -19,10 +19,10 @@ module.exports = {
     '@typescript-eslint/quotes': [
       'error',
       'single',
-      { avoidEscape: true, allowTemplateLiterals: false }
+      { avoidEscape: true, allowTemplateLiterals: false },
     ],
     curly: ['error', 'all'],
     eqeqeq: 'error',
-    'prefer-arrow-callback': 'error'
-  }
-};
\ No newline at end of file
+    'prefer-arrow-callback': 'error',
+  },
+};
diff --git a/packages/ipyscript/.yarnrc.yml b/packages/ipyscript/.yarnrc.yml
index 7126b6d6a..0d0b2c083 100644
--- a/packages/ipyscript/.yarnrc.yml
+++ b/packages/ipyscript/.yarnrc.yml
@@ -6,16 +6,16 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 checksumBehavior: update
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/packages/ipyscript/README.md b/packages/ipyscript/README.md
index 01ce97876..8652f27db 100644
--- a/packages/ipyscript/README.md
+++ b/packages/ipyscript/README.md
@@ -28,6 +28,7 @@ pip install ipyscript
 
 If you are using Jupyter Notebook 5.2 or earlier, you may also need to enable
 the nbextension:
+
 ```bash
 jupyter nbextension enable --py [--sys-prefix|--user|--system] ipyscript
 ```
@@ -35,12 +36,14 @@ jupyter nbextension enable --py [--sys-prefix|--user|--system] ipyscript
 ## Development Installation
 
 Create a dev environment:
+
 ```bash
 conda create -n ipyscript-dev -c conda-forge nodejs npm python jupyterlab
 conda activate ipyscript-dev
 ```
 
 Install the python. This will also build the TS package.
+
 ```bash
 pip install -e ".[test, examples]"
 ```
@@ -66,7 +69,9 @@ you might also need another flag instead of `--sys-prefix`, but we won't cover t
 of those flags here.
 
 ### How to see your changes
+
 #### Typescript:
+
 If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different
 terminals to watch for changes in the extension's source and automatically rebuild the widget.
 
@@ -80,4 +85,5 @@ jupyter lab
 After a change wait for the build to finish and then refresh your browser and the changes should take effect.
 
 #### Python:
+
 If you make a change to the python code then you will need to restart the notebook kernel to have it take effect.
diff --git a/packages/ipyscript/codecov.yml b/packages/ipyscript/codecov.yml
index 7984badfa..3c070ed14 100644
--- a/packages/ipyscript/codecov.yml
+++ b/packages/ipyscript/codecov.yml
@@ -9,4 +9,4 @@ coverage:
       default:
         target: 0%
 ignore:
-  - "ipyscript/tests"
+  - 'ipyscript/tests'
diff --git a/packages/ipyscript/docs/source/_static/helper.js b/packages/ipyscript/docs/source/_static/helper.js
index db746877c..17f4d40a0 100644
--- a/packages/ipyscript/docs/source/_static/helper.js
+++ b/packages/ipyscript/docs/source/_static/helper.js
@@ -6,6 +6,6 @@
 
 var cache_require = window.require;
 
-window.addEventListener('load', function() {
+window.addEventListener('load', function () {
   window.require = cache_require;
 });
diff --git a/packages/ipyscript/ipyscript/nbextension/extension.js b/packages/ipyscript/ipyscript/nbextension/extension.js
index 134bbcc05..1aa8d0aa0 100644
--- a/packages/ipyscript/ipyscript/nbextension/extension.js
+++ b/packages/ipyscript/ipyscript/nbextension/extension.js
@@ -6,18 +6,18 @@
 
 // Entry point for the notebook bundle containing custom model definitions.
 //
-define(function() {
-    "use strict";
+define(function () {
+  'use strict';
 
-    window['requirejs'].config({
-        map: {
-            '*': {
-                '@datalayer/ipyscript': 'nbextensions/ipyscript/index',
-            },
-        }
-    });
-    // Export the required load_ipython_extension function
-    return {
-        load_ipython_extension : function() {}
-    };
-});
\ No newline at end of file
+  window['requirejs'].config({
+    map: {
+      '*': {
+        '@datalayer/ipyscript': 'nbextensions/ipyscript/index',
+      },
+    },
+  });
+  // Export the required load_ipython_extension function
+  return {
+    load_ipython_extension: function () {},
+  };
+});
diff --git a/packages/ipyscript/package_tmp.json b/packages/ipyscript/package_tmp.json
index 1afffc444..530ffbf6e 100644
--- a/packages/ipyscript/package_tmp.json
+++ b/packages/ipyscript/package_tmp.json
@@ -2,17 +2,8 @@
   "name": "@datalayer/ipyscript",
   "version": "0.1.0",
   "description": "A Custom Jupyter Widget Library",
-  "keywords": [
-    "jupyter",
-    "jupyterlab",
-    "jupyterlab-extension",
-    "widgets"
-  ],
-  "files": [
-    "lib/**/*.js",
-    "dist/*.js",
-    "css/*.css"
-  ],
+  "keywords": ["jupyter", "jupyterlab", "jupyterlab-extension", "widgets"],
+  "files": ["lib/**/*.js", "dist/*.js", "css/*.css"],
   "homepage": "https://github.com/datalayer/ipyscript",
   "bugs": {
     "url": "https://github.com/datalayer/ipyscript/issues"
diff --git a/packages/ipyscript/src/__tests__/utils.ts b/packages/ipyscript/src/__tests__/utils.ts
index 5f2fe18a5..a8dd8b268 100644
--- a/packages/ipyscript/src/__tests__/utils.ts
+++ b/packages/ipyscript/src/__tests__/utils.ts
@@ -59,7 +59,7 @@ export class DummyManager extends widgets.ManagerBase<HTMLElement> {
   display_view(
     msg: services.KernelMessage.IMessage,
     view: widgets.DOMWidgetView,
-    options: any
+    options: any,
   ) {
     // TODO: make this a spy
     // TODO: return an html element
@@ -73,7 +73,7 @@ export class DummyManager extends widgets.ManagerBase<HTMLElement> {
   protected loadClass(
     className: string,
     moduleName: string,
-    moduleVersion: string
+    moduleVersion: string,
   ): Promise<any> {
     if (moduleName === '@jupyter-widgets/base') {
       if ((widgets as any)[className]) {
@@ -111,7 +111,7 @@ export interface Constructor<T> {
 
 export function createTestModel<T extends widgets.WidgetModel>(
   constructor: Constructor<T>,
-  attributes?: any
+  attributes?: any,
 ): T {
   const id = widgets.uuid();
   const widget_manager = new DummyManager();
diff --git a/packages/ipyscript/src/plugin.ts b/packages/ipyscript/src/plugin.ts
index 40818dfea..6ee18fe61 100644
--- a/packages/ipyscript/src/plugin.ts
+++ b/packages/ipyscript/src/plugin.ts
@@ -38,7 +38,7 @@ export default examplePlugin;
  */
 function activateWidgetExtension(
   app: Application<Widget>,
-  registry: IJupyterWidgetRegistry
+  registry: IJupyterWidgetRegistry,
 ): void {
   registry.registerWidget({
     name: MODULE_NAME,
diff --git a/packages/ipyscript/tsconfig.eslint.json b/packages/ipyscript/tsconfig.eslint.json
index 737e3e680..0a76836c5 100644
--- a/packages/ipyscript/tsconfig.eslint.json
+++ b/packages/ipyscript/tsconfig.eslint.json
@@ -2,4 +2,4 @@
   "extends": "./tsconfig.json",
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": []
-}
\ No newline at end of file
+}
diff --git a/packages/ipyscript/tsconfig.json b/packages/ipyscript/tsconfig.json
index 025054836..e77f51b83 100644
--- a/packages/ipyscript/tsconfig.json
+++ b/packages/ipyscript/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
-    "esModuleInterop":true,
+    "esModuleInterop": true,
     "lib": ["es2015", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
@@ -18,9 +18,6 @@
     "target": "ES2022",
     "types": ["jest"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["src/**/__tests__"]
 }
diff --git a/packages/ipyscript/webpack.config.js b/packages/ipyscript/webpack.config.js
index e9ecc3c0b..3add4f273 100644
--- a/packages/ipyscript/webpack.config.js
+++ b/packages/ipyscript/webpack.config.js
@@ -11,7 +11,7 @@ const version = require('./package.json').version;
 const rules = [
   { test: /\.ts$/, loader: 'ts-loader' },
   { test: /\.js$/, loader: 'source-map-loader' },
-  { test: /\.css$/, use: ['style-loader', 'css-loader']}
+  { test: /\.css$/, use: ['style-loader', 'css-loader'] },
 ];
 
 // Packages that shouldn't be bundled but loaded at runtime
@@ -19,7 +19,7 @@ const externals = ['@jupyter-widgets/base'];
 
 const resolve = {
   // Add '.ts' and '.tsx' as resolvable extensions.
-  extensions: [".webpack.js", ".web.js", ".ts", ".js"]
+  extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
 };
 
 module.exports = [
@@ -38,7 +38,7 @@ module.exports = [
       publicPath: '',
     },
     module: {
-      rules: rules
+      rules: rules,
     },
     devtool: 'source-map',
     externals,
@@ -58,21 +58,21 @@ module.exports = [
   {
     entry: './src/index.ts',
     output: {
-        filename: 'index.js',
-        path: path.resolve(__dirname, 'dist'),
-        libraryTarget: 'amd',
-        library: "@datalayer/ipyscript",
-        publicPath: 'https://unpkg.com/@datalayer/ipyscript@' + version + '/dist/'
+      filename: 'index.js',
+      path: path.resolve(__dirname, 'dist'),
+      libraryTarget: 'amd',
+      library: '@datalayer/ipyscript',
+      publicPath:
+        'https://unpkg.com/@datalayer/ipyscript@' + version + '/dist/',
     },
     devtool: 'source-map',
     module: {
-        rules: rules
+      rules: rules,
     },
     externals,
     resolve,
   },
 
-
   /**
    * Documentation widget bundle
    *
@@ -83,15 +83,14 @@ module.exports = [
     output: {
       filename: 'embed-bundle.js',
       path: path.resolve(__dirname, 'docs', 'source', '_static'),
-      library: "@datalayer/ipyscript",
-      libraryTarget: 'amd'
+      library: '@datalayer/ipyscript',
+      libraryTarget: 'amd',
     },
     module: {
-      rules: rules
+      rules: rules,
     },
     devtool: 'source-map',
     externals,
     resolve,
-  }
-
+  },
 ];
diff --git a/packages/lexical/.yarnrc.yml b/packages/lexical/.yarnrc.yml
index 7126b6d6a..0d0b2c083 100644
--- a/packages/lexical/.yarnrc.yml
+++ b/packages/lexical/.yarnrc.yml
@@ -6,16 +6,16 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 checksumBehavior: update
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/packages/lexical/gulpfile.js b/packages/lexical/gulpfile.js
index d958b0c7c..713c512c3 100755
--- a/packages/lexical/gulpfile.js
+++ b/packages/lexical/gulpfile.js
@@ -10,12 +10,7 @@ const watch = require('gulp-watch');
 const filter = require('gulp-filter');
 
 gulp.task('resources-to-lib-watch', function () {
-  const f = filter([
-    '**',
-    '!src/**/*.js',
-    '!src/**/*.ts',
-    '!src/**/*.tsx',
-  ]);
+  const f = filter(['**', '!src/**/*.js', '!src/**/*.ts', '!src/**/*.tsx']);
   return (
     watch('src/**/*', { ignoreInitial: false })
       //      .pipe(gulp.dest('build'));
@@ -26,12 +21,7 @@ gulp.task('resources-to-lib-watch', function () {
 });
 
 gulp.task('resources-to-lib', async function () {
-  const f = filter([
-    '**',
-    '!src/**/*.js',
-    '!src/**/*.ts',
-    '!src/**/*.tsx',
-  ]);
+  const f = filter(['**', '!src/**/*.js', '!src/**/*.ts', '!src/**/*.tsx']);
   gulp.src('./src/**/*.*').pipe(f).pipe(gulp.dest('./lib/'));
   return;
 });
@@ -54,7 +44,7 @@ gulp.task('licenses', async function () {
 
 =========================================================
 
-*/`)
+*/`),
     )
     .pipe(gulp.dest('./', { overwrite: true }));
 
@@ -75,7 +65,7 @@ gulp.task('licenses', async function () {
 
 =========================================================
 
--->`)
+-->`),
     )
     .pipe(gulp.dest('./', { overwrite: true }));
 
@@ -94,7 +84,7 @@ gulp.task('licenses', async function () {
 
 * Coded by Datalayer
       
-*/`)
+*/`),
     )
     .pipe(gulp.dest('./', { overwrite: true }));
   return;
diff --git a/packages/lexical/jest.config.js b/packages/lexical/jest.config.js
index 7e923e6e2..63850e8a8 100644
--- a/packages/lexical/jest.config.js
+++ b/packages/lexical/jest.config.js
@@ -21,7 +21,7 @@ const esModules = [
   'vscode\\-ws\\-jsonrpc',
   'y\\-protocols',
   'y\\-websocket',
-  'yjs'
+  'yjs',
 ].join('|');
 
 const {
@@ -31,11 +31,11 @@ const {
   setupFilesAfterEnv,
   setupFiles,
   testPathIgnorePatterns,
-  transform
+  transform,
 } = jlabConfig;
 
 module.exports = {
-/*
+  /*
   ...jlabConfig,
   moduleFileExtensions,
   moduleNameMapper,
@@ -46,12 +46,12 @@ module.exports = {
   transform,
   automock: false,
 */
-//  collectCoverageFrom: [
-//    'src/**/*.{ts,tsx}',
-//    '!src/**/*.d.ts',
-//    '!src/**/.ipynb_checkpoints/*'
-//  ],
-/*
+  //  collectCoverageFrom: [
+  //    'src/**/*.{ts,tsx}',
+  //    '!src/**/*.d.ts',
+  //    '!src/**/.ipynb_checkpoints/*'
+  //  ],
+  /*
   coverageDirectory: 'coverage',
   coverageReporters: ['lcov', 'text'],
   globals: {
@@ -62,5 +62,5 @@ module.exports = {
 */
   testRegex: '(/src/__tests__/.*|(\\./src)(test|spec))\\.[jt]sx?$',
   transformIgnorePatterns: [`/node_modules/(?!${esModules}).+`],
-  preset: "jest-puppeteer",
-}
+  preset: 'jest-puppeteer',
+};
diff --git a/packages/lexical/jupyter_lexical/templates/index.html b/packages/lexical/jupyter_lexical/templates/index.html
index 904d6cc27..81cf6eed6 100644
--- a/packages/lexical/jupyter_lexical/templates/index.html
+++ b/packages/lexical/jupyter_lexical/templates/index.html
@@ -4,12 +4,16 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="UTF-8"/>
+    <meta charset="UTF-8" />
     <title>Ξ Jupyter Lexical</title>
-    <link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC" type="image/x-icon" />
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
     <script id="jupyter-config-data" type="application/json">
       {
         "baseUrl": "http://localhost:8686{{ base_url }}",
@@ -24,10 +28,13 @@
     <script id="datalayer-config-data" type="application/json">
       {
         "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
-          "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
       }
     </script>
-    <script defer src="{{ base_url }}static/jupyter_lexical/main.jupyter-lexical.js"></script>
+    <script
+      defer
+      src="{{ base_url }}static/jupyter_lexical/main.jupyter-lexical.js"
+    ></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/lexical/public/index.html b/packages/lexical/public/index.html
index 3b3bdc773..ad0be0e6b 100644
--- a/packages/lexical/public/index.html
+++ b/packages/lexical/public/index.html
@@ -4,17 +4,21 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Jupyter UI for Lexical Example</title>
     <script id="datalayer-config-data" type="application/json">
       {
         "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
-          "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
+        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
       }
     </script>
-    <link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC" type="image/x-icon" />
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
     <script type="module" src="../src/index.tsx"></script>
   </head>
   <body>
diff --git a/packages/lexical/src/components/Button.tsx b/packages/lexical/src/components/Button.tsx
index a21a95f2c..4bf165539 100644
--- a/packages/lexical/src/components/Button.tsx
+++ b/packages/lexical/src/components/Button.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 import joinClasses from '../utils/join';
 
 export const Button = ({
@@ -36,10 +36,11 @@ export const Button = ({
       onClick={onClick}
       title={title}
       aria-label={title}
-      {...(dataTestId && {'data-test-id': dataTestId})}>
+      {...(dataTestId && { 'data-test-id': dataTestId })}
+    >
       {children}
     </button>
   );
-}
+};
 
 export default Button;
diff --git a/packages/lexical/src/components/Commenting.tsx b/packages/lexical/src/components/Commenting.tsx
index c7d5e9bbb..43136892d 100644
--- a/packages/lexical/src/components/Commenting.tsx
+++ b/packages/lexical/src/components/Commenting.tsx
@@ -4,12 +4,18 @@
  * MIT License
  */
 
-import {useEffect, useState} from 'react';
-import type {LexicalEditor} from 'lexical';
-import {TOGGLE_CONNECT_COMMAND} from '@lexical/yjs';
-import {COMMAND_PRIORITY_LOW} from 'lexical';
-import {WebsocketProvider} from 'y-websocket';
-import { Array as YArray, Map as YMap, Transaction, YArrayEvent, YEvent } from 'yjs';
+import { useEffect, useState } from 'react';
+import type { LexicalEditor } from 'lexical';
+import { TOGGLE_CONNECT_COMMAND } from '@lexical/yjs';
+import { COMMAND_PRIORITY_LOW } from 'lexical';
+import { WebsocketProvider } from 'y-websocket';
+import {
+  Array as YArray,
+  Map as YMap,
+  Transaction,
+  YArrayEvent,
+  YEvent,
+} from 'yjs';
 
 export type Comment = {
   author: string;
@@ -161,7 +167,7 @@ export class CommentStore {
   deleteCommentOrThread(
     commentOrThread: Comment | Thread,
     thread?: Thread,
-  ): {markedComment: Comment; index: number} | null {
+  ): { markedComment: Comment; index: number } | null {
     const nextComments = Array.from(this._comments);
     // The YJS types explicitly use `any` as well.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -220,7 +226,6 @@ export class CommentStore {
   _withRemoteTransaction(fn: () => void): void {
     const provider = this._collabProvider;
     if (provider !== null) {
-      // @ts-ignore doc does exist
       const doc = provider.doc;
       doc.transact(fn, this);
     }
@@ -240,7 +245,7 @@ export class CommentStore {
     const provider = this._collabProvider;
     if (provider !== null) {
       const doc = provider.doc;
-//      return doc.get('comments', YArray) as YArray<any>;
+      //      return doc.get('comments', YArray) as YArray<any>;
       return doc.get('comments') as YArray<any>;
     }
     return null;
@@ -287,7 +292,7 @@ export class CommentStore {
 
     const unsubscribe = this._editor.registerCommand(
       TOGGLE_CONNECT_COMMAND,
-      (payload) => {
+      payload => {
         if (connect !== undefined && disconnect !== undefined) {
           const shouldConnect = payload;
 
@@ -330,7 +335,7 @@ export class CommentStore {
                 target === sharedCommentsArray
                   ? undefined
                   : parent instanceof YMap &&
-                    (this._comments.find((t) => t.id === parent.get('id')) as
+                    (this._comments.find(t => t.id === parent.get('id')) as
                       | Thread
                       | undefined);
 
diff --git a/packages/lexical/src/components/ContentEditable.tsx b/packages/lexical/src/components/ContentEditable.tsx
index 0420569a7..b208bdf8b 100644
--- a/packages/lexical/src/components/ContentEditable.tsx
+++ b/packages/lexical/src/components/ContentEditable.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 
 export const LexicalContentEditable = ({
   className,
@@ -12,6 +12,6 @@ export const LexicalContentEditable = ({
   className?: string;
 }): JSX.Element => {
   return <ContentEditable className={className || 'ContentEditable__root'} />;
-}
+};
 
 export default LexicalContentEditable;
diff --git a/packages/lexical/src/components/CopyButton.tsx b/packages/lexical/src/components/CopyButton.tsx
index d4d1b3959..b1878036d 100644
--- a/packages/lexical/src/components/CopyButton.tsx
+++ b/packages/lexical/src/components/CopyButton.tsx
@@ -4,22 +4,22 @@
  * MIT License
  */
 
-import {useState} from 'react';
+import { useState } from 'react';
 import {
   $getNearestNodeFromDOMNode,
   $getSelection,
   $setSelection,
   LexicalEditor,
 } from 'lexical';
-import {$isCodeNode} from '@lexical/code';
-import {useDebounce} from '../hooks';
+import { $isCodeNode } from '@lexical/code';
+import { useDebounce } from '../hooks';
 
 interface Props {
   editor: LexicalEditor;
   getCodeDOMNode: () => HTMLElement | null;
 }
 
-export function CopyButton({editor, getCodeDOMNode}: Props) {
+export function CopyButton({ editor, getCodeDOMNode }: Props) {
   const [isCopyCompleted, setCopyCompleted] = useState<boolean>(false);
 
   const removeSuccessIcon = useDebounce(() => {
diff --git a/packages/lexical/src/components/Dialog.tsx b/packages/lexical/src/components/Dialog.tsx
index 120b46804..6c41ff77a 100644
--- a/packages/lexical/src/components/Dialog.tsx
+++ b/packages/lexical/src/components/Dialog.tsx
@@ -4,14 +4,14 @@
  * MIT License
  */
 
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 
 type Props = Readonly<{
   'data-test-id'?: string;
   children: ReactNode;
 }>;
 
-export function DialogButtonsList({children}: Props): JSX.Element {
+export function DialogButtonsList({ children }: Props): JSX.Element {
   return <div className="DialogButtonsList">{children}</div>;
 }
 
diff --git a/packages/lexical/src/components/DropDown.tsx b/packages/lexical/src/components/DropDown.tsx
index 7a11ba32f..173e374de 100644
--- a/packages/lexical/src/components/DropDown.tsx
+++ b/packages/lexical/src/components/DropDown.tsx
@@ -13,7 +13,7 @@ import {
   useState,
 } from 'react';
 import * as React from 'react';
-import {createPortal} from 'react-dom';
+import { createPortal } from 'react-dom';
 
 type DropDownContextType = {
   registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
@@ -40,7 +40,7 @@ export function DropDownItem({
     throw new Error('DropDownItem must be used within a DropDown');
   }
 
-  const {registerItem} = dropDownContext;
+  const { registerItem } = dropDownContext;
 
   useEffect(() => {
     if (ref && ref.current) {
@@ -69,7 +69,7 @@ function DropDownItems({
     useState<React.RefObject<HTMLButtonElement>>();
   const registerItem = useCallback(
     (itemRef: React.RefObject<HTMLButtonElement>) => {
-      setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
+      setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));
     },
     [setItems],
   );
@@ -83,13 +83,13 @@ function DropDownItems({
     if (key === 'Escape' || key === 'Tab') {
       onClose();
     } else if (key === 'ArrowUp') {
-      setHighlightedItem((prev) => {
+      setHighlightedItem(prev => {
         if (!prev) return items[0];
         const index = items.indexOf(prev) - 1;
         return items[index === -1 ? items.length - 1 : index];
       });
     } else if (key === 'ArrowDown') {
-      setHighlightedItem((prev) => {
+      setHighlightedItem(prev => {
         if (!prev) return items[0];
         return items[items.indexOf(prev) + 1];
       });
@@ -149,7 +149,7 @@ export const DropDown = ({
     const dropDown = dropDownRef.current;
 
     if (showDropDown && button !== null && dropDown !== null) {
-      const {top, left} = button.getBoundingClientRect();
+      const { top, left } = button.getBoundingClientRect();
       dropDown.style.top = `${top + 40}px`;
       dropDown.style.left = `${Math.min(
         left,
@@ -189,7 +189,8 @@ export const DropDown = ({
         aria-label={buttonAriaLabel || buttonLabel}
         className={buttonClassName}
         onClick={() => setShowDropDown(!showDropDown)}
-        ref={buttonRef}>
+        ref={buttonRef}
+      >
         {buttonIconClassName && <span className={buttonIconClassName} />}
         {buttonLabel && (
           <span className="text dropdown-button-text">{buttonLabel}</span>
@@ -206,6 +207,6 @@ export const DropDown = ({
         )}
     </>
   );
-}
+};
 
 export default DropDown;
diff --git a/packages/lexical/src/components/EquationEditor.tsx b/packages/lexical/src/components/EquationEditor.tsx
index 9f01acab4..73685ef95 100644
--- a/packages/lexical/src/components/EquationEditor.tsx
+++ b/packages/lexical/src/components/EquationEditor.tsx
@@ -4,13 +4,12 @@
  * MIT License
  */
 
-
-import {ChangeEvent, RefObject} from 'react';
+import { ChangeEvent, RefObject } from 'react';
 
 type BaseEquationEditorProps = {
   equation: string;
   inline: boolean;
-  inputRef: {current: null | HTMLInputElement | HTMLTextAreaElement};
+  inputRef: { current: null | HTMLInputElement | HTMLTextAreaElement };
   setEquation: (equation: string) => void;
 };
 
@@ -45,7 +44,7 @@ export default function EquationEditor({
 
 type EquationEditorImplProps = {
   equation: string;
-  inputRef: {current: null | HTMLInputElement};
+  inputRef: { current: null | HTMLInputElement };
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
@@ -71,7 +70,7 @@ function InlineEquationEditor({
 
 type BlockEquationEditorImplProps = {
   equation: string;
-  inputRef: {current: null | HTMLTextAreaElement};
+  inputRef: { current: null | HTMLTextAreaElement };
   onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
 };
 
diff --git a/packages/lexical/src/components/FileInput.tsx b/packages/lexical/src/components/FileInput.tsx
index 8e55b583e..c71c9b36d 100644
--- a/packages/lexical/src/components/FileInput.tsx
+++ b/packages/lexical/src/components/FileInput.tsx
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-
 type Props = Readonly<{
   'data-test-id'?: string;
   accept?: string;
@@ -25,11 +24,11 @@ export const FileInput = ({
         type="file"
         accept={accept}
         className="Input__input"
-        onChange={(e) => onChange(e.target.files)}
+        onChange={e => onChange(e.target.files)}
         data-test-id={dataTestId}
       />
     </div>
   );
-}
+};
 
 export default FileInput;
diff --git a/packages/lexical/src/components/ImageResizer.tsx b/packages/lexical/src/components/ImageResizer.tsx
index 56967ad5e..9ae18fc22 100644
--- a/packages/lexical/src/components/ImageResizer.tsx
+++ b/packages/lexical/src/components/ImageResizer.tsx
@@ -5,8 +5,8 @@
  */
 
 import * as React from 'react';
-import {useRef} from 'react';
-import type {LexicalEditor} from 'lexical';
+import { useRef } from 'react';
+import type { LexicalEditor } from 'lexical';
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
@@ -30,8 +30,8 @@ export const ImageResizer = ({
   setShowCaption,
 }: {
   editor: LexicalEditor;
-  buttonRef: {current: null | HTMLButtonElement};
-  imageRef: {current: null | HTMLElement};
+  buttonRef: { current: null | HTMLButtonElement };
+  imageRef: { current: null | HTMLElement };
   maxWidth?: number;
   onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
   onResizeStart: () => void;
@@ -69,8 +69,8 @@ export const ImageResizer = ({
   const maxWidthContainer = maxWidth
     ? maxWidth
     : editorRootElement !== null
-    ? editorRootElement.getBoundingClientRect().width - 20
-    : 100;
+      ? editorRootElement.getBoundingClientRect().width - 20
+      : 100;
   const maxHeightContainer =
     editorRootElement !== null
       ? editorRootElement.getBoundingClientRect().height - 20
@@ -137,7 +137,7 @@ export const ImageResizer = ({
     const controlWrapper = controlWrapperRef.current;
 
     if (image !== null && controlWrapper !== null) {
-      const {width, height} = image.getBoundingClientRect();
+      const { width, height } = image.getBoundingClientRect();
       const positioning = positioningRef.current;
       positioning.startWidth = width;
       positioning.startHeight = height;
@@ -246,60 +246,61 @@ export const ImageResizer = ({
           ref={buttonRef}
           onClick={() => {
             setShowCaption(!showCaption);
-          }}>
+          }}
+        >
           Add Caption
         </button>
       )}
       <div
         className="image-resizer image-resizer-n"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.north);
         }}
       />
       <div
         className="image-resizer image-resizer-ne"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.north | Direction.east);
         }}
       />
       <div
         className="image-resizer image-resizer-e"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.east);
         }}
       />
       <div
         className="image-resizer image-resizer-se"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.south | Direction.east);
         }}
       />
       <div
         className="image-resizer image-resizer-s"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.south);
         }}
       />
       <div
         className="image-resizer image-resizer-sw"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.south | Direction.west);
         }}
       />
       <div
         className="image-resizer image-resizer-w"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.west);
         }}
       />
       <div
         className="image-resizer image-resizer-nw"
-        onPointerDown={(event) => {
+        onPointerDown={event => {
           handlePointerDown(event, Direction.north | Direction.west);
         }}
       />
     </div>
   );
-}
+};
 
 export default ImageResizer;
diff --git a/packages/lexical/src/components/InsertEquationDialog.tsx b/packages/lexical/src/components/InsertEquationDialog.tsx
index b087d1264..ae42f90ed 100644
--- a/packages/lexical/src/components/InsertEquationDialog.tsx
+++ b/packages/lexical/src/components/InsertEquationDialog.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import { useCallback } from "react";
-import { LexicalEditor } from "lexical";
+import { useCallback } from 'react';
+import { LexicalEditor } from 'lexical';
 import { KatexEquationAlterer } from './../components/KatexEquationAlterer';
 import { INSERT_EQUATION_COMMAND } from './../plugins/EquationsPlugin';
 
@@ -18,7 +18,10 @@ export function InsertEquationDialog({
 }): JSX.Element {
   const onEquationConfirm = useCallback(
     (equation: string, inline: boolean) => {
-      activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {equation, inline});
+      activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {
+        equation,
+        inline,
+      });
       onClose();
     },
     [activeEditor, onClose],
diff --git a/packages/lexical/src/components/InsertImageDialog.tsx b/packages/lexical/src/components/InsertImageDialog.tsx
index ccb152fd5..7bdb20de7 100644
--- a/packages/lexical/src/components/InsertImageDialog.tsx
+++ b/packages/lexical/src/components/InsertImageDialog.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import { useState } from "react";
-import { LexicalEditor } from "lexical";
+import { useState } from 'react';
+import { LexicalEditor } from 'lexical';
 import { Button } from './../components/Button';
 import { TextInput } from './../components/TextInput';
 import { FileInput } from './../components/FileInput';
@@ -41,7 +41,8 @@ export function InsertImageUriDialogBody({
         <Button
           data-test-id="image-modal-confirm-btn"
           disabled={isDisabled}
-          onClick={() => onClick({altText, src})}>
+          onClick={() => onClick({ altText, src })}
+        >
           Confirm
         </Button>
       </div>
@@ -91,7 +92,8 @@ export function InsertImageUploadedDialogBody({
         <Button
           data-test-id="image-modal-file-upload-btn"
           disabled={isDisabled}
-          onClick={() => onClick({altText, src})}>
+          onClick={() => onClick({ altText, src })}
+        >
           Confirm
         </Button>
       </div>
@@ -122,17 +124,20 @@ export function InsertImageDialog({
                 altText: 'Yellow flower in tilt shift lens',
                 src: yellowFlowerImage,
               })
-            }>
+            }
+          >
             Sample
           </Button>
           <Button
             data-test-id="image-modal-option-url"
-            onClick={() => setMode('url')}>
+            onClick={() => setMode('url')}
+          >
             URL
           </Button>
           <Button
             data-test-id="image-modal-option-file"
-            onClick={() => setMode('file')}>
+            onClick={() => setMode('file')}
+          >
             File
           </Button>
         </div>
diff --git a/packages/lexical/src/components/JupyterCellComponent.tsx b/packages/lexical/src/components/JupyterCellComponent.tsx
index 4ae838754..bb116c61b 100644
--- a/packages/lexical/src/components/JupyterCellComponent.tsx
+++ b/packages/lexical/src/components/JupyterCellComponent.tsx
@@ -12,18 +12,18 @@ type IJupyterCellComponentProps = {
   outputs: IOutput[];
   loading: string;
   autoStart: boolean;
-}
+};
 
 export const JupyterCellComponent = (props: IJupyterCellComponentProps) => {
   const { autoStart, code, outputs } = props;
   return (
-      <Cell
-  //      startDefaultKernel
-        source={code}      
-        autoStart={autoStart}
-        outputs={outputs}
-      />
-  )
-}
+    <Cell
+      //      startDefaultKernel
+      source={code}
+      autoStart={autoStart}
+      outputs={outputs}
+    />
+  );
+};
 
 export default JupyterCellComponent;
diff --git a/packages/lexical/src/components/JupyterOutputComponent.tsx b/packages/lexical/src/components/JupyterOutputComponent.tsx
index a37ca3b9d..59a36e065 100644
--- a/packages/lexical/src/components/JupyterOutputComponent.tsx
+++ b/packages/lexical/src/components/JupyterOutputComponent.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import { IOutput } from "@jupyterlab/nbformat";
-import { Output } from "@datalayer/jupyter-react/lib/components/output/Output";
+import { IOutput } from '@jupyterlab/nbformat';
+import { Output } from '@datalayer/jupyter-react/lib/components/output/Output';
 import { OutputAdapter } from '@datalayer/jupyter-react';
 
 type Props = {
@@ -16,10 +16,17 @@ type Props = {
   codeNodeUuid: string;
   outputNodeUuid: string;
   executeTrigger: number;
-}
+};
 
 export const JupyterOutputComponent = (props: Props) => {
-  const { outputNodeUuid, code, outputs, executeTrigger, autoRun, outputAdapter } = props;
+  const {
+    outputNodeUuid,
+    code,
+    outputs,
+    executeTrigger,
+    autoRun,
+    outputAdapter,
+  } = props;
   return (
     <Output
       code={code}
@@ -30,8 +37,8 @@ export const JupyterOutputComponent = (props: Props) => {
       id={outputNodeUuid}
       executeTrigger={executeTrigger}
       lumino={false}
-      />
-  )
-}
+    />
+  );
+};
 
 export default JupyterOutputComponent;
diff --git a/packages/lexical/src/components/KatexEquationAlterer.tsx b/packages/lexical/src/components/KatexEquationAlterer.tsx
index 61b494d96..7176f39d3 100644
--- a/packages/lexical/src/components/KatexEquationAlterer.tsx
+++ b/packages/lexical/src/components/KatexEquationAlterer.tsx
@@ -4,11 +4,10 @@
  * MIT License
  */
 
-import {useCallback, useState} from 'react';
+import { useCallback, useState } from 'react';
 import Button from '../components/Button';
 import KatexRenderer from './KatexRenderer';
 
-
 type Props = {
   initialEquation?: string;
   onConfirm: (equation: string, inline: boolean) => void;
@@ -36,7 +35,7 @@ export const KatexEquationAlterer = ({
       <div className="KatexEquationAlterer_centerRow">
         {inline ? (
           <input
-            onChange={(event) => {
+            onChange={event => {
               setEquation(event.target.value);
             }}
             value={equation}
@@ -44,7 +43,7 @@ export const KatexEquationAlterer = ({
           />
         ) : (
           <textarea
-            onChange={(event) => {
+            onChange={event => {
               setEquation(event.target.value);
             }}
             value={equation}
@@ -65,6 +64,6 @@ export const KatexEquationAlterer = ({
       </div>
     </>
   );
-}
+};
 
 export default KatexEquationAlterer;
diff --git a/packages/lexical/src/components/KatexRenderer.tsx b/packages/lexical/src/components/KatexRenderer.tsx
index ed77d1633..e3e97dcff 100644
--- a/packages/lexical/src/components/KatexRenderer.tsx
+++ b/packages/lexical/src/components/KatexRenderer.tsx
@@ -5,7 +5,7 @@
  */
 
 import katex from 'katex';
-import {useEffect, useRef} from 'react';
+import { useEffect, useRef } from 'react';
 
 export default function KatexRenderer({
   equation,
diff --git a/packages/lexical/src/components/Modal.tsx b/packages/lexical/src/components/Modal.tsx
index 7574afe45..e4ab87886 100644
--- a/packages/lexical/src/components/Modal.tsx
+++ b/packages/lexical/src/components/Modal.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import {ReactNode, useEffect, useRef} from 'react';
-import {createPortal} from 'react-dom';
+import { ReactNode, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 
 function PortalImpl({
   onClose,
@@ -63,7 +63,8 @@ function PortalImpl({
           className="Modal__closeButton"
           aria-label="Close modal"
           type="button"
-          onClick={onClose}>
+          onClick={onClose}
+        >
           X
         </button>
         <div className="Modal__content">{children}</div>
@@ -87,11 +88,12 @@ export const Modal = ({
     <PortalImpl
       onClose={onClose}
       title={title}
-      closeOnClickOutside={closeOnClickOutside}>
+      closeOnClickOutside={closeOnClickOutside}
+    >
       {children}
     </PortalImpl>,
     document.body,
   );
-}
+};
 
 export default Modal;
diff --git a/packages/lexical/src/components/Placeholder.tsx b/packages/lexical/src/components/Placeholder.tsx
index 3d4c7d7d5..5b3059d88 100644
--- a/packages/lexical/src/components/Placeholder.tsx
+++ b/packages/lexical/src/components/Placeholder.tsx
@@ -4,8 +4,7 @@
  * MIT License
  */
 
-import {ReactNode} from 'react';
-
+import { ReactNode } from 'react';
 
 export const Placeholder = ({
   children,
@@ -15,6 +14,6 @@ export const Placeholder = ({
   className?: string;
 }): JSX.Element => {
   return <div className={className || 'Placeholder__root'}>{children}</div>;
-}
+};
 
 export default Placeholder;
diff --git a/packages/lexical/src/components/PrettierButton.tsx b/packages/lexical/src/components/PrettierButton.tsx
index 260820ec8..b39571ce9 100644
--- a/packages/lexical/src/components/PrettierButton.tsx
+++ b/packages/lexical/src/components/PrettierButton.tsx
@@ -4,11 +4,10 @@
  * MIT License
  */
 
-import {$isCodeNode} from '@lexical/code';
-import {$getNearestNodeFromDOMNode, LexicalEditor} from 'lexical';
-import {Options} from 'prettier';
-import {useState} from 'react';
-
+import { $isCodeNode } from '@lexical/code';
+import { $getNearestNodeFromDOMNode, LexicalEditor } from 'lexical';
+import { Options } from 'prettier';
+import { useState } from 'react';
 
 interface Props {
   lang: string;
@@ -35,22 +34,22 @@ type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;
 async function loadPrettierParserByLang(lang: string) {
   const dynamicImports = PRETTIER_PARSER_MODULES[lang as LanguagesType];
   const modules = await Promise.all(
-    dynamicImports.map((dynamicImport) => dynamicImport()),
+    dynamicImports.map(dynamicImport => dynamicImport()),
   );
   return modules;
 }
 
 async function loadPrettierFormat() {
-  const {format} = await import('prettier/standalone');
+  const { format } = await import('prettier/standalone');
   return format;
 }
 
 const PRETTIER_OPTIONS_BY_LANG: Record<string, Options> = {
-  css: {parser: 'css'},
-  html: {parser: 'html'},
-  js: {parser: 'babel'},
-  markdown: {parser: 'markdown'},
-  typescript: {parser: 'typescript'},
+  css: { parser: 'css' },
+  html: { parser: 'html' },
+  js: { parser: 'babel' },
+  markdown: { parser: 'markdown' },
+  typescript: { parser: 'typescript' },
 };
 
 const LANG_CAN_BE_PRETTIER = Object.keys(PRETTIER_OPTIONS_BY_LANG);
@@ -70,7 +69,7 @@ function getPrettierOptions(lang: string): Options {
   return options;
 }
 
-export function PrettierButton({lang, editor, getCodeDOMNode}: Props) {
+export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
   const [syntaxError, setSyntaxError] = useState<string>('');
   const [tipsVisible, setTipsVisible] = useState<boolean>(false);
 
@@ -95,9 +94,7 @@ export function PrettierButton({lang, editor, getCodeDOMNode}: Props) {
       const format = await loadPrettierFormat();
       const options = getPrettierOptions(lang);
       const prettierParsers = await loadPrettierParserByLang(lang);
-      options.plugins = prettierParsers.map(
-        (parser) => parser.default || parser,
-      );
+      options.plugins = prettierParsers.map(parser => parser.default || parser);
       const formattedCode = await format(content, options);
 
       editor.update(() => {
@@ -142,7 +139,8 @@ export function PrettierButton({lang, editor, getCodeDOMNode}: Props) {
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
-        aria-label="prettier">
+        aria-label="prettier"
+      >
         {syntaxError ? (
           <i className="format prettier-error" />
         ) : (
diff --git a/packages/lexical/src/components/TextInput.tsx b/packages/lexical/src/components/TextInput.tsx
index a3f828a48..a79e72b49 100644
--- a/packages/lexical/src/components/TextInput.tsx
+++ b/packages/lexical/src/components/TextInput.tsx
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-
 type Props = Readonly<{
   'data-test-id'?: string;
   label: string;
@@ -28,13 +27,13 @@ export const TextInput = ({
         className="Input__input"
         placeholder={placeholder}
         value={value}
-        onChange={(e) => {
+        onChange={e => {
           onChange(e.target.value);
         }}
         data-test-id={dataTestId}
       />
     </div>
   );
-}
+};
 
 export default TextInput;
diff --git a/packages/lexical/src/components/index.ts b/packages/lexical/src/components/index.ts
index 94bcec524..85457b8f3 100644
--- a/packages/lexical/src/components/index.ts
+++ b/packages/lexical/src/components/index.ts
@@ -6,18 +6,18 @@
 
 // export * from "./InsertEquationDialog";
 // export * from "./InsertImageDialog";
-export * from "./Button";
+export * from './Button';
 export * from './Commenting';
-export * from "./ContentEditable";
-export * from "./DropDown";
-export * from "./EquationEditor";
-export * from "./FileInput";
-export * from "./ImageResizer";
-export * from "./JupyterOutputComponent";
-export * from "./KatexEquationAlterer";
-export * from "./KatexEquationAlterer";
-export * from "./KatexRenderer";
-export * from "./Modal";
-export * from "./Placeholder";
-export * from "./PrettierButton";
-export * from "./TextInput";
+export * from './ContentEditable';
+export * from './DropDown';
+export * from './EquationEditor';
+export * from './FileInput';
+export * from './ImageResizer';
+export * from './JupyterOutputComponent';
+export * from './KatexEquationAlterer';
+export * from './KatexEquationAlterer';
+export * from './KatexRenderer';
+export * from './Modal';
+export * from './Placeholder';
+export * from './PrettierButton';
+export * from './TextInput';
diff --git a/packages/lexical/src/context/LexicalContext.tsx b/packages/lexical/src/context/LexicalContext.tsx
index 0def36cca..3cad4626f 100644
--- a/packages/lexical/src/context/LexicalContext.tsx
+++ b/packages/lexical/src/context/LexicalContext.tsx
@@ -5,7 +5,7 @@
  */
 
 import { useState, createContext, useContext } from 'react';
-import { LexicalEditor } from "lexical";
+import { LexicalEditor } from 'lexical';
 
 type LexicalContextType = {
   editor?: LexicalEditor;
@@ -27,13 +27,15 @@ export const LexicalContextConsumer = context.Consumer;
 
 type Props = {
   children: React.ReactNode;
-}
+};
 
-export const LexicalProvider: React.FC<{ children: React.ReactNode }> = ({children}: Props) => {
+export const LexicalProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}: Props) => {
   const [editor, setEditor] = useState<LexicalEditor>();
   return (
-    <LexicalContextProvider value={{editor, setEditor}}>
+    <LexicalContextProvider value={{ editor, setEditor }}>
       {children}
     </LexicalContextProvider>
   );
-}
+};
diff --git a/packages/lexical/src/context/index.ts b/packages/lexical/src/context/index.ts
index c1d40f826..f27c1e7d8 100644
--- a/packages/lexical/src/context/index.ts
+++ b/packages/lexical/src/context/index.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-export * from "./LexicalContext";
+export * from './LexicalContext';
diff --git a/packages/lexical/src/convert/LexicalToNbformat.tsx b/packages/lexical/src/convert/LexicalToNbformat.tsx
index dc11f448f..28c353c13 100644
--- a/packages/lexical/src/convert/LexicalToNbformat.tsx
+++ b/packages/lexical/src/convert/LexicalToNbformat.tsx
@@ -4,12 +4,21 @@
  * MIT License
  */
 
-import { LexicalNode, $isElementNode, $isTextNode, $isParagraphNode } from "lexical";
-import { INotebookContent, ICodeCell, IMarkdownCell } from "@jupyterlab/nbformat";
-import EquationNode, { $isEquationNode } from "./../nodes/EquationNode";
-import { $isYouTubeNode } from "./../nodes/YouTubeNode";
-import { $isJupyterCodeNode } from "./../nodes/JupyterCodeNode";
-import { exportTopLevelElements } from "./markdown/MarkdownExport";
+import {
+  LexicalNode,
+  $isElementNode,
+  $isTextNode,
+  $isParagraphNode,
+} from 'lexical';
+import {
+  INotebookContent,
+  ICodeCell,
+  IMarkdownCell,
+} from '@jupyterlab/nbformat';
+import EquationNode, { $isEquationNode } from './../nodes/EquationNode';
+import { $isYouTubeNode } from './../nodes/YouTubeNode';
+import { $isJupyterCodeNode } from './../nodes/JupyterCodeNode';
+import { exportTopLevelElements } from './markdown/MarkdownExport';
 import { transformersByType } from './markdown/utils';
 import { TRANSFORMERS } from './markdown/index';
 
@@ -18,51 +27,50 @@ export const lexicalToNbformat = (nodes: LexicalNode[]) => {
     nbformat: 4,
     nbformat_minor: 5,
     metadata: {
-      "kernelspec": {
-        "language_info": "",
-        "display_name": "Python 3 (ipykernel)",
-        "language": "python",
-        "name": "python3"
+      kernelspec: {
+        language_info: '',
+        display_name: 'Python 3 (ipykernel)',
+        language: 'python',
+        name: 'python3',
       },
-      "language_info": {
-        "codemirror_mode": {
-          "name": "ipython",
-          "version": 3
+      language_info: {
+        codemirror_mode: {
+          name: 'ipython',
+          version: 3,
         },
-       "file_extension": ".py",
-       "mimetype": "text/x-python",
-       "name": "python",
-       "nbconvert_exporter": "python",
-       "pygments_lexer": "ipython3",
-       "version": "3.10.4"
-      }
+        file_extension: '.py',
+        mimetype: 'text/x-python',
+        name: 'python',
+        nbconvert_exporter: 'python',
+        pygments_lexer: 'ipython3',
+        version: '3.10.4',
+      },
     },
-    cells: []
-  }
+    cells: [],
+  };
   nodes.map(node => {
     if ($isJupyterCodeNode(node)) {
       nb.cells.push(newCodeCell(node.getTextContent()));
-    }    
-    else if ($isParagraphNode(node) && $isEquationNode(node.getFirstChild())) {
+    } else if (
+      $isParagraphNode(node) &&
+      $isEquationNode(node.getFirstChild())
+    ) {
       const equation = (node.getFirstChild() as EquationNode).getEquation();
       nb.cells.push(newMardownCell(`$$${equation}$$`));
-    }
-    else if ($isYouTubeNode(node)) {
+    } else if ($isYouTubeNode(node)) {
       const code = `from IPython.display import YouTubeVideo
-YouTubeVideo('${node.getId()}')`
+YouTubeVideo('${node.getId()}')`;
       nb.cells.push(newCodeCell(code));
-    }
-    else if ($isElementNode(node)) {
+    } else if ($isElementNode(node)) {
       const markdown = $convertToMarkdownString(node, TRANSFORMERS as any);
       nb.cells.push(newMardownCell(markdown));
-    }
-    else if ($isTextNode(node)) {
+    } else if ($isTextNode(node)) {
       const markdown = $convertToMarkdownString(node, TRANSFORMERS as any);
       nb.cells.push(newMardownCell(markdown));
     }
   });
   return nb;
-}
+};
 
 const newCodeCell = (source: string): ICodeCell => {
   return {
@@ -71,8 +79,8 @@ const newCodeCell = (source: string): ICodeCell => {
     metadata: {},
     outputs: [],
     execution_count: 0,
-  }
-}
+  };
+};
 
 const newMardownCell = (source: string): IMarkdownCell => {
   return {
@@ -81,8 +89,8 @@ const newMardownCell = (source: string): IMarkdownCell => {
     metadata: {},
     outputs: [],
     execution_count: 0,
-  }
-}
+  };
+};
 
 function $convertToMarkdownString(
   node: LexicalNode,
@@ -92,7 +100,6 @@ function $convertToMarkdownString(
   return exportMarkdown();
 }
 
-
 function createMarkdownExport(
   node: LexicalNode,
   transformers: Array<Transformer>,
@@ -101,7 +108,7 @@ function createMarkdownExport(
   // Export only uses text formats that are responsible for single format
   // e.g. it will filter out *** (bold, italic) and instead use separate ** and *
   const textFormatTransformers = byType.textFormat.filter(
-    (transformer) => transformer.format.length === 1,
+    transformer => transformer.format.length === 1,
   );
   return () => {
     const output = [];
diff --git a/packages/lexical/src/convert/NbformatToLexical.tsx b/packages/lexical/src/convert/NbformatToLexical.tsx
index 739851c5e..4199a827d 100644
--- a/packages/lexical/src/convert/NbformatToLexical.tsx
+++ b/packages/lexical/src/convert/NbformatToLexical.tsx
@@ -4,13 +4,16 @@
  * MIT License
  */
 
-import { LexicalEditor, INSERT_PARAGRAPH_COMMAND } from "lexical";
-import { INotebookContent, IOutput } from "@jupyterlab/nbformat";
+import { LexicalEditor, INSERT_PARAGRAPH_COMMAND } from 'lexical';
+import { INotebookContent, IOutput } from '@jupyterlab/nbformat';
 // import { INSERT_JUPYTER_CELL_OUTPUT_COMMAND } from "../plugins/JupyterCellOutputPlugin";
-import { INSERT_JUPYTER_CELL_COMMAND } from "../plugins/JupyterCellPlugin";
-import { $convertFromMarkdownString, TRANSFORMERS } from "./markdown";
+import { INSERT_JUPYTER_CELL_COMMAND } from '../plugins/JupyterCellPlugin';
+import { $convertFromMarkdownString, TRANSFORMERS } from './markdown';
 
-export const nbformatToLexical = (notebook: INotebookContent, editor: LexicalEditor) => {
+export const nbformatToLexical = (
+  notebook: INotebookContent,
+  editor: LexicalEditor,
+) => {
   editor.update(() => {
     notebook.cells.map(cell => {
       let code = '';
@@ -28,13 +31,13 @@ export const nbformatToLexical = (notebook: INotebookContent, editor: LexicalEdi
         editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
           code,
           outputs,
-          loading: "Loading...",
-          autoStart: false
+          loading: 'Loading...',
+          autoStart: false,
         });
       }
       editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined);
     });
   });
-}
+};
 
 export default nbformatToLexical;
diff --git a/packages/lexical/src/convert/index.ts b/packages/lexical/src/convert/index.ts
index 5daaf2935..5a68d8024 100644
--- a/packages/lexical/src/convert/index.ts
+++ b/packages/lexical/src/convert/index.ts
@@ -4,5 +4,5 @@
  * MIT License
  */
 
-export * from "./LexicalToNbformat";
-export * from "./NbformatToLexical";
+export * from './LexicalToNbformat';
+export * from './NbformatToLexical';
diff --git a/packages/lexical/src/convert/markdown/MarkdownExport.ts b/packages/lexical/src/convert/markdown/MarkdownExport.ts
index 68f16c0eb..0af565ccb 100644
--- a/packages/lexical/src/convert/markdown/MarkdownExport.ts
+++ b/packages/lexical/src/convert/markdown/MarkdownExport.ts
@@ -10,11 +10,21 @@ import type {
   TextMatchTransformer,
   Transformer,
 } from '.';
-import type {ElementNode, LexicalNode, TextFormatType, TextNode} from 'lexical';
+import type {
+  ElementNode,
+  LexicalNode,
+  TextFormatType,
+  TextNode,
+} from 'lexical';
 
-import {$getRoot, $isElementNode, $isLineBreakNode, $isTextNode} from 'lexical';
+import {
+  $getRoot,
+  $isElementNode,
+  $isLineBreakNode,
+  $isTextNode,
+} from 'lexical';
 
-import {transformersByType} from './utils';
+import { transformersByType } from './utils';
 
 export function createMarkdownExport(
   transformers: Array<Transformer>,
@@ -24,7 +34,7 @@ export function createMarkdownExport(
   // Export only uses text formats that are responsible for single format
   // e.g. it will filter out *** (bold, italic) and instead use separate ** and *
   const textFormatTransformers = byType.textFormat.filter(
-    (transformer) => transformer.format.length === 1,
+    transformer => transformer.format.length === 1,
   );
 
   return () => {
@@ -55,7 +65,7 @@ export function exportTopLevelElements(
   textMatchTransformers: Array<TextMatchTransformer>,
 ): string | null {
   for (const transformer of elementTransformers) {
-    const result = transformer.export(node, (_node) =>
+    const result = transformer.export(node, _node =>
       exportChildren(_node, textTransformersIndex, textMatchTransformers),
     );
 
@@ -81,7 +91,7 @@ function exportChildren(
     for (const transformer of textMatchTransformers) {
       const result = transformer.export(
         child,
-        (parentNode) =>
+        parentNode =>
           exportChildren(
             parentNode,
             textTransformersIndex,
diff --git a/packages/lexical/src/convert/markdown/MarkdownImport.ts b/packages/lexical/src/convert/markdown/MarkdownImport.ts
index edba36716..d092ab093 100644
--- a/packages/lexical/src/convert/markdown/MarkdownImport.ts
+++ b/packages/lexical/src/convert/markdown/MarkdownImport.ts
@@ -10,12 +10,15 @@ import type {
   TextMatchTransformer,
   Transformer,
 } from '.';
-import type {LexicalNode, RootNode, TextNode} from 'lexical';
+import type { LexicalNode, RootNode, TextNode } from 'lexical';
 
-import {JupyterCodeNode, $createJupyterCodeNode} from './../../nodes/JupyterCodeNode';
-import {$isListItemNode, $isListNode} from '@lexical/list';
-import {$isQuoteNode} from '@lexical/rich-text';
-import {$findMatchingParent} from '@lexical/utils';
+import {
+  JupyterCodeNode,
+  $createJupyterCodeNode,
+} from './../../nodes/JupyterCodeNode';
+import { $isListItemNode, $isListNode } from '@lexical/list';
+import { $isQuoteNode } from '@lexical/rich-text';
+import { $findMatchingParent } from '@lexical/utils';
 import {
   $createLineBreakNode,
   $createParagraphNode,
@@ -25,7 +28,7 @@ import {
   $isTextNode,
 } from 'lexical';
 
-import {PUNCTUATION_OR_SPACE, transformersByType} from './utils';
+import { PUNCTUATION_OR_SPACE, transformersByType } from './utils';
 
 const MARKDOWN_EMPTY_LINE_REG_EXP = /^\s{0,3}$/;
 const CODE_BLOCK_REG_EXP = /^```(\w{1,10})?\s?$/;
@@ -47,7 +50,7 @@ export function createMarkdownImport(
     const lines = markdownString.split('\n');
     const linesLength = lines.length;
     const root = $getRoot();
-//    root.clear();
+    //    root.clear();
 
     for (let i = 0; i < linesLength; i++) {
       const lineText = lines[i];
@@ -111,7 +114,7 @@ function importBlocks(
   elementNode.append(textNode);
   rootNode.append(elementNode);
 
-  for (const {regExp, replace} of elementTransformers) {
+  for (const { regExp, replace } of elementTransformers) {
     const match = lineText.match(regExp);
 
     if (match) {
@@ -331,7 +334,7 @@ function findOutermostMatch(
 
       // For non-intraword transformers checking if it's within a word
       // or surrounded with space/punctuation/newline
-      const {index = 0} = fullMatch;
+      const { index = 0 } = fullMatch;
       const beforeChar = textContent[index - 1];
       const afterChar = textContent[index + fullMatch[0].length];
 
@@ -355,7 +358,7 @@ function createTextFormatTransformersIndex(
   const openTagsRegExp = [];
 
   for (const transformer of textTransformers) {
-    const {tag} = transformer;
+    const { tag } = transformer;
     transformersByTag[tag] = transformer;
     const tagRegExp = tag.replace(/(\*|\^)/g, '\\$1');
     openTagsRegExp.push(tagRegExp);
diff --git a/packages/lexical/src/convert/markdown/MarkdownShortcuts.ts b/packages/lexical/src/convert/markdown/MarkdownShortcuts.ts
index 2317e3b82..06578ad90 100644
--- a/packages/lexical/src/convert/markdown/MarkdownShortcuts.ts
+++ b/packages/lexical/src/convert/markdown/MarkdownShortcuts.ts
@@ -10,9 +10,9 @@ import type {
   TextMatchTransformer,
   Transformer,
 } from '.';
-import type {ElementNode, LexicalEditor, TextNode} from 'lexical';
+import type { ElementNode, LexicalEditor, TextNode } from 'lexical';
 
-import {$isJupyterCodeNode} from './../../nodes/JupyterCodeNode';
+import { $isJupyterCodeNode } from './../../nodes/JupyterCodeNode';
 import {
   $createRangeSelection,
   $getSelection,
@@ -24,8 +24,8 @@ import {
 } from 'lexical';
 import invariant from '../../utils/invariant';
 
-import {TRANSFORMERS} from '.';
-import {indexBy, PUNCTUATION_OR_SPACE, transformersByType} from './utils';
+import { TRANSFORMERS } from '.';
+import { indexBy, PUNCTUATION_OR_SPACE, transformersByType } from './utils';
 
 function runElementTransformers(
   parentNode: ElementNode,
@@ -54,7 +54,7 @@ function runElementTransformers(
     return false;
   }
 
-  for (const {regExp, replace} of elementTransformers) {
+  for (const { regExp, replace } of elementTransformers) {
     const match = textContent.match(regExp);
 
     if (match && match[0].length === anchorOffset) {
@@ -134,7 +134,7 @@ function runTextFormatTransformers(
   }
 
   for (const matcher of matchers) {
-    const {tag} = matcher;
+    const { tag } = matcher;
     const tagLength = tag.length;
     const closeTagStartIndex = closeTagEndIndex - tagLength + 1;
 
@@ -325,11 +325,11 @@ export function registerMarkdownShortcuts(
   const byType = transformersByType(transformers);
   const textFormatTransformersIndex = indexBy(
     byType.textFormat,
-    ({tag}) => tag[tag.length - 1],
+    ({ tag }) => tag[tag.length - 1],
   );
   const textMatchTransformersIndex = indexBy(
     byType.textMatch,
-    ({trigger}) => trigger,
+    ({ trigger }) => trigger,
   );
 
   for (const transformer of transformers) {
@@ -379,7 +379,7 @@ export function registerMarkdownShortcuts(
   };
 
   return editor.registerUpdateListener(
-    ({tags, dirtyLeaves, editorState, prevEditorState}) => {
+    ({ tags, dirtyLeaves, editorState, prevEditorState }) => {
       // Ignore updates from undo/redo (as changes already calculated)
       if (tags.has('historic')) {
         return;
diff --git a/packages/lexical/src/convert/markdown/MarkdownTransformers.ts b/packages/lexical/src/convert/markdown/MarkdownTransformers.ts
index 6c1c50d58..e7fa9e23a 100644
--- a/packages/lexical/src/convert/markdown/MarkdownTransformers.ts
+++ b/packages/lexical/src/convert/markdown/MarkdownTransformers.ts
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import type {ListType} from '@lexical/list';
-import type {HeadingTagType} from '@lexical/rich-text';
+import type { ListType } from '@lexical/list';
+import type { HeadingTagType } from '@lexical/rich-text';
 import type {
   ElementNode,
   Klass,
@@ -14,8 +14,12 @@ import type {
   TextNode,
 } from 'lexical';
 
-import {$createJupyterCodeNode, $isJupyterCodeNode, JupyterCodeNode} from './../../nodes/JupyterCodeNode';
-import {$createLinkNode, $isLinkNode, LinkNode} from '@lexical/link';
+import {
+  $createJupyterCodeNode,
+  $isJupyterCodeNode,
+  JupyterCodeNode,
+} from './../../nodes/JupyterCodeNode';
+import { $createLinkNode, $isLinkNode, LinkNode } from '@lexical/link';
 import {
   $createListItemNode,
   $createListNode,
@@ -32,7 +36,7 @@ import {
   HeadingNode,
   QuoteNode,
 } from '@lexical/rich-text';
-import {$createLineBreakNode, $createTextNode, $isTextNode} from 'lexical';
+import { $createLineBreakNode, $createTextNode, $isTextNode } from 'lexical';
 
 export type Transformer =
   | ElementTransformer
@@ -43,7 +47,7 @@ export type ElementTransformer = {
   dependencies: Array<Klass<LexicalNode>>;
   export: (
     node: LexicalNode,
-    // eslint-disable-next-line no-shadow
+
     traverseChildren: (node: ElementNode) => string,
   ) => string | null;
   regExp: RegExp;
@@ -67,9 +71,9 @@ export type TextMatchTransformer = Readonly<{
   dependencies: Array<Klass<LexicalNode>>;
   export: (
     node: LexicalNode,
-    // eslint-disable-next-line no-shadow
+
     exportChildren: (node: ElementNode) => string,
-    // eslint-disable-next-line no-shadow
+
     exportFormat: (node: TextNode, textContent: string) => string,
   ) => string | null;
   importRegExp: RegExp;
@@ -143,8 +147,8 @@ const listExport = (
         listType === 'number'
           ? `${listNode.getStart() + index}. `
           : listType === 'check'
-          ? `- [${listItemNode.getChecked() ? 'x' : ' '}] `
-          : '- ';
+            ? `- [${listItemNode.getChecked() ? 'x' : ' '}] `
+            : '- ';
       output.push(indent + prefix + exportChildren(listItemNode));
       index++;
     }
@@ -163,7 +167,7 @@ export const HEADING: ElementTransformer = {
     return '#'.repeat(level) + ' ' + exportChildren(node);
   },
   regExp: /^(#{1,6})\s/,
-  replace: replaceWithBlock((match) => {
+  replace: replaceWithBlock(match => {
     const tag = ('h' + match[1].length) as HeadingTagType;
     return $createHeadingNode(tag);
   }),
@@ -223,7 +227,7 @@ export const CODE: ElementTransformer = {
     );
   },
   regExp: /^```(\w{1,10})?\s/,
-  replace: replaceWithBlock((match) => {
+  replace: replaceWithBlock(match => {
     return $createJupyterCodeNode(match ? match[1] : undefined);
   }),
   type: 'element',
diff --git a/packages/lexical/src/convert/markdown/convertToMarkdown.ts b/packages/lexical/src/convert/markdown/convertToMarkdown.ts
index a3e56e0c7..15bc75cf8 100644
--- a/packages/lexical/src/convert/markdown/convertToMarkdown.ts
+++ b/packages/lexical/src/convert/markdown/convertToMarkdown.ts
@@ -4,10 +4,20 @@
  * MIT License
  */
 
-import type {ElementNode, LexicalNode, TextFormatType, TextNode} from 'lexical';
-
-import {$isLinkNode} from '@lexical/link';
-import {$getRoot, $isElementNode, $isLineBreakNode, $isTextNode} from 'lexical';
+import type {
+  ElementNode,
+  LexicalNode,
+  TextFormatType,
+  TextNode,
+} from 'lexical';
+
+import { $isLinkNode } from '@lexical/link';
+import {
+  $getRoot,
+  $isElementNode,
+  $isLineBreakNode,
+  $isTextNode,
+} from 'lexical';
 
 import {
   getAllMarkdownCriteriaForParagraphs,
@@ -34,7 +44,7 @@ function exportTopLevelElementOrDecorator(node: LexicalNode): string | null {
 
   for (const transformer of elementTransformers) {
     if (transformer.export != null) {
-      const result = transformer.export(node, (_node) => exportChildren(_node));
+      const result = transformer.export(node, _node => exportChildren(_node));
 
       if (result != null) {
         return result;
diff --git a/packages/lexical/src/convert/markdown/index.ts b/packages/lexical/src/convert/markdown/index.ts
index 895e1ae9c..d1cd4615a 100644
--- a/packages/lexical/src/convert/markdown/index.ts
+++ b/packages/lexical/src/convert/markdown/index.ts
@@ -11,9 +11,9 @@ import type {
   Transformer,
 } from './MarkdownTransformers';
 
-import {createMarkdownExport} from './MarkdownExport';
-import {createMarkdownImport} from './MarkdownImport';
-import {registerMarkdownShortcuts} from './MarkdownShortcuts';
+import { createMarkdownExport } from './MarkdownExport';
+import { createMarkdownImport } from './MarkdownImport';
+import { registerMarkdownShortcuts } from './MarkdownShortcuts';
 import {
   BOLD_ITALIC_STAR,
   BOLD_ITALIC_UNDERSCORE,
diff --git a/packages/lexical/src/convert/markdown/utils.ts b/packages/lexical/src/convert/markdown/utils.ts
index a233723eb..c6ced0b6f 100644
--- a/packages/lexical/src/convert/markdown/utils.ts
+++ b/packages/lexical/src/convert/markdown/utils.ts
@@ -4,18 +4,18 @@
  * MIT License
  */
 
-import type {ListNode} from '@lexical/list';
+import type { ListNode } from '@lexical/list';
 import type {
   ElementTransformer,
   TextFormatTransformer,
   TextMatchTransformer,
   Transformer,
 } from '.';
-import type {ElementNode, LexicalNode, TextFormatType} from 'lexical';
+import type { ElementNode, LexicalNode, TextFormatType } from 'lexical';
 
-import {$isJupyterCodeNode} from './../../nodes/JupyterCodeNode';
-import {$isListItemNode, $isListNode} from '@lexical/list';
-import {$isHeadingNode, $isQuoteNode} from '@lexical/rich-text';
+import { $isJupyterCodeNode } from './../../nodes/JupyterCodeNode';
+import { $isListItemNode, $isListNode } from '@lexical/list';
+import { $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
 
 type MarkdownFormatKind =
   | 'noTransformation'
@@ -417,7 +417,7 @@ export function transformersByType(transformers: Array<Transformer>): Readonly<{
   textFormat: Array<TextFormatTransformer>;
   textMatch: Array<TextMatchTransformer>;
 }> {
-  const byType = indexBy(transformers, (t) => t.type);
+  const byType = indexBy(transformers, t => t.type);
 
   return {
     element: (byType.element || []) as Array<ElementTransformer>,
diff --git a/packages/lexical/src/convert/transformers/MarkdownTransformers.ts b/packages/lexical/src/convert/transformers/MarkdownTransformers.ts
index 0c5524b2b..5ad19eab3 100644
--- a/packages/lexical/src/convert/transformers/MarkdownTransformers.ts
+++ b/packages/lexical/src/convert/transformers/MarkdownTransformers.ts
@@ -9,7 +9,7 @@ import type {
   TextMatchTransformer,
   Transformer,
 } from './../markdown';
-import type {ElementNode, LexicalNode} from 'lexical';
+import type { ElementNode, LexicalNode } from 'lexical';
 
 import {
   CHECK_LIST,
@@ -46,7 +46,11 @@ import {
   $isEquationNode,
   EquationNode,
 } from '../../nodes/EquationNode';
-import {$createImageNode, $isImageNode, ImageNode} from '../../nodes/ImageNode';
+import {
+  $createImageNode,
+  $isImageNode,
+  ImageNode,
+} from '../../nodes/ImageNode';
 
 export const HR: ElementTransformer = {
   dependencies: [HorizontalRuleNode],
@@ -241,7 +245,7 @@ const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
     return null;
   }
 
-  return match[1].split('|').map((text) => createTableCell(text));
+  return match[1].split('|').map(text => createTableCell(text));
 };
 
 export const PLAYGROUND_TRANSFORMERS: Array<Transformer> = [
diff --git a/packages/lexical/src/editor/Editor.tsx b/packages/lexical/src/editor/Editor.tsx
index bdc7c10c1..c9d187bc4 100644
--- a/packages/lexical/src/editor/Editor.tsx
+++ b/packages/lexical/src/editor/Editor.tsx
@@ -4,47 +4,64 @@
  * MIT License
  */
 
-import { useState, useEffect } from "react";
-import { EditorState } from "lexical";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { useState, useEffect } from 'react';
+import { EditorState } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
-import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { HashtagNode } from '@lexical/hashtag';
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { ListItemNode, ListNode } from "@lexical/list";
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { ListItemNode, ListNode } from '@lexical/list';
 import { MarkNode } from '@lexical/mark';
-import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { CodeNode } from '@lexical/code';
-import { INotebookContent } from "@jupyterlab/nbformat";
+import { INotebookContent } from '@jupyterlab/nbformat';
 import {
-  JupyterCellOutputPlugin, EquationNode, HorizontalRulePlugin,
-  ListMaxIndentLevelPlugin, AutoLinkPlugin, ComponentPickerMenuPlugin,
-  EquationsPlugin, ImagesPlugin, YouTubePlugin, ImageNode, YouTubeNode,
-  JupyterCodeHighlightNode, JupyterCodeNode, JupyterOutputNode, JupyterCellNode,
-  CodeActionMenuPlugin, AutoEmbedPlugin, NbformatContentPlugin, TableOfContentsPlugin, MarkdownPlugin, JupyterCellPlugin,
-  CommentPlugin, FloatingTextFormatToolbarPlugin,
-} from "./..";
-import { commentTheme } from "../themes";
-import { useLexical } from "../context/LexicalContext";
-import { TreeViewPlugin, ToolbarPlugin } from "../plugins";
-import DraggableBlockPlugin from "../plugins/DraggableBlockPlugin"
+  JupyterCellOutputPlugin,
+  EquationNode,
+  HorizontalRulePlugin,
+  ListMaxIndentLevelPlugin,
+  AutoLinkPlugin,
+  ComponentPickerMenuPlugin,
+  EquationsPlugin,
+  ImagesPlugin,
+  YouTubePlugin,
+  ImageNode,
+  YouTubeNode,
+  JupyterCodeHighlightNode,
+  JupyterCodeNode,
+  JupyterOutputNode,
+  JupyterCellNode,
+  CodeActionMenuPlugin,
+  AutoEmbedPlugin,
+  NbformatContentPlugin,
+  TableOfContentsPlugin,
+  MarkdownPlugin,
+  JupyterCellPlugin,
+  CommentPlugin,
+  FloatingTextFormatToolbarPlugin,
+} from './..';
+import { commentTheme } from '../themes';
+import { useLexical } from '../context/LexicalContext';
+import { TreeViewPlugin, ToolbarPlugin } from '../plugins';
+import DraggableBlockPlugin from '../plugins/DraggableBlockPlugin';
 
 import './../../style/index.css';
 
 type Props = {
-  notebook?: INotebookContent
-}
+  notebook?: INotebookContent;
+};
 
 function Placeholder() {
   return <div className="editor-placeholder">Code and analyse data.</div>;
@@ -77,7 +94,7 @@ const initialConfig = {
     TableNode,
     TableRowNode,
     YouTubeNode,
-  ]
+  ],
 };
 
 const EditorContextPlugin = () => {
@@ -85,14 +102,15 @@ const EditorContextPlugin = () => {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     setEditor(editor);
-//    return () => setEditor(undefined);
+    //    return () => setEditor(undefined);
   }, [editor]);
   return null;
-}
+};
 
 export function Editor(props: Props) {
   const { notebook } = props;
-  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | null>(null);
 
   const onRef = (_floatingAnchorElem: HTMLDivElement) => {
     if (_floatingAnchorElem !== null) {
@@ -101,7 +119,7 @@ export function Editor(props: Props) {
   };
 
   function onChange(_editorState: EditorState) {
-//    console.log('---', _editorState.toJSON());
+    //    console.log('---', _editorState.toJSON());
   }
   return (
     <LexicalComposer initialConfig={initialConfig}>
@@ -126,30 +144,32 @@ export function Editor(props: Props) {
             <AutoFocusPlugin />
             <TablePlugin />
             <ListPlugin />
-            <CheckListPlugin/>
+            <CheckListPlugin />
             <LinkPlugin />
             <AutoLinkPlugin />
             <ListMaxIndentLevelPlugin maxDepth={7} />
             <MarkdownPlugin />
             <JupyterCellPlugin />
             <JupyterCellOutputPlugin />
-            <ComponentPickerMenuPlugin/>
-            <EquationsPlugin/>
-            <ImagesPlugin/>
-            <HorizontalRulePlugin/>
-            <YouTubePlugin/>
-            <NbformatContentPlugin notebook={notebook}/>
-            <CodeActionMenuPlugin/>
-            <AutoEmbedPlugin/>
-            <EditorContextPlugin/>
-            <TableOfContentsPlugin/>
-            <CommentPlugin providerFactory={undefined}/>
-            {floatingAnchorElem &&
+            <ComponentPickerMenuPlugin />
+            <EquationsPlugin />
+            <ImagesPlugin />
+            <HorizontalRulePlugin />
+            <YouTubePlugin />
+            <NbformatContentPlugin notebook={notebook} />
+            <CodeActionMenuPlugin />
+            <AutoEmbedPlugin />
+            <EditorContextPlugin />
+            <TableOfContentsPlugin />
+            <CommentPlugin providerFactory={undefined} />
+            {floatingAnchorElem && (
               <>
                 <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
-                <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
+                <FloatingTextFormatToolbarPlugin
+                  anchorElem={floatingAnchorElem}
+                />
               </>
-            }
+            )}
           </div>
         </div>
       </div>
diff --git a/packages/lexical/src/editor/index.ts b/packages/lexical/src/editor/index.ts
index 4c9753978..1716cea9d 100644
--- a/packages/lexical/src/editor/index.ts
+++ b/packages/lexical/src/editor/index.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-export * from "./Editor";
+export * from './Editor';
diff --git a/packages/lexical/src/examples/AppNbformat.tsx b/packages/lexical/src/examples/AppNbformat.tsx
index b1fff85c8..7768c83b8 100644
--- a/packages/lexical/src/examples/AppNbformat.tsx
+++ b/packages/lexical/src/examples/AppNbformat.tsx
@@ -4,47 +4,57 @@
  * MIT License
  */
 
-import { useState } from "react";
-import { $getRoot } from "lexical";
-import styled from "styled-components";
-import { useNotebookStore, Jupyter, Notebook, CellSidebar, CellSidebarExtension } from "@datalayer/jupyter-react";
-import { Box, UnderlineNav, Button } from "@primer/react";
-import { ThreeBarsIcon } from "@primer/octicons-react"
-import { JSONTree } from "react-json-tree";
-import { INotebookContent } from "@jupyterlab/nbformat";
-import { INotebookModel } from "@jupyterlab/notebook";
-import { lexicalToNbformat,useLexical, LexicalProvider, Editor } from "./..";
+import { useState } from 'react';
+import { $getRoot } from 'lexical';
+import styled from 'styled-components';
+import {
+  useNotebookStore,
+  Jupyter,
+  Notebook,
+  CellSidebar,
+  CellSidebarExtension,
+} from '@datalayer/jupyter-react';
+import { Box, UnderlineNav, Button } from '@primer/react';
+import { ThreeBarsIcon } from '@primer/octicons-react';
+import { JSONTree } from 'react-json-tree';
+import { INotebookContent } from '@jupyterlab/nbformat';
+import { INotebookModel } from '@jupyterlab/notebook';
+import { lexicalToNbformat, useLexical, LexicalProvider, Editor } from './..';
 
-import INITIAL_LEXICAL_MODEL from "./content/Example.lexical.json";
+import INITIAL_LEXICAL_MODEL from './content/Example.lexical.json';
 
-import INITIAL_NBFORMAT_MODEL from "./content/Example.ipynb.json";
+import INITIAL_NBFORMAT_MODEL from './content/Example.ipynb.json';
 
 const NOTEBOOK_UID = 'notebook-uid-lexical';
 
-type TabType = 'editor'
-  | 'notebook'
-  | 'nbformat';
+type TabType = 'editor' | 'notebook' | 'nbformat';
 
 const StyledNotebook = styled.div`
   &[style] {
     height: 100vh !important;
   }
-`
+`;
 
 const Tabs = () => {
   const { editor } = useLexical();
   const notebookStore = useNotebookStore();
   const [tab, setTab] = useState<TabType>('editor');
-  const [nbformat, setNbformat] = useState<INotebookContent>(INITIAL_NBFORMAT_MODEL);
+  const [nbformat, setNbformat] = useState<INotebookContent>(
+    INITIAL_NBFORMAT_MODEL,
+  );
   const notebook = notebookStore.selectNotebook(NOTEBOOK_UID);
-  const goToTab = (e: any, toTab: TabType, notebookModel: INotebookModel | undefined) => {
+  const goToTab = (
+    e: any,
+    toTab: TabType,
+    notebookModel: INotebookModel | undefined,
+  ) => {
     e.preventDefault();
     if (tab === 'notebook' && toTab === 'editor') {
       if (notebookModel && editor) {
         setNbformat(notebookModel.toJSON() as INotebookContent);
       }
     }
-    if (tab === 'editor' && toTab === "notebook") {
+    if (tab === 'editor' && toTab === 'notebook') {
       editor?.update(() => {
         const root = $getRoot();
         const children = root.getChildren();
@@ -58,36 +68,51 @@ const Tabs = () => {
       }
     }
     setTab(toTab);
-  }
+  };
   return (
     <Box className="center">
       <UnderlineNav aria-label="Underline Navigation">
-        <UnderlineNav.Item href="" aria-current={tab === 'editor' ? 'page' : undefined} onClick={e => goToTab(e, 'editor', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'editor' ? 'page' : undefined}
+          onClick={e => goToTab(e, 'editor', notebook?.model)}
+        >
           Editor
         </UnderlineNav.Item>
-        <UnderlineNav.Item href="" aria-current={tab === 'notebook' ? 'page' : undefined} onClick={e => goToTab(e, 'notebook', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'notebook' ? 'page' : undefined}
+          onClick={e => goToTab(e, 'notebook', notebook?.model)}
+        >
           Notebook
         </UnderlineNav.Item>
-        <UnderlineNav.Item href="" aria-current={tab === 'nbformat' ? 'page' : undefined} onClick={e => goToTab(e, 'nbformat', notebook?.model)}>
+        <UnderlineNav.Item
+          href=""
+          aria-current={tab === 'nbformat' ? 'page' : undefined}
+          onClick={e => goToTab(e, 'nbformat', notebook?.model)}
+        >
           NbFormat
         </UnderlineNav.Item>
       </UnderlineNav>
-      { tab === 'editor' &&
+      {tab === 'editor' && (
         <Box>
           <Editor notebook={nbformat} />
           <Button
             onClick={(e: React.MouseEvent) => {
               e.preventDefault();
               if (editor) {
-                const editorState = editor.parseEditorState(INITIAL_LEXICAL_MODEL as any);
-                editor.setEditorState(editorState);  
+                const editorState = editor.parseEditorState(
+                  INITIAL_LEXICAL_MODEL as any,
+                );
+                editor.setEditorState(editorState);
               }
-            }}>
-              Load Lexical Model
+            }}
+          >
+            Load Lexical Model
           </Button>
         </Box>
-      }
-      { tab === 'notebook' &&
+      )}
+      {tab === 'notebook' && (
         <StyledNotebook>
           <Box mb={3}>
             <Notebook
@@ -99,20 +124,21 @@ const Tabs = () => {
               onClick={(e: React.MouseEvent) => {
                 e.preventDefault();
                 setNbformat(INITIAL_NBFORMAT_MODEL);
-              }}>
-                Reset Nbformat
+              }}
+            >
+              Reset Nbformat
             </Button>
           </Box>
         </StyledNotebook>
-      }
-      { tab === 'nbformat' &&
+      )}
+      {tab === 'nbformat' && (
         <Box>
-          <JSONTree data={nbformat}/>;
+          <JSONTree data={nbformat} />;
         </Box>
-      }
+      )}
     </Box>
-  )
-}
+  );
+};
 
 export function AppNbformat() {
   return (
@@ -122,13 +148,13 @@ export function AppNbformat() {
       </div>
       <Jupyter startDefaultKernel>
         <LexicalProvider>
-          <Tabs/>
+          <Tabs />
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
         {/* Tailwind v4 Button - Using Tailwind Utility Classes */}
         <div className="flex flex-col items-center gap-4 my-8">
-          <button 
+          <button
             className="bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out"
             onClick={() => alert('Tailwind CSS v4 is working correctly!')}
           >
@@ -141,21 +167,30 @@ export function AppNbformat() {
             </span>
           </div>
         </div>
-        <br/>
-        <a href="https://datalayer.io" target="_blank">
-          <ThreeBarsIcon/>
+        <br />
+        <a href="https://datalayer.io" target="_blank" rel="noreferrer">
+          <ThreeBarsIcon />
         </a>
         <h2>
-          copyright © <a href="https://datalayer.io" target="_blank">2022-2024 Datalayer, Inc.</a>
+          copyright ©{' '}
+          <a href="https://datalayer.io" target="_blank" rel="noreferrer">
+            2022-2024 Datalayer, Inc.
+          </a>
         </h2>
         <ul>
           <li>
-            <a href="https://github.com/datalayer/jupyter-ui" target="_blank">Jupyter UI open-source repository</a>
+            <a
+              href="https://github.com/datalayer/jupyter-ui"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Jupyter UI open-source repository
+            </a>
           </li>
         </ul>
       </div>
     </>
-  )
+  );
 }
 
 export default AppNbformat;
diff --git a/packages/lexical/src/examples/AppSimple.tsx b/packages/lexical/src/examples/AppSimple.tsx
index a4e5d6889..db84978d0 100644
--- a/packages/lexical/src/examples/AppSimple.tsx
+++ b/packages/lexical/src/examples/AppSimple.tsx
@@ -4,15 +4,15 @@
  * MIT License
  */
 
-import { Button } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
-import { ThreeBarsIcon } from "@primer/octicons-react"
-import { Jupyter } from "@datalayer/jupyter-react";
-import { useLexical, Editor, LexicalProvider } from "..";
+import { Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ThreeBarsIcon } from '@primer/octicons-react';
+import { Jupyter } from '@datalayer/jupyter-react';
+import { useLexical, Editor, LexicalProvider } from '..';
 
-import LEXICAL_MODEL from "./content/Example.lexical.json";
+import LEXICAL_MODEL from './content/Example.lexical.json';
 
-import NBFORMAT_MODEL from "./content/Example.ipynb.json";
+import NBFORMAT_MODEL from './content/Example.ipynb.json';
 
 const LexicalEditor = () => {
   const { editor } = useLexical();
@@ -25,15 +25,16 @@ const LexicalEditor = () => {
             e.preventDefault();
             if (editor) {
               const editorState = editor.parseEditorState(LEXICAL_MODEL as any);
-              editor.setEditorState(editorState);  
+              editor.setEditorState(editorState);
             }
-          }}>
-            Load Lexical Model
+          }}
+        >
+          Load Lexical Model
         </Button>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 export const AppSimple = () => {
   return (
@@ -43,25 +44,34 @@ export const AppSimple = () => {
       </div>
       <Jupyter startDefaultKernel>
         <LexicalProvider>
-          <LexicalEditor/>
+          <LexicalEditor />
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
-        <br/>
-        <a href="https://datalayer.ai" target="_blank">
-          <ThreeBarsIcon/>
+        <br />
+        <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+          <ThreeBarsIcon />
         </a>
         <h2>
-        Copyright © <a href="https://datalayer.ai" target="_blank">2022 Datalayer, Inc.</a>
+          Copyright ©{' '}
+          <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+            2022 Datalayer, Inc.
+          </a>
         </h2>
         <ul>
           <li>
-            <a href="https://github.com/datalayer/jupyter-ui/tree/main/packages/lexical" target="_blank">Jupyter UI open-source repository</a>
+            <a
+              href="https://github.com/datalayer/jupyter-ui/tree/main/packages/lexical"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Jupyter UI open-source repository
+            </a>
           </li>
         </ul>
       </div>
     </>
-  )
-}
+  );
+};
 
 export default AppSimple;
diff --git a/packages/lexical/src/examples/content/Example.ipynb.json b/packages/lexical/src/examples/content/Example.ipynb.json
index afca12283..6f268d017 100644
--- a/packages/lexical/src/examples/content/Example.ipynb.json
+++ b/packages/lexical/src/examples/content/Example.ipynb.json
@@ -1,90 +1,81 @@
 {
- "cells": [
-  {
-   "cell_type": "markdown",
-   "id": "3ce565a1-7756-4fee-af81-32682a8eb1b3",
-   "metadata": {},
-   "source": [
-    "# Hello Lexical"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "23622f4a-62c9-4915-87b4-af1f4d6e30ec",
-   "metadata": {},
-   "source": [
-    "The Receiver Operating Characteristic \"ROC\" illustrates the performance of the binary classifier by plotting the false alarm probability ($P_{FA}$) on the horizontal axis and the detection probability ($P_D$) on the vertical axis. The area under the ROC-curve (AUC) is used to provide a single-figure quantification of the performance of the binary classifier based on the ROC. This article provides an interpretation of the AUC and connects the AUC to the Wilcoxon–Mann–Whitney statistic, which is a nonparametic test to compare two populations. This derivation is pretty hard to find but the connection between the AUC and the Wilcoxon–Mann–Whitney test is important insofar as it provides some perspective on the seemingly arbitrary use of AUC to quantify the performance of the binary classifier.\n",
-    "\n",
-    "Let's proceed with some definitions and some notation. A binary classifier can make two kinds of mistakes, usually and unhelpfully called Type I and Type II errors.  The *detection probability* is \n",
-    "\n",
-    "$$P_D= \\mathbb{P}(1|x \\in C_1)$$"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 5,
-   "id": "5d1c1fb7-59b6-4d52-a9e2-6294ddc9758a",
-   "metadata": {},
-   "outputs": [
+  "cells": [
     {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "1\n"
-     ]
-    }
-   ],
-   "source": [
-    "x=1\n",
-    "print(x)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 4,
-   "id": "1fcf3d25-cb81-4977-9cc5-91855f3c1b28",
-   "metadata": {},
-   "outputs": [
+      "cell_type": "markdown",
+      "id": "3ce565a1-7756-4fee-af81-32682a8eb1b3",
+      "metadata": {},
+      "source": ["# Hello Lexical"]
+    },
     {
-     "data": {
-      "image/png": "iVBORw0KGgoAAAANSUhEUgAAAYIAAAD4CAYAAADhNOGaAAAAOXRFWHRTb2Z0d2FyZQBNYXRwbG90bGliIHZlcnNpb24zLjUuMSwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy/YYfK9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAjUUlEQVR4nO3deXxU5dn/8c8NhH0nLGEJ+04QMGyuuFQBUURpa7W4oFJ99LGbAoIWFauota0tKsWqldZqLWGTxR0UNxRQsrGFTQJhlwRIQpa5fn9k+vzSGCRATs4s3/frNa/MnHMnc93cSb6cOWeuODNDRESiVzW/CxAREX8pCEREopyCQEQkyikIRESinIJARCTK1fC7gFMVGxtrHTp08LsMEZGwsmbNmgNm1ry8fWEXBB06dGD16tV+lyEiElaccztOtE8vDYmIRDkFgYhIlFMQiIhEOQWBiEiUUxCIiEQ5z4PAOVfdOfeVc25xOfucc+5PzrkM51yyc26A1/WIiMh/q4ojgp8D60+wbwTQNXibADxfBfWIiEgpngaBc64tcAXw1xMMGQ3MsRKfA42dc3Fe1iQiEm4KiwM8tyKDdTsPe/L1vT4i+CMwEQicYH8bYGepx5nBbf/FOTfBObfaObd6//79lV6kiEioSt2VzdXPfsKTb21kWeoeT57Ds3cWO+dGAfvMbI1zbtiJhpWz7Tt/KcfMZgOzARITE/WXdEQk4uUXFvPnDzYz68OtNKlbk+dvGMCIBG9eMPGyxcS5wFXOuZFAbaChc+4fZvbTUmMygXalHrcFdntYk4hIyFu9/RATk5LZuv8YPzy7LQ9c0YtGdWM8ez7PgsDM7gfuBwgeEdxbJgQAFgF3O+deBwYD2WaW5VVNIiKh7OjxIp56awNzPt9B60Z1mDN+EBd0K7dPXKWq8qZzzrk7AMxsFrAUGAlkALnALVVdj4hIKPhw036mzEthd3YeNw3twH2Xd6derar5FV0lz2JmK4AVwfuzSm034K6qqEFEJBQdzi1g+uL1JK3NpHPzevz7Z0NJ7NC0SmsIuzbUIiKRYllKFg8uTONwbgF3X9SFuy/uQu2Y6lVeh4JARKSK7cvJ5zcL03grbQ992jTklfED6d26kW/1KAhERKqImfHvNZk8ujid/KIAk4b34PbzO1Kjur9t3xQEIiJVYOehXKbMT2Hl5gMM6tCUGdcm0Kl5fb/LAhQEIiKeKg4Ycz7bzlNvb8QB00f35obB7alWrbz30/pDQSAi4pGMfUeYlJTCmh3fMqx7c347JoE2jev4XdZ3KAhERCpZYXGAv3y4hT+9n0HdWtX5w4/P4up+bXAudI4CSlMQiIhUopTMbO6bu44Ne45wRd84Hr6qN7H1a/ld1vdSEIiIVIL8wmL++N5mXli5lWb1avKXcWdzee9WfpdVIQoCEZEztGrrQSbPS2HbgWP8OLEdU67oSaM63jWJq2wKAhGR03Qkv5An39rI3z/fQbumdXj1tsGc2yXW77JOmYJAROQ0LN+wj6nzU8jKyefW8zry68u6UbdmeP5KDc+qRUR8cuhYAdMXpzP/q110bVGfpDvPYUB8E7/LOiMKAhGRCjAzlqRkMW1hGtl5hdxzSVfuuqgztWpUfZO4yqYgEBE5ib05+TywIJV30/fSt20j/nHbYHrGNfS7rEqjIBAROQEz443VO3l0yXoKigJMGdmD8ef63ySusikIRETK8c3BXCbPS+bTLQcZ3LEpT1zblw6x9fwuyxMKAhGRUooDxsufbON372ykRrVqPDYmgesGtgupJnGVTUEgIhK0ae8RJs5N5uudh7m4Rwt+O6YPcY1Cr0lcZVMQiEjUKygK8PyKLcxcvpkGtWN45rp+XHVW65BtElfZFAQiEtXW7TzMpKRkNuw5wuh+rfnNqF40C/EmcZVNQSAiUSmvoJg/vLeJv67cSosGtfnrjYlc2qul32X5QkEgIlHnsy0HmTwvmR0Hc7l+cDyTR/SgYe3waRJX2RQEIhI1cvILeXzpBl774hvaN6vLP28fzDmdw69JXGXzLAicc7WBj4BaweeZa2bTyowZBiwEtgU3zTOzR7yqSUSi1/vr9zJ1fir7juQz4YJO/PLSbtSpGf7tISqDl0cEx4GLzeyocy4G+Ng5t8zMPi8zbqWZjfKwDhGJYgePHufhN9NZtG43PVo14C/jzuasdo39LiukeBYEZmbA0eDDmODNvHo+EZHSzIxF63bz8JvpHMkv5JeXduPOYZ2pWSOy2kNUBk/PETjnqgNrgC7As2a2qpxhQ51z64DdwL1mllbO15kATACIj4/3sGIRiQRZ2Xk8MD+V9zfso1+7xjw5ti/dWjbwu6yQ5WkQmFkx0M851xiY75zrY2appYasBdoHXz4aCSwAupbzdWYDswESExN1VCEi5QoEjNe+/IbHl26gKBDggSt6csu5Hakewe0hKkOVXDVkZoedcyuA4UBqqe05pe4vdc4955yLNbMDVVGXiESO7QeOMXleMp9vPcQ5nZsx45q+xDer63dZYcHLq4aaA4XBEKgDXAo8UWZMK2CvmZlzbhBQDTjoVU0iEnmKigO89Mk2nn5nEzVrVOOJaxP4UWK7qGkPURm8PCKIA14JnieoBrxhZoudc3cAmNksYCxwp3OuCMgDrgueZBYROakNe3KYNDeZdZnZ/KBXSx69ug8tG9b2u6yw4+VVQ8lA/3K2zyp1fyYw06saRCQyHS8q5tnlW3hueQaN6sQw8/r+XJEQp6OA06R3FotIWFn7zbdMmpvM5n1HGdO/Db8Z1Ysm9Wr6XVZYUxCISFjILSji6Xc28dIn22jVsDYv3zyQi3q08LusiKAgEJGQ90nGASbPS2bnoTzGDWnPxOHdaRDFTeIqm4JAREJWdl4hjy9dz+tf7qRjbD3+NWEIgzs187usiKMgEJGQ9E7aHh5YkMrBYwXccWFnfnFpV2rHqEmcFxQEIhJS9h85zkNvprEkOYuecQ158aaBJLRt5HdZEU1BICIhwcxY8PUuHn4zndzjxdx7WTd+dmFnYqqrSZzXFAQi4rtdh/OYOj+FFRv3MyC+pElclxZqEldVFAQi4ptAwHh11Q5mLNtAwGDalb24cWgHNYmrYgoCEfHF1v1HmZyUwhfbD3F+11geG5NAu6ZqEucHBYGIVKmi4gAvrNzGH97bRO0a1XhqbF/Gnt1W7SF8pCAQkSqTvjuHiUnrSN2Vw+W9WzJ9dB9aqEmc7xQEIuK5/MJiZn6QwawPt9C4bk2ev2EAIxLi/C5LghQEIuKpNTsOMXFuMlv2H+PaAW15cFRPGtdVk7hQoiAQEU8cO17EU29v5JXPttO6UR1eGT+IC7s197ssKYeCQEQq3Ueb9nP/vBR2Z+dx45D23De8B/Vr6ddNqNLKiEilyc4tZPqSdOauyaRT83q88bOhDOzQ1O+y5CQUBCJSKd5KzeLBhWkcOlbA/wzrzD2XqElcuFAQiMgZ2Xckn2kL01iWuoferRvy8s0D6dNGTeLCiYJARE6LmZG0dhfTF6eTV1jMxOHduf38TmoSF4YUBCJyynYeymXK/BRWbj7AwA5NmHFtXzo3r+93WXKaFAQiUmGBgDHns+08+fZGHPDI6N78dHB7qqlJXFhTEIhIhWTsO8rkpGRW7/iWC7o157ExfWjbRE3iIoGCQES+V2FxgNkfbeWZ9zZTt1Z1nv7hWVwzoI2axEUQz4LAOVcb+AioFXyeuWY2rcwYBzwDjARygZvNbK1XNYnIqUndlc3EucmkZ+VwRUIcD13Vm+YNavldllQyL48IjgMXm9lR51wM8LFzbpmZfV5qzAiga/A2GHg++FFEfJRfWMwz729m9kdbaVqvJrN+ejbD+7TyuyzxiGdBYGYGHA0+jAnerMyw0cCc4NjPnXONnXNxZpblVV0i8v2+3H6ISXOT2XrgGD9KbMvUkb1oVDfG77LEQ56eI3DOVQfWAF2AZ81sVZkhbYCdpR5nBrf9VxA45yYAEwDi4+M9q1ckmh09XsSTb21gzmc7aNukDv+4dTDndY31uyypAp4GgZkVA/2cc42B+c65PmaWWmpIeWebyh41YGazgdkAiYmJ39kvImdmxcZ9TJ2fyu7sPMaf25FfX9aNemoSFzWqZKXN7LBzbgUwHCgdBJlAu1KP2wK7q6ImEYFvjxUwfUk689buokuL+sy94xzObt/E77Kkinl51VBzoDAYAnWAS4EnygxbBNztnHudkpPE2To/IOI9M2Npyh6mLUrlcG4h91zchbsu7kKtGmoSF428PCKIA14JnieoBrxhZoudc3cAmNksYCkll45mUHL56C0e1iMiwL6cfB5YkMo76XtJaNOIOeMH06t1Q7/LEh95edVQMtC/nO2zSt034C6vahCR/8/M+PfqTKYvSaegKMD9I3pw63kdqaEmcVFPZ4NEosDOQ7ncPy+FjzMOMKhjU2Zck0AnNYmTIAWBSAQrDhivfLqdp97eSPVqjkev7sP1g+LVJE7+i4JAJEJt3nuESUnJrP3mMBd1b85vxyTQunEdv8uSEKQgEIkwhcUBZq3Ywp8/yKBerer88cf9GN2vtZrEyQkpCEQiSEpmNvfNXceGPUe48qzWTLuyF7H11SROvp+CQCQC5BcW84f3NvHCR1tp3qAWL9yYyA96tfS7LAkTCgKRMPf51oNMTkpm+8FcfjKoHZNH9KRRHTWJk4pTEIiEqSP5hcxYtoFXV31DfNO6/PO2wZzTRU3i5NQpCETC0PIN+5gyP4W9Ofncdl5HfnVZN+rW1I+znB5954iEkUPHCnjkzTQWfL2bbi3r89wN59A/Xk3i5MwoCETCgJmxODmLhxalkZNfyM8v6cpdF3WhZg21h5AzpyAQCXF7c/KZOj+V99bv5ay2jXhi7GB6tFKTOKk8CgKREGVm/OvLnfx26XoKiwNMHdmT8ed1pLraQ0glUxCIhKAdB49x/7wUPt1ykCGdmjLjmr50iK3nd1kSoRQEIiGkOGC8/Mk2fvfORmKqVeOxMQlcN7CdmsSJpxQEIiFi456SJnFf7zzMJT1a8OiYPsQ1UpM48Z6CQMRnBUUBnluRwbPLM2hQO4Y//aQ/V/aNU5M4qTIKAhEfrdt5mIlzk9m49wij+7Vm2pW9aVqvpt9lSZRREIj4IK+gmN+/u5EXP95Giwa1efGmRC7pqSZx4g8FgUgV+3TLAe6fl8KOg7lcPzieySN60LC2msSJf076tkTn3K1lHld3zk3zriSRyJSTX8j981K4/oVVALx2+xAeG5OgEBDfVeSI4BLn3LXArUAz4GXgQ0+rEokw76XvZeqCFPYfOc6ECzrxy0u7Uadmdb/LEgEqEARmdr1z7sdACpAL/MTMPvG8MpEIcPDocR5+M51F63bTo1UDZo9L5Kx2jf0uS+S/nDQInHNdgZ8DSUBPYJxz7iszy/W6OJFwZWYsWrebhxalcfR4Eb/6QTfuuLCzmsRJSKrIS0NvAneZ2fuu5MLmXwFfAr2/75Occ+2AOUArIADMNrNnyowZBiwEtgU3zTOzR05lAiKhJis7jwfmp/L+hn30a9eYJ8f2pVvLBn6XJXJCFQmCQWaWA2BmBjztnFtUgc8rAn5tZmudcw2ANc65d80svcy4lWY26tTKFgk9gYDx2pff8PjSDRQHjAdH9eLmczqoSZyEvIqcI8hxzvUwsw3/+WhmmyvweVlAVvD+EefceqANUDYIRMLetgPHmJyUzKpthzi3SzMeH9OX+GZ1/S5LpEIq+j6CfwIDSn08Jc65DkB/YFU5u4c659YBu4F7zSytnM+fAEwAiI+PP9WnF/FMUXGAlz7ZxtPvbKJmjWo8cW0CP0psp/YQElZO9Q1lp/zd7ZyrT8mJ5l/85yWmUtYC7c3sqHNuJLAA6Fr2a5jZbGA2QGJiop1qDSJeWJ+Vw6SkZJIzs/lBr5Y8enUfWjas7XdZIqfM03cWO+diKAmBV81sXtn9pYPBzJY6555zzsWa2QEv6xI5E8eLinl2+RaeW55BozoxzLy+P1ckqEmchC/PgiB4hdGLwHoz+/0JxrQC9pqZOecGUfJO54Ne1SRyptZ+8y2T5iazed9RrunfhgdH9aKJmsRJmDvVIDiVl2XOBcYBKc65r4PbpgDxAGY2CxgL3OmcKwLygOuCVyaJhJTcgiJ+9/YmXv50G3ENa/PyLQO5qHsLv8sSqRQVDQJX5uNJmdnHJxtvZjOBmRX9miJ++CTjAJPnJbPzUB7jhrRn4vDuNFB/IIkgFXln8d3AVcGH53tbjkjoyM4r5LEl6/nX6p10jK3HvyYMYXCnZn6XJVLpKnJE0ApY7pxbC7zknHtbL99IpHsnbQ8PLEjl4LEC7riwM7+4tCu1Y9QkTiJTRd5Q9oBz7kHgMuAWYKZz7g3gRTPb4nWBIlVp/5HjPPRmGkuSs+gZ15AXbxpIQttGfpcl4qkKnSMIXtWzB9hDSeuIJsDcYMuIiV4WKFIVzIz5X+3ikcXp5B4v5t7LuvGzCzsTU11N4iTyVeQcwT3ATcAB4K/AfWZW6JyrBmwGFAQS1nYdzmPq/BRWbNzPgPiSJnFdWqhJnESPihwRxALXmNmO0hvNLOCcU7M4CVuBgPHqqh3MWLYBAx66shfjhqpJnESfipwj+M337FtfueWIVI2t+48yOSmFL7Yf4vyusTw2JoF2TdUkTqKT/ni9RJWi4gAvrNzGH97bRO0a1XhqbF/Gnt1W7SEkqikIJGqk7c5mUlIyqbtyuLx3S6aP7kMLNYkTURBI5MsvLObPH2xm1odbaVK3Js/fMIARCXF+lyUSMhQEEtHW7DjExLnJbNl/jGsHtOXBUT1pXFdN4kRKUxBIRDp2vIin3t7IK59tp3WjOrwyfhAXdmvud1kiIUlBIBHno037uX9eCruz87hxSHvuG96D+rX0rS5yIvrpkIiRnVvI9CXpzF2TSafm9XjjZ0MZ2KGp32WJhDwFgUSEt1KzeHBhGoeOFfA/wzpzzyVqEidSUQoCCWv7juQzbWEay1L30CuuIS/fPJA+bdQkTuRUKAgkLJkZc9dk8uiS9eQVFnPf5d2ZcEEnNYkTOQ0KAgk7Ow/lMmV+Cis3HyCxfRNmXNuXLi3q+12WSNhSEEjYCASMOZ9t58m3N+KAR0b35qeD21NNTeJEzoiCQMJCxr6jTE5KZvWOb7mgW3MeG9OHtk3UJE6kMigIJKQVFgeY/dFWnnlvM3VqVufpH57FNQPaqEmcSCVSEEjISt2VzcS5yaRn5TAyoRUPX9WH5g1q+V2WSMRREEjIyS8s5pn3NzP7o600rVeTWT8dwPA+ahIn4hUFgYSUL7cfYtLcZLYeOMYPz27LA1f0olHdGL/LEolongWBc64dMAdoBQSA2Wb2TJkxDngGGAnkAjeb2VqvapLQdfR4EU++tYE5n+2gbZM6/P3WQZzfVU3iRKqCl0cERcCvzWytc64BsMY5966ZpZcaMwLoGrwNBp4PfpQosnzjPqbOSyErJ59bzu3AvZd1p56axIlUGc9+2swsC8gK3j/inFsPtAFKB8FoYI6ZGfC5c66xcy4u+LkS4b49VsD0xenM+2oXXVrUZ+4d53B2+yZ+lyUSdarkv13OuQ5Af2BVmV1tgJ2lHmcGt/1XEDjnJgATAOLj4z2rU6qGmbE0ZQ/TFqVyOLeQuy/qwv9e0oVaNdQkTsQPngeBc64+kAT8wsxyyu4u51PsOxvMZgOzARITE7+zX8LHvpx8HliQyjvpe0lo04g54wfTq3VDv8sSiWqeBoFzLoaSEHjVzOaVMyQTaFfqcVtgt5c1iT/MjH+vzmT6knQKigJMHtGD287rSA01iRPxnZdXDTngRWC9mf3+BMMWAXc7516n5CRxts4PRJ5vDpY0ifs44wCDOjZlxjUJdGquJnEiocLLI4JzgXFAinPu6+C2KUA8gJnNApZSculoBiWXj97iYT1SxYoDxt8+3c7v3t5I9WqOR6/uw/WD4tUkTiTEeHnV0MeUfw6g9BgD7vKqBvHP5r1HmJiUzFffHGZY9+Y8NiaB1o3r+F2WiJRDF2tLpSooCjDrwy3M/CCDerWq88cf92N0v9ZqEicSwhQEUmmSMw8zcW4yG/YcYVTfOB66qjex9dUkTiTUKQjkjOUXFvOHdzfxwsqtxNavxexxZ3NZ71Z+lyUiFaQgkDPy+daDTE5KZvvBXH4yqB2TR/SkUR01iRMJJwoCOS1H8guZsWwDr676hvimdfnnbYM5p0us32WJyGlQEMgp+2DDXqbOT2VvTj63ndeRX13Wjbo19a0kEq700ysVduhYAY+8mcaCr3fTtUV9nrvzHPrHq0mcSLhTEMhJmRlvJmfx0KI0cvIK+fklXfmfizqrSZxIhFAQyPfak13SJO699Xs5q20jnrh9MD1aqUmcSCRREEi5zIzXv9zJY0vWUxgIMHVkT8af15Hqag8hEnEUBPIdOw4eY3JSCp9tPciQTk2ZcU1fOsTW87ssEfGIgkD+T3HAePmTbfzunY3EVKvGY2MSuG5gOzWJE4lwCgIBYOOekiZx63Ye5pIeLXh0TB/iGqlJnEg0UBBEuYKiAM+tyODZ5Rk0qB3DM9f146qz1CROJJooCKLY1zsPM2luMhv3HmF0v9b8ZlQvmqlJnEjUURBEobyCYp5+ZyMvfbKNFg1q8+JNiVzSs6XfZYmITxQEUebTLQeYnJTCN4dyuX5wPJNH9KBhbTWJE4lmCoIokZNfyONL1/PaFztp36wur90+hKGdm/ldloiEAAVBFHgvfS9TF6Sw/8hxJlzQiV9e2o06NdUeQkRKKAgi2MGjx3nozXTeXLebHq0aMHtcIme1a+x3WSISYhQEEcjMWPj1bh5+M42jx4v41Q+6cceFnalZo5rfpYlICFIQRJjdh/N4YEEqH2zYR792jXlybF+6tWzgd1kiEsIUBBEiEDD++cU3zFi2geKA8eCoXtx8Tgc1iRORk1IQRIBtB44xOSmZVdsOcW6XZjw+pi/xzer6XZaIhAnPgsA59xIwCthnZn3K2T8MWAhsC26aZ2aPeFVPJCoqDvDix9v4/bubqFmjGk9cm8CPEtupPYSInBIvjwj+BswE5nzPmJVmNsrDGiJW+u4cJiUlk7Irmx/0asmjV/ehZcPafpclImHIsyAws4+ccx28+vrR6nhRMTM/yOD5FVtoXDeGZ68fwMiEVjoKEJHT5vc5gqHOuXXAbuBeM0srb5BzbgIwASA+Pr4Kywsta3Z8y6SkZDL2HeWa/m14cFQvmtSr6XdZIhLm/AyCtUB7MzvqnBsJLAC6ljfQzGYDswESExOtyioMEbkFRTz19kb+9ul24hrW5uVbBnJR9xZ+lyUiEcK3IDCznFL3lzrnnnPOxZrZAb9qCkUfbz7A5HnJZH6bx7gh7Zk4vDsN1CRORCqRb0HgnGsF7DUzc84NAqoBB/2qJ9Rk5xXy2yXpvLE6k46x9fjXhCEM7qQmcSJS+by8fPQ1YBgQ65zLBKYBMQBmNgsYC9zpnCsC8oDrzCzqXvYpz9tpe3hwQSoHjxVw57DO/PySrtSOUZM4EfGGl1cN/eQk+2dScnmpBO0/cpyHFqWxJCWLnnENefGmgSS0beR3WSIS4fy+akgoaRI3b+0uHlmcTl5BMfdd3p0JF3QiprqaxImI9xQEPtt1OI8p81L4cNN+BsSXNInr0kJN4kSk6igIfBIIGP9YtYMnlm3AgIeu7MW4oWoSJyJVT0Hggy37jzI5KZkvt3/L+V1jeWxMAu2aqkmciPhDQVCFCosDvLByK398bzO1a1TjqbF9GXt2W7WHEBFfKQiqSOqubCYlJZO2O4fhvVvxyNW9adFATeJExH8KAo/lFxbz5w82M+vDrTSpW5PnbxjAiIQ4v8sSEfk/CgIPrd5+iIlJyWzdf4xrB7TlwVE9aVxXTeJEJLQoCDxw7HhJk7hXPttO60Z1eGX8IC7s1tzvskREyqUgqGQfbtrPlHkp7M7O46ahHbjv8u7Uq6V/ZhEJXfoNVUkO5xYwffF6ktZm0ql5Pf79s6Ekdmjqd1kiIielIKgEy1KyeHBhGt/mFnDXRZ3534vVJE5EwoeC4Azsy8nnNwvTeCttD71bN+SV8QPp3VpN4kQkvCgIToOZMXdNJtMXp5NfFGDi8O7cfr6axIlIeFIQnKKdh3KZMj+FlZsPMLBDE2Zc25fOzev7XZaIyGlTEFRQccD4+2fbefLtjThg+uje3DC4PdXUJE5EwpyCoAIy9h1hUlIKa3Z8y4XdmvPbMX1o20RN4kQkMigIvkdhcYC/fLiFP72fQd1a1fn9j85iTP82ahInIhFFQXACqbuyuW9uMuuzcrgiIY6HrupN8wa1/C5LRKTSKQjKyC8s5o/vbeaFlVtpWq8ms356NsP7tPK7LBERzygISvli2yEmJyWz9cAxfpzYjikje9KobozfZYmIeEpBABzJL+TJtzby98930LZJHf5x62DO6xrrd1kiIlUi6oNg+cZ9TJ2XQlZOPuPP7ci9l3ejbs2o/2cRkSgStb/xvj1WwPTF6cz7ahddWtRn7h3ncHb7Jn6XJSJS5TwLAufcS8AoYJ+Z9SlnvwOeAUYCucDNZrbWq3r+w8xYkpLFtIVpZOcVcs/FXbjr4i7UqqEmcSISnbw8IvgbMBOYc4L9I4Cuwdtg4PngR8/szcnnwQWpvJO+l4Q2jfjHbYPpGdfQy6cUEQl5ngWBmX3knOvwPUNGA3PMzIDPnXONnXNxZpblRT3LN+zjnte/oqAowP0jenDreR2poSZxIiK+niNoA+ws9TgzuO07QeCcmwBMAIiPjz+tJ+sYW48B8U146KredIytd1pfQ0QkEvn5X+Ly+jRYeQPNbLaZJZpZYvPmp/e3fzvE1uOV8YMUAiIiZfgZBJlAu1KP2wK7fapFRCRq+RkEi4AbXYkhQLZX5wdEROTEvLx89DVgGBDrnMsEpgExAGY2C1hKyaWjGZRcPnqLV7WIiMiJeXnV0E9Ost+Au7x6fhERqRhdPykiEuUUBCIiUU5BICIS5RQEIiJRzpWcsw0fzrn9wI7T/PRY4EAlluMnzSU0RcpcImUeoLn8R3szK/cduWEXBGfCObfazBL9rqMyaC6hKVLmEinzAM2lIvTSkIhIlFMQiIhEuWgLgtl+F1CJNJfQFClziZR5gOZyUlF1jkBERL4r2o4IRESkDAWBiEiUi8ggcM4Nd85tdM5lOOcml7PfOef+FNyf7Jwb4EedFVGBuQxzzmU7574O3n7jR50n45x7yTm3zzmXeoL94bQmJ5tLuKxJO+fccufceudcmnPu5+WMCYt1qeBcwmVdajvnvnDOrQvO5eFyxlTuuphZRN2A6sAWoBNQE1gH9CozZiSwjJK/kjYEWOV33Wcwl2HAYr9rrcBcLgAGAKkn2B8Wa1LBuYTLmsQBA4L3GwCbwvhnpSJzCZd1cUD94P0YYBUwxMt1icQjgkFAhpltNbMC4HVgdJkxo4E5VuJzoLFzLq6qC62AiswlLJjZR8Ch7xkSLmtSkbmEBTPLMrO1wftHgPWU/N3w0sJiXSo4l7AQ/Lc+GnwYE7yVvaqnUtclEoOgDbCz1ONMvvsNUZExoaCidQ4NHkYuc871rprSKl24rElFhdWaOOc6AP0p+d9naWG3Lt8zFwiTdXHOVXfOfQ3sA941M0/XxbM/TOMjV862smlakTGhoCJ1rqWkh8hR59xIYAHQ1evCPBAua1IRYbUmzrn6QBLwCzPLKbu7nE8J2XU5yVzCZl3MrBjo55xrDMx3zvUxs9LnpCp1XSLxiCATaFfqcVtg92mMCQUnrdPMcv5zGGlmS4EY51xs1ZVYacJlTU4qnNbEORdDyS/OV81sXjlDwmZdTjaXcFqX/zCzw8AKYHiZXZW6LpEYBF8CXZ1zHZ1zNYHrgEVlxiwCbgyeeR8CZJtZVlUXWgEnnYtzrpVzzgXvD6JkTQ9WeaVnLlzW5KTCZU2CNb4IrDez359gWFisS0XmEkbr0jx4JIBzrg5wKbChzLBKXZeIe2nIzIqcc3cDb1Ny1c1LZpbmnLsjuH8WsJSSs+4ZQC5wi1/1fp8KzmUscKdzrgjIA66z4GUFocQ59xolV23EOucygWmUnAQLqzWBCs0lLNYEOBcYB6QEX48GmALEQ9itS0XmEi7rEge84pyrTklYvWFmi738HaYWEyIiUS4SXxoSEZFToCAQEYlyCgIRkSinIBARiXIKAhGRKKcgEBGJcgoCEZEo9/8AhJkumot7wJYAAAAASUVORK5CYII=\n",
-      "text/plain": [
-       "<Figure size 432x288 with 1 Axes>"
+      "cell_type": "markdown",
+      "id": "23622f4a-62c9-4915-87b4-af1f4d6e30ec",
+      "metadata": {},
+      "source": [
+        "The Receiver Operating Characteristic \"ROC\" illustrates the performance of the binary classifier by plotting the false alarm probability ($P_{FA}$) on the horizontal axis and the detection probability ($P_D$) on the vertical axis. The area under the ROC-curve (AUC) is used to provide a single-figure quantification of the performance of the binary classifier based on the ROC. This article provides an interpretation of the AUC and connects the AUC to the Wilcoxon–Mann–Whitney statistic, which is a nonparametic test to compare two populations. This derivation is pretty hard to find but the connection between the AUC and the Wilcoxon–Mann–Whitney test is important insofar as it provides some perspective on the seemingly arbitrary use of AUC to quantify the performance of the binary classifier.\n",
+        "\n",
+        "Let's proceed with some definitions and some notation. A binary classifier can make two kinds of mistakes, usually and unhelpfully called Type I and Type II errors.  The *detection probability* is \n",
+        "\n",
+        "$$P_D= \\mathbb{P}(1|x \\in C_1)$$"
       ]
-     },
-     "metadata": {
-      "needs_background": "light"
-     },
-     "output_type": "display_data"
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 5,
+      "id": "5d1c1fb7-59b6-4d52-a9e2-6294ddc9758a",
+      "metadata": {},
+      "outputs": [
+        {
+          "name": "stdout",
+          "output_type": "stream",
+          "text": ["1\n"]
+        }
+      ],
+      "source": ["x=1\n", "print(x)"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 4,
+      "id": "1fcf3d25-cb81-4977-9cc5-91855f3c1b28",
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "image/png": "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\n",
+            "text/plain": ["<Figure size 432x288 with 1 Axes>"]
+          },
+          "metadata": {
+            "needs_background": "light"
+          },
+          "output_type": "display_data"
+        }
+      ],
+      "source": [
+        "import matplotlib.pyplot as plt\n",
+        "plt.plot([1, 2, 3, 4])\n",
+        "plt.ylabel('y=x')\n",
+        "plt.show()"
+      ]
+    }
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python 3 (ipykernel)",
+      "language": "python",
+      "name": "python3"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.10.4"
     }
-   ],
-   "source": [
-    "import matplotlib.pyplot as plt\n",
-    "plt.plot([1, 2, 3, 4])\n",
-    "plt.ylabel('y=x')\n",
-    "plt.show()"
-   ]
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
   },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.10.4"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
+  "nbformat": 4,
+  "nbformat_minor": 5
 }
diff --git a/packages/lexical/src/examples/content/Example.lexical.json b/packages/lexical/src/examples/content/Example.lexical.json
index b527662dd..556e58211 100644
--- a/packages/lexical/src/examples/content/Example.lexical.json
+++ b/packages/lexical/src/examples/content/Example.lexical.json
@@ -256,4 +256,4 @@
     "type": "root",
     "version": 1
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lexical/src/examples/index.tsx b/packages/lexical/src/examples/index.tsx
index 68e46483c..eed3ff8ab 100644
--- a/packages/lexical/src/examples/index.tsx
+++ b/packages/lexical/src/examples/index.tsx
@@ -4,14 +4,14 @@
  * MIT License
  */
 
-import "../../style/index.css";
+import '../../style/index.css';
 
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
 // import App from "./AppSimple";
-import App from "./AppNbformat";
+import App from './AppNbformat';
 
 const div = document.createElement('div');
 document.body.appendChild(div);
-const root = createRoot(div)
+const root = createRoot(div);
 
 root.render(<App />);
diff --git a/packages/lexical/src/hooks/index.ts b/packages/lexical/src/hooks/index.ts
index 4bb684e47..5d7b99100 100644
--- a/packages/lexical/src/hooks/index.ts
+++ b/packages/lexical/src/hooks/index.ts
@@ -5,5 +5,5 @@
  */
 
 export * from './useDebounce';
-export * from "./useLayoutEffect";
-export * from "./useModal";
+export * from './useLayoutEffect';
+export * from './useModal';
diff --git a/packages/lexical/src/hooks/useDebounce.ts b/packages/lexical/src/hooks/useDebounce.ts
index c221301c5..3a74326af 100644
--- a/packages/lexical/src/hooks/useDebounce.ts
+++ b/packages/lexical/src/hooks/useDebounce.ts
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import {debounce} from 'lodash-es';
-import {useMemo, useRef} from 'react';
+import { debounce } from 'lodash-es';
+import { useMemo, useRef } from 'react';
 
 export function useDebounce<T extends (...args: never[]) => void>(
   fn: T,
@@ -23,7 +23,7 @@ export function useDebounce<T extends (...args: never[]) => void>(
           }
         },
         ms,
-        {maxWait},
+        { maxWait },
       ),
     [ms, maxWait],
   );
diff --git a/packages/lexical/src/hooks/useModal.tsx b/packages/lexical/src/hooks/useModal.tsx
index 60c780388..02910b278 100644
--- a/packages/lexical/src/hooks/useModal.tsx
+++ b/packages/lexical/src/hooks/useModal.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {useCallback, useMemo, useState} from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import Modal from '../components/Modal';
 
 export const useModal = (): [
@@ -23,12 +23,13 @@ export const useModal = (): [
     if (modalContent === null) {
       return null;
     }
-    const {title, content, closeOnClickOutside} = modalContent;
+    const { title, content, closeOnClickOutside } = modalContent;
     return (
       <Modal
         onClose={onClose}
         title={title}
-        closeOnClickOutside={closeOnClickOutside}>
+        closeOnClickOutside={closeOnClickOutside}
+      >
         {content}
       </Modal>
     );
@@ -36,7 +37,7 @@ export const useModal = (): [
   const showModal = useCallback(
     (
       title: string,
-      // eslint-disable-next-line no-shadow
+
       getContent: (onClose: () => void) => JSX.Element,
       closeOnClickOutside = false,
     ) => {
@@ -49,6 +50,6 @@ export const useModal = (): [
     [onClose],
   );
   return [modal, showModal];
-}
+};
 
 export default useModal;
diff --git a/packages/lexical/src/index.ts b/packages/lexical/src/index.ts
index 1a1390ca0..555325ad7 100644
--- a/packages/lexical/src/index.ts
+++ b/packages/lexical/src/index.ts
@@ -4,12 +4,12 @@
  * MIT License
  */
 
-export * from "./components";
-export * from "./context";
-export * from "./convert";
-export * from "./editor";
-export * from "./hooks";
-export * from "./nodes";
-export * from "./plugins";
-export * from "./themes";
-export * from "./utils";
+export * from './components';
+export * from './context';
+export * from './convert';
+export * from './editor';
+export * from './hooks';
+export * from './nodes';
+export * from './plugins';
+export * from './themes';
+export * from './utils';
diff --git a/packages/lexical/src/nodes/EquationNode.tsx b/packages/lexical/src/nodes/EquationNode.tsx
index 2396b87a1..cea4edfda 100644
--- a/packages/lexical/src/nodes/EquationNode.tsx
+++ b/packages/lexical/src/nodes/EquationNode.tsx
@@ -11,8 +11,8 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {mergeRegister} from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
 import {
   $getNodeByKey,
   $getSelection,
@@ -22,7 +22,7 @@ import {
   KEY_ESCAPE_COMMAND,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
-import {useCallback, useEffect, useRef, useState} from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import EquationEditor from '../components/EquationEditor';
 import KatexRenderer from '../components/KatexRenderer';
 
@@ -66,7 +66,7 @@ function EquationComponent({
       return mergeRegister(
         editor.registerCommand(
           SELECTION_CHANGE_COMMAND,
-          (payload) => {
+          payload => {
             const activeElement = document.activeElement;
             const inputElem = inputRef.current;
             if (inputElem !== activeElement) {
@@ -78,7 +78,7 @@ function EquationComponent({
         ),
         editor.registerCommand(
           KEY_ESCAPE_COMMAND,
-          (payload) => {
+          payload => {
             const activeElement = document.activeElement;
             const inputElem = inputRef.current;
             if (inputElem === activeElement) {
@@ -91,7 +91,7 @@ function EquationComponent({
         ),
       );
     } else {
-      return editor.registerUpdateListener(({editorState}) => {
+      return editor.registerUpdateListener(({ editorState }) => {
         const isSelected = editorState.read(() => {
           const selection = $getSelection();
           return (
diff --git a/packages/lexical/src/nodes/ImageNode.tsx b/packages/lexical/src/nodes/ImageNode.tsx
index c6a6cd1a2..fa892d128 100644
--- a/packages/lexical/src/nodes/ImageNode.tsx
+++ b/packages/lexical/src/nodes/ImageNode.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {Suspense, useCallback, useEffect, useRef, useState} from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import type {
   DOMConversionMap,
   DOMConversionOutput,
@@ -19,17 +19,17 @@ import type {
   SerializedLexicalNode,
   Spread,
 } from 'lexical';
-import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {HashtagPlugin} from '@lexical/react/LexicalHashtagPlugin';
-import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import {LinkPlugin} from '@lexical/react/LexicalLinkPlugin';
-import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
-import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
-import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
-import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import {mergeRegister} from '@lexical/utils';
+import { mergeRegister } from '@lexical/utils';
 import {
   $createNodeSelection,
   $getNodeByKey,
@@ -52,7 +52,6 @@ import ContentEditable from '../components/ContentEditable';
 import ImageResizer from '../components/ImageResizer';
 import Placeholder from '../components/Placeholder';
 
-
 export interface ImagePayload {
   altText: string;
   caption?: LexicalEditor;
@@ -68,7 +67,7 @@ const imageCache = new Set();
 
 function useSuspenseImage(src: string) {
   if (!imageCache.has(src)) {
-    throw new Promise((resolve) => {
+    throw new Promise(resolve => {
       const img = new Image();
       img.src = src;
       img.onload = () => {
@@ -81,9 +80,9 @@ function useSuspenseImage(src: string) {
 
 function convertImageElement(domNode: Node): null | DOMConversionOutput {
   if (domNode instanceof HTMLImageElement) {
-    const {alt: altText, src} = domNode;
-    const node = $createImageNode({altText, src});
-    return {node};
+    const { alt: altText, src } = domNode;
+    const node = $createImageNode({ altText, src });
+    return { node };
   }
   return null;
 }
@@ -100,7 +99,7 @@ function LazyImage({
   altText: string;
   className: string | null;
   height: 'inherit' | number;
-  imageRef: {current: null | HTMLImageElement};
+  imageRef: { current: null | HTMLImageElement };
   maxWidth: number;
   src: string;
   width: 'inherit' | number;
@@ -149,9 +148,7 @@ function ImageComponent({
     useLexicalNodeSelection(nodeKey);
   const [isResizing, setIsResizing] = useState<boolean>(false);
   const [editor] = useLexicalComposerContext();
-  const [selection, ] = useState<
-    RangeSelection | NodeSelection | null
-  >(null);
+  const [selection] = useState<RangeSelection | NodeSelection | null>(null);
   const activeEditorRef = useRef<LexicalEditor | null>(null);
 
   const onDelete = useCallback(
@@ -224,9 +221,9 @@ function ImageComponent({
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({editorState}) => {
+      editor.registerUpdateListener(({ editorState }) => {
         // TODO(ECH) Fix this.
-//        setSelection(editorState.read(() => $getSelection()));
+        //        setSelection(editorState.read(() => $getSelection()));
       }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
@@ -238,7 +235,7 @@ function ImageComponent({
       ),
       editor.registerCommand<MouseEvent>(
         CLICK_COMMAND,
-        (payload) => {
+        payload => {
           const event = payload;
 
           if (isResizing) {
@@ -418,7 +415,7 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
   }
 
   static importJSON(serializedNode: SerializedImageNode): ImageNode {
-    const {altText, height, width, maxWidth, caption, src, showCaption} =
+    const { altText, height, width, maxWidth, caption, src, showCaption } =
       serializedNode;
     const node = $createImageNode({
       altText,
@@ -440,7 +437,7 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
     const element = document.createElement('img');
     element.setAttribute('src', this.__src);
     element.setAttribute('alt', this.__altText);
-    return {element};
+    return { element };
   }
 
   static importDOM(): DOMConversionMap | null {
diff --git a/packages/lexical/src/nodes/JupyterCellNode.tsx b/packages/lexical/src/nodes/JupyterCellNode.tsx
index 169a347c5..869920962 100644
--- a/packages/lexical/src/nodes/JupyterCellNode.tsx
+++ b/packages/lexical/src/nodes/JupyterCellNode.tsx
@@ -4,13 +4,20 @@
  * MIT License
  */
 
-import { ReactNode } from "react";
-import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode } from "lexical";
-import { IOutput } from "@jupyterlab/nbformat";
-import { JupyterCellProps } from "./../plugins/JupyterCellPlugin";
-import JupyterCellNodeComponent from "./JupyterCellNodeComponent";
-
-const TYPE = "jupyter-cell";
+import { ReactNode } from 'react';
+import {
+  DecoratorNode,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+} from 'lexical';
+import { IOutput } from '@jupyterlab/nbformat';
+import { JupyterCellProps } from './../plugins/JupyterCellPlugin';
+import JupyterCellNodeComponent from './JupyterCellNodeComponent';
+
+const TYPE = 'jupyter-cell';
 
 export class JupyterCellNode extends DecoratorNode<ReactNode> {
   private __code: string;
@@ -27,11 +34,25 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
   /** @override */
   static clone(node: JupyterCellNode) {
     console.debug(`clone: node: ${JSON.stringify(node, null, 2)}`);
-    return new JupyterCellNode(node.__code, node.__outputs, node.__loading, node.__autoStart, node.__data, node.__key);
+    return new JupyterCellNode(
+      node.__code,
+      node.__outputs,
+      node.__loading,
+      node.__autoStart,
+      node.__data,
+      node.__key,
+    );
   }
 
   /** @override */
-  constructor(code: string, outputs: IOutput[], loading: string, autoStart: boolean, data = "[]", key?: NodeKey) {
+  constructor(
+    code: string,
+    outputs: IOutput[],
+    loading: string,
+    autoStart: boolean,
+    data = '[]',
+    key?: NodeKey,
+  ) {
     super(key);
     this.__code = code;
     this.__outputs = outputs;
@@ -42,13 +63,13 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
 
   /** @override */
   createDOM(config: EditorConfig) {
-    const div = document.createElement("div");
+    const div = document.createElement('div');
     const theme = config.theme;
     const className = theme.image;
     if (className !== undefined) {
       div.className = className;
     }
-    console.log("createDOM", div);
+    console.log('createDOM', div);
     return div;
   }
 
@@ -59,15 +80,19 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
 
   /** @override */
   decorate(editor: LexicalEditor) {
-    console.log(`decorate -> key: ${this.getKey()} outputs: ${this.__outputs} data: ${this.__data}`);
-    return <JupyterCellNodeComponent
-      nodeKey={this.getKey()}
-      code={this.__code}
-      outputs={this.__outputs}
-      loading={this.__loading}
-      autoStart={this.__autoStart}
-      data={this.__data}
-    />
+    console.log(
+      `decorate -> key: ${this.getKey()} outputs: ${this.__outputs} data: ${this.__data}`,
+    );
+    return (
+      <JupyterCellNodeComponent
+        nodeKey={this.getKey()}
+        code={this.__code}
+        outputs={this.__outputs}
+        loading={this.__loading}
+        autoStart={this.__autoStart}
+        data={this.__data}
+      />
+    );
   }
 
   setCode(code: string) {
@@ -114,7 +139,13 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
   /** @override */
   static importJSON(serializedNode: SerializedLexicalNode) {
     const n = serializedNode as unknown as JupyterCellNode;
-    return new JupyterCellNode(n.code, n.outputs, n.loading, n.autoStart, n.data);
+    return new JupyterCellNode(
+      n.code,
+      n.outputs,
+      n.loading,
+      n.autoStart,
+      n.data,
+    );
   }
 
   /** @override */
@@ -129,7 +160,6 @@ export class JupyterCellNode extends DecoratorNode<ReactNode> {
       version: 1,
     };
   }
-
 }
 
 export function $createJupyterCellNode(props: JupyterCellProps) {
diff --git a/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx b/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx
index e539a8ab4..f45983633 100644
--- a/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx
+++ b/packages/lexical/src/nodes/JupyterCellNodeComponent.tsx
@@ -4,9 +4,9 @@
  * MIT License
  */
 
-import { NodeKey } from "lexical";
+import { NodeKey } from 'lexical';
 import { IOutput } from '@jupyterlab/nbformat';
-import { JupyterCellComponent } from "./../components/JupyterCellComponent";
+import { JupyterCellComponent } from './../components/JupyterCellComponent';
 
 type IJupyterCellNodeComponentProps = {
   nodeKey: NodeKey;
@@ -15,9 +15,11 @@ type IJupyterCellNodeComponentProps = {
   loading: string;
   autoStart: boolean;
   data: any;
-}
+};
 
-export const JupyterCellNodeComponent = (props: IJupyterCellNodeComponentProps) => {
+export const JupyterCellNodeComponent = (
+  props: IJupyterCellNodeComponentProps,
+) => {
   const { code, outputs, loading, autoStart } = props;
   return (
     <>
@@ -29,6 +31,6 @@ export const JupyterCellNodeComponent = (props: IJupyterCellNodeComponentProps)
       />
     </>
   );
-}
+};
 
 export default JupyterCellNodeComponent;
diff --git a/packages/lexical/src/nodes/JupyterCodeHighlightNode.ts b/packages/lexical/src/nodes/JupyterCodeHighlightNode.ts
index 95361f11f..8ea2fb6cb 100644
--- a/packages/lexical/src/nodes/JupyterCodeHighlightNode.ts
+++ b/packages/lexical/src/nodes/JupyterCodeHighlightNode.ts
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-// eslint-disable-next-line simple-import-sort/imports
 import {
   $isLineBreakNode,
   EditorConfig,
@@ -86,7 +85,7 @@ export const getCodeLanguages = (): Array<string> =>
     .filter(
       // Prism has several language helpers mixed into languages object
       // so filtering them out here to get langs list
-      (language) => typeof Prism.languages[language] !== 'function',
+      language => typeof Prism.languages[language] !== 'function',
     )
     .sort();
 
@@ -131,11 +130,7 @@ export class JupyterCodeHighlightNode extends TextNode {
     return element;
   }
 
-  updateDOM(
-    prevNode: this,
-    dom: HTMLElement,
-    config: EditorConfig,
-  ): boolean {
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
     const update = super.updateDOM(prevNode, dom, config);
     const prevClassName = getHighlightThemeClass(
       config.theme,
diff --git a/packages/lexical/src/nodes/JupyterCodeHighlighter.ts b/packages/lexical/src/nodes/JupyterCodeHighlighter.ts
index d1b531003..49499bf32 100644
--- a/packages/lexical/src/nodes/JupyterCodeHighlighter.ts
+++ b/packages/lexical/src/nodes/JupyterCodeHighlighter.ts
@@ -4,8 +4,7 @@
  * MIT License
  */
 
-// eslint-disable-next-line simple-import-sort/imports
-import type {LexicalCommand, LexicalEditor, LexicalNode} from 'lexical';
+import type { LexicalCommand, LexicalEditor, LexicalNode } from 'lexical';
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-clike';
 import 'prismjs/components/prism-javascript';
@@ -18,7 +17,7 @@ import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-swift';
-import {mergeRegister} from '@lexical/utils';
+import { mergeRegister } from '@lexical/utils';
 import {
   $createLineBreakNode,
   $createTextNode,
@@ -44,7 +43,7 @@ import {
   getFirstJupyterCodeHighlightNodeOfLine,
   getLastJupyterCodeHighlightNodeOfLine,
 } from './JupyterCodeHighlightNode';
-import {$isJupyterCodeNode, JupyterCodeNode} from './JupyterCodeNode';
+import { $isJupyterCodeNode, JupyterCodeNode } from './JupyterCodeNode';
 
 function isSpaceOrTabChar(char: string): boolean {
   return char === ' ' || char === '\t';
@@ -193,12 +192,12 @@ function updateCodeGutter(node: JupyterCodeNode, editor: LexicalEditor): void {
   }
   const children = node.getChildren();
   const childrenLength = children.length;
-  // @ts-ignore: internal field
+  // @ts-expect-error: internal field
   if (childrenLength === codeElement.__cachedChildrenLength) {
     // Avoid updating the attribute if the children length hasn't changed.
     return;
   }
-  // @ts-ignore:: internal field
+  // @ts-expect-error: internal field
   codeElement.__cachedChildrenLength = childrenLength;
   let gutter = '1';
   let count = 1;
@@ -242,7 +241,7 @@ function codeNodeTransform(node: JupyterCodeNode, editor: LexicalEditor) {
         );
         const highlightNodes = getHighlightNodes(tokens);
         const diffRange = getDiffRange(node.getChildren(), highlightNodes);
-        const {from, to, nodesForReplacement} = diffRange;
+        const { from, to, nodesForReplacement } = diffRange;
         if (from !== to || nodesForReplacement.length) {
           node.splice(from, to - from, nodesForReplacement);
           return true;
@@ -264,7 +263,7 @@ function getHighlightNodes(
 ): Array<LexicalNode> {
   const nodes: LexicalNode[] = [];
 
-  tokens.forEach((token) => {
+  tokens.forEach(token => {
     if (typeof token === 'string') {
       const partials = token.split('\n');
       for (let i = 0; i < partials.length; i++) {
@@ -277,7 +276,7 @@ function getHighlightNodes(
         }
       }
     } else {
-      const {content} = token;
+      const { content } = token;
       if (typeof content === 'string') {
         nodes.push($createJupyterCodeHighlightNode(content, token.type));
       } else if (
@@ -339,7 +338,7 @@ function updateAndRetainSelection(
 
   // If it was non-element anchor then we walk through child nodes
   // and looking for a position of original text offset
-  node.getChildren().some((_node) => {
+  node.getChildren().some(_node => {
     if ($isTextNode(_node)) {
       const textContentSize = _node.getTextContentSize();
       if (textContentSize >= textOffset) {
@@ -405,7 +404,10 @@ function getDiffRange(
 function isEqual(nodeA: LexicalNode, nodeB: LexicalNode): boolean {
   // Only checking for code higlight nodes and linebreaks. If it's regular text node
   // returning false so that it's transformed into code highlight node
-  if ($isJupyterCodeHighlightNode(nodeA) && $isJupyterCodeHighlightNode(nodeB)) {
+  if (
+    $isJupyterCodeHighlightNode(nodeA) &&
+    $isJupyterCodeHighlightNode(nodeB)
+  ) {
     return (
       nodeA.__text === nodeB.__text &&
       nodeA.__highlightType === nodeB.__highlightType
@@ -484,14 +486,17 @@ function handleShiftLines(
   }
   // I'm not quite sure why, but it seems like calling anchor.getNode() collapses the selection here
   // So first, get the anchor and the focus, then get their nodes
-  const {anchor, focus} = selection;
+  const { anchor, focus } = selection;
   const anchorOffset = anchor.offset;
   const focusOffset = focus.offset;
   const anchorNode = anchor.getNode();
   const focusNode = focus.getNode();
   const arrowIsUp = type === KEY_ARROW_UP_COMMAND;
   // Ensure the selection is within the codeblock
-  if (!$isJupyterCodeHighlightNode(anchorNode) || !$isJupyterCodeHighlightNode(focusNode)) {
+  if (
+    !$isJupyterCodeHighlightNode(anchorNode) ||
+    !$isJupyterCodeHighlightNode(focusNode)
+  ) {
     return false;
   }
   if (!event.altKey) {
@@ -560,14 +565,14 @@ function handleShiftLines(
   let insertionPoint =
     maybeInsertionPoint != null ? maybeInsertionPoint : sibling;
   linebreak.remove();
-  range.forEach((node) => node.remove());
+  range.forEach(node => node.remove());
   if (type === KEY_ARROW_UP_COMMAND) {
-    range.forEach((node) => insertionPoint.insertBefore(node));
+    range.forEach(node => insertionPoint.insertBefore(node));
     insertionPoint.insertBefore(linebreak);
   } else {
     insertionPoint.insertAfter(linebreak);
     insertionPoint = linebreak;
-    range.forEach((node) => {
+    range.forEach(node => {
       insertionPoint.insertAfter(node);
       insertionPoint = node;
     });
@@ -584,19 +589,22 @@ function handleMoveTo(
   if (!$isRangeSelection(selection)) {
     return false;
   }
-  const {anchor, focus} = selection;
+  const { anchor, focus } = selection;
   const anchorNode = anchor.getNode();
   const focusNode = focus.getNode();
   const isMoveToStart = type === MOVE_TO_START;
-  if (!$isJupyterCodeHighlightNode(anchorNode) || !$isJupyterCodeHighlightNode(focusNode)) {
+  if (
+    !$isJupyterCodeHighlightNode(anchorNode) ||
+    !$isJupyterCodeHighlightNode(focusNode)
+  ) {
     return false;
   }
   let node;
   let offset;
   if (isMoveToStart) {
-    ({node, offset} = getStartOfCodeInLine(focusNode));
+    ({ node, offset } = getStartOfCodeInLine(focusNode));
   } else {
-    ({node, offset} = getEndOfJupyterCodeInLine(focusNode));
+    ({ node, offset } = getEndOfJupyterCodeInLine(focusNode));
   }
   if (node !== null && offset !== -1) {
     selection.setTextNodeRange(node, offset, node, offset);
@@ -613,7 +621,7 @@ export function registerCodeHighlighting(editor: LexicalEditor): () => void {
     );
   }
   return mergeRegister(
-    editor.registerMutationListener(JupyterCodeNode, (mutations) => {
+    editor.registerMutationListener(JupyterCodeNode, mutations => {
       editor.update(() => {
         for (const [key, type] of mutations) {
           if (type !== 'destroyed') {
@@ -625,13 +633,13 @@ export function registerCodeHighlighting(editor: LexicalEditor): () => void {
         }
       });
     }),
-    editor.registerNodeTransform(JupyterCodeNode, (node) =>
+    editor.registerNodeTransform(JupyterCodeNode, node =>
       codeNodeTransform(node, editor),
     ),
-    editor.registerNodeTransform(TextNode, (node) =>
+    editor.registerNodeTransform(TextNode, node =>
       textNodeTransform(node, editor),
     ),
-    editor.registerNodeTransform(JupyterCodeHighlightNode, (node) =>
+    editor.registerNodeTransform(JupyterCodeHighlightNode, node =>
       textNodeTransform(node, editor),
     ),
     editor.registerCommand(
diff --git a/packages/lexical/src/nodes/JupyterCodeNode.ts b/packages/lexical/src/nodes/JupyterCodeNode.ts
index 598202e49..a4cf72014 100644
--- a/packages/lexical/src/nodes/JupyterCodeNode.ts
+++ b/packages/lexical/src/nodes/JupyterCodeNode.ts
@@ -4,7 +4,6 @@
  * MIT License
  */
 
-// eslint-disable-next-line simple-import-sort/imports
 import type {
   DOMConversionMap,
   DOMConversionOutput,
@@ -23,11 +22,14 @@ import {
   $isRangeSelection,
   ElementNode,
 } from 'lexical';
-import {addClassNamesToElement} from '@lexical/utils';
+import { addClassNamesToElement } from '@lexical/utils';
 import { UUID } from '@lumino/coreutils';
-import type {JupyterCodeHighlightNode} from './JupyterCodeHighlightNode';
-import { $createJupyterCodeHighlightNode, getFirstJupyterCodeHighlightNodeOfLine } from './JupyterCodeHighlightNode';
-import { CODE_UUID_TO_CODE_KEY } from "../plugins/JupyterCellOutputPlugin";
+import type { JupyterCodeHighlightNode } from './JupyterCodeHighlightNode';
+import {
+  $createJupyterCodeHighlightNode,
+  getFirstJupyterCodeHighlightNodeOfLine,
+} from './JupyterCodeHighlightNode';
+import { CODE_UUID_TO_CODE_KEY } from '../plugins/JupyterCellOutputPlugin';
 
 import * as Prism from 'prismjs';
 import 'prismjs/components/prism-clike';
@@ -73,10 +75,18 @@ export class JupyterCodeNode extends ElementNode {
   }
 
   static clone(node: JupyterCodeNode): JupyterCodeNode {
-    return new JupyterCodeNode(node.__language, node.__codeNodeUuid, node.__key);
+    return new JupyterCodeNode(
+      node.__language,
+      node.__codeNodeUuid,
+      node.__key,
+    );
   }
 
-  constructor(language?: string | null | undefined, codeNodeUuid? :string, key?: NodeKey) {
+  constructor(
+    language?: string | null | undefined,
+    codeNodeUuid?: string,
+    key?: NodeKey,
+  ) {
     super(key);
     this.__language = mapToPrismLanguage(language);
     this.__codeNodeUuid = codeNodeUuid || UUID.uuid4();
@@ -188,7 +198,10 @@ export class JupyterCodeNode extends ElementNode {
   }
 
   static importJSON(serializedNode: SerializedCodeNode): JupyterCodeNode {
-    const node = $createJupyterCodeNode(serializedNode.language, serializedNode.codeNodeUuid);
+    const node = $createJupyterCodeNode(
+      serializedNode.language,
+      serializedNode.codeNodeUuid,
+    );
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
@@ -266,7 +279,7 @@ export class JupyterCodeNode extends ElementNode {
   collapseAtStart(): true {
     const paragraph = $createParagraphNode();
     const children = this.getChildren();
-    children.forEach((child) => paragraph.append(child));
+    children.forEach(child => paragraph.append(child));
     this.replace(paragraph);
     return true;
   }
@@ -283,7 +296,7 @@ export class JupyterCodeNode extends ElementNode {
 
 export function $createJupyterCodeNode(
   language?: string | null | undefined,
-  codeNodeUuid?: string
+  codeNodeUuid?: string,
 ): JupyterCodeNode {
   return new JupyterCodeNode(language, codeNodeUuid);
 }
@@ -295,30 +308,30 @@ export function $isJupyterCodeNode(
 }
 
 function convertPreElement(domNode: Node): DOMConversionOutput {
-  return {node: $createJupyterCodeNode("python")};
+  return { node: $createJupyterCodeNode('python') };
 }
 
 function convertDivElement(domNode: Node): DOMConversionOutput {
   // domNode is a <div> since we matched it by nodeName
   const div = domNode as HTMLDivElement;
   return {
-    after: (childLexicalNodes) => {
+    after: childLexicalNodes => {
       const domParent = domNode.parentNode;
       if (domParent != null && domNode !== domParent.lastChild) {
         childLexicalNodes.push($createLineBreakNode());
       }
       return childLexicalNodes;
     },
-    node: isCodeElement(div) ? $createJupyterCodeNode("python") : null,
+    node: isCodeElement(div) ? $createJupyterCodeNode('python') : null,
   };
 }
 
 function convertTableElement(): DOMConversionOutput {
-  return {node: $createJupyterCodeNode("python")};
+  return { node: $createJupyterCodeNode('python') };
 }
 
 function convertCodeNoop(): DOMConversionOutput {
-  return {node: null};
+  return { node: null };
 }
 
 function convertTableCellElement(domNode: Node): DOMConversionOutput {
@@ -326,7 +339,7 @@ function convertTableCellElement(domNode: Node): DOMConversionOutput {
   const cell = domNode as HTMLTableCellElement;
 
   return {
-    after: (childLexicalNodes) => {
+    after: childLexicalNodes => {
       if (cell.parentNode && cell.parentNode.nextSibling) {
         // Append newline between code lines
         childLexicalNodes.push($createLineBreakNode());
diff --git a/packages/lexical/src/nodes/JupyterOutputNode.tsx b/packages/lexical/src/nodes/JupyterOutputNode.tsx
index 44fd971d8..f58892afa 100644
--- a/packages/lexical/src/nodes/JupyterOutputNode.tsx
+++ b/packages/lexical/src/nodes/JupyterOutputNode.tsx
@@ -4,16 +4,29 @@
  * MIT License
  */
 
-import { LexicalEditor, EditorConfig, DecoratorNode, LexicalNode, NodeKey, Spread, SerializedLexicalNode } from "lexical";
+import {
+  LexicalEditor,
+  EditorConfig,
+  DecoratorNode,
+  LexicalNode,
+  NodeKey,
+  Spread,
+  SerializedLexicalNode,
+} from 'lexical';
 import { UUID } from '@lumino/coreutils';
 import { IOutput } from '@jupyterlab/nbformat';
-import { OUTPUT_UUID_TO_CODE_UUID, CODE_UUID_TO_OUTPUT_KEY, CODE_UUID_TO_OUTPUT_UUID, OUTPUT_UUID_TO_OUTPUT_KEY } from "../plugins/JupyterCellOutputPlugin";
-import { OutputAdapter, newUuid } from "@datalayer/jupyter-react";
-import JupyterOutputComponent from "../components/JupyterOutputComponent";
+import {
+  OUTPUT_UUID_TO_CODE_UUID,
+  CODE_UUID_TO_OUTPUT_KEY,
+  CODE_UUID_TO_OUTPUT_UUID,
+  OUTPUT_UUID_TO_OUTPUT_KEY,
+} from '../plugins/JupyterCellOutputPlugin';
+import { OutputAdapter, newUuid } from '@datalayer/jupyter-react';
+import JupyterOutputComponent from '../components/JupyterOutputComponent';
 
 export type SerializedJupyterOutputNode = Spread<
   {
-    type: "jupyter-output",
+    type: 'jupyter-output';
     source: string;
     outputs: IOutput[];
     codeNodeUuid: string;
@@ -34,25 +47,34 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
 
   /** @override */
   static getType() {
-    return "jupyter-output";
+    return 'jupyter-output';
   }
 
   /** @override */
   static clone(node: JupyterOutputNode) {
-     return new JupyterOutputNode(
-       node.getCode(),
-       node.__outputAdapter,
-       node.__outputs,
-       node.__autoRun,
-       node.__codeNodeUuid,
-       node.__outputNodeUuid,
-       node.__key
-       );
+    return new JupyterOutputNode(
+      node.getCode(),
+      node.__outputAdapter,
+      node.__outputs,
+      node.__autoRun,
+      node.__codeNodeUuid,
+      node.__outputNodeUuid,
+      node.__key,
+    );
   }
 
   /** @override */
-  static importJSON(serializedNode: SerializedJupyterOutputNode): JupyterOutputNode {
-    return $createJupyterOutputNode(serializedNode.source, new OutputAdapter(newUuid(), undefined, []), serializedNode.outputs, false, serializedNode.codeNodeUuid, serializedNode.outputNodeUuid);
+  static importJSON(
+    serializedNode: SerializedJupyterOutputNode,
+  ): JupyterOutputNode {
+    return $createJupyterOutputNode(
+      serializedNode.source,
+      new OutputAdapter(newUuid(), undefined, []),
+      serializedNode.outputs,
+      false,
+      serializedNode.codeNodeUuid,
+      serializedNode.outputNodeUuid,
+    );
   }
 
   /** @override */
@@ -63,7 +85,7 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
     autoRun: boolean,
     codeNodeUuid?: string,
     outputNodeUuid?: string,
-    key?: NodeKey
+    key?: NodeKey,
   ) {
     super(key);
     this.__codeNodeUuid = codeNodeUuid || UUID.uuid4();
@@ -151,31 +173,33 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
 
   /** @override */
   isTopLevel(): boolean {
-    return true;    
+    return true;
   }
 
   /** @override */
   isIsolated(): boolean {
-    return false;    
+    return false;
   }
 
   /** @override */
   decorate(_editor: LexicalEditor, _config: EditorConfig) {
-    return <JupyterOutputComponent
-      code={this.getCode()}
-      outputs={this.__outputs}
-      outputAdapter={this.__outputAdapter}
-      codeNodeUuid={this.__codeNodeUuid}
-      outputNodeUuid={this.__outputNodeUuid}
-      executeTrigger={this.getExecuteTrigger()}
-      autoRun={this.__autoRun}
+    return (
+      <JupyterOutputComponent
+        code={this.getCode()}
+        outputs={this.__outputs}
+        outputAdapter={this.__outputAdapter}
+        codeNodeUuid={this.__codeNodeUuid}
+        outputNodeUuid={this.__outputNodeUuid}
+        executeTrigger={this.getExecuteTrigger()}
+        autoRun={this.__autoRun}
       />
+    );
   }
 
   /** @override */
   exportJSON(): SerializedJupyterOutputNode {
     return {
-      type: "jupyter-output",
+      type: 'jupyter-output',
       source: this.getCode(),
       outputs: this.__outputAdapter.outputArea.model.toJSON(),
       codeNodeUuid: this.getCodeNodeUuid(),
@@ -196,9 +220,8 @@ export class JupyterOutputNode extends DecoratorNode<JSX.Element> {
   public executeCode(code: string) {
     this.setCode(code);
     this.__outputAdapter.execute(code);
-//    this.setExecuteTrigger(this.getExecuteTrigger() + 1);
+    //    this.setExecuteTrigger(this.getExecuteTrigger() + 1);
   }
-
 }
 
 export function $createJupyterOutputNode(
@@ -208,7 +231,7 @@ export function $createJupyterOutputNode(
   autoRun: boolean,
   codeNodeUuid: string,
   outputNodeUuid: string,
-  ): JupyterOutputNode {
+): JupyterOutputNode {
   return new JupyterOutputNode(
     code,
     outputAdapter,
diff --git a/packages/lexical/src/nodes/YouTubeNode.tsx b/packages/lexical/src/nodes/YouTubeNode.tsx
index c7a4678d0..de8938ab6 100644
--- a/packages/lexical/src/nodes/YouTubeNode.tsx
+++ b/packages/lexical/src/nodes/YouTubeNode.tsx
@@ -12,8 +12,11 @@ import type {
   NodeKey,
   Spread,
 } from 'lexical';
-import {BlockWithAlignableContents} from '@lexical/react/LexicalBlockWithAlignableContents';
-import { DecoratorBlockNode, SerializedDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from '@lexical/react/LexicalDecoratorBlockNode';
 
 type YouTubeComponentProps = Readonly<{
   className: Readonly<{
@@ -35,7 +38,8 @@ function YouTubeComponent({
     <BlockWithAlignableContents
       className={className}
       format={format}
-      nodeKey={nodeKey}>
+      nodeKey={nodeKey}
+    >
       <iframe
         width="560"
         height="315"
diff --git a/packages/lexical/src/nodes/index.ts b/packages/lexical/src/nodes/index.ts
index bf6c7400d..7cb763e20 100644
--- a/packages/lexical/src/nodes/index.ts
+++ b/packages/lexical/src/nodes/index.ts
@@ -4,11 +4,11 @@
  * MIT License
  */
 
-export * from "./EquationNode";
-export * from "./ImageNode";
-export * from "./JupyterCodeHighlightNode";
-export * from "./JupyterCodeHighlighter";
-export * from "./JupyterCodeNode";
-export * from "./JupyterOutputNode";
-export * from "./JupyterCellNode";
-export * from "./YouTubeNode";
+export * from './EquationNode';
+export * from './ImageNode';
+export * from './JupyterCodeHighlightNode';
+export * from './JupyterCodeHighlighter';
+export * from './JupyterCodeNode';
+export * from './JupyterOutputNode';
+export * from './JupyterCellNode';
+export * from './YouTubeNode';
diff --git a/packages/lexical/src/plugins/AutoEmbedPlugin.tsx b/packages/lexical/src/plugins/AutoEmbedPlugin.tsx
index 0938439b5..85f37074a 100644
--- a/packages/lexical/src/plugins/AutoEmbedPlugin.tsx
+++ b/packages/lexical/src/plugins/AutoEmbedPlugin.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import type {LexicalEditor} from 'lexical';
+import type { LexicalEditor } from 'lexical';
 
 import {
   AutoEmbedOption,
@@ -13,14 +13,14 @@ import {
   LexicalAutoEmbedPlugin,
   URL_MATCHER,
 } from '@lexical/react/LexicalAutoEmbedPlugin';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {useMemo, useState} from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 
 import useModal from '../hooks/useModal';
 import Button from '../components/Button';
-import {DialogActions} from '../components/Dialog';
-import {INSERT_YOUTUBE_COMMAND} from './YouTubePlugin';
+import { DialogActions } from '../components/Dialog';
+import { INSERT_YOUTUBE_COMMAND } from './YouTubePlugin';
 
 interface PlaygroundEmbedConfig extends EmbedConfig {
   // Human readable name of the embeded content e.g. Tweet or Google Map.
@@ -73,9 +73,7 @@ export const YoutubeEmbedConfig: PlaygroundEmbedConfig = {
   type: 'youtube-video',
 };
 
-export const EmbedConfigs = [
-  YoutubeEmbedConfig,
-];
+export const EmbedConfigs = [YoutubeEmbedConfig];
 
 function AutoEmbedMenuItem({
   index,
@@ -104,7 +102,8 @@ function AutoEmbedMenuItem({
       aria-selected={isSelected}
       id={'typeahead-item-' + index}
       onMouseEnter={onMouseEnter}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       <span className="text">{option.title}</span>
     </li>
   );
@@ -165,11 +164,9 @@ export function AutoEmbedDialog({
       debounce((inputText: string) => {
         const urlMatch = URL_MATCHER.exec(inputText);
         if (embedConfig != null && inputText != null && urlMatch != null) {
-          Promise.resolve(embedConfig.parseUrl(inputText)).then(
-            (parseResult) => {
-              setEmbedResult(parseResult);
-            },
-          );
+          Promise.resolve(embedConfig.parseUrl(inputText)).then(parseResult => {
+            setEmbedResult(parseResult);
+          });
         } else if (embedResult != null) {
           setEmbedResult(null);
         }
@@ -185,7 +182,7 @@ export function AutoEmbedDialog({
   };
 
   return (
-    <div style={{width: '600px'}}>
+    <div style={{ width: '600px' }}>
       <div className="Input__wrapper">
         <input
           type="text"
@@ -193,8 +190,8 @@ export function AutoEmbedDialog({
           placeholder={embedConfig.exampleUrl}
           value={text}
           data-test-id={`${embedConfig.type}-embed-modal-url`}
-          onChange={(e) => {
-            const {value} = e.target;
+          onChange={e => {
+            const { value } = e.target;
             setText(value);
             validateText(value);
           }}
@@ -204,7 +201,8 @@ export function AutoEmbedDialog({
         <Button
           disabled={!embedResult}
           onClick={onClick}
-          data-test-id={`${embedConfig.type}-embed-modal-submit-btn`}>
+          data-test-id={`${embedConfig.type}-embed-modal-submit-btn`}
+        >
           Embed
         </Button>
       </DialogActions>
@@ -216,7 +214,7 @@ export const AutoEmbedPlugin = (): JSX.Element => {
   const [modal, showModal] = useModal();
 
   const openEmbedModal = (embedConfig: PlaygroundEmbedConfig) => {
-    showModal(`Embed ${embedConfig.contentName}`, (onClose) => (
+    showModal(`Embed ${embedConfig.contentName}`, onClose => (
       <AutoEmbedDialog embedConfig={embedConfig} onClose={onClose} />
     ));
   };
@@ -245,7 +243,12 @@ export const AutoEmbedPlugin = (): JSX.Element => {
         getMenuOptions={getMenuOptions}
         menuRenderFn={(
           anchorElementRef,
-          {selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex},
+          {
+            selectedIndex,
+            options,
+            selectOptionAndCleanUp,
+            setHighlightedIndex,
+          },
         ) =>
           anchorElementRef.current
             ? ReactDOM.createPortal(
@@ -254,7 +257,8 @@ export const AutoEmbedPlugin = (): JSX.Element => {
                   style={{
                     marginLeft: anchorElementRef.current.style.width,
                     width: 200,
-                  }}>
+                  }}
+                >
                   <AutoEmbedMenu
                     options={options}
                     selectedItemIndex={selectedIndex}
@@ -274,6 +278,6 @@ export const AutoEmbedPlugin = (): JSX.Element => {
       />
     </>
   );
-}
+};
 
 export default AutoEmbedPlugin;
diff --git a/packages/lexical/src/plugins/AutoLinkPlugin.tsx b/packages/lexical/src/plugins/AutoLinkPlugin.tsx
index bfd8f9ba1..da196692b 100644
--- a/packages/lexical/src/plugins/AutoLinkPlugin.tsx
+++ b/packages/lexical/src/plugins/AutoLinkPlugin.tsx
@@ -4,11 +4,13 @@
  * MIT License
  */
 
-import { AutoLinkPlugin as LexicalAutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+import { AutoLinkPlugin as LexicalAutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 
-const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
 const MATCHERS = [
   (text: string) => {
@@ -18,7 +20,7 @@ const MATCHERS = [
         index: match.index,
         length: match[0].length,
         text: match[0],
-        url: match[0]
+        url: match[0],
       }
     );
   },
@@ -29,14 +31,14 @@ const MATCHERS = [
         index: match.index,
         length: match[0].length,
         text: match[0],
-        url: `mailto:${match[0]}`
+        url: `mailto:${match[0]}`,
       }
     );
-  }
+  },
 ];
 
 export const AutoLinkPlugin = () => {
-  return <LexicalAutoLinkPlugin matchers={MATCHERS} />
-}
+  return <LexicalAutoLinkPlugin matchers={MATCHERS} />;
+};
 
 export default AutoLinkPlugin;
diff --git a/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx b/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx
index 78d3dc36d..769beaf02 100644
--- a/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx
+++ b/packages/lexical/src/plugins/CodeActionMenuPlugin.tsx
@@ -7,22 +7,30 @@
 import { useEffect, useRef, useState } from 'react';
 import type { JSX } from 'react';
 import { createPortal } from 'react-dom';
-import { $isCodeNode, CodeNode, getLanguageFriendlyName, normalizeCodeLang } from '@lexical/code';
+import {
+  $isCodeNode,
+  CodeNode,
+  getLanguageFriendlyName,
+  normalizeCodeLang,
+} from '@lexical/code';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
 import { CopyButton } from '../components/CopyButton';
 import { canBePrettier, PrettierButton } from '../components/PrettierButton';
 import { useDebounce } from './../hooks';
 
-
 const CODE_PADDING = 8;
 
-interface Position { 
+interface Position {
   top: string;
   right: string;
 }
 
-function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }): JSX.Element { 
+function CodeActionMenuContainer({
+  anchorElem,
+}: {
+  anchorElem: HTMLElement;
+}): JSX.Element {
   const [editor] = useLexicalComposerContext();
   const [lang, setLang] = useState('');
   const [isShown, setShown] = useState<boolean>(false);
@@ -35,19 +43,19 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
   const codeSetRef = useRef<Set<string>>(new Set());
   const codeDOMNodeRef = useRef<HTMLElement | null>(null);
 
-  function getCodeDOMNode(): HTMLElement | null { 
+  function getCodeDOMNode(): HTMLElement | null {
     return codeDOMNodeRef.current;
   }
 
   const debouncedOnMouseMove = useDebounce(
-    (event: MouseEvent) => { 
+    (event: MouseEvent) => {
       const { codeDOMNode, isOutside } = getMouseInfo(event);
-      if (isOutside) { 
+      if (isOutside) {
         setShown(false);
         return;
       }
 
-      if (!codeDOMNode) { 
+      if (!codeDOMNode) {
         return;
       }
 
@@ -56,16 +64,16 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
       let codeNode: CodeNode | null = null;
       let _lang = '';
 
-      editor.update(() => { 
+      editor.update(() => {
         const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
 
-        if ($isCodeNode(maybeCodeNode)) { 
+        if ($isCodeNode(maybeCodeNode)) {
           codeNode = maybeCodeNode;
           _lang = codeNode.getLanguage() || '';
         }
       });
 
-      if (codeNode) { 
+      if (codeNode) {
         const { y: editorElemY, right: editorElemRight } =
           anchorElem.getBoundingClientRect();
         const { y, right } = codeDOMNode.getBoundingClientRect();
@@ -81,27 +89,27 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
     1000,
   );
 
-  useEffect(() => { 
-    if (!shouldListenMouseMove) { 
+  useEffect(() => {
+    if (!shouldListenMouseMove) {
       return;
     }
 
     document.addEventListener('mousemove', debouncedOnMouseMove);
 
-    return () => { 
+    return () => {
       setShown(false);
       debouncedOnMouseMove.cancel();
       document.removeEventListener('mousemove', debouncedOnMouseMove);
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
 
-  useEffect(() => { 
+  useEffect(() => {
     return editor.registerMutationListener(
       CodeNode,
-      (mutations) => { 
-        editor.getEditorState().read(() => { 
-          for (const [key, type] of mutations) { 
-            switch (type) { 
+      mutations => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
               case 'created':
                 codeSetRef.current.add(key);
                 break;
@@ -117,7 +125,7 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
         });
         setShouldListenMouseMove(codeSetRef.current.size > 0);
       },
-      { skipInitialization: false},
+      { skipInitialization: false },
     );
   }, [editor]);
 
@@ -126,11 +134,11 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
 
   return (
     <>
-      { isShown ? (
-        <div className="code-action-menu-container" style={{...position}}>
+      {isShown ? (
+        <div className="code-action-menu-container" style={{ ...position }}>
           <div className="code-highlight-language">{codeFriendlyName}</div>
-          <CopyButton editor={editor } getCodeDOMNode={getCodeDOMNode } />
-          { canBePrettier(normalizedLang) ? (
+          <CopyButton editor={editor} getCodeDOMNode={getCodeDOMNode} />
+          {canBePrettier(normalizedLang) ? (
             <PrettierButton
               editor={editor}
               getCodeDOMNode={getCodeDOMNode}
@@ -143,13 +151,13 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement; }):
   );
 }
 
-function getMouseInfo(event: MouseEvent): { 
+function getMouseInfo(event: MouseEvent): {
   codeDOMNode: HTMLElement | null;
   isOutside: boolean;
- } { 
+} {
   const target = event.target;
 
-  if (isHTMLElement(target)) { 
+  if (isHTMLElement(target)) {
     const codeDOMNode = target.closest<HTMLElement>(
       'code.PlaygroundEditorTheme__code',
     );
@@ -158,19 +166,19 @@ function getMouseInfo(event: MouseEvent): {
       target.closest<HTMLElement>('div.code-action-menu-container')
     );
 
-    return { codeDOMNode, isOutside};
-   } else { 
-    return { codeDOMNode: null, isOutside: true};
+    return { codeDOMNode, isOutside };
+  } else {
+    return { codeDOMNode: null, isOutside: true };
   }
 }
 
 export function CodeActionMenuPlugin({
   anchorElem = document.body,
-}: { 
+}: {
   anchorElem?: HTMLElement;
-}): React.ReactPortal | null { 
+}): React.ReactPortal | null {
   return createPortal(
-    <CodeActionMenuContainer anchorElem={anchorElem } />,
+    <CodeActionMenuContainer anchorElem={anchorElem} />,
     anchorElem,
   );
 }
diff --git a/packages/lexical/src/plugins/CommentPlugin.tsx b/packages/lexical/src/plugins/CommentPlugin.tsx
index 520269bb2..dacf1da43 100644
--- a/packages/lexical/src/plugins/CommentPlugin.tsx
+++ b/packages/lexical/src/plugins/CommentPlugin.tsx
@@ -10,8 +10,8 @@
  * Datalayer License
  */
 
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import type {
   EditorState,
   LexicalCommand,
@@ -38,18 +38,18 @@ import {
   MarkNode,
 } from '@lexical/mark';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
-import {ClearEditorPlugin} from '@lexical/react/LexicalClearEditorPlugin';
-import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
-import {LexicalComposer} from '@lexical/react/LexicalComposer';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
-import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin';
-import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
-import {createDOMRange, createRectsFromDOMRange} from '@lexical/selection';
-import {$isRootTextContentEmpty, $rootTextContent} from '@lexical/text';
-import {mergeRegister, registerNestedElementResolver} from '@lexical/utils';
-import {WebsocketProvider} from 'y-websocket';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
+import { createDOMRange, createRectsFromDOMRange } from '@lexical/selection';
+import { $isRootTextContentEmpty, $rootTextContent } from '@lexical/text';
+import { mergeRegister, registerNestedElementResolver } from '@lexical/utils';
+import { WebsocketProvider } from 'y-websocket';
 import {
   Comment,
   Comments,
@@ -60,9 +60,13 @@ import {
   useCommentStore,
 } from '../components';
 import CommentEditorTheme from '../themes/CommentEditorTheme';
-import { useModal, Button, LexicalContentEditable as ContentEditable, Placeholder } from '..';
-import {useLayoutEffectImpl as useLayoutEffect} from '..';
-
+import {
+  useModal,
+  Button,
+  LexicalContentEditable as ContentEditable,
+  Placeholder,
+} from '..';
+import { useLayoutEffectImpl as useLayoutEffect } from '..';
 
 export const INSERT_INLINE_COMMAND: LexicalCommand<void> = createCommand();
 
@@ -83,8 +87,8 @@ function AddCommentBox({
     const anchorElement = editor.getElementByKey(anchorKey);
 
     if (boxElem !== null && rootElement !== null && anchorElement !== null) {
-      const {right} = rootElement.getBoundingClientRect();
-      const {top} = anchorElement.getBoundingClientRect();
+      const { right } = rootElement.getBoundingClientRect();
+      const { top } = anchorElement.getBoundingClientRect();
       boxElem.style.left = `${right - 20}px`;
       boxElem.style.top = `${top - 30}px`;
     }
@@ -106,7 +110,8 @@ function AddCommentBox({
     <div className="CommentPlugin_AddCommentBox" ref={boxRef}>
       <button
         className="CommentPlugin_AddCommentBox_button"
-        onClick={onAddComment}>
+        onClick={onAddComment}
+      >
         <i className="icon add-comment" />
       </button>
     </div>
@@ -116,7 +121,7 @@ function AddCommentBox({
 function EditorRefPlugin({
   editorRef,
 }: {
-  editorRef: {current: null | LexicalEditor};
+  editorRef: { current: null | LexicalEditor };
 }): null {
   const [editor] = useLexicalComposerContext();
 
@@ -160,7 +165,7 @@ function PlainTextEditor({
 }: {
   autoFocus?: boolean;
   className?: string;
-  editorRef?: {current: null | LexicalEditor};
+  editorRef?: { current: null | LexicalEditor };
   onChange: (editorState: EditorState, editor: LexicalEditor) => void;
   onEscape: (e: KeyboardEvent) => boolean;
   placeholder?: string;
@@ -248,7 +253,7 @@ function CommentInputBox({
         );
         const boxElem = boxRef.current;
         if (range !== null && boxElem !== null) {
-          const {left, bottom, width} = range.getBoundingClientRect();
+          const { left, bottom, width } = range.getBoundingClientRect();
           const selectionRects = createRectsFromDOMRange(editor, range);
           let correctedLeft =
             selectionRects.length === 1 ? left + width / 2 - 125 : left - 125;
@@ -258,7 +263,7 @@ function CommentInputBox({
           boxElem.style.left = `${correctedLeft}px`;
           boxElem.style.top = `${bottom + 20}px`;
           const selectionRectsLength = selectionRects.length;
-          const {container} = selectionState;
+          const { container } = selectionState;
           const elements: Array<HTMLSpanElement> = selectionState.elements;
           const elementsLength = elements.length;
 
@@ -338,13 +343,15 @@ function CommentInputBox({
       <div className="CommentPlugin_CommentInputBox_Buttons">
         <Button
           onClick={cancelAddComment}
-          className="CommentPlugin_CommentInputBox_Button">
+          className="CommentPlugin_CommentInputBox_Button"
+        >
           Cancel
         </Button>
         <Button
           onClick={submitComment}
           disabled={!canSubmit}
-          className="CommentPlugin_CommentInputBox_Button primary">
+          className="CommentPlugin_CommentInputBox_Button primary"
+        >
           Comment
         </Button>
       </div>
@@ -361,7 +368,7 @@ function CommentsComposer({
   submitAddComment: (
     commentOrThread: Comment,
     isInlineComment: boolean,
-    // eslint-disable-next-line no-shadow
+
     thread?: Thread,
   ) => void;
   thread?: Thread;
@@ -398,7 +405,8 @@ function CommentsComposer({
       <Button
         className="CommentPlugin_CommentsPanel_SendButton"
         onClick={submitComment}
-        disabled={!canSubmit}>
+        disabled={!canSubmit}
+      >
         <i className="send" />
       </Button>
     </>
@@ -415,7 +423,7 @@ function ShowDeleteCommentOrThreadDialog({
 
   deleteCommentOrThread: (
     comment: Comment | Thread,
-    // eslint-disable-next-line no-shadow
+
     thread?: Thread,
   ) => void;
   onClose: () => void;
@@ -429,13 +437,15 @@ function ShowDeleteCommentOrThreadDialog({
           onClick={() => {
             deleteCommentOrThread(commentOrThread, thread);
             onClose();
-          }}>
+          }}
+        >
           Delete
         </Button>{' '}
         <Button
           onClick={() => {
             onClose();
-          }}>
+          }}
+        >
           Cancel
         </Button>
       </div>
@@ -452,7 +462,7 @@ function CommentsPanelListComment({
   comment: Comment;
   deleteComment: (
     commentOrThread: Comment | Thread,
-    // eslint-disable-next-line no-shadow
+
     thread?: Thread,
   ) => void;
   rtf: Intl.RelativeTimeFormat;
@@ -475,14 +485,15 @@ function CommentsPanelListComment({
       <p
         className={
           comment.deleted ? 'CommentPlugin_CommentsPanel_DeletedComment' : ''
-        }>
+        }
+      >
         {comment.content}
       </p>
       {!comment.deleted && (
         <>
           <Button
             onClick={() => {
-              showModal('Delete Comment', (onClose) => (
+              showModal('Delete Comment', onClose => (
                 <ShowDeleteCommentOrThreadDialog
                   commentOrThread={comment}
                   deleteCommentOrThread={deleteComment}
@@ -491,7 +502,8 @@ function CommentsPanelListComment({
                 />
               ));
             }}
-            className="CommentPlugin_CommentsPanel_List_DeleteButton">
+            className="CommentPlugin_CommentsPanel_List_DeleteButton"
+          >
             <i className="delete" />
           </Button>
           {modal}
@@ -515,7 +527,7 @@ function CommentsPanelList({
     commentOrThread: Comment | Thread,
     thread?: Thread,
   ) => void;
-  listRef: {current: null | HTMLUListElement};
+  listRef: { current: null | HTMLUListElement };
   markNodeMap: Map<string, Set<NodeKey>>;
   submitAddComment: (
     commentOrThread: Comment | Thread,
@@ -549,7 +561,7 @@ function CommentsPanelList({
 
   return (
     <ul className="CommentPlugin_CommentsPanel_List" ref={listRef}>
-      {comments.map((commentOrThread) => {
+      {comments.map(commentOrThread => {
         const id = commentOrThread.id;
         if (commentOrThread.type === 'thread') {
           const handleClickThread = () => {
@@ -582,13 +594,13 @@ function CommentsPanelList({
           };
 
           return (
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
             <li
               key={id}
               onClick={handleClickThread}
               className={`CommentPlugin_CommentsPanel_List_Thread ${
                 markNodeMap.has(id) ? 'interactive' : ''
-              } ${activeIDs.indexOf(id) === -1 ? '' : 'active'}`}>
+              } ${activeIDs.indexOf(id) === -1 ? '' : 'active'}`}
+            >
               <div className="CommentPlugin_CommentsPanel_List_Thread_QuoteBox">
                 <blockquote className="CommentPlugin_CommentsPanel_List_Thread_Quote">
                   {'> '}
@@ -597,7 +609,7 @@ function CommentsPanelList({
                 {/* INTRODUCE DELETE THREAD HERE*/}
                 <Button
                   onClick={() => {
-                    showModal('Delete Thread', (onClose) => (
+                    showModal('Delete Thread', onClose => (
                       <ShowDeleteCommentOrThreadDialog
                         commentOrThread={commentOrThread}
                         deleteCommentOrThread={deleteCommentOrThread}
@@ -605,13 +617,14 @@ function CommentsPanelList({
                       />
                     ));
                   }}
-                  className="CommentPlugin_CommentsPanel_List_DeleteButton">
+                  className="CommentPlugin_CommentsPanel_List_DeleteButton"
+                >
                   <i className="delete" />
                 </Button>
                 {modal}
               </div>
               <ul className="CommentPlugin_CommentsPanel_List_Thread_Comments">
-                {commentOrThread.comments.map((comment) => (
+                {commentOrThread.comments.map(comment => (
                   <CommentsPanelListComment
                     key={comment.id}
                     comment={comment}
@@ -688,7 +701,7 @@ function CommentsPanel({
 
 function useCollabAuthorName(): string {
   const collabContext = useCollaborationContext();
-  const {yjsDocMap, name} = collabContext;
+  const { yjsDocMap, name } = collabContext;
   return yjsDocMap.has('comments') ? name : 'Playground User';
 }
 
@@ -711,7 +724,7 @@ export function CommentPlugin({
   const [activeIDs, setActiveIDs] = useState<Array<string>>([]);
   const [showCommentInput, setShowCommentInput] = useState(false);
   const [showComments, setShowComments] = useState(false);
-  const {yjsDocMap} = collabContext;
+  const { yjsDocMap } = collabContext;
 
   useEffect(() => {
     if (providerFactory) {
@@ -739,7 +752,7 @@ export function CommentPlugin({
           thread,
         );
         if (!deletionInfo) return;
-        const {markedComment, index} = deletionInfo;
+        const { markedComment, index } = deletionInfo;
         commentStore.addComment(markedComment, thread, index);
       } else {
         commentStore.deleteCommentOrThread(comment);
@@ -837,12 +850,12 @@ export function CommentPlugin({
         (from: MarkNode, to: MarkNode) => {
           // Merge the IDs
           const ids = from.getIDs();
-          ids.forEach((id) => {
+          ids.forEach(id => {
             to.addID(id);
           });
         },
       ),
-      editor.registerMutationListener(MarkNode, (mutations) => {
+      editor.registerMutationListener(MarkNode, mutations => {
         editor.getEditorState().read(() => {
           for (const [key, mutation] of mutations) {
             const node: null | MarkNode = $getNodeByKey(key);
@@ -879,7 +892,7 @@ export function CommentPlugin({
           }
         });
       }),
-      editor.registerUpdateListener(({editorState, tags}) => {
+      editor.registerUpdateListener(({ editorState, tags }) => {
         editorState.read(() => {
           const selection = $getSelection();
           let hasActiveIds = false;
@@ -904,7 +917,7 @@ export function CommentPlugin({
             }
           }
           if (!hasActiveIds) {
-            setActiveIDs((_activeIds) =>
+            setActiveIDs(_activeIds =>
               _activeIds.length === 0 ? _activeIds : [],
             );
           }
@@ -963,7 +976,8 @@ export function CommentPlugin({
             showComments ? 'active' : ''
           }`}
           onClick={() => setShowComments(!showComments)}
-          title={showComments ? 'Hide Comments' : 'Show Comments'}>
+          title={showComments ? 'Hide Comments' : 'Show Comments'}
+        >
           <i className="comments" />
         </Button>,
         document.body,
diff --git a/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx b/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx
index ef671b249..3e4396e07 100644
--- a/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx
+++ b/packages/lexical/src/plugins/ComponentPickerMenuPlugin.tsx
@@ -4,25 +4,25 @@
  * MIT License
  */
 
-import {$createCodeNode} from '@lexical/code';
+import { $createCodeNode } from '@lexical/code';
 import {
   INSERT_CHECK_LIST_COMMAND,
   INSERT_ORDERED_LIST_COMMAND,
   INSERT_UNORDERED_LIST_COMMAND,
 } from '@lexical/list';
-import {INSERT_EMBED_COMMAND} from '@lexical/react/LexicalAutoEmbedPlugin';
+import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
 import { INSERT_JUPYTER_CELL_COMMAND } from './JupyterCellPlugin';
 //import { INSERT_JUPYTER_CELL_COMMAND, DEFAULT_INITIAL_OUTPUTS } from './JupyterPlugin';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {INSERT_HORIZONTAL_RULE_COMMAND} from '@lexical/react/LexicalHorizontalRuleNode';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import {
   LexicalTypeaheadMenuPlugin,
   MenuOption,
   useBasicTypeaheadTriggerMatch,
 } from '@lexical/react/LexicalTypeaheadMenuPlugin';
-import {$createHeadingNode, $createQuoteNode} from '@lexical/rich-text';
-import {$setBlocksType} from '@lexical/selection';
-import {INSERT_TABLE_COMMAND} from '@lexical/table';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import {
   $createParagraphNode,
   $getSelection,
@@ -30,14 +30,14 @@ import {
   FORMAT_ELEMENT_COMMAND,
   TextNode,
 } from 'lexical';
-import {useCallback, useMemo, useState} from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 
 import useModal from '../hooks/useModal';
 import catTypingGif from '../images/yellow-flower-small.jpg';
-import {EmbedConfigs} from './AutoEmbedPlugin';
-import {InsertEquationDialog} from './EquationsPlugin';
-import {INSERT_IMAGE_COMMAND, InsertImageDialog} from './ImagesPlugin';
+import { EmbedConfigs } from './AutoEmbedPlugin';
+import { InsertEquationDialog } from './EquationsPlugin';
+import { INSERT_IMAGE_COMMAND, InsertImageDialog } from './ImagesPlugin';
 
 class ComponentPickerOption extends MenuOption {
   // What shows up in the editor
@@ -96,7 +96,8 @@ function ComponentPickerMenuItem({
       aria-selected={isSelected}
       id={'typeahead-item-' + index}
       onMouseEnter={onMouseEnter}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       {option.icon}
       <span className="text">{option.title}</span>
     </li>
@@ -135,22 +136,22 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
           icon: <i className="icon table" />,
           keywords: ['table'],
           onSelect: () =>
-            // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-            editor.dispatchCommand(INSERT_TABLE_COMMAND, {columns, rows}),
+            // @ts-expect-error Correct types, but since they're dynamic TS doesn't like it.
+            editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
         }),
       );
     } else if (partialTableMatch) {
       const rows = parseInt(partialTableMatch[0], 10);
 
       options.push(
-        ...Array.from({length: 5}, (_, i) => i + 1).map(
-          (columns) =>
+        ...Array.from({ length: 5 }, (_, i) => i + 1).map(
+          columns =>
             new ComponentPickerOption(`${rows}x${columns} Table`, {
               icon: <i className="icon table" />,
               keywords: ['table'],
               onSelect: () =>
-                // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
-                editor.dispatchCommand(INSERT_TABLE_COMMAND, {columns, rows}),
+                // @ts-expect-error Correct types, but since they're dynamic TS doesn't like it.
+                editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
             }),
         ),
       );
@@ -165,15 +166,15 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
         icon: <i className="icon code" />,
         keywords: ['javascript', 'python', 'js', 'codeblock', 'jupyter'],
         onSelect: () => {
-//          const selection = $getSelection();
-//          const code = selection?.getTextContent() || "";
+          //          const selection = $getSelection();
+          //          const code = selection?.getTextContent() || "";
           editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
             code: "print('Hello Jupyter UI')",
             outputs: [],
-            loading: "Loading...",
+            loading: 'Loading...',
             autoStart: true,
           });
-        }
+        },
       }),
       /*
       new ComponentPickerOption('Jupyter Cell', {
@@ -197,8 +198,8 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
             }
           }),
       }),
-      ...Array.from({length: 3}, (_, i) => i + 1).map(
-        (n) =>
+      ...Array.from({ length: 3 }, (_, i) => i + 1).map(
+        n =>
           new ComponentPickerOption(`Heading ${n}`, {
             icon: <i className={`icon h${n}`} />,
             keywords: ['heading', 'header', `h${n}`],
@@ -207,7 +208,7 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
                 const selection = $getSelection();
                 if ($isRangeSelection(selection)) {
                   $setBlocksType(selection, () =>
-                    // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+                    // @ts-expect-error Correct types, but since they're dynamic TS doesn't like it.
                     $createHeadingNode(`h${n}`),
                   );
                 }
@@ -270,7 +271,7 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
           editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
       }),
       ...EmbedConfigs.map(
-        (embedConfig) =>
+        embedConfig =>
           new ComponentPickerOption(`Embed ${embedConfig.contentName}`, {
             icon: embedConfig.icon,
             keywords: [...embedConfig.keywords, 'embed'],
@@ -282,7 +283,7 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
         icon: <i className="icon equation" />,
         keywords: ['equation', 'latex', 'math'],
         onSelect: () =>
-          showModal('Insert Equation', (onClose) => (
+          showModal('Insert Equation', onClose => (
             <InsertEquationDialog activeEditor={editor} onClose={onClose} />
           )),
       }),
@@ -299,17 +300,17 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
         icon: <i className="icon image" />,
         keywords: ['image', 'photo', 'picture', 'file'],
         onSelect: () =>
-          showModal('Insert Image', (onClose) => (
+          showModal('Insert Image', onClose => (
             <InsertImageDialog activeEditor={editor} onClose={onClose} />
           )),
       }),
       ...['left', 'center', 'right', 'justify'].map(
-        (alignment) =>
+        alignment =>
           new ComponentPickerOption(`Align ${alignment}`, {
             icon: <i className={`icon ${alignment}-align`} />,
             keywords: ['align', 'justify', alignment],
             onSelect: () =>
-              // @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
+              // @ts-expect-error Correct types, but since they're dynamic TS doesn't like it.
               editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
           }),
       ),
@@ -320,10 +321,10 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
     return queryString
       ? [
           ...dynamicOptions,
-          ...baseOptions.filter((option) => {
+          ...baseOptions.filter(option => {
             return new RegExp(queryString, 'gi').exec(option.title) ||
               option.keywords != null
-              ? option.keywords.some((keyword) =>
+              ? option.keywords.some(keyword =>
                   new RegExp(queryString, 'gi').exec(keyword),
                 )
               : false;
@@ -360,7 +361,7 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
         options={options}
         menuRenderFn={(
           anchorElementRef,
-          {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
+          { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
         ) =>
           anchorElementRef.current && options.length
             ? ReactDOM.createPortal(
@@ -390,6 +391,6 @@ export const ComponentPickerMenuPlugin = (): JSX.Element => {
       />
     </>
   );
-}
+};
 
-export default ComponentPickerMenuPlugin;
\ No newline at end of file
+export default ComponentPickerMenuPlugin;
diff --git a/packages/lexical/src/plugins/DraggableBlockPlugin.tsx b/packages/lexical/src/plugins/DraggableBlockPlugin.tsx
index 62d1850b5..afa645016 100644
--- a/packages/lexical/src/plugins/DraggableBlockPlugin.tsx
+++ b/packages/lexical/src/plugins/DraggableBlockPlugin.tsx
@@ -4,19 +4,28 @@
  * MIT License
  */
 
-import {DragEvent as ReactDragEvent, useEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
 import {
-  $getNearestNodeFromDOMNode, $getNodeByKey, $getRoot,
-  COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DROP_COMMAND,
+  DragEvent as ReactDragEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import {
+  $getNearestNodeFromDOMNode,
+  $getNodeByKey,
+  $getRoot,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  DRAGOVER_COMMAND,
+  DROP_COMMAND,
   LexicalEditor,
 } from 'lexical';
-import {eventFiles} from '@lexical/rich-text';
-import {calculateZoomLevel, mergeRegister} from '@lexical/utils';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import { eventFiles } from '@lexical/rich-text';
+import { calculateZoomLevel, mergeRegister } from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { isHTMLElement, Point, Rect } from '../utils';
 
-
 const SPACE = 4;
 const TARGET_LINE_HALF_HEIGHT = 2;
 const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
@@ -54,7 +63,7 @@ function getCollapsedMargins(elem: HTMLElement): {
   ): number =>
     element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
 
-  const {marginTop, marginBottom} = window.getComputedStyle(elem);
+  const { marginTop, marginBottom } = window.getComputedStyle(elem);
   const prevElemSiblingMarginBottom = getMargin(
     elem.previousElementSibling,
     'marginBottom',
@@ -72,7 +81,7 @@ function getCollapsedMargins(elem: HTMLElement): {
     nextElemSiblingMarginTop,
   );
 
-  return {marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin};
+  return { marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin };
 }
 
 function getBlockElement(
@@ -125,7 +134,7 @@ function getBlockElement(
       const zoom = calculateZoomLevel(elem);
       const point = new Point(event.x / zoom, event.y / zoom);
       const domRect = Rect.fromDOM(elem);
-      const {marginTop, marginBottom} = getCollapsedMargins(elem);
+      const { marginTop, marginBottom } = getCollapsedMargins(elem);
       const rect = domRect.generateNewRect({
         bottom: domRect.bottom + marginBottom,
         left: anchorElementRect.left,
@@ -135,7 +144,7 @@ function getBlockElement(
 
       const {
         result,
-        reason: {isOnTopSide, isOnBottomSide},
+        reason: { isOnTopSide, isOnBottomSide },
       } = rect.contains(point);
 
       if (result) {
@@ -197,7 +206,7 @@ function setDragImage(
   dataTransfer: DataTransfer,
   draggableBlockElem: HTMLElement,
 ) {
-  const {transform} = draggableBlockElem.style;
+  const { transform } = draggableBlockElem.style;
 
   // Remove dragImage borders
   draggableBlockElem.style.transform = 'translateZ(0)';
@@ -214,11 +223,11 @@ function setTargetLine(
   mouseY: number,
   anchorElem: HTMLElement,
 ) {
-  const {top: targetBlockElemTop, height: targetBlockElemHeight} =
+  const { top: targetBlockElemTop, height: targetBlockElemHeight } =
     targetBlockElem.getBoundingClientRect();
-  const {top: anchorTop, width: anchorWidth} =
+  const { top: anchorTop, width: anchorWidth } =
     anchorElem.getBoundingClientRect();
-  const {marginTop, marginBottom} = getCollapsedMargins(targetBlockElem);
+  const { marginTop, marginBottom } = getCollapsedMargins(targetBlockElem);
   let lineTop = targetBlockElemTop;
   if (mouseY >= targetBlockElemTop) {
     lineTop += targetBlockElemHeight + marginBottom / 2;
@@ -301,7 +310,7 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {pageY, target} = event;
+      const { pageY, target } = event;
       if (!isHTMLElement(target)) {
         return false;
       }
@@ -329,7 +338,7 @@ function useDraggableBlockMenu(
       if (isFileTransfer) {
         return false;
       }
-      const {target, dataTransfer, pageY} = event;
+      const { target, dataTransfer, pageY } = event;
       const dragData = dataTransfer?.getData(DRAG_DATA_FORMAT) || '';
       const draggedNode = $getNodeByKey(dragData);
       if (!draggedNode) {
@@ -363,14 +372,14 @@ function useDraggableBlockMenu(
     return mergeRegister(
       editor.registerCommand(
         DRAGOVER_COMMAND,
-        (event) => {
+        event => {
           return onDragover(event);
         },
         COMMAND_PRIORITY_LOW,
       ),
       editor.registerCommand(
         DROP_COMMAND,
-        (event) => {
+        event => {
           return $onDrop(event);
         },
         COMMAND_PRIORITY_HIGH,
@@ -407,7 +416,8 @@ function useDraggableBlockMenu(
         ref={menuRef}
         draggable
         onDragStart={onDragStart}
-        onDragEnd={onDragEnd}>
+        onDragEnd={onDragEnd}
+      >
         <div className={isEditable ? 'icon' : ''} />
       </div>
       <div className="draggable-block-target-line" ref={targetLineRef} />
diff --git a/packages/lexical/src/plugins/EquationsPlugin.tsx b/packages/lexical/src/plugins/EquationsPlugin.tsx
index e14b17455..4f5d6c2c5 100644
--- a/packages/lexical/src/plugins/EquationsPlugin.tsx
+++ b/packages/lexical/src/plugins/EquationsPlugin.tsx
@@ -6,8 +6,8 @@
 
 import 'katex/dist/katex.css';
 
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$wrapNodeInElement} from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement } from '@lexical/utils';
 import {
   $createParagraphNode,
   $insertNodes,
@@ -17,9 +17,9 @@ import {
   LexicalCommand,
   LexicalEditor,
 } from 'lexical';
-import {useCallback, useEffect} from 'react';
+import { useCallback, useEffect } from 'react';
 
-import {$createEquationNode, EquationNode} from '../nodes/EquationNode';
+import { $createEquationNode, EquationNode } from '../nodes/EquationNode';
 import KatexEquationAlterer from '../components/KatexEquationAlterer';
 
 type CommandPayload = {
@@ -39,7 +39,10 @@ export function InsertEquationDialog({
 }): JSX.Element {
   const onEquationConfirm = useCallback(
     (equation: string, inline: boolean) => {
-      activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {equation, inline});
+      activeEditor.dispatchCommand(INSERT_EQUATION_COMMAND, {
+        equation,
+        inline,
+      });
       onClose();
     },
     [activeEditor, onClose],
@@ -60,8 +63,8 @@ export const EquationsPlugin = (): JSX.Element | null => {
 
     return editor.registerCommand<CommandPayload>(
       INSERT_EQUATION_COMMAND,
-      (payload) => {
-        const {equation, inline} = payload;
+      payload => {
+        const { equation, inline } = payload;
         const equationNode = $createEquationNode(equation, inline);
 
         $insertNodes([equationNode]);
@@ -76,6 +79,6 @@ export const EquationsPlugin = (): JSX.Element | null => {
   }, [editor]);
 
   return null;
-}
+};
 
 export default EquationsPlugin;
diff --git a/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx b/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx
index b2f59b14c..82d22b9aa 100644
--- a/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx
+++ b/packages/lexical/src/plugins/FloatingTextFormatToolbarPlugin.tsx
@@ -10,10 +10,10 @@
  * Datalayer License
  */
 
-import {$isCodeHighlightNode} from '@lexical/code';
-import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {mergeRegister} from '@lexical/utils';
+import { $isCodeHighlightNode } from '@lexical/code';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
 import {
   $getSelection,
   $isRangeSelection,
@@ -23,14 +23,13 @@ import {
   LexicalEditor,
   SELECTION_CHANGE_COMMAND,
 } from 'lexical';
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
-
-import {getDOMRangeRect} from '../utils';
-import {getSelectedNode} from '../utils';
-import {setFloatingElemPosition} from '../utils';
-import {INSERT_INLINE_COMMAND} from './CommentPlugin';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
+import { getDOMRangeRect } from '../utils';
+import { getSelectedNode } from '../utils';
+import { setFloatingElemPosition } from '../utils';
+import { INSERT_INLINE_COMMAND } from './CommentPlugin';
 
 function TextFormatFloatingToolbar({
   editor,
@@ -120,7 +119,7 @@ function TextFormatFloatingToolbar({
       updateTextFormatFloatingToolbar();
     });
     return mergeRegister(
-      editor.registerUpdateListener(({editorState}) => {
+      editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           updateTextFormatFloatingToolbar();
         });
@@ -146,7 +145,8 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
             className={'popup-item spaced ' + (isBold ? 'active' : '')}
-            aria-label="Format text as bold">
+            aria-label="Format text as bold"
+          >
             <i className="format bold" />
           </button>
           <button
@@ -154,7 +154,8 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
             className={'popup-item spaced ' + (isItalic ? 'active' : '')}
-            aria-label="Format text as italics">
+            aria-label="Format text as italics"
+          >
             <i className="format italic" />
           </button>
           <button
@@ -162,7 +163,8 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
             className={'popup-item spaced ' + (isUnderline ? 'active' : '')}
-            aria-label="Format text to underlined">
+            aria-label="Format text to underlined"
+          >
             <i className="format underline" />
           </button>
           <button
@@ -170,7 +172,8 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
             className={'popup-item spaced ' + (isStrikethrough ? 'active' : '')}
-            aria-label="Format text with a strikethrough">
+            aria-label="Format text with a strikethrough"
+          >
             <i className="format strikethrough" />
           </button>
           <button
@@ -179,7 +182,8 @@ function TextFormatFloatingToolbar({
             }}
             className={'popup-item spaced ' + (isSubscript ? 'active' : '')}
             title="Subscript"
-            aria-label="Format Subscript">
+            aria-label="Format Subscript"
+          >
             <i className="format subscript" />
           </button>
           <button
@@ -188,7 +192,8 @@ function TextFormatFloatingToolbar({
             }}
             className={'popup-item spaced ' + (isSuperscript ? 'active' : '')}
             title="Superscript"
-            aria-label="Format Superscript">
+            aria-label="Format Superscript"
+          >
             <i className="format superscript" />
           </button>
           <button
@@ -196,13 +201,15 @@ function TextFormatFloatingToolbar({
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
             }}
             className={'popup-item spaced ' + (isCode ? 'active' : '')}
-            aria-label="Insert code block">
+            aria-label="Insert code block"
+          >
             <i className="format code" />
           </button>
           <button
             onClick={insertLink}
             className={'popup-item spaced ' + (isLink ? 'active' : '')}
-            aria-label="Insert link">
+            aria-label="Insert link"
+          >
             <i className="format link" />
           </button>
         </>
@@ -210,7 +217,8 @@ function TextFormatFloatingToolbar({
       <button
         onClick={insertComment}
         className={'popup-item spaced'}
-        aria-label="Insert comment">
+        aria-label="Insert comment"
+      >
         <i className="format add-comment" />
       </button>
     </div>
diff --git a/packages/lexical/src/plugins/HorizontalRulePlugin.tsx b/packages/lexical/src/plugins/HorizontalRulePlugin.tsx
index d413b0c43..58418db87 100644
--- a/packages/lexical/src/plugins/HorizontalRulePlugin.tsx
+++ b/packages/lexical/src/plugins/HorizontalRulePlugin.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import {
   $createHorizontalRuleNode,
   INSERT_HORIZONTAL_RULE_COMMAND,
@@ -14,7 +14,7 @@ import {
   $isRangeSelection,
   COMMAND_PRIORITY_EDITOR,
 } from 'lexical';
-import {useEffect} from 'react';
+import { useEffect } from 'react';
 
 export const HorizontalRulePlugin = (): null => {
   const [editor] = useLexicalComposerContext();
@@ -22,7 +22,7 @@ export const HorizontalRulePlugin = (): null => {
   useEffect(() => {
     return editor.registerCommand(
       INSERT_HORIZONTAL_RULE_COMMAND,
-      (type) => {
+      type => {
         const selection = $getSelection();
         if (!$isRangeSelection(selection)) {
           return false;
@@ -42,6 +42,6 @@ export const HorizontalRulePlugin = (): null => {
     );
   }, [editor]);
   return null;
-}
+};
 
 export default HorizontalRulePlugin;
diff --git a/packages/lexical/src/plugins/ImagesPlugin.tsx b/packages/lexical/src/plugins/ImagesPlugin.tsx
index e976dcad9..8622713b9 100644
--- a/packages/lexical/src/plugins/ImagesPlugin.tsx
+++ b/packages/lexical/src/plugins/ImagesPlugin.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {$wrapNodeInElement, mergeRegister} from '@lexical/utils';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $wrapNodeInElement, mergeRegister } from '@lexical/utils';
 import {
   $createParagraphNode,
   $createRangeSelection,
@@ -24,8 +24,8 @@ import {
   LexicalCommand,
   LexicalEditor,
 } from 'lexical';
-import {useEffect, useRef, useState} from 'react';
-import {CAN_USE_DOM} from './../utils/canUseDOM';
+import { useEffect, useRef, useState } from 'react';
+import { CAN_USE_DOM } from './../utils/canUseDOM';
 
 import yellowFlowerImage from '../images/yellow-flower-small.jpg';
 import {
@@ -35,7 +35,7 @@ import {
   ImagePayload,
 } from '../nodes/ImageNode';
 import Button from '../components/Button';
-import {DialogActions, DialogButtonsList} from '../components/Dialog';
+import { DialogActions, DialogButtonsList } from '../components/Dialog';
 import FileInput from '../components/FileInput';
 import TextInput from '../components/TextInput';
 
@@ -77,7 +77,8 @@ export function InsertImageUriDialogBody({
         <Button
           data-test-id="image-modal-confirm-btn"
           disabled={isDisabled}
-          onClick={() => onClick({altText, src})}>
+          onClick={() => onClick({ altText, src })}
+        >
           Confirm
         </Button>
       </DialogActions>
@@ -127,7 +128,8 @@ export function InsertImageUploadedDialogBody({
         <Button
           data-test-id="image-modal-file-upload-btn"
           disabled={isDisabled}
-          onClick={() => onClick({altText, src})}>
+          onClick={() => onClick({ altText, src })}
+        >
           Confirm
         </Button>
       </DialogActions>
@@ -173,24 +175,27 @@ export function InsertImageDialog({
                   ? {
                       altText:
                         'Daylight fir trees forest glacier green high ice landscape',
-                        src: yellowFlowerImage,
+                      src: yellowFlowerImage,
                     }
                   : {
                       altText: 'Yellow flower in tilt shift lens',
                       src: yellowFlowerImage,
                     },
               )
-            }>
+            }
+          >
             Sample
           </Button>
           <Button
             data-test-id="image-modal-option-url"
-            onClick={() => setMode('url')}>
+            onClick={() => setMode('url')}
+          >
             URL
           </Button>
           <Button
             data-test-id="image-modal-option-file"
-            onClick={() => setMode('file')}>
+            onClick={() => setMode('file')}
+          >
             File
           </Button>
         </DialogButtonsList>
@@ -216,7 +221,7 @@ export const ImagesPlugin = ({
     return mergeRegister(
       editor.registerCommand<InsertImagePayload>(
         INSERT_IMAGE_COMMAND,
-        (payload) => {
+        payload => {
           const imageNode = $createImageNode(payload);
           $insertNodes([imageNode]);
           if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
@@ -228,21 +233,21 @@ export const ImagesPlugin = ({
       ),
       editor.registerCommand<DragEvent>(
         DRAGSTART_COMMAND,
-        (event) => {
+        event => {
           return onDragStart(event);
         },
         COMMAND_PRIORITY_HIGH,
       ),
       editor.registerCommand<DragEvent>(
         DRAGOVER_COMMAND,
-        (event) => {
+        event => {
           return onDragover(event);
         },
         COMMAND_PRIORITY_LOW,
       ),
       editor.registerCommand<DragEvent>(
         DROP_COMMAND,
-        (event) => {
+        event => {
           return onDrop(event, editor);
         },
         COMMAND_PRIORITY_HIGH,
@@ -251,7 +256,7 @@ export const ImagesPlugin = ({
   }, [captionsEnabled, editor]);
 
   return null;
-}
+};
 
 const TRANSPARENT_IMAGE =
   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
@@ -338,7 +343,7 @@ function getDragImageData(event: DragEvent): null | InsertImagePayload {
   if (!dragData) {
     return null;
   }
-  const {type, data} = JSON.parse(dragData);
+  const { type, data } = JSON.parse(dragData);
   if (type !== 'image') {
     return null;
   }
@@ -371,8 +376,8 @@ function getDragSelection(event: DragEvent): Range | null | undefined {
     target == null
       ? null
       : target.nodeType === 9
-      ? (target as Document).defaultView
-      : (target as Element).ownerDocument.defaultView;
+        ? (target as Document).defaultView
+        : (target as Element).ownerDocument.defaultView;
   const domSelection = getDOMSelection(targetWindow);
   if (document.caretRangeFromPoint) {
     range = document.caretRangeFromPoint(event.clientX, event.clientY);
diff --git a/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx b/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx
index 6b7106ef2..0d212e21a 100644
--- a/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx
+++ b/packages/lexical/src/plugins/JupyterCellOutputPlugin.tsx
@@ -4,19 +4,38 @@
  * MIT License
  */
 
-import { useEffect } from "react";
-import { $getSelection, $isRangeSelection, createCommand, NodeKey, COMMAND_PRIORITY_EDITOR, INSERT_LINE_BREAK_COMMAND, COMMAND_PRIORITY_HIGH, NodeMutation, $isLineBreakNode, $isElementNode, $insertNodes, $createParagraphNode } from "lexical";
-import { $getNodeByKey, $createNodeSelection, $setSelection } from "lexical";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $setBlocksType } from "@lexical/selection";
+import { useEffect } from 'react';
+import {
+  $getSelection,
+  $isRangeSelection,
+  createCommand,
+  NodeKey,
+  COMMAND_PRIORITY_EDITOR,
+  INSERT_LINE_BREAK_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  NodeMutation,
+  $isLineBreakNode,
+  $isElementNode,
+  $insertNodes,
+  $createParagraphNode,
+} from 'lexical';
+import { $getNodeByKey, $createNodeSelection, $setSelection } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $setBlocksType } from '@lexical/selection';
 import { $insertNodeToNearestRoot } from '@lexical/utils';
 import { OutputAdapter, newUuid } from '@datalayer/jupyter-react';
 import { UUID } from '@lumino/coreutils';
 import { IOutput } from '@jupyterlab/nbformat';
-import { $createJupyterCodeNode, JupyterCodeNode, $isJupyterCodeNode } from "../nodes/JupyterCodeNode";
-import { registerCodeHighlighting } from "../nodes/JupyterCodeHighlighter";
-import { JupyterOutputNode, $createJupyterOutputNode } from "../nodes/JupyterOutputNode";
-
+import {
+  $createJupyterCodeNode,
+  JupyterCodeNode,
+  $isJupyterCodeNode,
+} from '../nodes/JupyterCodeNode';
+import { registerCodeHighlighting } from '../nodes/JupyterCodeHighlighter';
+import {
+  JupyterOutputNode,
+  $createJupyterOutputNode,
+} from '../nodes/JupyterOutputNode';
 
 export const CODE_UUID_TO_OUTPUT_KEY = new Map<string, NodeKey | undefined>();
 export const CODE_UUID_TO_CODE_KEY = new Map<string, NodeKey | undefined>();
@@ -26,24 +45,23 @@ export const OUTPUT_UUID_TO_OUTPUT_KEY = new Map<string, NodeKey | undefined>();
 
 export const DEFAULT_INITIAL_OUTPUTS: IOutput[] = [
   {
-    "output_type": "execute_result",
-    "data": {
-      "text/html": [
-        "<p>Type code in the cell and Shift+Enter to execute.</p>"
-      ]
+    output_type: 'execute_result',
+    data: {
+      'text/html': ['<p>Type code in the cell and Shift+Enter to execute.</p>'],
     },
-    "execution_count": 0,
-    "metadata": {},
-  }
+    execution_count: 0,
+    metadata: {},
+  },
 ];
 
 export type JupyterCellOutputProps = {
   code: string;
   outputs?: IOutput[];
   loading?: string;
-}
+};
 
-export const INSERT_JUPYTER_CELL_OUTPUT_COMMAND = createCommand<JupyterCellOutputProps>();
+export const INSERT_JUPYTER_CELL_OUTPUT_COMMAND =
+  createCommand<JupyterCellOutputProps>();
 
 export const JupyterCellOutputPlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -53,22 +71,25 @@ export const JupyterCellOutputPlugin = () => {
   useEffect(() => {
     if (!editor.hasNodes([JupyterOutputNode])) {
       throw new Error(
-        "JupyterCellOutputPlugin: JupyterOutputNode not registered on editor"
+        'JupyterCellOutputPlugin: JupyterOutputNode not registered on editor',
       );
     }
   }, [editor]);
   useEffect(() => {
-    return editor.registerCommand<boolean>( 
+    return editor.registerCommand<boolean>(
       INSERT_LINE_BREAK_COMMAND,
-      (event) => {
+      event => {
         const selection = $getSelection();
         const node = selection?.getNodes()[0];
         if (node?.__parent) {
           const parentNode = $getNodeByKey(node?.__parent);
           if (parentNode && $isJupyterCodeNode(parentNode)) {
             const code = parentNode.getTextContent();
-            const codeNodeUuid = (parentNode as JupyterCodeNode).getCodeNodeUuid();
-            const jupyterOutputNodeKey = CODE_UUID_TO_OUTPUT_KEY.get(codeNodeUuid);
+            const codeNodeUuid = (
+              parentNode as JupyterCodeNode
+            ).getCodeNodeUuid();
+            const jupyterOutputNodeKey =
+              CODE_UUID_TO_OUTPUT_KEY.get(codeNodeUuid);
             if (jupyterOutputNodeKey) {
               const jupyterOutputNode = $getNodeByKey(jupyterOutputNodeKey);
               if (jupyterOutputNode) {
@@ -76,7 +97,14 @@ export const JupyterCellOutputPlugin = () => {
                 return true;
               }
             }
-            const jupyterOutputNode = $createJupyterOutputNode(code, new OutputAdapter(newUuid(), undefined, []), [], true, codeNodeUuid, UUID.uuid4());
+            const jupyterOutputNode = $createJupyterOutputNode(
+              code,
+              new OutputAdapter(newUuid(), undefined, []),
+              [],
+              true,
+              codeNodeUuid,
+              UUID.uuid4(),
+            );
             $insertNodeToNearestRoot(jupyterOutputNode);
             const nodeSelection = $createNodeSelection();
             nodeSelection.add(parentNode.__key);
@@ -86,27 +114,30 @@ export const JupyterCellOutputPlugin = () => {
         }
         return false;
       },
-      COMMAND_PRIORITY_HIGH, 
+      COMMAND_PRIORITY_HIGH,
     );
   }, [editor]);
   useEffect(() => {
     return editor.registerMutationListener(
       JupyterCodeNode,
       (mutatedNodes: Map<NodeKey, NodeMutation>) => {
-        for (let [nodeKey, mutation] of mutatedNodes) {
-          if (mutation === "destroyed") {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === 'destroyed') {
             editor.update(() => {
-//              let codeNodeUuid: string | undefined;
+              //              let codeNodeUuid: string | undefined;
               let outputNodeUuid: string | undefined;
               // TODO Do not use forEach...
-              CODE_UUID_TO_CODE_KEY.forEach((codeKey: NodeKey, codeUuid: string) => {
-                if (codeKey === nodeKey) {
-//                  codeNodeUuid = codeUuid;
-                  outputNodeUuid = CODE_UUID_TO_OUTPUT_UUID.get(codeUuid);
-                }
-              });
+              CODE_UUID_TO_CODE_KEY.forEach(
+                (codeKey: NodeKey, codeUuid: string) => {
+                  if (codeKey === nodeKey) {
+                    //                  codeNodeUuid = codeUuid;
+                    outputNodeUuid = CODE_UUID_TO_OUTPUT_UUID.get(codeUuid);
+                  }
+                },
+              );
               if (outputNodeUuid) {
-                const outputNodeKey = OUTPUT_UUID_TO_OUTPUT_KEY.get(outputNodeUuid);
+                const outputNodeKey =
+                  OUTPUT_UUID_TO_OUTPUT_KEY.get(outputNodeUuid);
                 if (outputNodeKey) {
                   const outputNode = $getNodeByKey(outputNodeKey);
                   if (outputNode) {
@@ -114,27 +145,29 @@ export const JupyterCellOutputPlugin = () => {
                     (outputNode as JupyterOutputNode).removeForce();
                   }
                 }
-//                CODE_UUID_TO_OUTPUT_UUID.delete(codeNodeUuid);
-//                CODE_UUID_TO_OUTPUT_KEY.delete(codeNodeUuid);
-//                CODE_UUID_TO_CODE_KEY.delete(codeNodeUuid);
+                //                CODE_UUID_TO_OUTPUT_UUID.delete(codeNodeUuid);
+                //                CODE_UUID_TO_OUTPUT_KEY.delete(codeNodeUuid);
+                //                CODE_UUID_TO_CODE_KEY.delete(codeNodeUuid);
               }
               if (outputNodeUuid) {
-//                OUTPUT_UUID_TO_CODE_UUID.delete(outputNodeUuid);
+                //                OUTPUT_UUID_TO_CODE_UUID.delete(outputNodeUuid);
               }
             });
           }
         }
-      }
-    )
+      },
+    );
   }, [editor]);
   useEffect(() => {
-    return editor.registerCommand(INSERT_JUPYTER_CELL_OUTPUT_COMMAND, (props: JupyterCellOutputProps) => {
-      const { code, outputs, loading } = props;
-      const selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        selection.removeText();
-        const jupyterCodeNode = $createJupyterCodeNode("python");
-        /*
+    return editor.registerCommand(
+      INSERT_JUPYTER_CELL_OUTPUT_COMMAND,
+      (props: JupyterCellOutputProps) => {
+        const { code, outputs, loading } = props;
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          selection.removeText();
+          const jupyterCodeNode = $createJupyterCodeNode('python');
+          /*
         if (selection.isCollapsed()) {
           const paragraphNode = $createParagraphNode();
           const textNode = $createTextNode(code || "");
@@ -147,43 +180,56 @@ export const JupyterCellOutputPlugin = () => {
           selection.insertRawText(textContent);
         }
         */
-        if (selection.isCollapsed()) {
-          const anchorNode = selection.anchor.getNode();
-          if (anchorNode && $isElementNode(anchorNode)) {
-            const nodes = anchorNode.getChildren();
-            nodes.map((node: any) => {
-              if ($isLineBreakNode(node)) {
-                node.remove();
-              }
-            });              
+          if (selection.isCollapsed()) {
+            const anchorNode = selection.anchor.getNode();
+            if (anchorNode && $isElementNode(anchorNode)) {
+              const nodes = anchorNode.getChildren();
+              nodes.map((node: any) => {
+                if ($isLineBreakNode(node)) {
+                  node.remove();
+                }
+              });
+            }
+            selection.insertRawText(code);
+            $setBlocksType(selection, () => jupyterCodeNode);
+          } else {
+            selection.insertNodes([jupyterCodeNode]);
+          }
+          const outputAdapter = new OutputAdapter(
+            newUuid(),
+            undefined,
+            outputs,
+          );
+          const jupyterOutputNode = $createJupyterOutputNode(
+            code,
+            outputAdapter,
+            outputs || [],
+            false,
+            jupyterCodeNode.getCodeNodeUuid(),
+            UUID.uuid4(),
+          );
+          outputAdapter.outputArea.model.changed.connect(
+            (outputModel, args) => {
+              editor.update(() => {
+                jupyterOutputNode.setOutputs(outputModel.toJSON());
+              });
+            },
+          );
+          const tmpParagraph = $createParagraphNode();
+          $insertNodes([tmpParagraph]);
+          $insertNodeToNearestRoot(jupyterOutputNode);
+          tmpParagraph.remove();
+          if (!loading) {
+            jupyterCodeNode.selectEnd();
+            //          selection.insertRawText(code);
           }
-          selection.insertRawText(code);
-          $setBlocksType(selection, () => jupyterCodeNode);
-        } else {
-          selection.insertNodes([jupyterCodeNode]);
-        }
-        const outputAdapter = new OutputAdapter(newUuid(), undefined, outputs);
-        const jupyterOutputNode = $createJupyterOutputNode(code, outputAdapter, outputs || [], false, jupyterCodeNode.getCodeNodeUuid(), UUID.uuid4()) ;
-        outputAdapter.outputArea.model.changed.connect((outputModel, args) => {
-          editor.update(() => {
-            jupyterOutputNode.setOutputs(outputModel.toJSON());
-          });
-        });
-        const tmpParagraph = $createParagraphNode();
-        $insertNodes([tmpParagraph]);
-        $insertNodeToNearestRoot(jupyterOutputNode);
-        tmpParagraph.remove();
-        if (!loading) {
-          jupyterCodeNode.selectEnd();
-//          selection.insertRawText(code);
         }
-      }
-      return true;
-    },
-    COMMAND_PRIORITY_EDITOR
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
     );
   }, [editor]);
   return null;
-}
+};
 
 export default JupyterCellOutputPlugin;
diff --git a/packages/lexical/src/plugins/JupyterCellPlugin.tsx b/packages/lexical/src/plugins/JupyterCellPlugin.tsx
index 578dc46c3..27f678334 100644
--- a/packages/lexical/src/plugins/JupyterCellPlugin.tsx
+++ b/packages/lexical/src/plugins/JupyterCellPlugin.tsx
@@ -4,11 +4,14 @@
  * MIT License
  */
 
-import { useEffect } from "react";
-import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from 'react';
+import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { IOutput } from '@jupyterlab/nbformat';
-import { JupyterCellNode, $createJupyterCellNode } from "../nodes/JupyterCellNode";
+import {
+  JupyterCellNode,
+  $createJupyterCellNode,
+} from '../nodes/JupyterCellNode';
 
 import '@jupyterlab/theme-light-extension/style/variables.css';
 
@@ -17,7 +20,7 @@ export type JupyterCellProps = {
   outputs: IOutput[];
   loading: string;
   autoStart: boolean;
-}
+};
 
 export const INSERT_JUPYTER_CELL_COMMAND = createCommand<JupyterCellProps>();
 
@@ -25,16 +28,16 @@ export function JupyterCellPlugin() {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     if (!editor.hasNodes([JupyterCellNode])) {
-      throw new Error(
-        "JupyterCellNode is not registered."
-      );
+      throw new Error('JupyterCellNode is not registered.');
     }
-    return editor.registerCommand(INSERT_JUPYTER_CELL_COMMAND, (props: JupyterCellProps) => {
+    return editor.registerCommand(
+      INSERT_JUPYTER_CELL_COMMAND,
+      (props: JupyterCellProps) => {
         const jupyterNode = $createJupyterCellNode(props);
         $insertNodes([jupyterNode]);
         return true;
       },
-      COMMAND_PRIORITY_EDITOR
+      COMMAND_PRIORITY_EDITOR,
     );
   }, [editor]);
   return null;
diff --git a/packages/lexical/src/plugins/ListMaxIndentLevelPlugin.tsx b/packages/lexical/src/plugins/ListMaxIndentLevelPlugin.tsx
index 77b7ac1ee..588eb3ec4 100644
--- a/packages/lexical/src/plugins/ListMaxIndentLevelPlugin.tsx
+++ b/packages/lexical/src/plugins/ListMaxIndentLevelPlugin.tsx
@@ -4,21 +4,28 @@
  * MIT License
  */
 
-import { useEffect } from "react";
-import { $getSelection, $isElementNode, $isRangeSelection, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_HIGH, RangeSelection } from "lexical";
-import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from 'react';
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  INDENT_CONTENT_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  RangeSelection,
+} from 'lexical';
+import { $getListDepth, $isListItemNode, $isListNode } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
 function getElementNodesInSelection(selection: RangeSelection) {
   const nodesInSelection = selection.getNodes();
   if (nodesInSelection.length === 0) {
     return new Set([
       selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow()
+      selection.focus.getNode().getParentOrThrow(),
     ]);
   }
   return new Set(
-    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow()))
+    nodesInSelection.map(n => ($isElementNode(n) ? n : n.getParentOrThrow())),
   );
 }
 
@@ -36,7 +43,7 @@ function isIndentPermitted(maxDepth: number) {
       const parent = elementNode.getParent();
       if (!$isListNode(parent)) {
         throw new Error(
-          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
+          'ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.',
         );
       }
       totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
@@ -45,16 +52,20 @@ function isIndentPermitted(maxDepth: number) {
   return totalDepth <= maxDepth;
 }
 
-export const ListMaxIndentLevelPlugin = ({ maxDepth }:  {maxDepth: number }) => {
+export const ListMaxIndentLevelPlugin = ({
+  maxDepth,
+}: {
+  maxDepth: number;
+}) => {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
-      COMMAND_PRIORITY_HIGH
+      COMMAND_PRIORITY_HIGH,
     );
   }, [editor, maxDepth]);
   return null;
-}
+};
 
 export default ListMaxIndentLevelPlugin;
diff --git a/packages/lexical/src/plugins/MardownPlugin.tsx b/packages/lexical/src/plugins/MardownPlugin.tsx
index 8d021ee25..7c8a05d19 100644
--- a/packages/lexical/src/plugins/MardownPlugin.tsx
+++ b/packages/lexical/src/plugins/MardownPlugin.tsx
@@ -9,6 +9,6 @@ import { PLAYGROUND_TRANSFORMERS } from '../convert/transformers/MarkdownTransfo
 
 export const MarkdownPlugin = (): JSX.Element => {
   return <MarkdownShortcutPlugin transformers={PLAYGROUND_TRANSFORMERS} />;
-}
+};
 
 export default MarkdownPlugin;
diff --git a/packages/lexical/src/plugins/NbformatContentPlugin.tsx b/packages/lexical/src/plugins/NbformatContentPlugin.tsx
index 0f685b7f4..dccf58ac5 100644
--- a/packages/lexical/src/plugins/NbformatContentPlugin.tsx
+++ b/packages/lexical/src/plugins/NbformatContentPlugin.tsx
@@ -4,14 +4,14 @@
  * MIT License
  */
 
-import { useEffect } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { INotebookContent } from "@jupyterlab/nbformat";
-import { nbformatToLexical } from "../convert";
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INotebookContent } from '@jupyterlab/nbformat';
+import { nbformatToLexical } from '../convert';
 
 type Props = {
   notebook?: INotebookContent;
-}
+};
 
 export const NbformatContentPlugin = (props: Props) => {
   const { notebook } = props;
@@ -20,8 +20,8 @@ export const NbformatContentPlugin = (props: Props) => {
     if (notebook) {
       nbformatToLexical(notebook, editor);
     }
-  }, [editor, notebook])
+  }, [editor, notebook]);
   return null;
-}
+};
 
 export default NbformatContentPlugin;
diff --git a/packages/lexical/src/plugins/TableOfContentsPlugin.tsx b/packages/lexical/src/plugins/TableOfContentsPlugin.tsx
index 57041e199..11768ad1d 100644
--- a/packages/lexical/src/plugins/TableOfContentsPlugin.tsx
+++ b/packages/lexical/src/plugins/TableOfContentsPlugin.tsx
@@ -4,12 +4,11 @@
  * MIT License
  */
 
-import {useEffect, useRef, useState} from 'react';
-import type {HeadingTagType} from '@lexical/rich-text';
-import type {NodeKey} from 'lexical';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
-import {TableOfContentsPlugin as LexicalTableOfContentsPlugin} from '@lexical/react/LexicalTableOfContentsPlugin';
-
+import { useEffect, useRef, useState } from 'react';
+import type { HeadingTagType } from '@lexical/rich-text';
+import type { NodeKey } from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { TableOfContentsPlugin as LexicalTableOfContentsPlugin } from '@lexical/react/LexicalTableOfContentsPlugin';
 
 function indent(tagName: HeadingTagType) {
   if (tagName === 'h2') {
@@ -130,13 +129,13 @@ function TableOfContentsList({
         {tableOfContents.map(([key, text, tag], index) => {
           if (index === 0) {
             return (
-              <div className="normal-heading-wrapper">
+              <div key={key} className="normal-heading-wrapper">
                 <div
                   className="first-heading"
-                  key={key}
                   onClick={() => scrollToNode(key, index)}
                   role="button"
-                  tabIndex={0}>
+                  tabIndex={0}
+                >
                   {('' + text).length > 20
                     ? text.substring(0, 20) + '...'
                     : text}
@@ -147,20 +146,24 @@ function TableOfContentsList({
           } else {
             return (
               <div
+                key={key}
                 className={`normal-heading-wrapper ${
                   selectedKey === key ? 'selected-heading-wrapper' : ''
-                }`}>
+                }`}
+              >
                 <div
                   key={key}
                   onClick={() => scrollToNode(key, index)}
                   role="button"
                   className={indent(tag)}
-                  tabIndex={0}>
+                  tabIndex={0}
+                >
                   <li
                     className={`normal-heading ${
                       selectedKey === key ? 'selected-heading' : ''
                     }
-                    `}>
+                    `}
+                  >
                     {('' + text).length > 27
                       ? text.substring(0, 27) + '...'
                       : text}
@@ -183,6 +186,6 @@ export const TableOfContentsPlugin = () => {
       }}
     </LexicalTableOfContentsPlugin>
   );
-}
+};
 
 export default TableOfContentsPlugin;
diff --git a/packages/lexical/src/plugins/ToolbarPlugin.tsx b/packages/lexical/src/plugins/ToolbarPlugin.tsx
index 85de71603..6fcbe84de 100644
--- a/packages/lexical/src/plugins/ToolbarPlugin.tsx
+++ b/packages/lexical/src/plugins/ToolbarPlugin.tsx
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   CAN_REDO_COMMAND,
   CAN_UNDO_COMMAND,
@@ -20,20 +20,45 @@ import {
   $getNodeByKey,
   RangeSelection,
   NodeKey,
-} from "lexical";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
-import { $isParentElementRTL, $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
-import { $getNearestNodeOfType, mergeRegister, $insertNodeToNearestRoot } from '@lexical/utils';
-import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from "@lexical/list";
-import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
+} from 'lexical';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import {
-  $isJupyterCodeNode, DropDownItem, DropDown, getDefaultCodeLanguage,
-  getLanguageFriendlyName, CODE_LANGUAGE_FRIENDLY_NAME_MAP,
-  $createYouTubeNode, INSERT_EQUATION_COMMAND, INSERT_JUPYTER_CELL_COMMAND, DEFAULT_INITIAL_OUTPUTS
-} from "../";
+  $isParentElementRTL,
+  $wrapNodes,
+  $isAtNodeEnd,
+} from '@lexical/selection';
+import {
+  $getNearestNodeOfType,
+  mergeRegister,
+  $insertNodeToNearestRoot,
+} from '@lexical/utils';
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from '@lexical/list';
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+} from '@lexical/rich-text';
+import {
+  $isJupyterCodeNode,
+  DropDownItem,
+  DropDown,
+  getDefaultCodeLanguage,
+  getLanguageFriendlyName,
+  CODE_LANGUAGE_FRIENDLY_NAME_MAP,
+  $createYouTubeNode,
+  INSERT_EQUATION_COMMAND,
+  INSERT_JUPYTER_CELL_COMMAND,
+  DEFAULT_INITIAL_OUTPUTS,
+} from '../';
 
-import { JupyterCodeNode } from "../nodes";
+import { JupyterCodeNode } from '../nodes';
 
 const LowPriority = 1;
 
@@ -55,26 +80,26 @@ function dropDownActiveClass(active: boolean) {
 }
 
 const supportedBlockTypes = new Set([
-  "paragraph",
-  "quote",
-  "code",
-  "h1",
-  "h2",
-  "ul",
-  "ol"
+  'paragraph',
+  'quote',
+  'code',
+  'h1',
+  'h2',
+  'ul',
+  'ol',
 ]);
 
 const blockTypeToBlockName = {
-  code: "Code Block",
-  h1: "Large Heading",
-  h2: "Small Heading",
-  h3: "Heading",
-  h4: "Heading",
-  h5: "Heading",
-  ol: "Numbered List",
-  paragraph: "Normal",
-  quote: "Quote",
-  ul: "Bulleted List",
+  code: 'Code Block',
+  h1: 'Large Heading',
+  h2: 'Small Heading',
+  h3: 'Heading',
+  h4: 'Heading',
+  h5: 'Heading',
+  ol: 'Numbered List',
+  paragraph: 'Normal',
+  quote: 'Quote',
+  ul: 'Bulleted List',
 };
 
 function Divider() {
@@ -83,11 +108,11 @@ function Divider() {
 
 function positionEditorElement(editor: any, rect: any) {
   if (rect === null) {
-    editor.style.opacity = "0";
-    editor.style.top = "-1000px";
-    editor.style.left = "-1000px";
+    editor.style.opacity = '0';
+    editor.style.top = '-1000px';
+    editor.style.left = '-1000px';
   } else {
-    editor.style.opacity = "1";
+    editor.style.opacity = '1';
     editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
     editor.style.left = `${
       rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
@@ -99,7 +124,7 @@ function FloatingLinkEditor({ editor }: any) {
   const editorRef = useRef<any>(null);
   const inputRef = useRef<any>(null);
   const mouseDownRef = useRef(false);
-  const [linkUrl, setLinkUrl] = useState<string>("");
+  const [linkUrl, setLinkUrl] = useState<string>('');
   const [isEditMode, setEditMode] = useState<boolean>(false);
   const [lastSelection, setLastSelection] = useState<any>(null);
   const updateLinkEditor = useCallback(() => {
@@ -112,7 +137,7 @@ function FloatingLinkEditor({ editor }: any) {
       } else if ($isLinkNode(node)) {
         setLinkUrl(node.getURL());
       } else {
-        setLinkUrl("");
+        setLinkUrl('');
       }
     }
     const editorElem = editorRef.current;
@@ -143,11 +168,11 @@ function FloatingLinkEditor({ editor }: any) {
         positionEditorElement(editorElem, rect);
       }
       setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "link-input") {
+    } else if (!activeElement || activeElement.className !== 'link-input') {
       positionEditorElement(editorElem, null);
       setLastSelection(null);
       setEditMode(false);
-      setLinkUrl("");
+      setLinkUrl('');
     }
     return true;
   }, [editor]);
@@ -164,8 +189,8 @@ function FloatingLinkEditor({ editor }: any) {
           updateLinkEditor();
           return true;
         },
-        LowPriority
-      )
+        LowPriority,
+      ),
     );
   }, [editor, updateLinkEditor]);
   useEffect(() => {
@@ -185,19 +210,19 @@ function FloatingLinkEditor({ editor }: any) {
           ref={inputRef}
           className="link-input"
           value={linkUrl}
-          onChange={(event) => {
+          onChange={event => {
             setLinkUrl(event.target.value);
           }}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
               event.preventDefault();
               if (lastSelection !== null) {
-                if (linkUrl !== "") {
+                if (linkUrl !== '') {
                   editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
                 }
                 setEditMode(false);
               }
-            } else if (event.key === "Escape") {
+            } else if (event.key === 'Escape') {
               event.preventDefault();
               setEditMode(false);
             }
@@ -213,7 +238,7 @@ function FloatingLinkEditor({ editor }: any) {
               className="link-edit"
               role="button"
               tabIndex={0}
-              onMouseDown={(event) => event.preventDefault()}
+              onMouseDown={event => event.preventDefault()}
               onClick={() => {
                 setEditMode(true);
               }}
@@ -258,7 +283,7 @@ function BlockOptionsDropdownList({
   editor,
   blockType,
   toolbarRef,
-  setShowBlockOptionsDropDown
+  setShowBlockOptionsDropDown,
 }: any) {
   const dropDownRef = useRef<any>(null);
   useEffect(() => {
@@ -280,14 +305,14 @@ function BlockOptionsDropdownList({
           setShowBlockOptionsDropDown(false);
         }
       };
-      document.addEventListener("click", handle);
+      document.addEventListener('click', handle);
       return () => {
-        document.removeEventListener("click", handle);
+        document.removeEventListener('click', handle);
       };
     }
   }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
   const formatParagraph = () => {
-    if (blockType !== "paragraph") {
+    if (blockType !== 'paragraph') {
       editor.update(() => {
         const selection = $getSelection();
 
@@ -299,31 +324,31 @@ function BlockOptionsDropdownList({
     setShowBlockOptionsDropDown(false);
   };
   const formatLargeHeading = () => {
-    if (blockType !== "h1") {
+    if (blockType !== 'h1') {
       editor.update(() => {
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createHeadingNode("h1"));
+          $wrapNodes(selection, () => $createHeadingNode('h1'));
         }
       });
     }
     setShowBlockOptionsDropDown(false);
   };
   const formatSmallHeading = () => {
-    if (blockType !== "h2") {
+    if (blockType !== 'h2') {
       editor.update(() => {
         const selection = $getSelection();
 
         if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createHeadingNode("h2"));
+          $wrapNodes(selection, () => $createHeadingNode('h2'));
         }
       });
     }
     setShowBlockOptionsDropDown(false);
   };
   const formatBulletList = () => {
-    if (blockType !== "ul") {
+    if (blockType !== 'ul') {
       editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
     } else {
       editor.dispatchCommand(REMOVE_LIST_COMMAND);
@@ -331,7 +356,7 @@ function BlockOptionsDropdownList({
     setShowBlockOptionsDropDown(false);
   };
   const formatNumberedList = () => {
-    if (blockType !== "ol") {
+    if (blockType !== 'ol') {
       editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
     } else {
       editor.dispatchCommand(REMOVE_LIST_COMMAND);
@@ -339,7 +364,7 @@ function BlockOptionsDropdownList({
     setShowBlockOptionsDropDown(false);
   };
   const formatQuote = () => {
-    if (blockType !== "quote") {
+    if (blockType !== 'quote') {
       editor.update(() => {
         const selection = $getSelection();
 
@@ -351,36 +376,44 @@ function BlockOptionsDropdownList({
     setShowBlockOptionsDropDown(false);
   };
   const formatJupyterOutput = () => {
-    if (blockType !== "jupyter-output") {
+    if (blockType !== 'jupyter-output') {
       editor.update(() => {
         const selection = $getSelection();
-        const code = selection?.getTextContent() || "";
-        editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, { code, outputs: code ? [] : DEFAULT_INITIAL_OUTPUTS });
+        const code = selection?.getTextContent() || '';
+        editor.dispatchCommand(INSERT_JUPYTER_CELL_COMMAND, {
+          code,
+          outputs: code ? [] : DEFAULT_INITIAL_OUTPUTS,
+        });
       });
     }
     setShowBlockOptionsDropDown(false);
   };
   const formatYouTube = () => {
-    if (blockType !== "youtube") {
+    if (blockType !== 'youtube') {
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
           const splits = selection.getTextContent().split('v=');
           selection.removeText();
-          $insertNodeToNearestRoot($createYouTubeNode(splits[splits.length - 1]));
+          $insertNodeToNearestRoot(
+            $createYouTubeNode(splits[splits.length - 1]),
+          );
         }
       });
     }
     setShowBlockOptionsDropDown(false);
   };
   const formatEquation = () => {
-    if (blockType !== "equation") {
+    if (blockType !== 'equation') {
       editor.update(() => {
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
           const equation = selection.getTextContent().replaceAll('$', '');
           selection.removeText();
-          editor.dispatchCommand(INSERT_EQUATION_COMMAND, {equation, inline: true});
+          editor.dispatchCommand(INSERT_EQUATION_COMMAND, {
+            equation,
+            inline: true,
+          });
         }
       });
     }
@@ -391,47 +424,47 @@ function BlockOptionsDropdownList({
       <button className="item" onClick={formatJupyterOutput}>
         <span className="icon code" />
         <span className="text">Jupyter Cell</span>
-        {blockType === "jupyter" && <span className="active" />}
+        {blockType === 'jupyter' && <span className="active" />}
       </button>
       <button className="item" onClick={formatParagraph}>
         <span className="icon paragraph" />
         <span className="text">Normal</span>
-        {blockType === "paragraph" && <span className="active" />}
+        {blockType === 'paragraph' && <span className="active" />}
       </button>
       <button className="item" onClick={formatLargeHeading}>
         <span className="icon large-heading" />
         <span className="text">Large Heading</span>
-        {blockType === "h1" && <span className="active" />}
+        {blockType === 'h1' && <span className="active" />}
       </button>
       <button className="item" onClick={formatSmallHeading}>
         <span className="icon small-heading" />
         <span className="text">Small Heading</span>
-        {blockType === "h2" && <span className="active" />}
+        {blockType === 'h2' && <span className="active" />}
       </button>
       <button className="item" onClick={formatBulletList}>
         <span className="icon bullet-list" />
         <span className="text">Bullet List</span>
-        {blockType === "ul" && <span className="active" />}
+        {blockType === 'ul' && <span className="active" />}
       </button>
       <button className="item" onClick={formatNumberedList}>
         <span className="icon numbered-list" />
         <span className="text">Numbered List</span>
-        {blockType === "ol" && <span className="active" />}
+        {blockType === 'ol' && <span className="active" />}
       </button>
       <button className="item" onClick={formatQuote}>
         <span className="icon quote" />
         <span className="text">Quote</span>
-        {blockType === "quote" && <span className="active" />}
+        {blockType === 'quote' && <span className="active" />}
       </button>
       <button className="item" onClick={formatYouTube}>
         <i className="icon youtube" />
         <span className="text">YouTube Video</span>
-        {blockType === "youtube" && <span className="active" />}
+        {blockType === 'youtube' && <span className="active" />}
       </button>
       <button className="item" onClick={formatEquation}>
         <i className="icon equation" />
         <span className="text">Equation</span>
-        {blockType === "equation" && <span className="active" />}
+        {blockType === 'equation' && <span className="active" />}
       </button>
     </div>
   );
@@ -443,10 +476,11 @@ export function ToolbarPlugin() {
   const toolbarRef = useRef(null);
   const [canUndo, setCanUndo] = useState<boolean>(false);
   const [canRedo, setCanRedo] = useState<boolean>(false);
-  const [blockType, setBlockType] = useState<NodeKey>("paragraph");
+  const [blockType, setBlockType] = useState<NodeKey>('paragraph');
   const [selectedElementKey, setSelectedElementKey] = useState<any>(null);
-  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
-  const [codeLanguage, setCodeLanguage] = useState("");
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] =
+    useState(false);
+  const [codeLanguage, setCodeLanguage] = useState('');
   const [__, setIsRTL] = useState(false);
   const [isLink, setIsLink] = useState(false);
   const [isBold, setIsBold] = useState(false);
@@ -459,7 +493,7 @@ export function ToolbarPlugin() {
     if ($isRangeSelection(selection)) {
       const anchorNode = selection.anchor.getNode();
       const element =
-        anchorNode.getKey() === "root"
+        anchorNode.getKey() === 'root'
           ? anchorNode
           : anchorNode.getTopLevelElementOrThrow();
       const elementKey = element.getKey();
@@ -476,16 +510,19 @@ export function ToolbarPlugin() {
             : element.getType();
           setBlockType(type);
           if ($isJupyterCodeNode(element)) {
-            setCodeLanguage((element as JupyterCodeNode).getLanguage() || getDefaultCodeLanguage());
+            setCodeLanguage(
+              (element as JupyterCodeNode).getLanguage() ||
+                getDefaultCodeLanguage(),
+            );
           }
         }
       }
       // Update text format
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
-      setIsUnderline(selection.hasFormat("underline"));
-      setIsStrikethrough(selection.hasFormat("strikethrough"));
-      setIsCode(selection.hasFormat("code"));
+      setIsBold(selection.hasFormat('bold'));
+      setIsItalic(selection.hasFormat('italic'));
+      setIsUnderline(selection.hasFormat('underline'));
+      setIsStrikethrough(selection.hasFormat('strikethrough'));
+      setIsCode(selection.hasFormat('code'));
       setIsRTL($isParentElementRTL(selection));
       // Update links
       const node = getSelectedNode(selection);
@@ -510,7 +547,7 @@ export function ToolbarPlugin() {
           updateToolbar();
           return false;
         },
-        LowPriority
+        LowPriority,
       ),
       editor.registerCommand(
         CAN_UNDO_COMMAND,
@@ -518,7 +555,7 @@ export function ToolbarPlugin() {
           setCanUndo(payload);
           return false;
         },
-        LowPriority
+        LowPriority,
       ),
       editor.registerCommand(
         CAN_REDO_COMMAND,
@@ -526,18 +563,18 @@ export function ToolbarPlugin() {
           setCanRedo(payload);
           return false;
         },
-        LowPriority
-      )
+        LowPriority,
+      ),
     );
   }, [editor, updateToolbar]);
-//  const codeLanguges = useMemo(() => getCodeLanguages(), []);
+  //  const codeLanguges = useMemo(() => getCodeLanguages(), []);
   const onCodeLanguageSelect = useCallback(
     (value: string) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
           const node = $getNodeByKey(selectedElementKey);
           if (node && $isJupyterCodeNode(node)) {
-            (node as JupyterCodeNode).setLanguage(value);              
+            (node as JupyterCodeNode).setLanguage(value);
           }
         }
       });
@@ -546,7 +583,7 @@ export function ToolbarPlugin() {
   );
   const insertLink = useCallback(() => {
     if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
     } else {
       editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
     }
@@ -583,8 +620,10 @@ export function ToolbarPlugin() {
             }
             aria-label="Formatting Options"
           >
-            <span className={"icon block-type " + blockType} />
-            <span className="text">{(blockTypeToBlockName as any)[blockType]}</span>
+            <span className={'icon block-type ' + blockType} />
+            <span className="text">
+              {(blockTypeToBlockName as any)[blockType]}
+            </span>
             <i className="chevron-down" />
           </button>
           {showBlockOptionsDropDown &&
@@ -595,17 +634,18 @@ export function ToolbarPlugin() {
                 toolbarRef={toolbarRef}
                 setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
               />,
-              document.body
+              document.body,
             )}
           <Divider />
         </>
       )}
-      {blockType === "jupyter-code" ? (
+      {blockType === 'jupyter-code' ? (
         <>
           <DropDown
             buttonClassName="toolbar-item code-language"
             buttonLabel={getLanguageFriendlyName(codeLanguage)}
-            buttonAriaLabel="Select language">
+            buttonAriaLabel="Select language"
+          >
             {CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
               return (
                 <DropDownItem
@@ -613,7 +653,8 @@ export function ToolbarPlugin() {
                     value === codeLanguage,
                   )}`}
                   onClick={() => onCodeLanguageSelect(value)}
-                  key={value}>
+                  key={value}
+                >
                   <span className="text">{name}</span>
                 </DropDownItem>
               );
@@ -624,37 +665,37 @@ export function ToolbarPlugin() {
         <>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
             }}
-            className={"toolbar-item spaced " + (isBold ? "active" : "")}
+            className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
             aria-label="Format Bold"
           >
             <i className="format bold" />
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
             }}
-            className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+            className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
             aria-label="Format Italics"
           >
             <i className="format italic" />
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
             }}
-            className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
+            className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
             aria-label="Format Underline"
           >
             <i className="format underline" />
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
             }}
             className={
-              "toolbar-item spaced " + (isStrikethrough ? "active" : "")
+              'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')
             }
             aria-label="Format Strikethrough"
           >
@@ -662,16 +703,16 @@ export function ToolbarPlugin() {
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
             }}
-            className={"toolbar-item spaced " + (isCode ? "active" : "")}
+            className={'toolbar-item spaced ' + (isCode ? 'active' : '')}
             aria-label="Insert Code"
           >
             <i className="format code" />
           </button>
           <button
             onClick={insertLink}
-            className={"toolbar-item spaced " + (isLink ? "active" : "")}
+            className={'toolbar-item spaced ' + (isLink ? 'active' : '')}
             aria-label="Insert Link"
           >
             <i className="format link" />
@@ -681,7 +722,7 @@ export function ToolbarPlugin() {
           <Divider />
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
             }}
             className="toolbar-item spaced"
             aria-label="Left Align"
@@ -690,7 +731,7 @@ export function ToolbarPlugin() {
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
             }}
             className="toolbar-item spaced"
             aria-label="Center Align"
@@ -699,7 +740,7 @@ export function ToolbarPlugin() {
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
             }}
             className="toolbar-item spaced"
             aria-label="Right Align"
@@ -708,13 +749,13 @@ export function ToolbarPlugin() {
           </button>
           <button
             onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
             }}
             className="toolbar-item"
             aria-label="Justify Align"
           >
             <i className="format justify-align" />
-          </button>{" "}
+          </button>{' '}
         </>
       )}
     </div>
diff --git a/packages/lexical/src/plugins/YouTubePlugin.tsx b/packages/lexical/src/plugins/YouTubePlugin.tsx
index f6127a64b..451ee290e 100644
--- a/packages/lexical/src/plugins/YouTubePlugin.tsx
+++ b/packages/lexical/src/plugins/YouTubePlugin.tsx
@@ -4,33 +4,36 @@
  * MIT License
  */
 
- import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
- import {$insertNodeToNearestRoot} from '@lexical/utils';
- import {COMMAND_PRIORITY_EDITOR, createCommand, LexicalCommand} from 'lexical';
- import {useEffect} from 'react';
- 
- import {$createYouTubeNode, YouTubeNode} from '../nodes/YouTubeNode';
- 
- export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> = createCommand();
- 
-export const YouTubePlugin = (): JSX.Element | null => { 
-   const [editor] = useLexicalComposerContext();
-   useEffect(() => {
-     if (!editor.hasNodes([YouTubeNode])) {
-       throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
-     } 
-     return editor.registerCommand<string>(
-       INSERT_YOUTUBE_COMMAND,
-       (payload) => {
-         const youTubeNode = $createYouTubeNode(payload);
-         $insertNodeToNearestRoot(youTubeNode);
-         return true;
-       },
-       COMMAND_PRIORITY_EDITOR,
-     );
-   }, [editor]);
-   return null;
- }
- 
- export default YouTubePlugin;
- 
\ No newline at end of file
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import {
+  COMMAND_PRIORITY_EDITOR,
+  createCommand,
+  LexicalCommand,
+} from 'lexical';
+import { useEffect } from 'react';
+
+import { $createYouTubeNode, YouTubeNode } from '../nodes/YouTubeNode';
+
+export const INSERT_YOUTUBE_COMMAND: LexicalCommand<string> = createCommand();
+
+export const YouTubePlugin = (): JSX.Element | null => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (!editor.hasNodes([YouTubeNode])) {
+      throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
+    }
+    return editor.registerCommand<string>(
+      INSERT_YOUTUBE_COMMAND,
+      payload => {
+        const youTubeNode = $createYouTubeNode(payload);
+        $insertNodeToNearestRoot(youTubeNode);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR,
+    );
+  }, [editor]);
+  return null;
+};
+
+export default YouTubePlugin;
diff --git a/packages/lexical/src/plugins/index.ts b/packages/lexical/src/plugins/index.ts
index 68f0926bd..6112b2101 100644
--- a/packages/lexical/src/plugins/index.ts
+++ b/packages/lexical/src/plugins/index.ts
@@ -4,22 +4,22 @@
  * MIT License
  */
 
-export * from "./AutoEmbedPlugin";
-export * from "./AutoLinkPlugin";
-export * from "./CodeActionMenuPlugin";
-export * from "./CommentPlugin";
-export * from "./ComponentPickerMenuPlugin";
-export * from "./DraggableBlockPlugin";
-export * from "./EquationsPlugin";
-export * from "./FloatingTextFormatToolbarPlugin";
-export * from "./HorizontalRulePlugin";
-export * from "./ImagesPlugin";
-export * from "./JupyterCellPlugin";
-export * from "./JupyterCellOutputPlugin";
-export * from "./ListMaxIndentLevelPlugin";
-export * from "./MardownPlugin";
-export * from "./NbformatContentPlugin";
-export * from "./TableOfContentsPlugin";
-export * from "./ToolbarPlugin";
-export * from "./TreeViewPlugin";
-export * from "./YouTubePlugin";
+export * from './AutoEmbedPlugin';
+export * from './AutoLinkPlugin';
+export * from './CodeActionMenuPlugin';
+export * from './CommentPlugin';
+export * from './ComponentPickerMenuPlugin';
+export * from './DraggableBlockPlugin';
+export * from './EquationsPlugin';
+export * from './FloatingTextFormatToolbarPlugin';
+export * from './HorizontalRulePlugin';
+export * from './ImagesPlugin';
+export * from './JupyterCellPlugin';
+export * from './JupyterCellOutputPlugin';
+export * from './ListMaxIndentLevelPlugin';
+export * from './MardownPlugin';
+export * from './NbformatContentPlugin';
+export * from './TableOfContentsPlugin';
+export * from './ToolbarPlugin';
+export * from './TreeViewPlugin';
+export * from './YouTubePlugin';
diff --git a/packages/lexical/src/themes/CommentEditorTheme.ts b/packages/lexical/src/themes/CommentEditorTheme.ts
index 8d92f0d92..ea52e17bc 100644
--- a/packages/lexical/src/themes/CommentEditorTheme.ts
+++ b/packages/lexical/src/themes/CommentEditorTheme.ts
@@ -10,8 +10,7 @@
  * Datalayer License
  */
 
-import type {EditorThemeClasses} from 'lexical';
-
+import type { EditorThemeClasses } from 'lexical';
 
 import baseTheme from './Theme';
 
diff --git a/packages/lexical/src/themes/Theme.ts b/packages/lexical/src/themes/Theme.ts
index 6d4cd3059..858540aa8 100644
--- a/packages/lexical/src/themes/Theme.ts
+++ b/packages/lexical/src/themes/Theme.ts
@@ -4,9 +4,8 @@
  * MIT License
  */
 
-import type {EditorThemeClasses} from 'lexical';
+import type { EditorThemeClasses } from 'lexical';
 
- 
 const theme: EditorThemeClasses = {
   characterLimit: 'PlaygroundEditorTheme__characterLimit',
   code: 'PlaygroundEditorTheme__code',
diff --git a/packages/lexical/src/themes/index.ts b/packages/lexical/src/themes/index.ts
index d1c011552..448c84cb4 100644
--- a/packages/lexical/src/themes/index.ts
+++ b/packages/lexical/src/themes/index.ts
@@ -4,5 +4,5 @@
  * MIT License
  */
 
-export * from "./CommentEditorTheme";
-export * from "./Theme";
+export * from './CommentEditorTheme';
+export * from './Theme';
diff --git a/packages/lexical/src/typings.d.ts b/packages/lexical/src/typings.d.ts
index f6989cc55..4cb6d6d6d 100755
--- a/packages/lexical/src/typings.d.ts
+++ b/packages/lexical/src/typings.d.ts
@@ -4,22 +4,22 @@
  * MIT License
  */
 
-declare module "*.jpg" {
+declare module '*.jpg' {
   const value: any;
   export default value;
 }
 
-declare module "*.jpeg" {
+declare module '*.jpeg' {
   const value: any;
   export default value;
 }
 
-declare module "*.png" {
+declare module '*.png' {
   const value: any;
   export default value;
 }
 
-declare module "*.svg" {
+declare module '*.svg' {
   const value: any;
   export default value;
 }
diff --git a/packages/lexical/src/utils/getSelectedNode.ts b/packages/lexical/src/utils/getSelectedNode.ts
index 7c87a332b..5d97715ce 100644
--- a/packages/lexical/src/utils/getSelectedNode.ts
+++ b/packages/lexical/src/utils/getSelectedNode.ts
@@ -10,8 +10,8 @@
  * Datalayer License
  */
 
-import {$isAtNodeEnd} from '@lexical/selection';
-import {ElementNode, RangeSelection, TextNode} from 'lexical';
+import { $isAtNodeEnd } from '@lexical/selection';
+import { ElementNode, RangeSelection, TextNode } from 'lexical';
 
 export function getSelectedNode(
   selection: RangeSelection,
diff --git a/packages/lexical/src/utils/index.ts b/packages/lexical/src/utils/index.ts
index 393743691..350e4156b 100644
--- a/packages/lexical/src/utils/index.ts
+++ b/packages/lexical/src/utils/index.ts
@@ -4,13 +4,13 @@
  * MIT License
  */
 
-export * from "./canUseDOM";
+export * from './canUseDOM';
 export * from './getDOMRangeRect';
 export * from './getSelectedNode';
 export * from './guard';
 export * from './invariant';
-export * from "./join";
-export * from "./point";
-export * from "./rect";
-export * from "./selection";
+export * from './join';
+export * from './point';
+export * from './rect';
+export * from './selection';
 export * from './setFloatingElemPosition';
diff --git a/packages/lexical/src/utils/join.ts b/packages/lexical/src/utils/join.ts
index b1c18a18b..9250b979c 100644
--- a/packages/lexical/src/utils/join.ts
+++ b/packages/lexical/src/utils/join.ts
@@ -8,6 +8,6 @@ export const joinClasses = (
   ...args: Array<string | boolean | null | undefined>
 ) => {
   return args.filter(Boolean).join(' ');
-}
+};
 
 export default joinClasses;
diff --git a/packages/lexical/src/utils/point.ts b/packages/lexical/src/utils/point.ts
index 09e1623a0..c86d50dfe 100644
--- a/packages/lexical/src/utils/point.ts
+++ b/packages/lexical/src/utils/point.ts
@@ -21,15 +21,15 @@ export class Point {
     return this._y;
   }
 
-  public equals({x, y}: Point): boolean {
+  public equals({ x, y }: Point): boolean {
     return this.x === x && this.y === y;
   }
 
-  public calcDeltaXTo({x}: Point): number {
+  public calcDeltaXTo({ x }: Point): number {
     return this.x - x;
   }
 
-  public calcDeltaYTo({y}: Point): number {
+  public calcDeltaYTo({ y }: Point): number {
     return this.y - y;
   }
 
diff --git a/packages/lexical/src/utils/rect.ts b/packages/lexical/src/utils/rect.ts
index 99c296824..5e5eb5570 100644
--- a/packages/lexical/src/utils/rect.ts
+++ b/packages/lexical/src/utils/rect.ts
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import {isPoint, Point} from './point';
+import { isPoint, Point } from './point';
 
 type ContainsPointReturn = {
   result: boolean;
@@ -59,7 +59,7 @@ export class Rect {
     return Math.abs(this._bottom - this._top);
   }
 
-  public equals({top, left, bottom, right}: Rect): boolean {
+  public equals({ top, left, bottom, right }: Rect): boolean {
     return (
       top === this._top &&
       bottom === this._bottom &&
@@ -68,11 +68,11 @@ export class Rect {
     );
   }
 
-  public contains({x, y}: Point): ContainsPointReturn;
-  public contains({top, left, bottom, right}: Rect): boolean;
+  public contains({ x, y }: Point): ContainsPointReturn;
+  public contains({ top, left, bottom, right }: Rect): boolean;
   public contains(target: Point | Rect): boolean | ContainsPointReturn {
     if (isPoint(target)) {
-      const {x, y} = target;
+      const { x, y } = target;
 
       const isOnTopSide = y < this._top;
       const isOnBottomSide = y > this._bottom;
@@ -92,7 +92,7 @@ export class Rect {
         result,
       };
     } else {
-      const {top, left, bottom, right} = target;
+      const { top, left, bottom, right } = target;
 
       return (
         top >= this._top &&
@@ -108,8 +108,8 @@ export class Rect {
   }
 
   public intersectsWith(rect: Rect): boolean {
-    const {left: x1, top: y1, width: w1, height: h1} = rect;
-    const {left: x2, top: y2, width: w2, height: h2} = this;
+    const { left: x1, top: y1, width: w1, height: h1 } = rect;
+    const { left: x2, top: y2, width: w2, height: h2 } = this;
     const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
     const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
     const minX = x1 <= x2 ? x1 : x2;
@@ -145,13 +145,13 @@ export class Rect {
   }
 
   static fromPoints(startPoint: Point, endPoint: Point): Rect {
-    const {y: top, x: left} = startPoint;
-    const {y: bottom, x: right} = endPoint;
+    const { y: top, x: left } = startPoint;
+    const { y: bottom, x: right } = endPoint;
     return Rect.fromLTRB(left, top, right, bottom);
   }
 
   static fromDOM(dom: HTMLElement): Rect {
-    const {top, width, left, height} = dom.getBoundingClientRect();
+    const { top, width, left, height } = dom.getBoundingClientRect();
     return Rect.fromLWTH(left, width, top, height);
   }
 }
diff --git a/packages/lexical/style/index.css b/packages/lexical/style/index.css
index 7f809482f..9799042aa 100644
--- a/packages/lexical/style/index.css
+++ b/packages/lexical/style/index.css
@@ -4,10 +4,10 @@
  * MIT License
  */
 
-@import "tailwindcss";
+@import 'tailwindcss';
 
- /* Import base styles */
-@import url("base.css");
+/* Import base styles */
+@import url('base.css');
 
 /* Import tailwind.css which contains custom components */
 @import url('tailwind.css');
diff --git a/packages/lexical/style/lexical/CommentPlugin.css b/packages/lexical/style/lexical/CommentPlugin.css
index 976e5e82d..8ee27d2eb 100644
--- a/packages/lexical/style/lexical/CommentPlugin.css
+++ b/packages/lexical/style/lexical/CommentPlugin.css
@@ -5,7 +5,12 @@
  */
 
 .CommentPlugin {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
+    sans-serif;
 }
 
 .CommentPlugin_AddCommentBox {
diff --git a/packages/lexical/style/lexical/Editor.css b/packages/lexical/style/lexical/Editor.css
index 664aa0b47..dbe55fb3a 100644
--- a/packages/lexical/style/lexical/Editor.css
+++ b/packages/lexical/style/lexical/Editor.css
@@ -10,10 +10,15 @@
 
 body .editor-shell {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-/*
+  /*
   background: #eee;
   padding: 0 20px;
 */
@@ -354,7 +359,12 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .component-picker-menu {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
+    sans-serif;
   width: 200px;
 }
 
@@ -717,7 +727,9 @@ i.prettier-error {
   z-index: 10;
   display: block;
   position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
@@ -1089,19 +1101,19 @@ i.prettier-error {
 }
 
 .emoji.happysmile {
-/*  background-image: url(images/emoji/1F642.png); */
+  /*  background-image: url(images/emoji/1F642.png); */
 }
 
 .emoji.veryhappysmile {
-/*  background-image: url(images/emoji/1F600.png); */
+  /*  background-image: url(images/emoji/1F600.png); */
 }
 
 .emoji.unhappysmile {
-/*  background-image: url(images/emoji/1F641.png); */
+  /*  background-image: url(images/emoji/1F641.png); */
 }
 
 .emoji.heart {
-/*   background-image: url(images/emoji/2764.png); */
+  /*   background-image: url(images/emoji/2764.png); */
 }
 
 .keyword {
diff --git a/packages/lexical/style/lexical/FloatingTextFormatToolbarPlugin.css b/packages/lexical/style/lexical/FloatingTextFormatToolbarPlugin.css
index 6ba35ec04..17c527fea 100644
--- a/packages/lexical/style/lexical/FloatingTextFormatToolbarPlugin.css
+++ b/packages/lexical/style/lexical/FloatingTextFormatToolbarPlugin.css
@@ -5,7 +5,12 @@
  */
 
 .floating-text-format-popup {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    '.SFNSText-Regular',
+    sans-serif;
   display: flex;
   background: #fff;
   padding: 4px;
diff --git a/packages/lexical/style/lexical/Rich.css b/packages/lexical/style/lexical/Rich.css
index 6cd47fa6a..987ae3fbc 100644
--- a/packages/lexical/style/lexical/Rich.css
+++ b/packages/lexical/style/lexical/Rich.css
@@ -520,7 +520,9 @@ i.chevron-down {
   z-index: 5;
   display: block;
   position: absolute;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-width: 100px;
diff --git a/packages/lexical/style/lexical/TableOfContentsPlugin.css b/packages/lexical/style/lexical/TableOfContentsPlugin.css
index ad7e3bbfe..a27635e95 100644
--- a/packages/lexical/style/lexical/TableOfContentsPlugin.css
+++ b/packages/lexical/style/lexical/TableOfContentsPlugin.css
@@ -41,7 +41,7 @@
   color: #65676b;
   position: fixed;
   top: 100px;
-/*  right: 100px; */
+  /*  right: 100px; */
   right: 0px;
   padding: 10px;
   width: 250px;
diff --git a/packages/lexical/style/tailwind.css b/packages/lexical/style/tailwind.css
index de0360bd4..9e70ddb87 100644
--- a/packages/lexical/style/tailwind.css
+++ b/packages/lexical/style/tailwind.css
@@ -12,7 +12,9 @@
 
 /* Custom variables for compatibility */
 :root {
-  --font-family-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font-family-system:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --color-gray-dark: #374151;
 }
 
@@ -31,5 +33,7 @@
   color: white;
   background-image: linear-gradient(to right, rgb(59 130 246), rgb(147 51 234));
   border-radius: 9999px;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
diff --git a/packages/lexical/tailwind.config.js b/packages/lexical/tailwind.config.js
index eb1b4264b..7ad055690 100644
--- a/packages/lexical/tailwind.config.js
+++ b/packages/lexical/tailwind.config.js
@@ -15,38 +15,38 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
     },
diff --git a/packages/lexical/tsconfig.json b/packages/lexical/tsconfig.json
index fbe57cdff..6e960a151 100644
--- a/packages/lexical/tsconfig.json
+++ b/packages/lexical/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
-  "include": [
-    "./src/**/*",
-    "./src/**/*.json"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["./src/**/*", "./src/**/*.json"],
+  "exclude": ["node_modules"],
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "baseUrl": "/",
@@ -33,4 +28,4 @@
     "types": ["jest", "node"],
     "lib": ["ESNext", "DOM"]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/lexical/ui-tests/playwright.config.js b/packages/lexical/ui-tests/playwright.config.js
index 167c403e3..049ab67a0 100644
--- a/packages/lexical/ui-tests/playwright.config.js
+++ b/packages/lexical/ui-tests/playwright.config.js
@@ -15,6 +15,6 @@ module.exports = {
     command: 'jlpm start',
     url: 'http://localhost:8888/lab',
     timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
-  }
+    reuseExistingServer: !process.env.CI,
+  },
 };
diff --git a/packages/lexical/ui-tests/tests/datalayer.spec.ts b/packages/lexical/ui-tests/tests/datalayer.spec.ts
index 56298a507..f03f01f8e 100644
--- a/packages/lexical/ui-tests/tests/datalayer.spec.ts
+++ b/packages/lexical/ui-tests/tests/datalayer.spec.ts
@@ -22,6 +22,9 @@ test('should emit an activation console message', async ({ page }) => {
   await page.goto();
 
   expect(
-    logs.filter(s => s === 'JupyterLab extension @datalayer/jupyter-lexical is activated!')
+    logs.filter(
+      s =>
+        s === 'JupyterLab extension @datalayer/jupyter-lexical is activated!',
+    ),
   ).toHaveLength(1);
 });
diff --git a/packages/lexical/webpack.config.js b/packages/lexical/webpack.config.js
index 51d16e0ee..6a50494b6 100644
--- a/packages/lexical/webpack.config.js
+++ b/packages/lexical/webpack.config.js
@@ -4,25 +4,25 @@
  * MIT License
  */
 
-const webpack = require("webpack");
-const path = require("path");
+const webpack = require('webpack');
+const path = require('path');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
 
-const shimJS = path.resolve(__dirname, "src", "emptyshim.js");
+const shimJS = path.resolve(__dirname, 'src', 'emptyshim.js');
 
 function shim(regExp) {
   return new webpack.NormalModuleReplacementPlugin(regExp, shimJS);
 }
 
 const IS_PRODUCTION = process.argv.indexOf('--mode=production') > -1;
-let mode = "development";
+let mode = 'development';
 if (IS_PRODUCTION) {
-  mode = "production";
+  mode = 'production';
 }
 
-let devtool = "inline-source-map";
+let devtool = 'inline-source-map';
 if (IS_PRODUCTION) {
   devtool = false;
 }
@@ -38,7 +38,7 @@ module.exports = {
   watchOptions: {
     aggregateTimeout: 300,
     poll: 5000, // Seems to stabilise HMR file change detection.
-    ignored: "/node_modules/"
+    ignored: '/node_modules/',
   },
   devServer: {
     port: 3208,
@@ -53,36 +53,36 @@ module.exports = {
     minimize,
   },
   output: {
-    publicPath: "http://localhost:3208/",
+    publicPath: 'http://localhost:3208/',
     filename: '[name].[contenthash].jupyter-lexical.js',
   },
   resolve: {
-    extensions: [ '.tsx', '.ts', 'jsx', '.js' ],
-    alias: { 
-      "stream": "stream-browserify",
+    extensions: ['.tsx', '.ts', 'jsx', '.js'],
+    alias: {
+      stream: 'stream-browserify',
+    },
+    fallback: {
+      assert: require.resolve('assert/'),
     },
-    fallback: { 
-      "assert": require.resolve("assert/"),
-    }
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: "babel-loader",
+        loader: 'babel-loader',
         options: {
-          plugins: [
-            "@babel/plugin-proposal-class-properties",
-          ],
+          plugins: ['@babel/plugin-proposal-class-properties'],
           presets: [
-            ["@babel/preset-react", {
+            [
+              '@babel/preset-react',
+              {
                 runtime: 'automatic',
-                importSource: 'react'
+                importSource: 'react',
               },
             ],
-            "@babel/preset-typescript",
+            '@babel/preset-typescript',
           ],
-          cacheDirectory: true
+          cacheDirectory: true,
         },
         exclude: /node_modules/,
       },
@@ -99,13 +99,9 @@ module.exports = {
         test: /\.(jpe?g|png|gif|ico|eot|ttf|map|woff2?)(\?v=\d+\.\d+\.\d+)?$/i,
         type: 'asset/resource',
       },
-      { 
-        test: /\.css$/, 
-        use: [
-          'style-loader', 
-          'css-loader',
-          'postcss-loader'
-        ] 
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
       },
       { test: /\.md$/, use: 'raw-loader' },
       { test: /\.js.map$/, use: 'file-loader' },
@@ -130,14 +126,14 @@ module.exports = {
       {
         test: /\.m?js/,
         resolve: {
-          fullySpecified: false
-        }
+          fullySpecified: false,
+        },
       },
       {
         test: /\.c?js/,
         resolve: {
-          fullySpecified: false
-        }
+          fullySpecified: false,
+        },
       },
       // Special webpack rule for the JupyterLab theme style sheets.
       {
@@ -168,16 +164,16 @@ module.exports = {
           filename: 'schema/[name][ext][query]',
         },
       },
-    ]
+    ],
   },
   plugins: [
     shim(/@fortawesome/),
     new webpack.ProvidePlugin({
-      process: 'process/browser'
+      process: 'process/browser',
     }),
     new HtmlWebpackPlugin({
       title: 'Jupyter Lexical',
-      template : 'public/index.html'
+      template: 'public/index.html',
     }),
     new HtmlWebpackTagsPlugin({
       links: [
@@ -185,10 +181,10 @@ module.exports = {
         'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
       ],
       tags: [
-//        'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js'
+        //        'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js'
       ],
-      append: false, 
-      publicPath: false
+      append: false,
+      publicPath: false,
     }),
-  ]
+  ],
 };
diff --git a/packages/react/.yarnrc.yml b/packages/react/.yarnrc.yml
index 7126b6d6a..0d0b2c083 100644
--- a/packages/react/.yarnrc.yml
+++ b/packages/react/.yarnrc.yml
@@ -6,16 +6,16 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 checksumBehavior: update
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/packages/react/public/index-local.html b/packages/react/public/index-local.html
index d4d1cce29..7388c2d8d 100755
--- a/packages/react/public/index-local.html
+++ b/packages/react/public/index-local.html
@@ -4,47 +4,45 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <title>Jupyter React Example</title>
+    <script id="datalayer-config-data" type="application/json">
+      {
+        "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
+        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+        "runUrl": "https://prod1.datalayer.run",
+        "token": "",
+        "cpuEnvironment": "python-cpu-env",
+        "gpuEnvironment": "pytorch-gpu-env",
+        "credits": 1
+      }
+    </script>
+    <script id="jupyter-config-data" type="application/json">
+      {
+        "appName": "Jupyter React",
+        "baseUrl": "http://localhost:8686/api/jupyter-server",
+        "wsUrl": "ws://localhost:8686/api/jupyter-server",
+        "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+        "appUrl": "/lab",
+        "themesUrl": "/lab/api/themes",
+        "disableRTC": false,
+        "terminalsAvailable": "false",
+        "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
+        "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
+      }
+    </script>
+    <script
+      data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
+      data-jupyter-widgets-cdn-only="true"
+    ></script>
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
+  </head>
 
-<head>
-  <title>Jupyter React Example</title>
-  <script id="datalayer-config-data" type="application/json">
-    {
-      "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
-      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-      "runUrl": "https://prod1.datalayer.run",
-      "token": "",
-      "cpuEnvironment": "python-cpu-env",
-      "gpuEnvironment": "pytorch-gpu-env",
-      "credits": 1
-    }
-  </script>
-  <script id="jupyter-config-data" type="application/json">
-    {
-      "appName": "Jupyter React",
-      "baseUrl": "http://localhost:8686/api/jupyter-server",
-      "wsUrl": "ws://localhost:8686/api/jupyter-server",
-      "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-      "appUrl": "/lab",
-      "themesUrl": "/lab/api/themes",
-      "disableRTC": false,
-      "terminalsAvailable": "false",
-      "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
-      "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
-    }
-  </script>
-  <script
-    data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
-    data-jupyter-widgets-cdn-only="true"
-  >
-  </script>
-  <link rel="shortcut icon"
-    href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
-    type="image/x-icon" />
-</head>
-
-<body>
-</body>
-
+  <body></body>
 </html>
diff --git a/packages/react/public/index-noconfig.html b/packages/react/public/index-noconfig.html
index 797bf9589..aa4b0eebd 100755
--- a/packages/react/public/index-noconfig.html
+++ b/packages/react/public/index-noconfig.html
@@ -4,26 +4,22 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <title>Jupyter React Example</title>
+    <script id="datalayer-config-data" type="application/json"></script>
+    <script id="jupyter-config-data" type="application/json"></script>
+    <script
+      data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
+      data-jupyter-widgets-cdn-only="true"
+    ></script>
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
+  </head>
 
-<head>
-  <title>Jupyter React Example</title>
-  <script id="datalayer-config-data" type="application/json">
-  </script>
-  <script id="jupyter-config-data" type="application/json">
-  </script>
-  <script
-    data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
-    data-jupyter-widgets-cdn-only="true"
-  >
-  </script>
-  <link rel="shortcut icon"
-    href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
-    type="image/x-icon" />
-</head>
-
-<body>
-</body>
-
+  <body></body>
 </html>
diff --git a/packages/react/public/index.html b/packages/react/public/index.html
index 5aa5a6ac9..f8a7ba732 100755
--- a/packages/react/public/index.html
+++ b/packages/react/public/index.html
@@ -4,47 +4,45 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head>
+    <title>Jupyter React Example</title>
+    <script id="datalayer-config-data" type="application/json">
+      {
+        "jupyterServerUrl": "https://prod1.datalayer.run/api/jupyter-server",
+        "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+        "runUrl": "https://prod1.datalayer.run",
+        "token": "",
+        "cpuEnvironment": "python-cpu-env",
+        "gpuEnvironment": "pytorch-gpu-env",
+        "credits": 1
+      }
+    </script>
+    <script id="jupyter-config-data" type="application/json">
+      {
+        "appName": "Jupyter React",
+        "baseUrl": "https://oss.datalayer.run/api/jupyter-server",
+        "wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
+        "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
+        "appUrl": "/lab",
+        "themesUrl": "/lab/api/themes",
+        "disableRTC": false,
+        "terminalsAvailable": "false",
+        "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
+        "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
+      }
+    </script>
+    <script
+      data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
+      data-jupyter-widgets-cdn-only="true"
+    ></script>
+    <link
+      rel="shortcut icon"
+      href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
+      type="image/x-icon"
+    />
+  </head>
 
-<head>
-  <title>Jupyter React Example</title>
-  <script id="datalayer-config-data" type="application/json">
-    {
-      "jupyterServerUrl": "https://prod1.datalayer.run/api/jupyter-server",
-      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-      "runUrl": "https://prod1.datalayer.run",
-      "token": "",
-      "cpuEnvironment": "python-cpu-env",
-      "gpuEnvironment": "pytorch-gpu-env",
-      "credits": 1
-    }
-  </script>
-  <script id="jupyter-config-data" type="application/json">
-    {
-      "appName": "Jupyter React",
-      "baseUrl": "https://oss.datalayer.run/api/jupyter-server",
-      "wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
-      "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
-      "appUrl": "/lab",
-      "themesUrl": "/lab/api/themes",
-      "disableRTC": false,
-      "terminalsAvailable": "false",
-      "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
-      "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
-    }
-  </script>
-  <script
-    data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
-    data-jupyter-widgets-cdn-only="true"
-  >
-  </script>
-  <link rel="shortcut icon"
-    href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
-    type="image/x-icon" />
-</head>
-
-<body>
-</body>
-
+  <body></body>
 </html>
diff --git a/packages/react/src/app/JupyterReact.tsx b/packages/react/src/app/JupyterReact.tsx
index eeca5f1bd..a6be80ef9 100644
--- a/packages/react/src/app/JupyterReact.tsx
+++ b/packages/react/src/app/JupyterReact.tsx
@@ -37,10 +37,10 @@ export const JupyterReact = (props: JupyterFrontEndProps): JSX.Element => {
   return (
     <>
       <JupyterReactTheme loadJupyterLabCss={false}>
-        <Box mb={3} style={{minWidth: 200}}>
+        <Box mb={3} style={{ minWidth: 200 }}>
           <UnderlineNav aria-label="jupyter-react">
             <UnderlineNav.Item
-              aria-current={tab === 1 ? "page" : undefined}
+              aria-current={tab === 1 ? 'page' : undefined}
               icon={RingedPlanetIcon}
               onSelect={e => {
                 e.preventDefault();
@@ -50,7 +50,7 @@ export const JupyterReact = (props: JupyterFrontEndProps): JSX.Element => {
               Components
             </UnderlineNav.Item>
             <UnderlineNav.Item
-              aria-current={tab === 2 ? "page" : undefined}
+              aria-current={tab === 2 ? 'page' : undefined}
               icon={ReactJsIcon}
               onSelect={e => {
                 e.preventDefault();
diff --git a/packages/react/src/app/tabs/ComponentsTab.tsx b/packages/react/src/app/tabs/ComponentsTab.tsx
index 3909816fc..7c7d0c87f 100644
--- a/packages/react/src/app/tabs/ComponentsTab.tsx
+++ b/packages/react/src/app/tabs/ComponentsTab.tsx
@@ -59,11 +59,11 @@ export const ComponentsTab = (props: JupyterFrontEndProps) => {
           </NavList>
         </Box>
         <Box ml={3} sx={{ width: '100%' }}>
-            {nav === 1 && <FileBrowserComponent />}
-            {nav === 2 && <CellComponent />}
-            {nav === 3 && <NotebookComponent />}
-            {nav === 4 && <IPyWidgetsComponent />}
-            {nav === 5 && <ViewerComponent />}
+          {nav === 1 && <FileBrowserComponent />}
+          {nav === 2 && <CellComponent />}
+          {nav === 3 && <NotebookComponent />}
+          {nav === 4 && <IPyWidgetsComponent />}
+          {nav === 5 && <ViewerComponent />}
         </Box>
       </Box>
     </>
diff --git a/packages/react/src/app/tabs/components/FileBrowserComponent.tsx b/packages/react/src/app/tabs/components/FileBrowserComponent.tsx
index 02562aa4e..cac4e5bcb 100644
--- a/packages/react/src/app/tabs/components/FileBrowserComponent.tsx
+++ b/packages/react/src/app/tabs/components/FileBrowserComponent.tsx
@@ -9,11 +9,11 @@ import { FileBrowser } from '../../../components/filebrowser/FileBrowser';
 
 export const FileBrowserComponent = () => {
   const { serviceManager } = useJupyter();
-  return (
-    serviceManager
-      ? <FileBrowser serviceManager={serviceManager}/>
-      : <></>
-  )
+  return serviceManager ? (
+    <FileBrowser serviceManager={serviceManager} />
+  ) : (
+    <></>
+  );
 };
 
 export default FileBrowserComponent;
diff --git a/packages/react/src/app/tabs/components/IPyWidgetsComponent.tsx b/packages/react/src/app/tabs/components/IPyWidgetsComponent.tsx
index 4a40275a5..7d9c79132 100644
--- a/packages/react/src/app/tabs/components/IPyWidgetsComponent.tsx
+++ b/packages/react/src/app/tabs/components/IPyWidgetsComponent.tsx
@@ -4,8 +4,11 @@
  * MIT License
  */
 
-import { OutputIPyWidgets}  from '../../../components/output';
-import { view, state } from './../../../examples/notebooks/OutputIPyWidgetsExample';
+import { OutputIPyWidgets } from '../../../components/output';
+import {
+  view,
+  state,
+} from './../../../examples/notebooks/OutputIPyWidgetsExample';
 
 export const IPyWidgetsComponent = () => {
   return (
diff --git a/packages/react/src/components/cell/Cell.tsx b/packages/react/src/components/cell/Cell.tsx
index 40defeafe..78e9d8bc0 100644
--- a/packages/react/src/components/cell/Cell.tsx
+++ b/packages/react/src/components/cell/Cell.tsx
@@ -67,11 +67,9 @@ export const Cell = (props: ICellProps) => {
   const [adapter, setAdapter] = useState<CellAdapter>();
   const cellsStore = useCellsStore();
   const handleCellInitEvents = (adapter: CellAdapter) => {
-    adapter.cell.model.contentChanged.connect(
-      (cellModel, changedArgs) => {
-        cellsStore.setSource(id, cellModel.sharedModel.getSource());
-      }
-    );
+    adapter.cell.model.contentChanged.connect((cellModel, changedArgs) => {
+      cellsStore.setSource(id, cellModel.sharedModel.getSource());
+    });
     if (adapter.cell instanceof CodeCell) {
       adapter.cell.outputArea.outputLengthChanged?.connect(
         (outputArea, outputsCount) => {
@@ -87,11 +85,11 @@ export const Cell = (props: ICellProps) => {
     });
     adapter.sessionContext.kernelChanged.connect(() => {
       void adapter.sessionContext.session?.kernel?.info.then(info => {
-        // Set that session/kernel is ready for this cell when the kernel is guaranteed to be connected 
+        // Set that session/kernel is ready for this cell when the kernel is guaranteed to be connected
         cellsStore.setKernelSessionAvailable(id, true);
-      })
+      });
     });
-  }
+  };
   useEffect(() => {
     const kernelToUse = kernelProps || defaultKernel;
     if (id && serverSettings && kernelToUse) {
@@ -103,7 +101,7 @@ export const Cell = (props: ICellProps) => {
           outputs,
           serverSettings,
           kernel: kernelToUse,
-          boxOptions: {showToolbar}
+          boxOptions: { showToolbar },
         });
         cellsStore.setAdapter(id, adapter);
         cellsStore.setSource(id, source);
@@ -164,14 +162,10 @@ export const Cell = (props: ICellProps) => {
         },
       }}
     >
-      <Lumino>
-        {adapter.panel}
-      </Lumino>
+      <Lumino>{adapter.panel}</Lumino>
     </Box>
   ) : (
-    <Box>
-      Loading Jupyter Cell...
-    </Box>
+    <Box>Loading Jupyter Cell...</Box>
   );
 };
 
@@ -179,7 +173,7 @@ Cell.defaultProps = {
   autoStart: true,
   source: '',
   outputs: [],
-  showToolbar:true,
+  showToolbar: true,
   startDefaultKernel: true,
   type: 'code',
 } as Partial<ICellProps>;
diff --git a/packages/react/src/components/cell/CellAdapter.ts b/packages/react/src/components/cell/CellAdapter.ts
index 4d9cbf863..9ed4fc4d6 100755
--- a/packages/react/src/components/cell/CellAdapter.ts
+++ b/packages/react/src/components/cell/CellAdapter.ts
@@ -8,19 +8,62 @@ import { BoxPanel, Widget } from '@lumino/widgets';
 import { find } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONObject } from '@lumino/coreutils';
-import { SessionContext, ISessionContext, Toolbar, ToolbarButton } from '@jupyterlab/apputils';
-import { CodeCellModel, CodeCell, Cell, MarkdownCell, RawCell, MarkdownCellModel } from '@jupyterlab/cells';
+import {
+  SessionContext,
+  ISessionContext,
+  Toolbar,
+  ToolbarButton,
+} from '@jupyterlab/apputils';
+import {
+  CodeCellModel,
+  CodeCell,
+  Cell,
+  MarkdownCell,
+  RawCell,
+  MarkdownCellModel,
+} from '@jupyterlab/cells';
 import { IOutput } from '@jupyterlab/nbformat';
 import { Kernel as JupyterKernel, KernelMessage } from '@jupyterlab/services';
-import { ybinding, CodeMirrorMimeTypeService, EditorLanguageRegistry, CodeMirrorEditorFactory, EditorExtensionRegistry, EditorThemeRegistry } from '@jupyterlab/codemirror';
+import {
+  ybinding,
+  CodeMirrorMimeTypeService,
+  EditorLanguageRegistry,
+  CodeMirrorEditorFactory,
+  EditorExtensionRegistry,
+  EditorThemeRegistry,
+} from '@jupyterlab/codemirror';
 import { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
-import { Completer, CompleterModel, CompletionHandler, ProviderReconciliator, KernelCompleterProvider } from '@jupyterlab/completer';
-import { RenderMimeRegistry, standardRendererFactories as initialFactories } from '@jupyterlab/rendermime';
-import { Session, ServerConnection, SessionManager, KernelManager, KernelSpecManager } from '@jupyterlab/services';
+import {
+  Completer,
+  CompleterModel,
+  CompletionHandler,
+  ProviderReconciliator,
+  KernelCompleterProvider,
+} from '@jupyterlab/completer';
+import {
+  RenderMimeRegistry,
+  standardRendererFactories as initialFactories,
+} from '@jupyterlab/rendermime';
+import {
+  Session,
+  ServerConnection,
+  SessionManager,
+  KernelManager,
+  KernelSpecManager,
+} from '@jupyterlab/services';
 import { runIcon } from '@jupyterlab/ui-components';
-import { createStandaloneCell, YCodeCell, IYText, YMarkdownCell } from '@jupyter/ydoc';
+import {
+  createStandaloneCell,
+  YCodeCell,
+  IYText,
+  YMarkdownCell,
+} from '@jupyter/ydoc';
 import { execute as executeOutput } from './../output/OutputExecutor';
-import { ClassicWidgetManager, WIDGET_MIMETYPE, WidgetRenderer } from '../../jupyter/ipywidgets/classic';
+import {
+  ClassicWidgetManager,
+  WIDGET_MIMETYPE,
+  WidgetRenderer,
+} from '../../jupyter/ipywidgets/classic';
 import { requireLoader as loader } from '../../jupyter/ipywidgets/libembed-amd';
 import Kernel from '../../jupyter/kernel/Kernel';
 import getMarked from '../notebook/marked/marked';
@@ -41,7 +84,8 @@ export class CellAdapter {
   private _type: 'code' | 'markdown' | 'raw';
 
   public constructor(options: CellAdapter.ICellAdapterOptions) {
-    const { id, type, source, outputs, serverSettings, kernel, boxOptions } = options;
+    const { id, type, source, outputs, serverSettings, kernel, boxOptions } =
+      options;
     this._id = id;
     this._outputs = outputs;
     this._kernel = kernel;
@@ -170,7 +214,10 @@ export class CellAdapter {
       event => {
         // Trigger and process event only in current focused cell
         const activeElement = document.activeElement;
-        if (activeElement && activeElement.closest('.dla-Jupyter-Cell') === this._cell.node) {
+        if (
+          activeElement &&
+          activeElement.closest('.dla-Jupyter-Cell') === this._cell.node
+        ) {
           commands.processKeydownEvent(event);
         }
       },
@@ -209,13 +256,15 @@ export class CellAdapter {
     if (type === 'code') {
       this._cell = new CodeCell({
         rendermime,
-        model: new CodeCellModel({sharedModel: cellModel as YCodeCell}),
+        model: new CodeCellModel({ sharedModel: cellModel as YCodeCell }),
         contentFactory: contentFactory,
       });
-    }  else if (type === 'markdown') {
+    } else if (type === 'markdown') {
       this._cell = new MarkdownCell({
         rendermime,
-        model: new MarkdownCellModel({sharedModel: cellModel as YMarkdownCell}),
+        model: new MarkdownCellModel({
+          sharedModel: cellModel as YMarkdownCell,
+        }),
         contentFactory: contentFactory,
       });
     }
@@ -250,7 +299,7 @@ export class CellAdapter {
           const mimeType = mimeService.getMimeTypeByLanguage(lang);
           if (this._cell.model) {
             this._cell.model.mimeType = mimeType;
-          } 
+          }
         }
       });
     });
@@ -364,7 +413,7 @@ export class CellAdapter {
     } else if (this._type === 'markdown') {
       (this._cell as MarkdownCell).rendered = true;
     }
-  }
+  };
 
   private async _execute(
     cell: CodeCell,
@@ -384,7 +433,7 @@ export class CellAdapter {
     metadata = {
       ...model.metadata,
       ...metadata,
-      ...cellId
+      ...cellId,
     };
     const { recordTiming } = metadata;
     model.sharedModel.transact(() => {
@@ -478,7 +527,6 @@ export class CellAdapter {
       throw e;
     }
   }
-
 }
 
 export namespace CellAdapter {
diff --git a/packages/react/src/components/cell/CellCommands.ts b/packages/react/src/components/cell/CellCommands.ts
index dca40948b..12a44f7a7 100644
--- a/packages/react/src/components/cell/CellCommands.ts
+++ b/packages/react/src/components/cell/CellCommands.ts
@@ -18,7 +18,7 @@ export const CellCommands = (
   commands: CommandRegistry,
   cell: CodeCell | MarkdownCell | RawCell,
   completerHandler: CompletionHandler,
-  cellAdapter: CellAdapter,
+  cellAdapter: CellAdapter
 ): void => {
   commands.addCommand(cmdIds.invoke, {
     label: 'Completer: Invoke',
diff --git a/packages/react/src/components/cell/CellState.ts b/packages/react/src/components/cell/CellState.ts
index 3702a4412..bb485a426 100644
--- a/packages/react/src/components/cell/CellState.ts
+++ b/packages/react/src/components/cell/CellState.ts
@@ -41,7 +41,9 @@ export type CellsState = ICellsState & {
 /**
  * Iterate over all cells map and check if all cells/sessions are ready
  */
-const areAllKernelSessionsAvailable = (cells: Map<string, ICellState>): boolean => {
+const areAllKernelSessionsAvailable = (
+  cells: Map<string, ICellState>
+): boolean => {
   for (const cell of cells.values()) {
     if (!cell.isKernelSessionAvailable) {
       return false;
@@ -62,7 +64,6 @@ export const isAnyCellRunning = (cells: Map<string, ICellState>): boolean => {
   return false;
 };
 
-
 export const cellsStore = createStore<CellsState>((set, get) => ({
   cells: new Map<string, ICellState>(),
   source: '',
@@ -70,7 +71,8 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
   adapter: undefined,
   areAllKernelSessionsReady: false, // prop refers to all cells
   isAnyCellExecuting: false, // prop refers to all cells,
-  setCells: (cells: Map<string, ICellState>) => set((cell: CellsState) => ({ cells })),
+  setCells: (cells: Map<string, ICellState>) =>
+    set((cell: CellsState) => ({ cells })),
   setSource: (id: string, source: string) => {
     const cells = get().cells;
     const cell = cells.get(id);
@@ -79,7 +81,7 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
     } else {
       cells.set(id, { source });
     }
-    set((cell: CellsState) => ({ cells }))
+    set((cell: CellsState) => ({ cells }));
   },
   setOutputsCount: (id: string, outputsCount: number) => {
     const cells = get().cells;
@@ -91,13 +93,16 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
     }
     set((state: CellsState) => ({ cells }));
   },
-  setKernelSessionAvailable: (id: string, isKernelSessionAvailable: boolean) => {
+  setKernelSessionAvailable: (
+    id: string,
+    isKernelSessionAvailable: boolean
+  ) => {
     const cells = get().cells;
     const cell = cells.get(id);
     if (cell) {
       cell.isKernelSessionAvailable = isKernelSessionAvailable;
     } else {
-      cells.set(id, {isKernelSessionAvailable});
+      cells.set(id, { isKernelSessionAvailable });
     }
     const areAllKernelSessionsReady = areAllKernelSessionsAvailable(cells);
     set((cell: CellsState) => ({ cells, areAllKernelSessionsReady }));
@@ -110,7 +115,7 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
     } else {
       cells.set(id, { adapter });
     }
-    set((cell: CellsState) => ({ cells }))
+    set((cell: CellsState) => ({ cells }));
   },
   getAdapter: (id: string) => {
     return get().cells.get(id)?.adapter;
@@ -124,13 +129,13 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
   isKernelSessionAvailable: (id: string): boolean | undefined => {
     return get().cells.get(id)?.isKernelSessionAvailable;
   },
-  execute: (id: string) => { 
+  execute: (id: string) => {
     const cells = get().cells;
     const cell = cells.get(id);
     if (cell) {
       cell.adapter?.execute();
     } else {
-      get().cells.forEach((cell) => cell.adapter?.execute());
+      get().cells.forEach(cell => cell.adapter?.execute());
     }
   },
   setIsExecuting: (id: string, isExecuting: boolean) => {
@@ -139,7 +144,7 @@ export const cellsStore = createStore<CellsState>((set, get) => ({
     if (cell) {
       cell.isExecuting = isExecuting;
     } else {
-      get().cells.forEach((cell) => cell.adapter?.execute())
+      get().cells.forEach(cell => cell.adapter?.execute());
       cells.set(id, { isExecuting });
     }
 
diff --git a/packages/react/src/components/console/ConsoleAdapter.ts b/packages/react/src/components/console/ConsoleAdapter.ts
index aaa930f95..e9d2f5cff 100755
--- a/packages/react/src/components/console/ConsoleAdapter.ts
+++ b/packages/react/src/components/console/ConsoleAdapter.ts
@@ -41,7 +41,10 @@ class ConsoleAdapter {
     });
   }
 
-  protected setupConsole(serviceManager: ServiceManager.IManager, kernel?: Kernel) {
+  protected setupConsole(
+    serviceManager: ServiceManager.IManager,
+    kernel?: Kernel
+  ) {
     // Set up a command registry.
     const commands = new CommandRegistry();
     this._panel.node.addEventListener('keydown', event => {
diff --git a/packages/react/src/components/console/ConsoleState.ts b/packages/react/src/components/console/ConsoleState.ts
index f556d1cdc..1355441e2 100644
--- a/packages/react/src/components/console/ConsoleState.ts
+++ b/packages/react/src/components/console/ConsoleState.ts
@@ -26,7 +26,8 @@ export const consoleStore = createStore<ConsoleState>((set, get) => ({
   adapter: undefined,
   execute: () => {},
   setOutputs: (outputs: number) => set((state: ConsoleState) => ({ outputs })),
-  setAdapter: (adapter?: ConsoleAdapter) => set((state: ConsoleState) => ({ adapter })),
+  setAdapter: (adapter?: ConsoleAdapter) =>
+    set((state: ConsoleState) => ({ adapter })),
 }));
 
 export function useConsoleStore(): ConsoleState;
diff --git a/packages/react/src/components/environment/Environment.tsx b/packages/react/src/components/environment/Environment.tsx
index c3cf5bd2a..21c9766a6 100644
--- a/packages/react/src/components/environment/Environment.tsx
+++ b/packages/react/src/components/environment/Environment.tsx
@@ -4,6 +4,6 @@
  * MIT License
  */
 
-import { ISpecModel  } from '@jupyterlab/services/lib/kernelspec/kernelspec';
+import { ISpecModel } from '@jupyterlab/services/lib/kernelspec/kernelspec';
 
 export type Environment = ISpecModel;
diff --git a/packages/react/src/components/filebrowser/FileBrowser.tsx b/packages/react/src/components/filebrowser/FileBrowser.tsx
index 804dacf2e..4b21027db 100644
--- a/packages/react/src/components/filebrowser/FileBrowser.tsx
+++ b/packages/react/src/components/filebrowser/FileBrowser.tsx
@@ -23,7 +23,7 @@ const initialTree: RenderTree = {
 
 export type FileBrowserProps = {
   serviceManager: ServiceManager.IManager;
-}
+};
 
 export const FileBrowser = (props: FileBrowserProps) => {
   const { serviceManager } = props;
@@ -89,7 +89,7 @@ export const FileBrowser = (props: FileBrowserProps) => {
   }, [serviceManager]);
   const renderTree = (nodes: RenderTree[]) => {
     return nodes.map((node: RenderTree) => (
-      <TreeView.Item id={node.id}>
+      <TreeView.Item key={node.id} id={node.id}>
         <TreeView.LeadingVisual>
           {Array.isArray(node.children) ? (
             <TreeView.DirectoryIcon />
diff --git a/packages/react/src/components/jupyterlab/JupyterLabApp.tsx b/packages/react/src/components/jupyterlab/JupyterLabApp.tsx
index 7f843ce29..b8445a5c6 100644
--- a/packages/react/src/components/jupyterlab/JupyterLabApp.tsx
+++ b/packages/react/src/components/jupyterlab/JupyterLabApp.tsx
@@ -17,8 +17,10 @@ import JupyterLabAppAdapter from './JupyterLabAppAdapter';
 import JupyterLabAppCss from './JupyterLabAppCss';
 
 // The webpack public path needs to be set before loading the CSS assets.
-(globalThis as any).__webpack_public_path__ = PageConfig.getOption('fullStaticUrl') + '/';
-(window as any).__webpack_public_path__ = PageConfig.getOption('fullStaticUrl') + '/';
+(globalThis as any).__webpack_public_path__ =
+  PageConfig.getOption('fullStaticUrl') + '/';
+(window as any).__webpack_public_path__ =
+  PageConfig.getOption('fullStaticUrl') + '/';
 
 export type JupyterLabAppProps = {
   PluginType?: any;
@@ -71,9 +73,7 @@ const JupyterLabAppComponent = (props: JupyterLabAppProps) => {
     []
   );
   const defaultExtensionPromises = useMemo(
-    () =>
-      props.pluginPromises ??
-      JupyterLabAppCorePlugins().extensionPromises,
+    () => props.pluginPromises ?? JupyterLabAppCorePlugins().extensionPromises,
     []
   );
   const ref = useRef<HTMLDivElement>(null);
diff --git a/packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts b/packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts
index 03f4f10dd..88a775b95 100644
--- a/packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts
+++ b/packages/react/src/components/jupyterlab/JupyterLabAppAdapter.ts
@@ -6,7 +6,12 @@
 
 import { CommandRegistry } from '@lumino/commands';
 import { BoxPanel, Widget, FocusTracker } from '@lumino/widgets';
-import { JupyterLab, JupyterFrontEndPlugin, JupyterFrontEnd, LabShell } from '@jupyterlab/application';
+import {
+  JupyterLab,
+  JupyterFrontEndPlugin,
+  JupyterFrontEnd,
+  LabShell,
+} from '@jupyterlab/application';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { NotebookPanel } from '@jupyterlab/notebook';
@@ -78,10 +83,10 @@ export class JupyterLabAppAdapter {
     });
     const extensionResolved = await Promise.all(extensionPromises!);
     disabledPlugins.push(
-      "@jupyterlab/notebook-extension:language-server",
-      "@jupyterlab/notebook-extension:update-raw-mimetype",
-      "@jupyterlab/fileeditor-extension:language-server",
-      "@jupyterlab/apputils-extension:sessionDialogs",
+      '@jupyterlab/notebook-extension:language-server',
+      '@jupyterlab/notebook-extension:update-raw-mimetype',
+      '@jupyterlab/fileeditor-extension:language-server',
+      '@jupyterlab/apputils-extension:sessionDialogs'
     );
     const disabledPluginsSet = new Set(disabledPlugins);
     extensionResolved.forEach(ext => {
@@ -91,8 +96,7 @@ export class JupyterLabAppAdapter {
             extensions.push(plugin as any);
           }
         });
-      }
-      else {
+      } else {
         if (!disabledPluginsSet.has(ext.default.id)) {
           extensions.push(ext);
         }
@@ -100,22 +104,27 @@ export class JupyterLabAppAdapter {
     });
     this._jupyterLab.registerPluginModules(extensions);
     if (nosplash) {
-      this._jupyterLab.deregisterPlugin('@jupyterlab/apputils-extension:splash', true);
+      this._jupyterLab.deregisterPlugin(
+        '@jupyterlab/apputils-extension:splash',
+        true
+      );
     }
     /*
     if (collaborative) {
       this._jupyterLab.deregisterPlugin("@jupyterlab/filebrowser-extension:default-file-browser", true);
     }
     */
-    this._jupyterLab.start({
-      hostID: hostId,
-      bubblingKeydown: true, // TODO Check this prop.
-      startPlugins: [], // How is this used in JupyterLab core?
-      ignorePlugins: [], // How is this used in JupyterLab core?
-    }).then(() => {
-//      this._plugins = (this._jupyterLab as any)['_plugins'];
-//      this._readyResolve();
-    });
+    this._jupyterLab
+      .start({
+        hostID: hostId,
+        bubblingKeydown: true, // TODO Check this prop.
+        startPlugins: [], // How is this used in JupyterLab core?
+        ignorePlugins: [], // How is this used in JupyterLab core?
+      })
+      .then(() => {
+        //      this._plugins = (this._jupyterLab as any)['_plugins'];
+        //      this._readyResolve();
+      });
     this._jupyterLab.restored.then(() => {
       this._plugins = (this._jupyterLab as any)['_plugins'];
       this._readyResolve();
diff --git a/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts b/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts
index 0fae39aa8..2cf93b8df 100644
--- a/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts
+++ b/packages/react/src/components/jupyterlab/JupyterLabAppPlugins.ts
@@ -14,7 +14,7 @@ export const JupyterLabAppMinimumPlugins = {
     import('@jupyterlab/codemirror-extension'),
     import('@jupyterlab/cell-toolbar-extension'),
     import('@jupyterlab/completer-extension'),
-//    import('@jupyterlab/console-extension'),
+    //    import('@jupyterlab/console-extension'),
     import('@jupyterlab/docmanager-extension'),
     import('@jupyterlab/filebrowser-extension'),
     import('@jupyterlab/mainmenu-extension'),
@@ -43,7 +43,7 @@ export const JupyterLabAppCorePlugins = () => {
       import('@jupyterlab/codemirror-extension'),
       import('@jupyterlab/cell-toolbar-extension'),
       import('@jupyterlab/completer-extension'),
-//      import('@jupyterlab/console-extension'),
+      //      import('@jupyterlab/console-extension'),
       import('@jupyterlab/docmanager-extension'),
       import('@jupyterlab/documentsearch-extension'),
       import('@jupyterlab/filebrowser-extension'),
@@ -52,7 +52,7 @@ export const JupyterLabAppCorePlugins = () => {
       import('@jupyterlab/markedparser-extension'),
       import('@jupyterlab/fileeditor-extension'),
       import('@jupyterlab/launcher-extension'),
-//    import('@jupyterlab/lsp-extension'),
+      //    import('@jupyterlab/lsp-extension'),
       import('@jupyterlab/notebook-extension'),
       import('@jupyterlab/rendermime-extension'),
       import('@jupyterlab/shortcuts-extension'),
diff --git a/packages/react/src/components/kernel/KernelDetective.tsx b/packages/react/src/components/kernel/KernelDetective.tsx
index 8089cb316..f94a65c5d 100644
--- a/packages/react/src/components/kernel/KernelDetective.tsx
+++ b/packages/react/src/components/kernel/KernelDetective.tsx
@@ -5,18 +5,24 @@
  */
 
 import { useState, useEffect } from 'react';
-import { ServerConnection, ServiceManager, Session, Kernel } from "@jupyterlab/services";
+import {
+  ServerConnection,
+  ServiceManager,
+  Session,
+  Kernel,
+} from '@jupyterlab/services';
 import { Box, Text, Label, Button } from '@primer/react';
 
 type IKernelDetectiveProps = {
   serviceManager?: ServiceManager.IManager;
-}
+};
 
 export const KernelDetective = (props: IKernelDetectiveProps) => {
   const { serviceManager } = props;
-  const [ serverSettings, setServerSettings ] = useState<ServerConnection.ISettings>(); 
-  const [ sessions, setSessions ] = useState<Session.IModel[]>([]); 
-  const [ kernels, setKernels ] = useState<Kernel.IModel[]>([]); 
+  const [serverSettings, setServerSettings] =
+    useState<ServerConnection.ISettings>();
+  const [sessions, setSessions] = useState<Session.IModel[]>([]);
+  const [kernels, setKernels] = useState<Kernel.IModel[]>([]);
   const refresh = () => {
     if (serviceManager) {
       setServerSettings(serviceManager.serverSettings);
@@ -33,13 +39,13 @@ export const KernelDetective = (props: IKernelDetectiveProps) => {
         });
       });
     }
-  }
+  };
   useEffect(() => {
     refresh();
   }, [serviceManager]);
   return (
     <>
-      { serviceManager &&
+      {serviceManager && (
         <>
           <Box mb={3}>
             <Button onClick={refresh}>Refresh</Button>
@@ -51,32 +57,42 @@ export const KernelDetective = (props: IKernelDetectiveProps) => {
           </Box>
           <Box>
             <Text as="h3">Kernels</Text>
-            { kernels.map(kernel => {
+            {kernels.map(kernel => {
               return (
                 <Box key={kernel.id}>
                   <Label>Kernel</Label>
-                  <Text> {kernel.name} - {kernel.id} - {kernel.connections} connections</Text>
+                  <Text>
+                    {' '}
+                    {kernel.name} - {kernel.id} - {kernel.connections}{' '}
+                    connections
+                  </Text>
                 </Box>
-              )}
-            )}
+              );
+            })}
           </Box>
           <Box>
             <Text as="h3">Sessions</Text>
-            { sessions.map(session => {
+            {sessions.map(session => {
               return (
                 <Box key={session.id}>
                   <Label>Kernel</Label>
-                  <Text> {session.kernel?.name} - {session.kernel?.id}</Text>
+                  <Text>
+                    {' '}
+                    {session.kernel?.name} - {session.kernel?.id}
+                  </Text>
                   <Label style={{ marginLeft: 10 }}>Session</Label>
-                  <Text> {session.name} - {session.path} - {session.type}</Text>
+                  <Text>
+                    {' '}
+                    {session.name} - {session.path} - {session.type}
+                  </Text>
                 </Box>
-              )}
-            )}
+              );
+            })}
           </Box>
         </>
-      }
+      )}
     </>
   );
-}
+};
 
 export default KernelDetective;
diff --git a/packages/react/src/components/kernel/KernelSelector.tsx b/packages/react/src/components/kernel/KernelSelector.tsx
index 76205f6d0..0ff9528e3 100644
--- a/packages/react/src/components/kernel/KernelSelector.tsx
+++ b/packages/react/src/components/kernel/KernelSelector.tsx
@@ -56,10 +56,11 @@ export const KernelSelector = (props: Props) => {
           <ActionList showDividers>
             {kernels && (
               <ActionList.Group title="Connect to a running Kernel">
-                {kernels.map(kernel => {
+                {kernels.map((kernel, index) => {
                   return (
                     <ActionList.Item
-                      onSelect={e => {
+                      key={kernel?.id || index}
+                      onSelect={_e => {
                         selectKernel(kernel!);
                       }}
                     >
@@ -77,10 +78,11 @@ export const KernelSelector = (props: Props) => {
             )}
             <ActionList.Group title="Launch a new Kernel">
               {kernelSpecs &&
-                Object.values(kernelSpecs).map(specModel => {
+                Object.values(kernelSpecs).map((specModel, index) => {
                   return (
                     <ActionList.Item
-                      onSelect={e => {
+                      key={specModel?.name || index}
+                      onSelect={_e => {
                         selectKernelSpec(specModel!);
                       }}
                     >
diff --git a/packages/react/src/components/kernel/Kernelndicator.tsx b/packages/react/src/components/kernel/Kernelndicator.tsx
index 6c73dd1ad..8eb47934a 100644
--- a/packages/react/src/components/kernel/Kernelndicator.tsx
+++ b/packages/react/src/components/kernel/Kernelndicator.tsx
@@ -17,25 +17,27 @@ import {
   CircleWhiteIcon,
   CircleYellowIcon,
   CircleCurrentColorIcon,
-  PlusCircleIcon
+  PlusCircleIcon,
 } from '@datalayer/icons-react';
 import { KernelMessage } from '@jupyterlab/services';
-import { ConnectionStatus, IKernelConnection } from '@jupyterlab/services/lib/kernel/kernel';
+import {
+  ConnectionStatus,
+  IKernelConnection,
+} from '@jupyterlab/services/lib/kernel/kernel';
 import { Environment } from '../environment/Environment';
 
-export type ExecutionState = 
-  'connecting' |
-  'connected-unknown' |
-  'connected-starting' |
-  'connected-idle' |
-  'connected-busy' |
-  'connected-terminating' |
-  'connected-restarting' |
-  'connected-autorestarting' |
-  'connected-dead' |
-  'disconnecting' | 
-  'undefined'
-  ;
+export type ExecutionState =
+  | 'connecting'
+  | 'connected-unknown'
+  | 'connected-starting'
+  | 'connected-idle'
+  | 'connected-busy'
+  | 'connected-terminating'
+  | 'connected-restarting'
+  | 'connected-autorestarting'
+  | 'connected-dead'
+  | 'disconnecting'
+  | 'undefined';
 
 /**
  * The valid kernel connection states.
@@ -55,9 +57,10 @@ export type ExecutionState =
  *
  * Status = 'unknown' | 'starting' | 'idle' | 'busy' | 'terminating' | 'restarting' | 'autorestarting' | 'dead';
  */
+/* eslint-disable react/jsx-key */
 export const KERNEL_STATES: Map<ExecutionState, ReactElement> = new Map([
   ['connecting', <PlusCircleIcon />],
-  ['connected-unknown', <CircleCurrentColorIcon color='lightgray' />],
+  ['connected-unknown', <CircleCurrentColorIcon color="lightgray" />],
   ['connected-starting', <CircleYellowIcon />],
   ['connected-idle', <CircleGreenIcon />],
   ['connected-busy', <CircleOrangeIcon />],
@@ -68,15 +71,19 @@ export const KERNEL_STATES: Map<ExecutionState, ReactElement> = new Map([
   ['disconnecting', <CircleBrownIcon />],
   ['undefined', <CircleBlackIcon />],
 ]);
+/* eslint-enable react/jsx-key */
 
-export const toKernelState = (connectionStatus: ConnectionStatus, status: KernelMessage.Status): ExecutionState => {
+export const toKernelState = (
+  connectionStatus: ConnectionStatus,
+  status: KernelMessage.Status
+): ExecutionState => {
   if (
     connectionStatus === 'connecting' ||
     connectionStatus === 'disconnected'
   ) {
     return connectionStatus as ExecutionState;
   }
-  return connectionStatus + '-' + status as ExecutionState;
+  return (connectionStatus + '-' + status) as ExecutionState;
 };
 
 type KernelIndicatorProps = {
@@ -92,11 +99,9 @@ export const KernelIndicator = (props: KernelIndicatorProps) => {
     if (kernel) {
       setConnectionStatus(kernel?.connectionStatus);
       setStatus(kernel?.status);
-      kernel.connectionStatusChanged.connect(
-        (_, connectionStatus) => {
-          setConnectionStatus(connectionStatus);
-        }
-      );
+      kernel.connectionStatusChanged.connect((_, connectionStatus) => {
+        setConnectionStatus(connectionStatus);
+      });
       kernel.statusChanged.connect((_, status) => {
         setStatus(status);
       });
diff --git a/packages/react/src/components/kernel/Kernels.tsx b/packages/react/src/components/kernel/Kernels.tsx
index c8e50f62f..77f399baa 100644
--- a/packages/react/src/components/kernel/Kernels.tsx
+++ b/packages/react/src/components/kernel/Kernels.tsx
@@ -7,7 +7,11 @@
 import { useState, useEffect } from 'react';
 import { Table, DataTable, Blankslate } from '@primer/react/experimental';
 import { Box, Text, IconButton, Spinner } from '@primer/react';
-import { CrossMarkIcon, JupyterIcon, NotebookIcon } from '@datalayer/icons-react';
+import {
+  CrossMarkIcon,
+  JupyterIcon,
+  NotebookIcon,
+} from '@datalayer/icons-react';
 import { ServiceManager } from '@jupyterlab/services';
 import { JSONExt } from '@lumino/coreutils';
 import { IModel } from '@jupyterlab/services/lib/kernel/kernel';
diff --git a/packages/react/src/components/kernel/inspector/widget.tsx b/packages/react/src/components/kernel/inspector/widget.tsx
index 37b7078c5..85d1b29d0 100644
--- a/packages/react/src/components/kernel/inspector/widget.tsx
+++ b/packages/react/src/components/kernel/inspector/widget.tsx
@@ -14,7 +14,7 @@ import {
 } from '@jupyterlab/ui-components';
 import { Message as luminoMessage } from '@lumino/messaging';
 import { Widget, BoxLayout } from '@lumino/widgets';
-import { ObjectInspector, ObjectLabel   } from 'react-inspector';
+import { ObjectInspector, ObjectLabel } from 'react-inspector';
 import { newUuid } from '../../../utils';
 import { KernelSpyModel, ThreadIterator } from './model';
 
@@ -55,7 +55,7 @@ function msgNodeRenderer(args: {
   data: any;
   isNonenumerable: boolean;
 }) {
-    const { name, depth, isNonenumerable, data } = args;
+  const { name, depth, isNonenumerable, data } = args;
   if (depth !== 0) {
     return (
       <ObjectLabel
diff --git a/packages/react/src/components/lumino/Lumino.tsx b/packages/react/src/components/lumino/Lumino.tsx
index 0f99fc41c..2421cdfb6 100644
--- a/packages/react/src/components/lumino/Lumino.tsx
+++ b/packages/react/src/components/lumino/Lumino.tsx
@@ -31,23 +31,19 @@ export const Lumino = (props: LuminoProps) => {
           }
         } catch (e) {
           // no-op.
-//          console.debug('Exception while detaching Lumino widget.', e);
+          //          console.debug('Exception while detaching Lumino widget.', e);
         }
       };
     }
   }, [ref, children]);
   return (
-    <div
-      id={id}
-      ref={ref}
-      style={{ height: height, minHeight: height }}
-    />
+    <div id={id} ref={ref} style={{ height: height, minHeight: height }} />
   );
-}
+};
 
 Lumino.defaultProps = {
   id: 'lumino-id',
   height: '100%',
-}
+};
 
 export default Lumino;
diff --git a/packages/react/src/components/notebook/Notebook.tsx b/packages/react/src/components/notebook/Notebook.tsx
index dcf238a5e..c432a7243 100644
--- a/packages/react/src/components/notebook/Notebook.tsx
+++ b/packages/react/src/components/notebook/Notebook.tsx
@@ -17,10 +17,22 @@ import { Box } from '@primer/react';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { WebsocketProvider as YWebsocketProvider } from 'y-websocket';
-import { jupyterReactStore, KernelTransfer, OnSessionConnection, } from '../../state';
+import {
+  jupyterReactStore,
+  KernelTransfer,
+  OnSessionConnection,
+} from '../../state';
 import { newUuid, sleep } from '../../utils';
 import { asObservable, Lumino } from '../lumino';
-import { COLLABORATION_ROOM_URL_PATH, requestDatalayerollaborationSessionId, ICollaborationProvider, Kernel, Lite, requestJupyterCollaborationSession, useJupyter } from './../../jupyter';
+import {
+  COLLABORATION_ROOM_URL_PATH,
+  requestDatalayerollaborationSessionId,
+  ICollaborationProvider,
+  Kernel,
+  Lite,
+  requestJupyterCollaborationSession,
+  useJupyter,
+} from './../../jupyter';
 import { CellMetadataEditor } from './cell/metadata';
 import { NotebookAdapter } from './NotebookAdapter';
 import { useNotebookStore } from './NotebookState';
@@ -46,7 +58,7 @@ const GlobalStyle = createGlobalStyle<any>`
   .dla-Box-Notebook .jp-Cell.jp-mod-active .dla-CellSidebar-Container {
     display: block;
   }
-`
+`;
 
 export type INotebookProps = {
   Toolbar?: (props: INotebookToolbarProps) => JSX.Element;
@@ -122,7 +134,7 @@ export const Notebook = (props: INotebookProps) => {
 
   // Bootstrap the Notebook Adapter.
   const bootstrapAdapter = async (
-//    collaborative: ICollaborative,
+    //    collaborative: ICollaborative,
     serviceManager?: ServiceManager.IManager,
     kernel?: Kernel
   ) => {
@@ -143,7 +155,9 @@ export const Notebook = (props: INotebookProps) => {
         adapter,
       });
       extension.createNew(adapter.notebookPanel!, adapter.context!);
-      setExtensionComponents(extensionComponents.concat(extension.component ?? <></>));
+      setExtensionComponents(
+        extensionComponents.concat(extension.component ?? <></>)
+      );
     });
     // Update the notebook state with the adapter.
     notebookStore.update({ id, state: { adapter } });
@@ -183,9 +197,7 @@ export const Notebook = (props: INotebookProps) => {
           if (panelDiv) {
             const cellMetadataOptions = (
               <Box mt={3}>
-                <CellMetadataEditor
-                  cellModel={cellModel.model}
-                />
+                <CellMetadataEditor cellModel={cellModel.model} />
               </Box>
             );
             const portal = createPortal(cellMetadataOptions, panelDiv);
@@ -289,11 +301,16 @@ export const Notebook = (props: INotebookProps) => {
         if (collaborative == 'jupyter') {
           const token =
             jupyterReactStore.getState().jupyterConfig?.jupyterServerToken;
-          const session = await requestJupyterCollaborationSession('json', 'notebook', path!);
-          const documentURL = URLExt.join(
-            serviceManager?.serverSettings.wsUrl!,
-            COLLABORATION_ROOM_URL_PATH
+          const session = await requestJupyterCollaborationSession(
+            'json',
+            'notebook',
+            path!
           );
+          const wsUrl = serviceManager?.serverSettings.wsUrl;
+          if (!wsUrl) {
+            throw new Error('WebSocket URL is not available');
+          }
+          const documentURL = URLExt.join(wsUrl, COLLABORATION_ROOM_URL_PATH);
           const documentName = `${session.format}:${session.type}:${session.fileId}`;
           provider = new YWebsocketProvider(documentURL, documentName, ydoc, {
             disableBc: true,
@@ -304,7 +321,8 @@ export const Notebook = (props: INotebookProps) => {
             awareness,
           });
         } else if (collaborative == 'datalayer') {
-          const { runUrl, token } = jupyterReactStore.getState().datalayerConfig ?? {};
+          const { runUrl, token } =
+            jupyterReactStore.getState().datalayerConfig ?? {};
           const documentName = id;
           const documentURL = URLExt.join(runUrl!, `/api/spacer/v1/documents`);
           const sessionId = await requestDatalayerollaborationSessionId({
@@ -368,7 +386,6 @@ export const Notebook = (props: INotebookProps) => {
       }
       sharedModel?.dispose();
     };
-
   }, [adapter?.notebookPanel, collaborative]);
 
   useEffect(() => {
@@ -464,10 +481,8 @@ export const Notebook = (props: INotebookProps) => {
           },
         }}
       >
-        <>
-          {portals?.map((portal: React.ReactPortal) => portal)}
-        </>
-        <GlobalStyle/>
+        <>{portals?.map((portal: React.ReactPortal) => portal)}</>
+        <GlobalStyle />
         <Box>
           {extensionComponents.map((extensionComponent, index) => {
             return (
@@ -477,11 +492,11 @@ export const Notebook = (props: INotebookProps) => {
             );
           })}
         </Box>
-        {isLoading ?
+        {isLoading ? (
           <Loader />
-        :
+        ) : (
           <Box>{adapter && <Lumino id={id}>{adapter.panel}</Lumino>}</Box>
-        }
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/components/notebook/Notebook2.tsx b/packages/react/src/components/notebook/Notebook2.tsx
index fdeb5c89e..49807daef 100644
--- a/packages/react/src/components/notebook/Notebook2.tsx
+++ b/packages/react/src/components/notebook/Notebook2.tsx
@@ -28,7 +28,7 @@ const GlobalStyle = createGlobalStyle<any>`
   .dla-Box-Notebook .jp-Cell.jp-mod-active .dla-CellSidebar-Container {
     display: block;
   }
-`
+`;
 
 /**
  * Simple notebook component properties
@@ -120,7 +120,9 @@ export interface INotebook2Props {
  * - You must provide the appropriate service manager
  * - You can specify the kernel id to use; if it is not defined or empty and startDefaultKernel is true, a new kernel will be started.
  */
-export function Notebook2(props: React.PropsWithChildren<INotebook2Props>): JSX.Element {
+export function Notebook2(
+  props: React.PropsWithChildren<INotebook2Props>
+): JSX.Element {
   const {
     Toolbar,
     children,
@@ -206,8 +208,8 @@ export function Notebook2(props: React.PropsWithChildren<INotebook2Props>): JSX.
             overflowY: 'scroll',
           },
           '& .jp-NotebookPanel': {
-//            height: '100% !important',
-//            width: '100% !important',
+            //            height: '100% !important',
+            //            width: '100% !important',
           },
           '& .jp-Toolbar': {
             display: 'none',
@@ -237,8 +239,8 @@ export function Notebook2(props: React.PropsWithChildren<INotebook2Props>): JSX.
         }}
       >
         {children}
-        <GlobalStyle/>
-        {model && serviceManager &&
+        <GlobalStyle />
+        {model && serviceManager && (
           <Notebook2Base
             commands={commands}
             id={id}
@@ -250,7 +252,7 @@ export function Notebook2(props: React.PropsWithChildren<INotebook2Props>): JSX.
             serviceManager={serviceManager}
             onSessionConnectionChanged={onSessionConnection}
           />
-        }
+        )}
       </Box>
     </Box>
   );
diff --git a/packages/react/src/components/notebook/Notebook2Base.tsx b/packages/react/src/components/notebook/Notebook2Base.tsx
index bfabf643a..6c0f1937e 100644
--- a/packages/react/src/components/notebook/Notebook2Base.tsx
+++ b/packages/react/src/components/notebook/Notebook2Base.tsx
@@ -8,8 +8,21 @@ import { useEffect, useMemo, useState } from 'react';
 import type { ISessionContext } from '@jupyterlab/apputils';
 import type { Cell, CodeCell, ICellModel } from '@jupyterlab/cells';
 import { type IEditorServices } from '@jupyterlab/codeeditor';
-import { CodeMirrorEditorFactory, CodeMirrorMimeTypeService, EditorExtensionRegistry, EditorLanguageRegistry, EditorThemeRegistry, ybinding } from '@jupyterlab/codemirror';
-import { Completer, CompleterModel, CompletionHandler, KernelCompleterProvider, ProviderReconciliator } from '@jupyterlab/completer';
+import {
+  CodeMirrorEditorFactory,
+  CodeMirrorMimeTypeService,
+  EditorExtensionRegistry,
+  EditorLanguageRegistry,
+  EditorThemeRegistry,
+  ybinding,
+} from '@jupyterlab/codemirror';
+import {
+  Completer,
+  CompleterModel,
+  CompletionHandler,
+  KernelCompleterProvider,
+  ProviderReconciliator,
+} from '@jupyterlab/completer';
 import { PathExt, URLExt, type IChangedArgs } from '@jupyterlab/coreutils';
 import { Context, type DocumentRegistry } from '@jupyterlab/docregistry';
 import { rendererFactory as javascriptRendererFactory } from '@jupyterlab/javascript-extension';
@@ -17,9 +30,28 @@ import { rendererFactory as jsonRendererFactory } from '@jupyterlab/json-extensi
 import { createMarkdownParser } from '@jupyterlab/markedparser-extension';
 import { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
 import type { INotebookContent } from '@jupyterlab/nbformat';
-import { NotebookModel, NotebookModelFactory, NotebookPanel, NotebookTracker, NotebookWidgetFactory, StaticNotebook, type INotebookModel,  type Notebook } from '@jupyterlab/notebook';
-import { RenderMimeRegistry, standardRendererFactories, type IRenderMime } from '@jupyterlab/rendermime';
-import type { Contents, Kernel, ServiceManager, Session, SessionManager } from '@jupyterlab/services';
+import {
+  NotebookModel,
+  NotebookModelFactory,
+  NotebookPanel,
+  NotebookTracker,
+  NotebookWidgetFactory,
+  StaticNotebook,
+  type INotebookModel,
+  type Notebook,
+} from '@jupyterlab/notebook';
+import {
+  RenderMimeRegistry,
+  standardRendererFactories,
+  type IRenderMime,
+} from '@jupyterlab/rendermime';
+import type {
+  Contents,
+  Kernel,
+  ServiceManager,
+  Session,
+  SessionManager,
+} from '@jupyterlab/services';
 import type { ISessionConnection } from '@jupyterlab/services/lib/session/session';
 import { YNotebook, type ISharedNotebook, type IYText } from '@jupyter/ydoc';
 import { find } from '@lumino/algorithm';
@@ -32,7 +64,15 @@ import { Box } from '@primer/react';
 import { Banner } from '@primer/react/experimental';
 import { EditorView } from 'codemirror';
 import { WebsocketProvider } from 'y-websocket';
-import { COLLABORATION_ROOM_URL_PATH, ICollaborationServer, requestDatalayerollaborationSessionId, requestJupyterCollaborationSession, WIDGET_MIMETYPE, WidgetLabRenderer, WidgetManager } from '../../jupyter';
+import {
+  COLLABORATION_ROOM_URL_PATH,
+  ICollaborationServer,
+  requestDatalayerollaborationSessionId,
+  requestJupyterCollaborationSession,
+  WIDGET_MIMETYPE,
+  WidgetLabRenderer,
+  WidgetManager,
+} from '../../jupyter';
 import type { OnSessionConnection } from '../../state';
 import { newUuid, remoteUserCursors } from '../../utils';
 import { Lumino } from '../lumino';
@@ -115,15 +155,27 @@ export function Notebook2Base(props: INotebook2BaseProps): JSX.Element {
   } = props;
 
   const [isLoading, setIsLoading] = useState(true);
-  const [extensionComponents, setExtensionComponents] = useState(new Array<JSX.Element>());
+  const [extensionComponents, setExtensionComponents] = useState(
+    new Array<JSX.Element>()
+  );
   const [completer, setCompleter] = useState<CompletionHandler | null>(null);
 
   const id = useMemo(() => props.id || newUuid(), [props.id]);
-  const path = useMemo(() => props.path || FALLBACK_NOTEBOOK_PATH, [props.path]);
-  const features = useMemo(() => new CommonFeatures({ commands, renderers }), [commands, renderers]);
-  const contentFactory = useMemo(() => new NotebookPanel.ContentFactory(
-    {editorFactory: features.editorServices.factoryService.newInlineEditor}
-  ),[features.editorServices.factoryService.newInlineEditor]);
+  const path = useMemo(
+    () => props.path || FALLBACK_NOTEBOOK_PATH,
+    [props.path]
+  );
+  const features = useMemo(
+    () => new CommonFeatures({ commands, renderers }),
+    [commands, renderers]
+  );
+  const contentFactory = useMemo(
+    () =>
+      new NotebookPanel.ContentFactory({
+        editorFactory: features.editorServices.factoryService.newInlineEditor,
+      }),
+    [features.editorServices.factoryService.newInlineEditor]
+  );
 
   useEffect(() => {
     const completer = new Completer({ model: new CompleterModel() });
@@ -148,7 +200,8 @@ export function Notebook2Base(props: INotebook2BaseProps): JSX.Element {
   }, []);
 
   // Widget factory.
-  const [widgetFactory, setWidgetFactory] = useState<NotebookWidgetFactory | null>(null);
+  const [widgetFactory, setWidgetFactory] =
+    useState<NotebookWidgetFactory | null>(null);
 
   useEffect(() => {
     const thisFactory = new NotebookWidgetFactory({
@@ -179,16 +232,17 @@ export function Notebook2Base(props: INotebook2BaseProps): JSX.Element {
   // Tracker & commands.
   const [tracker, setTracker] = useState<NotebookTracker | null>(null);
   useEffect(() => {
-    const thisTracker = completer ? new NotebookTracker({ namespace: id }) : null;
-    const commands = completer ?
-      addNotebookCommands(
+    const thisTracker = completer
+      ? new NotebookTracker({ namespace: id })
+      : null;
+    const commands = completer
+      ? addNotebookCommands(
           features.commands,
           completer,
           thisTracker!,
-          props.path,
+          props.path
         )
-    :
-      null;
+      : null;
     setTracker(thisTracker);
     return () => {
       commands?.dispose();
@@ -306,7 +360,6 @@ export function Notebook2Base(props: INotebook2BaseProps): JSX.Element {
       }
       setPanel(panel => (panel === thisPanel ? null : panel));
     };
-
   }, [context, extensions, features.commands, widgetFactory]);
 
   useEffect(() => {
@@ -560,7 +613,7 @@ type IOptions = {
    * URL to fetch the notebook content from.
    */
   url?: string;
-}
+};
 
 /**
  * Hook to handle a notebook model.
@@ -571,7 +624,6 @@ type IOptions = {
  * - {@link collaborationServer}: Parameters to connect to a collaboration server
  */
 export function useNotebookModel(options: IOptions): NotebookModel | null {
-
   const { collaborationServer, nbformat, readonly = false, url } = options;
 
   // Generate the notebook model
@@ -648,14 +700,21 @@ export function useNotebookModel(options: IOptions): NotebookModel | null {
             path,
             serverSettings
           );
-          documentURL = URLExt.join(serverSettings.wsUrl, COLLABORATION_ROOM_URL_PATH);
+          documentURL = URLExt.join(
+            serverSettings.wsUrl,
+            COLLABORATION_ROOM_URL_PATH
+          );
           documentName = `${session.format}:${session.type}:${session.fileId}`;
           params.sessionId = session.sessionId;
           if (serverSettings.token) {
             params.token = serverSettings.token;
           }
         } else if (collaborationServer.type === 'datalayer') {
-          const { baseURL, documentName: documentName_, token } = collaborationServer;
+          const {
+            baseURL,
+            documentName: documentName_,
+            token,
+          } = collaborationServer;
           documentName = documentName_; // Set non local variable.
           const serverURL = URLExt.join(baseURL, '/api/spacer/v1/documents');
           documentURL = serverURL.replace(/^http/, 'ws');
diff --git a/packages/react/src/components/notebook/NotebookAdapter.ts b/packages/react/src/components/notebook/NotebookAdapter.ts
index a057d99b1..26abea9b6 100755
--- a/packages/react/src/components/notebook/NotebookAdapter.ts
+++ b/packages/react/src/components/notebook/NotebookAdapter.ts
@@ -8,18 +8,47 @@ import { WIDGET_MIMETYPE } from '@jupyter-widgets/html-manager/lib/output_render
 import { ISharedAttachmentsCell, IYText } from '@jupyter/ydoc';
 import { Cell, ICellModel, MarkdownCell } from '@jupyterlab/cells';
 import { IEditorServices } from '@jupyterlab/codeeditor';
-import { CodeMirrorEditorFactory, CodeMirrorMimeTypeService, EditorExtensionRegistry, EditorLanguageRegistry, EditorThemeRegistry, ybinding } from '@jupyterlab/codemirror';
-import { Completer, CompleterModel, CompletionHandler, KernelCompleterProvider, ProviderReconciliator } from '@jupyterlab/completer';
+import {
+  CodeMirrorEditorFactory,
+  CodeMirrorMimeTypeService,
+  EditorExtensionRegistry,
+  EditorLanguageRegistry,
+  EditorThemeRegistry,
+  ybinding,
+} from '@jupyterlab/codemirror';
+import {
+  Completer,
+  CompleterModel,
+  CompletionHandler,
+  KernelCompleterProvider,
+  ProviderReconciliator,
+} from '@jupyterlab/completer';
 import { IChangedArgs } from '@jupyterlab/coreutils';
 import { Context, DocumentRegistry } from '@jupyterlab/docregistry';
 import { rendererFactory as javascriptRendererFactory } from '@jupyterlab/javascript-extension';
 import { rendererFactory as jsonRendererFactory } from '@jupyterlab/json-extension';
 import { MathJaxTypesetter } from '@jupyterlab/mathjax-extension';
 import { CellType, IAttachments, INotebookContent } from '@jupyterlab/nbformat';
-import { INotebookModel, Notebook, NotebookPanel, NotebookTracker, NotebookWidgetFactory, StaticNotebook } from '@jupyterlab/notebook';
-import { RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime';
+import {
+  INotebookModel,
+  Notebook,
+  NotebookPanel,
+  NotebookTracker,
+  NotebookWidgetFactory,
+  StaticNotebook,
+} from '@jupyterlab/notebook';
+import {
+  RenderMimeRegistry,
+  standardRendererFactories,
+} from '@jupyterlab/rendermime';
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
-import { Contents, Kernel as JupyterKernel, ServiceManager, Session, SessionManager } from '@jupyterlab/services';
+import {
+  Contents,
+  Kernel as JupyterKernel,
+  ServiceManager,
+  Session,
+  SessionManager,
+} from '@jupyterlab/services';
 import { find } from '@lumino/algorithm';
 import { CommandRegistry } from '@lumino/commands';
 import { BoxPanel, Widget } from '@lumino/widgets';
@@ -34,7 +63,6 @@ import { addNotebookCommands } from './NotebookCommands';
 const FALLBACK_NOTEBOOK_PATH = '.datalayer/ping.ipynb';
 
 export class NotebookAdapter {
-
   private _boxPanel: BoxPanel;
   private _commands: CommandRegistry;
   private _contentFactory: JupyterReactContentFactory;
@@ -62,7 +90,6 @@ export class NotebookAdapter {
   private _url?: string;
 
   constructor(props: INotebookProps) {
-
     console.log('Creating a new Notebook Adapter.');
 
     this._id = props.id;
@@ -87,27 +114,28 @@ export class NotebookAdapter {
     this._commands = new CommandRegistry();
 
     if (props.url) {
-      this.loadFromUrl(props.url).then((nbformat) => {
+      this.loadFromUrl(props.url).then(nbformat => {
         this._nbformat = nbformat;
         this.setupAdapter();
-      })
-    }
-    else {
+      });
+    } else {
       this.setupAdapter();
     }
   }
 
   async loadFromUrl(url: string) {
-    return fetch(url).then(response => {
-      return response.text();
-    }).then(nb => {
-      return JSON.parse(nb);
-    });
+    return fetch(url)
+      .then(response => {
+        return response.text();
+      })
+      .then(nb => {
+        return JSON.parse(nb);
+      });
   }
 
   notebookKeydownListener = (event: KeyboardEvent) => {
     this._commands?.processKeydownEvent(event);
-  }
+  };
 
   setupCompleter(notebookPanel: NotebookPanel) {
     const editor =
@@ -148,7 +176,7 @@ export class NotebookAdapter {
         if (cell) {
           cell.ready.then(() => {
             handler.editor = cell && cell.editor;
-          });  
+          });
         }
       }
     );
@@ -158,8 +186,8 @@ export class NotebookAdapter {
   }
 
   initializeContext() {
-
-    const isNbFormat = this._path !== undefined && this._path !== '' ? false : true;
+    const isNbFormat =
+      this._path !== undefined && this._path !== '' ? false : true;
 
     this._context = new Context({
       manager: this._serviceManager,
@@ -177,13 +205,14 @@ export class NotebookAdapter {
     this._iPyWidgetsManager = new WidgetManager(
       this._context,
       this._rendermime!,
-      { saveState: false },
+      { saveState: false }
     );
     const ipywidgetsRendererFactory: IRenderMime.IRendererFactory = {
       safe: true,
       mimeTypes: [WIDGET_MIMETYPE],
       defaultRank: 1,
-      createRenderer: options => new WidgetLabRenderer(options, this._iPyWidgetsManager),
+      createRenderer: options =>
+        new WidgetLabRenderer(options, this._iPyWidgetsManager),
     };
     this._rendermime!.addFactory(ipywidgetsRendererFactory, 1);
     this._kernelClients?.map(kernelClient => {
@@ -191,35 +220,39 @@ export class NotebookAdapter {
     });
 
     // These are fixes on the Context and the SessionContext to have more control on the kernel launch.
-    (this._context.sessionContext as any)._initialize = async (): Promise<boolean> => {
-      const manager = (this._context!.sessionContext as any).sessionManager as SessionManager;
-      await manager.ready;
-      await manager.refreshRunning();
-      const model = find(manager.running(), model => {
-        return model.kernel?.id === this._kernel?.id;
-      });
-      if (model) {
-        try {
-          const session = manager.connectTo({
-            model: {
-              ...model,
-              path: this._path ?? model.path,
-              name: this._path ?? model.name,
-            },
-            kernelConnectionOptions: {
-              handleComms: true,
-            },
-          });
-          (this._context!.sessionContext as any)._handleNewSession(session);
-          // Dispose the previous KernelConnection to avoid errors with Comms.
-          this._kernel?.connection?.dispose();
-        } catch (err) {
-          void (this._context!.sessionContext as any)._handleSessionError(err);
-          return Promise.reject(err);
+    (this._context.sessionContext as any)._initialize =
+      async (): Promise<boolean> => {
+        const manager = (this._context!.sessionContext as any)
+          .sessionManager as SessionManager;
+        await manager.ready;
+        await manager.refreshRunning();
+        const model = find(manager.running(), model => {
+          return model.kernel?.id === this._kernel?.id;
+        });
+        if (model) {
+          try {
+            const session = manager.connectTo({
+              model: {
+                ...model,
+                path: this._path ?? model.path,
+                name: this._path ?? model.name,
+              },
+              kernelConnectionOptions: {
+                handleComms: true,
+              },
+            });
+            (this._context!.sessionContext as any)._handleNewSession(session);
+            // Dispose the previous KernelConnection to avoid errors with Comms.
+            this._kernel?.connection?.dispose();
+          } catch (err) {
+            void (this._context!.sessionContext as any)._handleSessionError(
+              err
+            );
+            return Promise.reject(err);
+          }
         }
-      }
-      return await (this._context!.sessionContext as any)._startIfNecessary();
-    };
+        return await (this._context!.sessionContext as any)._startIfNecessary();
+      };
     if (isNbFormat) {
       // If nbformat is provided and we don't want to interact with the Content Manager.
       (this._context as any)._populate = async (): Promise<void> => {
@@ -230,26 +263,33 @@ export class NotebookAdapter {
         // Force skip this step for nbformat notebooks.
         // await (this._context as any)._maybeCheckpoint(false);
         if ((this._context as any).isDisposed) {
-            return;
+          return;
         }
         // Update the kernel preference.
-        const name = (this._context as any)._model.defaultKernelName ||
+        const name =
+          (this._context as any)._model.defaultKernelName ||
           (this._context as any).sessionContext.kernelPreference.name;
-          (this._context as any).sessionContext.kernelPreference = {
-            ...(this._context as any).sessionContext.kernelPreference,
-            name,
-            language: (this._context as any)._model.defaultKernelLanguage
+        (this._context as any).sessionContext.kernelPreference = {
+          ...(this._context as any).sessionContext.kernelPreference,
+          name,
+          language: (this._context as any)._model.defaultKernelLanguage,
         };
         // Note: we don't wait on the session to initialize
         // so that the user can be shown the content before
         // any kernel has started.
-        void (this._context as any).sessionContext.initialize().then((shouldSelect: boolean) => {
+        void (this._context as any).sessionContext
+          .initialize()
+          .then((shouldSelect: boolean) => {
             if (shouldSelect) {
-                void (this._context as any)._dialogs.selectKernel((this._context!.sessionContext as any).sessionContext);
+              void (this._context as any)._dialogs.selectKernel(
+                (this._context!.sessionContext as any).sessionContext
+              );
             }
-        });
-      };  
-      (this._context as any).initialize = async (isNew: boolean): Promise<void> => {
+          });
+      };
+      (this._context as any).initialize = async (
+        isNew: boolean
+      ): Promise<void> => {
         (this._context as Context<INotebookModel>).model.dirty = false;
         const now = new Date().toISOString();
         const model: Contents.IModel = {
@@ -265,41 +305,69 @@ export class NotebookAdapter {
         };
         (this._context as any)._updateContentsModel(model);
         await (this._context as any)._populate();
-        (this._context as Context<INotebookModel>).model.sharedModel.clearUndoHistory();
+        (
+          this._context as Context<INotebookModel>
+        ).model.sharedModel.clearUndoHistory();
       };
     }
 
     // Setup the context listeners.
-    this._context.sessionContext.sessionChanged.connect((_, args: IChangedArgs<Session.ISessionConnection | null, Session.ISessionConnection | null, 'session'>) => {
-      const session = args.newValue;
-      console.log('Current Jupyter Session Connection.', session);
-      if (this._onSessionConnection) {
-        if (session) {
-          this._onSessionConnection(session);
-          this._iPyWidgetsManager?.registerWithKernel(session.kernel);
-          this._iPyWidgetsManager?.restoreWidgets(this._notebookPanel?.model!);
+    this._context.sessionContext.sessionChanged.connect(
+      (
+        _,
+        args: IChangedArgs<
+          Session.ISessionConnection | null,
+          Session.ISessionConnection | null,
+          'session'
+        >
+      ) => {
+        const session = args.newValue;
+        console.log('Current Jupyter Session Connection.', session);
+        if (this._onSessionConnection) {
+          if (session) {
+            this._onSessionConnection(session);
+            this._iPyWidgetsManager?.registerWithKernel(session.kernel);
+            const model = this._notebookPanel?.model;
+            if (model) {
+              this._iPyWidgetsManager?.restoreWidgets(model);
+            }
+          }
         }
       }
-    });
-    this._context.sessionContext.kernelChanged.connect((_, args: IChangedArgs<JupyterKernel.IKernelConnection | null, JupyterKernel.IKernelConnection | null, 'kernel'>) => {
-      const kernelConnection = args.newValue;
-      this._kernelConnection = kernelConnection;
-      console.log('Current Jupyter Kernel Connection.', kernelConnection);
-      if (kernelConnection && !kernelConnection.handleComms) {
-        console.log('Updating the current Kernel Connection to enforce Comms support.', kernelConnection.handleComms);
-        (kernelConnection as any).handleComms = true;
-      }
-      /*
+    );
+    this._context.sessionContext.kernelChanged.connect(
+      (
+        _,
+        args: IChangedArgs<
+          JupyterKernel.IKernelConnection | null,
+          JupyterKernel.IKernelConnection | null,
+          'kernel'
+        >
+      ) => {
+        const kernelConnection = args.newValue;
+        this._kernelConnection = kernelConnection;
+        console.log('Current Jupyter Kernel Connection.', kernelConnection);
+        if (kernelConnection && !kernelConnection.handleComms) {
+          console.log(
+            'Updating the current Kernel Connection to enforce Comms support.',
+            kernelConnection.handleComms
+          );
+          (kernelConnection as any).handleComms = true;
+        }
+        /*
       this._iPyWidgetsManager?.registerWithKernel(kernelConnection);
       this._iPyWidgetsManager?.restoreWidgets(this._notebookPanel?.model!)
       if (this._onSessionConnection) {
         this._onSessionConnection(kernelConnection);
       }
       */
-    });
+      }
+    );
     this._context.sessionContext.ready.then(() => {
       if (this._onSessionConnection) {
-        this._onSessionConnection(this._context?.sessionContext.session ?? undefined);
+        this._onSessionConnection(
+          this._context?.sessionContext.session ?? undefined
+        );
       }
       const kernelConnection = this._context?.sessionContext.session?.kernel;
       this._kernelConnection = kernelConnection;
@@ -334,8 +402,11 @@ export class NotebookAdapter {
       });
       */
       // Option 2 to create the Notebook Panel.
-      const notebookFactory = this._documentRegistry?.getWidgetFactory('Notebook');
-      this._notebookPanel = notebookFactory?.createNew(this._context) as NotebookPanel;
+      const notebookFactory =
+        this._documentRegistry?.getWidgetFactory('Notebook');
+      this._notebookPanel = notebookFactory?.createNew(
+        this._context
+      ) as NotebookPanel;
     }
 
     const completerHandler = this.setupCompleter(this._notebookPanel!);
@@ -348,11 +419,10 @@ export class NotebookAdapter {
           this._tracker!,
           this._path
         );
-      }
-      catch {
+      } catch {
         // no-op.
         // The commands may already be registered...
-      }  
+      }
     }
 
     this._boxPanel.addWidget(this._notebookPanel);
@@ -366,11 +436,9 @@ export class NotebookAdapter {
         this._notebookPanel?.model?.fromJSON(this._nbformat!);
       }
     });
-
   }
 
   private setupAdapter(): void {
-
     document.addEventListener('keydown', this.notebookKeydownListener, true);
 
     const initialFactories = standardRendererFactories.filter(
@@ -424,7 +492,9 @@ export class NotebookAdapter {
     }
     const editorExtensions = () => {
       const registry = new EditorExtensionRegistry();
-      for (const extensionFactory of EditorExtensionRegistry.getDefaultExtensions({ themes })) {
+      for (const extensionFactory of EditorExtensionRegistry.getDefaultExtensions(
+        { themes }
+      )) {
         registry.addExtension(extensionFactory);
       }
       registry.addExtension({
@@ -450,9 +520,7 @@ export class NotebookAdapter {
       mimeTypeService: this._mimeTypeService,
     };
     const editorFactory = editorServices.factoryService.newInlineEditor;
-    this._contentFactory = new JupyterReactContentFactory(
-      { editorFactory },
-    );
+    this._contentFactory = new JupyterReactContentFactory({ editorFactory });
 
     this._tracker = new NotebookTracker({ namespace: this._id });
 
@@ -472,7 +540,7 @@ export class NotebookAdapter {
       notebookConfig: {
         ...StaticNotebook.defaultNotebookConfig,
         recordTiming: true,
-      }
+      },
     });
     notebookWidgetFactory.widgetCreated.connect((sender, notebookPanel) => {
       notebookPanel.context.pathChanged.connect(() => {
@@ -488,8 +556,7 @@ export class NotebookAdapter {
     });
     this._documentRegistry.addModelFactory(this._notebookModelFactory);
 
-    this.initializeContext();    
-
+    this.initializeContext();
   }
 
   get id(): string {
@@ -557,7 +624,9 @@ export class NotebookAdapter {
    */
   setNbformat(nbformat?: INotebookContent) {
     if (!nbformat) {
-      throw new Error('The nbformat should first be set via the constructor of NotebookAdapter');
+      throw new Error(
+        'The nbformat should first be set via the constructor of NotebookAdapter'
+      );
     }
     if (this._nbformat !== nbformat) {
       this._nbformat = nbformat;
@@ -569,7 +638,7 @@ export class NotebookAdapter {
     this._lite = lite;
     this._serviceManager = serviceManager;
     this._nbformat = this._notebookPanel?.model?.toJSON() as INotebookContent;
-//    this.initializeContext();
+    //    this.initializeContext();
   }
 
   setKernel(kernel?: Kernel) {
@@ -584,12 +653,15 @@ export class NotebookAdapter {
     if (this._readonly !== readonly) {
       this._readonly = readonly;
       this._notebookPanel?.content.widgets.forEach(cell => {
-        cell.syncEditable = true
+        cell.syncEditable = true;
         cell.model.sharedModel.setMetadata('editable', !readonly);
       });
-      Array.from(this._context?.model.cells!).forEach(cell => {
-        cell.setMetadata('editable', !readonly);
-      });
+      const cells = this._context?.model.cells;
+      if (cells) {
+        Array.from(cells).forEach(cell => {
+          cell.setMetadata('editable', !readonly);
+        });
+      }
       this._notebookPanel?.content.widgets.forEach(cell => {
         cell.saveEditableState();
       });
@@ -599,7 +671,7 @@ export class NotebookAdapter {
   setServerless(serverless: boolean) {
     if (this._serverless !== serverless) {
       this._serverless = serverless;
-//      this.initializeContext();
+      //      this.initializeContext();
     }
   }
 
@@ -699,7 +771,6 @@ export class NotebookAdapter {
     this._notebookPanel?.dispose();
     this._boxPanel.dispose();
   };
-
 }
 
 export default NotebookAdapter;
diff --git a/packages/react/src/components/notebook/NotebookCommands.ts b/packages/react/src/components/notebook/NotebookCommands.ts
index abac4fcc9..7872a1c00 100644
--- a/packages/react/src/components/notebook/NotebookCommands.ts
+++ b/packages/react/src/components/notebook/NotebookCommands.ts
@@ -10,8 +10,16 @@ import { DisposableSet } from '@lumino/disposable';
 import { Widget } from '@lumino/widgets';
 import { SessionContextDialogs } from '@jupyterlab/apputils';
 import { CompletionHandler } from '@jupyterlab/completer';
-import { SearchDocumentModel, SearchDocumentView } from '@jupyterlab/documentsearch';
-import { NotebookActions, NotebookPanel, NotebookSearchProvider, NotebookTracker, } from '@jupyterlab/notebook';
+import {
+  SearchDocumentModel,
+  SearchDocumentView,
+} from '@jupyterlab/documentsearch';
+import {
+  NotebookActions,
+  NotebookPanel,
+  NotebookSearchProvider,
+  NotebookTracker,
+} from '@jupyterlab/notebook';
 import { nullTranslator } from '@jupyterlab/translation';
 import { IYText } from '@jupyter/ydoc';
 
@@ -638,9 +646,7 @@ export function addNotebookCommands(
       command: NotebookCommandIds.changeCellTypeToCode,
     },
   ];
-  bindings.forEach(binding =>
-    allCommands.add(commands.addKeyBinding(binding))
-  );
+  bindings.forEach(binding => allCommands.add(commands.addKeyBinding(binding)));
 
   return allCommands;
 }
diff --git a/packages/react/src/components/notebook/NotebookExtensions.ts b/packages/react/src/components/notebook/NotebookExtensions.ts
index 7f462c465..b4ec37b3a 100644
--- a/packages/react/src/components/notebook/NotebookExtensions.ts
+++ b/packages/react/src/components/notebook/NotebookExtensions.ts
@@ -4,8 +4,8 @@
  * MIT License
  */
 
-import { DocumentRegistry } from "@jupyterlab/docregistry";
-import { INotebookModel, NotebookPanel } from "@jupyterlab/notebook";
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { INotebookModel, NotebookPanel } from '@jupyterlab/notebook';
 import { CommandRegistry } from '@lumino/commands';
 import { NotebookAdapter } from './NotebookAdapter';
 
@@ -16,7 +16,10 @@ export type IDatalayerNotebookExtensionProps = {
   adapter?: NotebookAdapter;
 };
 
-export type DatalayerNotebookExtension = DocumentRegistry.IWidgetExtension<NotebookPanel,INotebookModel> & {
+export type DatalayerNotebookExtension = DocumentRegistry.IWidgetExtension<
+  NotebookPanel,
+  INotebookModel
+> & {
   init(props: IDatalayerNotebookExtensionProps): void;
   get component(): JSX.Element | null;
 };
diff --git a/packages/react/src/components/notebook/NotebookState.ts b/packages/react/src/components/notebook/NotebookState.ts
index 310e6fdd7..dfdebcfce 100644
--- a/packages/react/src/components/notebook/NotebookState.ts
+++ b/packages/react/src/components/notebook/NotebookState.ts
@@ -83,12 +83,14 @@ type CellMutation = {
   cellType: nbformat.CellType;
   source?: string;
 };
-  
+
 export type NotebookState = INotebooksState & {
   setNotebooks: (notebooks: Map<string, INotebookState>) => void;
   selectNotebook: (id: string) => INotebookState | undefined;
   selectNotebookAdapter: (id: string) => NotebookAdapter | undefined;
-  selectNotebookModel: (id: string) => { model: INotebookModel | undefined; changed: any } | undefined;
+  selectNotebookModel: (
+    id: string
+  ) => { model: INotebookModel | undefined; changed: any } | undefined;
   selectTocModel: (id: string) => TableOfContents.Model | undefined;
   selectKernelStatus: (id: string) => string | undefined;
   selectActiveCell: (id: string) => Cell<ICellModel> | undefined;
@@ -119,7 +121,8 @@ export type NotebookState = INotebooksState & {
 
 export const notebookStore = createStore<NotebookState>((set, get) => ({
   notebooks: new Map<string, INotebookState>(),
-  setNotebooks: (notebooks: Map<string, INotebookState>) => set((state: NotebookState) => ({ notebooks })),
+  setNotebooks: (notebooks: Map<string, INotebookState>) =>
+    set((state: NotebookState) => ({ notebooks })),
   selectNotebook: (id: string): INotebookState | undefined => {
     return get().notebooks.get(id);
   },
@@ -130,12 +133,14 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
     }
     return undefined;
   },
-  selectNotebookModel: (id: string): { model: INotebookModel | undefined; changed: any } | undefined => {
+  selectNotebookModel: (
+    id: string
+  ): { model: INotebookModel | undefined; changed: any } | undefined => {
     if (get().notebooks.get(id)) {
       return {
         model: get().notebooks.get(id)?.model,
         changed: get().notebooks.get(id)?.model?.contentChanged,
-      };    
+      };
     }
     return undefined;
   },
@@ -157,23 +162,45 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
   selectNotebookPortalDisplay: (id: string): PortalDisplay | undefined => {
     return get().notebooks.get(id)?.portalDisplay;
   },
-  run: (id: string): void => { get().notebooks.get(id)?.adapter?.commands.execute(NotebookCommandIds.run); },
-  runAll: (id: string): void => { get().notebooks.get(id)?.adapter?.commands.execute(NotebookCommandIds.runAll); },
-  interrupt: (id: string): void => { get().notebooks.get(id)?.adapter?.commands.execute(NotebookCommandIds.interrupt); },
+  run: (id: string): void => {
+    get().notebooks.get(id)?.adapter?.commands.execute(NotebookCommandIds.run);
+  },
+  runAll: (id: string): void => {
+    get()
+      .notebooks.get(id)
+      ?.adapter?.commands.execute(NotebookCommandIds.runAll);
+  },
+  interrupt: (id: string): void => {
+    get()
+      .notebooks.get(id)
+      ?.adapter?.commands.execute(NotebookCommandIds.interrupt);
+  },
   insertAbove: (mutation: CellMutation) => {
-    get().notebooks.get(mutation.id)?.adapter?.setDefaultCellType(mutation.cellType);
+    get()
+      .notebooks.get(mutation.id)
+      ?.adapter?.setDefaultCellType(mutation.cellType);
     get().notebooks.get(mutation.id)?.adapter?.insertAbove(mutation.source);
   },
   insertBelow: (mutation: CellMutation) => {
-    get().notebooks.get(mutation.id)?.adapter?.setDefaultCellType(mutation.cellType);
+    get()
+      .notebooks.get(mutation.id)
+      ?.adapter?.setDefaultCellType(mutation.cellType);
     get().notebooks.get(mutation.id)?.adapter?.insertBelow(mutation.source);
   },
-  delete: (id: string): void => { get().notebooks.get(id)?.adapter?.commands.execute(NotebookCommandIds.deleteCells); },
+  delete: (id: string): void => {
+    get()
+      .notebooks.get(id)
+      ?.adapter?.commands.execute(NotebookCommandIds.deleteCells);
+  },
   changeCellType: (mutation: CellMutation) => {
-    get().notebooks.get(mutation.id)?.adapter?.changeCellType(mutation.cellType);
+    get()
+      .notebooks.get(mutation.id)
+      ?.adapter?.changeCellType(mutation.cellType);
   },
   save: (mutation: DateMutation) => {
-    get().notebooks.get(mutation.id)?.adapter?.commands.execute(NotebookCommandIds.save);
+    get()
+      .notebooks.get(mutation.id)
+      ?.adapter?.commands.execute(NotebookCommandIds.save);
     const notebooks = get().notebooks;
     const notebook = notebooks.get(mutation.id);
     if (notebook) {
@@ -181,10 +208,13 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
       set((state: NotebookState) => ({ notebooks }));
     }
   },
-  reset: () =>  set((state: NotebookState) => ({ notebooks: new Map<string, INotebookState>() })),
+  reset: () =>
+    set((state: NotebookState) => ({
+      notebooks: new Map<string, INotebookState>(),
+    })),
   update: (update: NotebookUpdate) => {
     const notebooks = get().notebooks;
-    let notebook = notebooks.get(update.id);
+    const notebook = notebooks.get(update.id);
     if (notebook) {
       /*
       notebook = {
@@ -198,7 +228,7 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
       notebooks.set(update.id, {
         adapter: update.state.adapter,
         portals: [],
-      });    
+      });
     }
     set((state: NotebookState) => ({ notebooks }));
   },
@@ -262,7 +292,7 @@ export const notebookStore = createStore<NotebookState>((set, get) => ({
     get().setPortalDisplay({ id, portalDisplay: undefined });
     const notebooks = get().notebooks;
     const notebook = notebooks.get(id);
-    if(notebook){
+    if (notebook) {
       notebooks.delete(id);
     }
     set((state: NotebookState) => ({ notebooks }));
diff --git a/packages/react/src/components/notebook/cell/prompt/Countdown.tsx b/packages/react/src/components/notebook/cell/prompt/Countdown.tsx
index 406f81ea2..d0cf57246 100644
--- a/packages/react/src/components/notebook/cell/prompt/Countdown.tsx
+++ b/packages/react/src/components/notebook/cell/prompt/Countdown.tsx
@@ -18,4 +18,4 @@ export const Countdown = (props: { count: number }) => {
     return () => clearInterval(intervalRef.current);
   }, []);
   return <>[{count}]</>;
-}
+};
diff --git a/packages/react/src/components/notebook/cell/sidebar/CellSidebarButton.tsx b/packages/react/src/components/notebook/cell/sidebar/CellSidebarButton.tsx
index 280ec9421..aedcc1606 100644
--- a/packages/react/src/components/notebook/cell/sidebar/CellSidebarButton.tsx
+++ b/packages/react/src/components/notebook/cell/sidebar/CellSidebarButton.tsx
@@ -4,10 +4,19 @@
  * MIT License
  */
 
-import { ChevronDownIcon, ChevronUpIcon, PlayIcon, SquareIcon, XIcon } from '@primer/octicons-react';
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  PlayIcon,
+  SquareIcon,
+  XIcon,
+} from '@primer/octicons-react';
 import { Box, IconButton } from '@primer/react';
 import { NotebookCommandIds } from '../../NotebookCommands';
-import { DATALAYER_CELL_SIDEBAR_CLASS_NAME, ICellSidebarProps } from './CellSidebar';
+import {
+  DATALAYER_CELL_SIDEBAR_CLASS_NAME,
+  ICellSidebarProps,
+} from './CellSidebar';
 
 export function CellSidebarButton(props: ICellSidebarProps): JSX.Element {
   const { commands, model } = props;
@@ -16,9 +25,9 @@ export function CellSidebarButton(props: ICellSidebarProps): JSX.Element {
       className={DATALAYER_CELL_SIDEBAR_CLASS_NAME}
       sx={{
         width: 16,
-        position: "relative",
+        position: 'relative',
         marginTop: 4,
-        marginLeft: "16px !important",
+        marginLeft: '16px !important',
         '& p': {
           marginBottom: '0 !important',
         },
diff --git a/packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx b/packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx
index c4f320031..ee49b8b94 100644
--- a/packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx
+++ b/packages/react/src/components/notebook/cell/sidebar/CellSidebarExtension.tsx
@@ -15,7 +15,10 @@ import type { PanelLayout, Widget } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 import { JupyterReactTheme } from '../../../../theme';
 import { CellSidebar, type ICellSidebarProps } from './CellSidebar';
-import { DatalayerNotebookExtension, IDatalayerNotebookExtensionProps } from '../../NotebookExtensions';
+import {
+  DatalayerNotebookExtension,
+  IDatalayerNotebookExtensionProps,
+} from '../../NotebookExtensions';
 
 class CellSidebarFactory implements IDisposable {
   private _isDisposed = false;
@@ -122,7 +125,7 @@ type ICellSidebarExtensionOptions = {
   factory?: React.JSXElementConstructor<ICellSidebarProps>;
   nbgrader?: boolean;
   sidebarWidth?: number;
-}
+};
 
 /**
  * Cell sidebar extension for notebook panels.
diff --git a/packages/react/src/components/notebook/model/JupyterReactNotebookModelFactory.ts b/packages/react/src/components/notebook/model/JupyterReactNotebookModelFactory.ts
index b55b689ac..6c525fb3d 100644
--- a/packages/react/src/components/notebook/model/JupyterReactNotebookModelFactory.ts
+++ b/packages/react/src/components/notebook/model/JupyterReactNotebookModelFactory.ts
@@ -5,7 +5,11 @@
  */
 
 import { INotebookContent } from '@jupyterlab/nbformat';
-import { INotebookModel, NotebookModelFactory, NotebookModel } from '@jupyterlab/notebook';
+import {
+  INotebookModel,
+  NotebookModelFactory,
+  NotebookModel,
+} from '@jupyterlab/notebook';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import type { ISharedNotebook } from '@jupyter/ydoc';
 
@@ -21,7 +25,9 @@ export class JupyterReactNotebookModelFactory extends NotebookModelFactory {
   }
 
   /** @override */
-  createNew(options: DocumentRegistry.IModelOptions<ISharedNotebook>): INotebookModel {
+  createNew(
+    options: DocumentRegistry.IModelOptions<ISharedNotebook>
+  ): INotebookModel {
     if (this._nbformat) {
       this._nbformat.cells.forEach(cell => {
         cell.metadata['editable'] = !this._readonly;
diff --git a/packages/react/src/components/notebook/toolbar/NotebookToolbar.tsx b/packages/react/src/components/notebook/toolbar/NotebookToolbar.tsx
index f2235fd0e..09678f64a 100644
--- a/packages/react/src/components/notebook/toolbar/NotebookToolbar.tsx
+++ b/packages/react/src/components/notebook/toolbar/NotebookToolbar.tsx
@@ -18,7 +18,7 @@ import useNotebookStore from '../NotebookState';
 
 export type INotebookToolbarProps = {
   notebookId: string;
-}
+};
 
 export const NotebookToolbar = (props: INotebookToolbarProps) => {
   const { notebookId } = props;
diff --git a/packages/react/src/components/output/Output.tsx b/packages/react/src/components/output/Output.tsx
index b99e0e04a..2fa08dd5b 100644
--- a/packages/react/src/components/output/Output.tsx
+++ b/packages/react/src/components/output/Output.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 /*
  * Copyright (c) 2021-2023 Datalayer, Inc.
  *
@@ -43,7 +42,7 @@ export type IOutputProps = {
   showKernelProgressBar?: boolean;
   suppressCodeExecutionErrors?: boolean;
   toolbarPosition: 'up' | 'middle' | 'none';
-  onExecutionPhaseChanged? : (phaseOutput : IExecutionPhaseOutput) => void
+  onExecutionPhaseChanged?: (phaseOutput: IExecutionPhaseOutput) => void;
 };
 
 export const Output = (props: IOutputProps) => {
@@ -73,7 +72,8 @@ export const Output = (props: IOutputProps) => {
   } = props;
   const kernel = propsKernel ?? defaultKernel;
   const [id, setId] = useState<string | undefined>(sourceId);
-  const [kernelStatus, setKernelStatus] = useState<KernelMessage.Status>('unknown');
+  const [kernelStatus, setKernelStatus] =
+    useState<KernelMessage.Status>('unknown');
   const [outputs, setOutputs] = useState<IOutput[] | undefined>(propsOutputs);
   const [adapter, setAdapter] = useState<OutputAdapter>();
   useEffect(() => {
@@ -82,20 +82,26 @@ export const Output = (props: IOutputProps) => {
     }
   }, []);
   useEffect(() => {
-    const outputsCallback = (model: IOutputAreaModel, change: IOutputAreaModel.ChangedArgs) => {
+    const outputsCallback = (
+      model: IOutputAreaModel,
+      change: IOutputAreaModel.ChangedArgs
+    ) => {
       setOutputs(model.toJSON());
       if (id) {
         outputStore.setModel(id, model);
       }
     };
-    const receiptCallback = (model: IOutputAreaModel, change: IOutputAreaModel.ChangedArgs) => {
+    const receiptCallback = (
+      model: IOutputAreaModel,
+      change: IOutputAreaModel.ChangedArgs
+    ) => {
       if (receipt && change.type === 'add') {
         change.newValues.map(val => {
           if (val && val.data) {
             const out = val.data['text/html']; // val.data['application/vnd.jupyter.stdout'];
             if (out) {
               if ((out as string).indexOf(receipt) > -1) {
-                outputStore.setGradeSuccess(sourceId, true)
+                outputStore.setGradeSuccess(sourceId, true);
               }
             }
           }
@@ -103,31 +109,39 @@ export const Output = (props: IOutputProps) => {
       }
     };
     if (id && kernel) {
-      const adapter = propsAdapter ?? new OutputAdapter(id, kernel, outputs ?? [], model, suppressCodeExecutionErrors);
+      const adapter =
+        propsAdapter ??
+        new OutputAdapter(
+          id,
+          kernel,
+          outputs ?? [],
+          model,
+          suppressCodeExecutionErrors
+        );
       setAdapter(adapter);
       outputStore.setAdapter(id, adapter);
       if (model) {
         outputStore.setModel(id, model);
       }
       if (code) {
-        outputStore.setInput(id,code);
+        outputStore.setInput(id, code);
       }
       adapter.outputArea.model.changed.connect(outputsCallback);
       if (receipt) {
-        adapter.outputArea.model.changed.connect(receiptCallback)
+        adapter.outputArea.model.changed.connect(receiptCallback);
       }
     }
     return () => {
       if (adapter) {
         adapter.outputArea.model.changed.disconnect(outputsCallback);
-        adapter.outputArea.model.changed.disconnect(receiptCallback)
+        adapter.outputArea.model.changed.disconnect(receiptCallback);
       }
-    }
+    };
   }, [id, kernel]);
   useEffect(() => {
     if (adapter) {
       if (autoRun) {
-        adapter.execute(code,onExecutionPhaseChanged);
+        adapter.execute(code, onExecutionPhaseChanged);
       }
     }
   }, [adapter]);
@@ -147,12 +161,12 @@ export const Output = (props: IOutputProps) => {
   const executeRequest = outputStore.getExecuteRequest(sourceId);
   useEffect(() => {
     if (adapter && executeRequest && executeRequest === id) {
-      adapter.execute(code,onExecutionPhaseChanged);
+      adapter.execute(code, onExecutionPhaseChanged);
     }
   }, [executeRequest, adapter]);
   useEffect(() => {
     if (adapter && executeTrigger > 0) {
-      adapter.execute(code,onExecutionPhaseChanged);
+      adapter.execute(code, onExecutionPhaseChanged);
     }
   }, [executeTrigger]);
   useEffect(() => {
@@ -170,23 +184,25 @@ export const Output = (props: IOutputProps) => {
             },
           }}
         >
-            <CodeMirrorDatalayerEditor
-              autoRun={autoRun}
-              code={code}
-              codePre={codePre}
-              disableRun={disableRun}
-              insertText={insertText}
-              kernel={kernel}
-              outputAdapter={adapter}
-              sourceId={id}
-              toolbarPosition={toolbarPosition}
-            />
+          <CodeMirrorDatalayerEditor
+            autoRun={autoRun}
+            code={code}
+            codePre={codePre}
+            disableRun={disableRun}
+            insertText={insertText}
+            kernel={kernel}
+            outputAdapter={adapter}
+            sourceId={id}
+            toolbarPosition={toolbarPosition}
+          />
         </Box>
       )}
       {adapter && (
         <Box display="flex">
           <Box flexGrow={1}>
-            {kernelStatus !== 'idle' && showKernelProgressBar && <KernelProgressBar />}
+            {kernelStatus !== 'idle' && showKernelProgressBar && (
+              <KernelProgressBar />
+            )}
           </Box>
           {showControl && (
             <Box style={{ marginTop: '-13px' }}>
@@ -220,8 +236,8 @@ export const Output = (props: IOutputProps) => {
             ? adapter && <Lumino>{adapter.outputArea}</Lumino>
             : outputs && (
                 <>
-                  {outputs.map((output: IOutput) => {
-                    return <OutputRenderer output={output} />;
+                  {outputs.map((output: IOutput, index: number) => {
+                    return <OutputRenderer key={index} output={output} />;
                   })}
                 </>
               )}
@@ -250,7 +266,7 @@ Output.defaultProps = {
       metadata: {},
     },
   ],
-  notifyOnComplete : false,
+  notifyOnComplete: false,
   toolbarPosition: 'up',
 } as Partial<IOutputProps>;
 
diff --git a/packages/react/src/components/output/OutputAdapter.ts b/packages/react/src/components/output/OutputAdapter.ts
index c5b6e8670..554e05b7d 100755
--- a/packages/react/src/components/output/OutputAdapter.ts
+++ b/packages/react/src/components/output/OutputAdapter.ts
@@ -18,7 +18,11 @@ import {
   standardRendererFactories,
 } from '@jupyterlab/rendermime';
 import { JSONObject } from '@lumino/coreutils';
-import { ClassicWidgetManager, WidgetRenderer, WIDGET_MIMETYPE } from '../../jupyter/ipywidgets/classic';
+import {
+  ClassicWidgetManager,
+  WidgetRenderer,
+  WIDGET_MIMETYPE,
+} from '../../jupyter/ipywidgets/classic';
 import { requireLoader as loader } from '../../jupyter/ipywidgets/libembed-amd';
 import { IExecutionPhaseOutput, Kernel } from '../../jupyter/kernel';
 import { execute } from './OutputExecutor';
@@ -55,7 +59,8 @@ export class OutputAdapter {
       {
         safe: false,
         mimeTypes: [WIDGET_MIMETYPE],
-        createRenderer: (options: any) => new WidgetRenderer(options, this._iPyWidgetsManager),
+        createRenderer: (options: any) =>
+          new WidgetRenderer(options, this._iPyWidgetsManager),
       },
       0
     );
@@ -132,9 +137,7 @@ export class OutputAdapter {
 
   private initKernel() {
     if (this._kernel) {
-      this._iPyWidgetsManager.registerWithKernel(
-        this._kernel.connection
-      );
+      this._iPyWidgetsManager.registerWithKernel(this._kernel.connection);
     }
   }
 }
diff --git a/packages/react/src/components/output/OutputState.ts b/packages/react/src/components/output/OutputState.ts
index c2024dcf2..984ecf3c3 100644
--- a/packages/react/src/components/output/OutputState.ts
+++ b/packages/react/src/components/output/OutputState.ts
@@ -58,7 +58,8 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
   getGradeSuccess: (id: string): boolean | undefined => {
     return get().outputs.get(id)?.gradeSuccess;
   },
-  setOutputs: (id: string, outputs: Map<string, IOutputState>) => set((state: OutputState) => ({ outputs })),
+  setOutputs: (id: string, outputs: Map<string, IOutputState>) =>
+    set((state: OutputState) => ({ outputs })),
   setAdapter: (id: string, adapter: OutputAdapter) => {
     const outputs = get().outputs;
     const d = outputs.get(id);
@@ -67,7 +68,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { adapter });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
   setDataset: (id: string, dataset: string) => {
     const outputs = get().outputs;
@@ -77,7 +78,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { dataset });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
   setExecuteRequest: (id: string, code: string) => {
     const outputs = get().outputs;
@@ -87,7 +88,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { code });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
   setModel: (id: string, model: IOutputAreaModel) => {
     const outputs = get().outputs;
@@ -97,7 +98,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { model });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
   setInput: (id: string, input: string) => {
     const outputs = get().outputs;
@@ -107,7 +108,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { input });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
   setGradeSuccess: (id: string, gradeSuccess: boolean) => {
     const outputs = get().outputs;
@@ -117,7 +118,7 @@ export const outputsStore = createStore<OutputState>((set, get) => ({
     } else {
       outputs.set(id, { gradeSuccess });
     }
-    set((state: OutputState) => ({ outputs }))
+    set((state: OutputState) => ({ outputs }));
   },
 }));
 
diff --git a/packages/react/src/components/terminal/Terminal.tsx b/packages/react/src/components/terminal/Terminal.tsx
index 348fcdeae..59a82a1ed 100644
--- a/packages/react/src/components/terminal/Terminal.tsx
+++ b/packages/react/src/components/terminal/Terminal.tsx
@@ -24,7 +24,7 @@ export const Terminal = (props: Terminal.ITerminalOptions) => {
         ...props,
       });
       terminalStore.setAdapter(adapter);
-      setAdapter(adapter);  
+      setAdapter(adapter);
     }
   }, [serverSettings]);
   return adapter ? (
diff --git a/packages/react/src/components/terminal/TerminalAdapter.ts b/packages/react/src/components/terminal/TerminalAdapter.ts
index f9aeb2200..10b8786e1 100755
--- a/packages/react/src/components/terminal/TerminalAdapter.ts
+++ b/packages/react/src/components/terminal/TerminalAdapter.ts
@@ -16,28 +16,46 @@ export class TerminalAdapter {
   constructor(options: TerminalAdapter.ITerminalAdapterOptions) {
     const { serverSettings, colormode, initCode } = options;
     this.terminalPanel = new BoxPanel();
+    // Ensure panel is properly initialized
+    if (!this.terminalPanel.widgets) {
+      console.error('BoxPanel not properly initialized');
+    }
+    this.terminalPanel.direction = 'top-to-bottom';
     this.terminalPanel.spacing = 0;
     this.terminalPanel.addClass('dla-JupyterLab-Terminal-id');
     const terminalManager = new TerminalManager({
       serverSettings,
     });
-    terminalManager.startNew().then(async terminalConnection => {
-      terminalConnection.connectionStatusChanged.connect((_, status) => {
-        console.log('Jupyter Terminal status', status);
-      });
-      this.terminal = new JupyterTerminal(terminalConnection, {
-        theme: colormode,
-      });
-      if (initCode) {
-        await this.terminal.ready;
-        this.terminal.session.send({
-          type: 'stdin',
-          content: [initCode],
+    terminalManager
+      .startNew()
+      .then(async terminalConnection => {
+        terminalConnection.connectionStatusChanged.connect((_, status) => {
+          console.log('Jupyter Terminal status', status);
         });
-      }
-      this.terminal.title.closable = true;
-      this.terminalPanel.addWidget(this.terminal);
-    });
+        this.terminal = new JupyterTerminal(terminalConnection, {
+          theme: colormode,
+        });
+        if (initCode) {
+          await this.terminal.ready;
+          this.terminal.session.send({
+            type: 'stdin',
+            content: [initCode],
+          });
+        }
+        this.terminal.title.closable = true;
+        // Small delay to ensure panel is fully initialized
+        setTimeout(() => {
+          try {
+            this.terminalPanel.addWidget(this.terminal);
+          } catch (e) {
+            console.error('Error adding terminal widget:', e);
+          }
+        }, 100);
+      })
+      .catch(error => {
+        console.error('Failed to create terminal:', error);
+        // You could also show an error message in the UI here
+      });
   }
 
   get panel(): BoxPanel {
@@ -45,7 +63,9 @@ export class TerminalAdapter {
   }
 
   setTheme(theme: ITerminal.Theme) {
-    this.terminal.setOption('theme', theme);
+    if (this.terminal) {
+      this.terminal.setOption('theme', theme);
+    }
   }
 }
 
diff --git a/packages/react/src/components/terminal/TerminalState.ts b/packages/react/src/components/terminal/TerminalState.ts
index ca41f2c9e..3af672be6 100644
--- a/packages/react/src/components/terminal/TerminalState.ts
+++ b/packages/react/src/components/terminal/TerminalState.ts
@@ -24,7 +24,8 @@ export const terminalStore = createStore<TerminalState>((set, get) => ({
   dark: false,
   adapter: undefined,
   setDark: (dark: boolean) => set((state: TerminalState) => ({ dark })),
-  setAdapter: (adapter?: TerminalAdapter) => set((state: TerminalState) => ({ adapter })),
+  setAdapter: (adapter?: TerminalAdapter) =>
+    set((state: TerminalState) => ({ adapter })),
 }));
 
 export function useTerminalStore(): TerminalState;
diff --git a/packages/react/src/components/utils/SpinnerCentered.tsx b/packages/react/src/components/utils/SpinnerCentered.tsx
index 380a39829..aacce3c57 100644
--- a/packages/react/src/components/utils/SpinnerCentered.tsx
+++ b/packages/react/src/components/utils/SpinnerCentered.tsx
@@ -10,7 +10,7 @@
  * MIT License
  */
 
-import { Box, Spinner } from "@primer/react";
+import { Box, Spinner } from '@primer/react';
 
 export function SpinnerCentered(): JSX.Element {
   return (
@@ -19,13 +19,12 @@ export function SpinnerCentered(): JSX.Element {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        minHeight: '40px'
+        minHeight: '40px',
       }}
     >
       <Spinner />
     </Box>
-  )
+  );
 }
-  
+
 export default SpinnerCentered;
-  
\ No newline at end of file
diff --git a/packages/react/src/examples/Cell.tsx b/packages/react/src/examples/Cell.tsx
index f62ebdf12..d4634f72c 100644
--- a/packages/react/src/examples/Cell.tsx
+++ b/packages/react/src/examples/Cell.tsx
@@ -25,44 +25,45 @@ const CellExample = () => {
   const { defaultKernel } = useJupyter();
   const cellsStore = useCellsStore();
   const kernelsStore = useKernelsStore();
-  console.log('Jupyter Cell Outputs', (cellsStore.getAdapter(CELL_ID)?.cell as CodeCell)?.outputArea.model.toJSON());
+  console.log(
+    'Jupyter Cell Outputs',
+    (
+      cellsStore.getAdapter(CELL_ID)?.cell as CodeCell
+    )?.outputArea.model.toJSON()
+  );
   return (
     <JupyterReactTheme>
       <Box as="h1">A Jupyter Cell</Box>
+      <Box>Source: {cellsStore.getSource(CELL_ID)}</Box>
+      <Box>Outputs Count: {cellsStore.getOutputsCount(CELL_ID)}</Box>
       <Box>
-        Source: {cellsStore.getSource(CELL_ID)}
+        Kernel State:{' '}
+        <Label>
+          {defaultKernel && kernelsStore.getExecutionState(defaultKernel.id)}
+        </Label>
       </Box>
       <Box>
-        Outputs Count: {cellsStore.getOutputsCount(CELL_ID)}
-      </Box>
-      <Box>
-        Kernel State: <Label>{defaultKernel && kernelsStore.getExecutionState(defaultKernel.id)}</Label>
-      </Box>
-      <Box>
-        Kernel Phase: <Label>{defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id)}</Label>
+        Kernel Phase:{' '}
+        <Label>
+          {defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id)}
+        </Label>
       </Box>
       <Box display="flex">
-        <Box>
-          Kernel Indicator:
-        </Box>
+        <Box>Kernel Indicator:</Box>
         <Box ml={3}>
-          <KernelIndicator kernel={defaultKernel && defaultKernel.connection}/>
+          <KernelIndicator kernel={defaultKernel && defaultKernel.connection} />
         </Box>
       </Box>
       <Box>
         <Button onClick={() => cellsStore.execute(CELL_ID)}>Run cell</Button>
       </Box>
-      <Cell
-        source={DEFAULT_SOURCE}
-        id={CELL_ID}
-        kernel={defaultKernel}
-      />
+      <Cell source={DEFAULT_SOURCE} id={CELL_ID} kernel={defaultKernel} />
     </JupyterReactTheme>
-  )
-}
+  );
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(<CellExample/>);
+root.render(<CellExample />);
diff --git a/packages/react/src/examples/Cells.tsx b/packages/react/src/examples/Cells.tsx
index a960bb181..ad5f7bd76 100644
--- a/packages/react/src/examples/Cells.tsx
+++ b/packages/react/src/examples/Cells.tsx
@@ -18,7 +18,9 @@ root.render(
     <Box as="h1">Jupyter Cells wrapped in a single Jupyter Context</Box>
     <Cell id="cell-1" source="x=1" />
     <Cell id="cell-2" source="print(x)" />
-    <Cell id="cell-3" source={`import random
+    <Cell
+      id="cell-3"
+      source={`import random
 
 r = random.randint(0,9)`}
     />
diff --git a/packages/react/src/examples/CellsExecute.tsx b/packages/react/src/examples/CellsExecute.tsx
index c285520a5..c37f13470 100644
--- a/packages/react/src/examples/CellsExecute.tsx
+++ b/packages/react/src/examples/CellsExecute.tsx
@@ -13,12 +13,12 @@ import Cell from '../components/cell/Cell';
 const CODE_CELL_1 = `import time
 print("Cell 1 start...")
 time.sleep(3)
-print("Cell 1 end.")`
+print("Cell 1 end.")`;
 
 const CODE_CELL_2 = `import time
 print("Cell 2 start...")
 time.sleep(3)
-print("Cell 2 end.")`
+print("Cell 2 end.")`;
 
 const CellsExecute = () => {
   const [executionDisable, setExecutionDisable] = useState(false);
@@ -33,41 +33,41 @@ const CellsExecute = () => {
   }, []);
   const onExecuteClick = () => {
     cellsStore.getState().execute();
-  }
+  };
   return (
     <JupyterReactTheme>
-      <Box style={{marginTop: '20px'}}>
+      <Box style={{ marginTop: '20px' }}>
         <Cell
-          id='1'
-          type='code'
-          source={CODE_CELL_1} 
+          id="1"
+          type="code"
+          source={CODE_CELL_1}
           autoStart={false}
           showToolbar={false}
         />
         <Cell
-          id='2'
-          type='code'
+          id="2"
+          type="code"
           source={CODE_CELL_2}
           autoStart={false}
           showToolbar={false}
         />
         <Button
-          onClick={onExecuteClick} 
-          disabled={executionDisable} 
+          onClick={onExecuteClick}
+          disabled={executionDisable}
           style={{
             marginLeft: '50px',
-            marginTop: '20px'
+            marginTop: '20px',
           }}
         >
           Execute all
         </Button>
       </Box>
     </JupyterReactTheme>
-  )
+  );
 };
 
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(<CellsExecute/>);
+root.render(<CellsExecute />);
diff --git a/packages/react/src/examples/FileBrowser.tsx b/packages/react/src/examples/FileBrowser.tsx
index fdee80836..33e03aa42 100644
--- a/packages/react/src/examples/FileBrowser.tsx
+++ b/packages/react/src/examples/FileBrowser.tsx
@@ -11,16 +11,15 @@ import FileBrowser from '../components/filebrowser/FileBrowser';
 
 const FileBrowserExample = () => {
   const { serviceManager } = useJupyter();
-  return (
-    serviceManager ?
-      <>
-        <h1>Jupyter React - File Browser Example</h1>
-        <FileBrowser serviceManager={serviceManager}/>
-      </>
-    :
-      <></>
-  )
-}
+  return serviceManager ? (
+    <>
+      <h1>Jupyter React - File Browser Example</h1>
+      <FileBrowser serviceManager={serviceManager} />
+    </>
+  ) : (
+    <></>
+  );
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/JupyterLabApp.tsx b/packages/react/src/examples/JupyterLabApp.tsx
index 10d61d8ea..f37015318 100644
--- a/packages/react/src/examples/JupyterLabApp.tsx
+++ b/packages/react/src/examples/JupyterLabApp.tsx
@@ -27,19 +27,13 @@ const JupyterLabAppExample = () => {
   };
   return (
     <JupyterLabApp
-      plugins={[
-        lightThemePlugins,
-        ipywidgetsPlugins,
-        plotlyPlugins,
-      ]}
-      mimeRenderers={[
-        plotlyMimeRenderers
-      ]}
+      plugins={[lightThemePlugins, ipywidgetsPlugins, plotlyPlugins]}
+      mimeRenderers={[plotlyMimeRenderers]}
       height="calc(100vh - 74px)"
       onJupyterLab={onJupyterLab}
     />
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/JupyterLabAppHeadless.tsx b/packages/react/src/examples/JupyterLabAppHeadless.tsx
index 5176ccb6b..44a49b58d 100644
--- a/packages/react/src/examples/JupyterLabAppHeadless.tsx
+++ b/packages/react/src/examples/JupyterLabAppHeadless.tsx
@@ -6,7 +6,13 @@
 
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, Text, ToggleSwitch, ThemeProvider, useTheme } from '@primer/react';
+import {
+  Box,
+  Text,
+  ToggleSwitch,
+  ThemeProvider,
+  useTheme,
+} from '@primer/react';
 import { BoxPanel } from '@lumino/widgets';
 import { ThemeManager } from '@jupyterlab/apputils';
 // import { NotebookTracker } from '@jupyterlab/notebook';
@@ -25,17 +31,15 @@ import * as plotlyMimeRenderers from 'jupyterlab-plotly/lib/plotly-renderer';
 
 const height = '900px';
 
-const PATHS = [
-  'ipywidgets.ipynb',
-  'plotly.ipynb',
-];
+const PATHS = ['ipywidgets.ipynb', 'plotly.ipynb'];
 
 const PATH_INDEX = 1;
 
 const JupyterLabAppHeadless = () => {
   const [notebookBoxPanel, setNotebookBoxPanel] = useState<BoxPanel>();
   const [theme, setTheme] = useState<Colormode>('light');
-  const [jupyterLabAdapter, setJupyterlabAdapter] = useState<JupyterLabAppAdapter>();
+  const [jupyterLabAdapter, setJupyterlabAdapter] =
+    useState<JupyterLabAppAdapter>();
   const { setColorMode } = useTheme();
   const [isDark, setDark] = useState(false);
   const onSwitchClick = async () => {
@@ -123,9 +127,7 @@ const JupyterLabAppHeadless = () => {
             ipywidgetsPlugins,
             plotlyPlugins,
           ]}
-          mimeRenderers={[
-            plotlyMimeRenderers
-          ]}
+          mimeRenderers={[plotlyMimeRenderers]}
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
           PluginType={ThemeManager}
diff --git a/packages/react/src/examples/JupyterLabAppHeadlessServerless.tsx b/packages/react/src/examples/JupyterLabAppHeadlessServerless.tsx
index 6a9b6c2e0..2c60be4be 100644
--- a/packages/react/src/examples/JupyterLabAppHeadlessServerless.tsx
+++ b/packages/react/src/examples/JupyterLabAppHeadlessServerless.tsx
@@ -6,7 +6,13 @@
 
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, Text, ToggleSwitch, ThemeProvider, useTheme } from '@primer/react';
+import {
+  Box,
+  Text,
+  ToggleSwitch,
+  ThemeProvider,
+  useTheme,
+} from '@primer/react';
 import { BoxPanel } from '@lumino/widgets';
 import { ThemeManager } from '@jupyterlab/apputils';
 // import { NotebookTracker } from '@jupyterlab/notebook';
@@ -25,17 +31,15 @@ import * as plotlyMimeRenderers from 'jupyterlab-plotly/lib/plotly-renderer';
 
 const height = '900px';
 
-const PATHS = [
-  'ipywidgets.ipynb',
-  'plotly.ipynb',
-];
+const PATHS = ['ipywidgets.ipynb', 'plotly.ipynb'];
 
 const PATH_INDEX = 1;
 
 const JupyterLabAppHeadlessServerless = () => {
   const [notebookBoxPanel, setNotebookBoxPanel] = useState<BoxPanel>();
   const [theme, setTheme] = useState<Colormode>('light');
-  const [jupyterLabAdapter, setJupyterlabAdapter] = useState<JupyterLabAppAdapter>();
+  const [jupyterLabAdapter, setJupyterlabAdapter] =
+    useState<JupyterLabAppAdapter>();
   const { setColorMode } = useTheme();
   const [isDark, setDark] = useState(false);
   const onSwitchClick = async () => {
@@ -124,9 +128,7 @@ const JupyterLabAppHeadlessServerless = () => {
             ipywidgetsPlugins,
             plotlyPlugins,
           ]}
-          mimeRenderers={[
-            plotlyMimeRenderers
-          ]}
+          mimeRenderers={[plotlyMimeRenderers]}
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
           PluginType={ThemeManager}
diff --git a/packages/react/src/examples/JupyterLabAppServerless.tsx b/packages/react/src/examples/JupyterLabAppServerless.tsx
index 64afd664b..fa4a6dc1b 100644
--- a/packages/react/src/examples/JupyterLabAppServerless.tsx
+++ b/packages/react/src/examples/JupyterLabAppServerless.tsx
@@ -27,20 +27,20 @@ const JupyterLabAppServerless = () => {
   return (
     <JupyterLabApp
       serverless
-//      nosplash
+      //      nosplash
       plugins={[
         lightThemePlugins,
         ipywidgetsPlugins,
         plotlyPlugins,
-//        reactPlugins,
-      ]}
-      disabledPlugins={[
-//        "@jupyterlab/apputils-extension:themes",
-//        "@jupyterlab/apputils-extension:themes-palette-menu",
-      ]}
-      mimeRenderers={[
-        plotlyMimeRenderers
+        //        reactPlugins,
       ]}
+      disabledPlugins={
+        [
+          //        "@jupyterlab/apputils-extension:themes",
+          //        "@jupyterlab/apputils-extension:themes-palette-menu",
+        ]
+      }
+      mimeRenderers={[plotlyMimeRenderers]}
       height="calc(100vh - 74px)"
       onJupyterLab={onJupyterLab}
     />
diff --git a/packages/react/src/examples/JupyterLabAppServiceManager.tsx b/packages/react/src/examples/JupyterLabAppServiceManager.tsx
index f53fcd069..3b479215a 100644
--- a/packages/react/src/examples/JupyterLabAppServiceManager.tsx
+++ b/packages/react/src/examples/JupyterLabAppServiceManager.tsx
@@ -39,16 +39,14 @@ const JupyterLabAppServiceManager = () => {
         lightThemePlugins,
         ipywidgetsPlugins,
         plotlyPlugins,
-//        reactPlugins,
-      ]}
-      mimeRenderers={[
-        plotlyMimeRenderers
+        //        reactPlugins,
       ]}
+      mimeRenderers={[plotlyMimeRenderers]}
       height="calc(100vh - 74px)"
       onJupyterLab={onJupyterLab}
     />
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/JupyterLabTheme.tsx b/packages/react/src/examples/JupyterLabTheme.tsx
index 1e398e852..0018e054c 100644
--- a/packages/react/src/examples/JupyterLabTheme.tsx
+++ b/packages/react/src/examples/JupyterLabTheme.tsx
@@ -6,43 +6,75 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
-import { 
-  Box, Button, Heading, Text, Link, PageLayout, PageHeader, RadioGroup, Radio, FormControl, RelativeTime, TextInput, TextInputWithTokens, Timeline, ToggleSwitch, SegmentedControl, Label, LabelGroup, NavList, IconButton, CircleBadge, CircleOcticon, Tooltip,
+import {
+  Box,
+  Button,
+  Heading,
+  Text,
+  Link,
+  PageLayout,
+  PageHeader,
+  RadioGroup,
+  Radio,
+  FormControl,
+  RelativeTime,
+  TextInput,
+  TextInputWithTokens,
+  Timeline,
+  ToggleSwitch,
+  SegmentedControl,
+  Label,
+  LabelGroup,
+  NavList,
+  IconButton,
+  CircleBadge,
+  CircleOcticon,
+  Tooltip,
 } from '@primer/react';
-import { DataTable, Table, SkeletonBox, Banner } from '@primer/react/experimental';
-import { GitCommitIcon, HeartIcon, RocketIcon, CheckIcon } from '@primer/octicons-react';
+import {
+  DataTable,
+  Table,
+  SkeletonBox,
+  Banner,
+} from '@primer/react/experimental';
+import {
+  GitCommitIcon,
+  HeartIcon,
+  RocketIcon,
+  CheckIcon,
+} from '@primer/octicons-react';
 import { Jupyter } from '../jupyter/Jupyter';
 import { Colormode } from '../theme/JupyterLabColormode';
 import { jupyterLabTheme as theme } from '../theme/themes';
 
 const mockTokens = [
-  {text: 'zero', id: 0},
-  {text: 'one', id: 1},
-  {text: 'two', id: 2},
-  {text: 'three', id: 3},
-  {text: 'four', id: 4},
-  {text: 'five', id: 5},
-  {text: 'six', id: 6},
-  {text: 'seven', id: 7},
-]
+  { text: 'zero', id: 0 },
+  { text: 'one', id: 1 },
+  { text: 'two', id: 2 },
+  { text: 'three', id: 3 },
+  { text: 'four', id: 4 },
+  { text: 'five', id: 5 },
+  { text: 'six', id: 6 },
+  { text: 'seven', id: 7 },
+];
 
-const now = Date.now()
-const Second = 1000
-const Minute = 60 * Second
-const Hour = 60 * Minute
-const Day = 24 * Hour
-const Week = 7 * Day
-const Month = 4 * Week
+const now = Date.now();
+const Second = 1000;
+const Minute = 60 * Second;
+const Hour = 60 * Minute;
+const Day = 24 * Hour;
+const Week = 7 * Day;
+const Month = 4 * Week;
 
 interface Repo {
-  id: number
-  name: string
-  type: 'public' | 'internal'
-  updatedAt: number
+  id: number;
+  name: string;
+  type: 'public' | 'internal';
+  updatedAt: number;
   securityFeatures: {
-    dependabot: Array<string>
-    codeScanning: Array<string>
-  }
+    dependabot: Array<string>;
+    codeScanning: Array<string>;
+  };
 }
 
 const data: Array<Repo> = [
@@ -126,11 +158,11 @@ const data: Array<Repo> = [
       codeScanning: [],
     },
   },
-]
+];
 
 const JupyterLabTheme = () => {
   const [colormode, setColormode] = useState<Colormode>('light');
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3));
   const [isOn, setIsOn] = useState(false);
   useEffect(() => {
     if (isOn) {
@@ -145,25 +177,26 @@ const JupyterLabTheme = () => {
   const handleSwitchChange = useCallback((on: boolean) => {
     setIsOn(on);
   }, []);
-  const onTokenRemove: (tokenId: string | number) => void = (tokenId) => {
-    setTokens(tokens.filter((token) => token.id !== tokenId))
-  }
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
   return (
     <Jupyter theme={theme} colormode={colormode} startDefaultKernel>
       <PageLayout containerWidth="full" padding="normal">
         <PageLayout.Header>
           <PageHeader>
             <PageHeader.TitleArea variant="large">
-              <PageHeader.Title>
-                JupyterLab Theme
-              </PageHeader.Title>
+              <PageHeader.Title>JupyterLab Theme</PageHeader.Title>
             </PageHeader.TitleArea>
             <PageHeader.Description>
-              <Text sx={{
-                fontSize: 1,
-                color: 'fg.muted'
-              }}>
-                Relevant examples to create a data driven user interface with Datalayer.
+              <Text
+                sx={{
+                  fontSize: 1,
+                  color: 'fg.muted',
+                }}
+              >
+                Relevant examples to create a data driven user interface with
+                Datalayer.
               </Text>
             </PageHeader.Description>
             <PageHeader.Actions>
@@ -175,7 +208,7 @@ const JupyterLabTheme = () => {
                 display="block"
                 mb={1}
               >
-                { colormode === 'light' ? 'Light' : 'Dark' } Mode
+                {colormode === 'light' ? 'Light' : 'Dark'} Mode
               </Text>
               <ToggleSwitch
                 size="small"
@@ -198,27 +231,41 @@ const JupyterLabTheme = () => {
             </Box>
           </Box>
           <Box display="flex">
-            <Box sx={{ width: "100%" }}>
+            <Box sx={{ width: '100%' }}>
               <Heading>Heading</Heading>
               <Box>
                 <Text as="h1">Heading 1</Text>
                 <Text as="h2">Heading 2</Text>
                 <Text as="h3">Heading 3</Text>
                 <Text>This is a text.</Text>
-                <br/>
-                <Link href="https://datalayer.io" target="_blank">This is a link.</Link>
-                <br/>
-                <Text as="h3"><Link href="https://datalayer.io" target="_blank">This is a heading 3 link</Link></Text>
+                <br />
+                <Link href="https://datalayer.io" target="_blank">
+                  This is a link.
+                </Link>
+                <br />
+                <Text as="h3">
+                  <Link href="https://datalayer.io" target="_blank">
+                    This is a heading 3 link
+                  </Link>
+                </Text>
               </Box>
               <Box>
                 <Button variant="default">Default</Button>
-                <Button variant="default" leadingVisual={RocketIcon}>Icon</Button>
+                <Button variant="default" leadingVisual={RocketIcon}>
+                  Icon
+                </Button>
                 <Button variant="primary">Primary</Button>
-                <Button variant="primary" leadingVisual={RocketIcon}>Icon</Button>
+                <Button variant="primary" leadingVisual={RocketIcon}>
+                  Icon
+                </Button>
                 <Button variant="invisible">Invisible</Button>
-                <Button variant="invisible" leadingVisual={RocketIcon}>Icon</Button>
+                <Button variant="invisible" leadingVisual={RocketIcon}>
+                  Icon
+                </Button>
                 <Button variant="danger">Danger</Button>
-                <Button variant="danger" leadingVisual={RocketIcon}>Icon</Button>
+                <Button variant="danger" leadingVisual={RocketIcon}>
+                  Icon
+                </Button>
               </Box>
               <Box>
                 <NavList>
@@ -235,18 +282,24 @@ const JupyterLabTheme = () => {
               <Box>
                 <CircleOcticon
                   icon={CheckIcon}
-                  sx={{backgroundColor: 'success.emphasis', color: 'fg.onEmphasis'}}
+                  sx={{
+                    backgroundColor: 'success.emphasis',
+                    color: 'fg.onEmphasis',
+                  }}
                   aria-label="Changes approved"
                 />
               </Box>
               <Box>
                 <CircleBadge>
-                  <CircleBadge.Icon icon={RocketIcon} aria-label="Launch badge" />
+                  <CircleBadge.Icon
+                    icon={RocketIcon}
+                    aria-label="Launch badge"
+                  />
                 </CircleBadge>
               </Box>
             </Box>
             {/* Column 2 */}
-            <Box sx={{ width: "100%" }}>
+            <Box sx={{ width: '100%' }}>
               <Box as="form">
                 <RadioGroup name="defaultRadioGroup">
                   <RadioGroup.Label>Choices</RadioGroup.Label>
@@ -274,7 +327,10 @@ const JupyterLabTheme = () => {
               <Box>
                 <FormControl>
                   <FormControl.Label>Default label</FormControl.Label>
-                  <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} />
+                  <TextInputWithTokens
+                    tokens={tokens}
+                    onTokenRemove={onTokenRemove}
+                  />
                 </FormControl>
               </Box>
               <Box>
@@ -288,7 +344,9 @@ const JupyterLabTheme = () => {
               </Box>
               <Box>
                 <SegmentedControl aria-label="File view">
-                  <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
+                  <SegmentedControl.Button defaultSelected>
+                    Preview
+                  </SegmentedControl.Button>
                   <SegmentedControl.Button>Raw</SegmentedControl.Button>
                   <SegmentedControl.Button>Blame</SegmentedControl.Button>
                 </SegmentedControl>
@@ -381,7 +439,6 @@ const JupyterLabTheme = () => {
                 aria-describedby="repositories-subtitle"
                 data={data}
                 columns={[
-                // @ts-ignore
                   {
                     header: 'Repository',
                     field: 'name',
@@ -390,41 +447,45 @@ const JupyterLabTheme = () => {
                   {
                     header: 'Type',
                     field: 'type',
-                    renderCell: (row) => {
-                      return <Label>{row.type}</Label>
+                    renderCell: row => {
+                      return <Label>{row.type}</Label>;
                     },
                   },
                   {
                     header: 'Updated',
                     field: 'updatedAt',
-                    renderCell: (row) => {
-                      return <RelativeTime date={new Date(row.updatedAt)} />
+                    renderCell: row => {
+                      return <RelativeTime date={new Date(row.updatedAt)} />;
                     },
                   },
                   {
                     header: 'Dependabot',
                     field: 'securityFeatures.dependabot',
-                    renderCell: (row) => {
+                    renderCell: row => {
                       return row.securityFeatures.dependabot.length > 0 ? (
                         <LabelGroup>
-                          {row.securityFeatures.dependabot.map((feature) => {
-                            return <Label key={feature}>{feature}</Label>
+                          {row.securityFeatures.dependabot.map(feature => {
+                            return <Label key={feature}>{feature}</Label>;
                           })}
                         </LabelGroup>
-                      ) : null
+                      ) : null;
                     },
                   },
                   {
                     header: 'Code scanning',
                     field: 'securityFeatures.codeScanning',
-                    renderCell: (row) => {
+                    renderCell: row => {
                       return row.securityFeatures.codeScanning.length > 0 ? (
                         <LabelGroup>
-                          {row.securityFeatures.codeScanning.map((feature) => {
-                            return <Label variant="danger" key={feature}>{feature}</Label>
+                          {row.securityFeatures.codeScanning.map(feature => {
+                            return (
+                              <Label variant="danger" key={feature}>
+                                {feature}
+                              </Label>
+                            );
                           })}
                         </LabelGroup>
-                      ) : null
+                      ) : null;
                     },
                   },
                 ]}
@@ -433,23 +494,39 @@ const JupyterLabTheme = () => {
           </Box>
           <Box>
             <Box>
-              <Text as="h3"><Link href="https://datalayer.io" target="_blank">User Guide</Link></Text>
+              <Text as="h3">
+                <Link href="https://datalayer.io" target="_blank">
+                  User Guide
+                </Link>
+              </Text>
             </Box>
             <Box>
-              <Text as="h3"><Link href="https://datalayer.io" target="_blank">Pricing</Link></Text>
+              <Text as="h3">
+                <Link href="https://datalayer.io" target="_blank">
+                  Pricing
+                </Link>
+              </Text>
             </Box>
             <Box>
-              <Text as="h3"><Link href="https://datalayer.io" target="_blank">Privacy</Link></Text>
+              <Text as="h3">
+                <Link href="https://datalayer.io" target="_blank">
+                  Privacy
+                </Link>
+              </Text>
             </Box>
             <Box>
-              <Text as="h3"><Link href="https://datalayer.io" target="_blank">Terms and conditions</Link></Text>
+              <Text as="h3">
+                <Link href="https://datalayer.io" target="_blank">
+                  Terms and conditions
+                </Link>
+              </Text>
             </Box>
           </Box>
         </PageLayout.Content>
       </PageLayout>
     </Jupyter>
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/KernelExecute.tsx b/packages/react/src/examples/KernelExecute.tsx
index aa4c7b23f..a84c9ff68 100644
--- a/packages/react/src/examples/KernelExecute.tsx
+++ b/packages/react/src/examples/KernelExecute.tsx
@@ -22,8 +22,9 @@ export const KernelExecuteView = () => {
   const exec = () => {
     setRunning(true);
     setResult('');
-    kernel?.execute(code)?.result
-      .then((result: string) => {
+    kernel
+      ?.execute(code)
+      ?.result.then((result: string) => {
         setResult(result);
       })
       .catch((error: string) => {
@@ -31,9 +32,8 @@ export const KernelExecuteView = () => {
         setResult(error);
       })
       .finally(() => {
-        setRunning(false);  
-      }
-    );
+        setRunning(false);
+      });
   };
   const interrupt = () => {
     kernel?.interrupt();
@@ -79,7 +79,7 @@ export const KernelExecuteView = () => {
       )}
     </Box>
   );
-}
+};
 
 const KernelExecute = () => {
   return (
@@ -87,7 +87,7 @@ const KernelExecute = () => {
       <KernelExecuteView />
     </JupyterReactTheme>
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/KernelExecutor.tsx b/packages/react/src/examples/KernelExecutor.tsx
index 246d53ad8..e03ff47cb 100644
--- a/packages/react/src/examples/KernelExecutor.tsx
+++ b/packages/react/src/examples/KernelExecutor.tsx
@@ -12,7 +12,10 @@ import { KernelMessage } from '@jupyterlab/services';
 import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { useJupyter } from '../jupyter/JupyterContext';
 import { Output } from '../components/output/Output';
-import { IOPubMessageHook, ShellMessageHook } from '../jupyter/kernel/KernelExecutor';
+import {
+  IOPubMessageHook,
+  ShellMessageHook,
+} from '../jupyter/kernel/KernelExecutor';
 
 const CODE = `from time import sleep
 for i in range(0, 15):
@@ -22,9 +25,10 @@ for i in range(0, 15):
 print("🔁 I am done with looping!")`;
 
 const KernelExecutorView = () => {
-  const { defaultKernel } = useJupyter( { startDefaultKernel: true });
+  const { defaultKernel } = useJupyter({ startDefaultKernel: true });
   const [outputAreaModel, setOutputAreaModel] = useState<IOutputAreaModel>();
-  const [finalOutputAreaModel, setFinalOutputAreaModel] = useState<IOutputAreaModel>();
+  const [finalOutputAreaModel, setFinalOutputAreaModel] =
+    useState<IOutputAreaModel>();
   const [done, setDone] = useState(false);
   useEffect(() => {
     if (defaultKernel?.connection) {
diff --git a/packages/react/src/examples/Kernels.tsx b/packages/react/src/examples/Kernels.tsx
index a957bbbfe..508c1924b 100644
--- a/packages/react/src/examples/Kernels.tsx
+++ b/packages/react/src/examples/Kernels.tsx
@@ -6,7 +6,14 @@
 
 import { createRoot } from 'react-dom/client';
 import { useState } from 'react';
-import { Box, Heading, Textarea, Button, PageHeader, Text } from '@primer/react';
+import {
+  Box,
+  Heading,
+  Textarea,
+  Button,
+  PageHeader,
+  Text,
+} from '@primer/react';
 import { IModel } from '@jupyterlab/services/lib/kernel/kernel';
 import { ISpecModel } from '@jupyterlab/services/lib/kernelspec/kernelspec';
 import { JupyterReactTheme } from '../theme/JupyterReactTheme';
@@ -46,9 +53,8 @@ export const KernelExecResultView = () => {
         setResult(error);
       })
       .finally(() => {
-        setRunning(false);  
-      }
-    );
+        setRunning(false);
+      });
   };
   const interrupt = () => {
     kernel?.interrupt();
@@ -130,7 +136,7 @@ const KernelComponents = () => {
             <Box ml={3}>
               {Array.from(KERNEL_STATES.entries()).map(entry => {
                 return (
-                  <Box display="flex">
+                  <Box key={entry[0]} display="flex">
                     <Box
                       style={{
                         verticalAlign: 'middle',
diff --git a/packages/react/src/examples/Notebook2.tsx b/packages/react/src/examples/Notebook2.tsx
index ff4f61e15..4db82cb15 100644
--- a/packages/react/src/examples/Notebook2.tsx
+++ b/packages/react/src/examples/Notebook2.tsx
@@ -9,28 +9,34 @@ import { createRoot } from 'react-dom/client';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import { useJupyter } from '../jupyter';
-import { Notebook2, CellSidebarExtension, CellSidebarButton } from '../components';
+import {
+  Notebook2,
+  CellSidebarExtension,
+  CellSidebarButton,
+} from '../components';
 import { CellToolbarExtension } from './extensions';
 
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
 
 const Notebook2Example = () => {
   const { serviceManager } = useJupyter();
-  const extensions = useMemo(() => [
-    new CellToolbarExtension(),
-    new CellSidebarExtension({ factory: CellSidebarButton })
-  ], []);
-  return (
-    serviceManager ?
-      <JupyterReactTheme>
-        <Notebook2
-          nbformat={nbformat as INotebookContent}
-          id="notebook-nbformat-id"
-          startDefaultKernel
-          serviceManager={serviceManager}
-          height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
-          extensions={extensions}
-          /*
+  const extensions = useMemo(
+    () => [
+      new CellToolbarExtension(),
+      new CellSidebarExtension({ factory: CellSidebarButton }),
+    ],
+    []
+  );
+  return serviceManager ? (
+    <JupyterReactTheme>
+      <Notebook2
+        nbformat={nbformat as INotebookContent}
+        id="notebook-nbformat-id"
+        startDefaultKernel
+        serviceManager={serviceManager}
+        height="calc(100vh - 2.6rem)" // (Height - Toolbar Height).
+        extensions={extensions}
+        /*
           collaborationServer={{
             baseURL: 'https://prod1.datalayer.run',
             token: '',
@@ -38,11 +44,11 @@ const Notebook2Example = () => {
             type: 'datalayer'
           }}
           */
-        />
-      </JupyterReactTheme>
-    :
-      <></>
-  )
+      />
+    </JupyterReactTheme>
+  ) : (
+    <></>
+  );
 };
 
 const div = document.createElement('div');
diff --git a/packages/react/src/examples/NotebookColormode.tsx b/packages/react/src/examples/NotebookColormode.tsx
index 998d1ffc6..a0261723c 100644
--- a/packages/react/src/examples/NotebookColormode.tsx
+++ b/packages/react/src/examples/NotebookColormode.tsx
@@ -42,7 +42,7 @@ const NotebookColormode = () => {
           display="block"
           mb={1}
         >
-          { colormode === 'light' ? 'Light' : 'Dark' } Mode
+          {colormode === 'light' ? 'Light' : 'Dark'} Mode
         </Text>
         <ToggleSwitch
           size="small"
diff --git a/packages/react/src/examples/NotebookExtension.tsx b/packages/react/src/examples/NotebookExtension.tsx
index fa0c9a5ad..68c4fee71 100644
--- a/packages/react/src/examples/NotebookExtension.tsx
+++ b/packages/react/src/examples/NotebookExtension.tsx
@@ -7,7 +7,12 @@
 import { useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { INotebookContent } from '@jupyterlab/nbformat';
-import { Notebook, CellSidebarExtension, CellSidebarButton, NotebookToolbar } from '../components';
+import {
+  Notebook,
+  CellSidebarExtension,
+  CellSidebarButton,
+  NotebookToolbar,
+} from '../components';
 import { JupyterReactTheme } from '../theme';
 import { ExecTimeExtension } from './extensions';
 
diff --git a/packages/react/src/examples/NotebookInit.tsx b/packages/react/src/examples/NotebookInit.tsx
index 14c8878ce..3d607c594 100644
--- a/packages/react/src/examples/NotebookInit.tsx
+++ b/packages/react/src/examples/NotebookInit.tsx
@@ -58,7 +58,7 @@ const NotebookInit: React.FC = () => {
   const kernel = useKernel();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
-  
+
   const extensions = useMemo(() => [new CellSidebarExtension()], []);
 
   useEffect(() => {
diff --git a/packages/react/src/examples/NotebookKernel.tsx b/packages/react/src/examples/NotebookKernel.tsx
index 2ea9752d9..127333b22 100644
--- a/packages/react/src/examples/NotebookKernel.tsx
+++ b/packages/react/src/examples/NotebookKernel.tsx
@@ -21,7 +21,7 @@ const NotebookKernel = () => {
         kernelManager,
         kernelName: 'python3',
         kernelSpecName: 'python3',
-        kernelType: "notebook",
+        kernelType: 'notebook',
         kernelspecsManager: serviceManager.kernelspecs,
         sessionManager: serviceManager.sessions,
       });
@@ -39,10 +39,10 @@ const NotebookKernel = () => {
       />
     </JupyterReactTheme>
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(<NotebookKernel/>);
+root.render(<NotebookKernel />);
diff --git a/packages/react/src/examples/NotebookKernelChange.tsx b/packages/react/src/examples/NotebookKernelChange.tsx
index 6ee26c854..84d4bbb02 100755
--- a/packages/react/src/examples/NotebookKernelChange.tsx
+++ b/packages/react/src/examples/NotebookKernelChange.tsx
@@ -22,11 +22,11 @@ const DENO_KERNEL_NAME = 'deno';
 
 const NotebookKernelChange = () => {
   const { kernelManager, serviceManager, kernel } = useJupyter();
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState('');
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
 
-    const extensions = useMemo(() => [new CellSidebarExtension()], []);
+  const extensions = useMemo(() => [new CellSidebarExtension()], []);
 
   const changeKernel = () => {
     if (kernelManager && serviceManager) {
@@ -39,7 +39,9 @@ const NotebookKernelChange = () => {
       });
       newKernel.ready.then(() => {
         notebookStore.changeKernel({ id: NOTEBOOK_ID, kernel: newKernel });
-        setMessage(`🥺 Bummer, all your variables are lost! The kernel was ${PYTHON_KERNEL_NAME} and is now ${DENO_KERNEL_NAME}). Try with: import pl from "npm:nodejs-polars";`);
+        setMessage(
+          `🥺 Bummer, all your variables are lost! The kernel was ${PYTHON_KERNEL_NAME} and is now ${DENO_KERNEL_NAME}). Try with: import pl from "npm:nodejs-polars";`
+        );
       });
     }
   };
@@ -51,9 +53,7 @@ const NotebookKernelChange = () => {
             Assign another Kernel
           </Button>
         </Box>
-        <Box ml={3}>
-          Kernel ID: {kernel?.id}
-        </Box>
+        <Box ml={3}>Kernel ID: {kernel?.id}</Box>
         <Box ml={3}>
           Kernel Client ID: {notebook?.adapter?.kernel?.clientId}
         </Box>
@@ -64,11 +64,11 @@ const NotebookKernelChange = () => {
           Kernel Info: {notebook?.adapter?.kernel?.info?.language_info.name}
         </Box>
       </Box>
-      {message &&
+      {message && (
         <Box>
           <Flash>{message}</Flash>
         </Box>
-      }
+      )}
       <Notebook
         id={NOTEBOOK_ID}
         path="test.ipynb"
@@ -83,6 +83,4 @@ const div = document.createElement('div');
 document.body.appendChild(div);
 const root = createRoot(div);
 
-root.render(
-    <NotebookKernelChange />
-);
+root.render(<NotebookKernelChange />);
diff --git a/packages/react/src/examples/NotebookLite.tsx b/packages/react/src/examples/NotebookLite.tsx
index 63b543c90..199a97261 100644
--- a/packages/react/src/examples/NotebookLite.tsx
+++ b/packages/react/src/examples/NotebookLite.tsx
@@ -22,7 +22,11 @@ const NotebookLite = () => {
   const onSessionConnection: OnSessionConnection = (
     session: Session.ISessionConnection | undefined
   ) => {
-    console.log('Received a Kernel Session.', session?.id, session?.kernel?.clientId);
+    console.log(
+      'Received a Kernel Session.',
+      session?.id,
+      session?.kernel?.clientId
+    );
     setSession(session);
   };
   return (
diff --git a/packages/react/src/examples/NotebookMutationsKernel.tsx b/packages/react/src/examples/NotebookMutationsKernel.tsx
index 12b8dcf16..aa356ab32 100644
--- a/packages/react/src/examples/NotebookMutationsKernel.tsx
+++ b/packages/react/src/examples/NotebookMutationsKernel.tsx
@@ -10,8 +10,14 @@ import { Box, SegmentedControl, Label, Text } from '@primer/react';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { Session, ServiceManager } from '@jupyterlab/services';
 import {
-  createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl,
-  getJupyterServerToken, ServiceManagerLess, loadJupyterConfig, DEFAULT_JUPYTER_SERVER_URL,
+  createLiteServiceManager,
+  createServerSettings,
+  setJupyterServerUrl,
+  getJupyterServerUrl,
+  getJupyterServerToken,
+  ServiceManagerLess,
+  loadJupyterConfig,
+  DEFAULT_JUPYTER_SERVER_URL,
 } from '../jupyter';
 import { useJupyterReactStore, OnSessionConnection } from '../state';
 import { useNotebookStore, Notebook, SpinnerCentered } from './../components';
@@ -34,23 +40,30 @@ const NotebookMutationsKernel = () => {
   const [kernelIndex, setKernelIndex] = useState(-1);
   const [waiting, setWaiting] = useState(false);
   const [lite, setLite] = useState(false);
-  const [serviceManager, setServiceManager] = useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
-  const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>([])
+  const [serviceManager, setServiceManager] =
+    useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
+  const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>(
+    []
+  );
   const { datalayerConfig } = useJupyterReactStore();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
-  const onSessionConnection: OnSessionConnection = (session: Session.ISessionConnection | undefined) => {
+  const onSessionConnection: OnSessionConnection = (
+    session: Session.ISessionConnection | undefined
+  ) => {
     console.log('Received a Kernel Sessoin.', session);
     if (session) {
       setSessions(sessions.concat(session));
     }
-  }
+  };
   const changeIndex = (index: number) => {
     setIndex(index);
-    switch(index) {
+    switch (index) {
       case 0: {
         setKernelIndex(-1);
-        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+        setNbformat(
+          notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+        );
         setServerless(true);
         setReadonly(true);
         setLite(false);
@@ -63,7 +76,9 @@ const NotebookMutationsKernel = () => {
           setKernelIndex(-1);
           console.log('Lite Service Manager is available', liteServiceManager);
           setServiceManager(liteServiceManager);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
           setServerless(false);
           setReadonly(false);
           setLite(true);
@@ -73,30 +88,37 @@ const NotebookMutationsKernel = () => {
       case 2: {
         setJupyterServerUrl(DEFAULT_JUPYTER_SERVER_URL);
         setKernelIndex(-1);
-        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+        setNbformat(
+          notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+        );
         setServerless(false);
         setReadonly(false);
         setLite(false);
-        const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+        const serverSettings = createServerSettings(
+          getJupyterServerUrl(),
+          getJupyterServerToken()
+        );
         const serviceManager = new ServiceManager({ serverSettings });
         (serviceManager as any)['__NAME__'] = 'MutatingServiceManager';
         setServiceManager(serviceManager);
         break;
       }
       case 3: {
-//        setWaiting(true);
+        //        setWaiting(true);
         setLite(false);
         createDatalayerServiceManager(
           datalayerConfig?.cpuEnvironment || 'python-simple-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
+          datalayerConfig?.credits || 1
+        ).then(serviceManager => {
           (serviceManager as any)['__NAME__'] = 'DatalayerCPUServiceManager';
           setServiceManager(serviceManager);
           setServerless(false);
           setReadonly(false);
           setKernelIndex(0);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
-//          setWaiting(false);  
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
+          //          setWaiting(false);
         });
         break;
       }
@@ -105,31 +127,46 @@ const NotebookMutationsKernel = () => {
         setLite(false);
         createDatalayerServiceManager(
           datalayerConfig?.gpuEnvironment || 'pytorch-cuda-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
+          datalayerConfig?.credits || 1
+        ).then(serviceManager => {
           setKernelIndex(0);
           (serviceManager as any)['__NAME__'] = 'DatalayerGPUServiceManager';
           setServiceManager(serviceManager);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
           setServerless(false);
           setReadonly(false);
-          setWaiting(false);  
+          setWaiting(false);
         });
         break;
       }
     }
-  }
+  };
   return (
     <JupyterReactTheme>
       <>
         <Box display="flex">
           <Box>
-            <SegmentedControl onChange={index => changeIndex(index)} aria-label="jupyter-react-example">
-              <SegmentedControl.Button defaultSelected={index === 0}>Readonly</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 1}>Browser Kernel</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 2}>OSS Kernel (CPU)</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 3}>Kernel (CPU)</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 4}>Kernel (GPU)</SegmentedControl.Button>
+            <SegmentedControl
+              onChange={index => changeIndex(index)}
+              aria-label="jupyter-react-example"
+            >
+              <SegmentedControl.Button defaultSelected={index === 0}>
+                Readonly
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 1}>
+                Browser Kernel
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 2}>
+                OSS Kernel (CPU)
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 3}>
+                Kernel (CPU)
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 4}>
+                Kernel (GPU)
+              </SegmentedControl.Button>
             </SegmentedControl>
           </Box>
           <Box ml={1} mt={1}>
@@ -138,10 +175,18 @@ const NotebookMutationsKernel = () => {
             <Label>Serverless: {String(notebook?.adapter?.serverless)}</Label>
             */}
             <Label>Lite: {String(notebook?.adapter?.lite)}</Label>
-            <Label>Service Manager URL: {notebook?.adapter?.serviceManager.serverSettings.baseUrl}</Label>
-            <Label>Service Manager is ready: {String(notebook?.adapter?.serviceManager.isReady)}</Label>
+            <Label>
+              Service Manager URL:{' '}
+              {notebook?.adapter?.serviceManager.serverSettings.baseUrl}
+            </Label>
+            <Label>
+              Service Manager is ready:{' '}
+              {String(notebook?.adapter?.serviceManager.isReady)}
+            </Label>
             <Label>Kernel ID: {notebook?.adapter?.kernel?.id}</Label>
-            <Label>Kernel Banner: {notebook?.adapter?.kernel?.info?.banner}</Label>
+            <Label>
+              Kernel Banner: {notebook?.adapter?.kernel?.info?.banner}
+            </Label>
           </Box>
         </Box>
         <Box>
@@ -151,15 +196,17 @@ const NotebookMutationsKernel = () => {
           {sessions.map(session => {
             return (
               <Box key={session.id}>
-                <Text>{session.name} {session.id} <Label>Kernel</Label> clientId [{session.kernel?.clientId}) - id {session.kernel?.id}</Text>
+                <Text>
+                  {session.name} {session.id} <Label>Kernel</Label> clientId [
+                  {session.kernel?.clientId}) - id {session.kernel?.id}
+                </Text>
               </Box>
-            )
+            );
           })}
         </Box>
-        {waiting
-          ?
-            <SpinnerCentered/>
-          :
+        {waiting ? (
+          <SpinnerCentered />
+        ) : (
           <Notebook
             height="calc(100vh - 2.6rem)"
             id={NOTEBOOK_ID}
@@ -171,11 +218,11 @@ const NotebookMutationsKernel = () => {
             serviceManager={serviceManager}
             useRunningKernelIndex={kernelIndex}
           />
-        }
+        )}
       </>
     </JupyterReactTheme>
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/NotebookMutationsServiceManager.tsx b/packages/react/src/examples/NotebookMutationsServiceManager.tsx
index d51f9dcbc..f3d97b30d 100644
--- a/packages/react/src/examples/NotebookMutationsServiceManager.tsx
+++ b/packages/react/src/examples/NotebookMutationsServiceManager.tsx
@@ -10,9 +10,15 @@ import { Box, SegmentedControl, Label, Text } from '@primer/react';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { Session, ServiceManager } from '@jupyterlab/services';
 import {
-  createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl,
-  getJupyterServerToken, ServiceManagerLess, loadJupyterConfig,
-  DEFAULT_JUPYTER_SERVER_URL, Lite,
+  createLiteServiceManager,
+  createServerSettings,
+  setJupyterServerUrl,
+  getJupyterServerUrl,
+  getJupyterServerToken,
+  ServiceManagerLess,
+  loadJupyterConfig,
+  DEFAULT_JUPYTER_SERVER_URL,
+  Lite,
 } from '../jupyter';
 import { useJupyterReactStore, OnSessionConnection } from '../state';
 import { useNotebookStore, Notebook, SpinnerCentered } from './../components';
@@ -36,23 +42,30 @@ const NotebookMutationsServiceManager = () => {
   const [kernelIndex, setKernelIndex] = useState(-1);
   const [waiting, setWaiting] = useState(false);
   const [lite, setLite] = useState<Lite>(false);
-  const [serviceManager, setServiceManager] = useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
-  const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>([])
+  const [serviceManager, setServiceManager] =
+    useState<ServiceManager.IManager>(SERVICE_MANAGER_LESS);
+  const [sessions, setSessions] = useState<Array<Session.ISessionConnection>>(
+    []
+  );
   const { datalayerConfig } = useJupyterReactStore();
   const notebookStore = useNotebookStore();
   const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
-  const onSessionConnection: OnSessionConnection = (session: Session.ISessionConnection | undefined) => {
+  const onSessionConnection: OnSessionConnection = (
+    session: Session.ISessionConnection | undefined
+  ) => {
     console.log('Received a Kernel Session.', session);
     if (session) {
       setSessions(sessions.concat(session));
     }
-  }
+  };
   const changeIndex = (index: number) => {
     setIndex(index);
-    switch(index) {
+    switch (index) {
       case 0: {
         setKernelIndex(-1);
-        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+        setNbformat(
+          notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+        );
         setServerless(true);
         setReadonly(true);
         setLite(false);
@@ -65,7 +78,9 @@ const NotebookMutationsServiceManager = () => {
         createLiteServiceManager().then(liteServiceManager => {
           console.log('Lite Service Manager is available', liteServiceManager);
           setKernelIndex(-1);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
           setServerless(false);
           setReadonly(false);
           setLite(true);
@@ -77,12 +92,17 @@ const NotebookMutationsServiceManager = () => {
       case 2: {
         setJupyterServerUrl(DEFAULT_JUPYTER_SERVER_URL);
         setKernelIndex(-1);
-        setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+        setNbformat(
+          notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+        );
         setServerless(false);
         setReadonly(false);
         setLite(false);
         setStartDefaultKernel(true);
-        const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+        const serverSettings = createServerSettings(
+          getJupyterServerUrl(),
+          getJupyterServerToken()
+        );
         const serviceManager = new ServiceManager({ serverSettings });
         (serviceManager as any)['__NAME__'] = 'MutatingServiceManager';
         setServiceManager(serviceManager);
@@ -91,17 +111,19 @@ const NotebookMutationsServiceManager = () => {
       case 3: {
         createDatalayerServiceManager(
           datalayerConfig?.cpuEnvironment || 'python-simple-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
+          datalayerConfig?.credits || 1
+        ).then(serviceManager => {
           setLite(false);
           setServerless(false);
           setReadonly(false);
           setStartDefaultKernel(false);
           setKernelIndex(0);
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
           (serviceManager as any)['__NAME__'] = 'DatalayerCPUServiceManager';
           setServiceManager(serviceManager);
-//          setWaiting(false);  
+          //          setWaiting(false);
         });
         break;
       }
@@ -110,13 +132,15 @@ const NotebookMutationsServiceManager = () => {
         setLite(false);
         createDatalayerServiceManager(
           datalayerConfig?.gpuEnvironment || 'pytorch-cuda-env',
-          datalayerConfig?.credits || 1,
-        ).then((serviceManager) => {
-          setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent);
+          datalayerConfig?.credits || 1
+        ).then(serviceManager => {
+          setNbformat(
+            notebook?.adapter?.notebookPanel?.content.model?.toJSON() as INotebookContent
+          );
           setServerless(false);
           setReadonly(false);
           setStartDefaultKernel(false);
-          setWaiting(false);  
+          setWaiting(false);
           setKernelIndex(0);
           (serviceManager as any)['__NAME__'] = 'DatalayerGPUServiceManager';
           setServiceManager(serviceManager);
@@ -124,18 +148,31 @@ const NotebookMutationsServiceManager = () => {
         break;
       }
     }
-  }
+  };
   return (
     <JupyterReactTheme>
       <>
         <Box display="flex">
           <Box>
-            <SegmentedControl onChange={index => changeIndex(index)} aria-label="jupyter-react-example">
-              <SegmentedControl.Button defaultSelected={index === 0}>Readonly</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 1}>Browser Kernel</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 2}>OSS Kernel (CPU)</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 3}>Kernel (CPU)</SegmentedControl.Button>
-              <SegmentedControl.Button defaultSelected={index === 4}>Kernel (GPU)</SegmentedControl.Button>
+            <SegmentedControl
+              onChange={index => changeIndex(index)}
+              aria-label="jupyter-react-example"
+            >
+              <SegmentedControl.Button defaultSelected={index === 0}>
+                Readonly
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 1}>
+                Browser Kernel
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 2}>
+                OSS Kernel (CPU)
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 3}>
+                Kernel (CPU)
+              </SegmentedControl.Button>
+              <SegmentedControl.Button defaultSelected={index === 4}>
+                Kernel (GPU)
+              </SegmentedControl.Button>
             </SegmentedControl>
           </Box>
           <Box ml={1} mt={1}>
@@ -144,10 +181,18 @@ const NotebookMutationsServiceManager = () => {
             <Label>Serverless: {String(notebook?.adapter?.serverless)}</Label>
             */}
             <Label>Lite: {String(notebook?.adapter?.lite)}</Label>
-            <Label>Service Manager URL: {notebook?.adapter?.serviceManager.serverSettings.baseUrl}</Label>
-            <Label>Service Manager is ready: {String(notebook?.adapter?.serviceManager.isReady)}</Label>
+            <Label>
+              Service Manager URL:{' '}
+              {notebook?.adapter?.serviceManager.serverSettings.baseUrl}
+            </Label>
+            <Label>
+              Service Manager is ready:{' '}
+              {String(notebook?.adapter?.serviceManager.isReady)}
+            </Label>
             <Label>Kernel ID: {notebook?.adapter?.kernel?.id}</Label>
-            <Label>Kernel Banner: {notebook?.adapter?.kernel?.info?.banner}</Label>
+            <Label>
+              Kernel Banner: {notebook?.adapter?.kernel?.info?.banner}
+            </Label>
           </Box>
         </Box>
         <Box>
@@ -157,15 +202,17 @@ const NotebookMutationsServiceManager = () => {
           {sessions.map(session => {
             return (
               <Box key={session.id}>
-                <Text>{session.name} {session.id} <Label>Kernel</Label> clientId {session.kernel?.clientId} - id {session.kernel?.id}</Text>
+                <Text>
+                  {session.name} {session.id} <Label>Kernel</Label> clientId{' '}
+                  {session.kernel?.clientId} - id {session.kernel?.id}
+                </Text>
               </Box>
-            )
+            );
           })}
         </Box>
-        {waiting
-          ?
-            <SpinnerCentered/>
-          :
+        {waiting ? (
+          <SpinnerCentered />
+        ) : (
           <Notebook
             height="calc(100vh - 2.6rem)"
             id={NOTEBOOK_ID}
@@ -178,11 +225,11 @@ const NotebookMutationsServiceManager = () => {
             serviceManager={serviceManager}
             useRunningKernelIndex={kernelIndex}
           />
-        }
+        )}
       </>
     </JupyterReactTheme>
   );
-}
+};
 
 const div = document.createElement('div');
 document.body.appendChild(div);
diff --git a/packages/react/src/examples/NotebookNbformat.tsx b/packages/react/src/examples/NotebookNbformat.tsx
index 46946d3ef..35455e2ac 100644
--- a/packages/react/src/examples/NotebookNbformat.tsx
+++ b/packages/react/src/examples/NotebookNbformat.tsx
@@ -8,7 +8,11 @@ import { useMemo } from 'react';
 import { INotebookContent } from '@jupyterlab/nbformat';
 import { createRoot } from 'react-dom/client';
 import { useJupyter } from '../jupyter';
-import { Notebook2, CellSidebarExtension, NotebookToolbar } from '../components';
+import {
+  Notebook2,
+  CellSidebarExtension,
+  NotebookToolbar,
+} from '../components';
 import { JupyterReactTheme } from '../theme';
 
 import nbformat from './notebooks/NotebookExample1.ipynb.json';
@@ -18,7 +22,7 @@ const NotebookNbformat = () => {
   const extensions = useMemo(() => [new CellSidebarExtension()], []);
   return (
     <JupyterReactTheme>
-      {serviceManager ?
+      {serviceManager ? (
         <Notebook2
           nbformat={nbformat as INotebookContent}
           id="notebook-nbformat-id"
@@ -28,9 +32,9 @@ const NotebookNbformat = () => {
           extensions={extensions}
           Toolbar={NotebookToolbar}
         />
-      :
+      ) : (
         <></>
-      }
+      )}
     </JupyterReactTheme>
   );
 };
diff --git a/packages/react/src/examples/NotebookNbformatChange.tsx b/packages/react/src/examples/NotebookNbformatChange.tsx
index f8116ee3d..3e19321f7 100755
--- a/packages/react/src/examples/NotebookNbformatChange.tsx
+++ b/packages/react/src/examples/NotebookNbformatChange.tsx
@@ -30,7 +30,11 @@ const NotebookNbformatChange = () => {
         .get(NOTEBOOK_ID)
         ?.model?.toJSON() as INotebookContent
     );
-    nbformat === NBFORMAT_1 ? setNbformat(NBFORMAT_2) : setNbformat(NBFORMAT_1);
+    if (nbformat === NBFORMAT_1) {
+      setNbformat(NBFORMAT_2);
+    } else {
+      setNbformat(NBFORMAT_1);
+    }
   };
   return (
     <>
diff --git a/packages/react/src/examples/NotebookPathChange.tsx b/packages/react/src/examples/NotebookPathChange.tsx
index 82ca6442a..2668dea84 100755
--- a/packages/react/src/examples/NotebookPathChange.tsx
+++ b/packages/react/src/examples/NotebookPathChange.tsx
@@ -19,7 +19,11 @@ const NotebookPathChange = () => {
   const [path, setPath] = useState<string>(PATH_1);
   const extensions = useMemo(() => [new CellSidebarExtension()], []);
   const changePath = () => {
-    path === PATH_1 ? setPath(PATH_2) : setPath(PATH_1);
+    if (path === PATH_1) {
+      setPath(PATH_2);
+    } else {
+      setPath(PATH_1);
+    }
   };
   return (
     <JupyterReactTheme>
diff --git a/packages/react/src/examples/Output.tsx b/packages/react/src/examples/Output.tsx
index 2bae0a4eb..797baa61e 100644
--- a/packages/react/src/examples/Output.tsx
+++ b/packages/react/src/examples/Output.tsx
@@ -69,17 +69,12 @@ const OutputFromCode = () => {
   console.log(
     'Outputs from Code',
     outputStore.getModel(SOURCE_ID_0)?.toJSON(),
-    outputStore.getInput(SOURCE_ID_0),
+    outputStore.getInput(SOURCE_ID_0)
   );
   return (
     <>
       <Text as="h1">Output without Code Editor</Text>
-      <Output
-        autoRun
-        id={SOURCE_ID_0}
-        code={CODE_O}
-        showEditor={false}
-      />
+      <Output autoRun id={SOURCE_ID_0} code={CODE_O} showEditor={false} />
     </>
   );
 };
@@ -89,7 +84,7 @@ const OutputWithoutEditor = () => {
   console.log(
     'Outputs 1',
     outputStore.getModel(SOURCE_ID_1)?.toJSON(),
-    outputStore.getInput(SOURCE_ID_1),
+    outputStore.getInput(SOURCE_ID_1)
   );
   return (
     <>
@@ -110,7 +105,7 @@ const OutputWithEditor = () => {
   console.log(
     'Outputs 2',
     outputStore.getModel(SOURCE_ID_2)?.toJSON(),
-    outputStore.getInput(SOURCE_ID_2),
+    outputStore.getInput(SOURCE_ID_2)
   );
   return (
     <>
@@ -118,7 +113,7 @@ const OutputWithEditor = () => {
       <Output
         autoRun={false}
         code={SOURCE_2}
-        id={SOURCE_ID_2} 
+        id={SOURCE_ID_2}
         kernel={defaultKernel}
         outputs={OUTPUTS_2}
         showEditor
@@ -132,7 +127,7 @@ const OutputWithEmptyOutput = () => {
   const outputStore = useOutputsStore();
   const kernelsStore = useKernelsStore();
   const [kernel, setKernel] = useState<Kernel>();
-  useEffect( () => {
+  useEffect(() => {
     if (serviceManager && kernelManager) {
       const kernel = new Kernel({
         path: newUuid(),
@@ -148,21 +143,17 @@ const OutputWithEmptyOutput = () => {
   console.log(
     'Outputs 3',
     outputStore.getModel(SOURCE_ID_3)?.toJSON(),
-    outputStore.getInput(SOURCE_ID_3),
+    outputStore.getInput(SOURCE_ID_3)
   );
   return (
     <>
       <Text as="h1">Output with empty Output</Text>
-      { kernel &&
+      {kernel && (
         <>
+          <Box>Kernel State: {kernelsStore.getExecutionState(kernel.id)}</Box>
+          <Box>Kernel Phase: {kernelsStore.getExecutionPhase(kernel.id)}</Box>
           <Box>
-            Kernel State: {kernelsStore.getExecutionState(kernel.id)}
-          </Box>
-          <Box>
-            Kernel Phase: {kernelsStore.getExecutionPhase(kernel.id)}
-          </Box>
-          <Box>
-            <KernelIndicator kernel={kernel.connection}/>
+            <KernelIndicator kernel={kernel.connection} />
           </Box>
           <Box>
             <Output
@@ -175,7 +166,7 @@ const OutputWithEmptyOutput = () => {
             />
           </Box>
         </>
-      }
+      )}
     </>
   );
 };
@@ -186,7 +177,7 @@ const root = createRoot(div);
 
 root.render(
   <Jupyter startDefaultKernel>
-    <OutputFromCode/>
+    <OutputFromCode />
     <OutputWithoutEditor />
     <OutputWithEditor />
     <OutputWithEmptyOutput />
diff --git a/packages/react/src/examples/OutputIPyWidgets.tsx b/packages/react/src/examples/OutputIPyWidgets.tsx
index e923bc07e..821ae2301 100755
--- a/packages/react/src/examples/OutputIPyWidgets.tsx
+++ b/packages/react/src/examples/OutputIPyWidgets.tsx
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Text } from '@primer/react';
 import { JupyterReactTheme } from '../theme/JupyterReactTheme';
 import OutputIPyWidgets from '../components/output/OutputIPyWidgets';
@@ -23,9 +23,9 @@ const OutputIPyWidgetsExample = () => {
 const div = document.createElement('div');
 document.body.appendChild(div);
 
-render(
+const root = createRoot(div);
+root.render(
   <JupyterReactTheme>
     <OutputIPyWidgetsExample />
-  </JupyterReactTheme>,
-  div
+  </JupyterReactTheme>
 );
diff --git a/packages/react/src/examples/RunningSessions.tsx b/packages/react/src/examples/RunningSessions.tsx
index 1ed771b71..a93ae1fff 100644
--- a/packages/react/src/examples/RunningSessions.tsx
+++ b/packages/react/src/examples/RunningSessions.tsx
@@ -6,7 +6,13 @@
 
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, Text, ToggleSwitch, ThemeProvider, useTheme } from '@primer/react';
+import {
+  Box,
+  Text,
+  ToggleSwitch,
+  ThemeProvider,
+  useTheme,
+} from '@primer/react';
 import { ThemeManager } from '@jupyterlab/apputils';
 import { RunningSessions } from '@jupyterlab/running';
 import { Jupyter } from '../jupyter/Jupyter';
@@ -52,11 +58,7 @@ const RunningSessionsExample = () => {
   };
   return (
     <>
-      <Jupyter
-        startDefaultKernel={false}
-        disableCssLoading
-        colormode="light"
-      >
+      <Jupyter startDefaultKernel={false} disableCssLoading colormode="light">
         <ThemeProvider
           colorMode={theme === 'light' ? 'day' : 'night'}
           dayScheme="light"
@@ -93,11 +95,7 @@ const RunningSessionsExample = () => {
         </ThemeProvider>
         {runningSessions && <Lumino height="300px">{runningSessions}</Lumino>}
         <JupyterLabApp
-          plugins={[
-            lightThemePlugins,
-            darkThemePlugins,
-            runningPlugins,
-          ]}
+          plugins={[lightThemePlugins, darkThemePlugins, runningPlugins]}
           headless
           onJupyterLab={onJupyterLab}
           pluginId="@jupyterlab/apputils-extension:themes"
diff --git a/packages/react/src/examples/Viewer.tsx b/packages/react/src/examples/Viewer.tsx
index 27e5505b4..4e717cdcd 100644
--- a/packages/react/src/examples/Viewer.tsx
+++ b/packages/react/src/examples/Viewer.tsx
@@ -22,10 +22,7 @@ const JupyterViewerExample = () => {
             outputs
           />
           <Text as="h1">Jupyter Viewer without outputs</Text>
-          <Viewer
-            nbformat={matplotlib}
-            outputs={false}
-          />
+          <Viewer nbformat={matplotlib} outputs={false} />
         </Jupyter>
       </Box>
     </>
diff --git a/packages/react/src/examples/extensions/cellsidebars/CellSidebarSource.tsx b/packages/react/src/examples/extensions/cellsidebars/CellSidebarSource.tsx
index 7398f5f3d..1b78f9391 100644
--- a/packages/react/src/examples/extensions/cellsidebars/CellSidebarSource.tsx
+++ b/packages/react/src/examples/extensions/cellsidebars/CellSidebarSource.tsx
@@ -5,10 +5,19 @@
  */
 
 import { ActionMenu, Box, Button } from '@primer/react';
-import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, SquareIcon, XIcon } from '@primer/octicons-react';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  SquareIcon,
+  XIcon,
+} from '@primer/octicons-react';
 import { NotebookCommandIds } from '../../../components/notebook';
 import { CellMetadataEditor } from '../../../components/notebook/cell/metadata';
-import { DATALAYER_CELL_SIDEBAR_CLASS_NAME, ICellSidebarProps } from '../../../components/notebook/cell/sidebar';
+import {
+  DATALAYER_CELL_SIDEBAR_CLASS_NAME,
+  ICellSidebarProps,
+} from '../../../components/notebook/cell/sidebar';
 
 export const CellSidebarSource = (props: ICellSidebarProps) => {
   const { commands, model, nbgrader } = props;
diff --git a/packages/react/src/examples/extensions/celltoolbar/CellToolbar.tsx b/packages/react/src/examples/extensions/celltoolbar/CellToolbar.tsx
index 474b49ae9..2c71015f4 100644
--- a/packages/react/src/examples/extensions/celltoolbar/CellToolbar.tsx
+++ b/packages/react/src/examples/extensions/celltoolbar/CellToolbar.tsx
@@ -27,7 +27,6 @@ export class CellToolbar extends ReactWidget {
       <>
         <CellToolbarComponent cell={this._cell} extensionProps={this._props} />
       </>
-    )
+    );
   }
-
 }
diff --git a/packages/react/src/examples/extensions/celltoolbar/CellToolbarComponent.tsx b/packages/react/src/examples/extensions/celltoolbar/CellToolbarComponent.tsx
index 1cb237c96..7c6e5b6c6 100644
--- a/packages/react/src/examples/extensions/celltoolbar/CellToolbarComponent.tsx
+++ b/packages/react/src/examples/extensions/celltoolbar/CellToolbarComponent.tsx
@@ -13,12 +13,15 @@ import {
   SquareIcon,
   XIcon,
 } from '@primer/octicons-react';
-import { useNotebookStore, IDatalayerNotebookExtensionProps } from '../../../components';
+import {
+  useNotebookStore,
+  IDatalayerNotebookExtensionProps,
+} from '../../../components';
 
 type ICellToolbarComponentProps = {
   cell: CodeCell;
   extensionProps: IDatalayerNotebookExtensionProps;
-}
+};
 
 export const CellToolbarComponent = (props: ICellToolbarComponentProps) => {
   const { extensionProps } = props;
@@ -26,7 +29,7 @@ export const CellToolbarComponent = (props: ICellToolbarComponentProps) => {
   const notebookStore = useNotebookStore();
   const activeCell = notebookStore.selectActiveCell(notebookId);
   return activeCell ? (
-    <Box 
+    <Box
       display="flex"
       sx={{
         marginLeft: 70,
diff --git a/packages/react/src/examples/extensions/celltoolbar/CellToolbarExtension.tsx b/packages/react/src/examples/extensions/celltoolbar/CellToolbarExtension.tsx
index 128adca9e..b1f8d46f2 100644
--- a/packages/react/src/examples/extensions/celltoolbar/CellToolbarExtension.tsx
+++ b/packages/react/src/examples/extensions/celltoolbar/CellToolbarExtension.tsx
@@ -6,7 +6,10 @@
 
 import { INotebookModel, NotebookPanel } from '@jupyterlab/notebook';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
-import { DatalayerNotebookExtension, IDatalayerNotebookExtensionProps } from '../../../components';
+import {
+  DatalayerNotebookExtension,
+  IDatalayerNotebookExtensionProps,
+} from '../../../components';
 import { CellToolbarWidget } from './CellToolbarWidget';
 
 import './CellToolbarExtension.css';
@@ -20,15 +23,17 @@ export class CellToolbarExtension implements DatalayerNotebookExtension {
   }
 
   /* @override */
-  createNew(notebookPanel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>) {
+  createNew(
+    notebookPanel: NotebookPanel,
+    context: DocumentRegistry.IContext<INotebookModel>
+  ) {
     new CellToolbarWidget(notebookPanel, this._props!);
   }
 
   /* @override */
   get component(): JSX.Element | null {
-    return null
+    return null;
   }
-
 }
 
 export default CellToolbarExtension;
diff --git a/packages/react/src/examples/extensions/celltoolbar/CellToolbarWidget.tsx b/packages/react/src/examples/extensions/celltoolbar/CellToolbarWidget.tsx
index 3559fbafc..2dc167119 100644
--- a/packages/react/src/examples/extensions/celltoolbar/CellToolbarWidget.tsx
+++ b/packages/react/src/examples/extensions/celltoolbar/CellToolbarWidget.tsx
@@ -32,13 +32,15 @@ export class CellToolbarWidget extends Widget {
     }
   }
 
-  private updateConnectedCell(cells: any, changed: IObservableList.IChangedArgs<ICellModel>) {
+  private updateConnectedCell(
+    cells: any,
+    changed: IObservableList.IChangedArgs<ICellModel>
+  ) {
     changed.oldValues.forEach(this._deregisterCellChanges.bind(this));
     changed.newValues.forEach(this._registerCellChanges.bind(this));
   }
 
-  private _deregisterCellChanges(cellModel: ICellModel) {
-  }
+  private _deregisterCellChanges(cellModel: ICellModel) {}
 
   private _registerCellChanges(cellModel: ICellModel) {
     const disableHighlight = false;
@@ -79,5 +81,4 @@ export class CellToolbarWidget extends Widget {
       }
     }
   }
-
 }
diff --git a/packages/react/src/examples/extensions/exectime/ExecTimeExtension.tsx b/packages/react/src/examples/extensions/exectime/ExecTimeExtension.tsx
index 982be79a0..369779d7c 100644
--- a/packages/react/src/examples/extensions/exectime/ExecTimeExtension.tsx
+++ b/packages/react/src/examples/extensions/exectime/ExecTimeExtension.tsx
@@ -6,27 +6,30 @@
 
 import { INotebookModel, NotebookPanel } from '@jupyterlab/notebook';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
-import { DatalayerNotebookExtension, IDatalayerNotebookExtensionProps } from '../../../components';
+import {
+  DatalayerNotebookExtension,
+  IDatalayerNotebookExtensionProps,
+} from '../../../components';
 import { ExecTimeWidget } from './ExecTimeWidget';
 
 import './ExecTimeExtension.css';
 
 export class ExecTimeExtension implements DatalayerNotebookExtension {
-
   /* @override */
-  init(props: IDatalayerNotebookExtensionProps) {
-  }
+  init(props: IDatalayerNotebookExtensionProps) {}
 
   /* @override */
-  createNew(notebookPanel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>) {
+  createNew(
+    notebookPanel: NotebookPanel,
+    context: DocumentRegistry.IContext<INotebookModel>
+  ) {
     new ExecTimeWidget(notebookPanel);
   }
 
   /* @override */
   get component(): JSX.Element | null {
-    return null
+    return null;
   }
-
 }
 
 export default ExecTimeExtension;
diff --git a/packages/react/src/examples/extensions/exectime/ExecTimeWidget.ts b/packages/react/src/examples/extensions/exectime/ExecTimeWidget.ts
index 8b16a2f42..3f6b3ad01 100644
--- a/packages/react/src/examples/extensions/exectime/ExecTimeWidget.ts
+++ b/packages/react/src/examples/extensions/exectime/ExecTimeWidget.ts
@@ -32,7 +32,7 @@ export class ExecTimeWidget extends Widget {
 
   private _settings: IExecTimeSettings = {
     highlight: true,
-    positioning: 'left'
+    positioning: 'left',
   };
 
   constructor(panel: NotebookPanel) {
@@ -46,7 +46,10 @@ export class ExecTimeWidget extends Widget {
     }
   }
 
-  private updateConnectedCell(cells: any, changed: IObservableList.IChangedArgs<ICellModel>) {
+  private updateConnectedCell(
+    cells: any,
+    changed: IObservableList.IChangedArgs<ICellModel>
+  ) {
     changed.oldValues.forEach(this._deregisterMetadataChanges.bind(this));
     changed.newValues.forEach(this._registerMetadataChanges.bind(this));
   }
@@ -72,7 +75,10 @@ export class ExecTimeWidget extends Widget {
     delete this._cellSlotMap[cellModel.id];
   }
 
-  private _cellMetadataChanged(cellModel: ICellModel, disableHighlight = false) {
+  private _cellMetadataChanged(
+    cellModel: ICellModel,
+    disableHighlight = false
+  ) {
     const codeCell = this._getCodeCell(cellModel);
     if (codeCell) {
       this._updateCodeCell(codeCell, disableHighlight);
@@ -96,7 +102,9 @@ export class ExecTimeWidget extends Widget {
   private _removeExecuteNode(cell: CodeCell) {
     if (cell.inputArea) {
       const editorWidget = cell.inputArea.editorWidget;
-      const executionTimeNode = editorWidget.node.querySelector(`.${EXECUTE_TIME_CLASS}`);
+      const executionTimeNode = editorWidget.node.querySelector(
+        `.${EXECUTE_TIME_CLASS}`
+      );
       if (executionTimeNode) {
         executionTimeNode.remove();
       }
@@ -107,9 +115,8 @@ export class ExecTimeWidget extends Widget {
     const executionMetadata = cell.model.getMetadata('execution') as JSONObject;
     if (executionMetadata && JSONExt.isObject(executionMetadata)) {
       const editorWidget = cell.inputArea!.editorWidget;
-      let executionTimeNode: HTMLDivElement | null = editorWidget.node.querySelector(
-        `.${EXECUTE_TIME_CLASS}`
-      );
+      let executionTimeNode: HTMLDivElement | null =
+        editorWidget.node.querySelector(`.${EXECUTE_TIME_CLASS}`);
       if (!executionTimeNode) {
         executionTimeNode = document.createElement('div') as HTMLDivElement;
         editorWidget.node.append(executionTimeNode);
@@ -123,7 +130,9 @@ export class ExecTimeWidget extends Widget {
           positioning = 'right';
           break;
         default:
-          console.error(`'${positioning}' is not a valid type for the setting 'positioning'`);
+          console.error(
+            `'${positioning}' is not a valid type for the setting 'positioning'`
+          );
       }
       const positioningClass = `${EXECUTE_TIME_CLASS}-positioning-${this._settings.positioning}`;
       executionTimeNode.className = `${EXECUTE_TIME_CLASS} ${positioningClass}`;
@@ -163,5 +172,4 @@ export class ExecTimeWidget extends Widget {
       this._removeExecuteNode(cell);
     }
   }
-
 }
diff --git a/packages/react/src/examples/extensions/exectime/utils.ts b/packages/react/src/examples/extensions/exectime/utils.ts
index 3a0238a64..245a79b72 100644
--- a/packages/react/src/examples/extensions/exectime/utils.ts
+++ b/packages/react/src/examples/extensions/exectime/utils.ts
@@ -5,11 +5,13 @@
  */
 
 export const getTimeString = (date: Date): string => {
-  return date.toLocaleDateString(
-    'en-us',
-    { weekday:"long", year:"numeric", month:"short", day:"numeric"},  
-  );
-}
+  return date.toLocaleDateString('en-us', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
 
 export const getTimeDiff = (end: Date, start: Date): string => {
   const MS_IN_SEC = 1000;
@@ -44,4 +46,4 @@ export const getTimeDiff = (end: Date, start: Date): string => {
     timeDiff += `${secs.toFixed(hours ? 0 : 2)}s`;
   }
   return timeDiff.trim();
-}
+};
diff --git a/packages/react/src/examples/extensions/toc/TocExtension.tsx b/packages/react/src/examples/extensions/toc/TocExtension.tsx
index 3a2d3e940..b9cde60c8 100644
--- a/packages/react/src/examples/extensions/toc/TocExtension.tsx
+++ b/packages/react/src/examples/extensions/toc/TocExtension.tsx
@@ -5,9 +5,17 @@
  */
 
 import { NotebookPanel, NotebookToCFactory } from '@jupyterlab/notebook';
-import { TableOfContents, TableOfContentsRegistry, TableOfContentsTracker } from '@jupyterlab/toc';
+import {
+  TableOfContents,
+  TableOfContentsRegistry,
+  TableOfContentsTracker,
+} from '@jupyterlab/toc';
 import { BoxPanel } from '@lumino/widgets';
-import { DatalayerNotebookExtension, IDatalayerNotebookExtensionProps, notebookStore } from '../../../components';
+import {
+  DatalayerNotebookExtension,
+  IDatalayerNotebookExtensionProps,
+  notebookStore,
+} from '../../../components';
 import { JupyterLayoutFactory } from './JupyterLayoutFactory';
 
 /**
diff --git a/packages/react/src/examples/notebooks/Lite.ipynb.json b/packages/react/src/examples/notebooks/Lite.ipynb.json
index 0992d04c3..e8baad8b7 100644
--- a/packages/react/src/examples/notebooks/Lite.ipynb.json
+++ b/packages/react/src/examples/notebooks/Lite.ipynb.json
@@ -14,10 +14,7 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "import platform\n",
-        "platform.system()"
-      ]
+      "source": ["import platform\n", "platform.system()"]
     },
     {
       "cell_type": "code",
@@ -33,10 +30,7 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "import sys\n",
-        "sys.platform"
-      ]
+      "source": ["import sys\n", "sys.platform"]
     },
     {
       "cell_type": "code",
@@ -45,16 +39,16 @@
       "outputs": [
         {
           "data": {
-            "text/plain": ["<pyodide_kernel.interpreter.Interpreter at 0x22906f0>"]
+            "text/plain": [
+              "<pyodide_kernel.interpreter.Interpreter at 0x22906f0>"
+            ]
           },
           "execution_count": 1,
           "metadata": {},
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "get_ipython()"
-      ]
+      "source": ["get_ipython()"]
     },
     {
       "cell_type": "code",
@@ -70,16 +64,12 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "# I am a Python cell.\n",
-        "print('2+2')"
-      ]
+      "source": ["# I am a Python cell.\n", "print('2+2')"]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
-      "metadata": {
-      },
+      "metadata": {},
       "outputs": [
         {
           "data": {
@@ -90,16 +80,12 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "import micropip\n",
-        "await micropip.install('ipywidgets')"
-      ]
+      "source": ["import micropip\n", "await micropip.install('ipywidgets')"]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
-      "metadata": {
-      },
+      "metadata": {},
       "outputs": [
         {
           "data": {
@@ -110,17 +96,12 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "from ipywidgets import IntSlider\n",
-        "w = IntSlider()\n",
-        "w"
-      ]
+      "source": ["from ipywidgets import IntSlider\n", "w = IntSlider()\n", "w"]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
-      "metadata": {
-      },
+      "metadata": {},
       "outputs": [
         {
           "data": {
@@ -131,9 +112,7 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "w"
-      ]
+      "source": ["w"]
     },
     {
       "cell_type": "code",
diff --git a/packages/react/src/examples/notebooks/NotebookExample1.ipynb.json b/packages/react/src/examples/notebooks/NotebookExample1.ipynb.json
index e315fee86..48e36aa76 100644
--- a/packages/react/src/examples/notebooks/NotebookExample1.ipynb.json
+++ b/packages/react/src/examples/notebooks/NotebookExample1.ipynb.json
@@ -34,16 +34,12 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "# I am a Python cell.\n",
-        "print('2+2')"
-      ]
+      "source": ["# I am a Python cell.\n", "print('2+2')"]
     },
     {
       "cell_type": "code",
       "execution_count": 1,
-      "metadata": {
-      },
+      "metadata": {},
       "outputs": [
         {
           "data": {
@@ -65,8 +61,7 @@
     {
       "cell_type": "code",
       "execution_count": 1,
-      "metadata": {
-      },
+      "metadata": {},
       "outputs": [
         {
           "data": {
@@ -77,9 +72,7 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "w"
-      ]
+      "source": ["w"]
     },
     {
       "cell_type": "code",
@@ -99,10 +92,7 @@
           "output_type": "execute_result"
         }
       ],
-      "source": [
-        "-- I am a SQL cell.\n",
-        "SELECT * FROM LOGS"
-      ]
+      "source": ["-- I am a SQL cell.\n", "SELECT * FROM LOGS"]
     },
     {
       "cell_type": "code",
diff --git a/packages/react/src/examples/notebooks/NotebookOutputs.ipynb.json b/packages/react/src/examples/notebooks/NotebookOutputs.ipynb.json
index a66aa393c..944429d77 100644
--- a/packages/react/src/examples/notebooks/NotebookOutputs.ipynb.json
+++ b/packages/react/src/examples/notebooks/NotebookOutputs.ipynb.json
@@ -1,57 +1,49 @@
 {
- "cells": [
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {},
-   "outputs": [
+  "cells": [
     {
-     "data": {
-      "text/plain": [
-       "2"
-      ]
-     },
-     "execution_count": 1,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
-   "source": [
-    "1+1"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 1,
-   "metadata": {
-   },
-   "outputs": [
+      "cell_type": "code",
+      "execution_count": 1,
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "text/plain": ["2"]
+          },
+          "execution_count": 1,
+          "metadata": {},
+          "output_type": "execute_result"
+        }
+      ],
+      "source": ["1+1"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "metadata": {},
+      "outputs": [
+        {
+          "ename": "NameError",
+          "evalue": "name 'HTML' is not defined",
+          "output_type": "error",
+          "traceback": [
+            "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
+            "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
+            "Cell \u001b[0;32mIn[1], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m display(\u001b[43mHTML\u001b[49m(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124m\"\u001b[39m));\n",
+            "\u001b[0;31mNameError\u001b[0m: name 'HTML' is not defined"
+          ]
+        }
+      ],
+      "source": ["display(HTML(\"\"));"]
+    },
     {
-     "ename": "NameError",
-     "evalue": "name 'HTML' is not defined",
-     "output_type": "error",
-     "traceback": [
-      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
-      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
-      "Cell \u001b[0;32mIn[1], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m display(\u001b[43mHTML\u001b[49m(\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124m\"\u001b[39m));\n",
-      "\u001b[0;31mNameError\u001b[0m: name 'HTML' is not defined"
-     ]
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": []
     }
-   ],
-   "source": [
-    "display(HTML(\"\"));"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
-  }
- ],
- "metadata": {
- },
- "nbformat": 4,
- "nbformat_minor": 4
+  ],
+  "metadata": {},
+  "nbformat": 4,
+  "nbformat_minor": 4
 }
diff --git a/packages/react/src/examples/notebooks/NotebookToCExample.ipynb.json b/packages/react/src/examples/notebooks/NotebookToCExample.ipynb.json
index fb858c601..baf9a11f8 100644
--- a/packages/react/src/examples/notebooks/NotebookToCExample.ipynb.json
+++ b/packages/react/src/examples/notebooks/NotebookToCExample.ipynb.json
@@ -1,117 +1,102 @@
 {
- "cells": [
-  {
-   "cell_type": "markdown",
-   "id": "6ecc7b98-968d-43cd-9fbb-8ceadf863b74",
-   "metadata": {},
-   "source": [
-    "# Heading 1"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "5099ba4a-88e8-4108-be32-a0ea52a58f79",
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "id": "6ecc7b98-968d-43cd-9fbb-8ceadf863b74",
+      "metadata": {},
+      "source": ["# Heading 1"]
+    },
+    {
+      "cell_type": "markdown",
+      "id": "5099ba4a-88e8-4108-be32-a0ea52a58f79",
+      "metadata": {
+        "editable": true,
+        "slideshow": {
+          "slide_type": ""
+        },
+        "tags": []
+      },
+      "source": ["LOL"]
+    },
+    {
+      "cell_type": "markdown",
+      "id": "418b532a-c1eb-4f37-96c2-3465879122de",
+      "metadata": {},
+      "source": ["**Okay**"]
+    },
+    {
+      "cell_type": "markdown",
+      "id": "60a3ee36-8ee6-4648-93d7-af587bf3892f",
+      "metadata": {},
+      "source": ["## Heading 1-1"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 2,
+      "id": "113f7bb9-220a-405f-9784-e0de940e0adf",
+      "metadata": {},
+      "outputs": [
+        {
+          "name": "stdin",
+          "output_type": "stream",
+          "text": ["Please input your name:  leon\n"]
+        },
+        {
+          "name": "stdout",
+          "output_type": "stream",
+          "text": ["Hello, leon!\n", "finish\n"]
+        }
+      ],
+      "source": [
+        "name = input(\"Please input your name: \")\n",
+        "print(f\"Hello, {name}!\") \n",
+        "import time\n",
+        "time.sleep(3)\n",
+        "print(\"finish\")"
+      ]
     },
-    "tags": []
-   },
-   "source": [
-    "LOL"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "418b532a-c1eb-4f37-96c2-3465879122de",
-   "metadata": {},
-   "source": [
-    "**Okay**"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "60a3ee36-8ee6-4648-93d7-af587bf3892f",
-   "metadata": {},
-   "source": [
-    "## Heading 1-1"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 2,
-   "id": "113f7bb9-220a-405f-9784-e0de940e0adf",
-   "metadata": {},
-   "outputs": [
     {
-     "name": "stdin",
-     "output_type": "stream",
-     "text": [
-      "Please input your name:  leon\n"
-     ]
+      "cell_type": "markdown",
+      "id": "dfd17807-2ad3-4d2d-8371-5102d24e0d67",
+      "metadata": {},
+      "source": ["# Heading 2"]
     },
     {
-     "name": "stdout",
-     "output_type": "stream",
-     "text": [
-      "Hello, leon!\n",
-      "finish\n"
-     ]
+      "cell_type": "markdown",
+      "id": "de6a4139-4e4d-49d4-8824-0985baccf704",
+      "metadata": {
+        "editable": true,
+        "slideshow": {
+          "slide_type": ""
+        },
+        "tags": []
+      },
+      "source": [
+        "## Heading 2-1\n",
+        "\n",
+        "Man! **you know** what I am saying."
+      ]
     }
-   ],
-   "source": [
-    "name = input(\"Please input your name: \")\n",
-    "print(f\"Hello, {name}!\") \n",
-    "import time\n",
-    "time.sleep(3)\n",
-    "print(\"finish\")"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "dfd17807-2ad3-4d2d-8371-5102d24e0d67",
-   "metadata": {},
-   "source": [
-    "# Heading 2"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "de6a4139-4e4d-49d4-8824-0985baccf704",
-   "metadata": {
-    "editable": true,
-    "slideshow": {
-     "slide_type": ""
+  ],
+  "metadata": {
+    "kernelspec": {
+      "display_name": "Python 3 (ipykernel)",
+      "language": "python",
+      "name": "python3"
     },
-    "tags": []
-   },
-   "source": [
-    "## Heading 2-1\n",
-    "\n",
-    "Man! **you know** what I am saying."
-   ]
-  }
- ],
- "metadata": {
-  "kernelspec": {
-   "display_name": "Python 3 (ipykernel)",
-   "language": "python",
-   "name": "python3"
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.10.4"
+    }
   },
-  "language_info": {
-   "codemirror_mode": {
-    "name": "ipython",
-    "version": 3
-   },
-   "file_extension": ".py",
-   "mimetype": "text/x-python",
-   "name": "python",
-   "nbconvert_exporter": "python",
-   "pygments_lexer": "ipython3",
-   "version": "3.10.4"
-  }
- },
- "nbformat": 4,
- "nbformat_minor": 5
+  "nbformat": 4,
+  "nbformat_minor": 5
 }
diff --git a/packages/react/src/examples/notebooks/PyGWalker.ipynb.json b/packages/react/src/examples/notebooks/PyGWalker.ipynb.json
index cdb04cf56..4a62675d7 100644
--- a/packages/react/src/examples/notebooks/PyGWalker.ipynb.json
+++ b/packages/react/src/examples/notebooks/PyGWalker.ipynb.json
@@ -20,7 +20,7 @@
         "\n",
         "df = pd.read_csv(\"https://kanaries-app.s3.ap-northeast-1.amazonaws.com/public-datasets/bike_sharing_dc.csv\")\n",
         "\n",
-        "walker = pyg.walk(df)"    
+        "walker = pyg.walk(df)"
       ]
     },
     {
diff --git a/packages/react/src/examples/toolbars/NotebookToolbarAutoSave.tsx b/packages/react/src/examples/toolbars/NotebookToolbarAutoSave.tsx
index 5b4d9ad2d..43693e1c9 100644
--- a/packages/react/src/examples/toolbars/NotebookToolbarAutoSave.tsx
+++ b/packages/react/src/examples/toolbars/NotebookToolbarAutoSave.tsx
@@ -25,7 +25,7 @@ export const NotebookToolbarAutoSave = (props: { notebookId: string }) => {
   const [addType, setAddType] = useState('code');
   const notebook = notebookStore.selectNotebook(notebookId);
   const saveRequest = notebookStore.selectSaveRequest(notebookId);
-  const notebookstate = notebookStore.notebooks
+  const notebookstate = notebookStore.notebooks;
   useEffect(() => {
     notebook?.adapter?.commands.execute(NotebookCommandIds.save);
   }, [saveRequest]);
diff --git a/packages/react/src/jupyter/Jupyter.tsx b/packages/react/src/jupyter/Jupyter.tsx
index b28afea56..7199ab454 100644
--- a/packages/react/src/jupyter/Jupyter.tsx
+++ b/packages/react/src/jupyter/Jupyter.tsx
@@ -15,10 +15,7 @@ import { jupyterLabTheme, Colormode, JupyterLabCss } from '../theme';
  * Definition of the properties that can be passed
  * when creating a Jupyter context.
  */
-export type JupyterProps = Omit<
-  JupyterContextProps,
-  'variant'
-> & {
+export type JupyterProps = Omit<JupyterContextProps, 'variant'> & {
   colormode?: Colormode;
   disableCssLoading?: boolean;
   theme?: any;
@@ -76,7 +73,9 @@ export const Jupyter = (props: JupyterProps) => {
   return (
     <ErrorBoundary
       FallbackComponent={ErrorFallback}
-      onReset={() => {console.log('Error Boundary reset has been invoked...');}}
+      onReset={() => {
+        console.log('Error Boundary reset has been invoked...');
+      }}
     >
       <ThemeProvider
         theme={theme}
@@ -86,9 +85,9 @@ export const Jupyter = (props: JupyterProps) => {
       >
         <BaseStyles>
           <Box color="fg.default" bg="canvas.default">
-            {!config.insideJupyterLab && !disableCssLoading &&
+            {!config.insideJupyterLab && !disableCssLoading && (
               <JupyterLabCss colormode={colormode} />
-            }
+            )}
             <JupyterContextProvider
               collaborative={collaborative}
               defaultKernelName={defaultKernelName}
@@ -115,6 +114,6 @@ Jupyter.defaultProps = {
   disableCssLoading: false,
   terminals: false,
   theme: jupyterLabTheme,
-}
+};
 
 export default Jupyter;
diff --git a/packages/react/src/jupyter/JupyterConfig.ts b/packages/react/src/jupyter/JupyterConfig.ts
index 3bdd62416..4c8b064b6 100644
--- a/packages/react/src/jupyter/JupyterConfig.ts
+++ b/packages/react/src/jupyter/JupyterConfig.ts
@@ -6,7 +6,11 @@
 
 import { PageConfig } from '@jupyterlab/coreutils';
 import { JupyterProps } from './Jupyter';
-import { DEFAULT_JUPYTER_SERVER_URL, DEFAULT_JUPYTER_SERVER_TOKEN, DEFAULT_API_KERNEL_PREFIX_URL } from './JupyterDefaults';
+import {
+  DEFAULT_JUPYTER_SERVER_URL,
+  DEFAULT_JUPYTER_SERVER_TOKEN,
+  DEFAULT_API_KERNEL_PREFIX_URL,
+} from './JupyterDefaults';
 
 /**
  * Type definition for the Jupyter Configuration.
@@ -33,7 +37,7 @@ let datalayerConfigLoaded = false;
  */
 export const setJupyterServerUrl = (jupyterServerUrl: string) => {
   if (!config) {
-    throw new Error("Jupyter React Config must be loaded first.")
+    throw new Error('Jupyter React Config must be loaded first.');
   }
   PageConfig.setOption('baseUrl', jupyterServerUrl);
   PageConfig.setOption('wsUrl', jupyterServerUrl.replace(/^http/, 'ws'));
@@ -45,17 +49,17 @@ export const setJupyterServerUrl = (jupyterServerUrl: string) => {
  */
 export const getJupyterServerUrl = () => {
   if (!config) {
-    throw new Error("Jupyter React Config must be loaded first.")
+    throw new Error('Jupyter React Config must be loaded first.');
   }
   return config.jupyterServerUrl;
-}
+};
 
 /**
  * Setter for jupyterServerToken.
  */
 export const setJupyterServerToken = (jupyterServerToken: string) => {
   if (!config) {
-    throw new Error("Jupyter React Config must be loaded first.")
+    throw new Error('Jupyter React Config must be loaded first.');
   }
   PageConfig.setOption('token', jupyterServerToken);
   config.jupyterServerToken = jupyterServerToken;
@@ -66,10 +70,10 @@ export const setJupyterServerToken = (jupyterServerToken: string) => {
  */
 export const getJupyterServerToken = () => {
   if (!config) {
-    throw new Error("Jupyter React Config must be loaded first.")
+    throw new Error('Jupyter React Config must be loaded first.');
   }
   return config.jupyterServerToken;
-}
+};
 
 /**
  * Get the datalayer configuration fully
@@ -80,20 +84,21 @@ export const getJupyterServerToken = () => {
  */
 function loadDatalayerConfig(name?: string): any {
   if (!datalayerConfigLoaded) {
-    const datalayerConfigData = document.getElementById('datalayer-config-data');
+    const datalayerConfigData = document.getElementById(
+      'datalayer-config-data'
+    );
     if (datalayerConfigData?.textContent) {
       console.log('Found Datalayer config data in page', datalayerConfigData);
       try {
         config = {
           ...config,
-          ...JSON.parse(datalayerConfigData.textContent)
+          ...JSON.parse(datalayerConfigData.textContent),
         };
         datalayerConfigLoaded = true;
       } catch (error) {
         console.error('Failed to parse the Datalayer configuration.', error);
       }
-    }
-    else {
+    } else {
       console.log('No Datalayer config data found in page');
     }
   }
@@ -130,7 +135,7 @@ export const loadJupyterConfig = (
     jupyterServerToken: jupyterServerToken ?? DEFAULT_JUPYTER_SERVER_TOKEN,
     insideJupyterLab: false,
     insideJupyterHub: false,
-  }
+  };
   // JupyterLab
   const jupyterConfigData = document.getElementById('jupyter-config-data');
   let jupyterConfig = undefined;
@@ -152,24 +157,21 @@ export const loadJupyterConfig = (
       setJupyterServerUrl(
         jupyterServerUrl ??
           jupyterConfig.jupyterServerUrl ??
-            location.protocol + '//' + location.host + jupyterConfig.baseUrl
-      );
-      setJupyterServerToken(
-        jupyterServerToken ?? 
-          jupyterConfig.token ??
-            ''
+          location.protocol + '//' + location.host + jupyterConfig.baseUrl
       );
+      setJupyterServerToken(jupyterServerToken ?? jupyterConfig.token ?? '');
     } else {
       // No Datalayer and no Jupyter config, rely on location...
       setJupyterServerUrl(
         jupyterServerUrl ??
-          config.jupyterServerUrl ?? 
-            location.protocol + '//' + location.host + DEFAULT_API_KERNEL_PREFIX_URL
+          config.jupyterServerUrl ??
+          location.protocol +
+            '//' +
+            location.host +
+            DEFAULT_API_KERNEL_PREFIX_URL
       );
       setJupyterServerToken(
-        jupyterServerToken ??
-          config.jupyterServerToken ?? 
-            ''
+        jupyterServerToken ?? config.jupyterServerToken ?? ''
       );
     }
   }
@@ -184,9 +186,12 @@ export const loadJupyterConfig = (
     PageConfig.setOption('collaborative', String(collaborative));
     PageConfig.setOption('disableRTC', String(!collaborative));
     PageConfig.setOption('terminalsAvailable', String(terminals));
-    PageConfig.setOption('mathjaxUrl', 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js');
+    PageConfig.setOption(
+      'mathjaxUrl',
+      'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js'
+    );
     PageConfig.setOption('mathjaxConfig', 'TeX-AMS_CHTML-full,Safe');
   }
-  console.log('Created config for Jupyter React', config)
+  console.log('Created config for Jupyter React', config);
   return config;
-}
+};
diff --git a/packages/react/src/jupyter/JupyterContext.tsx b/packages/react/src/jupyter/JupyterContext.tsx
index 966f21247..dda66226f 100644
--- a/packages/react/src/jupyter/JupyterContext.tsx
+++ b/packages/react/src/jupyter/JupyterContext.tsx
@@ -5,7 +5,11 @@
  */
 
 import React, { createContext, useContext } from 'react';
-import { Kernel as JupyterKernel, ServerConnection, ServiceManager } from '@jupyterlab/services';
+import {
+  Kernel as JupyterKernel,
+  ServerConnection,
+  ServiceManager,
+} from '@jupyterlab/services';
 import { useJupyterReactStoreFromProps } from '../state';
 import { requestAPI } from './JupyterHandlers';
 import { Lite } from './lite';
@@ -37,7 +41,7 @@ export type JupyterPropsType = {
    * kernel.
    *
    * @example
-   * 
+   *
    * https://cdn.jsdelivr.net/npm/@jupyterlite/pyodide-kernel-extension
    */
   lite?: Lite;
@@ -54,7 +58,7 @@ export type JupyterPropsType = {
   /*
    * Create a serveless Jupyter.
    */
-  serverless?: boolean
+  serverless?: boolean;
   /**
    * Jupyter Service Manager.
    */
@@ -79,12 +83,12 @@ export type JupyterPropsType = {
    * Allow the terminal usage.
    */
   terminals?: boolean;
-}
+};
 
 /**
  * The type for Jupyter context.
  */
-export type JupyterContextType =  {
+export type JupyterContextType = {
   /**
    * Default kernel
    */
@@ -118,7 +122,7 @@ export type JupyterContextType =  {
    * kernel.
    *
    * @example
-   * 
+   *
    * `lite: true` => Load dynamically the package @jupyterlite/pyodide-kernel-extension
    *
    * `lite: import('@jupyterlite/javascript-kernel-extension')` => Load dynamically
@@ -127,7 +131,7 @@ export type JupyterContextType =  {
   /*
    * Create a serveless Jupyter.
    */
-  serverless: boolean
+  serverless: boolean;
   /**
    * Jupyter service manager.
    */
@@ -167,6 +171,10 @@ const JupyterProvider = JupyterContext.Provider;
  */
 export const useJupyter = (props?: JupyterPropsType): JupyterContextType => {
   const context = useContext(JupyterContext);
+  // Always call the hook, but only use its result if there's no context
+  const { jupyterConfig, kernel, kernelIsLoading, serviceManager } =
+    useJupyterReactStoreFromProps(props ?? {});
+
   if (context) {
     // We are within a React Context, just return the JupyterContext.
     // The provided props are irrelevant in this case.
@@ -174,12 +182,6 @@ export const useJupyter = (props?: JupyterPropsType): JupyterContextType => {
   }
   // We are not within a React Context....
   // so create a JupyterContext from the store based on the provided props.
-  const {
-    jupyterConfig,
-    kernel,
-    kernelIsLoading,
-    serviceManager,
-  } = useJupyterReactStoreFromProps(props ?? {});
   const storeContext: JupyterContextType = {
     defaultKernel: kernel,
     jupyterServerUrl: jupyterConfig!.jupyterServerUrl,
@@ -190,7 +192,7 @@ export const useJupyter = (props?: JupyterPropsType): JupyterContextType => {
     serverless: props?.serverless ?? false,
     serverSettings: serviceManager?.serverSettings,
     serviceManager,
-  }
+  };
   return storeContext;
 };
 
@@ -213,7 +215,10 @@ export const ensureJupyterAuth = async (
 /*
  *
  */
-export const createServerSettings = (jupyterServerUrl: string, jupyterServerToken: string) => {
+export const createServerSettings = (
+  jupyterServerUrl: string,
+  jupyterServerToken: string
+) => {
   return ServerConnection.makeSettings({
     baseUrl: jupyterServerUrl,
     wsUrl: jupyterServerUrl.replace(/^http/, 'ws'),
@@ -230,7 +235,7 @@ export const createServerSettings = (jupyterServerUrl: string, jupyterServerToke
 /**
  * The Jupyter context provider.
  */
-export const JupyterContextProvider: React.FC<JupyterContextProps> = (props) => {
+export const JupyterContextProvider: React.FC<JupyterContextProps> = props => {
   const { children, skeleton } = props;
   const {
     jupyterServerUrl,
@@ -255,9 +260,8 @@ export const JupyterContextProvider: React.FC<JupyterContextProps> = (props) =>
         serviceManager,
       }}
     >
-      { kernelIsLoading && skeleton }
-      { children }
+      {kernelIsLoading && skeleton}
+      {children}
     </JupyterProvider>
   );
-
-}
+};
diff --git a/packages/react/src/jupyter/JupyterDefaults.tsx b/packages/react/src/jupyter/JupyterDefaults.tsx
index 15370a0b4..bb15148ff 100644
--- a/packages/react/src/jupyter/JupyterDefaults.tsx
+++ b/packages/react/src/jupyter/JupyterDefaults.tsx
@@ -4,9 +4,11 @@
  * MIT License
  */
 
-export const DEFAULT_JUPYTER_SERVER_URL = 'https://oss.datalayer.run/api/jupyter-server';
+export const DEFAULT_JUPYTER_SERVER_URL =
+  'https://oss.datalayer.run/api/jupyter-server';
 
-export const DEFAULT_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
+export const DEFAULT_JUPYTER_SERVER_TOKEN =
+  '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
 
 /**
  * The URL prefix for the kernel api.
diff --git a/packages/react/src/jupyter/JupyterHandlers.ts b/packages/react/src/jupyter/JupyterHandlers.ts
index 6df8826b2..e12b597b3 100644
--- a/packages/react/src/jupyter/JupyterHandlers.ts
+++ b/packages/react/src/jupyter/JupyterHandlers.ts
@@ -19,7 +19,7 @@ export async function requestAPI<T>(
   serverSettings: ServerConnection.ISettings,
   namespace = 'api',
   endPoint = '',
-  init: RequestInit = {},
+  init: RequestInit = {}
 ): Promise<T> {
   // Make request to the Jupyter API.
   const requestUrl = URLExt.join(serverSettings.baseUrl, namespace, endPoint);
@@ -28,7 +28,7 @@ export async function requestAPI<T>(
     response = await ServerConnection.makeRequest(
       requestUrl,
       init,
-      serverSettings,
+      serverSettings
     );
     if (response.status === 403) {
       throw new JupyterAuthError();
diff --git a/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts b/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts
index f3461ce2f..e70cc9ecb 100644
--- a/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts
+++ b/packages/react/src/jupyter/collaboration/DatalayerCollaboration.ts
@@ -7,12 +7,15 @@
 type IFetchSessionId = {
   url: string;
   token?: string;
-}
+};
 
 /**
  * Fetch the session ID of a collaborative documents from Datalayer.
  */
-export async function requestDatalayerollaborationSessionId({ url, token }: IFetchSessionId): Promise<string> {
+export async function requestDatalayerollaborationSessionId({
+  url,
+  token,
+}: IFetchSessionId): Promise<string> {
   const headers: HeadersInit = {
     Accept: 'application/json',
   };
diff --git a/packages/react/src/jupyter/collaboration/ICollaborative.ts b/packages/react/src/jupyter/collaboration/ICollaborative.ts
index 461a86e52..f89b8982f 100644
--- a/packages/react/src/jupyter/collaboration/ICollaborative.ts
+++ b/packages/react/src/jupyter/collaboration/ICollaborative.ts
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import { ServerConnection } from "@jupyterlab/services";
+import { ServerConnection } from '@jupyterlab/services';
 
 export type IJupyterCollaborationServer = {
   /**
@@ -23,7 +23,7 @@ export type IJupyterCollaborationServer = {
    * Server type
    */
   type: 'datalayer';
-}
+};
 
 export type IDatalayerCollaborationServer = {
   /**
@@ -38,9 +38,11 @@ export type IDatalayerCollaborationServer = {
    * Server type
    */
   type: 'jupyter';
-}
+};
 
-export type ICollaborationServer = IJupyterCollaborationServer | IDatalayerCollaborationServer;
+export type ICollaborationServer =
+  | IJupyterCollaborationServer
+  | IDatalayerCollaborationServer;
 
 export type ICollaborationProvider = 'jupyter' | 'datalayer' | undefined;
 
diff --git a/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts b/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts
index e00ab6dbd..2ea12137a 100644
--- a/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts
+++ b/packages/react/src/jupyter/collaboration/JupyterCollaboration.ts
@@ -40,7 +40,11 @@ export async function requestJupyterCollaborationSession(
   serverSettings?: ServerConnection.ISettings
 ): Promise<ISessionModel> {
   const settings = serverSettings ?? ServerConnection.makeSettings();
-  const url = URLExt.join(settings.baseUrl, COLLABORATION_SESSION_URL_PATH, encodeURIComponent(path));
+  const url = URLExt.join(
+    settings.baseUrl,
+    COLLABORATION_SESSION_URL_PATH,
+    encodeURIComponent(path)
+  );
   const body = {
     method: 'PUT',
     body: JSON.stringify({ format, type }),
diff --git a/packages/react/src/jupyter/ipywidgets/classic/htmlmanager.ts b/packages/react/src/jupyter/ipywidgets/classic/htmlmanager.ts
index 65af67449..70c4ed3dc 100644
--- a/packages/react/src/jupyter/ipywidgets/classic/htmlmanager.ts
+++ b/packages/react/src/jupyter/ipywidgets/classic/htmlmanager.ts
@@ -11,7 +11,10 @@ import { Widget } from '@lumino/widgets';
 import { MessageLoop } from '@lumino/messaging';
 import { WidgetModel, WidgetView, DOMWidgetView } from '@jupyter-widgets/base';
 import { ManagerBase } from '@jupyter-widgets/base-manager';
-import { RenderMimeRegistry, standardRendererFactories } from '@jupyterlab/rendermime';
+import {
+  RenderMimeRegistry,
+  standardRendererFactories,
+} from '@jupyterlab/rendermime';
 import { WidgetRenderer, WIDGET_MIMETYPE } from './output_renderers';
 
 import * as widgets from '@jupyter-widgets/controls';
@@ -33,7 +36,7 @@ export class HTMLManager extends ManagerBase {
       {
         safe: false,
         mimeTypes: [WIDGET_MIMETYPE],
-        createRenderer: (options) => new WidgetRenderer(options, this),
+        createRenderer: options => new WidgetRenderer(options, this),
       },
       0
     );
@@ -41,14 +44,13 @@ export class HTMLManager extends ManagerBase {
     this._viewList = new Set<DOMWidgetView>();
 
     window.addEventListener('resize', () => {
-      this._viewList.forEach((view) => {
+      this._viewList.forEach(view => {
         MessageLoop.postMessage(
           view.luminoWidget,
           Widget.ResizeMessage.UnknownSize
         );
       });
     });
-
   }
 
   /**
@@ -78,13 +80,12 @@ export class HTMLManager extends ManagerBase {
     v.once('remove', () => {
       this._viewList.delete(v);
     });
-
   }
 
   /**
    * Placeholder implementation for _get_comm_info.
    */
-  _get_comm_info(): Promise<{}> {
+  _get_comm_info(): Promise<Record<string, unknown>> {
     return Promise.resolve({});
   }
 
@@ -131,7 +132,7 @@ export class HTMLManager extends ManagerBase {
       } else {
         reject(`Could not load module ${moduleName}@${moduleVersion}`);
       }
-    }).then((module) => {
+    }).then(module => {
       if ((module as any)[className]) {
         return (module as any)[className];
       } else {
@@ -155,5 +156,4 @@ export class HTMLManager extends ManagerBase {
   loader:
     | ((moduleName: string, moduleVersion: string) => Promise<any>)
     | undefined;
-
 }
diff --git a/packages/react/src/jupyter/ipywidgets/classic/manager.ts b/packages/react/src/jupyter/ipywidgets/classic/manager.ts
index c5f83d7ee..c2cf40eaa 100644
--- a/packages/react/src/jupyter/ipywidgets/classic/manager.ts
+++ b/packages/react/src/jupyter/ipywidgets/classic/manager.ts
@@ -45,7 +45,8 @@ export class ClassicWidgetManager extends HTMLManager {
     const cdnOnlyScript = document.createElement('script');
     cdnOnlyScript.setAttribute('data-jupyter-widgets-cdn-only', 'true');
     document.body.appendChild(cdnOnlyScript);
-    requireJsScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';
+    requireJsScript.src =
+      'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';
     document.body.appendChild(requireJsScript);
     requireJsScript.onload = () => {
       (window as any).define('@jupyter-widgets/base', base);
@@ -65,7 +66,7 @@ export class ClassicWidgetManager extends HTMLManager {
         version: controls.JUPYTER_CONTROLS_VERSION,
         exports: () => import('@jupyter-widgets/controls') as any,
       });
-    };  
+    };
   }
 
   /**
diff --git a/packages/react/src/jupyter/ipywidgets/lab/manager.ts b/packages/react/src/jupyter/ipywidgets/lab/manager.ts
index 7a7b2144d..fb2788b4d 100644
--- a/packages/react/src/jupyter/ipywidgets/lab/manager.ts
+++ b/packages/react/src/jupyter/ipywidgets/lab/manager.ts
@@ -97,8 +97,8 @@ export abstract class LabWidgetManager
     if (kernelConnection) {
       kernelConnection.registerCommTarget(
         this.comm_target_name,
-        this._handleCommOpen,
-      );  
+        this._handleCommOpen
+      );
     }
   }
 
@@ -324,7 +324,7 @@ export abstract class LabWidgetManager
     super.register_model(model_id, modelPromise);
 
     // Update the synchronous model map
-    modelPromise.then((model) => {
+    modelPromise.then(model => {
       this._modelsSync.set(model_id, model);
       model.once('comm:close', () => {
         this._modelsSync.delete(model_id);
@@ -413,7 +413,6 @@ export class KernelWidgetManager extends LabWidgetManager {
     });
 
     this.restoreWidgets();
-
   }
 
   _handleKernelConnectionStatusChange(status: Kernel.ConnectionStatus): void {
@@ -486,9 +485,11 @@ export class WidgetManager extends LabWidgetManager {
       this._handleKernelStatusChange(args);
     });
 
-    this._context.sessionContext.connectionStatusChanged.connect((sender, args) => {
-      this._handleKernelConnectionStatusChange(args);
-    });
+    this._context.sessionContext.connectionStatusChanged.connect(
+      (sender, args) => {
+        this._handleKernelConnectionStatusChange(args);
+      }
+    );
 
     if (this._context.sessionContext.session?.kernel) {
       this._handleKernelChanged({
@@ -545,11 +546,9 @@ export class WidgetManager extends LabWidgetManager {
     notebook: INotebookModel,
     { loadKernel, loadNotebook } = { loadKernel: true, loadNotebook: true }
   ): Promise<void> {
-
-   await this.context.sessionContext.ready;
+    await this.context.sessionContext.ready;
 
     try {
-
       if (loadKernel) {
         try {
           this._kernelRestoreInProgress = true;
diff --git a/packages/react/src/jupyter/ipywidgets/lab/renderer.ts b/packages/react/src/jupyter/ipywidgets/lab/renderer.ts
index f46aa59f9..dd6279598 100644
--- a/packages/react/src/jupyter/ipywidgets/lab/renderer.ts
+++ b/packages/react/src/jupyter/ipywidgets/lab/renderer.ts
@@ -38,7 +38,6 @@ export class WidgetLabRenderer
   }
 
   async renderModel(model: IRenderMime.IMimeModel): Promise<void> {
-
     const source: any = model.data[this.mimeType];
 
     // Let's be optimistic, and hope the widget state will come later.
@@ -58,8 +57,9 @@ export class WidgetLabRenderer
     } catch (err) {
       if (manager.restoredStatus) {
         // The manager has been restored, so this error won't be going away.
-//        this.node.textContent = 'Error displaying widget: model not found';
-        this.node.textContent = 'Please run the cell to display the IPyWidgets.';
+        //        this.node.textContent = 'Error displaying widget: model not found';
+        this.node.textContent =
+          'Please run the cell to display the IPyWidgets.';
         this.addClass('jupyter-widgets');
         console.error(err);
         return;
diff --git a/packages/react/src/jupyter/ipywidgets/libembed-amd.ts b/packages/react/src/jupyter/ipywidgets/libembed-amd.ts
index 797d94ef3..f94b31742 100644
--- a/packages/react/src/jupyter/ipywidgets/libembed-amd.ts
+++ b/packages/react/src/jupyter/ipywidgets/libembed-amd.ts
@@ -17,7 +17,8 @@ let CDN_ONLY = true;
 const scripts = document.getElementsByTagName('script');
 Array.prototype.forEach.call(scripts, (script: HTMLScriptElement) => {
   CDN_URL = script.getAttribute('data-jupyter-widgets-cdn') || CDN_URL;
-  CDN_ONLY = CDN_ONLY && Boolean(script.getAttribute('data-jupyter-widgets-cdn-only')!);
+  CDN_ONLY =
+    CDN_ONLY && Boolean(script.getAttribute('data-jupyter-widgets-cdn-only')!);
 });
 
 /**
@@ -54,7 +55,7 @@ function moduleNameToCDNUrl(moduleName: string, moduleVersion: string): string {
   }
   if (packageName === '@widgetti/jupyter-react') {
     // @widgetti/jupyter-react:0.4.2 is not published on https://www.jsdelivr.com/package/npm/@widgetti/jupyter-react
-    moduleVersion = moduleVersion.replace('0.4.2', '0.4.1')
+    moduleVersion = moduleVersion.replace('0.4.2', '0.4.1');
   }
   // jupyter-react@0.4.1
   return `${CDN_URL}${packageName}@${moduleVersion}/dist/${fileName}`;
@@ -92,11 +93,13 @@ export function requireLoader(
     console.log(`Loading from ${CDN_URL} for ${moduleName}@${moduleVersion}`);
     return loadFromCDN();
   }
-  return requirePromise([`${moduleName}`]).catch((err) => {
+  return requirePromise([`${moduleName}`]).catch(err => {
     const failedId = err.requireModules && err.requireModules[0];
     if (failedId) {
       require.undef(failedId);
-      console.log(`Falling back to ${CDN_URL} for ${moduleName}@${moduleVersion}`);
+      console.log(
+        `Falling back to ${CDN_URL} for ${moduleName}@${moduleVersion}`
+      );
       return loadFromCDN();
     }
   });
@@ -116,10 +119,10 @@ export function renderWidgets(
     moduleVersion: string
   ) => Promise<any> = requireLoader
 ): void {
-  requirePromise(['./classic/htmlmanager']).then((htmlmanager) => {
+  requirePromise(['./classic/htmlmanager']).then(htmlmanager => {
     const managerFactory = (): any => {
       return new htmlmanager.HTMLManager({ loader: loader });
     };
     libembed.renderWidgets(managerFactory, element);
   });
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/jupyter/ipywidgets/libembed.ts b/packages/react/src/jupyter/ipywidgets/libembed.ts
index fe42a3f60..6aa7146c9 100644
--- a/packages/react/src/jupyter/ipywidgets/libembed.ts
+++ b/packages/react/src/jupyter/ipywidgets/libembed.ts
@@ -8,7 +8,8 @@
 // Distributed under the terms of the Modified BSD License.
 
 declare let __webpack_public_path__: string;
-__webpack_public_path__ = (window as any).__jupyter_widgets_assets_path__ || __webpack_public_path__;
+__webpack_public_path__ =
+  (window as any).__jupyter_widgets_assets_path__ || __webpack_public_path__;
 
 /*
 import '@fortawesome/fontawesome-free/css/all.min.css';
@@ -51,7 +52,7 @@ export async function renderWidgets(
     'script[type="application/vnd.jupyter.widget-state+json"]'
   );
   await Promise.all(
-    Array.from(tags).map(async (t) =>
+    Array.from(tags).map(async t =>
       renderManager(element, JSON.parse(t.innerHTML), managerFactory)
     )
   );
@@ -87,14 +88,14 @@ async function renderManager(
     'script[type="application/vnd.jupyter.widget-view+json"]'
   );
   await Promise.all(
-    Array.from(tags).map(async (viewtag) => {
+    Array.from(tags).map(async viewtag => {
       const widgetViewObject = JSON.parse(viewtag.innerHTML);
       const valid = view_validate(widgetViewObject);
       if (!valid) {
         throw new Error(`View state has errors: ${view_validate.errors}`);
       }
       const model_id: string = (widgetViewObject as any).model_id;
-      const model = models.find((item) => item.model_id == model_id);
+      const model = models.find(item => item.model_id == model_id);
       if (model !== undefined && viewtag.parentElement !== null) {
         const prev = viewtag.previousElementSibling;
         if (
diff --git a/packages/react/src/jupyter/ipywidgets/mimetypes.ts b/packages/react/src/jupyter/ipywidgets/mimetypes.ts
index c6b01297c..d5816f865 100644
--- a/packages/react/src/jupyter/ipywidgets/mimetypes.ts
+++ b/packages/react/src/jupyter/ipywidgets/mimetypes.ts
@@ -12,4 +12,5 @@ export const WIDGET_VIEW_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
 /**
  * The mime type for widget state data.
  */
-export const WIDGET_STATE_MIMETYPE = 'application/vnd.jupyter.widget-state+json';
+export const WIDGET_STATE_MIMETYPE =
+  'application/vnd.jupyter.widget-state+json';
diff --git a/packages/react/src/jupyter/ipywidgets/semvercache.ts b/packages/react/src/jupyter/ipywidgets/semvercache.ts
index 4b5bebc06..cb6d3f8c7 100644
--- a/packages/react/src/jupyter/ipywidgets/semvercache.ts
+++ b/packages/react/src/jupyter/ipywidgets/semvercache.ts
@@ -32,12 +32,12 @@ export class SemVerCache<T> {
     }
   }
 
-  getAllVersions(key: string): { [version: string]: any; } | undefined {
+  getAllVersions(key: string): { [version: string]: any } | undefined {
     if (key in this._cache) {
       return this._cache[key];
     }
   }
 
-  private _cache: { [key: string]: { [version: string]: T } } = Object.create(null);
-
+  private _cache: { [key: string]: { [version: string]: T } } =
+    Object.create(null);
 }
diff --git a/packages/react/src/jupyter/kernel/Kernel.ts b/packages/react/src/jupyter/kernel/Kernel.ts
index 13c08f6c0..7c787011b 100755
--- a/packages/react/src/jupyter/kernel/Kernel.ts
+++ b/packages/react/src/jupyter/kernel/Kernel.ts
@@ -65,7 +65,10 @@ export class Kernel {
     this.requestKernel(kernelModel, path);
   }
 
-  private async requestKernel(kernelModel?: JupyterKernel.IModel, propsPath?: string): Promise<void> {
+  private async requestKernel(
+    kernelModel?: JupyterKernel.IModel,
+    propsPath?: string
+  ): Promise<void> {
     await this._kernelManager.ready;
     await this._sessionManager.ready;
     if (kernelModel) {
@@ -75,7 +78,10 @@ export class Kernel {
         return kernelModel.id === model.id;
       });
       if (existingKernelModel) {
-        console.log('Creating a session to an existing Jupyter Kernel model.', existingKernelModel);
+        console.log(
+          'Creating a session to an existing Jupyter Kernel model.',
+          existingKernelModel
+        );
         const path = 'kernel-' + kernelModel.id;
         this._path = path;
         this._session = await this._sessionManager.startNew(
@@ -83,7 +89,10 @@ export class Kernel {
             name: existingKernelModel.name,
             path: path,
             type: 'notebook',
-            kernel: existingKernelModel as Partial<JupyterKernel.IModel & Omit<JupyterKernel.IKernelOptions, 'kernelType'>>,
+            kernel: existingKernelModel as Partial<
+              JupyterKernel.IModel &
+                Omit<JupyterKernel.IKernelOptions, 'kernelType'>
+            >,
           },
           {
             kernelConnectionOptions: {
@@ -92,7 +101,10 @@ export class Kernel {
           }
         );
       } else {
-        console.log('Something is wrong... can not find an existing model for', kernelModel);
+        console.log(
+          'Something is wrong... can not find an existing model for',
+          kernelModel
+        );
         return;
       }
     } else {
@@ -102,7 +114,8 @@ export class Kernel {
         document.cookie = this.cookieName + '=' + path;
       }
       this._path = path;
-      this._session = await this._sessionManager.startNew({
+      this._session = await this._sessionManager.startNew(
+        {
           name: this._kernelName,
           path: this._path,
           type: this._kernelType,
@@ -129,10 +142,12 @@ export class Kernel {
       this._sessionId = this._session.id;
       this._connectionStatus = this._kernelConnection.connectionStatus;
       updateConnectionStatus();
-      this._kernelConnection.connectionStatusChanged.connect((_, connectionStatus) => {
-        this._connectionStatus = connectionStatus;
-        updateConnectionStatus();
-      });
+      this._kernelConnection.connectionStatusChanged.connect(
+        (_, connectionStatus) => {
+          this._connectionStatus = connectionStatus;
+          updateConnectionStatus();
+        }
+      );
       this._kernelConnection.info.then(info => {
         this._info = info;
         console.log('Kernel Information.', info);
@@ -282,7 +297,6 @@ export class Kernel {
   toString() {
     return `id:${this.id} - client_id:${this.clientId} - session_id:${this.sessionId} - path:${this._path}`;
   }
-
 }
 
 export namespace Kernel {
diff --git a/packages/react/src/jupyter/kernel/KernelExecutor.ts b/packages/react/src/jupyter/kernel/KernelExecutor.ts
index 52a89011e..4c42a785d 100644
--- a/packages/react/src/jupyter/kernel/KernelExecutor.ts
+++ b/packages/react/src/jupyter/kernel/KernelExecutor.ts
@@ -342,18 +342,20 @@ export class KernelExecutor {
           });
         }
         break;
-      case 'clear_output':
+      case 'clear_output': {
         const wait = (message as IClearOutputMsg).content.wait;
         this._model.clear(wait);
         break;
-      case 'update_display_data':
+      }
+      case 'update_display_data': {
         this._outputs.push(message.content as IDisplayUpdate);
         this._outputsChanged.emit(this._outputs);
         // FIXME this needs more advanced analysis see OutputArea
         this._model.add(output);
         this._modelChanged.emit(this._model);
         break;
-      case 'status':
+      }
+      case 'status': {
         const executionState = (message.content as any)
           .execution_state as KernelMessage.Status;
         const connectionStatus = this._kernelConnection.connectionStatus;
@@ -363,6 +365,7 @@ export class KernelExecutor {
           kernelState
         );
         break;
+      }
       default:
         break;
     }
diff --git a/packages/react/src/jupyter/kernel/KernelState.ts b/packages/react/src/jupyter/kernel/KernelState.ts
index 9853ae233..8d134c55b 100644
--- a/packages/react/src/jupyter/kernel/KernelState.ts
+++ b/packages/react/src/jupyter/kernel/KernelState.ts
@@ -6,7 +6,7 @@
 
 import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
-import {ExecutionState } from './../../components/kernel/Kernelndicator';
+import { ExecutionState } from './../../components/kernel/Kernelndicator';
 
 export enum ExecutionPhase {
   ready_to_run = 'READY_TO_RUN',
@@ -46,10 +46,10 @@ export const kernelsStore = createStore<KernelsState>((set, get) => ({
     } else {
       kernels.set(id, {
         id,
-        executionState: executionState
+        executionState: executionState,
       });
     }
-    set((state: KernelsState) => ({ kernels }))
+    set((state: KernelsState) => ({ kernels }));
   },
   getExecutionPhase: (id: string) => {
     return get().kernels.get(id)?.executionPhase;
@@ -65,7 +65,7 @@ export const kernelsStore = createStore<KernelsState>((set, get) => ({
         executionPhase,
       });
     }
-    set((state: KernelsState) => ({ kernels }))
+    set((state: KernelsState) => ({ kernels }));
   },
 }));
 
diff --git a/packages/react/src/jupyter/lite/LiteServer.ts b/packages/react/src/jupyter/lite/LiteServer.ts
index c097c4d3e..29bead860 100644
--- a/packages/react/src/jupyter/lite/LiteServer.ts
+++ b/packages/react/src/jupyter/lite/LiteServer.ts
@@ -4,13 +4,18 @@
  * MIT License
  */
 
-import { JupyterLiteServer, JupyterLiteServerPlugin } from '@jupyterlite/server';
+import {
+  JupyterLiteServer,
+  JupyterLiteServerPlugin,
+} from '@jupyterlite/server';
 import { PageConfig } from '@jupyterlab/coreutils';
 
 /**
  * Iterate over active plugins in an extension.
  */
-function* activePlugins(extension: any): Generator<JupyterLiteServerPlugin<any>> {
+function* activePlugins(
+  extension: any
+): Generator<JupyterLiteServerPlugin<any>> {
   // Handle commonjs or es2015 modules.
   let exports;
   // eslint-disable-next-line no-prototype-builtins
diff --git a/packages/react/src/jupyter/renderers/index.ts b/packages/react/src/jupyter/renderers/index.ts
index fa93ff606..f0e6495cc 100644
--- a/packages/react/src/jupyter/renderers/index.ts
+++ b/packages/react/src/jupyter/renderers/index.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-export * from './plotly';
\ No newline at end of file
+export * from './plotly';
diff --git a/packages/react/src/jupyter/renderers/plotly/index.ts b/packages/react/src/jupyter/renderers/plotly/index.ts
index 1474e708a..a14705208 100644
--- a/packages/react/src/jupyter/renderers/plotly/index.ts
+++ b/packages/react/src/jupyter/renderers/plotly/index.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-export * from './PlotlyRenderer';
\ No newline at end of file
+export * from './PlotlyRenderer';
diff --git a/packages/react/src/jupyter/services/JupyterServices.ts b/packages/react/src/jupyter/services/JupyterServices.ts
index 0f7dc7042..b6e0691c1 100644
--- a/packages/react/src/jupyter/services/JupyterServices.ts
+++ b/packages/react/src/jupyter/services/JupyterServices.ts
@@ -5,7 +5,7 @@
  */
 
 import { ServiceManager } from '@jupyterlab/services';
-import { IManager as IKernelspecManager} from '@jupyterlab/services/lib/kernelspec/kernelspec';
+import { IManager as IKernelspecManager } from '@jupyterlab/services/lib/kernelspec/kernelspec';
 import { IManager as ISessionManager } from '@jupyterlab/services/lib/session/session';
 import { IManager as ITerminaManager } from '@jupyterlab/services/lib/terminal/terminal';
 
diff --git a/packages/react/src/jupyter/services/ServiceManagerLess.ts b/packages/react/src/jupyter/services/ServiceManagerLess.ts
index 496c8dea1..a1451fb1a 100644
--- a/packages/react/src/jupyter/services/ServiceManagerLess.ts
+++ b/packages/react/src/jupyter/services/ServiceManagerLess.ts
@@ -5,14 +5,42 @@
  */
 
 import {
-  Builder, Contents, Event, IManager, NbConvert, NbConvertManager, ServerConnection,
-  ServiceManager, Setting, User, Workspace, SettingManager, WorkspaceManager,
+  Builder,
+  Contents,
+  Event,
+  IManager,
+  NbConvert,
+  NbConvertManager,
+  ServerConnection,
+  ServiceManager,
+  Setting,
+  User,
+  Workspace,
+  SettingManager,
+  WorkspaceManager,
 } from '@jupyterlab/services';
 import { BuildManager } from '@jupyterlab/services/lib/builder';
-import { IKernelConnection, IManager as IKernelManager, IModel } from '@jupyterlab/services/lib/kernel/kernel';
-import { IManager as IKernelspecManager, ISpecModels} from '@jupyterlab/services/lib/kernelspec/kernelspec';
-import {IModel as ISessionModel, ISessionConnection, IManager as ISessionManager, ISessionOptions } from '@jupyterlab/services/lib/session/session';
-import { IModel as ITerminalModel, IManager as ITerminaManager, ITerminal, ITerminalConnection } from '@jupyterlab/services/lib/terminal/terminal';
+import {
+  IKernelConnection,
+  IManager as IKernelManager,
+  IModel,
+} from '@jupyterlab/services/lib/kernel/kernel';
+import {
+  IManager as IKernelspecManager,
+  ISpecModels,
+} from '@jupyterlab/services/lib/kernelspec/kernelspec';
+import {
+  IModel as ISessionModel,
+  ISessionConnection,
+  IManager as ISessionManager,
+  ISessionOptions,
+} from '@jupyterlab/services/lib/session/session';
+import {
+  IModel as ITerminalModel,
+  IManager as ITerminaManager,
+  ITerminal,
+  ITerminalConnection,
+} from '@jupyterlab/services/lib/terminal/terminal';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { PromiseDelegate, ReadonlyJSONObject } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
@@ -55,7 +83,8 @@ const WORKSPACE = JSON.parse(WORKSPACE_JSON) as Workspace.IWorkspace;
 
 export class TerminalManagerLess implements ITerminaManager {
   runningChanged: ISignal<ITerminaManager, ITerminalModel[]> = new Signal(this);
-  connectionFailure: ISignal<ITerminaManager, ServerConnection.NetworkError> = new Signal(this);
+  connectionFailure: ISignal<ITerminaManager, ServerConnection.NetworkError> =
+    new Signal(this);
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
   serverSettings: ServerConnection.ISettings;
@@ -71,10 +100,14 @@ export class TerminalManagerLess implements ITerminaManager {
   running(): IterableIterator<ISessionModel> {
     return [].values();
   }
-  startNew(options?: ITerminal.IOptions | undefined): Promise<ITerminalConnection> {
+  startNew(
+    options?: ITerminal.IOptions | undefined
+  ): Promise<ITerminalConnection> {
     return Promise.resolve({} as unknown as ITerminalConnection);
   }
-  connectTo(options: Omit<ITerminalConnection.IOptions, 'serverSettings'>): ITerminalConnection {
+  connectTo(
+    options: Omit<ITerminalConnection.IOptions, 'serverSettings'>
+  ): ITerminalConnection {
     return {} as unknown as ITerminalConnection;
   }
   shutdown(name: string): Promise<void> {
@@ -90,14 +123,15 @@ export class TerminalManagerLess implements ITerminaManager {
 }
 
 export class ContentsManagerLess implements Contents.IManager {
-  fileChanged: ISignal<Contents.IManager, Contents.IChangedArgs> = new Signal(this);
+  fileChanged: ISignal<Contents.IManager, Contents.IChangedArgs> = new Signal(
+    this
+  );
   isDisposed: boolean = false;
   serverSettings: ServerConnection.ISettings;
   constructor(serverSettings: ServerConnection.ISettings) {
     this.serverSettings = serverSettings;
   }
-  addDrive(drive: Contents.IDrive): void {
-  }
+  addDrive(drive: Contents.IDrive): void {}
   localPath(path: string): string {
     return path;
   }
@@ -108,18 +142,23 @@ export class ContentsManagerLess implements Contents.IManager {
     return root + path;
   }
   driveName(path: string): string {
-    return "";
+    return '';
   }
   getSharedModelFactory(path: string): Contents.ISharedFactory | null {
     return null;
   }
-  get(path: string, options?: Contents.IFetchOptions | undefined): Promise<Contents.IModel> {
+  get(
+    path: string,
+    options?: Contents.IFetchOptions | undefined
+  ): Promise<Contents.IModel> {
     return new Promise(() => {});
   }
   getDownloadUrl(path: string): Promise<string> {
     return new Promise(() => {});
   }
-  newUntitled(options?: Contents.ICreateOptions | undefined): Promise<Contents.IModel> {
+  newUntitled(
+    options?: Contents.ICreateOptions | undefined
+  ): Promise<Contents.IModel> {
     return new Promise(() => {});
   }
   delete(path: string): Promise<void> {
@@ -128,7 +167,10 @@ export class ContentsManagerLess implements Contents.IManager {
   rename(path: string, newPath: string): Promise<Contents.IModel> {
     return new Promise(() => {});
   }
-  save(path: string, options?: Partial<Contents.IModel> | undefined): Promise<Contents.IModel> {
+  save(
+    path: string,
+    options?: Partial<Contents.IModel> | undefined
+  ): Promise<Contents.IModel> {
     return new Promise(() => {});
   }
   copy(path: string, toDir: string): Promise<Contents.IModel> {
@@ -151,7 +193,8 @@ export class ContentsManagerLess implements Contents.IManager {
 
 export class KernelManagerLess implements IKernelManager {
   runningChanged: ISignal<IKernelManager, IModel[]> = new Signal(this);
-  connectionFailure: ISignal<IKernelManager, ServerConnection.NetworkError> = new Signal(this);
+  connectionFailure: ISignal<IKernelManager, ServerConnection.NetworkError> =
+    new Signal(this);
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
   serverSettings: ServerConnection.ISettings;
@@ -168,14 +211,19 @@ export class KernelManagerLess implements IKernelManager {
   refreshRunning(): Promise<void> {
     return new Promise(() => {});
   }
-  startNew(createOptions?: Partial<Pick<IModel, 'name'>> | undefined, connectOptions?: Omit<IKernelConnection.IOptions, 'serverSettings' | 'model'> | undefined): Promise<IKernelConnection> {
+  startNew(
+    createOptions?: Partial<Pick<IModel, 'name'>> | undefined,
+    connectOptions?:
+      | Omit<IKernelConnection.IOptions, 'serverSettings' | 'model'>
+      | undefined
+  ): Promise<IKernelConnection> {
     return new Promise(() => {});
   }
   findById(id: string): Promise<IModel | undefined> {
     return new Promise(() => {});
   }
   connectTo(options: IKernelConnection.IOptions): IKernelConnection {
-    return "" as any;
+    return '' as any;
   }
   shutdown(id: string): Promise<void> {
     return new Promise(() => {});
@@ -189,7 +237,8 @@ export class KernelManagerLess implements IKernelManager {
 export class KernelspecManagerLess implements IKernelspecManager {
   specsChanged: ISignal<IKernelspecManager, ISpecModels> = new Signal(this);
   specs: ISpecModels | null = null;
-  connectionFailure: ISignal<IManager, ServerConnection.NetworkError> = new Signal(this);
+  connectionFailure: ISignal<IManager, ServerConnection.NetworkError> =
+    new Signal(this);
   serverSettings: ServerConnection.ISettings;
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
@@ -207,7 +256,8 @@ export class KernelspecManagerLess implements IKernelspecManager {
 
 export class SessionManagerLess implements ISessionManager {
   runningChanged: ISignal<this, ISessionModel[]> = new Signal(this);
-  connectionFailure: ISignal<ISessionManager, ServerConnection.NetworkError> = new Signal(this);
+  connectionFailure: ISignal<ISessionManager, ServerConnection.NetworkError> =
+    new Signal(this);
   serverSettings?: ServerConnection.ISettings | undefined;
   isReady: boolean = true;
   isDisposed: boolean = false;
@@ -218,7 +268,15 @@ export class SessionManagerLess implements ISessionManager {
   running(): IterableIterator<ISessionModel> {
     return [].values();
   }
-  startNew(createOptions: ISessionOptions, connectOptions?: Omit<ISessionConnection.IOptions, 'serverSettings' | 'model' | 'connectToKernel'> | undefined): Promise<ISessionConnection> {
+  startNew(
+    createOptions: ISessionOptions,
+    connectOptions?:
+      | Omit<
+          ISessionConnection.IOptions,
+          'serverSettings' | 'model' | 'connectToKernel'
+        >
+      | undefined
+  ): Promise<ISessionConnection> {
     return new Promise(() => {});
   }
   findById(id: string): Promise<ISessionModel | undefined> {
@@ -227,8 +285,13 @@ export class SessionManagerLess implements ISessionManager {
   findByPath(path: string): Promise<ISessionModel | undefined> {
     return new Promise(() => {});
   }
-  connectTo(options: Omit<ISessionConnection.IOptions, 'serverSettings' | 'connectToKernel'>): ISessionConnection {
-    return "" as any;
+  connectTo(
+    options: Omit<
+      ISessionConnection.IOptions,
+      'serverSettings' | 'connectToKernel'
+    >
+  ): ISessionConnection {
+    return '' as any;
   }
   shutdown(id: string): Promise<void> {
     return new Promise(() => {});
@@ -251,7 +314,7 @@ export class BuilderManagerLess {
     this.serverSettings = serverSettings;
   }
   get isAvailable(): boolean {
-    return true
+    return true;
   }
   get shouldCheck(): boolean {
     return false;
@@ -267,7 +330,10 @@ export class BuilderManagerLess {
   }
 }
 
-export class SettingManagerLess extends SettingManager implements Setting.IManager {
+export class SettingManagerLess
+  extends SettingManager
+  implements Setting.IManager
+{
   serverSettings: ServerConnection.ISettings;
   constructor(serverSettings: ServerConnection.ISettings) {
     super({ serverSettings });
@@ -291,7 +357,9 @@ export class SettingManagerLess extends SettingManager implements Setting.IManag
     */
     return super.fetch(id);
   }
-  list(query?: 'ids' | undefined): Promise<{ ids: string[]; values: ISettingRegistry.IPlugin[]; }> {
+  list(
+    query?: 'ids' | undefined
+  ): Promise<{ ids: string[]; values: ISettingRegistry.IPlugin[] }> {
     /*
     const PLUGIN: ISettingRegistry.IPlugin = {
       id: 'id',
@@ -313,11 +381,11 @@ export class SettingManagerLess extends SettingManager implements Setting.IManag
     return super.list(query);
   }
   save(id: string, raw: string): Promise<void> {
-//    return super.save(id, raw);
+    //    return super.save(id, raw);
     return new Promise(() => {});
   }
   remove(id: string): Promise<any> {
-//    return super.remove(id);
+    //    return super.remove(id);
     return new Promise(() => {});
   }
 }
@@ -326,7 +394,8 @@ export class UserManagerLess implements User.IManager {
   userChanged: ISignal<this, User.IUser> = new Signal(this);
   identity: User.IIdentity | null = null;
   permissions: ReadonlyJSONObject | null = null;
-  connectionFailure: ISignal<IManager, ServerConnection.NetworkError> = new Signal(this);
+  connectionFailure: ISignal<IManager, ServerConnection.NetworkError> =
+    new Signal(this);
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
   isActive: boolean = true;
@@ -355,39 +424,45 @@ export class EventsManagerLess implements Event.IManager {
   dispose(): void {}
 }
 
-export class WorkspaceManagerLess extends WorkspaceManager implements Workspace.IManager {
+export class WorkspaceManagerLess
+  extends WorkspaceManager
+  implements Workspace.IManager
+{
   serverSettings: ServerConnection.ISettings;
   constructor(serverSettings: ServerConnection.ISettings) {
     super({ serverSettings });
     this.serverSettings = serverSettings;
   }
   fetch(id: string): Promise<Workspace.IWorkspace> {
-//    return new Promise(() => {});
-//    return super.fetch(id);
-    return new Promise<Workspace.IWorkspace>((resolve) => resolve(WORKSPACE));
-}
-  list(): Promise<{ ids: string[]; values: Workspace.IWorkspace[]; }> {
-//    return new Promise(() => {});
-//    return super.list()
+    //    return new Promise(() => {});
+    //    return super.fetch(id);
+    return new Promise<Workspace.IWorkspace>(resolve => resolve(WORKSPACE));
+  }
+  list(): Promise<{ ids: string[]; values: Workspace.IWorkspace[] }> {
+    //    return new Promise(() => {});
+    //    return super.list()
     const w = {
-      ids: ["1"],
+      ids: ['1'],
       values: [WORKSPACE],
-    }
-    return new Promise<{ ids: string[]; values: Workspace.IWorkspace[]; }>((resolve) => resolve(w));
+    };
+    return new Promise<{ ids: string[]; values: Workspace.IWorkspace[] }>(
+      resolve => resolve(w)
+    );
   }
   remove(id: string): Promise<void> {
-//    return new Promise(() => {});
+    //    return new Promise(() => {});
     return super.remove(id);
   }
   save(id: string, workspace: Workspace.IWorkspace): Promise<void> {
-//    return new Promise(() => {});
+    //    return new Promise(() => {});
     return super.save(id, workspace);
   }
 }
 
 export class NbConvertManagerLess {
   serverSettings: ServerConnection.ISettings;
-  protected _requestingFormats: PromiseDelegate<NbConvertManager.IExportFormats> | null = null;
+  protected _requestingFormats: PromiseDelegate<NbConvertManager.IExportFormats> | null =
+    null;
   protected _exportFormats: NbConvertManager.IExportFormats | null = null;
   constructor(serverSettings: ServerConnection.ISettings) {
     this.serverSettings = serverSettings;
@@ -395,13 +470,15 @@ export class NbConvertManagerLess {
   protected fetchExportFormats(): Promise<NbConvertManager.IExportFormats> {
     return new Promise(() => {});
   }
-  protected getExportFormats(force?: boolean | undefined): Promise<NbConvertManager.IExportFormats> {
+  protected getExportFormats(
+    force?: boolean | undefined
+  ): Promise<NbConvertManager.IExportFormats> {
     return new Promise(() => {});
   }
 }
 
 export class ServiceManagerLess implements ServiceManager.IManager {
-  __NAME__ = "LessServiceManager";
+  __NAME__ = 'LessServiceManager';
   isReady: boolean = true;
   ready: Promise<void> = Promise.resolve(void 0);
   isDisposed: boolean = false;
@@ -419,27 +496,34 @@ export class ServiceManagerLess implements ServiceManager.IManager {
   workspaces: Workspace.IManager;
   nbconvert: NbConvert.IManager;
   constructor(serverSettings?: ServerConnection.ISettings) {
-    this.serverSettings = serverSettings ?? ServerConnection.makeSettings({
-      baseUrl: 'https://oss.datalayer.run/api/jupyter-server',
-      wsUrl: 'wss://oss.datalayer.run/api/jupyter-server',
-      token: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
-    });
+    this.serverSettings =
+      serverSettings ??
+      ServerConnection.makeSettings({
+        baseUrl: 'https://oss.datalayer.run/api/jupyter-server',
+        wsUrl: 'wss://oss.datalayer.run/api/jupyter-server',
+        token:
+          '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
+      });
     this.contents = new ContentsManagerLess(this.serverSettings);
     this.kernels = new KernelManagerLess(this.serverSettings);
     this.kernelspecs = new KernelspecManagerLess(this.serverSettings);
     this.sessions = new SessionManagerLess(this.serverSettings);
     this.settings = new SettingManagerLess(this.serverSettings);
     this.terminals = new TerminalManagerLess(this.serverSettings);
-    this.user = new UserManagerLess(this.serverSettings)
-    this.builder = new BuilderManagerLess(this.serverSettings) as Builder.IManager;
+    this.user = new UserManagerLess(this.serverSettings);
+    this.builder = new BuilderManagerLess(
+      this.serverSettings
+    ) as Builder.IManager;
     this.events = new EventsManagerLess(this.serverSettings);
     this.workspaces = new WorkspaceManagerLess(this.serverSettings);
-    this.nbconvert = new NbConvertManagerLess(this.serverSettings) as unknown as NbConvert.IManager;
+    this.nbconvert = new NbConvertManagerLess(
+      this.serverSettings
+    ) as unknown as NbConvert.IManager;
   }
   dispose(): void {}
   get_name = () => {
     return this.__NAME__;
-  }
+  };
 }
 
 export default ServiceManagerLess;
diff --git a/packages/react/src/jupyter/services/ServiceManagerLite.ts b/packages/react/src/jupyter/services/ServiceManagerLite.ts
index 943814868..192af9ab2 100644
--- a/packages/react/src/jupyter/services/ServiceManagerLite.ts
+++ b/packages/react/src/jupyter/services/ServiceManagerLite.ts
@@ -7,20 +7,23 @@
 import { ServiceManager } from '@jupyterlab/services';
 import { createLiteServer, Lite } from '../lite';
 
-export const createLiteServiceManager = (lite: Lite = true): Promise<ServiceManager.IManager> => {
+export const createLiteServiceManager = (
+  lite: Lite = true
+): Promise<ServiceManager.IManager> => {
   const liteServiceManager = createLiteServer().then(async liteServer => {
     // Load the browser kernel.
-    const mod = typeof lite === 'boolean'
+    const mod =
+      typeof lite === 'boolean'
         ? await import('@jupyterlite/pyodide-kernel-extension')
         : await lite;
     // Load the module manually to get the list of plugin IDs.
     let data = mod.default;
     // Handle commonjs exports.
     if (!Object.prototype.hasOwnProperty.call(mod, '__esModule')) {
-        data = mod as any;
+      data = mod as any;
     }
     if (!Array.isArray(data)) {
-        data = [data];
+      data = [data];
     }
     const pluginIDs = data.map(item => {
       try {
@@ -33,13 +36,13 @@ export const createLiteServiceManager = (lite: Lite = true): Promise<ServiceMana
     });
     // Activate the loaded plugins.
     await Promise.all(
-        pluginIDs.filter(id => id).map(id => liteServer.activatePlugin(id!))
+      pluginIDs.filter(id => id).map(id => liteServer.activatePlugin(id!))
     );
     const liteServiceManager = liteServer.serviceManager;
-    (liteServiceManager as any)["__NAME__"] = "LiteServiceManager"
-    console.log("Lite Service Manager is created", liteServiceManager);
+    (liteServiceManager as any)['__NAME__'] = 'LiteServiceManager';
+    console.log('Lite Service Manager is created', liteServiceManager);
     return liteServiceManager;
   });
   // TODO remove `as any` once we bump to jupyterlite 0.6.x.
   return liteServiceManager as any;
-}
+};
diff --git a/packages/react/src/providers/kernels/DatalayerKernels.ts b/packages/react/src/providers/kernels/DatalayerKernels.ts
index de32da213..80a95026b 100755
--- a/packages/react/src/providers/kernels/DatalayerKernels.ts
+++ b/packages/react/src/providers/kernels/DatalayerKernels.ts
@@ -5,73 +5,76 @@
  */
 
 import { URLExt } from '@jupyterlab/coreutils';
-import { jupyterReactStore } from "../../state";
+import { jupyterReactStore } from '../../state';
 import { ServerConnection, ServiceManager } from '@jupyterlab/services';
 
 export type KernelRequest = {
-  "kernel_type": "notebook",
-  "kernel_given_name": string,
-  "credits_limit": number,
-  "capabilities": string[]
-}
+  kernel_type: 'notebook';
+  kernel_given_name: string;
+  credits_limit: number;
+  capabilities: string[];
+};
 
 export type KernelResponse = {
-  "success": boolean,
-  "message": string,
-  "kernel": {
-    "burning_rate": number,
-    "kernel_type": "notebook",
-    "kernel_given_name": string,
-    "environment_name": string,
-    "environment_display_name": string,
-    "jupyter_pod_name": string,
-    "token": string,
-    "ingress": string,
-    "reservation_id": string,
-    "started_at": string,
-    "expired_at": string
-  }
-}
+  success: boolean;
+  message: string;
+  kernel: {
+    burning_rate: number;
+    kernel_type: 'notebook';
+    kernel_given_name: string;
+    environment_name: string;
+    environment_display_name: string;
+    jupyter_pod_name: string;
+    token: string;
+    ingress: string;
+    reservation_id: string;
+    started_at: string;
+    expired_at: string;
+  };
+};
 
-export const createDatalayerServiceManager = async (environmentName: string, credits: number) => {
+export const createDatalayerServiceManager = async (
+  environmentName: string,
+  credits: number
+) => {
   const datalayerConfig = jupyterReactStore.getState().datalayerConfig;
   const token = datalayerConfig?.token || '';
   const runUrl = datalayerConfig?.runUrl || 'https://prod1.datalayer.io';
   const url = URLExt.join(
     runUrl,
     'api/jupyter/v1/environment',
-    environmentName,
+    environmentName
   );
   const headers = new Headers();
   headers.set('Accept', 'application/json');
   headers.set('Content-Type', 'application/json');
   headers.set('Authorization', `Bearer ${token}`);
   const request: KernelRequest = {
-    kernel_type: "notebook",
+    kernel_type: 'notebook',
     kernel_given_name: `Jupyter React Kernel - ${new Date()}`,
     credits_limit: credits,
     capabilities: [],
   };
   const response = await fetch(url, {
-    method:'POST',
+    method: 'POST',
     headers: headers,
     body: JSON.stringify(request),
     credentials: token ? 'include' : 'omit',
     mode: 'cors',
-    cache: 'no-store'
-  })
-  .then((resp: Response) => {
-    if (resp.ok) {
-      return resp.json();
-    } else {
-      throw new Error(resp.statusText);
-    }
-  })
-  .catch((err: Error) => {
-    console.error(err);
-    return err;
+    cache: 'no-store',
   })
-  .finally(() => {});
+    .then((resp: Response) => {
+      if (resp.ok) {
+        return resp.json();
+      } else {
+        throw new Error(resp.statusText);
+      }
+    })
+    .catch((err: Error) => {
+      console.error(err);
+      return err;
+    })
+    .finally(() => {});
   if (response instanceof Error) {
     throw response as Error;
   }
@@ -84,4 +87,4 @@ export const createDatalayerServiceManager = async (environmentName: string, cre
   });
   const serviceManager = new ServiceManager({ serverSettings });
   return serviceManager;
-}
+};
diff --git a/packages/react/src/state/JupyterReactState.ts b/packages/react/src/state/JupyterReactState.ts
index 2bf9df91d..efcd5f9fa 100644
--- a/packages/react/src/state/JupyterReactState.ts
+++ b/packages/react/src/state/JupyterReactState.ts
@@ -7,23 +7,42 @@
 import { useEffect, useState, useMemo } from 'react';
 import { createStore } from 'zustand/vanilla';
 import { useStore } from 'zustand';
-import { ServiceManager, Kernel as JupyterKernel, Session } from '@jupyterlab/services';
-import { getJupyterServerUrl, createLiteServiceManager, ensureJupyterAuth, createServerSettings, JupyterPropsType, DEFAULT_KERNEL_NAME } from '../jupyter';
+import {
+  ServiceManager,
+  Kernel as JupyterKernel,
+  Session,
+} from '@jupyterlab/services';
+import {
+  getJupyterServerUrl,
+  createLiteServiceManager,
+  ensureJupyterAuth,
+  createServerSettings,
+  JupyterPropsType,
+  DEFAULT_KERNEL_NAME,
+} from '../jupyter';
 import { ServiceManagerLess } from '../jupyter/services';
 import { Kernel } from '../jupyter/kernel/Kernel';
 import { IJupyterConfig, loadJupyterConfig } from '../jupyter/JupyterConfig';
 import type { IDatalayerConfig } from './IDatalayerConfig';
 import { cellsStore, CellsState } from '../components/cell/CellState';
 import { consoleStore, ConsoleState } from '../components/console/ConsoleState';
-import { notebookStore, NotebookState } from '../components/notebook/NotebookState';
+import {
+  notebookStore,
+  NotebookState,
+} from '../components/notebook/NotebookState';
 import { outputsStore, OutputState } from '../components/output/OutputState';
-import { terminalStore, TerminalState } from '../components/terminal/TerminalState';
+import {
+  terminalStore,
+  TerminalState,
+} from '../components/terminal/TerminalState';
 
-export type OnSessionConnection = (kernelConnection: Session.ISessionConnection | undefined) => void;
+export type OnSessionConnection = (
+  kernelConnection: Session.ISessionConnection | undefined
+) => void;
 
 export type KernelTransfer = {
   transfer: (to: JupyterKernel.IKernelConnection) => void;
-}
+};
 
 export type JupyterReactState = {
   cellsStore: CellsState;
@@ -87,13 +106,21 @@ export const jupyterReactStore = createStore<JupyterReactState>((set, get) => ({
 // TODO Reuse code portions from JupyterContext.
 export function useJupyterReactStore(): JupyterReactState;
 
-export function useJupyterReactStore<T>(selector: (state: JupyterReactState) => T): T;
-export function useJupyterReactStore<T>(selector?: (state: JupyterReactState) => T) {
+export function useJupyterReactStore<T>(
+  selector: (state: JupyterReactState) => T
+): T;
+export function useJupyterReactStore<T>(
+  selector?: (state: JupyterReactState) => T
+) {
   return useStore(jupyterReactStore, selector!);
 }
 
-export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterReactState;
-export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterReactState {
+export function useJupyterReactStoreFromProps(
+  props: JupyterPropsType
+): JupyterReactState;
+export function useJupyterReactStoreFromProps(
+  props: JupyterPropsType
+): JupyterReactState {
   const {
     defaultKernelName = DEFAULT_KERNEL_NAME,
     initCode = '',
@@ -119,9 +146,13 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
     return config;
   }, []);
 
-  const [serviceManager, setServiceManager] = useState<ServiceManager.IManager | undefined>(propsServiceManager);
+  const [serviceManager, setServiceManager] = useState<
+    ServiceManager.IManager | undefined
+  >(propsServiceManager);
   const [_, setKernel] = useState<Kernel>();
-  const [__, setIsLoading] = useState<boolean>(startDefaultKernel || useRunningKernelIndex > -1);
+  const [__, setIsLoading] = useState<boolean>(
+    startDefaultKernel || useRunningKernelIndex > -1
+  );
 
   useEffect(() => {
     if (propsServiceManager) {
@@ -149,37 +180,51 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
       }
       const serverSettings = createServerSettings(
         jupyterConfig.jupyterServerUrl,
-        jupyterConfig.jupyterServerToken,
+        jupyterConfig.jupyterServerToken
       );
       ensureJupyterAuth(serverSettings).then(isAuth => {
         if (!isAuth) {
-          const loginUrl = getJupyterServerUrl() + '/login?next=' + window.location;
-          console.warn('You need to authenticate on the Jupyter Server URL', loginUrl);
-  //          window.location.replace(loginUrl);
+          const loginUrl =
+            getJupyterServerUrl() + '/login?next=' + window.location;
+          console.warn(
+            'You need to authenticate on the Jupyter Server URL',
+            loginUrl
+          );
+          //          window.location.replace(loginUrl);
         }
         if (useRunningKernelId && useRunningKernelIndex > -1) {
-          throw new Error('You can not ask for useRunningKernelId and useRunningKernelIndex at the same time.');
+          throw new Error(
+            'You can not ask for useRunningKernelId and useRunningKernelIndex at the same time.'
+          );
         }
-        if (startDefaultKernel && (useRunningKernelId || useRunningKernelIndex > -1)) {
-          throw new Error('You can not ask for startDefaultKernel and (useRunningKernelId or useRunningKernelIndex) at the same time.');
+        if (
+          startDefaultKernel &&
+          (useRunningKernelId || useRunningKernelIndex > -1)
+        ) {
+          throw new Error(
+            'You can not ask for startDefaultKernel and (useRunningKernelId or useRunningKernelIndex) at the same time.'
+          );
         }
         const serviceManager = new ServiceManager({ serverSettings });
         setServiceManager(serviceManager);
         jupyterReactStore.getState().setServiceManager(serviceManager);
-      });  
+      });
     }
   }, [lite, serverless, jupyterServerUrl]);
 
   // Setup a Kernel if needed.
   useEffect(() => {
-    console.log('Checking kernels for the new Service Manager:', serviceManager);
+    console.log(
+      'Checking kernels for the new Service Manager:',
+      serviceManager
+    );
     serviceManager?.kernels.ready.then(async () => {
       const kernelManager = serviceManager.kernels;
       console.log('Jupyter Kernel Manager is ready', kernelManager);
       if (useRunningKernelIndex > -1) {
         await serviceManager.sessions.refreshRunning();
         const runnings = Array.from(kernelManager.running());
-        const model = runnings[useRunningKernelIndex]
+        const model = runnings[useRunningKernelIndex];
         const existingKernel = new Kernel({
           kernelManager,
           kernelName: model.name,
@@ -199,8 +244,7 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
         jupyterReactStore.getState().kernel = existingKernel;
         setIsLoading(false);
         jupyterReactStore.getState().kernelIsLoading = false;
-      }
-      else if (startDefaultKernel) {
+      } else if (startDefaultKernel) {
         console.log('Starting a Jupyter Kernel:', defaultKernelName);
         const defaultKernel = new Kernel({
           kernelManager,
@@ -228,7 +272,6 @@ export function useJupyterReactStoreFromProps(props: JupyterPropsType): JupyterR
   }, [serviceManager]);
 
   return useStore(jupyterReactStore);
-
 }
 
 export default useJupyterReactStore;
diff --git a/packages/react/src/state/index.ts b/packages/react/src/state/index.ts
index 8a073c1aa..27f144b10 100644
--- a/packages/react/src/state/index.ts
+++ b/packages/react/src/state/index.ts
@@ -4,5 +4,5 @@
  * MIT License
  */
 
-export * from "./IDatalayerConfig";
-export * from "./JupyterReactState";
+export * from './IDatalayerConfig';
+export * from './JupyterReactState';
diff --git a/packages/react/src/theme/JupyterLabCss.tsx b/packages/react/src/theme/JupyterLabCss.tsx
index e3eb44497..46e730c5e 100644
--- a/packages/react/src/theme/JupyterLabCss.tsx
+++ b/packages/react/src/theme/JupyterLabCss.tsx
@@ -8,15 +8,15 @@ import { useEffect } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { Colormode } from './JupyterLabColormode';
 
-import "@primer/primitives/dist/css/base/typography/typography.css";
-import "@primer/primitives/dist/css/functional/themes/light.css";
-import "@primer/primitives/dist/css/functional/size/border.css";
-import "@primer/primitives/dist/css/functional/size/breakpoints.css";
-import "@primer/primitives/dist/css/functional/size/size-coarse.css";
-import "@primer/primitives/dist/css/functional/size/size-fine.css";
-import "@primer/primitives/dist/css/functional/size/size.css";
-import "@primer/primitives/dist/css/functional/size/viewport.css";
-import "@primer/primitives/dist/css/functional/typography/typography.css";
+import '@primer/primitives/dist/css/base/typography/typography.css';
+import '@primer/primitives/dist/css/functional/themes/light.css';
+import '@primer/primitives/dist/css/functional/size/border.css';
+import '@primer/primitives/dist/css/functional/size/breakpoints.css';
+import '@primer/primitives/dist/css/functional/size/size-coarse.css';
+import '@primer/primitives/dist/css/functional/size/size-fine.css';
+import '@primer/primitives/dist/css/functional/size/size.css';
+import '@primer/primitives/dist/css/functional/size/viewport.css';
+import '@primer/primitives/dist/css/functional/typography/typography.css';
 
 const DATASET_LAB_THEME = 'data-lab-theme';
 
@@ -26,7 +26,7 @@ const GlobalStyle = createGlobalStyle<any>`
     --button-primary-bgColor-hover: var(--jp-brand-color0, #0d47a1) !important;
     --button-primary-bgColor-rest: var(--jp-brand-color1, #1976d2) !important;
   }
-`
+`;
 
 type JupyterLabCssProps = {
   colormode?: Colormode;
@@ -73,13 +73,15 @@ export function JupyterLabCss(props: JupyterLabCssProps): JSX.Element {
     let theme;
     switch (colormode) {
       case 'light': {
-        // @ts-expect-error unknown module
-        theme = import('@jupyterlab/theme-light-extension/style/variables.css?raw');
+        theme = import(
+          '@jupyterlab/theme-light-extension/style/variables.css?raw'
+        );
         break;
       }
       case 'dark': {
-        // @ts-expect-error unknown module
-        theme = import('@jupyterlab/theme-dark-extension/style/variables.css?raw');
+        theme = import(
+          '@jupyterlab/theme-dark-extension/style/variables.css?raw'
+        );
         break;
       }
     }
@@ -100,9 +102,9 @@ ${module.default}
   }, [colormode]);
   return (
     <div id="dla-JupyterLabCss-id">
-      <GlobalStyle/>
+      <GlobalStyle />
     </div>
-  )
+  );
 }
 
 export default JupyterLabCss;
diff --git a/packages/react/src/theme/JupyterReactTheme.tsx b/packages/react/src/theme/JupyterReactTheme.tsx
index 0644b9492..8972b71bc 100644
--- a/packages/react/src/theme/JupyterReactTheme.tsx
+++ b/packages/react/src/theme/JupyterReactTheme.tsx
@@ -13,7 +13,9 @@ type IJupyterLabThemeProps = {
   theme?: Record<string, any>;
 };
 
-export function JupyterReactTheme(props: React.PropsWithChildren<IJupyterLabThemeProps>): JSX.Element {
+export function JupyterReactTheme(
+  props: React.PropsWithChildren<IJupyterLabThemeProps>
+): JSX.Element {
   const {
     children,
     colormode = 'light',
diff --git a/packages/react/src/theme/themes/JupyterLabTheme.ts b/packages/react/src/theme/themes/JupyterLabTheme.ts
index d7c343908..79bdf1ca3 100644
--- a/packages/react/src/theme/themes/JupyterLabTheme.ts
+++ b/packages/react/src/theme/themes/JupyterLabTheme.ts
@@ -476,7 +476,8 @@ const jupyterLabThemeDefs = {
           default: 'var(--jp-ui-font-color1, rgba(0, 0, 0, 0.87))',
           muted: 'var(--jp-ui-font-color1, rgba(0, 0, 0, 0.54))',
           subtle: 'var(--jp-ui-font-color1, rgba(0, 0, 0, 0.38))',
-          onEmphasis: 'var(--jp-ui-inverse-font-color1, rgba(255, 255, 255, 1))',
+          onEmphasis:
+            'var(--jp-ui-inverse-font-color1, rgba(255, 255, 255, 1))',
         },
         canvas: {
           default: 'var(--jp-layout-color1, white)',
@@ -612,7 +613,7 @@ const jupyterLabThemeDefs = {
         primer: {
           shadow: {
             highlight: 'inset 0 1px 0 rgba(255,255,255,0.25)',
-//            inset: 'inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color)',
+            //            inset: 'inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color)',
             inset: 'inset 0 0 0 0 var(--jp-input-border-color)',
           },
         },
@@ -1144,7 +1145,7 @@ const jupyterLabThemeDefs = {
         primer: {
           shadow: {
             highlight: '0 0 transparent',
-//            inset: 'inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color)',
+            //            inset: 'inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color)',
             inset: 'inset 0 0 0 0 var(--jp-input-border-color)',
           },
         },
diff --git a/packages/react/src/theme/themes/index.ts b/packages/react/src/theme/themes/index.ts
index 14ec485c2..c074e4797 100644
--- a/packages/react/src/theme/themes/index.ts
+++ b/packages/react/src/theme/themes/index.ts
@@ -4,4 +4,4 @@
  * MIT License
  */
 
-export * from './JupyterLabTheme';
\ No newline at end of file
+export * from './JupyterLabTheme';
diff --git a/packages/react/src/typings.d.ts b/packages/react/src/typings.d.ts
index 463551a0a..d4e4880c7 100755
--- a/packages/react/src/typings.d.ts
+++ b/packages/react/src/typings.d.ts
@@ -39,6 +39,11 @@ declare module '*/variables.css' {
   export default value;
 }
 
+declare module '*/variables.css?raw' {
+  const value: string;
+  export default value;
+}
+
 declare module '*/theme.css' {
   const value: any;
   export default value;
diff --git a/packages/react/src/utils/cursorExtension.ts b/packages/react/src/utils/cursorExtension.ts
index e280113d1..5d1039609 100644
--- a/packages/react/src/utils/cursorExtension.ts
+++ b/packages/react/src/utils/cursorExtension.ts
@@ -26,7 +26,7 @@ import {
   tooltips,
   ViewPlugin,
   ViewUpdate,
-  type Tooltip
+  type Tooltip,
 } from '@codemirror/view';
 import { User } from '@jupyterlab/services';
 import { JSONExt } from '@lumino/coreutils';
@@ -205,7 +205,7 @@ const remoteCursorsLayer = layer({
         }
 
         const className =
-          cursor.primary ?? true
+          (cursor.primary ?? true)
             ? 'jp-remote-cursor jp-mod-primary'
             : 'jp-remote-cursor';
         const cursor_ = EditorSelection.cursor(
diff --git a/packages/react/templates/error.html b/packages/react/templates/error.html
index e319d5edc..c4e29928f 100644
--- a/packages/react/templates/error.html
+++ b/packages/react/templates/error.html
@@ -4,62 +4,58 @@
   ~ MIT License
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <!--
 Copyright (c) Jupyter Development Team.
 Distributed under the terms of the Modified BSD License.
 -->
 <html>
+  <head>
+    <meta charset="utf-8" />
 
-<head>
-  <meta charset="utf-8">
+    <title>{% block title %}{{page_title | e}}{% endblock %}</title>
 
-  <title>{% block title %}{{page_title | e}}{% endblock %}</title>
-
-  {% block favicon %}<link rel="shortcut icon" type="image/x-icon" href="/static/favicons/favicon.ico">{% endblock %}
-
-</head>
-
-<body>
-
-{% block stylesheet %}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
-{% endblock %}
-{% block site %}
-
-<div class="error">
-    {% block h1_error %}
-    <h1>{{status_code | e}} : {{status_message | e}}</h1>
-    {% endblock h1_error %}
-    {% block error_detail %}
-    {% if message %}
-    <p>The error was:</p>
-    <div class="traceback-wrapper">
-    <pre class="traceback">{{message | e}}</pre>
-    </div>
-    {% endif %}
+    {% block favicon %}
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="/static/favicons/favicon.ico"
+    />
     {% endblock %}
-</header>
-
-{% endblock %}
-
-{% block script %}
-<script type='text/javascript'>
-window.onload = function () {
-  var tb = document.getElementsByClassName('traceback')[0];
-  tb.scrollTop = tb.scrollHeight;
-  {% if message %}
-  console.error("{{message | e}}")
-  {% endif %}
-};
-</script>
-{% endblock script %}
-
-</body>
+  </head>
+
+  <body>
+    {% block stylesheet %}
+    <style type="text/css">
+      /* disable initial hide */
+      div#header,
+      div#site {
+        display: block;
+      }
+    </style>
+    {% endblock %} {% block site %}
+
+    <div class="error">
+      {% block h1_error %}
+      <h1>{{status_code | e}} : {{status_message | e}}</h1>
+      {% endblock h1_error %} {% block error_detail %} {% if message %}
+      <p>The error was:</p>
+      <div class="traceback-wrapper">
+        <pre class="traceback">{{message | e}}</pre>
+      </div>
+      {% endif %} {% endblock %}
+    </div>
 
+    {% endblock %} {% block script %}
+    <script type="text/javascript">
+      window.onload = function () {
+        var tb = document.getElementsByClassName('traceback')[0];
+        tb.scrollTop = tb.scrollHeight;
+        {% if message %}
+        console.error("{{message | e}}")
+        {% endif %}
+      };
+    </script>
+    {% endblock script %}
+  </body>
 </html>
diff --git a/packages/react/templates/index.html b/packages/react/templates/index.html
index 380c71115..2bb9adee8 100644
--- a/packages/react/templates/index.html
+++ b/packages/react/templates/index.html
@@ -9,32 +9,33 @@
   ~ Distributed under the terms of the Modified BSD License.
 -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <title>{{page_config['appName'] | e}}</title>
-  {# Copy so we do not modify the page_config with updates. #}
-  {% set page_config_full = page_config.copy() %}
+  <head>
+    <title>{{page_config['appName'] | e}}</title>
+    {# Copy so we do not modify the page_config with updates. #} {% set
+    page_config_full = page_config.copy() %} {# Set a dummy variable - we just
+    want the side effect of the update. #} {% set _ =
+    page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
 
-  {# Set a dummy variable - we just want the side effect of the update. #}
-  {% set _ = page_config_full.update(baseUrl=base_url, wsUrl=ws_url) %}
-
-  <script id="jupyter-config-data" type="application/json">
-    {{ page_config_full | tojson }}
-  </script>
-  <script src="{{page_config['fullStaticUrl'] | e}}/bundle.js" main="index"></script>
-</head>
-<body>
-
-  <script type="text/javascript">
-    /* Remove token from URL. */
-    (function () {
-      var parsedUrl = new URL(window.location.href);
-      if (parsedUrl.searchParams.get('token')) {
-        parsedUrl.searchParams.delete('token');
-        window.history.replaceState({ }, '', parsedUrl.href);
-      }
-    })();
-  </script>
-</body>
+    <script id="jupyter-config-data" type="application/json">
+      {{ page_config_full | tojson }}
+    </script>
+    <script
+      src="{{page_config['fullStaticUrl'] | e}}/bundle.js"
+      main="index"
+    ></script>
+  </head>
+  <body>
+    <script type="text/javascript">
+      /* Remove token from URL. */
+      (function () {
+        var parsedUrl = new URL(window.location.href);
+        if (parsedUrl.searchParams.get('token')) {
+          parsedUrl.searchParams.delete('token');
+          window.history.replaceState({}, '', parsedUrl.href);
+        }
+      })();
+    </script>
+  </body>
 </html>
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index e49c2152e..ceb57b744 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,13 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
-  "include": [
-    "./src/**/*",
-    "./src/**/*.json"
-  ],
-  "exclude": [
-    "node_modules",
-    "src/example"
-  ],
+  "include": ["./src/**/*", "./src/**/*.json"],
+  "exclude": ["node_modules", "src/example"],
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
     "baseUrl": "/",
@@ -32,13 +26,7 @@
     "skipLibCheck": true,
     "strictNullChecks": true,
     "target": "ESNext",
-    "types": [
-      "jest",
-      "node"
-    ],
-    "lib": [
-      "ESNext",
-      "DOM"
-    ]
+    "types": ["jest", "node"],
+    "lib": ["ESNext", "DOM"]
   }
 }
diff --git a/packages/react/typedoc.json b/packages/react/typedoc.json
index b65c738b1..e53ee3b69 100644
--- a/packages/react/typedoc.json
+++ b/packages/react/typedoc.json
@@ -1,9 +1,5 @@
 {
-  "entryPoints": [
-    "./src/index.ts"
-],
+  "entryPoints": ["./src/index.ts"],
   "out": "typedoc",
-  "exclude": [
-    "src/examples"
-  ]
+  "exclude": ["src/examples"]
 }
diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js
index 8f847bc13..031844362 100644
--- a/packages/react/webpack.config.js
+++ b/packages/react/webpack.config.js
@@ -55,44 +55,42 @@ const ENTRY =
   // './src/examples/NotebookKernelChange';
   // './src/examples/NotebookLess';
   './src/examples/NotebookLite';
-  // './src/examples/NotebookLiteContext';
-  // './src/examples/NotebookLocalServer';
-  // './src/examples/NotebookMutationsKernel';
-  // './src/examples/NotebookMutationsServiceManager';
-  // './src/examples/NotebookNbformat';
-  // './src/examples/NotebookNbformatChange';
-  // './src/examples/NotebookNoContext';
-  // './src/examples/NotebookNoPrimer';
-  // './src/examples/NotebookOnSessionConnection';
-  // './src/examples/NotebookPathChange';
-  // './src/examples/NotebookReadonly';
-  // './src/examples/NotebookServiceManager';
-  // './src/examples/NotebookSimple';
-  // './src/examples/NotebookSkeleton';
-  // './src/examples/NotebookTheme';
-  // './src/examples/NotebookThemeColormode';
-  // './src/examples/NotebookToc';
-  // './src/examples/NotebookURL';
-  // './src/examples/NotebookURL';
-  // './src/examples/ObservableHQ';
-  // './src/examples/Output';
-  // './src/examples/OutputWithMonitoring';
-  // './src/examples/Outputs';
-  // './src/examples/Plotly';
-  // './src/examples/PyGWalker';
-  // './src/examples/RunningSessions';
-  // './src/examples/Terminal';
-  // './src/examples/Viewer';
+// './src/examples/NotebookLiteContext';
+// './src/examples/NotebookLocalServer';
+// './src/examples/NotebookMutationsKernel';
+// './src/examples/NotebookMutationsServiceManager';
+// './src/examples/NotebookNbformat';
+// './src/examples/NotebookNbformatChange';
+// './src/examples/NotebookNoContext';
+// './src/examples/NotebookNoPrimer';
+// './src/examples/NotebookOnSessionConnection';
+// './src/examples/NotebookPathChange';
+// './src/examples/NotebookReadonly';
+// './src/examples/NotebookServiceManager';
+// './src/examples/NotebookSimple';
+// './src/examples/NotebookSkeleton';
+// './src/examples/NotebookTheme';
+// './src/examples/NotebookThemeColormode';
+// './src/examples/NotebookToc';
+// './src/examples/NotebookURL';
+// './src/examples/NotebookURL';
+// './src/examples/ObservableHQ';
+// './src/examples/Output';
+// './src/examples/OutputWithMonitoring';
+// './src/examples/Outputs';
+// './src/examples/Plotly';
+// './src/examples/PyGWalker';
+// './src/examples/RunningSessions';
+// './src/examples/Terminal';
+// './src/examples/Viewer';
 
 const IS_JUPYTER_SERVER_LOCAL = process.env.LOCAL_JUPYTER_SERVER == 'true';
 const IS_NO_CONFIG = process.env.NO_CONFIG == 'true';
-const INDEX_PAGE = IS_JUPYTER_SERVER_LOCAL ?
-  'index-local.html'
-  :
-  IS_NO_CONFIG ?
-    'index-noconfig.html'
-    :
-    'index.html';
+const INDEX_PAGE = IS_JUPYTER_SERVER_LOCAL
+  ? 'index-local.html'
+  : IS_NO_CONFIG
+    ? 'index-noconfig.html'
+    : 'index.html';
 const IS_PRODUCTION = process.argv.indexOf('--mode=production') > -1;
 const mode = IS_PRODUCTION ? 'production' : 'development';
 const devtool = IS_PRODUCTION ? false : 'inline-source-map';
@@ -167,8 +165,15 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        enforce: "pre",
-        use: ["source-map-loader"],
+        enforce: 'pre',
+        use: ['source-map-loader'],
+        exclude: [
+          // Exclude packages with missing or broken source maps
+          /node_modules\/@plotly\/mapbox-gl/,
+          /node_modules\/vscode-jsonrpc/,
+          /node_modules\/langium/,
+          /node_modules\/@mermaid-js\/parser/,
+        ],
       },
       // just keep the woff2 fonts from fontawesome
       {
@@ -187,8 +192,11 @@ module.exports = {
             resourceQuery: /raw/,
             type: 'asset/source',
           },
-          { test: /(?<!style\/theme)\.css$/, use: ['style-loader', 'css-loader'] },
-        ]
+          {
+            test: /(?<!style\/theme)\.css$/,
+            use: ['style-loader', 'css-loader'],
+          },
+        ],
       },
       { test: /\.md$/, type: 'asset/source' },
       { test: /\.js.map$/, type: 'asset/resource' },
diff --git a/packages/vscode/.vscode/extensions.json b/packages/vscode/.vscode/extensions.json
index dd01eb355..9e5e0b733 100644
--- a/packages/vscode/.vscode/extensions.json
+++ b/packages/vscode/.vscode/extensions.json
@@ -1,5 +1,9 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846
   // for the documentation about the extensions.json format
-  "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher", "ms-vscode.extension-test-runner"]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "amodio.tsl-problem-matcher",
+    "ms-vscode.extension-test-runner"
+  ]
 }
diff --git a/packages/vscode/.vscode/launch.json b/packages/vscode/.vscode/launch.json
index c42edc04b..ccdb134dc 100644
--- a/packages/vscode/.vscode/launch.json
+++ b/packages/vscode/.vscode/launch.json
@@ -3,19 +3,15 @@
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-	"version": "0.2.0",
-	"configurations": [
-		{
-			"name": "Run Extension",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}"
-			],
-			"outFiles": [
-				"${workspaceFolder}/dist/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		}
-	]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
 }
diff --git a/packages/vscode/.vscode/settings.json b/packages/vscode/.vscode/settings.json
index 16a5c0229..64ee92966 100644
--- a/packages/vscode/.vscode/settings.json
+++ b/packages/vscode/.vscode/settings.json
@@ -1,13 +1,13 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-	"files.exclude": {
-		"out": false, // set this to true to hide the "out" folder with the compiled JS files
-		"dist": false // set this to true to hide the "dist" folder with the compiled JS files
-	},
-	"search.exclude": {
-		"out": true, // set this to false to include "out" folder in search results
-		"dist": true // set this to false to include "dist" folder in search results
-	},
-	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-	"typescript.tsc.autoDetect": "off"
+  "files.exclude": {
+    "out": false, // set this to true to hide the "out" folder with the compiled JS files
+    "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true, // set this to false to include "out" folder in search results
+    "dist": true // set this to false to include "dist" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
 }
diff --git a/packages/vscode/.vscode/tasks.json b/packages/vscode/.vscode/tasks.json
index c2ab68aed..9e3300b04 100644
--- a/packages/vscode/.vscode/tasks.json
+++ b/packages/vscode/.vscode/tasks.json
@@ -1,40 +1,37 @@
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "watch",
-			"problemMatcher": "$ts-webpack-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never",
-				"group": "watchers"
-			},
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		},
-		{
-			"type": "npm",
-			"script": "watch-tests",
-			"problemMatcher": "$tsc-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never",
-				"group": "watchers"
-			},
-			"group": "build"
-		},
-		{
-			"label": "tasks: watch-tests",
-			"dependsOn": [
-				"npm: watch",
-				"npm: watch-tests"
-			],
-			"problemMatcher": []
-		}
-	]
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$ts-webpack-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never",
+        "group": "watchers"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch-tests",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never",
+        "group": "watchers"
+      },
+      "group": "build"
+    },
+    {
+      "label": "tasks: watch-tests",
+      "dependsOn": ["npm: watch", "npm: watch-tests"],
+      "problemMatcher": []
+    }
+  ]
 }
diff --git a/packages/vscode/CONTRIBUTING.md b/packages/vscode/CONTRIBUTING.md
index 2f0026052..6b232f69f 100644
--- a/packages/vscode/CONTRIBUTING.md
+++ b/packages/vscode/CONTRIBUTING.md
@@ -39,7 +39,7 @@ You can open the full set of our API when you open the file `node_modules/@types
 
 Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
 
-Run the "watch" task via the **Tasks: Run Task*- command. Make sure this is running, or tests might not be discovered.
+Run the "watch" task via the \*_Tasks: Run Task_- command. Make sure this is running, or tests might not be discovered.
 
 Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
 
diff --git a/packages/vscode/README.md b/packages/vscode/README.md
index 2a48405e4..5278daca6 100644
--- a/packages/vscode/README.md
+++ b/packages/vscode/README.md
@@ -24,11 +24,11 @@ This [Visual Studio Code](https://code.visualstudio.com) extension allows you to
 ## Known Limitations
 
 Styling
+
 - No connection between dark/light vs code theme and notebook theme
 - No resizing with the panel
-- Button to select the runtime is not displayed in a toolbar that stays visible  - No connection between dark/light vs code theme and notebook theme
+- Button to select the runtime is not displayed in a toolbar that stays visible - No connection between dark/light vs code theme and notebook theme
   - No resizing with the panel
   - Button to select the runtime is not displayed in a toolbar that stays visible
 
-
 Websocket binary support: for now we forbid the usage of the newer protocol v1.kernel.websocket.jupyter.org. When using it, the message data are failing to be serialized to be transferred from the webview to the extension. And when receiving it, the deserialization fails. The deserialization error may be related to an incorrect binaryType that is not handle in the current code; but in JupyterLab it is forced to 'arraybuffer' for kernel websocket.
diff --git a/packages/vscode/src/dispose.ts b/packages/vscode/src/dispose.ts
index 2cc38767b..6d0b2e406 100644
--- a/packages/vscode/src/dispose.ts
+++ b/packages/vscode/src/dispose.ts
@@ -7,36 +7,36 @@
 import type * as vscode from 'vscode';
 
 export function disposeAll(disposables: vscode.Disposable[]): void {
-	while (disposables.length) {
-		const item = disposables.pop();
-		if (item) {
-			item.dispose();
-		}
-	}
+  while (disposables.length) {
+    const item = disposables.pop();
+    if (item) {
+      item.dispose();
+    }
+  }
 }
 
 export abstract class Disposable {
-	private _isDisposed = false;
-	protected _disposables: vscode.Disposable[] = [];
+  private _isDisposed = false;
+  protected _disposables: vscode.Disposable[] = [];
 
-	public dispose() {
-		if (this._isDisposed) {
-			return;
-		}
-		this._isDisposed = true;
-		disposeAll(this._disposables);
-	}
+  public dispose() {
+    if (this._isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    disposeAll(this._disposables);
+  }
 
-	protected _register<T extends vscode.Disposable>(value: T): T {
-		if (this._isDisposed) {
-			value.dispose();
-		} else {
-			this._disposables.push(value);
-		}
-		return value;
-	}
+  protected _register<T extends vscode.Disposable>(value: T): T {
+    if (this._isDisposed) {
+      value.dispose();
+    } else {
+      this._disposables.push(value);
+    }
+    return value;
+  }
 
-	protected get isDisposed(): boolean {
-		return this._isDisposed;
-	}
+  protected get isDisposed(): boolean {
+    return this._isDisposed;
+  }
 }
diff --git a/packages/vscode/src/messages.ts b/packages/vscode/src/messages.ts
index 305cd51c7..f5f1c6849 100644
--- a/packages/vscode/src/messages.ts
+++ b/packages/vscode/src/messages.ts
@@ -22,7 +22,7 @@ export type ExtensionMessage = {
   error?: any;
   /**
    * Message owner ID.
-   * 
+   *
    * For a HTTP request this is a request ID, for a websocket message
    * it is the client ID.
    */
diff --git a/packages/vscode/src/notebookEditor.ts b/packages/vscode/src/notebookEditor.ts
index 31b659a63..acd98671a 100644
--- a/packages/vscode/src/notebookEditor.ts
+++ b/packages/vscode/src/notebookEditor.ts
@@ -30,7 +30,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
   static async create(
     uri: vscode.Uri,
     backupId: string | undefined,
-    delegate: NotebookDocumentDelegate
+    delegate: NotebookDocumentDelegate,
   ): Promise<NotebookDocument | PromiseLike<NotebookDocument>> {
     // If we have a backup, read that. Otherwise read the resource from the workspace
     const dataFile =
@@ -57,7 +57,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
   private constructor(
     uri: vscode.Uri,
     initialContent: Uint8Array,
-    delegate: NotebookDocumentDelegate
+    delegate: NotebookDocumentDelegate,
   ) {
     super();
     this._uri = uri;
@@ -74,7 +74,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
   }
 
   private readonly _onDidDispose = this._register(
-    new vscode.EventEmitter<void>()
+    new vscode.EventEmitter<void>(),
   );
   /**
    * Fired when the document is disposed of.
@@ -85,7 +85,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
     new vscode.EventEmitter<{
       readonly content?: Uint8Array;
       readonly edits: readonly NotebookEdit[];
-    }>()
+    }>(),
   );
   /**
    * Fired to notify webviews that the document has changed.
@@ -97,7 +97,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
       readonly label: string;
       undo(): void;
       redo(): void;
-    }>()
+    }>(),
   );
   /**
    * Fired to tell VS Code that an edit has occurred in the document.
@@ -154,7 +154,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
    */
   async saveAs(
     targetResource: vscode.Uri,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Promise<void> {
     const fileData = await this._delegate.getFileData();
     if (cancellation.isCancellationRequested) {
@@ -183,7 +183,7 @@ class NotebookDocument extends Disposable implements vscode.CustomDocument {
    */
   async backup(
     destination: vscode.Uri,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Promise<vscode.CustomDocumentBackup> {
     await this.saveAs(destination, cancellation);
 
@@ -223,20 +223,20 @@ export class NotebookEditorProvider
       const workspaceFolders = vscode.workspace.workspaceFolders;
       if (!workspaceFolders) {
         vscode.window.showErrorMessage(
-          'Creating new Datalayer notebook files currently requires opening a workspace'
+          'Creating new Datalayer notebook files currently requires opening a workspace',
         );
         return;
       }
 
       const uri = vscode.Uri.joinPath(
         workspaceFolders[0].uri,
-        `new-${NotebookEditorProvider.newNotebookFileId++}.ipynb`
+        `new-${NotebookEditorProvider.newNotebookFileId++}.ipynb`,
       ).with({ scheme: 'untitled' });
 
       vscode.commands.executeCommand(
         'vscode.openWith',
         uri,
-        NotebookEditorProvider.viewType
+        NotebookEditorProvider.viewType,
       );
     });
 
@@ -248,7 +248,7 @@ export class NotebookEditorProvider
           retainContextWhenHidden: false,
         },
         supportsMultipleEditorsPerDocument: false,
-      }
+      },
     );
   }
 
@@ -272,7 +272,7 @@ export class NotebookEditorProvider
   async openCustomDocument(
     uri: vscode.Uri,
     openContext: { backupId?: string },
-    _token: vscode.CancellationToken
+    _token: vscode.CancellationToken,
   ): Promise<NotebookDocument> {
     const document: NotebookDocument = await NotebookDocument.create(
       uri,
@@ -280,7 +280,7 @@ export class NotebookEditorProvider
       {
         getFileData: async () => {
           const webviewsForDocument = Array.from(
-            this.webviews.get(document.uri)
+            this.webviews.get(document.uri),
           );
           if (!webviewsForDocument.length) {
             throw new Error('Could not find webview to save for');
@@ -289,11 +289,11 @@ export class NotebookEditorProvider
           const response = await this.postMessageWithResponse<number[]>(
             panel,
             'getFileData',
-            {}
+            {},
           );
           return new Uint8Array(response);
         },
-      }
+      },
     );
 
     const listeners: vscode.Disposable[] = [];
@@ -305,7 +305,7 @@ export class NotebookEditorProvider
           document,
           ...e,
         });
-      })
+      }),
     );
 
     listeners.push(
@@ -317,7 +317,7 @@ export class NotebookEditorProvider
             content: e.content,
           });
         }
-      })
+      }),
     );
 
     document.onDidDispose(() => disposeAll(listeners));
@@ -328,7 +328,7 @@ export class NotebookEditorProvider
   async resolveCustomEditor(
     document: NotebookDocument,
     webviewPanel: vscode.WebviewPanel,
-    _token: vscode.CancellationToken
+    _token: vscode.CancellationToken,
   ): Promise<void> {
     // Add the webview to our internal set of active webviews
     this.webviews.add(document.uri, webviewPanel);
@@ -340,7 +340,7 @@ export class NotebookEditorProvider
     webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
 
     webviewPanel.webview.onDidReceiveMessage(e =>
-      this.onMessage(webviewPanel, document, e)
+      this.onMessage(webviewPanel, document, e),
     );
 
     // Wait for the webview to be properly ready before we init
@@ -353,7 +353,7 @@ export class NotebookEditorProvider
           });
         } else {
           const editable = vscode.workspace.fs.isWritableFileSystem(
-            document.uri.scheme
+            document.uri.scheme,
           );
 
           this.postMessage(webviewPanel, 'init', {
@@ -373,7 +373,7 @@ export class NotebookEditorProvider
 
   public saveCustomDocument(
     document: NotebookDocument,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Thenable<void> {
     return document.save(cancellation);
   }
@@ -381,14 +381,14 @@ export class NotebookEditorProvider
   public saveCustomDocumentAs(
     document: NotebookDocument,
     destination: vscode.Uri,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Thenable<void> {
     return document.saveAs(destination, cancellation);
   }
 
   public revertCustomDocument(
     document: NotebookDocument,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Thenable<void> {
     return document.revert(cancellation);
   }
@@ -396,7 +396,7 @@ export class NotebookEditorProvider
   public backupCustomDocument(
     document: NotebookDocument,
     context: vscode.CustomDocumentBackupContext,
-    cancellation: vscode.CancellationToken
+    cancellation: vscode.CancellationToken,
   ): Thenable<vscode.CustomDocumentBackup> {
     return document.backup(context.destination, cancellation);
   }
@@ -405,10 +405,9 @@ export class NotebookEditorProvider
    * Get the static HTML used for in our editor's webviews.
    */
   private getHtmlForWebview(webview: vscode.Webview): string {
-
     // Local path to script and css for the webview
     const scriptUri = webview.asWebviewUri(
-      vscode.Uri.joinPath(this._context.extensionUri, 'dist', 'webview.js')
+      vscode.Uri.joinPath(this._context.extensionUri, 'dist', 'webview.js'),
     );
 
     // Use a nonce to whitelist which scripts can be run
@@ -462,11 +461,11 @@ export class NotebookEditorProvider
   private postMessageWithResponse<R = unknown>(
     panel: vscode.WebviewPanel,
     type: string,
-    body: any
+    body: any,
   ): Promise<R> {
     const requestId = (this._requestId++).toString();
     const p = new Promise<R>(resolve =>
-      this._callbacks.set(requestId, resolve)
+      this._callbacks.set(requestId, resolve),
     );
     panel.webview.postMessage({ type, requestId, body });
     return p;
@@ -476,7 +475,7 @@ export class NotebookEditorProvider
     panel: vscode.WebviewPanel,
     type: string,
     body: any,
-    id?: string
+    id?: string,
   ): void {
     panel.webview.postMessage({ type, body, id });
   }
@@ -484,7 +483,7 @@ export class NotebookEditorProvider
   private onMessage(
     webview: vscode.WebviewPanel,
     document: NotebookDocument,
-    message: ExtensionMessage
+    message: ExtensionMessage,
   ) {
     switch (message.type) {
       case 'ready':
@@ -506,7 +505,7 @@ export class NotebookEditorProvider
                   baseUrl,
                   token,
                 },
-                message.id
+                message.id,
               );
             }
           })
@@ -535,14 +534,14 @@ export class NotebookEditorProvider
       case 'websocket-message': {
         console.log(
           `Sending websocket message from ${message.id}.`,
-          message.body
+          message.body,
         );
         const { id } = message;
         const ws = this._websockets.get(id ?? '');
         if (!ws) {
           console.error(
             'Failed to send websocket message from editor with no matching websocket.',
-            message
+            message,
           );
         }
 
@@ -561,10 +560,9 @@ export class NotebookEditorProvider
 
   private _forwardRequest(
     message: ExtensionMessage,
-    webview: vscode.WebviewPanel
+    webview: vscode.WebviewPanel,
   ) {
     const { body, id } = message;
-    // @ts-ignore
     fetch(body.url, {
       body: body.body,
       headers: body.headers,
@@ -572,7 +570,7 @@ export class NotebookEditorProvider
     }).then(async (reply: any) => {
       const headers: Record<string, string> = [...reply.headers].reduce(
         (agg, pair) => ({ ...agg, [pair[0]]: pair[1] }),
-        {}
+        {},
       );
       const rawBody =
         body.method !== 'DELETE' ? await reply.arrayBuffer() : undefined;
@@ -585,14 +583,14 @@ export class NotebookEditorProvider
           status: reply.status,
           statusText: reply.statusText,
         },
-        id
+        id,
       );
     });
   }
 
   private _openWebsocket(
     message: ExtensionMessage,
-    webview: vscode.WebviewPanel
+    webview: vscode.WebviewPanel,
   ) {
     const { body, id } = message;
     const wsURL = new URL(body.origin);
@@ -601,7 +599,7 @@ export class NotebookEditorProvider
     }
     const protocol = body.protocol || undefined;
     console.debug(
-      `Opening websocket to ${wsURL.toString()} with protocol '${protocol}'.`
+      `Opening websocket to ${wsURL.toString()} with protocol '${protocol}'.`,
     );
     const ws = new WebSocket(body.origin, protocol);
     this._websockets.set(id!, ws);
@@ -625,7 +623,7 @@ export class NotebookEditorProvider
         webview,
         'websocket-close',
         { code, reason, wasClean },
-        id
+        id,
       );
     };
     ws.onerror = event => {
diff --git a/packages/vscode/src/runtimePicker.ts b/packages/vscode/src/runtimePicker.ts
index aa8c55858..2c58f3d54 100644
--- a/packages/vscode/src/runtimePicker.ts
+++ b/packages/vscode/src/runtimePicker.ts
@@ -21,7 +21,6 @@ export async function setRuntime(): Promise<string | undefined> {
       try {
         const url = new URL(text);
         url.pathname = url.pathname.replace(/\/?$/, '') + '/api/';
-        // @ts-ignore
         await fetch(url);
         return null;
       } catch (reason) {
diff --git a/packages/vscode/src/test/extension.test.ts b/packages/vscode/src/test/extension.test.ts
index e869f1953..f1b764670 100644
--- a/packages/vscode/src/test/extension.test.ts
+++ b/packages/vscode/src/test/extension.test.ts
@@ -10,9 +10,9 @@ import * as vscode from 'vscode';
 // import * as jupyterNotebookExtension from '../../extension';
 
 suite('Extension Test Suite', () => {
-	vscode.window.showInformationMessage('Start all tests.');
-	test('Sample test', () => {
-		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
-		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
-	});
+  vscode.window.showInformationMessage('Start all tests.');
+  test('Sample test', () => {
+    assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+    assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+  });
 });
diff --git a/packages/vscode/src/util.ts b/packages/vscode/src/util.ts
index 14e62ff37..b7ff98a34 100644
--- a/packages/vscode/src/util.ts
+++ b/packages/vscode/src/util.ts
@@ -6,7 +6,8 @@
 
 export function getNonce() {
   let text = '';
-  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const possible =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   for (let i = 0; i < 32; i++) {
     text += possible.charAt(Math.floor(Math.random() * possible.length));
   }
diff --git a/packages/vscode/tsconfig.base.json b/packages/vscode/tsconfig.base.json
index 73c4e7133..cdc4a46bf 100644
--- a/packages/vscode/tsconfig.base.json
+++ b/packages/vscode/tsconfig.base.json
@@ -1,18 +1,16 @@
 {
-	"compilerOptions": {
-		"module": "ESNext",
-		"target": "ES2022",
-		"lib": [
-			"ES2022"
-		],
-		"sourceMap": true,
-		"rootDir": ".",
-		"strict": true,   /* enable all strict type-checking options */
-		/* Additional Checks */
-		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
-	},
-	"include": ["src", "webview"],
-	"exclude": ["node_modules"]
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "sourceMap": true,
+    "rootDir": ".",
+    "strict": true /* enable all strict type-checking options */
+    /* Additional Checks */
+    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+    // "noUnusedParameters": true,  /* Report errors on unused parameters. */
+  },
+  "include": ["src", "webview"],
+  "exclude": ["node_modules"]
 }
diff --git a/packages/vscode/tsconfig.json b/packages/vscode/tsconfig.json
index e986c05f3..83d03925d 100644
--- a/packages/vscode/tsconfig.json
+++ b/packages/vscode/tsconfig.json
@@ -1,21 +1,14 @@
 {
-	"extends": "./tsconfig.base.json",
-	"compilerOptions": {
-		"jsx": "react",
-		"jsxFactory": "vscpp",
-		"jsxFragmentFactory": "vscppf",
-		"module": "Node16",
-		"strictNullChecks": true,
-		"types": [
-			"node",
-			"mocha"
-		]
-	},
-	"include": [
-		"src"
-	],
-	"exclude": [
-		"node_modules",
-		"webview"
-	]
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "vscpp",
+    "jsxFragmentFactory": "vscppf",
+    "module": "Node16",
+    "strictNullChecks": true,
+    "types": ["node", "mocha"],
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "webview"]
 }
diff --git a/packages/vscode/tsconfig.webview.json b/packages/vscode/tsconfig.webview.json
index de67ddda1..1691fac5d 100644
--- a/packages/vscode/tsconfig.webview.json
+++ b/packages/vscode/tsconfig.webview.json
@@ -1,18 +1,9 @@
 {
-	"extends": "./tsconfig.base.json",
-	"compilerOptions": {
-		"jsx": "react",
-		"lib": [
-			"dom",
-			"dom.iterable",
-			"es2019"
-		]
-	},
-	"include": [
-		"webview"
-	],
-	"exclude": [
-		"node_modules",
-		"src"
-	]
-}
\ No newline at end of file
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["dom", "dom.iterable", "es2019"]
+  },
+  "include": ["webview"],
+  "exclude": ["node_modules", "src"]
+}
diff --git a/packages/vscode/webview/NotebookVSCode.tsx b/packages/vscode/webview/NotebookVSCode.tsx
index 8b542f272..771a48028 100644
--- a/packages/vscode/webview/NotebookVSCode.tsx
+++ b/packages/vscode/webview/NotebookVSCode.tsx
@@ -8,7 +8,13 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ServiceManager } from '@jupyterlab/services';
 import { Box, Button } from '@primer/react';
-import { useKernelId, useNotebookModel, BaseNotebook, JupyterReactTheme, Loader } from '@datalayer/jupyter-react';
+import {
+  useKernelId,
+  useNotebookModel,
+  BaseNotebook,
+  JupyterReactTheme,
+  Loader,
+} from '@datalayer/jupyter-react';
 import { MessageHandlerContext, type ExtensionMessage } from './messageHandler';
 import { createServiceManager } from './serviceManager';
 import { loadFromBytes } from './utils';
@@ -20,7 +26,9 @@ function NotebookVSCode(): JSX.Element {
   const messageHandler = useContext(MessageHandlerContext);
   const [isLoading, setIsLoading] = useState(true);
   const [nbformat, setNbformat] = useState(undefined);
-  const [serviceManager, setServiceManager] = useState<ServiceManager | undefined>();
+  const [serviceManager, setServiceManager] = useState<
+    ServiceManager | undefined
+  >();
   const kernelId = useKernelId({
     kernels: serviceManager?.kernels,
     startDefaultKernel: true,
@@ -66,7 +74,7 @@ function NotebookVSCode(): JSX.Element {
         }
       }
     },
-    [messageHandler]
+    [messageHandler],
   );
   useEffect(() => {
     const disposable = messageHandler.registerCallback(handler);
@@ -81,11 +89,13 @@ function NotebookVSCode(): JSX.Element {
     const { baseUrl, token } = reply.body ?? {};
     setServiceManager(createServiceManager(baseUrl, token));
   }, [messageHandler]);
-  return isLoading
-  ?
+  return isLoading ? (
     <Loader key="notebook-loader" />
-  :
-    <Box style={{ height, width: '100%', position: 'relative' }} id="dla-Jupyter-Notebook">
+  ) : (
+    <Box
+      style={{ height, width: '100%', position: 'relative' }}
+      id="dla-Jupyter-Notebook"
+    >
       <Box sx={{ display: 'flex' }}>
         <Button
           title="Select a runtime for the current notebook."
@@ -148,6 +158,7 @@ function NotebookVSCode(): JSX.Element {
         )}
       </Box>
     </Box>
+  );
 }
 
 // Main function that gets executed once the webview DOM loads
@@ -156,6 +167,6 @@ export function main() {
   root.render(
     <JupyterReactTheme colormode="dark">
       <NotebookVSCode />
-    </JupyterReactTheme>
+    </JupyterReactTheme>,
   );
 }
diff --git a/packages/vscode/webview/messageHandler.ts b/packages/vscode/webview/messageHandler.ts
index fc9812fb2..fda22d247 100644
--- a/packages/vscode/webview/messageHandler.ts
+++ b/packages/vscode/webview/messageHandler.ts
@@ -42,10 +42,8 @@ export type ExtensionMessage = {
  */
 export class MessageHandler {
   private _callbackCount = 0;
-  private _messageCallbacks: Map<
-    number,
-    (message: ExtensionMessage) => void
-  > = new Map();
+  private _messageCallbacks: Map<number, (message: ExtensionMessage) => void> =
+    new Map();
   private static _requestCount = 0;
   private _pendingReplies: Map<string, PromiseDelegate<ExtensionMessage>> =
     new Map();
@@ -87,9 +85,7 @@ export class MessageHandler {
    * @param handler Incoming message handler
    * @returns Unregister handler
    */
-  registerCallback(
-    handler: (message: ExtensionMessage) => void
-  ): {
+  registerCallback(handler: (message: ExtensionMessage) => void): {
     dispose: () => void;
   } {
     const index = this._callbackCount++;
@@ -117,7 +113,7 @@ export class MessageHandler {
 
     for (const handler of this._messageCallbacks.values()) {
       try {
-        handler(message)
+        handler(message);
       } catch (reason) {
         console.error('Failed to handle message: ', reason);
       }
@@ -134,5 +130,5 @@ export class MessageHandler {
  * Singleton {@link MessageHandler} instance as React context.
  */
 export const MessageHandlerContext = createContext<MessageHandler>(
-  MessageHandler.instance
+  MessageHandler.instance,
 );
diff --git a/packages/vscode/webview/serviceManager.ts b/packages/vscode/webview/serviceManager.ts
index ef5141a09..617bd950f 100644
--- a/packages/vscode/webview/serviceManager.ts
+++ b/packages/vscode/webview/serviceManager.ts
@@ -23,7 +23,7 @@ import { MessageHandler, type ExtensionMessage } from './messageHandler';
  */
 async function fetch(
   request: RequestInfo,
-  init?: RequestInit | null
+  init?: RequestInit | null,
 ): Promise<Response> {
   const r = new Request(request, init ?? undefined);
   const body = !['GET', 'HEAD'].includes(r.method)
@@ -31,7 +31,7 @@ async function fetch(
     : undefined;
   const headers: Record<string, string> = [...r.headers].reduce(
     (agg, pair) => ({ ...agg, [pair[0]]: pair[1] }),
-    {}
+    {},
   );
   const reply = await MessageHandler.instance.postRequest({
     type: 'http-request',
@@ -50,7 +50,7 @@ async function fetch(
 
 export function createServiceManager(
   baseUrl: string,
-  token: string = ''
+  token: string = '',
 ): ServiceManager {
   const refSettings = ServerConnection.makeSettings();
   return new ServiceManager({
@@ -162,7 +162,7 @@ function protocolVerification(protocols?: string | string[]): string[] {
     throw new SyntaxError(
       `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The subprotocol '${(
         protocols as string | string[]
-      ).toString()}' is invalid.`
+      ).toString()}' is invalid.`,
     );
   }
   if (typeof protocols === 'string') {
@@ -177,7 +177,7 @@ function protocolVerification(protocols?: string | string[]): string[] {
   const duplicates = Object.keys(uniq).filter(a => uniq[a] > 1);
   if (duplicates.length > 0) {
     throw new SyntaxError(
-      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The subprotocol '${duplicates[0]}' is duplicated.`
+      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The subprotocol '${duplicates[0]}' is duplicated.`,
     );
   }
   return protocols.filter(p => p !== 'v1.kernel.websocket.jupyter.org');
@@ -188,7 +188,7 @@ function urlVerification(url: string | URL) {
   const { pathname, protocol, hash } = urlRecord;
   if (!url) {
     throw new TypeError(
-      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} 1 argument required, but only 0 present.`
+      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} 1 argument required, but only 0 present.`,
     );
   }
   if (!pathname) {
@@ -198,17 +198,17 @@ function urlVerification(url: string | URL) {
     throw new SyntaxError(
       `${
         ERROR_PREFIX.CONSTRUCTOR_ERROR
-      } The URL '${urlRecord.toString()}' is invalid.`
+      } The URL '${urlRecord.toString()}' is invalid.`,
     );
   }
   if (protocol !== 'ws:' && protocol !== 'wss:') {
     throw new SyntaxError(
-      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The URL's scheme must be either 'ws' or 'wss'. '${protocol}' is not allowed.`
+      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The URL's scheme must be either 'ws' or 'wss'. '${protocol}' is not allowed.`,
     );
   }
   if (hash !== '') {
     throw new SyntaxError(
-      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The URL contains a fragment identifier ('${hash}'). Fragment identifiers are not allowed in WebSocket URLs.`
+      `${ERROR_PREFIX.CONSTRUCTOR_ERROR} The URL contains a fragment identifier ('${hash}'). Fragment identifiers are not allowed in WebSocket URLs.`,
     );
   }
   return urlRecord.toString();
@@ -221,7 +221,7 @@ function urlVerification(url: string | URL) {
  * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
  */
 class EventTarget {
-  protected listeners: Map<string, Set<Function>> = new Map();
+  protected listeners: Map<string, Set<(...args: any[]) => void>> = new Map();
 
   /*
    * Ties a listener function to an event type which can later be invoked via the
@@ -231,7 +231,10 @@ class EventTarget {
    * @param {function} listener - callback function to invoke when an event is dispatched matching the type
    * @param {boolean} useCapture - N/A TODO: implement useCapture functionality
    */
-  addEventListener(type: string, listener: Function /* , useCapture */) {
+  addEventListener(
+    type: string,
+    listener: (...args: any[]) => void /* , useCapture */,
+  ) {
     if (typeof listener === 'function') {
       if (!this.listeners.has(type)) {
         this.listeners.set(type, new Set());
@@ -248,7 +251,10 @@ class EventTarget {
    * @param {function} listener - callback function to invoke when an event is dispatched matching the type
    * @param {boolean} useCapture - N/A TODO: implement useCapture functionality
    */
-  removeEventListener(type: string, listener: Function /* , useCapture */) {
+  removeEventListener(
+    type: string,
+    listener: (...args: any[]) => void /* , useCapture */,
+  ) {
     this.listeners.get(type)?.delete(listener);
   }
 
@@ -291,7 +297,7 @@ class WebSocket extends EventTarget {
     this.binaryType = 'blob';
     this._readyState = WebSocket.CONNECTING;
     this._disposable = MessageHandler.instance.registerCallback(
-      this._onExtensionMessage.bind(this)
+      this._onExtensionMessage.bind(this),
     );
     this._open();
   }
@@ -331,22 +337,22 @@ class WebSocket extends EventTarget {
     return this.listeners.get('error') as any;
   }
 
-  set onopen(listener: Function) {
+  set onopen(listener: (...args: any[]) => void) {
     this.listeners.delete('open');
     this.addEventListener('open', listener);
   }
 
-  set onmessage(listener: Function) {
+  set onmessage(listener: (...args: any[]) => void) {
     this.listeners.delete('message');
     this.addEventListener('message', listener);
   }
 
-  set onclose(listener: Function) {
+  set onclose(listener: (...args: any[]) => void) {
     this.listeners.delete('close');
     this.addEventListener('close', listener);
   }
 
-  set onerror(listener: Function) {
+  set onerror(listener: (...args: any[]) => void) {
     this.listeners.delete('error');
     this.addEventListener('error', listener);
   }
@@ -358,7 +364,7 @@ class WebSocket extends EventTarget {
         (code !== 1000 && (code < 3000 || code > 4999))
       ) {
         throw new TypeError(
-          `${ERROR_PREFIX.CLOSE_ERROR} The code must be either 1000, or between 3000 and 4999. ${code} is neither.`
+          `${ERROR_PREFIX.CLOSE_ERROR} The code must be either 1000, or between 3000 and 4999. ${code} is neither.`,
         );
       }
     }
@@ -368,7 +374,7 @@ class WebSocket extends EventTarget {
 
       if (length > 123) {
         throw new SyntaxError(
-          `${ERROR_PREFIX.CLOSE_ERROR} The message must not be greater than 123 bytes.`
+          `${ERROR_PREFIX.CLOSE_ERROR} The message must not be greater than 123 bytes.`,
         );
       }
     }
diff --git a/patches/@jupyterlite+javascript-kernel-extension+0.3.0.patch b/patches/@jupyterlite+javascript-kernel-extension+0.3.0.patch
new file mode 100644
index 000000000..100b45dd3
--- /dev/null
+++ b/patches/@jupyterlite+javascript-kernel-extension+0.3.0.patch
@@ -0,0 +1,28 @@
+diff --git a/node_modules/@jupyterlite/javascript-kernel-extension/lib/index.js b/node_modules/@jupyterlite/javascript-kernel-extension/lib/index.js
+index 52f2543..4cc94c6 100644
+--- a/node_modules/@jupyterlite/javascript-kernel-extension/lib/index.js
++++ b/node_modules/@jupyterlite/javascript-kernel-extension/lib/index.js
+@@ -2,8 +2,9 @@
+ // Distributed under the terms of the Modified BSD License.
+ import { IKernelSpecs } from '@jupyterlite/kernel';
+ import { JavaScriptKernel } from '@jupyterlite/javascript-kernel';
+-import jsLogo32 from '../style/icons/logo-32x32.png';
+-import jsLogo64 from '../style/icons/logo-64x64.png';
++// Removed logo imports - files don't exist in package
++// import jsLogo32 from '../style/icons/logo-32x32.png';
++// import jsLogo64 from '../style/icons/logo-64x64.png';
+ /**
+  * A plugin to register the JavaScript kernel.
+  */
+@@ -19,8 +20,9 @@ const kernel = {
+                 language: 'javascript',
+                 argv: [],
+                 resources: {
+-                    'logo-32x32': jsLogo32,
+-                    'logo-64x64': jsLogo64
++                    // Logo files don't exist in the package
++                    // 'logo-32x32': jsLogo32,
++                    // 'logo-64x64': jsLogo64
+                 }
+             },
+             create: async (options) => {
diff --git a/prettier.config.js b/prettier.config.js
deleted file mode 100755
index 387195de7..000000000
--- a/prettier.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-
-module.exports = {
-	singleQuote: true,
-	printWidth: 80,
-	jsxSingleQuote: false,
-	bracketSpacing: true,
-	arrowParens: 'avoid',
-	trailingComma: 'es5'
-};
diff --git a/storybook/.storybook/custom.css b/storybook/.storybook/custom.css
index b3ab3e9fb..329693f79 100644
--- a/storybook/.storybook/custom.css
+++ b/storybook/.storybook/custom.css
@@ -4,7 +4,7 @@
  * MIT License
  */
 
-@import url("https://use.fontawesome.com/releases/v5.0.10/css/all.css");
+@import url('https://use.fontawesome.com/releases/v5.0.10/css/all.css');
 
 .vertical-spacer {
   margin: 12px 0;
diff --git a/storybook/.storybook/main.ts b/storybook/.storybook/main.ts
index f028fb52e..6aeeef2d5 100644
--- a/storybook/.storybook/main.ts
+++ b/storybook/.storybook/main.ts
@@ -28,7 +28,7 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/react-webpack5'),
     options: {
       builder: {
-//        useSWC: true,
+        //        useSWC: true,
       },
     },
   },
@@ -66,8 +66,8 @@ const config: StorybookConfig = {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-react'],
-          cacheDirectory: true
-        }
+          cacheDirectory: true,
+        },
       },
       /*
       TODO(ECH) Disable for now to show the Lexical SVG icons.
@@ -122,7 +122,7 @@ const config: StorybookConfig = {
         generator: {
           filename: 'schema/[name][ext][query]',
         },
-      }
+      },
     );
     return config;
   },
diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html
index ee542a8d8..b7345e70f 100644
--- a/storybook/.storybook/preview-head.html
+++ b/storybook/.storybook/preview-head.html
@@ -31,8 +31,9 @@
 <script
   data-jupyter-widgets-cdn="https://cdn.jsdelivr.net/npm/"
   data-jupyter-widgets-cdn-only="true"
->
-</script>
-<link rel="shortcut icon"
+></script>
+<link
+  rel="shortcut icon"
   href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC7SURBVFiF7ZU9CgIxEIXfTHbPopfYc+pJ9AALtmJnZSOIoJWFoCTzLHazxh/Ebpt5EPIxM8XXTCKTxYyMCYwJFhOYCo4JFiMuu317PZwaqEBUIar4YMmskL73DytGjgu4gAt4PDJdzkkzMBloBhqBgcu69XW+1I+rNSQESNDuaMEhdP/Fj/7oW+ACLuACHk/3F5BAfuMLBjm8/ZnxNvNtHmY4b7Ztut0bqStoVSHfWj9Z6mr8LXABF3CBB3nvkDfEVN6PAAAAAElFTkSuQmCC"
-  type="image/x-icon" />
+  type="image/x-icon"
+/>
diff --git a/storybook/.storybook/preview.tsx b/storybook/.storybook/preview.tsx
index 814e39d88..1e95d4d3b 100644
--- a/storybook/.storybook/preview.tsx
+++ b/storybook/.storybook/preview.tsx
@@ -4,12 +4,15 @@
  * MIT License
  */
 
-import React from "react";
-import { Mermaid } from "mdx-mermaid/lib/Mermaid"
+import React from 'react';
+import { Mermaid } from 'mdx-mermaid/lib/Mermaid';
 import mermaid from 'mermaid';
 import zenuml from '@mermaid-js/mermaid-zenuml';
 import type { Preview } from '@storybook/react';
-import { toolbarTypes, withThemeProvider } from '../src/stories/_utils/story-helpers';
+import {
+  toolbarTypes,
+  withThemeProvider,
+} from '../src/stories/_utils/story-helpers';
 
 import '@jupyterlab/apputils/style/materialcolors.css';
 import '@jupyterlab/application/style/buttons.css';
@@ -28,12 +31,12 @@ const preview: Preview = {
     docs: {
       components: {
         code: props => {
-          return props.className?.includes("mermaid")
-            ? 
-              <Mermaid chart={props.children} />
-            :
-              <code {...props} />
-        }
+          return props.className?.includes('mermaid') ? (
+            <Mermaid chart={props.children} />
+          ) : (
+            <code {...props} />
+          );
+        },
       },
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -58,10 +61,10 @@ const preview: Preview = {
     */
     options: {
       storySort: {
-          method: 'alphabetical',
-          order: [ 'Welcome', '*'],
-          locales: 'en-US',
-      }
+        method: 'alphabetical',
+        order: ['Welcome', '*'],
+        locales: 'en-US',
+      },
     },
   },
 };
diff --git a/storybook/.yarnrc.yml b/storybook/.yarnrc.yml
index 7126b6d6a..0d0b2c083 100644
--- a/storybook/.yarnrc.yml
+++ b/storybook/.yarnrc.yml
@@ -6,16 +6,16 @@ enableInlineBuilds: false
 enableTelemetry: false
 httpTimeout: 60000
 nodeLinker: node-modules
-npmRegistryServer: "https://registry.yarnpkg.com"
+npmRegistryServer: 'https://registry.yarnpkg.com'
 checksumBehavior: update
 
 # This will fix the build error with @lerna/legacy-package-management
 # See https://github.com/lerna/repro/pull/11
 packageExtensions:
-  "@lerna/legacy-package-management@*":
+  '@lerna/legacy-package-management@*':
     dependencies:
-      "@lerna/child-process": "*"
-      "js-yaml": "*"
-      "rimraf": "*"
+      '@lerna/child-process': '*'
+      'js-yaml': '*'
+      'rimraf': '*'
     peerDependencies:
-      "nx": "*"
+      'nx': '*'
diff --git a/storybook/package.json b/storybook/package.json
index ebf76b147..eb5a97269 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -27,7 +27,8 @@
     "test:storybook": "test-storybook",
     "test:storybook:ci": "test-storybook --ci --maxWorkers=2",
     "test:mdx": "node test-storybook.js",
-    "test:all": "test-storybook --ci --maxWorkers=2 && node test-storybook.js"
+    "test:all": "test-storybook --ci --maxWorkers=2 && node test-storybook.js",
+    "test:all:ci": "test-storybook --ci --maxWorkers=2 --url http://localhost:6006 && node test-storybook.js"
   },
   "dependencies": {
     "@datalayer/jupyter-lexical": "^1.0.0",
diff --git a/storybook/src/index.ts b/storybook/src/index.ts
index f47f9bd36..9ab0e630e 100644
--- a/storybook/src/index.ts
+++ b/storybook/src/index.ts
@@ -3,4 +3,3 @@
  *
  * MIT License
  */
-
diff --git a/storybook/src/stories/Button.mdx b/storybook/src/stories/Button.mdx
index c15fc723a..1388d3f85 100644
--- a/storybook/src/stories/Button.mdx
+++ b/storybook/src/stories/Button.mdx
@@ -1,11 +1,11 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
-import {createLabButton} from './_utils/lab-builders';
+import { createLabButton } from './_utils/lab-builders';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
@@ -36,6 +36,7 @@ Four button variants are available.
 
 The JupyterLab button are the one visible in the dialogs. Their CSS rules
 is spread between 3 CSS stylesheets (in addition to the theme):
+
 - `@jupyterlab/application/style/buttons.css`
 - `@jupyterlab/ui-components/style/styling.css`
 - `@jupyterlab/apputils/style/dialog.css`
@@ -44,4 +45,12 @@ And they required to add manually the class `jp-mod-styled`. Otherwise,
 the button will not be styled; here is an example of the primary button
 missing that class:
 
-<div dangerouslySetInnerHTML={{__html: createLabButton({label: 'Unstyled', variant: 'primary', noModStyled: true })}}></div>
+<div
+  dangerouslySetInnerHTML={{
+    __html: createLabButton({
+      label: 'Unstyled',
+      variant: 'primary',
+      noModStyled: true,
+    }),
+  }}
+></div>
diff --git a/storybook/src/stories/Button.stories.tsx b/storybook/src/stories/Button.stories.tsx
index 4f032a779..b31fe9986 100644
--- a/storybook/src/stories/Button.stories.tsx
+++ b/storybook/src/stories/Button.stories.tsx
@@ -42,7 +42,10 @@ export const Default: Story = Template.bind({}) as Story;
 
 export const Playground: Story = {
   render: (args, options) =>
-    Template.bind({})({ label: 'Default', ...args }, { globals: { labComparison: true } }),
+    Template.bind({})(
+      { label: 'Default', ...args },
+      { globals: { labComparison: true } },
+    ),
 };
 Playground.argTypes = {
   size: {
@@ -73,21 +76,9 @@ Playground.argTypes = {
       type: 'boolean',
     },
   },
-  leadingVisual: ([
-    EyeClosedIcon,
-    EyeIcon,
-    SearchIcon,
-    XIcon,
-    HeartIcon,
-  ]),
-  trailingVisual: ([
-    EyeClosedIcon,
-    EyeIcon,
-    SearchIcon,
-    XIcon,
-    HeartIcon,
-  ]),
-  trailingAction: ([TriangleDownIcon]),
+  leadingVisual: [EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon],
+  trailingVisual: [EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon],
+  trailingAction: [TriangleDownIcon],
 };
 Playground.args = {
   block: false,
diff --git a/storybook/src/stories/Cell.mdx b/storybook/src/stories/Cell.mdx
index 7a41fc090..49084cd25 100644
--- a/storybook/src/stories/Cell.mdx
+++ b/storybook/src/stories/Cell.mdx
@@ -1,8 +1,8 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as CellStories from './Cell.stories';
diff --git a/storybook/src/stories/Cell.stories.tsx b/storybook/src/stories/Cell.stories.tsx
index ff8cb4493..9272bf7f6 100644
--- a/storybook/src/stories/Cell.stories.tsx
+++ b/storybook/src/stories/Cell.stories.tsx
@@ -37,7 +37,6 @@ export default meta;
 type Story = StoryObj<typeof Cell | typeof Jupyter | { lite: string }>;
 
 const Template = (args, { globals: { colorScheme } }) => {
-
   const { browser, initCode, ...others } = args;
   const lite = {
     true: true,
diff --git a/storybook/src/stories/Console.mdx b/storybook/src/stories/Console.mdx
index 5a66303ec..78d43d3b2 100644
--- a/storybook/src/stories/Console.mdx
+++ b/storybook/src/stories/Console.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ConsoleStories from './Console.stories';
 
 <Meta of={ConsoleStories} />
@@ -13,15 +13,21 @@ import * as ConsoleStories from './Console.stories';
 
 This component displays a Jupyter Console.
 
-<Canvas of={ConsoleStories.Default} source={{code: `<Jupyter
+<Canvas
+  of={ConsoleStories.Default}
+  source={{
+    code: `<Jupyter
     startDefaultKernel={true}
     jupyterServerUrl="https://oss.datalayer.run/api/jupyter-server"
     jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
 >
     <Console />
-</Jupyter>`}} />
+</Jupyter>`,
+  }}
+/>
 
 You can set the following props to connect it to a running Jupyter Server:
+
 - `jupyterServerUrl`: The server URL
 - `jupyterServerToken`: The server authentication token
 
@@ -34,24 +40,35 @@ It supports in-browser kernel (using [JupyterLite kernels](https://jupyterlite.r
 To use the [Pyodide](https://pyodide.org/) Python [kernel](https://github.com/jupyterlite/pyodide-kernel),
 you can simply set `lite` to `true`:
 
-<Canvas of={ConsoleStories.LitePython} source={{code: `<Jupyter
+<Canvas
+  of={ConsoleStories.LitePython}
+  source={{
+    code: `<Jupyter
     startDefaultKernel={true}
     lite={true}
 >
     <Console />
-</Jupyter>`}} />
+</Jupyter>`,
+  }}
+/>
 
 But you can also load your own JupyterLite kernel. For example here, the console loads
 the [JavaScript kernel](https://github.com/jupyterlite/jupyterlite/tree/main/py/jupyterlite-javascript-kernel).
 
-<Canvas of={ConsoleStories.LiteJavascript} source={{code: `<Jupyter
+<Canvas
+  of={ConsoleStories.LiteJavascript}
+  source={{
+    code: `<Jupyter
     startDefaultKernel={true}
     lite={import('@jupyterlite/javascript-kernel-extension')}
     defaultKernelName={'javascript'}
 >
     <Console />
-</Jupyter>`}} />
+</Jupyter>`,
+  }}
+/>
 
 To do so, you will need to specify two props:
+
 - `lite`: Should be set with the dynamic import of the kernel NPM package
 - `defaultKernelName`: Should match the name of the dynamically imported kernel
diff --git a/storybook/src/stories/FileManager.mdx b/storybook/src/stories/FileManager.mdx
index 4dc15c20d..ad1f30dcc 100644
--- a/storybook/src/stories/FileManager.mdx
+++ b/storybook/src/stories/FileManager.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as FileManagerStories from './FileManager.stories';
 
 <Meta of={FileManagerStories} />
diff --git a/storybook/src/stories/FileManager.stories.tsx b/storybook/src/stories/FileManager.stories.tsx
index c2c83ba14..d14cd1f96 100644
--- a/storybook/src/stories/FileManager.stories.tsx
+++ b/storybook/src/stories/FileManager.stories.tsx
@@ -5,7 +5,11 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Jupyter, FileManagerJupyterLab, FileBrowser } from '@datalayer/jupyter-react';
+import {
+  Jupyter,
+  FileManagerJupyterLab,
+  FileBrowser,
+} from '@datalayer/jupyter-react';
 import React from 'react';
 
 const meta: Meta<typeof FileBrowser> = {
@@ -32,7 +36,8 @@ const Template = (args, { globals: { labComparison } }) => {
 export const Default: Story = Template.bind({}) as Story;
 
 export const Playground: Story = {
-    render: (args, options) => Template.bind({})({ }, { globals: { labComparison: true } }),
+  render: (args, options) =>
+    Template.bind({})({}, { globals: { labComparison: true } }),
 };
 Playground.args = {};
 Playground.argTypes = {};
diff --git a/storybook/src/stories/Heading.mdx b/storybook/src/stories/Heading.mdx
index 8a42104a7..1065f3af6 100644
--- a/storybook/src/stories/Heading.mdx
+++ b/storybook/src/stories/Heading.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as HeadingStories from './Heading.stories';
 
 <Meta of={HeadingStories} />
@@ -47,9 +47,9 @@ the available range of size is 0 to 5 - 5 being the biggest size).
     fontSize: 'var(--jp-content-font-size1)',
   }}
 >
-  <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+  <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
     {'Expected change'}
-    <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+    <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
       {'Unexpected'}
     </span>
   </span>
@@ -62,9 +62,9 @@ the available range of size is 0 to 5 - 5 being the biggest size).
     fontSize: 'var(--jp-content-font-size1)',
   }}
 >
-  <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+  <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
     {'Expected change'}
-    <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+    <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
       {'Unexpected'}
     </span>
   </span>
diff --git a/storybook/src/stories/Icon.mdx b/storybook/src/stories/Icon.mdx
index c0d91ab5b..038e58733 100644
--- a/storybook/src/stories/Icon.mdx
+++ b/storybook/src/stories/Icon.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as IconStories from './Icon.stories';
 
 <Meta of={IconStories} />
diff --git a/storybook/src/stories/Notebook.mdx b/storybook/src/stories/Notebook.mdx
index c92d15fee..f9415b5f9 100644
--- a/storybook/src/stories/Notebook.mdx
+++ b/storybook/src/stories/Notebook.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as NotebookStories from './Notebook.stories';
 
 <Meta of={NotebookStories} />
diff --git a/storybook/src/stories/Notebook.stories.tsx b/storybook/src/stories/Notebook.stories.tsx
index f7ee13a4a..4bf1eff70 100644
--- a/storybook/src/stories/Notebook.stories.tsx
+++ b/storybook/src/stories/Notebook.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta<typeof Notebook> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Notebook | { initCode?: string}>;
+type Story = StoryObj<typeof Notebook | { initCode?: string }>;
 
 const Template = (args, { globals: { labComparison = true }, ...rest }) => {
   const { browser, initCode, ...others } = args;
@@ -43,7 +43,7 @@ const Template = (args, { globals: { labComparison = true }, ...rest }) => {
     args.browser === '@jupyterlite/javascript-kernel-extension'
       ? 'javascript'
       : undefined;
-  
+
   return (
     <Jupyter
       startDefaultKernel={true}
@@ -71,7 +71,6 @@ Default.args = {
   cellSidebarMargin: 120,
   height: '100vh',
   maxHeight: '100vh',
-  nbgrader: false,
   readonly: false,
   renderers: [],
 };
@@ -164,7 +163,7 @@ ConfettiWidget()`,
 df = px.data.stocks()
 fig = px.line(df, x="date", y=df.columns,
               hover_data={"date": "|%B %d, %Y"},
-              title=\'custom tick labels\')
+              title='custom tick labels')
 fig.update_xaxes(
     dtick="M1",
     tickformat="%b %Y",
@@ -237,7 +236,7 @@ IpywidgetsState.args = {
   ...Default.args,
   height: '200px',
   maxHeight: '200px',
-  url: 'https://raw.githubusercontent.com/datalayer/jupyter-ui/main/packages/react/src/examples/notebooks/IPyWidgetsExampleWithState.ipynb.json'
+  url: 'https://raw.githubusercontent.com/datalayer/jupyter-ui/main/packages/react/src/examples/notebooks/IPyWidgetsExampleWithState.ipynb.json',
 };
 
 export const Matplotlib: Story = {
@@ -246,7 +245,7 @@ export const Matplotlib: Story = {
 };
 Matplotlib.args = {
   ...Default.args,
-  url: 'https://raw.githubusercontent.com/datalayer/jupyter-ui/main/packages/react/src/examples/notebooks/Matplotlib.ipynb.json'
+  url: 'https://raw.githubusercontent.com/datalayer/jupyter-ui/main/packages/react/src/examples/notebooks/Matplotlib.ipynb.json',
 };
 
 export const LitePython: Story = {
diff --git a/storybook/src/stories/RichEditor.mdx b/storybook/src/stories/RichEditor.mdx
index 9f68b8a52..69275fb3b 100644
--- a/storybook/src/stories/RichEditor.mdx
+++ b/storybook/src/stories/RichEditor.mdx
@@ -1,8 +1,8 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as RichEditorStories from './RichEditor.stories';
diff --git a/storybook/src/stories/RichEditor.stories.tsx b/storybook/src/stories/RichEditor.stories.tsx
index 5123aa2ef..d4a13740e 100644
--- a/storybook/src/stories/RichEditor.stories.tsx
+++ b/storybook/src/stories/RichEditor.stories.tsx
@@ -10,8 +10,7 @@ import RichEditorMock from './RichEditorMock';
 const meta: Meta<typeof RichEditorMock> = {
   title: 'Components/RichEditor',
   component: RichEditorMock,
-  argTypes: {
-  },
+  argTypes: {},
 } as Meta<typeof RichEditorMock>;
 
 export default meta;
@@ -20,9 +19,7 @@ type Story = StoryObj<typeof RichEditorMock>;
 
 const Template = (args, { globals: { labComparison } }) => {
   const { nbformat, nbformatUrl, outputs, ...others } = args;
-  return (
-    <RichEditorMock/>
-  );
+  return <RichEditorMock />;
 };
 
 export const Default: Story = Template.bind({}) as Story;
diff --git a/storybook/src/stories/RichEditorMock.tsx b/storybook/src/stories/RichEditorMock.tsx
index 28702739b..a246ba03a 100644
--- a/storybook/src/stories/RichEditorMock.tsx
+++ b/storybook/src/stories/RichEditorMock.tsx
@@ -4,14 +4,18 @@
  * MIT License
  */
 
-import { Button } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
-import { ThreeBarsIcon } from "@primer/octicons-react";
-import { Jupyter } from "@datalayer/jupyter-react";
-import { useLexical, Editor, LexicalProvider } from "@datalayer/jupyter-lexical";
+import { Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ThreeBarsIcon } from '@primer/octicons-react';
+import { Jupyter } from '@datalayer/jupyter-react';
+import {
+  useLexical,
+  Editor,
+  LexicalProvider,
+} from '@datalayer/jupyter-lexical';
 
-import LEXICAL_MODEL from "@datalayer/jupyter-lexical/lib/examples/content/Example.lexical.json";
-import NBFORMAT_MODEL from "@datalayer/jupyter-lexical/lib/examples/content/Example.ipynb.json";
+import LEXICAL_MODEL from '@datalayer/jupyter-lexical/lib/examples/content/Example.lexical.json';
+import NBFORMAT_MODEL from '@datalayer/jupyter-lexical/lib/examples/content/Example.ipynb.json';
 
 const LexicalEditor = () => {
   const { editor } = useLexical();
@@ -24,22 +28,23 @@ const LexicalEditor = () => {
             e.preventDefault();
             if (editor) {
               const editorState = editor.parseEditorState(LEXICAL_MODEL as any);
-              editor.setEditorState(editorState);  
+              editor.setEditorState(editorState);
             }
-          }}>
-            Load Lexical Model
+          }}
+        >
+          Load Lexical Model
         </Button>
       </Box>
     </Box>
-  )
-}
+  );
+};
 
 export const RichEditorMock = () => {
   // Check if we're in a test environment
-  const isTestEnvironment = 
-    typeof window !== 'undefined' && 
-    (window.location.hostname === 'localhost' || 
-     window.location.hostname === '127.0.0.1') &&
+  const isTestEnvironment =
+    typeof window !== 'undefined' &&
+    (window.location.hostname === 'localhost' ||
+      window.location.hostname === '127.0.0.1') &&
     !window.location.search.includes('kernel=true');
 
   return (
@@ -47,30 +52,39 @@ export const RichEditorMock = () => {
       <div className="App">
         <h1>Jupyter UI ❤️ Lexical</h1>
       </div>
-      <Jupyter 
+      <Jupyter
         startDefaultKernel={!isTestEnvironment}
         serverless={isTestEnvironment}
       >
         <LexicalProvider>
-          <LexicalEditor/>
+          <LexicalEditor />
         </LexicalProvider>
       </Jupyter>
       <div className="other App">
-        <br/>
-        <a href="https://datalayer.ai" target="_blank">
-          <ThreeBarsIcon/>
+        <br />
+        <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+          <ThreeBarsIcon />
         </a>
         <h2>
-          Copyright © <a href="https://datalayer.ai" target="_blank">2022 Datalayer, Inc.</a>
+          Copyright ©{' '}
+          <a href="https://datalayer.ai" target="_blank" rel="noreferrer">
+            2022 Datalayer, Inc.
+          </a>
         </h2>
         <ul>
           <li>
-            <a href="https://github.com/datalayer/jupyter-ui/tree/main/packages/lexical" target="_blank">Jupyter UI open-source repository</a>
+            <a
+              href="https://github.com/datalayer/jupyter-ui/tree/main/packages/lexical"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Jupyter UI open-source repository
+            </a>
           </li>
         </ul>
       </div>
     </>
-  )
-}
+  );
+};
 
-export default RichEditorMock;
\ No newline at end of file
+export default RichEditorMock;
diff --git a/storybook/src/stories/Terminal.mdx b/storybook/src/stories/Terminal.mdx
index 64ec00911..248648b0a 100644
--- a/storybook/src/stories/Terminal.mdx
+++ b/storybook/src/stories/Terminal.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as TerminalStories from './Terminal.stories';
 
 <Meta of={TerminalStories} />
diff --git a/storybook/src/stories/Text.mdx b/storybook/src/stories/Text.mdx
index 20004dead..e811cd8a9 100644
--- a/storybook/src/stories/Text.mdx
+++ b/storybook/src/stories/Text.mdx
@@ -1,10 +1,10 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
-import {Canvas, Meta} from '@storybook/addon-docs/blocks';
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as TextStories from './Text.stories';
 
 <Meta of={TextStories} />
@@ -24,11 +24,13 @@ This component displays a text with any kind of html tag. By default it is a `sp
 > You can display the JupyterLab equivalent component through the toolbar.
 
 In JupyterLab, you can use the font family CSS properties:
+
 - `--jp-content-font-family`
 - `--jp-ui-font-family`
 - `--jp-code-font-family`
 
 And for the font size:
+
 - `--jp-content-font-size#` (range from 0 to 5)
 - `--jp-ui-font-size#` (range from 0 to 3)
 - `--jp-code-font-size` (unique value)
@@ -54,9 +56,9 @@ And for the font size:
     fontSize: 'var(--jp-content-font-size1)',
   }}
 >
-  <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+  <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
     {'Expected change'}
-    <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+    <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
       {'Unexpected'}
     </span>
   </span>
@@ -69,9 +71,9 @@ And for the font size:
     fontSize: 'var(--jp-content-font-size1)',
   }}
 >
-  <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+  <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
     {'Expected change'}
-    <span style={{fontSize: 'var(--jp-content-font-size3)'}}>
+    <span style={{ fontSize: 'var(--jp-content-font-size3)' }}>
       {'Unexpected'}
     </span>
   </span>
diff --git a/storybook/src/stories/TextInput.mdx b/storybook/src/stories/TextInput.mdx
index ba6c0ef49..69ea81bc7 100644
--- a/storybook/src/stories/TextInput.mdx
+++ b/storybook/src/stories/TextInput.mdx
@@ -1,8 +1,8 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as TextInputStories from './TextInput.stories';
@@ -22,4 +22,5 @@ This component allows an user to provide a string.
 The JupyterLab `InputGroup` are the one displayed in the filebrowser
 filter or in the extension filter. Their CSS rules
 are defined in the CSS stylesheet (in addition to the theme):
+
 - `@jupyterlab/ui-components/style/base.css`
diff --git a/storybook/src/stories/TextInput.stories.tsx b/storybook/src/stories/TextInput.stories.tsx
index d54fef094..04674c2f6 100644
--- a/storybook/src/stories/TextInput.stories.tsx
+++ b/storybook/src/stories/TextInput.stories.tsx
@@ -38,7 +38,10 @@ export const Default = Template.bind({}) as Story;
 
 export const Playground: Story = {
   render: (args, options) =>
-    Template.bind({})({ label: 'TextInput', ...args }, { globals: { labComparison: true } }),
+    Template.bind({})(
+      { label: 'TextInput', ...args },
+      { globals: { labComparison: true } },
+    ),
 };
 Playground.args = {
   type: 'text',
diff --git a/storybook/src/stories/Viewer.mdx b/storybook/src/stories/Viewer.mdx
index 74dfc4e54..6116c18e7 100644
--- a/storybook/src/stories/Viewer.mdx
+++ b/storybook/src/stories/Viewer.mdx
@@ -1,8 +1,8 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 import * as ViewerStories from './Viewer.stories';
diff --git a/storybook/src/stories/Viewer.stories.tsx b/storybook/src/stories/Viewer.stories.tsx
index 0057fd1b4..88dc5b23d 100644
--- a/storybook/src/stories/Viewer.stories.tsx
+++ b/storybook/src/stories/Viewer.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<typeof Viewer> = {
       control: 'boolean',
     },
   },
-// } as Meta<typeof Viewer>;
+  // } as Meta<typeof Viewer>;
 } as any;
 
 export default meta;
diff --git a/storybook/src/stories/Welcome.mdx b/storybook/src/stories/Welcome.mdx
index 28106f38d..ad8f25e77 100644
--- a/storybook/src/stories/Welcome.mdx
+++ b/storybook/src/stories/Welcome.mdx
@@ -1,15 +1,15 @@
-{/*
-  ~ Copyright (c) 2021-2023 Datalayer, Inc.
-  ~
-  ~ MIT License
-*/}
+{/**
+~ Copyright (c) 2021-2023 Datalayer, Inc.
+~
+~ MIT License
+**/}
 
 import { Canvas, Meta } from '@storybook/addon-docs/blocks';
 
 import * as NotebookStories from './Notebook.stories';
 import * as ButtonStories from './Button.stories';
 
-<Meta title='Welcome' />
+<Meta title="Welcome" />
 
 # Welcome to Jupyter UI by Datalayer
 
diff --git a/storybook/src/stories/_utils/lab-builders.ts b/storybook/src/stories/_utils/lab-builders.ts
index 89d5a3d4d..847d54b14 100644
--- a/storybook/src/stories/_utils/lab-builders.ts
+++ b/storybook/src/stories/_utils/lab-builders.ts
@@ -15,7 +15,7 @@ export function createLabButton(args): string {
       label: args.label ?? 'Default',
       displayType: args.variant === 'danger' ? 'warn' : undefined,
       accept: args.variant === 'primary' ? true : false,
-    })
+    }),
   );
   if (!args.noModStyled) {
     labButton.classList.add('jp-mod-styled');
diff --git a/storybook/src/stories/_utils/story-helpers.tsx b/storybook/src/stories/_utils/story-helpers.tsx
index b45af8ccb..da3d43a8b 100644
--- a/storybook/src/stories/_utils/story-helpers.tsx
+++ b/storybook/src/stories/_utils/story-helpers.tsx
@@ -29,12 +29,12 @@ const GlobalStyle = createGlobalStyle`
 `;
 
 export const colormodeFromScheme = (colorScheme: string) => {
-  return colorScheme.startsWith('light') ? 'light' : 'dark'
-}
+  return colorScheme.startsWith('light') ? 'light' : 'dark';
+};
 
 export const withThemeProvider = (
   Story: React.FC<React.PropsWithChildren<StoryContext>>,
-  context: StoryContext
+  context: StoryContext,
 ) => {
   // used for testing ThemeProvider.stories.tsx
   if (context.parameters.disableThemeDecorator) return Story(context);
diff --git a/storybook/test-runner-jest.config.js b/storybook/test-runner-jest.config.js
index bd9449de8..a1df105ac 100644
--- a/storybook/test-runner-jest.config.js
+++ b/storybook/test-runner-jest.config.js
@@ -20,4 +20,4 @@ module.exports = {
       },
     },
   },
-};
\ No newline at end of file
+};
diff --git a/storybook/test-storybook.js b/storybook/test-storybook.js
index 25c22a31d..66ce1c3da 100644
--- a/storybook/test-storybook.js
+++ b/storybook/test-storybook.js
@@ -11,53 +11,58 @@ const path = require('path');
 async function testStorybookDocs() {
   const browser = await chromium.launch({ headless: true });
   const page = await browser.newPage();
-  
+
   let hasErrors = false;
   const results = [];
-  
+
   // Get all MDX files
   const storiesDir = path.join(__dirname, 'src', 'stories');
-  const mdxFiles = fs.readdirSync(storiesDir)
+  const mdxFiles = fs
+    .readdirSync(storiesDir)
     .filter(file => file.endsWith('.mdx'))
     .map(file => file.replace('.mdx', '').toLowerCase());
-  
+
   console.log(`Found ${mdxFiles.length} MDX documentation pages to test\n`);
-  
+
   // Suppress console warnings but capture real errors
   page.on('console', msg => {
-    if (msg.type() === 'error' && 
-        !msg.text().includes('defaultProps') && 
-        !msg.text().includes('unique "key" prop')) {
+    if (
+      msg.type() === 'error' &&
+      !msg.text().includes('defaultProps') &&
+      !msg.text().includes('unique "key" prop')
+    ) {
       console.error('Console error:', msg.text());
       hasErrors = true;
     }
   });
-  
+
   page.on('pageerror', error => {
     console.error('Page error:', error.message);
     hasErrors = true;
   });
-  
+
   // Test each MDX documentation page
   for (const mdxFile of mdxFiles) {
     const url = `http://localhost:6006/?path=/docs/${mdxFile === 'welcome' ? 'welcome' : `components-${mdxFile}`}--docs`;
-    
+
     try {
       console.log(`Testing: ${mdxFile}.mdx`);
       await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15000 });
-      
+
       // Wait for content to render
       await page.waitForTimeout(1000);
-      
+
       // Check if content is present
       const hasContent = await page.evaluate(() => {
-        const docRoot = document.querySelector('#storybook-docs, #docs-root, .sbdocs, main');
+        const docRoot = document.querySelector(
+          '#storybook-docs, #docs-root, .sbdocs, main',
+        );
         if (!docRoot) return false;
-        
+
         const text = docRoot.innerText || docRoot.textContent || '';
         return text.trim().length > 0;
       });
-      
+
       if (hasContent) {
         console.log(`✓ ${mdxFile}.mdx rendered successfully`);
         results.push({ file: mdxFile, status: 'success' });
@@ -72,18 +77,18 @@ async function testStorybookDocs() {
       hasErrors = true;
     }
   }
-  
+
   await browser.close();
-  
+
   // Summary
   console.log('\n=== Test Summary ===');
   const successful = results.filter(r => r.status === 'success').length;
   const failed = results.length - successful;
-  
+
   console.log(`Total: ${results.length} MDX files`);
   console.log(`Passed: ${successful}`);
   console.log(`Failed: ${failed}`);
-  
+
   if (hasErrors) {
     console.error('\n❌ Some tests failed');
     process.exit(1);
@@ -96,4 +101,4 @@ async function testStorybookDocs() {
 testStorybookDocs().catch(error => {
   console.error('Test execution failed:', error);
   process.exit(1);
-});
\ No newline at end of file
+});
diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json
index 5ad259ea5..4f75d17ed 100644
--- a/storybook/tsconfig.json
+++ b/storybook/tsconfig.json
@@ -1,14 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/tsconfig",
-  "include": [
-    "src/**/*.js",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.json"
-  ],
-  "exclude": [
-    "**/node_modules"
-  ],
+  "include": ["src/**/*.js", "src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
+  "exclude": ["**/node_modules"],
   "compilerOptions": {
     "baseUrl": "./",
     "allowSyntheticDefaultImports": true,
@@ -29,9 +22,7 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "ES2022",
-    "types": [
-      "node",
-      "jest"
-    ]
+    "types": ["node", "jest"],
+    "skipLibCheck": true
   }
 }
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
new file mode 100644
index 000000000..8f1d4efd6
--- /dev/null
+++ b/tsconfig.eslint.json
@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    ".eslintrc.js",
+    "*.config.js",
+    "*.config.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+    "lib",
+    "coverage",
+    ".next",
+    "storybook-static"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..0229c1f40
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "types": ["node", "jest"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./",
+    "composite": true,
+    "incremental": true
+  },
+  "references": [
+    { "path": "./packages/react" },
+    { "path": "./packages/lexical" },
+    { "path": "./packages/docusaurus-plugin" },
+    { "path": "./packages/vscode" },
+    { "path": "./storybook" },
+    { "path": "./examples/vite" },
+    { "path": "./examples/next-js" },
+    { "path": "./examples/lexical" }
+  ],
+  "include": [],
+  "exclude": [
+    "node_modules",
+    "**/node_modules",
+    "dist",
+    "**/dist",
+    "build",
+    "**/build",
+    "attic",
+    "**/attic",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/tests"
+  ]
+}
diff --git a/typedoc.json b/typedoc.json
index cd567ca5e..222c0d7dd 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -1,9 +1,5 @@
 {
-  "entryPoints": [
-    "./src/index.ts"
-  ],
-  "exclude": [
-    "src/examples"
-  ],
+  "entryPoints": ["./src/index.ts"],
+  "exclude": ["src/examples"],
   "out": "typedoc"
 }