Highlight
Adds semantic text highlighting. defaultColor applies to newly created highlights without an explicit color.
Adds semantic text highlighting. defaultColor applies to newly created highlights without an explicit color.
@quirekit/extension-text-style · MIT
Editor compatibility
Layer:Shared document capability
| Editor | Status | Assembly and boundaries |
|---|---|---|
| Classic | Supported | classicEditorPreset — Use the product-neutral classicEditorPreset without duplicating installed capabilities. The Word preset replaces paragraphs, headings and container lists; do not stack generic structures onto that model. |
| Block | Requires integration | Connect the services, targets and lifecycle described on this page and validate the selected View and document model. Core contracts are reusable, but there is no universal product installation without host ports. |
“Supported” means the product assembly above exists; interaction, host services and file formats retain their own conditions. See status and integration rules. Licensing is shown separately.
Installation
pnpm add @quirekit/extension-text-style@alpha
Install in Editor extensions. The host supplies a view, container and persistence; see Quick start.
import { Highlight } from '@quirekit/extension-text-style'
const highlighter = Highlight.configure({ defaultColor: 'yellow' })
Use compatible versions available from your distribution source. This site uses the Alpha workspace. License labels come from package metadata; see support and licensing.
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 · Supported
Use the product-neutral classicEditorPreset without duplicating installed capabilities. The Word preset replaces paragraphs, headings and container lists; do not stack generic structures onto that model.
classicEditorPresetimport { createClassicEditor } from '@quirekit/classic-editor'
import '@quirekit/classic-editor/styles.css'
const instance = createClassicEditor({ element })Block · Requires integration
Connect the services, targets and lifecycle described on this page and validate the selected View and document model. Core contracts are reusable, but there is no universal product installation without host ports.
Configuration
These are extension-level defaults. Presets can override them; they are distinct from current document attributes. See configuration.
HTMLAttributes
HTML attributes added when the highlight mark serializes to HTML.
Type:Record<string, unknown>
Default:{}
defaultColor
Highlight token applied when a new mark does not specify one.
Type:string
Default:"yellow"
Commands and runtime
These commands are supplied directly by this extension. Availability depends on the installed schema, selection and protection policy; query editor.can() first.
| Command | Parameter signature |
|---|---|
setHighlight | setHighlight(attributes?: HighlightAttributes | undefined) |
toggleHighlight | toggleHighlight(attributes?: HighlightAttributes | undefined) |
unsetHighlight | unsetHighlight() |
startHighlighterPen | startHighlighterPen(color: string | null) |
stopHighlighterPen | stopHighlighterPen() |
applyHighlighterPen | applyHighlighterPen() |
These are parameter signatures. See commands and controls to connect UI while retaining one transaction/history authority.
Next steps
Return to all plugins, or read configuration to distinguish options, attributes and commands.
See extension development for custom capabilities and Build a product for complete hosting.