search

codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.72k stars 2.08k forks source link

Nested tags onPaste #1308

Open bondarevv opened 4 years ago

bondarevv commented 4 years ago

I'm trying to create insertable table, but found issue. Event not returned nested tags from table.

static get pasteConfig() {
    return {
        tags: [
            "TABLE",
            "TR",
            "TD",
            "TH",
            "TBODY",
            "THEAD",
        ]
    }
}

onPaste(event) {
    console.log(event.detail.data);
}

clipboardData(text/html, part of google sheet table):

<html>
<body>
<!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;font-family:Calibri;font-size:11pt;font-weight:normal;color:#000000;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;test&quot;}">test</td></tr></tbody></table><!--EndFragment-->
</body>
</html>

log from onPaste image

Am I missed some config, to persist nested tags?

Chrome 85.0.4183.102 EditorJS 2.18.0

shenxxu720 commented 3 years ago

我也同样遇到了这个问题，不知道有没有解决办法？

bettysteger commented 11 months ago

@bondarevv this is how it works in the official table tool: https://github.com/editor-js/table/blob/master/src/plugin.js#L185

Juratbek commented 8 months ago

I am also facing this issue :(

Juratbek commented 8 months ago

@bondarevv you can configure by static sanitize method, but I don't know how 😁 just figured out that this method effects. You can read more here: https://github.com/codex-team/editor.js/blob/next/docs/tools-inline.md#static-get-sanitize