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 {setEditorContentFromHtml} from "../../../actions";
   9
  10 export const cellProperties: EditorFormDefinition = {
  11     submitText: 'Save',
  12     async action(formData, context: EditorUiContext) {
  13         setEditorContentFromHtml(context.editor, formData.get('source')?.toString() || '');
  14         return true;
  15     },
  16     fields: [
  17         {
  18             build() {
  19                 const generalFields: EditorFormFieldDefinition[] = [
  20                     {
  21                         label: 'Width',
  22                         name: 'width',
  23                         type: 'text',
  24                     },
  25                     {
  26                         label: 'Height',
  27                         name: 'height',
  28                         type: 'text',
  29                     },
  30                     {
  31                         label: 'Cell type',
  32                         name: 'type',
  33                         type: 'select',
  34                         valuesByLabel: {
  35                             'Cell': 'cell',
  36                             'Header cell': 'header',
  37                         }
  38                     } as EditorSelectFormFieldDefinition,
  39                     {
  40                         label: 'Horizontal align',
  41                         name: 'h_align',
  42                         type: 'select',
  43                         valuesByLabel: {
  44                             'None': '',
  45                             'Left': 'left',
  46                             'Center': 'center',
  47                             'Right': 'right',
  48                         }
  49                     } as EditorSelectFormFieldDefinition,
  50                     {
  51                         label: 'Vertical align',
  52                         name: 'v_align',
  53                         type: 'select',
  54                         valuesByLabel: {
  55                             'None': '',
  56                             'Top': 'top',
  57                             'Middle': 'middle',
  58                             'Bottom': 'bottom',
  59                         }
  60                     } as EditorSelectFormFieldDefinition,
  61                 ];
  62
  63                 const advancedFields: EditorFormFieldDefinition[] = [
  64                     {
  65                         label: 'Border width',
  66                         name: 'border_width',
  67                         type: 'text',
  68                     },
  69                     {
  70                         label: 'Border style',
  71                         name: 'border_style',
  72                         type: 'select',
  73                         valuesByLabel: {
  74                             'Select...': '',
  75                             "Solid": 'solid',
  76                             "Dotted": 'dotted',
  77                             "Dashed": 'dashed',
  78                             "Double": 'double',
  79                             "Groove": 'groove',
  80                             "Ridge": 'ridge',
  81                             "Inset": 'inset',
  82                             "Outset": 'outset',
  83                             "None": 'none',
  84                             "Hidden": 'hidden',
  85                         }
  86                     } as EditorSelectFormFieldDefinition,
  87                     {
  88                         label: 'Border color',
  89                         name: 'border_color',
  90                         type: 'text',
  91                     },
  92                     {
  93                         label: 'Background color',
  94                         name: 'background_color',
  95                         type: 'text',
  96                     },
  97                 ];
  98
  99                 return new EditorFormTabs([
 100                     {
 101                         label: 'General',
 102                         contents: generalFields,
 103                     },
 104                     {
 105                         label: 'Advanced',
 106                         contents: advancedFields,
 107                     }
 108                 ])
 109             }
 110         },
 111     ],
 112 };