halcwb
commented
2 years ago P.S. The biggest breaking change is that source is not children. Also, for renderers the term is know components
P.S. These are some of the changes I manually added to my project in order to get markdown running again:
namespace Feliz.Markdown
open Feliz
open Fable.Core
open Fable.Core.JsInterop
type ITextProperties =
abstract children: string
type IParagraphProperties =
abstract children: ReactElement []
type ILinkProperties =
abstract href: string
abstract children: ReactElement []
type IHeadingProperties =
abstract level: int
abstract children: ReactElement []
type ITableProperties =
abstract children: ReactElement []
type ITableHeadProperties =
abstract children: ReactElement []
type ITableBodyProperties =
abstract children: ReactElement []
type ITableRowProperties =
abstract children: ReactElement []
type ITableCellProperties =
abstract isHeader: bool
abstract children: ReactElement []
type IListProperties =
abstract children: ReactElement []
type IListItemProperties =
abstract children: ReactElement []
type IPluginsProperties =
abstract children: ReactElement []
type IComponent =
interface
end
module markdown =
type components =
static member inline p
(component': IParagraphProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "p" component')
static member inline linkReference
(component': ILinkProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "linkReference" component')
static member inline h1
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h1" component')
static member inline h2
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h2" component')
static member inline h3
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h3" component')
static member inline h4
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h4" component')
static member inline h5
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h5" component')
static member inline h6
(component': IHeadingProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "h6" component')
static member inline table
(component': ITableProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "table" component')
static member inline thead
(component': ITableHeadProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "thead" component')
static member inline tbody
(component': ITableBodyProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "tbody" component')
static member inline trow
(component': ITableRowProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "trow" component')
static member inline tcell
(component': ITableCellProperties -> ReactElement)
=
unbox<IComponent> (Interop.mkAttr "tcell" component')
static member inline ol(component': IListProperties -> ReactElement) =
unbox<IComponent> (Interop.mkAttr "ol" component')
static member inline ul(component': IListProperties -> ReactElement) =
unbox<IComponent> (Interop.mkAttr "ul" component')
static member inline li(component': IListProperties -> ReactElement) =
unbox<IComponent> (Interop.mkAttr "li" component')
[<Erase>]
type markdown =
/// The Markdown source to parse (**REQUIRED**).
static member inline children(value: string) =
Interop.mkAttr "children" value
static member inline components(components: IComponent list) =
Interop.mkAttr "components" (createObj !!components)And this is how it can be used:
Markdown.markdown [
markdown.children props.text
markdown.escapeHtml true
markdown.components [
markdown.components.h1 (fun props ->
Mui.typography [
match props.level with
| 1 -> typography.variant.h3
| 2 -> typography.variant.h4
| 3 -> typography.variant.h5
| 4 -> typography.variant.h6
| 5 -> typography.variant.body1
| 6 -> typography.variant.body2
| _ -> ()
typography.color.primary
if props.level = 2 then
prop.className classes.section
prop.style [ style.marginTop 20 ]
typography.children props.children
]
)
markdown.components.table (fun props ->
Mui.tableContainer [
Mui.table props.children
]
)
markdown.components.thead (fun props ->
Mui.tableHead props.children
)
markdown.components.tbody (fun props ->
Mui.tableBody props.children
)
markdown.components.trow (fun props ->
Mui.tableRow [
tableRow.hover true
tableRow.children props.children
]
)
markdown.components.tcell (fun props ->
Mui.tableCell [
if props.isHeader then
prop.className classes.section
tableCell.children props.children
]
)
markdown.components.ul (fun props ->
Mui.list [
list.children props.children
]
)
markdown.components.li (fun props ->
Mui.listItem [
listItem.divider true
listItem.button true
let children =
Mui.typography [
typography.variant.body1
prop.style [ style.fontWeight.bold ]
typography.color.textSecondary
typography.children props.children
]
listItem.children children
]
)
markdown.components.p (fun props ->
Mui.container [
prop.style [
style.marginTop 10
style.paddingLeft 0
]
let children =
Mui.typography [
typography.color.textSecondary
typography.children props.children
]
container.children children
]
)
]
]
Zaid-Ajaj
I think that the Feliz.Markdown binding needs an update as the version used, 4.2.2, is no longer compatible with the latest react. The latest react-markdown had some breaking changes: https://github.com/remarkjs/react-markdown/blob/main/changelog.md.