[fix] Editor disappear in some situations

- Re-open model. - Switch locale using Spatie translatable plugin.
mohamedsabil83 · Sep 9, 2023 · 2e0b38c · 2e0b38c
1 parent 21e7b89
commit 2e0b38c
Showing 1 changed file with 74 additions and 79 deletions.
diff --git a/resources/views/tiny-editor.blade.php b/resources/views/tiny-editor.blade.php
@@ -7,93 +7,88 @@ class="relative z-0"
  x-data="{ state: $wire.entangle('{{ $getStatePath() }}'), initialized: false }"
  x-load-js="[@js(\Filament\Support\Facades\FilamentAsset::getScriptSrc($getLanguageId(), 'mohamedsabil83/filament-forms-tinyeditor'))]"
  x-init="(() => {
- window.addEventListener('DOMContentLoaded', () => initTinymce());
- $nextTick(() => initTinymce());
- const initTinymce = () => {
- if (window.tinymce !== undefined && initialized === false) {
- tinymce.init({
- target: $refs.tinymce,
- language: '{{ $getInterfaceLanguage() }}',
- language_url: 'https://cdn.jsdelivr.net/npm/[email protected]/langs5/{{ $getInterfaceLanguage() }}.min.js',
- toolbar_sticky: {{ $getToolbarSticky() ? 'true' : 'false' }},
- toolbar_sticky_offset: 64,
- skin: {
- light: 'oxide',
- dark: 'oxide-dark',
- system: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide',
- }[typeof theme === 'undefined' ? 'light' : theme],
- max_height: {{ $getMaxHeight() }},
- min_height: {{ $getMinHeight() }},
- menubar: {{ $getShowMenuBar() ? 'true' : 'false' }},
- plugins: ['{{ $getPlugins() }}'],
- toolbar: '{{ $getToolbar() }}',
- toolbar_mode: 'sliding',
- relative_urls: {{ $getRelativeUrls() ? 'true' : 'false' }},
- remove_script_host: {{ $getRemoveScriptHost() ? 'true' : 'false' }},
- convert_urls: {{ $getConvertUrls() ? 'true' : 'false' }},
- branding: false,
- images_upload_handler: (blobInfo, success, failure, progress) => {
- if (!blobInfo.blob()) return
+ $nextTick(() => {
+ tinymce.createEditor('tiny-editor-{{ $getId() }}', {
+ target: $refs.tinymce,
+ language: '{{ $getInterfaceLanguage() }}',
+ language_url: 'https://cdn.jsdelivr.net/npm/[email protected]/langs5/{{ $getInterfaceLanguage() }}.min.js',
+ toolbar_sticky: {{ $getToolbarSticky() ? 'true' : 'false' }},
+ toolbar_sticky_offset: 64,
+ skin: {
+ light: 'oxide',
+ dark: 'oxide-dark',
+ system: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'oxide-dark' : 'oxide',
+ }[typeof theme === 'undefined' ? 'light' : theme],
+ max_height: {{ $getMaxHeight() }},
+ min_height: {{ $getMinHeight() }},
+ menubar: {{ $getShowMenuBar() ? 'true' : 'false' }},
+ plugins: ['{{ $getPlugins() }}'],
+ toolbar: '{{ $getToolbar() }}',
+ toolbar_mode: 'sliding',
+ relative_urls: {{ $getRelativeUrls() ? 'true' : 'false' }},
+ remove_script_host: {{ $getRemoveScriptHost() ? 'true' : 'false' }},
+ convert_urls: {{ $getConvertUrls() ? 'true' : 'false' }},
+ branding: false,
+ images_upload_handler: (blobInfo, success, failure, progress) => {
+ if (!blobInfo.blob()) return
 
- $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, blobInfo.blob(), () => {
- $wire.getFormComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
- if (!url) {
- failure('{{ __('Error uploading file') }}')
- return
- }
- success(url)
- })
+ $wire.upload(`componentFileAttachments.{{ $getStatePath() }}`, blobInfo.blob(), () => {
+ $wire.getFormComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
+ if (!url) {
+ failure('{{ __('Error uploading file') }}')
+ return
+ }
+ success(url)
  })
- },
- automatic_uploads: true,
- templates: {{ $getTemplate() }},
- setup: function(editor) {
- if(!window.tinySettingsCopy) {
- window.tinySettingsCopy = [];
- }
- window.tinySettingsCopy.push(editor.settings);
+ })
+ },
+ automatic_uploads: true,
+ templates: {{ $getTemplate() }},
+ setup: function(editor) {
+ if(!window.tinySettingsCopy) {
+ window.tinySettingsCopy = [];
+ }
+ window.tinySettingsCopy.push(editor.settings);
 
-  editor.on('blur', function(e) {
-  state = editor.getContent()
-  })
+ editor.on('blur', function(e) {
+ state = editor.getContent()
+ })
 
-  editor.on('init', function(e) {
-  if (state != null) {
-  editor.setContent(state)
-  }
-  })
+ editor.on('init', function(e) {
+ if (state != null) {
+ editor.setContent(state)
+ }
+ })
 
-  editor.on('OpenWindow', function(e) {
-  target = e.target.container.closest('.filament-modal')
-  if (target) target.setAttribute('x-trap.noscroll', 'false')
-  })
+ editor.on('OpenWindow', function(e) {
+ target = e.target.container.closest('.filament-modal')
+ if (target) target.setAttribute('x-trap.noscroll', 'false')
+ })
 
-  editor.on('CloseWindow', function(e) {
-  target = e.target.container.closest('.filament-modal')
-  if (target) target.setAttribute('x-trap.noscroll', 'isOpen')
-  })
+ editor.on('CloseWindow', function(e) {
+ target = e.target.container.closest('.filament-modal')
+ if (target) target.setAttribute('x-trap.noscroll', 'isOpen')
+ })
 
-  function putCursorToEnd() {
-  editor.selection.select(editor.getBody(), true);
-  editor.selection.collapse(false);
-  }
+ 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();
- }
- });
- },
- {{ $getCustomConfigs() }}
- });
- initialized = true;
- }
- }
+ $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();
+ }
+ });
+ },
+ {{ $getCustomConfigs() }}
+ }).render();
+ });
 
  // 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