[Decomment] 削除線の del tag (strikethrough) 対応

dbflute-engine/embedded/templates/doc/html/datamodel.vm

@@ -440,20 +440,28 @@ pre.spolicyviodisp {
 	font-weight: bold;
 	color: #1a73e8;
 }
+.decomment-editor {
+	margin-top: 10px;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	overflow: hidden;
+	transition: border-color 0.2s;
+}
+.decomment-editor:focus-within {
+	border-color: #709dff;
+}
 .decommentinput {
 	display: block;
 	width: 100%;
-	margin-top: 10px;
 	padding: 8px;
 	font-size: 12px;
-	border: 1px solid #ddd;
-	border-radius: 8px;
+	border: none;
+	border-radius: 0;
 	box-sizing: border-box;
-	transition: border-color 0.2s;
+	resize: vertical;
 }
 .decommentinput:focus {
 	outline: none;
-	border-color: #709dff;
 }
 .decomment-alias-input-area {
 	margin-top: 20px;
@@ -526,6 +534,31 @@ pre.spolicyviodisp {
 .decommentmodal-close-btn:hover {
 	background-color: #f0f0f0;
 }
+.decomment-toolbar {
+	display: flex;
+	gap: 4px;
+	padding: 2px 6px;
+	background-color: #f6f8fa;
+	border-bottom: 1px solid #ddd;
+}
+.decomment-toolbar-btn {
+	width: 22px;
+	height: 22px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	background: transparent;
+	cursor: pointer;
+	font-size: 11px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color 0.15s, border-color 0.15s;
+	padding: 0;
+}
+.decomment-toolbar-btn:hover {
+	background-color: #eaeef2;
+	border-color: #ddd;
+}
 .decomment-user-input {
 	display: none;
 }
@@ -1001,7 +1034,12 @@ ${schemaPolicyDisplay.policyMessageHtmlPreText}
 	<div class="decommentmodalcontent">
 		<div id="decomment-close" class="decommentmodal-close-btn"><span>x</span></div>
 		<p>Input the new comment of <span id="decomment-modal-column-info" class="decomment-target-name"></span></p>
-		<textarea id="decomment-input" class="decommentinput" rows="10"></textarea>
+		<div class="decomment-editor">
+			<div class="decomment-toolbar">
+				<button type="button" class="decomment-toolbar-btn" id="decomment-toolbar-strikethrough" title="Strikethrough (~~text~~)"><s>S</s></button>
+			</div>
+			<textarea id="decomment-input" class="decommentinput" rows="11"></textarea>
+		</div>
 		<div class="decomment-alias-input-area">
 			<label for="decomment-alias-input" class="decomment-alias-label">Alias:</label>
 			<input type="text" id="decomment-alias-input" class="decomment-alias-input"/>
@@ -1577,6 +1615,17 @@ var DecommentUtil = new function(){
 		var result = decomment.replace(/(?:dfalias|shalias):\s*\{[^}]*\}\s*\n?/g, '');
 		// remove leading <br> to prevent empty line when opening in plain schema html
 		return result.replace(/^<br\s*\/?>/i, '').trim();
+	},
+	/**
+	 * Render strikethrough markdown syntax (~~text~~) as HTML del tags for display.
+	 * @param {string} string - decomment text where text wrapped in ~~ is the strikethrough target (e.g. ~~foo~~ renders foo as strikethrough)
+	 * @returns {string} text with ~~text~~ converted to <del>text</del>
+	 */
+	this.renderStrikethrough = function(string) {
+		if (!string) {
+			return string;
+		}
+		return string.replace(/~~(.+?)~~/g, '<del>$1</del>');
 	}
 }
 
@@ -2119,7 +2168,7 @@ PickupTableProperty.prototype = {
 			var decomment = this.decomments[key];
 			// strip dfalias:{} or shalias:{} from display
 			var cleanBody = DecommentUtil.removeAliasFromDecomment(decomment.body);
-			displayComment += cleanBody;
+			displayComment += DecommentUtil.renderStrikethrough(cleanBody);
 			if (this.isConflict() && decomment.pieceGitBranch) {
 				displayComment += '\n=======' + decomment.pieceGitBranch + ' (' + decomment.pieceOwner + ')';
 				if (key < commentCount - 1) {
@@ -2164,11 +2213,15 @@ PickupTableProperty.prototype = {
 	 * @return {string} display html comment
 	 */
 	getDisplayHtmlComment: function() {
-		var child = this.selectTargetHtmlElements()[0].childNodes[0];
-		if (child != null && child.nodeName === "#text") {
-			return child.nodeValue.trim();
+		var element = this.selectTargetHtmlElements()[0];
+		if (!element) {
+			return "";
 		}
-		return ""
+		var html = element.innerHTML.replace(/<span>@author\([^)]*\)<\/span>/g, '').trim();
+		if (html === '&nbsp;') {
+			return '';
+		}
+		return html.replace(/<del>([\s\S]+?)<\/del>/g, '~~$1~~');
 	},
 
 	/**
@@ -2360,7 +2413,7 @@ PickupColumnProperty.prototype = {
 			var decomment = this.decomments[key];
 			// strip dfalias:{} or shalias:{} from display
 			var cleanBody = DecommentUtil.removeAliasFromDecomment(decomment.body);
-			displayComment += cleanBody;
+			displayComment += DecommentUtil.renderStrikethrough(cleanBody);
 			if (this.isConflict() && decomment.pieceGitBranch) {
 				displayComment += '\n=======' + decomment.pieceGitBranch + ' (' + decomment.pieceOwner + ')';
 				if (key < commentCount - 1) {
@@ -2402,11 +2455,15 @@ PickupColumnProperty.prototype = {
 	 * @return {string} display html comment
 	 */
 	getDisplayHtmlComment: function() {
-		var child = this.selectTargetHtmlElement().childNodes[0];
-		if (child != null && child.nodeName === "#text") {
-			return child.nodeValue.trim();
+		var element = this.selectTargetHtmlElement();
+		if (!element) {
+			return "";
+		}
+		var html = element.innerHTML.replace(/<span>@author\([^)]*\)<\/span>/g, '').trim();
+		if (html === '&nbsp;') {
+			return '';
 		}
-		return ""
+		return html.replace(/<del>([\s\S]+?)<\/del>/g, '~~$1~~');
 	},
 
 	/**
@@ -2507,6 +2564,50 @@ PickupColumnProperty.prototype = {
 //             /\
 //
 // _/_/_/_/_/_/_/_/
+/**
+ * Apply formatting syntax around selected text in a textarea.
+ * If no text is selected, inserts the syntax markers and places the cursor between them.
+ * @param {HTMLTextAreaElement} textarea - the textarea element containing the text to format
+ * @param {string} syntax - the wrapping marker to apply around the selected text (e.g. '~~' for strikethrough)
+ */
+function applyFormatting(textarea, syntax) {
+	var start = textarea.selectionStart;
+	var end = textarea.selectionEnd;
+	var selectedText = textarea.value.substring(start, end);
+
+	// focus first: execCommand requires the textarea to be focused to know where to act
+	textarea.focus();
+	if (selectedText.length === 0) {
+		// no selection: insert empty markers and place cursor between them (e.g. "~~~~" -> cursor in middle)
+		document.execCommand('insertText', false, syntax + syntax);
+		textarea.setSelectionRange(start + syntax.length, start + syntax.length);
+	} else {
+		var lines = selectedText.split('\n');
+		// toggle off only if every non-empty line is already wrapped
+		var allWrapped = lines.every(function(line) {
+			return line.length === 0 || (line.startsWith(syntax) && line.endsWith(syntax) && line.length > syntax.length * 2);
+		});
+		if (allWrapped) {
+			// already wrapped on all lines: strip markers from each line individually
+			var unwrapped = lines.map(function(line) {
+				return line.length === 0 ? line : line.slice(syntax.length, -syntax.length);
+			}).join('\n');
+			document.execCommand('insertText', false, unwrapped);
+			textarea.setSelectionRange(start, start + unwrapped.length);
+		} else {
+			// not wrapped: apply markers to each non-empty line individually, skipping already-wrapped lines
+			// execCommand is used instead of textarea.value= to preserve the browser's native undo stack (Cmd+Z)
+			var wrapped = lines.map(function(line) {
+				if (line.length === 0) { return line; }
+				if (line.startsWith(syntax) && line.endsWith(syntax) && line.length > syntax.length * 2) { return line; }
+				return syntax + line + syntax;
+			}).join('\n');
+			document.execCommand('insertText', false, wrapped);
+			textarea.setSelectionRange(start, start + wrapped.length);
+		}
+	}
+}
+
 /**
  * @author deco
  * @author cabos
@@ -2542,6 +2643,7 @@ Decomment.prototype = {
 		} else { // #plain_opening
 			this.reflectEmbeddedPickup();
 		}
+		this.setupFormattingToolbar();
 	},
 
 	/**
@@ -2896,6 +2998,24 @@ Decomment.prototype = {
 		return previousElement.value;
 	},
 
+	/**
+	 * Setup formatting toolbar button events
+	 */
+	setupFormattingToolbar: function() {
+		var textarea = document.getElementById('decomment-input');
+		var buttons = [
+			{ id: 'decomment-toolbar-strikethrough', syntax: '~~' }
+		];
+		buttons.forEach(function(btn) {
+			var el = document.getElementById(btn.id);
+			if (!el) { return; }
+			el.addEventListener('mousedown', function(e) {
+				e.preventDefault();
+				applyFormatting(textarea, btn.syntax);
+			});
+		});
+	},
+
 	/**
 	 * Check still conflicting
 	 * @param {string} decomment - decomment