1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-13 11:44:55 +01:00
slate/packages/slate-react/test/rendering/fixtures/custom-block-focused.js
2018-10-09 12:30:01 -07:00

89 lines
1.9 KiB
JavaScript

/** @jsx h */
import React from 'react'
import h from '../../helpers/h'
function Image(props) {
return React.createElement('img', {
className: props.isFocused ? 'focused' : '',
src: props.node.data.get('src'),
...props.attributes,
})
}
function renderNode(props) {
switch (props.node.type) {
case 'image':
return Image(props)
}
}
export const props = {
renderNode,
schema: {
blocks: {
image: {
isVoid: true,
},
},
},
}
export const value = (
<value>
<document>
<paragraph>
<anchor />
</paragraph>
<image key="a" src="https://example.com/image.png" />
<paragraph>
<focus />
</paragraph>
<image key="b" src="https://example.com/image2.png" />
</document>
</value>
)
export const output = `
<div data-slate-editor="true" contenteditable="true" role="textbox">
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="n">&#xFEFF;</span>
</span>
</span>
</div>
<div data-slate-void="true">
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span>
<span data-slate-zero-width="z">&#xFEFF;</span>
</span>
</span>
</div>
<div contenteditable="false">
<img class="focused" src="https://example.com/image.png">
</div>
</div>
<div style="position:relative">
<span>
<span>
<span data-slate-zero-width="n">&#xFEFF;</span>
</span>
</span>
</div>
<div data-slate-void="true">
<div data-slate-spacer="true" style="height:0;color:transparent;outline:none;position:absolute">
<span>
<span>
<span data-slate-zero-width="z">&#xFEFF;</span>
</span>
</span>
</div>
<div contenteditable="false">
<img class="" src="https://example.com/image2.png">
</div>
</div>
</div>
`.trim()