@contentful/field-editor-rich-text 3.4.0 → 3.4.1

package/dist/field-editor-rich-text.esm.js

@@ -2080,6 +2080,9 @@ var styles = {
       marginLeft: 0
     }
   }),
+  menuPoper: /*#__PURE__*/css({
+    zIndex: tokens.zIndexModal
+  }),
   menuContent: /*#__PURE__*/css({
     width: '400px',
     maxHeight: '300px'
@@ -2252,6 +2255,7 @@ var CommandList = function CommandList(_ref5) {
   }, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement("div", _extends({
     "aria-hidden": true,
     ref: popoverContainer,
+    className: styles.menuPoper,
     style: popper.styles.popper
   }, popper.attributes.popper), /*#__PURE__*/createElement(Popover, {
     isOpen: isOpen,
@@ -2307,7 +2311,13 @@ var CommandPrompt = function CommandPrompt(props) {
 var createOnKeyDown = function createOnKeyDown() {
   return function (editor) {
     return function (event) {
-      if (isHotkey('/', event)) {
+      // Support for different keyboard layouts:
+      // `isHotKey` uses by default `event.which`, which will never generates a match for all layouts (QWERTY: `/`, QWERTZ: `shift+7`)
+      // with `byKey: true` `isHotKey` uses `event.key` which will return the interpreted key '/'
+      // It would still fail without the the optional `shift?` param, as it first checks the modKeys (`shiftKey` would be true on QWERTZ)
+      if (isHotkey('shift?+/', {
+        byKey: true
+      }, event)) {
         addMark(editor, COMMAND_PROMPT);
         editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
       }
@@ -5534,7 +5544,13 @@ var createCodePlugin = function createCodePlugin() {
     type: MARKS.CODE,
     component: Code,
     options: {
-      hotkey: ['mod+/']
+      // We need to define multiple hotkeys here,
+      // - mod+/ -> QWERTY keyboard layout
+      // - mod+shift+7 -> QWERTZ keyboard layout
+      // The workaround like in packages/rich-text/src/plugins/CommandPalette/onKeyDown.ts is sadly not working here,
+      // as `shift+7` is not interpreted as `/` with the `mod` key by the OS.
+      // TODO: there are a lot more different keyboard layouts out there
+      hotkey: ['mod+/', 'mod+shift+7']
     },
     handlers: {
       onKeyDown: buildMarkEventHandler(MARKS.CODE)