@grammarly/react-slate - npm Package Compare versions

Comparing version 0.10.5 to 0.10.8

lib/index.d.ts

@@ -6,2 +6,24 @@ /// <reference types="react" />
 
+declare type Time = {
+    h: number;
+    m: number;
+    s: number;
+};
+declare type TextStats = {
+    charsCount: number;
+    wordsCount: number;
+    /**
+     * Readability score using the Flesch reading-ease test. Higher scores indicate material that is easier to read.
+     * The range is typically 0 - 100, but we surface the exact amount even if lower or higher.
+     */
+    readabilityScore: number;
+    readingTime: Time;
+    speakingTime: Time;
+};
+
+declare type GrammarlyOptions = {
+    features?: GrammarlyFeaturesConfig;
+    onTextStats?: (stats: TextStats) => void;
+};
+
 declare type GrammarlyFeaturesConfig = {
@@ -13,2 +35,4 @@ emogenie?: boolean;
     tone?: boolean;
+    /** Stats including word count, reading time and readability score */
+    textStats?: boolean;
 };
@@ -36,6 +60,2 @@
 
-declare type GrammarlyOptions = {
-    features?: GrammarlyFeaturesConfig;
-};
-
 declare type GrammarlySlateProps = {
@@ -54,2 +74,2 @@ value: Node[];
 
-export { GrammarlyEditable, GrammarlyOptions, GrammarlySlate };
+export { GrammarlyEditable, GrammarlyOptions, GrammarlySlate, TextStats };

lib/index.esm.js

 import * as React from 'react';
-import { useState, useEffect, createElement } from 'react';
+import { createElement, useState, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
@@ -8,2 +8,10 @@ import * as Slate from 'slate';
 
+// for now, we only support desktop firefox and chrome
+function isSupportedBrowser(userAgent) {
+    const isMobile = /mobile/i.test(userAgent);
+    const isFirefox = /firefox\//i.test(userAgent);
+    const isChrome = /chrome\//i.test(userAgent) && !/edg\//i.test(userAgent);
+    return !isMobile && (isFirefox || isChrome);
+}
+
 function findScript(url) {
@@ -72,3 +80,3 @@ const scripts = document.querySelectorAll(`script[src^="${url}"]`);
 
-const [versionMajor] = "0.0.1".split(".");
+const [versionMajor] = "0.10.8".split(".");
 async function getGrammarlyModule() {
@@ -86,2 +94,6 @@ return await loadGrammarly({
     const fn = (props) => {
+        if (!isSupportedBrowser(navigator.userAgent)) {
+            const Fallback = fallbackModule[name];
+            return createElement(Fallback, Object.assign({}, props));
+        }
         const [defaultModule, setModule] = useState(sharedDefaultModule);
@@ -88,0 +100,0 @@ const Component = (defaultModule !== null && defaultModule !== void 0 ? defaultModule : fallbackModule)[name];

lib/index.js

@@ -35,2 +35,10 @@ 'use strict';
 
+// for now, we only support desktop firefox and chrome
+function isSupportedBrowser(userAgent) {
+    const isMobile = /mobile/i.test(userAgent);
+    const isFirefox = /firefox\//i.test(userAgent);
+    const isChrome = /chrome\//i.test(userAgent) && !/edg\//i.test(userAgent);
+    return !isMobile && (isFirefox || isChrome);
+}
+
 function findScript(url) {
@@ -99,3 +107,3 @@ const scripts = document.querySelectorAll(`script[src^="${url}"]`);
 
-const [versionMajor] = "0.0.1".split(".");
+const [versionMajor] = "0.10.8".split(".");
 async function getGrammarlyModule() {
@@ -113,2 +121,6 @@ return await loadGrammarly({
     const fn = (props) => {
+        if (!isSupportedBrowser(navigator.userAgent)) {
+            const Fallback = fallbackModule[name];
+            return React.createElement(Fallback, Object.assign({}, props));
+        }
         const [defaultModule, setModule] = React.useState(sharedDefaultModule);
@@ -115,0 +127,0 @@ const Component = (defaultModule !== null && defaultModule !== void 0 ? defaultModule : fallbackModule)[name];

package.json

 {
-  "private": false,
-  "name": "@grammarly/react-slate",
-  "version": "0.10.5",
-  "main": "lib/index.js",
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "sideEffects": false,
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/grammarly/javascript-plugin.git"
-  },
-  "files": [
-    "lib/index.d.ts",
-    "lib/index.esm.js",
-    "lib/index.js"
-  ],
-  "scripts": {
-    "test": "jest",
-    "test:size": "bundlesize"
-  },
-  "dependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "slate": ">=0.58.4",
-    "slate-react": ">=0.58.4"
-  },
-  "devDependencies": {
-    "@grammarly/plugin-core": "workspace:*",
-    "@grammarly/plugin-react-slate": "workspace:*",
-    "@types/jest": "^26.0.14",
-    "bundlesize": "^0.18.0",
-    "jest": "^26.5.2",
-    "ts-jest": "^26.4.1"
-  },
-  "bundlesize": [
-    {
-      "path": "./lib/index.js",
-      "maxSize": "35 kb",
-      "compression": "none"
-    }
-  ]
+	"private": false,
+	"name": "@grammarly/react-slate",
+	"version": "0.10.8",
+	"main": "lib/index.js",
+	"module": "lib/index.esm.js",
+	"types": "lib/index.d.ts",
+	"sideEffects": false,
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/grammarly/javascript-plugin.git"
+	},
+	"files": [
+		"lib/index.d.ts",
+		"lib/index.esm.js",
+		"lib/index.js"
+	],
+	"scripts": {
+		"test": "jest",
+		"test:size": "bundlesize"
+	},
+	"dependencies": {
+		"react": ">=16.11.0",
+		"react-dom": ">=16.11.0",
+		"slate": ">=0.58.4",
+		"slate-react": ">=0.58.4"
+	},
+	"devDependencies": {
+		"@grammarly/plugin-core": "0.10.8",
+		"@grammarly/plugin-react-slate": "0.10.8",
+		"@types/jest": "^26.0.14",
+		"bundlesize": "^0.18.0",
+		"jest": "^26.5.2",
+		"ts-jest": "^26.4.1"
+	},
+	"bundlesize": [
+		{
+			"path": "./lib/index.js",
+			"maxSize": "10 kb",
+			"compression": "none"
+		}
+	]
 }

README.md

@@ -1,12 +0,7 @@
-# 👋 Welcome!
+# Grammarly plugin for React + Slate
 
-This demo is for a Grammarly plugin that will allow third-party websites to provide the Grammarly experience without requiring users to have the extension.
+Bringing the Grammarly experience to apps that use [Slate](https://github.com/ianstormtaylor/slate). No browser extension required.
 
-The plugin is a **work-in-progress**. For now, please note the following:
+## Getting started
 
-- You will need to disable the Grammarly browser extension on this site to avoid conflicts.
-- We are currently prioritizing support for React and the Slate editor but will expand in the future.
-
-## Getting Started
-
 Install the Grammarly plugin for Slate:
@@ -18,5 +13,5 @@
 
-Setup an instance of the Slate editor with Grammarly:
+Set up an instance of the Slate editor with Grammarly:
 
-```ts
+```tsx
 // 1. Import Grammarly components
@@ -36,3 +31,3 @@ import { GrammarlyEditable, GrammarlySlate } from "@grammarly/react-slate";
     <Slate value={value} editor={editor} onChange={(value) => setValue(value)}>
-      <GrammarlySlate value={value}>
+      <GrammarlySlate value={value} apiKey="your-api-key-here">
         <GrammarlyEditable />
@@ -44,8 +39,1 @@ </GrammarlySlate>
 ```
-
-### React Components
-
-- **GrammarlySlate** packages Grammarly experience in a simple component.
-- **GrammarlyEditable** wraps Slate's `<Editable/>` component in order to add Grammarly suggestions as highlighted text.
-
-> Check out the [Slate demo](https://developer.grammarly.io/slate).

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15416

increased by7.2%

Lines of code

316

increased by14.91%

Worsened metrics

Number of lines in readme file

37

decreased by-24.49%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes