Skip to content

R
react-ag-qeditor
Commit 5101cee0 by DenSakh
Options

feat: refactoring

parent 5499f2c8
Showing with 99 additions and 123 deletions
src/extensions/Iframe.js
import { Node, mergeAttributes } from '@tiptap/core' import { Node, mergeAttributes } from '@tiptap/core'
const Iframe = Node.create({ const Iframe = Node.create({
name: 'iframe', name: 'iframe',
group: 'block', group: 'block',
selectable: false, selectable: false,
draggable: true, draggable: true,
atom: true, atom: true,
addAttributes() { addAttributes() {
return { return {
"src": { src: {
default: null default: null
}, },
"frameborder": { frameborder: {
default: 0, default: 0
}, },
"allowfullscreen": { allowfullscreen: {
default: true, default: true,
parseHTML: () => { parseHTML: () => {
console.log(this) console.log(this)
},
},
"setInnerModalType" : {
default: null
},
"setModalIsOpen" : {
default: null
},
"setModalTitle" : {
default: null
},
"setCurrentRemoveIframe" : {
default: null
}
} }
}, }
}
},
parseHTML() { parseHTML() {
return [ return [
{ {
tag: 'iframe', tag: 'iframe'
}, }
] ]
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
return ['iframe', mergeAttributes(HTMLAttributes)]; return ['iframe', mergeAttributes(HTMLAttributes)]
}, },
addNodeView() { addNodeView() {
return ({ editor, node, ...a }) => { return ({ editor, node, ...a }) => {
const container = document.createElement('div'); const container = document.createElement('div')
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe')
iframe.src = node.attrs.src; iframe.src = node.attrs.src
iframe.allowfullscreen = node.attrs.allowfullscreen; iframe.allowfullscreen = node.attrs.allowfullscreen
iframe.classList.add('customIframe'); iframe.classList.add('customIframe')
const closeBtn = document.createElement('button'); const closeBtn = document.createElement('button')
closeBtn.textContent = 'X'; closeBtn.textContent = 'X'
closeBtn.classList.add('closeBtn'); closeBtn.classList.add('closeBtn')
closeBtn.addEventListener('click', function () { closeBtn.addEventListener('click', function () {
try { container.remove()
node.attrs.setModalTitle('Вы уверены, что хотите удалить?'); })
node.attrs.setInnerModalType('remove_iframe');
node.attrs.setModalIsOpen(true);
node.attrs.setCurrentRemoveIframe(container);
} catch {
container.remove();
}
});
// if (editor.isEditable) { // if (editor.isEditable) {
// container.classList.add('pointer-events-none'); // container.classList.add('pointer-events-none');
// } // }
container.append(closeBtn, iframe); container.append(closeBtn, iframe)
return { return {
dom: container, dom: container
} }
} }
}, },
addCommands() {
return {
setIframe: (options) => ({ tr, dispatch }) => {
const { selection } = tr
const node = this.type.create(options)
if (dispatch) { addCommands() {
tr.replaceRangeWith(selection.from, selection.to, node) return {
} setIframe:
(options) =>
({ tr, dispatch }) => {
const { selection } = tr
const node = this.type.create(options)
return true if (dispatch) {
}, tr.replaceRangeWith(selection.from, selection.to, node)
}
return true
} }
}, }
}); }
})
export default Iframe; export default Iframe
src/modals/IframeCustomModal.js
import React, { Fragment } from "react"; import React, { Fragment } from 'react'
export default function IframeCustomModal ({embedContent, setEmbedContent}) { export default function IframeCustomModal({ embedContent, setEmbedContent }) {
return ( return (
<Fragment> <Fragment>
<textarea <textarea
style={{width: '100%', height: '100%'}} style={{ width: '100%', height: '100%' }}
rows={18} rows={18}
value={embedContent} value={embedContent}
placeholder={'<iframe></iframe>'} placeholder='<iframe></iframe>'
onInput={(e) => setEmbedContent(e.target.value)} onInput={(e) => setEmbedContent(e.target.value)}
/> />
</Fragment> </Fragment>
) )
} }
src/modals/IframeModal.js
import React, { Fragment } from "react"; import React, { Fragment } from 'react'
export default function IframeModal ({embedContent, setEmbedContent}) { export default function IframeModal({ embedContent, setEmbedContent }) {
return ( return (
<Fragment> <Fragment>
<input type="text" value={embedContent} placeholder={'https://'} <input
onInput={(e) => setEmbedContent(e.target.value) type='text'
}/> value={embedContent}
<ul className={'atma-editor-soc-video'}> placeholder='https://'
<li className={'youtube'}/> onInput={(e) => setEmbedContent(e.target.value)}
<li className={'vimeo'}/> />
{/* <li className={'vk'}/> */} <ul className='atma-editor-soc-video'>
<li className={'ok'}/> <li className='youtube' />
<li className={'rutube'}/> <li className='vimeo' />
</ul> {/* <li className={'vk'}/> */}
</Fragment> <li className='ok' />
) <li className='rutube' />
</ul>
</Fragment>
)
} }
src/modals/RemoveIframeModal.js deleted 100644 → 0
import React, { Fragment } from "react";
export default function RemoveIframeModal(){
return (
<Fragment>
</Fragment>
)
}
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