@tiptap/extension-text-style - npm Package Compare versions

Comparing version 3.0.0-next.3 to 3.0.0-next.4

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { Mark } from '@tiptap/core';
+import { Mark, Extension } from '@tiptap/core';
 
@@ -27,2 +27,8 @@ interface TextStyleOptions {
             removeEmptyTextStyle: () => ReturnType;
+            /**
+             * Toggle a text style
+             * @param attributes The text style attributes
+             * @example editor.commands.toggleTextStyle({ fontWeight: 'bold' })
+             */
+            toggleTextStyle: (attributes?: TextStyleAttributes) => ReturnType;
         };
@@ -33,3 +39,3 @@ }
  * This extension allows you to create text styles. It is required by default
- * for the `textColor` and `backgroundColor` extensions.
+ * for the `text-color` and `font-family` extensions.
  * @see https://www.tiptap.dev/api/marks/text-style
@@ -39,2 +45,227 @@ */
 
-export { TextStyle, type TextStyleOptions, TextStyle as default };
+type BackgroundColorOptions = {
+    /**
+     * The types where the color can be applied
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        backgroundColor: {
+            /**
+             * Set the text color
+             * @param backgroundColor The color to set
+             * @example editor.commands.setColor('red')
+             */
+            setBackgroundColor: (backgroundColor: string) => ReturnType;
+            /**
+             * Unset the text backgroundColor
+             * @example editor.commands.unsetBackgroundColor()
+             */
+            unsetBackgroundColor: () => ReturnType;
+        };
+    }
+}
+declare module '@tiptap/extension-text-style' {
+    interface TextStyleAttributes {
+        backgroundColor?: string | null;
+    }
+}
+/**
+ * This extension allows you to color your text.
+ * @see https://tiptap.dev/api/extensions/background-color
+ */
+declare const BackgroundColor: Extension<BackgroundColorOptions, any>;
+
+type ColorOptions = {
+    /**
+     * The types where the color can be applied
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        color: {
+            /**
+             * Set the text color
+             * @param color The color to set
+             * @example editor.commands.setColor('red')
+             */
+            setColor: (color: string) => ReturnType;
+            /**
+             * Unset the text color
+             * @example editor.commands.unsetColor()
+             */
+            unsetColor: () => ReturnType;
+        };
+    }
+}
+declare module '@tiptap/extension-text-style' {
+    interface TextStyleAttributes {
+        color?: string | null;
+    }
+}
+/**
+ * This extension allows you to color your text.
+ * @see https://tiptap.dev/api/extensions/color
+ */
+declare const Color: Extension<ColorOptions, any>;
+
+type FontFamilyOptions = {
+    /**
+     * A list of node names where the font family can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontFamily: {
+            /**
+             * Set the font family
+             * @param fontFamily The font family
+             * @example editor.commands.setFontFamily('Arial')
+             */
+            setFontFamily: (fontFamily: string) => ReturnType;
+            /**
+             * Unset the font family
+             * @example editor.commands.unsetFontFamily()
+             */
+            unsetFontFamily: () => ReturnType;
+        };
+    }
+}
+declare module '@tiptap/extension-text-style' {
+    interface TextStyleAttributes {
+        fontFamily?: string | null;
+    }
+}
+/**
+ * This extension allows you to set a font family for text.
+ * @see https://www.tiptap.dev/api/extensions/font-family
+ */
+declare const FontFamily: Extension<FontFamilyOptions, any>;
+
+type FontSizeOptions = {
+    /**
+     * A list of node names where the font size can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the font size
+             * @param fontSize The font size
+             * @example editor.commands.setFontSize('Arial')
+             */
+            setFontSize: (fontSize: string) => ReturnType;
+            /**
+             * Unset the font size
+             * @example editor.commands.unsetFontSize()
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+declare module '@tiptap/extension-text-style' {
+    interface TextStyleAttributes {
+        fontSize?: string | null;
+    }
+}
+/**
+ * This extension allows you to set a font size for text.
+ * @see https://www.tiptap.dev/api/extensions/font-size
+ */
+declare const FontSize: Extension<FontSizeOptions, any>;
+
+type LineHeightOptions = {
+    /**
+     * A list of node names where the line height can be applied.
+     * @default ['textStyle']
+     * @example ['heading', 'paragraph']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            /**
+             * Set the line height
+             * @param lineHeight The line height
+             * @example editor.commands.setLineHeight('1.5')
+             */
+            setLineHeight: (lineHeight: string) => ReturnType;
+            /**
+             * Unset the line height
+             * @example editor.commands.unsetLineHeight()
+             */
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+declare module '@tiptap/extension-text-style' {
+    interface TextStyleAttributes {
+        lineHeight?: string | null;
+    }
+}
+/**
+ * This extension allows you to set the line-height for text.
+ * @see https://www.tiptap.dev/api/extensions/line-height
+ */
+declare const LineHeight: Extension<LineHeightOptions, any>;
+
+interface TextStyleKitOptions {
+    /**
+     * If set to false, the background color extension will not be registered
+     * @example backgroundColor: false
+     */
+    backgroundColor: Partial<BackgroundColorOptions> | false;
+    /**
+     * If set to false, the color extension will not be registered
+     * @example color: false
+     */
+    color: Partial<ColorOptions> | false;
+    /**
+     * If set to false, the font family extension will not be registered
+     * @example fontFamily: false
+     */
+    fontFamily: Partial<FontFamilyOptions> | false;
+    /**
+     * If set to false, the font size extension will not be registered
+     * @example fontSize: false
+     */
+    fontSize: Partial<FontSizeOptions> | false;
+    /**
+     * If set to false, the line height extension will not be registered
+     * @example lineHeight: false
+     */
+    lineHeight: Partial<LineHeightOptions> | false;
+    /**
+     * If set to false, the text style extension will not be registered (required for other text style extensions)
+     * @example textStyle: false
+     */
+    textStyle: Partial<TextStyleOptions> | false;
+}
+/**
+ * The table kit is a collection of table editor extensions.
+ *
+ * It’s a good starting point for building your own table in Tiptap.
+ */
+declare const TextStyleKit: Extension<TextStyleKitOptions, any>;
+
+/**
+ * The available text style attributes.
+ */
+interface TextStyleAttributes extends Record<string, any> {
+}
+
+export { BackgroundColor, type BackgroundColorOptions, Color, type ColorOptions, FontFamily, type FontFamilyOptions, FontSize, type FontSizeOptions, LineHeight, type LineHeightOptions, TextStyle, type TextStyleAttributes, TextStyleKit, type TextStyleKitOptions, type TextStyleOptions };

dist/index.js

@@ -1,7 +0,3 @@
-// src/text-style.ts
-import {
-  getMarkAttributes,
-  Mark,
-  mergeAttributes
-} from "@tiptap/core";
+// src/text-style/index.ts
+import { Mark, mergeAttributes } from "@tiptap/core";
 var mergeNestedSpanStyles = (element) => {
@@ -35,2 +31,3 @@ if (!element.children.length) {
         tag: "span",
+        consuming: false,
         getAttrs: (element) => {
@@ -54,10 +51,62 @@ const hasStyles = element.hasAttribute("style");
     return {
-      removeEmptyTextStyle: () => ({ state, commands }) => {
-        const attributes = getMarkAttributes(state, this.type);
-        const hasStyles = Object.entries(attributes).some(([, value]) => !!value);
-        if (hasStyles) {
-          return true;
+      toggleTextStyle: (attributes) => ({ commands }) => {
+        return commands.toggleMark(this.name, attributes);
+      },
+      removeEmptyTextStyle: () => ({ tr }) => {
+        const { selection } = tr;
+        tr.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+          if (node.isTextblock) {
+            return true;
+          }
+          if (!node.marks.filter((mark) => mark.type === this.type).some((mark) => Object.values(mark.attrs).some((value) => !!value))) {
+            tr.removeMark(pos, pos + node.nodeSize, this.type);
+          }
+        });
+        return true;
+      }
+    };
+  }
+});
+
+// src/background-color/background-color.ts
+import { Extension } from "@tiptap/core";
+var BackgroundColor = Extension.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              return (_a = element.style.backgroundColor) == null ? void 0 : _a.replace(/['"]+/g, "");
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.backgroundColor) {
+                return {};
+              }
+              return {
+                style: `background-color: ${attributes.backgroundColor}`
+              };
+            }
+          }
         }
-        return commands.unsetMark(this.name);
       }
+    ];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (backgroundColor) => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor }).run();
+      },
+      unsetBackgroundColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run();
+      }
     };
@@ -67,8 +116,209 @@ }
 
-// src/index.ts
-var src_default = TextStyle;
+// src/color/color.ts
+import { Extension as Extension2 } from "@tiptap/core";
+var Color = Extension2.create({
+  name: "color",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element) => {
+              var _a;
+              return (_a = element.style.color) == null ? void 0 : _a.replace(/['"]+/g, "");
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.color) {
+                return {};
+              }
+              return {
+                style: `color: ${attributes.color}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setColor: (color) => ({ chain }) => {
+        return chain().setMark("textStyle", { color }).run();
+      },
+      unsetColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { color: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/font-family/font-family.ts
+import { Extension as Extension3 } from "@tiptap/core";
+var FontFamily = Extension3.create({
+  name: "fontFamily",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) => element.style.fontFamily,
+            renderHTML: (attributes) => {
+              if (!attributes.fontFamily) {
+                return {};
+              }
+              return {
+                style: `font-family: ${attributes.fontFamily}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontFamily: (fontFamily) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontFamily }).run();
+      },
+      unsetFontFamily: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/font-size/font-size.ts
+import { Extension as Extension4 } from "@tiptap/core";
+var FontSize = Extension4.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize,
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize }).run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/line-height/line-height.ts
+import { Extension as Extension5 } from "@tiptap/core";
+var LineHeight = Extension5.create({
+  name: "lineHeight",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          lineHeight: {
+            default: null,
+            parseHTML: (element) => element.style.lineHeight,
+            renderHTML: (attributes) => {
+              if (!attributes.lineHeight) {
+                return {};
+              }
+              return {
+                style: `line-height: ${attributes.lineHeight}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setLineHeight: (lineHeight) => ({ chain }) => {
+        return chain().setMark("textStyle", { lineHeight }).run();
+      },
+      unsetLineHeight: () => ({ chain }) => {
+        return chain().setMark("textStyle", { lineHeight: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/text-style-kit/index.ts
+import { Extension as Extension6 } from "@tiptap/core";
+var TextStyleKit = Extension6.create({
+  name: "textStyleKit",
+  addExtensions() {
+    const extensions = [];
+    if (this.options.backgroundColor !== false) {
+      extensions.push(BackgroundColor.configure(this.options.backgroundColor));
+    }
+    if (this.options.color !== false) {
+      extensions.push(Color.configure(this.options.color));
+    }
+    if (this.options.fontFamily !== false) {
+      extensions.push(FontFamily.configure(this.options.fontFamily));
+    }
+    if (this.options.fontSize !== false) {
+      extensions.push(FontSize.configure(this.options.fontSize));
+    }
+    if (this.options.lineHeight !== false) {
+      extensions.push(LineHeight.configure(this.options.lineHeight));
+    }
+    if (this.options.textStyle !== false) {
+      extensions.push(TextStyle.configure(this.options.textStyle));
+    }
+    return extensions;
+  }
+});
 export {
+  BackgroundColor,
+  Color,
+  FontFamily,
+  FontSize,
+  LineHeight,
   TextStyle,
-  src_default as default
+  TextStyleKit
 };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@tiptap/extension-text-style",
   "description": "text style extension for tiptap",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "homepage": "https://tiptap.dev",
@@ -18,5 +18,64 @@ "keywords": [
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./background-color": {
+      "types": {
+        "import": "./dist/background-color/index.d.ts",
+        "require": "./dist/background-color/index.d.cts"
+      },
+      "import": "./dist/background-color/index.js",
+      "require": "./dist/background-color/index.cjs"
+    },
+    "./color": {
+      "types": {
+        "import": "./dist/color/index.d.ts",
+        "require": "./dist/color/index.d.cts"
+      },
+      "import": "./dist/color/index.js",
+      "require": "./dist/color/index.cjs"
+    },
+    "./font-family": {
+      "types": {
+        "import": "./dist/font-family/index.d.ts",
+        "require": "./dist/font-family/index.d.cts"
+      },
+      "import": "./dist/font-family/index.js",
+      "require": "./dist/font-family/index.cjs"
+    },
+    "./font-size": {
+      "types": {
+        "import": "./dist/font-size/index.d.ts",
+        "require": "./dist/font-size/index.d.cts"
+      },
+      "import": "./dist/font-size/index.js",
+      "require": "./dist/font-size/index.cjs"
+    },
+    "./line-height": {
+      "types": {
+        "import": "./dist/line-height/index.d.ts",
+        "require": "./dist/line-height/index.d.cts"
+      },
+      "import": "./dist/line-height/index.js",
+      "require": "./dist/line-height/index.cjs"
+    },
+    "./text-style": {
+      "types": {
+        "import": "./dist/text-style/index.d.ts",
+        "require": "./dist/text-style/index.d.cts"
+      },
+      "import": "./dist/text-style/index.js",
+      "require": "./dist/text-style/index.cjs"
+    },
+    "./text-style-kit": {
+      "types": {
+        "import": "./dist/text-style-kit/index.d.ts",
+        "require": "./dist/text-style-kit/index.d.cts"
+      },
+      "import": "./dist/text-style-kit/index.js",
+      "require": "./dist/text-style-kit/index.cjs"
     }
@@ -32,3 +91,3 @@ },
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3"
+    "@tiptap/core": "^3.0.0-next.4"
   },
@@ -44,4 +103,5 @@ "peerDependencies": {
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

README.md

 # @tiptap/extension-text-style
+
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-text-style.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-style)
@@ -8,8 +9,11 @@ [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-style.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/index.ts

@@ -1,5 +0,14 @@
-import { TextStyle } from './text-style.js'
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 
-export * from './text-style.js'
+export * from './background-color/index.js'
+export * from './color/index.js'
+export * from './font-family/index.js'
+export * from './font-size/index.js'
+export * from './line-height/index.js'
+export * from './text-style/index.js'
+export * from './text-style-kit/index.js'
 
-export default TextStyle
+/**
+ * The available text style attributes.
+ */
+export interface TextStyleAttributes extends Record<string, any> {}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

380797

increased by1802.46%

Number of package files

64

increased by540%

Lines of code

4740

increased by1569.01%

Number of lines in readme file

19

increased by26.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes