feat: bold and underline
This commit is contained in:
Nevo David
parent
4079a42f09
commit
b939d00d46
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue