tcmd: italic

components/tcmd/index.tsx

@@ -181,6 +181,8 @@ const renderInlineToken = (l: Line) => {
             return <span>{token.content}</span>;
           case "bold":
             return <span className="font-bold">{token.content}</span>;
+          case "italic":
+            return <span className="italic">{token.content}</span>;
           case "anchor":
             return (
               <Link

lib/tcmd/tokenizeInline.ts

@@ -76,6 +76,21 @@ export const inlineTokens: {
       return l.replace(this.rx, (_, __, val) => val);
     },
   },
+  {
+    rx: /(?<!\*)\*([^\*]+?)\*(?!\*)/g,
+    create(content, start, end, tokens) {
+      tokens.push({
+        content: this.replace(content[0]),
+        type: "italic",
+        end,
+        start,
+        uuid: crypto.randomUUID(),
+      });
+    },
+    replace(l) {
+      return l.replace(this.rx, (...all) => all[1]);
+    },
+  },
   {
     rx: /(?<![\!\?|^])\[(.*?)\]\((.*?)\)/g,
     create(content, start, end, tokens) {

test.md

@@ -11,8 +11,8 @@
 Lorem ^[ipsum]<<This is a popover test: ![Goofy](https://yt3.ggpht.com/a/AATXAJwbIW0TwEhqdT2ZPeSB1AtdtWD2ZXam80oijg=s900-c-k-c0xffffffff-no-rj-mo)>>
 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
 labore et dolore magna aliqua. Sollicitudin tempor id eu nisl nunc mi ipsum
-faucibus vitae. Lobortis elementum nibh tellus molestie nunc. Purus non enim
-praesent elementum facilisis leo vel. Orci nulla pellentesque dignissim enim sit
+faucibus vitae. **Lobortis** elementum nibh tellus molestie nunc. Purus non enim
+praesent *elementum* facilisis leo vel. Orci nulla pellentesque dignissim enim sit
 amet venenatis. Eu feugiat pretium nibh ipsum. Gravida dictum fusce ut placerat
 orci nulla pellentesque. Tincidunt vitae semper quis lectus nulla at volutpat
 diam ut. Proin sed libero enim sed faucibus turpis in eu mi. Dui sapien eget mi

types.d.ts

@@ -1,5 +1,5 @@
 type InlineToken = {
-  type: "text" | "bold" | "anchor" | "image" | "popover";
+  type: "text" | "bold" | "anchor" | "image" | "popover" | "italic";
   content: string;
   data?: any;
   uuid: string;