fix: Better styles added for left arrow typography support

packages/editor/core/src/ui/extensions/index.tsx

@@ -27,6 +27,7 @@ import { RestoreImage } from "src/types/restore-image";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
 import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
 import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { LeftArrow } from "./typography/left-arrow";
 
 export const CoreEditorExtensions = (
   mentionConfig: {
@@ -86,6 +87,7 @@ export const CoreEditorExtensions = (
       class: "rounded-lg border border-custom-border-300",
     },
   }),
+  LeftArrow,
   TiptapUnderline,
   TextStyle,
   Color,

packages/editor/core/src/ui/extensions/typography/index.ts

@@ -1,26 +1,25 @@
 import { Extension } from "@tiptap/core";
 import {
-  TypographyOptions,
-  emDash,
-  ellipsis,
-  leftArrow,
-  rightArrow,
   copyright,
-  trademark,
-  servicemark,
-  registeredTrademark,
-  oneHalf,
-  plusMinus,
-  notEqual,
-  laquo,
-  raquo,
-  multiplication,
-  superscriptTwo,
-  superscriptThree,
-  oneQuarter,
-  threeQuarters,
+  ellipsis,
+  emDash,
   impliesArrowRight,
-} from "src/ui/extensions/typography/inputRules";
+  laquo,
+  multiplication,
+  notEqual,
+  oneHalf,
+  oneQuarter,
+  plusMinus,
+  raquo,
+  registeredTrademark,
+  rightArrow,
+  servicemark,
+  superscriptThree,
+  superscriptTwo,
+  threeQuarters,
+  trademark,
+  TypographyOptions,
+} from "src/ui/extensions/typography/input-rules";
 
 export const CustomTypographyExtension = Extension.create<TypographyOptions>({
   name: "typography",
@@ -40,10 +39,6 @@ export const CustomTypographyExtension = Extension.create<TypographyOptions>({
       rules.push(ellipsis(this.options.ellipsis));
     }
 
-    if (this.options.leftArrow !== false) {
-      rules.push(leftArrow(this.options.leftArrow));
-    }
-
     if (this.options.rightArrow !== false) {
       rules.push(rightArrow(this.options.rightArrow));
     }

packages/editor/core/src/ui/extensions/typography/left-arrow.ts

@@ -0,0 +1,36 @@
+import { Mark, markInputRule } from "@tiptap/core";
+
+export const LeftArrow = Mark.create({
+  name: "leftArrow",
+  group: "inline",
+  inline: true,
+  draggable: false,
+  atom: true,
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: /->$/,
+        type: this.type,
+      }),
+    ];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[style]",
+      },
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      {
+        ...HTMLAttributes,
+        style: 'font-family: "system-ui", sans-serif;',
+      },
+      "→",
+    ];
+  },
+});