Question (not an issue): how can your files build when you're on an old version of laravel mix? about nova-tiptap HOT 5 CLOSED

Hi Gavin, tbh the question about the spread operator and laravel mix I have no quick answer to.

As for why the field does not show, if you point me to your repository I will have a look when I find the time. No promises though, as I'm pretty busy at the moment.

from nova-tiptap.

HI Sebastian,

Thanks for your response!

The question is really if you don't encounter any hiccups when you build the files with the settings in your package.json. My guess is not, otherwise you'd know :-)

As for the repo:
I've only had it local so not in a repo yet, but the setup is really basic. It's just a fresh Laravel 7 (7.26.1) install, with Nova 3.8.4 and the default field code generated with nova:field. The only thing that's different is the tiptap import:

<template>
    <default-field :field="field" :errors="errors">
        <template slot="field">
            <input
                :id="field.name"
                type="text"
                class="w-full form-control form-input form-input-bordered"
                :class="errorClasses"
                :placeholder="field.name"
                v-model="value"
            />
        </template>
    </default-field>
</template>

<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova'
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap' // <---- field does not show with this added

export default {
    mixins: [FormField, HandlesValidationErrors],

    props: ['resourceName', 'resourceId', 'field'],

    methods: {
        /*
         * Set the initial, internal value for the field.
         */
        setInitialValue() {
            this.value = this.field.value || ''
        },

        /**
         * Fill the given FormData object with the field's internal value.
         */
        fill(formData) {
            formData.append(this.field.attribute, this.value || '')
        },

        /**
         * Update the field's internal value.
         */
        handleChange(value) {
            this.value = value
        },
    },
}
</script>

// package.json
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^5.0.0",
        "laravel-mix": "^5.0", // <-- changed from ^1.0, otherwise you get the unexpected token error
        "laravel-nova": "^1.0"
    },
    "dependencies": {
        "tiptap": "^1.27.1",
        "tiptap-extensions": "^1.29.1",
        "vue": "^2.5.0",
        "vue-template-compiler": "^2.6.10"
    }
}

Do you want to see the generated field.js?

from nova-tiptap.

Hi Gavin, don't get me wrong, but debugging this here in the issue section of my package is a bit much to ask.
I give it one shot, which is I don't seen you doing anything with Editor, EditorContent, EditorMenuBar, EditorMenuBubble which you are importing - no components object inside your default object.

But this should not neccessarily cause your field to not show at all. I recommend using Chrome devtools with the Vue extension to see if there maybe are some error messages you oversaw.

Feel free to fork my package and start from there or grab anything you need from it.

from nova-tiptap.

Hi Gavin, don't get me wrong, but debugging this here in the issue section of my package is a bit much to ask.
I give it one shot, which is I don't seen you doing anything with Editor, EditorContent, EditorMenuBar, EditorMenuBubble which you are importing - no components object inside your default object.

But this should not neccessarily cause your field to not show at all. I recommend using Chrome devtools with the Vue extension to see if there maybe are some error messages you oversaw.

Feel free to fork my package and start from there or grab anything you need from it.

Umm, I wasn't asking you to help me debug anything. It was only that you asked for a repo that I posted it here to give a view what would be in in it. I think you misunderstood.

I have tried multiple things (including doing something with the imports). As a matter of fact I used your package as a starting point, and that's why I reached out to you, since you may be the most knowledgeable guy when it comes to integrating tiptap into nova. I understand that you've not run into any issues I'm running in to, so I will go on and try to figure out why it's not working.

Thanks for your time and your package!

from nova-tiptap.

BTW, I have to thank you. Checking Vue in devtools was not possible because the Nova vue instance was set to production and I did not realize I could open it up by rebuilding the nova files. I can now see errors which should take me a bit further.

EDIT: Fixed!! Works!

Thanks!

from nova-tiptap.