fix(editor): bundle Monaco locally to fix stuck Loading state and CSP block

- Add monaco-editor to frontend deps and configure @monaco-editor/react
  to use the local bundle via loader.config({ monaco }) instead of
  fetching from cdn.jsdelivr.net (blocked by CSP scriptSrc: self)
- Wire editorWorker via Vite ?worker syntax — blob: URLs already
  permitted by existing workerSrc CSP directive, no CSP changes needed
- fix(ci): use DOCS_REPO_TOKEN in release-please so tag creation
  cascades to docker-publish.yml (GITHUB_TOKEN cannot trigger workflows)
- fix(ci): auto-merge screenshots PR via gh pr merge --auto --squash
This commit is contained in:
SaelixCode
2026-03-24 19:43:55 -04:00
parent f93d5bd194
commit 79fde6e2bd
6 changed files with 35 additions and 1 deletions
+10
View File
@@ -227,6 +227,7 @@ jobs:
E2E_PASSWORD: password123
- name: Open / update screenshots PR
id: create-pr
uses: peter-evans/create-pull-request@v6
with:
token: ${{ secrets.DOCS_REPO_TOKEN }}
@@ -237,6 +238,15 @@ jobs:
add-paths: docs/images/
delete-branch: true
- name: Auto-merge screenshots PR
if: steps.create-pr.outputs.pull-request-number != ''
env:
GH_TOKEN: ${{ secrets.DOCS_REPO_TOKEN }}
run: |
gh pr merge ${{ steps.create-pr.outputs.pull-request-number }} \
--auto --squash \
--repo ${{ github.repository }}
sync-docs:
runs-on: ubuntu-latest
if: github.event_name == 'push' && github.ref == 'refs/heads/develop'
+4 -1
View File
@@ -15,6 +15,9 @@ jobs:
steps:
- uses: googleapis/release-please-action@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
# GITHUB_TOKEN cannot trigger other workflows (GitHub security restriction).
# Using DOCS_REPO_TOKEN (PAT) ensures the tag push from release-please
# cascades to docker-publish.yml and publishes to Docker Hub.
token: ${{ secrets.DOCS_REPO_TOKEN }}
config-file: release-please-config.json
manifest-file: .release-please-manifest.json
+5
View File
@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased]
### Fixed
- **fix(editor):** Monaco editor stuck on "Loading…" — `@monaco-editor/react` was fetching Monaco's loader from `cdn.jsdelivr.net` at runtime, which the Helmet CSP (`scriptSrc: 'self'`) correctly blocked. Fixed by configuring `loader.config({ monaco })` in `main.tsx` to use the locally bundled `monaco-editor` npm package and wiring a Vite `?worker` blob URL for the editor worker — no CDN requests, no CSP changes needed.
- **fix(ci):** `release-please.yml` used `GITHUB_TOKEN` to create release tags — GitHub's security model prevents `GITHUB_TOKEN`-triggered events from cascading to other workflow runs, so `docker-publish.yml` never fired after a release. Switched to `DOCS_REPO_TOKEN` (PAT) so tag creation correctly triggers the Docker Hub publish workflow.
- **fix(ci):** Screenshot refresh PR now auto-merges via `gh pr merge --auto --squash` after `peter-evans/create-pull-request` creates it — no more manual merge required on every `develop` push.
### Fixed
- **fix(ci):** `docker-publish.yml` was triggered by `release: types: [published]` (GitHub Release event) instead of `push: tags: v*` — pushing a git tag never fired the workflow. Changed trigger to `push: tags: v*` and updated `enable` conditions from `github.event_name == 'release'` to `startsWith(github.ref, 'refs/tags/v')` so any `v*` tag push automatically builds and publishes `latest` + semver tags to Docker Hub without requiring a manual GitHub Release.
+1
View File
@@ -33,6 +33,7 @@
"cmdk": "^1.1.1",
"geist": "^1.7.0",
"lucide-react": "^0.575.0",
"monaco-editor": "^0.55.1",
"motion": "^12.38.0",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
+1
View File
@@ -35,6 +35,7 @@
"cmdk": "^1.1.1",
"geist": "^1.7.0",
"lucide-react": "^0.575.0",
"monaco-editor": "^0.55.1",
"motion": "^12.38.0",
"next-themes": "^0.4.6",
"radix-ui": "^1.4.3",
+14
View File
@@ -3,6 +3,20 @@ import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import ErrorBoundary from './components/ErrorBoundary.tsx'
import * as monaco from 'monaco-editor'
import { loader } from '@monaco-editor/react'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
// Use the locally bundled Monaco instead of fetching from cdn.jsdelivr.net.
// The CSP (scriptSrc: 'self') blocks external CDN scripts; bundling avoids
// that entirely. Sencho only needs YAML/plaintext so the base editorWorker
// covers all language modes — no additional language workers required.
window.MonacoEnvironment = {
getWorker(_workerId: string, _label: string): Worker {
return new editorWorker()
},
}
loader.config({ monaco })
createRoot(document.getElementById('root')!).render(
<StrictMode>