Text Editor - Focus Plugin
Dim every block except the one the caret is in for distraction-free writing.
#Usage
import { TextEditor } from '@primeui/vue-texteditor';
import { focusPlugin } from './focus-plugin';<TextEditor.Root v-model="value" :plugins="[focusPlugin]">
<TextEditor.Toolbar v-slot="{ plugins }">
<button @click="plugins.focus?.toggle()">Focus Mode</button>
</TextEditor.Toolbar>
<TextEditor.Content />
</TextEditor.Root>The Focus plugin highlights the block the caret is in and dims the rest, so the current line stands out while writing. It is implemented with a node decoration recomputed on each selection change and never touches the document or schema. The toggle command turns it on and off.
The plugin applies two classes. The CSS is supplied by the application so it matches the active theme:
.p-text-editor-blurred {
opacity: 0.35;
transition: opacity 0.2s;
}
.p-text-editor-focused {
opacity: 1;
}#Options
| Option | Type | Default | Description |
|---|---|---|---|
activeClass | string | p-text-editor-focused | Class applied to the focused block |
inactiveClass | string | p-text-editor-blurred | Class applied to every other block |
#Commands
| Command | Signature | Description |
|---|---|---|
enable | () => void | Turn focus mode on |
disable | () => void | Turn focus mode off |
toggle | () => void | Toggle focus mode |
isEnabled | () => boolean | Whether focus mode is currently on |
#Example
Click Toggle Focus Mode, then move the caret between paragraphs.
Loading Demo...