How to build custom markdown transformer for superscript text?

[peppies]

From what I understand, Lexical does not have a transformer available to convert superscript text to markdown. So it sounds like I have to build a custom one. How do I do this?

This is what I have so far, based on what I found on Google:

const SUPERSCRIPT_TRANSFORMER: TextMatchTransformer = {
  format: 'superscript',
  tag: 'sup',
  trigger: '^'
};

const ALL_TRANSFORMERS = [TRANSFORMERS, SUPERSCRIPT_TRANSFORMER];

I keep getting errors in my console related to the custom transformer "const" not being defined properly. Google has given me other examples, some that look wildly complex, but don't work either, and others with depreciated code, etc.

I was hoping someone could guide me on the right way to create this custom transformer in 2025. Later on, I'll probably need to create others, such as for underlined text, spoiler text, text alignment, etc. I'm making some good progress with Lexical, pretty happy with it so far.

Thanks

[etrepum]

What you want is a TextFormatTransformer, look at the existing ones for examples for how it works, they are all defined in MarkdownTransformers.ts. Would look something like this:

export const SUPERSCRIPT_CARET: TextFormatTransformer = {
  format: ['superscript'],
  tag: '^',
  type: 'text-format',
};

Figuring out the rest is up to you.

[peppies]

Thanks for the quick reply and that file, it was very useful.

I was able to get that custom transform working. But I was unable to tie everything together with the main TRANSFORMERS. I can either get the main TRANSFORMERS working, or the SUPERSCRIPT_CARET working, but not both of them together.

I should note that I am not using a React server. I'm using a standalone app with vanilla JS. I've successfully used Rollup to bundle everything up into a JS file that I can use on my website. Here is what I have so far.

src/customTransformers.ts:

import {TRANSFORMERS, TextFormatTransformer} from '@lexical/markdown';

const SUPERSCRIPT_CARET: TextFormatTransformer = {
  format: ['superscript'],
  tag: '^',
  type: 'text-format',
};

export const ALL_TRANSFORMERS = [TRANSFORMERS, SUPERSCRIPT_CARET];

src/main.js:

import { createEditor, FORMAT_TEXT_COMMAND, $getRoot, UNDO_COMMAND, REDO_COMMAND, FORMAT_ELEMENT_COMMAND, $getSelection, $isRangeSelection, INSERT_PARAGRAPH_COMMAND, createCommand, $createParagraphNode, $createTextNode, $insertNodes} from 'lexical';
import { registerRichText, HeadingNode, QuoteNode, $createQuoteNode, $isQuoteNode } from '@lexical/rich-text';
import { $getNearestNodeOfType} from '@lexical/utils';
import { $setBlocksType } from '@lexical/selection';
import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
import { createHeadlessEditor } from '@lexical/headless';
import { $convertToMarkdownString, $convertFromMarkdownString, registerMarkdownShortcuts, TRANSFORMERS } from '@lexical/markdown';
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { ListNode, ListItemNode } from "@lexical/list";
import { TableNode, TableCellNode, TableRowNode, INSERT_TABLE_COMMAND } from "@lexical/table";
import { CodeNode, $isCodeNode, $createCodeNode } from "@lexical/code";
import { createEmptyHistoryState, registerHistory } from '@lexical/history';

import { ALL_TRANSFORMERS } from './customTransformers.ts';

//const ALL_TRANSFORMERS = [TRANSFORMERS];  Even this won't work!!

export { createEditor , $getRoot, registerRichText , HeadingNode, QuoteNode, FORMAT_TEXT_COMMAND , FORMAT_ELEMENT_COMMAND , $generateHtmlFromNodes , createHeadlessEditor , $convertToMarkdownString , $convertFromMarkdownString, registerMarkdownShortcuts, AutoLinkNode, LinkNode, ListNode, ListItemNode, TableNode, TableCellNode, TableRowNode, CodeNode , createEmptyHistoryState , registerHistory, UNDO_COMMAND, REDO_COMMAND , $getSelection, $isRangeSelection, $createQuoteNode, $setBlocksType, INSERT_PARAGRAPH_COMMAND, $isQuoteNode, createCommand, $createParagraphNode, $getNearestNodeOfType, $isCodeNode, $createCodeNode, $createTextNode, INSERT_TABLE_COMMAND, $insertNodes, ALL_TRANSFORMERS};

Webapp:

editor.update(() => {
    lex.$convertFromMarkdownString(editor2.value, lex.ALL_TRANSFORMERS, lex.$getRoot());
  });

The superscript markdown transfer actually works. But the rest of the default ones like bold, italic, etc no longer work. It's as if the ALL_TRANSFORMERS array is simply ignoring the original TRANSFORMERS.

I also tried a simple test from the main.js file: const ALL_TRANSFORMERS = [TRANSFORMERS]; and that also fails. From all the examples I've seen on Google, it seems like this should work. What am I doing wrong?

[etrepum]

Your problem is that you're not using typescript so you're making lots of mistakes that the type checker would easily catch for you.

const ALL_TRANSFORMERS = [...TRANSFORMERS, SUPERSCRIPT_CARET];

[peppies]

Thanks for the help, I really appreciate it. I read more about the three dot (spread) operator with typescript. I also had to tweak the import/exports around with my script files and now everything is working great!

[etrepum]

the spread operator is in javascript too, you were using an array of arrays instead of an array.

Incorrect usage:

const ALL_TRANSFORMERS = [[transformer1, transformer2], transformer3];

Correct usage:

const ALL_TRANSFORMERS = [transformer1, transformer2, transformer3];

The spread operator is just a concise way to create an array from another array, there are of course other ways to do it.