Skip to content

R
react-ag-qeditor
Commit e5a71955 by Рамис
Options

add arrow to select

parent 510141fb
Showing with 44 additions and 42 deletions
package.json
{
"name": "react-ag-qeditor",
"version": "1.0.10",
"version": "1.0.11",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/QEditor.jsx
......@@ -412,17 +412,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
className="atma-editor-wrap"
style={style}
>
{
colors.map((itemColor, i) => {
return ( <div className={'qcolors'} style={{ background: itemColor}} onMouseDown={()=>{
colorsSelected === 'color' ?
editor.chain().focus().setColor(itemColor).run() : editor.chain().focus().toggleHighlight({ color: itemColor }).run();
setColorsSelected(null);
}} /> )
})
}
<div className="atma-editor">
<ToolBar
editor={editor}
{...{toolsLib}}
......@@ -447,7 +437,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
{
colorsSelected !== null ?
colors.map((itemColor, i) => {
return ( <div className={'qcolors'} style={{ background: itemColor}} onClick={()=>{
return ( <div key={'colors' + i} className={'qcolors'} style={{ background: itemColor}} onClick={()=>{
colorsSelected === 'color' ?
editor.chain().focus().unsetHighlight().setColor(itemColor).run() :
editor.chain().focus().unsetColor().toggleHighlight({ color: itemColor }).run()
......@@ -455,7 +445,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}} /> )
}) : bubbleItems.map((type, i) => {
if(type === '|'){
return ( <div className={'qseparator'} /> )
return ( <div key={'bubbleSeparator' + i} className={'qseparator'} /> )
}else{
return (
<div
......@@ -504,18 +494,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}
try {
switch (innerModalType) {
// case 'color':
// if(colorsTabsActive === 'highlight'){
// editor.chain().focus().toggleHighlight({ color: colorsSelected }).run();
// }else{
// editor.chain().focus().unsetHighlight({ color: colorsSelected }).run();
// editor.commands.setColor(colorsSelected);
// }
// setColorsTabsActive('color');
// setColorsSelected('');
// setModalTitle('');
// setModalIsOpen(false);
// return;
case 'image':
uploadedPaths.map((file, i) => {
editor.chain().focus().setImage({ src: file.path }).run();
......@@ -527,12 +505,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
});
break
case 'iframe':
let _url = embedContent;
let reg = /(http|https):\/\/([\w.]+\/?)\S*/;
const url = new URL(reg.test(_url) ? _url : 'https:' + _url);
let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
......
src/components/ToolBar.js
......@@ -14,7 +14,8 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
]
},
{
type: 'g',
type: 's',
toggle: true,
items: [
'paragraph',
'h2',
......@@ -44,7 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
type: 'g',
items: [
'link',
// 'file',
'file',
'image',
'video',
'iframe',
......@@ -62,7 +63,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
{
type: 's',
toggle: false,
icon: <div className={'qicon qinsertTable'} title={'Таблица'} />,
items: [
'insertTable',
'|',
......@@ -112,10 +112,10 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
}}
className={`atma-editor-toolbar-s-opts-item` + (isActive(type) ? ' active' : '')}
>
<div
className={`qicon q${type}`}
/>
<span>{item.title}</span>
<Fragment>
<div className={`qicon q${type}`} />
<span>{item.title}</span>
</Fragment>
</div>
)
} else {
......@@ -135,7 +135,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
}
}else if(type === '|') {
return <div className={'qseparator'} />
return <div key={idx} className={'qseparator'} />
}else{
return null;
}
......@@ -157,19 +157,24 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
}
if(section.type === 's'){
let activeType = false;
section.items.map((gKey, idx)=>{
gItems.push(getItem(gKey, `tools-s-item-${ i }-${ idx }`, true));
if(isActive(gKey)){
activeType = gKey;
}
})
toolItems.push(
<div key={`tools-s${i}`} className="atma-editor-toolbar-s" onClick={(e)=>{ e.target.closest('.atma-editor-toolbar-s').classList.toggle('show'); }}>
{ section.toggle === false && section.icon }
<div className={'atma-editor-toolbar-s-opts'}>{ gItems }</div>
<Fragment>
{
<div className={`qicon q${activeType === false || section.toggle === false ? section.items[0] : activeType}`} />
}
<div className={'atma-editor-toolbar-s-opts'}>{ gItems }</div>
</Fragment>
</div>
)
}
})
return toolItems;
......
src/index.scss
......@@ -46,6 +46,8 @@ body{
&-s{
$this: &;
position: relative;
padding-right: 5px;
margin-right: 9px;
.qseparator{
display: block;
......@@ -76,15 +78,35 @@ body{
font-size: 13px;
white-space: nowrap;
}
&.active{
opacity: 0.4;
}
}
}
&:after{
content: '';
display: inline-block;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%228%22%20height%3D%225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.664%204.709c.132%200%20.254-.05.351-.156L6.992%201.51a.433.433%200%200%200%20.129-.32c0-.254-.2-.454-.45-.454a.464.464%200%200%200-.328.137L3.663%203.62.984.873A.471.471%200%200%200%20.657.736c-.254%200-.453.2-.453.453%200%20.125.047.235.132.32l2.977%203.044a.472.472%200%200%200%20.352.156z%22%20fill%3D%22%23AAB2BD%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 5px;
position: absolute;
top: 50%;
right: 0;
}
&.show{
#{$this}-opts{
clip: auto;
}
}
&:after{
transform: rotate(180deg);
}
}
}
.qicon{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment