• This repository has been archived on 21/Feb/2019
  • Stars
    star
    101
  • Rank 330,361 (Top 7 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 8 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Slate plugin for table edition

⚠️ This repository is archived and has moved to GitBook's fork of ianstormtaylor/slate. Previous versions are still available on NPM All the versions using GitBook's fork of slate are now published under the @gitbook NPM scope. To learn more about why we forked Slate, read our manifest

slate-edit-table

NPM version Linux Build Status

A Slate plugin to handle table edition.

Demo: gitbookio.github.io/slate-edit-table/

Install

npm install slate-edit-table

Features

  • Pressing Up/Down moves the cursor to the row above/below
  • Pressing Enter inserts a new row
  • Pressing Cmd+Enter (Ctrl+Enter on Windows/Linux) exits the table, into a new default block
  • Pressing Tab moves the cursor to next cell
  • Pressing Shift+Tab moves the cursor to previous cell

All these default features are configurable.

Copy/Paste behavior

Here are how different cases of copy-paste are handled by the plugin:

  1. Copying the content of a single cell into another cell → The content of the first cell is pasted inside the second cell
  2. Copying the content of a single cell outside the table → Just the content of the cell is pasted (not the table)
  3. Copying some content into a cell → The content is inserted inside the cell
  4. Copying multiple cells somewhere else inside the table → The copied fragment of table is patched at the given position, overwritting cells and adding rows and columns if necessary.
  5. Copying multiple cells outside the table → A new table is pasted, containing the copied cells.

Simple Usage

import EditTable from 'slate-edit-table';

const tablePlugin = EditTable(/* options */);

const plugins = [tablePlugin];

Data structure

Here is what your Slate document containing tables should look like:

<value>
    <document>
        <paragraph>Some text</paragraph>

        <table>
            <table_row>
                <table_cell>
                    <paragraph>Any block can goes into cells</paragraph>
                </table_cell>

                <table_cell>
                    <image isVoid src="image.png" />
                </table_cell>
            </table_row>

            <table_row>
                <table_cell>
                    <paragraph>Second row</paragraph>
                </table_cell>

                <table_cell>
                    <paragraph>Second row</paragraph>
                </table_cell>
            </table_row>
        </table>
    </document>
</value>

Options

Option object you can pass to the plugin.

  • [typeTable: string] — type for table
  • [typeRow: string] — type for the rows.
  • [typeCell: string] — type for the cells.
  • [typeContent: string] — default type for blocks in cells. Also used as default type for blocks created when exiting the table with Mod+Enter.

EditTable

EditTable(options: Options) => Instance

Constructs an instance of the table plugin, for the given options. You can then add this instance to the list of plugins passed to Slate.

Once you have constructed an instance of the plugin, you get access to utilities and changes through pluginInstance.utils and pluginInstance.changes.

Utils

utils.isSelectionInTable

isSelectionInTable(value: Slate.Value) => boolean

Return true if selection is inside a table cell.

utils.isSelectionOutOfTable

isSelectionOutOfTable(value: Slate.Value) => boolean

Return true if selection starts and ends both outside any table. (Notice: it is NOT the opposite value of isSelectionInTable)

utils.getPosition

getPosition(value: Slate.Value) => TablePosition

Returns the position of the cursor in a table (and all related infos).

utils.getPositionByKey

getPositionByKey(tableAncestor: Node, key: string) => TablePosition

Returns the position of a particular node in a table (and all related infos).

utils.createTable

createTable(
    columns: number,
    rows: number,
    getCellContent?: (row: number, column: number) => Node[]
): Block

Returns a table. The content can be filled with the given getCellContent generator.

utils.createRow

createRow(
    columns: number,
    getCellContent?: (column: number) => Node[]
): Block

Returns a row. The content can be filled with the given getCellContent generator.

utils.createCell

createCell(opts: Options, nodes?: Node[]): Block

Returns a cell. The content defaults to an empty typeContent block.

Changes

changes.insertTable

insertTable(change: Change, columns: ?number, rows: ?number) => Change

Insert a new empty table.

changes.insertRow

insertRow(
    opts: Options,
    change: Change,
    at?: number, // row index
    getRow?: (columns: number) => Block // Generate the row yourself
): Change

Insert a new row after the current one or at the specific index (at).

changes.insertColumn

insertColumn(
    opts: Options,
    change: Change,
    at?: number, // Column index
    getCell?: (column: number, row: number) => Block // Generate cells
): Change

Insert a new column after the current one or at the specific index (at).

changes.removeTable

removeTable(change: Change) => Change

Remove current table.

changes.removeTableByKey

removeTableByKey(change: Change, key: string) => Change

Remove the table containing the given key.

changes.removeRow

removeRow(change: Change, at: ?number) => Change

Remove current row or the one at a specific index (at).

changes.removeRowByKey

removeRowByKey(change: Change, key: string) => Change

Remove the row containing the given key.

changes.removeColumn

removeColumn(change: Change, at: ?number) => Change

Remove current column or the one at a specific index (at).

changes.removeColumnByKey

removeColumnByKey(change: Change, key: string) => Change

Remove the column containing the given key.

changes.moveSelection

moveSelection(change: Change, column: number, row: number) => Change

Move the selection to a specific position in the table.

changes.moveSelectionBy

moveSelectionBy(change: Change, column: number, row: number) => Change

Move the selection by the given amount of columns and rows.

TablePosition

An instance of TablePosition represents a position within a table (row and column). You can get your current position in a table by using plugin.utils.getPosition(value).

position.getWidth() => number

Returns the number of columns in the current table.

position.getHeight() => number

Returns the number of rows in the current table.

position.getRowIndex() => number

Returns the index of the current row in the table.

position.getColumnIndex() => number

Return the index of the current column in the table.

position.isFirstCell() => boolean

True if on first row and first column of the table

position.isLastCell() => boolean

True if on last row and last column of the table

position.isFirstRow() => boolean

True if on first row

position.isLastRow() => boolean

True if on last row

position.isFirstColumn() => boolean

True if on first column

position.isLastColumn() => boolean

True if on last column

More Repositories

1

gitbook

The open source frontend for GitBook doc sites
TypeScript
26,513
star
2

javascript

GitBook teaching programming basics with Javascript
3,322
star
3

nuts

🌰 Releases/downloads server with auto-updater and GitHub as a backend
JavaScript
1,242
star
4

gitbook-cli

GitBook's command line interface
JavaScript
707
star
5

git

ProGit Book Fork generated using GitBook
306
star
6

markup-it

JavaScript library to parse and serialize markup content (Markdown and HTML)
JavaScript
268
star
7

markdown

Learn how to use Markdown
242
star
8

kramed

A markdown (kramdown compatible) parser and compiler. Built for speed. (Fork of marked)
HTML
224
star
9

theme-default

Default theme for GitBook
JavaScript
195
star
10

rousseau

Lightweight proofreader in JS
JavaScript
179
star
11

theme-api

Theme for publishing a beautiful API documentation with GitBook
JavaScript
150
star
12

community

GitBook's official community page
107
star
13

gitbook-convert

CLI to convert an existing document to a GitBook.
JavaScript
101
star
14

slate-edit-list

A Slate plugin to handle keyboard events in lists.
JavaScript
94
star
15

proxies-on-cloudflare

Proxies in Cloudflare Workers
TypeScript
93
star
16

plugin-mathjax

MathJAX plugin for GitBook
JavaScript
89
star
17

plugin-autocover

Generate a cover for the book
JavaScript
87
star
18

styleguide

GitBook.com HTML/CSS Style Guide
JavaScript
86
star
19

repofs

Simple and unified API to manipulate Git repositories
JavaScript
77
star
20

hunspell-spellchecker

Parse and use Hunspell dictionaries in Javascript
JavaScript
77
star
21

micro-analytics

A micro multi-website analytics database service designed to be fast and robust, built with Go and SQLite.
Go
76
star
22

plugin

Sample plugin for GitBook
JavaScript
66
star
23

integrations

Toolkit to build integrations on GitBook
TypeScript
62
star
24

filterable

Parse and convert GitHub-like search queries in Node.JS
JavaScript
61
star
25

example

Simple GitBook example
59
star
26

plugin-katex

Math typesetting using KaTex
JavaScript
59
star
27

plugin-exercises

Interactive exercices in a gitbook
JavaScript
56
star
28

react-rich-diff

React component to render rich diff between two documents (Markdown, HTML)
JavaScript
52
star
29

plugin-disqus

Disqus comments on your books
JavaScript
51
star
30

plugin-ga

Google Analytics tracking for your book
JavaScript
51
star
31

git-sync-normalization

A repository that shows how we translate every content block to markdown.
50
star
32

slate-edit-code

A Slate plugin for code block editing
JavaScript
43
star
33

theme-faq

Theme for publishing a FAQ or Knowledge base
HTML
38
star
34

node-gitbook-api

Node client library for the GitBook API
JavaScript
36
star
35

plugin-youtube

Plugin to insert youtube videos in a GitBook
JavaScript
33
star
36

tokenize-text

Javascript text tokenizer that is easy to use and compose.
JavaScript
30
star
37

slate-prism

A Slate plugin to highlight code blocks using PrismJS
JavaScript
27
star
38

plugin-quizzes

Interactive quizzes in a gitbook
JavaScript
26
star
39

plugin-search

Search content in your book
JavaScript
25
star
40

plugin-codetabs

Multiple languages code blocks for GitBook
JavaScript
25
star
41

plugin-algolia

Power search using Algolia
JavaScript
25
star
42

theme-official

GitBook theme for our own books
HTML
25
star
43

go-gitbook-api

GitBook API client in GO (golang)
Go
24
star
44

plugin-github

Display a link to your GitHub repo in your gitbook
JavaScript
24
star
45

slate-hyperprint

A library to convert Slate models to their slate-hyperscript representation
JavaScript
24
star
46

plugin-hints

GitBook plugin. Defines 4 types of styled hint blocks: info, danger, tip, working
JavaScript
23
star
47

expect-firestore

API client and Jasmine matchers for the Firestore Rules API
JavaScript
22
star
48

plugin-puml

UML Diagrams rendering using PlantUML
JavaScript
21
star
49

go-github-webhook

A GitHub webhook handler written in Go
Go
21
star
50

node-opds

Node.js library to parse/generate OPDS feed
JavaScript
21
star
51

plugin-comment

Inline discussions integrated with gitbook.com
JavaScript
20
star
52

node-onix

Node.JS library to parse/generate ONIX XML files
JavaScript
18
star
53

slate-sugar

🍭 Create Slate documents using JSX.
JavaScript
17
star
54

bipbip

Benchmark runner for performance regression test suites
JavaScript
17
star
55

slate-lite-renderer

Fast renderer for read-only Slate documents
JavaScript
16
star
56

plugin-fontsettings

Font settings for GitBook website
CSS
16
star
57

github-api-signature

Node.js signature generator for GitHub API using a PGP key
TypeScript
15
star
58

isbn-utils

Javascript utilities to parse and normalize ISBNs
JavaScript
15
star
59

plugin-versions

Display a <select> with other versions of your gitbook
JavaScript
15
star
60

markdown-css

Minimalist stylesheet (CSS or Less) for markup output
CSS
14
star
61

plugin-scripts

Include scripts in your GitBook
JavaScript
14
star
62

plugin-sharing

Sharing button in toolbar for GitBooks
JavaScript
14
star
63

tokenize-english

Javascript tokenizer for english sentences
JavaScript
14
star
64

diskache

Lightweight Golang disk cache
Go
13
star
65

mimedb

An extensive mime database in Go
Go
13
star
66

DraftMirror

Draft.js-like API on top of ProseMirror
JavaScript
13
star
67

normall

Normall: normalize filenames, accents etc ... in JS
JavaScript
13
star
68

plugin-highlight

Default syntax highlighter for GitBook
CSS
12
star
69

unstated

Simple state management for react
TypeScript
12
star
70

services-slack

Slack notifications service
JavaScript
12
star
71

plugin-gist

Embed Gist in your book
JavaScript
10
star
72

monorepo

A big home for small repos
Go
10
star
73

slate-edit-footnote

A Slate plugin to handle footnotes
JavaScript
10
star
74

lru-diskcache

A disk cache object that deletes the least-recently-used items
JavaScript
10
star
75

slate-edit-blockquote

A Slate plugin to handle keyboard events in blockquotes
JavaScript
10
star
76

plugin-styles-sass

SASS custom stylesheets instead of CSS
JavaScript
9
star
77

node-epubcheck

Node wrapper for epubcheck
JavaScript
9
star
78

plugin-lunr

Backend for the search plugin using Lunr
JavaScript
9
star
79

geo-utils

Utilities to get countries, languages and US states
JavaScript
9
star
80

slate-trailing-block

Slate plugin to ensure a trailing block
JavaScript
9
star
81

eslint-config-gitbook

GitBook's ESLint config, following our styleguide
JavaScript
9
star
82

go-sqlpool

A high level pool for maintaining pools of *sql.DB databases (e.g: thousands of SQLite files)
Go
9
star
83

syncgroup

Like golang's sync package but allows locking per groups of (string) keys (e.g: syncgroup.MutexGroup)
Go
9
star
84

public-docs

9
star
85

plugin-infinitescroll

Infinite scrolling in your gitbook
JavaScript
8
star
86

node-tasqueue

Node.js job/task-queue library using disque
JavaScript
8
star
87

plugin-livereload

Live reloading for your gitbook
JavaScript
8
star
88

plugin-tonic

Embed Tonic notebook into your GitBook
JavaScript
8
star
89

markdown-tools

A small CLI interface to kramed with lots of useful markdown tools (like go's "go fmt", lexing, rendering ...)
JavaScript
8
star
90

openapi-autodoc

Generate a GitBook Space from an OpenAPI spec
JavaScript
8
star
91

slate-no-empty

Slate plugin to prevent the document from being empty
JavaScript
8
star
92

plugin-mixpanel

Mixpanel tracking for your gitbook
JavaScript
7
star
93

brightml

Smart utility rendering markdown-ready HTML
JavaScript
7
star
94

html2hs

Convert HTML to hyperscript for virtual-dom
JavaScript
7
star
95

kramed-text-renderer

Renderer for kramed outputting plain text that can easily be fed to a search indexer/tokenizer/...
JavaScript
7
star
96

plugin-sitemap

Generate a sitemap for the gitbook website
JavaScript
7
star
97

firebase-apparatus

Lightweight implementation of firebase-tools as a Node module
TypeScript
7
star
98

licenses-utils

Utilities to detect licenses from project
JavaScript
7
star
99

example-visitor-authentication

Minimalist NodeJS application for "Visitor Authentication"
JavaScript
7
star
100

plugin-superscript

Use superscript in your content
JavaScript
6
star