New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bard within Replicator #1709

Closed
aerni90 opened this Issue Jan 12, 2018 · 8 comments

Comments

Projects
None yet
3 participants
@aerni90

aerni90 commented Jan 12, 2018

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

This comment has been minimized.

Member

jasonvarga commented Jan 12, 2018

Are you going to put more sets in that replicator?

@aerni90

This comment has been minimized.

aerni90 commented Jan 12, 2018

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

This comment has been minimized.

Member

jasonvarga commented Jan 12, 2018

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.

@aerni90

This comment has been minimized.

aerni90 commented Jan 12, 2018

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

This comment has been minimized.

Member

jasonvarga commented Jan 12, 2018

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

@pastorryanhayden

This comment has been minimized.

pastorryanhayden commented May 1, 2018

@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

This comment has been minimized.

Member

jasonvarga commented May 1, 2018

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

This comment has been minimized.

pastorryanhayden commented May 1, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment