Document how to set up "insertTable"

[dlants]

It seems like the provided demo relies on insertTable command being available in https://github.com/ProseMirror/prosemirror-example-setup ... that's no longer the case.

I haven't been able to find good examples for a command that inserts a table into the document, and none of the commands exported from the module seem to fit.

[dlants]

I was able to create a 1x2 table with the following command:

  function insertTable(
    state: EditorState,
    dispatch?: (tr: Transaction) => void
  ): boolean {
    const tr = state.tr.replaceSelectionWith(
      state.schema.nodes.table.create(
        undefined,
        Fragment.fromArray([
          state.schema.nodes.table_row.create(undefined, Fragment.fromArray([
            state.schema.nodes.table_cell.create(),
            state.schema.nodes.table_cell.create()
          ]))
        ])
      )
    );

    if (dispatch) {
      dispatch(tr);
    }

    return true;
  }

[DianeKim]

Where 'Fragment' comes from?:-)

[dlants]

https://prosemirror.net/docs/ref/#model.Fragment

[olsn]

create() did not work for me any more, instead i had to use createAndFill() - this is what worked for me:

function insertTable(
  state,
  dispatch
) {
  const tr = state.tr.replaceSelectionWith(
    state.schema.nodes.table.create(
      undefined,
      Fragment.fromArray([
        state.schema.nodes.table_row.create(undefined, Fragment.fromArray([
          state.schema.nodes.table_cell.createAndFill(),
          state.schema.nodes.table_cell.createAndFill()
        ]))
      ])
    )
  );

  if (dispatch) {
    dispatch(tr);
  }

  return true;
}
const insertTableMenuItem = new MenuItem({label: "Table", run: insertTable});
menu.fullMenu[1][0].content.push(insertTableMenuItem);

[xiaweiss]

Inspired from tiptap

function createTable (state, rowsCount, colsCount, withHeaderRow, cellContent) {
  const types = tableNodeTypes(state.schema)
  const headerCells = []
  const cells = []
  const createCell = (cellType, cellContent) => cellContent ? cellType.createChecked(null, cellContent) : cellType.createAndFill()

  for (let index = 0; index < colsCount; index += 1) {
    const cell = createCell(types.cell, cellContent)

    if (cell) {
      cells.push(cell)
    }

    if (withHeaderRow) {
      const headerCell = createCell(types.header_cell, cellContent)

      if (headerCell) {
        headerCells.push(headerCell)
      }
    }
  }

  const rows = []

  for (let index = 0; index < rowsCount; index += 1) {
    rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells))
  }

  return types.table.createChecked(null, rows)
}

function addTable (state, dispatch, { rowsCount, colsCount, withHeaderRow, cellContent }, ) {
  const offset = state.tr.selection.anchor + 1

  const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent)
  const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView()
  const resolvedPos = tr.doc.resolve(offset)

  tr.setSelection(TextSelection.near(resolvedPos))

  dispatch(tr)
}

// add table to a new paragraph
function addTableToEnd (state, dispatch, { rowsCount, colsCount, withHeaderRow, cellContent }, ) {
  let tr = state.tr

  // get block end position
  const end = tr.selection.$head.end(1) // param 1 is node deep
  const resolvedEnd = tr.doc.resolve(end)

  // move cursor to the end, then insert table
  const nodes = createTable(state, rowsCount, colsCount, withHeaderRow, cellContent)
  tr.setSelection(TextSelection.near(resolvedEnd))
  tr = tr.replaceSelectionWith(nodes).scrollIntoView()

  // move cursor into table
  const offset = end + 1
  const resolvedPos = tr.doc.resolve(offset)
  tr.setSelection(TextSelection.near(resolvedPos))

  dispatch(tr)
}

[Tilesto]

And what type of "cellContent" is necessary for schema.nodes.table_cell.createChecked(null, ?) ?

[LeDNI]

And what type of "cellContent" is necessary for schema.nodes.table_cell.createChecked(null, ?) ?

Fragment | ProsemirrorNode | Array<ProsemirrorNode>