Bard within Replicator

[aerni]

Expected behaviour

I want to use bard within a replicator. I want to use bard to write the content of a page section and the replicator to add several of those sections.

Actual behaviour

I can add a bard within a replicator. However the bard field doesn't work properly in the Control Panel. I can't write or add anything.

Steps to reproduce

1. Create a replicator fieldtype
2. Put a bard fieldtype within that replicator
3. Try to write some content in the Control Panel

My fieldset

title: Builder
hide: true
fields:
  section:
    type: replicator
    display: Page Builder
    instructions: Build this page with the components provided below.
    sets:
      builder:
        type: bard
        display: Builder
        instructions: Write the content of this post entry. Add Images and other components as needed.
        validate: required
        buttons:
          - bold
          - italic
          - anchor
          - h3
        sets:
          forms:
            display: Forms
            fields:
              forms:
                type: select
                display: Forms
                instructions: Select the form of your choice.
                options:
                  contact: Contact
                  rooms: Room Reservation

Server Details

Operating System:
macOS 10.12.6

Web Server:
Laravel Valet

PHP Version:
7.1

Statamic Version:
2.8

Updated from an older Statamic or fresh install:
Updated from version previous to 2.8

List of installed addons:
CharField
LaravelMix
PowerTools
Spock
Tel

[jasonvarga]

Are you going to put more sets in that replicator?

[aerni]

No, I don't think so. I solely use it to create a section with an alternating background and padding in which I want to write content using Bard.

[jasonvarga]

Ok.

Well your section field has a single set named builder and you've defined bard directly in that.

You're missing the fields where the bard field should be within that.

[aerni]

Like so? Still doesn't work. I must get something wrong?

title: Builder
hide: true
fields:
  page_builder:
    type: replicator
    display: Page Builder
    instructions: Build this page with the components provided below.
    sets:
      section:
        display: Section
        fields:
          builder:
            type: bard
            display: Builder
            instructions: Write the content of this post entry. Add Images and other components as needed.
            validate: required
            buttons:
              - bold
              - italic
              - anchor
              - h3
            sets:
              forms:
                display: Forms
                fields:
                  forms:
                    type: select
                    display: Forms
                    instructions: Select the form of your choice.
                    options:
                      contact: Contact
                      rooms: Room Reservation

[jasonvarga]

Yeah that's right, but I just tried it and found a JS error. Sorting it out!

[pastorryanhayden]

@jasonvarga I know you closed this but I'm having the same issue. Here is what my console says:

Uncaught (in promise) TypeError: Cannot read property 'focus' of undefined
    at VueComponent.focus (jabbascripts.js?v=2.8.12:8)
    at VueComponent.focus (johnny-deps.js?v=2.8.12:5)
    at ReplicatorFieldtype.<anonymous> (jabbascripts.js?v=2.8.12:8)
    at Array.s (johnny-deps.js?v=2.8.12:7)
    at t (johnny-deps.js?v=2.8.12:7)

And here is what my yaml file looks like:

taxonomies:
  tags: true
title: Mother of All Bard Fields
fields:
  blocks:
    type: replicator
    display: blocks
    sets:
      text_content:
        type: bard
        display: Text
        buttons:
          - bold
          - italic
          - anchor
          - h2
          - h3
          - h4
        spellcheck: true
        allow_source: true
        autoLink: false
        target_blank: false
        link_validation: false
        force_plain_text: true
        clean_pasted_html: false
        sets:
          awesome_numbered_list:
            display: Awesome Numbered List
            fields:
              list_item:
                type: replicator
                display: list_item
                sets:
                  set_1:
                    display: list_item_item
                    fields:
                      number:
                        type: text
                        display: Number
                        instructions: Put a number here (or a single digit).
                      item_title:
                        type: text
                        display: item_title
                      item_text:
                        type: textarea
                        display: item_text
          pull_quote:
            display: Pull Quote
            instructions: Pull quotes are quotes from your text that are displayed in the margins.
            fields:
              quote:
                type: markdown
                display: quote
                cheatsheet: true
                restrict_assets: false
          block_quote:
            display: Block Quote
            instructions: Block Quotes are quotes shown in your text with an attribution.
            fields:
              quote:
                type: markdown
                display: quote
                cheatsheet: true
                restrict_assets: false
              attribution:
                type: text
                display: Attribution
                instructions: i.e. Sherlock Holmes, The Sign of Four
          dl:
            display: Definition List
            fields:
              list_type:
                type: radio
                display: List Type
                options:
                  1: Default
                  2: Inline
                  3: Dictionary Style
                inline: false
              definition_list_item:
                type: replicator
                display: Definition list item
                sets:
                  dt_dl:
                    display: dt_dl
                    fields:
                      definition_list_title:
                        type: text
                        display: Definition List Title
                      definition_list_text:
                        type: text
                        display: Definition List Text
          audio:
            display: Audio
            fields:
              caption:
                type: text
                display: caption
              mp3:
                type: assets
                display: mp3
                container: main
                folder: img
                restrict: true
                max_files: 1
          image:
            display: Image
            fields:
              position:
                type: radio
                display: Position
                options:
                  full: full
                  left: left
                  right: right
                inline: true
              image:
                type: assets
                display: Image
                container: main
                folder: img
                restrict: true
                max_files: 1
              caption:
                type: text
                display: Caption
          video:
            display: Video
            fields:
              video:
                type: video
                display: video
        restrict_assets: false
      content_sections:
        display: Content Sections
        fields:
          content_type:
            type: radio
            display: type
            options:
              1: Type 1
              2: Type 2
              3: Type 3
              4: Type 4
            inline: false
          dark:
            type: toggle
            display: Dark Background?
            instructions: Check this to make the background dark and the text light.
          heading:
            type: text
            display: Heading
          contents_content:
            type: markdown
            display: Content
            cheatsheet: true
            restrict_assets: false
          image:
            type: assets
            display: Image
            container: main
            folder: img
            restrict: true
            max_files: 1
            hide_when:
              type: 4
          background_image:
            type: assets
            display: Background Image
            container: main
            folder: img
            restrict: true
            max_files: 1
            display_when:
              type: 4
      features:
        display: Feature Sections
        fields:
          feature_type:
            type: radio
            display: type
            options:
              1: Type 1
              2: Type 2
              3: Type 3
              4: Type 4
              5: Type 5
              6: Type 6
              7: Type 7
              8: Type 8
              9: Type 9
            inline: false
          features_items:
            type: replicator
            display: features
            sets:
              features_item_item:
                display: features_items_item
                fields:
                  heading:
                    type: text
                    display: heading
                  feature_text:
                    type: markdown
                    display: feature text
                    cheatsheet: true
                    restrict_assets: false

Like @aerni90 I can see the bard field but cannot select it to type in it.

[jasonvarga]

You're also missing a layer of nesting.

You've done this:

fields:
  blocks:
    type: replicator
    display: blocks
    sets:
      text_content:
        type: bard

Where you've tried to define the Bard field directly in the set.

text_content is a set. It can't be type: bard. It needs a fields array, and that's where you put the bard field. Like this:

fields:
  blocks:
    type: replicator
    display: blocks
    sets:
      text_content:
        fields:
          text_content:
            type: bard

[pastorryanhayden]

Awesome!
Works like a charm. I was afraid it was something like that.
Thank you @jasonvarga