mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-30 18:39:51 +02:00
Next (#3093)
* remove some key usage from core, refactor Operations.apply * undeprecate some methods * convert more key usage to paths * update deprecations * convert selection commands to use all paths * refactor word boundary selection logic * convert many at-range commands to use paths * convert wrapBlock and wrapInline to not use keys * cleanup * remove chainability from editor * simplify commands, queries and middleware * convert deleteAtRange * remove key usage from schema, deprecate *ByKey methods * migrate *ByKey tests, remove index from *ByPath signatures * rename at-current-range tests * deprecate mode key usage, migrate more tests away from keys * deprecate range and point methods which rely on keys to work * refactor insertBlock, without fixing warnings * add pathRef/pointRef, fix insertBlock/Inline deprecations, work on insertFragment * refactor insertFragment * get rich-text example rendering * fix lint * refactor query files, fix more tests * remove unused queries, refactor others * deprecate splitDescendantsByPath * merge master * add typescript, convert slate, slate-hyperscript, slate-plain-serializer * add Point, Path, Range, Annotation tests * add Annotation, Change, Element, Fragment, Mark, Range, Selection, Value interfaces tests * add Operation and Text tests * add Node tests * get operations and normalization tests working for slate * get *AtPath command tests passing * rename *AtPath command tests * rename * get *AtPoint tests working * rename * rename * add value queries tests * add element, mark and path queries tests * convert most on-selection tests * convert on-selection commands * rename * get addMarks and delete commands working * rename * rename * rename * refactor value.positions(), work on delete tests * progress on delete tests * more delete work * finish delete tests * start converting to at-based commands * restructure query tests * restructure operations tests * more work converting to multi-purpose commands * lots of progress on converting to at-based commands * add unwrapNodes * remove setValue * more progress * refactor node commands to use consistent matching logic * cleanup, get non-fragment commands passing * remove annotations and isAtomic * rename surround/pluck to cover/uncover * add location concept, change at-path to from-path for iterables * refactor batches * add location-based queries * refactor hanging logic * more location query work * renaming * use getMatch more * add split to wrap/unwrap * flip levels/ancestors ordering * switch splitNodes to use levels * change split to always:false by default * fix tests * add more queries tests * fixing more delete logic * add more splitNodes tests * get rest of delete tests passing * fix location-based logic in some commands * cleanup * get previous packages tests passing again * add slate-history package * start slate-schema work * start of react working * rendering fixes * get rich and plain text examples working * get image example working with hooks and dropping * refactor onDrop to be internal * inline more event handlers * refactor lots of event-related logic * change rendering to use render props * delete unused stuff * cleanup dom utils * remove unused deps * remove unnecessary packages, add placeholder * remove slate-react-placeholder package * remove unused dep * remove unnecessary tests, fix readonly example * convert checklists example * switch to next from webpack * get link example working * convert more examples * preserve keys, memoized leafs/texts, fix node lookup * fix to always useLayoutEffect for ordering * fix annotations to be maps, memoize elements * remove Change interface * remove String interface * rename Node.entries to Node.nodes * remove unnecessary value queries * default to selection when iterating, cleanup * remove unused files * update scroll into view logic * fix undoing, remove constructor types * dont sync selection while composing * add workflows * remove unused deps * convert mentions example * tweaks * convert remaining examples * rename h to jsx, update schema * fix schema tests * fix slate-schema logic and tests * really fix slate-schema and forced-layout example * get start of insertFragment tests working * remove Fragment interface * remove debugger * get all non-skipped tests passing * cleanup deps * run prettier * configure eslint for typescript * more eslint fixes... * more passing * update some docs * fix examples * port windows undo hotkey change * fix deps, add basic firefox support * add event overriding, update walkthroughs * add commands, remove classes, cleanup examples * cleanup rollup config * update tests * rename queries tests * update other tests * update walkthroughs * cleanup interface exports * cleanup, change mark transforms to require location * undo mark transform change * more * fix tests * fix example * update walkthroughs * update docs * update docs * remove annotations * remove value, move selection and children to editor * add migrating doc * fix lint * fix tests * fix DOM types aliasing * add next export * update deps, fix prod build * fix prod build * update scripts * update docs and changelogs * update workflow and pull request template
This commit is contained in:
Ian Storm Taylor
GitHub
181
docs/walkthroughs/04-applying-custom-formatting.md
Normal file
181
docs/walkthroughs/04-applying-custom-formatting.md
Normal file
@@ -0,0 +1,181 @@
|
||||
# Applying Custom Formatting
|
||||
|
||||
In the previous guide we learned how to create custom block types that render chunks of text inside different containers. But Slate allows for more than just "blocks".
|
||||
|
||||
In this guide, we'll show you how to add custom formatting options, like **bold**, _italic_, `code` or ~~strikethrough~~.
|
||||
|
||||
So we start with our app from earlier:
|
||||
|
||||
```js
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(initialValue)
|
||||
const editor = useMemo(() => withReact(createEditor()), [])
|
||||
const renderElement = useCallback(props => {
|
||||
switch (props.element.type) {
|
||||
case 'code':
|
||||
return <CodeElement {...props} />
|
||||
default:
|
||||
return <DefaultElement {...props} />
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Slate editor={editor} defaultValue={defaultValue}>
|
||||
<Editable
|
||||
renderElement={renderElement}
|
||||
onKeyDown={event => {
|
||||
if (event.key === '`' && event.ctrlKey) {
|
||||
event.preventDefault()
|
||||
const { selection } = editor
|
||||
const isCode = selection
|
||||
? Editor.match(editor, selection, { type: 'code' })
|
||||
: false
|
||||
|
||||
Editor.setNodes(
|
||||
editor,
|
||||
{ type: isCode ? 'paragraph' : 'code' },
|
||||
{ match: 'block' }
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Slate>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a "bold" mark to the currently selected text:
|
||||
|
||||
```js
|
||||
const App = () => {
|
||||
const editor = useMemo(() => withReact(createEditor()), [])
|
||||
const renderElement = useCallback(props => {
|
||||
switch (prop.element.type) {
|
||||
case 'code':
|
||||
return <CodeElement {...props} />
|
||||
default:
|
||||
return <DefaultElement {...props} />
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Slate editor={editor} defaultValue={defaultValue}>
|
||||
<Editable
|
||||
renderElement={renderElement}
|
||||
onKeyDown={event => {
|
||||
if (!event.ctrlKey) {
|
||||
return
|
||||
}
|
||||
|
||||
// When "`" is pressed, keep our existing code block logic.
|
||||
switch (event.key) {
|
||||
case '`': {
|
||||
event.preventDefault()
|
||||
const { selection } = editor
|
||||
const isCode = selection
|
||||
? Editor.match(editor, selection, { type: 'code' })
|
||||
: false
|
||||
|
||||
Editor.setNodes(
|
||||
editor,
|
||||
{ type: isCode ? null : 'code' },
|
||||
{ match: 'block' }
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
// When "B" is pressed, add a bold mark to the text.
|
||||
case 'b': {
|
||||
event.preventDefault()
|
||||
Editor.addMarks(editor, [{ type: 'bold' }])
|
||||
break
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Slate>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `Ctrl-B`, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark.
|
||||
|
||||
For every mark type you want to add to your schema, you need to give Slate a "renderer" for that mark, just like elements. So let's define our `bold` mark:
|
||||
|
||||
```js
|
||||
// Define a React component to render bold text with.
|
||||
const BoldMark = props => {
|
||||
return <strong {...props.attributes}>{props.children}</strong>
|
||||
}
|
||||
```
|
||||
|
||||
Pretty familiar, right?
|
||||
|
||||
And now, let's tell Slate about that mark. To do that, we'll pass in the `renderMark` prop to our editor. Also, let's allow our mark to be toggled by changing `addMark` to `toggleMark`.
|
||||
|
||||
```js
|
||||
const App = () => {
|
||||
const editor = useMemo(() => withReact(createEditor()), [])
|
||||
const renderElement = useCallback(props => {
|
||||
switch (props.element.type) {
|
||||
case 'code':
|
||||
return <CodeElement {...props} />
|
||||
default:
|
||||
return <DefaultElement {...props} />
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Define a mark rendering function that is memoized with `useCallback`.
|
||||
const renderMark = useCallback(props => {
|
||||
switch (props.mark.type) {
|
||||
case 'bold': {
|
||||
return <BoldMark {...props} />
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<Slate editor={editor} defaultValue={defaultValue}>
|
||||
<Editable
|
||||
renderElement={renderElement}
|
||||
// Pass in the `renderMark` function.
|
||||
renderMark={renderMark}
|
||||
onKeyDown={event => {
|
||||
if (!event.ctrlKey) {
|
||||
return
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case '`': {
|
||||
event.preventDefault()
|
||||
const { selection } = editor
|
||||
const isCode = selection
|
||||
? Editor.match(editor, selection, { type: 'code' })
|
||||
: false
|
||||
|
||||
Editor.setNodes(
|
||||
editor,
|
||||
{ type: isCode ? null : 'code' },
|
||||
{ match: 'block' }
|
||||
)
|
||||
break
|
||||
}
|
||||
|
||||
case 'b': {
|
||||
event.preventDefault()
|
||||
Editor.addMarks(editor, [{ type: 'bold' }])
|
||||
break
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Slate>
|
||||
)
|
||||
}
|
||||
|
||||
const BoldMark = props => {
|
||||
return <strong {...props.attributes}>{props.children}</strong>
|
||||
}
|
||||
```
|
||||
|
||||
Now, if you try selecting a piece of text and hitting `Ctrl-B` you should see it turn bold! Magic!
|
||||
Reference in New Issue
Block a user