Copy to clipboard or select text from canvas

Mesrine

Hi everyone.

I have develop an app using qt web assembly.

The thing is i need the user to be able to copy strings from the qt canvas. The approach i am using is to select text and copy to clipboard like

 textEdit.text = rootdelegate.blockid;
 textEdit.selectAll();
 textEdit.copy();

when the user clicks. This work well on firefox but in chrome it return

clipboard error "NotAllowedError" "Support for multiple ClipboardItems is not implemented."

Also even if the text to copy is shown on screen and can be selected "ctrl+c" does not copy the selected text. This make sense because you are working with an html canvas.

So my question is what is the best way to implement that the user can copy text from a qt-webassembly canvas. In the sense that works for all browsers.
Thank you in advance for your time.

Mesrine

@Mesrine
I solved the chrome error by only copying the text to the clipboard. It seems that

textEdit.copy();

try to copy images also to the clipboard and this still is not supported on some browsers.

so I made my own class for text-only copy to clipboard

class TextClipboard :public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString  text MEMBER m_text NOTIFY textChanged)
    QML_ELEMENT

public:
    TextClipboard(QObject *parent = nullptr):QObject(parent),m_text(QString()),clipboard(QGuiApplication::clipboard())
    {

    }
    Q_INVOKABLE void copy()const
    {
        clipboard->setText(m_text);
    }
signals:
    void textChanged();

public:
    QString m_text;
    QClipboard *clipboard;
};

In the qml file where the text has to be copied on click on a Image I set

TextClipboard
    {
        id:tclip
        text:root.address
    }

Image {
        id:img
        anchors.centerIn:parent
        sourceSize.width: root.width-10
        source: "image://qrcodeblack/"+root.address
        MouseArea {
            anchors.fill: img
            onClicked:
            {
               tclip.copy();
            }
        }
    }

And this solves the error

Wangxiansheng

@Mesrine
I also encountered this problem.I am unable to copy the content in label using the following code:
QString str=ui->label_7->text();
QClipboard *clipboard = QApplication::clipboard();
clipboard->setText(str);
May I ask if you have a solution now?

JonB

@Wangxiansheng said in Copy to clipboard or select text from canvas:

I also encountered this problem

So if you have the same problem confirm

You are writing for WebAssembly?
You are trying to copy from canvas?
You are using Chrome and seeing

clipboard error "NotAllowedError" "Support for multiple ClipboardItems is not implemented."

Right?

Wangxiansheng

@JonB
Sorry, I couldn't express myself clearly just now.

“123456” is displayed by a control named label_7.
This is the corresponding code I clicked on in the copy button：
QString str=ui->label_7->text();
QClipboard *clipboard = QApplication::clipboard();
clipboard->setText(str);

I hope to click the Copy button to copy the string "123456" from label_7 to the clipboard, and then use Ctrl+v to paste it elsewhere. When I am on the Desktop, clicking the copy button can easily retrieve strings. But when I clicked the copy button on Qt for WebAssembly, I didn't get the corresponding results, and there was nothing on the clipboard.
So how should I solve this problem.

JonB

@Wangxiansheng

[...] to the clipboard, and then use Ctrl+v to paste it elsewhere.

[...] and there was nothing on the clipboard.

Never used WebAssembly or clipboard, but what about Qt WebAssembly clipboard blog [which I see is by our @lorn-potter :) ]

Up until now, Qt for WebAssembly's clipboard was text-only and only within the app itself. Qt 6.3 will have better clipboard support between host and app [...]

So are you Qt 6.3+?

Wangxiansheng

@JonB
Oh, sorry, I am using Qt5.15.2. Next, I will try using the latest version of QT.

Mesrine

@Wangxiansheng
I still use the same approach explained in my question.
Now with qt6.6 one can select from the canvas with control+c
and paste(at least for firefox). For chrome is still giving the error of my question(this is clearly a chrome problem). The app is now compiled with qt6.6.

Mesrine

@Mesrine
I solved the chrome error by only copying the text to the clipboard. It seems that

textEdit.copy();

try to copy images also to the clipboard and this still is not supported on some browsers.

so I made my own class for text-only copy to clipboard

class TextClipboard :public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString  text MEMBER m_text NOTIFY textChanged)
    QML_ELEMENT

public:
    TextClipboard(QObject *parent = nullptr):QObject(parent),m_text(QString()),clipboard(QGuiApplication::clipboard())
    {

    }
    Q_INVOKABLE void copy()const
    {
        clipboard->setText(m_text);
    }
signals:
    void textChanged();

public:
    QString m_text;
    QClipboard *clipboard;
};

In the qml file where the text has to be copied on click on a Image I set

TextClipboard
    {
        id:tclip
        text:root.address
    }

Image {
        id:img
        anchors.centerIn:parent
        sourceSize.width: root.width-10
        source: "image://qrcodeblack/"+root.address
        MouseArea {
            anchors.fill: img
            onClicked:
            {
               tclip.copy();
            }
        }
    }

And this solves the error