Align title correctly when first character is emoji

frontend/components/Editor/Editor.js

@@ -29,6 +29,7 @@ type Props = {
   onImageUploadStart: Function,
   onImageUploadStop: Function,
   starred: boolean,
+  emoji: string,
   readOnly: boolean,
   heading?: ?React.Element<*>,
 };
@@ -213,6 +214,7 @@ type KeyData = {
             className={cx(styles.editor, { readOnly: this.props.readOnly })}
             schema={this.schema}
             plugins={this.plugins}
+            emoji={this.props.emoji}
             state={this.state.state}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}

frontend/components/Editor/components/Heading.js

@@ -25,6 +25,10 @@ type Context = {
   starred?: boolean,
 };
 
+const Wrapper = styled.div`
+  margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
+`;
+
 const StyledStar = styled(StarIcon)`
   top: 3px;
   position: relative;
@@ -61,10 +65,14 @@ function Heading(props: Props, { starred }: Context) {
   const showStar = readOnly && !!onStar;
   const showHash = readOnly && !!slugish && !showStar;
   const Component = component;
+  const emoji = editor.props.emoji || '';
+  const title = node.text.trim();
+  const startsWithEmojiAndSpace =
+    emoji && title.match(new RegExp(`^${emoji}\\s`));
 
   return (
     <Component className={styles.title}>
-      {children}
+      <Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
       {showPlaceholder &&
         <span className={styles.placeholder} contentEditable={false}>
           {editor.props.placeholder}