upstream/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-02-03 20:51:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 10
forgejo/web_src/css/features/codeeditor.css

104 lines
1.9 KiB
CSS
Raw Normal View History

Update JS dependencies and misc tweaks (#21583) - Update all JS dependencies to latest version - Disable two redundant eslint rules - Adapt stylelint config to codebase - Regenerate SVGs - Make file editor spinner "reserve" height so page does not shift - Tested katex, swagger, monaco Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: 6543 <6543@obermui.de>
2022-10-28 09:40:50 -04:00
.editor-loading.is-loading {
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
height: 200px;
Monaco improvements (#15333) - Create theme at runtime which follows the CSS variables of the site - Disable a few opinionated Monaco defaults like minimap and word highlights - Move styles to separate file Co-authored-by: zeripath <art27@cantab.net>
2021-04-08 05:53:00 -04:00
}
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
.edit.githook .codemirror-container {
Monaco improvements (#15333) - Create theme at runtime which follows the CSS variables of the site - Disable a few opinionated Monaco defaults like minimap and word highlights - Move styles to separate file Co-authored-by: zeripath <art27@cantab.net>
2021-04-08 05:53:00 -04:00
border: 1px solid var(--color-secondary);
}
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
#editor-bar {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
Monaco improvements (#15333) - Create theme at runtime which follows the CSS variables of the site - Disable a few opinionated Monaco defaults like minimap and word highlights - Move styles to separate file Co-authored-by: zeripath <art27@cantab.net>
2021-04-08 05:53:00 -04:00
}
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
@media (max-width: 768px) {
#editor-bar {
gap: var(--button-spacing);
.switch {
overflow-x: scroll;
}
}
Monaco improvements (#15333) - Create theme at runtime which follows the CSS variables of the site - Disable a few opinionated Monaco defaults like minimap and word highlights - Move styles to separate file Co-authored-by: zeripath <art27@cantab.net>
2021-04-08 05:53:00 -04:00
}
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
.cm-panel.fj-search {
position: absolute;
top: 0;
right: 0;
background-color: var(--color-body);
box-shadow: 0 6px 18px var(--color-shadow);
border-radius: 0.3rem;
display: flex;
flex-direction: column;
gap: 1rem;
.search-input-group {
align-items: center;
background: var(--color-input-background);
border: 1px solid var(--color-input-border);
border-radius: 0.3rem;
display: inline-flex;
width: 100%;
&:focus-within {
border-color: var(--color-primary);
}
input {
background: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
label {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-secondary-bg);
border-radius: 50%;
padding: 6px 12px;
height: 2em;
width: 2em;
font-size: 80%;
white-space: pre;
user-select: none;
&:hover {
background-color: var(--color-label-hover-bg);
}
&.focused {
box-shadow:
inset 0 1px 1px rgb(0 0 0 / 8%),
0 0 8px var(--color-accent);
}
&.active {
background-color: var(--color-accent);
}
}
}
.search-hidden-inputs {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
}
.search-section,
.replace-section {
display: flex;
gap: var(--button-spacing);
}
Monaco improvements (#15333) - Create theme at runtime which follows the CSS variables of the site - Disable a few opinionated Monaco defaults like minimap and word highlights - Move styles to separate file Co-authored-by: zeripath <art27@cantab.net>
2021-04-08 05:53:00 -04:00
}
Fix Monaco IOS keyboard button (#24341) Fix https://github.com/go-gitea/gitea/issues/16188. Turns out the element was completely misaligned by fomantic styles. Add most of the original styles in `!important` form to fix. Tapping the button doesn't do anything useful in Simulator.app, but I guess it's still better to not outright hide it in case it has a possiblity to work. <img width="121" alt="image" src="https://user-images.githubusercontent.com/115237/234379685-4e67f8cd-7e91-4bcc-8e17-9d5b2ebed6cd.png"> Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-26 01:31:50 -04:00
feat(ui): replace Monaco with CodeMirror (#10559) - Replace the [Monaco Editor](https://microsoft.github.io/monaco-editor/) with [CodeMirror 6](https://codemirror.net/). This editor is used to facilitate the 'Add file' and 'Edit file' functionality. - Rationale: - Monaco editor is a great and powerful editor, however for Forgejo's purpose it acts more like a small IDE than a code editor and is doing too much. In my limited user research the usage of editing files via the web UI is largely for small changes that does not need the features that Monaco editor provides. - Monaco editor has no mobile support, Codemirror is very usable on mobile. - Monaco editor pulls in large dependencies (for language support) and by replacing it with Codemirror the amount of time that webpack needs to build the frontend is reduced by 50% (~30s -> ~15s). - The binary of Forgejo (build with `bindata` tag) is reduced by 2MiB. - Codemirror is much more lightweight and should be more usable on less powerful hardware, most notably the lazy loading is much faster as codemirror uses less javascript. - Because Codemirror is modular it is much easier to change the behavior of the code editor if we wish to. - Drawbacks: - Codemirror is quite modular and as seen in `package.json` and in `codeeditor.ts` we have to supply a lot more of its features to have feature parity with Monaco editor. - Monaco editor has great integrated language support (features that an lsp would provide), Codemirror only has such language support to an extend. - Monaco editor has its famous command palette (known by many as its also available in VSCode), this is not available in code mirror. - Good to note: - All features that was added on top of the monaco editor (such as dynamically changing language support depending on the filename) still works and the theme is based on the VSCode colors which largely resembles the monaco editor. - The code editor is still lazy-loaded (this is painfully clear by reading how imports are passed around in `codeeditor.ts`). - This change was privately tested by a few people, a few bugs were found (and fixed) but no major drawbacks were noted for their usage of the web editor. - There's a "search" button in the top bar, so that search can be used on mobile. It is otherwise only accessible via <kbd>Ctrl</kbd>+<kbd>f</kbd>. Co-authored-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Gusted <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10559 Reviewed-by: Gusted <gusted@noreply.codeberg.org> Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: Beowulf <beowulf@beocode.eu>
2026-01-04 17:52:33 -05:00
@media screen and (max-width: 786px) {
.cm-panel.fj-search {
position: sticky;
box-shadow: none;
}
Fix Monaco IOS keyboard button (#24341) Fix https://github.com/go-gitea/gitea/issues/16188. Turns out the element was completely misaligned by fomantic styles. Add most of the original styles in `!important` form to fix. Tapping the button doesn't do anything useful in Simulator.app, but I guess it's still better to not outright hide it in case it has a possiblity to work. <img width="121" alt="image" src="https://user-images.githubusercontent.com/115237/234379685-4e67f8cd-7e91-4bcc-8e17-9d5b2ebed6cd.png"> Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-26 01:31:50 -04:00
}
Reference in a new issue Copy permalink