diff --git a/src/common/constants.js b/src/common/constants.js index 95880c79..537f65c0 100644 --- a/src/common/constants.js +++ b/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", diff --git a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js b/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js index fe85974e..bc73b2fa 100644 --- a/src/components/Editor/CustomExtensions/hooks/useCustomExtensions.js +++ b/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, diff --git a/src/components/Editor/Menu/Fixed/components/FontSizeOption.jsx b/src/components/Editor/Menu/Fixed/components/FontSizeOption.jsx index f7ac9506..ca86d838 100644 --- a/src/components/Editor/Menu/Fixed/components/FontSizeOption.jsx +++ b/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 ( { }} > - {FONT_SIZE_OPTIONS.map(({ label, value, key }) => ( + {menuOptions.map(({ label, value, key }) => ( + ); }) )} diff --git a/src/components/Editor/constants.js b/src/components/Editor/constants.js index c075fe95..e2292dde 100644 --- a/src/components/Editor/constants.js +++ b/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, diff --git a/src/components/Editor/utils.js b/src/components/Editor/utils.js index 4c90ed18..bf6a448f 100644 --- a/src/components/Editor/utils.js +++ b/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("
", "

"); + +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]); +}; diff --git a/src/index.js b/src/index.js index f58db4f5..6b700bed 100644 --- a/src/index.js +++ b/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, }; diff --git a/types.d.ts b/types.d.ts index 0a21fd05..052df494 100644 --- a/types.d.ts +++ b/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;