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 {CustomTableCellNode} from "../../../nodes/custom-table-cell-node";
   9 import {EditorFormModal} from "../../framework/modals";
  10 import {$getSelection, ElementFormatType} from "lexical";
  11 import {$getTableCellsFromSelection, $setTableCellColumnWidth} from "../../../utils/tables";
  12 import {formatSizeValue} from "../../../utils/dom";
  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: cell.getFormatType(),
  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         context.editor.update(() => {
  78             const cells = $getTableCellsFromSelection($getSelection());
  79             for (const cell of cells) {
  80                 const width = formData.get('width')?.toString() || '';
  81
  82                 $setTableCellColumnWidth(cell, width);
  83                 cell.updateTag(formData.get('type')?.toString() || '');
  84                 cell.setFormat((formData.get('h_align')?.toString() || '') as ElementFormatType);
  85
  86                 const styles = cell.getStyles();
  87                 styles.set('height', formatSizeValue(formData.get('height')?.toString() || ''));
  88                 styles.set('vertical-align', formData.get('v_align')?.toString() || '');
  89                 styles.set('border-width', formatSizeValue(formData.get('border_width')?.toString() || ''));
  90                 styles.set('border-style', formData.get('border_style')?.toString() || '');
  91                 styles.set('border-color', formData.get('border_color')?.toString() || '');
  92                 styles.set('background-color', formData.get('background_color')?.toString() || '');
  93
  94                 cell.setStyles(styles);
  95             }
  96         });
  97
  98         return true;
  99     },
 100     fields: [
 101         {
 102             build() {
 103                 const generalFields: EditorFormFieldDefinition[] = [
 104                     {
 105                         label: 'Width', // Colgroup width
 106                         name: 'width',
 107                         type: 'text',
 108                     },
 109                     {
 110                         label: 'Height', // inline-style: height
 111                         name: 'height',
 112                         type: 'text',
 113                     },
 114                     {
 115                         label: 'Cell type', // element
 116                         name: 'type',
 117                         type: 'select',
 118                         valuesByLabel: {
 119                             'Cell': 'td',
 120                             'Header cell': 'th',
 121                         }
 122                     } as EditorSelectFormFieldDefinition,
 123                     {
 124                         ...alignmentInput, // class: 'align-right/left/center'
 125                         label: 'Horizontal align',
 126                         name: 'h_align',
 127                     },
 128                     {
 129                         label: 'Vertical align', // inline-style: vertical-align
 130                         name: 'v_align',
 131                         type: 'select',
 132                         valuesByLabel: {
 133                             'None': '',
 134                             'Top': 'top',
 135                             'Middle': 'middle',
 136                             'Bottom': 'bottom',
 137                         }
 138                     } as EditorSelectFormFieldDefinition,
 139                 ];
 140
 141                 const advancedFields: EditorFormFieldDefinition[] = [
 142                     {
 143                         label: 'Border width', // inline-style: border-width
 144                         name: 'border_width',
 145                         type: 'text',
 146                     },
 147                     borderStyleInput, // inline-style: border-style
 148                     borderColorInput, // inline-style: border-color
 149                     backgroundColorInput, // inline-style: background-color
 150                 ];
 151
 152                 return new EditorFormTabs([
 153                     {
 154                         label: 'General',
 155                         contents: generalFields,
 156                     },
 157                     {
 158                         label: 'Advanced',
 159                         contents: advancedFields,
 160                     }
 161                 ])
 162             }
 163         },
 164     ],
 165 };
 166
 167 export const rowProperties: EditorFormDefinition = {
 168     submitText: 'Save',
 169     async action(formData, context: EditorUiContext) {
 170         // TODO
 171         return true;
 172     },
 173     fields: [
 174         {
 175             build() {
 176                 const generalFields: EditorFormFieldDefinition[] = [
 177                     {
 178                         label: 'Row type',
 179                         name: 'type',
 180                         type: 'select',
 181                         valuesByLabel: {
 182                             'Body': 'body',
 183                             'Header': 'header',
 184                             'Footer': 'footer',
 185                         }
 186                     } as EditorSelectFormFieldDefinition,
 187                     alignmentInput,
 188                     {
 189                         label: 'Height',
 190                         name: 'height',
 191                         type: 'text',
 192                     },
 193                 ];
 194
 195                 const advancedFields: EditorFormFieldDefinition[] = [
 196                     borderStyleInput,
 197                     borderColorInput,
 198                     backgroundColorInput,
 199                 ];
 200
 201                 return new EditorFormTabs([
 202                     {
 203                         label: 'General',
 204                         contents: generalFields,
 205                     },
 206                     {
 207                         label: 'Advanced',
 208                         contents: advancedFields,
 209                     }
 210                 ])
 211             }
 212         },
 213     ],
 214 };
 215 export const tableProperties: EditorFormDefinition = {
 216     submitText: 'Save',
 217     async action(formData, context: EditorUiContext) {
 218         // TODO
 219         return true;
 220     },
 221     fields: [
 222         {
 223             build() {
 224                 const generalFields: EditorFormFieldDefinition[] = [
 225                     {
 226                         label: 'Width',
 227                         name: 'width',
 228                         type: 'text',
 229                     },
 230                     {
 231                         label: 'Height',
 232                         name: 'height',
 233                         type: 'text',
 234                     },
 235                     {
 236                         label: 'Cell spacing',
 237                         name: 'cell_spacing',
 238                         type: 'text',
 239                     },
 240                     {
 241                         label: 'Cell padding',
 242                         name: 'cell_padding',
 243                         type: 'text',
 244                     },
 245                     {
 246                         label: 'Border width',
 247                         name: 'border_width',
 248                         type: 'text',
 249                     },
 250                     {
 251                         label: 'caption',
 252                         name: 'height',
 253                         type: 'text', // TODO -
 254                     },
 255                     alignmentInput,
 256                 ];
 257
 258                 const advancedFields: EditorFormFieldDefinition[] = [
 259                     borderStyleInput,
 260                     borderColorInput,
 261                     backgroundColorInput,
 262                 ];
 263
 264                 return new EditorFormTabs([
 265                     {
 266                         label: 'General',
 267                         contents: generalFields,
 268                     },
 269                     {
 270                         label: 'Advanced',
 271                         contents: advancedFields,
 272                     }
 273                 ])
 274             }
 275         },
 276     ],
 277 };