Merge branch 'release/4.0.1'

* release/4.0.1:
  wip
  wip
  image caption link fix
  wip
  wip
  wip
  wip
  Apply fixes from StyleCI (#428)
  wip
  wip
  fixing the attributes
  version upgrades and attribute modification
  wip
  wip
  wip

.gitattributes

@@ -1,9 +1,5 @@
 * text=auto
-
-.editorconfig export-ignore
-.gitattributes export-ignore
-.gitignore export-ignore
-.styleci.yml export-ignore
-.travis.yml export-ignore
-phpunit.xml.dist export-ignore
-/tests export-ignore
+*.css linguist-vendored
+*.scss linguist-vendored
+*.js linguist-vendored
+*.blade.php linguist-language=PHP

config/canvas.php

@@ -46,4 +46,18 @@
 
     'storage_path' => env('CANVAS_STORAGE_PATH', 'public/canvas/images'),
 
+    /*
+    |--------------------------------------------------------------------------
+    | Unsplash Integration
+    |--------------------------------------------------------------------------
+    |
+    | Visit https://unsplash.com/oauth/applications to create a new unsplash
+    | app. Use the Access Key to integrate with the Unsplash API
+    |
+    */
+
+    'unsplash' => [
+        'access_key' => env('CANVAS_UNSPLASH_ACCESS_KEY'),
+    ],
+
 ];

package.json

@@ -11,7 +11,7 @@
     "test": "cross-env vendor/bin/phpunit"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.6",
+    "@fortawesome/fontawesome-free": "^5.7",
     "autosize": "^4.0.2",
     "axios": "^0.18",
     "bootstrap": "^4.0.0",

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=1649dc711f52e35af070",
-    "/css/app.css": "/css/app.css?id=f26e80f1c5f0c6b4749c",
-    "/js/app.js.map": "/js/app.js.map?id=c5bbe5ded91d8821581e",
-    "/favicon.png": "/favicon.png?id=387eeb8c7131a7637aa3"
+    "/js/app.js": "/js/app.js?id=f2b6d00ea31ac6565ac9",
+    "/css/app.css": "/css/app.css?id=da72bd8307ebced7bed8",
+    "/js/app.js.map": "/js/app.js.map?id=9b6e8d3ac083f1dd4023",
+    "/favicon.png": "/favicon.png?id=39d853e8c2bdbc38fde3"
 }

readme.md

@@ -47,6 +47,14 @@ If you choose to design your own theme instead of the default, you can publish t
 php artisan vendor:publish --provider="Canvas\CanvasServiceProvider" --tag="canvas-views"
 ```
 
+If you want to use Unsplash images in your posts, you'll need to set up a new application at [https://unsplash.com/oauth/applications](https://unsplash.com/oauth/applications). Grab your access key and update `config/canvas.php`:
+
+```php
+'unsplash' => [
+    'access_key' => env('CANVAS_UNSPLASH_ACCESS_KEY'),
+],
+```
+
 ## Updates
 
 You may update your Canvas installation using composer:

resources/js/components/DateTimePicker.vue

@@ -1,6 +1,11 @@
 <script type="text/ecmascript-6">
     import moment from 'moment';
 
+    /**
+     * Create the default date/time picker.
+     *
+     * @source https://github.com/writingink/wink
+     */
     export default {
         props: ['value'],
 

resources/js/components/Editor.vue

@@ -7,13 +7,22 @@
     import DividerBlot from './editorComponents/DividerBlot.js';
     import HTMLBlot from './editorComponents/HTMLBlot.js';
 
+    /**
+     * Create an instance of the QuillJS editor.
+     *
+     * @source https://github.com/writingink/wink
+     */
     export default {
         components: {
             'image-uploader': ImageUploader,
             'html-embedder': HTMLEmbedder
         },
 
         props: {
+            unsplash: {
+                type: String,
+                default: ''
+            },
             value: {
                 type: String,
                 default: ''
@@ -35,7 +44,7 @@
         },
 
         methods: {
-            // Create an instance of the editor
+            // Create the editor
             createEditor() {
                 Quill.register(ImageBlot, true);
                 Quill.register(DividerBlot, true);
@@ -203,7 +212,7 @@
         <div ref="editor"></div>
         <input type="hidden" name="body" ref="body" />
 
-        <image-uploader @updated="applyImage"></image-uploader>
+        <image-uploader @updated="applyImage" :unsplash="this.unsplash"></image-uploader>
         <html-embedder @adding="addHTML"></html-embedder>
     </div>
 </template>
@@ -400,4 +409,4 @@
             display: none !important;
         }
     }
-</style>
+</style>

resources/js/components/FeaturedImageUploader.vue

@@ -1,6 +1,12 @@
 <script type="text/ecmascript-6">
+
+    /**
+     * Upload a featured image.
+     *
+     * @source https://github.com/writingink/wink
+     */
     export default {
-        props: ['post', 'url', 'caption'],
+        props: ['post', 'url', 'caption', 'unsplash'],
 
         data() {
             return {
@@ -23,30 +29,42 @@
                 this.close();
             },
 
+            // Close the modal
+            close() {
+                this.modalShown = false;
+            },
+
             // Update the selected image
             updateImage({url, caption}) {
-                this.imageUrl = url.data;
+                this.imageUrl = url;
                 this.imageCaption = caption;
+
+                this.uploading = false;
             },
         }
     }
 </script>
 
 <template>
     <div>
-        <div v-if="imageUrl">
+        <div v-if="imageUrl" id="current-image">
             <img :src="imageUrl" class="w-100">
 
             <div class="input-group py-2">
                 <input type="text" class="form-control border-0 px-0"
-                       name="featured_image_caption" title="Featured Image Caption"
+                       name="featured_image_caption"
+                       title="Featured Image Caption"
                        v-model="imageCaption"
                        placeholder="Add a caption for your image">
             </div>
         </div>
 
         <input hidden type="hidden" name="featured_image" v-model="imageUrl">
 
-        <image-picker @changed="updateImage" @uploading="uploading = true"></image-picker>
+        <image-picker
+                @changed="updateImage"
+                @uploading="uploading = true"
+                :unsplash="this.unsplash">
+        </image-picker>
     </div>
 </template>