Blockquote

BlockquotePlugin adds a blockquote block node and one command: toggleBlockquote.

import {
  BlockquotePlugin,
  QalmaCommand,
  QalmaContent,
  QalmaEditor,
  QalmaToolbar,
  createQalmaEditor,
} from '@qalma/editor';

const editor = createQalmaEditor({
  content: '<p>Select a paragraph and turn it into a quote.</p>',
  plugins: [BlockquotePlugin],
});

Command

Command	Description
toggleBlockquote	Wraps the selection in a blockquote, or lifts it out when already inside one.

<qalma-editor [editor]="editor">
  <qalma-toolbar label="Blocks">
    <button type="button" qalmaCommand="toggleBlockquote">Quote</button>
  </qalma-toolbar>

  <qalma-content class="block min-h-40 p-4 [&_.ProseMirror]:outline-none" />
</qalma-editor>

The command uses ProseMirror's wrapping and lifting behavior. It returns false when the current selection cannot be wrapped or lifted.

Input rules

At the start of a textblock, typing > followed by a space wraps it in a blockquote. The conversion is one-way: pressing Backspace immediately after reverts to the literal characters.

Disable the shortcut while keeping the command and toolbar button:

const editor = createQalmaEditor({
  plugins: [BlockquotePlugin.configure({ inputRules: false })],
});

Validation	Error condition
inputRules must be a boolean	Non-boolean value.

Active state

toggleBlockquote is active when the selection is inside a blockquote at any ancestor depth.

readonly quoteActive = computed(() =>
  this.editor.isCommandActive('toggleBlockquote'),
);

button[qalmaCommand] uses the same state for .qalma-command-active and aria-pressed.

Styling

The plugin serializes to <blockquote>. The library does not style it.

qalma-content .ProseMirror blockquote {
  border-left: 4px solid var(--accent);
  margin: 1rem 0;
  padding-left: 1rem;
  color: var(--muted-foreground);
}