Merge pull request #5411 from mzimandl/release-0.16.x

Fix handling composition mode in query input for `release-0.16.x` branch
czcorpus · Nov 1, 2022 · 085d3c0 · 085d3c0
2 parents b339590 + 4658f34
commit 085d3c0
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 34 deletions.
diff --git a/dockerfiles/Dockerfile.kontext b/dockerfiles/Dockerfile.kontext
@@ -1,4 +1,4 @@
-FROM czcorpus/kontext-manatee:latest
+FROM czcorpus/kontext-manatee:2.167.10
 
 SHELL ["/bin/bash", "--login", "-c"]
 RUN wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

diff --git a/dockerfiles/Dockerfile.kontext-cypress b/dockerfiles/Dockerfile.kontext-cypress
@@ -1,4 +1,4 @@
-FROM czcorpus/kontext-manatee:latest
+FROM czcorpus/kontext-manatee:2.167.10
 
 SHELL ["/bin/bash", "--login", "-c"]
 RUN wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

diff --git a/dockerfiles/Dockerfile.kontext-dev b/dockerfiles/Dockerfile.kontext-dev
@@ -1,4 +1,4 @@
-FROM czcorpus/kontext-manatee:latest
+FROM czcorpus/kontext-manatee:2.167.10
 
 SHELL ["/bin/bash", "--login", "-c"]
 RUN wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

diff --git a/dockerfiles/Dockerfile.rqworker b/dockerfiles/Dockerfile.rqworker
@@ -1,4 +1,4 @@
-FROM czcorpus/kontext-manatee:latest
+FROM czcorpus/kontext-manatee:2.167.10
 
 RUN mkdir /var/log/rq
 WORKDIR /opt/kontext

diff --git a/dockerfiles/Dockerfile.ws b/dockerfiles/Dockerfile.ws
@@ -1,4 +1,4 @@
-FROM czcorpus/kontext-manatee:latest
+FROM czcorpus/kontext-manatee:2.167.10
 
 RUN pip3 install --upgrade pip && pip3 install aiohttp
 

diff --git a/public/files/js/models/pquery/common.ts b/public/files/js/models/pquery/common.ts
@@ -144,6 +144,7 @@ export interface PqueryFormModelState {
     structAttrs:Array<Kontext.AttrItem>;
     paramsVisible:boolean;
     posRangeNotSupported:boolean;  // for structural attributes pos range makes no sense
+    compositionModeOn:boolean;
 }
 
 /**
@@ -192,7 +193,7 @@ export function newModelState(
                             type: 'specification',
                             maxNonMatchingRatio: Kontext.newFormValue('0', true)
                         },
-                        type: 'partial-query'
+                        type: 'partial-query',
                     }
                 ),
                 2
@@ -222,7 +223,8 @@ export function newModelState(
         attrs,
         structAttrs,
         paramsVisible: true,
-        posRangeNotSupported: defaultAttr.includes('.')
+        posRangeNotSupported: defaultAttr.includes('.'),
+        compositionModeOn: false,
     };
 }
 
@@ -465,7 +467,8 @@ export function storedQueryToModel(
         attrs,
         structAttrs,
         paramsVisible: true,
-        posRangeNotSupported: sq.attr.includes('.')
+        posRangeNotSupported: sq.attr.includes('.'),
+        compositionModeOn: false,
     }
 }
 

diff --git a/public/files/js/models/pquery/form.ts b/public/files/js/models/pquery/form.ts
@@ -234,6 +234,17 @@ export class PqueryFormModel extends StatefulModel<PqueryFormModelState> impleme
             }
         );
 
+        this.addActionHandler(
+            QueryActions.SetCompositionMode,
+            action => {
+                this.changeState(
+                    state => {
+                        state.compositionModeOn = action.payload.status;
+                    }
+                )
+            }
+        );
+
         this.addActionHandler<typeof QueryActions.QueryInputMoveCursor>(
             QueryActions.QueryInputMoveCursor.name,
             action => {

diff --git a/public/files/js/models/query/filter.ts b/public/files/js/models/query/filter.ts
@@ -33,7 +33,6 @@ import { Actions } from './actions';
 import { Actions as ConcActions } from '../concordance/actions';
 import { Actions as MainMenuActions } from '../mainMenu/actions';
 import * as PluginInterfaces from '../../types/plugins';
-import { TextTypesModel } from '../textTypes/main';
 import { AjaxConcResponse } from '../concordance/common';
 import { QueryType, AnyQuery, AdvancedQuery, SimpleQuery, parseSimpleQuery } from './query';
 import { highlightSyntaxStatic } from '../cqleditor/parser';

diff --git a/public/files/js/views/cqlEditor.tsx b/public/files/js/views/cqlEditor.tsx
@@ -65,6 +65,7 @@ interface CQLEditorCoreState {
     queries:{[sourceId:string]:AdvancedQuery|SimpleQuery}|unknown; // pquery block -> query
     downArrowTriggersHistory:{[sourceId:string]:boolean};
     cqlEditorMessages:{[sourceId:string]:Array<string>};
+    compositionModeOn:boolean;
 }
 
 
@@ -151,10 +152,12 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
             this.inputKeyDownHandler = this.inputKeyDownHandler.bind(this);
             this.ffKeyDownHandler = this.ffKeyDownHandler.bind(this);
             this.handleSelect = this.handleSelect.bind(this);
+            this.handleCompositionStart = this.handleCompositionStart.bind(this);
+            this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
             this.contentEditable = new ContentEditable<HTMLPreElement>(this.props.inputRef);
         }
 
-        private handleInputChange() {
+        private newInputDispatch() {
             const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
             const query = this.contentEditable.extractText();
 
@@ -171,6 +174,35 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
             });
         }
 
+        private handleInputChange() {
+            if (!this.props.compositionModeOn) {
+                this.newInputDispatch();
+            }
+        }
+
+        private handleCompositionStart() {
+            dispatcher.dispatch<typeof Actions.SetCompositionMode>({
+                name: Actions.SetCompositionMode.name,
+                payload: {
+                    formType: this.props.formType,
+                    status: true
+                }
+            });
+        }
+
+        private handleCompositionEnd() {
+            dispatcher.dispatch<typeof Actions.SetCompositionMode>({
+                name: Actions.SetCompositionMode.name,
+                payload: {
+                    formType: this.props.formType,
+                    status: false
+                }
+            });
+            // Chrome performs onCompositionEnd action after inputChange
+            // we have to dispatch new state here
+            this.newInputDispatch();
+        }
+
         private findLinkParent(elm:HTMLElement):HTMLElement {
             let curr = elm;
             while (curr !== this.props.inputRef.current) {
@@ -307,16 +339,18 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
         }
 
         private handleSelect() {
-            const [anchorIdx, focusIdx] = this.contentEditable.getRawSelection();
-            dispatcher.dispatch<typeof Actions.QueryInputSelectText>({
-                name: Actions.QueryInputSelectText.name,
-                payload: {
-                    sourceId: this.props.sourceId,
-                    formType: this.props.formType,
-                    anchorIdx,
-                    focusIdx
-                }
-            });
+            if (!this.props.compositionModeOn) {
+                const [anchorIdx, focusIdx] = this.contentEditable.getRawSelection();
+                dispatcher.dispatch<typeof Actions.QueryInputSelectText>({
+                    name: Actions.QueryInputSelectText.name,
+                    payload: {
+                        sourceId: this.props.sourceId,
+                        formType: this.props.formType,
+                        anchorIdx,
+                        focusIdx
+                    }
+                });
+            }
         }
 
         componentDidUpdate(prevProps, prevState) {
@@ -361,6 +395,8 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
                                 contentEditable={true}
                                 spellCheck={false}
                                 onInput={(evt) => this.handleInputChange()}
+                                onCompositionStart={this.handleCompositionStart}
+                                onCompositionEnd={this.handleCompositionEnd}
                                 onClick={this.handleEditorClick}
                                 className="cql-input"
                                 ref={this.props.inputRef}

diff --git a/public/files/js/views/query/richInput.tsx b/public/files/js/views/query/richInput.tsx
@@ -81,22 +81,26 @@ export function init(
             this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
         }
 
+        private newInputDispatch(evt:React.ChangeEvent<HTMLInputElement>|React.CompositionEvent<HTMLInputElement>) {
+            const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
+            const query = this.contentEditable.extractText();
+            dispatcher.dispatch<typeof Actions.QueryInputSetQuery>({
+                name: Actions.QueryInputSetQuery.name,
+                payload: {
+                    formType: this.props.formType,
+                    sourceId: this.props.sourceId,
+                    query,
+                    rawAnchorIdx,
+                    rawFocusIdx,
+                    insertRange: null
+                }
+            });
+        }
+
 
         private handleInputChange(evt:React.ChangeEvent<HTMLInputElement>) {
             if (!this.props.compositionModeOn) {
-                const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
-                const query = this.contentEditable.extractText();
-                dispatcher.dispatch<typeof Actions.QueryInputSetQuery>({
-                    name: Actions.QueryInputSetQuery.name,
-                    payload: {
-                        formType: this.props.formType,
-                        sourceId: this.props.sourceId,
-                        query,
-                        rawAnchorIdx,
-                        rawFocusIdx,
-                        insertRange: null
-                    }
-                });
+                this.newInputDispatch(evt);
             }
         }
 
@@ -238,14 +242,17 @@ export function init(
             });
         }
 
-        private handleCompositionEnd() {
+        private handleCompositionEnd(evt:React.CompositionEvent<HTMLInputElement>) {
             dispatcher.dispatch<typeof Actions.SetCompositionMode>({
                 name: Actions.SetCompositionMode.name,
                 payload: {
                     formType: this.props.formType,
                     status: false
                 }
             });
+            // Chrome performs onCompositionEnd action after inputChange
+            // we have to dispatch new state here
+            this.newInputDispatch(evt);
         }
 
         componentDidUpdate(prevProps:RichInputProps & QueryFormModelState, _:unknown) {