Ability to Represent Editor Content as Semantic HTML?

[Keshav-writes-code]

so, i am using the tailwind typography preset, and i want to use thier styles for heading, unordered lists, etc
but because the output html is a div heirarchy. which is hard to work with.

[jsimonrichard]

Sorry I didn't see this earlier.

Couldn't you use another markdown renderer to process the raw markdown text? ProseMark is just an editor, it isn't really meant to handle exporting.

[Keshav-writes-code]

Thanks, can also please guide me how can I change the Mardown renderer to give out semantic html (h1,H2,h3,ul,input type=checkbox, etc)

[jsimonrichard]

You'd have to use another tool, but there are lots of options. Maybe look into https://github.com/markdown-it/markdown-it or https://github.com/remarkjs/remark. Then you would get the text from the EditorState from CodeMirror, and pass it to one of those parsers.

[Keshav-writes-code]

no, i mean, i wanted the DOM that represents the Prosemark's WYSIWYG Editor (the content) to be in semantic html. it looks like it would just transforms the text from EditorState into semantic html but not actually use it for the actuall DOM

[lishaduck]

@Keshav-writes-code, do you want to give it a shot? I just skimmed the code and it doesn't seem that hard.

The functionality is in the toDom() methods.

Notably:

• imgs are already good
• hr is probably fine? (It's a <div><hr></div>)
• checkboxes are already <input>s
• blockquote should be pretty easy
• code needs some work, but shold be doable
• I'm not sure how ul would work... it's based on the bullet not the list itself 🤔
• I think that's it?

(Also, @jsimonrichard, I noticed a few instances of manual className manipulation in my skim, it might be easier to use classList?)

[Keshav-writes-code]

okay, i can try

[jsimonrichard]

Yeah, classList is probably better.

As for implementing semantic HTML, I think you should be able to do some of it with https://codemirror.net/docs/ref/#view.Decoration^mark^spec.tagName (i.e. use strong, em, h1, etc. ). However, you won't be able to use semantic html for content that spans multiple lines (e.g. lists) because each line is a separate DOM element in CodeMirror.

Edit: I'm not actually sure what the best way to handle headings is..., a mark Decoration might not cut it since headings are block elements.

[lishaduck]

Edit: I'm not actually sure what the best way to handle headings is..., a mark Decoration might not cut it since headings are block elements.

Wouldn't you just CSS it into an inline-block, or am I misunderstanding?

[jsimonrichard]

I was thinking about maybe using line decorations, but it doesn't look like they support changing the tag name. So yeah, inline-block it is. But that would only work for ATX headings, unless you're fine with having two heading elements for the Setext headings.

[lishaduck]

that would only work for ATX headings, unless you're fine with having two heading elements for the Setext headings.

Could you make the name the title element and the line below just a span?

[jsimonrichard]

You could, but it you're using tailwind typography to style the editor, the style wouldn't be applied to the line below. That's different from what I have right now, but maybe it's fine.

[lishaduck]

I mean, I'd expect the line to get rendered as a line, not a heading.
When I see setext headings, I think of wikipedia-style lines under the headings. You could perhaps even render it as an hr?

[jsimonrichard]

Actually, that syntax is only shown when editing the heading, like the # marks for ATX headings. But they retain their font size while being edited.

I don't think it's a big deal. Marking just the heading text with a heading tag is fine, I think.

[jsimonrichard]

@Keshav-writes-code are you still interested in implementing something for this issue? Or should I close it?