mirror of
https://github.com/strapi/strapi.git
synced 2026-01-07 12:45:45 +00:00
Created ToggleToMArkdown button
This commit is contained in:
cyril lopez
parent
63575565b1
commit
98f0b6f3fc
@ -106,6 +106,8 @@
|
||||
"components.ListRow.empty": "There is no data to be shown.",
|
||||
|
||||
"components.Wysiwyg.collapse": "Collapse",
|
||||
"components.Wysiwyg.ToggleMode.markdown": "Switch to markdown",
|
||||
"components.Wysiwyg.ToggleMode.preview": "Switch to preview",
|
||||
"components.WysiwygBottomControls.charactersIndicators": "{characters} characters",
|
||||
"components.WysiwygBottomControls.fullscreen": "Fullscreen mode",
|
||||
|
||||
|
||||
@ -106,6 +106,8 @@
|
||||
"components.ListRow.empty": "Il n'y a pas de données à afficher.",
|
||||
|
||||
"components.Wysiwyg.collapse": "Fermer",
|
||||
"components.Wysiwyg.ToggleMode.markdown": "Retour au markdown",
|
||||
"components.Wysiwyg.ToggleMode.preview": "Voir la preview",
|
||||
"components.WysiwygBottomControls.charactersIndicators": "{characters} charactères",
|
||||
"components.WysiwygBottomControls.fullscreen": "Mode plein écran",
|
||||
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
/**
|
||||
*
|
||||
* Utils components for the WYSIWYG
|
||||
* It includes decorators toggle buttons...
|
||||
*
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './styles.scss';
|
||||
|
||||
const ToggleMode = (props) => {
|
||||
const label = props.isPreviewMode ? 'components.Wysiwyg.ToggleMode.markdown' : 'components.Wysiwyg.ToggleMode.preview';
|
||||
|
||||
return (
|
||||
<button type="button" className={styles.toggleModeButton} onClick={props.onClick}>
|
||||
<FormattedMessage id={label} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
ToggleMode.defaultProps = {
|
||||
isPreviewMode: false,
|
||||
onClick: () => {},
|
||||
};
|
||||
|
||||
ToggleMode.propTypes = {
|
||||
isPreviewMode: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export {
|
||||
ToggleMode,
|
||||
};
|
||||
@ -10,17 +10,17 @@ export const SELECT_OPTIONS = [
|
||||
|
||||
export const NEW_CONTROLS = [
|
||||
[
|
||||
{label: 'B', style: 'BOLD', handler: 'addEntity', text: '**innerText**' },
|
||||
{label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'addEntity', text: '*innerText*' },
|
||||
{label: 'U', style: 'UNDERLINE', handler: 'addEntity', text: '__innerText__' },
|
||||
{label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addUlBlock', text: '- innerText' },
|
||||
{label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'addOlBlock', text: '1. innerText' },
|
||||
{ label: 'B', style: 'BOLD', handler: 'addEntity', text: '**innerText**' },
|
||||
{ label: 'I', style: 'ITALIC', className: 'styleButtonItalic', handler: 'addEntity', text: '*innerText*' },
|
||||
{ label: 'U', style: 'UNDERLINE', handler: 'addEntity', text: '__innerText__' },
|
||||
{ label: 'UL', style: 'unordered-list-item', className: 'styleButtonUL', hideLabel: true, handler: 'addUlBlock', text: '- innerText' },
|
||||
{ label: 'OL', style: 'ordered-list-item', className: 'styleButtonOL', hideLabel: true, handler: 'addOlBlock', text: '1. innerText' },
|
||||
],
|
||||
[
|
||||
{label: '<>', style: 'code-block', handler: 'addSimpleBlock', text: '```innerText```' },
|
||||
{label: 'img', style: 'IMG', className: 'styleButtonImg', hideLabel: true, handler: 'addLinkMediaBlockWithSelection', text: '' },
|
||||
{label: 'Link', style: 'LINK', className: 'styleButtonLink',hideLabel: true, handler: 'addLink', text: '[text](link)' },
|
||||
{label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'addSimpleBlock', text: '> innerText' },
|
||||
{ label: '<>', style: 'code-block', handler: 'addSimpleBlock', text: '```innerText```' },
|
||||
{ label: 'img', style: 'IMG', className: 'styleButtonImg', hideLabel: true, handler: 'addLinkMediaBlockWithSelection', text: '' },
|
||||
{ label: 'Link', style: 'LINK', className: 'styleButtonLink',hideLabel: true, handler: 'addLink', text: '[text](link)' },
|
||||
{ label: 'quotes', style: 'blockquote', className: 'styleButtonBlockQuote', hideLabel: true, handler: 'addSimpleBlock', text: '> innerText' },
|
||||
],
|
||||
];
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
Modifier,
|
||||
RichUtils,
|
||||
} from 'draft-js';
|
||||
// import { stateFromMarkdown } from 'draft-js-import-markdown';
|
||||
import { List } from 'immutable';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isEmpty, isNaN, last, replace, words } from 'lodash';
|
||||
@ -25,6 +26,7 @@ import Select from 'components/InputSelect';
|
||||
import WysiwygBottomControls from 'components/WysiwygBottomControls';
|
||||
import WysiwygEditor from 'components/WysiwygEditor';
|
||||
import request from 'utils/request';
|
||||
import { ToggleMode } from './components';
|
||||
import { NEW_CONTROLS, SELECT_OPTIONS } from './constants';
|
||||
import { getBlockStyle, getFocusOffset, getInnerText, getOffSets } from './helpers';
|
||||
import styles from './styles.scss';
|
||||
@ -39,6 +41,7 @@ class Wysiwyg extends React.Component {
|
||||
isFocused: false,
|
||||
initialValue: '',
|
||||
isDraging: false,
|
||||
isPreviewMode: false,
|
||||
headerValue: '',
|
||||
toggleFullScreen: false,
|
||||
};
|
||||
@ -253,6 +256,8 @@ class Wysiwyg extends React.Component {
|
||||
return this.setState({ editorState: EditorState.moveFocusToEnd(newEditorState), headerValue: '' });
|
||||
}
|
||||
|
||||
handleClickPreview = () => this.setState({ isPreviewMode: !this.state.isPreviewMode });
|
||||
|
||||
handleDragEnter = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -378,7 +383,7 @@ class Wysiwyg extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { editorState } = this.state;
|
||||
const { editorState, isPreviewMode } = this.state;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -393,7 +398,7 @@ class Wysiwyg extends React.Component {
|
||||
<Drop onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragLeave={this.handleDragLeave} />
|
||||
)}
|
||||
<div className={styles.controlsContainer}>
|
||||
<div style={{ minWidth: '161px', marginLeft: '8px' }}>
|
||||
<div style={{ minWidth: '161px', marginLeft: '8px', marginRight: '5px' }}>
|
||||
<Select
|
||||
name="headerSelect"
|
||||
onChange={this.handleChangeSelect}
|
||||
@ -418,6 +423,9 @@ class Wysiwyg extends React.Component {
|
||||
onToggleBlock={this.toggleBlockType}
|
||||
/>
|
||||
))}
|
||||
<div className={styles.toggleModeWrapper}>
|
||||
<ToggleMode isPreviewMode={isPreviewMode} onClick={this.handleClickPreview} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.editor} onClick={this.focus}>
|
||||
<WysiwygEditor
|
||||
|
||||
@ -88,6 +88,25 @@
|
||||
line-height: 49px;
|
||||
}
|
||||
|
||||
.toggleModeButton {
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border: 1px solid rgba(16,22,34,0.10);
|
||||
border-radius: 3px;
|
||||
background: #F3F4F4;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggleModeWrapper {
|
||||
margin-left: 12px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.wysiwygCollapse {
|
||||
&:after {
|
||||
content: '\f066';
|
||||
|
||||
@ -31,15 +31,22 @@
|
||||
|
||||
.wysiwygInlineControls {
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 8px 3px 0 10px;
|
||||
background-color: #F3F4F4;
|
||||
user-select: none;
|
||||
> div:nth-child(even) {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
padding: 8px 10px 0 10px;
|
||||
background-color: #F3F4F4;
|
||||
> div:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
> div:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.wysiwygInlineControlsFocus {
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.5",
|
||||
"draft-js": "^0.10.5",
|
||||
"draft-js-import-markdown": "^1.2.1",
|
||||
"eslint": "^4.4.1",
|
||||
"eslint-config-airbnb": "^15.1.0",
|
||||
"eslint-config-airbnb-base": "^11.3.1",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user