Skip to content

[RTE] Focus fixes #5739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nucleogenesis wants to merge 3 commits into
base: unstable
Choose a base branch
from
+16 −2
Open

[RTE] Focus fixes #5739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9b3f4d
focus the editor when closing tool modals
nucleogenesis Mar 3, 2026
60bd767
Autofocus TipTap editor when creating new assessment questions
nucleogenesis Mar 3, 2026
1fba461
set question-text border to value consistent with neighbors
nucleogenesis Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...entcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue
View file
Open in desktop
Copy link
Member

@marcellamaki marcellamaki Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is absolutely out of scope for this fix, but request that we add

border: 1px solid #b4b4b4;

for consistency with the other text boxes, without having to open a separate PR for this

Image

Copy link
Member Author

@nucleogenesis nucleogenesis Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added the line:

image

Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
v-if="isQuestionOpen"
v-model="question"
mode="edit"
:autofocus="shouldAutofocusQuestion"
:imageProcessor="EditorImageProcessor"
@update="onQuestionUpdate"
@minimize="closeQuestion"
Expand Down Expand Up @@ -201,6 +202,7 @@
data() {
return {
isQuestionOpen: false,
shouldAutofocusQuestion: false,
openHintIdx: null,
openAnswerIdx: null,
kindSelectKey: 0,
Expand Down Expand Up @@ -322,6 +324,7 @@
},
mounted() {
if (!this.question) {
this.shouldAutofocusQuestion = true;
this.openQuestion();
}
},
Expand Down Expand Up @@ -478,6 +481,7 @@
<style lang="scss" scoped>

.question-text {
border: 1px solid #b4b4b4;
transition: 0.7s;

&:hover {
Expand Down
8 changes: 7 additions & 1 deletion ...curation/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,9 @@
const processedContent = preprocessMarkdown(newValue);

if (!editor.value) {
initializeEditor(processedContent, props.mode);
initializeEditor(processedContent, props.mode, {
autofocus: props.autofocus,
});
return;
}

Expand Down Expand Up @@ -289,6 +291,10 @@
type: String,
default: 'edit', // 'edit' or 'view'
},
autofocus: {
type: Boolean,
default: false,
},
tabindex: {
type: [String, Number],
default: 0,
Expand Down
3 changes: 2 additions & 1 deletion .../contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ export function useEditor() {
const isReady = ref(false);
const isFocused = ref(false);

const initializeEditor = (content, mode = 'edit') => {
const initializeEditor = (content, mode = 'edit', { autofocus = false } = {}) => {
Copy link

@rtibblesbot rtibblesbot Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Clean approach — destructuring with a default empty object keeps the existing call sites working while making autofocus opt-in. Leveraging TipTap's native autofocus option rather than rolling a custom solution is the right call.

editor.value = new Editor({
autofocus,
editable: mode === 'edit',
extensions: [
StarterKitExtension.configure({
Expand Down
1 change: 1 addition & 0 deletions ...tcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useImageHandling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export function useImageHandling(editor) {
modalInitialData.value = {};
editingNodePos.value = null;
closeModalBase();
editor.value?.commands.focus();
Copy link

@rtibblesbot rtibblesbot Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Good consistent pattern across all three modal composables — editor.value?.commands.focus() with optional chaining ensures safe focus restoration regardless of editor state. This directly addresses the focus-on-modal-close requirement.

};

setupClickOutside('.image-upload-modal', closeModal);
Expand Down
1 change: 1 addition & 0 deletions ...ntcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export function useLinkHandling(editor) {
isEditorOpen.value = false;
savedSelection.value = null;
editorMode.value = 'create';
editor.value?.commands.focus();
};

const openBubbleMenu = () => {
Expand Down
1 change: 1 addition & 0 deletions ...ntcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useMathHandling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export function useMathHandling(editor, editorMode) {

const closeMathModal = () => {
closeModalBase();
editor.value?.commands.focus();
};

setupClickOutside('.formulas-menu', closeMathModal);
Expand Down