Icons for hover menu
This commit is contained in:
parent
246861a310
commit
d7c7ba4cdc
@ -4,6 +4,7 @@ import Portal from 'react-portal';
|
|||||||
import position from 'selection-position';
|
import position from 'selection-position';
|
||||||
import Markdown from 'slate-markdown-serializer';
|
import Markdown from 'slate-markdown-serializer';
|
||||||
import { DEFAULT_NODE, NODES, MARKS } from './MarkdownControlElements/localRenderers';
|
import { DEFAULT_NODE, NODES, MARKS } from './MarkdownControlElements/localRenderers';
|
||||||
|
import { Icon } from '../UI';
|
||||||
import styles from './MarkdownControl.css';
|
import styles from './MarkdownControl.css';
|
||||||
|
|
||||||
const markdown = new Markdown();
|
const markdown = new Markdown();
|
||||||
@ -166,13 +167,13 @@ class MarkdownControl extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<Portal isOpened={isOpen} onOpen={this.handleOpen}>
|
<Portal isOpened={isOpen} onOpen={this.handleOpen}>
|
||||||
<div className={`${styles.menu} ${styles.hoverMenu}`}>
|
<div className={`${styles.menu} ${styles.hoverMenu}`}>
|
||||||
{this.renderMarkButton('bold', 'b')}
|
{this.renderMarkButton('bold', 'bold')}
|
||||||
{this.renderMarkButton('italic', 'i')}
|
{this.renderMarkButton('italic', 'italic')}
|
||||||
{this.renderMarkButton('code', 'code')}
|
{this.renderMarkButton('code', 'code')}
|
||||||
{this.renderBlockButton('heading1', 'h1')}
|
{this.renderBlockButton('heading1', 'h1')}
|
||||||
{this.renderBlockButton('heading2', 'h2')}
|
{this.renderBlockButton('heading2', 'h2')}
|
||||||
{this.renderBlockButton('block-quote', 'blockquote')}
|
{this.renderBlockButton('block-quote', 'quote-left')}
|
||||||
{this.renderBlockButton('bulleted-list', 'ul')}
|
{this.renderBlockButton('bulleted-list', 'list-bullet')}
|
||||||
</div>
|
</div>
|
||||||
</Portal>
|
</Portal>
|
||||||
);
|
);
|
||||||
@ -184,7 +185,7 @@ class MarkdownControl extends React.Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
|
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
|
||||||
{icon}
|
<Icon type={icon}/>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -195,7 +196,7 @@ class MarkdownControl extends React.Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
|
<span className={styles.button} onMouseDown={onMouseDown} data-active={isActive}>
|
||||||
<span>{icon}</span>
|
<Icon type={icon}/>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user