Skip to content

Commit

Permalink
Bug 1476107 - Implement new Markdown editor widget with text formatti…
Browse files Browse the repository at this point in the history 
…ng toolbar and keyboard shortcuts
  • Loading branch information
@kyoshino
kyoshino committed Sep 1, 2024
1 parent 5cc68ec commit a591515
Show file tree
Hide file tree
Showing 35 changed files with 1,498 additions and 900 deletions.
3 changes: 0 additions & 3 deletions extensions/BMO/web/js/edit_bug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ window.addEventListener('DOMContentLoaded', () => {
var attachment_table = document.getElementById('attachment_table');
if (attachment_table)
attachment_table.style.width = comment_width;
var new_comment = document.getElementById('comment');
if (new_comment)
new_comment.style.width = comment_width;
}
$('#cab-review-gate-close')
.click(function(event) {
Expand Down
16 changes: 5 additions & 11 deletions extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,18 +159,18 @@
[% Hook.process('comment_action', 'bug_modal/activity_stream.html.tmpl') %]
[% IF user.id %]
[% IF user.can_tag_comments %]
<button type="button" class="tag-btn minor iconic" aria-label="Tag"
<button type="button" class="tag-btn ghost iconic" aria-label="Tag"
data-id="[% comment.id FILTER none %]" data-no="[% comment.count FILTER none %]">
<span class="icon" aria-hidden="true"></span>
</button>
[% END %]
<button type="button" class="reply-btn minor iconic" aria-label="Reply" [% 'disabled' IF !comment.body %]
<button type="button" class="reply-btn ghost iconic" aria-label="Reply" [% 'disabled' IF !comment.body %]
data-id="[% comment.id FILTER none %]" data-no="[% comment.count FILTER none %]"
data-reply-name="[% comment.author.name || comment.author.nick FILTER html %]">
<span class="icon" aria-hidden="true"></span>
</button>
[% END %]
<button type="button" class="change-spinner minor iconic" id="cs-[% comment.count FILTER none %]"
<button type="button" class="change-spinner ghost iconic" id="cs-[% comment.count FILTER none %]"
aria-label="Collapse" aria-expanded="true"
data-strings='{ "collapse_label": "Collapse", "expand_label": "Expanded" }'>
<span class="icon" aria-hidden="true"></span>
Expand Down Expand Up @@ -301,25 +301,19 @@
</div>
</div>
[% END %]
[% IF comment.is_markdown AND Param('use_markdown') %]
[% comment_tag = 'div' %]
[% ELSE %]
[% comment_tag = 'pre' %]
[% END %]

<[% comment_tag FILTER none %]
<div
class="comment-text [%= "markdown-body" IF comment.is_markdown %] [%= "bz_private" IF comment.is_private %]
[% "empty" IF comment.body == "" %]"
id="ct-[% comment.count FILTER none %]" data-comment-id="[% comment.id FILTER none %]"
[% IF comment.is_markdown +%] data-ismarkdown="true" [% END ~%]
[% IF comment.collapsed +%] style="display:none"[% END ~%]>
[%~ IF comment.body != "" ~%]
[%~ comment.body_full({ exclude_attachment => 1 }) FILTER renderMarkdown(bug, comment) ~%]
[%~ ELSIF comment.count == 0 ~%]
[%# Description (Comment 0) can be empty %]
<em>No description provided.</em>
[%~ END ~%]
</[% comment_tag FILTER none %]>
</div>
[% END %]

[%
Expand Down
1 change: 1 addition & 0 deletions extensions/BugModal/template/en/default/bug_modal/header.html.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
END;

generate_api_token = 1;
use_text_editor = 1;

# these aren't always defined
UNLESS bodyclasses.defined;
Expand Down
53 changes: 7 additions & 46 deletions extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,61 +35,22 @@
[% RETURN %]
[% END %]

<div id="comment-header">
<ul id="comment-tabs" role="tablist">
<li id="comment-edit-tab" data-focus="comment" role="tab" tabindex="0" aria-selected="true"
aria-controls="[% id_prefix FILTER html %]comment-edit-tabpanel">
[% IF mode == "create" %]
Description
[% ELSE %]
Add Comment
[% END %]
</li>
[%~ ~%]
<li id="comment-preview-tab" role="tab" tabindex="-1" aria-selected="false"
aria-controls="[% id_prefix FILTER html %]comment-preview-tabpanel">
Preview
<img id="preview-throbber" src="[% basepath FILTER none %]extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none">
</li>
</ul>
<div id="comment-tips">
[% IF Param('use_markdown') %]
<span id="comment-markdown-tip">
<a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Markdown</a> supported
</span>
&middot;
[% END %]
<span id="bugzilla-etiquette">
Follow the <a href="page.cgi?id=etiquette.html" target="_blank" tabindex="-1">Etiquette</a> and
<a href="page.cgi?id=bug-writing.html" target="_blank">[% terms.Bug %] Writing Guidelines</a>
</span>
</div>
<textarea id="comment" name="comment" rows="5" cols="80"
aria-label="[% mode == 'create' ? 'Description' : 'Add Comment' %]"
[%~ IF user.setting('ui_attach_long_paste') == 'on' +%] class="attach-long-paste"[% END %]
></textarea>

<div id="after-comment-commit-button">
[% IF user.is_insider && add_extras %]
<div id="add-comment-private"
title="Make comment visible only to members of the '[% Param('insidergroup') FILTER html %]' group"
>
<input type="checkbox" name="comment_is_private" id="add-comment-private-cb"
value="1" comment_id="[% comment.count FILTER none %]">
<label for="add-comment-private-cb" aria-label="Mark as Private">Private</label>
<label for="add-comment-private-cb" aria-label="Mark as Private">Make comment private</label>
</div>
[% END %]
</div>

<div id="[% id_prefix FILTER html %]comment-edit-tabpanel" class="comment-tabpanel" role="tabpanel"
aria-labelledby="comment-edit-tab">
<textarea rows="5" cols="80" name="comment" id="comment" aria-labelledby="comment-edit-tab"[% IF user.setting("ui_attach_long_paste") == "on" %] class="attach-long-paste"[% END %]>[% comment FILTER html %]</textarea>
</div>
<div id="[% id_prefix FILTER html %]comment-preview-tabpanel" class="comment-tabpanel" role="tabpanel"
aria-labelledby="comment-preview-tab" style="display:none">
[% IF Param('use_markdown') %]
[% comment_tag = 'div' %]
[% ELSE %]
[% comment_tag = 'pre' %]
[% END %]
<[% comment_tag FILTER none %] id="comment-preview" class="comment-text markdown-body"></[% comment_tag FILTER none %]>
</div>

<div id="after-comment-commit-button">
[% Hook.process("after_comment_commit_button", 'bug/edit.html.tmpl') %]

[%# this checkboxes are in tables to match the alignment of the
Expand Down
105 changes: 11 additions & 94 deletions extensions/BugModal/web/bug_modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,16 @@ input[type="number"] {
margin-bottom: 4px;
}

#after-comment-commit-button td {
padding: 0;
vertical-align: middle;
}

#add-comment-private {
display: flex;
align-items: center;
}

#needinfo_from_autocomplete {
width: auto;
}
Expand Down Expand Up @@ -641,15 +651,11 @@ input[type="number"] {
}

#att-overlay button.iconic {
padding: 0 !important;
width: 28px;
aspect-ratio: 1;
}

#att-overlay button.iconic .icon::before {
font-family: 'Material Icons';
font-size: 16px;
vertical-align: middle;
}

#att-overlay button[data-action="close"] .icon::before {
Expand Down Expand Up @@ -1024,11 +1030,6 @@ h3.change-name a {
color: inherit;
}

.comment-actions {
padding: 0 8px 0 0 !important;
vertical-align: middle;
}

.comment-private {
display: inline-block;
margin: 0 8px;
Expand All @@ -1040,31 +1041,6 @@ h3.change-name a {
white-space: nowrap;
}

.comment-actions button {
outline: 0;
margin: 0;
padding: 6px 8px;
line-height: 1;
}

.comment-actions button:not(:first-of-type) {
border-left-width: 1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.comment-actions button:not(:last-of-type) {
border-right-width: 1px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.comment-actions button.iconic .icon::before {
font-family: 'Material Icons';
font-size: 16px;
vertical-align: middle;
}

.comment-actions .tag-btn .icon::before {
content: '\E54E';
}
Expand Down Expand Up @@ -1270,61 +1246,14 @@ a.comment-tag-url {
margin-top: 20px;
}

#comment,
#comment-preview {
clear: both;
box-sizing: border-box !important;
margin: 0 0 0.5em;
padding: 12px;
#add-comment .text-editor {
width: 100%;
max-width: 1024px;
}

.autosized-comment {
max-height: 400px;
}

#comment-preview {
border: 1px solid var(--control-border-color);
}

#preview-throbber {
margin-left: 8px;
}

#comment-header {
display: flex;
align-items: center;
flex-wrap: wrap;
}

#comment-tips {
flex: auto;
text-align: right;
}

#comment-tabs {
margin: 0;
padding: 0 8px;
list-style: none;
}

#comment-tabs li {
outline: 0;
border-bottom: 4px solid transparent;
padding: 4px 8px;
}

#comment-tabs li[aria-selected="true"] {
color: var(--selected-tab-foreground-color);
border-color: var(--control-accent-color);
}

.preview-error {
color: var(--secondary-label-color);
font-style: italic;
}

/**
* controls
*/
Expand Down Expand Up @@ -1790,18 +1719,6 @@ a.lightbox-icon.markdown {
display: block;
}

#comment-tips {
order: 5;
margin: 8px;
width: 100%;
text-align: left;
}

#add-comment-private {
margin: 0 0 0 auto;
white-space: nowrap;
}

#new-comment-actions {
float: none;
}
Expand Down
Loading

0 comments on commit a591515

Please sign in to comment.