themagickoala / lexical-remark

This package contains Markdown helpers and functionality for Lexical using remark-parse.
MIT License
18 stars 3 forks source link

Question - usage with remark-gfm #8

Open robfig opened 1 year ago

robfig commented 1 year ago

Hi, thanks for the great project. I use remark-gfm to display markdown (via react-markdown) already, and I'm looking into importing the GFM to lexical now. The first thing I noticed was that I need to add a Handler for strikethrough, which looks to be pretty straightforward, but I thought it was worth asking if there's an existing lexical-remark-gfm thing already. If not, I guess the path is to write a handler for each one of the parts? Thanks!

robfig commented 1 year ago

Actually, looks like strikethrough is the only part of GFM that I need. Hm, I'm not sure how to apply the Handler approach to it yet though. I don't see an obvious analog to Emphasis https://github.com/syntax-tree/mdast-util-gfm-strikethrough https://github.com/micromark/micromark-extension-gfm-strikethrough

robfig commented 1 year ago

I tried this, but it didn't have an effect.

import { Delete } from "mdast";
import { Handler } from "lexical-remark";

export const strikethrough: Handler<Delete> = (node, parser) => {
  parser.formatting.push("strikethrough");
  node.children.forEach((child) => {
    parser.parse(child);
  });
  parser.formatting.pop();
};

...
          $convertFromMarkdownViaRemark(md, {
            handlers: {
              strikethrough,
            },
          });

I noticed that handlers is not actually hooked up to anything:

export function remarkLexify(handlers = {}) {
    const compiler = (tree) => {
        const parser = new Parser();
        return parser.parse(tree).getChildren();
    };
    Object.assign(this, { Compiler: compiler });
}
export function $convertFromMarkdownViaRemark(markdownString, options) {
    const root = lexical.$getRoot();
    root.clear();
    const file = unified()
        .use(remarkParse)
        .use(remarkYoutube)
        .use(remarkAttachment, { prefix: options?.attachmentPrefix ?? '' })
        .use(remarkLexify, options?.handlers)
        .processSync(markdownString);
    root.append(...file.result);
}