#js_contest_2025_r1

Animated Background Demo: Light & Dark Mode Support

#js_contest_2025_r1

BlockQuote Demo

● Enter & Backspace behavior (similar to Telegram Windows, with double Enter).
● Added support for nested entities with real-time markdown syntax.
● Automatically removes when empty (via Backspace or TextFormatter).

#js_contest_2025_r1

CodeBlock Demo

● Added real-time syntax highlighting for code content and language changes.
● Enter & Backspace behavior (similar to Telegram Windows).

#js_contest_2025_r1

Markdown Formatting Demo

● Auto-insert for markdown characters
● AST-based system
● Live markdown syntax previews on caret movement (like Obsidian)
● Delete key removes active block (CodeBlock | QuoteBlock)
● Real-time markdown syntax support

#js_contest_2025_r1

Nested Formatting Demo

#js_contest_2025_r2

TeleEditor

Examples:

// 1. Editor Initialization:
const editor = createEditor({ markdownEnabled, initialText, messageSendKeyCombo });

const folderEditor = createEditor({
    initialText: editor.getFormattedText(),
    ...editor.config,
    isInline: true
});

const folderEditorElement = (
    <div className="folder-message-input">
        <EditorContent teleEditor={folderEditor} />
    </div>
);

Examples:

// 2. Hooks & Events
const { isChanged } = useEditorContentChange(editor);
const { isLayoutChanged } = useEditorLayoutChange(editor); // (Ex: Blockquote Collapse/Expand)
const { isReady } = useEditorReady(editor);

useEffect(() => {
    if (!isReady) return;
    const unsub = editor.subscribe('contentchange', ({ source }) => {
        if (source !== 'history') {
            console.log("Content changed");
            editor.setup({ text: "Telegram is Great 💙" });
        }
    });
    return () => unsub();
}, [isReady]);

// 3. Helpers
TeleEditorHelper.insertEmoji(editor, apiSticker);
TeleEditorHelper.insertMention(editor, { username: "durov" });
TeleEditorHelper.applyFormattedText(editor, ApiMessageEntityType.Bold);

// 4. Transformers
const content = editor.getContentElement();
transformers.htmlToAST(content, { trackElements: true });
transformers.astToFormattedText(ast);
transformers.astToMarkdown(ast);