[4.1.x][Proposal] EditorJS field type

[ghost]

I've been loving the way EditorJS (editorjs.io), ( (https://github.com/codex-team/editor.js formats blocks as JSON and is really light in the database and flexible in the presentation layer compared to typical WYSIWYG editors and even the Markdown field that I previously loved.

I noticed you were considering GrapeJs Laravel-Backpack/CRUD#2023 here, and this seems like a really simple "in between" as it frees users up to build and add their own "blocks" with most of the work happening on the view end of the process.

I'm working on a custom field so happy to do a PR, but I think you guys would do a much better job than I can haha.

[pxpm]

Hello @SamSebastien .

Thanks for bring this up to the table . Indeed we are considering a move to add that kind of field.

Would love if you could share your solution when you are done just to see the field in action. Maybe @tabacitu never considered this option, and will be good if we show him the work in progress. :)

Don't mind if your code is not the prettiest or there are better solution. If you are in need of that field and have time to make it happen just do it. Polishing the things is done in end :)

Even if it don't get merged to core, BP is planning to give devs a simpler way to share custom fields and columns and i can see this field fits there atleast.

Best,
Pedro

[tabacitu]

Hi @SamSebastien , @pxpm ,

Not sure about this - let's see how popular the idea gets. If it's popular, and a lot of people use it, we could include it in the core, of course. However, the best place to start would probably be a custom field type - like @pxpm suggested we'll soon be working on a "community area" on our website, where developers can share bits of code with each other, and store them for later use. This would be a great addition to that.

Cheers!

[imcodingideas]

The issue with editor.js is that you need to support all types of attributes, what people copy and paste in. For me, it's not worth it.

[cdo9]

Hey,

I currently have a custom field in my project but it's not working well with other js. (I can't have multi-upload and my field at the same time).

Why is this field the best field backpack can add right now : People who write blogs can't write good html, and "tinymce" is a disaster. With editorJs you have clean json that you can render in front easily and have good html structure.

Here is a print of my field, with the json data that i save in my database.

I will be happy to share my "bad code" if you want.

I'm using it daily in various projects for me or for clients, and everyone loves it.

Thanks in advance, a multi-backer.

[cdo9]

https://github.com/Laravel-Backpack/CRUD/discussions/2222

Hey again, here is my editorjs custom field code :

<!-- textarea -->
@include('crud::fields.inc.wrapper_start')
<label>{!! $field['label'] !!}</label>
@include('crud::fields.inc.translatable_icon')

<div id="{!! $field['id'] !!}" style="border: 1px solid rgba(0,40,100,.12); padding: .375rem .75rem;"></div>
<textarea id="{!! $field['id'] !!}-input" name="{{ $field['name'] }}" @include('crud::fields.inc.attributes')>
{{ old(square_brackets_to_dots($field['name'])) ?? $field['value'] ?? $field['default'] ?? '' }}
</textarea>
{{-- HINT --}}
@if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
@endif
@include('crud::fields.inc.wrapper_end')

@if ($crud->fieldTypeNotLoaded($field))
    @php
        $crud->markFieldTypeAsLoaded($field);
    @endphp

    @push('crud_fields_styles')
        <!-- no styles -->
    @endpush

    @push('crud_fields_scripts')
        <script src="{{ mix('js/editorjs.js') }}" />
    @endpush
@endif

@push('crud_fields_scripts')
@endpush

And here is my JavaScript code (the first 92 lines are editorjs configs, and the other ones are repeating 3 times cause i need 3 fields, this part is really bad cause i can’t add more fields without adding more JS :(

import EditorJS from '@editorjs/editorjs';

import Alert from './editorjs-custom-tools/alert/alert';
import AttachesTool from '@editorjs/attaches'; // todo needs more configuration, see :
import Delimiter from '@editorjs/delimiter';
import DragDrop from 'editorjs-drag-drop';
import Checklist from '@editorjs/checklist';
import Header from 'editorjs-header-with-anchor';
import Hyperlink from 'editorjs-hyperlink';
import LinkTool from '@editorjs/link'; // todo needs more configuration, see : https://github.com/editor-js/link
//import List from './editorjs-custom-tools/list/list';
import List from '@editorjs/list'; //todo remove when ready cause we have a custom one
import Marker from '@editorjs/marker';
import Paragraph from 'editorjs-paragraph-with-alignment';
import Quote from '@editorjs/quote';
import ImageTool from '@editorjs/image'; // todo needs more configuration, see : https://github.com/editor-js/image
import Style from 'editorjs-style'
import Table from '@editorjs/table';
import TextSpoiler from 'editorjs-inline-spoiler-tool';
import Underline  from '@editorjs/underline';
import Undo  from 'editorjs-undo';
import Warning from '@editorjs/warning';
import EditorJSInspector from 'editorjs-inspector';
import Chapeau from './editorjs-custom-tools/chapeau/chapeau';

const editorSettings = {
    tools: {
        paragraph: {
            class: Paragraph,
            inlineToolbar: true,
        },
        header: {
            class: Header,
            inlineToolbar: true
        },
        chapeau: {
            class: Chapeau,
            inlineToolbar: true,
        },
        alert: {
            class: Alert,
            inlineToolbar: true,
            config: {
                defaultType: 'primary',
                messagePlaceholder: 'Enter something',
            },
        },
        delimiter: Delimiter,
        list: {
            class: List,
            inlineToolbar: true,
        },
        table: {
            class: Table,
            inlineToolbar: true,
            config: {
                rows: 2,
                cols: 3,
            },
        },
        image: {
            class: ImageTool,
        },
        quote: {
            class: Quote,
            inlineToolbar: true,
        },
        checklist: {
            class: Checklist,
            inlineToolbar: true,
        },

        // inline components
        link: {
            class: Hyperlink,
            config: {
                target: '_blank',
                rel: 'nofollow',
                availableTargets: ['_blank', '_self'],
                availableRels: ['author', 'noreferrer', 'alternate', 'author', 'help', 'license', 'next', 'prev',],
                validate: false,
            }
        },
        marker: {
            class: Marker,
        },
        underline: Underline,
        textSpolier: TextSpoiler,
        style: Style,
        editorJSInspector: EditorJSInspector,
    },
};

const editorEnInput = document.getElementById('editorjs-en-input');
const editorEn = new EditorJS({
    holder: 'editorjs-en',
    ...editorSettings,
    data: JSON.parse(editorEnInput.value),
    onReady: () => {
        new DragDrop(editorEn);
        //new Undo({ editorEn });
    },
    onChange: () => {
        editorEn.save().then((outputData) => {
            editorEnInput.value = JSON.stringify(outputData);
        }).catch((error) => {
            console.log('Saving failed: ', error)
        });
    },
});

const editorFrInput = document.getElementById('editorjs-fr-input');
const editorFr = new EditorJS({
    holder: 'editorjs-fr',
    ...editorSettings,
    data: JSON.parse(editorFrInput.value),
    onReady: () => {
        new DragDrop(editorFr);
        //new Undo({ editorFr });
    },
    onChange: () => {
        editorFr.save().then((outputData) => {
            editorFrInput.value = JSON.stringify(outputData);
        }).catch((error) => {
            console.log('Saving failed: ', error)
        });
    },
});

const editorPtInput = document.getElementById('editorjs-pt-input');
const editorPt = new EditorJS({
    holder: 'editorjs-pt',
    ...editorSettings,
    data: JSON.parse(editorPtInput.value),
    onReady: () => {
        new DragDrop(editorPt);
        //new Undo({ editorPt });
    },
    onChange: () => {
        editorPt.save().then((outputData) => {
            editorPtInput.value = JSON.stringify(outputData);
        }).catch((error) => {
            console.log('Saving failed: ', error)
        });
    },
});

[cdo9]

And last thing, when i have this field enabled i can't use other fields that use JavaScript :/

[tabacitu]

Thank you for sharing this @cdo9 🙏

[cdo9]

Hello, today i updated to Backpack 5 and with the new @loadOnce() directive i have no longer weird js bugs. My field is working fine now, i just need to figure out how to include multiple fields without tricks.

[pxpm]

If you want my suggestion, create a package with your custom field, it will gain visibility and you migth get some help fixing/finding bugs.
I migth pull the package someday and try to help you there if you are stuck with something. 👍