Как сделать редактируемый блок в slate.js?

Question

[Denis93]

<script>
// Import React dependencies.
import React, { useState } from 'react'
// Import the Slate editor factory.
import { createEditor } from 'slate'

// Import the Slate components and React plugin.
import { Slate, Editable, withReact } from 'slate-react'

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.' }],
  },
]

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))
  return (
    // Add the editable component inside the context.
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  )
}


  </script>

делаю вот такой код из документации но не работает(
(react подключал с unpkg.com не ставил на сам сервер )
у кого то есть опыт с salte.js? можете помочь кто нибудь?
нужно просто сделать редактируемый блок как тут на скрине

Comments

[Алексей Уколов]

react подключал с unpkg.com не ставил на сам сервер

И как вы его собираетесь тогда в коде импортировать?
Вы что, этот JSX в браузере пытаетесь открывать без компиляции?

не работает

На такое описание проблемы можно только предложить приложить подорожник. Опишите детально как запускаете, что не так, какие ошибки вы видите в консоли.

[Denis93]

"И как вы его собираетесь тогда в коде импортировать?" это предлагали тут https://docs.slatejs.org/walkthroughs/xx-using-the...
я переделал чуть сделал вот так

<script type="module">
// Import React dependencies.
import React, { useState } from 'react'
// Import the Slate editor factory.
import { createEditor } from 'slate'

// Import the Slate components and React plugin.
import { Slate, Editable, withReact } from 'slate-react'

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.' }],
  },
]

const App = () => {
  const [editor] = useState(() => withReact(createEditor()))
  return (
    // Add the editable component inside the context.
    <Slate editor={editor} initialValue={initialValue}>
      <Editable />
    </Slate>
  )
}
  </script>

в консоли пишется Uncaught SyntaxError: expected expression, got '<' и указывает сюда

[Алексей Уколов]

Ну всё правильно - браузер не знает что ему делать с JSX. Если вы подключаете React в виде скрипта, а не используете систему сборки, то и использовать JSX вы не можете - придётся руками конвертировать его в обычный JS.

Короче, не надо так делать, пишите нормально - устанавливайте всё через NPM, пишите JSX и собирайте чем-нибудь.