@nitromarketingdigital/editor

SDK para embarcar o Nitro Editor no seu produto. Ele cria o iframe, injeta a sessão e expõe uma API JS sobre postMessage — o mesmo padrão do Unlayer.

O editor roda isolado num iframe: nada do que você passa entra na página do editor por outro caminho além deste SDK, e nada do que o editor produz sai por outro. A configuração não vai na URL — o documento é grande demais para uma query string e o token não deve ficar no histórico do navegador.

Instalação

npm install @nitromarketingdigital/editor

Ou, sem build, com uma tag <script> (expõe o global NitroEditor):

<script src="https://unpkg.com/@nitromarketingdigital/editor"></script>

Uso

import { init } from '@nitromarketingdigital/editor'

const editor = init({
  container: '#editor',
  url: 'https://editor.nitro.news',
  projectId: 'prj_123',
  contentType: 'webpage',

  // Documento a abrir (opcional — ausente, começa em branco).
  document: undefined,

  // Callbacks do ciclo de vida.
  onReady: () => console.log('editor pronto'),
  onSave: doc => persist(doc),
  onExport: html => publish(html),
  onError: msg => console.error(msg),
})

// A API devolvida conversa com o editor:
editor.save() // pede o documento; a resposta chega em onSave
editor.export() // pede o HTML publicável; chega em onExport
editor.destroy() // tira o editor da página e para de ouvir

Com a tag <script>, é o mesmo código sob o global NitroEditor:

<script>
  NitroEditor.init({ container: '#editor', url: 'https://editor.nitro.news', projectId: 'prj_123', contentType: 'webpage' })
</script>

Arquivos do tenant

O acervo de imagens é seu. Declarando os callbacks abaixo, o browser do usuário fala direto com a sua API — sem a nossa no meio, sem guardarmos credencial de storage alheio. Dois modos, escolhidos pelo que você declara:

• onSelectImage — você já tem a própria tela de arquivos. O editor pede uma imagem e recebe a escolhida; não desenha biblioteca nenhuma.
• onListAssets (+ onUploadAsset, onDeleteAsset) — a tela é a do editor, o acervo é seu.

init({
  container: '#editor',
  url: 'https://editor.nitro.news',
  projectId: 'prj_123',
  contentType: 'webpage',
  onSelectImage: async () => ({ url: 'https://cdn.exemplo.com/foto.jpg' }),
})

Nada declarado, o editor usa o próprio storage (se apiBaseUrl e a sessão vierem).

Identidade do usuário

Para o editor saber quem edita, passe user com uma assinatura HMAC-SHA256 do id feita no seu backend com o segredo do projeto — pôr o segredo na página seria entregá-lo a qualquer visitante:

init({
  // …
  user: { id: 'user_42', signature: '<hmac-sha256 do id, no backend>' },
})

API

| Opção | Tipo | | | --- | --- | --- | | container | HTMLElement \| string | Onde o iframe é criado. Obrigatório. | | url | string | URL em que o editor está publicado. Obrigatório. | | projectId | string | Projeto que este editor abre. Obrigatório. É público. | | contentType | 'webpage' | Tipo de conteúdo. Obrigatório. | | document | unknown | Documento a abrir. Ausente, começa em branco. | | apiBaseUrl | string | Origem da API do Nitro Editor. | | user | { id, signature } | Quem está editando (assinatura no backend). | | loader | string \| HTMLElement \| false | Camada sobre o container até o editor subir. false desliga. | | onReady | () => void | O editor subiu e abriu o documento. | | onSave | (document) => void | O documento editado. | | onExport | (html) => void | O HTML publicável. | | onError | (message) => void | Falha. | | onSelectImage / onListAssets / onUploadAsset / onDeleteAsset | callbacks | Arquivos do tenant (ver acima). |

init(options) devolve um EditorHandle com save(), export() e destroy().

Licença

Apache-2.0 © Nitro Marketing Digital