ドラフトを作成してください.シンプルテーブル

導入

私の要件は、オンライン紙の植字エディタを実装し、LaTeXによって生成されたPDFをエクスポートすることです.
--更新--
https://github.com/facebook/draft-js/pull/2590
——
プロジェクト関連:Eorg
相対的なプロジェクトはオーバーリーフとResumakeです.
私は反応を好む.だから、ドラフトを選んだ.JSは、Facebook用に開発されたリッチテキストエディタです.紙の書き込みは、テーブル挿入から隠すことはできませんが、ドラフト.jsは既製のテーブルのプラグインを持っていません.テーブルを生成するツールもいくつかあります.完全に別のテーブルのサポートを自分で書く必要はありませんが、ユーザーのために便利であり、テーブルはあまりにも複雑にする必要はありません.テーブルのようにbooktabsをエクスポートすることができますので、テーブルサポートを自分で実装しようとします

内容

考え
A robust tableはnew ContentBlockを使用して、blockにメタデータを書きます.js!

比較的に言えば、私の実装はより多くのトリックです.そして、それは反応するメタデータを加えるためにAtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ') APIを使用して、offical TeX exampleから借ります.JSプロップ

行と列

const contentStateWithEntity = contentState.createEntity(
    'TABLE',
    'IMMUTABLE',
    {
        row, column, caption,  // data
    },
)

// ...

const { row, column, caption } = props // Table Component

表のセル

// createTable.js

/**
 * cell = {
 *     0: ["cell-0,0", "cell-0,1", ..., "cell-0,m"],
 *     1: ["cell-1,0", "cell-1,1", ..., "cell-1,m"],
 *     ...,
 *     n: ["cell-n,0", "cell-n,1", ..., "cell-n,m"],
 * }
 */
const cell = Object.fromEntries(Array.from(
    { length: row },
    (_, i) => [
        i,
        Array.from({ length: column }, (_, j) => `cell-${i},${j}`)
    ])
)

const contentStateWithEntity = contentState.createEntity(
    'TABLE',
    'IMMUTABLE',
    {
        ..., cell, // data
    },
)

// ...

const { ..., cell } = props // Table Component

テーブルを初期化します.

// TableBlock.js

// tbody -- version 1
const coordinate = []

if (row > 1) {
    for (let i = 1; i < row; i += 1) {
    const cols = []
    for (let j = 0; j < column; j += 1) {
        cols.push(
        <td key={i + j} >
            {cell[i][j]}
        </td>,
        )
    }
    rows.push(<tr key={i}>{cols}</tr>)
    }
}

store row, column, caption, cell to React.js props

は細胞座標を得ます:

最初の考えはDOMノード位置を計算することです.そして、それは<tr>後で、より良いアプローチはclosest('td')とclosest('table')のkey値を再試行します、そして、その座標は(x 1、y 1)です:

// TableBlock.js

// tbody -- version 2
const coordinate = []

if (row > 1) { // thead need to calculate separately
    for (let i = 1; i < row; i += 1) {
    const cols = []
    for (let j = 0; j < column; j += 1) {
        cols.push(
        <td
            key={i + j} // TODO key-1
            onDoubleClick={() => coordinate.push([i, j])}
        >
            {cell[i][j]}
        </td>,
        )
    }
    rows.push(<tr key={i}>{cols}</tr>)
    }
}

keykey - 1は安定していません.

key = {`i+j+${nanoid()}`}

今では安定しており、セル値を保存できます.

// find the coordinate of the node clicked
const x1 = coordinate[coordinate.length - 1][0]
const y1 = coordinate[coordinate.length - 1][1]

// update cell[i][j]
cell[x1][y1] = evt.target.innerHTML

nanoid

cell-2,1 can be stored to props

概要

テーブルはまだ完成していません.

カーソル

を処理する方法

それは可能です

次

セルの追加と削除をサポートするには.