Add data-gutter on exporting CodeNode

[2wheeh]

Hi ! I came here to want to follow this : facebook/lexical#4743 (comment)

I found a way to set data-gutter without implementing a whole custom node:

• Allow overriding HTML serialization behavior from the editor config. facebook/lexical#4254

It can be easier with this feature like this

   html: {
      export: new Map([
        [
          CodeNode,
          (_, node) => {
            const element = document.createElement('pre');
            element.setAttribute('spellcheck', 'false');
            const language = node.getLanguage();

            if (language) {
              element.setAttribute('data-highlight-language', language);
            }

            const children = node.getChildren();
            const childrenLength = children.length;

            let gutter = '1';
            let count = 1;
            for (let i = 0; i < childrenLength; i++) {
              if ($isLineBreakNode(children[i])) {
                gutter += '\n' + ++count;
              }
            }

            element.setAttribute('data-gutter', gutter);

            return { element };
          },
        ],
      ]),
    },

[ibastawisi]

looks good to me, thanks.
by the way, why is this issue here and not on https://github.com/facebook/lexical?

[2wheeh]

@ibastawisi I just tried to find in which codebase you implement that and thought it is here. hope you don't mind it.

[ibastawisi]

@ibastawisi I just tried to find in which codebase you implement that and thought it is here. hope you don't mind it.

yeah no problem.
this editor config thing never worked for me!
I also needed to add syntax highlighting for c sharp, so I ended up copying the sources for the node and doing what I wanted.

[2wheeh]

btw for more language support, you just have to import prismjs sub package:

import 'prismjs/components/prism-csharp'

• Adding new language for code highlighting facebook/lexical#2176

[ibastawisi]

btw for more language support, you just have to import prismjs sub package:

import 'prismjs/components/prism-csharp'

• Adding new language for code highlighting facebook/lexical#2176

yeah that's what I did, thanks a lot.