Skip to content

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

bug fix 

add options table
parent 994c6084
Showing with 151 additions and 62 deletions
example/src/App.js
...@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css' ...@@ -7,7 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => { const App = () => {
return <div style={{padding:40}}> return <div style={{padding:40}}>
<QEditor <QEditor
value={'<table><tbody><tr><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td><td colspan="1" rowspan="1"><p><img src="https://picsum.photos/200"></p></td></tr></tbody></table><p><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li><p><span style="color: rgb(255, 78, 68)">Мы следим за современными</span> тенденциями рынка и идём в ногу со временем</p></li><li><p>Мы изобретаем новые эффективные <mark class="highlight" data-color="#9B9B9B" style="background-color: #9B9B9B">способы</mark> <mark class="highlight" data-color="#CCCCCC" style="background-color: #CCCCCC">решения</mark> задач</p></li><li><p><mark class="highlight" data-color="#9ee191" style="background-color: #9ee191">Мы</mark> <mark class="highlight" data-color="#43e7bf" style="background-color: #43e7bf">приветствуем</mark> <mark class="highlight" data-color="#4fb7ff" style="background-color: #4fb7ff">и</mark> <mark class="highlight" data-color="#6d9ef5" style="background-color: #6d9ef5">поощряем</mark> <mark class="highlight" data-color="#cd92e8" style="background-color: #cd92e8">инициативу</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">каждого</mark> <mark class="highlight" data-color="#f597bc" style="background-color: #f597bc">сотрудника</mark> <mark class="highlight" data-color="#fa9084" style="background-color: #fa9084">компании</mark></p></li><li><p><mark class="highlight" data-color="#dea75b" style="background-color: #dea75b">Мы</mark> <mark class="highlight" data-color="#ffe672" style="background-color: #ffe672">устраняем</mark> проблемы и ошибки в процессах</p></li><li><p>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</p></li><li><p>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</p></li><li><p>Мы замечаем проблемы и <a href="https://ya.ru">ошибки в процессах и говорим</a> о нихd</p></li></ul><p></p>'} value={'<iframe src="https://www.youtube.com/embed/I7vc0lESM6c" frameborder="0" allowfullscreen="true"></iframe>'}
onChange={(value)=>{ onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} }}
......
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.9", "version": "1.0.10",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
"dependencies": { "dependencies": {
"@tiptap/core": "^2.0.0-beta.176", "@tiptap/core": "^2.0.0-beta.176",
"@tiptap/extension-color": "^2.0.0-beta.9", "@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-focus": "^2.0.0-beta.43",
"@tiptap/extension-highlight": "^2.0.0-beta.33", "@tiptap/extension-highlight": "^2.0.0-beta.33",
"@tiptap/extension-image": "^2.0.0-beta.27", "@tiptap/extension-image": "^2.0.0-beta.27",
"@tiptap/extension-link": "^2.0.0-beta.38", "@tiptap/extension-link": "^2.0.0-beta.38",
......
src/QEditor.jsx
...@@ -11,6 +11,7 @@ import Table from '@tiptap/extension-table' ...@@ -11,6 +11,7 @@ import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell' import TableCell from '@tiptap/extension-table-cell'
import TableRow from '@tiptap/extension-table-row' import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header' import TableHeader from '@tiptap/extension-table-header'
import Focus from '@tiptap/extension-focus'
// import Link from '@tiptap/extension-link' // import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image' import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align'; import TextAlign from '@tiptap/extension-text-align';
...@@ -251,6 +252,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -251,6 +252,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
Iframe, Iframe,
Table.configure({ Table.configure({
resizable: true, resizable: true,
allowTableNodeSelection: true
}), }),
TableRow, TableRow,
TableHeader, TableHeader,
...@@ -271,10 +273,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -271,10 +273,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
CustomLink.configure({ CustomLink.configure({
linkOnPaste: false, linkOnPaste: false,
openOnClick: false openOnClick: false
}),
Focus.configure({
className: 'atma-editor-focused',
mode: "all"
}) })
], ],
content: value, content: value,
onUpdate: ({editor}) => onChange(editor.getHTML()) onUpdate: ({editor}) => onChange(editor.getHTML()),
onFocus: ({editor})=>{
let wrap = editor.options.element.closest('.atma-editor-wrap');
wrap.querySelector('.atma-editor-toolbar-s').classList.remove('show');
}
}) })
const buildActionsModal = (buttons = []) => { const buildActionsModal = (buttons = []) => {
...@@ -416,45 +427,13 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -416,45 +427,13 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
editor={editor} editor={editor}
{...{toolsLib}} {...{toolsLib}}
/> />
<BubbleMenu editor={editor} shouldShow={({...o}) => { <BubbleMenu typpyOptions={{followCursor: true,}} editor={editor} shouldShow={({...o}) => {
let items = []; let items = [];
if(o.from !== o.to && editor.isActive('paragraph') && editor.isActive('image') === false && document.querySelectorAll('.selectedCell').length === 0){ if(o.from !== o.to && editor.isActive('paragraph') && editor.isActive('image') === false && document.querySelectorAll('.selectedCell').length === 0){
items = initialBubbleItems; items = initialBubbleItems;
} }
if(editor.isActive('table')){
if(o.from === o.to || document.querySelectorAll('.selectedCell').length > 0){
if(items.length > 0){
items = [...items, '|']
}
if(document.querySelectorAll('.selectedCell').length > 0){
items = [
...items,
...['mergeOrSplit']
]
}
items = [
...items,
...[
'addRowBefore',
'addRowAfter',
'deleteRow',
'|',
'addColumnBefore',
'addColumnAfter',
'deleteColumn',
'|',
'toggleHeaderCell',
'|',
'deleteTable'
]
];
}
}
if(editor.isActive('image') === true){ if(editor.isActive('image') === true){
items = ['alignLeft', 'alignCenter', 'alignRight']; items = ['alignLeft', 'alignCenter', 'alignRight'];
} }
...@@ -557,8 +536,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -557,8 +536,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
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();
console.log(url);
switch (url.hostname) { switch (url.hostname) {
case 'rutube.ru': case 'rutube.ru':
case 'www.rutube.ru': case 'www.rutube.ru':
...@@ -581,19 +558,12 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -581,19 +558,12 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
} }
} }
_url = `https://www.youtube.com/embed/${urlId}`; _url = `https://www.youtube.com/embed/${urlId}`;
console.log(_url);
break break
} }
console.log(_url);
editor.chain().focus().setIframe({ src: _url }).run(); editor.chain().focus().setIframe({ src: _url }).run();
break break
case 'file': case 'file':
console.log('file');
uploadedPaths.map((file, i) => { uploadedPaths.map((file, i) => {
editor editor
.chain().focus() .chain().focus()
......
src/components/ToolBar.js
...@@ -30,7 +30,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -30,7 +30,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
'blockquote', 'blockquote',
'codeBlock', 'codeBlock',
'hr', 'hr',
] ]
}, },
{ {
...@@ -61,32 +60,82 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -61,32 +60,82 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
}, },
{ {
type: 'g', type: 's',
toggle: false,
icon: <div className={'qicon qinsertTable'} title={'Таблица'} />,
items: [ items: [
'insertTable', 'insertTable',
'|',
'addRowBefore',
'addRowAfter',
'deleteRow',
'|',
'addColumnBefore',
'addColumnAfter',
'deleteColumn',
'|',
'toggleHeaderCell',
'|',
'mergeOrSplit',
'deleteTable'
] ]
} }
]) ])
const getItem = (type = null, idx) => { const isActive = (type) => {
if(type === 'h2' || type === 'h3' || type === 'h4'){
return editor.isActive('heading', {level: parseInt(type.replace(/[a-z]/, ''))});
}
if(type === 'alignLeft' || type === 'alignCenter' || type === 'alignRight'){
return editor.isActive({textAlign: type.replace('align', '').toLowerCase() });
}
return editor.isActive(type);
}
const getItem = (type = null, idx, isTitle = false) => {
let item = null; let item = null;
if(toolsLib[type]){ if(toolsLib[type]) {
item = toolsLib[type]; item = toolsLib[type];
return ( if (isTitle) {
<div return (
key={ idx } <div
onClick={ (e) => { key={idx}
item.onClick(); onClick={(e) => {
e.preventDefault(); item.onClick();
e.stopPropagation() e.preventDefault();
return false; e.stopPropagation()
} } return false;
className={ `qicon q${type}` + (editor.isActive(type) ? ' active' : '') } }}
title={item.title} className={`atma-editor-toolbar-s-opts-item` + (isActive(type) ? ' active' : '')}
/> >
) <div
className={`qicon q${type}`}
/>
<span>{item.title}</span>
</div>
)
} else {
return (
<div
key={idx}
onClick={(e) => {
item.onClick();
e.preventDefault();
e.stopPropagation()
return false;
}}
className={`qicon q${type}` + (isActive(type) ? ' active' : '')}
title={item.title}
/>
)
}
}else if(type === '|') {
return <div className={'qseparator'} />
}else{ }else{
return null; return null;
} }
...@@ -106,6 +155,21 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -106,6 +155,21 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
<div key={`tools-g${i}`} className="atma-editor-toolbar-g">{ gItems }</div> <div key={`tools-g${i}`} className="atma-editor-toolbar-g">{ gItems }</div>
) )
} }
if(section.type === 's'){
section.items.map((gKey, idx)=>{
gItems.push(getItem(gKey, `tools-s-item-${ i }-${ idx }`, true));
})
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>
</div>
)
}
}) })
return toolItems; return toolItems;
......
src/index.scss
...@@ -4,6 +4,7 @@ body{ ...@@ -4,6 +4,7 @@ body{
.ProseMirror{ .ProseMirror{
outline: none; outline: none;
min-height: 204px; min-height: 204px;
padding-bottom: 12px;
} }
.atma-editor { .atma-editor {
position: relative; position: relative;
...@@ -42,6 +43,49 @@ body{ ...@@ -42,6 +43,49 @@ body{
width: 14px; width: 14px;
} }
} }
&-s{
$this: &;
position: relative;
.qseparator{
display: block;
height: 8px;
}
&-opts{
position: absolute;
clip: rect(0,0,0,0);
border-radius: 8px;
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
background-color: #fff;
padding: 8px;
right: 42%;
transform: translateX(50%);
&-item{
display: flex;
align-items: center;
cursor: pointer;
padding-right: 8px;
&:hover{
opacity: 0.6;
}
span{
font-size: 13px;
white-space: nowrap;
}
}
}
&.show{
#{$this}-opts{
clip: auto;
}
}
}
.qicon{ .qicon{
width: 28px; width: 28px;
...@@ -68,6 +112,7 @@ body{ ...@@ -68,6 +112,7 @@ body{
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: 0; border-top: 0;
padding: 12px 15px; padding: 12px 15px;
padding-bottom: 0;
p{ p{
margin-top: 0; margin-top: 0;
...@@ -133,6 +178,7 @@ body{ ...@@ -133,6 +178,7 @@ body{
.tableWrapper{ .tableWrapper{
overflow-x: auto; overflow-x: auto;
margin-bottom: 20px;
} }
.resize-cursor{ .resize-cursor{
......
yarn.lock
...@@ -1824,6 +1824,14 @@ ...@@ -1824,6 +1824,14 @@
prosemirror-view "^1.23.6" prosemirror-view "^1.23.6"
tippy.js "^6.3.7" tippy.js "^6.3.7"
"@tiptap/extension-focus@^2.0.0-beta.43":
version "2.0.0-beta.43"
resolved "https://registry.yarnpkg.com/@tiptap/extension-focus/-/extension-focus-2.0.0-beta.43.tgz#0d29942e5e9d581661c3f222a426eac1958e5970"
integrity sha512-UH9R5o3/Xau8ti92EGcvVOYbaMxHeoM2C22l6vQvsB1wuSohSuTnN/FUcL3UIDwhtzOqSYN6ggtFifroMCA4Tg==
dependencies:
prosemirror-state "^1.3.4"
prosemirror-view "^1.23.6"
"@tiptap/extension-gapcursor@^2.0.0-beta.34": "@tiptap/extension-gapcursor@^2.0.0-beta.34":
version "2.0.0-beta.34" version "2.0.0-beta.34"
resolved "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.34.tgz" resolved "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.34.tgz"
......
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