ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

clean up and add attributes to the highlight command

Browse Source
This commit is contained in:
Hans Pagel
2020-10-27 22:22:34 +01:00
parent 47109ed97f
commit c9da3ab269
3 changed files with 8 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/docPages/api/extensions/highlight.md
View File

@@ -1,6 +1,8 @@
# Highlight # Highlight
Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors. Use this extension to render highlighted text with `<mark>`. You can use only default `<mark>` HTML tag, which has a yellow background color by default, or apply different colors.
Type `==two equal signs==` and it will magically transform to <mark>highlighted</mark> text while you type.
## Installation ## Installation
```bash ```bash
# With npm # With npm
@@ -16,9 +18,9 @@ yarn add @tiptap/extension-highlight
| class | string | – | Add a custom class to the rendered HTML tag. | | class | string | – | Add a custom class to the rendered HTML tag. |
## Commands ## Commands
| Command | Options | Description | | Command | Options | Description |
| --------- | ------- | ------------------------- | | --------- | ------- | ----------------------------------------------------------- |
| highlight | — | Mark text as highlighted. | | highlight | color | Mark text as highlighted, optionally pass a specific color. |
## Keyboard shortcuts ## Keyboard shortcuts
* Windows/Linux: `Control`&nbsp;`E` * Windows/Linux: `Control`&nbsp;`E`
@@ -28,4 +30,4 @@ yarn add @tiptap/extension-highlight
[packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/) [packages/extension-highlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)
## Usage ## Usage
<demo name="Extensions/Highlight" highlight="3-5,17,36" /> <demo name="Extensions/Highlight" highlight="3-8,48,67" />

4
packages/core/src/extensions/toggleMark.ts
View File

@@ -8,10 +8,9 @@ import markIsActive from '../utils/markIsActive'
export const ToggleMark = createExtension({ export const ToggleMark = createExtension({
addCommands() { addCommands() {
return { return {
toggleMark: (typeOrName: string | MarkType): Command => ({ state, dispatch }) => { toggleMark: (typeOrName: string | MarkType, attrs?: {}): Command => ({ state, dispatch, commands }) => {
const type = getMarkType(typeOrName, state.schema) const type = getMarkType(typeOrName, state.schema)
/* TODO:
const hasMarkWithDifferentAttributes = attrs const hasMarkWithDifferentAttributes = attrs
&& markIsActive(state, type) && markIsActive(state, type)
&& !markIsActive(state, type, attrs) && !markIsActive(state, type, attrs)
@@ -20,7 +19,6 @@ export const ToggleMark = createExtension({
// @ts-ignore // @ts-ignore
return commands.updateMark(type, attrs) return commands.updateMark(type, attrs)
} }
*/
return originalToggleMark(type)(state, dispatch) return originalToggleMark(type)(state, dispatch)
}, },

8
packages/extension-highlight/index.ts
View File

@@ -17,7 +17,6 @@ const Highlight = createMark({
color: { color: {
default: null, default: null,
parseHTML: element => { parseHTML: element => {
console.log(element.getAttribute('data-color'))
return { return {
color: color:
element.getAttribute('data-color') element.getAttribute('data-color')
@@ -45,11 +44,6 @@ const Highlight = createMark({
}, },
{ {
style: 'background-color', style: 'background-color',
// getAttrs: value => {
// return {
// color: value,
// }
// },
}, },
] ]
}, },
@@ -61,7 +55,7 @@ const Highlight = createMark({
addCommands() { addCommands() {
return { return {
highlight: (attrs?: HighlightOptions): Command => ({ commands }) => { highlight: (attrs?: HighlightOptions): Command => ({ commands }) => {
return commands.toggleMark('highlight') return commands.toggleMark('highlight', attrs)
}, },
} }
}, },