gitbook-plugin-headings: Update plugin to display anchors

1 files changed, 42 insertions, 9 deletions

diff --git a/packages/gitbook-plugin-headings/src/index.js b/packages/gitbook-plugin-headings/src/index.js
index 00bc790..01d2ed1 100644
--- a/packages/gitbook-plugin-headings/src/index.js
+++ b/packages/gitbook-plugin-headings/src/index.js
@@ -1,27 +1,60 @@
-const GitBook = require('gitbook-core');
-const { React } = GitBook;
+const GitBook    = require('gitbook-core');
+const { React }  = GitBook;
+const classNames = require('classnames');
 
-const Heading = React.createClass({
+function mapStateToProps({ config }) {
+    return {
+        position: config.get('pluginsConfig').get('headings').get('position') || 'left'
+    };
+}
+
+let Heading = React.createClass({
     propTypes: {
-        children: React.PropTypes.node
+        id:       React.PropTypes.string.isRequired,
+        children: React.PropTypes.node.isRequired,
+        position: React.PropTypes.string.isRequired
     },
 
     render() {
+        const { position, id } = this.props;
+        const className = classNames('Headings-Container', {
+            'Headings-Right': (position !== 'left')
+        });
+
         return (
-            <div className="Headings-Container">
+            <div className={className}>
+                <GitBook.ImportCSS href="gitbook/headings/headings.css" />
+
+                {position == 'left' ?
+                <GitBook.Link className="Headings-Anchor-Left" href={`#${id}`}>
+                    <i className="fa fa-link" />
+                </GitBook.Link>
+                : null}
+
                 {this.props.children}
+
+                {position != 'left' ?
+                <GitBook.Link className="Headings-Anchor-Right" href={`#${id}`}>
+                    <i className="fa fa-link" />
+                </GitBook.Link>
+                : null}
             </div>
         );
     }
 });
 
+Heading = GitBook.connect(Heading, mapStateToProps);
+
 module.exports = GitBook.createPlugin({
     activate: (dispatch, getState, { Components }) => {
-        // Dispatch initialization actions
+        // Attach component to titles
         dispatch(Components.registerComponent(Heading, { role: 'html:h1' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h2' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h3' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h4' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h5' }));
+        dispatch(Components.registerComponent(Heading, { role: 'html:h6' }));
     },
-    deactivate: (dispatch, getState) => {
-        // Dispatch cleanup actions
-    },
+    deactivate: (dispatch, getState) => {},
     reduce: (state, action) => state
 });