feat(text-style): merge all pkgs into text-style, add `background-col…

…or` and `line-height` (#6001)

.changeset/orange-spoons-rescue.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-text-style': minor
+---
+
+Add `toggleTextStyle` command and add typings for the commands parameters based on the installed extensions that include `textStyle`

.changeset/smart-turtles-happen.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-background-color': patch
+---
+
+Adds a new extension, `extension-background-color` which can color the background of `textStyle`s

.changeset/twelve-paws-work.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-line-height': patch
+---
+
+This adds the `extension-line-height` package which controls the line-height of text like `font-size`, `font-family`, etc.

demos/src/Commands/Cut/React/index.jsx

@@ -1,8 +1,7 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback } from 'react'

demos/src/Commands/InsertContent/React/index.jsx

@@ -1,10 +1,9 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import { Image } from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider, useCurrentEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useCallback } from 'react'

demos/src/Commands/SetContent/React/index.jsx

@@ -1,9 +1,8 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
 import Mentions from '@tiptap/extension-mention'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color , TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'

demos/src/Examples/Default/React/index.jsx

@@ -1,8 +1,7 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color , TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider, useCurrentEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'

demos/src/Examples/Default/Svelte/index.svelte

@@ -1,9 +1,9 @@
 <script>
   import "./styles.scss";
 
-  import { Color } from '@tiptap/extension-color'
+  import { Color } from '@tiptap/extension-text-style'
   import ListItem from '@tiptap/extension-list-item'
-  import TextStyle from '@tiptap/extension-text-style'
+  import { TextStyle } from '@tiptap/extension-text-style'
   import StarterKit from "@tiptap/starter-kit";
   import { Editor } from "@tiptap/core";
   import { onMount } from "svelte";

demos/src/Examples/Default/Vue/index.vue

@@ -119,9 +119,8 @@
 </template>
 
 <script>
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import StarterKit from '@tiptap/starter-kit'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 

demos/src/Examples/StaticRendering/React/index.tsx

@@ -1,8 +1,7 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorProvider, JSONContent, useCurrentEditor, useEditorState } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { renderToHTMLString, renderToMarkdown, renderToReactElement } from '@tiptap/static-renderer'

demos/src/Experiments/All/Vue/index.vue

@@ -104,7 +104,6 @@ import Bold from '@tiptap/extension-bold'
 import BulletList from '@tiptap/extension-bullet-list'
 import Code from '@tiptap/extension-code'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import Color from '@tiptap/extension-color'
 import Document from '@tiptap/extension-document'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import Gapcursor from '@tiptap/extension-gapcursor'
@@ -129,7 +128,7 @@ import TaskItem from '@tiptap/extension-task-item'
 import TaskList from '@tiptap/extension-task-list'
 import Text from '@tiptap/extension-text'
 import TextAlign from '@tiptap/extension-text-align'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import Underline from '@tiptap/extension-underline'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import { all, createLowlight } from 'lowlight'

demos/src/Experiments/IsolatingClear/React/index.jsx

@@ -1,8 +1,7 @@
 import './styles.scss'
 
-import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
-import TextStyle from '@tiptap/extension-text-style'
+import { Color, TextStyle } from '@tiptap/extension-text-style'
 import { EditorContent, Node, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'

demos/src/Extensions/BackgroundColor/React/index.spec.js

@@ -0,0 +1,56 @@
+context('/src/Extensions/BackgroundColor/React/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/BackgroundColor/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+    })
+    cy.get('.tiptap').type('{selectall}')
+  })
+
+  it('should set the background color of the selected text', () => {
+    cy.get('[data-testid="setPurple"]').should('not.have.class', 'is-active').click().should('have.class', 'is-active')
+
+    cy.get('.tiptap').find('span').should('have.attr', 'style', 'background-color: #958DF1')
+  })
+
+  it('should remove the background color of the selected text', () => {
+    cy.get('[data-testid="setPurple"]').click()
+
+    cy.get('.tiptap span').should('exist')
+
+    cy.get('[data-testid="unsetBackgroundColor"]').click()
+
+    cy.get('.tiptap span').should('not.exist')
+  })
+
+  it('should change background color with color picker', () => {
+    cy.get('input[type=color]').invoke('val', '#ff0000').trigger('input')
+
+    cy.get('.tiptap').find('span').should('have.attr', 'style', 'background-color: #ff0000')
+  })
+
+  it('should match background color and color picker color values', () => {
+    cy.get('[data-testid="setPurple"]').click()
+
+    cy.get('input[type=color]').should('have.value', '#958df1')
+  })
+
+  it('should preserve background color on new lines', () => {
+    cy.get('[data-testid="setPurple"]').click()
+    cy.get('.ProseMirror').type('Example Text{enter}')
+
+    cy.get('[data-testid="setPurple"]').should('have.class', 'is-active')
+  })
+
+  it('should unset background color on new lines after unset clicked', () => {
+    cy.get('[data-testid="setPurple"]').click()
+    cy.get('.ProseMirror').type('Example Text{enter}')
+    cy.get('[data-testid="unsetBackgroundColor"]').click()
+    cy.get('.ProseMirror').type('Example Text')
+
+    cy.get('[data-testid="setPurple"]').should('not.have.class', 'is-active')
+  })
+})

demos/src/Extensions/BackgroundColor/React/index.tsx

@@ -0,0 +1,109 @@
+import './styles.scss'
+
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import { BackgroundColor, TextStyle } from '@tiptap/extension-text-style'
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
+import React from 'react'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text, TextStyle, BackgroundColor],
+    content: `
+        <p><span style="background-color: #958DF1">Oh, for some reason that’s purple.</span></p>
+      `,
+  })
+
+  const editorState = useEditorState({
+    editor,
+    selector: ctx => {
+      return {
+        color: ctx.editor.getAttributes('textStyle').backgroundColor,
+        isPurple: ctx.editor.isActive('textStyle', { backgroundColor: '#958DF1' }),
+        isRed: ctx.editor.isActive('textStyle', { backgroundColor: '#F98181' }),
+        isOrange: ctx.editor.isActive('textStyle', { backgroundColor: '#FBBC88' }),
+        isYellow: ctx.editor.isActive('textStyle', { backgroundColor: '#FAF594' }),
+        isBlue: ctx.editor.isActive('textStyle', { backgroundColor: '#70CFF8' }),
+        isTeal: ctx.editor.isActive('textStyle', { backgroundColor: '#94FADB' }),
+        isGreen: ctx.editor.isActive('textStyle', { backgroundColor: '#B9F18D' }),
+      }
+    },
+  })
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <div className="control-group">
+        <div className="button-group">
+          <input
+            type="color"
+            onInput={event => editor.chain().focus().setBackgroundColor(event.currentTarget.value).run()}
+            value={editorState.color}
+            data-testid="setBackgroundColor"
+          />
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#958DF1').run()}
+            className={editorState.isPurple ? 'is-active' : ''}
+            data-testid="setPurple"
+          >
+            Purple
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#F98181').run()}
+            className={editorState.isRed ? 'is-active' : ''}
+            data-testid="setRed"
+          >
+            Red
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#FBBC88').run()}
+            className={editorState.isOrange ? 'is-active' : ''}
+            data-testid="setOrange"
+          >
+            Orange
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#FAF594').run()}
+            className={editorState.isYellow ? 'is-active' : ''}
+            data-testid="setYellow"
+          >
+            Yellow
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#70CFF8').run()}
+            className={editorState.isBlue ? 'is-active' : ''}
+            data-testid="setBlue"
+          >
+            Blue
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#94FADB').run()}
+            className={editorState.isTeal ? 'is-active' : ''}
+            data-testid="setTeal"
+          >
+            Teal
+          </button>
+          <button
+            onClick={() => editor.chain().focus().setBackgroundColor('#B9F18D').run()}
+            className={editorState.isGreen ? 'is-active' : ''}
+            data-testid="setGreen"
+          >
+            Green
+          </button>
+          <button
+            onClick={() => editor.chain().focus().unsetBackgroundColor().run()}
+            data-testid="unsetBackgroundColor"
+          >
+            Unset color
+          </button>
+        </div>
+      </div>
+
+      <EditorContent editor={editor} />
+    </>
+  )
+}

demos/src/Extensions/BackgroundColor/React/styles.scss

@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.tiptap {
+  :first-child {
+    margin-top: 0;
+  }
+}

demos/src/Extensions/BackgroundColor/Vue/index.spec.js

@@ -0,0 +1,56 @@
+context('/src/Extensions/BackgroundColor/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/BackgroundColor/Vue/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+    })
+    cy.get('.tiptap').type('{selectall}')
+  })
+
+  it('should set the background color of the selected text', () => {
+    cy.get('[data-testid="setPurple"]').should('not.have.class', 'is-active').click().should('have.class', 'is-active')
+
+    cy.get('.tiptap').find('span').should('have.attr', 'style', 'background-color: #958DF1')
+  })
+
+  it('should remove the background color of the selected text', () => {
+    cy.get('[data-testid="setPurple"]').click()
+
+    cy.get('.tiptap span').should('exist')
+
+    cy.get('[data-testid="unsetBackgroundColor"]').click()
+
+    cy.get('.tiptap span').should('not.exist')
+  })
+
+  it('should change background color with color picker', () => {
+    cy.get('input[type=color]').invoke('val', '#ff0000').trigger('input')
+
+    cy.get('.tiptap').find('span').should('have.attr', 'style', 'background-color: #ff0000')
+  })
+
+  it('should match background color and color picker color values', () => {
+    cy.get('[data-testid="setPurple"]').click()
+
+    cy.get('input[type=color]').should('have.value', '#958df1')
+  })
+
+  it('should preserve background color on new lines', () => {
+    cy.get('[data-testid="setPurple"]').click()
+    cy.get('.ProseMirror').type('Example Text{enter}')
+
+    cy.get('[data-testid="setPurple"]').should('have.class', 'is-active')
+  })
+
+  it('should unset background color on new lines after unset clicked', () => {
+    cy.get('[data-testid="setPurple"]').click()
+    cy.get('.ProseMirror').type('Example Text{enter}')
+    cy.get('[data-testid="unsetBackgroundColor"]').click()
+    cy.get('.ProseMirror').type('Example Text')
+
+    cy.get('[data-testid="setPurple"]').should('not.have.class', 'is-active')
+  })
+})