很高兴为您写一个 Slate.js 的 Demo 页面。

首先，我们需要安装 Slate.js 依赖和 React，可以使用 npm 来安装：

```
npm install slate react react-dom
```

接下来，我们创建一个简单的编辑器组件，用于渲染 Slate.js 的编辑界面：

```jsx
import React, { useState, useMemo, useCallback } from "react";
import { createEditor, Transforms } from "slate";
import { Slate, Editable, withReact } from "slate-react";

export default function Editor() {
const [value, setValue] = useState([
{
type: "paragraph",
children: [{ text: "This is a sample paragraph." }],
},
]);
const editor = useMemo(() => withReact(createEditor()), []);
const renderElement = useCallback((props) => {
switch (props.element.type) {
case "paragraph":
return

{props.children}

;
case "quote":
return

{props.children}

;
default:
return

{props.children}

;
}
}, []);

return (
setValue(newValue)}>


);
}
```

在这个示例中，我们创建了一个名为 `Editor` 的 React 组件，它渲染了一个 Slate.js 的编辑器界面。

`useState` hook 用来管理编辑器的内容，在我们的示例中，初始内容为一个段落（`

`）标签，里面包含一段文字。

`useMemo` hook 用来创建一个包含 `withReact(createEditor())` 的 editor 对象，这个对象包括了 Slate.js 的核心 api，以及 React 的相关 api。

`useCallback` hook 用来创建一个函数，根据传入的组件属性（`props`）来渲染不同类型的节点。在我们的示例中，我们定义了一个段落类型和一个引用类型的节点。

最后，在 `Slate` 组件中，我们传入了 `value`、`editor` 和 `onChange` 属性，以及一个 `Editable` 组件，用于渲染编辑界面。

接着，我们编写一个简单的 Demo 页面，用于测试上面编写的编辑器组件：

```jsx
import React from "react";
import Editor from "./Editor";

function App() {
return (

);
}

export default App;
```

在这个示例中，我们将 `Editor` 组件直接渲染到了页面上。

最后，在 `index.js` 文件中，我们渲染了 `App` 组件：

```jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(, document.getElementById("root"));
```

这就是一个简单的 Slate.js Demo 页面。您可以下载这个示例，然后在本地使用 `npm start` 命令启动该应用程序，查看编辑器效果。