import slate from '@react-page/plugins-slate' ; import React from 'react' ; import customSlatePlugin from './customSlatePlugin' ; import katexSlatePlugin from './katexSlatePlugin' ; import styled from 'styled-components' ; export const defaultSlate = slate ( ( def ) => ( { ... def , plugins : { ... def . plugins , custom : { custom1 : customSlatePlugin , katex : katexSlatePlugin , } , } , } ) ) ; export const customizedSlate = slate ( ( def ) => ( { ... def , name : def . id + '/reduced' , hideInMenu : true , plugins : { headings : { h2 : def . plugins . headings . h2 , h3 : def . plugins . headings . h3 ( ( d ) => { return { ... d , getStyle : ( props ) => ( { ... d . getStyle ?. ( props ) , color : 'magenta' } ) , } ; } ) , h4 : def . plugins . headings . h4 ( ( d ) => { return { ... d , Component : ( props ) => { return ( < h4 style = { props . style } { ... props . attributes } > { } < span contentEditable = { false } role = "img" aria - label = "Ladybug" > 🐞 < /span> { props . children } < span contentEditable = { false } role = "img" aria - label = "Heart" > { ' ' } ❤ ️ < /span> < /h4>); } , } ; } ) , h5 : def . plugins . headings . h5 ( ( d ) => { return { ... d , Component : styled . h5 `
            text-decoration: underline;
            font-style: italic;
          ` , } ; } ) , } , paragraphs : def . plugins . paragraphs , emphasize : def . plugins . emphasize , alignment : def . plugins . alignment , } , } ) ) ;