@tiptap/extension-highlight 3.23.1 → 3.23.2
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 +5 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/highlight.ts +9 -2
package/dist/index.cjs
CHANGED
|
@@ -46,7 +46,11 @@ var Highlight = import_core.Mark.create({
|
|
|
46
46
|
return {
|
|
47
47
|
color: {
|
|
48
48
|
default: null,
|
|
49
|
-
|
|
49
|
+
// Prefer `data-color` (set by our own `renderHTML`) for lossless
|
|
50
|
+
// round-trips. Otherwise parse the raw inline `style` attribute so
|
|
51
|
+
// the original color format (e.g. `#rrggbb`) is preserved instead of
|
|
52
|
+
// the canonicalized `rgb(...)` value from `element.style.backgroundColor`.
|
|
53
|
+
parseHTML: (element) => element.getAttribute("data-color") || (0, import_core.getStyleProperty)(element, "background-color") || element.style.backgroundColor,
|
|
50
54
|
renderHTML: (attributes) => {
|
|
51
55
|
if (!attributes.color) {
|
|
52
56
|
return {};
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/highlight.ts"],"sourcesContent":["import { Highlight } from './highlight.js'\n\nexport * from './highlight.js'\n\nexport default Highlight\n","import { Mark, markInputRule, markPasteRule, mergeAttributes } 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
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/highlight.ts"],"sourcesContent":["import { Highlight } from './highlight.js'\n\nexport * from './highlight.js'\n\nexport default Highlight\n","import { getStyleProperty, Mark, markInputRule, markPasteRule, mergeAttributes } 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 // Prefer `data-color` (set by our own `renderHTML`) for lossless\n // round-trips. Otherwise parse the raw inline `style` attribute so\n // the original color format (e.g. `#rrggbb`) is preserved instead of\n // the canonicalized `rgb(...)` value from `element.style.backgroundColor`.\n parseHTML: element =>\n element.getAttribute('data-color') ||\n getStyleProperty(element, 'background-color') ||\n 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 renderMarkdown: (node, h) => {\n return `==${h.renderChildren(node)}==`\n },\n\n parseMarkdown: (token, h) => {\n return h.applyMark('highlight', h.parseInline(token.tokens || []))\n },\n\n markdownTokenizer: {\n name: 'highlight',\n level: 'inline',\n start: (src: string) => src.indexOf('=='),\n tokenize(src, _, h) {\n const rule = /^(==)([^=]+)(==)/ // ==highlighted text==\n const match = rule.exec(src)\n\n if (match) {\n const innerContent = match[2].trim()\n\n const children = h.inlineTokens(innerContent)\n\n return {\n type: 'highlight',\n raw: match[0],\n text: innerContent,\n tokens: children,\n }\n }\n },\n },\n\n addCommands() {\n return {\n setHighlight:\n attributes =>\n ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight:\n attributes =>\n ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight:\n () =>\n ({ 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"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/highlight.ts
|
|
2
|
-
import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
|
|
2
|
+
import { getStyleProperty, Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
|
|
3
3
|
var inputRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/;
|
|
4
4
|
var pasteRegex = /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g;
|
|
5
5
|
var Highlight = Mark.create({
|
|
@@ -17,7 +17,11 @@ var Highlight = Mark.create({
|
|
|
17
17
|
return {
|
|
18
18
|
color: {
|
|
19
19
|
default: null,
|
|
20
|
-
|
|
20
|
+
// Prefer `data-color` (set by our own `renderHTML`) for lossless
|
|
21
|
+
// round-trips. Otherwise parse the raw inline `style` attribute so
|
|
22
|
+
// the original color format (e.g. `#rrggbb`) is preserved instead of
|
|
23
|
+
// the canonicalized `rgb(...)` value from `element.style.backgroundColor`.
|
|
24
|
+
parseHTML: (element) => element.getAttribute("data-color") || getStyleProperty(element, "background-color") || element.style.backgroundColor,
|
|
21
25
|
renderHTML: (attributes) => {
|
|
22
26
|
if (!attributes.color) {
|
|
23
27
|
return {};
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/highlight.ts","../src/index.ts"],"sourcesContent":["import { Mark, markInputRule, markPasteRule, mergeAttributes } 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
|
|
1
|
+
{"version":3,"sources":["../src/highlight.ts","../src/index.ts"],"sourcesContent":["import { getStyleProperty, Mark, markInputRule, markPasteRule, mergeAttributes } 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 // Prefer `data-color` (set by our own `renderHTML`) for lossless\n // round-trips. Otherwise parse the raw inline `style` attribute so\n // the original color format (e.g. `#rrggbb`) is preserved instead of\n // the canonicalized `rgb(...)` value from `element.style.backgroundColor`.\n parseHTML: element =>\n element.getAttribute('data-color') ||\n getStyleProperty(element, 'background-color') ||\n 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 renderMarkdown: (node, h) => {\n return `==${h.renderChildren(node)}==`\n },\n\n parseMarkdown: (token, h) => {\n return h.applyMark('highlight', h.parseInline(token.tokens || []))\n },\n\n markdownTokenizer: {\n name: 'highlight',\n level: 'inline',\n start: (src: string) => src.indexOf('=='),\n tokenize(src, _, h) {\n const rule = /^(==)([^=]+)(==)/ // ==highlighted text==\n const match = rule.exec(src)\n\n if (match) {\n const innerContent = match[2].trim()\n\n const children = h.inlineTokens(innerContent)\n\n return {\n type: 'highlight',\n raw: match[0],\n text: innerContent,\n tokens: children,\n }\n }\n },\n },\n\n addCommands() {\n return {\n setHighlight:\n attributes =>\n ({ commands }) => {\n return commands.setMark(this.name, attributes)\n },\n toggleHighlight:\n attributes =>\n ({ commands }) => {\n return commands.toggleMark(this.name, attributes)\n },\n unsetHighlight:\n () =>\n ({ 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","import { Highlight } from './highlight.js'\n\nexport * from './highlight.js'\n\nexport default Highlight\n"],"mappings":";AAAA,SAAS,kBAAkB,MAAM,eAAe,eAAe,uBAAuB;AA6C/E,IAAM,aAAa;AAKnB,IAAM,aAAa;AAMnB,IAAM,YAAY,KAAK,OAAyB;AAAA,EACrD,MAAM;AAAA,EAEN,aAAa;AACX,WAAO;AAAA,MACL,YAAY;AAAA,MACZ,gBAAgB,CAAC;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,gBAAgB;AACd,QAAI,CAAC,KAAK,QAAQ,YAAY;AAC5B,aAAO,CAAC;AAAA,IACV;AAEA,WAAO;AAAA,MACL,OAAO;AAAA,QACL,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,WAAW,aACT,QAAQ,aAAa,YAAY,KACjC,iBAAiB,SAAS,kBAAkB,KAC5C,QAAQ,MAAM;AAAA,QAChB,YAAY,gBAAc;AACxB,cAAI,CAAC,WAAW,OAAO;AACrB,mBAAO,CAAC;AAAA,UACV;AAEA,iBAAO;AAAA,YACL,cAAc,WAAW;AAAA,YACzB,OAAO,qBAAqB,WAAW,KAAK;AAAA,UAC9C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,YAAY;AACV,WAAO;AAAA,MACL;AAAA,QACE,KAAK;AAAA,MACP;AAAA,IACF;AAAA,EACF;AAAA,EAEA,WAAW,EAAE,eAAe,GAAG;AAC7B,WAAO,CAAC,QAAQ,gBAAgB,KAAK,QAAQ,gBAAgB,cAAc,GAAG,CAAC;AAAA,EACjF;AAAA,EAEA,gBAAgB,CAAC,MAAM,MAAM;AAC3B,WAAO,KAAK,EAAE,eAAe,IAAI,CAAC;AAAA,EACpC;AAAA,EAEA,eAAe,CAAC,OAAO,MAAM;AAC3B,WAAO,EAAE,UAAU,aAAa,EAAE,YAAY,MAAM,UAAU,CAAC,CAAC,CAAC;AAAA,EACnE;AAAA,EAEA,mBAAmB;AAAA,IACjB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO,CAAC,QAAgB,IAAI,QAAQ,IAAI;AAAA,IACxC,SAAS,KAAK,GAAG,GAAG;AAClB,YAAM,OAAO;AACb,YAAM,QAAQ,KAAK,KAAK,GAAG;AAE3B,UAAI,OAAO;AACT,cAAM,eAAe,MAAM,CAAC,EAAE,KAAK;AAEnC,cAAM,WAAW,EAAE,aAAa,YAAY;AAE5C,eAAO;AAAA,UACL,MAAM;AAAA,UACN,KAAK,MAAM,CAAC;AAAA,UACZ,MAAM;AAAA,UACN,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,WAAO;AAAA,MACL,cACE,gBACA,CAAC,EAAE,SAAS,MAAM;AAChB,eAAO,SAAS,QAAQ,KAAK,MAAM,UAAU;AAAA,MAC/C;AAAA,MACF,iBACE,gBACA,CAAC,EAAE,SAAS,MAAM;AAChB,eAAO,SAAS,WAAW,KAAK,MAAM,UAAU;AAAA,MAClD;AAAA,MACF,gBACE,MACA,CAAC,EAAE,SAAS,MAAM;AAChB,eAAO,SAAS,UAAU,KAAK,IAAI;AAAA,MACrC;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,WAAO;AAAA,MACL,eAAe,MAAM,KAAK,OAAO,SAAS,gBAAgB;AAAA,IAC5D;AAAA,EACF;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,MACL,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,KAAK;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,MACL,cAAc;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,KAAK;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;;;AClLD,IAAO,gBAAQ;","names":[]}
|
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": "3.23.
|
|
4
|
+
"version": "3.23.2",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"dist"
|
|
32
32
|
],
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tiptap/core": "^3.23.
|
|
34
|
+
"@tiptap/core": "^3.23.2"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"@tiptap/core": "3.23.
|
|
37
|
+
"@tiptap/core": "3.23.2"
|
|
38
38
|
},
|
|
39
39
|
"repository": {
|
|
40
40
|
"type": "git",
|
package/src/highlight.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
|
|
1
|
+
import { getStyleProperty, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
|
|
2
2
|
|
|
3
3
|
export interface HighlightOptions {
|
|
4
4
|
/**
|
|
@@ -72,7 +72,14 @@ export const Highlight = Mark.create<HighlightOptions>({
|
|
|
72
72
|
return {
|
|
73
73
|
color: {
|
|
74
74
|
default: null,
|
|
75
|
-
|
|
75
|
+
// Prefer `data-color` (set by our own `renderHTML`) for lossless
|
|
76
|
+
// round-trips. Otherwise parse the raw inline `style` attribute so
|
|
77
|
+
// the original color format (e.g. `#rrggbb`) is preserved instead of
|
|
78
|
+
// the canonicalized `rgb(...)` value from `element.style.backgroundColor`.
|
|
79
|
+
parseHTML: element =>
|
|
80
|
+
element.getAttribute('data-color') ||
|
|
81
|
+
getStyleProperty(element, 'background-color') ||
|
|
82
|
+
element.style.backgroundColor,
|
|
76
83
|
renderHTML: attributes => {
|
|
77
84
|
if (!attributes.color) {
|
|
78
85
|
return {}
|