1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 10:29:48 +02:00

GitBook: [main] 58 pages and 7 assets modified

This commit is contained in:
Ian Storm Taylor
2021-04-01 23:20:52 +00:00
committed by gitbook-bot
parent 15966086d4
commit a38957b849
51 changed files with 855 additions and 991 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'
@@ -154,3 +154,4 @@ const App = () => {
There you have it!
That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.` And when you type, you should see the text change!

View File

@@ -87,3 +87,4 @@ const App = () => {
With that added, try typing `&`, and you should see it suddenly become `and` instead!
This offers a sense of what can be done with Slate's event handlers. Each one will be called with the `event` object, and you can use your `editor` to perform commands in response. Simple!

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,5 @@ 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

@@ -214,3 +214,4 @@ const Leaf = props => {
```
Now, if you try selecting a piece of text and hitting `Ctrl-B` you should see it turn bold! Magic!

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.
@@ -248,3 +248,4 @@ const App = () => {
That's the benefit of extracting the logic.
And there you have it! We just added a ton of functionality to the editor with very little work. And we can keep all of our command logic tested and isolated in a single place, making the code easier to maintain.

View File

@@ -150,3 +150,4 @@ That works! Now you're working with plain text.
You can emulate this strategy for any format you like. You can serialize to HTML, to Markdown, or even to your own custom JSON format that is tailored to your use case.
> 🤖 Note that even though you _can_ serialize your content however you like, there are tradeoffs. The serialization process has a cost itself, and certain formats may be harder to work with than others. In general we recommend writing your own format only if your use case has a specific need for it. Otherwise, you're often better leaving the data in the format Slate uses.

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>
@@ -49,3 +49,4 @@ To make things easier, for quick prototyping, you can also use the [`unpkg.com`]
```
That's it, you're ready to go!