bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use new default toolbar

Browse Source
This commit is contained in:
Jorge Manrubia
2025-05-23 12:40:29 +02:00
parent 0693617d83
commit 85f03b5bf0
7 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/actiontext-lexical.css
+45
View File
@@ -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);
}
}
}
app/assets/stylesheets/rich-text-content.css
+8 -1
View File
@@ -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;
app/helpers/rich_textarea_helper.rb
-29
View File
@@ -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
app/views/cards/comments/_new.html.erb
+1 -2
View File
@@ -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 %>
<span>Post this comment</span>
app/views/cards/comments/edit.html.erb
+1 -2
View File
@@ -8,8 +8,7 @@
<div class="comment__body rich-text-content txt-align-start">
<%= 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) %>
<div class="flex gap-half justify-start">
<%= form.button class: "btn btn--reversed", type: :submit do %>
<span>Save changes</span>
app/views/cards/container/_title.html.erb
-2
View File
@@ -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" } %>
</h1>
<div class="card__description rich-text-content margin-block-start-half margin-block-end">
<%= 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" } %>
</div>
app/views/cards/edit.html.erb
-3
View File
@@ -9,10 +9,7 @@
<% end %>
</h1>
<%= 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" } %>
</div>