Fixes no formatting toolbar on selecting heading

frontend/components/Editor/components/Heading.js

@@ -17,32 +17,6 @@ type Props = {
   component?: string,
 };
 
-const Wrapper = styled.div`
-  display: inline;
-  margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
-`;
-
-const Anchor = styled.a`
-  visibility: hidden;
-  padding-left: .25em;
-  color: #dedede;
-
-  &:hover {
-    color: #cdcdcd;
-  }
-`;
-
-// $FlowIssue I don't know
-const titleStyles = component => styled(component)`
-  position: relative;
-
-  &:hover {
-    ${Anchor} {
-      visibility: visible;
-    }
-  }
-`;
-
 function Heading(props: Props) {
   const {
     parent,
@@ -58,7 +32,7 @@ function Heading(props: Props) {
   const showPlaceholder = placeholder && firstHeading && !node.text;
   const slugish = _.escape(`${component}-${slug(node.text)}`);
   const showHash = readOnly && !!slugish;
-  const Component = titleStyles(component);
+  const Component = component;
   const emoji = editor.props.emoji || '';
   const title = node.text.trim();
   const startsWithEmojiAndSpace =
@@ -76,4 +50,32 @@ function Heading(props: Props) {
   );
 }
 
+const Wrapper = styled.div`
+  display: inline;
+  margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
+`;
+
+const Anchor = styled.a`
+  visibility: hidden;
+  padding-left: .25em;
+  color: #dedede;
+
+  &:hover {
+    color: #cdcdcd;
+  }
+`;
+
+export const Heading1 = styled(Heading)`
+  &:hover {
+    ${Anchor} {
+      visibility: visible;
+    }
+  }
+`;
+export const Heading2 = Heading1.withComponent('h2');
+export const Heading3 = Heading1.withComponent('h3');
+export const Heading4 = Heading1.withComponent('h4');
+export const Heading5 = Heading1.withComponent('h5');
+export const Heading6 = Heading1.withComponent('h6');
+
 export default Heading;

frontend/components/Editor/schema.js

@@ -6,7 +6,14 @@ import InlineCode from './components/InlineCode';
 import Image from './components/Image';
 import Link from './components/Link';
 import ListItem from './components/ListItem';
-import Heading from './components/Heading';
+import {
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+} from './components/Heading';
 import Paragraph from './components/Paragraph';
 import type { Props, Node, Transform } from './types';
 
@@ -47,12 +54,12 @@ const createSchema = () => {
       image: Image,
       link: Link,
       'list-item': ListItem,
-      heading1: (props: Props) => <Heading placeholder {...props} />,
-      heading2: (props: Props) => <Heading component="h2" {...props} />,
-      heading3: (props: Props) => <Heading component="h3" {...props} />,
-      heading4: (props: Props) => <Heading component="h4" {...props} />,
-      heading5: (props: Props) => <Heading component="h5" {...props} />,
-      heading6: (props: Props) => <Heading component="h6" {...props} />,
+      heading1: (props: Props) => <Heading1 placeholder {...props} />,
+      heading2: (props: Props) => <Heading2 {...props} />,
+      heading3: (props: Props) => <Heading3 {...props} />,
+      heading4: (props: Props) => <Heading4 {...props} />,
+      heading5: (props: Props) => <Heading5 {...props} />,
+      heading6: (props: Props) => <Heading6 {...props} />,
     },
 
     rules: [