Merge branch 'master' of github.com:ianstormtaylor/slate

packages/slate/src/interfaces/custom-types.ts

@@ -2,10 +2,28 @@
  * Extendable Custom Types Interface
  */
 
+type ExtendableTypes =
+  | 'Editor'
+  | 'Element'
+  | 'Text'
+  | 'Selection'
+  | 'Range'
+  | 'Point'
+  | 'InsertNodeOperation'
+  | 'InsertTextOperation'
+  | 'MergeNodeOperation'
+  | 'MoveNodeOperation'
+  | 'RemoveNodeOperation'
+  | 'RemoveTextOperation'
+  | 'SetNodeOperation'
+  | 'SetSelectionOperation'
+  | 'SplitNodeOperation'
+
 export interface CustomTypes {
   [key: string]: unknown
 }
 
-export type ExtendedType<K extends string, B> = unknown extends CustomTypes[K]
+export type ExtendedType<
-  ? B
+  K extends ExtendableTypes,
-  : CustomTypes[K]
+  B
+> = unknown extends CustomTypes[K] ? B : CustomTypes[K]

packages/slate/src/interfaces/editor.ts

@@ -1,5 +1,4 @@
 import isPlainObject from 'is-plain-object'
-import { createDraft, finishDraft, isDraft } from 'immer'
 import { reverse as reverseText } from 'esrever'
 
 import {

packages/slate/src/interfaces/node.ts

@@ -1,7 +1,6 @@
 import { produce } from 'immer'
 import { Editor, Path, Range, Text } from '..'
 import { Element, ElementEntry } from './element'
-import { ExtendedType } from './custom-types'
 
 /**
  * The `Node` union type represents all of the different types of nodes that

packages/slate/test/interfaces/CustomTypes/custom-types.ts

@@ -1,61 +1,29 @@
-// import { Descendant, Element, Text, CustomTypes, BaseText } from 'slate'
-
-// export type HeadingElement = {
-//   type: 'heading'
-//   level: number
-//   children: Descendant[]
-// }
-
-// export type ListItemElement = {
-//   type: 'list-item'
-//   depth: number
-//   children: Descendant[]
-// }
-
-// export type CustomText = {
-//   placeholder: string
-//   bold: boolean
-//   italic: boolean
-//   text: string
-// }
-
-// export type BoldCustomText = {
-//   bold: boolean
-//   text: string
-// }
-
-// declare module 'slate' {
-//   interface CustomTypes {
-//     Element: HeadingElement | ListItemElement
-//     Text: CustomText
-//   }
-// }
-
 import {
-  BaseText,
   BaseEditor,
   BaseSelection,
   BasePoint,
   BaseRange,
-  BaseElement,
+  Descendant,
 } from 'slate'
-// import { Prettify } from './prettify'
 
 export type HeadingElement = {
   type: 'heading'
   level: number
-} & BaseElement
+  children: Descendant[]
+}
 
 export type ListItemElement = {
   type: 'list-item'
   depth: number
-} & BaseElement
+  children: Descendant[]
+}
 
 export type CustomText = {
-  placeholder: string
+  placeholder?: string
-  bold: boolean
+  bold?: boolean
-  italic: boolean
+  italic?: boolean
-} & BaseText
+  text: string
+}
 
 export type CustomElement = HeadingElement | ListItemElement
 

site/examples/Readme.md

@@ -20,19 +20,19 @@ If you have an idea for an example that shows a common use case, pull request it
 
 To get the examples running on your machine, you need to have the Slate repository cloned to your computer. After that, you need to `cd` into the directory where you cloned it, and install the dependencies with `yarn` and build the monorepo:
 
-```
+```sh
 yarn install
 yarn build
 ```
 
 Then start the watcher and examples server:
 
-```
+```sh
 yarn start
 ```
 
 Now you can open up `http://localhost:3000` in your browser and you'll see the examples site. Any changes you make to the source code will be immediately reflected when you refresh the page. You can open the examples URL quickly with:
 
-```
+```sh
 yarn open
 ```

site/examples/check-lists.tsx

@@ -8,7 +8,6 @@ import {
   ReactEditor,
 } from 'slate-react'
 import {
-  Node,
   Editor,
   Transforms,
   Range,
@@ -20,7 +19,7 @@ import {
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/code-highlighting.tsx

@@ -5,14 +5,7 @@ import 'prismjs/components/prism-sql'
 import 'prismjs/components/prism-java'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import {
+import { Text, createEditor, Element as SlateElement, Descendant } from 'slate'
-  Text,
-  createEditor,
-  Node,
-  Element as SlateElement,
-  BaseEditor,
-  Descendant,
-} from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
@@ -149,7 +142,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/editable-voids.tsx

@@ -1,11 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import {
+import { Transforms, createEditor, Descendant } from 'slate'
-  Transforms,
-  createEditor,
-  Node,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
 import { Slate, Editable, useSlateStatic, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
@@ -137,7 +131,7 @@ const InsertEditableVoidButton = () => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/embeds.tsx

@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import {
   Transforms,
   createEditor,
-  Node,
   Element as SlateElement,
   Descendant,
 } from 'slate'
@@ -12,8 +11,6 @@ import {
   withReact,
   useSlateStatic,
   ReactEditor,
-  useFocused,
-  useSelected,
 } from 'slate-react'
 
 const EmbedsExample = () => {
@@ -104,7 +101,7 @@ const UrlInput = ({ url, onChange }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/forced-layout.tsx

@@ -75,7 +75,7 @@ const Element = ({ attributes, children, element }) => {
   }
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'title',
     children: [{ text: 'Enforce Your Layout!' }],

site/examples/hovering-toolbar.tsx

@@ -5,7 +5,6 @@ import {
   Transforms,
   Text,
   createEditor,
-  Node,
   Element,
   Descendant,
 } from 'slate'
@@ -148,7 +147,7 @@ const FormatButton = ({ format, icon }) => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/huge-document.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useMemo, useCallback } from 'react'
 import faker from 'faker'
-import { Element as SlateElement, Node, createEditor, Descendant } from 'slate'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const HEADINGS = 100
 const PARAGRAPHS = 7
-const initialValue: SlateElement[] = []
+const initialValue: Descendant[] = []
 
 for (let h = 0; h < HEADINGS; h++) {
   initialValue.push({

site/examples/iframe.tsx

@@ -2,13 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import isHotkey from 'is-hotkey'
 import { Editable, withReact, useSlate, Slate, ReactEditor } from 'slate-react'
-import {
+import { Editor, createEditor, Descendant } from 'slate'
-  Editor,
-  Element as SlateElement,
-  createEditor,
-  Node,
-  Descendant,
-} from 'slate'
 import { withHistory } from 'slate-history'
 
 import { Button, Icon, Toolbar } from '../components'
@@ -123,7 +117,7 @@ const IFrame = ({ children, ...props }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/images.tsx

@@ -1,13 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
-import {
+import { Transforms, createEditor, Descendant } from 'slate'
-  Node,
-  Transforms,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
 import {
   Slate,
   Editable,
@@ -138,7 +132,7 @@ const isImageUrl = url => {
   return imageExtensions.includes(ext)
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/links.tsx

@@ -2,7 +2,6 @@ import React, { useState, useMemo } from 'react'
 import isUrl from 'is-url'
 import { Slate, Editable, withReact, useSlate } from 'slate-react'
 import {
-  Node,
   Transforms,
   Editor,
   Range,
@@ -135,7 +134,7 @@ const LinkButton = () => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/markdown-preview.tsx

@@ -1,7 +1,7 @@
 import Prism from 'prismjs'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Node, Text, createEditor, Element, Descendant } from 'slate'
+import { Text, createEditor, Element, Descendant } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
@@ -109,7 +109,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/markdown-shortcuts.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
 import {
-  Node,
   Editor,
   Transforms,
   Range,
@@ -161,7 +160,7 @@ const Element = ({ attributes, children, element }) => {
   }
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/mentions.tsx

@@ -1,13 +1,5 @@
 import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react'
-import {
+import { Editor, Transforms, Range, createEditor, Descendant } from 'slate'
-  Node,
-  Editor,
-  Transforms,
-  Range,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
 import { withHistory } from 'slate-history'
 import {
   Slate,
@@ -206,7 +198,7 @@ const Mention = ({ attributes, children, element }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/paste-html.tsx

@@ -1,12 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { jsx } from 'slate-hyperscript'
-import {
+import { Transforms, createEditor, Descendant } from 'slate'
-  Node,
-  Transforms,
-  createEditor,
-  Element as SlateElement,
-  Descendant,
-} from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 import {
@@ -217,7 +211,7 @@ const Leaf = ({ attributes, children, leaf }) => {
   return <span {...attributes}>{children}</span>
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/plaintext.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor, Element, Descendant } from 'slate'
+import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
@@ -13,7 +13,7 @@ const PlainTextExample = () => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/read-only.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor, Descendant, Element, Node } from 'slate'
+import { createEditor, Descendant, Element } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const ReadOnlyExample = () => {
@@ -12,7 +12,7 @@ const ReadOnlyExample = () => {
   )
 }
 
-const initialValue: Element[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/richtext.tsx

@@ -6,7 +6,6 @@ import {
   Transforms,
   createEditor,
   Descendant,
-  Node,
   Element as SlateElement,
 } from 'slate'
 import { withHistory } from 'slate-history'
@@ -176,7 +175,7 @@ const MarkButton = ({ format, icon }) => {
   )
 }
 
-const initialValue: SlateElement[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [

site/examples/search-highlighting.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, Node, Descendant, createEditor } from 'slate'
+import { Text, Descendant, createEditor } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'