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

   1 import {
   2     EditorFormDefinition,
   3     EditorFormFieldDefinition,
   4     EditorFormTabs,
   5     EditorSelectFormFieldDefinition
   6 } from "../../framework/forms";
   7 import {EditorUiContext} from "../../framework/core";
   8 import {$isCustomTableCellNode, CustomTableCellNode} from "../../../nodes/custom-table-cell-node";
   9 import {EditorFormModal} from "../../framework/modals";
  10 import {$getNodeFromSelection} from "../../../utils/selection";
  11 import {$getSelection, ElementFormatType} from "lexical";
  12 import {TableCellHeaderStates} from "@lexical/table";
  13
  14 const borderStyleInput: EditorSelectFormFieldDefinition = {
  15     label: 'Border style',
  16     name: 'border_style',
  17     type: 'select',
  18     valuesByLabel: {
  19         'Select...': '',
  20         "Solid": 'solid',
  21         "Dotted": 'dotted',
  22         "Dashed": 'dashed',
  23         "Double": 'double',
  24         "Groove": 'groove',
  25         "Ridge": 'ridge',
  26         "Inset": 'inset',
  27         "Outset": 'outset',
  28         "None": 'none',
  29         "Hidden": 'hidden',
  30     }
  31 };
  32
  33 const borderColorInput: EditorFormFieldDefinition = {
  34     label: 'Border color',
  35     name: 'border_color',
  36     type: 'text',
  37 };
  38
  39 const backgroundColorInput: EditorFormFieldDefinition = {
  40     label: 'Background color',
  41     name: 'background_color',
  42     type: 'text',
  43 };
  44
  45 const alignmentInput: EditorSelectFormFieldDefinition = {
  46     label: 'Alignment',
  47     name: 'align',
  48     type: 'select',
  49     valuesByLabel: {
  50         'None': '',
  51         'Left': 'left',
  52         'Center': 'center',
  53         'Right': 'right',
  54     }
  55 };
  56
  57 export function showCellPropertiesForm(cell: CustomTableCellNode, context: EditorUiContext): EditorFormModal {
  58     const styles = cell.getStyles();
  59     const modalForm = context.manager.createModal('cell_properties');
  60     modalForm.show({
  61         width: '', // TODO
  62         height: styles.get('height') || '',
  63         type: cell.getTag(),
  64         h_align: '', // TODO
  65         v_align: styles.get('vertical-align') || '',
  66         border_width: styles.get('border-width') || '',
  67         border_style: styles.get('border-style') || '',
  68         border_color: styles.get('border-color') || '',
  69         background_color: styles.get('background-color') || '',
  70     });
  71     return modalForm;
  72 }
  73
  74 export const cellProperties: EditorFormDefinition = {
  75     submitText: 'Save',
  76     async action(formData, context: EditorUiContext) {
  77         // TODO - Set for cell selection range
  78         context.editor.update(() => {
  79             const cell = $getNodeFromSelection($getSelection(), $isCustomTableCellNode);
  80             if ($isCustomTableCellNode(cell)) {
  81                 // TODO - Set width
  82                 cell.setFormat((formData.get('h_align')?.toString() || '') as ElementFormatType);
  83                 cell.updateTag(formData.get('type')?.toString() || '');
  84
  85                 const styles = cell.getStyles();
  86                 styles.set('height', formData.get('height')?.toString() || '');
  87                 styles.set('vertical-align', formData.get('v_align')?.toString() || '');
  88                 styles.set('border-width', formData.get('border_width')?.toString() || '');
  89                 styles.set('border-style', formData.get('border_style')?.toString() || '');
  90                 styles.set('border-color', formData.get('border_color')?.toString() || '');
  91                 styles.set('background-color', formData.get('background_color')?.toString() || '');
  92
  93                 cell.setStyles(styles);
  94             }
  95         });
  96
  97         return true;
  98     },
  99     fields: [
 100         {
 101             build() {
 102                 const generalFields: EditorFormFieldDefinition[] = [
 103                     {
 104                         label: 'Width', // Colgroup width
 105                         name: 'width',
 106                         type: 'text',
 107                     },
 108                     {
 109                         label: 'Height', // inline-style: height
 110                         name: 'height',
 111                         type: 'text',
 112                     },
 113                     {
 114                         label: 'Cell type', // element
 115                         name: 'type',
 116                         type: 'select',
 117                         valuesByLabel: {
 118                             'Cell': 'td',
 119                             'Header cell': 'th',
 120                         }
 121                     } as EditorSelectFormFieldDefinition,
 122                     {
 123                         ...alignmentInput, // class: 'align-right/left/center'
 124                         label: 'Horizontal align',
 125                         name: 'h_align',
 126                     },
 127                     {
 128                         label: 'Vertical align', // inline-style: vertical-align
 129                         name: 'v_align',
 130                         type: 'select',
 131                         valuesByLabel: {
 132                             'None': '',
 133                             'Top': 'top',
 134                             'Middle': 'middle',
 135                             'Bottom': 'bottom',
 136                         }
 137                     } as EditorSelectFormFieldDefinition,
 138                 ];
 139
 140                 const advancedFields: EditorFormFieldDefinition[] = [
 141                     {
 142                         label: 'Border width', // inline-style: border-width
 143                         name: 'border_width',
 144                         type: 'text',
 145                     },
 146                     borderStyleInput, // inline-style: border-style
 147                     borderColorInput, // inline-style: border-color
 148                     backgroundColorInput, // inline-style: background-color
 149                 ];
 150
 151                 return new EditorFormTabs([
 152                     {
 153                         label: 'General',
 154                         contents: generalFields,
 155                     },
 156                     {
 157                         label: 'Advanced',
 158                         contents: advancedFields,
 159                     }
 160                 ])
 161             }
 162         },
 163     ],
 164 };
 165
 166 export const rowProperties: EditorFormDefinition = {
 167     submitText: 'Save',
 168     async action(formData, context: EditorUiContext) {
 169         // TODO
 170         return true;
 171     },
 172     fields: [
 173         {
 174             build() {
 175                 const generalFields: EditorFormFieldDefinition[] = [
 176                     {
 177                         label: 'Row type',
 178                         name: 'type',
 179                         type: 'select',
 180                         valuesByLabel: {
 181                             'Body': 'body',
 182                             'Header': 'header',
 183                             'Footer': 'footer',
 184                         }
 185                     } as EditorSelectFormFieldDefinition,
 186                     alignmentInput,
 187                     {
 188                         label: 'Height',
 189                         name: 'height',
 190                         type: 'text',
 191                     },
 192                 ];
 193
 194                 const advancedFields: EditorFormFieldDefinition[] = [
 195                     borderStyleInput,
 196                     borderColorInput,
 197                     backgroundColorInput,
 198                 ];
 199
 200                 return new EditorFormTabs([
 201                     {
 202                         label: 'General',
 203                         contents: generalFields,
 204                     },
 205                     {
 206                         label: 'Advanced',
 207                         contents: advancedFields,
 208                     }
 209                 ])
 210             }
 211         },
 212     ],
 213 };
 214 export const tableProperties: EditorFormDefinition = {
 215     submitText: 'Save',
 216     async action(formData, context: EditorUiContext) {
 217         // TODO
 218         return true;
 219     },
 220     fields: [
 221         {
 222             build() {
 223                 const generalFields: EditorFormFieldDefinition[] = [
 224                     {
 225                         label: 'Width',
 226                         name: 'width',
 227                         type: 'text',
 228                     },
 229                     {
 230                         label: 'Height',
 231                         name: 'height',
 232                         type: 'text',
 233                     },
 234                     {
 235                         label: 'Cell spacing',
 236                         name: 'cell_spacing',
 237                         type: 'text',
 238                     },
 239                     {
 240                         label: 'Cell padding',
 241                         name: 'cell_padding',
 242                         type: 'text',
 243                     },
 244                     {
 245                         label: 'Border width',
 246                         name: 'border_width',
 247                         type: 'text',
 248                     },
 249                     {
 250                         label: 'caption',
 251                         name: 'height',
 252                         type: 'text', // TODO -
 253                     },
 254                     alignmentInput,
 255                 ];
 256
 257                 const advancedFields: EditorFormFieldDefinition[] = [
 258                     borderStyleInput,
 259                     borderColorInput,
 260                     backgroundColorInput,
 261                 ];
 262
 263                 return new EditorFormTabs([
 264                     {
 265                         label: 'General',
 266                         contents: generalFields,
 267                     },
 268                     {
 269                         label: 'Advanced',
 270                         contents: advancedFields,
 271                     }
 272                 ])
 273             }
 274         },
 275     ],
 276 };