From b939d00d46b9de2f45b8f06c6ccf1d75b60cc351 Mon Sep 17 00:00:00 2001
From: Nevo David <me@nevos.io>
Date: Fri, 27 Dec 2024 18:54:06 +0700
Subject: [PATCH] feat: bold and underline

---
 .../src/components/launches/bold.text.tsx     | 94 +++++++++++++++++++
 .../src/components/launches/editor.tsx        | 16 +++-
 .../src/components/launches/u.text.tsx        | 93 ++++++++++++++++++
 3 files changed, 200 insertions(+), 3 deletions(-)
 create mode 100644 apps/frontend/src/components/launches/bold.text.tsx
 create mode 100644 apps/frontend/src/components/launches/u.text.tsx

diff --git a/apps/frontend/src/components/launches/bold.text.tsx b/apps/frontend/src/components/launches/bold.text.tsx
new file mode 100644
index 00000000..cfecf19c
--- /dev/null
+++ b/apps/frontend/src/components/launches/bold.text.tsx
@@ -0,0 +1,94 @@
+import { FC, useCallback } from 'react';
+import { Editor, Transforms } from 'slate';
+
+const originalMap = {
+  a: '𝗮',
+  b: '𝗯',
+  c: '𝗰',
+  d: '𝗱',
+  e: '𝗲',
+  f: '𝗳',
+  g: '𝗴',
+  h: '𝗵',
+  i: '𝗶',
+  j: '𝗷',
+  k: '𝗸',
+  l: '𝗹',
+  m: '𝗺',
+  n: '𝗻',
+  o: '𝗼',
+  p: '𝗽',
+  q: '𝗾',
+  r: '𝗿',
+  s: '𝘀',
+  t: '𝘁',
+  u: '𝘂',
+  v: '𝘃',
+  w: '𝘄',
+  x: '𝘅',
+  y: '𝘆',
+  z: '𝘇',
+  A: '𝗔',
+  B: '𝗕',
+  C: '𝗖',
+  D: '𝗗',
+  E: '𝗘',
+  F: '𝗙',
+  G: '𝗚',
+  H: '𝗛',
+  I: '𝗜',
+  J: '𝗝',
+  K: '𝗞',
+  L: '𝗟',
+  M: '𝗠',
+  N: '𝗡',
+  O: '𝗢',
+  P: '𝗣',
+  Q: '𝗤',
+  R: '𝗥',
+  S: '𝗦',
+  T: '𝗧',
+  U: '𝗨',
+  V: '𝗩',
+  W: '𝗪',
+  X: '𝗫',
+  Y: '𝗬',
+  Z: '𝗭',
+  '1': '𝟭',
+  '2': '𝟮',
+  '3': '𝟯',
+  '4': '𝟰',
+  '5': '𝟱',
+  '6': '𝟲',
+  '7': '𝟳',
+  '8': '𝟴',
+  '9': '𝟵',
+  '0': '𝟬',
+};
+
+export const BoldText: FC<{ editor: any; currentValue: string }> = ({
+  editor,
+}) => {
+  const mark = () => {
+    const selectedText = Editor.string(editor, editor.selection);
+
+    const newText = (
+      !selectedText ? prompt('What do you want to write?') || '' : selectedText
+    )
+      .split('')
+      // @ts-ignore
+      .map((char) => originalMap?.[char] || char)
+      .join('');
+
+    Transforms.insertText(editor, newText);
+  };
+
+  return (
+    <div
+      onClick={mark}
+      className="select-none cursor-pointer bg-customColor2 w-[40px] p-[5px] text-center rounded-tl-lg rounded-tr-lg"
+    >
+      B
+    </div>
+  );
+};
diff --git a/apps/frontend/src/components/launches/editor.tsx b/apps/frontend/src/components/launches/editor.tsx
index 6775206c..39131433 100644
--- a/apps/frontend/src/components/launches/editor.tsx
+++ b/apps/frontend/src/components/launches/editor.tsx
@@ -9,6 +9,8 @@ import { makeId } from '@gitroom/nestjs-libraries/services/make.is';
 import { Transforms } from 'slate';
 import EmojiPicker from 'emoji-picker-react';
 import { Theme } from 'emoji-picker-react';
+import { BoldText } from '@gitroom/frontend/components/launches/bold.text';
+import { UText } from '@gitroom/frontend/components/launches/u.text';
 
 export const Editor = forwardRef<
   RefMDEditor,
@@ -24,7 +26,7 @@ export const Editor = forwardRef<
   ) => {
     const user = useUser();
     const [id] = useState(makeId(10));
-    const newRef = useRef(null);
+    const newRef = useRef<any>(null);
     const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
 
     useCopilotReadable({
@@ -56,7 +58,15 @@ export const Editor = forwardRef<
 
     return (
       <>
-        <div className="flex justify-end -mt-[30px]">
+        <div className="flex gap-[5px] justify-end -mt-[30px]">
+          <UText
+            editor={newRef?.current?.editor!}
+            currentValue={props.value!}
+          />
+          <BoldText
+            editor={newRef?.current?.editor!}
+            currentValue={props.value!}
+          />
           <div
             className="select-none cursor-pointer bg-customColor2 w-[40px] p-[5px] text-center rounded-tl-lg rounded-tr-lg"
             onClick={() => setEmojiPickerOpen(!emojiPickerOpen)}
@@ -66,7 +76,7 @@ export const Editor = forwardRef<
         </div>
         <div className="absolute z-[200] right-0">
           <EmojiPicker
-            theme={localStorage.getItem('mode') as Theme || Theme.DARK}
+            theme={(localStorage.getItem('mode') as Theme) || Theme.DARK}
             onEmojiClick={(e) => {
               addText(e.emoji);
               setEmojiPickerOpen(false);
diff --git a/apps/frontend/src/components/launches/u.text.tsx b/apps/frontend/src/components/launches/u.text.tsx
new file mode 100644
index 00000000..cfeb7524
--- /dev/null
+++ b/apps/frontend/src/components/launches/u.text.tsx
@@ -0,0 +1,93 @@
+import { FC, useCallback } from 'react';
+import { Editor, Transforms } from 'slate';
+
+const underlineMap = {
+  "a": "a̲",
+  "b": "b̲",
+  "c": "c̲",
+  "d": "d̲",
+  "e": "e̲",
+  "f": "f̲",
+  "g": "g̲",
+  "h": "h̲",
+  "i": "i̲",
+  "j": "j̲",
+  "k": "k̲",
+  "l": "l̲",
+  "m": "m̲",
+  "n": "n̲",
+  "o": "o̲",
+  "p": "p̲",
+  "q": "q̲",
+  "r": "r̲",
+  "s": "s̲",
+  "t": "t̲",
+  "u": "u̲",
+  "v": "v̲",
+  "w": "w̲",
+  "x": "x̲",
+  "y": "y̲",
+  "z": "z̲",
+  "A": "A̲",
+  "B": "B̲",
+  "C": "C̲",
+  "D": "D̲",
+  "E": "E̲",
+  "F": "F̲",
+  "G": "G̲",
+  "H": "H̲",
+  "I": "I̲",
+  "J": "J̲",
+  "K": "K̲",
+  "L": "L̲",
+  "M": "M̲",
+  "N": "N̲",
+  "O": "O̲",
+  "P": "P̲",
+  "Q": "Q̲",
+  "R": "R̲",
+  "S": "S̲",
+  "T": "T̲",
+  "U": "U̲",
+  "V": "V̲",
+  "W": "W̲",
+  "X": "X̲",
+  "Y": "Y̲",
+  "Z": "Z̲",
+  "1": "1̲",
+  "2": "2̲",
+  "3": "3̲",
+  "4": "4̲",
+  "5": "5̲",
+  "6": "6̲",
+  "7": "7̲",
+  "8": "8̲",
+  "9": "9̲",
+  "0": "0̲",
+};
+export const UText: FC<{ editor: any; currentValue: string }> = ({
+  editor,
+}) => {
+  const mark = () => {
+    const selectedText = Editor.string(editor, editor.selection);
+
+    const newText = (
+      !selectedText ? prompt('What do you want to write?') || '' : selectedText
+    )
+      .split('')
+      // @ts-ignore
+      .map((char) => underlineMap?.[char] || char)
+      .join('');
+
+    Transforms.insertText(editor, newText);
+  };
+
+  return (
+    <div
+      onClick={mark}
+      className="select-none cursor-pointer bg-customColor2 w-[40px] p-[5px] text-center rounded-tl-lg rounded-tr-lg"
+    >
+      U
+    </div>
+  );
+};