Multiprova - Editor

Editor HTML do Multiprova.

Como instalar?

Para instalar o @multiprova/editor em seu projeto, instale a biblioteca como dependência via npm:

$ npm install @multiprova/editor

Como usar?

A utilização do @multiprova/editor é simplificada, basta importar em um componente e começar a usar:

import React, { Component } from 'react'
import { Editor } from '@multiprova/editor'

export default class Example extends Component {
  render() {
    return <Editor />
  }
}

O componente se apresentará da seguinte maneira:

Propriedades (Props)

O <Editor /> recebe algumas props que modificam diretamente seu comportamento:

| Nome da propriedade | Descrição | Tipo | Valor padrão | | :-----------------: | ------------------------------------------------------------------ | :-------------------------: | :----------------------------------: | | html | Elemento html usado para encapsular o texto | string | <p></p> | | rows | Número de linhas | number | 1 | | floatingToolbar | Barra de ferramentas flutuante | boolean | false | | justifyDefault | Alinhamento textual justificado | boolean | true | | spellCheck | Verificação ortográfica | boolean | true | | readOnly | Somente leitura | boolean | false | | adornment | Adorno do campo Recebe um objeto Adornment | object | { align: 'right', onEvent: false } | | placeholder | Texto de descrição do campo | string | '' | | autoFocus | Foco automático | boolean | false | | onChange | Função disparada ao alterar o valor do texto | function | () => {} | | onFocus | Função disparada quando o campo está em foco | function | () => {} | | onBlur | Função disparada quando o campo perde o foco | function | () => {} | | enabledModules | Objeto com módulos ativo e inativas para a barra de ferramentas | object | {} | | upload | Função de upload de mídia | function (file, nodeType) | false | | defaultFontSize | Tamanho padrão do texto | string | "12pt" | | dynamicValues | Conjunto de valores possíveis de uma questão | object[] | [] |

Objetos

Adornment

{
  align: 'left' | 'right',
  onEvent: false | 'hover' | 'focus' | 'blur',
  element: Elemento React
}

Como executar localmente

Para fazer modificações na biblioteca @multiprova/editor localmente siga os seguintes passos:

1. Instale a ferramenta Yalc globalmente:

$ npm install -g yalc

2. Edite o arquivo package.json do editor e adicione o seguinte atributo ao objeto:

"files": [
  "src"
]

3. Acesse o repositório do editor no terminal e execute:

$ cd editor
$ yalc push

4. Acesse no terminal o repositório que utiliza o editor como dependência e execute:

$ cd nome-repositorio
$ yalc link @multiprova/editor

5. Faça a importação do editor

import { Editor } from '@multiprova/editor/src'

6. Para compilar qualquer alteração feita no editor, execute yalc push no terminal do @multiprova/editor e o repositório que o utiliza como dependência irá compilar automaticamente. Não é preciso executar npm start no editor.

Como remover o repositório local

Para remover o repositório local das dependências, acesse o repositório que utiliza o editor como dependência e execute:

$ cd nome-repositorio
$ yalc remove @multiprova/editor
$ npm ci

ATENÇÃO: Desfaça as alterações feitas no arquivo package.json do editor e remova o '/src' do caminho da importação do editor. É importante que essas alterações não estejam em um commit para o repositório.