Skip to content

Add task description preview #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Wistlap merged 2 commits into from
Oct 28, 2025
Merged

Add task description preview #154

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebc1fe8
Resolve merge conflicts between PR #67 and commit 7970668
Yuki-jpn20 May 16, 2023
eed4ae2
Enable description preview in task edit view
bear-KU Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions app/views/tasks/_form.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,14 +99,39 @@
<%= form.text_field :content, class: "form-control", placeholder: "タスクの内容を入力してください", required: true %>
</div>

<div class="mb-4">
<%= form.label :description, "説明", class: "form-label fw-bold" %>
<%= form.text_area :description, class: "form-control", rows: 10, placeholder: "タスクの説明を入力してください" %>
<div class="tabs">
<input id="write" type="radio" name="tab_item" checked>
<label class="tab_item" for="write">Write</label>
<input id="preview" type="radio" name="tab_item">
<label class="tab_item" for="preview">Preview</label>
<div class="tab_content" id="write_content">
<%= form.text_area :description, class: "border-2 w-full", rows: 10, id: "write-area", placeholder: "タスクの説明を入力してください" %>
</div>
<div class="tab_content" id="preview_content">
<div style="height: 300px" class="overflow-y-scroll">
<div id="preview-area" class="markdown-body p-12 list-style-none">
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'p-12' class appears to be a Tailwind CSS utility class (padding: 3rem), while 'list-style-none' is not standard Tailwind syntax (should be 'list-none'). This mixing of frameworks and potential class name errors could cause unexpected styling behavior.

Suggested change
<div id="preview-area" class="markdown-body p-12 list-style-none">
<div id="preview-area" class="markdown-body p-12 list-none">

Copilot uses AI. Check for mistakes.
</div>
</div>
</div>
</div>

<div class="d-grid">
<%= form.submit "保存", class: "btn btn-danger" %>
</div>

<script>
document.getElementById('preview').onchange=function(){
const text = document.getElementById("write-area").value
const preview = document.getElementById("preview-area")
Comment on lines +124 to +125
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Missing semicolons at the end of statements on lines 123, 124, and 125. While JavaScript allows this through ASI (Automatic Semicolon Insertion), explicit semicolons are recommended for consistency, especially since semicolons are used elsewhere in the script (lines 126-132).

Suggested change
const text = document.getElementById("write-area").value
const preview = document.getElementById("preview-area")
const text = document.getElementById("write-area").value;
const preview = document.getElementById("preview-area");

Copilot uses AI. Check for mistakes.
const obj = {text: text};
const method = "POST";
const body = JSON.stringify(obj);
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);}
Comment on lines +123 to +133
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The preview innerHTML is set directly from the API response without sanitization, which could lead to XSS vulnerabilities if the markdown rendering doesn't properly escape HTML. Ensure the backend sanitizes the output or use textContent/safer DOM manipulation methods.

Copilot uses AI. Check for mistakes.
Comment on lines +123 to +133
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The entire inline script lacks proper indentation and formatting. The function body should be properly indented for readability and maintainability.

Suggested change
document.getElementById('preview').onchange=function(){
const text = document.getElementById("write-area").value
const preview = document.getElementById("preview-area")
const obj = {text: text};
const method = "POST";
const body = JSON.stringify(obj);
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);}
document.getElementById('preview').onchange = function() {
const text = document.getElementById("write-area").value;
const preview = document.getElementById("preview-area");
const obj = { text: text };
const method = "POST";
const body = JSON.stringify(obj);
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
fetch("/documents/api_markdown", { method, headers, body })
.then((res) => res.json())
.then((obj) => { preview.innerHTML = obj.text; })
.catch(console.error);
}

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The promise chain should be formatted across multiple lines for better readability. Additionally, the error handling with console.error doesn't provide user feedback when the preview fails to load.

Suggested change
fetch("/documents/api_markdown", {method, headers, body}).then((res)=> res.json()).then((obj) => {preview.innerHTML=obj.text}).catch(console.error);}
fetch("/documents/api_markdown", { method, headers, body })
.then((res) => res.json())
.then((obj) => {
preview.innerHTML = obj.text;
})
.catch((error) => {
console.error(error);
preview.innerHTML = '<div class="alert alert-danger">プレビューの読み込みに失敗しました。</div>';
});
}

Copilot uses AI. Check for mistakes.
</script>

<%= javascript_include_tag 'prevent_transition_in_editing' %>
<% end %>