@datlt/mm-editor v1.0.0

m2Editor module

Info:

• Module: ES6
• Language: typescript 3.3
• Main dependence: "ace-builds": "^1.4.2"

How to use

1. In your html file:

   <div id="text-editor"></div>
   
   <script src="ace-builds/src-noconflict/ace.js"></script>
   <script src="ace-builds/src-noconflict/ext-language_tools.js"></script>

2. In your code:

• Create an Editor:

  import * as M2E from '../../editor/index';
  
  let editor = M2E.M2Editor.edit("text-editor", "editor-id");

• Set some options:

  // set default options
  editor.setOptionDefault();
  
  // Or set custom options
  editor.setOptions({
          fontSize: "11pt",
          displayIndentGuides: true,
          enableLiveAutoCompletion: false,
          value: "",
          theme: "./theme/clouds",
          useWorker: false,
          useSoftTabs: false
      });

• Set default theme/ custom theme:

  // Load default themes of ACE lib	
  editor.setTheme("ace/theme/clouds_midnight");
  
  // Load custom theme
  // For example at ./src/themes/textize_mind_map.ts
  // with theme name 'textize_mind_map' is the file name
  M2E.Theme.load("textize_mind_map", (themeId: string) => {
      editor.setTheme(themeId);
  })

• Binding data:

  let dataObj = []
  editor.bind(dataObj);

  Note: dataObj variable can be retrieved from mindmap-drawer module

  Note: editor.getEditorCore() get a refer to an instance of AceAjax.Editor (API at ace.c9.io)

• Active events:

  // listen the event for editor
  editor.onNodeClick(function (node, lineIndex) {
      // TODO
  });
  editor.onStructureChanged(function (nodes) {
      // TODO
      map.update();
  });
  editor.onTextChanged(function (node) {
      // TODO
      map.updateText(node as any);
      map.clearAndSelectNodes([node as any], false);
  });
  editor.onNodeSelectionChanged(function (nodes) {
      // TODO
      map.clearAndSelectNodes(nodes as any, false);
  });

  Note: editor created from editor module