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 add @multiprova/editor
$ yalc link @multiprova/editor
$ npm install

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 install

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.