Vivace Editor Snippets

Snippets para usar vivace-editor em componentes React JSX e TSX. Esta extensão insere exemplos de código; o pacote npm deve ser instalado separadamente no projeto.

Configure o Verdaccio no .npmrc do projeto e instale a biblioteca:

registry=http://10.0.10.229/

yarn add vivace-editor@1.0.0

Em um arquivo .jsx ou .tsx, digite um dos prefixos abaixo e escolha o snippet na lista de sugestões. Ajuste os textos, ids e dados de exemplo ao seu projeto. Use Tab para pular entre os campos editáveis de cada snippet.

Importação

Prefixo	Insere
`vivace-import`	`import RichEditor, { DocumentFormat, EMPTY_DOCUMENT_STATS, RichEditUnit } from 'vivace-editor'`
`vivace-import-spellcheck`	`import { createWorkerSpellChecker } from 'vivace-editor/spellcheck'`

Padrões de uso

Prefixo	Insere
`vivace-editor`	Editor básico com `ref` e callbacks de carregamento.
`vivace-editor-full`	Editor com estado para documento, modo de leitura, zoom, régua, página, tema e estatísticas.
`vivace-ribbon`	Aba de ribbon personalizada com botões, grupo com toggle e `onRibbonCommand`.
`vivace-ribbon-item`	Um item simples para o array `ribbon.items`.
`vivace-ribbon-item-toggle`	Item de ribbon com estado (`selected`/`toggle`).
`vivace-autotexto`	Auto texto (expansão de atalhos) e sugestões de autocomplete com Tab.
`vivace-spellcheck`	Verificador ortográfico offline via worker, com dicionário por idioma.
`vivace-header`	Estado e uso da prop `header`.
`vivace-footer`	Estado e uso da prop `footer`.
`vivace-document`	Estado do documento e abertura a partir de um `File`/`Blob`/string.
`vivace-mergefield`	Modelo com campo de mala direta (`MERGEFIELD`) e geração do documento mesclado via API nativa (`ref.current.getEditor()`).
`vivace-stats`	Estado das estatísticas do documento via `onStatsChange`.

Métodos do `ref`

Todos os métodos expostos por useImperativeHandle no componente.

Prefixo	Insere
`vivace-ref-download`	`editorRef.current?.download(format, name)`
`vivace-ref-download-pdf`	`editorRef.current?.downloadPdf(name)`
`vivace-ref-print`	`editorRef.current?.print()`
`vivace-ref-focus`	`editorRef.current?.focus()`
`vivace-ref-insert-text`	`editorRef.current?.insertText(text)`
`vivace-ref-insert-image`	`await editorRef.current?.insertImage(source, options)`
`vivace-ref-load-document`	`editorRef.current?.loadDocument(source)`
`vivace-ref-new-document`	`editorRef.current?.newDocument()`
`vivace-ref-replace-all`	`editorRef.current?.replaceAll(search, replacement)`
`vivace-ref-set-header`	`editorRef.current?.setHeader(band)`
`vivace-ref-set-footer`	`editorRef.current?.setFooter(band)`
`vivace-ref-go-header`	`editorRef.current?.goToHeader()`
`vivace-ref-go-footer`	`editorRef.current?.goToFooter()`
`vivace-ref-get-stats`	`editorRef.current?.getStats()`
`vivace-ref-get-editor`	`editorRef.current?.getEditor()` — escape hatch para a API nativa do DevExpress RichEdit.

Props do `<RichEditor>`

Um snippet por prop, para inserir rapidamente dentro de um <RichEditor ... /> já existente.

Prefixo	Prop
`vivace-prop-auto-complete`	`autoComplete`
`vivace-prop-auto-text`	`autoText`
`vivace-prop-class-name`	`className`
`vivace-prop-document`	`document`
`vivace-prop-document-name`	`documentName`
`vivace-prop-footer`	`footer`
`vivace-prop-full-screen`	`fullScreen`
`vivace-prop-header`	`header`
`vivace-prop-host-style`	`hostStyle`
`vivace-prop-localization`	`localization`
`vivace-prop-on-dictionary-loading-change`	`onDictionaryLoadingChange`
`vivace-prop-on-document-loaded`	`onDocumentLoaded`
`vivace-prop-on-focus`	`onFocus`
`vivace-prop-on-ready`	`onReady`
`vivace-prop-on-ribbon-command`	`onRibbonCommand`
`vivace-prop-on-ruler-change`	`onRulerChange`
`vivace-prop-on-stats-change`	`onStatsChange`
`vivace-prop-on-view-type-change`	`onViewTypeChange`
`vivace-prop-on-zoom-change`	`onZoomChange`
`vivace-prop-read-only`	`readOnly`
`vivace-prop-ribbon`	`ribbon`
`vivace-prop-show-ruler`	`showRuler`
`vivace-prop-spell-check`	`spellCheck`
`vivace-prop-theme`	`theme`
`vivace-prop-unit`	`unit`
`vivace-prop-view-type`	`viewType`
`vivace-prop-zoom`	`zoom`

O componente exporta uma aba personalizada por instância. Para recursos da API nativa do DevExpress, como MERGEFIELD, os snippets usam ref.current.getEditor().

Vivace Editor Snippets