index.d.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  1. import { PluginKey, EditorState, Transaction, Selection, Plugin, Command } from 'prosemirror-state';
  2. import { Slice, Node, ResolvedPos, Attrs, NodeType, Fragment, NodeSpec, Schema } from 'prosemirror-model';
  3. import { EditorView, NodeView } from 'prosemirror-view';
  4. import { Mappable } from 'prosemirror-transform';
  5. /**
  6. * @public
  7. */
  8. declare const fixTablesKey: PluginKey<{
  9. fixTables: boolean;
  10. }>;
  11. /**
  12. * Inspect all tables in the given state's document and return a
  13. * transaction that fixes them, if necessary. If `oldState` was
  14. * provided, that is assumed to hold a previous, known-good state,
  15. * which will be used to avoid re-scanning unchanged parts of the
  16. * document.
  17. *
  18. * @public
  19. */
  20. declare function fixTables(state: EditorState, oldState?: EditorState): Transaction | undefined;
  21. /**
  22. * @public
  23. */
  24. type Direction = -1 | 1;
  25. /**
  26. * @public
  27. */
  28. declare function handlePaste(view: EditorView, _: ClipboardEvent, slice: Slice): boolean;
  29. /**
  30. * @public
  31. */
  32. type ColWidths = number[];
  33. /**
  34. * @public
  35. */
  36. type Problem = {
  37. type: 'colwidth mismatch';
  38. pos: number;
  39. colwidth: ColWidths;
  40. } | {
  41. type: 'collision';
  42. pos: number;
  43. row: number;
  44. n: number;
  45. } | {
  46. type: 'missing';
  47. row: number;
  48. n: number;
  49. } | {
  50. type: 'overlong_rowspan';
  51. pos: number;
  52. n: number;
  53. };
  54. /**
  55. * @public
  56. */
  57. interface Rect {
  58. left: number;
  59. top: number;
  60. right: number;
  61. bottom: number;
  62. }
  63. /**
  64. * A table map describes the structure of a given table. To avoid
  65. * recomputing them all the time, they are cached per table node. To
  66. * be able to do that, positions saved in the map are relative to the
  67. * start of the table, rather than the start of the document.
  68. *
  69. * @public
  70. */
  71. declare class TableMap {
  72. /**
  73. * The number of columns
  74. */
  75. width: number;
  76. /**
  77. * The number of rows
  78. */
  79. height: number;
  80. /**
  81. * A width * height array with the start position of
  82. * the cell covering that part of the table in each slot
  83. */
  84. map: number[];
  85. /**
  86. * An optional array of problems (cell overlap or non-rectangular
  87. * shape) for the table, used by the table normalizer.
  88. */
  89. problems: Problem[] | null;
  90. constructor(
  91. /**
  92. * The number of columns
  93. */
  94. width: number,
  95. /**
  96. * The number of rows
  97. */
  98. height: number,
  99. /**
  100. * A width * height array with the start position of
  101. * the cell covering that part of the table in each slot
  102. */
  103. map: number[],
  104. /**
  105. * An optional array of problems (cell overlap or non-rectangular
  106. * shape) for the table, used by the table normalizer.
  107. */
  108. problems: Problem[] | null);
  109. findCell(pos: number): Rect;
  110. colCount(pos: number): number;
  111. nextCell(pos: number, axis: 'horiz' | 'vert', dir: number): null | number;
  112. rectBetween(a: number, b: number): Rect;
  113. cellsInRect(rect: Rect): number[];
  114. positionAt(row: number, col: number, table: Node): number;
  115. static get(table: Node): TableMap;
  116. }
  117. /**
  118. * @public
  119. */
  120. type MutableAttrs = Record<string, unknown>;
  121. /**
  122. * @public
  123. */
  124. interface CellAttrs {
  125. colspan: number;
  126. rowspan: number;
  127. colwidth: number[] | null;
  128. }
  129. /**
  130. * @public
  131. */
  132. declare const tableEditingKey: PluginKey<number>;
  133. /**
  134. * @public
  135. */
  136. declare function cellAround($pos: ResolvedPos): ResolvedPos | null;
  137. /**
  138. * @public
  139. */
  140. declare function isInTable(state: EditorState): boolean;
  141. /**
  142. * @internal
  143. */
  144. declare function selectionCell(state: EditorState): ResolvedPos;
  145. /**
  146. * @public
  147. */
  148. declare function pointsAtCell($pos: ResolvedPos): boolean;
  149. /**
  150. * @public
  151. */
  152. declare function moveCellForward($pos: ResolvedPos): ResolvedPos;
  153. /**
  154. * @internal
  155. */
  156. declare function inSameTable($cellA: ResolvedPos, $cellB: ResolvedPos): boolean;
  157. /**
  158. * @public
  159. */
  160. declare function findCell($pos: ResolvedPos): Rect;
  161. /**
  162. * @public
  163. */
  164. declare function colCount($pos: ResolvedPos): number;
  165. /**
  166. * @public
  167. */
  168. declare function nextCell($pos: ResolvedPos, axis: 'horiz' | 'vert', dir: number): ResolvedPos | null;
  169. /**
  170. * @public
  171. */
  172. declare function removeColSpan(attrs: CellAttrs, pos: number, n?: number): CellAttrs;
  173. /**
  174. * @public
  175. */
  176. declare function addColSpan(attrs: CellAttrs, pos: number, n?: number): Attrs;
  177. /**
  178. * @public
  179. */
  180. declare function columnIsHeader(map: TableMap, table: Node, col: number): boolean;
  181. /**
  182. * @public
  183. */
  184. interface CellSelectionJSON {
  185. type: string;
  186. anchor: number;
  187. head: number;
  188. }
  189. /**
  190. * A [`Selection`](http://prosemirror.net/docs/ref/#state.Selection)
  191. * subclass that represents a cell selection spanning part of a table.
  192. * With the plugin enabled, these will be created when the user
  193. * selects across cells, and will be drawn by giving selected cells a
  194. * `selectedCell` CSS class.
  195. *
  196. * @public
  197. */
  198. declare class CellSelection extends Selection {
  199. $anchorCell: ResolvedPos;
  200. $headCell: ResolvedPos;
  201. constructor($anchorCell: ResolvedPos, $headCell?: ResolvedPos);
  202. map(doc: Node, mapping: Mappable): CellSelection | Selection;
  203. content(): Slice;
  204. replace(tr: Transaction, content?: Slice): void;
  205. replaceWith(tr: Transaction, node: Node): void;
  206. forEachCell(f: (node: Node, pos: number) => void): void;
  207. isColSelection(): boolean;
  208. static colSelection($anchorCell: ResolvedPos, $headCell?: ResolvedPos): CellSelection;
  209. isRowSelection(): boolean;
  210. eq(other: unknown): boolean;
  211. static rowSelection($anchorCell: ResolvedPos, $headCell?: ResolvedPos): CellSelection;
  212. toJSON(): CellSelectionJSON;
  213. static fromJSON(doc: Node, json: CellSelectionJSON): CellSelection;
  214. static create(doc: Node, anchorCell: number, headCell?: number): CellSelection;
  215. getBookmark(): CellBookmark;
  216. }
  217. /**
  218. * @public
  219. */
  220. declare class CellBookmark {
  221. anchor: number;
  222. head: number;
  223. constructor(anchor: number, head: number);
  224. map(mapping: Mappable): CellBookmark;
  225. resolve(doc: Node): CellSelection | Selection;
  226. }
  227. /**
  228. * @public
  229. */
  230. declare const columnResizingPluginKey: PluginKey<ResizeState>;
  231. /**
  232. * @public
  233. */
  234. type ColumnResizingOptions = {
  235. handleWidth?: number;
  236. cellMinWidth?: number;
  237. lastColumnResizable?: boolean;
  238. View?: new (node: Node, cellMinWidth: number, view: EditorView) => NodeView;
  239. };
  240. /**
  241. * @public
  242. */
  243. type Dragging = {
  244. startX: number;
  245. startWidth: number;
  246. };
  247. /**
  248. * @public
  249. */
  250. declare function columnResizing({ handleWidth, cellMinWidth, View, lastColumnResizable, }?: ColumnResizingOptions): Plugin;
  251. /**
  252. * @public
  253. */
  254. declare class ResizeState {
  255. activeHandle: number;
  256. dragging: Dragging | false;
  257. constructor(activeHandle: number, dragging: Dragging | false);
  258. apply(tr: Transaction): ResizeState;
  259. }
  260. /**
  261. * @public
  262. */
  263. type TableRect = Rect & {
  264. tableStart: number;
  265. map: TableMap;
  266. table: Node;
  267. };
  268. /**
  269. * Helper to get the selected rectangle in a table, if any. Adds table
  270. * map, table node, and table start offset to the object for
  271. * convenience.
  272. *
  273. * @public
  274. */
  275. declare function selectedRect(state: EditorState): TableRect;
  276. /**
  277. * Add a column at the given position in a table.
  278. *
  279. * @public
  280. */
  281. declare function addColumn(tr: Transaction, { map, tableStart, table }: TableRect, col: number): Transaction;
  282. /**
  283. * Command to add a column before the column with the selection.
  284. *
  285. * @public
  286. */
  287. declare function addColumnBefore(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  288. /**
  289. * Command to add a column after the column with the selection.
  290. *
  291. * @public
  292. */
  293. declare function addColumnAfter(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  294. /**
  295. * @public
  296. */
  297. declare function removeColumn(tr: Transaction, { map, table, tableStart }: TableRect, col: number): void;
  298. /**
  299. * Command function that removes the selected columns from a table.
  300. *
  301. * @public
  302. */
  303. declare function deleteColumn(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  304. /**
  305. * @public
  306. */
  307. declare function rowIsHeader(map: TableMap, table: Node, row: number): boolean;
  308. /**
  309. * @public
  310. */
  311. declare function addRow(tr: Transaction, { map, tableStart, table }: TableRect, row: number): Transaction;
  312. /**
  313. * Add a table row before the selection.
  314. *
  315. * @public
  316. */
  317. declare function addRowBefore(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  318. /**
  319. * Add a table row after the selection.
  320. *
  321. * @public
  322. */
  323. declare function addRowAfter(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  324. /**
  325. * @public
  326. */
  327. declare function removeRow(tr: Transaction, { map, table, tableStart }: TableRect, row: number): void;
  328. /**
  329. * Remove the selected rows from a table.
  330. *
  331. * @public
  332. */
  333. declare function deleteRow(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  334. /**
  335. * Merge the selected cells into a single cell. Only available when
  336. * the selected cells' outline forms a rectangle.
  337. *
  338. * @public
  339. */
  340. declare function mergeCells(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  341. /**
  342. * Split a selected cell, whose rowpan or colspan is greater than one,
  343. * into smaller cells. Use the first cell type for the new cells.
  344. *
  345. * @public
  346. */
  347. declare function splitCell(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  348. /**
  349. * @public
  350. */
  351. interface GetCellTypeOptions {
  352. node: Node;
  353. row: number;
  354. col: number;
  355. }
  356. /**
  357. * Split a selected cell, whose rowpan or colspan is greater than one,
  358. * into smaller cells with the cell type (th, td) returned by getType function.
  359. *
  360. * @public
  361. */
  362. declare function splitCellWithType(getCellType: (options: GetCellTypeOptions) => NodeType): Command;
  363. /**
  364. * Returns a command that sets the given attribute to the given value,
  365. * and is only available when the currently selected cell doesn't
  366. * already have that attribute set to that value.
  367. *
  368. * @public
  369. */
  370. declare function setCellAttr(name: string, value: unknown): Command;
  371. /**
  372. * @public
  373. */
  374. type ToggleHeaderType = 'column' | 'row' | 'cell';
  375. /**
  376. * Toggles between row/column header and normal cells (Only applies to first row/column).
  377. * For deprecated behavior pass `useDeprecatedLogic` in options with true.
  378. *
  379. * @public
  380. */
  381. declare function toggleHeader(type: ToggleHeaderType, options?: {
  382. useDeprecatedLogic: boolean;
  383. } | undefined): Command;
  384. /**
  385. * Toggles whether the selected row contains header cells.
  386. *
  387. * @public
  388. */
  389. declare const toggleHeaderRow: Command;
  390. /**
  391. * Toggles whether the selected column contains header cells.
  392. *
  393. * @public
  394. */
  395. declare const toggleHeaderColumn: Command;
  396. /**
  397. * Toggles whether the selected cells are header cells.
  398. *
  399. * @public
  400. */
  401. declare const toggleHeaderCell: Command;
  402. /**
  403. * Returns a command for selecting the next (direction=1) or previous
  404. * (direction=-1) cell in a table.
  405. *
  406. * @public
  407. */
  408. declare function goToNextCell(direction: Direction): Command;
  409. /**
  410. * Deletes the table around the selection, if any.
  411. *
  412. * @public
  413. */
  414. declare function deleteTable(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;
  415. /**
  416. * @internal
  417. */
  418. type Area = {
  419. width: number;
  420. height: number;
  421. rows: Fragment[];
  422. };
  423. /**
  424. * Get a rectangular area of cells from a slice, or null if the outer
  425. * nodes of the slice aren't table cells or rows.
  426. *
  427. * @internal
  428. */
  429. declare function pastedCells(slice: Slice): Area | null;
  430. /**
  431. * Clip or extend (repeat) the given set of cells to cover the given
  432. * width and height. Will clip rowspan/colspan cells at the edges when
  433. * they stick out.
  434. *
  435. * @internal
  436. */
  437. declare function clipCells({ width, height, rows }: Area, newWidth: number, newHeight: number): Area;
  438. /**
  439. * Insert the given set of cells (as returned by `pastedCells`) into a
  440. * table, at the position pointed at by rect.
  441. *
  442. * @internal
  443. */
  444. declare function insertCells(state: EditorState, dispatch: (tr: Transaction) => void, tableStart: number, rect: Rect, cells: Area): void;
  445. /**
  446. * @public
  447. */
  448. type getFromDOM = (dom: HTMLElement) => unknown;
  449. /**
  450. * @public
  451. */
  452. type setDOMAttr = (value: unknown, attrs: MutableAttrs) => void;
  453. /**
  454. * @public
  455. */
  456. interface CellAttributes {
  457. /**
  458. * The attribute's default value.
  459. */
  460. default: unknown;
  461. /**
  462. * A function to read the attribute's value from a DOM node.
  463. */
  464. getFromDOM?: getFromDOM;
  465. /**
  466. * A function to add the attribute's value to an attribute
  467. * object that's used to render the cell's DOM.
  468. */
  469. setDOMAttr?: setDOMAttr;
  470. }
  471. /**
  472. * @public
  473. */
  474. interface TableNodesOptions {
  475. /**
  476. * A group name (something like `"block"`) to add to the table
  477. * node type.
  478. */
  479. tableGroup?: string;
  480. /**
  481. * The content expression for table cells.
  482. */
  483. cellContent: string;
  484. /**
  485. * Additional attributes to add to cells. Maps attribute names to
  486. * objects with the following properties:
  487. */
  488. cellAttributes: {
  489. [key: string]: CellAttributes;
  490. };
  491. }
  492. /**
  493. * @public
  494. */
  495. type TableNodes = Record<'table' | 'table_row' | 'table_cell' | 'table_header', NodeSpec>;
  496. /**
  497. * This function creates a set of [node
  498. * specs](http://prosemirror.net/docs/ref/#model.SchemaSpec.nodes) for
  499. * `table`, `table_row`, and `table_cell` nodes types as used by this
  500. * module. The result can then be added to the set of nodes when
  501. * creating a schema.
  502. *
  503. * @public
  504. */
  505. declare function tableNodes(options: TableNodesOptions): TableNodes;
  506. /**
  507. * @public
  508. */
  509. type TableRole = 'table' | 'row' | 'cell' | 'header_cell';
  510. /**
  511. * @public
  512. */
  513. declare function tableNodeTypes(schema: Schema): Record<TableRole, NodeType>;
  514. /**
  515. * @public
  516. */
  517. declare class TableView implements NodeView {
  518. node: Node;
  519. cellMinWidth: number;
  520. dom: HTMLDivElement;
  521. table: HTMLTableElement;
  522. colgroup: HTMLTableColElement;
  523. contentDOM: HTMLTableSectionElement;
  524. constructor(node: Node, cellMinWidth: number);
  525. update(node: Node): boolean;
  526. ignoreMutation(record: MutationRecord): boolean;
  527. }
  528. /**
  529. * @public
  530. */
  531. declare function updateColumnsOnResize(node: Node, colgroup: HTMLTableColElement, table: HTMLTableElement, cellMinWidth: number, overrideCol?: number, overrideValue?: number): void;
  532. /**
  533. * @public
  534. */
  535. type TableEditingOptions = {
  536. allowTableNodeSelection?: boolean;
  537. };
  538. /**
  539. * Creates a [plugin](http://prosemirror.net/docs/ref/#state.Plugin)
  540. * that, when added to an editor, enables cell-selection, handles
  541. * cell-based copy/paste, and makes sure tables stay well-formed (each
  542. * row has the same width, and cells don't overlap).
  543. *
  544. * You should probably put this plugin near the end of your array of
  545. * plugins, since it handles mouse and arrow key events in tables
  546. * rather broadly, and other plugins, like the gap cursor or the
  547. * column-width dragging plugin, might want to get a turn first to
  548. * perform more specific behavior.
  549. *
  550. * @public
  551. */
  552. declare function tableEditing({ allowTableNodeSelection, }?: TableEditingOptions): Plugin;
  553. export { CellAttributes, CellBookmark, CellSelection, CellSelectionJSON, ColWidths, ColumnResizingOptions, Direction, Dragging, GetCellTypeOptions, MutableAttrs, Problem, Rect, ResizeState, TableEditingOptions, TableMap, TableNodes, TableNodesOptions, TableRect, TableRole, TableView, ToggleHeaderType, Area as __Area, clipCells as __clipCells, insertCells as __insertCells, pastedCells as __pastedCells, addColSpan, addColumn, addColumnAfter, addColumnBefore, addRow, addRowAfter, addRowBefore, cellAround, colCount, columnIsHeader, columnResizing, columnResizingPluginKey, deleteColumn, deleteRow, deleteTable, findCell, fixTables, fixTablesKey, getFromDOM, goToNextCell, handlePaste, inSameTable, isInTable, mergeCells, moveCellForward, nextCell, pointsAtCell, removeColSpan, removeColumn, removeRow, rowIsHeader, selectedRect, selectionCell, setCellAttr, setDOMAttr, splitCell, splitCellWithType, tableEditing, tableEditingKey, tableNodeTypes, tableNodes, toggleHeader, toggleHeaderCell, toggleHeaderColumn, toggleHeaderRow, updateColumnsOnResize };