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

@edx/tinymce-language-selector

v1.1.0

Published

A plugin for TinyMCE 5 that allows the user to specify if text is written in a foreign language and in which language.

Downloads

3,358

Readme

Image

Description

This is a plugin for TinyMCE 5 that allows users to specify what language their text is written in. The plugin wraps the desired text in span tags with a lang attribute for the specified language. Unspecified text is assumed to be written in the page's language. This helps the resulting text comply with WCAG 2.0 3.1.2 Language of Parts: "The human language of each passage or phrase in the content can be programmatically determined..."

The plugin is intended for use as you are creating a new passage. It also works when you need to change the language of an existing passage, but not as well (see below Caveats section for details). For best results, don’t select any text and just change in and out of different language modes while typing.

Installation

This is published as an NPM package.

npm install @edx/tinymce-language-selector

Usage

Import the plugin to add it to TinyMCE's plugin manager:

import '@edx/tinymce-language-selector'

Make sure TinyMCE has already been imported since the plugin needs access to the global tinymce variable.

Then you can use the plugin just like one of TinyMCE's builtin plugins. When configuring TinyMCE, make sure to modify extended_valid_elements to allow span tags with the lang attribute or the id attribute and to strip empty span tags:

extended_valid_elements: 'span[lang|id] -span'

Development

We are leveraging the semantic release workflow to create new versions and release packages to npm.

Caveats

  • The repo currently doesn't contain any unit tests due to how specific TinyMCE's testing framework is to itself. It has only been tested manually so far.
  • One known limitation is that you can't select and change the language of text that goes across multiple HTML tags (besides formatting). An error will be raised to the user. You can select and change the language of anything smaller than a paragraph, provided the paragraph does not contain any language spans inside of it already.
  • There wasn’t a TinyMCE-endorsed way of changing the button text, so we directly modify the innerText of the button node. I’m not sure how well this will work with internationalization and non-default styling.