how to change Lexical state format from number to text like bold,italic.... etc

[AlNahean]

I am actually actually trying to use the saved state from the database to generate React components. I am working on a way to convert the json state to components. But the text formatting is in numbers and a combination of numbers is always giving different number.

In the lexical json state the text formating is in number link 0,1,2 which represents bold, italic ..... etc and combination of all those. is there any way I can get the bold,italic directly instead on the number . Here is an example "children"

"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "color: #000000;background-color: #ffffff;",
"text": "Header 1",
"type": "text",
"version": 1
}
],

[sreehari-zaigo]

did you get solution for this ?

[H-Weisner]

Unfortunately there isn't anyway inside Lexical's API that I can see. Here is where the constants are defined, not the easiest to absorb at first glance:
https://github.com/facebook/lexical/blob/b11c595b367539219f9074c66b65f1a9af18a843/packages/lexical/src/LexicalConstants.ts

The formatting is dictated by a single byte using binary shift operations, i.e.:

export const IS_BOLD = 1;
export const IS_ITALIC = 1 << 1;
export const IS_STRIKETHROUGH = 1 << 2;
export const IS_UNDERLINE = 1 << 3;
export const IS_CODE = 1 << 4;
export const IS_SUBSCRIPT = 1 << 5;
export const IS_SUPERSCRIPT = 1 << 6;
export const IS_HIGHLIGHT = 1 << 7;

If you've not seen this syntax, as it's not common in your everyday js, it's essentially this:

0000 0001 = IS_BOLD
0000 0010 = IS_ITALIC
0000 0110 = IS_ITALIC, IS_STRIKETHROUGH
1100 0001 = IS_HIGHLIGHT, IS_SUPERSCRIPT, IS_BOLD

etc..
So when you see that format number, it's a byte displayed as a single decimal number:

...
"format": 0,
...

So "format":6 would be italic & strikethrough (0000 0110)

I've written a function to help fix to convert this into a false/true object for myself and for anyone who wants it:

//You can name these whatever you want
const states = {
    IS_BOLD: 1,
    IS_ITALIC: 1 << 1,
    IS_STRIKETHROUGH: 1 << 2,
    IS_UNDERLINE: 1 << 3,
    IS_CODE: 1 << 4,
    IS_SUBSCRIPT: 1 << 5,
    IS_SUPERSCRIPT: 1 << 6,
    IS_HIGHLIGHT: 1 << 7
};

const getFormattingStates = (decimalNumber) => {
    // Convert decimal number to binary string & then pad with leading 0s to make it byte in length
    const binaryString = decimalNumber.toString(2).padStart(8, '0');;
    // Define an object to store the formatting states
    const formattingStates = {};
    // Check each bit of the binary string and set the corresponding state to true if 1.
    for (let i = 0; i < binaryString.length; i++) {
            formattingStates [Object.keys(states)[i]] = (binaryString[i] === '1');
    }
    return formattingStates ;
}

Output is like this

getFormattingStates(51)
{
  IS_BOLD: false,
  IS_CODE: false,
  IS_HIGHLIGHT: true,
  IS_ITALIC: false,
  IS_STRIKETHROUGH: true,
  IS_SUBSCRIPT: false,
  IS_SUPERSCRIPT: true,
  IS_UNDERLINE: true
}

[H-Weisner]

Typescript where it doesn't add false values to the object (this is what I actually use in my project). Not the tidiest with the .reverse() but it's what I'm going with.

const getFormattingStates = (decimalNumber: number) => {
  // Convert decimal number to binary string & then pad with leading 0s to make it byte in length
  const binaryString = decimalNumber.toString(2).padStart(8, '0');
  // Define an object to store the formatting states
  const formattingStates: Record<keyof typeof states, boolean> = {} as Record<
    keyof typeof states,
    boolean
  >;
  // Check each bit of the binary string and set the corresponding state to true if 1.
  (Object.keys(states) as (keyof typeof states)[]).reverse().forEach((state, index) => {
    if (binaryString[index] === '1') {
      formattingStates[state] = true;
    }
  });
  return formattingStates;
}

[madeleinemila]

Hi there, I'm pretty new to Lexical but I stumbled on this thread while also learning how to compare the format number to format strings.

• Within the Lexical API, I found hasFormat fitted my usecase (might not work for you but thought I'd mention it for future travellers).
  https://lexical.dev/docs/api/classes/lexical.RangeSelection#hasformat
• If you need a standalone function like the one above, a more terse version can leverage the bitwise & operator 🙂

// Returns an object with format mapped to boolean
// e.g. getFormattingStates(2) returns {
//       IS_BOLD: false,
//       IS_ITALIC: true,
//       IS_STRIKETHROUGH: false,
//       IS_UNDERLINE: false,
//       IS_CODE: false,
//       IS_SUBSCRIPT: false,
//       IS_SUPERSCRIPT: false,
//       IS_HIGHLIGHT: false,
//   }
const getFormattingStates = (decimalNumber: number) =>
  Object.fromEntries(Object.entries(states).map(([k, v]) => [k, !!(v & decimalNumber)]));


// Returns object with only true values
// e.g. getFormattingStates(2) returns {
//       IS_ITALIC: true,
//   }
const getFormattingStates = (decimalNumber: number) =>
  Object.entries(states).reduce((acc, [k, v]) => (v & decimalNumber ? {...acc, [k]: true} : acc), {});

[H-Weisner]

Nice one!