@tiptap/extension-highlight 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 +10 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +10 -0
- package/dist/index.umd.js.map +1 -1
- package/dist/packages/extension-highlight/src/highlight.d.ts +25 -0
- package/package.json +2 -2
- package/src/highlight.ts +27 -0
package/dist/index.cjs
CHANGED
|
@@ -4,8 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var core = require('@tiptap/core');
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Matches a highlight to a ==highlight== on input.
|
|
9
|
+
*/
|
|
7
10
|
const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
|
|
11
|
+
/**
|
|
12
|
+
* Matches a highlight to a ==highlight== on paste.
|
|
13
|
+
*/
|
|
8
14
|
const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
|
|
15
|
+
/**
|
|
16
|
+
* This extension allows you to highlight text.
|
|
17
|
+
* @see https://www.tiptap.dev/api/marks/highlight
|
|
18
|
+
*/
|
|
9
19
|
const Highlight = core.Mark.create({
|
|
10
20
|
name: 'highlight',
|
|
11
21
|
addOptions() {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n multicolor: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":["Mark","mergeAttributes","markInputRule","markPasteRule"],"mappings":";;;;;;AA+
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n /**\n * Allow multiple highlight colors\n * @default false\n * @example true\n */\n multicolor: boolean,\n\n /**\n * HTML attributes to add to the highlight element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.setHighlight({ color: 'red' })\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.toggleHighlight({ color: 'red' })\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n * @example editor.commands.unsetHighlight()\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\n/**\n * Matches a highlight to a ==highlight== on input.\n */\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\n\n/**\n * Matches a highlight to a ==highlight== on paste.\n */\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\n/**\n * This extension allows you to highlight text.\n * @see https://www.tiptap.dev/api/marks/highlight\n */\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":["Mark","mergeAttributes","markInputRule","markPasteRule"],"mappings":";;;;;;AA+CA;;AAEG;AACI,MAAM,UAAU,GAAG,+CAA8C;AAExE;;AAEG;AACI,MAAM,UAAU,GAAG,+CAA8C;AAExE;;;AAGG;AACU,MAAA,SAAS,GAAGA,SAAI,CAAC,MAAM,CAAmB;AACrD,IAAA,IAAI,EAAE,WAAW;IAEjB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,cAAc,EAAE,EAAE;SACnB,CAAA;KACF;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAC5B,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;QAED,OAAO;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,eAAe;gBACzF,UAAU,EAAE,UAAU,IAAG;AACvB,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,wBAAA,OAAO,EAAE,CAAA;AACV,qBAAA;oBAED,OAAO;wBACL,YAAY,EAAE,UAAU,CAAC,KAAK;AAC9B,wBAAA,KAAK,EAAE,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAkB,gBAAA,CAAA;qBAC/D,CAAA;iBACF;AACF,aAAA;SACF,CAAA;KACF;IAED,SAAS,GAAA;QACP,OAAO;AACL,YAAA;AACE,gBAAA,GAAG,EAAE,MAAM;AACZ,aAAA;SACF,CAAA;KACF;IAED,UAAU,CAAC,EAAE,cAAc,EAAE,EAAA;AAC3B,QAAA,OAAO,CAAC,MAAM,EAAEC,oBAAe,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC,CAAA;KACjF;IAED,WAAW,GAAA;QACT,OAAO;YACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;gBAC3C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAC/C;YACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;gBAC9C,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAClD;YACD,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;gBACrC,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACrC;SACF,CAAA;KACF;IAED,oBAAoB,GAAA;QAClB,OAAO;YACL,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;SAC5D,CAAA;KACF;IAED,aAAa,GAAA;QACX,OAAO;AACL,YAAAC,kBAAa,CAAC;AACZ,gBAAA,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;SACH,CAAA;KACF;IAED,aAAa,GAAA;QACX,OAAO;AACL,YAAAC,kBAAa,CAAC;AACZ,gBAAA,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;SACH,CAAA;KACF;AACF,CAAA;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
import { Mark, mergeAttributes, markInputRule, markPasteRule } from '@tiptap/core';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Matches a highlight to a ==highlight== on input.
|
|
5
|
+
*/
|
|
3
6
|
const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
|
|
7
|
+
/**
|
|
8
|
+
* Matches a highlight to a ==highlight== on paste.
|
|
9
|
+
*/
|
|
4
10
|
const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
|
|
11
|
+
/**
|
|
12
|
+
* This extension allows you to highlight text.
|
|
13
|
+
* @see https://www.tiptap.dev/api/marks/highlight
|
|
14
|
+
*/
|
|
5
15
|
const Highlight = Mark.create({
|
|
6
16
|
name: 'highlight',
|
|
7
17
|
addOptions() {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n multicolor: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":[],"mappings":";;AA+
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n /**\n * Allow multiple highlight colors\n * @default false\n * @example true\n */\n multicolor: boolean,\n\n /**\n * HTML attributes to add to the highlight element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.setHighlight({ color: 'red' })\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.toggleHighlight({ color: 'red' })\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n * @example editor.commands.unsetHighlight()\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\n/**\n * Matches a highlight to a ==highlight== on input.\n */\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\n\n/**\n * Matches a highlight to a ==highlight== on paste.\n */\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\n/**\n * This extension allows you to highlight text.\n * @see https://www.tiptap.dev/api/marks/highlight\n */\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":[],"mappings":";;AA+CA;;AAEG;AACI,MAAM,UAAU,GAAG,+CAA8C;AAExE;;AAEG;AACI,MAAM,UAAU,GAAG,+CAA8C;AAExE;;;AAGG;AACU,MAAA,SAAS,GAAG,IAAI,CAAC,MAAM,CAAmB;AACrD,IAAA,IAAI,EAAE,WAAW;IAEjB,UAAU,GAAA;QACR,OAAO;AACL,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,cAAc,EAAE,EAAE;SACnB,CAAA;KACF;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAC5B,YAAA,OAAO,EAAE,CAAA;AACV,SAAA;QAED,OAAO;AACL,YAAA,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,eAAe;gBACzF,UAAU,EAAE,UAAU,IAAG;AACvB,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;AACrB,wBAAA,OAAO,EAAE,CAAA;AACV,qBAAA;oBAED,OAAO;wBACL,YAAY,EAAE,UAAU,CAAC,KAAK;AAC9B,wBAAA,KAAK,EAAE,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAkB,gBAAA,CAAA;qBAC/D,CAAA;iBACF;AACF,aAAA;SACF,CAAA;KACF;IAED,SAAS,GAAA;QACP,OAAO;AACL,YAAA;AACE,gBAAA,GAAG,EAAE,MAAM;AACZ,aAAA;SACF,CAAA;KACF;IAED,UAAU,CAAC,EAAE,cAAc,EAAE,EAAA;AAC3B,QAAA,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC,CAAA;KACjF;IAED,WAAW,GAAA;QACT,OAAO;YACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;gBAC3C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAC/C;YACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;gBAC9C,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;aAClD;YACD,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;gBACrC,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;aACrC;SACF,CAAA;KACF;IAED,oBAAoB,GAAA;QAClB,OAAO;YACL,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;SAC5D,CAAA;KACF;IAED,aAAa,GAAA;QACX,OAAO;AACL,YAAA,aAAa,CAAC;AACZ,gBAAA,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;SACH,CAAA;KACF;IAED,aAAa,GAAA;QACX,OAAO;AACL,YAAA,aAAa,CAAC;AACZ,gBAAA,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC;SACH,CAAA;KACF;AACF,CAAA;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -4,8 +4,18 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-highlight"] = {}, global.core));
|
|
5
5
|
})(this, (function (exports, core) { 'use strict';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* Matches a highlight to a ==highlight== on input.
|
|
9
|
+
*/
|
|
7
10
|
const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
|
|
11
|
+
/**
|
|
12
|
+
* Matches a highlight to a ==highlight== on paste.
|
|
13
|
+
*/
|
|
8
14
|
const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
|
|
15
|
+
/**
|
|
16
|
+
* This extension allows you to highlight text.
|
|
17
|
+
* @see https://www.tiptap.dev/api/marks/highlight
|
|
18
|
+
*/
|
|
9
19
|
const Highlight = core.Mark.create({
|
|
10
20
|
name: 'highlight',
|
|
11
21
|
addOptions() {
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n multicolor: boolean,\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":["Mark","mergeAttributes","markInputRule","markPasteRule"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/highlight.ts"],"sourcesContent":["import {\n Mark,\n markInputRule,\n markPasteRule,\n mergeAttributes,\n} from '@tiptap/core'\n\nexport interface HighlightOptions {\n /**\n * Allow multiple highlight colors\n * @default false\n * @example true\n */\n multicolor: boolean,\n\n /**\n * HTML attributes to add to the highlight element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>,\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n highlight: {\n /**\n * Set a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.setHighlight({ color: 'red' })\n */\n setHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Toggle a highlight mark\n * @param attributes The highlight attributes\n * @example editor.commands.toggleHighlight({ color: 'red' })\n */\n toggleHighlight: (attributes?: { color: string }) => ReturnType,\n /**\n * Unset a highlight mark\n * @example editor.commands.unsetHighlight()\n */\n unsetHighlight: () => ReturnType,\n }\n }\n}\n\n/**\n * Matches a highlight to a ==highlight== on input.\n */\nexport const inputRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))$/\n\n/**\n * Matches a highlight to a ==highlight== on paste.\n */\nexport const pasteRegex = /(?:^|\\s)(==(?!\\s+==)((?:[^=]+))==(?!\\s+==))/g\n\n/**\n * This extension allows you to highlight text.\n * @see https://www.tiptap.dev/api/marks/highlight\n */\nexport const Highlight = Mark.create<HighlightOptions>({\n name: 'highlight',\n\n addOptions() {\n return {\n multicolor: false,\n HTMLAttributes: {},\n }\n },\n\n addAttributes() {\n if (!this.options.multicolor) {\n return {}\n }\n\n return {\n color: {\n default: null,\n parseHTML: element => element.getAttribute('data-color') || element.style.backgroundColor,\n renderHTML: attributes => {\n if (!attributes.color) {\n return {}\n }\n\n return {\n 'data-color': attributes.color,\n style: `background-color: ${attributes.color}; color: inherit`,\n }\n },\n },\n }\n },\n\n parseHTML() {\n return [\n {\n tag: 'mark',\n },\n ]\n },\n\n renderHTML({ HTMLAttributes }) {\n return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]\n },\n\n addCommands() {\n return {\n setHighlight: attributes => ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight: attributes => ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight: () => ({ commands }) => {\n return commands.unsetMark(this.name)\n },\n }\n },\n\n addKeyboardShortcuts() {\n return {\n 'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),\n }\n },\n\n addInputRules() {\n return [\n markInputRule({\n find: inputRegex,\n type: this.type,\n }),\n ]\n },\n\n addPasteRules() {\n return [\n markPasteRule({\n find: pasteRegex,\n type: this.type,\n }),\n ]\n },\n})\n"],"names":["Mark","mergeAttributes","markInputRule","markPasteRule"],"mappings":";;;;;;EA+CA;;EAEG;AACI,QAAM,UAAU,GAAG,+CAA8C;EAExE;;EAEG;AACI,QAAM,UAAU,GAAG,+CAA8C;EAExE;;;EAGG;AACU,QAAA,SAAS,GAAGA,SAAI,CAAC,MAAM,CAAmB;EACrD,IAAA,IAAI,EAAE,WAAW;MAEjB,UAAU,GAAA;UACR,OAAO;EACL,YAAA,UAAU,EAAE,KAAK;EACjB,YAAA,cAAc,EAAE,EAAE;WACnB,CAAA;OACF;MAED,aAAa,GAAA;EACX,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;EAC5B,YAAA,OAAO,EAAE,CAAA;EACV,SAAA;UAED,OAAO;EACL,YAAA,KAAK,EAAE;EACL,gBAAA,OAAO,EAAE,IAAI;EACb,gBAAA,SAAS,EAAE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,eAAe;kBACzF,UAAU,EAAE,UAAU,IAAG;EACvB,oBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;EACrB,wBAAA,OAAO,EAAE,CAAA;EACV,qBAAA;sBAED,OAAO;0BACL,YAAY,EAAE,UAAU,CAAC,KAAK;EAC9B,wBAAA,KAAK,EAAE,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAkB,gBAAA,CAAA;uBAC/D,CAAA;mBACF;EACF,aAAA;WACF,CAAA;OACF;MAED,SAAS,GAAA;UACP,OAAO;EACL,YAAA;EACE,gBAAA,GAAG,EAAE,MAAM;EACZ,aAAA;WACF,CAAA;OACF;MAED,UAAU,CAAC,EAAE,cAAc,EAAE,EAAA;EAC3B,QAAA,OAAO,CAAC,MAAM,EAAEC,oBAAe,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,cAAc,CAAC,EAAE,CAAC,CAAC,CAAA;OACjF;MAED,WAAW,GAAA;UACT,OAAO;cACL,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;kBAC3C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;eAC/C;cACD,eAAe,EAAE,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAI;kBAC9C,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAA;eAClD;cACD,cAAc,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAI;kBACrC,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;eACrC;WACF,CAAA;OACF;MAED,oBAAoB,GAAA;UAClB,OAAO;cACL,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE;WAC5D,CAAA;OACF;MAED,aAAa,GAAA;UACX,OAAO;EACL,YAAAC,kBAAa,CAAC;EACZ,gBAAA,IAAI,EAAE,UAAU;kBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;eAChB,CAAC;WACH,CAAA;OACF;MAED,aAAa,GAAA;UACX,OAAO;EACL,YAAAC,kBAAa,CAAC;EACZ,gBAAA,IAAI,EAAE,UAAU;kBAChB,IAAI,EAAE,IAAI,CAAC,IAAI;eAChB,CAAC;WACH,CAAA;OACF;EACF,CAAA;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { Mark } from '@tiptap/core';
|
|
2
2
|
export interface HighlightOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Allow multiple highlight colors
|
|
5
|
+
* @default false
|
|
6
|
+
* @example true
|
|
7
|
+
*/
|
|
3
8
|
multicolor: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* HTML attributes to add to the highlight element.
|
|
11
|
+
* @default {}
|
|
12
|
+
* @example { class: 'foo' }
|
|
13
|
+
*/
|
|
4
14
|
HTMLAttributes: Record<string, any>;
|
|
5
15
|
}
|
|
6
16
|
declare module '@tiptap/core' {
|
|
@@ -8,23 +18,38 @@ declare module '@tiptap/core' {
|
|
|
8
18
|
highlight: {
|
|
9
19
|
/**
|
|
10
20
|
* Set a highlight mark
|
|
21
|
+
* @param attributes The highlight attributes
|
|
22
|
+
* @example editor.commands.setHighlight({ color: 'red' })
|
|
11
23
|
*/
|
|
12
24
|
setHighlight: (attributes?: {
|
|
13
25
|
color: string;
|
|
14
26
|
}) => ReturnType;
|
|
15
27
|
/**
|
|
16
28
|
* Toggle a highlight mark
|
|
29
|
+
* @param attributes The highlight attributes
|
|
30
|
+
* @example editor.commands.toggleHighlight({ color: 'red' })
|
|
17
31
|
*/
|
|
18
32
|
toggleHighlight: (attributes?: {
|
|
19
33
|
color: string;
|
|
20
34
|
}) => ReturnType;
|
|
21
35
|
/**
|
|
22
36
|
* Unset a highlight mark
|
|
37
|
+
* @example editor.commands.unsetHighlight()
|
|
23
38
|
*/
|
|
24
39
|
unsetHighlight: () => ReturnType;
|
|
25
40
|
};
|
|
26
41
|
}
|
|
27
42
|
}
|
|
43
|
+
/**
|
|
44
|
+
* Matches a highlight to a ==highlight== on input.
|
|
45
|
+
*/
|
|
28
46
|
export declare const inputRegex: RegExp;
|
|
47
|
+
/**
|
|
48
|
+
* Matches a highlight to a ==highlight== on paste.
|
|
49
|
+
*/
|
|
29
50
|
export declare const pasteRegex: RegExp;
|
|
51
|
+
/**
|
|
52
|
+
* This extension allows you to highlight text.
|
|
53
|
+
* @see https://www.tiptap.dev/api/marks/highlight
|
|
54
|
+
*/
|
|
30
55
|
export declare const Highlight: Mark<HighlightOptions, any>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-highlight",
|
|
3
3
|
"description": "highlight 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/highlight.ts
CHANGED
|
@@ -6,7 +6,18 @@ import {
|
|
|
6
6
|
} from '@tiptap/core'
|
|
7
7
|
|
|
8
8
|
export interface HighlightOptions {
|
|
9
|
+
/**
|
|
10
|
+
* Allow multiple highlight colors
|
|
11
|
+
* @default false
|
|
12
|
+
* @example true
|
|
13
|
+
*/
|
|
9
14
|
multicolor: boolean,
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* HTML attributes to add to the highlight element.
|
|
18
|
+
* @default {}
|
|
19
|
+
* @example { class: 'foo' }
|
|
20
|
+
*/
|
|
10
21
|
HTMLAttributes: Record<string, any>,
|
|
11
22
|
}
|
|
12
23
|
|
|
@@ -15,23 +26,39 @@ declare module '@tiptap/core' {
|
|
|
15
26
|
highlight: {
|
|
16
27
|
/**
|
|
17
28
|
* Set a highlight mark
|
|
29
|
+
* @param attributes The highlight attributes
|
|
30
|
+
* @example editor.commands.setHighlight({ color: 'red' })
|
|
18
31
|
*/
|
|
19
32
|
setHighlight: (attributes?: { color: string }) => ReturnType,
|
|
20
33
|
/**
|
|
21
34
|
* Toggle a highlight mark
|
|
35
|
+
* @param attributes The highlight attributes
|
|
36
|
+
* @example editor.commands.toggleHighlight({ color: 'red' })
|
|
22
37
|
*/
|
|
23
38
|
toggleHighlight: (attributes?: { color: string }) => ReturnType,
|
|
24
39
|
/**
|
|
25
40
|
* Unset a highlight mark
|
|
41
|
+
* @example editor.commands.unsetHighlight()
|
|
26
42
|
*/
|
|
27
43
|
unsetHighlight: () => ReturnType,
|
|
28
44
|
}
|
|
29
45
|
}
|
|
30
46
|
}
|
|
31
47
|
|
|
48
|
+
/**
|
|
49
|
+
* Matches a highlight to a ==highlight== on input.
|
|
50
|
+
*/
|
|
32
51
|
export const inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Matches a highlight to a ==highlight== on paste.
|
|
55
|
+
*/
|
|
33
56
|
export const pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g
|
|
34
57
|
|
|
58
|
+
/**
|
|
59
|
+
* This extension allows you to highlight text.
|
|
60
|
+
* @see https://www.tiptap.dev/api/marks/highlight
|
|
61
|
+
*/
|
|
35
62
|
export const Highlight = Mark.create<HighlightOptions>({
|
|
36
63
|
name: 'highlight',
|
|
37
64
|
|