mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-31 19:01:54 +02:00
Code Issues Releases Wiki Activity

improve Editor.marks and Editor.nodes abstraction

Browse Source
This commit is contained in:
Ian Storm Taylor
2019-11-29 23:15:08 -05:00
parent 0da1dd128c
commit 68569f286e
51 changed files with 381 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/walkthroughs/03-defining-custom-elements.md
View File

@@ -173,15 +173,13 @@ const App = () => {
if (event.key === '`' && event.ctrlKey) {
event.preventDefault()
// Determine whether any of the currently selected blocks are code blocks.
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
// Toggle the block type depending on `isCode`.
Editor.setNodes(
editor,
{ type: isCode ? 'paragraph' : 'code' },
{ type: isCodeActive ? 'paragraph' : 'code' },
{ match: 'block' }
)
}

26
docs/walkthroughs/04-applying-custom-formatting.md
View File

@@ -26,13 +26,11 @@ const App = () => {
if (event.key === '`' && event.ctrlKey) {
event.preventDefault()
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
Editor.setNodes(
editor,
{ type: isCode ? 'paragraph' : 'code' },
{ type: isCodeActive ? 'paragraph' : 'code' },
{ match: 'block' }
)
}
@@ -70,14 +68,11 @@ const App = () => {
// When "`" is pressed, keep our existing code block logic.
case '`': {
event.preventDefault()
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
Editor.setNodes(
editor,
{ type: isCode ? null : 'code' },
{ type: isCodeActive ? null : 'code' },
{ match: 'block' }
)
break
@@ -147,14 +142,11 @@ const App = () => {
switch (event.key) {
case '`': {
event.preventDefault()
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
Editor.setNodes(
editor,
{ type: isCode ? null : 'code' },
{ type: isCodeActive ? null : 'code' },
{ match: 'block' }
)
break

38
docs/walkthroughs/05-executing-commands.md
View File

@@ -43,14 +43,11 @@ const App = () => {
switch (event.key) {
case '`': {
event.preventDefault()
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
Editor.setNodes(
editor,
{ type: isCode ? null : 'code' },
{ type: isCodeActive ? null : 'code' },
{ match: 'block' }
)
break
@@ -112,14 +109,11 @@ const App = () => {
switch (event.key) {
case '`': {
event.preventDefault()
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
const [node] = Editor.nodes(editor, { match: { type: 'code' } })
const isCodeActive = !!node
Editor.setNodes(
editor,
{ type: isCode ? null : 'code' },
{ type: isCodeActive ? null : 'code' },
{ match: 'block' }
)
break
@@ -182,17 +176,21 @@ const withCustom = editor => {
// Define our own custom set of helpers for common queries.
const CustomEditor = {
isBoldMarkActive(editor) {
const { selection } = editor
const activeMarks = Editor.activeMarks(editor)
return activeMarks.some(mark => mark.type === 'bold')
const [mark] = Editor.marks(editor, {
match: { type: 'bold' },
mode: 'universal',
})
return !!mark
},
isCodeBlockActive(editor) {
const { selection } = editor
const isCode = selection
? Editor.match(editor, selection, { type: 'code' })
: false
return isCode
const [node] = Editor.nodes(editor, {
match: { type: 'code' },
mode: 'highest',
})
return !!node
},
}