OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:45:48 AM	rwxr-xr-x
📄 CaptureBin.ts	733 bytes	02/20/2020 06:32:51 AM	rw-r--r--
📄 CssUrls.ts	758 bytes	02/20/2020 06:32:51 AM	rw-r--r--
📄 DataAttributes.ts	472 bytes	02/20/2020 06:32:52 AM	rw-r--r--
📄 FontSizes.ts	2.14 KB	02/20/2020 06:32:52 AM	rw-r--r--
📄 FormatChangers.ts	1.11 KB	02/20/2020 06:32:53 AM	rw-r--r--
📄 RangePreserver.ts	1002 bytes	02/20/2020 06:32:53 AM	rw-r--r--
📄 Rectangles.ts	1.78 KB	02/20/2020 06:32:54 AM	rw-r--r--
📄 SkinLoaded.ts	553 bytes	02/20/2020 06:32:54 AM	rw-r--r--
📄 StyleConversions.ts	1.46 KB	02/20/2020 06:32:55 AM	rw-r--r--
📄 StyleFormats.ts	3.07 KB	02/20/2020 06:32:55 AM	rw-r--r--
📄 TappingEvent.ts	1.09 KB	02/20/2020 06:32:56 AM	rw-r--r--
📄 Thor.ts	3 KB	02/20/2020 06:32:56 AM	rw-r--r--
📄 UiDomFactory.ts	676 bytes	02/20/2020 06:32:57 AM	rw-r--r--

Editing: FontSizes.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, Fun, Option } from '@ephox/katamari';
import { Compare, Css, Element, Node, Traverse, PredicateFind } from '@ephox/sugar';

const candidates = [ '9px', '10px', '11px', '12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px' ];

const defaultSize = 'medium';
const defaultIndex = 2;

const indexToSize = function (index) {
  return Option.from(candidates[index]);
};

const sizeToIndex = function (size) {
  return Arr.findIndex(candidates, function (v) {
    return v === size;
  });
};

const getRawOrComputed = function (isRoot, rawStart) {
  const optStart = Node.isElement(rawStart) ? Option.some(rawStart) : Traverse.parent(rawStart);
  return optStart.map(function (start) {
    const inline = PredicateFind.closest(start, (elem) => Css.getRaw(elem, 'font-size').isSome(), isRoot)
      .bind((elem) => Css.getRaw(elem, 'font-size'));

return inline.getOrThunk(function () {
      return Css.get(start, 'font-size');
    });
  }).getOr('');
};

const getSize = function (editor) {
  // This was taken from the tinymce approach (FontInfo is unlikely to be global)
  const node = editor.selection.getStart();
  const elem = Element.fromDom(node);
  const root = Element.fromDom(editor.getBody());

const isRoot = function (e) {
    return Compare.eq(root, e);
  };

const elemSize = getRawOrComputed(isRoot, elem);
  return Arr.find(candidates, function (size) {
    return elemSize === size;
  }).getOr(defaultSize);
};

const applySize = function (editor, value) {
  const currentValue = getSize(editor);
  if (currentValue !== value) {
    editor.execCommand('fontSize', false, value);
  }
};

const get = function (editor) {
  const size = getSize(editor);
  return sizeToIndex(size).getOr(defaultIndex);
};

const apply = function (editor, index) {
  indexToSize(index).each(function (size) {
    applySize(editor, size);
  });
};

export default {
  candidates: Fun.constant(candidates),
  get,
  apply
};