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: StyleFormat.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 { Arr, Obj } from '@ephox/katamari';
import Editor from 'tinymce/core/api/Editor';
import { getUserStyleFormats, isMergeStyleFormats } from '../../../api/Settings';
import { AllowedFormat, BlockStyleFormat, FormatReference, InlineStyleFormat, NestedFormatting, SelectorStyleFormat, Separator, StyleFormat } from 'tinymce/core/api/fmt/StyleFormat';

export const defaultStyleFormats: AllowedFormat[] = [
  {
    title: 'Headings', items: [
      { title: 'Heading 1', format: 'h1' },
      { title: 'Heading 2', format: 'h2' },
      { title: 'Heading 3', format: 'h3' },
      { title: 'Heading 4', format: 'h4' },
      { title: 'Heading 5', format: 'h5' },
      { title: 'Heading 6', format: 'h6' }
    ]
  },

{
    title: 'Inline', items: [
      { title: 'Bold', icon: 'bold', format: 'bold' },
      { title: 'Italic', icon: 'italic', format: 'italic' },
      { title: 'Underline', icon: 'underline', format: 'underline' },
      { title: 'Strikethrough', icon: 'strike-through', format: 'strikethrough' },
      { title: 'Superscript', icon: 'superscript', format: 'superscript' },
      { title: 'Subscript', icon: 'subscript', format: 'subscript' },
      { title: 'Code', icon: 'code', format: 'code' }
    ]
  },

{
    title: 'Blocks', items: [
      { title: 'Paragraph', format: 'p' },
      { title: 'Blockquote', format: 'blockquote' },
      { title: 'Div', format: 'div' },
      { title: 'Pre', format: 'pre' }
    ]
  },

{
    title: 'Align', items: [
      { title: 'Left', icon: 'align-left', format: 'alignleft' },
      { title: 'Center', icon: 'align-center', format: 'aligncenter' },
      { title: 'Right', icon: 'align-right', format: 'alignright' },
      { title: 'Justify', icon: 'align-justify', format: 'alignjustify' }
    ]
  }
];

// Note: Need to cast format below to Record, as Obj.has uses "K keyof T", which doesn't work with aliases
const isNestedFormat = (format: AllowedFormat): format is NestedFormatting => {
  return Obj.has(format as Record<string, any>, 'items');
};

const isBlockFormat = (format: AllowedFormat): format is BlockStyleFormat => {
  return Obj.has(format as Record<string, any>, 'block');
};

const isInlineFormat = (format: AllowedFormat): format is InlineStyleFormat => {
  return Obj.has(format as Record<string, any>, 'inline');
};

const isSelectorFormat = (format: AllowedFormat): format is SelectorStyleFormat => {
  return Obj.has(format as Record<string, any>, 'selector');
};

interface CustomFormatMapping {
  customFormats: { name: string, format: StyleFormat }[];
  formats: (Separator | FormatReference | NestedFormatting)[];
}

const registerCustomFormats = (editor: Editor, userFormats: AllowedFormat[]): (Separator | FormatReference | NestedFormatting)[] => {
  const result = mapFormats(userFormats);

// The editor may not yet be initialized, so check for that
  if (editor.formatter) {
    registerFormats(result.customFormats);
  } else {
    editor.on('init', () => {
      registerFormats(result.customFormats);
    });
  }

return result.formats;
};

export const getStyleFormats = (editor: Editor): (Separator | FormatReference | NestedFormatting)[] => {
  return getUserStyleFormats(editor).map((userFormats) => {
    // Ensure that any custom formats specified by the user are registered with the editor
    const registeredUserFormats = registerCustomFormats(editor, userFormats);
    // Merge the default formats with the custom formats if required
    return isMergeStyleFormats(editor) ? defaultStyleFormats.concat(registeredUserFormats) : registeredUserFormats;
  }).getOr(defaultStyleFormats);
};