@tiptap/extension-color 2.3.1 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +4 -0
- package/dist/index.umd.js.map +1 -1
- package/dist/packages/extension-color/src/color.d.ts +12 -0
- package/package.json +3 -3
- package/src/color.ts +13 -0
package/dist/index.cjs
CHANGED
|
@@ -5,6 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
require('@tiptap/extension-text-style');
|
|
6
6
|
var core = require('@tiptap/core');
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* This extension allows you to color your text.
|
|
10
|
+
* @see https://tiptap.dev/api/extensions/color
|
|
11
|
+
*/
|
|
8
12
|
const Color = core.Extension.create({
|
|
9
13
|
name: 'color',
|
|
10
14
|
addOptions() {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n */\n setColor: (color: string) => ReturnType,\n /**\n * Unset the text color\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n /**\n * The types where the color can be applied\n * @default ['textStyle']\n * @example ['heading', 'paragraph']\n */\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n * @param color The color to set\n * @example editor.commands.setColor('red')\n */\n setColor: (color: string) => ReturnType,\n\n /**\n * Unset the text color\n * @example editor.commands.unsetColor()\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to color your text.\n * @see https://tiptap.dev/api/extensions/color\n */\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;;AAgCA;;;AAGG;AACU,MAAA,KAAK,GAAGA,cAAS,CAAC,MAAM,CAAe;AAClD,IAAA,IAAI,EAAE,OAAO;IAEb,UAAU,GAAA;QACR,OAAO;YACL,KAAK,EAAE,CAAC,WAAW,CAAC;SACrB,CAAA;KACF;IAED,mBAAmB,GAAA;QACjB,OAAO;AACL,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;AACzB,gBAAA,UAAU,EAAE;AACV,oBAAA,KAAK,EAAE;AACL,wBAAA,OAAO,EAAE,IAAI;wBACb,SAAS,EAAE,OAAO,cAAI,OAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA,EAAA;wBAChE,UAAU,EAAE,UAAU,IAAG;AACvB,4BAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,gCAAA,OAAO,EAAE,CAAA;AACV,6BAAA;4BAED,OAAO;AACL,gCAAA,KAAK,EAAE,CAAA,OAAA,EAAU,UAAU,CAAC,KAAK,CAAE,CAAA;6BACpC,CAAA;yBACF;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;SACF,CAAA;KACF;IAED,WAAW,GAAA;QACT,OAAO;YACL,QAAQ,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,KAAI;AAC/B,gBAAA,OAAO,KAAK,EAAE;AACX,qBAAA,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC;AAC/B,qBAAA,GAAG,EAAE,CAAA;aACT;YACD,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAI;AAC9B,gBAAA,OAAO,KAAK,EAAE;qBACX,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACrC,qBAAA,oBAAoB,EAAE;AACtB,qBAAA,GAAG,EAAE,CAAA;aACT;SACF,CAAA;KACF;AACF,CAAA;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import '@tiptap/extension-text-style';
|
|
2
2
|
import { Extension } from '@tiptap/core';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* This extension allows you to color your text.
|
|
6
|
+
* @see https://tiptap.dev/api/extensions/color
|
|
7
|
+
*/
|
|
4
8
|
const Color = Extension.create({
|
|
5
9
|
name: 'color',
|
|
6
10
|
addOptions() {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n */\n setColor: (color: string) => ReturnType,\n /**\n * Unset the text color\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n /**\n * The types where the color can be applied\n * @default ['textStyle']\n * @example ['heading', 'paragraph']\n */\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n * @param color The color to set\n * @example editor.commands.setColor('red')\n */\n setColor: (color: string) => ReturnType,\n\n /**\n * Unset the text color\n * @example editor.commands.unsetColor()\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to color your text.\n * @see https://tiptap.dev/api/extensions/color\n */\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":[],"mappings":";;;AAgCA;;;AAGG;AACU,MAAA,KAAK,GAAG,SAAS,CAAC,MAAM,CAAe;AAClD,IAAA,IAAI,EAAE,OAAO;IAEb,UAAU,GAAA;QACR,OAAO;YACL,KAAK,EAAE,CAAC,WAAW,CAAC;SACrB,CAAA;KACF;IAED,mBAAmB,GAAA;QACjB,OAAO;AACL,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;AACzB,gBAAA,UAAU,EAAE;AACV,oBAAA,KAAK,EAAE;AACL,wBAAA,OAAO,EAAE,IAAI;wBACb,SAAS,EAAE,OAAO,cAAI,OAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA,EAAA;wBAChE,UAAU,EAAE,UAAU,IAAG;AACvB,4BAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,gCAAA,OAAO,EAAE,CAAA;AACV,6BAAA;4BAED,OAAO;AACL,gCAAA,KAAK,EAAE,CAAA,OAAA,EAAU,UAAU,CAAC,KAAK,CAAE,CAAA;6BACpC,CAAA;yBACF;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;SACF,CAAA;KACF;IAED,WAAW,GAAA;QACT,OAAO;YACL,QAAQ,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,KAAI;AAC/B,gBAAA,OAAO,KAAK,EAAE;AACX,qBAAA,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC;AAC/B,qBAAA,GAAG,EAAE,CAAA;aACT;YACD,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAI;AAC9B,gBAAA,OAAO,KAAK,EAAE;qBACX,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACrC,qBAAA,oBAAoB,EAAE;AACtB,qBAAA,GAAG,EAAE,CAAA;aACT;SACF,CAAA;KACF;AACF,CAAA;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -4,6 +4,10 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-color"] = {}, null, global.core));
|
|
5
5
|
})(this, (function (exports, extensionTextStyle, core) { 'use strict';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* This extension allows you to color your text.
|
|
9
|
+
* @see https://tiptap.dev/api/extensions/color
|
|
10
|
+
*/
|
|
7
11
|
const Color = core.Extension.create({
|
|
8
12
|
name: 'color',
|
|
9
13
|
addOptions() {
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n */\n setColor: (color: string) => ReturnType,\n /**\n * Unset the text color\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/color.ts"],"sourcesContent":["import '@tiptap/extension-text-style'\n\nimport { Extension } from '@tiptap/core'\n\nexport type ColorOptions = {\n /**\n * The types where the color can be applied\n * @default ['textStyle']\n * @example ['heading', 'paragraph']\n */\n types: string[],\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n color: {\n /**\n * Set the text color\n * @param color The color to set\n * @example editor.commands.setColor('red')\n */\n setColor: (color: string) => ReturnType,\n\n /**\n * Unset the text color\n * @example editor.commands.unsetColor()\n */\n unsetColor: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to color your text.\n * @see https://tiptap.dev/api/extensions/color\n */\nexport const Color = Extension.create<ColorOptions>({\n name: 'color',\n\n addOptions() {\n return {\n types: ['textStyle'],\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n color: {\n default: null,\n parseHTML: element => element.style.color?.replace(/['\"]+/g, ''),\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n style: `color: ${attributes.color}`,\n }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setColor: color => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color })\n .run()\n },\n unsetColor: () => ({ chain }) => {\n return chain()\n .setMark('textStyle', { color: null })\n .removeEmptyTextStyle()\n .run()\n },\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;EAgCA;;;EAGG;AACU,QAAA,KAAK,GAAGA,cAAS,CAAC,MAAM,CAAe;EAClD,IAAA,IAAI,EAAE,OAAO;MAEb,UAAU,GAAA;UACR,OAAO;cACL,KAAK,EAAE,CAAC,WAAW,CAAC;WACrB,CAAA;OACF;MAED,mBAAmB,GAAA;UACjB,OAAO;EACL,YAAA;EACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;EACzB,gBAAA,UAAU,EAAE;EACV,oBAAA,KAAK,EAAE;EACL,wBAAA,OAAO,EAAE,IAAI;0BACb,SAAS,EAAE,OAAO,cAAI,OAAA,CAAA,EAAA,GAAA,OAAO,CAAC,KAAK,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA,EAAA;0BAChE,UAAU,EAAE,UAAU,IAAG;EACvB,4BAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;EACrB,gCAAA,OAAO,EAAE,CAAA;EACV,6BAAA;8BAED,OAAO;EACL,gCAAA,KAAK,EAAE,CAAA,OAAA,EAAU,UAAU,CAAC,KAAK,CAAE,CAAA;+BACpC,CAAA;2BACF;EACF,qBAAA;EACF,iBAAA;EACF,aAAA;WACF,CAAA;OACF;MAED,WAAW,GAAA;UACT,OAAO;cACL,QAAQ,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,KAAI;EAC/B,gBAAA,OAAO,KAAK,EAAE;EACX,qBAAA,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC;EAC/B,qBAAA,GAAG,EAAE,CAAA;eACT;cACD,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,KAAI;EAC9B,gBAAA,OAAO,KAAK,EAAE;uBACX,OAAO,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;EACrC,qBAAA,oBAAoB,EAAE;EACtB,qBAAA,GAAG,EAAE,CAAA;eACT;WACF,CAAA;OACF;EACF,CAAA;;;;;;;;;;;"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import '@tiptap/extension-text-style';
|
|
2
2
|
import { Extension } from '@tiptap/core';
|
|
3
3
|
export declare type ColorOptions = {
|
|
4
|
+
/**
|
|
5
|
+
* The types where the color can be applied
|
|
6
|
+
* @default ['textStyle']
|
|
7
|
+
* @example ['heading', 'paragraph']
|
|
8
|
+
*/
|
|
4
9
|
types: string[];
|
|
5
10
|
};
|
|
6
11
|
declare module '@tiptap/core' {
|
|
@@ -8,13 +13,20 @@ declare module '@tiptap/core' {
|
|
|
8
13
|
color: {
|
|
9
14
|
/**
|
|
10
15
|
* Set the text color
|
|
16
|
+
* @param color The color to set
|
|
17
|
+
* @example editor.commands.setColor('red')
|
|
11
18
|
*/
|
|
12
19
|
setColor: (color: string) => ReturnType;
|
|
13
20
|
/**
|
|
14
21
|
* Unset the text color
|
|
22
|
+
* @example editor.commands.unsetColor()
|
|
15
23
|
*/
|
|
16
24
|
unsetColor: () => ReturnType;
|
|
17
25
|
};
|
|
18
26
|
}
|
|
19
27
|
}
|
|
28
|
+
/**
|
|
29
|
+
* This extension allows you to color your text.
|
|
30
|
+
* @see https://tiptap.dev/api/extensions/color
|
|
31
|
+
*/
|
|
20
32
|
export declare const Color: Extension<ColorOptions, any>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-color",
|
|
3
3
|
"description": "text color extension for tiptap",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.4.0",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"dist"
|
|
30
30
|
],
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tiptap/core": "^2.
|
|
33
|
-
"@tiptap/extension-text-style": "^2.
|
|
32
|
+
"@tiptap/core": "^2.4.0",
|
|
33
|
+
"@tiptap/extension-text-style": "^2.4.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@tiptap/core": "^2.0.0",
|
package/src/color.ts
CHANGED
|
@@ -3,6 +3,11 @@ import '@tiptap/extension-text-style'
|
|
|
3
3
|
import { Extension } from '@tiptap/core'
|
|
4
4
|
|
|
5
5
|
export type ColorOptions = {
|
|
6
|
+
/**
|
|
7
|
+
* The types where the color can be applied
|
|
8
|
+
* @default ['textStyle']
|
|
9
|
+
* @example ['heading', 'paragraph']
|
|
10
|
+
*/
|
|
6
11
|
types: string[],
|
|
7
12
|
}
|
|
8
13
|
|
|
@@ -11,16 +16,24 @@ declare module '@tiptap/core' {
|
|
|
11
16
|
color: {
|
|
12
17
|
/**
|
|
13
18
|
* Set the text color
|
|
19
|
+
* @param color The color to set
|
|
20
|
+
* @example editor.commands.setColor('red')
|
|
14
21
|
*/
|
|
15
22
|
setColor: (color: string) => ReturnType,
|
|
23
|
+
|
|
16
24
|
/**
|
|
17
25
|
* Unset the text color
|
|
26
|
+
* @example editor.commands.unsetColor()
|
|
18
27
|
*/
|
|
19
28
|
unsetColor: () => ReturnType,
|
|
20
29
|
}
|
|
21
30
|
}
|
|
22
31
|
}
|
|
23
32
|
|
|
33
|
+
/**
|
|
34
|
+
* This extension allows you to color your text.
|
|
35
|
+
* @see https://tiptap.dev/api/extensions/color
|
|
36
|
+
*/
|
|
24
37
|
export const Color = Extension.create<ColorOptions>({
|
|
25
38
|
name: 'color',
|
|
26
39
|
|