@tiptap/extension-highlight - npm Package Compare versions

Comparing version 2.11.7 to 3.0.0-beta.0

dist/index.d.ts

@@ -1,4 +0,58 @@
-import { Highlight } from './highlight.js';
-export * from './highlight.js';
-export default Highlight;
-//# sourceMappingURL=index.d.ts.map
+import { Mark } from '@tiptap/core';
+
+interface HighlightOptions {
+    /**
+     * Allow multiple highlight colors
+     * @default false
+     * @example true
+     */
+    multicolor: boolean;
+    /**
+     * HTML attributes to add to the highlight element.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        highlight: {
+            /**
+             * Set a highlight mark
+             * @param attributes The highlight attributes
+             * @example editor.commands.setHighlight({ color: 'red' })
+             */
+            setHighlight: (attributes?: {
+                color: string;
+            }) => ReturnType;
+            /**
+             * Toggle a highlight mark
+             * @param attributes The highlight attributes
+             * @example editor.commands.toggleHighlight({ color: 'red' })
+             */
+            toggleHighlight: (attributes?: {
+                color: string;
+            }) => ReturnType;
+            /**
+             * Unset a highlight mark
+             * @example editor.commands.unsetHighlight()
+             */
+            unsetHighlight: () => ReturnType;
+        };
+    }
+}
+/**
+ * Matches a highlight to a ==highlight== on input.
+ */
+declare const inputRegex: RegExp;
+/**
+ * Matches a highlight to a ==highlight== on paste.
+ */
+declare const pasteRegex: RegExp;
+/**
+ * This extension allows you to highlight text.
+ * @see https://www.tiptap.dev/api/marks/highlight
+ */
+declare const Highlight: Mark<HighlightOptions, any>;
+
+export { Highlight, type HighlightOptions, Highlight as default, inputRegex, pasteRegex };

dist/index.js

@@ -1,90 +0,87 @@
-import { Mark, mergeAttributes, markInputRule, markPasteRule } from '@tiptap/core';
-
-/**
- * Matches a highlight to a ==highlight== on input.
- */
-const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
-/**
- * Matches a highlight to a ==highlight== on paste.
- */
-const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
-/**
- * This extension allows you to highlight text.
- * @see https://www.tiptap.dev/api/marks/highlight
- */
-const Highlight = Mark.create({
-    name: 'highlight',
-    addOptions() {
-        return {
-            multicolor: false,
-            HTMLAttributes: {},
-        };
-    },
-    addAttributes() {
-        if (!this.options.multicolor) {
+// src/highlight.ts
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+var inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
+var pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
+var Highlight = Mark.create({
+  name: "highlight",
+  addOptions() {
+    return {
+      multicolor: false,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    if (!this.options.multicolor) {
+      return {};
+    }
+    return {
+      color: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-color") || element.style.backgroundColor,
+        renderHTML: (attributes) => {
+          if (!attributes.color) {
             return {};
+          }
+          return {
+            "data-color": attributes.color,
+            style: `background-color: ${attributes.color}; color: inherit`
+          };
         }
-        return {
-            color: {
-                default: null,
-                parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,
-                renderHTML: attributes => {
-                    if (!attributes.color) {
-                        return {};
-                    }
-                    return {
-                        'data-color': attributes.color,
-                        style: `background-color: ${attributes.color}; color: inherit`,
-                    };
-                },
-            },
-        };
-    },
-    parseHTML() {
-        return [
-            {
-                tag: 'mark',
-            },
-        ];
-    },
-    renderHTML({ HTMLAttributes }) {
-        return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-    },
-    addCommands() {
-        return {
-            setHighlight: attributes => ({ commands }) => {
-                return commands.setMark(this.name, attributes);
-            },
-            toggleHighlight: attributes => ({ commands }) => {
-                return commands.toggleMark(this.name, attributes);
-            },
-            unsetHighlight: () => ({ commands }) => {
-                return commands.unsetMark(this.name);
-            },
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),
-        };
-    },
-    addInputRules() {
-        return [
-            markInputRule({
-                find: inputRegex,
-                type: this.type,
-            }),
-        ];
-    },
-    addPasteRules() {
-        return [
-            markPasteRule({
-                find: pasteRegex,
-                type: this.type,
-            }),
-        ];
-    },
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mark"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mark", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setHighlight: (attributes) => ({ commands }) => {
+        return commands.setMark(this.name, attributes);
+      },
+      toggleHighlight: (attributes) => ({ commands }) => {
+        return commands.toggleMark(this.name, attributes);
+      },
+      unsetHighlight: () => ({ commands }) => {
+        return commands.unsetMark(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-h": () => this.editor.commands.toggleHighlight()
+    };
+  },
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type
+      })
+    ];
+  }
 });
 
-export { Highlight, Highlight as default, inputRegex, pasteRegex };
-//# sourceMappingURL=index.js.map
+// src/index.ts
+var index_default = Highlight;
+export {
+  Highlight,
+  index_default as default,
+  inputRegex,
+  pasteRegex
+};
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@tiptap/extension-highlight",
   "description": "highlight extension for tiptap",
-  "version": "2.11.7",
+  "version": "3.0.0-beta.0",
   "homepage": "https://tiptap.dev",
@@ -18,3 +18,6 @@ "keywords": [
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
@@ -26,3 +29,2 @@ "require": "./dist/index.cjs"
   "module": "dist/index.js",
-  "umd": "dist/index.umd.js",
   "types": "dist/index.d.ts",
@@ -34,6 +36,6 @@ "files": [
   "devDependencies": {
-    "@tiptap/core": "^2.11.7"
+    "@tiptap/core": "^3.0.0-beta.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.7.0"
+    "@tiptap/core": "^3.0.0-beta.0"
   },
@@ -46,5 +48,5 @@ "repository": {
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && rollup -c"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

README.md

 # @tiptap/extension-highlight
+
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-highlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-highlight)
@@ -8,8 +9,11 @@ [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-highlight.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
 ## Introduction
-Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
+
 ## Official Documentation
+
 Documentation can be found on the [Tiptap website](https://tiptap.dev).
 
 ## License
+
 Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

src/highlight.ts

@@ -1,7 +0,2 @@
-import {
-  Mark,
-  markInputRule,
-  markPasteRule,
-  mergeAttributes,
-} from '@tiptap/core'
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
 
@@ -14,3 +9,3 @@ export interface HighlightOptions {
    */
-  multicolor: boolean,
+  multicolor: boolean
 
@@ -22,3 +17,3 @@ /**
    */
-  HTMLAttributes: Record<string, any>,
+  HTMLAttributes: Record<string, any>
 }
@@ -34,3 +29,3 @@
        */
-      setHighlight: (attributes?: { color: string }) => ReturnType,
+      setHighlight: (attributes?: { color: string }) => ReturnType
       /**
@@ -41,3 +36,3 @@ * Toggle a highlight mark
        */
-      toggleHighlight: (attributes?: { color: string }) => ReturnType,
+      toggleHighlight: (attributes?: { color: string }) => ReturnType
       /**
@@ -47,3 +42,3 @@ * Unset a highlight mark
        */
-      unsetHighlight: () => ReturnType,
+      unsetHighlight: () => ReturnType
     }
@@ -114,11 +109,17 @@ }
     return {
-      setHighlight: attributes => ({ commands }) => {
-        return commands.setMark(this.name, attributes)
-      },
-      toggleHighlight: attributes => ({ commands }) => {
-        return commands.toggleMark(this.name, attributes)
-      },
-      unsetHighlight: () => ({ commands }) => {
-        return commands.unsetMark(this.name)
-      },
+      setHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes)
+        },
+      toggleHighlight:
+        attributes =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes)
+        },
+      unsetHighlight:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name)
+        },
     }
@@ -125,0 +126,0 @@ },

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

19

26.67%

Worsened metrics

Total package byte prevSize

25017

-21.55%

Number of package files

11

-21.43%

Lines of code

385

-17.56%

Number of low quality alerts

1

Infinity%

No dependency changes