mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 18:39:51 +02:00
Code Issues Releases Wiki Activity

Update dependencies to React 18, Node 20, TS 5.2, etc. (#5528)

Browse Source 
* incremental upgrade to React 18, TS 4.9, etc.

* update yarn config

* fix build

* minor cleanup in type definitions

* incremental updates for TS 5.0

* fix build

* upgrade to typescript 5.2

* update dependencies

* fix lint issues

* update to latest Playwright version

* update changesets dep

* update emotion/css

* incremental dependency updates

* more small dependency updates

* upgrade prettier and eslint

* fix lint issues

* update dependencies rollup

* fix @types/node resolution to restore linting

* update tiny-invariant dependency

* update dependencies

* update dependencies lerna

* upgrade react-router-dom

* update @types/react and @types/node

* update babel dependencies

* udpate simple-git-hooks

* update @types/node resolution

* update lint-staged

* remove cypress from dependency list

* update @types/node to support Node 20

* update workflows to Node 20

* set resolutions for @types/react

* downgrade @types/react to 18.2.28

* update mocha

* update rimraf

* update @types/js-dom

* remove .lintstagedrc.js

* upgrade next to latest

* v0.61.4

* update lerna

* update faker and rollup

* update immer

* fix yarn clean command

* attempt to fix integration tests

* attempt to stabilize integration tests

* wip fix integration tests

* skip unstable integration test

* Add changeset

---------

Co-authored-by: Dalibor Tosic <dalibortosic00@gmail.com>
Co-authored-by: Nikola <nikolabijelic14@gmail.com>
This commit is contained in:
Dylan Schiemann
2023-10-20 08:34:24 -07:00
committed by GitHub
parent 623f44521e
commit c4c14882ed
92 changed files with 8036 additions and 8905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/examples/check-lists.tsx
View File

@@ -24,8 +24,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'With Slate you can build complex block types that have their own embedded content and behaviors, like rendering checkboxes inside check list items!',
text: 'With Slate you can build complex block types that have their own embedded content and behaviors, like rendering checkboxes inside check list items!',
},
],
},

9
site/examples/code-highlighting.tsx
View File

@@ -31,7 +31,7 @@ import {
import { withHistory } from 'slate-history'
import isHotkey from 'is-hotkey'
import { css } from '@emotion/css'
import { CodeBlockElement } from './custom-types'
import { CodeBlockElement } from './custom-types.d'
import { normalizeTokens } from '../utils/normalize-tokens'
import { Button, Icon, Toolbar } from '../components'
@@ -174,9 +174,10 @@ const useDecorate = (editor: Editor) => {
)
}
const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
CodeBlockElement
>) => {
const getChildNodeToDecorations = ([
block,
blockPath,
]: NodeEntry<CodeBlockElement>) => {
const nodeToDecorations = new Map<Element, Range[]>()
const text = block.children.map(line => Node.string(line)).join('\n')

5
site/examples/editable-voids.tsx
View File

@@ -6,7 +6,7 @@ import { css } from '@emotion/css'
import RichTextEditor from './richtext'
import { Button, Icon, Toolbar } from '../components'
import { EditableVoidElement } from './custom-types'
import { EditableVoidElement } from './custom-types.d'
const EditableVoidsExample = () => {
const editor = useMemo(
@@ -135,8 +135,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'In addition to nodes that contain editable text, you can insert void nodes, which can also contain editable elements, inputs, or an entire other Slate editor.',
text: 'In addition to nodes that contain editable text, you can insert void nodes, which can also contain editable elements, inputs, or an entire other Slate editor.',
},
],
},

6
site/examples/embeds.tsx
View File

@@ -107,8 +107,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'In addition to simple image nodes, you can actually create complex embedded nodes. For example, this one contains an input element that lets you change the video being rendered!',
text: 'In addition to simple image nodes, you can actually create complex embedded nodes. For example, this one contains an input element that lets you change the video being rendered!',
},
],
},
@@ -121,8 +120,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'Try it out! This editor is built to handle Vimeo embeds, but you could handle any type.',
text: 'Try it out! This editor is built to handle Vimeo embeds, but you could handle any type.',
},
],
},

5
site/examples/forced-layout.tsx
View File

@@ -9,7 +9,7 @@ import {
Editor,
} from 'slate'
import { withHistory } from 'slate-history'
import { ParagraphElement, TitleElement } from './custom-types'
import { ParagraphElement, TitleElement } from './custom-types.d'
const withLayout = editor => {
const { normalizeNode } = editor
@@ -103,8 +103,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'This example shows how to enforce your layout with domain-specific constraints. This document will always have a title block at the top and at least one paragraph in the body. Try deleting them and see what happens!',
text: 'This example shows how to enforce your layout with domain-specific constraints. This document will always have a title block at the top and at least one paragraph in the body. Try deleting them and see what happens!',
},
],
},

10
site/examples/hovering-toolbar.tsx
View File

@@ -99,10 +99,9 @@ const HoveringToolbar = () => {
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`
el.style.left = `${
rect.left + window.pageXOffset - el.offsetWidth / 2 + rect.width / 2
}px`
})
return (
@@ -152,8 +151,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'This example shows how you can make a hovering menu appear above your content, which you can use to make text ',
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: ', ' },

2
site/examples/huge-document.tsx
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useCallback } from 'react'
import faker from 'faker'
import { faker } from '@faker-js/faker'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

3
site/examples/iframe.tsx
View File

@@ -131,8 +131,7 @@ const initialValue: Descendant[] = [
italic: true,
},
{
text:
' useful, when you need to separate the styles for your editor contents from the ones addressing your UI.',
text: ' useful, when you need to separate the styles for your editor contents from the ones addressing your UI.',
},
],
},

11
site/examples/images.tsx
View File

@@ -16,7 +16,7 @@ import { withHistory } from 'slate-history'
import { css } from '@emotion/css'
import { Button, Icon, Toolbar } from '../components'
import { ImageElement } from './custom-types'
import { ImageElement } from './custom-types.d'
const ImagesExample = () => {
const editor = useMemo(
@@ -168,8 +168,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'In addition to nodes that contain editable text, you can also create other types of nodes, like images or videos.',
text: 'In addition to nodes that contain editable text, you can also create other types of nodes, like images or videos.',
},
],
},
@@ -182,8 +181,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'This example shows images in action. It features two ways to add images. You can either add an image via the toolbar icon above, or if you want in on a little secret, copy an image URL to your clipboard and paste it anywhere in the editor!',
text: 'This example shows images in action. It features two ways to add images. You can either add an image via the toolbar icon above, or if you want in on a little secret, copy an image URL to your clipboard and paste it anywhere in the editor!',
},
],
},
@@ -191,8 +189,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'You can delete images with the cross in the top left. Try deleting this sheep:',
text: 'You can delete images with the cross in the top left. Try deleting this sheep:',
},
],
},

17
site/examples/inlines.tsx
View File

@@ -13,7 +13,7 @@ import {
Descendant,
} from 'slate'
import { withHistory } from 'slate-history'
import { LinkElement, ButtonElement } from './custom-types'
import { LinkElement, ButtonElement } from './custom-types.d'
import { Button, Icon, Toolbar } from '../components'
@@ -22,8 +22,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'In addition to block nodes, you can create inline nodes. Here is a ',
text: 'In addition to block nodes, you can create inline nodes. Here is a ',
},
{
type: 'link',
@@ -53,8 +52,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'There are two ways to add links. You can either add a link via the toolbar icon above, or if you want in on a little secret, copy a URL to your keyboard and paste it while a range of text is selected. ',
text: 'There are two ways to add links. You can either add a link via the toolbar icon above, or if you want in on a little secret, copy a URL to your keyboard and paste it while a range of text is selected. ',
},
// The following is an example of an inline at the end of a block.
// This is an edge case that can cause issues.
@@ -115,13 +113,8 @@ const InlinesExample = () => {
}
const withInlines = editor => {
const {
insertData,
insertText,
isInline,
isElementReadOnly,
isSelectable,
} = editor
const { insertData, insertText, isInline, isElementReadOnly, isSelectable } =
editor
editor.isInline = element =>
['link', 'button', 'badge'].includes(element.type) || isInline(element)

59
site/examples/markdown-preview.tsx
View File

@@ -67,38 +67,38 @@ const Leaf = ({ attributes, children, leaf }) => {
font-style: ${leaf.italic && 'italic'};
text-decoration: ${leaf.underlined && 'underline'};
${leaf.title &&
css`
display: inline-block;
font-weight: bold;
font-size: 20px;
margin: 20px 0 10px 0;
`}
css`
display: inline-block;
font-weight: bold;
font-size: 20px;
margin: 20px 0 10px 0;
`}
${leaf.list &&
css`
padding-left: 10px;
font-size: 20px;
line-height: 10px;
`}
css`
padding-left: 10px;
font-size: 20px;
line-height: 10px;
`}
${leaf.hr &&
css`
display: block;
text-align: center;
border-bottom: 2px solid #ddd;
`}
css`
display: block;
text-align: center;
border-bottom: 2px solid #ddd;
`}
${leaf.blockquote &&
css`
display: inline-block;
border-left: 2px solid #ddd;
padding-left: 10px;
color: #aaa;
font-style: italic;
`}
css`
display: inline-block;
border-left: 2px solid #ddd;
padding-left: 10px;
color: #aaa;
font-style: italic;
`}
${leaf.code &&
css`
font-family: monospace;
background-color: #eee;
padding: 3px;
`}
css`
font-family: monospace;
background-color: #eee;
padding: 3px;
`}
`}
>
{children}
@@ -111,8 +111,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.',
text: 'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.',
},
],
},

11
site/examples/markdown-shortcuts.tsx
View File

@@ -11,7 +11,7 @@ import {
} from 'slate'
import { withHistory } from 'slate-history'
import { Editable, ReactEditor, Slate, withReact } from 'slate-react'
import { BulletedListElement } from './custom-types'
import { BulletedListElement } from './custom-types.d'
const SHORTCUTS = {
'*': 'list-item',
@@ -207,8 +207,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'The editor gives you full control over the logic you can add. For example, it\'s fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with "> " you get a blockquote that looks like this:',
text: 'The editor gives you full control over the logic you can add. For example, it\'s fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with "> " you get a blockquote that looks like this:',
},
],
},
@@ -220,8 +219,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'Order when you start a line with "## " you get a level-two heading, like this:',
text: 'Order when you start a line with "## " you get a level-two heading, like this:',
},
],
},
@@ -233,8 +231,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'Try it out for yourself! Try starting a new line with ">", "-", or "#"s.',
text: 'Try it out for yourself! Try starting a new line with ">", "-", or "#"s.',
},
],
},

5
site/examples/mentions.tsx
View File

@@ -11,7 +11,7 @@ import {
} from 'slate-react'
import { Portal } from '../components'
import { MentionElement } from './custom-types'
import { MentionElement } from './custom-types.d'
const MentionExample = () => {
const ref = useRef<HTMLDivElement | null>()
@@ -251,8 +251,7 @@ const initialValue: Descendant[] = [
bold: true,
},
{
text:
' feature that lets users autocomplete mentioning a user by their username. Which, in this case means Star Wars characters. The ',
text: ' feature that lets users autocomplete mentioning a user by their username. Which, in this case means Star Wars characters. The ',
},
{
text: 'mentions',

13
site/examples/paste-html.tsx
View File

@@ -58,9 +58,7 @@ export const deserialize = el => {
) {
parent = el.childNodes[0]
}
let children = Array.from(parent.childNodes)
.map(deserialize)
.flat()
let children = Array.from(parent.childNodes).map(deserialize).flat()
if (children.length === 0) {
children = [{ text: '' }]
@@ -219,13 +217,11 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
"By default, pasting content into a Slate editor will use the clipboard's ",
text: "By default, pasting content into a Slate editor will use the clipboard's ",
},
{ text: "'text/plain'", code: true },
{
text:
" data. That's okay for some use cases, but sometimes you want users to be able to paste in content and have it maintain its formatting. To do this, your editor needs to handle ",
text: " data. That's okay for some use cases, but sometimes you want users to be able to paste in content and have it maintain its formatting. To do this, your editor needs to handle ",
},
{ text: "'text/html'", code: true },
{ text: ' data. ' },
@@ -239,8 +235,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
"Try it out for yourself! Copy and paste some rendered HTML rich text content (not the source code) from another site into this editor and it's formatting should be preserved.",
text: "Try it out for yourself! Copy and paste some rendered HTML rich text content (not the source code) from another site into this editor and it's formatting should be preserved.",
},
],
},

3
site/examples/read-only.tsx
View File

@@ -16,8 +16,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'This example shows what happens when the Editor is set to readOnly, it is not editable',
text: 'This example shows what happens when the Editor is set to readOnly, it is not editable',
},
],
},

6
site/examples/richtext.tsx
View File

@@ -249,13 +249,11 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
"Since it's rich text, you can do things like turn a selection of text ",
text: "Since it's rich text, you can do things like turn a selection of text ",
},
{ text: 'bold', bold: true },
{
text:
', or add a semantically rendered block quote in the middle of the page, like this:',
text: ', or add a semantically rendered block quote in the middle of the page, like this:',
},
],
},

3
site/examples/search-highlighting.tsx
View File

@@ -90,8 +90,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'This is editable text that you can search. As you search, it looks for matching strings of text, and adds ',
text: 'This is editable text that you can search. As you search, it looks for matching strings of text, and adds ',
},
{ text: 'decorations', bold: true },
{ text: ' to them in realtime.' },

5
site/examples/shadow-dom.tsx
View File

@@ -1,5 +1,5 @@
import ReactDOM from 'react-dom'
import React, { useMemo, useRef, useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
import { withHistory } from 'slate-history'
@@ -21,7 +21,8 @@ const ShadowDOM = () => {
innerShadowRoot.appendChild(reactRoot)
// Render the editor within the nested shadow DOM
ReactDOM.render(<ShadowEditor />, reactRoot)
const root = createRoot(reactRoot)
root.render(<ShadowEditor />)
})
return <div ref={container} data-cy="outer-shadow-root" />

6
site/examples/tables.tsx
View File

@@ -127,8 +127,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
'Since the editor is based on a recursive tree model, similar to an HTML document, you can create complex nested structures, like tables:',
text: 'Since the editor is based on a recursive tree model, similar to an HTML document, you can create complex nested structures, like tables:',
},
],
},
@@ -204,8 +203,7 @@ const initialValue: Descendant[] = [
type: 'paragraph',
children: [
{
text:
"This table is just a basic example of rendering a table, and it doesn't have fancy functionality. But you could augment it to add support for navigating with arrow keys, displaying table headers, adding column and rows, or even formulas if you wanted to get really crazy!",
text: "This table is just a basic example of rendering a table, and it doesn't have fancy functionality. But you could augment it to add support for navigating with arrow keys, displaying table headers, adding column and rows, or even formulas if you wanted to get really crazy!",
},
],
},