A Rich Text Editor Data Model
Warning: Before 1.0.0 release, the api may change. It's not prepared for production now.
Using npm:
$ npm install flowerpiece
Using yarn:
$ yarn add flowerpiece
import { Model } from 'flowerpiece'
cconst model = new Model()
const { operations, queries } = model
const changes = model.change((operations) => {
operations.insert(0, 'test', {})
})A Piece represet a piece content of the whole document
interface Piece {
// Text Content
text: string
// Length of this piece
length: number
// Meta info of this piece
meta: PieceMeta | null
}A Line is a list of pieces
interface Line {
meta: PieceMeta
pieces: Piece[]
}Diff indicate which line of content is newly added, removed or modified after operation
interface Diff {
// Diff type
type: 'insert' | 'remove' | 'replace'
// Which line of content has change
lineNumber: number
}Must Be Plain Object
interface PieceMeta {
[key: string]: any
}interface DocumentChange {
type: 'insert' | 'delete' | 'format'
diffs: Diff[]
startOffset: number
length: number
}