feat: Use Markdown viewer for a cozy-note (#1369)

package.json

@@ -80,7 +80,7 @@
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.3.27",
     "copyfiles": "2.1.1",
-    "cozy-client": "9.4.0",
+    "cozy-client": "^10.5.0",
     "cozy-device-helper": "1.7.5",
     "cozy-doctypes": "^1.69.0",
     "css-loader": "0.28.11",

react/Viewer/TextViewer.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { withClient } from 'cozy-client'
+import { withClient, models } from 'cozy-client'
 import Spinner from '../Spinner'
 import withFileUrl from './withFileUrl'
 import styles from './styles.styl'
@@ -30,7 +30,11 @@ const Loader = () => (
   </div>
 )
 
-class TextViewer extends React.Component {
+export const isMarkdown = file =>
+  file.mime === 'text/markdown' ||
+  /.md$/.test(file.name) ||
+  models.file.isNote(file)
+export class TextViewer extends React.Component {
   state = {
     text: '',
     isMarkdown: false,
@@ -52,14 +56,14 @@ class TextViewer extends React.Component {
     const { url, file } = this.props
     try {
       const parsedURL = new URL(url)
-      const client = this.props.client.getClient()
+      const client = this.props.client.getStackClient()
       const response = await client.fetch('GET', parsedURL.pathname)
       const text = await response.text()
-      const isMarkdown = file.mime === 'text/markdown' || /.md$/.test(file.name)
+
       if (this._mounted) {
         this.setState({
           text,
-          isMarkdown,
+          isMarkdown: isMarkdown(file),
           loading: false
         })
       }
@@ -78,7 +82,6 @@ class TextViewer extends React.Component {
   render() {
     const { loading, error, text, isMarkdown } = this.state
     const { file, renderFallbackExtraContent } = this.props
-
     if (loading) return <Loader />
     else if (error)
       return (

react/Viewer/TextViewer.spec.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { TextViewer, isMarkdown } from './TextViewer'
+import { createMockClient } from 'cozy-client'
+import renderer from 'react-test-renderer'
+const props = {
+  client: createMockClient({}),
+  url: 'https://foo.mycozy.cloud',
+  file: {
+    _id: '1',
+    _type: 'io.cozy.files',
+    name: 'My File'
+  }
+}
+
+describe('isMarkdown function', () => {
+  it('test markdown function', () => {
+    const note = {
+      name: 'My Note.cozy-note',
+      type: 'file',
+      metadata: {
+        content: 'my prosemirror content',
+        schema: '1',
+        title: 'prosemirror title',
+        version: '3'
+      }
+    }
+    expect(isMarkdown({ mime: 'text/markdown' })).toBe(true)
+    expect(isMarkdown({ name: 'text.md' })).toBe(true)
+    expect(isMarkdown(note)).toBe(true)
+    expect(isMarkdown({ name: 'text.txt' })).toBe(false)
+  })
+})
+describe('TextViewer Component', () => {
+  it('should display the loader ', () => {
+    const comp = shallow(<TextViewer {...props} />)
+    expect(comp).toMatchSnapshot()
+  })
+  it('should display the error component and render with renderFallback', () => {
+    const comp = renderer.create(
+      <TextViewer
+        {...props}
+        renderFallbackExtraContent={file => <span>{file.name}</span>}
+      />
+    )
+    comp.getInstance().setState({ error: true, loading: false })
+    expect(comp.toJSON()).toMatchSnapshot()
+  })
+  it('should display the text viewer', () => {
+    const comp = renderer.create(<TextViewer {...props} />)
+    comp.getInstance().setState({
+      loading: false,
+      isMarkdown: false,
+      text: 'The content of my file'
+    })
+    expect(comp.toJSON()).toMatchSnapshot()
+  })
+
+  it('should display the markdown viewer', () => {
+    const comp = renderer.create(<TextViewer {...props} />)
+    comp.getInstance().setState({
+      loading: false,
+      isMarkdown: true,
+      text:
+        "It's very easy to make some words **bold** and other words *italic* with Markdown"
+    })
+    expect(comp.toJSON()).toMatchSnapshot()
+  })
+})

react/Viewer/__snapshots__/TextViewer.spec.jsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextViewer Component should display the error component and render with renderFallback 1`] = `
+<div
+  className="styles__viewer-noviewer___3heA6"
+>
+  <svg
+    className="styles__icon___23x3R"
+    height={140}
+    style={Object {}}
+    width={160}
+  >
+    <use
+      xlinkHref="#file-type-files"
+    />
+  </svg>
+  <p
+    className="styles__viewer-filename___36bWW"
+  >
+    My File
+  </p>
+  <span>
+    My File
+  </span>
+</div>
+`;
+
+exports[`TextViewer Component should display the loader  1`] = `<Loader />`;
+
+exports[`TextViewer Component should display the markdown viewer 1`] = `
+<div
+  className="styles__viewer-textviewer___cISlz"
+>
+  <h2
+    className="styles__viewer-filename___36bWW u-mt-3 u-mb-1"
+  >
+    My File
+  </h2>
+  <div
+    className="styles__viewer-textviewer-content___q2RzR u-p-1"
+  >
+    <p>
+      It's very easy to make some words 
+      <strong>
+        bold
+      </strong>
+       and other words 
+      <em>
+        italic
+      </em>
+       with Markdown
+    </p>
+  </div>
+</div>
+`;
+
+exports[`TextViewer Component should display the text viewer 1`] = `
+<div
+  className="styles__viewer-textviewer___cISlz"
+>
+  <h2
+    className="styles__viewer-filename___36bWW u-mt-3 u-mb-1"
+  >
+    My File
+  </h2>
+  <pre
+    className="styles__viewer-textviewer-content___q2RzR u-mh-auto u-mv-2"
+  >
+    The content of my file
+  </pre>
+</div>
+`;

react/Viewer/index.spec.jsx

@@ -131,6 +131,7 @@ describe('Plain text file detection', () => {
       expect(isPlainText('text/markdown')).toBe(true)
       expect(isPlainText('application/text')).toBe(false)
       expect(isPlainText('something/text/else')).toBe(false)
+      expect(isPlainText('text/vnd.cozy.note+markdown')).toBe(true)
     })
 
     it('should not match complex text formats', () => {

yarn.lock

@@ -3054,6 +3054,11 @@ btoa-lite@^1.0.0:
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
   integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
 
+btoa@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
+  integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
+
 [email protected]:
   version "0.19.7"
   resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.7.tgz#1dfd080ab688101aad5388d3304bc82601a244fd"
@@ -4291,19 +4296,24 @@ cosmiconfig@^5.0.1:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-cozy-client@9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-9.4.0.tgz#c57a05716a6d4184743fe2031e38a691fb85f93e"
-  integrity sha512-5YK7OhKH/hsHRYMWVfP4S8wzJk9D7VsQZb1gNUWbMtZnxKZ0lP6mIuyBL4iYg4olqmr4lj77k9utBzW1oZ8bag==
+cozy-client@^10.5.0:
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/cozy-client/-/cozy-client-10.5.0.tgz#0dbf05786d9549c266d2f2c20a7448af6d828bb7"
+  integrity sha512-j2z1lj1yxLOK6mNPKnS+DjLibXrABVMsd9+YM9Beh29KW6f5gefNXecrfBcfWGoUOYF2z3j2xtxeTnncEWQM+A==
   dependencies:
+    btoa "^1.2.1"
     cozy-device-helper "^1.7.3"
-    cozy-stack-client "^9.2.0"
+    cozy-logger "^1.6.0"
+    cozy-stack-client "^10.4.0"
+    isomorphic-fetch "^2.2.1"
     lodash "^4.17.13"
     microee "^0.0.6"
+    opn "^6.0.0"
     prop-types "^15.6.2"
     react-redux "^5.0.7"
     redux "^3.7.2"
     redux-thunk "^2.3.0"
+    server-destroy "^1.0.1"
     sift "^6.0.0"
     url-search-params-polyfill "^7.0.0"
 
@@ -4341,10 +4351,10 @@ cozy-logger@^1.6.0:
     chalk "^2.4.2"
     json-stringify-safe "5.0.1"
 
-cozy-stack-client@^9.2.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-9.2.0.tgz#3d6a9af9e42f6f2d8fad7fe57e83713a3bcafc77"
-  integrity sha512-ivMjA+EtV7lu6lKzuOIiS00XcTVL6WRbycSmfO7SJrAU12kWp54rlKDS9rMFA2NjCEShjTVdu0intkxYbuimsw==
+cozy-stack-client@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.yarnpkg.com/cozy-stack-client/-/cozy-stack-client-10.4.0.tgz#5fc104eb881982c42feae126c2cb6de58e416f9f"
+  integrity sha512-VoiztT2NXaNQYOtp2w4QVQh9Y05ikJ4ityIOATY9mNjG6Ah+cs42P0SxBw9rcG6J6/hRI6gZqeo95qFwixDdMg==
   dependencies:
     detect-node "^2.0.4"
     mime "^2.4.0"
@@ -8054,7 +8064,7 @@ isobject@^4.0.0:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
   integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
 
-isomorphic-fetch@^2.1.1:
+isomorphic-fetch@^2.1.1, isomorphic-fetch@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
   integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
@@ -11190,6 +11200,13 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opn@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-6.0.0.tgz#3c5b0db676d5f97da1233d1ed42d182bc5a27d2d"
+  integrity sha512-I9PKfIZC+e4RXZ/qr1RhgyCnGgYX0UEIlXgWnCOVACIvFgaC9rz6Won7xbdhoHrd8IIhV7YEpHjreNUNkqCGkQ==
+  dependencies:
+    is-wsl "^1.1.0"
+
 [email protected], optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -14362,6 +14379,11 @@ [email protected]:
     parseurl "~1.3.3"
     send "0.17.1"
 
+server-destroy@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/server-destroy/-/server-destroy-1.0.1.tgz#f13bf928e42b9c3e79383e61cc3998b5d14e6cdd"
+  integrity sha1-8Tv5KOQrnD55OD5hzDmYtdFObN0=
+
 set-blocking@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-1.0.0.tgz#cd5e5d938048df1ac92dfe92e1f16add656f5ec5"