React-ace: Pregunta: Documentación sobre Autocompletar

@ Eric24 son parte de ace.js https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor

al incluir language_tools como en este ejemplo https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor , puede habilitarlos. En lo que respecta a agregar finalizadores personalizados, probablemente haya una manera de hacerlo accediendo al editor. Cuando el editor tiene la función de autocompletar activada, tiene completers disponible que puede presionar algo como el rhymecompleter en este ejemplo http://plnkr.co/edit/6MVntVmXYUbjR0DI82Cr?p=preview from ace.js

Necesitaba un editor de código html con autocompletado básico, autocompletado en vivo y sugerencia de fragmento y he logrado lograr mi objetivo de esta manera:

Paquetes utilizados

"react-ace": "^5.8.0",
"react": "^16.2.0",

Importaciones

import AceEditor from 'react-ace';
import 'brace/mode/html';
import 'brace/theme/xcode';
import 'brace/snippets/html';
import 'brace/ext/language_tools';

Hacer

<AceEditor
  mode="html"
  theme="xcode"
  name="content"
  onChange={this.onContentChange}
  showPrintMargin={true}
  showGutter={true}
  highlightActiveLine={true}
  value={form.content}
  editorProps={{$blockScrolling: Infinity}}
  setOptions={{
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    enableSnippets: true,
    showLineNumbers: true,
    tabSize: 2
  }}
/>

Producción

Creo que, para otros idiomas, siguiendo este camino, se puede lograr un resultado similar.

Espero eso ayude.

@ anindya-dhruba ¿Cómo escribir un modo personalizado? Su ejemplo muestra claramente sobre el modo de agregar que está en la llave, pero ¿qué pasa si quiero agregar el mío?

@oakland , no soy el autor de este repositorio, pero supongo que debes escribir uno tú mismo e importarlo en lugar del incorporado. No sé cómo escribir en modo personalizado. El autor @securingsincity podría ayudarlo en este caso.

Gracias.

Sigo sin encontrar documentos sobre lo que es vivo y básico.

@Obiwarn , hasta donde tengo entendido, "básico" es el modo de finalización que debe

¡Hola! Estoy tratando de activar la función de autocompletar y agregar mis propias variables personalizadas, pero tengo problemas. Estoy tratando de combinar código de estas dos fuentes:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md#how -do-i-add-language-snippets

Esto es básicamente lo que tengo hasta ahora:

Importaciones:

import AceEditor from 'react-ace';
import 'brace/mode/java';
import 'brace/theme/textmate';
import CustomMode from "./customMode.js"; //This is because I'm making my own mode, I think you can ignore it
import "brace/ext/language_tools";

Hacer:

//The text editor:
    renderWidget(args) {
        Object.assign(args, {
            ref: "aceEditor",
            mode: "java",
            fontSize: 16,
            theme: "textmate",
            showPrintMargin: false,
            showGutter: true,
            readOnly: false,
            wrapEnabled: true,
            editorProps: {$blockScrolling: true},
            setOptions: {
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 2,
                }
        });

        return <AceEditor {...args}/>;
    }

Otro:

componentDidMount() {
   const customMode = new CustomMode(); //Has to do with custom mode
   this.refs.aceEditor.editor.getSession().setMode(customMode); //Has to do with custom mode
   language_tools.addCompleter(staticWordCompleter);
}

Recibo un error de tipo: language_tools is not defined

¡Cualquier ayuda sería apreciada!

¡Hola! Estoy tratando de activar la función de autocompletar y agregar mis propias variables personalizadas, pero tengo problemas. Estoy tratando de combinar código de estas dos fuentes:
http://plnkr.co/edit/PNvznZCXwr8nJAHwhxA2?p=preview

https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md#how -do-i-add-language-snippets

Esto es básicamente lo que tengo hasta ahora:

Importaciones:

import AceEditor from 'react-ace';
import 'brace/mode/java';
import 'brace/theme/textmate';
import CustomMode from "./customMode.js"; //This is because I'm making my own mode, I think you can ignore it
import "brace/ext/language_tools";

Hacer:

//The text editor:
    renderWidget(args) {
        Object.assign(args, {
            ref: "aceEditor",
            mode: "java",
            fontSize: 16,
            theme: "textmate",
            showPrintMargin: false,
            showGutter: true,
            readOnly: false,
            wrapEnabled: true,
            editorProps: {$blockScrolling: true},
            setOptions: {
                enableBasicAutocompletion: true,
                enableLiveAutocompletion: true,
                enableSnippets: true,
                showLineNumbers: true,
                tabSize: 2,
                }
        });

        return <AceEditor {...args}/>;
    }

Otro:

componentDidMount() {
   const customMode = new CustomMode(); //Has to do with custom mode
   this.refs.aceEditor.editor.getSession().setMode(customMode); //Has to do with custom mode
   language_tools.addCompleter(staticWordCompleter);
}

Recibo un error de tipo: language_tools is not defined

¡Cualquier ayuda sería apreciada!
¡Renuncia a la plancha vieja, no es compatible con la costumbre!

@ anindya-dhruba funcionó como un encanto <3

Olvidé las herramientas del lenguaje, gracias tío

Nota del archivo Léame de react-ace:

NOTA PARA LA VERSIÓN 8! : Hemos detenido el soporte para Brace y ahora usamos Ace-builds. Lea la documentación sobre cómo migrar. Se están actualizando ejemplos.

Ejemplo con autocompletado aquí .

El siguiente método puede agregar finalización de código personalizado.

import { addCompleter } from 'ace-builds/src-noconflict/ext-language_tools';

componentDidMount() {
    addCompleter({
        getCompletions: function(editor, session, pos, prefix, callback) {
            callback(null, [
                {
                    name: 'test',
                    value: 'test',
                    caption: 'test',
                    meta: 'local',
                    score: 1000,
                },
            ]);
        },
    });
}

También puedes hacer algo como:

const customCompleter = (editor, session, pos, prefix, cb) => {
    cb(null, [...])
}

<AceEditor
    ...
    setOptions={{
        ...,
        enableBasicAutocompletion: [customCompleter],
        enableLiveAutocompletion: true
    }}
/>