fix: Better styles added for left arrow typography support

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

@@ -25,7 +25,9 @@ import { DeleteImage } from "src/types/delete-image";
 import { IMentionSuggestion } from "src/types/mention-suggestion";
 import { RestoreImage } from "src/types/restore-image";
 import { CustomLinkExtension } from "src/ui/extensions/custom-link";
-import { CustomCodeInlineExtension } from "./code-inline";
+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: {
@@ -79,11 +81,13 @@ export const CoreEditorExtensions = (
         "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
+  CustomTypographyExtension,
   ImageExtension(deleteFile, restoreFile, cancelUploadImage).configure({
     HTMLAttributes: {
       class: "rounded-lg border border-custom-border-300",
     },
   }),
+  LeftArrow,
   TiptapUnderline,
   TextStyle,
   Color,

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

@@ -0,0 +1,104 @@
+import { Extension } from "@tiptap/core";
+import {
+  copyright,
+  ellipsis,
+  emDash,
+  impliesArrowRight,
+  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",
+
+  addInputRules() {
+    const rules = [];
+
+    if (this.options.emDash !== false) {
+      rules.push(emDash(this.options.emDash));
+    }
+
+    if (this.options.impliesArrowRight !== false) {
+      rules.push(impliesArrowRight(this.options.impliesArrowRight));
+    }
+
+    if (this.options.ellipsis !== false) {
+      rules.push(ellipsis(this.options.ellipsis));
+    }
+
+    if (this.options.rightArrow !== false) {
+      rules.push(rightArrow(this.options.rightArrow));
+    }
+
+    if (this.options.copyright !== false) {
+      rules.push(copyright(this.options.copyright));
+    }
+
+    if (this.options.trademark !== false) {
+      rules.push(trademark(this.options.trademark));
+    }
+
+    if (this.options.servicemark !== false) {
+      rules.push(servicemark(this.options.servicemark));
+    }
+
+    if (this.options.registeredTrademark !== false) {
+      rules.push(registeredTrademark(this.options.registeredTrademark));
+    }
+
+    if (this.options.oneHalf !== false) {
+      rules.push(oneHalf(this.options.oneHalf));
+    }
+
+    if (this.options.plusMinus !== false) {
+      rules.push(plusMinus(this.options.plusMinus));
+    }
+
+    if (this.options.notEqual !== false) {
+      rules.push(notEqual(this.options.notEqual));
+    }
+
+    if (this.options.laquo !== false) {
+      rules.push(laquo(this.options.laquo));
+    }
+
+    if (this.options.raquo !== false) {
+      rules.push(raquo(this.options.raquo));
+    }
+
+    if (this.options.multiplication !== false) {
+      rules.push(multiplication(this.options.multiplication));
+    }
+
+    if (this.options.superscriptTwo !== false) {
+      rules.push(superscriptTwo(this.options.superscriptTwo));
+    }
+
+    if (this.options.superscriptThree !== false) {
+      rules.push(superscriptThree(this.options.superscriptThree));
+    }
+
+    if (this.options.oneQuarter !== false) {
+      rules.push(oneQuarter(this.options.oneQuarter));
+    }
+
+    if (this.options.threeQuarters !== false) {
+      rules.push(threeQuarters(this.options.threeQuarters));
+    }
+
+    return rules;
+  },
+});

packages/editor/core/src/ui/extensions/typography/input-rules.ts

@@ -0,0 +1,137 @@
+import { textInputRule } from "@tiptap/core";
+
+export interface TypographyOptions {
+  emDash: false | string;
+  ellipsis: false | string;
+  leftArrow: false | string;
+  rightArrow: false | string;
+  copyright: false | string;
+  trademark: false | string;
+  servicemark: false | string;
+  registeredTrademark: false | string;
+  oneHalf: false | string;
+  plusMinus: false | string;
+  notEqual: false | string;
+  laquo: false | string;
+  raquo: false | string;
+  multiplication: false | string;
+  superscriptTwo: false | string;
+  superscriptThree: false | string;
+  oneQuarter: false | string;
+  threeQuarters: false | string;
+  impliesArrowRight: false | string;
+}
+
+export const emDash = (override?: string) =>
+  textInputRule({
+    find: /--$/,
+    replace: override ?? "—",
+  });
+
+export const impliesArrowRight = (override?: string) =>
+  textInputRule({
+    find: /=>$/,
+    replace: override ?? "⇒",
+  });
+
+export const leftArrow = (override?: string) =>
+  textInputRule({
+    find: /<-$/,
+    replace: override ?? "←",
+  });
+
+export const rightArrow = (override?: string) =>
+  textInputRule({
+    find: /->$/,
+    replace: override ?? "→",
+  });
+
+export const ellipsis = (override?: string) =>
+  textInputRule({
+    find: /\.\.\.$/,
+    replace: override ?? "…",
+  });
+
+export const copyright = (override?: string) =>
+  textInputRule({
+    find: /\(c\)$/,
+    replace: override ?? "©",
+  });
+
+export const trademark = (override?: string) =>
+  textInputRule({
+    find: /\(tm\)$/,
+    replace: override ?? "™",
+  });
+
+export const servicemark = (override?: string) =>
+  textInputRule({
+    find: /\(sm\)$/,
+    replace: override ?? "℠",
+  });
+
+export const registeredTrademark = (override?: string) =>
+  textInputRule({
+    find: /\(r\)$/,
+    replace: override ?? "®",
+  });
+
+export const oneHalf = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(1\/2)\s$/,
+    replace: override ?? "½",
+  });
+
+export const plusMinus = (override?: string) =>
+  textInputRule({
+    find: /\+\/-$/,
+    replace: override ?? "±",
+  });
+
+export const notEqual = (override?: string) =>
+  textInputRule({
+    find: /!=$/,
+    replace: override ?? "≠",
+  });
+
+export const laquo = (override?: string) =>
+  textInputRule({
+    find: /<<$/,
+    replace: override ?? "«",
+  });
+
+export const raquo = (override?: string) =>
+  textInputRule({
+    find: />>$/,
+    replace: override ?? "»",
+  });
+
+export const multiplication = (override?: string) =>
+  textInputRule({
+    find: /\d+\s?([*x])\s?\d+$/,
+    replace: override ?? "×",
+  });
+
+export const superscriptTwo = (override?: string) =>
+  textInputRule({
+    find: /\^2$/,
+    replace: override ?? "²",
+  });
+
+export const superscriptThree = (override?: string) =>
+  textInputRule({
+    find: /\^3$/,
+    replace: override ?? "³",
+  });
+
+export const oneQuarter = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(1\/4)\s$/,
+    replace: override ?? "¼",
+  });
+
+export const threeQuarters = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(3\/4)\s$/,
+    replace: override ?? "¾",
+  });

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;',
+      },
+      "→",
+    ];
+  },
+});

web/hooks/use-window-size.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const useSize = () => {
+  const [windowSize, setWindowSize] = useState([window.innerWidth, window.innerHeight]);
+
+  useEffect(() => {
+    const windowSizeHandler = () => {
+      setWindowSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener("resize", windowSizeHandler);
+    return () => {
+      window.removeEventListener("resize", windowSizeHandler);
+    };
+  }, []);
+
+  return windowSize;
+};
+
+export default useSize;

web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "next-themes";
 import { useApplication, useEventTracker, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
+import useSize from "hooks/use-window-size";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 // components
@@ -66,6 +67,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
     useProjectPages();
   // hooks
   const {} = useUserAuth({ user: currentUser, isLoading: currentUserLoader });
+  const [windowWidth] = useSize();
   // local storage
   const { storedValue: pageTab, setValue: setPageTab } = useLocalStorage("pageTab", "Recent");
   // fetching pages from API
@@ -103,7 +105,7 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
-  const mobileTabList = (
+  const MobileTabList = () => (
     <Tab.List as="div" className="flex items-center justify-between border-b border-custom-border-200 px-3 pt-3 mb-4">
       <div className="flex flex-wrap items-center gap-4">
         {PAGE_TABS_LIST.map((tab) => (
@@ -166,25 +168,29 @@ const ProjectPagesPage: NextPageWithLayout = observer(() => {
                 }
               }}
             >
-              <div className="md:hidden">{mobileTabList}</div>
-              <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
-                <div className="flex flex-wrap items-center gap-4">
-                  {PAGE_TABS_LIST.map((tab) => (
-                    <Tab
-                      key={tab.key}
-                      className={({ selected }) =>
-                        `rounded-full border px-5 py-1.5 text-sm outline-none ${
-                          selected
-                            ? "border-custom-primary bg-custom-primary text-white"
-                            : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
-                        }`
-                      }
-                    >
-                      {tab.title}
-                    </Tab>
-                  ))}
-                </div>
-              </Tab.List>
+              {windowWidth < 768 ? (
+                <MobileTabList />
+              ) : (
+                <Tab.List as="div" className="mb-6 items-center justify-between hidden md:flex">
+                  <div className="flex flex-wrap items-center gap-4">
+                    {PAGE_TABS_LIST.map((tab) => (
+                      <Tab
+                        key={tab.key}
+                        className={({ selected }) =>
+                          `rounded-full border px-5 py-1.5 text-sm outline-none ${
+                            selected
+                              ? "border-custom-primary bg-custom-primary text-white"
+                              : "border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90"
+                          }`
+                        }
+                      >
+                        {tab.title}
+                      </Tab>
+                    ))}
+                  </div>
+                </Tab.List>
+              )}
+
               <Tab.Panels as={Fragment}>
                 <Tab.Panel as="div" className="h-full space-y-5 overflow-y-auto">
                   <RecentPagesList />