README

A collection of mutators for transforming Statamic Bard content.

All mutators are implemented as plugins for the Bard Mutator Addon.

Installation

Install the package via composer:

composer require daun/statamic-bard-mutators

Registration

Register any mutators you want to use from the Mutator facade. Options can be passed as arguments to the constructor. You can read more about class-based mutator plugins in the addon readme.

use JackSleight\StatamicBardMutator\Facades\Mutator;
use Daun\BardMutators\MarkExternalLinks;

Mutator::plugin(new MarkExternalLinks());

Mutators

Mark External Links

Mark external links with target="_blank" and rel="external".

<!-- Before -->
<a href="https://example.com">External link</a>

<!-- After -->
<a href="https://example.com" target="_blank" rel="external">External link</a>

new MarkExternalLinks();

// Optionally customize the `target` and `rel` attributes
new MarkExternalLinks(
    target: '_blank',
    rel: 'noopener noreferrer'
);

Mark Asset Links

Mark links to assets with download="filename.ext".

<!-- Before -->
<a href="/assets/video.mp4">Download video</a>

<!-- After -->
<a href="/assets/video.mp4" download="video.mp4">Download video</a>

new MarkAssetLinks();

Generate Heading IDs

Adds an id attribute to headings based on their content.

<!-- Before -->
<h2>Heading</h2>

<!-- After -->
<h2 id="heading">Heading</h2>

new GenerateHeadingIds();

// Optionally customize which heading levels to generate IDs for
new GenerateHeadingIds(levels: [2, 3]);

Semantic Blockquotes

Wraps blockquotes in a figure element and moves the author/source into a figcaption element.

<!-- Before -->
<blockquote>
    <p>Quote</p>
    <p>— Author</p>
</blockquote>

<!-- After -->
<figure>
    <blockquote>
        <p>Quote</p>
    </blockquote>
    <figcaption>
        Author
    </figcaption>
</figure>

new SemanticBlockquotes();

// Optionally add a class to the figure element
new SemanticBlockquotes(
    class: 'quote'
);

Wrap Tables

Wraps tables in a div element to allow for horizontal scrolling on smaller screens.

<!-- Before -->
<table>...</table>

<!-- After -->
<div class="table-wrapper">
    <table>...</table>
</div>

new WrapTables();

// Optionally use a custom tag or add a class to the wrapper element
new WrapTables(
    tag: 'section',
    class: 'table'
);

Remove List Item Paragraphs

Remove the paragraphs that tiptap automatically adds inside list items.

<!-- Before -->
<li>
    <p>List item</p>
</li>

<!-- After -->
<li>
    List item
</li>

new RemoveListItemParagraphs();

License

MIT