mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-02-13 11:44:55 +01:00
0ceefea2e7
* Change the definition of isSelected and add isFocused * Document prop "isFocused" * Add unit tests for isFocused / isSelected * Adapt examples * Lint
82 lines
1.8 KiB
JavaScript
82 lines
1.8 KiB
JavaScript
/** @jsx h */
|
||
|
||
import React from 'react'
|
||
import h from '../../helpers/h'
|
||
|
||
function Image(props) {
|
||
return React.createElement('img', {
|
||
className: props.isSelected ? 'selected' : '',
|
||
src: props.node.data.get('src'),
|
||
...props.attributes,
|
||
})
|
||
}
|
||
|
||
function renderNode(props) {
|
||
switch (props.node.type) {
|
||
case 'image':
|
||
return Image(props)
|
||
}
|
||
}
|
||
|
||
export const props = {
|
||
renderNode,
|
||
}
|
||
|
||
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"></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">​</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div contenteditable="false">
|
||
<img class="selected" src="https://example.com/image.png">
|
||
</div>
|
||
</div>
|
||
<div style="position:relative">
|
||
<span>
|
||
<span>
|
||
<span data-slate-zero-width="n"></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">​</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div contenteditable="false">
|
||
<img class="" src="https://example.com/image2.png">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`.trim()
|