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:
parent
6c846716c3
commit
457e90ea23
1 changed files with 20 additions and 11 deletions
|
@ -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 }))
|
||||||
}}
|
}}
|
||||||
|
|
Loading…
Reference in a new issue