tbmatuka / editorjsbundle Goto Github PK

symfony/config v5.1.3
symfony/dependency-injection v5.1.3
symfony/form v5.1.3
symfony/framework-bundle v5.1.3
symfony/http-foundation v5.1.3
symfony/http-kernel v5.1.3
symfony/options-resolver v5.1.3
symfony/property-access v5.1.3
symfony/routing v5.1.3
symfony/twig-bundle v5.1.3

            ->add(
                'content',
                EditorjsType::class,
                [
                    'label' => 'generic.content',
                ]
            )

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';

let editorjsToolsScoped = [];
if (typeof editorjsTools !== 'undefined') {
    // eslint-disable-next-line no-undef
    editorjsToolsScoped = editorjsTools;
}

editorjsToolsScoped.Header = Header;
editorjsToolsScoped.List = List;

let editorjsConfigsScoped = [];
if (typeof editorjsConfigs !== 'undefined') {
    // eslint-disable-next-line no-undef
    editorjsConfigsScoped = editorjsConfigs;
}

const editors = [];

async function editorjsSave(holderId) {
    const editorHolder = document.getElementById(holderId);
    const editorInput = document.getElementById(editorHolder.getAttribute('data-input-id'));
    const editor = editors[holderId];

    const savePromise = editor.save().then((outputData) => {
        editorInput.value = JSON.stringify(outputData);
    });

    await savePromise;
}

if (typeof editorjsConfigsScoped !== 'undefined') {
    editorjsConfigsScoped.forEach((config) => {
        if (typeof config.tools !== 'undefined') {
            // set tool classes
            Object.keys(config.tools).forEach((toolName) => {
                // eslint-disable-next-line no-param-reassign
                config.tools[toolName].class = editorjsToolsScoped[config.tools[toolName].className];
            });
        }

        // eslint-disable-next-line no-param-reassign,func-names
        config.onChange = async function () {
            await editorjsSave(this.holder);
        };

        const editorHolder = document.getElementById(config.holder);
        const editorForm = editorHolder.closest('form');

        if (!editorForm.hasEditorjsListener) {
            editorForm.addEventListener('submit', (event) => {
                event.preventDefault();

                const form = event.target;
                form.hasEditorjsListener = true;

                // save all editors in form
                const editorHolders = form.querySelectorAll('.editorjs-holder');
                const savePromises = [];
                editorHolders.forEach((holder) => {
                    savePromises.push(editorjsSave(holder.id));
                });

                Promise.all(savePromises).then(() => {
                    form.submit();
                });
            });
        }

        editors[config.holder] = new EditorJS(config);
    });
}

<div class="form-group"><label for="create_article_content" class="required">Content</label>      <input type="hidden" data-editorjs="editorjs_create_article_content" id="create_article_content" name="create_article[content]" required="required" value="[]" data-np-checked="1">
  <div id="editorjs_create_article_content" data-input-id="create_article_content" class="editorjs-holder editorjs-config-default"></div>

  <script>
    if (typeof editorjsConfigs === 'undefined') {
      var editorjsConfigs = [];
    }

    editorjsConfigs.push({"name":"default","initialBlock":"paragraph","placeholder":"Editor","tools":{"header":{"name":"header","className":"Header","config":{"something":true}}},"logLevel":"ERROR","holder":"editorjs_create_article_content"});
  </script>
</div>