@multiprova/editor NPM

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:

Instale a ferramenta Yalc globalmente:

$ npm install -g yalc

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

"files": [
  "src"
]

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

$ cd editor
$ yalc push

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

Faça a importação do editor

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

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.