diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json index 184735047d22c6dd5c7152696ff220d0f0e73805..1346dbf7676d730c1295939e81603ee2fd731982 100644 --- a/wax-prosemirror-services/package.json +++ b/wax-prosemirror-services/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "highlight.js": "^10.1.1", + "use-dynamic-refs": "^1.0.0", "inversify": "^5.0.1", "inversify-inject-decorators": "^3.1.0", "lodash": "^4.17.4", diff --git a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js index 7732e052a93747fef331d2212642b18f023b0e38..bf6c6cf898effd8f7b6038343a8e368b92cd0358 100644 --- a/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js +++ b/wax-prosemirror-services/src/MatchingService/components/MatchingContainerComponent.js @@ -2,6 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { WaxContext, DocumentHelpers, Icon } from 'wax-prosemirror-core'; +import useDynamicRefs from 'use-dynamic-refs'; import styled from 'styled-components'; import FeedbackComponent from './FeedbackComponent'; import ContainerEditor from './ContainerEditor'; @@ -124,6 +125,7 @@ export default ({ node, view, getPos }) => { const [addingOption, setAddingOption] = useState(false); const addOptionRef = useRef(null); const addOptionBtnRef = useRef(null); + const [getRef, setRef] = useDynamicRefs(); const customProps = main.props.customValues; @@ -213,6 +215,31 @@ export default ({ node, view, getPos }) => { }); }; + useEffect(() => { + const listener = event => { + if (event.code === 'Enter') { + event.preventDefault(); + options.forEach(option => { + if (document.activeElement === getRef(option.value).current) { + getRef(option.value).current.click(); + } + }); + } + }; + + options.forEach(option => { + if (getRef(option.value).current) + getRef(option.value).current.addEventListener('keydown', listener); + }); + + return () => { + options.forEach(option => { + if (getRef(option.value).current) + getRef(option.value).current.removeEventListener('keydown', listener); + }); + }; + }, [options]); + const { testMode } = customProps; const { feedback } = node.attrs; @@ -238,6 +265,7 @@ export default ({ node, view, getPos }) => { {!readOnly && ( <ActionButton onClick={() => removeOption(option.value)} + ref={setRef(option.value)} type="button" > <StyledIconAction name="deleteOutlined" /> diff --git a/yarn.lock b/yarn.lock index e4b8b17e1f3820ed95a2c0d6fb705e567d31f164..2c6e901745e58be728c358a5abe2c03ef998dd19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1267,7 +1267,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99" integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw== @@ -4951,7 +4951,7 @@ cssstyle@^1.0.0, cssstyle@^1.1.1: dependencies: cssom "0.3.x" -csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.7: +csstype@^2.2.0, csstype@^2.5.2: version "2.6.11" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5" integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw== @@ -5341,14 +5341,6 @@ dom-converter@^0.2: dependencies: utila "~0.4" -dom-helpers@^5.0.1: - version "5.1.4" - resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b" - integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A== - dependencies: - "@babel/runtime" "^7.8.7" - csstype "^2.6.7" - dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -12492,16 +12484,6 @@ react-scripts@3.4: optionalDependencies: fsevents "2.1.2" -react-transition-group@^4.3.0: - version "4.4.1" - resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" - integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== - dependencies: - "@babel/runtime" "^7.5.5" - dom-helpers "^5.0.1" - loose-envify "^1.4.0" - prop-types "^15.6.2" - react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" @@ -14869,6 +14851,11 @@ use-deep-compare-effect@^1.3.1: "@types/use-deep-compare-effect" "^1.2.0" dequal "^2.0.2" +use-dynamic-refs@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/use-dynamic-refs/-/use-dynamic-refs-1.0.0.tgz#934b9448d59773ef299f65f36ffc87c343e40353" + integrity sha512-1Ky+Jaj6MIpTRz6NTaCLVm/iDXfRNwUMH9X7BkLtgSL2RCXHQhK2p9SVhut8jZPDfxLDtOIYNM3txsiLXd4yVQ== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"