soccerloway / quill-better-table

Module for better table in Quill, more useful features are supported.
MIT License
319 stars 121 forks source link

Is there a definition of the Delta Format generated by quill-better-table #45

Closed npcole closed 4 years ago

npcole commented 4 years ago

I'm trying to write a parser for the Quill Better Table format, and while reverse-engineering it is not impossible, is there a definition anywhere of what qbt produces?

aglitoiu commented 4 years ago

I would also like to get an answer at this question. I want to save the quill's content in a database and then show it in a html view, and i can't do this because I don't find a viable delta to html converter. If i would know the Delte Format definition, I would try to make a viable converter

soccerloway commented 4 years ago
interface TableCellLineAttributes {
  rowspan: string;
  colspan: string;
  row: string;
  cell: string;
}

interface TableCellLine {
  attributes: {
    'table-cell-line': TableCellLineAttributes;
    row: string;
    rowspan: string;
    colspan: string;
  },
  insert: '\n'
}
soccerloway commented 4 years ago

Example:

image

const QuillBetterTableDelta = {
  "ops":[
    {
      "insert":"\n"
    },
    {
      "attributes":{"table-col":{"width":"100"}},
      "insert":"\n\n\n"
    },
    {
      "insert":"cell-1-line-1"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-zb2s","cell":"cell-bo8d"},
        "row":"row-zb2s",
        "rowspan":"1",
        "colspan":"1"
      },
      "insert":"\n"
    },
    {
      "insert":"cell-1-line-2"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-zb2s","cell":"cell-bo8d"},
        "row":"row-zb2s",
        "rowspan":"1",
        "colspan":"1"},
        "insert":"\n"
      },
    {
      "insert":"cell-2-line-1"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-zb2s","cell":"cell-qxi3"},
        "row":"row-zb2s",
        "rowspan":"1",
        "colspan":"1"
      },
      "insert":"\n"
    },
    {
      "insert":"cell-3-line-1"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-zb2s","cell":"cell-8xwx"},
        "row":"row-zb2s",
        "rowspan":"1",
        "colspan":"1"
      },
      "insert":"\n"
    },
    {
      "insert":"cell-4-line-1"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-62ms","cell":"cell-x1jq"},
        "row":"row-62ms",
        "rowspan":"1",
        "colspan":"1"
      },
      "insert":"\n"
    },
    {
      "insert":"cell 5,6,8,9 merged"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"2","colspan":"2","row":"row-62ms","cell":"cell-4cgh"},
        "row":"row-62ms",
        "rowspan":"2",
        "colspan":"2"
      },
      "insert":"\n"
    },
    {
      "insert":"cell-7-line-1"
    },
    {
      "attributes":{
        "table-cell-line":{"rowspan":"1","colspan":"1","row":"row-51hq","cell":"cell-pnz2"},
        "row":"row-51hq",
        "rowspan":"1",
        "colspan":"1"
      },
      "insert":"\n"
    },
    {
      "insert":"\n"
    }
  ]
}