Bug: data-gutter not exported in <code/> after export to html about lexical

[2wheeh]

#4735 (comment)
Lexical team didn't want to expose data-gutter on purpose ...

There was a PR to replace data-gutter but found out not working on Firefox or Safari so PR just got closed (#4743).

Anyway, here is my workaround with HTMLconfig:

//  html-config.ts

import { $isLineBreakNode, type HTMLConfig } from 'lexical';
import { CodeNode } from '@lexical/code';
import { addClassNamesToElement } from '@lexical/utils';

// https://github.com/facebook/lexical/releases/tag/v0.12.3
// referenced an internal function updateCodeGutter in @lexical/code
// to keep 'data-gutter' on exported html.
export const htmlConfig: HTMLConfig = {
  export: new Map([
    [
      CodeNode,
      (editor, node) => {
        // TODO: remove assertion to CodeNode after lexical fixes the type for parameter
        // https://github.com/facebook/lexical/pull/5507
        const codeNode = node as CodeNode;
        const element = document.createElement('pre');
        addClassNamesToElement(element, editor._config.theme.code);
        element.setAttribute('spellcheck', 'false');
        const language = codeNode.getLanguage();

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

        const children = codeNode.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 };
      },
    ],
  ]),
};

// Editor.tsx
import { htmlConfig } from './html-config';

function Editor() {
  const initialConfig: InitialConfigType = {
    // .. other configs
    html: htmlConfig,
  };
  
  return (
    <>
      <LexicalComposer initialConfig={initialConfig}>
  // ...