Merge pull request #1576 from marktext/unsplash-ux

Improve image picker UX

src/muya/lib/ui/imageSelector/index.css

@@ -108,6 +108,7 @@
   text-align: center;
   display: block;
   color: var(--editorColor30);
+  user-select: none;
 }
 
 .ag-image-selector span.description a {
@@ -154,6 +155,7 @@
   text-align: center;
   font-size: 14px;
   color: var(--editorColor);
+  user-select: none;
 }
 
 .ag-image-selector .more {
@@ -161,6 +163,7 @@
   color: var(--editorColor);
   text-align: center;
   margin-bottom: 20px;
+  user-select: none;
 }
 
 .ag-image-selector .photo {

src/muya/lib/ui/imageSelector/index.js

@@ -12,7 +12,7 @@ class ImageSelector extends BaseFloat {
 
   constructor (muya, options) {
     const name = 'ag-image-selector'
-    const { accessKey } = options
+    const { unsplashAccessKey } = options
     options = Object.assign(options, {
       placement: 'bottom-center',
       modifiers: {
@@ -26,9 +26,13 @@ class ImageSelector extends BaseFloat {
     this.renderArray = []
     this.oldVnode = null
     this.imageInfo = null
-    this.unsplash = new Unsplash({
+    if (!unsplashAccessKey) {
-      accessKey
+      this.unsplash = null
-    })
+    } else {
+      this.unsplash = new Unsplash({
+        accessKey: unsplashAccessKey
+      })
+    }
     this.photoList = []
     this.loading = false
     this.tab = 'link' // select or link
@@ -56,22 +60,27 @@ class ImageSelector extends BaseFloat {
         }
 
         Object.assign(this.state, imageInfo.token.attrs)
-        // load latest unsplash photos.
+
-        this.loading = true
+        if (this.unsplash) {
-        this.unsplash.photos.listPhotos(1, 40, 'latest')
+          // Load latest unsplash photos.
-          .then(toJson)
+          this.loading = true
-          .then(json => {
+          this.unsplash.photos.listPhotos(1, 40, 'latest')
-            this.loading = false
+            .then(toJson)
-            if (Array.isArray(json)) {
+            .then(json => {
-              this.photoList = json
+              this.loading = false
-              if (this.tab === 'unsplash') {
+              if (Array.isArray(json)) {
-                this.render()
+                this.photoList = json
+                if (this.tab === 'unsplash') {
+                  this.render()
+                }
               }
-            }
+            })
-          })
+        }
+
         this.imageInfo = imageInfo
         this.show(reference, cb)
         this.render()
+
         // Auto focus and select all content of the `src.input` element.
         const input = this.imageSelectorContainer.querySelector('input.src')
         if (input) {
@@ -85,6 +94,10 @@ class ImageSelector extends BaseFloat {
   }
 
   searchPhotos = (keyword) => {
+    if (!this.unsplash) {
+      return
+    }
+
     this.loading = true
     this.photoList = []
     this.unsplash.search.photos(keyword, 1, 40)
@@ -253,11 +266,15 @@ class ImageSelector extends BaseFloat {
     }, {
       label: 'Embed link',
       value: 'link'
-    }, {
-      label: 'Unsplash',
-      value: 'unsplash'
     }]
 
+    if (this.unsplash) {
+      tabs.push({
+        label: 'Unsplash',
+        value: 'unsplash'
+      })
+    }
+
     const children = tabs.map(tab => {
       const itemSelector = this.tab === tab.value ? 'li.active' : 'li'
       return h(itemSelector, h('span', {
@@ -285,7 +302,7 @@ class ImageSelector extends BaseFloat {
             }
           }
         }, 'Choose an Image'),
-        h('span.description', 'Choose image from you computer.')
+        h('span.description', 'Choose image from your computer.')
       ]
     } else if (tab === 'link') {
       const altInput = h('input.alt', {
@@ -355,14 +372,14 @@ class ImageSelector extends BaseFloat {
         }
       }, 'Embed Image')
       const bottomDes = h('span.description', [
-        h('span', 'Paste web image or local image path, '),
+        h('span', 'Paste web image or local image path. Use '),
         h('a', {
           on: {
             click: event => {
               this.toggleMode()
             }
           }
-        }, `${isFullMode ? 'simple mode' : 'full mode'}`)
+        }, `${isFullMode ? 'simple mode' : 'full mode'}.`)
       ])
       bodyContent = [inputWrapper, embedButton, bottomDes]
     } else {

src/muya/themes/default.css

@@ -640,7 +640,6 @@ kbd {
     border-left-color: transparent;
     border-right-color: transparent;
   }
-
 } /* end not print */
 
 @media print {

src/renderer/components/editorWithTabs/editor.vue

@@ -469,7 +469,7 @@ export default {
       Muya.use(EmojiPicker)
       Muya.use(ImagePathPicker)
       Muya.use(ImageSelector, {
-        accessKey: process.env.UNSPLASH_ACCESS_KEY,
+        unsplashAccessKey: process.env.UNSPLASH_ACCESS_KEY,
         photoCreatorClick: this.photoCreatorClick
       })
       Muya.use(Transformer)