const [value, setValue] = React.useState('');

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorContent />
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState('<p>Start typing.</p>');

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar />
      <RichTextEditorContent />
      <RichTextEditorActionBar>
        <RichTextEditorSubmitButton>
          {({ actionProps }) => (
            <IconButton
              {...actionProps}
              aria-label="Submit"
              icon={ArrowUpIcon}
              onClick={() => {}}
              variant="accentPrimary"
            />
          )}
        </RichTextEditorSubmitButton>
      </RichTextEditorActionBar>
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState(
  '<p>Here only bold, italic, unordered list, link, and code block are enabled, with four buttons in the toolbar.</p>'
);

const editor = useRichTextEditor({
  features: [
    richTextEditorBold(),
    richTextEditorItalic(),
    richTextEditorUnorderedList(),
    richTextEditorLink(),
    richTextEditorCodeBlock(),
  ],
  onChange: setValue,
  placeholder: 'Four buttons above — type three backticks for a code block',
  value,
});

return (
  <Field
    className="w-full"
    description="Only the features passed to the hook are enabled."
    label="Notes"
    labelVisibility="hidden"
  >
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar />
      <RichTextEditorContent />
    </RichTextEditor>
  </Field>
);

const features = richTextEditorDefaultFeatures();

const [top, setTop] = React.useState('<p>Here the toolbar is placed at the top.</p>');
const [bottom, setBottom] = React.useState('<p>Here the toolbar is placed at the bottom.</p>');

const topEditor = useRichTextEditor({ features, onChange: setTop, value: top });
const bottomEditor = useRichTextEditor({ features, onChange: setBottom, value: bottom });

return (
  <Box className="flex w-full flex-col items-start gap-4">
    <Field className="w-full" label="Toolbar at the top (default)" labelVisibility="hidden">
      <RichTextEditor editor={topEditor}>
        <RichTextEditorToolbar />
        <RichTextEditorContent />
      </RichTextEditor>
    </Field>

    <Field className="w-full" label="Toolbar at the bottom" labelVisibility="hidden">
      <RichTextEditor editor={bottomEditor}>
        <RichTextEditorContent />
        <RichTextEditorActionBar>
          <RichTextEditorToolbar />
          <RichTextEditorSubmitButton>
            {({ actionProps }) => (
              <IconButton
                {...actionProps}
                aria-label="Submit"
                icon={ArrowUpIcon}
                onClick={() => {}}
                variant="accentPrimary"
              />
            )}
          </RichTextEditorSubmitButton>
        </RichTextEditorActionBar>
      </RichTextEditor>
    </Field>
  </Box>
);

const [value, setValue] = React.useState(
  '<p>Here the toolbar shows every default control plus a Quick reply button at the end.</p>'
);

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar>
        <RichTextEditorDefaultToolbarControls />
        <RichTextEditorToolbarSeparator />
        <RichTextEditorToolbarCustomIconButton
          aria-label="Quick reply"
          icon={ReplyIcon}
          onClick={() => setValue((current) => `${current}<p>Thanks, on it.</p>`)}
        />
      </RichTextEditorToolbar>
      <RichTextEditorContent />
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState(
  '<p>Here the action bar holds Save draft, Cancel, and Submit together.</p>'
);

const editor = useRichTextEditor({
  features: [richTextEditorBold(), richTextEditorItalic(), richTextEditorLink()],
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorContent />
      <RichTextEditorActionBar>
        <Button
          onClick={() => console.log('draft saved')}
          size="standard"
          variant="neutralTertiary"
        >
          Save draft
        </Button>
        <RichTextEditorCancelButton>
          {({ actionProps }) => (
            <Button {...actionProps} onClick={() => setValue('')} variant="neutralTertiary">
              Cancel
            </Button>
          )}
        </RichTextEditorCancelButton>
        <RichTextEditorSubmitButton>
          {({ actionProps }) => (
            <IconButton
              {...actionProps}
              aria-label="Submit"
              icon={ArrowUpIcon}
              onClick={() => {}}
              variant="accentPrimary"
            />
          )}
        </RichTextEditorSubmitButton>
      </RichTextEditorActionBar>
    </RichTextEditor>
  </Field>
);

const [largeValue, setLargeValue] = React.useState(
  '<p>Here this editor is large, with its toolbar above the content.</p>'
);
const [standardValue, setStandardValue] = React.useState(
  '<p>Here this editor is standard, with its toolbar above the content.</p>'
);

const largeEditor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setLargeValue,
  value: largeValue,
});

const standardEditor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setStandardValue,
  value: standardValue,
});

return (
  <Box className="flex w-full flex-col gap-4">
    <Box className="flex flex-col gap-2">
      <Heading as="h4">Large</Heading>
      <Field className="w-full" label="Notes" labelVisibility="hidden" size="large">
        <RichTextEditor editor={largeEditor} maxHeight={200}>
          <RichTextEditorToolbar />
          <RichTextEditorContent />
        </RichTextEditor>
      </Field>
    </Box>
    <Box className="flex flex-col gap-2">
      <Heading as="h4">Standard</Heading>
      <Field className="w-full" label="Notes" labelVisibility="hidden" size="standard">
        <RichTextEditor editor={standardEditor} maxHeight={200}>
          <RichTextEditorToolbar />
          <RichTextEditorContent />
        </RichTextEditor>
      </Field>
    </Box>
  </Box>
);

const [value, setValue] = React.useState(
  '<p>Here the content sits on top, with the toolbar and send action together in the bottom bar.</p>'
);
const [files, setFiles] = React.useState([]);

const editor = useRichTextEditor({
  features: [
    richTextEditorAttachments({
      attachments: files,
      onChange: setFiles,
      onRemove: (file) => setFiles((current) => current.filter((f) => f !== file)),
    }),
  ],
  onChange: setValue,
  placeholder: 'Message...',
  value,
});

return (
  <Field className="w-full" label="Message" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorContent />
      <RichTextEditorAttachments />
      <RichTextEditorActionBar>
        <RichTextEditorToolbar>
          <RichTextEditorAttachIconButton />
          <RichTextEditorToolbarCustomIconButton
            aria-label="Reply"
            icon={ReplyIcon}
            onClick={() => setValue((current) => `${current}<p>Thanks, on it.</p>`)}
          />
        </RichTextEditorToolbar>
        <RichTextEditorSubmitButton>
          {({ actionProps }) => (
            <IconButton
              {...actionProps}
              aria-label="Submit"
              icon={ArrowUpIcon}
              onClick={() => {}}
              variant="accentPrimary"
            />
          )}
        </RichTextEditorSubmitButton>
      </RichTextEditorActionBar>
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState(
  '<h1>Loaded from storage</h1><p>This content was already here, with <strong>bold</strong>, <em>italic</em> and a <a href="https://earth.anywhere.co">link</a>.</p><ul><li>First item</li><li>Second item</li></ul>'
);

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setValue,
  value,
});

return (
  <Box className="flex w-full flex-col items-start gap-4">
    <Field
      className="w-full"
      description="Edit here."
      label="Editor"
      labelVisibility="hidden"
    >
      <RichTextEditor editor={editor}>
        <RichTextEditorToolbar />
        <RichTextEditorContent />
      </RichTextEditor>
    </Field>

    <Box className="w-full">
      <Text className="text-body-10 text-tertiary">
        Read-only render — a plain div with `prose prose-rte-standard`
      </Text>
      <div
        className="prose prose-rte-standard rounded-8px border border-tertiary p-3"
        dangerouslySetInnerHTML={{ __html: value }}
      />
    </Box>

    <Box className="bg-neutral-secondary p-2 rounded-8px">
      <Text className="break-all text-body-10 text-secondary whitespace-pre-wrap">
        {value}
      </Text>
    </Box>
  </Box>
);

const [body, setBody] = React.useState(
  '<p>Here only the content shows until the editor is focused.</p>'
);
const [isExpanded, setIsExpanded] = React.useState(false);

const editor = useRichTextEditor({
  features: [
    richTextEditorBold(),
    richTextEditorItalic(),
    richTextEditorLink(),
    richTextEditorEmoji(),
  ],
  onChange: setBody,
  placeholder: 'Write a comment',
  value: body,
});

// One-way latch: nothing here watches for blur, which is what keeps the
// chrome up while the user reaches for a button.
React.useEffect(() => {
  if (editor.isFocused) setIsExpanded(true);
}, [editor.isFocused]);

return (
  <Field
    className="w-full"
    counter={{
      isAlwaysVisible: isExpanded,
      maxValue: 500,
      value: editor.textLength,
    }}
    label="Comment"
    labelVisibility="hidden"
  >
    <RichTextEditor editor={editor}>
      <RichTextEditorContent />
      {isExpanded ? (
        <RichTextEditorActionBar>
          <RichTextEditorToolbar />
          <RichTextEditorCancelButton>
            {({ actionProps }) => (
              <Button
                {...actionProps}
                onClick={() => {
                  setBody('');
                  setIsExpanded(false);
                }}
                variant="neutralTertiary"
              >
                Cancel
              </Button>
            )}
          </RichTextEditorCancelButton>
          <RichTextEditorSubmitButton>
            {({ actionProps }) => (
              <IconButton
                {...actionProps}
                aria-label="Submit"
                icon={ArrowUpIcon}
                onClick={() => editor.clear()}
                variant="accentPrimary"
              />
            )}
          </RichTextEditorSubmitButton>
        </RichTextEditorActionBar>
      ) : null}
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState(
  '<p>Toolbar above content, Submit below, counter always visible.</p>'
);
const maxLength = 80;

const editor = useRichTextEditor({
  features: [richTextEditorBold(), richTextEditorItalic(), richTextEditorLink()],
  onChange: setValue,
  placeholder: 'Type past 64 characters for the warning, past 80 for the error',
  value,
});

const isOverLimit = editor.textLength > maxLength;
const isNearLimit = !isOverLimit && editor.textLength > maxLength * 0.8;

return (
  <Field
    className="w-full"
    counter={{
      isAlwaysVisible: true,
      maxValue: maxLength,
      value: editor.textLength,
    }}
    fieldMessage={
      isOverLimit ? 'Too long' : isNearLimit ? 'Getting long' : 'Keep it short and specific.'
    }
    label="Notes"
    labelVisibility="hidden"
    status={isOverLimit ? 'error' : isNearLimit ? 'warning' : undefined}
  >
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar />
      <RichTextEditorContent />
      <RichTextEditorActionBar>
        <RichTextEditorSubmitButton>
          {({ actionProps }) => (
            <IconButton
              {...actionProps}
              aria-label="Submit"
              icon={ArrowUpIcon}
              onClick={() => {}}
              variant="accentPrimary"
            />
          )}
        </RichTextEditorSubmitButton>
      </RichTextEditorActionBar>
    </RichTextEditor>
  </Field>
);

const EMOJIS = ['😀', '🎉', '🔥', '👍', '🙏', '🚀'];

function EmojiControl() {
  const { editor } = useRichTextEditorContext();

  return (
    <DropdownMenu popoverMatchReferenceWidth={false} popoverMaxWidth={40}>
      {({ isMenuOpen, triggerProps }) => (
        <Fragment>
          <RichTextEditorToolbarCustomIconButton
            {...triggerProps}
            aria-label="Emoji"
            icon={EmojiIcon}
            isPressed={isMenuOpen}
          />
          <DropdownMenuPopover>
            <DropdownMenuList aria-label="Emoji">
              {EMOJIS.map((emoji) => (
                <DropdownMenuItem
                  key={emoji}
                  onClick={() => editor?.chain().focus().insertContent(emoji).run()}
                >
                  {emoji}
                </DropdownMenuItem>
              ))}
            </DropdownMenuList>
          </DropdownMenuPopover>
        </Fragment>
      )}
    </DropdownMenu>
  );
}

const [value, setValue] = React.useState(
  '<p>Put the caret anywhere in this sentence, then pick an emoji.</p>'
);

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar>
        <RichTextEditorDefaultToolbarControls />
        <RichTextEditorToolbarSeparator />
        <EmojiControl />
      </RichTextEditorToolbar>
      <RichTextEditorContent />
    </RichTextEditor>
  </Field>
);

const [value, setValue] = React.useState(
  '<p>Here the toolbar sits above the content, with a button below the field to toggle disabled.</p>'
);
const [isDisabled, setIsDisabled] = React.useState(false);

const editor = useRichTextEditor({
  features: richTextEditorDefaultFeatures(),
  isDisabled,
  onChange: setValue,
  value,
});

return (
  <Box className="flex w-full flex-col items-start gap-2">
    <Field className="w-full" isDisabled={isDisabled} label="Notes" labelVisibility="hidden">
      <RichTextEditor editor={editor}>
        <RichTextEditorToolbar />
        <RichTextEditorContent />
      </RichTextEditor>
    </Field>

    <Button
      onClick={() => setIsDisabled((current) => !current)}
      size="standard"
      variant="neutralSecondary"
    >
      {isDisabled ? 'Enable editor' : 'Disable editor'}
    </Button>
  </Box>
);

const [value, setValue] = React.useState(
  '<p>Use the attach button to add files.</p>'
);
const [files, setFiles] = React.useState([]);

function mockAttachmentUpload() {
  return new Promise((resolve) => setTimeout(resolve, 2000));
}

const editor = useRichTextEditor({
  features: [
    richTextEditorBold(),
    richTextEditorItalic(),
    richTextEditorAttachments({
      accept: ['image/*', '.pdf', '.csv'],
      attachments: files,
      onChange: setFiles,
      onRejected: (rejections) => console.log('rejected', rejections),
      onRemove: (file) => setFiles((current) => current.filter((f) => f !== file)),
      onUpload: mockAttachmentUpload,
    }),
  ],
  onChange: setValue,
  value,
});

return (
  <Field className="w-full" label="Notes" size="large" labelVisibility="hidden">
    <RichTextEditor editor={editor}>
      <RichTextEditorToolbar />
      <RichTextEditorContent />
      <RichTextEditorAttachments />
    </RichTextEditor>
  </Field>
);

const CustomHighlight = Mark.create({
  name: 'highlight',
  parseHTML() {
    return [{ tag: 'mark' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['mark', mergeAttributes(HTMLAttributes), 0];
  },
  addKeyboardShortcuts() {
    return {
      'Mod-Alt-h': () => this.editor.commands.toggleMark('highlight'),
    };
  },
});

function HighlightButton() {
  const { editor, isDisabled, size } = useRichTextEditorContext();
  const isPressed = useEditorState({
    editor,
    selector: (ctx) => Boolean(ctx.editor?.isActive('highlight')),
  });

  return (
    <IconButton
      aria-label="Highlight"
      icon={EditIcon}
      isDisabled={isDisabled || !editor}
      isPressed={isPressed ?? undefined}
      onClick={() => editor?.chain().focus().toggleMark('highlight').run()}
      size={size}
      variant="neutralTertiary"
    />
  );
}

const [value, setValue] = React.useState(
  '<p>Select some text, then click the button or press Mod-Alt-H.</p>'
);

const editor = useRichTextEditor({
  features: [
    ...richTextEditorDefaultFeatures(),
    { extensions: [CustomHighlight], name: 'highlight' },
  ],
  onChange: setValue,
  value,
});

return (
  <Box className="flex w-full flex-col items-start gap-2">
    <Field className="w-full" label="Notes" labelVisibility="hidden">
      <RichTextEditor editor={editor}>
        <RichTextEditorToolbar>
          <RichTextEditorDefaultToolbarControls />
          <RichTextEditorToolbarSeparator />
          <HighlightButton />
        </RichTextEditorToolbar>
        <RichTextEditorContent className="[&_mark]:rounded-4px [&_mark]:bg-caution-secondary [&_mark]:px-[4px]" />
      </RichTextEditor>
    </Field>
    <Text className="text-body-10 text-tertiary">Saved value</Text>
    <Text className="text-body-12 text-secondary block break-all">{value}</Text>
  </Box>
);