Writing a custom renderer for the Editorjs block api

[josegonzalez]

Hi all! I've been working on a tool to allow me to edit markdown using editorjs. They have a block api that looks something like the following:

[
  {
    "type": "header",
    "data": {
      "level": 2,
      "text": "Errata"
    }
  },
  {
    "type": "paragraph",
    "data": {
      "text": "Some text in a paragraph"
    }
  },
  {
    "type": "delimiter",
    "data": {}
  },
  {
    "type": "quote",
    "data": {
      "alignment": "left",
      "caption": "Amazing Quoted Person",
      "text": "This is a quote"
    }
  }
]

There's a decent number of supported block types - enough to span the markdown spec imo - and so my current task has been to try and convert markdown to the block api.

Currently I'm doing by walking the ast. The code for it is here. The general pattern is below:

// ParseMarkdownToBlocks converts Markdown content into structured blocks.
func ParseMarkdownToBlocks(markdown string, opts ...ParseOption) ([]blocks.Block, error) {
	config := &ParseConfig{
		MaxDepth:            5,      // Default max depth for lists
		QuoteCaptionAlign:   "left", // Default alignment for quote captions
		TableStretched:      false,  // Default for table stretching
		ImageStretched:      false,  // Default for image stretching
		ImageWithBorder:     false,  // Default for image border
		ImageWithBackground: false,  // Default for image background
	}

	for _, opt := range opts {
		opt(config)
	}

	var blocks []blocks.Block

	reader := text.NewReader([]byte(markdown))
	document := MarkdownParser.Parser().Parse(reader)

	// Walk the AST to extract blocks
	err := ast.Walk(document, func(node ast.Node, entering bool) (ast.WalkStatus, error) {
		if !entering {
			return ast.WalkContinue, nil
		}

		block, walkStatus, handled := processNode(node, markdown, config)
		if handled {
			blocks = append(blocks, block)
		}

		return walkStatus, nil
	})

	if err != nil {
		return nil, err
	}

	return blocks, nil
}

// processNode routes the processing of an AST node to the appropriate handler.
func processNode(node ast.Node, markdown string, config *ParseConfig) (blocks.Block, ast.WalkStatus, bool) {
	switch n := node.(type) {
	case *ast.Heading:
		return handleHeading(n, markdown), ast.WalkContinue, true
	case *ast.ThematicBreak:
		return handleDelimiter(), ast.WalkContinue, true
	case *ast.List:
		return handleList(n, markdown, config), ast.WalkSkipChildren, true
	case *ast.CodeBlock:
		return handleCodeBlock(n, markdown), ast.WalkContinue, true
	case *ast.FencedCodeBlock:
		return handleFencedCodeBlock(n, markdown), ast.WalkContinue, true
	case *ast.Blockquote:
		return handleBlockquote(n, markdown, config), ast.WalkSkipChildren, true
	case *ast.HTMLBlock:
		return handleHTMLBlock(n, markdown, config), ast.WalkContinue, true
	case *east.Table:
		return handleTable(n, markdown, config), ast.WalkContinue, true
	case *ast.Paragraph:
		return handleParagraph(n, markdown, config), ast.WalkContinue, true
	default:
		return blocks.Block{}, ast.WalkContinue, false
	}
}

func handleDelimiter() blocks.Block {
	return blocks.Block{
		Type: "delimiter",
		Data: map[string]interface{}{},
	}
}

Leaf and container markdown blocks convert basically immediately to the underlying spec, and anything inline just gets converted to html. That said, this breaks down with lists that have embedded fenced blocks, probably due to how I'm extracting the node element (code below). There are almost certainly other edge-cases it fails at too.

func extractNodeText(node ast.Node, fullMarkdownDocument string) string {
	var buf bytes.Buffer
	if node.Type() == ast.TypeBlock {
		if node.Lines() == nil {
			return ""
		}

		lines := node.Lines()
		for i := 0; i < lines.Len(); i++ {
			line := lines.At(i)
			buf.Write(line.Value([]byte(fullMarkdownDocument)))
		}
		buf.WriteString("\n")
	}

	if node.Kind() != ast.KindList {
		for c := node.FirstChild(); c != nil; c = c.NextSibling() {
			buf.Write([]byte(extractNodeText(c, fullMarkdownDocument)))
			buf.WriteString("\n")
		}
	}

	return strings.Trim(buf.String(), "\n")
}

I think, therefore, that my method of parsing the markdown doc with goldmark is invalid, and was thinking that writing a real renderer might be better. Not sure how far off the mark I am with my method, but would someone be willing to walk me through a skeleton of what I'm trying to attempt?