@julseb-lib/react 0.0.85 → 0.0.86

package/dist/lib/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,6 +1,4 @@
-/*=============================================== MarkdownEditor component ===============================================*/
-
-import { forwardRef, useState, useRef, useCallback } from "react"
+import { useState, useRef, useCallback, type FC } from "react"
 import { Flexbox, markdownEditorOptions } from "../../"
 import { appendStyles } from "../../lib-utils"
 import { EditorButtons } from "./MdEditorButtons/EditorButtons"
@@ -13,82 +11,92 @@ import { MdEditorContainer, ButtonsContainer } from "./styles"
 import type { ILibMarkdownEditor } from "./types"
 
 /**
- * @description Returns a MarkdownEditor component
- * @link https://documentation-components-react.vercel.app/components/markdown-editor
+ * MarkdownEditor component for editing Markdown content with live preview, formatting buttons, and flexible configuration.
+ *
+ * @component
  * @extends HTMLTextAreaElement
- * @prop data-testid?: string
- * @prop ref?: ForwardedRef<HTMLTextAreaElement>
- * @prop value: string
- * @prop setValue: Dispatch<SetStateAction<string>>
- * @prop defaultEditor?: "editorCode" | "editorLive" | "editorPreview"
- * @prop textButtonTitles?: string
- * @prop showButtons?: LibMarkdownEditorOptions
- * @prop icons?: { bold?: string | JSX.Element; italic?: string | JSX.Element; strikethrough?: string | JSX.Element; ul?: string | JSX.Element; ol?: string | JSX.Element; link?: string | JSX.Element; quote?: string | JSX.Element; hr?: string | JSX.Element; code?: string | JSX.Element; codeBlock?: string | JSX.Element; comment?: string | JSX.Element; image?: string | JSX.Element; editorCode?: string | JSX.Element; editorLive?: string | JSX.Element; editorPreview?: string | JSX.Element }
- * @prop iconsSizes?: { bold?: number; italic?: number; strikethrough?: number; ul?: number; ol?: number; link?: number; quote?: number; hr?: number; code?: number; codeBlock?: number; comment?: number; image?: number; editorCode?: number; editorLive?: number; editorPreview?: number }
- * @prop id?: string
- * @prop label?: string
- * @prop labelComment?: string
- * @prop helper?: string
- * @prop helperBottom?: string | { text: string => only if element is not defined; element: ReactChildren => only if text is not defined; textColor?: Any color from the library; fontStyle?: CssFontStyle; icon?: string | JSX.Element; iconColor?: Any color from the library; iconSize?: number }
- * @prop validation?: { status: LibValidationStatus; message?: string; iconNotPassed?: LibIcon; iconNotPassedSize?: number; iconPassed?: LibIcon; iconPassedSize?: number; iconBaseUrl?: string }
- * @prop iconBaseUrl?: string
- * @prop inputBackground?: "light" | "dark"
- * @prop containerStyle?: CSSProperties
+ * @param {Object} props - MarkdownEditor props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ *  * @param {Ref<HTMLTextAreaElement>} [props.ref] - Ref forwarded to the textarea element.
+ * @param {string} props.value - Current Markdown value.
+ *  * @param {Dispatch<React.SetStateAction<string>>} props.setValue - Setter for the Markdown value.
+ * @param {"editorCode" | "editorLive" | "editorPreview"} [props.defaultEditor="editorLive"] - Default editor mode.
+ * @param {string} [props.textButtonTitles="Titles"] - Text for the titles button.
+ * @param {LibMarkdownEditorOptions} [props.showButtons] - Show/hide formatting buttons.
+ * @param {Object} [props.icons] - Custom icons for formatting and editor buttons.
+ * @param {Object} [props.iconsSizes] - Icon sizes for formatting and editor buttons.
+ * @param {string} [props.id] - Input id.
+ * @param {string} [props.label] - Label for the editor.
+ * @param {string} [props.labelComment] - Additional comment for the label.
+ * @param {string} [props.helper] - Helper text above the editor.
+ * @param {string|Object} [props.helperBottom] - Helper text or element below the editor.
+ * @param {Object} [props.validation] - Validation status and message.
+ * @param {string} [props.iconBaseUrl] - Base URL for icons.
+ * @param {"light" | "dark"} [props.inputBackground] - Input background style.
+ *  * @param {CSSProperties} [props.containerStyle] - Style for the input container.
+ * @param {boolean} [props.counter] - Show character counter.
+ * @param {number} [props.maxLength] - Maximum length for the input value.
+ * @param {string} [props.className] - Additional class names.
+ * @param {any} [props.rest] - Additional props passed to the editor.
+ * @returns {JSX.Element} The rendered MarkdownEditor component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/markdown-editor
+ * @example
+ * <MarkdownEditor
+ *   value={markdown}
+ *   setValue={setMarkdown}
+ *   label="Description"
+ *   helper="Supports Markdown formatting"
+ * />
  */
-export const MarkdownEditor = forwardRef<
-    HTMLTextAreaElement,
-    ILibMarkdownEditor
->(
-    (
-        {
-            "data-testid": testid,
-            value,
-            setValue,
-            id,
-            inputBackground,
-            showButtons = markdownEditorOptions,
-            icons,
-            iconsSizes,
-            iconBaseUrl,
-            defaultEditor = "editorLive",
-            className,
-            label,
-            labelComment,
-            helper,
-            helperBottom,
-            validation,
-            counter,
-            maxLength,
-            textButtonTitles = "Titles",
-            containerStyle,
-            ...rest
-        },
-        ref
-    ) => {
-        const [editor, setEditor] = useState<LibMdEditorEditor>(defaultEditor)
-        const [height, setHeight] = useState(250)
+export const MarkdownEditor: FC<ILibMarkdownEditor> = ({
+    "data-testid": testid,
+    ref,
+    value,
+    setValue,
+    id,
+    inputBackground,
+    showButtons = markdownEditorOptions,
+    icons,
+    iconsSizes,
+    iconBaseUrl,
+    defaultEditor = "editorLive",
+    className,
+    label,
+    labelComment,
+    helper,
+    helperBottom,
+    validation,
+    counter,
+    maxLength,
+    textButtonTitles = "Titles",
+    containerStyle,
+    ...rest
+}) => {
+    const [editor, setEditor] = useState<LibMdEditorEditor>(defaultEditor)
+    const [height, setHeight] = useState(250)
 
-        const inputRef = useRef<HTMLTextAreaElement>(null)
+    const inputRef = useRef<HTMLTextAreaElement>(null)
 
-        const addCode = useCallback(
-            (code: string) => {
-                const newValue = `${value}${code}`
-                setValue(newValue)
-                inputRef?.current?.focus()
-            },
-            [value, setValue, inputRef]
-        )
+    const addCode = useCallback(
+        (code: string) => {
+            const newValue = `${value}${code}`
+            setValue(newValue)
+            inputRef?.current?.focus()
+        },
+        [value, setValue, inputRef]
+    )
 
-        const hasContainer: boolean = !!(
-            label ||
-            labelComment ||
-            helper ||
-            helperBottom ||
-            validation ||
-            counter
-        )
+    const hasContainer: boolean = !!(
+        label ||
+        labelComment ||
+        helper ||
+        helperBottom ||
+        validation ||
+        counter
+    )
 
-        appendStyles(`
+    appendStyles(`
             :root {
                 --markdown-editor-grid: ${
                     editor === "editorLive" ? "1fr 2px 1fr" : 1
@@ -97,100 +105,96 @@ export const MarkdownEditor = forwardRef<
             }
         `)
 
-        return (
-            <InputContainer
-                data-testid={testid}
-                className={className}
-                label={label}
-                labelComment={labelComment}
-                helper={helper}
-                helperBottom={helperBottom}
-                validation={validation}
-                counter={counter}
-                maxLength={maxLength}
-                id={id}
-                value={value}
-                style={containerStyle}
-                hasListOpen={undefined}
-                iconBaseUrl={undefined}
+    return (
+        <InputContainer
+            data-testid={testid}
+            className={className}
+            label={label}
+            labelComment={labelComment}
+            helper={helper}
+            helperBottom={helperBottom}
+            validation={validation}
+            counter={counter}
+            maxLength={maxLength}
+            id={id}
+            value={value}
+            style={containerStyle}
+            hasListOpen={undefined}
+            iconBaseUrl={undefined}
+        >
+            <MdEditorContainer
+                data-testid={
+                    testid && hasContainer
+                        ? `${testid}.EditorContainer`
+                        : testid
+                }
+                className={
+                    className && hasContainer ? "EditorContainer" : className
+                }
+                $backgroundColor={inputBackground}
+                $validationStatus={validation?.status}
             >
-                <MdEditorContainer
+                <ButtonsContainer
                     data-testid={
-                        testid && hasContainer
-                            ? `${testid}.EditorContainer`
-                            : testid
+                        testid && `${testid}.EditorContainer.ButtonsContainer`
                     }
-                    className={
-                        className && hasContainer
-                            ? "EditorContainer"
-                            : className
-                    }
-                    $backgroundColor={inputBackground}
-                    $validationStatus={validation?.status}
+                    className={className && "ButtonsContainer"}
                 >
-                    <ButtonsContainer
+                    <Flexbox
                         data-testid={
                             testid &&
-                            `${testid}.EditorContainer.ButtonsContainer`
+                            `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer`
                         }
-                        className={className && "ButtonsContainer"}
+                        className={className && "ActionButtonsContainer"}
+                        gap="xs"
+                        alignItems="center"
                     >
-                        <Flexbox
-                            data-testid={
-                                testid &&
-                                `${testid}.EditorContainer.ButtonsContainer.ActionButtonsContainer`
-                            }
-                            className={className && "ActionButtonsContainer"}
-                            gap="xs"
-                            alignItems="center"
-                        >
-                            <EditorButtonTitles
-                                data-testid={testid}
-                                showButtons={showButtons}
-                                className={className}
-                                textButtonTitles={textButtonTitles}
-                                inputRef={inputRef}
-                                addCode={addCode}
-                            />
-
-                            <MarkdownButtons
-                                data-testid={testid}
-                                className={className}
-                                showButtons={showButtons}
-                                icons={icons}
-                                iconsSizes={iconsSizes}
-                                iconsBaseUrl={iconBaseUrl}
-                                addCode={addCode}
-                            />
-                        </Flexbox>
+                        <EditorButtonTitles
+                            data-testid={testid}
+                            showButtons={showButtons}
+                            className={className}
+                            textButtonTitles={textButtonTitles}
+                            inputRef={inputRef}
+                            addCode={addCode}
+                        />
 
-                        <EditorButtons
+                        <MarkdownButtons
                             data-testid={testid}
                             className={className}
                             showButtons={showButtons}
-                            editor={editor}
-                            setEditor={setEditor}
                             icons={icons}
                             iconsSizes={iconsSizes}
                             iconsBaseUrl={iconBaseUrl}
+                            addCode={addCode}
                         />
-                    </ButtonsContainer>
+                    </Flexbox>
 
-                    <MdEditorInput
+                    <EditorButtons
                         data-testid={testid}
-                        ref={ref}
                         className={className}
+                        showButtons={showButtons}
                         editor={editor}
-                        setHeight={setHeight}
-                        inputRef={inputRef}
-                        setValue={setValue}
-                        id={id}
-                        value={value}
-                        maxLength={maxLength}
-                        {...rest}
+                        setEditor={setEditor}
+                        icons={icons}
+                        iconsSizes={iconsSizes}
+                        iconsBaseUrl={iconBaseUrl}
                     />
-                </MdEditorContainer>
-            </InputContainer>
-        )
-    }
-)
+                </ButtonsContainer>
+
+                <MdEditorInput
+                    data-testid={testid}
+                    ref={ref}
+                    className={className}
+                    editor={editor}
+                    setHeight={setHeight}
+                    inputRef={inputRef}
+                    setValue={setValue}
+                    id={id}
+                    value={value}
+                    maxLength={maxLength}
+                    {...rest}
+                />
+            </MdEditorContainer>
+        </InputContainer>
+    )
+}

package/dist/lib/components/MarkdownEditor/MdEditorButtons/EditorButtonTitles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== EditorButtonTitles component ===============================================*/
-
 import { useState } from "react"
 import { Button, DropdownContainer } from "../../../"
 import { mdTitlesButtons } from "../markdown-buttons"

package/dist/lib/components/MarkdownEditor/MdEditorButtons/EditorButtons.tsx

@@ -1,5 +1,3 @@
-/*=============================================== EditorButtons component ===============================================*/
-
 import classNames from "classnames"
 import { uuid, toSentenceCase } from "@julseb-lib/utils"
 import { Flexbox } from "../../../"

package/dist/lib/components/MarkdownEditor/MdEditorButtons/MarkdownButtons.tsx

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownButtons component ===============================================*/
-
 import { uuid, toSentenceCase } from "@julseb-lib/utils"
 import { roundIconSize } from "../../../lib-utils"
 import { mdButtons } from "../markdown-buttons"

package/dist/lib/components/MarkdownEditor/MdEditorInput.tsx

@@ -1,6 +1,4 @@
-/*=============================================== MdEditorInput ===============================================*/
-
-import { forwardRef, useCallback, type ChangeEvent } from "react"
+import { useCallback, type ChangeEvent, type FC } from "react"
 import classNames from "classnames"
 import { useMergeRefs, optionsMarkdown } from "../../"
 import {
@@ -11,88 +9,80 @@ import {
 } from "./styles"
 import type { ILibMdEditorInput } from "./subtypes"
 
-export const MdEditorInput = forwardRef<HTMLTextAreaElement, ILibMdEditorInput>(
-    (
-        {
-            "data-testid": testid,
-            className,
-            editor,
-            setValue,
-            setHeight,
-            inputRef,
-            id,
-            value,
-            maxLength,
-            ...rest
-        },
-        ref
-    ) => {
-        const handleChange = useCallback(
-            (e: ChangeEvent<HTMLTextAreaElement>) => {
-                setValue(e.target.value)
-                setHeight(e.target.scrollHeight)
+export const MdEditorInput: FC<ILibMdEditorInput> = ({
+    "data-testid": testid,
+    ref,
+    className,
+    editor,
+    setValue,
+    setHeight,
+    inputRef,
+    id,
+    value,
+    maxLength,
+    ...rest
+}) => {
+    const handleChange = useCallback(
+        (e: ChangeEvent<HTMLTextAreaElement>) => {
+            setValue(e.target.value)
+            setHeight(e.target.scrollHeight)
 
-                if (!e.target.value.length) setHeight(250)
-            },
-            [setValue, setHeight]
-        )
+            if (!e.target.value.length) setHeight(250)
+        },
+        [setValue, setHeight]
+    )
 
-        return (
-            <ContainerGrid
+    return (
+        <ContainerGrid
+            data-testid={testid && `${testid}.EditorContainer.ContainerGrid`}
+            className={className && "ContainerGrid"}
+        >
+            <StyledMarkdownEditor
                 data-testid={
-                    testid && `${testid}.EditorContainer.ContainerGrid`
+                    testid && `${testid}.EditorContainer.ContainerGrid.Textarea`
                 }
-                className={className && "ContainerGrid"}
-            >
-                <StyledMarkdownEditor
-                    data-testid={
-                        testid &&
-                        `${testid}.EditorContainer.ContainerGrid.Textarea`
+                className={classNames(
+                    { Textarea: className },
+                    {
+                        Visible:
+                            editor === "editorCode" || editor === "editorLive",
                     }
-                    className={classNames(
-                        { Textarea: className },
-                        {
-                            Visible:
-                                editor === "editorCode" ||
-                                editor === "editorLive",
-                        }
-                    )}
-                    ref={useMergeRefs([ref, inputRef])}
-                    id={id}
-                    value={value}
-                    onChange={handleChange}
-                    maxLength={maxLength}
-                    {...rest}
-                />
-
-                {editor === "editorLive" && (
-                    <Separator
-                        data-testid={
-                            testid &&
-                            `${testid}.EditorContainer.ContainerGrid.Separator`
-                        }
-                        className={className && "Separator"}
-                    />
                 )}
+                ref={useMergeRefs([ref, inputRef])}
+                id={id}
+                value={value}
+                onChange={handleChange}
+                maxLength={maxLength}
+                {...rest}
+            />
 
-                <MarkdownContainer
+            {editor === "editorLive" && (
+                <Separator
                     data-testid={
                         testid &&
-                        `${testid}.EditorContainer.ContainerGrid.MarkdownContent`
+                        `${testid}.EditorContainer.ContainerGrid.Separator`
                     }
-                    className={classNames(
-                        { MarkdownContent: className },
-                        {
-                            Visible:
-                                editor === "editorPreview" ||
-                                editor === "editorLive",
-                        }
-                    )}
-                    options={optionsMarkdown as any}
-                >
-                    {value}
-                </MarkdownContainer>
-            </ContainerGrid>
-        )
-    }
-)
+                    className={className && "Separator"}
+                />
+            )}
+
+            <MarkdownContainer
+                data-testid={
+                    testid &&
+                    `${testid}.EditorContainer.ContainerGrid.MarkdownContent`
+                }
+                className={classNames(
+                    { MarkdownContent: className },
+                    {
+                        Visible:
+                            editor === "editorPreview" ||
+                            editor === "editorLive",
+                    }
+                )}
+                options={optionsMarkdown as any}
+            >
+                {value}
+            </MarkdownContainer>
+        </ContainerGrid>
+    )
+}

package/dist/lib/components/MarkdownEditor/index.ts

@@ -1,3 +1 @@
-/*=============================================== MarkdownEditor exports ===============================================*/
-
 export * from "./MarkdownEditor"

package/dist/lib/components/MarkdownEditor/markdown-buttons.tsx

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownEditor buttons ===============================================*/
-
 import { roundIconSize } from "../../lib-utils"
 import {
     Bold,

package/dist/lib/components/MarkdownEditor/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownEditor styles ===============================================*/
-
 import styled, { css } from "styled-components"
 import Markdown from "markdown-to-jsx"
 import {
@@ -85,6 +83,7 @@ const StyledMarkdownEditor = styled.textarea`
     height: var(--markdown-input-height, 250px);
     min-height: 250px;
     color: currentColor;
+    ${Mixins.HideScrollbar};
 
     &.Visible {
         display: block;
@@ -156,6 +155,7 @@ const MarkdownContainer = styled(Markdown)`
     padding: ${SPACERS.XS};
     overflow-y: scroll;
     color: currentColor;
+    ${Mixins.HideScrollbar};
 
     &.Visible {
         display: flex;

package/dist/lib/components/MarkdownEditor/subtypes.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
-/*=============================================== MarkdownEditor sub components types ===============================================*/
 
-import type { RefObject } from "react"
+import type { Ref } from "react"
 import type { LibMdEditorEditor, DispatchState } from "../../types"
 import type { ILibMarkdownEditor } from "./types"
 
@@ -10,7 +9,7 @@ import type { ILibMarkdownEditor } from "./types"
 export interface ILibMdEditorInput extends ILibMarkdownEditor {
     editor: LibMdEditorEditor
     setHeight: DispatchState<number>
-    inputRef: RefObject<HTMLTextAreaElement>
+    inputRef: Ref<HTMLTextAreaElement>
 }
 
 export interface ILibMdEditorButtons
@@ -32,7 +31,7 @@ export interface ILibMarkdownEditorTitles
         ILibMarkdownEditor,
         "data-testid" | "showButtons" | "className" | "textButtonTitles"
     > {
-    inputRef: RefObject<HTMLTextAreaElement>
+    inputRef: Ref<HTMLTextAreaElement>
     addCode: (code: string) => void
 }
 

package/dist/lib/components/MarkdownEditor/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== MarkdownEditor types ===============================================*/
-
 import type { TextareaHTMLAttributes } from "react"
 import type {
     LibComponentBase,