Add horizontal menu

src/Block/DefaultTocRenderer.jsx

@@ -18,7 +18,7 @@ import AnchorLink from 'react-anchor-link-smooth-scroll';
 const View = ({ properties, data, tocEntries }) => {
   return (
     <>
-      {data.title ? (
+      {data.title && !data.hide_title ? (
         <h2>
           {data.title || (
             <FormattedMessage

src/Block/HorizontalMenu.jsx

@@ -0,0 +1,57 @@
+/**
+ * View toc block.
+ * @module components/manage/Blocks/ToC/View
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { map } from 'lodash';
+import { Menu } from 'semantic-ui-react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+
+/**
+ * View toc block class.
+ * @class View
+ * @extends Component
+ */
+const View = ({ properties, data, tocEntries }) => {
+  return (
+    <>
+      {data.title && !data.hide_title ? (
+        <h2>
+          {data.title || (
+            <FormattedMessage
+              id="Table of Contents"
+              defaultMessage="Table of Contents"
+            />
+          )}
+        </h2>
+      ) : (
+        ''
+      )}
+      <Menu>
+        {map(
+          tocEntries,
+          ([level, entry, id]) =>
+            entry && (
+              <Menu.Item key={id} className={`headline-${level}`}>
+                <AnchorLink href={`#${id}`}>{entry}</AnchorLink>
+              </Menu.Item>
+            ),
+        )}
+      </Menu>
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default injectIntl(View);

src/Block/TocView.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
 import { injectIntl } from 'react-intl';
+import cx from 'classnames';
 import { blocks } from '~/config';
 import withBlockExtension from '../withBlockExtension';
 
@@ -38,7 +39,7 @@ const View = (props) => {
   const Renderer = extension?.view;
 
   return (
-    <div className="block table-of-contents">
+    <div className={cx('block table-of-contents', extension.id)}>
       {Renderer ? (
         <Renderer {...props} tocEntries={tocEntries} properties={properties} />
       ) : (

src/index.js

@@ -3,6 +3,7 @@ import TocEdit from './Block/TocEdit';
 import DefaultTocRenderer from './Block/DefaultTocRenderer';
 import MultiSelectWidget from './Widgets/MultiSelectWidget';
 import BlockExtensionWidget from './Widgets/BlockExtensionWidget';
+import HorizontalMenu from './Block/HorizontalMenu';
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.toc = {
@@ -17,6 +18,12 @@ const applyConfig = (config) => {
         view: DefaultTocRenderer,
         schemaExtender: null,
       },
+      {
+        id: 'horizontalMenu',
+        title: 'Horizontal Menu',
+        view: HorizontalMenu,
+        schemaExtender: null,
+      },
     ],
   };