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", "name": "react-ag-qeditor",
"version": "1.0.10", "version": "1.0.11",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
...@@ -412,17 +412,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -412,17 +412,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
className="atma-editor-wrap" className="atma-editor-wrap"
style={style} 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"> <div className="atma-editor">
<ToolBar <ToolBar
editor={editor} editor={editor}
{...{toolsLib}} {...{toolsLib}}
...@@ -447,7 +437,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -447,7 +437,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
{ {
colorsSelected !== null ? colorsSelected !== null ?
colors.map((itemColor, i) => { 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' ? colorsSelected === 'color' ?
editor.chain().focus().unsetHighlight().setColor(itemColor).run() : editor.chain().focus().unsetHighlight().setColor(itemColor).run() :
editor.chain().focus().unsetColor().toggleHighlight({ color: itemColor }).run() editor.chain().focus().unsetColor().toggleHighlight({ color: itemColor }).run()
...@@ -455,7 +445,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -455,7 +445,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}} /> ) }} /> )
}) : bubbleItems.map((type, i) => { }) : bubbleItems.map((type, i) => {
if(type === '|'){ if(type === '|'){
return ( <div className={'qseparator'} /> ) return ( <div key={'bubbleSeparator' + i} className={'qseparator'} /> )
}else{ }else{
return ( return (
<div <div
...@@ -504,18 +494,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -504,18 +494,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
} }
try { try {
switch (innerModalType) { 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': case 'image':
uploadedPaths.map((file, i) => { uploadedPaths.map((file, i) => {
editor.chain().focus().setImage({ src: file.path }).run(); editor.chain().focus().setImage({ src: file.path }).run();
...@@ -527,12 +505,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -527,12 +505,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}); });
break break
case 'iframe': case 'iframe':
let _url = embedContent; let _url = embedContent;
let reg = /(http|https):\/\/([\w.]+\/?)\S*/; let reg = /(http|https):\/\/([\w.]+\/?)\S*/;
const url = new URL(reg.test(_url) ? _url : 'https:' + _url); const url = new URL(reg.test(_url) ? _url : 'https:' + _url);
let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop(); let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
......
src/components/ToolBar.js
...@@ -14,7 +14,8 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -14,7 +14,8 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
] ]
}, },
{ {
type: 'g', type: 's',
toggle: true,
items: [ items: [
'paragraph', 'paragraph',
'h2', 'h2',
...@@ -44,7 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -44,7 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
type: 'g', type: 'g',
items: [ items: [
'link', 'link',
// 'file', 'file',
'image', 'image',
'video', 'video',
'iframe', 'iframe',
...@@ -62,7 +63,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -62,7 +63,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
{ {
type: 's', type: 's',
toggle: false, toggle: false,
icon: <div className={'qicon qinsertTable'} title={'Таблица'} />,
items: [ items: [
'insertTable', 'insertTable',
'|', '|',
...@@ -112,10 +112,10 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -112,10 +112,10 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
}} }}
className={`atma-editor-toolbar-s-opts-item` + (isActive(type) ? ' active' : '')} className={`atma-editor-toolbar-s-opts-item` + (isActive(type) ? ' active' : '')}
> >
<div <Fragment>
className={`qicon q${type}`} <div className={`qicon q${type}`} />
/> <span>{item.title}</span>
<span>{item.title}</span> </Fragment>
</div> </div>
) )
} else { } else {
...@@ -135,7 +135,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -135,7 +135,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
} }
}else if(type === '|') { }else if(type === '|') {
return <div className={'qseparator'} /> return <div key={idx} className={'qseparator'} />
}else{ }else{
return null; return null;
} }
...@@ -157,19 +157,24 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -157,19 +157,24 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
} }
if(section.type === 's'){ if(section.type === 's'){
let activeType = false;
section.items.map((gKey, idx)=>{ section.items.map((gKey, idx)=>{
gItems.push(getItem(gKey, `tools-s-item-${ i }-${ idx }`, true)); gItems.push(getItem(gKey, `tools-s-item-${ i }-${ idx }`, true));
if(isActive(gKey)){
activeType = gKey;
}
}) })
toolItems.push( toolItems.push(
<div key={`tools-s${i}`} className="atma-editor-toolbar-s" onClick={(e)=>{ e.target.closest('.atma-editor-toolbar-s').classList.toggle('show'); }}> <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 } <Fragment>
<div className={'atma-editor-toolbar-s-opts'}>{ gItems }</div> {
<div className={`qicon q${activeType === false || section.toggle === false ? section.items[0] : activeType}`} />
}
<div className={'atma-editor-toolbar-s-opts'}>{ gItems }</div>
</Fragment>
</div> </div>
) )
} }
}) })
return toolItems; return toolItems;
......
src/index.scss
...@@ -46,6 +46,8 @@ body{ ...@@ -46,6 +46,8 @@ body{
&-s{ &-s{
$this: &; $this: &;
position: relative; position: relative;
padding-right: 5px;
margin-right: 9px;
.qseparator{ .qseparator{
display: block; display: block;
...@@ -76,15 +78,35 @@ body{ ...@@ -76,15 +78,35 @@ body{
font-size: 13px; font-size: 13px;
white-space: nowrap; 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{ &.show{
#{$this}-opts{ #{$this}-opts{
clip: auto; clip: auto;
} }
}
&:after{
transform: rotate(180deg);
}
}
} }
.qicon{ .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