Skip to content

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

bug fix highlight and text color

parent f9fb3ea1
Showing with 111 additions and 33 deletions
example/src/App.js
......@@ -7,12 +7,12 @@ 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><span>Наш принцип №4 - Непрерывно улучшать процессы</span></strong></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li><p><span style="color: rgb(255, 78, 68)">Мы следим за современными</span> тенденциями рынка и идём в ногу со временем</p></li><li><p>Мы изобретаем новые эффективные способы решения задач</p></li><li><p>Мы приветствуем и поощряем инициативу каждого сотрудника компании</p></li><li><p>Мы устраняем проблемы и ошибки в процессах</p></li><li><p>Мы используем непрерывный цикл <mark style="background-color: #B93E2F;">Планируй-Делай-Контролируй-Корректируй</mark> для <span>улучшения</span> наших процессов</p></li><li><p>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</p></li><li><p><mark style="background-color: tomato;">Мы замечаем проблемы и ошибки</mark> в процессах и говорим о нихd</p></li></ul>'}
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><a href="https://cdn.atmaguru.online/2/test/3/D/3DyXyHbZOu2bTesZVqk3fHp3Wpk1Hg8R2kyUSVnfQbd4Eh40J4GYAygATHk5L5sl.pdf" download data-size="200 КБ">Название файла</a></p>'}
onChange={(value)=>{
console.log('sads', value);
}}
uploadOptions={{
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=VE5Gz8OqRY0FduVfM4SP1g&expires=1654771143',
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=r7or90O0oY-ZENaz2voSLQ&expires=1656059260',
errorMessage: 'Загрузка временно невозможна'
}}
style={{
......
package.json
{
"name": "react-ag-qeditor",
"version": "1.0.6",
"version": "1.0.7",
"description": "WYSIWYG html editor",
"author": "atma",
"license": "MIT",
......
src/QEditor.jsx
......@@ -11,7 +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 Link from '@tiptap/extension-link'
// import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import TextAlign from '@tiptap/extension-text-align';
import { Color } from '@tiptap/extension-color';
......@@ -23,6 +23,7 @@ import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader"
import Video from './extensions/Video'
import Iframe from './extensions/Iframe'
import CustomLink from './extensions/CustomLink'
const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
......@@ -47,7 +48,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
setInnerModalType(type);
setModalIsOpen(true);
}
const colors = ['#000000', '#666668', '#9B9B9B', '#CCCCCC', '#5CAB4D', '#07A386', '#0BA6FE', '#003CA6', '#8B4AA8', '#F22884', '#B93E2F', '#CC5602', '#F59C12', '#FDDA02'];
const colors = [
'#9B9B9B',
'#CCCCCC',
'#9ee191',
'#43e7bf',
'#4fb7ff',
'#6d9ef5',
'#cd92e8',
'#f597bc',
'#fa9084',
'#ef9558',
'#dea75b',
'#ffe672'];
const toolsLib = {
link: {
......@@ -74,6 +87,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
.run();
}
},
file: {
title: 'Прикрепить файл',
onClick: () => modalOpener('file', 'Прикрепить файл')
},
video: {
title: 'Загрузить видео',
onClick: () => modalOpener('video', 'Загрузить видео')
......@@ -225,11 +242,11 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
Image.configure({
inline: true
}),
Link.configure({
autolink: true,
linkOnPaste: true,
validate: (href)=> console.log(href),
}),
// Link.configure({
// autolink: true,
// linkOnPaste: true,
// validate: (href)=> console.log(href),
// }),
Video,
Iframe,
Table.configure({
......@@ -250,7 +267,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}),
Highlight.configure({
multicolor: true
})
}),
CustomLink
],
content: value,
onUpdate: ({editor}) => onChange(editor.getHTML())
......@@ -325,18 +343,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
return (
<Fragment>{ getUploader({ accept: 'image/*' }) }</Fragment>
)
case 'color':
case 'highlight':
case 'file':
return (
<div className={"atma-editor-select-colors"}>
<ul className={"colors-list"}>
{
colors.map((itemColor, i)=>(
<li onClick={() => {}} style={{ backgroundColor: itemColor }} />
))
}
</ul>
</div>
<Fragment>{ getUploader({ accept: '*' }) }</Fragment>
)
default:
return <div>Пусто</div>
......@@ -389,7 +398,17 @@ 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}}
......@@ -436,18 +455,20 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
if(editor.isActive('image') === true){
items = ['alignLeft', 'alignCenter', 'alignRight'];
}
setColorsSelected(null);
if(items.length > 0){
setBubbleItems(items);
return true;
}
}} tippyOptions={{ duration: 100 }}>
<div className={"atma-editor-bubble"}>
<div className={"atma-editor-bubble"} onClick={e => e.stopPropagation()}>
{
colorsSelected !== null ?
colors.map((itemColor, i) => {
return ( <div className={'qcolors'} style={{ background: itemColor}} onMouseDown={()=>{
return ( <div className={'qcolors'} style={{ background: itemColor}} onClick={()=>{
colorsSelected === 'color' ?
editor.chain().focus().setColor(itemColor).run() : editor.chain().focus().toggleHighlight({ color: itemColor }).run();
editor.chain().focus().unsetHighlight().setColor(itemColor).run() :
editor.chain().focus().unsetColor().toggleHighlight({ color: itemColor }).run()
setColorsSelected(null);
}} /> )
}) : bubbleItems.map((type, i) => {
......@@ -472,7 +493,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
className={'atma-editor-content'}
/>
</div>
<EditorModal
isOpen={modalIsOpen}
title={modalTitle}
......@@ -481,7 +501,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
getInnerModal()
}
{
buildActionsModal(innerModalType === 'color' || 'highlight' ? [] : [
buildActionsModal([
{
title: 'Отмена',
className: ' atma-editor-cancel',
......
src/components/ToolBar.js
......@@ -45,6 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
type: 'g',
items: [
'link',
// 'file',
'image',
'video',
'iframe',
......
src/extensions/CustomLink.js 0 → 100644
import { Link } from '@tiptap/extension-link'
const CustomLink = Link.extend({
parseHTML(){
return [
{
tag: 'a',
},
]
},
addAttributes() {
return {
href: {
default: null,
},
target: {
default: this.options.HTMLAttributes.target,
},
class: {
default: this.options.HTMLAttributes.class,
},
download: {
default: null
},
'data-size': {
default: null
}
}
},
renderHTML({ HTMLAttributes }){
return ['a', HTMLAttributes, 0]
}
})
export default CustomLink;
src/index.scss
......@@ -140,6 +140,19 @@ body{
cursor: col-resize;
}
a[download]{
&[href*='.pdf']{
&:before{
content: 'pdf'
}
}
&:after{
content: attr(data-size);
color: tomato;
}
}
}
&-bubble{
......@@ -167,12 +180,6 @@ body{
opacity: 0.8;
}
}
.qcolors{
display: inline-block;
width: 20px;
height: 20px;
}
}
&-modal{
......@@ -585,6 +592,17 @@ body{
}
}
.qcolors{
display: inline-block;
width: 20px;
height: 20px;
opacity: 1;
&:hover{
cursor: pointer;
}
}
.qseparator{
width: 16px;
}
......
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