Text Editor Source XML 2.0.3

Enable XML Source Editor

Strokes

 or  then press Enter.
 then press (Space).
 then press Backspace.
 then press ArrowLeft.
 then press Backspace.
<!- or <!-> then press -.
</div> then press ArrowLeft.
</div> then press Backspace.
< or <> then press ?.
<? or <??> then press Backspace.
<?asdf?> then press ArrowLeft.
<?asdf?> then press Backspace.
<?xml?> then press Enter.
<div /> then press ArrowLeft.
<div /> then press Backspace.
<div></div> then press Backspace.
<div></div> then press Enter.
<div> then press ArrowLeft.
<div> then press Backspace.
<div> then press Enter.
<div/> then press ArrowLeft.
<div/> then press Backspace.
<div or <div> then press >.
<div or <div> then press /.
 then press ArrowRight.
 then press Delete.
</div> then press ArrowRight.
</div> then press Delete.
<?asdf?> then press ArrowRight.
<?asdf?> then press Delete.
<div> then press ArrowRight.
<div> then press Delete.
<div/> then press ArrowRight.
<div/> then press Delete.
--> then press Delete.
?> then press Delete.

Usage

Browser

<script src="./text-editor/index.min.js"></script>
<script src="./text-editor.history/index.min.js"></script>
<script src="./text-editor.key/index.min.js"></script>
<script src="./text-editor.source/index.min.js"></script>
<script src="./text-editor.source-x-m-l/index.min.js"></script>
<script>

  const editor = new TextEditor(document.querySelector('textarea'), {
      commands: {
          pull: function () {
              return this.pull().record(), false;
          },
          push: function () {
              return this.push().record(), false;
          },
          redo: function () {
              return this.redo(), false;
          },
          undo: function () {
              return this.undo(), false;
          }
      },
      keys: {
          'Control-[': 'pull',
          'Control-]': 'push',
          'Control-y': 'redo',
          'Control-z': 'undo'
      },
      tab: 2,
      // Be sure to put `TextEditor.SourceXML` before `TextEditor.Source`
      with: [TextEditor.History, TextEditor.Key, TextEditor.SourceXML, TextEditor.Source]
  });

</script>

CommonJS

const TextEditor = require('@taufik-nurrohman/text-editor').default;
const TextEditorHistory = require('@taufik-nurrohman/text-editor.history').default;
const TextEditorKey = require('@taufik-nurrohman/text-editor.key').default;
const TextEditorSource = require('@taufik-nurrohman/text-editor.source').default;
const TextEditorSourceXML = require('@taufik-nurrohman/text-editor.source-x-m-l').default;

const editor = new TextEditor(document.querySelector('textarea'), {
    commands: {
        pull: function () {
            return this.pull().record(), false;
        },
        push: function () {
            return this.push().record(), false;
        },
        redo: function () {
            return this.redo(), false;
        },
        undo: function () {
            return this.undo(), false;
        }
    },
    keys: {
        'Control-[': 'pull',
        'Control-]': 'push',
        'Control-y': 'redo',
        'Control-z': 'undo'
    },
    tab: 2,
    // Be sure to put `TextEditorSourceXML` before `TextEditorSource`
    with: [TextEditorHistory, TextEditorKey, TextEditorSourceXML, TextEditorSource]
});

ECMAScript

import TextEditor from '@taufik-nurrohman/text-editor';
import TextEditorHistory from '@taufik-nurrohman/text-editor.history';
import TextEditorKey from '@taufik-nurrohman/text-editor.key';
import TextEditorSource from '@taufik-nurrohman/text-editor.source';
import TextEditorSourceXML from '@taufik-nurrohman/text-editor.source-x-m-l';

const editor = new TextEditor(document.querySelector('textarea'), {
    commands: {
        pull: function () {
            return this.pull().record(), false;
        },
        push: function () {
            return this.push().record(), false;
        },
        redo: function () {
            return this.redo(), false;
        },
        undo: function () {
            return this.undo(), false;
        }
    },
    keys: {
        'Control-[': 'pull',
        'Control-]': 'push',
        'Control-y': 'redo',
        'Control-z': 'undo'
    },
    tab: 2,
    // Be sure to put `TextEditorSourceXML` before `TextEditorSource`
    with: [TextEditorHistory, TextEditorKey, TextEditorSourceXML, TextEditorSource]
});

Methods

Instance Methods

`editor.insertComment(value, mode = -1, clear = true)`

Inserts an XML comment.

editor.insertComment('asdf'); // Delete selection and insert comment before caret
editor.insertComment('asdf', 0); // Replace selection with comment
editor.insertComment('asdf', +1); // Delete selection and insert comment after caret

`editor.insertData(value, mode = -1, clear = true)`

Inserts an XML character data section.

editor.insertData('asdf'); // Delete selection and insert character data section before caret
editor.insertData('asdf', 0); // Replace selection with character data section
editor.insertData('asdf', +1); // Delete selection and insert character data section after caret

`editor.insertElement(value, mode = -1, clear = true)`

`editor.insertElement(of, mode = -1, clear = true)`

Inserts an XML element.

editor.insertElement('<input type="text" />'); // Delete selection and insert element before caret
editor.insertElement('<input type="text" />', 0); // Replace selection with element
editor.insertElement('<input type="text" />', +1); // Delete selection and insert element after caret

editor.insertElement(['input', false, {type: 'text'}]); // Delete selection and insert element before caret
editor.insertElement(['input', false, {type: 'text'}], 0); // Replace selection with element
editor.insertElement(['input', false, {type: 'text'}], +1); // Delete selection and insert element after caret

`editor.peelComment(wrap = false)`

Unwraps current selection from an XML comment.

editor.peelComment();

`editor.peelData(wrap = false)`

Unwraps current selection from an XML character data section.

editor.peelData();

`editor.peelElement(open, close, wrap = false)`

`editor.peelElement(of, wrap = false)`

Unwraps current selection from an XML element.

editor.peelElement('<b>', '</b>');
editor.peelElement(['b']);

`editor.peelInstruction(wrap = false)`

Unwraps current selection from an XML processing instruction.

editor.peelInstruction();

`editor.selectComment(wrap = false)`

Selects an XML comment.

editor.selectComment(); // Select comment content
editor.selectComment(true); // Select comment node

`editor.selectData(wrap = false)`

Selects an XML character data section.

editor.selectData(); // Select character data section content
editor.selectData(true); // Select character data section node

`editor.selectElement(wrap = false)`

Selects an XML element (tag).

editor.selectElement();

`editor.selectInstruction(wrap = false)`

editor.selectInstruction(); // Select instruction content
editor.selectInstruction(true); // Select instruction node

`editor.toggleComment(wrap = false)`

Toggles wrap and peel selection of an XML comment.

editor.toggleComment();

`editor.toggleData(wrap = false)`

Toggles wrap and peel selection of an XML character data.

editor.toggleData();

`editor.toggleElement(open, close, wrap = false)`

`editor.toggleElement(of, wrap = false)`

Toggles wrap and peel selection of an XML element.

editor.toggleElement('<b>', '</b>');
editor.toggleElement(['b']);

`editor.toggleInstruction(wrap = false, name = 'xml')`

Toggles wrap and peel selection of an XML processing instruction.

editor.toggleInstruction(false, 'php');

`editor.wrapComment(wrap = false)`

Wraps current selection with an XML comment.

editor.wrapComment();

`editor.wrapData(wrap = false)`

Wraps current selection with an XML character data.

editor.wrapData();

`editor.wrapElement(open, close, wrap = false)`

`editor.wrapElement(of, wrap = false)`

Wraps current selection with an XML element.

editor.wrapElement('<b>', '</b>');
editor.wrapElement(['b']);

`editor.wrapInstruction(wrap = false, name = 'xml')`

Wraps current selection with an XML processing instruction.

editor.wrapInstruction(false, 'php');