OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:33:39 AM	rwxr-xr-x
📄 ButtonSetupDemo.ts	2.82 KB	02/20/2020 06:33:34 AM	rw-r--r--
📄 Demos.ts	515 bytes	02/20/2020 06:33:34 AM	rw-r--r--
📄 FormatSelectDemo.ts	2.4 KB	02/20/2020 06:33:35 AM	rw-r--r--
📄 MenuItemDemo.ts	3.9 KB	02/20/2020 06:33:35 AM	rw-r--r--
📄 MockDemo.ts	508 bytes	02/20/2020 06:33:36 AM	rw-r--r--
📄 PlayDemo.ts	5.03 KB	02/20/2020 06:33:36 AM	rw-r--r--
📄 SidebarDemo.ts	1.46 KB	02/20/2020 06:33:37 AM	rw-r--r--
📄 ToolbarButtonDemo.ts	2.92 KB	02/20/2020 06:33:37 AM	rw-r--r--
📄 ToolbarComponentsDemo.ts	3.67 KB	02/20/2020 06:33:38 AM	rw-r--r--

Editing: MenuItemDemo.ts

import { console } from '@ephox/dom-globals';
import Editor from 'tinymce/core/api/Editor';
import * as MockDemo from './MockDemo';

declare let tinymce: any;

// tslint:disable:no-console

export default function () {
  const DemoState = MockDemo.mockFeatureState();
  const DemoState2 = MockDemo.mockFeatureState();

tinymce.init({
    selector: 'textarea.tiny-text',
    theme: 'silver',
    // toolbar: [ 'basic-button-1', 'basic-button-2', 'menu-button-1', 'panel-button-1', 'dialog-button', 'MagicButton' ],
    plugins: [
      // 'lists', // Required for list functionality (commands),
      // 'autolink', // Required for turning pasted text into hyperlinks
      // 'autosave' // Required to prevent users losing content when they press back
    ],

menus: {
      File: [ 'x1', 'x2', 'x3', '|', 't1', '|', 'd1' ]
    },

setup (ed: Editor) {
      ed.ui.registry.addMenuItem('x1', {
        icon: 'drop',
        text: 'Text with icon',
        onAction () {
          console.log('Just Text click');
        }
      });

ed.ui.registry.addMenuItem('x2', {
        // icon: Icons.getOr('bold', () => 'oh no'),
        text: 'Just Text',
        onAction () {
          console.log('Just Text click');
        }
      });

ed.ui.registry.addMenuItem('x3', {
        // icon: Icons.getOr('bold', () => 'oh no'),
        text: 'Just Text with shortcut',
        shortcut: 'Ctrl+Alt+Delete',
        onAction () {
          console.log('Just Text click');
        }
      });

ed.ui.registry.addToggleMenuItem('t1', {
        text: 'button with Toggle',
        shortcut: '⌘+C',
        onSetup: (comp) => {
          // debugger;
          // TODO: TS narrowing, when config toggling = true
          // then the comp interface should include comp.toggleOn otherwise it should complain
          const state = DemoState.get();
          console.log(state);
          comp.setActive(state);
          return () => { };
        },
        onAction (comp) {
          DemoState.toggle();
          comp.setActive(DemoState.get());
          console.log('button with Toggle click - current state is: ' + DemoState.get());
        }
      });

ed.ui.registry.addNestedMenuItem('d1', {
        // icon: Icons.getOr('drop', () => 'oh no'),
        text: 'nested',
        getSubmenuItems: () => [
          {
            type: 'menuitem',
            text: 'Nested 1',
            onAction () {
              console.log('clicked nested 1');
            }
          },
          {
            type: 'menuitem',
            text: 'Nested 2',
            icon: 'drop',
            onAction () {
              console.log('clicked nested 1');
            }
          },
          {
            type: 'menuitem',
            text: 'Nested 3',
            shortcut: 'X',
            onAction () {
              console.log('clicked nested 1');
            }
          },
          {
            type: 'togglemenuitem',
            text: 'nested Toggle',
            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 () => { };
            },
            onAction (comp) {
              DemoState2.toggle();
              comp.setActive(DemoState2.get());
              console.log('button with Toggle click - current state is: ' + DemoState2.get());
            }
          },
          {
            type: 'menuitem',
            text: 'Double nested',
            onAction: () => console.log('double nest go!'),
            getSubmenuItems: () => [
              {
                type: 'menuitem',
                text: 'wow',
                onAction: () => console.log('so deep')
              }
            ]
          }
        ]
      });
    }
  });
}