Skip to content

Commit

Permalink
added more formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@akanshaaa19
akanshaaa19 committed Feb 14, 2025
1 parent 3a1f3b2 commit 4f1bf26
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 40 deletions.
10 changes: 7 additions & 3 deletions src/common/RichEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,14 @@ export const handleFormatterEvents = (event: KeyboardEvent) => {
export const handleFormatting = (text: string = '', formatter: string) => {
switch (formatter) {
case 'bold':
return `*${text}*`;
return text.startsWith('*') && text.endsWith('*') ? text.slice(1, -1) : `*${text}*`;
case 'italic':
return `_${text}_`;
return text.startsWith('_') && text.endsWith('_') ? text.slice(1, -1) : `_${text}_`;
case 'strikethrough':
return `~${text}~`;
return text.startsWith('~') && text.endsWith('~') ? text.slice(1, -1) : `~${text}~`;
case 'code':
return text.startsWith('`') && text.endsWith('`') ? text.slice(1, -1) : `\`${text}\``;

default:
return text;
}
Expand Down Expand Up @@ -96,6 +99,7 @@ const showLivePreview = (format: any) => {
formatObject = whatsappStyles(formatObject, '_', '<i>', '</i>');
formatObject = whatsappStyles(formatObject, '*', '<b>', '</b>');
formatObject = whatsappStyles(formatObject, '~', '<s>', '</s>');
formatObject = whatsappStyles(formatObject, '`', '<code>', '</code>');
formatObject = formatObject.replace(/\n/gi, '<br>');
return formatObject;
};
Expand Down
1 change: 1 addition & 0 deletions src/components/UI/Form/EmojiInput/Editor.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@
border-top-right-radius: 10px;
display: flex;
padding: 0.2rem;
justify-content: flex-end;
}

.FormatingOptions span {
Expand Down
75 changes: 38 additions & 37 deletions src/components/UI/Form/EmojiInput/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ import {
BeautifulMentionsMenuItemProps,
} from 'lexical-beautiful-mentions';
import { handleFormatterEvents, handleFormatting, setDefaultValue } from 'common/RichEditor';
import { FormatBold, FormatItalic, StrikethroughS } from '@mui/icons-material';
import { FormatBold, FormatItalic, StrikethroughS, Code } from '@mui/icons-material';
import { mergeRegister } from '@lexical/utils';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';

export interface EditorProps {
field: { name: string; onChange?: any; value: any; onBlur?: any };
Expand Down Expand Up @@ -76,33 +75,33 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
return false;
},
COMMAND_PRIORITY_LOW
)
// editor.registerCommand(
// FORMAT_TEXT_COMMAND,
// (event: any) => {
// editor.update(() => {
// const selection = $getSelection();
// const text = handleFormatting(selection?.getTextContent(), event);
),
editor.registerCommand(
FORMAT_TEXT_COMMAND,
(event: any) => {
editor.update(() => {
const selection = $getSelection();
const text = handleFormatting(selection?.getTextContent(), event);

Check warning on line 84 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L82-L84 

Added lines #L82 - L84 were not covered by tests

// if (!selection?.getTextContent()) {
// const newNode = $createTextNode(text);
// selection?.insertNodes([newNode]);
if (!selection?.getTextContent()) {
const newNode = $createTextNode(text);
selection?.insertNodes([newNode]);

Check warning on line 88 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L87-L88 

Added lines #L87 - L88 were not covered by tests

// const newSelection = $createRangeSelection();
// newSelection.anchor.set(newNode.getKey(), 1, 'text');
// newSelection.focus.set(newNode.getKey(), 1, 'text');
// $setSelection(newSelection);
// }
// if (selection?.getTextContent() && event) {
// const newNode = $createTextNode(text);
// selection?.insertNodes([newNode]);
// editor.focus();
// }
// });
// return false;
// },
// COMMAND_PRIORITY_LOW
// )
const newSelection = $createRangeSelection();
newSelection.anchor.set(newNode.getKey(), 1, 'text');
newSelection.focus.set(newNode.getKey(), 1, 'text');
$setSelection(newSelection);

Check warning on line 93 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L90-L93 

Added lines #L90 - L93 were not covered by tests
}
if (selection?.getTextContent() && event) {
const newNode = $createTextNode(text);
selection?.insertNodes([newNode]);
editor.focus();

Check warning on line 98 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L96-L98 

Added lines #L96 - L98 were not covered by tests
}
});
return false;

Check warning on line 101 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L101 

Added line #L101 was not covered by tests
},
COMMAND_PRIORITY_LOW
)
);
}, [editor]);

Expand All @@ -121,7 +120,6 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
}
});
};
// console.log(editor.ge);

const [activeFormats, setActiveFormats] = useState<{ bold: boolean; italic: boolean; strikethrough: boolean }>({
bold: false,
Expand All @@ -148,13 +146,10 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
}

const textContent = anchorNode.getTextContent();
const textFormat = anchorNode.getFormat(); // 🔥 Detects Lexical's internal formatting
console.log(textFormat);

// Regex patterns for formatting
const boldRegex = /\*(?:\S.*?\S|\S)\*/g; // Correctly detects *bold*
const italicRegex = /_(.*?)_/g; // Matches _italic_
const strikethroughRegex = /~(.*?)~/g; // Matches ~~strikethrough~~
const boldRegex = /\*(?:\S.*?\S|\S)\*/g;
const italicRegex = /_(.*?)_/g;
const strikethroughRegex = /~(.*?)~/g;

const isInsideFormat = (regex: RegExp) => {
let match;
Expand All @@ -167,7 +162,6 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
}
return false;
};
// console.log(isInsideFormat(boldRegex));

setActiveFormats({
bold: isInsideFormat(boldRegex),
Expand All @@ -188,7 +182,6 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
removeListener();
};
}, [editor]);
// console.log(activeFormats);

return (
<>
Expand Down Expand Up @@ -218,9 +211,17 @@ export const Editor = ({ disabled = false, ...props }: EditorProps) => {
>
<StrikethroughS fontSize="small" color="inherit" />
</span>
<span
className={activeFormats.strikethrough ? styles.Active : ''}
onClick={() => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');

Check warning on line 217 in src/components/UI/Form/EmojiInput/Editor.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/UI/Form/EmojiInput/Editor.tsx#L217 

Added line #L217 was not covered by tests
}}
>
<Code fontSize="small" color="inherit" />
</span>
</div>
<div className={disabled ? styles?.disabled : styles.Editor} data-testid="resizer">
<RichTextPlugin
<PlainTextPlugin
placeholder={<Placeholder />}
contentEditable={
<div className={styles.editorScroller}>
Expand Down

0 comments on commit 4f1bf26

Please sign in to comment.