OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:30 AM	rwxr-xr-x
📄 AlignSelect.ts	2.7 KB	02/20/2020 06:40:33 AM	rw-r--r--
📄 BespokeSelect.ts	6.28 KB	02/20/2020 06:40:33 AM	rw-r--r--
📄 FontSelect.ts	5.13 KB	02/20/2020 06:40:34 AM	rw-r--r--
📄 FontsizeSelect.ts	3.12 KB	02/20/2020 06:40:34 AM	rw-r--r--
📄 FormatSelect.ts	2.63 KB	02/20/2020 06:40:35 AM	rw-r--r--
📄 SelectDatasets.ts	1.7 KB	02/20/2020 06:40:35 AM	rw-r--r--
📄 StyleFormat.ts	5.07 KB	02/20/2020 06:40:36 AM	rw-r--r--
📄 StyleSelect.ts	2.79 KB	02/20/2020 06:40:36 AM	rw-r--r--
📁 utils	-	02/20/2020 06:42:40 AM	rwxr-xr-x

Editing: FormatSelect.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 { AlloyTriggers } from '@ephox/alloy';
import { Option } from '@ephox/katamari';
import Editor from 'tinymce/core/api/Editor';
import { updateMenuText } from '../../dropdown/CommonDropdown';
import { onActionToggleFormat } from './utils/Utils';
import { createMenuItems, createSelectButton, SelectSpec } from './BespokeSelect';
import { buildBasicSettingsDataset, Delimiter } from './SelectDatasets';
import { findNearest } from './utils/FormatDetection';

const defaultBlocks = (
  'Paragraph=p;' +
  'Heading 1=h1;' +
  'Heading 2=h2;' +
  'Heading 3=h3;' +
  'Heading 4=h4;' +
  'Heading 5=h5;' +
  'Heading 6=h6;' +
  'Preformatted=pre'
);

const getSpec = (editor): SelectSpec & { dataset } => {
  const getMatchingValue = (nodeChangeEvent) => {
    return findNearest(editor, () => dataset.data, nodeChangeEvent);
  };

const isSelectedFor = (format) => {
    return () => {
      return editor.formatter.match(format);
    };
  };

const getPreviewFor = (format) => () => {
    const fmt = editor.formatter.get(format);
    return Option.some({
      tag: fmt.length > 0 ? fmt[0].inline || fmt[0].block || 'div' : 'div',
      styleAttr: editor.formatter.getCssText(format)
    });
  };

const dataset = buildBasicSettingsDataset(editor, 'block_formats', defaultBlocks, Delimiter.SemiColon);

return {
    tooltip: 'Blocks',
    icon: Option.none(),
    isSelectedFor,
    getPreviewFor,
    onAction: onActionToggleFormat(editor),
    nodeChangeHandler,
    dataset,
    shouldHide: false,
    isInvalid: (item) => !editor.formatter.canApply(item.format)
  };
};

const createFormatSelect = (editor: Editor, backstage) => {
  const spec = getSpec(editor);
  return createSelectButton(editor, backstage, spec.dataset, spec);
};

// FIX: Test this!
const formatSelectMenu = (editor: Editor, backstage) => {
  const spec = getSpec(editor);
  const menuItems = createMenuItems(editor, backstage, spec.dataset, spec);
  editor.ui.registry.addNestedMenuItem('blockformats', {
    text: 'Blocks',
    getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())
  });
};

export { createFormatSelect, formatSelectMenu };