Flower Piece (WIP)

A Rich Text Editor Data Model

Warning: Before 1.0.0 release, the api may change. It's not prepared for production now.

Features

Rich Text Manipulation Operations

Build-in Redo/Undo

Statistic / Counts

installing

Using npm:

$ npm install flowerpiece

Using yarn:

$ yarn add flowerpiece

Examples

import { Model } from 'flowerpiece'

cconst model = new Model()
const { operations, queries } = model

const changes = model.change((operations) => {
  operations.insert(0, 'test', {})
})

Model

operations

insert(offset: number, length: number, text: string, meta: PieceMeta | null): DocumentChange

insertText(offset: number, text: string, meta: PieceMeta | null): DocumentChange

insertLineBrea(offset: number, meta: PieceMeta | null): DocumentChange

insertLine(offset: number, meta: PieceMeta | null): DocumentChange

insertNonText(offset: number, meta: PieceMeta): DocumentChange

delete(offset: number, length: number): DocumentChange

deleteLine(lineNumber: number): DocumentChange

format(offset: number, length: number, meta: PieceMeta): DocumentChange

formatText(offset: number, length: number, meta: PieceMeta): DocumentChange

formatNonText(offset: number, length: number, meta: PieceMeta): DocumentChange

formatLine(lineNumber: number, meta: PieceMeta): DocumentChange

formatInLine(lineNumber: number, meta: PieceMeta): DocumentChange

formatTextInLine(lineNumber: number, meta: PieceMeta): DocumentChange

formatNonTextInLine(linetNumber: number, meat: PieceMeta): DocumentChange

queries

getMaxOffset()

getCountOfCharacter()

getCountOfLine()

getAllText()

getLine(lineNumber: number): Piece[]

getLInes(): Line[]

getLineMeta(lineNumber: number): PieceMeta | null

getPieces(): Piece[]

forEachLine(callback: (line: IPiece[], lineNumber: number)

Methods

change(callback: (operations: operations) => void)

redo()

undo()

Piece

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
}

Line

A Line is a list of pieces

interface Line {
  meta: PieceMeta
  pieces: Piece[]
}

Diff

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
}

PieceMeta

Must Be Plain Object

interface PieceMeta {
  [key: string]: any
}

DocumentChange

interface DocumentChange {
  type: 'insert' | 'delete' | 'format'
  diffs: Diff[]
  startOffset: number
  length: number
}