Commit 5101cee0 by DenSakh

feat: refactoring

parent 5499f2c8
...@@ -9,29 +9,17 @@ const Iframe = Node.create({ ...@@ -9,29 +9,17 @@ const Iframe = Node.create({
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
} }
} }
}, },
...@@ -39,64 +27,58 @@ const Iframe = Node.create({ ...@@ -39,64 +27,58 @@ const Iframe = Node.create({
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() { addCommands() {
return { return {
setIframe: (options) => ({ tr, dispatch }) => { setIframe:
(options) =>
({ tr, dispatch }) => {
const { selection } = tr const { selection } = tr
const node = this.type.create(options) const node = this.type.create(options)
if (dispatch) { if (dispatch) {
tr.replaceRangeWith(selection.from, selection.to, node) tr.replaceRangeWith(selection.from, selection.to, node)
} }
return true return true
},
} }
}, }
}); }
})
export default Iframe; export default Iframe
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>
......
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'}/> />
<ul className='atma-editor-soc-video'>
<li className='youtube' />
<li className='vimeo' />
{/* <li className={'vk'}/> */} {/* <li className={'vk'}/> */}
<li className={'ok'}/> <li className='ok' />
<li className={'rutube'}/> <li className='rutube' />
</ul> </ul>
</Fragment> </Fragment>
) )
......
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