Netlify-cms: Pasted text into markdown field and hit cntrl+z to undo and got an error page

[peterlazzarino]

I added a markdown type field to my page and after pasting a text block into it from my clipboard them command Z on my computer. I am sent to an error page, I can reliably reproduce this

Netlify CMS version: 1.7.0
Browser version: Chrome 67.0.3396.79
Node.JS version: 8.11.2
Operating System: Mac OSX 10.13.3

Config.yml - this is happening in the /about/our-team page in the leadership -> story field

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "content"
    label: "General Content"
    create: true 
    files:
      - file: "src/content/layout.md"
        label: "Layout"
        name: "layout"
        slug: "layout"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "header"}
          - {label: "Title", name: "title", widget: "string", default: "header"}
          - {label: "Logo", name: "logo", widget: "image"}
          - {label: "Phone Number", name: "phone", widget: "string"}
          - {label: "Phone Number CTA", name: "phoneCTA", widget: "string"}
          - {label: "Phone Number icon", name: "phoneIcon", widget: "string"}
          - {label: "Header Links", name: "links", widget: "list", fields: [
              {label: Title, name: title, widget: string}, 
              {label: Description, name: description, widget: string},  
              {label: Url, name: url, widget: string, required: false },
              {label: Sublinks, name: sublinks, required: false, widget: "list", fields: [{label: Title, name: title, widget: string},{label: Url, name: url, widget: string}]}
            ]}

  - 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: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    create: true 
    files:
      - file: "src/pages/home/index.md"
        label: "Home"
        name: "home"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "home-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}
      - file: "src/pages/about/mission-statement/index.md"
        label: "Mission Statement"
        name: "mission-statement"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "mission-statement"}
          - {label: "Hero Banner", name: "headerimagehero", widget: "object", fields: [{name: "background",label: "Background Image",widget: "image"},{name: "title",label: "H1 Title",widget: "string"},{name: "description",label: "Description",widget: "string"}]}
          - {label: "Top Heading", name: "topheading", widget: "string"}
          - {label: "The Problem reasons", name: "problemreasons", widget: "list", fields: [{name: "number",label: "Number",widget: "number"},{name: "description",label: "Description",widget: "markdown"}]}
          - {label: "Middle Text", name: "middletext", widget: "string"}
          - {label: "Blurbs", name: "blurbs", widget: "list", fields: [{name: "title",label: "Title",widget: "string"},{name: "description",label: "Description",widget: "string"}]}
          - {label: "Did You Know Section", name: "didyouknow", widget: "object", fields: [{name: "text",label: "Text",widget: "markdown"},{name: "didyouknowheading",label: "Did You Know Heading",widget: "string"}, { label: "Did You Know Reason", name: "didyouknowreason", widget: "object", fields: [{name: "number",label: "Number",widget: "number"},{name: "description",label: "Description",widget: "markdown"}]}]}
          - {label: "Bottom Text", name: "bottomText", widget: "markdown"}                 
          - {label: "Hubspot Form ID", name: "hubspotFormId", widget: "string"}     
      - file: "src/pages/about/our-team/index.md"
        label: "Our Team"
        name: "our-team"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "our-team"}
          - {label: "Leadership Team Heading", name: "leaderHeading", widget: "object", fields: [{name: "heading", label: "Heading", widget: "string"}, {name: "description", label: "Description", widget: "string"}]}
          - {label: "Leadership Team", name: "leaders", widget: "list", fields: [{name: "fullName", label: "Full Name", widget: "string"},{name: "role", label: "Role", widget: "string"}, {name: "headshot", label: "Headshot", widget: "image"}, {name: "almaMater", label: "Alma Mater", widget: "string"}, {name: "major", label: "Major", widget: "string"}, {name: "petName", label: "Name of Pet", widget: "string"}, {name: "secondBestLanguage", label: "Second Best Language", widget: "string"}, {name: "story", label: "Story", widget: "markdown"}, {name: "background", label: "Background", widget: "markdown"}]}
          - {label: "Employee Team Heading", name: "employeeHeading", widget: "object", fields: [{name: "heading", label: "Heading", widget: "string"}, {name: "description", label: "Description", widget: "string"}]}
          - {label: "Employees", name: "employees", widget: "list", fields : [{name: "fullName", label: "Full Name", widget: "string"},{name: "role", label: "Role", widget: "string"}, {name: "image", Label: "Headshot", widget: "image"}]}
          - {label: "Board Heading", name: "boardHeading", widget: "object", fields: [{name: "heading", label: "Heading", widget: "string"}, {name: "description", label: "Description", widget: "string"}]}
          - {label: "Board", name: "board", widget: "list", fields: [{name: "fullName", label: "Full Name", widget: "string"},{name: "role", label: "Role", widget: "string"}, {name: "image", Label: "Headshot", widget: "image"}, {name: "story", label: "Story", widget: "markdown"}]}
      - file: "src/pages/apply/essay-editing/index.md"
        label: "Essay Editing"
        name: "essay-editing"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "mission-statement"}
          - {label: "Hero Banner", name: "headerimagehero", widget: "object", fields: [{name: "background",label: "Background Image",widget: "image"},{name: "title",label: "H1 Title",widget: "string"},{name: "description",label: "Description",widget: "string"}]}
          - {label: "Top Heading", name: "topheading", widget: "string"}               
          - {label: "Top Section Left", name: "topSectionLeft", widget: "markdown"}             
          - {label: "Top Section Right", name: "topSectionRight", widget: "markdown"}           
          - {label: "Essay Step Examples", name: "essayStepExamples", widget: "list", fields: [{name: "heading", label: "Heading", widget: "string"},{name: "description", label: "Description", widget: "string"},{name: "example", label: "Example", widget: "image"}]}       
          - {label: "Essay Ideation Process", name: "essayIdeationProcess", widget: "object", fields: [{name: "title",label: "Title",widget: "string"},{name: "ideationItems", label: "Ideation Items", widget: "list", fields: [{ name : "title", label : "Title", widget: "string"}, {name: "description", label: "Description", widget: "text"}]} ]}       
          - {label: "Additional Application Services", name: "applicationServices", widget: "object", fields: [{name: "title",label: "Title",widget: "string"},{name: "ideationItems", label: "Ideation Items", widget: "list", fields: [{ name : "title", label : "Title", widget: "string"}, {name: "description", label: "Description", widget: "text"}]} ]}       
          - {label: "Hubspot Form ID", name: "hubspotFormId", widget: "string"}        

[papandreou]

One of my colleagues experienced this as well (Chrome on WIndows), but I haven't been able to reproduce it myself on Browserstack. He's doing a lot of pasting from Google slides into netlify-cms, so it's quite likely to be the same problem.

[tech4him1]

@peterlazzarino Is this happening for every text block, or only certain ones? If so, can you provide an example?

[papandreou]

It happened to me now while debugging something else on Chrome 67/Windows in Browserstack. Steps to reproduce:

1. Create a new item in a collection
2. Paste the text src/components/EditorWidgets/Markdown/serializers/index.js into a markdown field (just a funny coincidence)
3. Hit CTRL+z

This error screen is displayed:

Sorry!
There's been an error - please report it!

Error: Invalid `key` argument! It must be a key string, but you passed: null

The following error is logged twice in the console:

react-dom.production.min.js:187 Error: Invalid `key` argument! It must be a key string, but you passed: null
    at y (node.js:2229)
    at t.value (node.js:812)
    at t.e.(:5000/admin/anonymous function) [as getFurthestAncestor] (http://localhost:5000/node_modules/netlify-cms-papandreou/dist/cms.js:35:11289)
    at t.value [as getSelectionIndexes] (node.js:1521)
    at t.value (content.js:429)
    at Si (react-dom.production.min.js:166)
    at Ai (react-dom.production.min.js:179)
    at ua (react-dom.production.min.js:201)
    at ca (react-dom.production.min.js:202)
    at Ka (react-dom.production.min.js:211)

(Yeah, I know I'm using my fork, but I doubt that has anything to do with it :)

[papandreou]

It's reproducible with the same steps on Chrome 67/OSX. Seems like the important thing is pasting into an empty markdown widget, then hitting CTRL+z.

[tech4him1]

Comfirmed, this is affecting top-level markdown widgets as well. @erquhart?

[robertkarlsson]

I did a quick look into this and if it can be to any help, this seems to be triggered after the startKey and endKey of the operation in slate.js both have the value null, which they are when copy paste -> ctrl +z without interacting with the field by input before that action.

This then triggers this line since null == null
https://github.com/ianstormtaylor/slate/blob/d884be872de30963255d1bbb5b152ca36aaba126/packages/slate/src/models/node.js#L1523

And from there runs the getFurthestAncestor

https://github.com/ianstormtaylor/slate/blob/d884be872de30963255d1bbb5b152ca36aaba126/packages/slate/src/models/node.js#L801

which then runs the assertKey:

https://github.com/ianstormtaylor/slate/blob/d884be872de30963255d1bbb5b152ca36aaba126/packages/slate/src/models/node.js#L2059

where the error triggers.

I guess the first thing to look at is why the startKey and endKey is null on that exact operation, and not when for example doing the exact same thing, but after the field has already been interacted with before (by putting something in it).

I will probably look at this a bit more since i find these kinds of problems interesting (reminds me a lot of problems we've had with draftJS) when I have time. Hope this can be to any help!

[erquhart]

@robertkarlsson really awesome that you're digging into this! I'm wondering if this would be solved by updating Slate, I know we're behind a bit.

[robertkarlsson]

@erquhart You seem to be correct about this according to this issue: https://github.com/ianstormtaylor/slate/issues/1448

The fix was done in: https://github.com/ianstormtaylor/slate/commit/b2e0612149c95f855b7529a2fdcae45cc52df6ab
and released in [email protected]

When upgrading to [email protected] (latest) i can not reproduce this error anymore.

It's past midnight here in the north so i wont be making a PR right now, but it should solve the issue if someone wants to do one. The other slate related dependencies as slate react may also benefit from an upgrade.