From f5ebaeac3c2ad4159314803ff09878d095a6ee2c Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 19 Aug 2021 10:37:51 +0200 Subject: [PATCH] packages: add a new color extension to set the text color (#1744) --- .../src/demos/Experiments/FontColor/index.vue | 70 ------------------- docs/src/demos/Extensions/Color/index.spec.js | 7 ++ docs/src/demos/Extensions/Color/index.vue | 70 +++++++++++++++++++ docs/src/docPages/api/extensions.md | 1 + docs/src/docPages/api/extensions/color.md | 32 +++++++++ docs/src/docPages/api/marks/text-style.md | 2 +- docs/src/docPages/experiments.md | 1 - docs/src/docPages/experiments/font-color.md | 32 --------- docs/src/links.yaml | 8 +-- packages/extension-color/README.md | 14 ++++ packages/extension-color/package.json | 32 +++++++++ .../extension-color/src/color.ts | 33 +++++---- packages/extension-color/src/index.ts | 5 ++ 13 files changed, 181 insertions(+), 126 deletions(-) delete mode 100644 docs/src/demos/Experiments/FontColor/index.vue create mode 100644 docs/src/demos/Extensions/Color/index.spec.js create mode 100644 docs/src/demos/Extensions/Color/index.vue create mode 100644 docs/src/docPages/api/extensions/color.md delete mode 100644 docs/src/docPages/experiments/font-color.md create mode 100644 packages/extension-color/README.md create mode 100644 packages/extension-color/package.json rename docs/src/demos/Experiments/FontColor/font-color.ts => packages/extension-color/src/color.ts (54%) create mode 100644 packages/extension-color/src/index.ts diff --git a/docs/src/demos/Experiments/FontColor/index.vue b/docs/src/demos/Experiments/FontColor/index.vue deleted file mode 100644 index c2ed31fe..00000000 --- a/docs/src/demos/Experiments/FontColor/index.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/docs/src/demos/Extensions/Color/index.spec.js b/docs/src/demos/Extensions/Color/index.spec.js new file mode 100644 index 00000000..4604f033 --- /dev/null +++ b/docs/src/demos/Extensions/Color/index.spec.js @@ -0,0 +1,7 @@ +context('/demos/Extensions/Color', () => { + before(() => { + cy.visit('/demos/Extensions/Color') + }) + + // TODO: Write tests +}) diff --git a/docs/src/demos/Extensions/Color/index.vue b/docs/src/demos/Extensions/Color/index.vue new file mode 100644 index 00000000..3747d023 --- /dev/null +++ b/docs/src/demos/Extensions/Color/index.vue @@ -0,0 +1,70 @@ + + + diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index dd4a77c1..46f50943 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -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/) | diff --git a/docs/src/docPages/api/extensions/color.md b/docs/src/docPages/api/extensions/color.md new file mode 100644 index 00000000..c2d4eb36 --- /dev/null +++ b/docs/src/docPages/api/extensions/color.md @@ -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 `` tag (and only that). The font color is applied as inline style then, for example ``. + +## 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 + diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md index e0b65552..841284ae 100644 --- a/docs/src/docPages/api/marks/text-style.md +++ b/docs/src/docPages/api/marks/text-style.md @@ -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 `` 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 `` 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 diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md index 6c04894f..7b665c3c 100644 --- a/docs/src/docPages/experiments.md +++ b/docs/src/docPages/experiments.md @@ -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) diff --git a/docs/src/docPages/experiments/font-color.md b/docs/src/docPages/experiments/font-color.md deleted file mode 100644 index 2930680f..00000000 --- a/docs/src/docPages/experiments/font-color.md +++ /dev/null @@ -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 `` tag (and only that). The font color is applied as inline style then, for example ``. - -## 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 - diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 8d507417..c0969e9b 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -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 diff --git a/packages/extension-color/README.md b/packages/extension-color/README.md new file mode 100644 index 00000000..29effe1c --- /dev/null +++ b/packages/extension-color/README.md @@ -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). diff --git a/packages/extension-color/package.json b/packages/extension-color/package.json new file mode 100644 index 00000000..01844a39 --- /dev/null +++ b/packages/extension-color/package.json @@ -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" + } +} diff --git a/docs/src/demos/Experiments/FontColor/font-color.ts b/packages/extension-color/src/color.ts similarity index 54% rename from docs/src/demos/Experiments/FontColor/font-color.ts rename to packages/extension-color/src/color.ts index 28ec9358..0a86ef3d 100644 --- a/docs/src/demos/Experiments/FontColor/font-color.ts +++ b/packages/extension-color/src/color.ts @@ -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 { - 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({ - name: 'fontColor', +export const Color = Extension.create({ + name: 'color', defaultOptions: { types: ['textStyle'], @@ -32,21 +32,20 @@ export const FontColor = Extension.create({ { 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({ 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() }, diff --git a/packages/extension-color/src/index.ts b/packages/extension-color/src/index.ts new file mode 100644 index 00000000..d309001f --- /dev/null +++ b/packages/extension-color/src/index.ts @@ -0,0 +1,5 @@ +import { Color } from './color' + +export * from './color' + +export default Color