Merge pull request #47 from OpJePl44tsm4n/saveAsJson

Save field as json proposal
bastihilger · Jan 9, 2022 · 346a838 · 346a838
2 parents 1c55190 + 4b2a3e5
commit 346a838
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/Readme.md b/Readme.md
@@ -210,6 +210,20 @@ Tiptap::make('FieldName')
 
 When using `'editHtml'` you can set the theme by using using `htmlTheme()`. The default theme used is "material". You can find all the codemirror themes used [here](https://codemirror.net/demo/theme.html) .
 
+## Save JSON 
+
+You can optionally use `saveAsJson` to enable the ability to save the tiptap editor content as JSON in the field
+
+``` php
+Tiptap::make('FieldName')
+  ->buttons([
+      'italic',
+      'bold',
+      'code'
+  ])
+  ->saveAsJson(),
+```
+
 ## Visibility in index view
 
 Like `Textarea` and `Trix` fields this field is hidden from index views. You can make the content visible by using a [computed field](https://nova.laravel.com/docs/3.0/resources/fields.html#computed-fields).

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -316,6 +316,10 @@ export default {
                return this.editor ? this.editor.isActive('table') : false;
            }
            return false;
+        },
+
+        saveAsJson() {
+            return this.field.saveAsJson ? this.field.saveAsJson : false;
         }
     },
 
@@ -472,8 +476,19 @@ export default {
         this.editor = new Editor({
             extensions: extensions,
             content: this.value,
+            onCreate() {
+                try {
+                    let content = JSON.parse(context.value);
+                    this.commands.setContent(content);
+                } catch {} 
+            },
             onUpdate() {
-                context.updateValue(this.getHTML());
+                if (context.saveAsJson) {
+                    let jsonContent = this.getJSON();
+                    context.updateValue(JSON.stringify(jsonContent.content));
+                } else {
+                    context.updateValue(this.getHTML());
+                }
             },
         });
     },

diff --git a/src/Tiptap.php b/src/Tiptap.php
@@ -23,6 +23,13 @@ class Tiptap extends Field
      */
     public $showOnIndex = false;
 
+    /**
+     * Indicates if the field should save it's content as json object.
+     *
+     * @var bool
+     */
+    public $saveAsJson = false;
+
     /**
      * Set the buttons that should be available in the menu.
      *
@@ -187,6 +194,19 @@ public function placeholderBlocks($placeholderBlocks)
         ]);
     }
 
+    /**
+     * Set setting to save the input as json object.
+     *
+     * @param  boolean  $saveAsJson
+     * @return $this
+     */
+    public function saveAsJson()
+    {
+        return $this->withMeta([
+            'saveAsJson' => true,
+        ]);
+    }
+
     public function jsonSerialize()
     {
         return array_merge(parent::jsonSerialize(), [