Merge pull request #2488 from LD4P/diacritcs-insertion

Insert diacritics at the cursor's current position

src/actions/inputs.js

@@ -11,3 +11,8 @@ export const showDiacritics = (propertyKey) => ({
   type: 'SHOW_DIACRITICS',
   payload: propertyKey,
 })
+
+export const updateCursorPosition = (position) => ({
+  type: 'SET_CURSOR_POSITION',
+  payload: position,
+})

src/components/editor/diacritics/CharacterButton.jsx

@@ -4,11 +4,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useSelector, useDispatch } from 'react-redux'
 import { selectLiteralInputContent } from 'selectors/inputs'
-import { setLiteralContent } from 'actions/inputs'
+import { setLiteralContent, updateCursorPosition } from 'actions/inputs'
 
 const CharacterButton = (props) => {
   const dispatch = useDispatch()
   const targetPropertyKey = useSelector((state) => state.selectorReducer.editor.diacritics.key)
+  const cursorOffset = useSelector((state) => state.selectorReducer.editor.diacritics.cursorOffset)
   const content = useSelector((state) => selectLiteralInputContent(state, targetPropertyKey)) || ''
 
   const cleanCharacter = () => {
@@ -22,8 +23,13 @@ const CharacterButton = (props) => {
   }
 
   const handleClick = (event) => {
-    const newValue = content + cleanCharacter()
+    const newValue = content.slice(0, cursorOffset)
+        + cleanCharacter()
+        + content.slice(cursorOffset)
+
     dispatch(setLiteralContent(targetPropertyKey, newValue))
+    // Move the insert position over one character
+    dispatch(updateCursorPosition(cursorOffset + 1))
     event.preventDefault()
   }
 

src/components/editor/property/InputLiteral.jsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import TextareaAutosize from 'react-textarea-autosize'
 import {
   hideDiacritics, showDiacritics,
-  setLiteralContent,
+  setLiteralContent, updateCursorPosition,
 } from 'actions/inputs'
 import { displayResourceValidations } from 'selectors/errors'
 import InputValue from './InputValue'
@@ -47,6 +47,8 @@ const InputLiteral = (props) => {
       props.hideDiacritics()
       event.preventDefault()
     }
+    // Handle any position changing
+    props.updateCursorPosition(inputLiteralRef.current.selectionStart)
   }
 
   const handleEdit = (content, lang) => {
@@ -59,6 +61,7 @@ const InputLiteral = (props) => {
     if (props.shouldShowDiacritic) {
       props.hideDiacritics()
     } else {
+      props.updateCursorPosition(inputLiteralRef.current.selectionStart)
       props.showDiacritics(props.property.key)
     }
     event.preventDefault()
@@ -103,6 +106,16 @@ const InputLiteral = (props) => {
     }
   }
 
+  // This handles if they change the cursor position within the field after the focus event.
+  const handleClick = () => {
+    props.updateCursorPosition(inputLiteralRef.current.selectionStart)
+  }
+
+  // This handles if they focus into the field using tab (no click)
+  const handleFocus = () => {
+    props.updateCursorPosition(inputLiteralRef.current.selectionStart)
+  }
+
   return (
     <div className="form-group">
       <div className="input-group" onBlur={handleBlur} id={id}>
@@ -112,6 +125,8 @@ const InputLiteral = (props) => {
               placeholder={props.property.propertyTemplate.label}
               onChange={(event) => props.setLiteralContent(props.property.key, event.target.value)}
               onKeyPress={handleKeypress}
+              onFocus={handleFocus}
+              onClick={handleClick}
               value={props.content}
               disabled={disabled}
               ref={inputLiteralRef}
@@ -137,6 +152,7 @@ InputLiteral.propTypes = {
   addValue: PropTypes.func,
   content: PropTypes.string,
   setLiteralContent: PropTypes.func,
+  updateCursorPosition: PropTypes.func,
 }
 
 const mapStateToProps = (state, ownProps) => ({
@@ -146,7 +162,7 @@ const mapStateToProps = (state, ownProps) => ({
 })
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
-  hideDiacritics, showDiacritics, addValue, setLiteralContent,
+  hideDiacritics, showDiacritics, addValue, setLiteralContent, updateCursorPosition,
 }, dispatch)
 
 export default connect(mapStateToProps, mapDispatchToProps)(InputLiteral)

src/reducers/index.js

@@ -6,6 +6,7 @@ import {
 } from './authenticate'
 import {
   setLiteralInputContent, hideDiacriticsSelection, showDiacriticsSelection,
+  setCursorPosition,
 } from './inputs'
 import {
   setBaseURL, hideProperty, showProperty,
@@ -83,6 +84,7 @@ const handlers = {
   SET_LITERAL_CONTENT: setLiteralInputContent,
   SET_CURRENT_COMPONENT: setCurrentComponent,
   SET_CURRENT_RESOURCE: setCurrentResource,
+  SET_CURSOR_POSITION: setCursorPosition,
   SET_RESOURCE_GROUP: setResourceGroup,
   SET_TEMPLATE_MESSAGES: setTemplateMessages,
   SET_SEARCH_RESULTS: setSearchResults,

src/reducers/inputs.js

@@ -20,3 +20,9 @@ export const showDiacriticsSelection = (state, action) => {
   newState.editor.diacritics.key = action.payload
   return newState
 }
+
+export const setCursorPosition = (state, action) => {
+  const newState = { ...state }
+  newState.editor.diacritics.cursorOffset = action.payload
+  return newState
+}