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

experiments: add font color extension

Browse Source
This commit is contained in:
Hans Pagel
2021-07-10 23:19:35 +02:00
parent 7f24afbea1
commit 14cb62b46f
4 changed files with 176 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,3 +13,4 @@ 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 Normal file
View File

@@ -0,0 +1,32 @@
# FontFamily
[![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" />