Trix: Hooks for cleanup pasted HTML?

[siuying]

When we paste copied web page into the editor, the text become very messy. I saw the elements, styles and classes from the source HTML make the output unpredictable.

From #31 I saw a trix-paste event, is it possible to do something before paste happen? It'd be great if we have a hook to cleanup pasted data, or like medium-editor which provide a way to sanitize pasted html.

Where should I look into to add this feature?

[siuying]

The real problem I have is #151

[divyenduz]

@javan : Can this be re-opened. I have a similar requirement where I want to strip HTML from a pasted html string.

I am able to extract the string from html as follows, now I am going through trix source code (as this is still not documented) to find how I can replace the pasted text with this.

document.addEventListener('trix-paste', function (data) {
        if (data.pasteData.hasOwnProperty('html')){
            var div = document.createElement("div");
            div.innerHTML = data.pasteData.html;
            text = div.textContent || div.innerText || "";
            console.log('paste html: ' + text);
        }
    });

Will document this here once I find the solution. Thanks.

[divyenduz]

So, I tried the following

document.addEventListener('trix-paste', function (data) {
        console.log(data);
        if (data.pasteData.hasOwnProperty('html')){
            var div = document.createElement("div");
            div.innerHTML = data.pasteData.html;
            text = div.textContent || div.innerText || "";
            console.log('paste html: ' + text);
            delete data.pasteData.html;
            data.pasteData.string = text;
        }
    });

In the hope that trix will do the rest but it did not work, I suppose because the event is generated in inputControllerDidPaste i.e. after the paste has taken place. Am I understanding it correct ?

Excerpt from editor_controller.coffee

inputControllerWillPasteText: (pasteData) ->
    @editor.recordUndoEntry("Paste")
    @pasting = true

  inputControllerDidPaste: (pasteData) ->
    range = @pastedRange
    @pastedRange = null
    @pasting = null
    @editorElement.notify("paste", {pasteData, range})

Thanks

[divyenduz]

So, I was able to get around this with the following code:

document.addEventListener('trix-paste', function (data) {        
        if (data.pasteData.hasOwnProperty('html')){
            var div = document.createElement("div");
            div.innerHTML = data.pasteData.html;
            text = div.textContent || div.innerText || "";
            data.pasteData.string = text;

            // Undo the paste
            event.target.editor.undo();

            // Use the range to insert required text
            event.target.editor.setSelectedRange(data.range);
            event.target.editor.insertString(text);
        }
    });

If this is the right approach, this issue can remain closed. Otherwise, please comment any alternative or better approach for documentation purpose.

Thanks

[divyenduz]

The only problem I am facing with this approach is that if the user manually clicks the redo button, the HTML formatting is returned. In the editor we are using, we have removed block level buttons by CSS but with this redo caveat, the user will be able to insert a (say) list.

Is there a way to disable block level inputs at trix level. So, that even redo does not make it work ?

Thanks

[dminkovsky]

Undoing the edit is very creative (thank you), but should that be the correct way to handle this? Wouldn't it be better to allow preventDefault()?

[Haraldson]

Indeed, the undo messes with text replacement, ie. if you’ve selected a bigger chunk of text than the one you’ve copied to paste, this method will merge the two in a weird way.

preventDefault doesn’t need to be supported as long as you have stopPropagation and handle everything manually.