Merge pull request #18066 from overleaf/ae-revert-toolbar

Revert "Avoid vertical border between editor switch and empty space"

GitOrigin-RevId: eda4deba8eb384cddf2ea9c90edee080ceb6330c
This commit is contained in:
Jimmy Domagala-Tang 2024-04-22 07:02:56 -07:00 committed by Copybot
parent a2d5e030c6
commit e1ec856650
4 changed files with 22 additions and 11 deletions

View file

@ -168,6 +168,8 @@ const Toolbar = memo(function Toolbar() {
/> />
</ToolbarOverflow> </ToolbarOverflow>
)} )}
<div className="formatting-buttons-wrapper" />
</div> </div>
<div <div

View file

@ -87,22 +87,26 @@ const toolbarTheme = EditorView.theme({
padding: '0 4px', padding: '0 4px',
margin: '4px 0', margin: '4px 0',
lineHeight: '1', lineHeight: '1',
borderLeft: '1px solid rgba(125, 125, 125, 0.3)', '&:not(:first-of-type)': {
'&.ol-cm-toolbar-end': { borderLeft: '1px solid rgba(125, 125, 125, 0.3)',
borderLeft: 'none', '&.ol-cm-toolbar-end': {
}, borderLeft: 'none',
'&.ol-cm-toolbar-stretch': { },
flex: 1, '&.ol-cm-toolbar-stretch': {
'.editor-toggle-switch + &': { flex: 1,
borderLeft: 'none', // avoid a left border when no toolbar buttons are shown },
'&.overflow-hidden': {
borderLeft: 'none',
}, },
}, },
'&.overflow-hidden': { '&.overflow-hidden': {
borderLeft: 'none',
width: 0, width: 0,
padding: 0, padding: 0,
}, },
}, },
'.formatting-buttons-wrapper': {
flex: 1,
},
'.ol-cm-toolbar-button': { '.ol-cm-toolbar-button': {
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',

View file

@ -19,7 +19,8 @@ export const codemirrorDevTools = () => {
} }
const devToolsButton = ViewPlugin.define(view => { const devToolsButton = ViewPlugin.define(view => {
const getContainer = () => document.querySelector('.ol-cm-toolbar-end') const getContainer = () =>
document.querySelector('.formatting-buttons-wrapper')
const removeButton = () => { const removeButton = () => {
getContainer()?.querySelector('#cm6-dev-tools-button')?.remove() getContainer()?.querySelector('#cm6-dev-tools-button')?.remove()
@ -37,7 +38,7 @@ const devToolsButton = ViewPlugin.define(view => {
view.dispatch(toggleDevTools()) view.dispatch(toggleDevTools())
}) })
getContainer()?.append(button) getContainer()?.prepend(button)
} }
window.setTimeout(() => { window.setTimeout(() => {

View file

@ -334,6 +334,10 @@
overflow: hidden; overflow: hidden;
} }
.formatting-buttons-wrapper {
display: flex;
}
.formatting-btn { .formatting-btn {
color: @formatting-btn-color; color: @formatting-btn-color;
background-color: @formatting-btn-bg; background-color: @formatting-btn-bg;