Netlify-cms: bug: lists not working properly in the markdown widget

[amaline]

Describe the bug
Trying Gatsby + Netlify CMS Starter and it seems to work great except for the odd behavior of the Rich Text editor. It doesn't seem to work correctly with lists. It will start a list (1. ) but then when hitting enter it will just line the cursor underneath the first character of the previous list item with no number. And if I hit the numbered list item again it will indent a sub-list and then I have to shift-tab to move it back. non ordered lists have the same issue.

To Reproduce

• Begin with the gatsby-starter-netlify-cms template
• Follow Getting Started (Without Netlify) - deploying to Cloud Foundry
• Configured and deployed the Netlify CMS GitHub Provider, GitHub repository and CMS plugin configuration for authentication
• Go to /admin and edit a new blog entry with a list. First item begins with 1., but following items don't have a number but indented inline with first entry. Works if edit as Markdown instead of Rich Text

Expected behavior
Expect the list item to generate a new list and each successive "Enter" button the list index should increment.

Screenshots

Applicable Versions:

• Netlify CMS version: 2.11.32
• Git provider: GitHub
• OS: Windows 10
• Browser version: Chrome 80.0.3987.122
• Node.JS version: 12.14.1

CMS configuration

backend:
  name: github
  base_url: https://fdic-ea-auth-d.app.cloud.gov
  repo: amaline/ea-test-site
  branch: master
  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean"}
      - {label: "Featured Image", name: "featuredimage", widget: image}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
        label: "Landing Page"
        name: "index"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "index-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Heading, name: heading, widget: string}
          - {label: Subheading, name: subheading, widget: string}
          - {label: Mainpitch, name: mainpitch, widget: object, fields: [{label: Title, name: title, widget: string}, {label: Description, name: description, widget: text}]}
          - {label: Description, name: description, widget: string}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}
      - file: "src/pages/products/index.md"
        label: "Products Page"
        name: "products"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "product-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Heading, name: heading, widget: string}
          - {label: Description, name: description, widget: string}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
          - {label: Full_image, name: full_image, widget: image}
          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}

[erezrokah]

Reproduces on https://cms-demo.netlify.com/

[erquhart]

This was actually intentional - list items are a block context, but creating block content inside of them is usually cumbersome. The behavior is:

• press enter: create a new paragraph in the list item
• press enter again: remove the empty paragraph and create a new list item instead

This is probably more confusing than anything it seems, so it may be worth going the more traditional route and creating a new list item with every enter press.

[amaline]

Thanks! this is confusing when you don't know about it. Not intuitive for new users - but now that I know it is not a big deal and my demos will go much smoother.

[edsu]

This is pretty strange behavior, but once you know it, and communicate it to everyone who needs to know it, it's not a problem.