# TextStyleKit

Bundles TextStyle and its typography/color/language companions. Highlight and font resources are separate.

Bundles TextStyle and its typography/color/language companions. Highlight and font resources are separate.

`@quirekit/extension-text-style` · **MIT**

## Editor compatibility
Layer：**Shared document capability**
| Editor | Status | Assembly and boundaries |
| --- | --- | --- |
| Classic | Requires integration | [ClassicEditorFormatting](/en/plugins/reference/classic-editor-formatting) — Classic uses ClassicEditorFormatting for text styles and controls. Start with the default preset and configure its adapter fields instead of adding a duplicate TextStyleKit. |
| Block | Supported | [createBlockEditorPreset](/en/plugins/reference/create-block-editor-preset) — The default createBlockEditor preset installs this capability. Configure the corresponding preset child; graphic editing uses the preset's workspace ports, while persistence and assets remain host-owned. Avoid duplicate extensions. |

“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See [status and integration rules](/en/plugins/compatibility). Licensing is shown separately.

## Installation

```sh
pnpm add @quirekit/extension-text-style@alpha
```

Install in Editor extensions. The host supplies a view, container and persistence; see [Quick start](/en/guide/quick-start).

```ts
import { TextStyleKit } from '@quirekit/extension-text-style'

const styles = TextStyleKit.configure({ backgroundColor: false })
```

Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see [support and licensing](/en/support).

## Integration by editor

These snippets use an existing host element named element. The host owns container sizing and persistence; call instance.destroy() on teardown. Avoid duplicating preset capabilities and supply required host ports before installation.

### Classic

Classic uses ClassicEditorFormatting for text styles and controls. Start with the default preset and configure its adapter fields instead of adding a duplicate TextStyleKit.

[ClassicEditorFormatting](/en/plugins/reference/classic-editor-formatting)

```ts
import { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'

const instance = createClassicEditor({ element })
```

### Block

The default createBlockEditor preset installs this capability. Configure the corresponding preset child; graphic editing uses the preset's workspace ports, while persistence and assets remain host-owned. Avoid duplicate extensions.

[createBlockEditorPreset](/en/plugins/reference/create-block-editor-preset)

```ts
import { createBlockEditor } from '@quirekit/block-editor'
import '@quirekit/block-editor/styles.css'

const instance = createBlockEditor({
  element,
  content: { type: 'doc', content: [{ type: 'paragraph' }] },
})
```

## Configuration

These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See [configuration](/en/plugins/configuration).

### doubleStrike

Double-strike extension options, or false to disable.

Type：`false | Partial<DoubleStrikeOptions>`

Default：`{}`

See [DoubleStrike](/en/plugins/reference/double-strike) for child settings. Only pass false when this field's type permits it.

### superscript

Superscript extension options, or false to disable.

Type：`false | Partial<ScriptPositionOptions>`

Default：`{}`

See [Superscript](/en/plugins/reference/superscript) for child settings. Only pass false when this field's type permits it.

### subscript

Subscript extension options, or false to disable.

Type：`false | Partial<ScriptPositionOptions>`

Default：`{}`

See [Subscript](/en/plugins/reference/subscript) for child settings. Only pass false when this field's type permits it.

### fontFamily

Font family extension options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [FontFamily](/en/plugins/reference/font-family) for child settings. Only pass false when this field's type permits it.

### color

Color extension options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [Color](/en/plugins/reference/color) for child settings. Only pass false when this field's type permits it.

### backgroundColor

Background color extension options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [BackgroundColor](/en/plugins/reference/background-color) for child settings. Only pass false when this field's type permits it.

### fontSize

Font size extension options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [FontSize](/en/plugins/reference/font-size) for child settings. Only pass false when this field's type permits it.

### letterSpacing

Word-compatible character-spacing options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [LetterSpacing](/en/plugins/reference/letter-spacing) for child settings. Only pass false when this field's type permits it.

### language

Word-compatible run-language options, or false to disable.

Type：`false | Partial<TextStyleAttributeExtensionOptions>`

Default：`{}`

See [Language](/en/plugins/reference/language) for child settings. Only pass false when this field's type permits it.

### textStyle

TextStyle mark options, or false to disable.

Type：`false | Partial<TextStyleOptions>`

Default：`{}`

See [TextStyle](/en/plugins/reference/text-style) for child settings. Only pass false when this field's type permits it.

## Commands and runtime

This entry declares no directly enumerable commands. Children supply bundle commands; product plugins use contributions or document services.

## Other public exports

- `textStyleKitExtension` · `@quirekit/extension-text-style`

## Next steps

Return to [all plugins](/en/plugins), or read [configuration](/en/plugins/configuration) to distinguish options, attributes and commands.

See [extension development](/en/build/extension) for custom capabilities and [Build a product](/en/build) for complete hosting.