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

typester-editor

v0.0.3

Published

A simple to use wysiwyg text editor inspired by Medium and Medium Editor that gives you clean and predictable html from your user's input.

Downloads

32

Readme

Typester (typecode.github.io/typester)

A simple to use WYSIWYG text editor inspired by Medium and Medium Editor that gives you clean and predictable HTML from your user's input.

  • Single file import (batteries included): No need to import separate stylesheets and additional dependencies. Typester comes with everything it needs rolled into one JS file.
  • Engineered for modern JS modules Typester has been created using ES6+ JavaScript module patterns which means you need only import it and instantiate it. If you still prefer <script> imports that's fine too Typester will bind itself to the global scope allowing you to new window.Typester({ /* options */ }).
  • Minimal DOM footprint It wont clutter your beautifully laid out markup with multiple DOM injections for each editor instance. Need multiple editors on a single page? No problem, typester will inject single instances of its DOM requirements which will be shared between the editors.
  • Pure XSS-free DOM powered by DOMPurify Typester, thanks to the awesome power of DOMPurify, will make sure that the HTML you receive is sanitized against XSS exploits.

Try out the DEMO


Installation

Right now Typester is only available via npm. We may look into offering CDN hosted options and/or downloadable and self-hostable options. But, for now, you can:

npm install typester-editor

or for the yarn folks:

yarn add typester-editor --save

Usage

Setting up Typester on your page is as easy as:

import Typester from 'typester-editor'

const typesterInstance = new Typester({ el: document.querySelector('[contenteditable]') }) // Where document.querySelector(...) is a single DOM element.

// If you need to tear down for any reason:
typesterInstance.destroy();

Configuration

You can configure the formatters available for a specific typester instance in two ways:

  1. When you instatiate a Typester instance via the custom configs option:
new Typester({
    el: document.querySelector('[contenteditable]'),
    configs: {
        toolbar: {
            buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
        },

        styles: {
          colors: {
            flyoutBg: 'rgb(32, 31, 32)',
            menuItemIcon: 'rgb(255, 255, 255)',
            menuItemHover: 'rgb(0, 174, 239)',
            menuItemActive: 'rgb(0, 156, 215)'
          }
        }
    }
});
  1. By using a data attribute on the editable container
<div contenteditable='true' data-toolbar-buttons='["bold", "italic", "h1", "h2", "orderedlist", "unorderedlist", "quote", "link"]'></div>

The options available for the toolbar buttons are:

  • Inline formatters: bold, italic
  • Headers: h1, h2, h3, h4, h5, h6
  • Lists: orderedlist, unorderedlist
  • Blockquotes: quote
  • Links: link

License

Typester is released under the MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


Contributing

If you want to contribute to this project we welcome your input.

You can either:

  • Submit an issue / feature request which would help us greatly in figuring out what all this package needs to do
  • Resolve an already listed issue
  • Submit a tweak or new feature

Submit an issue / feature request

Please feel free to head over the our Issues page and submit your issue / feature request.

Resolve an issue / submit a tweak or new feature

  1. Fork this repo
    1. See below for instructions on how to setup local dev
  2. Create your feature branch (git checkout -b new-awesome-feature)
  3. Make sure all tests pass
    1. If you have added a new feature, make sure there is a test for it
    2. Run the following: ~> yarn test (for unit tests) & ~>yarn test_e2e (end-to-end tests)
    3. If you have changed the codebase in a way that requires the tests to be updated please do so.
  4. Update the documentation if you've added any publicly accessible methods or options.
  5. Commit your changes as you would usually (git add -i, add changes, git commit -m "Succinct description of change")
  6. Push to your feature branch (git push origin new-awesome-feature)
  7. Create a new pull request.

Setup local dev environment

Install all the node moudles

~> yarn
~> cd test/e2e/test && yarn

Run build scripts

For a one time build

~> yarn build

For a continuous reactive build that watches for changes

~> yarn watch

Run the local server

You will need to have Docker and Docker Compose installed firstly.

Then:

~> yarn local_server

You should then be able to navigate your browser to:

http://localhost:4848

Run the tests

Make sure you build first Once again, you will need to have Docker and Docker Compose installed.

Then:

Unit tests (Karma & Jasmine)

~> yarn test

e2e tests (nightwatch)

~> yarn test_e2e

Build and read the developer docs

For a once off build:

~> yarn docs

For a continuous file change reactive build

~> yarn docs_watch

Then, to read the docs:

~> yarn docs_server

And point you browser to:

http://localhost:4849