Remove conditions from editor

app/View/Form/Editor.php

@@ -18,7 +18,6 @@ class Editor extends Component
         public ?string $hint = null,
         public bool $required = false,
         public string $label = '',
-        public array $conditions = [],
     ) {
         $this->id = str()->uuid()->toString();
     }
@@ -26,7 +25,7 @@ class Editor extends Component
     public function render()
     {
         return <<<'HTML'
-            <div class="flex flex-col group {{$heightClass}}" x-data="">
+            <div class="flex flex-col group {{$heightClass}}">
                 @if ($label)
                 <x-form::label :required="$required">{{$label}}</x-form::label>
                 @endif
@@ -38,8 +37,7 @@ class Editor extends Component
                         group-[.size-default]:text-sm group-[.size-sm]:text-xs
                         group-[.size-default]:p-2 group-[.size-sm]:p-1
                         " @updated="$wire.{{$attributes->wire('model')->value}} = $event.detail" x-bind="editor"x-data="{
-                            conditions: @js($conditions),
+                            value: $wire.{{$attributes->wire('model')->value}},
-                            value: $wire.{{$attributes->wire('model')->value}}
                         }" id="{{$id}}" {{$attributes}}></div>
                     <x-ui::errors :for="$name" />
                     @if($hint)

resources/livewire-js/editor.js

@@ -5,114 +5,11 @@ import Paragraph from '@editorjs/paragraph';
 import NestedList from '@editorjs/nested-list';
 import Alert from 'editorjs-alert';
 
-class ConditionTune {
-    constructor({api, data, config, block}) {
-        this.api = api;
-        this.data = data || {
-            mode: 'all',
-            ifs: [],
-        };
-        this.config = config;
-        this.block = block;
-        this.wrapper = null;
-    }
-
-    static get isTune() {
-        return true;
-    }
-
-    wrap(blockContent) {
-        this.wrapper = document.createElement('div');
-
-        var tooltip = document.createElement('div');
-        tooltip.setAttribute('data-tooltip', '');
-
-        var content = document.createElement('div');
-        content.setAttribute('data-content', '');
-
-        content.appendChild(blockContent);
-
-        this.wrapper.appendChild(tooltip);
-        this.wrapper.appendChild(content);
-
-        this.styleWrapper();
-
-        return this.wrapper;
-    }
-
-    hasData() {
-        return this.data.ifs.length > 0;
-    }
-
-    styleWrapper() {
-        if (this.hasData()) {
-            this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-100 rounded';
-            this.wrapper.querySelector('[data-tooltip]').className =
-                'mt-1 inline-block tracking-wider font-semibold ml-2 mr-2 px-2 py-1 items-center text-xs leading-none bg-blue-100 text-blue-900 rounded-t-lg';
-            this.wrapper.querySelector('[data-tooltip]').innerHTML = this.descriptionName();
-        } else {
-            this.wrapper.querySelector('[data-content]').className = '';
-            this.wrapper.querySelector('[data-tooltip]').className = '';
-            this.wrapper.querySelector('[data-tooltip]').innerHTML = '';
-        }
-    }
-
-    descriptionName() {
-        return (
-            'Bedingung ' +
-            this.data.ifs
-                .map((i) => {
-                    var parts = [i.field];
-
-                    if (i.comparator === 'isEqual' || i.comparator === 'isIn') {
-                        parts.push('=');
-                    }
-
-                    if (i.comparator === 'isNotEqual' || i.comparator === 'isNotIn') {
-                        parts.push('≠');
-                    }
-
-                    if (typeof i.value === 'string') {
-                        parts.push(i.value);
-                    }
-
-                    if (Array.isArray(i.value)) {
-                        parts.push(i.value.join(', '));
-                    }
-
-                    if (typeof i.value === 'boolean') {
-                        parts.push(i.value ? 'An' : 'Aus');
-                    }
-
-                    return parts.join(' ');
-                })
-                .join(', ')
-        );
-    }
-
-    render() {
-        return {
-            label: 'Bedingungen',
-            closeOnActivate: true,
-            toggle: true,
-            onActivate: async () => {
-                this.data = await openPopup(this.data);
-                this.styleWrapper();
-                this.block.dispatchChange();
-            },
-        };
-    }
-
-    save() {
-        return this.data;
-    }
-}
-
 export default {
     'editor': null,
     'value': null,
 
-    'x-init': async function () {
+    'x-init': function () {
         var tools = {
             paragraph: {
                 class: Paragraph,
@@ -147,81 +44,17 @@ export default {
             },
         };
 
-        var tunes = [];
-
-        // if (props.conditions) {
-        //     tools.condition = {
-        //         class: ConditionTune,
-        //     };
-        //     tunes.push('condition');
-        // }
-
         this.editor = new EditorJS({
             placeholder: '',
             holder: this.$el.getAttribute('id'),
             minHeight: 0,
             defaultBlock: 'paragraph',
             data: this.value,
-            tunes: tunes,
             tools: tools,
             onChange: debounce(async (api, event) => {
                 const data = await this.editor.save();
                 this.$dispatch('updated', data);
             }, 200),
-            onPopup: () => {
-                console.log('opened');
-            },
         });
-        await this.editor.isReady;
     },
 };
-
-// const props = defineProps({
-//     required: {
-//         type: Boolean,
-//         default: false,
-//     },
-//     size: {
-//         type: String,
-//         default: () => 'base',
-//     },
-//     rows: {
-//         type: Number,
-//         default: () => 4,
-//     },
-//     id: {
-//         type: String,
-//         required: true,
-//     },
-//     conditions: {
-//         required: false,
-//         type: Boolean,
-//         default: () => false,
-//     },
-//     hint: {
-//         type: String,
-//         default: () => '',
-//     },
-//     modelValue: {
-//         default: undefined,
-//     },
-//     label: {
-//         type: String,
-//         default: () => '',
-//     },
-// });
-
-async function openPopup(data) {
-    return new Promise((resolve, reject) => {
-        new Promise((innerResolve, innerReject) => {
-            condition.value = {
-                resolve: innerResolve,
-                reject: innerReject,
-                data: data,
-            };
-        }).then((data) => {
-            resolve(data);
-            condition.value = null;
-        });
-    });
-}