const notifyTimeout = function (time) {
   const notification = tinymce.activeEditor.notificationManager.open({
     text: 'Timeout: ' + time,
     timeout: time
   });
   console.log(notification);
 };

 onSetup: (api) => {
   console.log('onSetup ' + name);
   const box = Element.fromHtml('<div style="width: ' + width + 'px; background: ' + background + ';"></div>');
   api.element().appendChild(box.dom());
   return () => {
     api.element().removeChild(box.dom());
   };
 },

 selector_converter: (selector, group) => {
   console.log('selector', selector, 'group', group);
   return {
     title: selector + '.AdvGroup',
     // NOTE: This is required so that it isn't disabled.
     selector: 'p',
     classes: selector.split('.')[1]
   };
 }

 onSetup: (comp) => {
   // debugger;
   // TODO: TS narrowing, when config toggling = true
   // then the comp interface should include comp.toggleOn otherwise it should complain
   const state = DemoState2.get();
   console.log(state);
   comp.setActive(state);
   return () => { };
 },

  onSubmit: (api) => {
    const data = api.getData();

    // tslint:disable-next-line:no-console
    console.log({
      id: data.id
    });

    api.close();
  }

 const getCursorY = function (target) {
   /* The y position on the cursor for the viewer is a combination of y position of the editor frame and the y
    * y position of the target
    */
   const editorY = iframe.dom().contentWindow.document.querySelector('iframe').getBoundingClientRect().top;
   const targetY = target.dom().getBoundingClientRect().top;
   // tslint:disable-next-line:no-console
   console.log('editorY', editorY, 'targetY', targetY);
   return editorY + targetY;
 };

  onSubmit: (api) => {
    const data = api.getData();

    // Submit is only exectuted when the form has valid data
    console.log({
      code: data.color
    });

    api.close();
  }

  onAction: (api, details) => {
    if (details.name === 'char') {
      // Would log '@' if the At sign is clicked these values doesn't have to be part of the state model
      // tslint:disable-next-line:no-console
      console.log({
        char: details.value
      });

      api.close();
    }
  }

  onSubmit: (api) => {
    const data = api.getData();

    // tslint:disable-next-line:no-console
    console.log({
      language: data.language,
      code: data.code
    });

    api.close();
  }