@tiptap/extension-text-align 2.3.2 → 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 +10 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +10 -2
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +10 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/packages/extension-text-align/src/text-align.d.ts +22 -0
- package/package.json +2 -2
- package/src/text-align.ts +30 -2
package/dist/index.cjs
CHANGED
|
@@ -4,6 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var core = require('@tiptap/core');
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* This extension allows you to align text.
|
|
9
|
+
* @see https://www.tiptap.dev/api/extensions/text-align
|
|
10
|
+
*/
|
|
7
11
|
const TextAlign = core.Extension.create({
|
|
8
12
|
name: 'textAlign',
|
|
9
13
|
addOptions() {
|
|
@@ -38,10 +42,14 @@ const TextAlign = core.Extension.create({
|
|
|
38
42
|
if (!this.options.alignments.includes(alignment)) {
|
|
39
43
|
return false;
|
|
40
44
|
}
|
|
41
|
-
return this.options.types
|
|
45
|
+
return this.options.types
|
|
46
|
+
.map(type => commands.updateAttributes(type, { textAlign: alignment }))
|
|
47
|
+
.every(response => response);
|
|
42
48
|
},
|
|
43
49
|
unsetTextAlign: () => ({ commands }) => {
|
|
44
|
-
return this.options.types
|
|
50
|
+
return this.options.types
|
|
51
|
+
.map(type => commands.resetAttributes(type, 'textAlign'))
|
|
52
|
+
.every(response => response);
|
|
45
53
|
},
|
|
46
54
|
};
|
|
47
55
|
},
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n types: string[],\n alignments: string[],\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types.
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n /**\n * The types where the text align attribute can be applied.\n * @default []\n * @example ['heading', 'paragraph']\n */\n types: string[],\n\n /**\n * The alignments which are allowed.\n * @default ['left', 'center', 'right', 'justify']\n * @example ['left', 'right']\n */\n alignments: string[],\n\n /**\n * The default alignment.\n * @default 'left'\n * @example 'center'\n */\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n * @param alignment The alignment\n * @example editor.commands.setTextAlign('left')\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n * @example editor.commands.unsetTextAlign()\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to align text.\n * @see https://www.tiptap.dev/api/extensions/text-align\n */\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types\n .map(type => commands.updateAttributes(type, { textAlign: alignment }))\n .every(response => response)\n },\n\n unsetTextAlign: () => ({ commands }) => {\n return this.options.types\n .map(type => commands.resetAttributes(type, 'textAlign'))\n .every(response => response)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),\n 'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),\n 'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),\n 'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;AA2CA;;;AAGG;AACU,MAAA,SAAS,GAAGA,cAAS,CAAC,MAAM,CAAmB;AAC1D,IAAA,IAAI,EAAE,WAAW;IAEjB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAClD,YAAA,gBAAgB,EAAE,MAAM;SACzB,CAAA;KACF;IAED,mBAAmB,GAAA;QACjB,OAAO;AACL,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;AACzB,gBAAA,UAAU,EAAE;AACV,oBAAA,SAAS,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB;AACtC,wBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB;wBAC9E,UAAU,EAAE,UAAU,IAAG;4BACvB,IAAI,UAAU,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE;AAC1D,gCAAA,OAAO,EAAE,CAAA;AACV,6BAAA;4BAED,OAAO,EAAE,KAAK,EAAE,CAAA,YAAA,EAAe,UAAU,CAAC,SAAS,CAAE,CAAA,EAAE,CAAA;yBACxD;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;SACF,CAAA;KACF;IAED,WAAW,GAAA;QACT,OAAO;YACL,YAAY,EAAE,CAAC,SAAiB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAI;gBACpD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAChD,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;AACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;AACtE,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;aAC/B;YAED,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;AACrC,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;AACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AACxD,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;aAC/B;SACF,CAAA;KACF;IAED,oBAAoB,GAAA;QAClB,OAAO;AACL,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;AAC9D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC;AAChE,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC;SAClE,CAAA;KACF;AACF,CAAA;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { Extension } from '@tiptap/core';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* This extension allows you to align text.
|
|
5
|
+
* @see https://www.tiptap.dev/api/extensions/text-align
|
|
6
|
+
*/
|
|
3
7
|
const TextAlign = Extension.create({
|
|
4
8
|
name: 'textAlign',
|
|
5
9
|
addOptions() {
|
|
@@ -34,10 +38,14 @@ const TextAlign = Extension.create({
|
|
|
34
38
|
if (!this.options.alignments.includes(alignment)) {
|
|
35
39
|
return false;
|
|
36
40
|
}
|
|
37
|
-
return this.options.types
|
|
41
|
+
return this.options.types
|
|
42
|
+
.map(type => commands.updateAttributes(type, { textAlign: alignment }))
|
|
43
|
+
.every(response => response);
|
|
38
44
|
},
|
|
39
45
|
unsetTextAlign: () => ({ commands }) => {
|
|
40
|
-
return this.options.types
|
|
46
|
+
return this.options.types
|
|
47
|
+
.map(type => commands.resetAttributes(type, 'textAlign'))
|
|
48
|
+
.every(response => response);
|
|
41
49
|
},
|
|
42
50
|
};
|
|
43
51
|
},
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n types: string[],\n alignments: string[],\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n /**\n * The types where the text align attribute can be applied.\n * @default []\n * @example ['heading', 'paragraph']\n */\n types: string[],\n\n /**\n * The alignments which are allowed.\n * @default ['left', 'center', 'right', 'justify']\n * @example ['left', 'right']\n */\n alignments: string[],\n\n /**\n * The default alignment.\n * @default 'left'\n * @example 'center'\n */\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n * @param alignment The alignment\n * @example editor.commands.setTextAlign('left')\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n * @example editor.commands.unsetTextAlign()\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to align text.\n * @see https://www.tiptap.dev/api/extensions/text-align\n */\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types\n .map(type => commands.updateAttributes(type, { textAlign: alignment }))\n .every(response => response)\n },\n\n unsetTextAlign: () => ({ commands }) => {\n return this.options.types\n .map(type => commands.resetAttributes(type, 'textAlign'))\n .every(response => response)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),\n 'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),\n 'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),\n 'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),\n }\n },\n})\n"],"names":[],"mappings":";;AA2CA;;;AAGG;AACU,MAAA,SAAS,GAAG,SAAS,CAAC,MAAM,CAAmB;AAC1D,IAAA,IAAI,EAAE,WAAW;IAEjB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;AAClD,YAAA,gBAAgB,EAAE,MAAM;SACzB,CAAA;KACF;IAED,mBAAmB,GAAA;QACjB,OAAO;AACL,YAAA;AACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;AACzB,gBAAA,UAAU,EAAE;AACV,oBAAA,SAAS,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB;AACtC,wBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB;wBAC9E,UAAU,EAAE,UAAU,IAAG;4BACvB,IAAI,UAAU,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE;AAC1D,gCAAA,OAAO,EAAE,CAAA;AACV,6BAAA;4BAED,OAAO,EAAE,KAAK,EAAE,CAAA,YAAA,EAAe,UAAU,CAAC,SAAS,CAAE,CAAA,EAAE,CAAA;yBACxD;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;SACF,CAAA;KACF;IAED,WAAW,GAAA;QACT,OAAO;YACL,YAAY,EAAE,CAAC,SAAiB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAI;gBACpD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AAChD,oBAAA,OAAO,KAAK,CAAA;AACb,iBAAA;AAED,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;AACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;AACtE,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;aAC/B;YAED,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;AACrC,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;AACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AACxD,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;aAC/B;SACF,CAAA;KACF;IAED,oBAAoB,GAAA;QAClB,OAAO;AACL,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;AAC9D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC;AAChE,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC;SAClE,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-text-align"] = {}, global.core));
|
|
5
5
|
})(this, (function (exports, core) { 'use strict';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* This extension allows you to align text.
|
|
9
|
+
* @see https://www.tiptap.dev/api/extensions/text-align
|
|
10
|
+
*/
|
|
7
11
|
const TextAlign = core.Extension.create({
|
|
8
12
|
name: 'textAlign',
|
|
9
13
|
addOptions() {
|
|
@@ -38,10 +42,14 @@
|
|
|
38
42
|
if (!this.options.alignments.includes(alignment)) {
|
|
39
43
|
return false;
|
|
40
44
|
}
|
|
41
|
-
return this.options.types
|
|
45
|
+
return this.options.types
|
|
46
|
+
.map(type => commands.updateAttributes(type, { textAlign: alignment }))
|
|
47
|
+
.every(response => response);
|
|
42
48
|
},
|
|
43
49
|
unsetTextAlign: () => ({ commands }) => {
|
|
44
|
-
return this.options.types
|
|
50
|
+
return this.options.types
|
|
51
|
+
.map(type => commands.resetAttributes(type, 'textAlign'))
|
|
52
|
+
.every(response => response);
|
|
45
53
|
},
|
|
46
54
|
};
|
|
47
55
|
},
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n types: string[],\n alignments: string[],\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types.
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/text-align.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\n\nexport interface TextAlignOptions {\n /**\n * The types where the text align attribute can be applied.\n * @default []\n * @example ['heading', 'paragraph']\n */\n types: string[],\n\n /**\n * The alignments which are allowed.\n * @default ['left', 'center', 'right', 'justify']\n * @example ['left', 'right']\n */\n alignments: string[],\n\n /**\n * The default alignment.\n * @default 'left'\n * @example 'center'\n */\n defaultAlignment: string,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n textAlign: {\n /**\n * Set the text align attribute\n * @param alignment The alignment\n * @example editor.commands.setTextAlign('left')\n */\n setTextAlign: (alignment: string) => ReturnType,\n /**\n * Unset the text align attribute\n * @example editor.commands.unsetTextAlign()\n */\n unsetTextAlign: () => ReturnType,\n }\n }\n}\n\n/**\n * This extension allows you to align text.\n * @see https://www.tiptap.dev/api/extensions/text-align\n */\nexport const TextAlign = Extension.create<TextAlignOptions>({\n name: 'textAlign',\n\n addOptions() {\n return {\n types: [],\n alignments: ['left', 'center', 'right', 'justify'],\n defaultAlignment: 'left',\n }\n },\n\n addGlobalAttributes() {\n return [\n {\n types: this.options.types,\n attributes: {\n textAlign: {\n default: this.options.defaultAlignment,\n parseHTML: element => element.style.textAlign || this.options.defaultAlignment,\n renderHTML: attributes => {\n if (attributes.textAlign === this.options.defaultAlignment) {\n return {}\n }\n\n return { style: `text-align: ${attributes.textAlign}` }\n },\n },\n },\n },\n ]\n },\n\n addCommands() {\n return {\n setTextAlign: (alignment: string) => ({ commands }) => {\n if (!this.options.alignments.includes(alignment)) {\n return false\n }\n\n return this.options.types\n .map(type => commands.updateAttributes(type, { textAlign: alignment }))\n .every(response => response)\n },\n\n unsetTextAlign: () => ({ commands }) => {\n return this.options.types\n .map(type => commands.resetAttributes(type, 'textAlign'))\n .every(response => response)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-l': () => this.editor.commands.setTextAlign('left'),\n 'Mod-Shift-e': () => this.editor.commands.setTextAlign('center'),\n 'Mod-Shift-r': () => this.editor.commands.setTextAlign('right'),\n 'Mod-Shift-j': () => this.editor.commands.setTextAlign('justify'),\n }\n },\n})\n"],"names":["Extension"],"mappings":";;;;;;EA2CA;;;EAGG;AACU,QAAA,SAAS,GAAGA,cAAS,CAAC,MAAM,CAAmB;EAC1D,IAAA,IAAI,EAAE,WAAW;MAEjB,UAAU,GAAA;UACR,OAAO;EACL,YAAA,KAAK,EAAE,EAAE;cACT,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;EAClD,YAAA,gBAAgB,EAAE,MAAM;WACzB,CAAA;OACF;MAED,mBAAmB,GAAA;UACjB,OAAO;EACL,YAAA;EACE,gBAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;EACzB,gBAAA,UAAU,EAAE;EACV,oBAAA,SAAS,EAAE;EACT,wBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB;EACtC,wBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB;0BAC9E,UAAU,EAAE,UAAU,IAAG;8BACvB,IAAI,UAAU,CAAC,SAAS,KAAK,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE;EAC1D,gCAAA,OAAO,EAAE,CAAA;EACV,6BAAA;8BAED,OAAO,EAAE,KAAK,EAAE,CAAA,YAAA,EAAe,UAAU,CAAC,SAAS,CAAE,CAAA,EAAE,CAAA;2BACxD;EACF,qBAAA;EACF,iBAAA;EACF,aAAA;WACF,CAAA;OACF;MAED,WAAW,GAAA;UACT,OAAO;cACL,YAAY,EAAE,CAAC,SAAiB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAI;kBACpD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;EAChD,oBAAA,OAAO,KAAK,CAAA;EACb,iBAAA;EAED,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;EACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;EACtE,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;eAC/B;cAED,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;EACrC,gBAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK;EACtB,qBAAA,GAAG,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;EACxD,qBAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAA;eAC/B;WACF,CAAA;OACF;MAED,oBAAoB,GAAA;UAClB,OAAO;EACL,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC;EAC9D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,QAAQ,CAAC;EAChE,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC;EAC/D,YAAA,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC;WAClE,CAAA;OACF;EACF,CAAA;;;;;;;;;;;"}
|
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
import { Extension } from '@tiptap/core';
|
|
2
2
|
export interface TextAlignOptions {
|
|
3
|
+
/**
|
|
4
|
+
* The types where the text align attribute can be applied.
|
|
5
|
+
* @default []
|
|
6
|
+
* @example ['heading', 'paragraph']
|
|
7
|
+
*/
|
|
3
8
|
types: string[];
|
|
9
|
+
/**
|
|
10
|
+
* The alignments which are allowed.
|
|
11
|
+
* @default ['left', 'center', 'right', 'justify']
|
|
12
|
+
* @example ['left', 'right']
|
|
13
|
+
*/
|
|
4
14
|
alignments: string[];
|
|
15
|
+
/**
|
|
16
|
+
* The default alignment.
|
|
17
|
+
* @default 'left'
|
|
18
|
+
* @example 'center'
|
|
19
|
+
*/
|
|
5
20
|
defaultAlignment: string;
|
|
6
21
|
}
|
|
7
22
|
declare module '@tiptap/core' {
|
|
@@ -9,13 +24,20 @@ declare module '@tiptap/core' {
|
|
|
9
24
|
textAlign: {
|
|
10
25
|
/**
|
|
11
26
|
* Set the text align attribute
|
|
27
|
+
* @param alignment The alignment
|
|
28
|
+
* @example editor.commands.setTextAlign('left')
|
|
12
29
|
*/
|
|
13
30
|
setTextAlign: (alignment: string) => ReturnType;
|
|
14
31
|
/**
|
|
15
32
|
* Unset the text align attribute
|
|
33
|
+
* @example editor.commands.unsetTextAlign()
|
|
16
34
|
*/
|
|
17
35
|
unsetTextAlign: () => ReturnType;
|
|
18
36
|
};
|
|
19
37
|
}
|
|
20
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* This extension allows you to align text.
|
|
41
|
+
* @see https://www.tiptap.dev/api/extensions/text-align
|
|
42
|
+
*/
|
|
21
43
|
export declare const TextAlign: Extension<TextAlignOptions, any>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-text-align",
|
|
3
3
|
"description": "text align extension for tiptap",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.4.0",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dist"
|
|
30
30
|
],
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tiptap/core": "^2.
|
|
32
|
+
"@tiptap/core": "^2.4.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@tiptap/core": "^2.0.0"
|
package/src/text-align.ts
CHANGED
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
import { Extension } from '@tiptap/core'
|
|
2
2
|
|
|
3
3
|
export interface TextAlignOptions {
|
|
4
|
+
/**
|
|
5
|
+
* The types where the text align attribute can be applied.
|
|
6
|
+
* @default []
|
|
7
|
+
* @example ['heading', 'paragraph']
|
|
8
|
+
*/
|
|
4
9
|
types: string[],
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* The alignments which are allowed.
|
|
13
|
+
* @default ['left', 'center', 'right', 'justify']
|
|
14
|
+
* @example ['left', 'right']
|
|
15
|
+
*/
|
|
5
16
|
alignments: string[],
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* The default alignment.
|
|
20
|
+
* @default 'left'
|
|
21
|
+
* @example 'center'
|
|
22
|
+
*/
|
|
6
23
|
defaultAlignment: string,
|
|
7
24
|
}
|
|
8
25
|
|
|
@@ -11,16 +28,23 @@ declare module '@tiptap/core' {
|
|
|
11
28
|
textAlign: {
|
|
12
29
|
/**
|
|
13
30
|
* Set the text align attribute
|
|
31
|
+
* @param alignment The alignment
|
|
32
|
+
* @example editor.commands.setTextAlign('left')
|
|
14
33
|
*/
|
|
15
34
|
setTextAlign: (alignment: string) => ReturnType,
|
|
16
35
|
/**
|
|
17
36
|
* Unset the text align attribute
|
|
37
|
+
* @example editor.commands.unsetTextAlign()
|
|
18
38
|
*/
|
|
19
39
|
unsetTextAlign: () => ReturnType,
|
|
20
40
|
}
|
|
21
41
|
}
|
|
22
42
|
}
|
|
23
43
|
|
|
44
|
+
/**
|
|
45
|
+
* This extension allows you to align text.
|
|
46
|
+
* @see https://www.tiptap.dev/api/extensions/text-align
|
|
47
|
+
*/
|
|
24
48
|
export const TextAlign = Extension.create<TextAlignOptions>({
|
|
25
49
|
name: 'textAlign',
|
|
26
50
|
|
|
@@ -60,11 +84,15 @@ export const TextAlign = Extension.create<TextAlignOptions>({
|
|
|
60
84
|
return false
|
|
61
85
|
}
|
|
62
86
|
|
|
63
|
-
return this.options.types
|
|
87
|
+
return this.options.types
|
|
88
|
+
.map(type => commands.updateAttributes(type, { textAlign: alignment }))
|
|
89
|
+
.every(response => response)
|
|
64
90
|
},
|
|
65
91
|
|
|
66
92
|
unsetTextAlign: () => ({ commands }) => {
|
|
67
|
-
return this.options.types
|
|
93
|
+
return this.options.types
|
|
94
|
+
.map(type => commands.resetAttributes(type, 'textAlign'))
|
|
95
|
+
.every(response => response)
|
|
68
96
|
},
|
|
69
97
|
}
|
|
70
98
|
},
|