diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index e806a032..6c94c194 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -504,3 +504,5 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1); } } } + +@import "new_editor"; diff --git a/app/assets/stylesheets/new_editor.scss b/app/assets/stylesheets/new_editor.scss new file mode 100644 index 00000000..73211303 --- /dev/null +++ b/app/assets/stylesheets/new_editor.scss @@ -0,0 +1,16 @@ +.new-editor { + .editor { + .menubar { + + label.btn { + margin-bottom: 0.3rem !important; + } + + .btn-group { + .btn { + margin-right: 0; + } + } + } + } +} diff --git a/app/javascript/etc/index.js b/app/javascript/etc/index.js index 482b78f6..d4b9f7a3 100644 --- a/app/javascript/etc/index.js +++ b/app/javascript/etc/index.js @@ -6,3 +6,4 @@ import './prosemirror' import './timezone' import './turbolinks-anchors' import './validation' +import './new_editor' diff --git a/app/javascript/etc/new_editor.js b/app/javascript/etc/new_editor.js new file mode 100644 index 00000000..d4b47ce8 --- /dev/null +++ b/app/javascript/etc/new_editor.js @@ -0,0 +1,12 @@ +import SuttyEditor from "@suttyweb/editor"; + +document.addEventListener("turbolinks:load", () => { + document.querySelectorAll(".new-editor").forEach((editorContainer) => { + new SuttyEditor({ + target: editorContainer, + props: { + textareaEl: editorContainer.querySelector("textarea"), + }, + }); + }); +}); diff --git a/app/models/metadata_new_content.rb b/app/models/metadata_new_content.rb new file mode 100644 index 00000000..da5ee7ab --- /dev/null +++ b/app/models/metadata_new_content.rb @@ -0,0 +1,4 @@ +# frozen_string_literal: true + +# Testear el nuevo editor +class MetadataNewContent < MetadataContent; end diff --git a/app/views/posts/attribute_ro/_new_content.haml b/app/views/posts/attribute_ro/_new_content.haml new file mode 100644 index 00000000..e6d9a274 --- /dev/null +++ b/app/views/posts/attribute_ro/_new_content.haml @@ -0,0 +1,3 @@ +%tr{ id: attribute } + %th= post_label_t(attribute, post: post) + %td{ lang: locale, dir: dir }= metadata.value diff --git a/app/views/posts/attributes/_new_content.haml b/app/views/posts/attributes/_new_content.haml new file mode 100644 index 00000000..34fc4e60 --- /dev/null +++ b/app/views/posts/attributes/_new_content.haml @@ -0,0 +1,9 @@ +.form-group + = label_tag "#{base}_#{attribute}", post_label_t(attribute, post: post) + = render 'posts/attribute_feedback', + post: post, attribute: attribute, metadata: metadata + + .new-editor{ id: attribute } + = text_area_tag "#{base}[#{attribute}]", metadata.value.html_safe, + dir: dir, lang: locale, + **field_options(attribute, metadata), class: 'd-none' diff --git a/package.json b/package.json index 1ead57ee..0f043f0e 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@rails/activestorage": "^6.1.3-1", "@rails/ujs": "^6.1.3-1", "@rails/webpacker": "5.2.1", - "@suttyweb/editor": "^0.1.0", + "@suttyweb/editor": "^0.1.2", "babel-loader": "^8.2.2", "circular-dependency-plugin": "^5.2.2", "commonmark": "^0.29.0", diff --git a/yarn.lock b/yarn.lock index 97f4941c..bc27c8c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1171,10 +1171,10 @@ resolved "https://registry.yarnpkg.com/@stimulus/webpack-helpers/-/webpack-helpers-1.1.1.tgz#eff60cd4e58b921d1a2764dc5215f5141510f2c2" integrity sha512-XOkqSw53N9072FLHvpLM25PIwy+ndkSSbnTtjKuyzsv8K5yfkFB2rv68jU1pzqYa9FZLcvZWP4yazC0V38dx9A== -"@suttyweb/editor@^0.1.0": - version "0.1.0" - resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.1.0.tgz#2dc451ceb7df39aaf2ab4c0372db177c4586014b" - integrity sha512-4P/lD3acOJM9iVo+c+OIf3yjA6NHuIVSNh782XfyDLGz8ZrJj7MEvpmJqiNHsqz7MT0gz5WHakM8GnU/C3bzXg== +"@suttyweb/editor@^0.1.2": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@suttyweb/editor/-/editor-0.1.2.tgz#ff2798e993a78a55d334d7927d1e7c558203b483" + integrity sha512-OeMIB5KaqNo8XD2gJi5oDBlhkjWcPsSwxz3Ae2YaLp+cBuAZV2hWp7MoQpGGeWHjcgsE01fXR8TqL8B3KqBSig== "@types/caseless@*": version "0.12.2"