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'
const App = () => {
return <div style={{padding:40}}>
<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)=>{
console.log('sads', value);
}}
......
package.json
{
"name": "react-ag-qeditor",
"version": "1.0.9",
"version": "1.0.10",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......@@ -56,6 +56,7 @@
"dependencies": {
"@tiptap/core": "^2.0.0-beta.176",
"@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-image": "^2.0.0-beta.27",
"@tiptap/extension-link": "^2.0.0-beta.38",
......
src/QEditor.jsx
......@@ -11,6 +11,7 @@ import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableRow from '@tiptap/extension-table-row'
import TableHeader from '@tiptap/extension-table-header'
import Focus from '@tiptap/extension-focus'
// import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align';
......@@ -251,6 +252,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
Iframe,
Table.configure({
resizable: true,
allowTableNodeSelection: true
}),
TableRow,
TableHeader,
......@@ -271,10 +273,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
CustomLink.configure({
linkOnPaste: false,
openOnClick: false
}),
Focus.configure({
className: 'atma-editor-focused',
mode: "all"
})
],
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 = []) => {
......@@ -416,45 +427,13 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
editor={editor}
{...{toolsLib}}
/>
<BubbleMenu editor={editor} shouldShow={({...o}) => {
<BubbleMenu typpyOptions={{followCursor: true,}} editor={editor} shouldShow={({...o}) => {
let items = [];
if(o.from !== o.to && editor.isActive('paragraph') && editor.isActive('image') === false && document.querySelectorAll('.selectedCell').length === 0){
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){
items = ['alignLeft', 'alignCenter', 'alignRight'];
}
......@@ -557,8 +536,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
const url = new URL(reg.test(_url) ? _url : 'https:' + _url);
let urlId = url.pathname.replace(/\/$/ig, '').split('/').pop();
console.log(url);
switch (url.hostname) {
case 'rutube.ru':
case 'www.rutube.ru':
......@@ -581,19 +558,12 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}
}
_url = `https://www.youtube.com/embed/${urlId}`;
console.log(_url);
break
}
console.log(_url);
editor.chain().focus().setIframe({ src: _url }).run();
break
case 'file':
console.log('file');
uploadedPaths.map((file, i) => {
editor
.chain().focus()
......
src/components/ToolBar.js
......@@ -30,7 +30,6 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
'blockquote',
'codeBlock',
'hr',
]
},
{
......@@ -61,32 +60,82 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
},
{
type: 'g',
type: 's',
toggle: false,
icon: <div className={'qicon qinsertTable'} title={'Таблица'} />,
items: [
'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;
if(toolsLib[type]){
if(toolsLib[type]) {
item = toolsLib[type];
return (
<div
key={ idx }
onClick={ (e) => {
item.onClick();
e.preventDefault();
e.stopPropagation()
return false;
} }
className={ `qicon q${type}` + (editor.isActive(type) ? ' active' : '') }
title={item.title}
/>
)
if (isTitle) {
return (
<div
key={idx}
onClick={(e) => {
item.onClick();
e.preventDefault();
e.stopPropagation()
return false;
}}
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{
return null;
}
......@@ -106,6 +155,21 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
<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;
......
src/index.scss
......@@ -4,6 +4,7 @@ body{
.ProseMirror{
outline: none;
min-height: 204px;
padding-bottom: 12px;
}
.atma-editor {
position: relative;
......@@ -42,6 +43,49 @@ body{
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{
width: 28px;
......@@ -68,6 +112,7 @@ body{
border: 1px solid #ccc;
border-top: 0;
padding: 12px 15px;
padding-bottom: 0;
p{
margin-top: 0;
......@@ -133,6 +178,7 @@ body{
.tableWrapper{
overflow-x: auto;
margin-bottom: 20px;
}
.resize-cursor{
......
yarn.lock
......@@ -1824,6 +1824,14 @@
prosemirror-view "^1.23.6"
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":
version "2.0.0-beta.34"
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