mohamedsabil83 / filament-forms-tinyeditor

A TinyMce Editor component for filament
MIT License
164 stars 37 forks source link

Uncaught SyntaxError: expected expression, got '}' #46

Closed thyseus closed 1 year ago

thyseus commented 1 year ago

Pacakge version v1.6.6 seems to introduce a bug (which i dont have in v1.6.5 !) :

Alpine Expression Error: expected expression, got '}'

Expression: "(() => {
            window.addEventListener('DOMContentLoaded', () => initTinymce());
            $nextTick(() => initTinymce());
            const initTinymce = () => {
                if (window.tinymce !== undefined && initialized === false) {
                    tinymce.init({
                        target: $refs.tinymce,
                        language: 'en',
                        skin: typeof theme != 'undefined' ? theme : 'light',
                        content_css: this.skin === 'dark' ? 'dark' : '',
                        max_height: 0,
                        menubar: true,
                        plugins: ['advlist autoresize codesample directionality emoticons fullscreen hr image imagetools link lists media table toc wordcount'],
                        toolbar: 'undo redo removeformat | formatselect fontsizeselect | bold italic | rtl ltr | alignjustify alignright aligncenter alignleft | numlist bullist | forecolor backcolor | blockquote table toc hr | image link media codesample emoticons | wordcount fullscreen',
                        toolbar_mode: 'sliding',
                        relative_urls: true,
                        remove_script_host: true,
                        convert_urls: true,
                        branding: false,
                        images_upload_handler: (blobInfo, success, failure, progress) => {
                            if (!blobInfo.blob()) return

                            $wire.upload(`componentFileAttachments.data.content`, blobInfo.blob(), () => {
                                $wire.getComponentFileAttachmentUrl('data.content').then((url) => {
                                    if (!url) {
                                        failure('Error uploading file')
                                        return
                                    }
                                    success(url)
                                })
                            })
                        },
                        automatic_uploads: true,
                        templates: [],
                        setup: function(editor) {
                            editor.on('blur', function(e) {
                                state = editor.getContent()
                            })

                            editor.on('init', function(e) {
                                if (state != null) {
                                    editor.setContent(state)
                                }
                            })

                            editor.on('OpenWindow', function(e) {
                                e.target.container.closest('.filament-modal').setAttribute('x-trap.noscroll', 'false')
                            })

                            editor.on('CloseWindow', function(e) {
                                e.target.container.closest('.filament-modal').setAttribute('x-trap.noscroll', 'isOpen')
                            })

                            function putCursorToEnd() {
                                editor.selection.select(editor.getBody(), true);
                                editor.selection.collapse(false);
                            }

                            $watch('state', function(newstate) {
                                // unfortunately livewire doesn't provide a way to 'unwatch' so this listener sticks
                                // around even after this component is torn down. Which means that we need to check
                                // that editor.container exists. If it doesn't exist we do nothing because that means
                                // the editor was removed from the DOM
                                if (editor.container && newstate !== editor.getContent()) {
                                    editor.resetContent(newstate || '');
                                    putCursorToEnd();
                                }
                            });
                        },
                        ...
                    });
                    initialized = true;
                }
            }

            // We initialize here because if the component is first loaded from within a modal DOMContentLoaded
            // won't fire and if we want to register a Livewire.hook listener Livewire.hook isn't available from
            // inside the once body
            if (!window.tinyMceInitialized) {
                window.tinyMceInitialized = true;
                $nextTick(() => {
                    Livewire.hook('element.removed', (el, component) => {
                        if (el.nodeName === 'INPUT' && el.getAttribute('x-ref') === 'tinymce') {
                            tinymce.get(el.id)?.remove();
                        }
                    });
                });
            }
        })()"
mohamedsabil83 commented 1 year ago

I guess fixed with #44 which shipped in v1.6.7. If still, you can re-open the issues

bernhardh commented 1 year ago

I am on v1.6.8 now, but getting the same issue.

Fixed it. Had to clear caches.