BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/buttons/tables.ts

   1 import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../../framework/buttons";
   2 import tableIcon from "@icons/editor/table.svg";
   3 import deleteIcon from "@icons/editor/table-delete.svg";
   4 import deleteColumnIcon from "@icons/editor/table-delete-column.svg";
   5 import deleteRowIcon from "@icons/editor/table-delete-row.svg";
   6 import insertColumnAfterIcon from "@icons/editor/table-insert-column-after.svg";
   7 import insertColumnBeforeIcon from "@icons/editor/table-insert-column-before.svg";
   8 import insertRowAboveIcon from "@icons/editor/table-insert-row-above.svg";
   9 import insertRowBelowIcon from "@icons/editor/table-insert-row-below.svg";
  10 import {EditorUiContext} from "../../framework/core";
  11 import {$getBlockElementNodesInSelection, $getNodeFromSelection, $getParentOfType} from "../../../helpers";
  12 import {$getSelection} from "lexical";
  13 import {$isCustomTableNode, CustomTableNode} from "../../../nodes/custom-table";
  14 import {
  15     $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL,
  16     $deleteTableRow__EXPERIMENTAL,
  17     $getTableRowIndexFromTableCellNode, $insertTableColumn, $insertTableColumn__EXPERIMENTAL,
  18     $insertTableRow, $insertTableRow__EXPERIMENTAL,
  19     $isTableCellNode,
  20     $isTableRowNode,
  21     TableCellNode
  22 } from "@lexical/table";
  23
  24
  25 export const table: EditorBasicButtonDefinition = {
  26     label: 'Table',
  27     icon: tableIcon,
  28 };
  29
  30 export const deleteTable: EditorButtonDefinition = {
  31     label: 'Delete table',
  32     icon: deleteIcon,
  33     action(context: EditorUiContext) {
  34         context.editor.update(() => {
  35             const table = $getNodeFromSelection($getSelection(), $isCustomTableNode);
  36             if (table) {
  37                 table.remove();
  38             }
  39         });
  40     },
  41     isActive() {
  42         return false;
  43     }
  44 };
  45
  46 export const insertRowAbove: EditorButtonDefinition = {
  47     label: 'Insert row above',
  48     icon: insertRowAboveIcon,
  49     action(context: EditorUiContext) {
  50         context.editor.update(() => {
  51             $insertTableRow__EXPERIMENTAL(false);
  52         });
  53     },
  54     isActive() {
  55         return false;
  56     }
  57 };
  58
  59 export const insertRowBelow: EditorButtonDefinition = {
  60     label: 'Insert row below',
  61     icon: insertRowBelowIcon,
  62     action(context: EditorUiContext) {
  63         context.editor.update(() => {
  64             $insertTableRow__EXPERIMENTAL(true);
  65         });
  66     },
  67     isActive() {
  68         return false;
  69     }
  70 };
  71
  72 export const deleteRow: EditorButtonDefinition = {
  73     label: 'Delete row',
  74     icon: deleteRowIcon,
  75     action(context: EditorUiContext) {
  76         context.editor.update(() => {
  77             $deleteTableRow__EXPERIMENTAL();
  78         });
  79     },
  80     isActive() {
  81         return false;
  82     }
  83 };
  84
  85 export const insertColumnBefore: EditorButtonDefinition = {
  86     label: 'Insert column before',
  87     icon: insertColumnBeforeIcon,
  88     action(context: EditorUiContext) {
  89         context.editor.update(() => {
  90             $insertTableColumn__EXPERIMENTAL(false);
  91         });
  92     },
  93     isActive() {
  94         return false;
  95     }
  96 };
  97
  98 export const insertColumnAfter: EditorButtonDefinition = {
  99     label: 'Insert column after',
 100     icon: insertColumnAfterIcon,
 101     action(context: EditorUiContext) {
 102         context.editor.update(() => {
 103             $insertTableColumn__EXPERIMENTAL(true);
 104         });
 105     },
 106     isActive() {
 107         return false;
 108     }
 109 };
 110
 111 export const deleteColumn: EditorButtonDefinition = {
 112     label: 'Delete column',
 113     icon: deleteColumnIcon,
 114     action(context: EditorUiContext) {
 115         context.editor.update(() => {
 116             $deleteTableColumn__EXPERIMENTAL();
 117         });
 118     },
 119     isActive() {
 120         return false;
 121     }
 122 };