Skip to content

feat: add more text formats to telegram editor #1499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pottycat wants to merge 7 commits into
base: main
Choose a base branch
from
+501 −29
Open

feat: add more text formats to telegram editor #1499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
18805ef
feat: add more text formats to telegram editor
pottycat May 7, 2026
3b4f256
chore: remove unnecessary console.log & format code
pottycat May 7, 2026
6ccd9d1
chore: fix blockquote & Link bug
pottycat May 7, 2026
0795521
chore: utilise existing AComponent for link insertion
pottycat May 7, 2026
9e6bfa6
text formats available to all providers
pottycat May 14, 2026
f9a0021
align text formats
pottycat May 14, 2026
00a29cf
fix: handle multiline content in convertToAscii
pottycat May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions apps/frontend/src/components/new-launch/blockquote.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { FC } from 'react';

export const BlockquoteText: FC<{
editor: any;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.toggleBlockquote();
editor?.commands?.focus();
};
return (
<div
data-tooltip-id="tooltip"
data-tooltip-content="Blockquote"
onClick={mark}
className="select-none cursor-pointer rounded-[6px] w-[30px] h-[30px] bg-newColColor flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M2.66699 6.00033C2.66699 4.52757 3.86090 3.33366 5.33366 3.33366H5.66699C6.03518 3.33366 6.33366 3.63214 6.33366 4.00033C6.33366 4.36852 6.03518 4.66699 5.66699 4.66699H5.33366C4.59728 4.66699 4.00033 5.26395 4.00033 6.00033V6.33366H5.66699C6.03518 6.33366 6.33366 6.63214 6.33366 7.00033V10.667C6.33366 11.0352 6.03518 11.3337 5.66699 11.3337H2.66699C2.29880 11.3337 2.00033 11.0352 2.00033 10.667V6.00033H2.66699ZM2.00033 6.00033H2.66699"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.33366 6.00033C9.33366 4.52757 10.5276 3.33366 12.0003 3.33366H12.3337C12.7018 3.33366 13.0003 3.63214 13.0003 4.00033C13.0003 4.36852 12.7018 4.66699 12.3337 4.66699H12.0003C11.2640 4.66699 10.667 5.26395 10.667 6.00033V6.33366H12.3337C12.7018 6.33366 13.0003 6.63214 13.0003 7.00033V10.667C13.0003 11.0352 12.7018 11.3337 12.3337 11.3337H9.33366C8.96547 11.3337 8.66699 11.0352 8.66699 10.667V6.00033H9.33366ZM8.66699 6.00033H9.33366"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
};
1 change: 0 additions & 1 deletion apps/frontend/src/components/new-launch/bold.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export const BoldText: FC<{
currentValue: string;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.unsetUnderline();
editor?.commands?.toggleBold();
editor?.commands?.focus();
};
Expand Down
34 changes: 34 additions & 0 deletions apps/frontend/src/components/new-launch/code.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { FC } from 'react';

export const CodeText: FC<{
editor: any;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.toggleCode();
editor?.commands?.focus();
};
return (
<div
data-tooltip-id="tooltip"
data-tooltip-content="Code Text"
onClick={mark}
className="select-none cursor-pointer rounded-[6px] w-[30px] h-[30px] bg-newColColor flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.33333 5.33301L2 7.99967L5.33333 10.6663M10.6667 5.33301L14 7.99967L10.6667 10.6663"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
};
28 changes: 27 additions & 1 deletion apps/frontend/src/components/new-launch/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ import EmojiPicker from 'emoji-picker-react';
import { Theme } from 'emoji-picker-react';
import { BoldText } from '@gitroom/frontend/components/new-launch/bold.text';
import { UText } from '@gitroom/frontend/components/new-launch/u.text';
import { ItalicText } from '@gitroom/frontend/components/new-launch/italic.text';
import { CodeText } from '@gitroom/frontend/components/new-launch/code.text';
import { StrikeText } from '@gitroom/frontend/components/new-launch/strike.text';
import { BlockquoteText } from '@gitroom/frontend/components/new-launch/blockquote.text';
import { SignatureBox } from '@gitroom/frontend/components/signature';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
import {
Expand Down Expand Up @@ -45,6 +49,10 @@ import Bold from '@tiptap/extension-bold';
import Text from '@tiptap/extension-text';
import Paragraph from '@tiptap/extension-paragraph';
import Underline from '@tiptap/extension-underline';
import Italic from '@tiptap/extension-italic';
import Code from '@tiptap/extension-code';
import Strike from '@tiptap/extension-strike';
import Blockquote from '@tiptap/extension-blockquote';
import { stripHtmlValidation } from '@gitroom/helpers/utils/strip.html.validation';
import { History } from '@tiptap/extension-history';
import { BulletList, ListItem } from '@tiptap/extension-list';
Expand Down Expand Up @@ -788,8 +796,22 @@ export const Editor: FC<{
editor={editorRef?.current?.editor}
currentValue={props.value!}
/>
<ItalicText editor={editorRef?.current?.editor} />
<StrikeText editor={editorRef?.current?.editor} />
<BlockquoteText editor={editorRef?.current?.editor} />
<CodeText editor={editorRef?.current?.editor} />
</>
)}
{/* link insertion may not work on all providers e.g insta, x, facebook */}
{(editorType === 'html' || editorType === 'markdown') &&
identifier === 'telegram' && (
Comment on lines +801 to +807
Copy link
Copy Markdown

@sentry sentry Bot May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The blockquote button is incorrectly enabled for non-Telegram providers, causing text to be converted to full-width Unicode characters when posted.
Severity: HIGH

Suggested Fix

Conditionally render the blockquote button to only appear for editors where it is semantically supported, such as Telegram. This can be achieved by moving the button inside the identifier === 'telegram' check, similar to how the link insertion button is handled.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: apps/frontend/src/components/new-launch/editor.tsx#L800-L806

Potential issue: The blockquote formatting button has been made available for all editor
types, including 'normal' editors used for platforms like X, Instagram, and LinkedIn.
However, the underlying implementation for these platforms was not updated to support
blockquotes. When a user applies blockquote formatting, the content is processed by
`convertToAscii`, which converts the text within `<blockquote>` tags into full-width
Unicode characters (e.g., 'a' becomes 'ａ'). This results in posts with garbled,
unintended text on platforms that do not have native blockquote support, as the feature
was only intended to work for Telegram.

Also affects:

  • libraries/helpers/src/utils/strip.html.validation.ts:581~586

Copy link
Copy Markdown
Author

@pottycat pottycat May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nevo-david I am facing confusion about placement of text format buttons. I am thinking about placing Bold, Italic and Underline in global mode. Strikethrough, Blockquote, and Code in editorType html or mardown. The link insertion button on Telegram only.

Copy link
Copy Markdown
Author

@pottycat pottycat May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nevo-david I am facing confusion about placement of text format buttons. I am thinking about placing Bold, Italic and Underline in global mode. Strikethrough, Blockquote, and Code in editorType html or mardown. The link insertion button on Telegram only.

I have placed all Bold, Italic, Underline, Strikethough, Blockquote and Code in global mode because it is converted into ASCII which is rendered well in all the platform. The link insertion is only available to Telegram for the moment. I am thinking about raising a separate PR for including link insertion options to all the platform that supports it in message.

<>
<AComponent
editor={editorRef?.current?.editor}
currentValue={props.value!}
/>
</>
)}
{(editorType === 'markdown' || editorType === 'html') &&
Comment on lines 796 to 815

This comment was marked as outdated.

Sign in to view

identifier !== 'telegram' && (
<>
Expand Down Expand Up @@ -911,6 +933,10 @@ export const OnlyEditor = forwardRef<
Text,
Underline,
Bold,
Italic,
Code,
Strike,
Blockquote,
InterceptBoldShortcut,
InterceptUnderlineShortcut,
BulletList,
Expand All @@ -921,7 +947,7 @@ export const OnlyEditor = forwardRef<
}),
...(editorType === 'html' || editorType === 'markdown'
? [
Link.configure({
Link.extend({ inclusive: false }).configure({
openOnClick: false,
autolink: true,
defaultProtocol: 'https',
Expand Down
34 changes: 34 additions & 0 deletions apps/frontend/src/components/new-launch/italic.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { FC } from 'react';

export const ItalicText: FC<{
editor: any;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.toggleItalic();
editor?.commands?.focus();
};
return (
<div
data-tooltip-id="tooltip"
data-tooltip-content="Italic Text"
onClick={mark}
className="select-none cursor-pointer rounded-[6px] w-[30px] h-[30px] bg-newColColor flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M10 2.66699H6.66667M9.33333 13.3337H6M8.66667 2.66699L7.33333 13.3337"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
};
34 changes: 34 additions & 0 deletions apps/frontend/src/components/new-launch/strike.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { FC } from 'react';

export const StrikeText: FC<{
editor: any;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.toggleStrike();
editor?.commands?.focus();
};
return (
<div
data-tooltip-id="tooltip"
data-tooltip-content="Strike Text"
onClick={mark}
className="select-none cursor-pointer rounded-[6px] w-[30px] h-[30px] bg-newColColor flex justify-center items-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M2 8H14M5.33333 5.33301C5.33333 3.86025 6.52724 2.66634 8 2.66634C9.47276 2.66634 10.6667 3.86025 10.6667 5.33301C10.6667 6.80577 9.47276 8.00033 8 8.00033M8 8.00033C9.47276 8.00033 10.6667 9.19423 10.6667 10.667C10.6667 12.1397 9.47276 13.3337 8 13.3337C6.52724 13.3337 5.33333 12.1397 5.33333 10.667"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
);
};
5 changes: 2 additions & 3 deletions apps/frontend/src/components/new-launch/u.text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,8 @@ export const UText: FC<{
currentValue: string;
}> = ({ editor }) => {
const mark = () => {
editor?.commands?.unsetBold();
editor?.commands?.toggleUnderline();
editor?.commands?.focus();
editor?.commands?.toggleUnderline();
editor?.commands?.focus();
};
return (
<div
Expand Down
Loading