OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:37:26 AM	rwxr-xr-x
📄 AlertBannerDialogSpec.ts	725 bytes	02/20/2020 06:37:29 AM	rw-r--r--
📄 AnchorDialogSpec.ts	609 bytes	02/20/2020 06:37:30 AM	rw-r--r--
📄 CharmapDialogSpec.ts	942 bytes	02/20/2020 06:37:30 AM	rw-r--r--
📄 CodeSampleDialogSpec.ts	977 bytes	02/20/2020 06:37:31 AM	rw-r--r--
📄 ColorPickerDialogSpec.ts	810 bytes	02/20/2020 06:37:31 AM	rw-r--r--
📄 CustomRediallingSpec.ts	734 bytes	02/20/2020 06:37:32 AM	rw-r--r--
📄 DocumentPropsDialogSpec.ts	1.35 KB	02/20/2020 06:37:32 AM	rw-r--r--
📄 FindReplaceDialogSpec.ts	128 bytes	02/20/2020 06:37:33 AM	rw-r--r--
📄 ImageDialogSpec.ts	2.42 KB	02/20/2020 06:37:33 AM	rw-r--r--
📄 LinkDialogSpec.ts	1.22 KB	02/20/2020 06:37:34 AM	rw-r--r--
📄 MediaDialogSpec.ts	1.58 KB	02/20/2020 06:37:34 AM	rw-r--r--
📄 PreviewDialogSpec.ts	413 bytes	02/20/2020 06:37:35 AM	rw-r--r--
📄 TableCellDialogSpec.ts	3.37 KB	02/20/2020 06:37:35 AM	rw-r--r--
📄 TableDialogSpec.ts	2.92 KB	02/20/2020 06:37:36 AM	rw-r--r--
📄 TableRowDialogSpec.ts	2.5 KB	02/20/2020 06:37:36 AM	rw-r--r--
📄 TemplateDialogSpec.ts	1003 bytes	02/20/2020 06:37:38 AM	rw-r--r--

Editing: TableDialogSpec.ts

import { console } from '@ephox/dom-globals';

export default {
  title: 'Table properties',
  body: {
    type: 'tabpanel',
    tabs: [
      {
        title: 'General',
        items: [
          {
            type: 'grid',
            columns: 2,
            items: [
              {
                name: 'width',
                type: 'input',
                label: 'Width'
              },
              {
                name: 'height',
                type: 'input',
                label: 'Height'
              },
              {
                name: 'cellspacing',
                type: 'input',
                label: 'Cell spacing'
              },
              {
                name: 'cellpadding',
                type: 'input',
                label: 'Cell padding'
              },
              {
                name: 'border',
                type: 'input',
                label: 'Border'
              },
              {
                name: 'caption',
                type: 'checkbox',
                label: 'Caption'
              },
              {
                name: 'align',
                type: 'selectbox',
                label: 'Alignment',
                items: [
                  {
                    text: 'none',
                    value: ''
                  },
                  {
                    text: 'Left',
                    value: 'left'
                  }
                ]
              },
            ]
          }
        ]
      },
      {
        title: 'Advanced',
        items: [
          {
            name: 'borderstyle',
            type: 'selectbox',
            label: 'Border style',
            items: [
              {
                text: 'Dotted',
                value: 'dotted'
              }
            ]
          },
          {
            name: 'bordercolor',
            type: 'colorinput',
            label: 'Border color'
          },
          {
            name: 'backgroundcolor',
            type: 'colorinput',
            label: 'Background color'
          }
        ]
      },
    ]
  },
  buttons: [
    {
      type: 'cancel',
      name: 'cancel',
      text: 'Cancel'
    },
    {
      type: 'submit',
      name: 'save',
      text: 'Save',
      primary: true
    }
  ],
  initialData: {
    width: '100%',
    height: '100px',
    cellspacing: '0',
    cellpadding: '1',
    align: 'left',
    border: '0',
    caption: 'unchecked',
    borderstyle: 'dotted',
    bordercolor: '#FF0000',
    backgroundcolor: '#00FF00'
  },
  onSubmit: (api) => {
    const data = api.getData();

// tslint:disable-next-line:no-console
    console.log({
      width: data.width,
      height: data.height,
      cellspacing: data.cellspacing,
      cellpadding: data.cellpadding,
      border: data.border,
      caption: data.caption,
      borderstyle: data.borderstyle,
      bordercolor: data.bordercolor,
      backgroundcolor: data.backgroundcolor
    });

api.close();
  }
};