improve post character counting

JessicaMulein · Sep 12, 2024 · d4079a7 · d4079a7
1 parent 21a3e63
commit d4079a7
Show file tree

Hide file tree

Showing 11 changed files with 418 additions and 110 deletions.
diff --git a/apps/duality-social-node/src/controllers/api/feed.ts b/apps/duality-social-node/src/controllers/api/feed.ts
@@ -79,12 +79,6 @@ export class FeedController extends BaseController {
                     }),
                 ]
             },
-            {
-                method: 'post',
-                path: '/preview',
-                handler: this.postPreview,
-                useAuthentication: true,
-            },
             {
                 method: 'post',
                 path: '/react',
@@ -196,7 +190,8 @@ export class FeedController extends BaseController {
 
     async postPreview(req: Request, res: Response) {
         const content = req.body.content ?? '';
-        const rendered = parsePostContent(content);
+        const isBlogPost = req.body.isBlogPost === 'true';
+        const rendered = parsePostContent(content, isBlogPost);
         res.status(200).json({ rendered });
     }
 }

diff --git a/apps/duality-social-node/src/services/feed.ts b/apps/duality-social-node/src/services/feed.ts
@@ -282,7 +282,7 @@ export class FeedService {
     const isBlogPost = req.body.isBlogPost === 'true';
     const parentViewpointId = req.body.parentViewpointId;
     const parentPostId = req.body.parentPostId;
-    const rendered = parsePostContent(content);
+    const rendered = parsePostContent(content, isBlogPost);
     const currentDate = new Date();
     const createdById = new Schema.Types.ObjectId(ModelData.User.path);
     const language = await this.detectPostLanguage(content);

diff --git a/apps/duality-social-react/src/components/feed.tsx b/apps/duality-social-react/src/components/feed.tsx
@@ -39,7 +39,7 @@ const Feed: React.FC = () => {
 
   return (
     <Container maxWidth="md">
-      <NewPost isBlogPost={false} />
+      <NewPost isBlogPost={true} />
       {posts && posts.length > 0 ? (
         posts.map((post) => <Post key={post.id?.toString()} post={post} />)
       ) : (

diff --git a/apps/duality-social-react/src/components/format-guide.tsx b/apps/duality-social-react/src/components/format-guide.tsx
@@ -20,8 +20,9 @@ const FormatGuide: React.FC = () => {
       </Typography>
       <Typography variant="body1" component="div" sx={{ marginBottom: 2 }}>
         <p>
-          You can use Markdown syntax and a special custom FontAwesome powered
-          icon markup in your posts.
+          Blog posts support Markdown syntax and all posts support a special
+          custom FontAwesome powered icon markup in your posts (explained
+          below).
         </p>
         <p>
           A complete list of icons available (we're using a complete Pro set)
@@ -37,36 +38,6 @@ const FormatGuide: React.FC = () => {
         <p>Here's a quick guide:</p>
       </Typography>
       <Divider />
-      <Typography variant="h6" mt={2}>
-        Markdown Syntax:
-      </Typography>
-      <List>
-        <ListItem>
-          <ListItemText
-            primary="Bold"
-            secondary="**bold text** or __bold text__"
-          />
-        </ListItem>
-        <ListItem>
-          <ListItemText
-            primary="Italic"
-            secondary="*italic text* or _italic text_"
-          />
-        </ListItem>
-        <ListItem>
-          <ListItemText
-            primary="Links"
-            secondary="[link text](https://example.com)"
-          />
-        </ListItem>
-        <ListItem>
-          <ListItemText
-            primary="Lists"
-            secondary="- Item 1\n- Item 2\n- Item 3"
-          />
-        </ListItem>
-      </List>
-      <Divider />
       <Typography variant="h6" mt={2}>
         Icon Markup:
       </Typography>
@@ -211,6 +182,79 @@ const FormatGuide: React.FC = () => {
           />
         </ListItem>
       </List>
+      <Divider />
+      <Typography variant="h6" mt={2}>
+        Blog Post Markdown Syntax:
+      </Typography>
+      <List>
+        <ListItem>
+          <ListItemText
+            primary="Bold"
+            secondary="**bold text** or __bold text__"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Italic"
+            secondary="*italic text* or _italic text_"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Links"
+            secondary="[link text](https://example.com)"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Lists"
+            secondary="- Item 1\n- Item 2\n- Item 3"
+          />
+        </ListItem>
+      </List>
+      <Divider />
+      <Typography variant="h6" mt={2}>
+        Character Counting:
+      </Typography>
+      <List>
+        <ListItem>
+          <ListItemText
+            primary="Emoji"
+            secondary="Each emoji counts as 1 character"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Unicode Characters"
+            secondary="Each Unicode character counts as 1 character"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Icon Markup"
+            secondary="Valid icon markup (e.g., {{heart}}) counts as 1 character"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Newlines"
+            secondary="Each newline (CR/LF) counts as 1 character"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Links"
+            secondary="Each link counts as 1 character, plus the visible text"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemText
+            primary="Images"
+            secondary="Each image counts as 1 character, plus the alt text"
+          />
+        </ListItem>
+      </List>
+      <Divider />
       <Typography variant="body2" mt={2}>
         Note: HTML tags are stripped for security reasons. Use Markdown and icon
         markup for formatting.

diff --git a/apps/duality-social-react/src/components/live-post-preview.tsx b/apps/duality-social-react/src/components/live-post-preview.tsx
@@ -4,14 +4,15 @@ import { parsePostContent } from '@duality-social/duality-social-lib';
 
 interface LivePostPreviewProps {
   content: string;
+  isBlogPost: boolean;
 }
 
-const LivePostPreview: React.FC<LivePostPreviewProps> = ({ content }) => {
+const LivePostPreview: React.FC<LivePostPreviewProps> = ({ content, isBlogPost }) => {
   const [parsedContent, setParsedContent] = useState('');
 
   useEffect(() => {
-    setParsedContent(parsePostContent(content));
-  }, [content]);
+    setParsedContent(parsePostContent(content, isBlogPost));
+  }, [content, isBlogPost]);
 
   return (
     <Box mt={2}>

diff --git a/apps/duality-social-react/src/components/new-post.tsx b/apps/duality-social-react/src/components/new-post.tsx
@@ -10,6 +10,7 @@ import authenticatedApi from '../services/authenticated-api';
 import {
   AppConstants,
   getCharacterCount,
+  parsePostContent,
 } from '@duality-social/duality-social-lib';
 import { isAxiosError } from 'axios';
 
@@ -180,9 +181,9 @@ const NewPost: React.FC<NewPostProps> = ({
         onClose={() => setCropDialogOpen(false)}
         onSave={handleCropSave}
       />
-      <LivePostPreview content={formik.values.content} />
+      <LivePostPreview content={formik.values.content} isBlogPost={isBlogPost} />
       <Typography variant="body2" sx={{ mt: 1, textAlign: 'right' }}>
-        {getCharacterCount(formik.values.content)}/
+        {getCharacterCount(formik.values.content, isBlogPost)}/
         {isBlogPost
           ? AppConstants.MaxBlogPostLength
           : AppConstants.MaxPostLength}

diff --git a/docs/post-markup.md b/docs/post-markup.md
@@ -40,6 +40,23 @@ Examples:
 
 Remember: Only the icon name is required. All other elements are optional.
 
+## Character Counting:
+
+- Emoji: Each emoji counts as 1 character
+- Unicode Characters: Each Unicode character counts as 1 character
+- Icon Markup: Valid icon markup (e.g., {{heart}}) counts as 1 character
+- Newlines: Each newline (CR/LF) counts as 1 character
+- Links: Each link counts as 1 character, plus the visible text
+
+## Blog Post Formatting:
+
+Blog posts support full Markdown syntax in addition to the custom icon markup. This includes:
+
+- Headers (# H1, ## H2, etc.)
+- Code blocks (``` code ```)
+- Tables
+- And more!
+
 Note: HTML tags are stripped for security reasons. Use Markdown and icon markup for formatting.
 
 For more detailed styling options, refer to the [FontAwesome Style Cheatsheet](https://docs.fontawesome.com/web/style/style-cheatsheet). Our markup is a custom shorthand for this.
diff --git a/libs/duality-social-lib/package.json b/libs/duality-social-lib/package.json
@@ -10,6 +10,9 @@
     "bson": "^6.8.0",
     "express-validator": "^7.2.0",
     "known-css-properties": "^0.34.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-table-of-contents": "^0.8.0",
+    "markdown-it-todo-lists": "^0.1.7",
     "mongoose": "^8.5.1",
     "postcss": "^8.4.45",
     "sanitize-html": "^2.13.0"