From d6930a6ba626323bbef3297e227d3e9d6d9113de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 6 Nov 2020 14:46:59 +0100 Subject: [PATCH 1/5] add basic text style mark --- docs/src/demos/Marks/TextStyle/index.vue | 47 ++++++++++++++++++++++ docs/src/docPages/api/marks/text-style.md | 16 ++++++++ docs/src/links.yaml | 3 ++ packages/extension-text-style/index.ts | 25 ++++++++++++ packages/extension-text-style/package.json | 17 ++++++++ 5 files changed, 108 insertions(+) create mode 100644 docs/src/demos/Marks/TextStyle/index.vue create mode 100644 docs/src/docPages/api/marks/text-style.md create mode 100644 packages/extension-text-style/index.ts create mode 100644 packages/extension-text-style/package.json diff --git a/docs/src/demos/Marks/TextStyle/index.vue b/docs/src/demos/Marks/TextStyle/index.vue new file mode 100644 index 00000000..ee4a1c63 --- /dev/null +++ b/docs/src/demos/Marks/TextStyle/index.vue @@ -0,0 +1,47 @@ + + + diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md new file mode 100644 index 00000000..cc1440e4 --- /dev/null +++ b/docs/src/docPages/api/marks/text-style.md @@ -0,0 +1,16 @@ +# Text Style + +## Installation +```bash +# With npm +npm install @tiptap/extension-text-style + +# Or: With Yarn +yarn add @tiptap/extension-text-style +``` + +## Source code +[packages/extension-text-style/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-style/) + +## Usage + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 23dd30c7..67b6e205 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -114,6 +114,9 @@ link: /api/marks/link - title: Strike link: /api/marks/strike + - title: Text Style + link: /api/marks/text-style + draft: true - title: Underline link: /api/marks/underline - title: Extensions diff --git a/packages/extension-text-style/index.ts b/packages/extension-text-style/index.ts new file mode 100644 index 00000000..827137cb --- /dev/null +++ b/packages/extension-text-style/index.ts @@ -0,0 +1,25 @@ +import { createMark } from '@tiptap/core' + +const TextStyle = createMark({ + name: 'textStyle', + + parseHTML() { + return [ + { + tag: 'span', + }, + ] + }, + + renderHTML({ attributes }) { + return ['span', attributes, 0] + }, +}) + +export default TextStyle + +declare module '@tiptap/core/src/Editor' { + interface AllExtensions { + TextStyle: typeof TextStyle, + } +} diff --git a/packages/extension-text-style/package.json b/packages/extension-text-style/package.json new file mode 100644 index 00000000..4e4d5187 --- /dev/null +++ b/packages/extension-text-style/package.json @@ -0,0 +1,17 @@ +{ + "name": "@tiptap/extension-text-style", + "version": "1.0.0", + "source": "index.ts", + "main": "dist/tiptap-extension-text-style.js", + "umd:main": "dist/tiptap-extension-text-style.umd.js", + "module": "dist/tiptap-extension-text-style.mjs", + "unpkg": "dist/tiptap-extension-text-style.js", + "jsdelivr": "dist/tiptap-extension-text-style.js", + "files": [ + "src", + "dist" + ], + "peerDependencies": { + "@tiptap/core": "2.x" + } +} From 944d5e7039ec2de5cc625602bb41910a4b01f9ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 6 Nov 2020 15:14:04 +0100 Subject: [PATCH 2/5] add basic font-family extension --- docs/src/demos/Marks/TextStyle/index.vue | 9 ++++ packages/extension-font-family/index.ts | 46 +++++++++++++++++++++ packages/extension-font-family/package.json | 17 ++++++++ 3 files changed, 72 insertions(+) create mode 100644 packages/extension-font-family/index.ts create mode 100644 packages/extension-font-family/package.json diff --git a/docs/src/demos/Marks/TextStyle/index.vue b/docs/src/demos/Marks/TextStyle/index.vue index ee4a1c63..4d8c7ec5 100644 --- a/docs/src/demos/Marks/TextStyle/index.vue +++ b/docs/src/demos/Marks/TextStyle/index.vue @@ -1,5 +1,12 @@ @@ -12,6 +19,7 @@ import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' import Heading from '@tiptap/extension-heading' import TextStyle from '@tiptap/extension-text-style' +import FontFamily from '@tiptap/extension-font-family' export default { components: { @@ -32,6 +40,7 @@ export default { Text(), Heading(), TextStyle(), + FontFamily(), ], content: `

Hello

diff --git a/packages/extension-font-family/index.ts b/packages/extension-font-family/index.ts new file mode 100644 index 00000000..92792c9b --- /dev/null +++ b/packages/extension-font-family/index.ts @@ -0,0 +1,46 @@ +import { Command, createExtension } from '@tiptap/core' + +type FontFamilyOptions = { + types: string[], +} + +const FontFamily = createExtension({ + defaultOptions: { + types: ['textStyle'], + }, + + addGlobalAttributes() { + return [ + { + types: this.options.types, + attributes: { + fontFamily: { + default: null, + renderHTML: attributes => ({ + style: `font-family: ${attributes.fontFamily}`, + }), + parseHTML: element => ({ + fontFamily: element.style.fontFamily, + }), + }, + }, + }, + ] + }, + + addCommands() { + return { + fontFamily: (fontFamily: string): Command => ({ commands }) => { + return commands.updateMarkAttributes('textStyle', { fontFamily }) + }, + } + }, +}) + +export default FontFamily + +declare module '@tiptap/core/src/Editor' { + interface AllExtensions { + FontFamily: typeof FontFamily, + } +} diff --git a/packages/extension-font-family/package.json b/packages/extension-font-family/package.json new file mode 100644 index 00000000..66cab164 --- /dev/null +++ b/packages/extension-font-family/package.json @@ -0,0 +1,17 @@ +{ + "name": "@tiptap/extension-font-family", + "version": "1.0.0", + "source": "index.ts", + "main": "dist/tiptap-extension-font-family.js", + "umd:main": "dist/tiptap-extension-font-family.umd.js", + "module": "dist/tiptap-extension-font-family.mjs", + "unpkg": "dist/tiptap-extension-font-family.js", + "jsdelivr": "dist/tiptap-extension-font-family.js", + "files": [ + "src", + "dist" + ], + "peerDependencies": { + "@tiptap/core": "2.x" + } +} From 1bed23484d399cce59ede533b0c44d1647149115 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 6 Nov 2020 16:06:36 +0100 Subject: [PATCH 3/5] add content --- docs/src/demos/Marks/TextStyle/index.vue | 11 +++++++++- .../docPages/api/extensions/font-family.md | 20 +++++++++++++++++++ docs/src/docPages/api/marks/text-style.md | 5 +++-- docs/src/docPages/api/nodes/bullet-list.md | 2 +- docs/src/docPages/api/nodes/list-item.md | 2 +- docs/src/docPages/api/nodes/ordered-list.md | 2 +- docs/src/docPages/api/nodes/task-item.md | 2 +- docs/src/links.yaml | 2 ++ 8 files changed, 39 insertions(+), 7 deletions(-) create mode 100644 docs/src/docPages/api/extensions/font-family.md diff --git a/docs/src/demos/Marks/TextStyle/index.vue b/docs/src/demos/Marks/TextStyle/index.vue index 4d8c7ec5..0e40c00f 100644 --- a/docs/src/demos/Marks/TextStyle/index.vue +++ b/docs/src/demos/Marks/TextStyle/index.vue @@ -3,9 +3,18 @@ - + + + diff --git a/docs/src/docPages/api/extensions/font-family.md b/docs/src/docPages/api/extensions/font-family.md new file mode 100644 index 00000000..09171211 --- /dev/null +++ b/docs/src/docPages/api/extensions/font-family.md @@ -0,0 +1,20 @@ +# FontFamily + +## Installation +::: warning Use with TextStyle +This extension requires the [`TextStyle`](/api/nodes/text-style) mark. +::: + +```bash +# with npm +npm install @tiptap/extension-font-family + +# with Yarn +yarn add @tiptap/extension-font-family +``` + +## Source code +[packages/extension-font-family/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-font-family/) + +## Usage + diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md index cc1440e4..8c5fce5e 100644 --- a/docs/src/docPages/api/marks/text-style.md +++ b/docs/src/docPages/api/marks/text-style.md @@ -1,11 +1,12 @@ # Text Style +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`. ## Installation ```bash -# With npm +# with npm npm install @tiptap/extension-text-style -# Or: With Yarn +# with Yarn yarn add @tiptap/extension-text-style ``` diff --git a/docs/src/docPages/api/nodes/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md index 6f5fff6c..b6f85546 100644 --- a/docs/src/docPages/api/nodes/bullet-list.md +++ b/docs/src/docPages/api/nodes/bullet-list.md @@ -5,7 +5,7 @@ Type * , -  or +  at the b ## Installation ::: warning Use with ListItem -This extension requires the [`ListItem`](/api/nodes/list-item) extension. +This extension requires the [`ListItem`](/api/nodes/list-item) node. ::: ```bash diff --git a/docs/src/docPages/api/nodes/list-item.md b/docs/src/docPages/api/nodes/list-item.md index 3fbc1f42..2f6408b2 100644 --- a/docs/src/docPages/api/nodes/list-item.md +++ b/docs/src/docPages/api/nodes/list-item.md @@ -3,7 +3,7 @@ The ListItem extension adds support for the `
  • ` HTML tag. It’s used for bul ## Installation ::: warning Use with BulletList and/or OrderedList -This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) extension. +This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) node. ::: ```bash diff --git a/docs/src/docPages/api/nodes/ordered-list.md b/docs/src/docPages/api/nodes/ordered-list.md index 38dc26e7..5693ddb0 100644 --- a/docs/src/docPages/api/nodes/ordered-list.md +++ b/docs/src/docPages/api/nodes/ordered-list.md @@ -5,7 +5,7 @@ Type 1.  (or any other number followed by a dot) at the beginn ## Installation ::: warning Use with ListItem -This extension requires the [`ListItem`](/api/nodes/list-item) extension. +This extension requires the [`ListItem`](/api/nodes/list-item) node. ::: ```bash diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md index 97aab620..82209b49 100644 --- a/docs/src/docPages/api/nodes/task-item.md +++ b/docs/src/docPages/api/nodes/task-item.md @@ -5,7 +5,7 @@ This extension doesn’t require any JavaScript framework, it’s based on plain ## Installation ::: warning Use with TaskList -This extension requires the [`TaskList`](/api/nodes/task-list) extension. +This extension requires the [`TaskList`](/api/nodes/task-list) node. ::: ```bash diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 67b6e205..cc2caf9d 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -132,6 +132,8 @@ link: /api/extensions/dropcursor - title: Focus link: /api/extensions/focus + - title: FontFamily + link: /api/extensions/font-family - title: Gapcursor link: /api/extensions/gapcursor - title: History From 5ec6e8bfd7ed82f8844ccc8b6dc11f570e2c2ad8 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 6 Nov 2020 16:12:53 +0100 Subject: [PATCH 4/5] document text style and font family extensions (wip) --- docs/src/demos/Marks/TextStyle/index.spec.js | 5 +++++ docs/src/docPages/api/extensions/font-family.md | 12 +++++++++--- docs/src/docPages/api/marks/text-style.md | 2 +- docs/src/links.yaml | 1 + 4 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 docs/src/demos/Marks/TextStyle/index.spec.js diff --git a/docs/src/demos/Marks/TextStyle/index.spec.js b/docs/src/demos/Marks/TextStyle/index.spec.js new file mode 100644 index 00000000..e5e31a5b --- /dev/null +++ b/docs/src/demos/Marks/TextStyle/index.spec.js @@ -0,0 +1,5 @@ +context('/api/marks/text-style', () => { + before(() => { + cy.visit('/api/marks/text-style') + }) +}) diff --git a/docs/src/docPages/api/extensions/font-family.md b/docs/src/docPages/api/extensions/font-family.md index 09171211..08c86b2a 100644 --- a/docs/src/docPages/api/extensions/font-family.md +++ b/docs/src/docPages/api/extensions/font-family.md @@ -1,18 +1,24 @@ # FontFamily +This extension enables you to set the font family in the editor. ## Installation ::: warning Use with TextStyle -This extension requires the [`TextStyle`](/api/nodes/text-style) mark. +This extension requires the [`TextStyle`](/api/marks/text-style) mark. ::: ```bash # with npm -npm install @tiptap/extension-font-family +npm install @tiptap/extension-text-style @tiptap/extension-font-family # with Yarn -yarn add @tiptap/extension-font-family +yarn add @tiptap/extension-text-style @tiptap/extension-font-family ``` +## Settings +| Option | Type | Default | Description | +| ------ | ----- | ------------- | --------------------------------------------------------------------- | +| types | array | ['textStyle'] | A list of marks where the font family attribute should be applied to. | + ## Source code [packages/extension-font-family/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-font-family/) diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md index 8c5fce5e..9c1aaac0 100644 --- a/docs/src/docPages/api/marks/text-style.md +++ b/docs/src/docPages/api/marks/text-style.md @@ -1,5 +1,5 @@ # Text Style -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`. +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). ## Installation ```bash diff --git a/docs/src/links.yaml b/docs/src/links.yaml index dd20f5a4..ed2b93f5 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -132,6 +132,7 @@ link: /api/extensions/focus - title: FontFamily link: /api/extensions/font-family + draft: true - title: Gapcursor link: /api/extensions/gapcursor - title: History From 1af78299247e967a76b400f5db8adf8e28c5e5f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 6 Nov 2020 16:21:19 +0100 Subject: [PATCH 5/5] improve text style extension --- docs/src/demos/Marks/TextStyle/index.vue | 16 +++++++------- packages/extension-font-family/index.ts | 21 ++++++++++++------ packages/extension-text-style/index.ts | 27 +++++++++++++++++++++++- 3 files changed, 49 insertions(+), 15 deletions(-) diff --git a/docs/src/demos/Marks/TextStyle/index.vue b/docs/src/demos/Marks/TextStyle/index.vue index 4d8c7ec5..03afcf8f 100644 --- a/docs/src/demos/Marks/TextStyle/index.vue +++ b/docs/src/demos/Marks/TextStyle/index.vue @@ -1,11 +1,14 @@