Merge pull request #1633 from FreeFeed/checklist

Show beautiful & interactive checkboxes at the start of text

CHANGELOG.md

@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.122] - Not released
+### 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
+  Russian "Ha").
+
+  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 "[🗸]".
 ### Fixed
 - Telegram previews now supports dark theme
 

src/components/button-link.jsx

@@ -29,7 +29,13 @@ export function useKeyboardEvents(onClick) {
   return useMemo(
     () => ({
       onClick: (event) => {
-        event.currentTarget.blur();
+        /**
+         * This line is crashes in jsdom environment with message
+         * [TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.]
+         */
+        if (process.env.NODE_ENV !== 'test') {
+          event.currentTarget.blur();
+        }
         onClick(event);
       },
       onKeyDown: (event) => {

src/components/initial-checkbox.jsx

@@ -0,0 +1,67 @@
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { saveEditingComment } from '../redux/action-creators';
+import { initialAsyncState } from '../redux/async-helpers';
+import { checkMark, isChecked, setCheckState } from '../utils/initial-checkbox';
+import style from './initial-checkbox.module.scss';
+import { Throbber } from './throbber';
+import { useComment } from './post/post-comment-ctx';
+
+export function InitialCheckbox({ checked }) {
+  const comment = useComment();
+  const myId = useSelector((state) => state.user.id);
+
+  const isActive = myId && comment?.createdBy === myId;
+
+  return (
+    <>
+      {isActive ? (
+        <ActiveCheckbox comment={comment} checked={checked} />
+      ) : (
+        <span className={style.textBox}>
+          [
+          <span aria-hidden={!checked} className={cn(!checked && style.hidden)}>
+            {checkMark}
+          </span>
+          ]
+        </span>
+      )}{' '}
+    </>
+  );
+}
+
+function ActiveCheckbox({ comment, checked }) {
+  const updateStatus = useSelector(
+    (state) => state.commentEditState[comment?.id]?.saveStatus ?? initialAsyncState,
+  );
+  const dispatch = useDispatch();
+  const onClick = useCallback(
+    (e) => {
+      if (e.clientX !== 0) {
+        // True mouse click (not keyboard)
+        e.target.blur();
+      }
+      const newState = e.target.checked;
+      if (isChecked(comment.body) === newState) {
+        return;
+      }
+      const updatedBody = setCheckState(comment.body, newState);
+      dispatch(saveEditingComment(comment?.id, updatedBody));
+    },
+    [comment?.body, comment?.id, dispatch],
+  );
+
+  return (
+    <span className={style.box}>
+      {updateStatus.loading && <Throbber className={style.throbber} delay={0} />}
+      <input
+        type="checkbox"
+        readOnly
+        checked={checked}
+        className={cn(style.chk, updateStatus.loading && style.hidden)}
+        onClick={onClick}
+      />
+    </span>
+  );
+}

src/components/initial-checkbox.module.scss

@@ -0,0 +1,31 @@
+input[type='checkbox'].chk {
+  margin: 0;
+  width: 1.1em;
+  height: 1.1em;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+}
+
+.box {
+  position: relative;
+  margin-inline-end: 0.15em;
+  vertical-align: middle;
+}
+
+.throbber {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.textBox {
+  white-space: nowrap;
+}

src/components/linkify.jsx

@@ -10,11 +10,13 @@ import classnames from 'classnames';
 import { Arrows, Link as TLink, parseText, shortCodeToService } from '../utils/parse-text';
 import { highlightString } from '../utils/search-highlighter';
 import { FRIENDFEED_POST } from '../utils/link-types';
+import { InitialCheckbox as InitialCheckboxToken } from '../utils/initial-checkbox';
 import { getMediaType } from './media-viewer';
 
 import { Icon } from './fontawesome-icons';
 import UserName from './user-name';
 import ErrorBoundary from './error-boundary';
+import { InitialCheckbox } from './initial-checkbox';
 
 const MAX_URL_LENGTH = 50;
 const { searchEngine } = CONFIG.search;
@@ -62,6 +64,7 @@ export default function Linkify({
  * @returns {import('react').ReactNode[]}
  */
 function processStrings(children, processor, excludeTags = [], params = {}) {
+  params.throughIndex = params.throughIndex ?? -1;
   if (typeof children === 'string') {
     return processor(children, params);
   } else if (isValidElement(children) && !excludeTags.includes(children.type)) {
@@ -76,13 +79,14 @@ function processStrings(children, processor, excludeTags = [], params = {}) {
   return children;
 }
 
-function parseString(text, { userHover, arrowHover, arrowClick, showMedia, attachmentsRef }) {
+function parseString(text, params) {
   if (text === '') {
     return [];
   }
-
-  return parseText(text).map((token, i) => {
-    const key = i;
+  const { userHover, arrowHover, arrowClick, showMedia, attachmentsRef } = params;
+  return parseText(text).map((token) => {
+    params.throughIndex++;
+    const key = params.throughIndex;
 
     const anchorEl = anchorElWithKey(key);
     const linkEl = linkElWithKey(key);
@@ -173,6 +177,11 @@ function parseString(text, { userHover, arrowHover, arrowClick, showMedia, attac
       }
     }
 
+    // Render checkbox only at first token
+    if (params.throughIndex === 0 && token instanceof InitialCheckboxToken) {
+      return <InitialCheckbox key="comment-checkbox" checked={token.checked} />;
+    }
+
     return token.text;
   });
 }

src/components/piece-of-text.jsx

@@ -137,6 +137,8 @@ const splitIntoSpoilerBlocks = (input) => {
         spoilerText = '';
       } else if (isInSpoiler) {
         spoilerText += token.text;
+      } else if (typeof newNodes[newNodes.length - 1] === 'string') {
+        newNodes[newNodes.length - 1] += token.text;
       } else {
         newNodes.push(token.text);
       }

src/components/post/post-comment-ctx.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+import { useSelector } from 'react-redux';
+
+/**
+ * @type {import('react').Context<string|null>}
+ */
+export const commentIdContext = createContext(null);
+
+export function useComment() {
+  const id = useContext(commentIdContext);
+  return useSelector((state) => state.comments[id] ?? null);
+}
+
+/**
+ * @type {import('react').Context<string|null>}
+ */
+export const postIdContext = createContext(null);
+
+export function usePost() {
+  const id = useContext(postIdContext);
+  return useSelector((state) => state.posts[id] ?? null);
+}

src/components/post/post-comment-preview.jsx

@@ -19,6 +19,7 @@ import TimeDisplay from '../time-display';
 import UserName from '../user-name';
 
 import styles from './post-comment-preview.module.scss';
+import { CommentProvider } from './post-comment-provider';
 
 export function PostCommentPreview({
   postId,
@@ -152,7 +153,7 @@ export function PostCommentPreview({
       style={style}
     >
       {comment ? (
-        <>
+        <CommentProvider id={comment.id}>
           {comment.hideType ? (
             <span className={styles['hidden-text']}>{commentBody}</span>
           ) : (
@@ -175,7 +176,7 @@ export function PostCommentPreview({
               Go to comment
             </Link>
           </div>
-        </>
+        </CommentProvider>
       ) : getCommentStatus.error ? (
         <div className={styles['error']}>Error: {getCommentStatus.errorText}</div>
       ) : (

src/components/post/post-comment-provider.jsx

@@ -0,0 +1,9 @@
+import { commentIdContext, postIdContext } from './post-comment-ctx';
+
+export function CommentProvider({ id, children }) {
+  return <commentIdContext.Provider value={id}>{children}</commentIdContext.Provider>;
+}
+
+export function PostProvider({ id, children }) {
+  return <postIdContext.Provider value={id}>{children}</postIdContext.Provider>;
+}

src/components/post/post-comment.jsx

@@ -26,6 +26,7 @@ import { TranslatedText } from '../translated-text';
 import { initialAsyncState } from '../../redux/async-helpers';
 import { PostCommentMore } from './post-comment-more';
 import { PostCommentPreview } from './post-comment-preview';
+import { CommentProvider } from './post-comment-provider';
 
 class PostComment extends Component {
   commentContainer;
@@ -283,35 +284,37 @@ class PostComment extends Component {
 
     return (
       <div className="comment-body">
-        <Expandable
-          expanded={
-            this.props.readMoreStyle === READMORE_STYLE_COMPACT ||
-            this.props.isSinglePost ||
-            this.props.isExpanded ||
-            !this.props.translateStatus.initial
-          }
-          bonusInfo={commentTail}
-          config={commentReadmoreConfig}
-        >
-          <PieceOfText
-            text={this.props.body}
-            readMoreStyle={this.props.readMoreStyle}
-            highlightTerms={this.props.highlightTerms}
-            userHover={this.props.authorHighlightHandlers}
-            arrowHover={this.arrowHoverHandlers}
-            arrowClick={this.arrowClick}
-            showMedia={this.props.showMedia}
-          />
-          <TranslatedText
-            type="comment"
-            id={this.props.id}
-            userHover={this.props.authorHighlightHandlers}
-            arrowHover={this.arrowHoverHandlers}
-            arrowClick={this.arrowClick}
-            showMedia={this.props.showMedia}
-          />
-          {commentTail}
-        </Expandable>
+        <CommentProvider id={this.props.id}>
+          <Expandable
+            expanded={
+              this.props.readMoreStyle === READMORE_STYLE_COMPACT ||
+              this.props.isSinglePost ||
+              this.props.isExpanded ||
+              !this.props.translateStatus.initial
+            }
+            bonusInfo={commentTail}
+            config={commentReadmoreConfig}
+          >
+            <PieceOfText
+              text={this.props.body}
+              readMoreStyle={this.props.readMoreStyle}
+              highlightTerms={this.props.highlightTerms}
+              userHover={this.props.authorHighlightHandlers}
+              arrowHover={this.arrowHoverHandlers}
+              arrowClick={this.arrowClick}
+              showMedia={this.props.showMedia}
+            />
+            <TranslatedText
+              type="comment"
+              id={this.props.id}
+              userHover={this.props.authorHighlightHandlers}
+              arrowHover={this.arrowHoverHandlers}
+              arrowClick={this.arrowClick}
+              showMedia={this.props.showMedia}
+            />
+            {commentTail}
+          </Expandable>
+        </CommentProvider>
       </div>
     );
   }