### Install RicherText.js via npm/yarn

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/getting-started.md

Installs the RicherText.js library using a package manager like yarn or npm. This is the first step to integrating the editor into your project.

```shell
yarn add @afomera/richer-text
```

--------------------------------

### Import RicherText.js CSS

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/getting-started.md

Imports the necessary CSS file for RicherText.js from the node modules. The path might need adjustment based on your project's specific setup.

```css
@import "@afomera/richer-text/dist/css/richer-text.css";
```

--------------------------------

### Import Highlight.js Theme for Syntax Highlighting

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/getting-started.md

Optionally imports a theme for syntax highlighting within the RicherText editor. Any highlight.js supported theme can be used; the 'github-dark' theme is recommended.

```css
@import "highlight.js/styles/github-dark.css";
```

--------------------------------

### Import RicherText.js in JavaScript

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/getting-started.md

Imports the RicherText.js web component into your JavaScript entry point. This ensures the editor is initialized and available for use.

```javascript
import "@afomera/richer-text";
```

--------------------------------

### Install Bridgetown Dependencies

Source: https://github.com/afomera/richer-text.js/blob/main/docs/README.md

Installs the necessary Ruby and Node.js dependencies for a Bridgetown site using Bundler and Yarn.

```sh
cd bridgetown-site-folder
bundle install && yarn install
```

--------------------------------

### JavaScript Installation Channels (JavaScript)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-changelog.md

Provides examples of how to install RicherText.js using different release channels (stable, beta, alpha).

```javascript
-- Use stable channel for installing RicherText.js
```

```javascript
-- Use beta channel for installing RicherText.js
```

```javascript
-- Updated install script to install RicherText.js v2 from the alpha channel
```

--------------------------------

### Bridgetown Gem Installation

Source: https://github.com/afomera/richer-text.js/blob/main/docs/README.md

Installs the Bridgetown gem, a prerequisite for using the Bridgetown static site generator.

```ruby
gem install bridgetown -N
```

--------------------------------

### Bridgetown Development and Build Commands

Source: https://github.com/afomera/richer-text.js/blob/main/docs/README.md

Provides commands for starting a Bridgetown site in development mode, building for production, and accessing the Ruby console.

```sh
# running locally
bin/bridgetown start

# build & deploy to production
bin/bridgetown deploy

# load the site up within a Ruby console (IRB)
bin/bridgetown console
```

--------------------------------

### RicherText.js Installation and Setup

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Commands to add the `richer_text` gem, install its assets, and migrate the database for RicherText.js integration in a Rails application.

```ruby
bundle add richer_text

rails richer_text:install

rails db:migrate
```

--------------------------------

### RicherTextEditor HTML Usage

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/getting-started.md

Demonstrates the basic HTML structure required to use the RicherTextEditor web component. It includes a hidden input field for form submission and attributes for initial content and placeholder text.

```html
<input type="hidden" value="" id="post_body" />
<richer-text-editor
  input="post_body"
  content="Your initial content"
  placeholder="Write something..."
></richer-text-editor>
```

--------------------------------

### Trix Editor Example

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/richer-text-vs-trix.md

Demonstrates the basic usage of the Trix rich text editor, showing its default capabilities for simple rich text editing.

```html
<input id="trix" type="hidden" value='<div>Hello world, from Trix!</div><pre>console.log("Hello world");</pre;'>
<trix-editor input="trix">
</trix-editor>
```

--------------------------------

### Manual Importmaps Installation

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails.md

Manually installs Richer Text JavaScript and CSS for Importmaps v2+ and configures `importmaps.rb`.

```bash
curl -Lo ./vendor/javascript/richer-text.js https://unpkg.com/@afomera/richer-text@<%= version_number %>/dist/bundle/index.module.js
curl -Lo ./app/assets/stylesheets/richer-text.css https://unpkg.com/@afomera/richer-text@<%= version_number %>/dist/css/richer-text.css
```

```ruby
pin "@afomera/richer-text", to: "richer-text.js"
```

```javascript
import "@afomera/richer-text";
```

--------------------------------

### Install Richer Text Gem

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails.md

Adds the `richer_text` gem to your project's Gemfile and installs necessary assets and migrations.

```shell
bundle add richer_text
rails richer_text:install
rails db:migrate
```

--------------------------------

### RicherText Editor with Custom Options

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

An example of the `richer-text-editor` web component with various attributes configured, including embeds path, custom suggestions, mentionable users path, tables, callouts, and bubble menu options. It also includes initial content with HTML formatting, mentions, and a table.

```html
<richer-text-editor embeds-path="/richer-text-embeds" custom-suggestions='[{ "name": "snippets", "trigger": "!", "path": "snippets.json" },{ "name": "snippets2", "trigger": "{{", "path": "snippets2.json" }]' mentionable-users-path="/users.json" tables="true" input="foobar" callouts="true" bubble-menu-options='{ "highlight": false }' content="<div class='callout' data-color='gray'>

<p style='text-align: center'><strong><span style='font-size: 20px'>Welcome to RicherText</span></strong></p>
<p>RicherText aims to provide an alternative solution to using ActionText and Trix in Ruby on Rails. It uses a rich text editor based on TipTap (which itself is based on ProseMirror).</p>
</div>
<richer-text-embed sgid='1234'></richer-text-embed>

<h1>We have H1 headings</h1>
<p>We also have @mentions see an example here: <span data-type='mention' class='richer-text--mention' data-id='gid://app/User/2' data-label='Jane Doe' data-avatar-url='https://i.pravatar.cc/64?img=5' contenteditable='false'><img class='richer-text--mention-img' src='https://i.pravatar.cc/64?img=5' alt='Jane Doe'><span class='richer-text--mention-label'>Jane Doe</span></span>, coming at you live from a Richer Text Editor near you.</p>
<p>Not only do we have headings, and regular paragraphs, you can find an example ✨ <strong>Table</strong> ✨ below. Mind blowing stuff, isn't it? You can use the / insert menu to insert a Table</p>
<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th colspan='3'>Description</th>
    </tr>
    <tr>
      <td>Cyndi Lauper</td>
      <td>singer</td>
      <td>songwriter</td>
      <td>actress</td>
    </tr>
  </tbody>
</table>

<p>Tables are an opt-in feature, so you'll need to pass <code>tables: true</code> to enable them where you want them.</p>
<h2>We have H2 headings</h2>
<p>Some text here</p>
<p>Code blocks? <em>We've got those!</em> It'll even <strong>syntax highlight</strong> as you type, try it! (Shift+Enter to exit a codeblock) Try hitting tab while you're in a codeblock too 😀.</p>
<pre>class Playground < ApplicationRecord
  has_richer_text :body
  
  validates :title, presence: true
end</pre>

<p>Need to support images in your text body? We can do that with three sizing options, small, medium and large.</p>
<img src='https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=5340&q=80'>
<p>Photo by <a href='https://unsplash.com/@jrkorpa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Jr Korpa</a> on <a href='https://unsplash.com/photos/9XngoIpxcEo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a></p>

<richer-text-embed sgid='1235'></richer-text-embed>

" placeholder="Write something..."></richer-text-editor>
```

--------------------------------

### Email Signup Form Embed

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/richer-text-embeds/1235.md

An embeddable HTML form for email signups, styled with CSS to appear within a rich text post. It includes input fields for name and email, and a submit button.

```html
<div class="richer-text-embed" style="text-align: center">
  <h2 class="rainbow" style="margin-top: 4px; margin-bottom: 4px;">An embeddable email signup form</h2>
  <p>This is another example of what an embed could look like. In this case we're pretending to embed a Newsletter signup form right inside the post.</p>

  <form style="width: 100%; display: flex; gap: 0.5rem;">
    <input type="text" placeholder="Your Name" />
    <input type="email" placeholder="you@starfleet.org" />

    <button type="submit" class="submit">Submit</button>

  </form>
</div>
```

--------------------------------

### Richer Text Embed Example

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/richer-text-embeds/1234.md

This HTML snippet demonstrates a typical embed structure within Richer Text, featuring a rainbow heading and descriptive paragraphs explaining its functionality and insertion method.

```html
<div class="richer-text-embed" style="text-align: center">
  <h2 class="rainbow" style="margin-top: 4px; margin-bottom: 4px;">Richer Embeds</h2>
  <p>You're currently looking at what an embed could look like inside of RicherText, with Richer Text you get full control over the HTML that renders inside and outside of the text editor.</p>

  <p>We've setup the editor so that you can insert an Embed by typing <strong>!</strong> and picking the Richer Text Embed option.</p>
</div>
```

--------------------------------

### Mention Notification Callback (Ruby)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Provides a Ruby callback example for handling mentionees after a record is saved. It iterates through `body.mentionees` and creates `Mention` records, optionally sending notifications.

```ruby
class Post < ApplicationRecord
  has_richer_text :body, store_as: :json

  has_many :mentions, class_name: "Mention", as: :mentionable, dependent: :destroy
  after_save_commit :notify_mentionees

  def notify_mentionees
    body.mentionees.each do |mentionee|
      mentions.find_or_create_by(mentionee: mentionee, mentioner: author)
    end
  end
end
```

--------------------------------

### Richer Text Storage Configuration (Ruby)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Configures Richer Text storage for JSON or HTML. For JSON storage, specify `store_as: :json`. This setup is crucial for how rich text content, including mentions, is persisted.

```ruby
has_richer_text :body, store_as: :json
```

```ruby
has_richer_text :body
```

--------------------------------

### Model Setup for Richer Text Embeds

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/embeds.md

Demonstrates how to include the RicherText::Embeddable concern in an ActiveRecord model and configure the `has_richer_text` association with JSON storage. It also shows how to define a custom partial path for rendering embeds.

```ruby
class Post < ApplicationRecord
  include RicherText::Embeddable

  has_richer_text :body, store_as: :json

  # Optionally you can override this method per model
  # Defaults to `to_partial_path` if not defined.
  def to_embeddable_partial_path
    "posts/embeddable_post"
  end
end
```

--------------------------------

### Git Workflow for Contributing

Source: https://github.com/afomera/richer-text.js/blob/main/docs/README.md

Outlines the standard Git workflow for contributing to a Bridgetown project hosted on GitHub, including forking, branching, committing, and creating pull requests.

```sh
1. Fork it
2. Clone the fork using `git clone` to your local development machine.
3. Create your feature branch (`git checkout -b my-new-feature`)
4. Commit your changes (`git commit -am 'Add some feature'`)
5. Push to the branch (`git push origin my-new-feature`)
6. Create a new Pull Request
```

--------------------------------

### Supported Toolbar Options

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/customization.md

Lists all the available options that can be included in the 'toolbar' attribute for custom toolbar configurations in richer-text.js.

```js
"bold",
  "italic",
  "strike",
  "code",
  "divider",
  "heading-1",
  "heading-2",
  "heading-3",
  "bulletlist",
  "orderedlist",
  "blockquote",
  "code-block",
  "horizontal-rule",
  "divider",
  "attachment",
  "spacer",
  "undo",
  "redo",
  "embed";
```

--------------------------------

### RicherText Editor Basic Usage

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/index.md

Demonstrates the basic usage of the richer-text-editor component with content and a placeholder.

```html
<richer-text-editor content="Hello world" placeholder="Write something...">
</richer-text-editor>
```

--------------------------------

### oEmbeds Routes and Controller Actions

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/oembed.md

Defines the routes for oEmbeds, including actions for creating, showing, and fetching embed patterns. It also includes a controller action to handle the creation of embeds from a URL.

```ruby
resources :embeds, only: [:show, :create], constraints: {id: /[^/]+/}  do
    collection do
      get :patterns
    end
  end

  skip_before_action :verify_authenticity_token, only: [:create]

  def create
    @embed = RicherText::OEmbed.from_url(params[:id])

    if @embed
      render json: {
        sgid: @embed.embeddable_sgid,
        content: "<richer-text-embed sgid=\"#{@embed.embeddable_sgid}\"></richer-text-embed>"
      }
    else
      head :not_found
    end
  end

  def show
    @embed = RicherText::Embed.find(params[:id])
  rescue ActiveRecord::RecordNotFound
    render html: "Embed not found", status: :not_found
  end

  def patterns
    render json: RicherText::OEmbed::PATTERNS
  end
```

--------------------------------

### Basic Richer-Text Editor Usage

Source: https://github.com/afomera/richer-text.js/blob/main/README.md

Demonstrates how to use the Richer-Text editor by simply adding the custom element to your HTML after importing the JS package.

```html
<richer-text-editor></richer-text-editor>
```

--------------------------------

### Richer Text Features Overview

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Lists the core features of the Richer Text editor, including formatting options, embeds, and custom commands.

```text
- Headings (H1 and H2)
- Blockquotes
- Code blocks that live-highlight as you type.
- Lists
- Formatting, including Bold, Italic and Strikethrough.
- Inline code support.
- Added Lines (horizontial rules)
- Emoji picker, in a slack-like style (type : to begin searching for the perfect emoji)
- Built in optional support for Tables
- Support for "Callouts" which are fancy alert looking boxes to call attention to your content.
- Slash commands (type / in the editor)
- Familar markdown-like commands in the editor. (Try typing # followed by content you wish to become an H1)
- Image uploads via ActiveStorage
- User @Mentions readily available
- Custom Suggestions
- Richer Embeds
- Built in support for oEmbeds
- Support for 1900+ embeds via optional iframely.com integration
```

--------------------------------

### Richer Text Storage Options

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Explains the benefits of choosing JSON storage over HTML for content in Richer Text, highlighting flexibility and advanced features.

```text
Which is better? 🤪 Just kidding, it's really up to you. Though I recommend choosing JSON storage for your content, since you'll have full control over the rendering of HTML, and your content will always render the most up-to-date HTML if you change how an Image should render.

By choosing JSON storage, you also get the ability to use Richer Text's custom embeds, built in oEmbed support, iframely's 1900+ embeds and more.
```

--------------------------------

### Richer Text Editor Configuration with Custom Suggestions

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/custom-suggestions.md

Configures the `richer-text-editor` tag with multiple custom suggestion providers for mentions, snippets, liquid completion, and post embedding. Each provider has a unique name, trigger character, and API path.

```ruby
<%= form.richer_text_area :body, "mentionable-users-path": "/users.json", "custom-suggestions": [
    { "name": "snippets", "trigger": "$", "path": "/snippets.json" },
    { "name": "liquidCompletion", "trigger": "{{", "path": "/liquid_completions.json" },
    { "name": "posts", "trigger": "!", "path": "/posts.json" }
  ].to_json %>
```

--------------------------------

### richer-text-editor with Minimal Toolbar Configuration

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/customization.md

Configures the richer-text-editor with a minimal toolbar preset and places it at the bottom. The 'toolbar-preset' attribute is set to 'minimal' and 'toolbar-placement' to 'bottom'.

```html
<richer-text-editor
  toolbar-preset="minimal"
  toolbar-placement="bottom"
></richer-text-editor>
```

--------------------------------

### Richer Text Editor Overview

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/about.md

This section provides a high-level overview of Richer Text, its foundation on TipTap and ProseMirror, and its development history. It highlights the editor's nature as a web component built with Lit.

```javascript
const richerTextEditor = document.createElement('richer-text-editor');
document.body.appendChild(richer-text-editor);
```

--------------------------------

### Richer Text Integration with Rhino Editor

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Highlights the support for Rhino Editor's content storage as JSON within the Richer Text framework.

```text
That's why I built support in for Rhino Editor to store it's content as JSON on the backend. While I hope people want to use my editor, I also just want to provide an ActionText like solution for other text editors.
```

--------------------------------

### richer-text-editor with Default Toolbar Configuration

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/customization.md

Configures the richer-text-editor with a default toolbar preset and specifies the toolbar placement. The 'toolbar-preset' attribute is set to 'default' and 'toolbar-placement' to 'top'.

```html
<richer-text-editor
  toolbar-preset="default"
  toolbar-placement="top"
></richer-text-editor>
```

--------------------------------

### RicherText Editor with Customization

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/index.md

Shows how to configure the richer-text-editor with various options like toolbar presets, placement, serializers, embeds, suggestions, mentions, callouts, tables, and bubble menu options.

```html
<richer-text-editor toolbar-preset="default" toolbar-placement="top" serializer="html" embeds-path="/richer-text-embeds" custom-suggestions='[{ "name": "snippets", "trigger": "!", "path": "snippets.json" },{ "name": "snippets2", "trigger": "{{", "path": "snippets2.json" }]' mentionable-users-path="/users.json" input="foobar" callouts="true" tables="true" bubble-menu-options='{ "highlight": true, "textColor": true }' content="<div class='callout' data-color='gray'>

<p style='text-align: center'><strong><span style='font-size: 20px'>Welcome to RicherText</span></strong></p>
<p>RicherText aims to provide an alternative solution to using ActionText and Trix in Ruby on Rails. It uses a rich text editor based on TipTap (which itself is based on ProseMirror).</p>
</div>
<richer-text-embed sgid='1234'></richer-text-embed>

<h1>We have H1 headings</h1>
<p>We also have @mentions see an example here: <span data-type='mention' class='richer-text--mention' data-id='gid://app/User/2' data-label='Jane Doe' data-avatar-url='https://i.pravatar.cc/64?img=5' contenteditable='false'><img class='richer-text--mention-img' src='https://i.pravatar.cc/64?img=5' alt='Jane Doe'><span class='richer-text--mention-label'>Jane Doe</span></span>, coming at you live from a Richer Text Editor near you.</p>
<p>Not only do we have headings, and regular paragraphs, you can find an example ✨ <strong>Table</strong> ✨ below. Mind blowing stuff, isn't it? You can use the / insert menu to insert a Table</p>
<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th colspan='3'>Description</th>
    </tr>
    <tr>
      <td>Cyndi Lauper</td>
      <td>singer</td>
      <td>songwriter</td>
      <td>actress</td>
    </tr>
  </tbody>
</table>

<p>Tables are an opt-in feature, so you'll need to pass <code>tables: true</code> to enable them where you want them.</p>
<h2>We have H2 headings</h2>
<p>Some text here</p>
<p>Code blocks? <em>We've got those!</em> It'll even <strong>syntax highlight</strong> as you type, try it! (Shift+Enter to exit a codeblock) Try hitting tab while you're in a codeblock too 😀.</p>
<pre>class Playground < ApplicationRecord
  has_richer_text :body
  
  validates :title, presence: true
end</pre>

<p>Need to support images in your text body? We can do that with three sizing options, small, medium and large.</p>
<img src='https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=5340&q=80'>
<p>Photo by <a href='https://unsplash.com/@jrkorpa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Jr Korpa</a> on <a href='https://unsplash.com/photos/9XngoIpxcEo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a></p>

<richer-text-embed sgid='1235'></richer-text-embed>

" placeholder="Write something..."></richer-text-editor>
```

--------------------------------

### richer-text-editor with JSON Serializer

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/customization.md

Demonstrates how to use the JSON serializer for richer-text.js. This allows for full control over content storage and rendering. The 'content' attribute is populated with a JSON string representing the document structure.

```html
<richer-text-editor
  input="json_serializer"
  serializer="json"
  callouts="true"
  tables="true"
  content='{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left"},"content":[{"type":"text","text":"Hello from the "},{"type":"text","marks":[{"type":"bold"}],"text":"JSON"},{"type":"text","text":" serializer."}]}]}'
>
</richer-text-editor>
```

--------------------------------

### Mention Model and Notification (Ruby)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Illustrates a `Mention` model with an `after_create_commit` callback to send notifications. This handles the logic for notifying users who have been mentioned.

```ruby
class Mention < ApplicationRecord
  # ... omitted code
  after_create_commit :send_notification

  def send_notification
    # Send an email, etc, rule the world.
  end
end
```

--------------------------------

### Model Configuration for RicherText

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Demonstrates how to associate a RicherText attribute with a Rails model, showing options for storing content as JSON or HTML.

```ruby
class Post < ApplicationRecord
  # One example is storing the JSON from the text editor:
  has_richer_text :body, store_as: :json
  # Or to store HTML...
  # has_richer_text :body
end
```

--------------------------------

### Richer Text vs. ActionText

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/about.md

Explains the advantages of Richer Text over ActionText, focusing on extensibility for features like user mentions, colors, and tables. It details how Richer Text allows for UI customization and flexible backend storage options (HTML or JSON).

```ruby
class Post < ApplicationRecord
  has_richer_text :body
end
```

```ruby
class Post < ApplicationRecord
  # Using Richer Text with JSON storage
  has_richer_text :body, store_as: :json
end
```

--------------------------------

### richer-text-editor with Custom Toolbar Configuration

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/customization.md

Allows for complete customization of the toolbar by specifying individual items. The 'toolbar' attribute lists the desired buttons (e.g., 'heading-1', 'bold', 'italic'), and 'toolbar-placement' sets the position.

```html
<richer-text-editor
  toolbar="heading-1, heading-2, divider, bold, italic, strike"
  toolbar-placement="top"
>
</richer-text-editor>
```

--------------------------------

### Customizable CSS Classes

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Lists the CSS classes that can be customized to style mentions within the Richer Text editor. These classes allow for flexible frontend design.

```html
.richer-text--mention
.richer-text--mention-img
.richer-text--mention-label
```

--------------------------------

### Frontend Integration with Custom Suggestions

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/embeds.md

Shows how to configure the `richer-text-area` helper to use custom suggestions, specifying a trigger character and a path to fetch embeddable records.

```erb
<%= form.richer_text_area :body, "custom-suggestions": [
    { "name": "posts", "trigger": "!", "path": "/posts.json" }
  ].to_json %>
```

--------------------------------

### Custom HTML Visitor

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails.md

Demonstrates how to override the default HTML visitor for JSON serialized Richer Text content.

```ruby
Rails.configuration.to_prepare do
  RicherText.default_renderer = HtmlVisitor.new
end
```

```ruby
class HtmlVisitor < RicherText::HTMLVisitor
  def visit_callout(node)
    "CALLOUT HERE: <div class='callout' data-color='#{node.color}'>#{visit_children(node).join}</div>"
  end
end
```

--------------------------------

### Richer Text Area Form Helper (HTML/ERB)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Demonstrates how to integrate the `richer_text_area` form helper in an HTML/ERB template, passing the path to the user data endpoint via the 'mentionable-users-path' option.

```html
<%= form.richer_text_area :body, "mentionable-users-path": "/users.json" %>
```

--------------------------------

### Custom Text Rendering Configuration (Ruby)

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-changelog.md

Demonstrates how to configure a custom text renderer for RicherText by defining a TextVisitor class and setting it in the Rails initializer.

```ruby
class TextVisitor < RicherText::TextVisitor
  # ... your overridden methods here
end

# initializer somewhere
Rails.configuration.to_prepare do
  RicherText.default_renderer = HtmlVisitor.new  # if you had a HtmlVisitor also defined.
  RicherText.default_text_renderer = TextVisitor.new
end
```

--------------------------------

### User Data Endpoint JSON Format

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/mentions.md

Specifies the JSON format required for the user data endpoint. The endpoint should return an array of user objects, each with 'label', 'id' (as a GlobalID), and 'avatarUrl'. The 'query' parameter can be used for backend filtering.

```json
[
  {
    "label": "John Doe",
    "id": "gid://app/User/1",
    "avatarUrl": "https://i.pravatar.cc/64?img=1"
  },
  {
    "label": "Jane Doe",
    "id": "gid://app/User/2",
    "avatarUrl": "https://i.pravatar.cc/64?img=2"
  }
]
```

--------------------------------

### Richer Text vs. Rhino Editor

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/about.md

Compares Richer Text with Rhino Editor, noting similarities in their use of TipTap and ProseMirror with Lit. It highlights Richer Text's built-in plugins (tables, callouts, alignment) and its distinct UI/UX (Bubble Menu, Slash commands), contrasting with Rhino Editor's ActionText backwards compatibility.

```javascript
// Example of using a slash command in Richer Text
// Typing '/' followed by 'heading' would trigger heading options.
```

```javascript
// Example of Bubble Menu functionality in Richer Text
// Selecting text reveals formatting options.
```

--------------------------------

### RicherText Editor in Rails View

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/_posts/2024-06-28-announcing-version-two.md

Illustrates how to render the RicherText editor in a Rails form partial using `form.richer_text_area` and how to display the content using `@post.body`.

```html
<%= form.label :body %>
<%= form.richer_text_area :body %>
```

```html
<%= @post.body %>
```

--------------------------------

### Richer Text JSON Storage Configuration

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/ruby-on-rails/oembed.md

This snippet shows how to configure Richer Text to store content as JSON, which is a requirement for using the oEmbeds feature.

```ruby
has_richer_text :body, store_as: :json
```

--------------------------------

### Richer Text Editor with Full Features

Source: https://github.com/afomera/richer-text.js/blob/main/docs/src/richer-text-vs-trix.md

Showcases the Richer Text.js editor with a comprehensive set of features enabled, including embeds, custom suggestions, mentions, tables, callouts, and bubble menu options.

```html
<input type="hidden" id="foobar" />
<richer-text-editor embeds-path="/richer-text-embeds" custom-suggestions='[{ "name": "snippets", "trigger": "!", "path": "snippets.json" },{ "name": "snippets2", "trigger": "{{", "path": "snippets2.json" }]' mentionable-users-path="/users.json" tables="true" input="foobar" callouts="true" bubble-menu-options='{ "highlight": false }' content="<div class='callout' data-color='gray'>

<p style='text-align: center'><strong><span style='font-size: 20px'>Welcome to RicherText</span></strong></p>
<p>RicherText aims to provide an alternative solution to using ActionText and Trix in Ruby on Rails. It uses a rich text editor based on TipTap (which itself is based on ProseMirror).</p>
</div>
<richer-text-embed sgid='1234'></richer-text-embed>

<h1>We have H1 headings</h1>
<p>We also have @mentions see an example here: <span data-type='mention' class='richer-text--mention' data-id='gid://app/User/2' data-label='Jane Doe' data-avatar-url='https://i.pravatar.cc/64?img=5' contenteditable='false'><img class='richer-text--mention-img' src='https://i.pravatar.cc/64?img=5' alt='Jane Doe'><span class='richer-text--mention-label'>Jane Doe</span></span>, coming at you live from a Richer Text Editor near you.</p>
<p>Not only do we have headings, and regular paragraphs, you can find an example ✨ <strong>Table</strong> ✨ below. Mind blowing stuff, isn't it? You can use the / insert menu to insert a Table</p>
<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th colspan='3'>Description</th>
    </tr>
    <tr>
      <td>Cyndi Lauper</td>
      <td>singer</td>
      <td>songwriter</td>
      <td>actress</td>
    </tr>
  </tbody>
</table>

<p>Tables are an opt-in feature, so you'll need to pass <code>tables: true</code> to enable them where you want them.</p>
<h2>We have H2 headings</h2>
<p>Some text here</p>
<p>Code blocks? <em>We've got those!</em> It'll even <strong>syntax highlight</strong> as you type, try it! (Shift+Enter to exit a codeblock) Try hitting tab while you're in a codeblock too 😀.</p>
<pre>class Playground &lt; ApplicationRecord
  has_richer_text :body
  
  validates :title, presence: true
end</pre>

<p>Need to support images in your text body? We can do that with three sizing options, small, medium and large.</p>
<img src='https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=5340&q=80'>
<p>Photo by <a href='https://unsplash.com/@jrkorpa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Jr Korpa</a> on <a href='https://unsplash.com/photos/9XngoIpxcEo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a></p>

<richer-text-embed sgid='1235'></richer-text-embed>

" placeholder="Write something..."></richer-text-editor>
```