diff --git a/src/common/constants.js b/src/common/constants.js index 912ab008..8c48ee84 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -61,3 +61,5 @@ export const COMBINED_REGEX = new RegExp( ]).join("|"), "g" ); + +export const EDITOR_SIZES = { MEDIUM: "medium", LARGE: "large" }; diff --git a/src/components/Editor/index.jsx b/src/components/Editor/index.jsx index d4400e64..9d4bf601 100644 --- a/src/components/Editor/index.jsx +++ b/src/components/Editor/index.jsx @@ -3,7 +3,7 @@ import { forwardRef, useImperativeHandle, useState, useRef, memo } from "react"; import { EditorView } from "@tiptap/pm/view"; import { useEditor, EditorContent, useEditorState } from "@tiptap/react"; import classnames from "classnames"; -import { EDITOR_OPTIONS } from "common/constants"; +import { EDITOR_OPTIONS, EDITOR_SIZES } from "common/constants"; import { noop, slugify } from "neetocist"; import { useFuncDebounce } from "neetocommons/react-utils"; import { Label } from "neetoui"; @@ -69,6 +69,7 @@ const Editor = ( openLinkInNewTab = true, collaborationProvider = null, enableReactNodeViewOptimization = false, + size = EDITOR_SIZES.MEDIUM, ...otherProps }, ref @@ -130,6 +131,8 @@ const Editor = ( "bubble-menu-active": isBubbleMenuActive, "placeholder-active": isPlaceholderActive, "attachments-active": isAttachmentsActive, + "neeto-editor--size-large": size === EDITOR_SIZES.LARGE, + "neeto-editor--size-medium": size === EDITOR_SIZES.MEDIUM, [contentClassName]: contentClassName, }); diff --git a/src/components/EditorContent/constants.js b/src/components/EditorContent/constants.js index 1808808c..65237305 100644 --- a/src/components/EditorContent/constants.js +++ b/src/components/EditorContent/constants.js @@ -1,6 +1,6 @@ import { lowlight } from "lowlight"; -export const EDITOR_CONTENT_CLASSNAME = "neeto-editor-content"; +export const EDITOR_CONTENT_CLASS_NAME = "neeto-editor-content"; export const SANITIZE_OPTIONS = { ADD_TAGS: ["iframe"], diff --git a/src/components/EditorContent/index.jsx b/src/components/EditorContent/index.jsx index 6786536e..ec4dde58 100644 --- a/src/components/EditorContent/index.jsx +++ b/src/components/EditorContent/index.jsx @@ -6,9 +6,10 @@ import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton"; import { isNil } from "ramda"; import { createRoot } from "react-dom/client"; +import { EDITOR_SIZES } from "src/common/constants"; import "src/styles/editor/editor-content.scss"; -import { EDITOR_CONTENT_CLASSNAME, SANITIZE_OPTIONS } from "./constants"; +import { EDITOR_CONTENT_CLASS_NAME, SANITIZE_OPTIONS } from "./constants"; import ImagePreview from "./ImagePreview"; import { highlightCode, @@ -20,6 +21,7 @@ const EditorContent = ({ content = "", variables = [], className, + size = EDITOR_SIZES.MEDIUM, ...otherProps }) => { const [imagePreviewDetails, setImagePreviewDetails] = useState(null); @@ -30,7 +32,7 @@ const EditorContent = ({ const injectCopyButtonToCodeBlocks = () => { const preTags = editorContentRef.current?.querySelectorAll( - `.${EDITOR_CONTENT_CLASSNAME} pre` + `.${EDITOR_CONTENT_CLASS_NAME} pre` ); preTags.forEach(preTag => { @@ -50,7 +52,7 @@ const EditorContent = ({ const bindImageClickListener = () => { const figureTags = editorContentRef.current?.querySelectorAll( - `.${EDITOR_CONTENT_CLASSNAME} figure` + `.${EDITOR_CONTENT_CLASS_NAME} figure` ); figureTags.forEach(figureTag => { @@ -77,8 +79,9 @@ const EditorContent = ({