Я писал неверный код для рендеринга элемента блока в редакторе slate.js? ⇐ Javascript

[Anonymous]

Я строю богатый текстовый редактор, используя Slate в React. Я позаимствовал код из примера примера текста Text Tyxcript, богатого сланцем. Единственная разница в том, что я использую Tailwindcss вместо @emory/css. Указанный формат на кнопке блока (Blockbutton) должен запустить соответствующий блок корпуса, определенный в функции renderElement, а тег HTML должен отображаться в редакторе. Для, например, Я нажимаю на блокнот «Heading-One», заголовок H1 должен отображаться в редакторе. Однако ничего не происходит, почему?

Код: Выделить всё

...

export const ToggleBlock = (editor: CustomEditor, format: CustomElementFormat) => {
...
let newProperties: Partial
if (isAlignType(format)) {
newProperties = {
align: isActive ? undefined : format,
}
} else {
newProperties = {
type: isActive ? "paragraph" : isList ? "list-item" : format,
} as Element
}

Transforms.setNodes(editor, newProperties)

...
}

export const renderElement = ({attributes, element, children}: RenderElementProps) => {
const style: React.CSSProperties = {}

console.log(`element type ${element.type}`)
if (isAlignElement(element)) {
style.textAlign = element.align as AlignType;
}
switch (element.type) {
case 'heading-one': {
console.log(`h1 ${children}`)
return (
{children}
);
}

case 'heading-two': {
console.log("h2")
return (
{children}
);
}

case 'heading-three': {
console.log("h3")
return (
{children}
);
}

case 'heading-four': {
console.log("h4")
return (
[h4]{children}[/h4]
);
}

case 'quote': {
console.log("quote")
return (
{children}
);
}

case 'list-item': {
console.log("list-item")
return (
[*]{children}
);
}

case 'bulleted-list': {
console.log("bulleted-list")
return (
[list]{children}[/list]
);
}

case 'numbered-list': {
console.log("numbered-list")
return (
[list]{children}[/list]
);
}

default: {
console.log("paragraph")
return (
{children}
);
}
}
}

...

toolbar.tsx:

Код: Выделить всё

...
export const BlockButton = ({ format, Icon }: BlockButtonProps) => {
const editor = useSlate();

return (
 {
event.preventDefault();
}}
onClick={() => ToggleBlock(editor, format)} // Calling ToggleBlock
/>
)
}

...

App.tsx:

Код: Выделить всё

...

function App() {
...

return (

Editor



...



 keyHandler(event)}
/>




)
}

export default App

Поправьте мое понимание и код относительно того, где я ошибся.


Подробнее здесь: https://stackoverflow.com/questions/797 ... te-js-edit