Skip to content
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

Jump to bottom

fix: LPS-165655 Disable tab key by default to avoid the focus to be t… #202

Merged
merged 1 commit into from
Oct 26, 2022
Merged

fix: LPS-165655 Disable tab key by default to avoid the focus to be t… #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions plugins/codemirror/lang/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
CKEDITOR.plugins.setLang('codemirror', 'en', {
disableTabKeyUsing: 'Disable tab key using:',
enableTabKeyUsing: 'Enable tab key using:',
preview: 'Preview',
source: 'Source',
});
91 changes: 91 additions & 0 deletions plugins/codemirror/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,47 @@
var stylesLoaded = false;

CKEDITOR.plugins.add('codemirror', {
_addTabKeyMessage: function (cm, editor, tabsKeyIsEnabled) {
var div = document.createElement('div');

var message = tabsKeyIsEnabled
? editor.lang.codemirror.disableTabKeyUsing
: editor.lang.codemirror.enableTabKeyUsing;

var html =
'<div class="keyboard-message popover px-2 py-1" style="left:auto; right: 4px; top:4px">';
Copy link
Member

Choose a reason for hiding this comment

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

This introduces some clay-css dependencies, whick may not be available in all cases when using the editor in non-admin contexts. The bigger issue seems with the popover class as it defines the zindex and positioning.

Probably with some inlining this can be worked around

Copy link
Member

@dsanz dsanz Oct 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I'm merging this with the commitment of coming back and:

  • review styling, as per the dependency with clay-css
  • review solution design as the popover overlaps the editable area, as implemened in other codemirrors across DXP
  • translate the messages as well

cc/ @markocikos @tinycarol


html += '<span class="c-kbd-sm">';

html += message;

html += '</span>';

html += '<kbd class="c-kbd c-kbd-light c-kbd-sm">';

html += '<kbd class="c-kbd">Ctrl</kbd>';

html += '<span class="c-kbd-separator">+</span>';

html += '<kbd class="c-kbd">M</kbd>';

html += '</kbd>';

html += '</div>';

div.innerHTML = html;

cm.getWrapperElement().appendChild(div);
},

_removeTabKeyMessage: function (cm) {
var div = cm.getWrapperElement().querySelector('.keyboard-message');

if (div) {
div.parentElement.removeChild(div);
}
},

_createCodeMirrorEditor: function (editor) {
var instance = this;

Expand All @@ -25,6 +66,32 @@
lineNumbers: true,
lineWrapping: true,
mode: 'text/html',
extraKeys: {
'Ctrl-M': function (cm) {
var tabKeyIsEnabled = cm.state.keyMaps.every(
function (key) {
return key.name !== 'tabKey';
}
);

instance._removeTabKeyMessage(cm);
instance._addTabKeyMessage(
cm,
editor,
!tabKeyIsEnabled
);

if (tabKeyIsEnabled) {
cm.addKeyMap({
'Shift-Tab': false,
Tab: false,
name: 'tabKey',
});
} else {
cm.removeKeyMap('tabKey');
}
},
},
}
);

Expand Down Expand Up @@ -76,6 +143,30 @@

editor.fire('ariaWidget', this);

codeMirrorInstance.codeMirrorEditor.on('focus', function (cm) {
var tabKeyIsEnabled = cm.state.keyMaps.every(function (
key
) {
return key.name !== 'tabKey';
});

if (tabKeyIsEnabled) {
cm.addKeyMap({
'Shift-Tab': false,
Tab: false,
name: 'tabKey',
});
}

instance._addTabKeyMessage(cm, editor, false);
});

codeMirrorInstance.codeMirrorEditor.on('blur', function () {
instance._removeTabKeyMessage(
codeMirrorInstance.codeMirrorEditor
);
});

callback();
});
},
Expand Down