github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21512 from overleaf/rd-insert-link

Browse source 
Migrate the editor command tooltips to Bootstrap 5

GitOrigin-RevId: 9e3b477608e334e6e8bc0e79710cd2b3878680e6
This commit is contained in:
Rebeka Dekany 2024-11-04 14:36:22 +01:00 committed by Copybot
parent 1c7e4ddcd2
commit caa446f933
7 changed files with 77 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx
View file

@ -14,10 +14,16 @@ import {
ShortTextArgument,
UrlArgument,
} from '../../lezer-latex/latex.terms.mjs'
import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import Icon from '../../../../shared/components/icon'
import { EditorState } from '@codemirror/state'
import { openURL } from '@/features/source-editor/utils/url'
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
import OLForm from '@/features/ui/components/ol/ol-form'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const HrefTooltipContent: FC = () => {
const state = useCodeMirrorStateContext()
@ -77,16 +83,16 @@ export const HrefTooltipContent: FC = () => {
return (
<div className="ol-cm-command-tooltip-content">
<form className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}>
<FormGroup controlId="link-tooltip-url-input">
<ControlLabel>URL</ControlLabel>
<FormControl
<OLForm className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}>
<OLFormGroup controlId="link-tooltip-url-input">
<OLFormLabel>URL</OLFormLabel>
<OLFormControl
type="url"
bsSize="sm"
size={50}
size="lg"
htmlSize={50}
placeholder="https://…"
value={url}
inputRef={element => {
ref={element => {
inputRef.current = element
}}
autoComplete="off"
@ -100,27 +106,31 @@ export const HrefTooltipContent: FC = () => {
}}
disabled={state.readOnly}
/>
</FormGroup>
</form>
</OLFormGroup>
</OLForm>
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
className="ol-cm-command-tooltip-link justify-content-start"
onClick={() => {
// TODO: unescape content
openURL(url)
}}
>
<Icon type="external-link" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="external-link" fw />}
bs5={<MaterialIcon type="open_in_new" />}
/>
{t('open_link')}
</Button>
</OLButton>
{!state.readOnly && (
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
className="ol-cm-command-tooltip-link justify-content-start"
onClick={() => {
const spec = removeLink(state)
if (spec) {
@ -129,9 +139,13 @@ export const HrefTooltipContent: FC = () => {
}
}}
>
<Icon type="chain-broken" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="chain-broken" fw />}
bs5={<MaterialIcon type="link_off" />}
/>
{t('remove_link')}
</Button>
</OLButton>
)}
</div>
)

15
services/web/frontend/js/features/source-editor/components/command-tooltip/include-tooltip.tsx
View file

@ -1,8 +1,10 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Icon from '@/shared/components/icon'
import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
import OLButton from '@/features/ui/components/ol/ol-button'
export const IncludeTooltipContent: FC = () => {
const { t } = useTranslation()
@ -10,15 +12,18 @@ export const IncludeTooltipContent: FC = () => {
return (
<div className="ol-cm-command-tooltip-content">
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
onClick={openIncludedFile}
>
<Icon type="edit" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="edit" fw />}
bs5={<MaterialIcon type="edit" />}
/>
{t('open_file')}
</Button>
</OLButton>
</div>
)
}

15
services/web/frontend/js/features/source-editor/components/command-tooltip/input-tooltip.tsx
View file

@ -1,8 +1,10 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Icon from '@/shared/components/icon'
import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const InputTooltipContent: FC = () => {
const { t } = useTranslation()
@ -10,15 +12,18 @@ export const InputTooltipContent: FC = () => {
return (
<div className="ol-cm-command-tooltip-content">
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
onClick={openIncludedFile}
>
<Icon type="edit" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="edit" fw />}
bs5={<MaterialIcon type="edit" />}
/>
{t('open_file')}
</Button>
</OLButton>
</div>
)
}

15
services/web/frontend/js/features/source-editor/components/command-tooltip/ref-tooltip.tsx
View file

@ -4,7 +4,6 @@ import {
useCodeMirrorStateContext,
useCodeMirrorViewContext,
} from '../codemirror-context'
import { Button } from 'react-bootstrap'
import { resolveCommandNode } from '../../extensions/command-tooltip'
import {
LabelArgument,
@ -21,6 +20,9 @@ import {
} from '@codemirror/state'
import { EditorView } from '@codemirror/view'
import Icon from '../../../../shared/components/icon'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const RefTooltipContent: FC = () => {
const { t } = useTranslation()
@ -29,9 +31,9 @@ export const RefTooltipContent: FC = () => {
return (
<div className="ol-cm-command-tooltip-content">
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
onClick={() => {
const target = readTarget(state)
@ -44,9 +46,12 @@ export const RefTooltipContent: FC = () => {
}
}}
>
<Icon type="link" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="link" fw />}
bs5={<MaterialIcon type="link" />}
/>
{t('open_target')}
</Button>
</OLButton>
</div>
)
}

15
services/web/frontend/js/features/source-editor/components/command-tooltip/url-tooltip.tsx
View file

@ -1,7 +1,6 @@
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { useCodeMirrorStateContext } from '../codemirror-context'
import { Button } from 'react-bootstrap'
import { resolveCommandNode } from '../../extensions/command-tooltip'
import {
LiteralArgContent,
@ -10,6 +9,9 @@ import {
import Icon from '../../../../shared/components/icon'
import { EditorState } from '@codemirror/state'
import { openURL } from '@/features/source-editor/utils/url'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const UrlTooltipContent: FC = () => {
const { t } = useTranslation()
@ -17,9 +19,9 @@ export const UrlTooltipContent: FC = () => {
return (
<div className="ol-cm-command-tooltip-content">
<Button
<OLButton
variant="link"
type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link"
onClick={() => {
const url = readUrl(state)
@ -28,9 +30,12 @@ export const UrlTooltipContent: FC = () => {
}
}}
>
<Icon type="external-link" fw />
<BootstrapVersionSwitcher
bs3={<Icon type="external-link" fw />}
bs5={<MaterialIcon type="open_in_new" />}
/>
{t('open_link')}
</Button>
</OLButton>
</div>
)
}

15
services/web/frontend/js/features/source-editor/components/figure-modal/file-sources/figure-modal-upload-source.tsx
View file

@ -20,8 +20,8 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
import { Spinner } from 'react-bootstrap-5'
import { isBootstrap5 } from '@/features/utils/bootstrap-5'
import OLSpinner from '@/features/ui/components/ol/ol-spinner'
/* eslint-disable no-unused-vars */
export enum FileUploadStatus {
@ -297,18 +297,7 @@ export const FileContainer: FC<{
})}
>
{status === FileUploadStatus.UPLOADING ? (
<BootstrapVersionSwitcher
bs3={<Icon spin type="spinner" className="file-icon" />}
bs5={
<Spinner
animation="border"
aria-hidden="true"
as="span"
role="status"
size="sm"
/>
}
/>
<OLSpinner size="sm" />
) : (
<BootstrapVersionSwitcher
bs3={<Icon type={icon} className="file-icon" />}

1
services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx
View file

@ -56,6 +56,7 @@ const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'],
prepend: rest.prepend,
append: rest.append,
size: rest.htmlSize,
'main-field': rest['main-field'],
...bs3Props,
}