Add a hint explaining how to leave the editor by fiorsaoirse · Pull Request #428 · eccenca/gui-elements

fiorsaoirse · 2026-09-10T12:50:19Z

show a panel with the navigation hint while focused
add tests and update changelog
improved AutoCompleteField hot keys usage

fiorsaoirse · 2026-09-10T12:56:14Z

-     * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
+     * @deprecated No longer affects Tab key behavior. Use `tabIntentStyle` and `tabForceSpaceForModes` instead.
     */
    enableTab?: boolean;


This property allowed to override Tab key setting that are set via tabIntentStyle - so it was possible to set tabIntentStyle="space" or set a mode that is listed in tabForceSpaceForModes and set enableTab - so as result we get indention using the Tab key. That's confusing and may lead to unexpected result. I'd suggest deprecating the property and making tabIntentStyle/tabForceSpaceForModes configuration the single source of indention.

Yes, this is an explicit feature by CodeMirror. Is is possible to set how existing tab characters are displayed but not to support tabbing by itself.

Btw, even if you deprecate a property it need to be work like before until it is removed, otherwise this would be a breaking change. Please also add a version to the deprecation flag, e.g. @deprecated (v27).

OK then I got this property wrong, thanks for the explanation. Improved the naming, because it was confusing to me.

fiorsaoirse · 2026-09-10T16:26:11Z

        setView(view);

        if (view?.dom) {
-            if (height) {


Removed the editor's inline height because the container now controls the total height, including the panel (if it exists)

…7687)

…on info

haschek · 2026-09-15T14:10:31Z

+     */
+    focusHint?: React.ReactElement;
+    /** Actions displayed inside the scrollable editing area, to the right of the content. */
+    actions?: React.ReactNode;


Looks unrelated to the issue. Maybe done to generalize the way how to add the clear button used in AutoCompleteField. Good idea but this adds more complexity to the change set, should be managed in its own feature branch because the it should be aligned/combined with the existing leftElement/rightElement properties, and maybe moved all together to CodeEditor.

Yes, the clear button in AutocompleteFiled was exactly the reason. OK, let's do it as a separated task, not a problem.

haschek · 2026-09-15T14:15:52Z

+    actions?: React.ReactNode;
 }

+const FALLBACK_WARNING = "Press Escape then Tab to leave the editor.";


In my opinion FALLBACK_WARNING is misleading in its intention. Should be something like BLUR_HINT or LEAVE_EDITOR_MSG.

haschek · 2026-09-15T14:18:57Z

            {hasToolbarSupport && editorToolbar(mode)}
+            {shouldIndentWithTab ? (
+                <ApplicationViewability hide="screen">
+                    <span lang={focusHint ? undefined : "en"}>{focusHint ?? FOCUS_HINT}</span>


This message cannot be focused by Tab because it has no tab index. I think, we can remove this info completely after we decided to display permanently the info in a footer panel how to leave the editor.

Yep, that's a leftover from the first approach (a message within the editor). Removed.

haschek · 2026-09-15T14:40:16Z

+        () =>
+            addExtensionsFor(
+                shouldIndentWithTab,
+                showPanel.of(createKeyboardHintPanel),


Can we have an own class as extension to the default cm-panel class name here?

Yes, added an eccgui classname to the created <div> tag.

haschek · 2026-09-15T14:54:14Z

+                      <div
+                          className={`${eccgui}-codeeditor__keyboard-hint`}
+                          data-testid="code-editor-warning"
+                          style={{ visibility: focused ? "visible" : "hidden" }}


As the footer panel is always visible we probably do not need to hide this message about leaving the editor until the editor is focused.

We can hide the bottom panel when the editor loses focus, please take a look. Having that message constantly visible might be confusing, imho. We also must keep that container for screen readers, so solved via styles.

haschek · 2026-09-15T15:43:17Z

    };

+    const modeRequiresSpaces = !!(mode && tabForceSpaceForModes?.includes(mode));
+    const shouldIndentWithTab = tabIntentStyle === "tab" && !modeRequiresSpaces;


Are you sure on this? Also if spaces are used then tab handling must be activated explicitly. The difference is that spaces used as soft tab, not \t. Using indentWithTab is independent from the actual chars used to display the indentation.

If we really want to remove enableTab then we probably should extend tabIntentStyle by an "off" value.

Currently we have an regression for CodeAutocompleteField because enableTab is ignored now.

PS: the old tabIndent check (you removed it) was probably also wrong regarding the check for tab/space on indentWithTab.

haschek · 2026-09-15T15:47:17Z

-     * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
+     * @deprecated No longer affects Tab key behavior. Use `tabIntentStyle` and `tabForceSpaceForModes` instead.
     */
    enableTab?: boolean;


Yes, this is an explicit feature by CodeMirror. Is is possible to set how existing tab characters are displayed but not to support tabbing by itself.

Btw, even if you deprecate a property it need to be work like before until it is removed, otherwise this would be a breaking change. Please also add a version to the deprecation flag, e.g. @deprecated (v27).

haschek · 2026-09-15T15:51:44Z

+        gap: $eccgui-size-inline-whitespace;
+        align-items: center;
+        justify-content: flex-end;
+        min-height: $eccgui-size-codeeditor-keyboard-hint-height;


We probably do not need to use more space than is needed.

haschek · 2026-09-15T15:53:48Z

+        align-items: center;
+        justify-content: flex-end;
+        min-height: $eccgui-size-codeeditor-keyboard-hint-height;
+        padding: 0.25rem $eccgui-size-inline-whitespace;


You can also use 0.5 * $eccgui-size-inline-whitespace to have small widths based on config vars.

haschek · 2026-09-15T15:54:35Z

+        justify-content: flex-end;
+        min-height: $eccgui-size-codeeditor-keyboard-hint-height;
+        padding: 0.25rem $eccgui-size-inline-whitespace;
+        font-size: 0.875rem;


Please use scss config vars here, we have font size and lineheight defined also for "caption".

Used caption vars.

fiorsaoirse commented Sep 10, 2026

View reviewed changes

fiorsaoirse requested a review from haschek September 10, 2026 13:11

fiorsaoirse commented Sep 10, 2026

View reviewed changes

fiorsaoirse changed the title ~~Add shortcut to leave the code editor and a hint explaining it~~ Add a hint explaining how to leave the editor Sep 14, 2026

fiorsaoirse marked this pull request as ready for review September 14, 2026 11:09

fiorsaoirse added 3 commits September 14, 2026 13:26

Add shortcut to leave the code editor and a hint explaining it (CMEM-…

e62b99e

…7687)

Added screen reader hint, added the native editor panel as notificati…

10f13fc

…on info

Set the default key binding to CodeEditor to leave the focused field

04b5dcb

fiorsaoirse marked this pull request as draft September 14, 2026 11:27

fiorsaoirse force-pushed the bugfix/codeEdiorTrap-CMEM-7687 branch from 590a165 to 04b5dcb Compare September 14, 2026 11:27

Add CodeEditor actions and improve Escape-Tab handling

0670547

fiorsaoirse force-pushed the bugfix/codeEdiorTrap-CMEM-7687 branch from 8874756 to 0670547 Compare September 14, 2026 14:25

fiorsaoirse marked this pull request as ready for review September 14, 2026 14:29

haschek requested changes Sep 15, 2026

View reviewed changes

fiorsaoirse added 2 commits September 16, 2026 16:27

Fixed comments issues

b8a00d5

Adjust style issues

a4e5d86

fiorsaoirse requested a review from haschek September 16, 2026 15:22

Conversation

fiorsaoirse commented Sep 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

haschek Sep 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

fiorsaoirse commented Sep 10, 2026 •

edited

Loading

haschek Sep 15, 2026 •

edited

Loading