generated from spatie/package-skeleton-laravel
-
-
Notifications
You must be signed in to change notification settings - Fork 37
/
tiny-editor.blade.php
136 lines (128 loc) · 6.26 KB
/
tiny-editor.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<x-dynamic-component
:component="$getFieldWrapperView()"
:id="$getId()"
:label="$getLabel()"
:label-sr-only="$isLabelHidden()"
:helper-text="$getHelperText()"
:hint="$getHint()"
:hint-action="$getHintAction()"
:hint-color="$getHintColor()"
:hint-icon="$getHintIcon()"
:required="$isRequired()"
:state-path="$getStatePath()"
class="relative z-0"
>
<div
x-data="{ state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }}, initialized: false }"
x-init="(() => {
window.addEventListener('DOMContentLoaded', () => initTinymce());
$nextTick(() => initTinymce());
const initTinymce = () => {
if (window.tinymce !== undefined && initialized === false) {
tinymce.init({
target: $refs.tinymce,
language: '{{ $getInterfaceLanguage() }}',
skin: typeof theme !== 'undefined' ? theme : 'light',
content_css: typeof theme !== 'undefined' && theme === 'dark' ? 'dark' : 'default',
body_class: typeof theme !== 'undefined' && theme === 'dark' ? 'dark' : 'light',
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.getComponentFileAttachmentUrl('{{ $getStatePath() }}').then((url) => {
if (!url) {
failure('{{ __('Error uploading file') }}')
return
}
success(url)
})
})
},
automatic_uploads: true,
templates: {{ $getTemplate() }},
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();
}
});
},
{{ $getCustomConfigs() }}
});
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();
}
});
});
}
})()"
x-cloak
wire:ignore
>
@unless($isDisabled())
<input
id="tiny-editor-{{ $getId() }}"
type="hidden"
x-ref="tinymce"
placeholder="{{ $getPlaceholder() }}"
>
@else
<div
x-html="state"
@class([
'prose block w-full max-w-none rounded-lg border border-gray-300 bg-white p-3 opacity-70 shadow-sm transition duration-75',
'dark:prose-invert dark:border-gray-600 dark:bg-gray-700' => config(
'forms.dark_mode'
),
])
></div>
@endunless
</div>
</x-dynamic-component>
@once
@push('scripts')
<script src="{{ asset('vendor/filament-forms-tinyeditor/tinymce/tinymce.min.js') }}"></script>
@endpush
@endonce