Vue-styleguidist: Editor Key Map Error (minor)

[rafegoldberg]

When I try to set the editor.keyMap config entry to 'sublime' (per the CodeMirror docs) Styleguidist throws an error:

TypeError: Cannot read property 'attach' of undefined
    in UnControlled (created by Editor)
    in Editor (created by Styled(Editor))
    in Styled(Editor) (created by EditorLoader)
    in EditorLoader (created by Slot)
    in div (created by Slot)
    in Slot (created by Playground)
    in div (created by PlaygroundRenderer)
    in div (created by PlaygroundRenderer)
    in PlaygroundRenderer (created by Styled(Playground))
    in Styled(Playground) (created by Playground)
    in Playground (created by Examples)
    in article (created by ExamplesRenderer)
    in ExamplesRenderer (created by Styled(Examples))
    in Styled(Examples) (created by Examples)
    in Examples (created by ReactComponent)
    in div (created by ReactComponentRenderer)
    in ReactComponentRenderer (created by Styled(ReactComponent))
    in Styled(ReactComponent) (created by ReactComponent)
    in ReactComponent (created by Components)
    in div (created by ComponentsRenderer)
    in ComponentsRenderer (created by Components)
    in Components (created by Section)
    in section (created by SectionRenderer)
    in SectionRenderer (created by Styled(Section))
    in Styled(Section) (created by Section)
    in Section (created by Sections)
    in section (created by SectionsRenderer)
    in SectionsRenderer (created by Styled(Sections))
    in Styled(Sections) (created by Sections)
    in Sections (created by StyleGuide)
    in main (created by StyleGuideRenderer)
    in div (created by StyleGuideRenderer)
    in StyleGuideRenderer (created by Styled(StyleGuide))
    in Styled(StyleGuide) (created by StyleGuide)
    in StyleGuide

[elevatebart]

Hello @rafegoldberg

Can you provide your styleguide.config.js?
I am curious to find out why this is happening.

[rafegoldberg]

one sec – should've posted in the first place, that's my bad. have made some changes since, but will retest and see if I can replicate. will attach my config if so. otherwise I'll close this out as "user error".

[rafegoldberg]

@elevatebart ok, I've retested and it's still buggin' out when I set the editor.keyMap to _"sublime"_. Here are my environment specs:

| Mac OS | Chrome | Styleguidist |
:----------|:------------------------|:----------------------------------|
|v10.13.6|v70.0.3538.110 (64 bit)|(via CLI plugin)|

And my configuration file:

{
  "theme": {
    "maxWidth": "100%",
    "sidebarWidth": 250,
    "color": {
      "link": "#079CB4",
      "sidebarBackground": "#003B4D",
      "errorBackground": "#EC195C"
    }
  },
  "styles": {
    "StyleGuide": {
      "root": {
        "text-rendering": "optimizeLegibility",
        "-moz-osx-font-smoothing": "grayscale",
        "-webkit-font-smoothing": "antialiased"
      },
      "sidebar": {},
      "content": {},
      "logo": {
        "border": "none",
        "paddingBottom": 0
      }
    },
    "Logo": {
      "logo": {
        "color": "#fff",
        "fontSize": 20
      }
    },
    "ComponentsList": {
      "list": {
        "& ul": {
          "paddingLeft": 0
        }
      },
      "item": {
        "cursor": "pointer !important",
        "& a": {
          "color": "rgba(255, 255, 255, 1) !important",
          "fontWeight": 500,
          "cursor": "pointer !important",
          "&:hover": {
            "textDecoration": "underline"
          }
        }
      },
      "heading": {
        "fontSize": "18px !important",
        "fontWeight": "600 !important",
        "color": "#fff !important"
      }
    }
  },
  "template": {
    "head": {
      "links": [
        {
          "href": "./docs/src/config/overrides.css",
          "rel": "stylesheet",
          "type": "text/css"
        },
        {
          "href": "//our.cdn/images/style/bootstrap.min.css",
          "rel": "stylesheet",
          "type": "text/css"
        },
        {
          "href": "https://our.cdn/images/style/bootstrap3/fonts/font-awesome-4.7.0/css/font-awesome.min.css",
          "rel": "stylesheet",
          "type": "text/css"
        }
      ],
      "scripts": [
        {
          "src": "https://unpkg.com/[email protected]/dist/jquery.js"
        }
      ]
    }
  },
  "editorConfig": {
    "theme": "xq-light",
    "keyMap": "sublime",
    "lineNumbers": true
  },
  "previewDelay": 1000,
  "usageMode": "collapse",
  "exampleMode": "collapse",
  "pagePerSection": true,
  "defaultExample": false,
  "sections": [
    {
      "name": "Usage",
      "sectionDepth": 2,
      "content": "readme.md",
      "sections": [
        {
          "name": "Code Conventions",
          "content": "./docs/src/standards.md"
        }
      ]
    },
    {
      "name": "Brand",
      "sectionDepth": 2,
      "sections": [
        {
          "name": "Voice",
          "description": "How do we communicate with our users?"
        },
        {
          "name": "Style",
          "description": "Aesthetic standards and resources."
        }
      ]
    },
    {
      "name": "Components",
      "sectionDepth": 3,
      "sections": [
        {
          "name": "UI Elements",
          "components": "src/elements/**/*.vue",
          "sectionDepth": 1,
          "description": "Core building blocks of the UI. Available globally."
        },
        {
          "name": "DS Components",
          "description": "Complex UI modules and extensible logic prototypes.",
          "components": "src/components/**/*.vue",
          "sections": [
            {
              "name": "Product",
              "components": "src/components/product/**/*.vue"
            }
          ],
          "ignore": [
            "src/components/product/**/*.vue"
          ]
        },
        {
          "name": "Page Templates",
          "components": "src/views/**/*.vue",
          "ignore": [
            "**/rules/Rule*.vue"
          ],
          "sectionDepth": 1,
          "description": "Entry point scripts."
        }
      ]
    }
  ],
  "title": "DsUi",
  "styleguideDir": "./docs",
  "verbose": false,
  "components": "**/*.vue",
  "ignore": [
    "**/PLP-New.vue",
    "**/Home.vue"
  ],
  "require": [
    "src/styles/main.scss",
    "src/lib/$log.js",
    "src/lib/$API.js",
    "src/lib/async.js",
    "src/lib/filters.js"
  ]
}

[rafegoldberg]

I'd also note that this doesn't break the style guide build process per say — everything seems to compile and load successfully. It's only when I toggle the "View Code" button on an example that the aforementioned error is displayed.

[elevatebart]

Hey @rafegoldberg, I was looking into your issue and I unfortunately cannot do much about it.

Natively out fo the box, CodeMirrorr only accepts a few key bindings: "pcDefault", "emacsy", "macDefault", if it does not find the one specified, it will crash exactly like what you have.

https://github.com/codemirror/CodeMirror/blob/05490c8c40584b06f4cd0ba88c9c2a59f32af5d6/src/edit/options.js#L92-L95

Let me investigate how to install new key bindings.

[elevatebart]

The only thing you have to do to fix your bug is somehow import the sublime keymap in the package.

either in the rootJsx file or in one of the components you customized.

[rafegoldberg]

@elevatebart hmm, hadn’t thought to try that; thanks for the info. Will test it out when I have a moment, but it makes sense to me! Thanks for looking in to this.