From 85f03b5bf0c186cebf133a3df80080a30f100591 Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Fri, 23 May 2025 12:40:29 +0200 Subject: [PATCH] Use new default toolbar --- app/assets/stylesheets/actiontext-lexical.css | 45 +++++++++++++++++++ app/assets/stylesheets/rich-text-content.css | 9 +++- app/helpers/rich_textarea_helper.rb | 29 ------------ app/views/cards/comments/_new.html.erb | 3 +- app/views/cards/comments/edit.html.erb | 3 +- app/views/cards/container/_title.html.erb | 2 - app/views/cards/edit.html.erb | 3 -- 7 files changed, 55 insertions(+), 39 deletions(-) delete mode 100644 app/helpers/rich_textarea_helper.rb diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css index 182f94f1c..0b2990209 100644 --- a/app/assets/stylesheets/actiontext-lexical.css +++ b/app/assets/stylesheets/actiontext-lexical.css @@ -13,3 +13,48 @@ lexical-editor { border: 2px solid blue; } } + +lexical-toolbar { + background-color: inherit; + border-block-end: 1px solid var(--color-ink-medium); + border-radius: 0; + color: currentColor; + display: inline-flex; + font-size: inherit; + max-inline-size: 100%; + overflow-x: auto; + padding: 0.2em; + + button, label { + aspect-ratio: 4/3; + appearance: none; + background-color: transparent; + block-size: 2em; + border: none; + border-radius: 0.5em; + color: currentColor; + cursor: pointer; + display: grid; + font-size: inherit; + inline-size: auto; + place-items: center; + transition: background-color 300ms ease; + + svg { + -webkit-touch-callout: none; + block-size: 0.9em; + fill: currentColor; + grid-area: 1/1; + inline-size: auto; + user-select: none; + } + + &:is(:focus, :hover) { + background-color: var(--color-ink-lighter); + } + + &:is(:active) { + background-color: var(--color-selected); + } + } +} diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index b10aa1a8f..86b1d18da 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -72,7 +72,10 @@ :is(blockquote, .quote) { font-style: italic; - margin: 0 3ch; + margin: 1ch 3ch; + border-inline-start: 0.25rem solid var(--color-ink-lighter); + margin-inline: 0; + padding: 0.5rem 1rem; :is(p) { hyphens: none; @@ -127,6 +130,10 @@ } /* Code */ + code[data-language] { + display: block; + } + code:not([data-language]) { background-color: #f5f5f5; border: 1px solid #e0e0e0; diff --git a/app/helpers/rich_textarea_helper.rb b/app/helpers/rich_textarea_helper.rb deleted file mode 100644 index c6651ac2e..000000000 --- a/app/helpers/rich_textarea_helper.rb +++ /dev/null @@ -1,29 +0,0 @@ -module RichTextareaHelper - def rich_textarea_toolbar(id = "editor-toolbar") - content_tag("lexical-toolbar", id: id) do - safe_join([ - # Inline formatting - rich_textarea_toolbar_button("Bold", "bold"), - rich_textarea_toolbar_button("Italic", "italic"), - rich_textarea_toolbar_button("Link", "link"), - - # Block-level formatting - rich_textarea_toolbar_button("Heading", "formatElement", data: { payload: "h2" }), - rich_textarea_toolbar_button("Subheading", "formatElement", data: { payload: "h3" }), - rich_textarea_toolbar_button("Code Block", "insertCodeBlock"), - - # Lists - rich_textarea_toolbar_button("• Bullet List", "insertUnorderedList"), - rich_textarea_toolbar_button("1. Numbered List", "insertOrderedList"), - - # Attachments - rich_textarea_toolbar_button("Upload Attachment", "uploadAttachments") - ]) - end - end - - def rich_textarea_toolbar_button(label, command, data: {}, **properties) - data[:command] = command - content_tag(:button, label, type: "button", data: data, **properties) - end -end diff --git a/app/views/cards/comments/_new.html.erb b/app/views/cards/comments/_new.html.erb index ec3fa2e8b..a74f01712 100644 --- a/app/views/cards/comments/_new.html.erb +++ b/app/views/cards/comments/_new.html.erb @@ -9,8 +9,7 @@ data: { controller: "form paste local-save", local_save_key_value: "comment-#{card.id}", action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %> - <%= rich_textarea_toolbar "editor-toolbar" %> - <%= form.rich_textarea :body, class: "input comment__input", toolbar: "editor-toolbar", required: true, placeholder: new_comment_placeholder(card), + <%= form.rich_textarea :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(card), data: { local_save_target: "input", action: "house-md:change->local-save#save turbo:morph-element->local-save#restoreContent" } %> <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %> Post this comment diff --git a/app/views/cards/comments/edit.html.erb b/app/views/cards/comments/edit.html.erb index 4a28c1069..2a150347b 100644 --- a/app/views/cards/comments/edit.html.erb +++ b/app/views/cards/comments/edit.html.erb @@ -8,8 +8,7 @@
<%= form_with model: [ @card, @comment ], class: "flex flex-column gap full-width", data: { controller: "form paste", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %> - <%= rich_textarea_toolbar "editor-toolbar" %> - <%= form.rich_textarea :body, class: "input comment__input", toolbar: "editor-toolbar", required: true, autofocus: true, placeholder: new_comment_placeholder(@card) %> + <%= form.rich_textarea :body, class: "input comment__input", required: true, autofocus: true, placeholder: new_comment_placeholder(@card) %>
<%= form.button class: "btn btn--reversed", type: :submit do %> Save changes diff --git a/app/views/cards/container/_title.html.erb b/app/views/cards/container/_title.html.erb index 424741f5c..837356fb3 100644 --- a/app/views/cards/container/_title.html.erb +++ b/app/views/cards/container/_title.html.erb @@ -18,9 +18,7 @@ data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" } %>
- <%= rich_textarea_toolbar "editor-toolbar" %> <%= form.rich_textarea :description, class: "input input--textarea full-width borderless txt-align-start card-field__description", - toolbar: "the-toolbar", placeholder: "Add some notes, context, pictures, or video about this…", data: { action: "house-md:change->auto-save#change focusout->auto-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %>
diff --git a/app/views/cards/edit.html.erb b/app/views/cards/edit.html.erb index 8e15452d7..01a4d6b3c 100644 --- a/app/views/cards/edit.html.erb +++ b/app/views/cards/edit.html.erb @@ -9,10 +9,7 @@ <% end %> - <%= rich_textarea_toolbar "editor-toolbar" %> - <%= form.rich_textarea :description, class: "input input--textarea full-width borderless txt-align-start card-field__description", - toolbar: "editor-toolbar", placeholder: "Add some notes, context, pictures, or video about this…", data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } %>