thlorenz / brace

📔 browserify compatible version of the ace editor.
http://thlorenz.github.io/brace/
MIT License
1.06k stars 304 forks source link

Problem with multiple instances of brace editor #108

Open ArthurMenezes opened 6 years ago

ArthurMenezes commented 6 years ago

I'm working with brace in html tabs. When I create a new tab, the instance of the old tab becomes disabled, and is not setReadOnly. What's the problem?

JS code ` import {ListaAbas} from '../model/ListaAbas'; import {AbaView} from '../view/AbaView'; import {Aba} from '../model/Aba'; import {Bind} from '../helpers/Bind'; import {Editor} from '../model/Editor'; import {EditorView} from '../view/EditorView'; import ace from 'brace'; import 'brace/mode/javascript'; import 'brace/theme/chrome'; import 'brace/ext/language_tools';

class AbaController {

constructor() {
//    let $ = document.querySelector.bind(document);
//    debugger;
    this._nome = document.querySelector('#nomeAba');
    this._listaAbas = new Bind(
       new ListaAbas(),
       new AbaView(document.querySelector('#tab-list')),
       'adiciona', 'remove', 'limpa'
    );
    this._editorView = new EditorView(document.querySelector('.tab-content'));

}

adiciona(event) {
    event.preventDefault();        
    let aba = this._criaAba();                
    this._listaAbas.adiciona(aba);
    let alvo = `editor${aba.index}`;
    this._editorView.update(aba);
    aba.editor = this._configEditor(alvo);
    // let href = "editor-"            

    // aba.configEditor();
    // debugger;
    // this._listaAbas._listaAbas.forEach(a => {
    //     a.editor.resize();
    // });
    // if (window.editor.getReadOnly()) {
    //     window.editor.setReadOnly(false);
    // }
    // document.querySelector(`a[href="tab-${aba.index}"] button`).onclick = this._remove();
    this._nome.value = '';
    document.getElementById("fehcaModalAba").click();
    document.querySelectorAll('ul#tab-list li a')[aba.index-1].click();
    this._listaAbas._listaAbas.forEach(a => {
        document.querySelector(`a[href="#editor${a.index}"]`).onclick = this._mudaAba.bind(this, a);
    });
}

_mudaAba(aba, event) {
    // event.preventDefault();        
    // debugger;
    // aba.editor.resize();
    if (aba.editor.getReadOnly()) {
        debugger;
        aba.editor.setReadOnly(false);
    }
}

_remove(event) {

}

_criaAba() {
    return new Aba(
        this._nome.value,
        document.querySelectorAll('ul#tab-list li').length
    );
}

_configEditor(alvo) {
    let langTools = ace.acequire('ace/ext/language_tools');
    let editor = ace.edit(alvo);
    // editor.resize();
    editor.setTheme('ace/theme/chrome');
    editor.setBehavioursEnabled(true);
    editor.setDisplayIndentGuides(true);
    editor.setHighlightActiveLine(true);
    editor.setHighlightGutterLine(true);
    editor.setHighlightSelectedWord(true);
    editor.setPrintMarginColumn(80);
    editor.setShowFoldWidgets(true);
    editor.setShowInvisibles(false);
    editor.setShowPrintMargin(true);
    editor.setWrapBehavioursEnabled(false);
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: false,
      enableLiveAutocompletion: false
    });

    let session = editor.getSession();
    session.setMode('ace/mode/javascript');
    session.setTabSize(2);
    session.setUseSoftTabs(true);
    session.setUseWrapMode(true);
    session.setWrapLimitRange(null, null); // free wrap

    // Map/remap/unmap keyboard commands.
    editor.commands.removeCommands([
      'findnext', // Defaults to Ctrl-K
      'gotoline', // Defaults to Ctrl-L
      'transposeletters', // Defaults to Ctrl-T
    ]);
    editor.commands.addCommands([{
        name: 'execute',
        bindKey: 'ctrl+enter',
        exec: run,
        readOnly: true,
      }, {
        name: 'findnext',
        bindKey: {
          win: 'Ctrl-G',
          mac: 'Command-G',
        },
        exec: function(editor) {
          editor.findNext();
        },
        readOnly: true,
      }
    ]);
    editor.focus();
    return editor;
}

}

let abaController = new AbaController(); export function currentInstance() { return abaController; }`