diff --git a/.github/renovate.json5 b/.github/renovate.json5 index f8c086a53..1c604fc2c 100644 --- a/.github/renovate.json5 +++ b/.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/**"], } diff --git a/website/package.json b/website/package.json index 33a37076c..43383fb87 100644 --- a/website/package.json +++ b/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%", diff --git a/website/playground/panels.jsx b/website/playground/panels.jsx index b9ed75e24..ecd1cdf84 100644 --- a/website/playground/panels.jsx +++ b/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) => { - if (_cached === value) { - return; - } - _cached = value; - _codeMirror.dispatch({ - changes: { - from: 0, - to: _codeMirror.state.doc.length, - insert: value, - }, - }); - - if (!(props.autoFold instanceof RegExp)) { + const foldCode = () => { + if (!_codeMirror || !(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) { - return; - } - - _codeMirror.dispatch({ + _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( - () => props.mode, - async (mode) => { - if (!_codeMirror) { - return; - } - - _codeMirror.dispatch({ - effects: languageExt.reconfigure(await getLanguageExtension(mode)), - }); - }, - ); + watch(() => props.mode, updateMode); watch( () => props.ruler, diff --git a/website/vite.config.mjs b/website/vite.config.mjs index b70a91574..b5d3a478c 100644 --- a/website/vite.config.mjs +++ b/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( - [ - IS_PRODUCTION ? undefined : "vue", - "cm6-graphql", - "@docusaurus/preset-classic", - ].filter(Boolean), -); +const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set([ + "cm6-graphql", + "@docusaurus/preset-classic", +]); + +// Local develop requires `vue` for HMR +if (!IS_PRODUCTION) { + DEPENDENCIES_EXCLUDE_FROM_CDN.add("vue"); +} export default defineConfig(async () => ({ base: IS_PRODUCTION ? "/playground/" : undefined, diff --git a/website/yarn.lock b/website/yarn.lock index dbf405be7..303612104 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -1914,15 +1914,15 @@ __metadata: languageName: node linkType: hard -"@codemirror/view@npm:6.39.4": - version: 6.39.4 - resolution: "@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.8 + 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"