allow nested list in markdown

* one liner fix editor

* fix firefox rendering lists

* moved fixes

* moved fixes per ajbura

.github/renovate.json

@@ -13,15 +13,9 @@
       "matchUpdateTypes": ["lockFileMaintenance"]
     },
     {
-      "groupName": "Slatejs",
       "matchPackageNames": ["slate", "slate-dom", "slate-history", "slate-react"]
     },
     {
-      "groupName": "Call",
-      "matchPackageNames": ["@element-hq/element-call-embedded", "matrix-widget-api"]
-    },
-    {
-      "groupName": "Linkify",
       "matchPackageNames": ["linkifyjs", "linkify-react"]
     }
   ],

.github/workflows/build-pull-request.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false
@@ -25,7 +25,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: preview
           path: dist
@@ -33,7 +33,7 @@ jobs:
       - name: Save pr number
         run: echo ${PR_NUMBER} > ./pr.txt
       - name: Upload pr number
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: pr
           path: ./pr.txt

.github/workflows/deploy-pull-request.yml

@@ -16,7 +16,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -25,7 +25,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@2536c51d3d126276eb39f74d6bc9c72ac6ef30d3 # v16
+        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

.github/workflows/docker-pr.yml

@@ -26,7 +26,7 @@ jobs:
 
       - name: Login to Docker Hub #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Login to the Github Container registry #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -50,7 +50,7 @@ jobs:
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           platforms: linux/amd64

.github/workflows/netlify-dev.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false

.github/workflows/prod-deploy.yml

@@ -15,7 +15,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup node
-        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false
@@ -65,7 +65,7 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
         with:
           tag_name: ${{ steps.vars.outputs.tag }}
           files: |
@@ -91,12 +91,12 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@c94ce9fb468520275223c153574b00df6fe4bcc9 # v3.7.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -112,7 +112,7 @@ jobs:
             type=raw,value=${{ env.VERSION }}
             type=raw,value=latest
       - name: Build and push Docker image
-        uses: docker/build-push-action@10e90e3645eae34f1e60eeb005ba3a3d33f178e8 # v6.19.2
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

Dockerfile

@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.29.5-alpine
+FROM nginx:1.29.8-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

config.json

@@ -22,7 +22,7 @@
       "#PrivSec.dev:arcticfoxes.net",
       "#disroot:aria-net.org"
     ],
-    "servers": ["matrix.org", "mozilla.org", "unredacted.org"]
+    "servers": ["matrixrooms.info", "matrix.org", "mozilla.org", "unredacted.org"]
   },
 
   "hashRouter": {

src/app/components/CallEmbedProvider.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode, useCallback, useRef } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { config } from 'folds';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,

src/app/components/editor/input.ts

@@ -157,10 +157,12 @@ const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): In
       return children;
     }
 
-    return node.childNodes.flatMap((child) => getInlineElement(child, processText));
+    const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
+    if (children.length === 0) return [{ text: '' }];
+    return children;
   }
 
-  return [];
+  return [{ text: '' }];
 };
 
 const parseBlockquoteNode = (
@@ -191,7 +193,7 @@ const parseBlockquoteNode = (
 
       if (child.name === 'p') {
         appendLine();
-        quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        quoteLines.push(getInlineElement(child, processText));
         return;
       }
 
@@ -253,10 +255,67 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
     },
   ];
 };
-const parseListNode = (
+
+const parseListMarkdown = (
   node: Element,
-  processText: ProcessTextCallback
+  processText: ProcessTextCallback,
-): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
+  depth = 0
+): ParagraphElement[] => {
+  const md = isTag(node) && node.name === 'ul' ? '*' : '-';
+  const prefix = node.attribs['data-md'] ?? md;
+  const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
+  const [digitOrChar] = prefix.match(/^[\da-zA-Z]/) ?? [];
+
+  const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
+
+  const lines: ParagraphElement[] = [];
+  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
+  const pushLine = (line: InlineElement[]) => {
+    lines.push({
+      type: BlockType.Paragraph,
+      children: [
+        {
+          text: `${Array(depth + 1).join(' ')}${starOrHyphen ? `${starOrHyphen} ` : `${lineNo}. `}`,
+        },
+        ...line,
+      ],
+    });
+    if (typeof lineNo === 'string') {
+      lineNo = String.fromCharCode(lineNo.charCodeAt(0) + 1);
+    } else {
+      lineNo += 1;
+    }
+  };
+
+  node.children.forEach((child) => {
+    if (isText(child)) {
+      pushLine([{ text: processText(child.data) }]);
+      return;
+    }
+
+    if (isTag(child)) {
+      if (child.name === 'ul' || child.name === 'ol') {
+        lines.push(...parseListMarkdown(child, processText, depth + 1));
+        return;
+      }
+      if (child.name === 'li') {
+        child.children.forEach((c) => {
+          if (isTag(c) && (c.name === 'ul' || c.name === 'ol')) {
+            lines.push(...parseListMarkdown(c, processText, depth + 1));
+            return;
+          }
+          pushLine(getInlineElement(c, processText));
+        });
+        return;
+      }
+    }
+
+    pushLine(getInlineElement(child, processText));
+  });
+
+  return lines;
+};
+const parseListLines = (children: ChildNode[], processText: ProcessTextCallback) => {
   const listLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
 
@@ -267,7 +326,7 @@ const parseListNode = (
     lineHolder = [];
   };
 
-  node.children.forEach((child) => {
+  children.forEach((child) => {
     if (isText(child)) {
       lineHolder.push({ text: processText(child.data) });
       return;
@@ -281,7 +340,7 @@ const parseListNode = (
 
       if (child.name === 'li') {
         appendLine();
-        listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
+        listLines.push(getInlineElement(child, processText));
         return;
       }
 
@@ -290,24 +349,23 @@ const parseListNode = (
   });
   appendLine();
 
-  const mdSequence = node.attribs['data-md'];
+  return listLines;
-  if (mdSequence !== undefined) {
+};
-    const prefix = mdSequence || '-';
+const parseListNode = (
-    const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
+  node: Element,
-    return listLines.map((lineChildren) => ({
+  processText: ProcessTextCallback
-      type: BlockType.Paragraph,
+): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
-      children: [
+  if (node.attribs['data-md'] !== undefined) {
-        { text: `${starOrHyphen ? `${starOrHyphen} ` : `${prefix}. `} ` },
+    return parseListMarkdown(node, processText);
-        ...lineChildren,
-      ],
-    }));
   }
 
+  const lines = parseListLines(node.childNodes, processText);
+
   if (node.name === 'ol') {
     return [
       {
         type: BlockType.OrderedList,
-        children: listLines.map((lineChildren) => ({
+        children: lines.map((lineChildren) => ({
           type: BlockType.ListItem,
           children: lineChildren,
         })),
@@ -318,7 +376,7 @@ const parseListNode = (
   return [
     {
       type: BlockType.UnorderedList,
-      children: listLines.map((lineChildren) => ({
+      children: lines.map((lineChildren) => ({
         type: BlockType.ListItem,
         children: lineChildren,
       })),
@@ -329,7 +387,7 @@ const parseHeadingNode = (
   node: Element,
   processText: ProcessTextCallback
 ): HeadingElement | ParagraphElement => {
-  const children = node.children.flatMap((child) => getInlineElement(child, processText));
+  const children = getInlineElement(node, processText);
 
   const headingMatch = node.name.match(/^h([123456])$/);
   const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
@@ -392,7 +450,7 @@ export const domToEditorInput = (
         appendLine();
         children.push({
           type: BlockType.Paragraph,
-          children: node.children.flatMap((child) => getInlineElement(child, processText)),
+          children: getInlineElement(node, processText),
         });
         return;
       }

src/app/components/editor/output.ts

@@ -11,7 +11,7 @@ import {
 } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
-import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
+import { isUserId } from '../../utils/matrix';
 
 export type OutputOptions = {
   allowTextFormatting?: boolean;

src/app/features/room-nav/RoomNavItem.tsx

@@ -23,12 +23,12 @@ import { useAtom, useAtomValue } from 'jotai';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl, getStateEvent } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { getPowersLevelFromMatrixEvent, usePowerLevels } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { markAsRead } from '../../utils/notifications';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -49,8 +49,8 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { getRoomCreatorsForRoomId, useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
@@ -59,6 +59,7 @@ import { callChatAtom } from '../../state/callEmbed';
 import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
 import { livekitSupport } from '../../hooks/useLivekitSupport';
+import { StateEvent } from '../../../types/matrix/room';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -287,8 +288,18 @@ export function RoomNavItem({
   const autoDiscoveryInfo = useAutoDiscoveryInfo();
 
   const handleStartCall: MouseEventHandler<HTMLAnchorElement> = (evt) => {
-    // Do not join if no livekit support or call is not started by others
+    const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-    if (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0) {
+    const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
+    const creators = getRoomCreatorsForRoomId(mx, room.roomId);
+    const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+    const hasCallPermission = permissions.event(
+      StateEvent.GroupCallMemberPrefix,
+      mx.getSafeUserId()
+    );
+
+    // Do not join if missing permissions or no livekit support and call is not started by others
+    if (!hasCallPermission || (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0)) {
       return;
     }
 

src/app/hooks/useDateFormat.ts

@@ -25,6 +25,10 @@ export const useDateFormatItems = (): DateFormatItem[] =>
         format: 'YYYY/MM/DD',
         name: 'YYYY/MM/DD',
       },
+      {
+        format: 'YYYY-MM-DD',
+        name: 'YYYY-MM-DD',
+      },
       {
         format: '',
         name: 'Custom',

src/app/hooks/usePowerLevels.ts

@@ -57,7 +57,7 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
     return draftPl;
   });
 
-const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
+export const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
   const plContent = mEvent?.getContent<IPowerLevels>();
 
   const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);

src/app/pages/client/SpecVersions.tsx

@@ -22,7 +22,7 @@ export function SpecVersions({ baseUrl, children }: { baseUrl: string; children:
             <Dialog>
               <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
                 <Text>
-                  Failed to connect to homeserver. Either homeserver is down or your internet.
+                  Unable to connect to the homeserver. The homeserver or your internet connection may be down.
                 </Text>
                 <Button variant="Critical" onClick={retry}>
                   <Text as="span" size="B400">

src/app/plugins/markdown/block/parser.ts

@@ -1,12 +1,5 @@
 import { replaceMatch } from '../internal';
-import {
+import { BlockQuoteRule, CodeBlockRule, ESC_BLOCK_SEQ, HeadingRule, ListRule } from './rules';
-  BlockQuoteRule,
-  CodeBlockRule,
-  ESC_BLOCK_SEQ,
-  HeadingRule,
-  OrderedListRule,
-  UnorderedListRule,
-} from './rules';
 import { runBlockRule } from './runner';
 import { BlockMDParser } from './type';
 
@@ -23,8 +16,7 @@ export const parseBlockMD: BlockMDParser = (text, parseInline) => {
 
   if (!result) result = runBlockRule(text, CodeBlockRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, BlockQuoteRule, parseBlockMD, parseInline);
-  if (!result) result = runBlockRule(text, OrderedListRule, parseBlockMD, parseInline);
+  if (!result) result = runBlockRule(text, ListRule, parseBlockMD, parseInline);
-  if (!result) result = runBlockRule(text, UnorderedListRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, HeadingRule, parseBlockMD, parseInline);
 
   // replace \n with <br/> because want to preserve empty lines

src/app/plugins/markdown/block/rules.ts

@@ -10,18 +10,22 @@ export const HeadingRule: BlockMDRule = {
   },
 };
 
-const CODEBLOCK_MD_1 = '```';
+// opening fence: 3 or more backticks
-const CODEBLOCK_REG_1 = /^`{3}(\S*)\n((?:.*\n)+?)`{3} *(?!.)\n?/m;
+// capture the exact fence length in group 1
+// optional info string in group 2
+// code content in group 3
+// closing fence must match the exact same fence sequence via \1
+const CODEBLOCK_REG_1 = /^(`{3,})(?!`)(\S*)\n((?:.*\n)+?)\1 *(?!.)\n?/m;
 export const CodeBlockRule: BlockMDRule = {
   match: (text) => text.match(CODEBLOCK_REG_1),
   html: (match) => {
-    const [, g1, g2] = match;
+    const [, fence, g1, g2] = match;
     // use last identifier after dot, e.g. for "example.json" gets us "json" as language code.
     const langCode = g1 ? g1.substring(g1.lastIndexOf('.') + 1) : null;
     const filename = g1 !== langCode ? g1 : null;
     const classNameAtt = langCode ? ` class="language-${langCode}"` : '';
     const filenameAtt = filename ? ` data-label="${filename}"` : '';
-    return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
+    return `<pre data-md="${fence}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
   },
 };
 
@@ -48,55 +52,146 @@ export const BlockQuoteRule: BlockMDRule = {
 };
 
 const ORDERED_LIST_MD_1 = '-';
-const O_LIST_ITEM_PREFIX = /^(-|[\da-zA-Z]\.) */;
-const O_LIST_START = /^([\d])\./;
-const O_LIST_TYPE = /^([aAiI])\./;
-const O_LIST_TRAILING_NEWLINE = /\n$/;
-const ORDERED_LIST_REG_1 = /(^(?:-|[\da-zA-Z]\.) +.+\n?)+/m;
-export const OrderedListRule: BlockMDRule = {
-  match: (text) => text.match(ORDERED_LIST_REG_1),
-  html: (match, parseInline) => {
-    const [listText] = match;
-    const [, listStart] = listText.match(O_LIST_START) ?? [];
-    const [, listType] = listText.match(O_LIST_TYPE) ?? [];
-
-    const lines = listText
-      .replace(O_LIST_TRAILING_NEWLINE, '')
-      .split('\n')
-      .map((lineText) => {
-        const line = lineText.replace(O_LIST_ITEM_PREFIX, '');
-        const txt = parseInline ? parseInline(line) : line;
-        return `<li><p>${txt}</p></li>`;
-      })
-      .join('');
-
-    const dataMdAtt = `data-md="${listType || listStart || ORDERED_LIST_MD_1}"`;
-    const startAtt = listStart ? ` start="${listStart}"` : '';
-    const typeAtt = listType ? ` type="${listType}"` : '';
-    return `<ol ${dataMdAtt}${startAtt}${typeAtt}>${lines}</ol>`;
-  },
-};
-
 const UNORDERED_LIST_MD_1 = '*';
-const U_LIST_ITEM_PREFIX = /^\* */;
+const LIST_ITEM_REG = /^( *)([-*]|[\da-zA-Z]\.) +(.+)$/;
-const U_LIST_TRAILING_NEWLINE = /\n$/;
+type ListType = 'ol' | 'ul';
-const UNORDERED_LIST_REG_1 = /(^\* +.+\n?)+/m;
+
-export const UnorderedListRule: BlockMDRule = {
+function getListType(marker: string): ListType {
-  match: (text) => text.match(UNORDERED_LIST_REG_1),
+  return marker === '*' ? 'ul' : 'ol';
+}
+
+function getOrderedMeta(marker: string) {
+  const startMatch = marker.match(/^(\d)\./);
+  const typeMatch = marker.match(/^([aAiI])\./);
+
+  return {
+    start: startMatch?.[1],
+    type: typeMatch?.[1],
+  };
+}
+
+interface ParsedLine {
+  indent: number;
+  marker: string;
+  content: string;
+  listType: ListType;
+}
+
+function parseLines(text: string): ParsedLine[] {
+  return text
+    .replace(/\n$/, '')
+    .split('\n')
+    .map((line) => {
+      const match = line.match(LIST_ITEM_REG);
+
+      if (!match) return null;
+
+      const [, spaces, marker, content] = match;
+
+      return {
+        indent: spaces.length,
+        marker,
+        content,
+        listType: getListType(marker),
+      };
+    })
+    .filter(Boolean) as ParsedLine[];
+}
+
+function openList(line: ParsedLine) {
+  if (line.listType === 'ul') {
+    return `<ul data-md="${UNORDERED_LIST_MD_1}">`;
+  }
+  const { type, start } = getOrderedMeta(line.marker);
+  const dataMdAtt = `data-md="${type || start || ORDERED_LIST_MD_1}"`;
+  const startAtt = start ? ` start="${start}"` : '';
+  const typeAtt = type ? ` type="${type}"` : '';
+  return `<ol ${dataMdAtt}${startAtt}${typeAtt}>`;
+}
+
+function closeList(listType: ListType) {
+  return listType === 'ul' ? '</ul>' : '</ol>';
+}
+
+function buildList(lines: ParsedLine[], parseInline?: (s: string) => string): string {
+  let html = '';
+
+  const stack: ('ul' | 'ol')[] = [];
+
+  lines.forEach((line, index) => {
+    const prev = lines[index - 1];
+    const next = lines[index + 1];
+
+    const content = parseInline ? parseInline(line.content) : line.content;
+
+    // FIRST ITEM
+    if (!prev) {
+      html += openList(line);
+      stack.push(line.listType);
+    }
+
+    // DEEPER INDENT > open nested list
+    else if (line.indent > prev.indent) {
+      html += openList(line);
+      stack.push(line.listType);
+    }
+
+    // SAME LEVEL
+    else if (line.indent === prev.indent) {
+      html += '</li>';
+
+      // different list type
+      if (line.listType !== prev.listType) {
+        html += closeList(stack.pop()!);
+
+        html += openList(line);
+        stack.push(line.listType);
+      }
+    }
+
+    // GOING BACK UP
+    else if (line.indent < prev.indent) {
+      html += '</li>';
+
+      while (stack.length > line.indent + 1) {
+        html += closeList(stack.pop()!);
+        html += '</li>';
+      }
+
+      if (line.listType !== stack[stack.length - 1]) {
+        html += closeList(stack.pop()!);
+
+        html += openList(line);
+        stack.push(line.listType);
+      }
+    }
+
+    html += `<li><p>${content}</p>`;
+
+    // LAST ITEM cleanup
+    if (!next) {
+      html += '</li>';
+
+      while (stack.length) {
+        html += closeList(stack.pop()!);
+      }
+    }
+  });
+
+  return html;
+}
+
+const LIST_REG_1 = /^(?: *(?:[-*]|[\da-zA-Z]\.) +.+\n?)+/m;
+export const ListRule: BlockMDRule = {
+  match: (text) => text.match(LIST_REG_1),
   html: (match, parseInline) => {
     const [listText] = match;
 
-    const lines = listText
+    const lines = parseLines(listText);
-      .replace(U_LIST_TRAILING_NEWLINE, '')
-      .split('\n')
-      .map((lineText) => {
-        const line = lineText.replace(U_LIST_ITEM_PREFIX, '');
-        const txt = parseInline ? parseInline(line) : line;
-        return `<li><p>${txt}</p></li>`;
-      })
-      .join('');
 
-    return `<ul data-md="${UNORDERED_LIST_MD_1}">${lines}</ul>`;
+    const html = buildList(lines, parseInline);
+
+    return html;
   },
 };
 

src/app/state/settings.ts

@@ -1,7 +1,13 @@
 import { atom } from 'jotai';
 
 const STORAGE_KEY = 'settings';
-export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | '';
+export type DateFormat =
+  | 'D MMM YYYY'
+  | 'DD/MM/YYYY'
+  | 'MM/DD/YYYY'
+  | 'YYYY/MM/DD'
+  | 'YYYY-MM-DD'
+  | '';
 export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500';
 export enum MessageLayout {
   Modern = 0,

src/app/styles/CustomHtml.css.ts

@@ -120,12 +120,23 @@ export const CodeBlockBottomShadow = style({
   background: `linear-gradient(to top, #00000022, #00000000)`,
 });
 
+const BaseList = style({});
 export const List = style([
+  BaseList,
   DefaultReset,
   MarginSpaced,
   {
     padding: `0 ${config.space.S100}`,
     paddingLeft: config.space.S600,
+    selectors: {
+      '& &': {
+        marginTop: config.space.S200,
+        marginBottom: config.space.S200,
+      },
+      'li:last-child &': {
+        marginBottom: 0,
+      },
+    },
   },
 ]);
 

src/index.css

@@ -129,3 +129,9 @@ textarea {
 audio:not([controls]) {
   display: none !important;
 }
+
+/* Fix Firefox rendering lists that have empty items with those items collapsed in on eachother */
+li p::before {
+  content: '';
+  display: inline-block;
+}