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' ...@@ -7,12 +7,12 @@ 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><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)=>{ onChange={(value)=>{
console.log('sads', value); console.log('sads', value);
}} }}
uploadOptions={{ 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: 'Загрузка временно невозможна' errorMessage: 'Загрузка временно невозможна'
}} }}
style={{ style={{
......
package.json
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.0.6", "version": "1.0.7",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
src/QEditor.jsx
...@@ -11,7 +11,7 @@ import Table from '@tiptap/extension-table' ...@@ -11,7 +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 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';
import { Color } from '@tiptap/extension-color'; import { Color } from '@tiptap/extension-color';
...@@ -23,6 +23,7 @@ import EditorModal from "./components/EditorModal" ...@@ -23,6 +23,7 @@ import EditorModal from "./components/EditorModal"
import Uploader from "./components/Uploader" import Uploader from "./components/Uploader"
import Video from './extensions/Video' import Video from './extensions/Video'
import Iframe from './extensions/Iframe' import Iframe from './extensions/Iframe'
import CustomLink from './extensions/CustomLink'
const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight']; const initialBubbleItems = ['bold', 'italic', 'underline', 'strike', '|', 'colorText', 'highlight'];
...@@ -47,7 +48,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -47,7 +48,19 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
setInnerModalType(type); setInnerModalType(type);
setModalIsOpen(true); 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 = { const toolsLib = {
link: { link: {
...@@ -74,6 +87,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -74,6 +87,10 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
.run(); .run();
} }
}, },
file: {
title: 'Прикрепить файл',
onClick: () => modalOpener('file', 'Прикрепить файл')
},
video: { video: {
title: 'Загрузить видео', title: 'Загрузить видео',
onClick: () => modalOpener('video', 'Загрузить видео') onClick: () => modalOpener('video', 'Загрузить видео')
...@@ -225,11 +242,11 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -225,11 +242,11 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
Image.configure({ Image.configure({
inline: true inline: true
}), }),
Link.configure({ // Link.configure({
autolink: true, // autolink: true,
linkOnPaste: true, // linkOnPaste: true,
validate: (href)=> console.log(href), // validate: (href)=> console.log(href),
}), // }),
Video, Video,
Iframe, Iframe,
Table.configure({ Table.configure({
...@@ -250,7 +267,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -250,7 +267,8 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
}), }),
Highlight.configure({ Highlight.configure({
multicolor: true multicolor: true
}) }),
CustomLink
], ],
content: value, content: value,
onUpdate: ({editor}) => onChange(editor.getHTML()) onUpdate: ({editor}) => onChange(editor.getHTML())
...@@ -325,18 +343,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -325,18 +343,9 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
return ( return (
<Fragment>{ getUploader({ accept: 'image/*' }) }</Fragment> <Fragment>{ getUploader({ accept: 'image/*' }) }</Fragment>
) )
case 'color': case 'file':
case 'highlight':
return ( return (
<div className={"atma-editor-select-colors"}> <Fragment>{ getUploader({ accept: '*' }) }</Fragment>
<ul className={"colors-list"}>
{
colors.map((itemColor, i)=>(
<li onClick={() => {}} style={{ backgroundColor: itemColor }} />
))
}
</ul>
</div>
) )
default: default:
return <div>Пусто</div> return <div>Пусто</div>
...@@ -389,7 +398,17 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -389,7 +398,17 @@ 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}}
...@@ -436,18 +455,20 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -436,18 +455,20 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
if(editor.isActive('image') === true){ if(editor.isActive('image') === true){
items = ['alignLeft', 'alignCenter', 'alignRight']; items = ['alignLeft', 'alignCenter', 'alignRight'];
} }
setColorsSelected(null);
if(items.length > 0){ if(items.length > 0){
setBubbleItems(items); setBubbleItems(items);
return true; return true;
} }
}} tippyOptions={{ duration: 100 }}> }} tippyOptions={{ duration: 100 }}>
<div className={"atma-editor-bubble"}> <div className={"atma-editor-bubble"} onClick={e => e.stopPropagation()}>
{ {
colorsSelected !== null ? colorsSelected !== null ?
colors.map((itemColor, i) => { colors.map((itemColor, i) => {
return ( <div className={'qcolors'} style={{ background: itemColor}} onMouseDown={()=>{ return ( <div className={'qcolors'} style={{ background: itemColor}} onClick={()=>{
colorsSelected === 'color' ? 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); setColorsSelected(null);
}} /> ) }} /> )
}) : bubbleItems.map((type, i) => { }) : bubbleItems.map((type, i) => {
...@@ -472,7 +493,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -472,7 +493,6 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
className={'atma-editor-content'} className={'atma-editor-content'}
/> />
</div> </div>
<EditorModal <EditorModal
isOpen={modalIsOpen} isOpen={modalIsOpen}
title={modalTitle} title={modalTitle}
...@@ -481,7 +501,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => { ...@@ -481,7 +501,7 @@ const QEditor = ({ value, onChange = ()=>{}, style, uploadOptions }) => {
getInnerModal() getInnerModal()
} }
{ {
buildActionsModal(innerModalType === 'color' || 'highlight' ? [] : [ buildActionsModal([
{ {
title: 'Отмена', title: 'Отмена',
className: ' atma-editor-cancel', className: ' atma-editor-cancel',
......
src/components/ToolBar.js
...@@ -45,6 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => { ...@@ -45,6 +45,7 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
type: 'g', type: 'g',
items: [ items: [
'link', 'link',
// 'file',
'image', 'image',
'video', 'video',
'iframe', '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{ ...@@ -140,6 +140,19 @@ body{
cursor: col-resize; cursor: col-resize;
} }
a[download]{
&[href*='.pdf']{
&:before{
content: 'pdf'
}
}
&:after{
content: attr(data-size);
color: tomato;
}
}
} }
&-bubble{ &-bubble{
...@@ -167,12 +180,6 @@ body{ ...@@ -167,12 +180,6 @@ body{
opacity: 0.8; opacity: 0.8;
} }
} }
.qcolors{
display: inline-block;
width: 20px;
height: 20px;
}
} }
&-modal{ &-modal{
...@@ -585,6 +592,17 @@ body{ ...@@ -585,6 +592,17 @@ body{
} }
} }
.qcolors{
display: inline-block;
width: 20px;
height: 20px;
opacity: 1;
&:hover{
cursor: pointer;
}
}
.qseparator{ .qseparator{
width: 16px; 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