Rich Text Input

"use client";

import React, {useState} from "react";
import {RichTextInput, RichText} from "@brynlabs/fusion-ui";

export const BasicUsageExample = () => {
  const [value, setValue] = useState<RichText | null>(null);

  return (
    <RichTextInput
      label="Description"
      placeholder="Enter your description here..."
      value={value}
      onChange={setValue}
      hint="This is a rich text editor powered by Lexical"
    />
  );
};

"use client";

import React, {useState} from "react";
import {RichTextInput, RichText, FormSpacing} from "@brynlabs/fusion-ui";

export const ValidationExample = () => {
  const [requiredValue, setRequiredValue] = useState<RichText | null>(null);
  const [invalidValue, setInvalidValue] = useState<RichText | null>(null);

  return (
    <FormSpacing>
      <RichTextInput
        label="Required Field"
        placeholder="This field is required"
        value={requiredValue}
        onChange={setRequiredValue}
        required={true}
      />
      <RichTextInput
        label="Invalid Field"
        placeholder="This field has an error"
        value={invalidValue}
        onChange={setInvalidValue}
        invalid={true}
        errorMessage="This field is required"
      />
    </FormSpacing>
  );
};

"use client";

import React, {useState} from "react";
import {RichText, RichTextInput} from "@brynlabs/fusion-ui";

export const DisabledExample = () => {
  const [value, setValue] = useState<RichText | null>(null);

  return (
    <RichTextInput
      label="Disabled Example"
      placeholder="Enter your description here..."
      value={value}
      onChange={setValue}
      disabled={true}
      hint="This is a rich text editor powered by Lexical"
    />
  );
};