mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-01-19 14:27:07 +01:00
912d4b79da
* docs: convert examples to typescript * docs: convert remaining examples * docs: update next.js * ci: fix lint * docs: fix next.js path * docs: cleanup * update Co-authored-by: wendellhu <wendellhu@tencent.com>
166 lines
4.1 KiB
TypeScript
166 lines
4.1 KiB
TypeScript
import React, { useState, useMemo, useRef, useEffect } from 'react'
|
|
import { Slate, Editable, ReactEditor, withReact, useSlate } from 'slate-react'
|
|
import { Editor, Transforms, Text, createEditor, Node } from 'slate'
|
|
import { css } from 'emotion'
|
|
import { withHistory } from 'slate-history'
|
|
|
|
import { Button, Icon, Menu, Portal } from '../components'
|
|
import { Range } from 'slate'
|
|
|
|
const HoveringMenuExample = () => {
|
|
const [value, setValue] = useState<Node[]>(initialValue)
|
|
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
|
|
|
|
return (
|
|
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
|
|
<HoveringToolbar />
|
|
<Editable
|
|
renderLeaf={props => <Leaf {...props} />}
|
|
placeholder="Enter some text..."
|
|
onDOMBeforeInput={(event: InputEvent) => {
|
|
event.preventDefault()
|
|
switch (event.inputType) {
|
|
case 'formatBold':
|
|
return toggleFormat(editor, 'bold')
|
|
case 'formatItalic':
|
|
return toggleFormat(editor, 'italic')
|
|
case 'formatUnderline':
|
|
return toggleFormat(editor, 'underline')
|
|
}
|
|
}}
|
|
/>
|
|
</Slate>
|
|
)
|
|
}
|
|
|
|
const toggleFormat = (editor, format) => {
|
|
const isActive = isFormatActive(editor, format)
|
|
Transforms.setNodes(
|
|
editor,
|
|
{ [format]: isActive ? null : true },
|
|
{ match: Text.isText, split: true }
|
|
)
|
|
}
|
|
|
|
const isFormatActive = (editor, format) => {
|
|
const [match] = Editor.nodes(editor, {
|
|
match: n => n[format] === true,
|
|
mode: 'all',
|
|
})
|
|
return !!match
|
|
}
|
|
|
|
const Leaf = ({ attributes, children, leaf }) => {
|
|
if (leaf.bold) {
|
|
children = <strong>{children}</strong>
|
|
}
|
|
|
|
if (leaf.italic) {
|
|
children = <em>{children}</em>
|
|
}
|
|
|
|
if (leaf.underlined) {
|
|
children = <u>{children}</u>
|
|
}
|
|
|
|
return <span {...attributes}>{children}</span>
|
|
}
|
|
|
|
const HoveringToolbar = () => {
|
|
const ref = useRef<HTMLDivElement | null>()
|
|
const editor = useSlate()
|
|
|
|
useEffect(() => {
|
|
const el = ref.current
|
|
const { selection } = editor
|
|
|
|
if (!el) {
|
|
return
|
|
}
|
|
|
|
if (
|
|
!selection ||
|
|
!ReactEditor.isFocused(editor) ||
|
|
Range.isCollapsed(selection) ||
|
|
Editor.string(editor, selection) === ''
|
|
) {
|
|
el.removeAttribute('style')
|
|
return
|
|
}
|
|
|
|
const domSelection = window.getSelection()
|
|
const domRange = domSelection.getRangeAt(0)
|
|
const rect = domRange.getBoundingClientRect()
|
|
el.style.opacity = '1'
|
|
el.style.top = `${rect.top + window.pageYOffset - el.offsetHeight}px`
|
|
el.style.left = `${rect.left +
|
|
window.pageXOffset -
|
|
el.offsetWidth / 2 +
|
|
rect.width / 2}px`
|
|
})
|
|
|
|
return (
|
|
<Portal>
|
|
<Menu
|
|
ref={ref}
|
|
className={css`
|
|
padding: 8px 7px 6px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: -10000px;
|
|
left: -10000px;
|
|
margin-top: -6px;
|
|
opacity: 0;
|
|
background-color: #222;
|
|
border-radius: 4px;
|
|
transition: opacity 0.75s;
|
|
`}
|
|
>
|
|
<FormatButton format="bold" icon="format_bold" />
|
|
<FormatButton format="italic" icon="format_italic" />
|
|
<FormatButton format="underlined" icon="format_underlined" />
|
|
</Menu>
|
|
</Portal>
|
|
)
|
|
}
|
|
|
|
const FormatButton = ({ format, icon }) => {
|
|
const editor = useSlate()
|
|
return (
|
|
<Button
|
|
reversed
|
|
active={isFormatActive(editor, format)}
|
|
onMouseDown={event => {
|
|
event.preventDefault()
|
|
toggleFormat(editor, format)
|
|
}}
|
|
>
|
|
<Icon>{icon}</Icon>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const initialValue = [
|
|
{
|
|
children: [
|
|
{
|
|
text:
|
|
'This example shows how you can make a hovering menu appear above your content, which you can use to make text ',
|
|
},
|
|
{ text: 'bold', bold: true },
|
|
{ text: ', ' },
|
|
{ text: 'italic', italic: true },
|
|
{ text: ', or anything else you might want to do!' },
|
|
],
|
|
},
|
|
{
|
|
children: [
|
|
{ text: 'Try it out yourself! Just ' },
|
|
{ text: 'select any piece of text and the menu will appear', bold: true },
|
|
{ text: '.' },
|
|
],
|
|
},
|
|
]
|
|
|
|
export default HoveringMenuExample
|