How to create and toggle simple custom text format

[peppies]

I've been trying to set up a custom text format that works similarly to bold, italic, etc - basically it's similar to what a highlight format would do. Here is what I have so far, attempting to build a custom node:

export class SpoilerNode extends TextNode {
  static getType() { return 'spoiler'; }

  static clone(node) { return new SpoilerNode(node.__text, node.__key); }

  constructor(text, key) {
    super(text, key);
  }

  createDOM(config) {
    const span = super.createDOM(config);
    span.classList.add('spoiler-text');
    return span;
  }

  updateDOM(prevNode, dom, config) {
    return super.updateDOM(prevNode, dom, config);
  }

  static importJSON(serializedTextNode) {
    return new SpoilerNode(serializedTextNode.text);
  }

  exportJSON() {
    return {
      ...super.exportJSON(),
      type: 'tag',
    };
  }
}

export function $createSpoilerNode(text) {
  return new SpoilerNode(text);
}

export function isSpoilerNode(node) {
  return node instanceof SpoilerNode;
}


const exampleTheme = {
  text: {
    bold: 'editor-bold',
    italic: 'editor-italic',
    spoiler: 'spoiler-text'
  }
};
const config = {namespace: 'RichTextEditor',
  theme: exampleTheme,
  nodes: [SpoilerNode],
  onError: (error) => console.log(error)
};


function spoiler() { console.log('spoiler format button clicked');
  editor.update(() => {
    const selection = lex.$getSelection();
    if (lex.$isRangeSelection(selection)) {
      selection.formatText('spoiler');
    }
});
}

I've tried a variety of different codes, but can't quite figure it out. Am I supposed to be creating a custom Node for this? Basically, all I've been trying to do is create a <span> with a class name on it. Unfortunately, I can't find the source code for how bold and italic nodes are being created or how those get registered inside the formatText function, which seems to be what editor.dispatchCommand(lex.FORMAT_TEXT_COMMAND, 'bold'); is doing.

Or is there some built-in feature for this? I was thinking perhaps selection.formatText('spoiler'); would tie in with my editor theme variables and apply the class, but that doesn't do anything either. I'm thinking 'spoiler' needs to be registered somewhere like 'bold', 'italic', etc.

I'll eventually need to build a custom markdown transformer for this as well, but for now I'm just trying to get the format working first.

[etrepum]

There are no custom text formats in lexical, only exactly the formats supported in TextFormatType. If you were using TypeScript you'd get a compile time error on the formatText call. You could use one of the existing formats for this purpose if your app doesn't otherwise need it (e.g. strikethrough or code). Some of the formats are mutually exclusive, a TextNode can have at most one of lowercase, capitalize, or uppercase for example, or at most one of superscript or subscript.

What you implemented is a custom TextNode subclass, which is not a format. You'd need to write the code to do the "format" by replacing the TextNodes in the selection with your custom node.

Another option for implementing something like spoilers would be to wrap a custom ElementNode around it, especially if you have a need to obscure more than just text.

[peppies]

Thanks for pointing me in the right direction. I actually don't need the "highlight" text format, so I'll probably just use that and put a spoiler class on it via the theme configuration.

Is it possible to change the default markdown triggers for this? Such as changing it from "==" to "!!"?

I've tried doing something like this in my custom transformers page, which works with markdown -> rich text, but not from rich text -> markdown:

const HIGHLIGHT: TextFormatTransformer = {
  format: ['highlight'],
  tag: '!!',
  type: 'text-format',
};

I also tried the following to delete the default 'HIGHLIGHT' transformer and add the new one to a full list:

const = NEW_TRANSFORMERS = TRANSFORMERS.filter(item => item !== HIGHLIGHT); // <- delete existing default HIGHLIGHT transformer.

export const ALL_TRANSFORMERS = [...NEW_TRANSFORMERS, SUPERSCRIPT_CARET, TABLE, HIGHLIGHT];  //  <- Add new custom HIGHLIGHT transformer to final ALL_TRANSFORMERS export.

I get a HIGHLIGHT initiation error when I attempt to load up the JS on the browser though. Let me know what would be the correct way of going about this.

[etrepum]

Without seeing the exact code or error I'd have a hard time telling what you did wrong. Maybe you pasted the typescript code into a javascript file without removing the type annotation?

The order of the transformers can matter, so you might need to replace where it is, e.g. TRANSFORMERS.map((item) => item.type === 'text-format' && item.tag === '==' ? {...item, tag: '!!'} : item)

[peppies]

Thanks a lot, this works perfectly and is even more efficient.