Skip to content

Commit 4f992cf

Browse files
RavenColEvolRavenColEvol
authored
Fix example types (#5812)
* fix: types for richtext.tsx * fix: types for check-lists, code-highlighting and custom placeholder * fix: types for editable-voids, embeds, forced-layout, hovering-toolbar * fix: types for remaining examples * fix: typescript error for files in image element * fix: types for examples and some minor fixes * fix: normalize-tokens.ts type * fix: types for [example].tsx
1 parent 7a8ab18 commit 4f992cf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+911
-568
lines changed

‎docs/walkthroughs/04-applying-custom-formatting.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ const App = () => {
9090
Transforms.setNodes(
9191
editor,
9292
{ type: match ? 'paragraph' : 'code' },
93-
{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) }
93+
{
94+
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
95+
}
9496
)
9597
break
9698
}
@@ -178,7 +180,9 @@ const App = () => {
178180
Transforms.setNodes(
179181
editor,
180182
{ type: match ? null : 'code' },
181-
{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) }
183+
{
184+
match: n => Element.isElement(n) && Editor.isBlock(editor, n),
185+
}
182186
)
183187
break
184188
}

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
"@emotion/css": "^11.11.2",
5959
"@faker-js/faker": "^8.2.0",
6060
"@playwright/test": "^1.39.0",
61+
"@types/is-hotkey": "^0.1.10",
62+
"@types/is-url": "^1.2.32",
6163
"@types/jest": "29.5.6",
6264
"@types/lodash": "^4.14.200",
6365
"@types/mocha": "^10.0.3",

‎site/examples/js/check-lists.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -121,9 +121,9 @@ const Element = props => {
121121
}
122122
}
123123
const CheckListItemElement = ({ attributes, children, element }) => {
124+
const { checked } = element
124125
const editor = useSlateStatic()
125126
const readOnly = useReadOnly()
126-
const { checked } = element
127127
return (
128128
<div
129129
{...attributes}

‎site/examples/js/code-highlighting.jsx

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1+
import { css } from '@emotion/css'
2+
import isHotkey from 'is-hotkey'
13
import Prism from 'prismjs'
4+
import 'prismjs/components/prism-java'
25
import 'prismjs/components/prism-javascript'
36
import 'prismjs/components/prism-jsx'
4-
import 'prismjs/components/prism-typescript'
5-
import 'prismjs/components/prism-tsx'
67
import 'prismjs/components/prism-markdown'
7-
import 'prismjs/components/prism-python'
88
import 'prismjs/components/prism-php'
9+
import 'prismjs/components/prism-python'
910
import 'prismjs/components/prism-sql'
10-
import 'prismjs/components/prism-java'
11+
import 'prismjs/components/prism-tsx'
12+
import 'prismjs/components/prism-typescript'
1113
import React, { useCallback, useState } from 'react'
12-
import { createEditor, Node, Editor, Element, Transforms } from 'slate'
14+
import { Editor, Element, Node, Transforms, createEditor } from 'slate'
15+
import { withHistory } from 'slate-history'
1316
import {
14-
withReact,
15-
Slate,
1617
Editable,
17-
useSlate,
1818
ReactEditor,
19+
Slate,
20+
useSlate,
1921
useSlateStatic,
22+
withReact,
2023
} from 'slate-react'
21-
import { withHistory } from 'slate-history'
22-
import isHotkey from 'is-hotkey'
23-
import { css } from '@emotion/css'
24-
import { normalizeTokens } from './utils/normalize-tokens'
2524
import { Button, Icon, Toolbar } from './components'
25+
import { normalizeTokens } from './utils/normalize-tokens'
2626

2727
const ParagraphType = 'paragraph'
2828
const CodeBlockType = 'code-block'
@@ -139,7 +139,7 @@ const useDecorate = editor => {
139139
return useCallback(
140140
([node, path]) => {
141141
if (Element.isElement(node) && node.type === CodeLineType) {
142-
const ranges = editor.nodeToDecorations.get(node) || []
142+
const ranges = editor.nodeToDecorations?.get(node) || []
143143
return ranges
144144
}
145145
return []

‎site/examples/js/components/index.jsx

+1-46
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { css, cx } from '@emotion/css'
12
import React from 'react'
23
import ReactDOM from 'react-dom'
3-
import { cx, css } from '@emotion/css'
44

55
export const Button = React.forwardRef(
66
({ className, active, reversed, ...props }, ref) => (
@@ -23,51 +23,6 @@ export const Button = React.forwardRef(
2323
/>
2424
)
2525
)
26-
export const EditorValue = React.forwardRef(
27-
({ className, value, ...props }, ref) => {
28-
const textLines = value.document.nodes
29-
.map(node => node.text)
30-
.toArray()
31-
.join('\n')
32-
return (
33-
<div
34-
ref={ref}
35-
{...props}
36-
className={cx(
37-
className,
38-
css`
39-
margin: 30px -20px 0;
40-
`
41-
)}
42-
>
43-
<div
44-
className={css`
45-
font-size: 14px;
46-
padding: 5px 20px;
47-
color: #404040;
48-
border-top: 2px solid #eeeeee;
49-
background: #f8f8f8;
50-
`}
51-
>
52-
Slate's value as text
53-
</div>
54-
<div
55-
className={css`
56-
color: #404040;
57-
font: 12px monospace;
58-
white-space: pre-wrap;
59-
padding: 10px 20px;
60-
div {
61-
margin: 0 0 0.5em;
62-
}
63-
`}
64-
>
65-
{textLines}
66-
</div>
67-
</div>
68-
)
69-
}
70-
)
7126
export const Icon = React.forwardRef(({ className, ...props }, ref) => (
7227
<span
7328
{...props}

‎site/examples/js/custom-placeholder.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useMemo } from 'react'
22
import { createEditor } from 'slate'
3-
import { Slate, Editable, withReact } from 'slate-react'
43
import { withHistory } from 'slate-history'
4+
import { Editable, Slate, withReact } from 'slate-react'
55

66
const initialValue = [
77
{

‎site/examples/js/editable-voids.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useState, useMemo } from 'react'
2-
import { Transforms, createEditor } from 'slate'
3-
import { Slate, Editable, useSlateStatic, withReact } from 'slate-react'
4-
import { withHistory } from 'slate-history'
51
import { css } from '@emotion/css'
6-
import RichTextEditor from './richtext'
2+
import React, { useMemo, useState } from 'react'
3+
import { createEditor, Transforms } from 'slate'
4+
import { withHistory } from 'slate-history'
5+
import { Editable, Slate, useSlateStatic, withReact } from 'slate-react'
76
import { Button, Icon, Toolbar } from './components'
7+
import RichTextEditor from './richtext'
88

99
const EditableVoidsExample = () => {
1010
const editor = useMemo(

‎site/examples/js/forced-layout.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useCallback, useMemo } from 'react'
2-
import { Slate, Editable, withReact } from 'slate-react'
32
import {
4-
Transforms,
5-
createEditor,
3+
Editor,
64
Node,
75
Element as SlateElement,
8-
Editor,
6+
Transforms,
7+
createEditor,
98
} from 'slate'
109
import { withHistory } from 'slate-history'
10+
import { Editable, Slate, withReact } from 'slate-react'
1111

1212
const withLayout = editor => {
1313
const { normalizeNode } = editor

‎site/examples/js/hovering-toolbar.jsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useMemo, useRef, useEffect } from 'react'
2-
import { Slate, Editable, withReact, useSlate, useFocused } from 'slate-react'
3-
import { Editor, createEditor, Range } from 'slate'
41
import { css } from '@emotion/css'
2+
import React, { useEffect, useMemo, useRef } from 'react'
3+
import { Editor, Range, createEditor } from 'slate'
54
import { withHistory } from 'slate-history'
5+
import { Editable, Slate, useFocused, useSlate, withReact } from 'slate-react'
66
import { Button, Icon, Menu, Portal } from './components'
77

88
const HoveringMenuExample = () => {
@@ -23,7 +23,7 @@ const HoveringMenuExample = () => {
2323
return toggleMark(editor, 'italic')
2424
case 'formatUnderline':
2525
event.preventDefault()
26-
return toggleMark(editor, 'underlined')
26+
return toggleMark(editor, 'underline')
2727
}
2828
}}
2929
/>
@@ -49,13 +49,13 @@ const Leaf = ({ attributes, children, leaf }) => {
4949
if (leaf.italic) {
5050
children = <em>{children}</em>
5151
}
52-
if (leaf.underlined) {
52+
if (leaf.underline) {
5353
children = <u>{children}</u>
5454
}
5555
return <span {...attributes}>{children}</span>
5656
}
5757
const HoveringToolbar = () => {
58-
const ref = useRef()
58+
const ref = useRef(null)
5959
const editor = useSlate()
6060
const inFocus = useFocused()
6161
useEffect(() => {
@@ -105,7 +105,7 @@ const HoveringToolbar = () => {
105105
>
106106
<FormatButton format="bold" icon="format_bold" />
107107
<FormatButton format="italic" icon="format_italic" />
108-
<FormatButton format="underlined" icon="format_underlined" />
108+
<FormatButton format="underline" icon="format_underlined" />
109109
</Menu>
110110
</Portal>
111111
)

‎site/examples/js/huge-document.jsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
import React, { useMemo, useCallback } from 'react'
21
import { faker } from '@faker-js/faker'
2+
import React, { useCallback, useMemo } from 'react'
33
import { createEditor } from 'slate'
4-
import { Slate, Editable, withReact } from 'slate-react'
4+
import { Editable, Slate, withReact } from 'slate-react'
55

66
const HEADINGS = 100
77
const PARAGRAPHS = 7
88
const initialValue = []
99
for (let h = 0; h < HEADINGS; h++) {
10-
initialValue.push({
11-
type: 'heading',
10+
const heading = {
11+
type: 'heading-one',
1212
children: [{ text: faker.lorem.sentence() }],
13-
})
13+
}
14+
initialValue.push(heading)
1415
for (let p = 0; p < PARAGRAPHS; p++) {
15-
initialValue.push({
16+
const paragraph = {
1617
type: 'paragraph',
1718
children: [{ text: faker.lorem.paragraph() }],
18-
})
19+
}
20+
initialValue.push(paragraph)
1921
}
2022
}
2123
const HugeDocumentExample = () => {
@@ -29,7 +31,7 @@ const HugeDocumentExample = () => {
2931
}
3032
const Element = ({ attributes, children, element }) => {
3133
switch (element.type) {
32-
case 'heading':
34+
case 'heading-one':
3335
return <h1 {...attributes}>{children}</h1>
3436
default:
3537
return <p {...attributes}>{children}</p>

‎site/examples/js/iframe.jsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import isHotkey from 'is-hotkey'
12
import React, { useCallback, useMemo, useState } from 'react'
23
import { createPortal } from 'react-dom'
3-
import isHotkey from 'is-hotkey'
4-
import { Editable, withReact, useSlate, Slate, ReactEditor } from 'slate-react'
54
import { Editor, createEditor } from 'slate'
65
import { withHistory } from 'slate-history'
6+
import { Editable, ReactEditor, Slate, useSlate, withReact } from 'slate-react'
77
import { Button, Icon, Toolbar } from './components'
88

99
const HOTKEYS = {
@@ -93,7 +93,9 @@ const MarkButton = ({ format, icon }) => {
9393
const IFrame = ({ children, ...props }) => {
9494
const [iframeBody, setIframeBody] = useState(null)
9595
const handleLoad = e => {
96-
setIframeBody(e.target.contentDocument.body)
96+
const iframe = e.target
97+
if (!iframe.contentDocument) return
98+
setIframeBody(iframe.contentDocument.body)
9799
}
98100
return (
99101
<iframe srcDoc={`<!DOCTYPE html>`} {...props} onLoad={handleLoad}>

‎site/examples/js/images.jsx

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import React, { useMemo } from 'react'
1+
import { css } from '@emotion/css'
22
import imageExtensions from 'image-extensions'
3-
import isUrl from 'is-url'
43
import isHotkey from 'is-hotkey'
4+
import isUrl from 'is-url'
5+
import React, { useMemo } from 'react'
56
import { Transforms, createEditor } from 'slate'
7+
import { withHistory } from 'slate-history'
68
import {
7-
Slate,
89
Editable,
9-
useSlateStatic,
10-
useSelected,
10+
ReactEditor,
11+
Slate,
1112
useFocused,
13+
useSelected,
14+
useSlateStatic,
1215
withReact,
13-
ReactEditor,
1416
} from 'slate-react'
15-
import { withHistory } from 'slate-history'
16-
import { css } from '@emotion/css'
1717
import { Button, Icon, Toolbar } from './components'
1818

1919
const ImagesExample = () => {
@@ -48,7 +48,7 @@ const withImages = editor => {
4848
const text = data.getData('text/plain')
4949
const { files } = data
5050
if (files && files.length > 0) {
51-
for (const file of files) {
51+
Array.from(files).forEach(file => {
5252
const reader = new FileReader()
5353
const [mime] = file.type.split('/')
5454
if (mime === 'image') {
@@ -58,7 +58,7 @@ const withImages = editor => {
5858
})
5959
reader.readAsDataURL(file)
6060
}
61-
}
61+
})
6262
} else if (isImageUrl(text)) {
6363
insertImage(editor, text)
6464
} else {
@@ -71,10 +71,11 @@ const insertImage = (editor, url) => {
7171
const text = { text: '' }
7272
const image = { type: 'image', url, children: [text] }
7373
Transforms.insertNodes(editor, image)
74-
Transforms.insertNodes(editor, {
74+
const paragraph = {
7575
type: 'paragraph',
7676
children: [{ text: '' }],
77-
})
77+
}
78+
Transforms.insertNodes(editor, paragraph)
7879
}
7980
const Element = props => {
8081
const { attributes, children, element } = props

‎site/examples/js/inlines.jsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import React, { useMemo } from 'react'
2-
import isUrl from 'is-url'
3-
import { isKeyHotkey } from 'is-hotkey'
41
import { css } from '@emotion/css'
5-
import { Editable, withReact, useSlate, useSelected } from 'slate-react'
6-
import * as SlateReact from 'slate-react'
2+
import { isKeyHotkey } from 'is-hotkey'
3+
import isUrl from 'is-url'
4+
import React, { useMemo } from 'react'
75
import {
8-
Transforms,
9-
Editor,
10-
Range,
116
createEditor,
7+
Editor,
128
Element as SlateElement,
9+
Range,
10+
Transforms,
1311
} from 'slate'
1412
import { withHistory } from 'slate-history'
13+
import { Editable, useSelected, useSlate, withReact } from 'slate-react'
14+
import * as SlateReact from 'slate-react'
1515
import { Button, Icon, Toolbar } from './components'
1616

1717
const initialValue = [
@@ -326,7 +326,7 @@ const Text = props => {
326326
? css`
327327
padding-left: 0.1px;
328328
`
329-
: null
329+
: undefined
330330
}
331331
{...attributes}
332332
>

0 commit comments

Comments
 (0)