Merge branch 'checklist' into beta

CHANGELOG.md

@@ -8,15 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Experimental
 ### Added
 - Comments can now be used as checklists if the comment text starts with "[ ]"
-  or "[x]" (one can use other symbols in parentheses as well: [v], [*], [✔], or
+  or "[x]" (one can use other symbols in parentheses as well: [v], [*], [🗸], or
   Russian "Ha").
 
-  If the current user matches the author of the post and comment, an interactive
-  checkbox is displayed at the beginning of the text. When the user clicks the
-  checkbox, the comment text changes to reflect the checkbox state.
+  If the current user matches the author of the comment, an interactive checkbox
+  is displayed at the beginning of the text. When the user clicks the checkbox,
+  the comment text changes to reflect the checkbox state.
 
   For other users, a fixed-width text representation of the checkbox is shown:
-  "[ ]" or "[✔]".
+  "[ ]" or "[🗸]".
 
 ## [1.121.1] - 2023-07-15
 ### Fixed

src/components/initial-checkbox.jsx

@@ -3,17 +3,16 @@ import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { saveEditingComment } from '../redux/action-creators';
 import { initialAsyncState } from '../redux/async-helpers';
-import { isChecked, setCheckState } from '../utils/initial-checkbox';
+import { checkMark, isChecked, setCheckState } from '../utils/initial-checkbox';
 import style from './initial-checkbox.module.scss';
 import { Throbber } from './throbber';
-import { useComment, usePost } from './post/post-comment-ctx';
+import { useComment } from './post/post-comment-ctx';
 
 export function InitialCheckbox({ checked }) {
-  const post = usePost();
   const comment = useComment();
   const myId = useSelector((state) => state.user.id);
 
-  const isActive = post.createdBy === comment?.createdBy && post.createdBy === myId;
+  const isActive = myId && comment?.createdBy === myId;
 
   return (
     <>
@@ -23,7 +22,7 @@ export function InitialCheckbox({ checked }) {
         <span className={style.textBox}>
           [
           <span aria-hidden={!checked} className={cn(!checked && style.hidden)}>
-            ✔
+            {checkMark}
           </span>
           ]
         </span>

src/utils/initial-checkbox.js

@@ -1,10 +1,13 @@
 import { Token } from 'social-text-tokenizer';
 
 /**
+ * U+2713 Check Mark (🗸)
  * U+2714 Heavy Check Mark (✔)
  * U+0445 Cyrillic Small Letter Ha (х)
  */
-const checkBoxRe = /^\[(?:\s*|[xv*\u2714\u0445])]/i;
+const checkBoxRe = /^\[(?:\s*|[xv*\u2713\u2714\u0445])]/i;
+
+export const checkMark = '\u2713';
 
 /**
  * @param {string} text
@@ -46,5 +49,5 @@ export function isChecked(text) {
  * @returns {string}
  */
 export function setCheckState(text, newState) {
-  return `[${newState ? '\u2714' : ' '}] ${text.replace(checkBoxRe, '').trim()}`;
+  return `[${newState ? checkMark : ' '}] ${text.replace(checkBoxRe, '').trim()}`;
 }