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: ImageDialogSpec.ts

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

export default {
  title: 'Insert/edit image',
  body: {
    type: 'tabpanel',
    tabs: [
      {
        title: 'General',
        items: [
          {
            name: 'source',
            type: 'urlinput', // TODO: Change to input
            filetype: 'image'
          },
          {
            name: 'description',
            type: 'input'
          },
          {
            name: 'size',
            type: 'sizeinput'
          }
        ]
      },
      {
        title: 'Advanced',
        items: [
          {
            name: 'vspace',
            type: 'input'
          },
          {
            name: 'hspace',
            type: 'input'
          },
          {
            name: 'borderwidth',
            type: 'input'
          },
          {
            name: 'borderstyle',
            type: 'selectbox',
            items: [
              {
                text: 'dotted',
                value: 'dotted'
              }
            ]
          }
        ]
      },
      {
        title: 'Upload',
        items: [
          {
            name: 'file',
            type: 'dropzone'
          }
        ]
      }
    ]
  },
  buttons: [
    {
      type: 'cancel',
      name: 'cancel',
      text: 'Cancel'
    },
    {
      type: 'submit',
      name: 'save',
      text: 'Save',
      primary: true
    }
  ],
  initialData: {
    source: {
      value: 'my.gif',
      text: 'my.gif'
    },
    description: '',
    size: { width: '200', height: '200' },
    vspace: '0',
    hspace: '0',
    borderwidth: '10px',
    borderstyle: 'dotted',
    file: '' // Inconsistent types. Bridge expects string, Dropzone uses [ ]
  },
  onChange: (api, details) => {
    const data = api.getData();
    console.log('changing to ', data.file);

if (details.name === 'file') {
      // When a file is selected then update the source field, complexity around file pickers, auto complete etc is within that component
      api.setData({
        source: data.file
      });
    } else if (details.name === 'size') {
      // Notice that the size has a more complex json output separating
      // width/height the constrain logic should be done at implementation level
      const value = details.value as { width: string, height: string };
      console.log(value.width, value.height);
    }
  },
  onSubmit: (api) => {
    const data = api.getData();
    console.log('Dialog data', data);
    api.close();
  }
};