RichTextEditor

Formulário

O editor de detalhamento do Brain (Tarefas, Central de Processos e Roadmap): negrito, itálico, sublinhado, tachado, listas, checklist, marcador, cor do texto, link e menção com @. A barra aparece enquanto o campo é editado. Fica em uma entrada própria, @paytime/ui/editor, para quem não usa editor não carregar o TipTap.

Substitui no Brain:RichUpdateEditorRichUpdateEditorDinamico

Atualização com menção

"use client";

import { Button, toast } from "@paytime/ui";
import { RichTextEditor } from "@paytime/ui/editor";
import { useState } from "react";

const PEOPLE = [
  { id: "1", name: "Ana Costa", email: "ana@paytime.com.br" },
  { id: "2", name: "Bruno Lima", email: "bruno@paytime.com.br" },
  { id: "3", name: "Carla Dias", email: "carla@paytime.com.br" },
];

export default function Example() {
  const [html, setHtml] = useState("");
  return (
    <RichTextEditor
      value={html}
      onChange={({ html: next }) => setHtml(next)}
      placeholder="Escreva uma atualização e mencione outros com @"
      mentionables={PEOPLE}
      footerActions={
        <Button size="sm" onClick={() => toast.success("Atualização publicada")}>
          Publicar
        </Button>
      }
    />
  );
}

Descrição dentro do painel lateral

"use client";

import { Button, Drawer, FormField } from "@paytime/ui";
import { RichTextEditor } from "@paytime/ui/editor";
import { useState } from "react";

const PEOPLE = [
  { id: "1", name: "Ana Costa" },
  { id: "2", name: "Bruno Lima" },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const [html, setHtml] = useState("<p>Revisar as <strong>taxas do plano Expert</strong> antes da reunião.</p><ul data-type=\"taskList\"><li data-type=\"taskItem\" data-checked=\"true\"><p>Levantar taxas atuais</p></li><li data-type=\"taskItem\" data-checked=\"false\"><p>Comparar com concorrentes</p></li></ul>");
  return (
    <>
      <Button tone="neutral" variant="outline" onClick={() => setOpen(true)}>
        Abrir tarefa
      </Button>
      <Drawer open={open} onOpenChange={setOpen} title="Revisão de taxas" description="Tarefa · Comercial" size="lg">
        <FormField label="Descrição">
          <RichTextEditor value={html} onChange={({ html: next }) => setHtml(next)} mentionables={PEOPLE} toolbarAlwaysVisible minHeight={110} />
        </FormField>
      </Drawer>
    </>
  );
}