fix(@desktop/chat): Text formatting menu should not disappear when performing actions
Qt's Menu closes the menu when action is triggered and to overcome this default behaviour added a custom event to be called when action is clicked. Fixed some formatting related bugs. fixes #2349
This commit is contained in:
parent
a362efecf4
commit
0531d71e6c
|
@ -213,25 +213,41 @@ Rectangle {
|
||||||
function wrapSelection(wrapWith) {
|
function wrapSelection(wrapWith) {
|
||||||
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
||||||
|
|
||||||
|
// calulate the new selection start and end positions
|
||||||
|
var newSelectionStart = messageInputField.selectionStart + wrapWith.length
|
||||||
|
var newSelectionEnd = messageInputField.selectionEnd - messageInputField.selectionStart + newSelectionStart
|
||||||
|
|
||||||
insertInTextInput(messageInputField.selectionStart, wrapWith);
|
insertInTextInput(messageInputField.selectionStart, wrapWith);
|
||||||
insertInTextInput(messageInputField.selectionEnd, wrapWith);
|
insertInTextInput(messageInputField.selectionEnd, wrapWith);
|
||||||
|
|
||||||
messageInputField.deselect()
|
messageInputField.select(newSelectionStart, newSelectionEnd)
|
||||||
}
|
}
|
||||||
|
|
||||||
function unwrapSelection(unwrapWith, selectedTextWithFormationChars) {
|
function unwrapSelection(unwrapWith, selectedTextWithFormationChars) {
|
||||||
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
if (messageInputField.selectionStart - messageInputField.selectionEnd === 0) return
|
||||||
|
|
||||||
|
// calulate the new selection start and end positions
|
||||||
|
var newSelectionStart = messageInputField.selectionStart - unwrapWith.length
|
||||||
|
var newSelectionEnd = messageInputField.selectionEnd-messageInputField.selectionStart + newSelectionStart
|
||||||
|
|
||||||
selectedTextWithFormationChars = selectedTextWithFormationChars.trim()
|
selectedTextWithFormationChars = selectedTextWithFormationChars.trim()
|
||||||
// Check if the selectedTextWithFormationChars has formation chars and if so, calculate how many so we can adapt the start and end pos
|
// Check if the selectedTextWithFormationChars has formation chars and if so, calculate how many so we can adapt the start and end pos
|
||||||
const selectTextDiff = (selectedTextWithFormationChars.length - messageInputField.selectedText.length) / 2
|
const selectTextDiff = (selectedTextWithFormationChars.length - messageInputField.selectedText.length) / 2
|
||||||
|
|
||||||
const changedString = selectedTextWithFormationChars.replace(unwrapWith, '').replace(unwrapWith, '')
|
// Remove the deselected option from the before and after the selected text
|
||||||
|
const prefixChars = messageInputField.getText((messageInputField.selectionStart - selectTextDiff), messageInputField.selectionStart)
|
||||||
|
const updatedPrefixChars = prefixChars.replace(unwrapWith, '')
|
||||||
|
const postfixChars = messageInputField.getText(messageInputField.selectionEnd, (messageInputField.selectionEnd + selectTextDiff))
|
||||||
|
const updatedPostfixChars = postfixChars.replace(unwrapWith, '')
|
||||||
|
|
||||||
|
// Create updated selected string with pre and post formatting characters
|
||||||
|
const updatedSelectedStringWithFormatChars = updatedPrefixChars + messageInputField.selectedText + updatedPostfixChars
|
||||||
|
|
||||||
messageInputField.remove(messageInputField.selectionStart - selectTextDiff, messageInputField.selectionEnd + selectTextDiff)
|
messageInputField.remove(messageInputField.selectionStart - selectTextDiff, messageInputField.selectionEnd + selectTextDiff)
|
||||||
|
|
||||||
insertInTextInput(messageInputField.selectionStart, changedString)
|
insertInTextInput(messageInputField.selectionStart, updatedSelectedStringWithFormatChars)
|
||||||
|
|
||||||
messageInputField.deselect()
|
messageInputField.select(newSelectionStart, newSelectionEnd)
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPlainText() {
|
function getPlainText() {
|
||||||
|
@ -927,7 +943,7 @@ Rectangle {
|
||||||
icon.name: "format-text-italic"
|
icon.name: "format-text-italic"
|
||||||
//% "Italic"
|
//% "Italic"
|
||||||
text: qsTrId("italic")
|
text: qsTrId("italic")
|
||||||
checked: textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")
|
checked: (textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")) || textFormatMenu.surroundedBy("***")
|
||||||
}
|
}
|
||||||
StatusChatInputTextFormationAction {
|
StatusChatInputTextFormationAction {
|
||||||
wrapper: "~~"
|
wrapper: "~~"
|
||||||
|
|
|
@ -3,9 +3,11 @@ import QtQuick.Controls 2.13
|
||||||
|
|
||||||
Action {
|
Action {
|
||||||
property string wrapper
|
property string wrapper
|
||||||
|
// adding this signal due to a known limitation from Qt: Menu closes when Action is triggered
|
||||||
|
signal actionTriggered()
|
||||||
icon.width: 12
|
icon.width: 12
|
||||||
icon.height: 16
|
icon.height: 16
|
||||||
onTriggered: textFormatMenu.surroundedBy(wrapper) ?
|
onActionTriggered: checked ?
|
||||||
unwrapSelection(wrapper, textFormatMenu.selectedTextWithFormationChars) :
|
unwrapSelection(wrapper, textFormatMenu.selectedTextWithFormationChars) :
|
||||||
wrapSelection(wrapper)
|
wrapSelection(wrapper)
|
||||||
checked: textFormatMenu.surroundedBy(wrapper)
|
checked: textFormatMenu.surroundedBy(wrapper)
|
||||||
|
|
|
@ -64,7 +64,7 @@ Menu {
|
||||||
icon.name: menuItem.action.icon.name
|
icon.name: menuItem.action.icon.name
|
||||||
icon.width: menuItem.action.icon.width
|
icon.width: menuItem.action.icon.width
|
||||||
icon.height: menuItem.action.icon.height
|
icon.height: menuItem.action.icon.height
|
||||||
onClicked: menuItem.action.trigger()
|
onClicked: menuItem.action.actionTriggered()
|
||||||
highlighted: menuItem.action.checked
|
highlighted: menuItem.action.checked
|
||||||
StatusToolTip {
|
StatusToolTip {
|
||||||
visible: parent.hovered
|
visible: parent.hovered
|
||||||
|
|
Loading…
Reference in New Issue