slatejs: 基本框架搭建

slate/slate-react与javasccript的组合

安装

npm i slate slate-react

结构

.
├── README.md
├── package.json
├── public
│   └── index.html
├── src
│   └── index.js
└── webpack.config.js

app.js

import ReactDOM from 'react-dom';
import React, { useMemo, useState } from 'react';
import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';

const App = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const [value, setValue] = useState([
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }]
    }
  ]);

  return (
    // Add the editable component inside the context.
    <Slate
      editor={editor}
      value={value}
      onChange={newValue => setValue(newValue)}
    >
      <Editable />
    </Slate>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

参考

• https://docs.slatejs.org/walkthroughs/01-installing-slate