1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-19 21:51:51 +02:00
This commit is contained in:
Sunny Hirai
2021-04-01 18:13:48 -07:00
45 changed files with 733 additions and 911 deletions

View File

@@ -2,17 +2,17 @@
Slate is a monorepo divided up into multiple npm packages, so to install it you do:
```
```text
yarn add slate slate-react
```
You'll also need to be sure to install Slate's peer dependencies:
```
```text
yarn add react react-dom
```
_Note, if you'd rather use a pre-bundled version of Slate, you can `yarn add slate` and retrieve the bundled `dist/slate.js` file! Check out the [Using the Bundled Source](./XX-using-the-bundled-source.md) guide for more information._
_Note, if you'd rather use a pre-bundled version of Slate, you can `yarn add slate` and retrieve the bundled `dist/slate.js` file! Check out the_ [_Using the Bundled Source_](xx-using-the-bundled-source.md) _guide for more information._
Once you've installed Slate, you'll need to import it.
@@ -47,9 +47,9 @@ const App = () => {
Of course we haven't rendered anything, so you won't see any changes.
> If you are using TypeScript, you will also need to extend the `Editor` with `ReactEditor` as per the documentation on [TypeScript](/concepts/11-typescript). The example below also includes the custom types required for the rest of this example.
> If you are using TypeScript, you will also need to extend the `Editor` with `ReactEditor` as per the documentation on [TypeScript](https://github.com/ianstormtaylor/slate/tree/4b92b752ef234dae57149c713a260b7bacb3f810/concepts/11-typescript/README.md). The example below also includes the custom types required for the rest of this example.
```ts
```typescript
// TypeScript Users only add this code
import { BaseEditor } from 'slate'
import { ReactEditor } from 'slate-react'

View File

@@ -1,4 +1,4 @@
# Defining Custom Block Nodes
# Defining Custom Elements
In our previous example, we started with a paragraph, but we never actually told Slate anything about the `paragraph` block type. We just let it use its internal default renderer, which uses a plain old `<div>`.
@@ -114,7 +114,7 @@ const DefaultElement = props => {
}
```
Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `` Ctrl-` `` shortcut that does just that:
Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a ``Ctrl-``` shortcut that does just that:
```jsx
// Import the `Editor` and `Transforms` helpers from Slate.
@@ -172,9 +172,9 @@ const DefaultElement = props => {
}
```
Now, if you press `` Ctrl-` `` the block your cursor is in should turn into a code block! Magic!
Now, if you press ``Ctrl-``` the block your cursor is in should turn into a code block! Magic!
But we forgot one thing. When you hit `` Ctrl-` `` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
But we forgot one thing. When you hit ``Ctrl-``` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
```jsx
const App = () => {
@@ -220,4 +220,4 @@ const App = () => {
}
```
And there you have it! If you press `` Ctrl-` `` while inside a code block, it should turn back into a paragraph!
And there you have it! If you press ``Ctrl-``` while inside a code block, it should turn back into a paragraph!

View File

@@ -1,4 +1,4 @@
# Using Commands
# Executing Commands
Up until now, everything we've learned has been about how to write one-off logic for your specific Slate editor. But one of the most powerful things about Slate is that it lets you model your specific rich text "domain" however you'd like, and write less one-off code.

View File

@@ -1,18 +1,18 @@
# Using the Bundled Source
For most folks, you'll want to install Slate via `npm`, in which case you can follow the regular [Installing Slate](./01-installing-slate.md) guide.
For most folks, you'll want to install Slate via `npm`, in which case you can follow the regular [Installing Slate](01-installing-slate.md) guide.
But, if you'd rather install Slate by simply adding a `<script>` tag to your application, this guide will help you. To make the "bundled" use case simpler, each version of Slate ships with a bundled source file called `slate.js`.
To get a copy of `slate.js`, download the version of slate you want from npm:
```
```text
npm install slate@latest
```
And then look in the `node_modules` folder for the bundled `slate.js` file:
```
```text
node_modules/
slate/
dist/
@@ -24,7 +24,7 @@ A minified version called `slate.min.js` is also included for convenience.
Before you can add `slate.js` to your page, you need to bring your own copy of `react`, `react-dom` and `react-dom-server`, like so:
```html
```markup
<script src="./vendor/react.js"></script>
<script src="./vendor/react-dom.js"></script>
<script src="./vendor/react-dom-server.js"></script>
@@ -34,13 +34,13 @@ This ensures that Slate isn't bundling its own copy of React, which would greatl
Then you can add `slate.js` after those includes:
```html
```markup
<script src="./vendor/slate.js"></script>
```
To make things easier, for quick prototyping, you can also use the [`unpkg.com`](https://unpkg.com/#/) delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:
```html
```markup
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom-server.browser.production.min.js"></script>