npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

textarea-editor

v2.1.1

Published

Simple markdown editor for textareas

Downloads

143

Readme

textarea-editor

Simple markdown editor for textareas, without a UI. Inspired by Github's comment editor.

npm version Build Status Codecov

Usage

import TextareaEditor from 'textarea-editor';
const textarea = document.querySelector('textarea');
const editor = new TextareaEditor(textarea);

editor.insert('Hello world!');
editor.range([0, 5]);
editor.format('bold');
assert(textarea.value == '**Hello** world!');

editor.unformat('bold');
editor.format('italic');
assert(textarea.value == '_Hello_ world!');

For an example with a UI, see the example folder or run yarn start.

All default formats are exposed, and can easily be modified or extended.

Custom formats

A format should be an object with the following properties:

  • block - (Optional) A boolean indicating whether or not this is a block, and should be newline separated from the rest of the text (e.g. code block).
  • multiline - (Optional) A boolean indicating whether or not this is a multiline format (e.g. ordered list).
  • prefix
    • value - A string or a function that generates a value (useful for prefixes that change based on line number, such as ordered lists). The function gets called for each line in the current selection (unless .multiline is false, in which case the entire selected text is passed), and is given the line, the line number, and any additional arguments passed to .format().
    • pattern - A string containing a pattern that identifies the prefix when used in a regular expression (double escape special chars).
    • antipattern - (Optional) A string containing a pattern that identifies prefixes that would be found by .pattern, but should be ignored because they are part of other prefixes (e.g ## would match parts of ###). This is a very ugly hack, should find a better way to solve this in the future.
  • suffix
    • Same properties as .prefix, but gets inserted after the current selection.

Example

textarea.value = 'Hello\nWorld';

const orderedList = {
  block: true,
  multiline: true,
  prefix: {
    value: (line, no) => `${no}. `,
    pattern: '[0-9]+\\. '
  }
};

editor.range([0, textarea.value.length])
editor.format(orderedList);
assert(textarea.value == '1. Hello\n2. World');

Simple formats can be defined by giving .prefix and .suffix a string value.

textarea.value = 'Hello World';
editor.range([0, textarea.value.length]);
editor.format({ prefix: '#{', suffix: '}' });
assert(textarea.value == '#{Hello World}');

API

Table of Contents

TextareaEditor

TextareaEditor class.

Parameters

range

Set or get selection range.

Parameters

Returns (Array | TextareaEditor)

insert

Insert given text at the current cursor position.

Parameters

Returns TextareaEditor

focus

Set foucs on the TextareaEditor's element.

Returns TextareaEditor

toggle

Toggle given format on current selection. Any additional arguments are passed on to .format().

Parameters

  • format (String | Object) name of format or an object
  • args ...any

Returns TextareaEditor

format

Format current selcetion with given format.

Parameters

  • name (String | Object) name of format or an object
  • args ...any

Returns TextareaEditor

unformat

Remove given format from current selection.

Parameters

Returns TextareaEditor

hasFormat

Check if current seletion has given format.

Parameters

Returns Boolean

Formats

Default formats.

bold

Bold text.

Examples

editor.format('bold');
assert(textarea.value == '**Hello World**')

italic

Italic text.

Examples

editor.format('italic');
assert(textarea.value == '_Hello World_')

strikethrough

Strikethrough text.

Examples

editor.format('strikethrough');
assert(textarea.value == '~~Hello World~~')

link

Insert link.

Examples

editor.format('link', '/example');
assert(textarea.value == '[Hello World](/example)')

image

Insert image.

Examples

editor.format('image', '/example.png');
assert(textarea.value == '![Hello World](/example.png)')

header1

Header 1.

Examples

editor.format('header1');
assert(textarea.value == '# Hello World')

header2

Header 2.

Examples

editor.format('header2');
assert(textarea.value == '## Hello World')

header3

Header 3.

Examples

editor.format('header3');
assert(textarea.value == '### Hello World')

header4

Header 4.

Examples

editor.format('header4');
assert(textarea.value == '#### Hello World')

header5

Header 5.

Examples

editor.format('header5');
assert(textarea.value == '##### Hello World')

header6

Header 6.

Examples

editor.format('header6');
assert(textarea.value == '###### Hello World')

code

Insert code block.

Examples

editor.format('code');
assert(textarea.value == '```\nHello World\n```')

orderedList

Ordered list.

Examples

editor.format('orderedList');
assert(textarea.value == '1. Hello World')

unorderedList

Unordered list.

Examples

editor.format('unorderedList');
assert(textarea.value == '- Hello World')

taskList

Task list.

Examples

editor.format('taskList');
assert(textarea.value == '- [ ] Hello World')

blockquote

Blockquote.

Examples

editor.format('blockquote');
assert(textarea.value == '> Hello World')

License

MIT