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

@itsumma/textarena

v2.1.0

Published

![Textarena](resources/gif/logo.gif)

Downloads

11

Readme

Textarena

Build

Preview

Key features

There are a few key features:

To learn how to install and use Textarena, view Getting started.

Block elements

In some other editors, the workspace is represented by a single contenteditable element in which you can create various HTML markup. Because of this bugs with moving text fragments or scaling images occur, while parts of the page jump and twitch. There is also an bug with highlighting large parts of the text in the case when you just want to make a few words a heading or bold.

The Textarena workspace consists of separate blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent element provided by Textarena Plugin. This allows to avoid such bugs.

Keyboard shortcuts with hints

For convenience, there are keyboard shortcuts in the Textarena. They allow you to add Textarena elements, change their order, change the text styling, insert special characters and manipulate the history of changes.

Of course, in order not to memorize all the keyboard shortcuts, the Textarena has hints. How to view them is described below.

When the cursor is on an empty paragraph, a placeholder hint appears.

Creator bar

Hold Ctrl (Cmd ⌘ on Mac) or Alt (Option ⌥ on Mac) to see shortcut tips.

Creator bar keyboard shortcut tips:
Creator bar with tips

Toolbar keyboard shortcut tips:
Toolbar with tips

It is also possible to view hints by clicking on the button with the symbol '?'. This button is located in the lower right corner.

Keyboard shortcut hints

Textarena own parser

When inserting text from other editors, there may be a problem that additional styles are added. They interfere with the correct display of the text in the current editor and its further formatting.

To avoid this problem, the arena has its own parser. It removes styles and attributes that may affect the editor's work. You can configure which attributes should be kept and which should be avoided in the configuration of plugins.

You can read more about plugins here.

Textarena own change history

Depending on the browser, there is a possibility of incorrect operation of the change history, for example, when nothing happens when trying to cancel changes.

To avoid this problem, the arena stores its own history of changes.

Style control

Textarena is used on various web resources that have their own styling.

In order not to violate the design of the web resource, Textarena supports the ability to control styles and classes assigned to the elements of Textarena. This control is carried out by configuring plugins.

You can read more about plugins here.

Typograf support

Textarens supports the package Typograf. It helps to automatically place unbreakable spaces, correct minor typos, bring quotes to the correct form, replace hyphens with dashes in the right places, and much more.

To use the Typograf, select the text and click the button centered at the bottom with the text 'Typograf'.

Typograf

Related

ng-textarena - Angular version of the Textarena