brenmcnamara / document Goto Github PK

There is a file src/editor/Keys.js that contains a list of key-value pairs. We generally try to keep things in alphabetical order, since it keeps things consistent and makes things easier to find. Please alphabetize the keys in the json object.

• Placeholder text for draft js is not clickable (must click below placeholder text for editor to work)
• Placeholder text should be slightly faded out

The ContentHeader react component is a component that displays at the top of the text editor. It includes options for modifying the text, such as bold, italics, header, etc...

You can find this component in src/main-content/ContentHeader.react.js

This component has a lot of redundant react code that is doing the same thing over and over. We want to break this component up into smaller react components.

The goal is to create the following new react components:

• ContentIconButtonGroup.react.js
  • This will be a set of icon buttons that are grouped together in the content header
• ContentIconButton.react.js
  • This will be an individual icon button that is displayed in the content header

NOTE: Make sure you are working off of your own git branch. Submit a pull request for that branch once you're done.

Please do the following:

1. Create a new folder: src/content-header
2. Move the ContentHeader.react.js component into this folder. Make sure all the modules that are trying to import this component are referencing the correct location. Also make sure that ContentHeader.react.js's imports are changed to reflect its new path
3. Create a new styles.css file in src/content-header. Move all the styles in src/main-content/styles.css that start with the prefix contentHeader into the new styles.css file. Make sure to change the ContentHeader.react.js file so it is using the new styles.css file.
4. Create a ContentIconButton.react.js component. Replace all the code in the ContentHeader.react.js file that is rendering icons (look for styles.contentHeaderIconContainer) to render a ContentIconButton component instead. Move the relevant styles and imports into this react component. This new component takes the following props:

• iconName: This is the name of the font-awesome icon to use, such as fa-underline

5. Create a ContentIconButtonGroup component. Replace all the code in the ContentHeader.react.js file that is rendering icon groups (look for styles.contentHeaderIconGroup). Move the relevant styles and imports into this react component. This new component takes the following props:

• children: A list of child icon components to render inside the group.

When you are done modifying the code, the ContentHeader.react.js component should look something like this:

export default class ContentHeader extends React.Component<Props> {
  render() {
    return (
      <div ...>
        <ContentHeaderIconGroup>
          <ContentHeaderIcon iconName="fas fa-bold" />
          <ContentHeaderIcon iconName="fas fa-underline" />
          <ContentHeaderIcon iconName="fas fa-italic" />
        </ContentHeaderIconGroup>
        ...
      </div>
    );
  }
}

• Bold with keybindings
• Underline with keybindings
• Italics with keybindings