with quilljs example (#8904)

* quill js with nextjs

* remove  spaces and blank line

* fix  code  lints

* imporve lin

* fix lint  error

* trying to fix lint

* Update examples/with-quill-js/README.md
Co-Authored-By: NLuis Alvarez D. <luis@zeit.co>

* Update examples/with-quill-js/README.md
Co-Authored-By: NLuis Alvarez D. <luis@zeit.co>

* update readme

* Update example

examples/with-quill-js/README.md

+# Quilljs editor Example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-quill-js with-quill-js-app
+# or
+yarn create next-app --example with-quill-js with-quill-js-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-quill-js
+cd with-quill-js
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```
+
+## The idea behind the example
+
+[Quill](https://quilljs.com/) is powerful rich text editor. This example uses [react-quill](https://github.com/zenoamaro/react-quill) to integrate Quill with Next.js.
+
+Quill does not suppport SSR, so it's only loaded and rendered in the browser.

examples/with-quill-js/next.config.js

+// next.config.js
+const withCSS = require('@zeit/next-css')
+module.exports = withCSS({/* my next config */})

examples/with-quill-js/package.json

+{
+  "name": "with-quill-js",
+  "version": "1.0.0",
+  "author": "Arya Sadeghi",
+  "license": "ISC",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/next-css": "^1.0.1",
+    "next": "latest",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-quill": "^1.3.3"
+  }
+}

examples/with-quill-js/pages/index.js

+import React from 'react'
+import dynamic from 'next/dynamic'
+import 'react-quill/dist/quill.snow.css'
+
+const QuillNoSSRWrapper = dynamic(import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>
+})
+
+const modules = {
+  toolbar: [
+    [{ header: '1' }, { header: '2' }, { font: [] }],
+    [{ size: [] }],
+    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    [
+      { list: 'ordered' },
+      { list: 'bullet' },
+      { indent: '-1' },
+      { indent: '+1' }
+    ],
+    ['link', 'image', 'video'],
+    ['clean']
+  ],
+  clipboard: {
+    // toggle to add extra line breaks when pasting HTML:
+    matchVisual: false
+  }
+}
+/*
+ * Quill editor formats
+ * See https://quilljs.com/docs/formats/
+ */
+const formats = [
+  'header',
+  'font',
+  'size',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'blockquote',
+  'list',
+  'bullet',
+  'indent',
+  'link',
+  'image',
+  'video'
+]
+
+export default () => (
+  <QuillNoSSRWrapper modules={modules} formats={formats} theme='snow' />
+)