Help needed on how to use the package in a existing Laravel project

[sprklinginfo]

My apologies first. I am still learning Laravel so the documentation is kind of incomplete to me. I am trying to test the package in an existing Laravel 7 project. Here are what I did so far:

I use the 'composer require' to install the package, then use 'php artisan vendor:publish' command to publish the assets of the package. Tried to access url 'onix/grape' but it just shows a blank page with one line of text 'Save Page' . I thought that is an exmpale page I can see how grapesjs editor works? could you please instruct me on how to actually use it after installation?

BTW, just curious: what is the tag in blade file? first, I thought it could be a blade component, but I didn't find any classes in 'src' which extends the blade component class.

Thanks!

[mariojgt]

Hi there no problem so you did evething right my example had a bug i just push quick correction, after you do the compsoer required and the vendor publish just go to onix/grape and it should work, let me know if you have any problem.

[sprklinginfo]

the route 'onix/grape' still loads a 'save page' text only. the route 'onix/ckeditor ' loads a ckeditor exmple which seems fine.

So I set up a simple route 'test-onix/draft' page to test. on this blade page, I simply added the following code: ` @section('content')

    <div class="container">
        <div class="row align-items-center justify-content-center">

            <div class="col-10 align-items-center">

                <h1>Test Onix Draft page</h1>

                <x-onix::grape-builder
                    {{-- required --}}
                    pushLocationCss="css"
                    {{-- required --}}
                    pushLocationJs="scripts"
                    {{-- not required --}}
                    imageLoadApi="{{ 'url_here' }}"
                    {{-- not required --}}
                    imageSaveApi="{{ 'url_here' }}"
                    {{-- not required this is the palce where you will save and load you url--}}
                    saveUrl="{{'/onix/save_page_example/'.'your_model_id'}}"
                    {{-- not required this is the palce where you will save and load you url--}}
                    loadUrl="{{'/onix/load_post_example/'.'your_model_id'}}"
                    {{-- chagne the backgour not required--}}
                    mainBackgroudColor="#333"
                    {{-- change the editor text color not required--}}
                    textColor="#ffffff"
                    {{-- select you plugin for this page or leave the onix as default --}}
                     :plugin="'gjs-preset-webpage'"
                >
                    {{-- example plugin load --}}
                    <x-slot name="pluginJs">
                        <script src="{{ asset('vendor/Onix/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js') }}"></script>
                    </x-slot>
                    {{-- Set your style like boostrap or this case tailwind so the brower can render inside the componente --}}

{{--

--}} {{-- set you style in here in here this is jsut a exemple --}} {{-- {{ }}--}} {{--

--}}

                </x-onix::grape-builder>

            </div>

        </div>
    </div>

@endsection

On this draft page, I can see the grapesjs editor with 'gjs-preset-webpage' components loaded on the side. but when drag and drop any of those components, it doesn't place on the editor and the following errors in the developer console: onix_base_commands.js:42 Uncaught TypeError: Cannot read property 'style' of undefined at hideEnableEditor (onix_base_commands.js:42) at HTMLDocument. (onix_base_commands.js:103)`

I attached a screenshot of the page.

[mariojgt]

Right you may need to remove the package and install again looks like is a cache issue in that /onix/grape route, about those errors did you have the css and your scripts stack.

On Sun, 15 Nov 2020, 23:11 Lingling Jiang, notifications@github.com wrote:

the route 'onix/grape' still loads a 'save page' text only. the route 'onix/ckeditor ' loads a ckeditor exmple which seems fine.

So I set up a simple route 'test-onix/draft' page to test. on this blade page, I simply added the following code: ` @section https://github.com/section('content')

<div class="container">
    <div class="row align-items-center justify-content-center">

        <div class="col-10 align-items-center">

            <h1>Test Onix Draft page</h1>

            <x-onix::grape-builder
                {{-- required --}}
                pushLocationCss="css"
                {{-- required --}}
                pushLocationJs="scripts"
                {{-- not required --}}
                imageLoadApi="{{ 'url_here' }}"
                {{-- not required --}}
                imageSaveApi="{{ 'url_here' }}"
                {{-- not required this is the palce where you will save and load you url--}}
                saveUrl="{{'/onix/save_page_example/'.'your_model_id'}}"
                {{-- not required this is the palce where you will save and load you url--}}
                loadUrl="{{'/onix/load_post_example/'.'your_model_id'}}"
                {{-- chagne the backgour not required--}}
                mainBackgroudColor="#333"
                {{-- change the editor text color not required--}}
                textColor="#ffffff"
                {{-- select you plugin for this page or leave the onix as default --}}
                 :plugin="'gjs-preset-webpage'"
            >
                {{-- example plugin load --}}
                <x-slot name="pluginJs">
                    <script src="{{ asset('vendor/Onix/grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js') }}"></script>
                </x-slot>
                {{-- Set your style like boostrap or this case tailwind so the brower can render inside the componente --}}

{{-- --}} {{-- set you style in here in here this is jsut a exemple --}} {{-- {{ }}--}} {{-- --}}

            </x-onix::grape-builder>

        </div>

    </div>
</div>

@endsection

On this draft page, I can see the grapesjs editor with 'gjs-preset-webpage' components loaded on the side. but when drag and drop any of those components, it doesn't place on the editor and the following errors in the developer console:onix_base_commands.js:42 Uncaught TypeError: Cannot read property 'style' of undefined at hideEnableEditor (onix_base_commands.js:42) at HTMLDocument. (onix_base_commands.js:103)`

I attached a screenshot of the page. [image: onix-test] https://user-images.githubusercontent.com/3521826/99199547-f7f6d780-276d-11eb-81b4-454fba9bef07.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mariojgt/onix/issues/3#issuecomment-727654074, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYBWRERW2WLUMNIJLUFSZ3SQBN23ANCNFSM4TWLSYKQ .

[mariojgt]

I will send you a link with a fresh laravel 8 with the onix, just downloand and go onix/grape https://drive.google.com/file/d/11BOVgjnCXROLluZkp0MHGiFw8J6rvynG/view?usp=sharing

[sprklinginfo]

I downloaded and spun up the project you sent. Ran 'composer install', 'npm install', 'npm run dev'. First, the Console complained can't find css file for grapesjs. so I ran 'npm i grapesjs' to install it and updated 'import 'grapesjs/dist/css/grapes.min.css'; in app.scss file in the package ( which I think I should not do) but it fixed the error.

tried to load 'onix/grape' with default onix, as it shows below. but I still can't drag and drop any blocks in the editor. but no errors reported in the Developer Console either.

Next, I tried to enable 'grapesjs-preset-webpage' plugin, I still can't drag and drop anything in the editor. Every time it reported the following error:

onix_base_commands.js:42 Uncaught TypeError: Cannot read property 'style' of undefined
    at hideEnableEditor (onix_base_commands.js:42)
    at HTMLDocument.<anonymous> (onix_base_commands.js:103)

[mariojgt]

Hi there those erros looks like is not finding the js scripts inside the public/vendor/onix/js to re run the npm you need to open the onix service provider and uncomment the publish line where it moves the npm files, but the project i sent you it sould be able just to run php artisan serve and acess that url.

[mariojgt]

If you want you can send the project zip where you use the onix so i can see what is what is wrong.

[mariojgt]

Hi there is did some testing and i found the problem of this error is something to do with the google chome engine i am working to fix.

[mariojgt]

I fix the bug basically i had to remove one js file that i did that for some reason was working only in the fiferox.

[sprklinginfo]

Hi there, Inside the project you sent to me, I first uninstalled the package and removed all published assets first. Then re-installed the package with the latest. Visiting 'onix/grape' on Chrome, I still can't drag/drop any default onix blocks and no errors reported. With 'grapesjs-preset-webpage' I got the same error for line 42 of the onix_base_commands.js file. On Firefox it works with default onix blocks. With 'grapesjs-preset-webpage' it works but the console started to report the same error for line 42 in the onix_base_commands.js file for each block I dropped.

[mariojgt]

If you do a composer update and a vendor publish - - force i remove that js file with problem.

On Mon, 16 Nov 2020, 21:58 Lingling Jiang, notifications@github.com wrote:

Hi there, Inside the project you sent to me, I first uninstalled the package and removed all published assets first. Then re-installed the package with the latest. Visiting 'onix/grape' on Chrome, I still can't drag/drop any default onix blocks and no errors reported. With 'grapesjs-preset-webpage' I got the same error for line 42 of the onix_base_commands.js file. On Firefox it works with default onix blocks. With 'grapesjs-preset-webpage' it works but the console started to report the same error for line 42 in the onix_base_commands.js file for each block I dropped.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/mariojgt/onix/issues/3#issuecomment-728353882, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYBWRFV4LY7SSYTKTNH3R3SQGOBRANCNFSM4TWLSYKQ .

[mariojgt]

in one of my commit i put that file back, but now is gone.