Merge branch 'issue-15068' of 0xacab.org:sutty/sutty into issue-15068

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});

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,
+        },
+      });
+  }
+}

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'

app/javascript/etc/new_editor.js

@@ -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"),
-      },
-    });
-  });
-});

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' })

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'