Do you like this project? Please support my Mecha CMS project too. Thank you!

Text Editor 4.2.9

Text Editor is a simple JavaScript application that aims to provide accessibility enhancements to the native HTML <textarea> elements, allowing users to control and manipulate their data in the text editor as they wish. It contains very sufficient methods to manipulate the existing text selection range data without providing unnecessary features. This keeps the file size small and the learning curve low, so you can fully focus on the results.

# Usage

Browser

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      <textarea></textarea>
    </p>
    <script src="./index.min.js"></script>
    <script>
      const editor = new TextEditor(document.querySelector('textarea'));
    </script>
  </body>
</html>

Node.js

Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.

CommonJS

const TextEditor = require('@taufik-nurrohman/text-editor').default;

const editor = new TextEditor(document.querySelector('textarea'));

ECMAScript

import TextEditor from '@taufik-nurrohman/text-editor';

const editor = new TextEditor(document.querySelector('textarea'));

# Tests

# Tweaks

# Constructor

const editor = new TextEditor(self, tab = '\t');
const editor = new TextEditor(self, state = {
    tab: '\t',
    with: []
});

# Parameters

self

The <textarea> element.

tab

The default indent character for editor.pull() and editor.push() method.

state

The configuration data.

state.tab

The default indent character for editor.pull() and editor.push() method.

state.with

List of callable functions or objects containing an attach() method to be invoked each time the application is initialized. A very simple “plugin” system.

# Methods

Instance Methods

Instance methods are methods available through the results of a TextEditor construct.

editor.$()

Gets current text selection data.

// `abc`
console.log(editor.$()); // `{"after":"c","before":"a","end":2,"length":1,"start":1,"value":"b"}`

editor.attach(self, state)

Re-initializes the application and its extensions after it has been detached.

editor.attach();

editor.blur()

Blurs from the <textarea> element.

editor.detach()

Disables the application methods (except for the attach() method) and executes the detach() method of the extensions, if they are present.

editor.detach();

editor.fire(event, data, that)

Fires an event.

editor.fire('change', []);

editor.focus(mode = 0)

Focuses to the <textarea> element.

editor.focus(); // Focus to the last selection
editor.focus(-1); // Focus to the start of text area value
editor.focus(+1); // Focus to the end of text area value
editor.focus(true); // Select all

editor.get()

Gets current value of the <textarea> element if not empty, otherwise, return null.

editor.insert(value, mode = 0, clear = false)

Inserts value to (replace) the current selection.

editor.insert(':)'); // Insert at selection (replace selection)
editor.insert('<b>', -1); // Insert before selection
editor.insert('</b>', +1); // Insert after selection
editor.insert(':)', -1, true); // Insert before selection and delete selection
editor.insert(':)', +1, true); // Insert after selection and delete selection

editor.let()

Resets value to the initial value of the <textarea> element.

editor.match(pattern, then)

Matches current selection with the pattern provided.

if (editor.match(/^\s*:\w+:\s*$/)) {
    alert('Selection is detected as emoji!');
}

Does something with the current matched selection.

let maps = {
    ':happy:': '😀',
    ':sad:': '😩',
    ':wonder:': '😕'
};

editor.match(/^\s*:\w+:\s*$/, function (m) {
    let exist = maps[m[0] = m[0] ? m[0].trim() : ""];
    exist && this.insert(exist);
});

Matches to the characters before selection, current selection, and after selection.

let test = editor.match([/:$/, /^\w+$/, /^:/]);
console.log(test[0] && test[1] && test[2]);
editor.match([/:$/, /^\w+$/, /^:/], function (before, value, after) {
    console.log([before, value, after]);
});

editor.off(event, then)

Removes an event.

editor.off('click'); // Remove all events from the `click` event container
editor.off('click', onClick); // Remove `onClick` event from the `click` event container

editor.on(event, then)

Adds an event.

editor.on('click', function () {
    this.select(true); // Select all on click
});
function onClick() {
    this.select(true); // Select all on click
}

editor.on('click', onClick);

editor.peel(open, close, wrap = false)

Unwraps current selection from open and close.

editor.peel('<', '>'); // Remove `<` before selection and `>` after selection
editor.peel('<', '>', true); // Remove `<` at selection start and `>` at selection end

editor.pull(by = editor.state.tab, withEmptyLines = true)

Outdents current selection from by.

editor.pull(); // Outdent from `\t`
editor.pull('****'); // Outdent from `****`

editor.push(by = editor.state.tab, withEmptyLines = false)

Indents current selection with by.

editor.push(); // Indent with `\t`
editor.push('****'); // Indent with `****`

editor.replace(from, to, mode = 0)

Replaces current, before, or after selection from from to to.

editor.replace(/<.*?>/g, ""); // Strip HTML tag(s) in selection
editor.replace(/<.*?>/g, "", -1); // Strip HTML tag(s) before selection
editor.replace(/<.*?>/g, "", +1); // Strip HTML tag(s) after selection

editor.select(...lot)

Sets selection range.

editor.select(); // Is the same as `editor.focus()`
editor.select(2); // Move caret to the index `2`
editor.select(0, 2); // Select from range `0` to `2`
editor.select(true); // Select all

editor.set(value)

Sets value to the <textarea> element.

editor.trim(open = "", close = "", start = "", end = "", tidy = true)

Trims current selection from white-spaces, and optionally insert characters at the specified points.

// `a<open><start>b<end><close>c`

editor.trim(); // Remove any white-space(s) before and after selection, start and end of selection
editor.trim(false, false); // Remove any white-space(s) at the start and end of selection
editor.trim("", "", false, false); // Remove any white-space(s) before and after selection
editor.trim(' ', ' '); // Force a space before and after selection
editor.trim('\n\n', '\n\n'); // Force line-break before and after selection
editor.trim('\n\n', '\n\n', "", "", false); // Ignore empty value before and after selection, just insert that `\n\n` away

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

Wraps current selection with open and close.

editor.wrap('<', '>'); // Wrap with `<` and `>`
editor.wrap('<', '>', true); // Wrap with `<` and `>` then select

Static Methods

Static methods are methods available directly on the TextEditor object.

TextEditor.esc(value)

Escapes regular expression’s special characters.

TextEditor.from(self, state)

Creates a new TextEditor instance.

const editor = TextEditor.from(document.querySelector('textarea'));

TextEditor.of(self)

Gets TextEditor instance of an element.

document.querySelectorAll('textarea').forEach(self => {
    const editor = TextEditor.of(self);
});

# Properties

Instance Properties

Instance properties are properties available through the results of a TextEditor construct.

editor.hooks

Returns the events data.

console.log(editor.hooks);

editor.self

Returns the <textarea> element.

editor.self.addEventListener('keydown', e => {
    if (
        (e.key && 'Enter' === e.key) ||
        (e.keyCode && 13 === e.keyCode)
    ) {
        // Do something with `Enter` key!
    }
});

editor.state

Returns the application states if any.

editor.value

Proxy that passes to the editor.self.value property.

console.log(editor.value); // Get text area value
editor.value = 'asdf'; // Set text area value

Static Properties

Static properties are properties available directly on the TextEditor object.

TextEditor._

Alias for TextEditor.prototype.

TextEditor._.selectAll = function () {
    return this.select(true);
};

const editor = new TextEditor(document.querySelector('textarea'));

editor.selectAll(); // Select all

TextEditor.state

Returns the default values of editor.state.

const editor = new TextEditor(document.querySelector('textarea'), {
    foo: ['bar', 'baz', 'qux']
});

console.log([TextEditor.state, editor.state]);

TextEditor.version

Returns the application version.

let version = TextEditor.version,
    major = version.split('.')[0];

if (+major < 3) { … }

TextEditor.x

List of regular expression characters to be escaped.

# Extensions

Anatomy of an Extension

Extension as a function:

function Extension(self, state = {}) {
    this.a = 1;
    this.b = function () {};
    return this;
}

Object.defineProperty(Extension, 'name', {
    value: 'Extension'
});

Extension as an object:

const Extension = {
    attach: function (self, state = {}) {},
    detach: function (self, state = {}) {},
    name: 'Extension'
};

Usage of an Extension

As a core extension:

TextEditor.state.with.push(Extension);

As an optional extension:

const editor = new TextEditor(document.querySelector('textarea'), {
    with: [Extension]
});

List of Extensions

# License

Use it for free, pay if you get paid. So, you’ve just benefited financially after using this project? It’s a good idea to share a little financial support with this open source project too. Your support will motivate me to do any further development, as well as to provide voluntary support to overcome problems related to this project.

Thank you! ❤️