OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 CommonToolbar.ts	6.76 KB	02/20/2020 06:39:03 AM	rw-r--r--
📄 Integration.ts	7.38 KB	02/20/2020 06:39:04 AM	rw-r--r--
📁 button	-	02/20/2020 06:41:16 AM	rwxr-xr-x

Editing: Integration.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { AlloySpec, SketchSpec } from '@ephox/alloy';
import { ValueSchema } from '@ephox/boulder';
import { Toolbar } from '@ephox/bridge';
import { console } from '@ephox/dom-globals';
import { Arr, Obj, Option, Options, Result, Type } from '@ephox/katamari';
import Editor from 'tinymce/core/api/Editor';
import { ToolbarButtonClasses } from './button/ButtonClasses';
import {
  renderSplitButton,
  renderToolbarButton,
  renderToolbarToggleButton,
  renderMenuButton
} from './button/ToolbarButtons';

import { UiFactoryBackstage } from '../../backstage/Backstage';
import { createAlignSelect } from '../core/complex/AlignSelect';
import { createFontSelect } from '../core/complex/FontSelect';
import { createFontsizeSelect } from '../core/complex/FontsizeSelect';
import { createFormatSelect } from '../core/complex/FormatSelect';
import { createStyleSelect } from '../core/complex/StyleSelect';
import { RenderUiConfig } from '../../Render';
import { ToolbarGroup } from './CommonToolbar';

export const handleError = (error) => {
  // tslint:disable-next-line:no-console
  console.error(ValueSchema.formatError(error));
};

export type ToolbarButton = Toolbar.ToolbarButtonApi | Toolbar.ToolbarMenuButtonApi | Toolbar.ToolbarToggleButtonApi | Toolbar.ToolbarSplitButtonApi;

interface ToolbarGroupSetting {
  name?: string;
  items: string[];
}

interface Extras {
  backstage: UiFactoryBackstage;
}

const defaultToolbar = [
  {
    name: 'history', items: [ 'undo', 'redo' ]
  },
  {
    name: 'styles', items: [ 'styleselect' ]
  },
  {
    name: 'formatting', items: [ 'bold', 'italic']
  },
  {
    name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ]
  },
  {
    name: 'indentation', items: [ 'outdent', 'indent' ]
  },
  {
    name: 'permanent pen', items: [ 'permanentpen' ]
  },
  {
    name: 'comments', items: [ 'addcomment' ]
  }
];

const renderFromBridge = <BI, ToolbarButton>(bridgeBuilder: (i: BI) => Result<ToolbarButton, ValueSchema.SchemaError<any>>, render: (o: ToolbarButton, extras) => AlloySpec) => {
  return (spec, extras) => {
    const internal = bridgeBuilder(spec).mapError((errInfo) => ValueSchema.formatError(errInfo)).getOrDie();

return render(internal, extras);
  };
};

const types = {
  button: renderFromBridge(
    Toolbar.createToolbarButton,
    (s: Toolbar.ToolbarButton, extras) => {
      return renderToolbarButton(
        s,
        extras.backstage.shared.providers,
      );
    }
  ),

togglebutton: renderFromBridge(
    Toolbar.createToggleButton,
    (s: Toolbar.ToolbarToggleButton, extras) => {
      return renderToolbarToggleButton(
        s,
        extras.backstage.shared.providers,
      );
    }
  ),
  menubutton: renderFromBridge<Toolbar.ToolbarMenuButtonApi, Toolbar.ToolbarMenuButton>(
    Toolbar.createMenuButton,
    (s: Toolbar.ToolbarMenuButton, extras) => {
      return renderMenuButton(
        s,
        ToolbarButtonClasses.Button,
        extras.backstage.shared,
        Option.none()
      );
    }
  ),

splitbutton: renderFromBridge(
    Toolbar.createSplitButton,
    (s: Toolbar.ToolbarSplitButton, extras) => {
      return renderSplitButton(
        s,
        extras.backstage.shared
      );
    }
  ),

styleSelectButton: (editor: Editor, extras: Extras) => createStyleSelect(editor, extras.backstage),
  fontsizeSelectButton: (editor: Editor, extras: Extras) => createFontsizeSelect(editor, extras.backstage),
  fontSelectButton: (editor: Editor, extras: Extras) => createFontSelect(editor, extras.backstage),
  formatButton: (editor: Editor, extras: Extras) => createFormatSelect(editor, extras.backstage),
  alignMenuButton: (editor: Editor, extras: Extras) => createAlignSelect(editor, extras.backstage)
};

const bespokeButtons: Record<string, (editor: Editor, extras: Extras) => SketchSpec> = {
  styleselect: types.styleSelectButton,
  fontsizeselect: types.fontsizeSelectButton,
  fontselect: types.fontSelectButton,
  formatselect: types.formatButton,
  align: types.alignMenuButton
};

const convertStringToolbar = (strToolbar) => {
  const groupsStrings = strToolbar.split('|');
  return Arr.map(groupsStrings, (g) => {
    return {
      items: g.trim().split(' ')
    };
  });
};

// Toolbar settings
// false = disabled
// undefined or true = default
// string = enabled with specified buttons and groups
// string array = enabled with specified buttons and groups
// object array = enabled with specified buttons, groups and group titles
const createToolbar = (toolbarConfig: Partial<RenderUiConfig>): ToolbarGroupSetting[] => {
  if (toolbarConfig.toolbar === false) {
    return [];
  } else if (toolbarConfig.toolbar === undefined || toolbarConfig.toolbar === true) {
    return removeUnusedDefaults(toolbarConfig.buttons);
  } else if (Type.isString(toolbarConfig.toolbar)) {
    return convertStringToolbar(toolbarConfig.toolbar);
  } else if (Type.isArray(toolbarConfig.toolbar) && Type.isString(toolbarConfig.toolbar[0])) {
    return convertStringToolbar(toolbarConfig.toolbar.join(' | '));
  } else {
    return toolbarConfig.toolbar;
  }
};

return Arr.filter(groups, (group) => {
    return group.items.length > 0;
  });
};

export { identifyButtons };