docs: add rulers to playground editors

Author: jtkiesel

website/package.json

@@ -15,23 +15,23 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.5.2",
-    "@docusaurus/preset-classic": "3.5.2",
-    "@mdx-js/react": "3.1.0",
-    "@monaco-editor/react": "4.6.0",
-    "lz-string": "1.5.0",
-    "prettier": "3.4.2",
+    "@docusaurus/core": "^3",
+    "@docusaurus/preset-classic": "^3",
+    "@mdx-js/react": "^3",
+    "@monaco-editor/react": "^4",
+    "lz-string": "^1",
+    "prettier": "^3",
     "prettier-plugin-java": "file:./../packages/prettier-plugin-java/dist",
-    "prism-react-renderer": "2.4.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "prism-react-renderer": "^2",
+    "react": "^19",
+    "react-dom": "^19"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.5.2",
-    "@docusaurus/tsconfig": "3.5.2",
-    "@docusaurus/types": "3.5.2",
-    "@types/react": "18.3.12",
-    "typescript": "5.6.3"
+    "@docusaurus/module-type-aliases": "^3",
+    "@docusaurus/tsconfig": "^3",
+    "@docusaurus/types": "^3",
+    "@types/react": "^19",
+    "typescript": "^5"
   },
   "browserslist": {
     "production": [

website/src/components/CodeEditor/index.tsx

@@ -5,6 +5,7 @@ import styles from "./index.module.css";
 export default function CodeEditor(
   props: Readonly<{
     readOnly?: boolean;
+    rulers?: number[];
     value?: string;
     onChange?: (value: string | undefined) => void;
   }>
@@ -15,7 +16,7 @@ export default function CodeEditor(
     <div className={styles.editor}>
       <Editor
         language="java"
-        options={{ readOnly: props.readOnly }}
+        options={{ readOnly: props.readOnly, rulers: props.rulers }}
         theme={colorMode === "dark" ? "vs-dark" : "light"}
         value={props.value}
         onChange={props.onChange}

website/src/pages/playground/index.tsx

@@ -164,9 +164,9 @@ function Inner() {
         </details>
       </div>
       <div className={styles.editors}>
-        <CodeEditor value={code} onChange={setCode} />
+        <CodeEditor rulers={[printWidth]} value={code} onChange={setCode} />
         {isFirstRun.current ? null : (
-          <CodeEditor readOnly value={formattedCode} />
+          <CodeEditor readOnly rulers={[printWidth]} value={formattedCode} />
         )}
       </div>
     </div>