diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 350c4aaa..6efb5ab8 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -15,10 +15,17 @@ $colors: ( $custom-file-text: ( en: "Browse", es: "Buscar archivo", - pt: "Buscar arquivo", + pt: "Buscar ficheiro", pt-BR: "Buscar arquivo" ); +$custom-file-text-replace: ( + en: "Replace file", + es: "Reemplazar archivo", + pt: "substituir ficheiro", + pt-BR: "substituir arquivo" +); + // Redefinir variables de Bootstrap $primary: $magenta; $secondary: $black; @@ -51,6 +58,16 @@ $sizes: ( @import "bootstrap"; @import "editor"; +.custom-file-input { + &.replace-image { + @each $lang, $value in $custom-file-text-replace { + &:lang(#{$lang}) ~ .custom-file-label::after { + content: $value; + } + } + } +} + @each $color, $rgb in $theme-colors { .#{$color} { color: var(--#{$color}); diff --git a/app/javascript/controllers/new_editor_controller.js b/app/javascript/controllers/new_editor_controller.js new file mode 100644 index 00000000..82af0fa9 --- /dev/null +++ b/app/javascript/controllers/new_editor_controller.js @@ -0,0 +1,18 @@ +import { Controller } from "@hotwired/stimulus"; +import SuttyEditor from "@suttyweb/editor"; + +import "@suttyweb/editor/dist/style.css"; + +export default class extends Controller { + static targets = ["textarea"]; + + connect() { + this.editor = + new SuttyEditor({ + target: this.element, + props: { + textareaEl: this.textareaTarget, + }, + }); + } +} diff --git a/app/javascript/etc/index.js b/app/javascript/etc/index.js index 641d8085..7dd3671b 100644 --- a/app/javascript/etc/index.js +++ b/app/javascript/etc/index.js @@ -4,5 +4,4 @@ import './input-tag' import './prosemirror' import './timezone' import './turbolinks-anchors' -import './new_editor' import './htmx_abort' diff --git a/app/javascript/etc/new_editor.js b/app/javascript/etc/new_editor.js deleted file mode 100644 index dbc87bbc..00000000 --- a/app/javascript/etc/new_editor.js +++ /dev/null @@ -1,14 +0,0 @@ -import SuttyEditor from "@suttyweb/editor"; - -import "@suttyweb/editor/dist/style.css"; - -document.addEventListener("turbolinks:load", () => { - document.querySelectorAll(".new-editor").forEach((editorContainer) => { - new SuttyEditor({ - target: editorContainer, - props: { - textareaEl: editorContainer.querySelector("textarea"), - }, - }); - }); -}); diff --git a/app/views/posts/attributes/_image.haml b/app/views/posts/attributes/_image.haml index 689a32af..aa5f2038 100644 --- a/app/views/posts/attributes/_image.haml +++ b/app/views/posts/attributes/_image.haml @@ -21,7 +21,7 @@ .custom-file = file_field(*field_name_for(base, attribute, :path), **field_options(attribute, metadata, required: (metadata.required && !metadata.path?)), - class: "custom-file-input #{invalid(post, attribute)}", + class: ['custom-file-input', invalid(post, attribute), ('replace-image' if metadata.static_file)].compact.join(' '), accept: ActiveStorage.web_image_content_types.join(','), lang: locale, data: { 'file-preview-target': 'input', action: 'file-preview#update' }) diff --git a/app/views/posts/attributes/_new_content.haml b/app/views/posts/attributes/_new_content.haml index cbdf8f94..bc3d1cb1 100644 --- a/app/views/posts/attributes/_new_content.haml +++ b/app/views/posts/attributes/_new_content.haml @@ -3,7 +3,7 @@ = render 'posts/attribute_feedback', post: post, attribute: attribute, metadata: metadata - .new-editor.content{ id: attribute } + .new-editor.content{ id: attribute, data: { controller: 'new-editor' } } = text_area_tag "#{base}[#{attribute}]", metadata.to_s.html_safe, - dir: dir, lang: locale, + dir: dir, lang: locale, 'data-new-editor-target': 'textarea', **field_options(attribute, metadata), class: 'd-none'