RichTextEditor

const FILLED_HTML =
  '<h2 class="m-0 text-heading-h3">Open enrollment starts on 1 November</h2><p class="m-0 mt-3">This year you can choose between two health plans and add family members until 30 November. Read the benefits guide before you pick a plan.</p><ul class="m-0 mt-3 list-disc ps-6"><li>Compare the Standard and Plus plans</li><li>Add your spouse or children</li><li>Submit before 30 November</li></ul>';

export function Filled() {
  return <RichTextEditorDemo initialHtml={FILLED_HTML} />;
}

import { RTETool, RTEToolbar, RTEToolbarDivider, RichTextEditor } from "@nexera-ui/react";
import { LuBold, LuItalic, LuList } from "react-icons/lu";

const PLACEHOLDER = "Write your announcement. Type / for blocks, @ to mention.";

const FILLED_HTML =
  '<h2 class="m-0 text-heading-h3">Open enrollment starts on 1 November</h2><p class="m-0 mt-3">This year you can choose between two health plans and add family members until 30 November. Read the benefits guide before you pick a plan.</p><ul class="m-0 mt-3 list-disc ps-6"><li>Compare the Standard and Plus plans</li><li>Add your spouse or children</li><li>Submit before 30 November</li></ul>';

function SimpleToolbar() {
  return (
    <RTEToolbar aria-label="Formatting">
      <RTETool aria-label="Bold" icon={<LuBold />} />
      <RTETool aria-label="Italic" icon={<LuItalic />} />
      <RTEToolbarDivider />
      <RTETool aria-label="Bullet list" icon={<LuList />} />
    </RTEToolbar>
  );
}

export function ErrorAndDisabled() {
  return (
    <div className="flex max-w-[55rem] flex-col gap-8">
      <RichTextEditor
        label="Announcement"
        description="Sent to all 128 employees by email and in the app."
        errorMessage="Add a message before publishing."
        isInvalid
        counter="0 / 5,000"
        placeholder={PLACEHOLDER}
        toolbar={<SimpleToolbar />}
      >
        {({ contentProps }) => (
          <div {...contentProps} contentEditable suppressContentEditableWarning />
        )}
      </RichTextEditor>
      <RichTextEditor
        label="Announcement"
        description="Sent to all 128 employees by email and in the app."
        counter="312 / 5,000"
        content="filled"
        isDisabled
        toolbar={<SimpleToolbar />}
      >
        {({ contentProps, isDisabled }) => (
          <div
            {...contentProps}
            contentEditable={!isDisabled}
            suppressContentEditableWarning
            dangerouslySetInnerHTML={{ __html: FILLED_HTML }}
          />
        )}
      </RichTextEditor>
    </div>
  );
}

import { RTETool, RTEToolbar, RTEToolbarDivider, RichTextEditor } from "@nexera-ui/react";
import { LuBold, LuItalic, LuList } from "react-icons/lu";

export function LongLabelRightToLeft() {
  return (
    <RichTextEditor
      className="max-w-[55rem]"
      label="إعلان لجميع الموظفين في جميع المكاتب، يُترجم إلى كل اللغات المدعومة قبل النشر"
      description="يُرسل إلى جميع الموظفين البالغ عددهم 128 عبر البريد الإلكتروني وفي التطبيق."
      counter="0 / 5,000"
      placeholder="اكتب إعلانك هنا."
      toolbar={
        <RTEToolbar aria-label="التنسيق">
          <RTETool aria-label="غامق" icon={<LuBold />} />
          <RTETool aria-label="مائل" icon={<LuItalic />} />
          <RTEToolbarDivider />
          <RTETool aria-label="قائمة نقطية" icon={<LuList />} />
        </RTEToolbar>
      }
    >
      {({ contentProps }) => (
        <div {...contentProps} contentEditable suppressContentEditableWarning />
      )}
    </RichTextEditor>
  );
}