From 9b07d2715d3601dc8a85a48ca20b0e6c6bf55812 Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Wed, 29 Aug 2018 02:41:52 -0300
Subject: [PATCH] fix(docz-theme-default): codemirror line end bug

---
 packages/docz-theme-default/package.json      |   2 +-
 .../src/components/ui/Editor/index.tsx        | 207 ++++++++++++++++++
 .../src/components/ui/Pre.tsx                 | 182 +--------------
 .../src/components/ui/Render/ResizeBar.tsx    |   2 +-
 .../src/components/ui/Render/index.tsx        |  16 +-
 packages/docz-theme-default/src/types.d.ts    |   2 +-
 packages/docz-theme-default/webpack.config.js |  15 +-
 yarn.lock                                     |  35 +--
 8 files changed, 232 insertions(+), 229 deletions(-)
 create mode 100644 packages/docz-theme-default/src/components/ui/Editor/index.tsx

diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
index 374de0495..44c87e3b4 100644
--- a/packages/docz-theme-default/package.json
+++ b/packages/docz-theme-default/package.json
@@ -35,7 +35,7 @@
     "prop-types": "15.6.2",
     "re-resizable": "^4.8.1",
     "react": "^16.4.2",
-    "react-codemirror": "^1.0.0",
+    "react-codemirror2": "^5.1.0",
     "react-dom": "^16.4.2",
     "react-emotion": "^9.2.8",
     "react-feather": "^1.1.1",
diff --git a/packages/docz-theme-default/src/components/ui/Editor/index.tsx b/packages/docz-theme-default/src/components/ui/Editor/index.tsx
new file mode 100644
index 000000000..c29878911
--- /dev/null
+++ b/packages/docz-theme-default/src/components/ui/Editor/index.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { ThemeConfig } from 'docz'
+import { Value } from 'react-powerplug'
+import styled from 'react-emotion'
+import rgba from 'polished/lib/color/rgba'
+import BaseCheck from 'react-feather/dist/icons/check'
+import Clipboard from 'react-feather/dist/icons/clipboard'
+import { Controlled as CodeMirror } from 'react-codemirror2'
+import copy from 'copy-text-to-clipboard'
+import get from 'lodash.get'
+
+import { ButtonSwap } from '../ButtonSwap'
+import { ButtonLink } from '../Button'
+import * as themes from '../../../styles/codemirror'
+
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/jsx/jsx'
+import 'codemirror/mode/css/css'
+import 'codemirror/addon/edit/matchbrackets'
+
+const getLanguage = (children: any) => {
+  const defaultLanguage = 'jsx'
+  if (typeof children === 'string') return defaultLanguage
+  const language = get(children, 'props.props.className') || defaultLanguage
+  const result = language.replace('language-', '')
+  return result === 'js' || result === 'javascript' ? 'jsx' : result
+}
+
+const getChildren = (children: any) =>
+  children && typeof children !== 'string'
+    ? get(children, 'props.children')
+    : children
+
+const Wrapper = styled('div')`
+  margin: 30px 0;
+  position: relative;
+  overflow-y: auto;
+`
+
+const EditorStyled = styled(CodeMirror)`
+  ${themes.dark()};
+  ${themes.light()};
+  ${p => p.theme.docz.mq(p.theme.docz.styles.pre)};
+  position: relative;
+  border-radius: 5px;
+  border: 1px solid ${p => p.theme.docz.colors.border};
+  overflow-y: auto;
+  flex: 1;
+
+  .CodeMirror {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .CodeMirror pre {
+    ${p => p.theme.docz.mq(p.theme.docz.styles.pre)};
+  }
+
+  .CodeMirror-gutters {
+    left: 1px !important;
+  }
+
+  .CodeMirror-lines {
+    padding: 10px 0;
+  }
+
+  .CodeMirror-line {
+    padding: 0 10px;
+  }
+
+  .CodeMirror-linenumber {
+    padding: 0 7px 0 5px;
+  }
+`
+
+const Actions = styled('div')`
+  z-index: 999;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px 10px;
+  background: transparent;
+`
+
+export const ActionButton = styled(ButtonSwap)`
+  padding: 4px;
+  background: transparent;
+  font-size: 12px;
+  text-transform: uppercase;
+  color: ${p => rgba(p.theme.docz.colors.text, 0.4)};
+  transition: color 0.3s;
+
+  &:hover {
+    color: ${p => rgba(p.theme.docz.colors.text, 0.7)};
+  }
+`
+
+const Check = styled(BaseCheck)`
+  stroke: ${p => p.theme.docz.colors.primary};
+`
+
+interface ClipboardActionProps {
+  content: string
+}
+
+export const ClipboardAction: SFC<ClipboardActionProps> = ({
+  content,
+  ...props
+}) => (
+  <ActionButton
+    {...props}
+    as={ButtonLink}
+    title="Copy to clipboard"
+    onClick={() => copy(content)}
+    swap={<Check width={17} />}
+  >
+    <Clipboard width={15} />
+  </ActionButton>
+)
+
+interface PreProps {
+  children: any
+  className?: string
+  editorClassName?: string
+  actions?: React.ReactNode
+  readOnly?: boolean
+  mode?: string
+  matchBrackets?: boolean
+  indentUnit?: number
+  onChange?: (code: string) => any
+  language?: string
+}
+
+export const Editor: SFC<PreProps> = ({
+  mode,
+  children,
+  actions,
+  onChange,
+  className,
+  editorClassName,
+  language: defaultLanguage,
+  ...props
+}) => {
+  const code = getChildren(children)
+  const language = defaultLanguage || getLanguage(children)
+
+  const options = {
+    ...props,
+    tabSize: 2,
+    mode: language || mode,
+    lineNumbers: true,
+    lineWrapping: true,
+    theme: 'docz-light',
+  }
+
+  return (
+    <Wrapper className={className}>
+      <ThemeConfig>
+        {config => (
+          <Value initial={code}>
+            {({ set, value }: any) => (
+              <EditorStyled
+                value={value}
+                className={editorClassName}
+                onViewportChange={() => console.log('helo')}
+                editorDidMount={(editor: any) => {
+                  if (editor && props.readOnly) {
+                    const lastLine = editor.lastLine()
+                    editor.doc.replaceRange(
+                      '',
+                      { line: lastLine - 1 },
+                      { line: lastLine }
+                    )
+                  }
+                }}
+                onBeforeChange={(editor: any, data: any, value: string) => {
+                  onChange && onChange(value)
+                  set(value)
+                }}
+                options={{
+                  ...options,
+                  theme:
+                    config && config.themeConfig
+                      ? config.themeConfig.codemirrorTheme
+                      : options.theme,
+                }}
+              />
+            )}
+          </Value>
+        )}
+      </ThemeConfig>
+      <Actions>{actions || <ClipboardAction content={code} />}</Actions>
+    </Wrapper>
+  )
+}
+
+Editor.defaultProps = {
+  mode: 'js',
+  readOnly: true,
+  matchBrackets: true,
+  indentUnit: 2,
+}
diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
index 7288555b5..279ad130f 100644
--- a/packages/docz-theme-default/src/components/ui/Pre.tsx
+++ b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -1,182 +1,4 @@
 import * as React from 'react'
-import { SFC, Component } from 'react'
-import { ThemeConfig } from 'docz'
-import styled from 'react-emotion'
-import rgba from 'polished/lib/color/rgba'
-import BaseCheck from 'react-feather/dist/icons/check'
-import Clipboard from 'react-feather/dist/icons/clipboard'
-import Codemirror from 'react-codemirror'
-import copy from 'copy-text-to-clipboard'
-import get from 'lodash.get'
+import { Editor } from './Editor'
 
-import { ButtonSwap } from './ButtonSwap'
-import { ButtonLink } from './Button'
-import * as themes from '../../styles/codemirror'
-
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/jsx/jsx'
-import 'codemirror/mode/css/css'
-import 'codemirror/addon/edit/matchbrackets'
-
-const getLanguage = (children: any) => {
-  const defaultLanguage = 'jsx'
-  if (typeof children === 'string') return defaultLanguage
-  const language = get(children, 'props.props.className') || defaultLanguage
-  const result = language.replace('language-', '')
-  return result === 'js' || result === 'javascript' ? 'jsx' : result
-}
-
-const getChildren = (children: any) =>
-  children && typeof children !== 'string' ? children.props.children : children
-
-const Wrapper = styled('div')`
-  margin: 30px 0;
-  position: relative;
-  overflow-y: auto;
-`
-
-const Editor = styled(Codemirror)`
-  ${themes.dark()};
-  ${themes.light()};
-  ${p => p.theme.docz.mq(p.theme.docz.styles.pre)};
-  position: relative;
-  border-radius: 5px;
-  border: 1px solid ${p => p.theme.docz.colors.border};
-  overflow-y: auto;
-  flex: 1;
-
-  .CodeMirror {
-    max-width: 100%;
-    height: auto;
-  }
-
-  .CodeMirror pre {
-    ${p => p.theme.docz.mq(p.theme.docz.styles.pre)};
-  }
-
-  .CodeMirror-gutters {
-    left: 1px !important;
-  }
-
-  .CodeMirror-lines {
-    padding: 10px 0;
-  }
-
-  .CodeMirror-line {
-    padding: 0 10px;
-  }
-
-  .CodeMirror-linenumber {
-    padding: 0 7px 0 5px;
-  }
-`
-
-const Actions = styled('div')`
-  z-index: 999;
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 5px 10px;
-  background: transparent;
-`
-
-export const ActionButton = styled(ButtonSwap)`
-  padding: 4px;
-  background: transparent;
-  font-size: 12px;
-  text-transform: uppercase;
-  color: ${p => rgba(p.theme.docz.colors.text, 0.4)};
-  transition: color 0.3s;
-
-  &:hover {
-    color: ${p => rgba(p.theme.docz.colors.text, 0.7)};
-  }
-`
-
-const Check = styled(BaseCheck)`
-  stroke: ${p => p.theme.docz.colors.primary};
-`
-
-interface ClipboardActionProps {
-  content: string
-}
-
-export const ClipboardAction: SFC<ClipboardActionProps> = ({
-  content,
-  ...props
-}) => (
-  <ActionButton
-    {...props}
-    as={ButtonLink}
-    title="Copy to clipboard"
-    onClick={() => copy(content)}
-    swap={<Check width={17} />}
-  >
-    <Clipboard width={15} />
-  </ActionButton>
-)
-
-interface PreProps {
-  children: any
-  className?: string
-  editorClassName?: string
-  actions?: React.ReactNode
-  readOnly?: boolean
-  mode?: string
-  matchBrackets?: boolean
-  indentUnit?: number
-  onChange?: (code: string) => any
-}
-
-export class Pre extends Component<PreProps> {
-  public static defaultProps = {
-    readOnly: true,
-    mode: 'jsx',
-    matchBrackets: true,
-    indentUnit: 2,
-  }
-
-  public render(): JSX.Element {
-    const { children, actions, onChange, ...props } = this.props
-    const code = getChildren(this.props.children)
-    const language = getLanguage(children)
-    const mode = language || this.props.mode
-
-    const options = {
-      ...props,
-      mode,
-      inputStyle: 'contenteditable',
-      gutter: true,
-      lineNumbers: true,
-      disableInput: true,
-      tabSize: 2,
-      theme: 'docz-light',
-    }
-
-    return (
-      <Wrapper className={this.props.className}>
-        <ThemeConfig>
-          {config => (
-            <Editor
-              onChange={onChange}
-              className={this.props.editorClassName}
-              value={code}
-              options={{
-                ...options,
-                theme:
-                  config && config.themeConfig
-                    ? config.themeConfig.codemirrorTheme
-                    : options.theme,
-              }}
-            />
-          )}
-        </ThemeConfig>
-        <Actions>{actions || <ClipboardAction content={code} />}</Actions>
-      </Wrapper>
-    )
-  }
-}
+export const Pre = (props: any) => <Editor {...props} />
diff --git a/packages/docz-theme-default/src/components/ui/Render/ResizeBar.tsx b/packages/docz-theme-default/src/components/ui/Render/ResizeBar.tsx
index f02e0f117..9c0cbe245 100644
--- a/packages/docz-theme-default/src/components/ui/Render/ResizeBar.tsx
+++ b/packages/docz-theme-default/src/components/ui/Render/ResizeBar.tsx
@@ -5,7 +5,7 @@ import Tablet from 'react-feather/dist/icons/tablet'
 import Monitor from 'react-feather/dist/icons/monitor'
 import styled from 'react-emotion'
 
-import { ActionButton } from '../Pre'
+import { ActionButton } from '../Editor'
 
 const Wrapper = styled('div')`
   position: absolute;
diff --git a/packages/docz-theme-default/src/components/ui/Render/index.tsx b/packages/docz-theme-default/src/components/ui/Render/index.tsx
index 933fc5b45..f4d7b8310 100644
--- a/packages/docz-theme-default/src/components/ui/Render/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/Render/index.tsx
@@ -18,7 +18,7 @@ import pretty from 'pretty'
 import { ResizeBar } from './ResizeBar'
 import { LiveConsumer } from './LiveConsumer'
 import { Handle, HANDLE_SIZE } from './Handle'
-import { ActionButton, ClipboardAction, Pre as PreBase } from '../Pre'
+import { ActionButton, ClipboardAction, Editor as PreBase } from '../Editor'
 import { localStorage } from '../../../utils/local-storage'
 
 interface OverlayProps {
@@ -150,18 +150,17 @@ const parse = (position: number, key: string, defaultValue: any) => {
 }
 
 interface JSXProps {
-  code: string
   onChange: (code: string) => any
 }
 
-const Jsx: SFC<JSXProps> = ({ onChange, code }) => (
+const Jsx: SFC<JSXProps> = ({ children, ...props }) => (
   <Pre
+    {...props}
     readOnly={false}
     editorClassName={editorClassName}
-    onChange={onChange}
     actions={<Fragment />}
   >
-    {code}
+    {children}
   </Pre>
 )
 
@@ -297,10 +296,9 @@ export class Render extends Component<RenderComponentProps, RenderState> {
               </LiveConsumer>
               {this.actions}
               {showing === 'jsx' ? (
-                <Jsx
-                  onChange={code => this.setState({ code })}
-                  code={this.state.code}
-                />
+                <Jsx onChange={code => this.setState({ code })}>
+                  {this.state.code}
+                </Jsx>
               ) : (
                 <Pre editorClassName={editorClassName} actions={<Fragment />}>
                   {this.html}
diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
index c738e3627..8229f91da 100644
--- a/packages/docz-theme-default/src/types.d.ts
+++ b/packages/docz-theme-default/src/types.d.ts
@@ -5,7 +5,7 @@ declare module 'codemirror/mode/javascript/javascript'
 declare module 'codemirror/mode/jsx/jsx'
 declare module 'codemirror/mode/css/css'
 declare module 'codemirror/addon/edit/matchbrackets'
-declare module 'react-codemirror'
+declare module 'react-codemirror2'
 declare module 'react-feather/dist/icons/edit-2'
 declare module 'react-feather/dist/icons/chevron-down'
 declare module 'react-feather/dist/icons/search'
diff --git a/packages/docz-theme-default/webpack.config.js b/packages/docz-theme-default/webpack.config.js
index b782216ea..574f6b1e0 100644
--- a/packages/docz-theme-default/webpack.config.js
+++ b/packages/docz-theme-default/webpack.config.js
@@ -19,7 +19,7 @@ const externalList = [
   'polished/lib/color/rgba',
   'polished/lib/color/lighten',
   'polished/lib/color/darken',
-  'react-codemirror',
+  'react-codemirror2',
   'react-dom/server',
   'react-feather',
   'react-feather/dist/icons/edit-2',
@@ -68,16 +68,15 @@ const plugins = [
   new FileManagerPlugin({
     onStart: [{ delete: ['./dist'] }],
   }),
-  IS_PROD &&
-    new BundleAnalyzerPlugin({
-      openAnalyzer: false,
-      analyzerMode: 'static',
-    }),
-].filter(Boolean)
+  new BundleAnalyzerPlugin({
+    openAnalyzer: false,
+    analyzerMode: 'static',
+  }),
+]
 
 module.exports = {
   externals,
-  plugins,
+  plugins: IS_PROD ? plugins : [],
   mode: IS_PROD ? 'production' : 'development',
   entry: path.join(__dirname, '/src/index.tsx'),
   devtool: 'source-map',
diff --git a/yarn.lock b/yarn.lock
index 1a59a505b..2a5ee9254 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3973,7 +3973,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -4101,10 +4101,6 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codemirror@^5.18.2:
-  version "5.39.2"
-  resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.39.2.tgz#778aa13b55ebf280745c309cb1b148e3fc06f698"
-
 codemirror@^5.40.0:
   version "5.40.0"
   resolved "https://registry.npmjs.org/codemirror/-/codemirror-5.40.0.tgz#2f5ed47366e514f41349ba0fe34daaa39be4e257"
@@ -4697,14 +4693,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.1:
-  version "15.6.3"
-  resolved "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 create-react-context@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
@@ -5978,7 +5966,7 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fbjs@^0.8.0, fbjs@^0.8.9:
+fbjs@^0.8.0:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -8476,10 +8464,6 @@ lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
 
-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-
 lodash.iteratee@^4.5.0:
   version "4.7.0"
   resolved "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c"
@@ -10450,7 +10434,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.6.2, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.2:
+prop-types@15.6.2, prop-types@^15.5.8, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -10618,16 +10602,9 @@ re-resizable@^4.8.1:
   version "4.8.1"
   resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-4.8.1.tgz#1edc294e7ba9effcd31c2a134d9f825d62c1ec6c"
 
-react-codemirror@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/react-codemirror/-/react-codemirror-1.0.0.tgz#91467b53b1f5d80d916a2fd0b4c7adb85a9001ba"
-  dependencies:
-    classnames "^2.2.5"
-    codemirror "^5.18.2"
-    create-react-class "^15.5.1"
-    lodash.debounce "^4.0.8"
-    lodash.isequal "^4.5.0"
-    prop-types "^15.5.4"
+react-codemirror2@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-5.1.0.tgz#62de4460178adea40eb52eabf7491669bf3794b8"
 
 react-copy-write@^0.8.0:
   version "0.8.0"