@luminix/react-markdown-field-plugin

Plugin para o framework Luminix que adiciona um campo de edição Markdown aos formulários.

Ao registrar o MarkdownFieldServiceProvider, o tipo "markdown" passa a ser reconhecido pelos componentes <Form> e <ModelForm>, renderizando o editor @uiw/react-md-editor com sanitização HTML integrada via rehype-sanitize.

Instalação

npm install @luminix/react-markdown-field-plugin

Dependências de pares

O plugin exige as seguintes dependências instaladas no projeto consumidor:

npm install @luminix/core @luminix/react @luminix/support \
            @uiw/react-md-editor rehype-sanitize \
            react react-dom

Uso rápido

Passe o provider na lista providers do <LuminixProvider>:

import { LuminixProvider } from '@luminix/react';
import MarkdownFieldServiceProvider from '@luminix/react-markdown-field-plugin';

export default function App() {
  return (
    <LuminixProvider
      providers={[MarkdownFieldServiceProvider]}
      routes={...}
    />
  );
}

Com o @luminix/mui-cms:

import { LuminixCms } from '@luminix/mui-cms';
import MarkdownFieldServiceProvider from '@luminix/react-markdown-field-plugin';

<LuminixCms providers={[MarkdownFieldServiceProvider]} routes={...} />

Como usar

1. Converter todos os campos de texto longo em Markdown

A forma mais simples. Chame prefersMarkdownOverTextarea() antes de montar o provider — todos os campos cujo tipo de coluna no banco seja text, tinytext, mediumtext ou longtext (que o ModelForm renderiza como textarea por padrão) passarão a usar o editor Markdown automaticamente:

import { LuminixProvider } from '@luminix/react';
import MarkdownFieldServiceProvider from '@luminix/react-markdown-field-plugin';

MarkdownFieldServiceProvider.prefersMarkdownOverTextarea();

export default function App() {
  return (
    <LuminixProvider
      providers={[MarkdownFieldServiceProvider]}
      routes={...}
    />
  );
}

Atenção: prefersMarkdownOverTextarea() afeta todos os modelos da aplicação. Chame-o uma única vez, antes da montagem do provider.

2. Habilitar Markdown em campos específicos de um modelo

Use o reducer selectDefaultInputsFor{NomeDoModelo} para alterar o tipo de campos específicos sem impactar os demais modelos. O reducer recebe o array de props gerado pelo ModelForm e permite ajustá-lo antes da renderização.

No exemplo abaixo, apenas o campo body do modelo Post é convertido para Markdown:

import { Forms } from '@luminix/react';

// Chame no boot de um ServiceProvider
Forms.reducer('selectDefaultInputsForPost', (inputs) =>
  inputs.map((input) =>
    input.name === 'body'
      ? { ...input, type: 'markdown' }
      : input
  )
);

O nome do reducer segue o padrão selectDefaultInputsFor + nome do modelo em StudlyCase (ex.: BlogPost → selectDefaultInputsForBlogPost).

Vários campos podem ser convertidos de uma vez:

const markdownFields = ['body', 'excerpt', 'notes'];

Forms.reducer('selectDefaultInputsForPost', (inputs) =>
  inputs.map((input) =>
    markdownFields.includes(input.name)
      ? { ...input, type: 'markdown' }
      : input
  )
);

3. Página de formulário customizada

Quando você já tem uma página de criação ou edição com um <Form> próprio, basta declarar type="markdown" no campo desejado — o plugin cuida do resto:

import { Form } from '@luminix/react';

function NewPostForm() {
  return (
    <Form
      action="/api/posts"
      method="post"
      initialValues={{ title: '', body: '' }}
    >
      {(data) => (
        <>
          <Form.Input name="title" type="text" />
          <Form.Input name="body" type="markdown" label="Conteúdo" />
          <button type="submit">Salvar</button>
        </>
      )}
    </Form>
  );
}

---

Desenvolvimento

# Instalar dependências
npm install

# Executar testes
npm test

# Executar testes em modo watch
npm run test:watch

# Gerar relatório de cobertura
npm run test:coverage

# Compilar o pacote
npm run build

A suite de testes usa Vitest e @testing-library/react. Os testes cobrem o ciclo de boot do MarkdownFieldServiceProvider, o comportamento de cada reducer e a renderização do componente MarkdownField.