<%= render component_tag(x: {
data: x_data("appSlideEditor", alpine_props),
":class": "{ready}",
"@direct-upload:error": "directUploadError",
}) do %>
<%= form_with(**form_args(
class: "editor-form",
"x-ref": "form",
"@turbo:submit-end": "submitEnd",
"@turbo:fetch-request-error": "submitError",
"@direct-uploads:end": "save"
)) do |f| %>
<%= f.hidden_field(layout_name, **layout_options, "x-model": "layout") if layout? %>
<%= f.file_field(thumbnail_name, accept: "image/*", class: "editor-thumbnail-file", "x-ref": "thumbnail") if thumbnail? %>
<%= coco_toolbar do |toolbar| %>
<% toolbar.with_section do |section| %>
<% if bg_color? %>
<% section.with_color_picker_button(
input_name: bg_color_name,
selected: bg_color_value,
form_builder: f,
wrapper: {
data: {
role: "bg-color-picker"
},
x: {
modelable: "selectedColor",
model: "bgColor"
}
}
) do |button| %>
<% button.with_picker %>
<% button.with_text { "Background color" } %>
<% button.with_icon do %>
<% end %>
<% end %>
<% end %>
<% if bg_image? %>
<% section.with_image_picker_button(
icon: :image_plus,
input_name: bg_image_name,
src: bg_image_value,
direct_upload: bg_image_options[:direct_upload],
form_builder: f,
wrapper: {
data: {
role: "bg-image-picker"
},
x: {
modelable: "selectedImage",
model: "bgImage"
}
}
) do |button| %>
<% button.with_picker do |picker| %>
<% picker.with_blank_state_text do %>
Drag a jpg, png or gif onto the slide area...or...
<% end %>
<% end %>
Background image
<% end %>
<% end %>
<% if text_color? %>
<% section.with_color_picker_button(
input_name: text_color_name,
selected: text_color_value,
form_builder: f,
wrapper: {
data: {
role: "text-color-picker"
},
x: {
modelable: "selectedColor",
model: "textColor"
}
}
) do |button| %>
<% button.with_picker %>
<% button.with_text { "Text color" } %>
<% button.with_icon do %>
<% end %>
<% end %>
<% end %>
<% end %>
<% toolbar.with_section do |section| %>
<% section.with_button(
icon: :undo_2,
click: "history.undo",
tooltip: "Undo",
theme: :text_secondary,
disabled: true,
x: { "effect": "disabled = !history.undoable" },
data: {
role: "undo"
}
) %>
<% section.with_button(
icon: :redo_2,
click: "history.redo",
tooltip: "Redo",
theme: :text_secondary,
disabled: true,
x: { "effect": "disabled = !history.redoable" },
data: {
role: "redo"
}
) %>
<% section.with_button(
theme: :positive,
icon: :check,
collapsible: false,
type: "submit",
disabled: true,
data: {
role: "save"
},
x: {
"@click.stop.prevent": "if(!loading) save()",
"effect": "loading = saving; disabled = !history.undoable",
":class": "{'editor-saving': saving}"
}
) do |button| %>
<% button.with_state(:loading, text: "Saving...") %>
Save
<% end %>
<% end %>
<% end %>
<%= coco_editable_slide(
**slide_args,
data: {
role: "slide"
},
x: {
":style": "slideStyles",
":class": "slideClasses",
}
) do |slide| %>
<% if title? %>
<% slide.with_title do %>
<%= coco_seamless_textarea(
name: title_name,
multiline: false,
form_builder: f,
**title_options,
wrapper: {
data: {
role: "title-editor"
},
x: {
modelable: "value",
model: "title"
}
}
) %>
<% end %>
<% end %>
<% if text_1? %>
<% slide.with_text_1 do %>
<%= coco_seamless_textarea(
name: text_1_name,
multiline: true,
form_builder: f,
**text_1_options,
wrapper: {
data: {
role: "text-1-editor"
},
x: {
modelable: "value",
model: "text1"
}
}
) %>
<% end %>
<% end %>
<% end %>
<% if content %>
<%# Any additional fields required %>
<%= content %>
<% end %>
<% end %>
<% if thumbnail? %>
<%# Slide used for thumbnail generation %>
<%= coco_editable_slide(**slide_args) do |slide| %>
<% if title? %>
<% slide.with_title do %>
<% end %>
<% end %>