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

packages: add a new color extension to set the text color (#1744)

Browse Source
This commit is contained in:
Hans Pagel
2021-08-19 10:37:51 +02:00
committed by GitHub
parent 0488479d68
commit f5ebaeac3c
13 changed files with 181 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/src/demos/Experiments/FontColor/index.vue
View File

@@ -1,70 +0,0 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().setFontColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#958DF1' })}">
purple
</button>
<button @click="editor.chain().focus().setFontColor('#F98181').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#F98181' })}">
red
</button>
<button @click="editor.chain().focus().setFontColor('#FBBC88').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#FBBC88' })}">
orange
</button>
<button @click="editor.chain().focus().setFontColor('#FAF594').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#FAF594' })}">
yellow
</button>
<button @click="editor.chain().focus().setFontColor('#70CFF8').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#70CFF8' })}">
blue
</button>
<button @click="editor.chain().focus().setFontColor('#94FADB').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#94FADB' })}">
teal
</button>
<button @click="editor.chain().focus().setFontColor('#B9F18D').run()" :class="{ 'is-active': editor.isActive('textStyle', { fontColor: '#B9F18D' })}">
green
</button>
<button @click="editor.chain().focus().unsetFontColor().run()">
remove color
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'
import { FontColor } from './font-color'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
TextStyle,
FontColor,
],
content: `
<p><span style="color: #958DF1">Oh, that’s purple for some reason.</span></p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

7
docs/src/demos/Extensions/Color/index.spec.js Normal file
View File

@@ -0,0 +1,7 @@
context('/demos/Extensions/Color', () => {
before(() => {
cy.visit('/demos/Extensions/Color')
})
// TODO: Write tests
})

70
docs/src/demos/Extensions/Color/index.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' })}">
purple
</button>
<button @click="editor.chain().focus().setColor('#F98181').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#F98181' })}">
red
</button>
<button @click="editor.chain().focus().setColor('#FBBC88').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FBBC88' })}">
orange
</button>
<button @click="editor.chain().focus().setColor('#FAF594').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#FAF594' })}">
yellow
</button>
<button @click="editor.chain().focus().setColor('#70CFF8').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#70CFF8' })}">
blue
</button>
<button @click="editor.chain().focus().setColor('#94FADB').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#94FADB' })}">
teal
</button>
<button @click="editor.chain().focus().setColor('#B9F18D').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#B9F18D' })}">
green
</button>
<button @click="editor.chain().focus().unsetColor().run()">
remove color
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'
import { Color } from '@tiptap/extension-color'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
TextStyle,
Color,
],
content: `
<p><span style="color: #958DF1">Oh, for some reason that’s purple.</span></p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

1
docs/src/docPages/api/extensions.md
View File

@@ -13,6 +13,7 @@ There are also some extensions with more capabilities. We call them [nodes](/api
| [CharacterCount](/api/extensions/character-count) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/) |
| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/) |
| [CollaborationCursor](/api/extensions/collaboration-cursor) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) |
| [Color](/api/extensions/color) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/) |
| [Dropcursor](/api/extensions/dropcursor) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/) |
| [Focus](/api/extensions/focus) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/) |
| [FontFamily](/api/extensions/font-family) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/) |

32
docs/src/docPages/api/extensions/color.md Normal file
View File

@@ -0,0 +1,32 @@
# Color
[![Version](https://img.shields.io/npm/v/@tiptap/extension-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-color)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-color.svg)](https://npmcharts.com/compare/@tiptap/extension-color?minimal=true)
This extension enables you to set the font color in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag (and only that). The font color is applied as inline style then, for example `<span style="color: #958DF1">`.
## Installation
```bash
# with npm
npm install @tiptap/extension-text-style @tiptap/extension-color
# with Yarn
yarn add @tiptap/extension-text-style @tiptap/extension-color
```
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
## Settings
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
| types | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
## Commands
| Command | Parameters | Description |
| ------- | ---------- | -------------------------------------------- |
| color | color | Applies the given font color as inline style |
## Source code
[packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/)
## Usage
<demo name="Extensions/Color" />

2
docs/src/docPages/api/marks/text-style.md
View File

@@ -2,7 +2,7 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-text-style.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-text-style)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-text-style.svg)](https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true)
This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or font-color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family).
This mark renders a `<span>` HTML tag and enables you to add a list of styling related attributes, for example font-family, font-size, or color. The extension doesn’t add any styling attribute by default, but other extensions use it as the foundation, for example [`FontFamily`](/api/extensions/font-family) or [`Color`](/api/extensions/color).
## Installation
```bash

1
docs/src/docPages/experiments.md
View File

@@ -14,4 +14,3 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
* [@tiptap/extension-collaboration-annotation](/experiments/collaboration-annotation)
* [@tiptap/extension-trailing-node](/experiments/trailing-node)
* [@tiptap/extension-figure](/experiments/figure)
* [@tiptap/extension-font-color](/experiments/font-color)

32
docs/src/docPages/experiments/font-color.md
View File

@@ -1,32 +0,0 @@
# FontColor
[![Version](https://img.shields.io/npm/v/@tiptap/extension-font-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-font-color)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-font-color.svg)](https://npmcharts.com/compare/@tiptap/extension-font-color?minimal=true)
This extension enables you to set the font color in the editor. It uses the [`TextStyle`](/api/marks/text-style) mark, which renders a `<span>` tag (and only that). The font color is applied as inline style then, for example `<span style="color: #958DF1">`.
## Installation
```bash
# with npm
npm install @tiptap/extension-text-style @tiptap/extension-font-color
# with Yarn
yarn add @tiptap/extension-text-style @tiptap/extension-font-color
```
This extension requires the [`TextStyle`](/api/marks/text-style) mark.
## Settings
| Option | Type | Default | Description |
| ------ | ------- | --------------- | ------------------------------------------------------------------------ |
| types | `Array` | `['textStyle']` | A list of marks to which the font family attribute should be applied to. |
## Commands
| Command | Parameters | Description |
| ---------- | ---------- | --------------------------------------------- |
| fontColor | fontColor | Applies the given font color as inline style |
## Source code
[packages/extension-font-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-color/)
## Usage
<demo name="Experiments/FontColor" />

8
docs/src/links.yaml
View File

@@ -132,7 +132,6 @@
items:
- title: blur
link: /api/commands/blur
type: new
- title: clearContent
link: /api/commands/clear-content
- title: clearNodes
@@ -195,7 +194,6 @@
type: draft
- title: selectAll
link: /api/commands/select-all
type: new
- title: selectNodeBackward
link: /api/commands/select-node-backward
type: draft
@@ -321,10 +319,8 @@
link: /api/marks/strike
- title: Subscript
link: /api/marks/subscript
type: new
- title: Superscript
link: /api/marks/superscript
type: new
- title: TextStyle
link: /api/marks/text-style
- title: Underline
@@ -340,6 +336,9 @@
link: /api/extensions/collaboration
- title: CollaborationCursor
link: /api/extensions/collaboration-cursor
- title: Color
link: /api/extensions/color
type: new
- title: Dropcursor
link: /api/extensions/dropcursor
- title: FloatingMenu
@@ -356,7 +355,6 @@
link: /api/extensions/placeholder
- title: StarterKit
link: /api/extensions/starter-kit
type: new
- title: TextAlign
link: /api/extensions/text-align
- title: Typography

14
packages/extension-color/README.md Normal file
View File

@@ -0,0 +1,14 @@
# @tiptap/extension-color
[![Version](https://img.shields.io/npm/v/@tiptap/extension-color.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-color)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-color.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
[![License](https://img.shields.io/npm/l/@tiptap/extension-color.svg)](https://www.npmjs.com/package/@tiptap/extension-color)
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
## Introduction
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
## Official Documentation
Documentation can be found on the [tiptap website](https://tiptap.dev).
## License
tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

32
packages/extension-color/package.json Normal file
View File

@@ -0,0 +1,32 @@
{
"name": "@tiptap/extension-color",
"description": "text color extension for tiptap",
"version": "2.0.0-beta.1",
"homepage": "https://tiptap.dev",
"keywords": [
"tiptap",
"tiptap extension"
],
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/ueberdosis"
},
"main": "dist/tiptap-extension-color.cjs.js",
"umd": "dist/tiptap-extension-color.umd.js",
"module": "dist/tiptap-extension-color.esm.js",
"types": "dist/packages/extension-color/src/index.d.ts",
"files": [
"src",
"dist"
],
"peerDependencies": {
"@tiptap/core": "^2.0.0-beta.1",
"@tiptap/extension-text-style": "^2.0.0-beta.1"
},
"repository": {
"type": "git",
"url": "https://github.com/ueberdosis/tiptap",
"directory": "packages/extension-color"
}
}

33
docs/src/demos/Experiments/FontColor/font-color.ts → packages/extension-color/src/color.ts
View File

@@ -1,27 +1,27 @@
import { Extension } from '@tiptap/core'
import '@tiptap/extension-text-style'
type FontColorOptions = {
type ColorOptions = {
types: string[],
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
fontColor: {
color: {
/**
* Set the font color
* Set the text color
*/
setFontColor: (fontColor: string) => ReturnType,
setColor: (color: string) => ReturnType,
/**
* Unset the font color
* Unset the text color
*/
unsetFontColor: () => ReturnType,
unsetColor: () => ReturnType,
}
}
}
export const FontColor = Extension.create<FontColorOptions>({
name: 'fontColor',
export const Color = Extension.create<ColorOptions>({
name: 'color',
defaultOptions: {
types: ['textStyle'],
@@ -32,21 +32,20 @@ export const FontColor = Extension.create<FontColorOptions>({
{
types: this.options.types,
attributes: {
fontColor: {
color: {
default: null,
renderHTML: attributes => {
if (!attributes.fontColor) {
if (!attributes.color) {
return {}
}
return {
style: `color: ${attributes.fontColor}`,
style: `color: ${attributes.color}`,
}
},
parseHTML: element => {
console.log('FOO', element.style)
return {
fontColor: element.style.color.replace(/['"]+/g, ''),
color: element.style.color.replace(/['"]+/g, ''),
}
},
},
@@ -57,14 +56,14 @@ export const FontColor = Extension.create<FontColorOptions>({
addCommands() {
return {
setFontColor: fontColor => ({ chain }) => {
setColor: color => ({ chain }) => {
return chain()
.setMark('textStyle', { fontColor })
.setMark('textStyle', { color })
.run()
},
unsetFontColor: () => ({ chain }) => {
unsetColor: () => ({ chain }) => {
return chain()
.setMark('textStyle', { fontColor: null })
.setMark('textStyle', { color: null })
.removeEmptyTextStyle()
.run()
},

5
packages/extension-color/src/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import { Color } from './color'
export * from './color'
export default Color