Added an ability to hide certain typography styles with the Heading extensions

src/common/constants.js

@@ -11,6 +11,9 @@ export const EDITOR_OPTIONS = {
   H1: "h1",
   H2: "h2",
   H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
   LIST_BULLETS: "bullet-list",
   LIST_ORDERED: "ordered-list",
   CODE: "code",

src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js

@@ -15,6 +15,8 @@ import StarterKit from "@tiptap/starter-kit";
 import { EDITOR_OPTIONS } from "common/constants";
 import { isEmpty } from "ramda";
 
+import { buildLevelsFromOptions } from "components/Editor/utils";
+
 import HighlightInternal from "../BackgroundColor/ExtensionConfig";
 import BulletList from "../BulletList/ExtensionConfig";
 import CodeBlock from "../CodeBlock/ExtensionConfig";
@@ -83,6 +85,7 @@ const useCustomExtensions = ({
       blockquote: options.includes(EDITOR_OPTIONS.BLOCKQUOTE),
       orderedList: options.includes(EDITOR_OPTIONS.LIST_ORDERED),
       history: !collaborationProvider,
+      heading: { levels: buildLevelsFromOptions(options) },
     }),
     TextStyle,
     Underline,

src/components/Editor/Menu/Fixed/components/FontSizeOption.jsx

@@ -1,5 +1,6 @@
 import { memo, useRef } from "react";
 
+import { filterBy } from "neetocist";
 import { Dropdown, Typography } from "neetoui";
 import { last } from "ramda";
 
@@ -9,7 +10,12 @@ import { FONT_SIZE_OPTIONS } from "../../constants";
 
 const { Menu, MenuItem } = Dropdown;
 
-const FontSizeOption = ({ runEditorCommand, tooltipContent, label }) => {
+const FontSizeOption = ({
+  runEditorCommand,
+  tooltipContent,
+  label,
+  options = [],
+}) => {
   const dropdownRef = useRef(null);
 
   const lastOption = last(FONT_SIZE_OPTIONS);
@@ -25,6 +31,11 @@ const FontSizeOption = ({ runEditorCommand, tooltipContent, label }) => {
           editor.chain().focus().setNode("paragraph").run()
         )();
 
+  const menuOptions = [
+    ...filterBy({ key: key => options.includes(key) }, FONT_SIZE_OPTIONS),
+    FONT_SIZE_OPTIONS.at(-1),
+  ];
+
   return (
     <Dropdown
       autoWidth
@@ -44,7 +55,7 @@ const FontSizeOption = ({ runEditorCommand, tooltipContent, label }) => {
       }}
     >
       <Menu>
-        {FONT_SIZE_OPTIONS.map(({ label, value, key }) => (
+        {menuOptions.map(({ label, value, key }) => (
           <MenuItem.Button
             data-cy={`neeto-editor-fixed-menu-font-size-option-${key}`}
             key={value}

src/components/Editor/Menu/Fixed/index.jsx

@@ -172,7 +172,10 @@ const Fixed = ({
             if (!Component) return null;
 
             return (
-              <Component key={props.optionName} {...{ ...props, editor }} />
+              <Component
+                key={props.optionName}
+                {...{ ...props, editor, options }}
+              />
             );
           })
         )}

src/components/Editor/constants.js

@@ -11,6 +11,10 @@ export const DEFAULT_EDITOR_OPTIONS = [
   EDITOR_OPTIONS.PARAGRAPH,
   EDITOR_OPTIONS.H1,
   EDITOR_OPTIONS.H2,
+  EDITOR_OPTIONS.H3,
+  EDITOR_OPTIONS.H4,
+  EDITOR_OPTIONS.H5,
+  EDITOR_OPTIONS.H6,
   EDITOR_OPTIONS.LIST_BULLETS,
   EDITOR_OPTIONS.LIST_ORDERED,
   EDITOR_OPTIONS.CODE,

src/components/Editor/utils.js

@@ -2,7 +2,7 @@ import { Slice, Fragment, Node } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import { isNotEmpty } from "neetocist";
 
-import { URL_REGEXP } from "src/common/constants";
+import { EDITOR_OPTIONS, URL_REGEXP } from "src/common/constants";
 
 import {
   EDITOR_LINE_HEIGHT,
@@ -75,3 +75,18 @@ export const isEmojiSuggestionsMenuActive = () =>
 
 export const transformPastedHTML = content =>
   content.replaceAll("<br />", "<p></p>");
+
+export const buildLevelsFromOptions = options => {
+  const levels = {
+    [EDITOR_OPTIONS.H1]: 1,
+    [EDITOR_OPTIONS.H2]: 2,
+    [EDITOR_OPTIONS.H3]: 3,
+    [EDITOR_OPTIONS.H4]: 4,
+    [EDITOR_OPTIONS.H5]: 5,
+    [EDITOR_OPTIONS.H6]: 6,
+  };
+
+  return Object.entries(levels)
+    .filter(heading => options.includes(heading[0]))
+    .map(heading => heading[1]);
+};

src/index.js

@@ -1,4 +1,7 @@
 /* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
+import { EDITOR_OPTIONS } from "common/constants";
+
+import { DEFAULT_EDITOR_OPTIONS } from "components/Editor/constants";
 import {
   isEditorOverlaysActive,
   transformEditorContent,
@@ -31,4 +34,6 @@ export {
   isEditorOverlaysActive,
   isEmojiSuggestionsMenuActive,
   transformEditorContent,
+  EDITOR_OPTIONS,
+  DEFAULT_EDITOR_OPTIONS,
 };

types.d.ts

@@ -14,6 +14,7 @@ import { StarterKitOptions } from "@tiptap/starter-kit";
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { CharacterCountOptions } from "@tiptap/extension-character-count";
 import Variables from "components/Editor/CustomExtensions/Variable/index";
+import { EDITOR_OPTIONS as EDITOR_OPTIONS_VALUES } from "common/constants"
 
 interface Command {
   title: string;
@@ -186,3 +187,6 @@ export function substituteVariables(
   highlightedContent: string,
   variables: (VariableCategory | Variable)[]
 ): string;
+
+export const DEFAULT_EDITOR_OPTIONS: string[];
+export const EDITOR_OPTIONS: typeof EDITOR_OPTIONS_VALUES;