|
@@ -615,11 +615,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
getNavbarItems() {
|
|
getNavbarItems() {
|
|
|
- // The following styles will be removed after creating icons for the editor navigation bar.
|
|
|
|
|
- const paddingTopBottom54 = { paddingTop: '6px', paddingBottom: '5px' };
|
|
|
|
|
- const paddingBottom6 = { paddingBottom: '7px' };
|
|
|
|
|
- const fontSize18 = { fontSize: '18px' };
|
|
|
|
|
-
|
|
|
|
|
return [
|
|
return [
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-bold"
|
|
key="nav-item-bold"
|
|
@@ -627,7 +622,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
title="Bold"
|
|
title="Bold"
|
|
|
onClick={this.createReplaceSelectionHandler('**', '**')}
|
|
onClick={this.createReplaceSelectionHandler('**', '**')}
|
|
|
>
|
|
>
|
|
|
- <i className="fa fa-bold"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/bold.svg" alt="icon-bold" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-italic"
|
|
key="nav-item-italic"
|
|
@@ -635,15 +630,15 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
title="Italic"
|
|
title="Italic"
|
|
|
onClick={this.createReplaceSelectionHandler('*', '*')}
|
|
onClick={this.createReplaceSelectionHandler('*', '*')}
|
|
|
>
|
|
>
|
|
|
- <i className="fa fa-italic"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/italic.svg" alt="icon-italic" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
- key="nav-item-strikethough"
|
|
|
|
|
|
|
+ key="nav-item-strikethrough"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Strikethrough"
|
|
title="Strikethrough"
|
|
|
onClick={this.createReplaceSelectionHandler('~~', '~~')}
|
|
onClick={this.createReplaceSelectionHandler('~~', '~~')}
|
|
|
>
|
|
>
|
|
|
- <i className="fa fa-strikethrough"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/strikethrough.svg" alt="icon-strikethrough" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-header"
|
|
key="nav-item-header"
|
|
@@ -651,7 +646,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
title="Heading"
|
|
title="Heading"
|
|
|
onClick={this.makeHeaderHandler}
|
|
onClick={this.makeHeaderHandler}
|
|
|
>
|
|
>
|
|
|
- <i className="fa fa-header"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/header.svg" alt="icon-header" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-code"
|
|
key="nav-item-code"
|
|
@@ -659,61 +654,55 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
title="Inline Code"
|
|
title="Inline Code"
|
|
|
onClick={this.createReplaceSelectionHandler('`', '`')}
|
|
onClick={this.createReplaceSelectionHandler('`', '`')}
|
|
|
>
|
|
>
|
|
|
- <i className="fa fa-code"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/code.svg" alt="icon-code" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-quote"
|
|
key="nav-item-quote"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Quote"
|
|
title="Quote"
|
|
|
onClick={this.createAddPrefixToEachLinesHandler('> ')}
|
|
onClick={this.createAddPrefixToEachLinesHandler('> ')}
|
|
|
- style={paddingBottom6}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="ti-quote-right"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/quote.svg" alt="icon-quote" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-ul"
|
|
key="nav-item-ul"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="List"
|
|
title="List"
|
|
|
onClick={this.createAddPrefixToEachLinesHandler('- ')}
|
|
onClick={this.createAddPrefixToEachLinesHandler('- ')}
|
|
|
- style={paddingTopBottom54}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="ti-list" style={fontSize18}></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/list-ul.svg" alt="icon-list-ul" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-ol"
|
|
key="nav-item-ol"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Numbered List"
|
|
title="Numbered List"
|
|
|
onClick={this.createAddPrefixToEachLinesHandler('1. ')}
|
|
onClick={this.createAddPrefixToEachLinesHandler('1. ')}
|
|
|
- style={paddingTopBottom54}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="ti-list-ol" style={fontSize18}></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/list-ol.svg" alt="icon-list-ol" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-checkbox"
|
|
key="nav-item-checkbox"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Check List"
|
|
title="Check List"
|
|
|
onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
|
|
onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
|
|
|
- style={paddingBottom6}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="ti-check-box"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/check.svg" alt="icon-check" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-link"
|
|
key="nav-item-link"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Link"
|
|
title="Link"
|
|
|
onClick={this.createReplaceSelectionHandler('[', ']()')}
|
|
onClick={this.createReplaceSelectionHandler('[', ']()')}
|
|
|
- style={paddingBottom6}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="icon-link"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/link.svg" alt="icon-link" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-image"
|
|
key="nav-item-image"
|
|
|
bsSize="small"
|
|
bsSize="small"
|
|
|
title="Image"
|
|
title="Image"
|
|
|
onClick={this.createReplaceSelectionHandler('![', ']()')}
|
|
onClick={this.createReplaceSelectionHandler('![', ']()')}
|
|
|
- style={paddingBottom6}
|
|
|
|
|
>
|
|
>
|
|
|
- <i className="icon-picture"></i>
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/picture.svg" alt="icon-picture" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
<Button
|
|
<Button
|
|
|
key="nav-item-table"
|
|
key="nav-item-table"
|
|
@@ -721,7 +710,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
|
|
|
title="Table"
|
|
title="Table"
|
|
|
onClick={this.showHandsonTableHandler}
|
|
onClick={this.showHandsonTableHandler}
|
|
|
>
|
|
>
|
|
|
- <img src="/images/icons/editor/table.svg" alt="icon-table" width="14" height="14" />
|
|
|
|
|
|
|
+ <img src="/images/icons/editor/table.svg" alt="icon-table" />
|
|
|
</Button>,
|
|
</Button>,
|
|
|
];
|
|
];
|
|
|
}
|
|
}
|
Yuki Takei
