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 {
  12     $getNodeFromSelection,
  13     $selectionContainsNodeType
  14 } from "../../../helpers";
  15 import {$getSelection} from "lexical";
  16 import {$isCustomTableNode} from "../../../nodes/custom-table";
  17 import {
  18     $deleteTableColumn__EXPERIMENTAL,
  19     $deleteTableRow__EXPERIMENTAL,
  20     $insertTableColumn__EXPERIMENTAL,
  21     $insertTableRow__EXPERIMENTAL,
  22     $isTableNode,
  23 } from "@lexical/table";
  24
  25
  26 export const table: EditorBasicButtonDefinition = {
  27     label: 'Table',
  28     icon: tableIcon,
  29 };
  30
  31 export const deleteTable: EditorButtonDefinition = {
  32     label: 'Delete table',
  33     icon: deleteIcon,
  34     action(context: EditorUiContext) {
  35         context.editor.update(() => {
  36             const table = $getNodeFromSelection($getSelection(), $isCustomTableNode);
  37             if (table) {
  38                 table.remove();
  39             }
  40         });
  41     },
  42     isActive() {
  43         return false;
  44     }
  45 };
  46
  47 export const deleteTableMenuAction: EditorButtonDefinition = {
  48     ...deleteTable,
  49     format: 'long',
  50     isDisabled(selection) {
  51         return !$selectionContainsNodeType(selection, $isTableNode);
  52     },
  53 };
  54
  55 export const insertRowAbove: EditorButtonDefinition = {
  56     label: 'Insert row above',
  57     icon: insertRowAboveIcon,
  58     action(context: EditorUiContext) {
  59         context.editor.update(() => {
  60             $insertTableRow__EXPERIMENTAL(false);
  61         });
  62     },
  63     isActive() {
  64         return false;
  65     }
  66 };
  67
  68 export const insertRowBelow: EditorButtonDefinition = {
  69     label: 'Insert row below',
  70     icon: insertRowBelowIcon,
  71     action(context: EditorUiContext) {
  72         context.editor.update(() => {
  73             $insertTableRow__EXPERIMENTAL(true);
  74         });
  75     },
  76     isActive() {
  77         return false;
  78     }
  79 };
  80
  81 export const deleteRow: EditorButtonDefinition = {
  82     label: 'Delete row',
  83     icon: deleteRowIcon,
  84     action(context: EditorUiContext) {
  85         context.editor.update(() => {
  86             $deleteTableRow__EXPERIMENTAL();
  87         });
  88     },
  89     isActive() {
  90         return false;
  91     }
  92 };
  93
  94 export const insertColumnBefore: EditorButtonDefinition = {
  95     label: 'Insert column before',
  96     icon: insertColumnBeforeIcon,
  97     action(context: EditorUiContext) {
  98         context.editor.update(() => {
  99             $insertTableColumn__EXPERIMENTAL(false);
 100         });
 101     },
 102     isActive() {
 103         return false;
 104     }
 105 };
 106
 107 export const insertColumnAfter: EditorButtonDefinition = {
 108     label: 'Insert column after',
 109     icon: insertColumnAfterIcon,
 110     action(context: EditorUiContext) {
 111         context.editor.update(() => {
 112             $insertTableColumn__EXPERIMENTAL(true);
 113         });
 114     },
 115     isActive() {
 116         return false;
 117     }
 118 };
 119
 120 export const deleteColumn: EditorButtonDefinition = {
 121     label: 'Delete column',
 122     icon: deleteColumnIcon,
 123     action(context: EditorUiContext) {
 124         context.editor.update(() => {
 125             $deleteTableColumn__EXPERIMENTAL();
 126         });
 127     },
 128     isActive() {
 129         return false;
 130     }
 131 };