fix super toMarkdown; improve gfm alerts; add directive leafs;

- split extended MD support "directives" and "definition list" from default content parser
- move lint after all parser plugins, for no invalid reports of not yet parsed elements

apps/demo/src/components/ContentUI.ts

@@ -1,3 +1,4 @@
+import { LeafContainerDirective, LeafLeafDirective, LeafTextDirective } from '@content-ui/md-mui/Leafs/LeafDirective'
 import { renderMapping } from '@content-ui/md-mui/LeafsMarkdown'
 import { MuiLink } from '@content-ui/md-mui/MuiComponents/MuiLink'
 import { CustomCodeMirror } from './CustomCodeMirror.js'
@@ -6,6 +7,9 @@ export const contentUIMapping: typeof renderMapping = {
     ...renderMapping,
     leafs: {
         ...renderMapping.leafs,
+        textDirective: LeafTextDirective,
+        leafDirective: LeafLeafDirective,
+        containerDirective: LeafContainerDirective,
     },
     components: {
         ...renderMapping.components,

apps/demo/src/pages/PageComplex.tsx

@@ -1,4 +1,4 @@
-import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentParserExtended } from '@content-ui/md/parser/ContentParserExtended'
 import { SettingsProvider } from '@content-ui/react/LeafSettings'
 import Paper from '@mui/material/Paper'
 import React from 'react'
@@ -131,7 +131,7 @@ export const PageComplex: React.ComponentType = () => {
                                 >
                                     <ViewerFromText
                                         Viewer={ViewerBoxRouter}
-                                        processor={ContentParser}
+                                        processor={ContentParserExtended}
                                         textValue={contentDetails.file}
                                         parseDelay={0}
                                         onMount

apps/demo/src/pages/PageInput.tsx

@@ -1,9 +1,10 @@
-import { ContentParser } from '@content-ui/md/parser/ContentParser'
+import { ContentParserExtended } from '@content-ui/md/parser/ContentParserExtended'
 import { ContentSelectionProvider } from '@content-ui/react/ContentSelectionContext'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Button from '@mui/material/Button'
 import IcVisibility from '@mui/icons-material/Visibility'
 import IcVisibilityOff from '@mui/icons-material/VisibilityOff'
+import IcConvert from '@mui/icons-material/SyncAlt'
 import { useTheme } from '@mui/material/styles'
 import React, { useState } from 'react'
 import Helmet from 'react-helmet'
@@ -66,7 +67,7 @@ export const PageInput: React.ComponentType = () => {
         typeof value === 'string' ? value : '',
         setValue,
     )
-    const {processing, outdated, root, file} = useContent({
+    const {processing, outdated, root, file, stringify} = useContent({
         textValue,
         // for direct preview, the parseDelay should be as low as possible,
         // with disabled preview it's better to use `600` for less unnecessary processing
@@ -76,8 +77,8 @@ export const PageInput: React.ComponentType = () => {
                     textValue.length > 3500 ? 280 :
                         40,
         autoProcess,
-        onMount: true,
-        processor: ContentParser,
+        onMount: false,
+        processor: ContentParserExtended,
     })
 
     const extensions = React.useMemo(() => {
@@ -122,7 +123,17 @@ export const PageInput: React.ComponentType = () => {
                                     outdated={outdated}
                                     autoProcess={autoProcess}
                                     setAutoProcess={setAutoProcess}
+                                    onReformat={stringify ? () => setValue(stringify?.() || '') : undefined}
                                 />
+                                <Button
+                                    startIcon={<IcConvert/>}
+                                    disabled={!stringify}
+                                    onClick={() => setValue(stringify?.() || '')}
+                                    variant={'outlined'} size={'small'}
+                                    sx={{mt: 2, mb: 1, ml: 1}}
+                                >
+                                    {'reformat'}
+                                </Button>
                             </Grid2>
                             <Grid2
                                 xs={12} md={6}

apps/sandbox/package.json

@@ -29,10 +29,10 @@
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
         "@content-ui/input": "^0.1.4",
-        "@content-ui/md": "^0.0.10",
+        "@content-ui/md": "^0.0.11",
         "@content-ui/md-mui": "^0.1.4",
-        "@content-ui/react": "^0.1.2",
-        "@content-ui/struct": "^0.1.2",
+        "@content-ui/react": "^0.1.3",
+        "@content-ui/struct": "^0.1.3",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.10",

apps/sandbox/src/pages/PageInput.tsx

@@ -59,7 +59,7 @@ export const PageInput: React.ComponentType = () => {
         autoProcess,
         setAutoProcess,
     } = useContentEditor(typeof value === 'string' ? value : '', setValue)
-    const {processing, outdated, root, file} = useContent({
+    const {processing, outdated, root, file, stringify} = useContent({
         textValue,
         // for direct preview, the parseDelay should be as low as possible,
         // with disabled preview it's better to use `600` for less unnecessary processing
@@ -125,6 +125,7 @@ export const PageInput: React.ComponentType = () => {
                                         outdated={outdated}
                                         autoProcess={autoProcess}
                                         setAutoProcess={setAutoProcess}
+                                        onReformat={stringify ? () => setValue(stringify?.() || '') : undefined}
                                     />
                                 </Grid2>
                                 <Grid2