bitforum-frontend/lib/editor_old/FileBlot.js

import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');
const Parchment = Quill.import('parchment');

class FileBlot extends BlockEmbed {
    static blotName = 'fileCard';
    static tagName = 'div';
    static className = 'file-card';
	static scope = Parchment.Scope.BLOCK_BLOT;

    static create(value) {
        const node = super.create();
		//node.setAttribute('contenteditable', 'false');
        node.setAttribute('data-file-name', value.name);
        node.setAttribute('data-file-size', value.size);
		node.setAttribute('draggable', 'true');

        node.innerHTML = `
			<div class="file-card-content">
				<div class="file-card-info">
					<span>📄 <span class="file-name">${value.name} (${(value.size / 1024 / 1024).toFixed(2)}MB)</span></span>
				</div>
				<div class="file-card-actions">
					<button data-align="start">
						<img src="/resources/editor/align-left.svg" alt="왼쪽" />
					</button>
					<button data-align="center">
						<img src="/resources/editor/align-center.svg" alt="중앙앙" />
					</button>
					<button data-align="end">
						<img src="/resources/editor/align-right.svg" alt="오른쪽" />
					</button>
					<button class="file-card-delete">
						<img src="/resources/editor/trash.svg" alt="삭제" />
					</button>
				</div>
			</div>
        `;

		// 클릭 시 이벤트 발생
		node.addEventListener('click', (e) => {
			e.preventDefault();
			e.stopPropagation();
			
			const quill = FileBlot.getQuillInstance();
			if (quill) {
				const uploader = quill?.getModule('fileUploader');

				// 첨부파일 활성화 해제
				uploader.clearActiveCards();

				// 에디터 커서 표시 해제
				quill.root.blur();
			}

			node.classList.add('active');
		});

        // 삭제 버튼
        node.querySelector('.file-card-delete')?.addEventListener('click', () => {
            node.remove();
        });

        // 정렬 버튼
        node.querySelectorAll('button[data-align]').forEach(btn => {
            btn.addEventListener('click', (e) => {
				const target = e.currentTarget;
                const align = target.dataset.align;
				node.querySelectorAll('button[data-align]').forEach(el => el.classList.remove('active'));
                node.style.justifySelf = align || 'start';
				target.classList.add('active');
            });
        });

		// 드래그 시작
       node.addEventListener('dragstart', (e) => {
            const value = {
                name: node.getAttribute('data-file-name'),
                size: node.getAttribute('data-file-size')
            };
            e.dataTransfer?.setData('text/plain', JSON.stringify(value));
            e.dataTransfer.effectAllowed = 'move';
            node.classList.add('dragging');
        });

        node.addEventListener('dragend', () => {
            node.classList.remove('dragging');
        });

        return node;
    }

    static value(node) {
        return {
            name: node.getAttribute('data-file-name'),
            size: node.getAttribute('data-file-size')
        };
    }

	static getQuillInstance() {
		return Quill.quillInstance || null;
	}

	static setQuillInstance(quill) {
        Quill.quillInstance = quill;
    }
}

export default FileBlot;