docs: migrate website editors from Monaco to CodeMirror

Author: jtkiesel

.prettierrc.yaml

@@ -1,3 +1,5 @@
+plugins:
+  - prettier-plugin-css-order
 trailingComma: "none"
 useTabs: false
 tabWidth: 2

package.json

@@ -27,8 +27,8 @@
     "build": "tsdown && cp node_modules/tree-sitter-java-orchard/tree-sitter-java_orchard.wasm dist/",
     "ci": "yarn build && yarn lint && yarn format:validate && yarn test",
     "clone-samples": "node scripts/clone-samples.js",
-    "format:fix": "prettier --write \"**/*.@(js|json|ts)\"",
-    "format:validate": "prettier --list-different \"**/*.@(js|json|ts)\"",
+    "format:fix": "prettier --write \"**/*.@(css|js|json|ts|tsx)\"",
+    "format:validate": "prettier --list-different \"**/*.@(css|js|json|ts|tsx)\"",
     "generate-node-types": "node scripts/generate-node-types.ts && prettier --write src/node-types.ts",
     "lerna:publish": "lerna publish from-git --yes",
     "lerna:version": "lerna version --exact --no-private",
@@ -69,7 +69,9 @@
     "lint-staged": "^17.0.2",
     "mitata": "^1.0.34",
     "mocha": "^11.7.5",
+    "postcss": "^8.5.15",
     "prettier": "^3.8.1",
+    "prettier-plugin-css-order": "^2.2.0",
     "tree-sitter-java-orchard": "0.5.8",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.3",

src/comments.ts

@@ -490,8 +490,7 @@ function printTrailingComments(path: NamedNodePath) {
   }
   const docs: Doc[] = [];
   let printedTrailingComment:
-    | ReturnType<typeof printTrailingComment>
-    | undefined;
+    ReturnType<typeof printTrailingComment> | undefined;
 
   path.each(path => {
     const { node: comment } = path;

src/node-types.ts

@@ -1064,9 +1064,7 @@ export interface LambdaExpressionNode extends NamedNodeBase {
   type: SyntaxType.LambdaExpression;
   bodyNode: BlockNode | ExpressionNode;
   parametersNode:
-    | FormalParametersNode
-    | IdentifierNode
-    | InferredParametersNode;
+    FormalParametersNode | IdentifierNode | InferredParametersNode;
 }
 
 export interface LocalVariableDeclarationNode extends NamedNodeBase {
@@ -1338,10 +1336,7 @@ export interface UnaryExpressionNode extends NamedNodeBase {
   type: SyntaxType.UnaryExpression;
   operandNode: ExpressionNode;
   operatorNode:
-    | UnnamedNode<"!">
-    | UnnamedNode<"+">
-    | UnnamedNode<"-">
-    | UnnamedNode<"~">;
+    UnnamedNode<"!"> | UnnamedNode<"+"> | UnnamedNode<"-"> | UnnamedNode<"~">;
 }
 
 export interface UpdateExpressionNode extends NamedNodeBase {

website/docusaurus.config.ts

@@ -93,20 +93,20 @@ export default {
       name: "webpack-config-plugin",
       configureWebpack(_, isServer) {
         return {
-          resolve: isServer
-            ? {}
-            : {
-                fallback: {
-                  "fs/promises": false,
-                  module: false
-                }
-              },
-          externals: isServer
-            ? {
-                "prettier-plugin-java": "commonjs prettier-plugin-java",
-                "web-tree-sitter": "commonjs web-tree-sitter"
+          resolve: {
+            ...(!isServer && {
+              fallback: {
+                "fs/promises": false,
+                module: false
               }
-            : {}
+            })
+          },
+          externals: {
+            ...(isServer && {
+              "prettier-plugin-java": "commonjs prettier-plugin-java",
+              "web-tree-sitter": "commonjs web-tree-sitter"
+            })
+          }
         };
       }
     })

website/package.json

@@ -15,23 +15,31 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3",
-    "@docusaurus/preset-classic": "^3",
-    "@mdx-js/react": "^3",
-    "@monaco-editor/react": "^4",
-    "lz-string": "^1",
-    "prettier": "^3",
+    "@catppuccin/codemirror": "1.0.3",
+    "@catppuccin/palette": "1.8.0",
+    "@codemirror/autocomplete": "6.20.3",
+    "@codemirror/commands": "6.10.4",
+    "@codemirror/lang-java": "6.0.2",
+    "@codemirror/language": "6.12.4",
+    "@codemirror/search": "6.7.1",
+    "@codemirror/state": "6.7.1",
+    "@codemirror/view": "6.43.5",
+    "@docusaurus/core": "3.10.1",
+    "@docusaurus/preset-classic": "3.10.1",
+    "@mdx-js/react": "3.1.1",
+    "lz-string": "1.5.0",
+    "prettier": "3.9.4",
     "prettier-plugin-java": "link:..",
-    "prism-react-renderer": "^2",
-    "react": "^19",
-    "react-dom": "^19"
+    "prism-react-renderer": "2.4.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3",
-    "@docusaurus/tsconfig": "^3",
-    "@docusaurus/types": "^3",
-    "@types/react": "^19",
-    "typescript": "^5"
+    "@docusaurus/module-type-aliases": "3.10.1",
+    "@docusaurus/tsconfig": "3.10.1",
+    "@docusaurus/types": "3.10.1",
+    "@types/react": "19.2.17",
+    "typescript": "6.0.3"
   },
   "browserslist": {
     "production": [

website/src/components/CodeEditor/index.module.css

@@ -1,17 +1,22 @@
 .editor {
-  width: calc(50vw - 100px);
-  height: calc(100vh - 60px);
-  border-left: 1px solid #ddd;
+  position: relative;
+  flex: 1;
+  border-bottom: var(--playground-border);
+  min-inline-size: 0;
+  min-block-size: 0;
+  font-size: 12px;
 }
 
-@media (max-width: 996px) {
-  .editor {
-    width: calc(100vw - 200px);
-    height: calc(50vh - 30px);
-    border-bottom: 1px solid #ddd;
-  }
-
-  .editor ~ .editor {
-    border-bottom: none;
-  }
+.editorName {
+  position: absolute;
+  opacity: 0.4;
+  z-index: 10;
+  inset-block-end: 1px;
+  inset-inline-start: 1px;
+  border-start-end-radius: 4px;
+  background: #000;
+  padding: 0.25em 0.5em;
+  pointer-events: none;
+  color: #fff;
+  line-height: 1.25;
 }