import React, { useCallback } from 'react'
import { Transforms, Editor, Node } from 'slate'
import {
Slate,
ReactEditor,
Editable,
RenderLeafProps,
useSlate
} from 'slate-react'
import { ClientFrame, IconButton, Icon } from './Elements'
import Caret from './Caret'
const LIST_TYPES = ['numbered-list', 'bulleted-list']
export interface EditorFrame {
editor: ReactEditor
value: Node[]
decorate: any
onChange: (value: Node[]) => void
}
const renderElement = (props: any) =>
const EditorFrame: React.FC = ({
editor,
value,
decorate,
onChange
}) => {
const renderLeaf = useCallback((props: any) => , [
decorate
])
return (
)
}
export default EditorFrame
const toggleBlock = (editor: any, format: any) => {
const isActive = isBlockActive(editor, format)
const isList = LIST_TYPES.includes(format)
Transforms.unwrapNodes(editor, {
match: n => LIST_TYPES.includes(n.type),
split: true
})
Transforms.setNodes(editor, {
type: isActive ? 'paragraph' : isList ? 'list-item' : format
})
if (!isActive && isList) {
const block = { type: format, children: [] }
Transforms.wrapNodes(editor, block)
}
}
const toggleMark = (editor: any, format: any) => {
const isActive = isMarkActive(editor, format)
if (isActive) {
Editor.removeMark(editor, format)
} else {
Editor.addMark(editor, format, true)
}
}
const isBlockActive = (editor: any, format: any) => {
const [match] = Editor.nodes(editor, {
match: n => n.type === format
})
return !!match
}
const isMarkActive = (editor: any, format: any) => {
const marks = Editor.marks(editor)
return marks ? marks[format] === true : false
}
const Element: React.FC = ({ attributes, children, element }) => {
switch (element.type) {
case 'block-quote':
return {children}
case 'bulleted-list':
return
case 'heading-one':
return {children}
case 'heading-two':
return {children}
case 'list-item':
return {children}
case 'numbered-list':
return {children}
default:
return {children}
}
}
const Leaf: React.FC = ({ attributes, children, leaf }) => {
if (leaf.bold) {
children = {children}
}
if (leaf.code) {
children = {children}
}
if (leaf.italic) {
children = {children}
}
if (leaf.underline) {
children = {children}
}
return (
{leaf.isCaret ? : null}
{children}
)
}
const BlockButton: React.FC = ({ format, icon }) => {
const editor = useSlate()
return (
{
event.preventDefault()
toggleBlock(editor, format)
}}
>
{icon}
)
}
const MarkButton: React.FC = ({ format, icon }) => {
const editor = useSlate()
return (
{
event.preventDefault()
toggleMark(editor, format)
}}
>
{icon}
)
}