Skip to content

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

new editor

parent 7ab063ca
Showing with 172 additions and 53 deletions
example/src/App.js
......@@ -7,22 +7,7 @@ import 'react-ag-qeditor/dist/index.css'
const App = () => {
return <div style={{padding:40}}>
<QEditor
value={'<p><span style="font-size: 24px;"><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></span></p><p><br></p><table style="width: 100%;"><tbody><tr><td style="width: 50.0000%;"><img src="https://fs1.sintegrum.com/api/v1/files/qBGd6qdcF-U5ulKXFIkII8VuM92K9Vpd" style="width: 628px;" class="fr-fic fr-dib"><br></td><td style="width: 50.0000%;"><div style="text-align: left;">Для каждого сотрудника компании качественная деятельность является естественной. &nbsp;Качественный &nbsp;сервис &ndash; это то, что обеспечивает компании лидирующее положение на рынке. Мы развиваем и обеспечиваем качество наших услуг и всех процессов в компании. Основой для обеспечения и развития качества является система стандартов и регламентов компании, неукоснительное соблюдение которых является нашим принципом</div><div data-empty="true" style="text-align: left;"><br></div><div style="text-align: left;">Посмотрите видео:</div><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="//www.youtube.com/embed/mfOZnfuVy-g?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span><br></td></tr></tbody></table><p><br></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
onChange={(value)=>{
console.log('sads', value);
}}
uploadOptions={{
url: 'https://cdn.atmaguru.online/upload/?sid=test&md5=VE5Gz8OqRY0FduVfM4SP1g&expires=1654771143',
errorMessage: 'Загрузка временно невозможна'
}}
style={{
maxWidth: '830px',
margin: '20px 20px 20px 100px',
}}
/>
<QEditor
value={'<p><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></p><p><br></p><p><img src="https://fs1.sintegrum.com/api/v1/files/qBGd6qdcF-U5ulKXFIkII8VuM92K9Vpd" style="" class="fr-fic fr-dib" width="628px"></p><p>Для каждого сотрудника компании качественная деятельность является естественной.&nbsp;Качественный&nbsp;сервис – это то, что обеспечивает компании лидирующее положение на рынке. Мы развиваем и обеспечиваем качество наших услуг и всех процессов в компании. Основой для обеспечения и развития качества является система стандартов и регламентов компании, неукоснительное соблюдение которых является нашим принципом</p><p><br></p><p><br></p><video class="ql-video-local" src="https://cdn.atmaguru.online/2/test/5/K/5KHrK0aNzS5Eb6SPSnT8nW4oM59q7nrZIgDxtk0OVOIsN4Hw64FsGDjoSmQVRrqy.mp4.mp4" controls="true" disabled="true" poster="https://cdn.atmaguru.online/2/test/5/K/5KHrK0aNzS5Eb6SPSnT8nW4oM59q7nrZIgDxtk0OVOIsN4Hw64FsGDjoSmQVRrqy.mp4.mp4.jpg"></video><p><br></p><p>Посмотрите видео:</p><p><br></p><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/mfOZnfuVy-g" style="width:1280px;height:auto;aspect-ratio: 16 / 9;"></iframe><p><br></p><p><br></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><p><br></p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
value={'<p><span style="font-size: 24px;"><strong>Наш принцип №4 - Непрерывно улучшать процессы</strong></span></p><p>Как мы понимаем, что мы выполняем наш принцип №4 Непрерывно улучшать процессы!</p><ul><li>Мы следим за современными тенденциями рынка и идём в ногу со временем</li><li>Мы изобретаем новые эффективные способы решения задач</li><li>Мы приветствуем и поощряем инициативу каждого сотрудника компании</li><li>Мы устраняем проблемы и ошибки в процессах</li><li>Мы используем непрерывный цикл Планируй-Делай-Контролируй-Корректируй для улучшения наших процессов</li><li>Мы измеряем результаты нашей работы. Что мы не измеряем, тем мы не управляем</li><li>Мы замечаем проблемы и ошибки в процессах и говорим о них</li></ul>'}
onChange={(value)=>{
console.log('sads', value);
}}
......
src/QEditor.jsx
......@@ -4,7 +4,7 @@ import './index.scss'
// import EditorModal from "./components/EditorModal"
// import Uploader from "./components/Uploader"
import { useEditor, EditorContent, BubbleMenu, isMarkActive, isActive } from '@tiptap/react'
import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import Table from '@tiptap/extension-table'
......@@ -39,6 +39,30 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
}
const toolsLib = {
link: {
title: 'Вставить ссылку',
onClick: () => {
const previousUrl = editor.getAttributes('link').href
const url = window.prompt('Введите URL', previousUrl);
// cancelled
if (url === null) {
return
}
// empty
if (url === '') {
editor.chain().focus().extendMarkRange('link').unsetLink()
.run();
return
}
// update link
editor.chain().focus().extendMarkRange('link').setLink({ href: url, target: '_blank' })
.run();
}
},
video: {
title: 'Загрузить видео',
onClick: () => modalOpener('video', 'Загрузить видео')
......@@ -133,7 +157,7 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
},
insertTable: {
title: 'Вставить таблицу',
onClick: () => editor.chain().focus().insertTable({ rows: 4, cols: 4 }).run()
onClick: () => editor.chain().focus().insertTable({ rows: 2, cols: 2 }).run()
},
deleteTable: {
title: 'Удалить таблицу',
......@@ -145,7 +169,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
},
addRowAfter: {
title: 'Вставить строку после',
onClick: () => editor.chain().focus().addRowBefore().run()
onClick: () => editor.chain().focus().addRowAfter().run()
},
deleteRow: {
title: 'Удалить строку',
onClick: () => editor.chain().focus().deleteRow().run()
},
addColumnBefore: {
title: 'Вставить столбец перед',
......@@ -155,6 +183,18 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
title: 'Вставить столбец после',
onClick: () => editor.chain().focus().addColumnAfter().run()
},
deleteColumn: {
title: 'Удалить столбец',
onClick: () => editor.chain().focus().deleteColumn().run()
},
mergeOrSplit: {
title: 'Объединить/разъединить ячейки',
onClick: () => editor.chain().focus().mergeOrSplit().run()
},
toggleHeaderCell: {
title: 'Добавить/удалить заголовок',
onClick: () => editor.chain().focus().toggleHeaderCell().run()
}
}
const editor = useEditor({
......@@ -162,7 +202,11 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
StarterKit,
Underline,
Image,
Link,
Link.configure({
autolink: true,
linkOnPaste: true,
validate: (href)=> console.log(href),
}),
Video,
Iframe,
Table.configure({
......@@ -179,8 +223,16 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
})
],
content: value,
onUpdate: ({editor}) => {
console.log(editor.getHTML());
}
})
useEffect(()=>{
}, [])
const buildActionsModal = (buttons = []) => {
if (buttons.length === 0) {
return null;
......@@ -314,43 +366,75 @@ const QEditor = ({ value, onChange, style, uploadOptions }) => {
<BubbleMenu editor={editor} shouldShow={({...o}) => {
let items = [];
console.log(editor.isActive('table'), o.from, o.to, o);
if(o.from !== o.to && editor.isActive('paragraph')){
items = initialBubbleItems;
console.log('das');
}
if(editor.isActive('table')){
items = [...items, ...['video']];
}
if(editor.isActive('table')){
if(o.from === o.to || document.querySelectorAll('.selectedCell').length > 0){
if(items.length > 0){
items = [...items, '|']
}
console.log(o);
if(document.querySelectorAll('.selectedCell').length > 0){
items = [
...items,
...['mergeOrSplit']
]
}
items = [
...items,
...[
'addRowBefore',
'addRowAfter',
'deleteRow',
'|',
'addColumnBefore',
'addColumnAfter',
'deleteColumn',
'|',
'toggleHeaderCell',
'|',
'deleteTable'
]
];
}
}
console.log('>', o.from, o.to, editor.isActive('paragraph'));
console.log('items', [...['1','2'], ...['3', '4']]);
if(editor.isActive('image') === true){
setBubbleItems(['alignLeft', 'alignCenter', 'alignRight']);
}
if(items.length > 0){
setBubbleItems(items);
return true;
}
setBubbleItems(items)
return true
}} tippyOptions={{ duration: 100 }}>
<div className="atma-editor-bubble">
{
bubbleItems.map((type, i)=>(
<div
key={ 'bubbleItems' + i }
className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')}
title={ toolsLib[type] ? toolsLib[type].title : '' }
onClick={ toolsLib[type].onClick }
/>
))
bubbleItems.map((type, i) => {
if(type === '|'){
return ( <div className={'qseparator'} /> )
}else{
return (
<div
key={ 'bubbleItems' + i }
className={'qicon q' + type + (editor.isActive(type) ? ' active' : '')}
title={ toolsLib[type] ? toolsLib[type].title : '' }
onClick={ toolsLib[type].onClick }
/>
)
}
})
}
</div>
......
src/components/ToolBar.js
......@@ -14,23 +14,14 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
]
},
{
type: 's',
type: 'g',
items: [
'paragraph',
'h2',
'h3',
'h4',
'paragraph'
'h4'
]
},
/* {
type: 'g',
items: [
'bold',
'italic',
'underline',
'strike',
]
}, */
{
type: 'g',
items: [
......@@ -45,6 +36,15 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
{
type: 'g',
items: [
'alignLeft',
'alignCenter',
'alignRight',
]
},
{
type: 'g',
items: [
'link',
'image',
'video',
'iframe',
......@@ -57,6 +57,13 @@ const ToolBar = ({ editor, toolsLib = [] }) => {
'clearMarks',
'hardBreak',
]
},
{
type: 'g',
items: [
'insertTable',
]
}
])
......
src/index.scss
......@@ -35,7 +35,7 @@ body{
&:after{
content: '';
display: inline-block;
width: 8px;
width: 14px;
}
}
......@@ -92,7 +92,7 @@ body{
overflow: hidden;
td, th{
min-width: 1em;
min-width: 3em;
border: 1px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
......@@ -144,10 +144,10 @@ body{
border-radius: 8px;
box-shadow: 0 16px 24px 0 rgba(0,0,0,0.2);
background-color: #fff;
padding: 0 6px;
padding: 8px;
.qicon{
width: 28px;
width: 25px;
height: 28px;
background-repeat: no-repeat;
background-position: center;
......@@ -464,5 +464,48 @@ body{
&.qiframe{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2218%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.623.597h12a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202h-12a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2z%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-dasharray%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
}
&.qinsertTable{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2215%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281.517%20.975%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M.976%205.967h11M6.035.033v11%22%2F%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qdeleteTable{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke-linecap%3D%22round%22%3E%3Crect%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qaddRowBefore{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2219%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qaddRowAfter{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%28-180%206.5%209.513%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qdeleteRow{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%206%207%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M4.678%2010.002v1M7.678%2010.002v1M4.678%201.002v1M7.678%201.002v1%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qaddColumnBefore{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%28-90%206.835%206.19%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qaddColumnAfter{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2219%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%208.81%209.835%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20stroke%3D%22%23FFF%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20d%3D%22M4%205h4M6%207V3%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qdeleteColumn{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%201%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M4.678%2010.002v1M7.678%2010.002v1M4.678%201.002v1M7.678%201.002v1%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22m8.05%203.857-4%204M4.05%203.857l4%204%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qmergeOrSplit{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22rotate%2890%205.81%206.835%29%22%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20stroke-linecap%3D%22square%22%20d%3D%22M.976%207.967h11M4.065.637v11M4.057%208.54v3M3.437%203.906h-3M8.057%208.54v3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qtoggleHeaderCell{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2219%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%281%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Ccircle%20fill%3D%22%231F1E1D%22%20cx%3D%226%22%20cy%3D%225%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M4.408%207.548c.397%200%20.626-.236.626-.653V5.487h1.965v1.408c0%20.417.23.653.626.653s.625-.236.625-.653V3.118c0-.417-.229-.653-.625-.653-.397%200-.626.236-.626.653v1.357H5.034V3.118c0-.417-.229-.653-.626-.653-.396%200-.628.236-.628.653v3.777c0%20.417.232.653.628.653z%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20stroke%3D%22%231F1E1D%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22square%22%20d%3D%22M.976%2011.967h11M6.009%2012.482v5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qalignLeft{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20transform%3D%22translate%28.303%20.805%29%22%20fill%3D%22%231D1D1F%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20width%3D%2213.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3Crect%20y%3D%228%22%20width%3D%2213.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3Crect%20y%3D%224%22%20width%3D%227.4%22%20height%3D%221.4%22%20rx%3D%22.7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
&.qalignCenter{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20d%3D%22M.7%201.559h12M4.05%205.559h5.3M.7%209.559h12%22%2F%3E%3C%2Fsvg%3E');
}
&.qalignRight{
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%231D1D1F%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20d%3D%22M.7%201.559h12M7.4%205.559h5.3M.7%209.559h12%22%2F%3E%3C%2Fsvg%3E');
}
}
.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