React-ace: ¿Algún ejemplo de cómo admitir la finalización de código personalizado?

@andrerpena , creo que debería ser bastante fácil de hacer realidad (sin tener en cuenta la complejidad de su finalizador personalizado). Puedo esbozar un ejemplo rápido basado en algo similar que acabo de hacer y mirando documentos ace.

Para habilitar la finalización, necesitamos usar una extensión ace:

/* set up custom completer by using a ace extension */
import ace from 'brace'

/* figured out how to load the extension properly
 * by referring to ptmt's response in https://github.com/thlorenz/brace/issues/19
 */
import 'brace/ext/language_tools'
let langTools = ace.acequire('ace/ext/language_tools');

Configure el finalizador de esta manera:

/* your custom completer */
var customCompleter = {
      getCompletions: function(editor, session, pos, prefix, callback) {
           // your code
           /* for example
            * let TODO = ...;
            * callback(null, [{name: TODO, value: TODO, score: 1, meta: TODO}]);
            */
      }
 }
langTools.addCompleter(customCompleter);

Actualmente, existe un problema (# 59) relacionado con cómo deben manejarse las opciones adicionales del editor. Sin eso, creo que necesitaríamos hackearlo:

/* in some render somewhere
 * need this refs hack to set an editor option (another open issue in this repo)
 * inspired by elijahsmith's response in https://github.com/securingsincity/react-ace/issues/65
 */
<AceEditor ref="code" ...>

// with that setup, you can do something like
this.refs.code.editor.setOption('enableBasicAutocompletion', true);

Pido disculpas si algo de eso es una práctica extraña o deficiente. Recién estoy comenzando con react y comencé a usar el envoltorio react-ace alrededor de ace. Aunque, casi todo se basa en el trabajo de otros.

Algunas otras referencias / ejemplos rápidos:

• Documento ace sobre la habilitación de la finalización : también tienen un ejemplo de un completador de rimas personalizado vinculado al final del documento.
• Demostración de Ace con finalización : ctrl + espacio activa la finalización

@eemp Perdón por la respuesta tardía y muchas gracias por el ejemplo. De hecho, esto parece bastante fácil. Lo intentaré. Gracias de nuevo.

No hay necesidad de hacks, también puede pasar todos los finalizadores a través de enableBasicAutocompletion como una matriz, así:

<AceEditor
  ...
  setOptions={{
    enableBasicAutocompletion: [this.yourCustomCompleter]
  }}
/>

Agregué mi propio ompleter, pero necesito presionar ctr + espacio para mostrar la competencia. ¿Hay alguna manera de mostrar la finalización automáticamente?

@ go299 Solo tienes que habilitar la opción enableLiveAutocompletion en ace.

@fijolekProjects ¿Cómo escribir un finalizador personalizado? ¿Hay algún documento sobre esto?

@oakland No sé acerca de los documentos, pero aquí está el ejemplo de trabajo https://github.com/TouK/nussknacker/blob/v0.0.9/ui/client/components/graph/ExpressionSuggest.js#L31
Básicamente es un objeto con el método getCompletions implementado. Espero eso ayude

@fijolekProjects ¡ Muchas gracias! Lo probaré en mi proyecto.

¿Cómo activamos el autocompletado sin ctrl + espacio? ¿Qué pasa si queremos que se active automáticamente?