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

@webspellchecker/wproofreader-sdk-js

v1.1.1

Published

WProofreader SDK package to simplify the integration into modern JavaScript applications.

Downloads

778

Readme

WProofreader SDK JavaScript

WProofreader SDK empowers your web applications with real-time multilingual spelling, grammar, and style checks. The SDK integrates seamlessly with rich text editors and text fields across various platforms, including those developed using popular JavaScript frameworks like Angular, React, and Vue.js. It offers users instant correction suggestions as they type or within a dedicated dialog.

Starting from version 1.1.0, WProofreader SDK JavaScript offers basic TypeScript support. The package includes the type definition file (.d.ts) for the WProofreader core methods and additional methods for the NPM package itself, covering initialization, configuration, and instance management. For integration of WProofreader SDK using TypeScript, refer to the Angular example.

Visit the WProofreader SDK repository or the official web page for more detailed information.

Find below the instructions that will guide you in easily integrating this functionality into your applications.

This repository also offers examples of WProofreader SDK integrated with rich text editors such as CKEditor 4, TinyMCE, Froala, and Quill in frameworks like Vue.js, React, and Angular. Browse the examples directory and see each README for setup details.

Installation

To add WProofreader SDK to your project, install the npm module using the following command.

npm install @webspellchecker/wproofreader-sdk-js

Initialization

  1. Import WProofreader SDK:

    import WProofreaderSDK from '@webspellchecker/wproofreader-sdk-js';
  2. Define global configuration. Regardless of your chosen initialization method, you'll need to configure the SDK globally. Use the configure method to set general options. Detailed descriptions of all available customization options can be found in the documentation.

    Please note that the configure method needs to be called in the file that initializes the application.

    WProofreaderSDK.configure({
    	autoSearch: true,
    	lang: 'en_US' // Sets the default language. If not specified, auto-defined language will be used.
    
    	// Additional options here, e.g. the on-premise endpoint or cloud service activation key
    });
  3. Choose the initialization method. After setting general options, proceed to initialize the SDK using one of the methods below.

    Option A: Using autoSearch option

    Automatically enable WProofreader when an editable container gains focus. Add autoSearch: true to your configure method if you haven't already.

    WProofreaderSDK.configure({
    	autoSearch: true,
    	lang: 'en_US'
    	// Additional options here
    });

    Option B: Using data-wsc-autocreate data attribute

    Add the data-wsc-autocreate="true" attribute to your editable container (e.g. textarea) to initialize WProofreader automatically with the page load (no need to set the focus). This must be applied to static elements that are part of the initial HTML markup.

    <textarea data-wsc-autocreate="true" type="text">Some text.</textarea>

    It’s recommended to use this initialization method in a bundle with the autoSearch option if the page will be dynamically modified.

    Option С: Using init method

    Use init method to initialize WProofreader in a container. You can specify the other configuration options for the local initialization if needed. Or skip using configure method all together and set all the options directly in the init method.

    WProofreaderSDK.init({
    	container: document.getElementById('container')
    	// Additional options here
    });

    It’s recommended to use this initialization method in a bundle with the autoSearch option if the page will be dynamically modified.

  4. Version-specific configuration. Depending on whether you are using WProofreader as the cloud service or opt for on-premise deployment, further configuration is necessary.

    For the cloud-based version:

    Add serviceId option with your activation key that you received during registration. It’s a mandatory option for activating and using the service.

    WProofreaderSDK.configure({
    	// Main options here
    	serviceId: 'your-service-ID'// required for the Cloud version only
    });

    For the server version:

    Specify the backend endpoint hosted on your infrastructure using corresponding options as shown below. This version does not require the serviceId option.

    WProofreaderSDK.configure({
    	// Main options here
    	serviceProtocol: 'https',
    	serviceHost: 'localhost',
    	servicePort: '443',
    	servicePath: 'virtual_directory/api', // by default the virtual_directory is wscservice
    	srcUrl: 'https://host_name/virtual_directory/wscbundle/wscbundle.js'
    });

Features

  • AI-powered sentence checker for multilingual spelling, grammar, and style check with enhanced accuracy in 20+ languages, including English, German, and Spanish.
  • Flags non-inclusive or profane English terms, suggesting unbiased alternatives.
  • Combines spelling autocorrect and autocomplete suggestions for quicker and error-free writing, primarily in English dialects.
  • Ensures data security with on-premise deployment options and allows user-centric customization including theme and language settings.
  • Enables the creation of custom dictionaries and industry-specific vocabularies, providing users with more accurate results.
  • Complies with WCAG 2.1 and Section 508 standards, featuring an accessible interface with real-time proofreading and keyboard navigation options.

Additional resources and documentation

Technical support and issues reporting

For technical support or inquiries, reach out to us directly if you hold an active subscription or commercial license. Contact us here.

To report bugs or issues, please use the GitHub Issues section of the WProofreader SDK repository. When reporting an issue, kindly provide steps to reproduce it, and mention the browser and integration where the issue occurred.

License

The source code in this repository is licensed under the Apache 2.0 license. Please note that while the code is open-source, the usage of the WProofreader service is governed by separate terms. Refer to the LICENSE.md for detailed licensing information and related links.