1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-13 11:44:55 +01:00
AlbertHilb 64eb1169af Render text inside void nodes with a zero-width space. (#1388)
So the node can contain selection but the text is not
visible.
2017-11-11 15:35:30 -08:00

60 lines
1.2 KiB
JavaScript

/** @jsx h */
import React from 'react'
import h from '../../helpers/h'
function Emoji(props) {
return (
React.createElement('img', props.attributes)
)
}
function renderNode(props) {
switch (props.node.type) {
case 'emoji': return Emoji(props)
}
}
export const props = {
renderNode,
}
export const value = (
<value>
<document>
<paragraph>
<emoji />
</paragraph>
</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="true">&#x200B;</span>
</span>
</span>
<span data-slate-void="true" contenteditable="false">
<span contenteditable="true" data-slate-spacer="true" style="height:0;color:transparent;outline:none">
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
</span>
</span>
</span>
<span draggable="true">
<img>
</span>
</span>
<span>
<span>
<span data-slate-zero-width="true">&#x200B;</span>
</span>
</span>
</div>
</div>
`.trim()