new editor

package.json

@@ -54,12 +54,20 @@
         "dist"
     ],
     "dependencies": {
+        "@tiptap/core": "^2.0.0-beta.176",
+        "@tiptap/extension-image": "^2.0.0-beta.27",
+        "@tiptap/extension-link": "^2.0.0-beta.38",
+        "@tiptap/extension-table": "^2.0.0-beta.49",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.20",
+        "@tiptap/extension-table-header": "^2.0.0-beta.22",
+        "@tiptap/extension-table-row": "^2.0.0-beta.19",
+        "@tiptap/extension-text-align": "^2.0.0-beta.29",
+        "@tiptap/extension-underline": "^2.0.0-beta.23",
+        "@tiptap/react": "^2.0.0-beta.109",
+        "@tiptap/starter-kit": "^2.0.0-beta.185",
         "katex": "^0.15.3",
-        "quill-blot-formatter": "^1.0.5",
-        "quill-image-resize-module-react": "^3.0.0",
         "rc-upload": "^4.3.3",
         "react": "^18.0.0",
-        "react-quill": "^1.3.5",
         "sass": "^1.49.9"
     }
 }

src/components/EditorModal.js

-import React from "react";
-
-export default class EditorModal extends React.Component {
-
-    constructor (props) {
-        super(props);
-
-        this.state = {
-            isShow: false,
-            title: ''
-        }
-
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-    }
-
-    show = ({ title }) => {
-        // this.resolve = resolve;
-        // this.reject = reject;
-        this.setState({
-            isShow: true,
-            title
-        })
-    }
-
-    hide(){
-        // this.setState({ isShow: false }, this.reject('ab'));
-        this.setState({ isShow: false });
-    }
-
-    render () {
-
-        return (
-            <div className="atma-editor-modal" style={{ display: this.state.isShow ? 'flex' : 'none' }}>
-                <div className="atma-editor-modal-box">
-                    {
-                        this.state.title &&
-                            <div className="atma-editor-modal-box-header">{ this.state.title }</div>
-                    }
-                    {/*<div className={'atma-editor-modal-close'} onClick={ this.hide }>×</div>*/}
-                    { this.props.children && this.props.children }
-                </div>
+import React, { useState } from "react";
+
+const EditorModal = ({ isOpen = false, title = null, children }) => {
+    // const [isShow, setIsShow] = useState(false);
+    // const [title, setTitle] = useState('');
+
+    return (
+        <div className="atma-editor-modal" style={{ display: isOpen ? 'flex' : 'none' }}>
+            <div className="atma-editor-modal-box">
+                {
+                    title && <div className="atma-editor-modal-box-header">{ title }</div>
+                }
+                { children }
             </div>
-        )
-
-    }
+        </div>
+    )
 }
-EditorModal.defaultProps = {
-    title: null
-};
+
+export default EditorModal;

src/components/Select.js

+import React, { Fragment, useState } from 'react'
+
+const Select = ({ items }) => {
+    const [show, setShow] = useState(false);
+
+
+    return (
+        <div className={"atma-editor-select" + (show === true ? 'show' : '')} onClick={()=>{ setShow(!show) }}>
+            <div className="atma-editor-select-drop">
+
+            </div>
+        </div>
+    )
+}
+
+export default Select;

src/components/ToolBar.js

+import React, { Fragment, useState } from 'react'
+
+const ToolBar = ({ editor, toolsLib = []  }) => {
+    if (!editor) {
+        return null
+    }
+
+    const [toolbarItems, setToolbarItems ] = useState([
+        {
+            type: 'g',
+            items: [
+                'undo',
+                'redo'
+            ]
+        },
+        {
+            type: 's',
+            items: [
+                'h2',
+                'h3',
+                'h4',
+                'paragraph'
+            ]
+        },
+        /* {
+            type: 'g',
+            items: [
+                'bold',
+                'italic',
+                'underline',
+                'strike',
+            ]
+        }, */
+        {
+            type: 'g',
+            items: [
+                'bulletList',
+                'orderedList',
+                'blockquote',
+                'codeBlock',
+                'hr',
+
+            ]
+        },
+        {
+            type: 'g',
+            items: [
+                'image',
+                'video',
+                'iframe',
+            ]
+        },
+
+        {
+            type: 'g',
+            items: [
+                'clearMarks',
+                'hardBreak',
+            ]
+        }
+    ])
+
+    const getItem = (type = null, idx) => {
+        let item = null;
+
+        if(toolsLib[type]){
+            item = toolsLib[type];
+
+            return (
+                <div
+                    key={ idx }
+                    onClick={ item.onClick }
+                    className={ `qicon q${type}` +  (editor.isActive(type) ? ' active' : '') }
+                    title={item.title}
+                />
+            )
+        }else{
+            return null;
+        }
+    }
+
+    const getItems = () => {
+        let toolItems = [];
+
+        toolbarItems.map((section, i) => {
+            let gItems = [];
+            if(section.type === 'g'){
+                section.items.map((gKey, idx)=>{
+                    gItems.push(getItem(gKey, `g-${ i }-${ idx }`))
+                })
+
+                toolItems.push(
+                    <div className="atma-editor-toolbar-g">{ gItems }</div>
+                )
+            }
+        })
+
+        return toolItems;
+    }
+
+    return (
+        <div className="atma-editor-toolbar">
+            { getItems() }
+        </div>
+    )
+}
+
+export default ToolBar;

src/components/ToolbarDrop.js

+import React, { Fragment, useState } from 'react'
+
+const Select = ({ items, onChange }) => {
+    const [show, setShow] = useState(false);
+
+    const onChangeHandler = (item) => {
+        console.log(item);
+    }
+
+    return (
+        <div className={"atma-editor-toolbar-drop" + (show === true ? 'show' : '')} onClick={()=>{ setShow(!show) }}>
+            <div className={"atma-editor-toolbar-drop-selected"}></div>
+            <div className="atma-editor-opts">
+                {
+                    items.map((item, i) => (
+                        <div className="atma-editor-opts-item" onClick={()=>onChangeHandler(item)}></div>
+                    ))
+                }
+
+            </div>
+        </div>
+    )
+}
+
+export default Select;

src/extensions/Iframe.js

+import { Node, mergeAttributes } from '@tiptap/core'
+
+const Iframe = Node.create({
+    name: 'iframe',
+    group: 'block',
+    selectable: false,
+    draggable: true,
+    atom: true,
+
+    addAttributes() {
+        return {
+            "src": {
+                default: null
+            },
+            "frameborder": {
+                default: 0,
+            },
+            "allowfullscreen": {
+                default: true,
+                parseHTML: () => {
+                    console.log(this)
+                },
+            },
+        }
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'iframe',
+            },
+        ]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['iframe', mergeAttributes(HTMLAttributes)];
+    },
+
+    addNodeView() {
+        return ({ editor, node, ...a }) => {
+
+
+            // div.className = 'aspect-w-16 aspect-h-9' + (editor.isEditable ? ' cursor-pointer' : '');
+            const iframe = document.createElement('iframe');
+            if (editor.isEditable) {
+                iframe.className = 'pointer-events-none';
+            }
+
+            iframe.src = node.attrs.src;
+            iframe.frameBorder = node.attrs.frameborder;
+            iframe.allowfullscreen = node.attrs.allowfullscreen;
+            iframe.style = 'width:1280px;height:auto;aspect-ratio: 16 / 9;';
+            // div.append(video);
+            return {
+                dom: iframe,
+            }
+        }
+    },
+
+    addCommands() {
+        return {
+            setIframe: (options) => ({ tr, dispatch }) => {
+                const { selection } = tr
+                const node = this.type.create(options)
+                //
+                if (dispatch) {
+                    tr.replaceRangeWith(selection.from, selection.to, node)
+                }
+
+                return true
+            },
+        }
+    },
+});
+
+export default Iframe;

src/extensions/Video.js

+import { Node, mergeAttributes } from '@tiptap/core'
+
+const Video = Node.create({
+    name: 'video',
+    group: 'block',
+    selectable: false,
+    draggable: true,
+    atom: true,
+
+    addAttributes() {
+        return {
+            "src": {
+                default: null
+            },
+            "poster": {
+                default: null
+            }
+        }
+    },
+
+    parseHTML() {
+        return [
+            {
+                tag: 'video',
+            },
+        ]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ['video', mergeAttributes(HTMLAttributes)];
+    },
+
+    addNodeView() {
+        return ({ editor, node }) => {
+            const video = document.createElement('video');
+            if (editor.isEditable) {
+                video.className = 'pointer-events-none';
+            }
+            video.src = node.attrs.src;
+            video.poster = node.attrs.poster;
+            video.controls = true;
+            return {
+                dom: video,
+            }
+        }
+    },
+
+    addCommands() {
+        return {
+            setVideo: (options) => ({ tr, dispatch }) => {
+                const { selection } = tr
+                const node = this.type.create(options)
+                //
+                if (dispatch) {
+                    tr.replaceRangeWith(selection.from, selection.to, node)
+                }
+
+                return true
+            },
+        }
+    },
+});
+
+export default Video;