Update @codemirror/view to latest (#18550)

.github/renovate.json5

@@ -94,8 +94,6 @@
     "prettier",
     // Old versions are required to test
     "node",
-    // Only pinned version works, https://github.com/prettier/prettier/pull/18524#issuecomment-3694806317
-    "@codemirror/view",
   ],
   ignorePaths: ["tests/**", "packages/**"],
 }

website/package.json

@@ -22,7 +22,7 @@
     "@codemirror/language-data": "6.5.2",
     "@codemirror/lint": "6.9.2",
     "@codemirror/state": "6.5.3",
-    "@codemirror/view": "6.39.4",
+    "@codemirror/view": "6.39.8",
     "@docusaurus/preset-classic": "3.9.2",
     "@lezer/highlight": "1.2.3",
     "@mdx-js/react": "3.1.1",
@@ -53,9 +53,6 @@
     "vite": "7.2.7",
     "yaml": "2.8.2"
   },
-  "resolutions": {
-    "@codemirror/view": "6.39.4"
-  },
   "browserslist": {
     "production": [
       ">0.5%",

website/playground/panels.jsx

@@ -99,7 +99,7 @@ function setup(props, { emit }) {
     });
   };
 
-  const componentDidMount = async () => {
+  const componentDidMount = () => {
     const options = { ...props };
     for (const property of [
       "ruler",
@@ -117,8 +117,6 @@ function setup(props, { emit }) {
       }
     }
 
-    const lang = await getLanguageExtension(props.mode);
-
     const state = EditorState.create({
       doc: props.value || "",
       extensions: [
@@ -134,7 +132,7 @@ function setup(props, { emit }) {
         props.autoCloseBrackets ? closeBrackets() : undefined,
         props.matchBrackets ? bracketMatching() : undefined,
 
-        languageExt.of(lang),
+        languageExt.of([]),
         editorTheme.of(
           theme.value === "dark" ? catppuccinMocha : catppuccinLatte,
         ),
@@ -183,30 +181,19 @@ function setup(props, { emit }) {
 
     updateSelection();
     updateOverlay();
+    updateMode();
   };
 
   const componentWillUnmount = () => {
     _codeMirror?.destroy();
   };
 
-  const updateValue = (value) => {
+  const foldCode = () => {
-    if (_cached === value) {
+    if (!_codeMirror || !(props.autoFold instanceof RegExp)) {
-      return;
-    }
-    _cached = value;
-    _codeMirror.dispatch({
-      changes: {
-        from: 0,
-        to: _codeMirror.state.doc.length,
-        insert: value,
-      },
-    });
-
-    if (!(props.autoFold instanceof RegExp)) {
       return;
     }
 
-    const lines = value.split("\n");
+    const lines = props.value.split("\n");
     const effects = [];
 
     for (let i = lines.length - 1; i >= 0; i--) {
@@ -229,6 +216,21 @@ function setup(props, { emit }) {
     }
   };
 
+  const updateValue = (value) => {
+    if (_cached === value) {
+      return;
+    }
+    _cached = value;
+    _codeMirror?.dispatch({
+      changes: {
+        from: 0,
+        to: _codeMirror.state.doc.length,
+        insert: value,
+      },
+    });
+    foldCode();
+  };
+
   const updateSelection = () => {
     if (!props.selection || !_codeMirror) {
       return;
@@ -247,11 +249,7 @@ function setup(props, { emit }) {
   };
 
   const updateOverlay = () => {
-    if (!_codeMirror) {
+    _codeMirror?.dispatch({
-      return;
-    }
-
-    _codeMirror.dispatch({
       effects: _overlay.of({
         start: props.overlayStart,
         end: props.overlayEnd,
@@ -259,6 +257,13 @@ function setup(props, { emit }) {
     });
   };
 
+  const updateMode = async () => {
+    _codeMirror?.dispatch({
+      effects: languageExt.reconfigure(await getLanguageExtension(props.mode)),
+    });
+    foldCode();
+  };
+
   const handleChange = (value) => {
     _cached = value;
     onChange(value);
@@ -298,18 +303,7 @@ function setup(props, { emit }) {
     },
   );
 
-  watch(
+  watch(() => props.mode, updateMode);
-    () => props.mode,
-    async (mode) => {
-      if (!_codeMirror) {
-        return;
-      }
-
-      _codeMirror.dispatch({
-        effects: languageExt.reconfigure(await getLanguageExtension(mode)),
-      });
-    },
-  );
 
   watch(
     () => props.ruler,

website/vite.config.mjs

@@ -9,13 +9,15 @@ import packageJson from "./package.json" with { type: "json" };
 const IS_PRODUCTION = process.env.NODE_ENV === "production";
 const IS_CI = Boolean(process.env.CI);
 const OUT_DIRECTORY = "./static/playground/";
-const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set(
+const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set([
-  [
+  "cm6-graphql",
-    IS_PRODUCTION ? undefined : "vue",
+  "@docusaurus/preset-classic",
-    "cm6-graphql",
+]);
-    "@docusaurus/preset-classic",
+
-  ].filter(Boolean),
+// Local develop requires `vue` for HMR
-);
+if (!IS_PRODUCTION) {
+  DEPENDENCIES_EXCLUDE_FROM_CDN.add("vue");
+}
 
 export default defineConfig(async () => ({
   base: IS_PRODUCTION ? "/playground/" : undefined,

website/yarn.lock

@@ -1914,15 +1914,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.39.4":
+"@codemirror/view@npm:6.39.8, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0, @codemirror/view@npm:^6.35.0":
-  version: 6.39.4
+  version: 6.39.8
-  resolution: "@codemirror/view@npm:6.39.4"
+  resolution: "@codemirror/view@npm:6.39.8"
   dependencies:
     "@codemirror/state": "npm:^6.5.0"
     crelt: "npm:^1.0.6"
     style-mod: "npm:^4.1.0"
     w3c-keyname: "npm:^2.2.4"
-  checksum: 10/8fa1122f2c1dec38eb3a68cd7173c77ea21625bcf2164374bef482213b35222a7811bcc74f221c932c165f8d0a13a17b57456bed6fbae2b12cb9b8355664995a
+  checksum: 10/a15941940fabc9b595da00a7760947cf7ce83f3f819be31250a73d2a1de5d1b5528a5803aa19c74656d2d7cbc39f47daec4962190ffc0849f4f359e45b4f1c3a
   languageName: node
   linkType: hard
 
@@ -13232,7 +13232,7 @@ __metadata:
     "@codemirror/language-data": "npm:6.5.2"
     "@codemirror/lint": "npm:6.9.2"
     "@codemirror/state": "npm:6.5.3"
-    "@codemirror/view": "npm:6.39.4"
+    "@codemirror/view": "npm:6.39.8"
     "@docusaurus/core": "npm:3.9.2"
     "@docusaurus/faster": "npm:3.9.2"
     "@docusaurus/module-type-aliases": "npm:3.9.2"