TableExtension

Summary

Add simple tables to the editor. This extension uses Prosemirror tables under the hood.

info

See React TableExtension for more advanced tables.

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { TableExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-tables package.

Examples

Source code

import React from 'react';
import { HeadingExtension, TableExtension, TextColorExtension } from 'remirror/extensions';
import {
  EditorComponent,
  Remirror,
  ThemeProvider,
  useRemirror,
  useRemirrorContext,
} from '@remirror/react';

const CommandMenu = () => {
  const ctx = useRemirrorContext();
  const schema = ctx.schema;
  const customCellContent = schema.nodes.heading.create({ level: 3 }, [
    schema.text('hello', [schema.marks.textColor.create({ color: '#ffc0cb' })]),
    schema.text('world', [schema.marks.textColor.create({ color: '#87cefa' })]),
  ]);
  const commands = ctx.commands;

  return (
    <div>
      <p>commands:</p>
      <p
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyItems: 'flex-start',
          alignItems: 'flex-start',
        }}
      >
        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.createTable()}
        >
          create a table with the default options
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() =>
            commands.createTable({ rowsCount: 4, columnsCount: 4, withHeaderRow: false })
          }
        >
          create a 4*4 table without headers
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() =>
            commands.createTable({ rowsCount: 4, columnsCount: 4, withHeaderRow: true })
          }
        >
          create a 4*4 table with headers
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.createTable({ cellContent: customCellContent })}
        >
          create a table with custom cell content
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.deleteTableColumn()}
        >
          delete the current column
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.deleteTableRow()}
        >
          delete the current row
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.addTableColumnAfter()}
        >
          add a column after the current one
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.addTableRowBefore()}
        >
          add a row before the current one
        </button>

        <button
          onMouseDown={(event) => event.preventDefault()}
          onClick={() => commands.deleteTable()}
        >
          delete the table
        </button>
      </p>
    </div>
  );
};

const Basic = (): JSX.Element => {
  const { manager, state } = useRemirror({ extensions });

  return (
    <ThemeProvider>
      <Remirror manager={manager} initialContent={state}>
        <EditorComponent />
        <CommandMenu />
      </Remirror>
    </ThemeProvider>
  );
};

const extensions = () => [new TableExtension(), new HeadingExtension(), new TextColorExtension()];

export default Basic;

API

• TableExtension