@donjohnston/cowriter-sdk-web v1.1.7-beta.8

Co:Writer® SDK for Web

• Add accessibility/accommodation tools for writing quickly and easily.
• Where is Co:Writer SDK hosted
• Example of Co:Writer SDK basic integration into a web page
• Example of Co:Writer SDK basic integration without DOM scanning
• Example of Co:Writer SDK integration using all config parameters
• Co:Writer SDK API
  • dji.cowriter.setLicenceKey(licenseKey)
  • async dji.cowriter.initialize(config)
  • async dji.cowriter.enable()
  • async dji.cowriter.disable()
  • async dji.cowriter.attach(targets)
  • async dji.cowriter.detach(targets)
  • async dji.cowriter.resetState()
  • dji.cowriter.updateFeatures(features)
  • Customize the position of the Co:Writer icon
• Terms and Conditions
• License

Add accessibility/accommodation tools for writing quickly and easily.

Use speech-to-text and/or word prediction to support writers' needs. Runs on any Chromium, Safari, or Firefox based browser that supports WebAssembly.

Where is Co:Writer SDK hosted

Co:Writer SDK can be used directly from Don Johnston Inc. CDN, or it can be hosted on integrator's CDN.

Snippet for Don Johnston Inc. CDN:

<script src="https://cdn.donjohnston.net/cowriter/sdk/1.1.7-beta.8/cowriter.js"></script>

Snippet for integrator's CDN:

<script src="<YOUR-CUSTOM-PATH>/cowriter.js""></script>

Example of Co:Writer SDK basic integration into a web page

<script src="<YOUR-CUSTOM-PATH>/cowriter.js"></script>

<script>
    dji.cowriter.setLicenseKey("...");

    dji.cowriter.initialize({
        sdkMode: true
    });
    
    dji.cowriter.enable();
</script>

Example of Co:Writer SDK basic integration without DOM scanning

<script src="<YOUR-CUSTOM-PATH>/cowriter.js"></script>

<script>
    const Config = {
        sdkMode: true,
        features: {
            autoScan: false,            // Auto detect the editable fields by scanning the DOM. Default value is true.
        }
    };

    async function runWorkflow() {
        dji.cowriter.setLicenseKey("...");

        await dji.cowriter.initialize(Config);

        await dji.cowriter.enable();

        await dji.cowriter.attach(document.querySelector("#some-editor-id"));

        // ... and later

        await dji.cowriter.detach(document.querySelector("#some-editor-id"));

        await dji.cowriter.disable();
    }
    
    runWorkflow();
</script>

Example of Co:Writer SDK integration using all config parameters

<script src="<YOUR-CUSTOM-PATH>/cowriter.js"></script>

<script>
    const Config = {
        sdkMode: true,
        language: "en-US",  // Prediction and TTS language. Possible values are: "en-US", "es-ES". Default value is "en-US".
        features: {
            autoScan: true,             // Auto detect the editable fields by scanning the DOM. Default value is true.
            prediction: true,           // Activate or deactivate the Word Prediction feature. Possible values are: true, false. Default value is true.
            tts: true,                  // Activate or deactivate the TTS feature. Possible values are: true, false. Default value is true.
            speechRecognition: true     // Activate or deactivate the Speech Recognition feature. Possible values are: true, false. Default value is true.
        },
        settings: {
            prediction: {
                mode:               "advanced", // Prediction mode. Possible values are: "basic", "advanced". Default value is "advanced".
                mainDictionary:     "40k",      // Prediction main dictionary. Possible values are "40k", "12k", "6k", "3k", "1k", "0k". Default value is "40k".
                guesses:            5,          // The maximum number of displayed guesses. Possible values are between 1 and 9. Default value is 5.
                momentaryTopic:     true,       // Predict from page. Default value is true.
                ahead:              true,       // Predict ahead. Default value is true.
                flexibleSpelling:   true,       // Flexible spelling. Default value is true.
                grammar:            true,       // Grammar. Default value is true.
                autoCapitalization: false       // Auto capitalization. Default value is false.
            },
            predictionWindow: {
                fontFamily:         "Verdana",  // Font family. Default value is "Verdana".
                fontSize:           24,         // Font size, in percents. Possible values are between 0% and 100%. Default value is 24%.
                textColor:          "#000000",  // Text color, in hexadecimal format. Default value is "#000000" (white).
                backgroundColor:    "#FFFFFF"   // Background color, in hexadecimal format. Default value is "#FFFFFF" (black).
            },
            speech: {
                voice:      null,   // Voice name. Can be any supported voice name. Default is null.
                volume:     100,    // Speech volume, in percents. Possible values are between 0% and 100%. Default value is 100%.
                rate:       50,     // Speech rate, in percents. Possible values are between 0% and 100%. Default value is 50%.
                pitch:      50,     // Speech pitch, in percents. Possible values are between 0% and 100%. Default value is 50%.
                letters:    false,  // Speak the typed letter. Default value is false.
                words:      true,   // Speak the typed word. Default value is true.
                sentences:  true,   // Speak the typed sentence. Default value is true.
            }
        }
    };

    async function runWorkflow() {
        dji.cowriter.setLicenseKey("...");

        await dji.cowriter.initialize(Config);

        await dji.cowriter.enable();

        // If you set Config.features.autoScan to false, you can programmatically attach Co:Writer to text editors.
        // await dji.cowriter.attach(document.querySelector("#some-editor-id"));

        // ... and later

        // If you set Config.features.autoScan to false, you can programmatically detach Co:Writer from text editors.
        // await dji.cowriter.detach(document.querySelector("#some-editor-id"));

        await dji.cowriter.disable();
    }

    runWorkflow();
</script>

Co:Writer SDK API

dji.cowriter.setLicenceKey(licenseKey)

Set the license key for Co:Writer SDK.

Notes:

• dji.cowriter.initialize(...) must be called before with features.autoScan set to false.

async dji.cowriter.initialize(config)

Initialize Co:Writer SDK with the desired configuration.

async dji.cowriter.enable()

Enable Co:Writer in a web page.

When Co:Writer is enabled, its icon will be displayed when an editor has focus, and the users can turn it on/off.

Notes:

• dji.cowriter.initialize(...) must be called before.
• if Co:Writer has been initialized with features.autoScan set to false, the icon will not appear.

async dji.cowriter.disable()

Disable Co:Writer in a web page.

When Co:Writer is disabled, its icon will NOT be displayed, and the users don't have access to it. Also, its Web Worker is not running.

Notes:

• dji.cowriter.initialize(...) must be called before.

async dji.cowriter.attach(targets)

Attach Co:Writer to some editors in the current web page.

Notes:

• dji.cowriter.initialize(...) must be called before with features.autoScan set to false.

async dji.cowriter.detach(targets)

Detach Co:Writer from some editors, or all editors, in the current web page.

Notes:

• dji.cowriter.initialize(...) must be called before with features.autoScan set to false.

async dji.cowriter.resetState()

Reset the state of the prediction engine.

Notes:

• dji.cowriter.initialize(...) must be called before.

dji.cowriter.updateFeatures(features)

Update Co:Writer features.

Notes:

• dji.cowriter.initialize(...) must be called before.

Customize the position of the Co:Writer icon

The position of the Co:Writer icon can be customized using the CSS variables in the example below.

:root {
    --dji-cowriter-sdk-position-bottom: 20px;
    --dji-cowriter-sdk-position-right: 20px;
}

Terms and Conditions

See Terms and Conditions: Co:Writer® SDK for Web in TERMS-AND-CONDITIONS.md file.

License

Co:Writer SDK is a commercial product, and licensing arrangements can be made through Don Johnston Incorporated. We're happy to work with you to evaluate the integration into your product(s). Please email developer@donjohnston.com with the subject line of "CW SDK" to get started.

© 2022 Don Johnston Inc.