react-font-style/src/config.js

React font style editor

import objHasObj from 'obj-has-obj';

const fontSizeList = [9, 10, 11, 12, 13, 14, 18, 24, 30, 36, 48, 64, 72].map(font => {
  return {
    type: `font-${font}`,
    label: font,    
    style: {
      fontSize: `${font}px`
    }
  }
});

const lineHeightList = [1.0, 1.15, 1.5, 2.0, 2.5, 3.0].map(height => {
  return {
    type: `line-height-${height}`,
    label: height,
    style: {
      lineHeight: height
    }
  }
});

const toolbarConfig = {
  display: [
    'INLINE_STYLE_BUTTONS',
    'FONT_HIGHLIGHT_BUTTON',
    'FONT_COLOR_BUTTON',
    'FONT_SIZE_DROPDOWN',
    'FONT_FAMILY_DROPDOWN',
    'LINE_HEIGHT_DROPDOWN',
    'ALIGN_DROPDOWN'
  ],
  INLINE_STYLE_BUTTONS: [
    {
      type: 'bold',
      style: {
        fontWeight: 'bold'
      }
    },
    {
      type: 'italic',
      style: {
        fontStyle: 'italic'
      }
    },
    {
      type: 'underline',
      style: {
        textDecoration: 'underline'
      }
    }
  ],
  FONT_SIZE_DROPDOWN: fontSizeList,
  LINE_HEIGHT_DROPDOWN: lineHeightList,
  FONT_FAMILY_DROPDOWN: [
    {
      label: 'Helvetica neue',
      style: {
        fontFamily: 'Helvetica neue'
      }
    },
    {
      label: "Arial",
      style: {
        fontFamily: "Arial"
      }
    },
    {
      label: "Arial Narrow",
      style: {
        fontFamily: "Arial Narrow"
      }
    },
    {
      label: "Arial Black",
      style: {
        fontFamily: "Arial Black"
      }
    },
    {
      label: "Courier New",
      style: {
        fontFamily: "Courier New"
      }
    },
    {
      label: "Georgia",
      style: {
        fontFamily: "Georgia"
      }
    },
    {
      label: "Lucida Console",
      style: {
        fontFamily: "Lucida Console"
      }
    }, 
    {
      label: "Tahoma",
      style: {
        fontFamily: "Tahoma"
      }
    },
    {
      label: "Times New Roman",
      style: {
        fontFamily: "Times New Roman"
      }
    },
    {
      label: "Verdana",
      style: {
        fontFamily: "Verdana"
      }
    },
    {
      label: "微軟正黑體",
      style: {
        fontFamily: "Microsoft JhengHei, 微軟正黑體"
      }
    },
    {
      label: "標楷體",
      style: {
        fontFamily: "DFKai-sb, 標楷體"
      }
    }
  ],
  ALIGN_DROPDOWN: [
    {
      label: 'Align Left',
      style: {
        textAlign: 'left'
      }
    },
    {
      label: 'Align Center',
      style: {
        textAlign: 'center'
      }
    },
    {
      label: 'Align Right',
      style: {
        textAlign: 'right'
      }
    }
  ]
};

const aryObjToObj = (ary, key) => {
  const obj = {};
  for (let item of ary) {
    obj[item[key]] = item;
  }
  return obj;
}

export const generateConfig = (config = {}) => {
  // change array of object to object
  config = Object.assign({}, toolbarConfig, config);
  config.inlineStyleObj = aryObjToObj(config.INLINE_STYLE_BUTTONS, 'type');
  config.fontSizeObj = aryObjToObj(config.FONT_SIZE_DROPDOWN, 'label');
  config.lineHeightObj = aryObjToObj(config.LINE_HEIGHT_DROPDOWN, 'label');
  config.alignObj = aryObjToObj(config.ALIGN_DROPDOWN, 'label');
  config.fontFamilyObj = aryObjToObj(config.FONT_FAMILY_DROPDOWN, 'label');
  return config;
}

export const generateConfigState = (config, defaultStyle = {}) => {
  let activeInlineStyle;
  let activeColor = defaultStyle.color || '#000';
  let activeBackgroundColor = defaultStyle.backgroundColor || 'none';
  let activeFontSize;
  let activeLineHeight;
  let activeAlign = 'Align Left'; // default
  let activeFontFamily = config.FONT_FAMILY_DROPDOWN[0].label;
  if (config.INLINE_STYLE_BUTTONS) {
    activeInlineStyle = Object.values(config.INLINE_STYLE_BUTTONS)
      .reduce((obj, item) => {
        obj[item.type] = false;                
        if (objHasObj(defaultStyle, item.style)) {
          obj[item.type] = true;
        }
        return obj;
      }, {});
  }
  if (config.ALIGN_DROPDOWN && defaultStyle.textAlign) {
    Object.values(config.ALIGN_DROPDOWN).forEach((item) => {
      if (item.style.textAlign === defaultStyle.textAlign) {
        activeAlign = item.label;
      }
    });
  }
  if (config.FONT_FAMILY_DROPDOWN && defaultStyle.fontFamily) {
    Object.values(config.FONT_FAMILY_DROPDOWN).forEach((item) => {
      if (item.style.fontFamily === defaultStyle.fontFamily) {
        activeFontFamily = item.label;
      }
    });
  }
  if (config.FONT_SIZE_DROPDOWN && config.FONT_SIZE_DROPDOWN[0]) {
    activeFontSize = defaultStyle.fontSize ? defaultStyle.fontSize.replace('px', '') : config.FONT_SIZE_DROPDOWN[0].label;
  }
  if (config.LINE_HEIGHT_DROPDOWN && config.LINE_HEIGHT_DROPDOWN[0]) {
    activeLineHeight = defaultStyle.lineHeight ? defaultStyle.lineHeight : config.LINE_HEIGHT_DROPDOWN[0].label;
  }
  return {
    activeInlineStyle,
    activeColor,
    activeBackgroundColor,
    activeFontSize,
    activeLineHeight,
    activeFontFamily,
    activeAlign
  }
}

export const stateToStyle = ({
  activeInlineStyle,
  activeColor,
  activeBackgroundColor,
  activeFontSize,
  activeLineHeight,
  activeAlign,
  activeFontFamily,
  config
}) => {
  const {inlineStyleObj, fontSizeObj, lineHeightObj, alignObj, fontFamilyObj} = config;
  let style = {
    color: activeColor,
    backgroundColor: activeBackgroundColor,
    ...fontSizeObj[activeFontSize].style,
    ...lineHeightObj[activeLineHeight].style,
    ...alignObj[activeAlign].style,
    ...fontFamilyObj[activeFontFamily].style
  };

  // inline style
  Object.keys(activeInlineStyle).map(type => {
    if (activeInlineStyle[type]) {
      style = {
        ...style,
        ...inlineStyleObj[type].style
      }
    }
  });
  return style;
}

export default toolbarConfig;