QmlDesigner: Improve in-place Text element text modification

When double-clicking Text -element, check if the text is rich text or not.
In case of rich text, show a rich-text editor modal dialog
In case of plain text, show a in-place LineEdit with correct font

Task-number: QDS-2306
Change-Id: I5206c7d6c869e26ad39979106510d72626dbe800
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

src/plugins/qmldesigner/CMakeLists.txt

@@ -30,6 +30,7 @@ add_qtc_plugin(QmlDesigner
     settingspage.cpp settingspage.h settingspage.ui
     shortcutmanager.cpp shortcutmanager.h
     designermcumanager.cpp designermcumanager.h
+    richtexteditordialog.cpp richtexteditordialog.h
   EXPLICIT_MOC
     components/propertyeditor/propertyeditorvalue.h
     components/connectioneditor/connectionviewwidget.h

src/plugins/qmldesigner/components/richtexteditor/richtexteditor.cpp

@@ -132,6 +132,8 @@ RichTextEditor::RichTextEditor(QWidget *parent)
             this, &RichTextEditor::currentCharFormatChanged);
     connect(ui->textEdit, &QTextEdit::cursorPositionChanged,
             this, &RichTextEditor::cursorPositionChanged);
+    connect(ui->textEdit, &QTextEdit::textChanged,
+            this, &RichTextEditor::onTextChanged);
     connect(m_linkDialog, &QDialog::accepted, [this]() {
         QTextCharFormat oldFormat = ui->textEdit->textCursor().charFormat();
 
@@ -223,6 +225,10 @@ void RichTextEditor::cursorPositionChanged()
     tableChanged(ui->textEdit->textCursor());
 }
 
+void RichTextEditor::onTextChanged() {
+    emit textChanged(richText());
+}
+
 void RichTextEditor::mergeFormatOnWordOrSelection(const QTextCharFormat &format)
 {
     QTextCursor cursor = ui->textEdit->textCursor();

src/plugins/qmldesigner/components/richtexteditor/richtexteditor.h

@@ -69,11 +69,12 @@ public:
 
 signals:
     void insertingImage(QString &filePath);
+    void textChanged(QString text);
 
 private slots:
     void currentCharFormatChanged(const QTextCharFormat &format);
     void cursorPositionChanged();
-
+    void onTextChanged();
 private:
     QIcon getIcon(Theme::Icon icon);
     void mergeFormatOnWordOrSelection(const QTextCharFormat &format);

src/plugins/qmldesigner/components/texttool/textedititem.cpp

@@ -76,6 +76,9 @@ void TextEditItem::setFormEditorItem(FormEditorItem *formEditorItem)
         QSize maximumSize = rect.size().toSize();
         activateTextEdit(maximumSize);
     } else {
+        auto lineEdit = TextEditItemWidget::lineEdit();
+        auto node = m_formEditorItem->qmlItemNode();
+        lineEdit->setFont(node.instanceValue("font").value<QFont>());
         activateLineEdit();
     }
 

src/plugins/qmldesigner/components/texttool/texttool.cpp

@@ -36,6 +36,7 @@
 
 #include "nodemetainfo.h"
 #include "qmlitemnode.h"
+#include "richtexteditordialog.h"
 #include <qmldesignerplugin.h>
 
 #include <abstractaction.h>
@@ -207,6 +208,14 @@ void TextTool::selectedItemsChanged(const QList<FormEditorItem*> &itemList)
     }
     if (!itemList.isEmpty()) {
         FormEditorItem *formEditorItem = itemList.constFirst();
+        auto text = formEditorItem->qmlItemNode().instanceValue("text").toString();
+        auto format = formEditorItem->qmlItemNode().instanceValue("format").value<int>();
+        if (format == Qt::RichText || Qt::mightBeRichText(text)) {
+            RichTextEditorDialog* editorDialog = new RichTextEditorDialog(text);
+            editorDialog->setFormEditorItem(formEditorItem);
+            editorDialog->show();
+            view()->changeToSelectionTool();
+        } else {
             m_textItem = new TextEditItem(scene());
             textItem()->setParentItem(scene()->manipulatorLayerItem());
             textItem()->setFormEditorItem(formEditorItem);
@@ -214,6 +223,7 @@ void TextTool::selectedItemsChanged(const QList<FormEditorItem*> &itemList)
                 textItem()->writeTextToProperty();
                 view()->changeToSelectionTool();
             });
+        }
     } else {
         view()->changeToSelectionTool();
     }

src/plugins/qmldesigner/qmldesignerplugin.pri

@@ -10,7 +10,8 @@ HEADERS += $$PWD/qmldesignerconstants.h \
     $$PWD/documentwarningwidget.h \
     $$PWD/qmldesignericons.h \
     $$PWD/openuiqmlfiledialog.h \
-    $$PWD/designermcumanager.h
+    $$PWD/designermcumanager.h \
+    $$PWD/richtexteditordialog.h
 
 SOURCES += $$PWD/qmldesignerplugin.cpp \
     $$PWD/shortcutmanager.cpp \
@@ -22,7 +23,8 @@ SOURCES += $$PWD/qmldesignerplugin.cpp \
     $$PWD/documentmanager.cpp \
     $$PWD/documentwarningwidget.cpp \
     $$PWD/openuiqmlfiledialog.cpp \
-    $$PWD/designermcumanager.cpp
+    $$PWD/designermcumanager.cpp \
+    $$PWD/richtexteditordialog.cpp
 
 FORMS += $$PWD/settingspage.ui \
     $$PWD/openuiqmlfiledialog.ui

src/plugins/qmldesigner/qmldesignerplugin.qbs

@@ -984,6 +984,8 @@ Project {
             "shortcutmanager.h",
             "designermcumanager.cpp",
             "designermcumanager.h",
+            "richtexteditordialog.cpp",
+            "richtexteditordialog.h",
         ]
     }
 }

src/plugins/qmldesigner/richtexteditordialog.cpp

@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "richtexteditordialog.h"
+#include <QVBoxLayout>
+
+namespace QmlDesigner {
+
+RichTextEditorDialog::RichTextEditorDialog(QString text)
+{
+    m_editor = new RichTextEditor(this);
+    m_editor->setRichText(text);
+
+    auto layout = new QVBoxLayout(this);
+    layout->addWidget(m_editor);
+    setLayout(layout);
+
+    connect(m_editor, &RichTextEditor::textChanged,
+            this, &RichTextEditorDialog::onTextChanged);
+
+    connect(this, &QDialog::finished,
+            this, &RichTextEditorDialog::onFinished);
+
+    setModal(true);
+}
+
+void RichTextEditorDialog::setFormEditorItem(FormEditorItem* formEditorItem)
+{
+    m_formEditorItem = formEditorItem;
+}
+
+void RichTextEditorDialog::onTextChanged(QString text)
+{
+    Q_UNUSED(text);
+    // TODO: try adding following and make it react faster
+    // setTextToFormEditorItem(text);
+}
+
+void RichTextEditorDialog::onFinished()
+{
+    setTextToFormEditorItem(m_editor->richText());
+}
+
+void RichTextEditorDialog::setTextToFormEditorItem(QString text)
+{
+    if (m_formEditorItem) {
+        if (text.isEmpty())
+            m_formEditorItem->qmlItemNode().removeProperty("text");
+        else
+            m_formEditorItem->qmlItemNode().setVariantProperty("text", text);
+    }
+}
+
+} //namespace QmlDesigner

src/plugins/qmldesigner/richtexteditordialog.h

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#ifndef RICHTEXTEDITORDIALOG_H
+#define RICHTEXTEDITORDIALOG_H
+
+#include <QDialog>
+#include "richtexteditor/richtexteditor.h"
+#include "formeditor/formeditoritem.h"
+
+namespace QmlDesigner {
+
+
+class RichTextEditorDialog : public QDialog {
+    Q_OBJECT
+public:
+    explicit RichTextEditorDialog(const QString text);
+    void setFormEditorItem(FormEditorItem* formEditorItem);
+
+signals:
+    void textChanged(QString text);
+private:
+    RichTextEditor* m_editor;
+    FormEditorItem* m_formEditorItem;
+
+private slots:
+    void onTextChanged(QString text);
+    void onFinished();
+    void setTextToFormEditorItem(QString text);
+};
+
+} // namespace QmlDesigner
+
+#endif // RICHTEXTEDITORDIALOG_H