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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.4.0...@contentful/field-editor-rich-text@3.4.1) (2023-01-20)
+
+### Bug Fixes
+
+- **rte:** [TOL-989] command prompt not always visible and working ([#1327](https://github.com/contentful/field-editors/issues/1327)) ([1ded2f0](https://github.com/contentful/field-editors/commit/1ded2f0a6da25470ae639fac51a617f0ab233917))
+
 # [3.4.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.3.5...@contentful/field-editor-rich-text@3.4.0) (2023-01-18)
 
 ### Features

package/dist/field-editor-rich-text.cjs.development.js

@@ -2087,6 +2087,9 @@ var styles = {
       marginLeft: 0
     }
   }),
+  menuPoper: /*#__PURE__*/emotion.css({
+    zIndex: tokens.zIndexModal
+  }),
   menuContent: /*#__PURE__*/emotion.css({
     width: '400px',
     maxHeight: '300px'
@@ -2259,6 +2262,7 @@ var CommandList = function CommandList(_ref5) {
   }, /*#__PURE__*/React.createElement(f36Components.ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/React.createElement(f36Utils.Portal, null, /*#__PURE__*/React.createElement("div", _extends({
     "aria-hidden": true,
     ref: popoverContainer,
+    className: styles.menuPoper,
     style: popper.styles.popper
   }, popper.attributes.popper), /*#__PURE__*/React.createElement(f36Components.Popover, {
     isOpen: isOpen,
@@ -2314,7 +2318,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');
       }
@@ -5541,7 +5551,13 @@ var createCodePlugin = function createCodePlugin() {
     type: Contentful.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(Contentful.MARKS.CODE)