Fix document name editable in readonly mode (#3911)

This PR prevents the document name input becoming editable in Readonly
mode, and also removes the rename menu item from the dropdown.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Open a shared project in read only mode
2. You shouldn't be able to edit the document name by clicking the
input, and the option to rename should not be visible in the dropdown.

### Release Notes

- Remove ability to rename document while in readonly mode
This commit is contained in:
Taha 2024-06-12 10:56:42 +01:00 committed by GitHub
parent 6c846716c3
commit 457e90ea23
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -68,10 +68,11 @@ export const DocumentNameInner = track(function DocumentNameInner() {
const editor = useEditor() const editor = useEditor()
const msg = useTranslation() const msg = useTranslation()
const toasts = useToasts() const toasts = useToasts()
const isReadonly = editor.getInstanceState().isReadonly
return ( return (
<div className="tlui-document-name__inner"> <div className="tlui-document-name__inner">
<DocumentNameEditor state={state} setState={setState} /> <DocumentNameEditor isReadonly={isReadonly} state={state} setState={setState} />
<TldrawUiDropdownMenuRoot id="document-name"> <TldrawUiDropdownMenuRoot id="document-name">
<TldrawUiDropdownMenuTrigger> <TldrawUiDropdownMenuTrigger>
<TldrawUiButton <TldrawUiButton
@ -83,6 +84,7 @@ export const DocumentNameInner = track(function DocumentNameInner() {
</TldrawUiDropdownMenuTrigger> </TldrawUiDropdownMenuTrigger>
<TldrawUiDropdownMenuContent align="end" alignOffset={4} sideOffset={6}> <TldrawUiDropdownMenuContent align="end" alignOffset={4} sideOffset={6}>
<TldrawUiDropdownMenuGroup> <TldrawUiDropdownMenuGroup>
{!isReadonly && (
<TldrawUiDropdownMenuItem> <TldrawUiDropdownMenuItem>
<TldrawUiButton <TldrawUiButton
type="menu" type="menu"
@ -92,6 +94,7 @@ export const DocumentNameInner = track(function DocumentNameInner() {
<span className={'tlui-button__label' as any}>{msg('action.rename')}</span> <span className={'tlui-button__label' as any}>{msg('action.rename')}</span>
</TldrawUiButton> </TldrawUiButton>
</TldrawUiDropdownMenuItem> </TldrawUiDropdownMenuItem>
)}
<TldrawUiDropdownMenuItem> <TldrawUiDropdownMenuItem>
<TldrawUiButton <TldrawUiButton
type="menu" type="menu"
@ -214,9 +217,11 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
const DocumentNameEditor = track(function DocumentNameEditor({ const DocumentNameEditor = track(function DocumentNameEditor({
state, state,
setState, setState,
isReadonly,
}: { }: {
state: NameState state: NameState
setState: (update: SetStateAction<NameState>) => void setState: (update: SetStateAction<NameState>) => void
isReadonly: boolean
}) { }) {
const inputRef = useRef<HTMLInputElement>(null) const inputRef = useRef<HTMLInputElement>(null)
const editor = useEditor() const editor = useEditor()
@ -225,10 +230,13 @@ const DocumentNameEditor = track(function DocumentNameEditor({
const defaultDocumentName = msg('document.default-name') const defaultDocumentName = msg('document.default-name')
useEffect(() => { useEffect(() => {
if (isReadonly) {
setState((prev) => ({ ...prev, isEditing: false }))
}
if (state.isEditing && inputRef.current) { if (state.isEditing && inputRef.current) {
inputRef.current.select() inputRef.current.select()
} }
}, [state.isEditing]) }, [isReadonly, setState, state.isEditing])
useEffect(() => { useEffect(() => {
const save = () => { const save = () => {
@ -315,6 +323,7 @@ const DocumentNameEditor = track(function DocumentNameEditor({
<div <div
className="tlui-document-name__text" className="tlui-document-name__text"
onDoubleClick={() => { onDoubleClick={() => {
if (isReadonly) return
editor.setEditingShape(null) editor.setEditingShape(null)
setState((prev) => ({ ...prev, isEditing: true })) setState((prev) => ({ ...prev, isEditing: true }))
}} }}