fix(ribbon): "Open attribute list" shortcut not focusing (closes #7463)

This commit is contained in:
Elian Doran 2025-11-11 12:20:16 +02:00
parent c30282fbd0
commit 80c77eeb18
No known key found for this signature in database
3 changed files with 11 additions and 12 deletions

View File

@ -6,9 +6,9 @@ export interface CKEditorApi {
focus(): void; focus(): void;
/** /**
* Imperatively sets the text in the editor. * Imperatively sets the text in the editor.
* *
* Prefer setting `currentValue` prop where possible. * Prefer setting `currentValue` prop where possible.
* *
* @param text text to set in the editor * @param text text to set in the editor
*/ */
setText(text: string): void; setText(text: string): void;
@ -27,15 +27,16 @@ interface CKEditorOpts {
onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void; onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void;
onKeyDown?: (e: KeyboardEvent) => void; onKeyDown?: (e: KeyboardEvent) => void;
onBlur?: () => void; onBlur?: () => void;
onInitialized?: (editorInstance: CKTextEditor) => void;
} }
export default function CKEditor({ apiRef, currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) { export default function CKEditor({ apiRef, currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, onInitialized, ...restProps }: CKEditorOpts) {
const editorContainerRef = useRef<HTMLDivElement>(null); const editorContainerRef = useRef<HTMLDivElement>(null);
const textEditorRef = useRef<CKTextEditor>(null); const textEditorRef = useRef<CKTextEditor>(null);
useImperativeHandle(apiRef, () => { useImperativeHandle(apiRef, () => {
return { return {
focus() { focus() {
editorContainerRef.current?.focus(); textEditorRef.current?.editing.view.focus();
textEditorRef.current?.model.change((writer) => { textEditorRef.current?.model.change((writer) => {
const documentRoot = textEditorRef.current?.editing.model.document.getRoot(); const documentRoot = textEditorRef.current?.editing.model.document.getRoot();
if (documentRoot) { if (documentRoot) {
@ -83,6 +84,8 @@ export default function CKEditor({ apiRef, currentValue, editor, config, disable
if (currentValue) { if (currentValue) {
textEditor.setData(currentValue); textEditor.setData(currentValue);
} }
onInitialized?.(textEditor);
}); });
}, []); }, []);
@ -103,4 +106,4 @@ export default function CKEditor({ apiRef, currentValue, editor, config, disable
{...restProps} {...restProps}
/> />
) )
} }

View File

@ -26,4 +26,4 @@ export default function OwnedAttributesTab({ note, hidden, activate, ntxId, ...r
)} )}
</div> </div>
) )
} }

View File

@ -238,11 +238,6 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
} }
}); });
// Focus on show.
useEffect(() => {
setTimeout(() => editorRef.current?.focus(), 0);
}, []);
// Interaction with CKEditor. // Interaction with CKEditor.
useLegacyImperativeHandlers(useMemo(() => ({ useLegacyImperativeHandlers(useMemo(() => ({
loadReferenceLinkTitle: async ($el: JQuery<HTMLElement>, href: string) => { loadReferenceLinkTitle: async ($el: JQuery<HTMLElement>, href: string) => {
@ -363,6 +358,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
}} }}
onKeyDown={() => attributeDetailWidget.hide()} onKeyDown={() => attributeDetailWidget.hide()}
onBlur={() => save()} onBlur={() => save()}
onInitialized={() => editorRef.current?.focus()}
disableNewlines disableSpellcheck disableNewlines disableSpellcheck
/> />