From 2a3de9985d9f747b372a2dbff32102729745b97d Mon Sep 17 00:00:00 2001 From: Giamir Buoncristiani Date: Thu, 22 Jan 2026 13:33:49 +0100 Subject: [PATCH 1/3] chore(styles): ensure editor plays well with tne new stacks v3 styles --- .changeset/config.json | 5 ++- package-lock.json | 36 +++------------- package.json | 2 +- .../stack-snippets/src/snippet-view.ts | 26 ++++++------ site/layout.html | 41 +++++++++---------- site/views/index.html | 2 +- src/rich-text/node-views/code-block.ts | 2 +- src/rich-text/node-views/image.ts | 2 - src/rich-text/plugins/link-editor.ts | 5 +-- src/shared/menu/helpers.ts | 4 +- src/shared/menu/plugin.ts | 6 --- .../prosemirror-plugins/image-upload.ts | 4 +- src/stacks-editor/editor.ts | 6 +-- src/styles/custom-components.css | 2 +- 14 files changed, 56 insertions(+), 87 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 93d85fc7..f01ac605 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -10,5 +10,8 @@ "access": "public", "baseBranch": "beta", "updateInternalDependencies": "patch", - "ignore": [] + "ignore": [], + "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { + "onlyUpdatePeerDependentsWhenOutOfRange": true + } } diff --git a/package-lock.json b/package-lock.json index 11b1f6b2..809cd311 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@playwright/test": "^1.42.1", "@stackoverflow/commitlint-config": "^1.0.0", "@stackoverflow/prettier-config": "^1.0.0", - "@stackoverflow/stacks": "^2.3.2", + "@stackoverflow/stacks": "^3.0.0-beta.19", "@stackoverflow/tsconfig": "^1.0.0", "@types/jest": "^29.5.12", "@types/markdown-it": "^14.0.0", @@ -122,7 +122,6 @@ "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.0", @@ -2112,15 +2111,13 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz", "integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@lezer/highlight": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz", "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==", "license": "MIT", - "peer": true, "dependencies": { "@lezer/common": "^1.0.0" } @@ -2439,11 +2436,10 @@ } }, "node_modules/@stackoverflow/stacks": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@stackoverflow/stacks/-/stacks-2.7.0.tgz", - "integrity": "sha512-nn4tow6oTsYlpKwOcpPeKclFMvn0Py+rWCZppRWqcEVl9w2+U+nU7QyKsLzySvSFgXoo5hrBPWp5t7AlNVmF0A==", + "version": "3.0.0-beta.19", + "resolved": "https://registry.npmjs.org/@stackoverflow/stacks/-/stacks-3.0.0-beta.19.tgz", + "integrity": "sha512-QtU7ZPaIPn0+roGx3IcaqalqQWYGWNOW2HWPZ8cITabN8KCkoY0Cabq3jOhJxmFeRUDMPVh9t9jTtXoJpPZnlg==", "dev": true, - "license": "MIT", "dependencies": { "@hotwired/stimulus": "^3.2.2", "@popperjs/core": "^2.11.8" @@ -2791,7 +2787,6 @@ "integrity": "sha512-qNiuwC4ZDAUNcY47xgaSuS92cjf8JbSUoaKS77bmLG1rU7MlATVSiw/IlrjtIyyskXBZ8KkNfjK/P5na7rgXbQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~6.20.0" } @@ -2917,7 +2912,6 @@ "integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "7.18.0", @@ -2952,7 +2946,6 @@ "integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==", "dev": true, "license": "BSD-2-Clause", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "7.18.0", "@typescript-eslint/types": "7.18.0", @@ -3373,7 +3366,6 @@ "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3434,7 +3426,6 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -3932,7 +3923,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -4515,7 +4505,6 @@ "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -5572,7 +5561,6 @@ "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -6778,7 +6766,6 @@ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz", "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==", "license": "BSD-3-Clause", - "peer": true, "engines": { "node": ">=12.0.0" } @@ -7754,7 +7741,6 @@ "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", @@ -10353,7 +10339,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", @@ -10999,7 +10984,6 @@ "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -11141,7 +11125,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.24.1.tgz", "integrity": "sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==", "license": "MIT", - "peer": true, "dependencies": { "orderedmap": "^2.0.0" } @@ -11170,7 +11153,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz", "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.0.0", "prosemirror-transform": "^1.0.0", @@ -11212,7 +11194,6 @@ "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.1.tgz", "integrity": "sha512-MEAnjOdXU1InxEmhjgmEzQAikaS6lF3hD64MveTPpjOGNTl87iRLA1HupC/DEV6YuK7m4Q9DHFNTjwIVtqz5NA==", "license": "MIT", - "peer": true, "dependencies": { "prosemirror-model": "^1.20.0", "prosemirror-state": "^1.0.0", @@ -12953,8 +12934,7 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "dev": true, - "license": "0BSD", - "peer": true + "license": "0BSD" }, "node_modules/type-check": { "version": "0.4.0", @@ -13012,7 +12992,6 @@ "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13247,7 +13226,6 @@ "integrity": "sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", @@ -13354,7 +13332,6 @@ "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.5.0", "@webpack-cli/configtest": "^2.1.1", @@ -13513,7 +13490,6 @@ "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", diff --git a/package.json b/package.json index 236afb41..61488c47 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@playwright/test": "^1.42.1", "@stackoverflow/commitlint-config": "^1.0.0", "@stackoverflow/prettier-config": "^1.0.0", - "@stackoverflow/stacks": "^2.3.2", + "@stackoverflow/stacks": "^3.0.0-beta.19", "@stackoverflow/tsconfig": "^1.0.0", "@types/jest": "^29.5.12", "@types/markdown-it": "^14.0.0", diff --git a/plugins/official/stack-snippets/src/snippet-view.ts b/plugins/official/stack-snippets/src/snippet-view.ts index 742c2739..b2353ba1 100644 --- a/plugins/official/stack-snippets/src/snippet-view.ts +++ b/plugins/official/stack-snippets/src/snippet-view.ts @@ -89,14 +89,14 @@ export class StackSnippetView implements NodeView { ctas.className = "snippet-ctas d-flex ai-center"; if (opts && opts.renderer) { const snippetButtonContainer = document.createElement("div"); - snippetButtonContainer.className = "snippet-buttons mb0 gs4"; + snippetButtonContainer.className = "snippet-buttons d-flex mb0 g4"; ctas.appendChild(snippetButtonContainer); this.buildRunButton(snippetButtonContainer); this.buildEditButton(snippetButtonContainer); const snippetResultButtonContainer = document.createElement("div"); snippetResultButtonContainer.className = - "snippet-result-buttons d-flex mb0 ml-auto gs4"; + "snippet-result-buttons d-flex mb0 ml-auto g24"; ctas.appendChild(snippetResultButtonContainer); this.showButton = this.buildShowButton( snippetResultButtonContainer @@ -290,12 +290,12 @@ export class StackSnippetView implements NodeView { private buildRunButton(container: HTMLDivElement): void { const runCodeButton = document.createElement("button"); runCodeButton.type = "button"; - runCodeButton.className = "s-btn s-btn__filled flex--item"; + runCodeButton.className = "s-btn s-btn__icon flex--item"; runCodeButton.title = "Run code snippet"; runCodeButton.setAttribute("aria-label", "Run code snippet"); // create the svg svg-icon-bg element const runIcon = document.createElement("span"); - runIcon.className = "svg-icon-bg mr4 iconPlay"; + runIcon.className = "svg-icon-bg mr4 h16 iconPlay"; runCodeButton.append(runIcon); const runText = document.createElement("span"); runText.textContent = "Run code snippet"; @@ -353,7 +353,7 @@ export class StackSnippetView implements NodeView { private buildEditButton(container: HTMLDivElement): HTMLButtonElement { const editButton = document.createElement("button"); editButton.type = "button"; - editButton.className = "s-btn s-btn__outlined flex--item"; + editButton.className = "s-btn s-btn__clear flex--item"; editButton.title = "Edit code snippet"; editButton.setAttribute("aria-label", "Edit code snippet"); editButton.textContent = "Edit code snippet"; @@ -368,11 +368,11 @@ export class StackSnippetView implements NodeView { private buildHideButton(container: HTMLDivElement): HTMLButtonElement { const hideButton = document.createElement("button"); hideButton.type = "button"; - hideButton.className = "s-btn flex--item"; + hideButton.className = "s-btn s-btn__link d-flex flex--item"; hideButton.title = "Hide results"; hideButton.setAttribute("aria-label", "Hide results"); const hideIcon = document.createElement("span"); - hideIcon.className = "svg-icon-bg mr4 iconEyeOff"; + hideIcon.className = "svg-icon-bg iconEyeOff"; hideButton.append(hideIcon); const hideText = document.createElement("span"); hideText.textContent = "Hide results"; @@ -394,11 +394,11 @@ export class StackSnippetView implements NodeView { private buildShowButton(container: HTMLDivElement): HTMLButtonElement { const showButton = document.createElement("button"); showButton.type = "button"; - showButton.className = "s-btn flex--item d-none"; + showButton.className = "s-btn s-btn__link flex--item d-flex d-none"; showButton.title = "Show results"; showButton.setAttribute("aria-label", "Show results"); const hideIcon = document.createElement("span"); - hideIcon.className = "svg-icon-bg mr4 iconEye"; + hideIcon.className = "svg-icon-bg iconEye"; showButton.append(hideIcon); const showText = document.createElement("span"); showText.textContent = "Show results"; @@ -423,7 +423,7 @@ export class StackSnippetView implements NodeView { ): HTMLButtonElement { const expandButton = document.createElement("button"); expandButton.type = "button"; - expandButton.className = "s-btn flex--item"; + expandButton.className = "s-btn s-btn__link d-flex flex--item"; expandButton.title = "Expand Snippet"; expandButton.setAttribute("aria-label", "Expand Snippet"); expandButton.addEventListener("click", () => { @@ -436,7 +436,7 @@ export class StackSnippetView implements NodeView { ); }); const expandIcon = document.createElement("span"); - expandIcon.className = "svg-icon-bg mr4 iconShareSm"; + expandIcon.className = "svg-icon-bg iconShareSm"; expandButton.append(expandIcon); const expandText = document.createElement("span"); expandText.textContent = "Expand Snippet"; @@ -451,7 +451,7 @@ export class StackSnippetView implements NodeView { ): HTMLButtonElement { const collapseButton = document.createElement("button"); collapseButton.type = "button"; - collapseButton.className = "s-btn flex--item td-underline ml-auto"; + collapseButton.className = "s-btn s-btn__link d-flex flex--item ml-auto"; collapseButton.title = "Return to post"; collapseButton.setAttribute("aria-label", "Return to post"); collapseButton.addEventListener("click", () => { @@ -464,7 +464,7 @@ export class StackSnippetView implements NodeView { ); }); const collapseIcon = document.createElement("span"); - collapseIcon.className = "svg-icon-bg mr4 iconShareSm"; + collapseIcon.className = "svg-icon-bg iconShareSm"; collapseButton.append(collapseIcon); const expandText = document.createElement("span"); expandText.textContent = "Return to post"; diff --git a/site/layout.html b/site/layout.html index 8c50382c..6d1d6369 100644 --- a/site/layout.html +++ b/site/layout.html @@ -14,7 +14,7 @@