update readme and additions

Readme.md

@@ -38,8 +38,8 @@ Tiptap::make('FieldName')
         'italic',
         'bold',
         '|',
-        'code',
         'link',
+        'code',
         'strike',
         'underline',
         'highlight',
@@ -54,22 +54,126 @@ Tiptap::make('FieldName')
         '|',
         'table',
         '|',
-        'textAlign',
-        '|',
         'image',
         '|',
+        'textAlign',
+        '|',
         'history',
         '|',
         'editHtml',
     ])
     ->headingLevels([2, 3, 4]),
 ```
 
+## `|` and `br`
+
+You can use `|` to define a vetical line between two buttons, and you can use `br` to define a hard break after a button.
+
+## Headings and `headingLevels`
+
 When just passing the string `'heading'` you will have H1, H2 and H3 to choose from. You can set the level of headings by using for example `headingLevels([2, 3, 4])` which will give you H2 through H4.
 
-### The two different "code" buttons
+## Links and `linkSettings` and `fileSettings`
+
+When just passing the string `'link'` you will be able to link ext with an URL and define if the link should open in a new window. You will also be able to link text with a file you uploaded to the server. You can optionally use `linkSettings` to define if this file upload should be possible/visible like so:
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'link',
+  ])
+  ->linkSettings([
+      'withFileUpload' => false,
+  ]),
+```
+
+And you can optionally use `fileSettings` to define the **disk** and the **path**:
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'link',
+  ])
+  ->fileSettings([
+      'disk' => 'your_custom_disk',
+      'path' => 'your/custom/path',
+  ]),
+```
+
+If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.
+
+And if no path is defined here, it assumes the root folder of that disk.
+
+## Images and `imageSettings`
+
+With the button `'image'` you can let the user add images either from a file upload or from adding a URL. And you can optionally use `imageSettings` to define the **disk** and the **path**:
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'image',
+  ])
+  ->imageSettings([
+      'disk' => 'your_custom_disk',
+      'path' => 'your/custom/path',
+  ]),
+```
+
+If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.
+
+And if no path is defined here, it assumes the root folder of that disk.
+
+### Disallowing file upload for images
+
+For images you can also disallow the file upload completely with the `withFileUpload` attribute:
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'image',
+  ])
+  ->imageSettings([
+      'withFileUpload' => false,
+  ]),
+```
+
+## Text alignment with `textAlign`
+
+When adding `textAlign` you get four buttons for aligning text **left**, **right**, **center** and **justify**. The default alignment will be **left**. 
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'textAlign',
+  ]),
+```
+
+If you want to change some of this, you can use the methods `alignments` and `defaultAlignment`:
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'textAlign',
+  ])
+  ->alignments(['right', 'left'])
+  ->defaultAlignment('right'),
+```
+
+## The two different "code" buttons
 
-`'code'` is inline code (like `<code></code>`) while `'code_block'` will give you `<pre><code></code></pre>`.
+`'code'` is inline code (like `<code></code>`) while `'codeBlock'` will give you `<pre><code></code></pre>`.
 
 ## Syntax Highlighting when using `codeBlock`
 

resources/js/components/FormField.vue

@@ -127,6 +127,7 @@
                     form-input-bordered w-full
                     pt-2 pb-2
                 "
+                :style="cssProps"
                 v-show="mode == 'editor'"
             >
                 <editor-content :editor="editor" />
@@ -270,6 +271,12 @@ export default {
             return this.field.defaultAlignment ? this.field.defaultAlignment : 'left';
         },
 
+        cssProps() {
+            return {
+                '--text-align': this.defaultAlignment
+            }
+        },
+
         htmlTheme() {
             return this.field.htmlTheme ? this.field.htmlTheme : 'material';
         },
@@ -316,8 +323,6 @@ export default {
             this.fileDisk = this.field.fileSettings.disk;
         }
 
-
-
         let extensions = [
             Document,
             Bold,
@@ -462,6 +467,10 @@ export default {
             line-height: 1.5em;
         }
 
+        p, h1, h2, h3, h4, h5, h6 {
+            text-align: var(--text-align);
+        }
+
         pre {
             padding-top: 5px;
             padding-bottom: 5px;

resources/js/components/buttons/ImageButton.vue

@@ -11,7 +11,7 @@
             <div class="rounded-lg shadow-lg overflow-hidden z-20 w-action-fields max-w-full">
                 <div class="px-8 py-8 bg-white">
                     <div 
-                        v-if="!imageIsActive"
+                        v-if="!imageIsActive && withFileUpload"
                     >
                         <span 
                             class="cursor-pointer font-bold text-sm border-b-2 "
@@ -40,7 +40,7 @@
                         v-if="!imageIsActive"
                         class="pt-8"
                     >
-                        <div v-show="imageMode == 'file'">
+                        <div v-if="withFileUpload" v-show="imageMode == 'file'">
                             <div 
                                 class="flex items-center transition-opacity duration-150"
                                 :class="{
@@ -246,7 +246,7 @@ export default {
             uploadProgress: 0,
             uploading: false,
             extraClasses: '',
-            imageMode: 'file',
+            imageMode: 'url',
             title: '',
             alt: '',
         }
@@ -260,6 +260,17 @@ export default {
     computed: {
         imageIsActive() {
            return this.editor ? this.editor.isActive('image') : false;
+        },
+        withFileUpload() {
+            return !this.field.imageSettings
+                    ||
+                    (
+                        typeof(this.field.imageSettings.withFileUpload) != 'boolean'
+                        || this.field.imageSettings.withFileUpload
+                    );
+        },
+        defaultMode() {
+            return this.withFileUpload ? 'file' : 'url';
         }
     },
 
@@ -268,13 +279,13 @@ export default {
             if (this.imageIsActive) {
                 let attributes = this.editor.getAttributes('image');
                 this.url = attributes.src;
-                this.imageMode = attributes['tt-mode'] ? attributes['tt-mode'] : 'file';
+                this.imageMode = attributes['tt-mode'] ? attributes['tt-mode'] : this.defaultMode;
                 this.extraClasses = attributes.class ? attributes.class : '';
                 this.title = attributes.title ? attributes.title : '';
                 this.alt = attributes.alt ? attributes.alt : '';
             } else {
                 this.url = '';
-                this.imageMode = 'file';
+                this.imageMode = this.defaultMode;
                 this.extraClasses = '';
                 this.title = '';
                 this.alt = '';