Adds support for size prop in Editor and EditorContent components. (#…

…1250) * Added classnames based on the size prop on the editor component. * Added classnames based on the size prop on the editor content component. --------- Co-authored-by: Abhay V Ashokan <[email protected]>
bigbinary · Oct 22, 2024 · 47927f4 · 47927f4
1 parent 8422cb6
commit 47927f4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = ({
       <div
         data-cy="neeto-editor-content"
         ref={editorContentRef}
-        className={classnames(EDITOR_CONTENT_CLASSNAME, {
+        className={classnames(EDITOR_CONTENT_CLASS_NAME, {
           [className]: className,
+          [`${EDITOR_CONTENT_CLASS_NAME}--size-${size}`]: true,
         })}
         dangerouslySetInnerHTML={{
           __html: sanitize(htmlContent, SANITIZE_OPTIONS),

diff --git a/types.d.ts b/types.d.ts
@@ -128,6 +128,7 @@ interface EditorProps {
   openImageInNewTab?: boolean;
   openLinkInNewTab?: boolean;
   enableReactNodeViewOptimization?: boolean;
+  size?: "large" | "medium";
   [otherProps: string]: any;
 }
 
@@ -158,6 +159,7 @@ export function EditorContent(props: {
   content?: string;
   className?: string;
   variables?: (VariableCategory | Variable)[];
+  size?: "large" | "medium";
   [otherProps: string]: any;
 }): JSX.Element;
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,3 +61,5 @@ export const COMBINED_REGEX = new RegExp( @@
       ]).join("|"),
       "g"
     );
+    export const EDITOR_SIZES = { MEDIUM: "medium", LARGE: "large" };