Featured artworks thumbnails
This commit is contained in:
1127
resources/js/Pages/Admin/Academy/LessonEditor.jsx
Normal file
1127
resources/js/Pages/Admin/Academy/LessonEditor.jsx
Normal file
File diff suppressed because it is too large
Load Diff
193
resources/js/components/forum/RichCompareNode.jsx
Normal file
193
resources/js/components/forum/RichCompareNode.jsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import { Node, mergeAttributes as mergeNodeAttributes } from '@tiptap/core'
|
||||
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
|
||||
|
||||
function readImageAttrs(element) {
|
||||
const imageElements = Array.from(element.querySelectorAll?.('img') || [])
|
||||
const subtitleElement = element.querySelector?.('figcaption')
|
||||
|
||||
return {
|
||||
leftSrc: imageElements[0]?.getAttribute('src') || '',
|
||||
leftAlt: imageElements[0]?.getAttribute('alt') || '',
|
||||
rightSrc: imageElements[1]?.getAttribute('src') || '',
|
||||
rightAlt: imageElements[1]?.getAttribute('alt') || '',
|
||||
subtitle: subtitleElement?.textContent?.trim() || '',
|
||||
}
|
||||
}
|
||||
|
||||
function RichCompareNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
|
||||
const selectNode = useCallback(() => {
|
||||
if (!editor || typeof getPos !== 'function') {
|
||||
return
|
||||
}
|
||||
|
||||
editor.chain().focus().setNodeSelection(getPos()).run()
|
||||
}, [editor, getPos])
|
||||
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
as="figure"
|
||||
className={["rich-compare-node", selected ? 'is-selected' : ''].filter(Boolean).join(' ')}
|
||||
data-rich-compare="true"
|
||||
onMouseDown={(event) => {
|
||||
if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
|
||||
return
|
||||
}
|
||||
|
||||
selectNode()
|
||||
}}
|
||||
>
|
||||
<div className="rich-compare-node__grid">
|
||||
<div className="rich-compare-node__tile">
|
||||
<span className="rich-compare-node__badge">Left</span>
|
||||
<img
|
||||
src={node.attrs.leftSrc}
|
||||
alt={node.attrs.leftAlt || ''}
|
||||
className="rich-compare-node__img"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rich-compare-node__tile">
|
||||
<span className="rich-compare-node__badge">Right</span>
|
||||
<img
|
||||
src={node.attrs.rightSrc}
|
||||
alt={node.attrs.rightAlt || ''}
|
||||
className="rich-compare-node__img"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!selected && node.attrs.subtitle ? (
|
||||
<figcaption className="rich-compare-node__subtitle">{node.attrs.subtitle}</figcaption>
|
||||
) : null}
|
||||
|
||||
{selected ? (
|
||||
<div className="rich-compare-node__editor" contentEditable={false}>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Left alt text</span>
|
||||
<input
|
||||
value={node.attrs.leftAlt || ''}
|
||||
onChange={(event) => updateAttributes({ leftAlt: event.target.value })}
|
||||
placeholder="Describe the left image"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Right alt text</span>
|
||||
<input
|
||||
value={node.attrs.rightAlt || ''}
|
||||
onChange={(event) => updateAttributes({ rightAlt: event.target.value })}
|
||||
placeholder="Describe the right image"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Subtitle</span>
|
||||
<input
|
||||
value={node.attrs.subtitle || ''}
|
||||
onChange={(event) => updateAttributes({ subtitle: event.target.value })}
|
||||
placeholder="Visible caption below the comparison"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={selectNode}
|
||||
className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
Keep selected
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteNode}
|
||||
className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
|
||||
>
|
||||
Remove comparison
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const RichCompare = Node.create({
|
||||
name: 'imageCompare',
|
||||
group: 'block',
|
||||
atom: true,
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
leftSrc: { default: '' },
|
||||
leftAlt: { default: '' },
|
||||
rightSrc: { default: '' },
|
||||
rightAlt: { default: '' },
|
||||
subtitle: { default: '' },
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'figure[data-rich-compare]',
|
||||
getAttrs: (element) => readImageAttrs(element),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ node, HTMLAttributes }) {
|
||||
const {
|
||||
leftSrc: _leftSrc,
|
||||
leftAlt: _leftAlt,
|
||||
rightSrc: _rightSrc,
|
||||
rightAlt: _rightAlt,
|
||||
subtitle: _subtitle,
|
||||
...figureHTMLAttributes
|
||||
} = HTMLAttributes
|
||||
|
||||
const leftImageAttributes = {
|
||||
src: node.attrs.leftSrc,
|
||||
alt: node.attrs.leftAlt || '',
|
||||
loading: 'lazy',
|
||||
decoding: 'async',
|
||||
class: 'rich-compare-node__img',
|
||||
}
|
||||
|
||||
const rightImageAttributes = {
|
||||
src: node.attrs.rightSrc,
|
||||
alt: node.attrs.rightAlt || '',
|
||||
loading: 'lazy',
|
||||
decoding: 'async',
|
||||
class: 'rich-compare-node__img',
|
||||
}
|
||||
|
||||
return [
|
||||
'figure',
|
||||
mergeNodeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
|
||||
'data-rich-compare': 'true',
|
||||
}),
|
||||
['div', { class: 'rich-compare-node__grid' },
|
||||
['div', { class: 'rich-compare-node__tile' }, ['img', leftImageAttributes]],
|
||||
['div', { class: 'rich-compare-node__tile' }, ['img', rightImageAttributes]],
|
||||
],
|
||||
...(node.attrs.subtitle ? [['figcaption', { class: 'rich-compare-node__subtitle' }, node.attrs.subtitle]] : []),
|
||||
]
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(RichCompareNodeView)
|
||||
},
|
||||
})
|
||||
|
||||
export default RichCompare
|
||||
317
resources/js/components/forum/RichImageNode.jsx
Normal file
317
resources/js/components/forum/RichImageNode.jsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, { useCallback, useEffect, useRef } from 'react'
|
||||
import { mergeAttributes } from '@tiptap/core'
|
||||
import Image from '@tiptap/extension-image'
|
||||
import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
|
||||
|
||||
function clamp(value, min, max) {
|
||||
return Math.min(max, Math.max(min, value))
|
||||
}
|
||||
|
||||
function parsePixelValue(rawValue) {
|
||||
const normalized = String(rawValue || '').trim()
|
||||
|
||||
if (!normalized) {
|
||||
return null
|
||||
}
|
||||
|
||||
const parsed = Number.parseFloat(normalized.replace(/px$/i, ''))
|
||||
return Number.isFinite(parsed) ? Math.round(parsed) : null
|
||||
}
|
||||
|
||||
function readImageAttrs(element) {
|
||||
const imageElement = element.tagName?.toLowerCase() === 'img'
|
||||
? element
|
||||
: element.querySelector?.('img')
|
||||
|
||||
const captionElement = element.querySelector?.('figcaption')
|
||||
|
||||
return {
|
||||
src: imageElement?.getAttribute('src') || '',
|
||||
alt: imageElement?.getAttribute('alt') || '',
|
||||
title: imageElement?.getAttribute('title') || '',
|
||||
caption: captionElement?.textContent?.trim() || '',
|
||||
width: parsePixelValue(
|
||||
element.getAttribute?.('data-width')
|
||||
|| element.getAttribute?.('width')
|
||||
|| imageElement?.getAttribute('width')
|
||||
|| element.style?.width
|
||||
|| '',
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
function RichImageNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
|
||||
const imageRef = useRef(null)
|
||||
const cleanupResizeRef = useRef(null)
|
||||
|
||||
useEffect(() => () => {
|
||||
if (typeof cleanupResizeRef.current === 'function') {
|
||||
cleanupResizeRef.current()
|
||||
}
|
||||
}, [])
|
||||
|
||||
const selectNode = useCallback(() => {
|
||||
if (!editor || typeof getPos !== 'function') {
|
||||
return
|
||||
}
|
||||
|
||||
editor.chain().focus().setNodeSelection(getPos()).run()
|
||||
}, [editor, getPos])
|
||||
|
||||
const startResize = useCallback((event) => {
|
||||
if (!imageRef.current || event.button !== 0) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
selectNode()
|
||||
|
||||
const imageElement = imageRef.current
|
||||
const parentWidth = imageElement.parentElement?.getBoundingClientRect().width || imageElement.getBoundingClientRect().width || 0
|
||||
const startX = event.clientX
|
||||
const startWidth = node.attrs.width || Math.round(imageElement.getBoundingClientRect().width) || 0
|
||||
const minWidth = 180
|
||||
const maxWidth = Math.max(minWidth, Math.round(parentWidth || 1280))
|
||||
|
||||
const handleMove = (moveEvent) => {
|
||||
const nextWidth = clamp(Math.round(startWidth + (moveEvent.clientX - startX)), minWidth, maxWidth)
|
||||
updateAttributes({ width: nextWidth })
|
||||
}
|
||||
|
||||
const handleUp = () => {
|
||||
window.removeEventListener('pointermove', handleMove)
|
||||
window.removeEventListener('pointerup', handleUp)
|
||||
cleanupResizeRef.current = null
|
||||
}
|
||||
|
||||
cleanupResizeRef.current = handleUp
|
||||
window.addEventListener('pointermove', handleMove)
|
||||
window.addEventListener('pointerup', handleUp)
|
||||
}, [node.attrs.width, selectNode, updateAttributes])
|
||||
|
||||
const width = Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0
|
||||
? Number(node.attrs.width)
|
||||
: null
|
||||
|
||||
return (
|
||||
<NodeViewWrapper
|
||||
as="figure"
|
||||
className={[
|
||||
'rich-image-node',
|
||||
selected ? 'is-selected' : '',
|
||||
].filter(Boolean).join(' ')}
|
||||
data-rich-image="true"
|
||||
onMouseDown={(event) => {
|
||||
if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
|
||||
return
|
||||
}
|
||||
|
||||
selectNode()
|
||||
}}
|
||||
>
|
||||
<div className="rich-image-node__frame">
|
||||
<img
|
||||
ref={imageRef}
|
||||
src={node.attrs.src}
|
||||
alt={node.attrs.alt || ''}
|
||||
title={node.attrs.title || ''}
|
||||
className="rich-image-node__img"
|
||||
style={width ? { width: `${width}px` } : undefined}
|
||||
/>
|
||||
|
||||
{selected ? (
|
||||
<button
|
||||
type="button"
|
||||
data-drag-handle
|
||||
className="rich-image-node__drag-handle"
|
||||
title="Drag to move image"
|
||||
onMouseDown={selectNode}
|
||||
>
|
||||
<i className="fa-solid fa-grip-lines" />
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{selected ? (
|
||||
<button
|
||||
type="button"
|
||||
className="rich-image-node__resize-handle"
|
||||
title="Resize image"
|
||||
onPointerDown={startResize}
|
||||
>
|
||||
<i className="fa-solid fa-up-right-and-down-left-from-center" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{!selected && node.attrs.caption ? (
|
||||
<figcaption className="rich-image-node__caption">{node.attrs.caption}</figcaption>
|
||||
) : null}
|
||||
|
||||
{selected ? (
|
||||
<div className="rich-image-node__editor" contentEditable={false}>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Alt text</span>
|
||||
<input
|
||||
value={node.attrs.alt || ''}
|
||||
onChange={(event) => updateAttributes({ alt: event.target.value })}
|
||||
placeholder="Describe the image for screen readers"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Caption</span>
|
||||
<input
|
||||
value={node.attrs.caption || ''}
|
||||
onChange={(event) => updateAttributes({ caption: event.target.value })}
|
||||
placeholder="Visible caption below the image"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto] md:items-end">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Width</span>
|
||||
<input
|
||||
type="number"
|
||||
min="180"
|
||||
max="2400"
|
||||
value={width || ''}
|
||||
onChange={(event) => {
|
||||
const nextValue = Number.parseInt(event.target.value, 10)
|
||||
updateAttributes({ width: Number.isFinite(nextValue) ? nextValue : null })
|
||||
}}
|
||||
placeholder="Auto"
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateAttributes({ width: null })}
|
||||
className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
||||
>
|
||||
Fit
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={deleteNode}
|
||||
className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const RichImage = Image.extend({
|
||||
addOptions() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
HTMLAttributes: {
|
||||
class: 'rich-image-node',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
addAttributes() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
alt: {
|
||||
default: '',
|
||||
},
|
||||
title: {
|
||||
default: '',
|
||||
},
|
||||
caption: {
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
default: null,
|
||||
parseHTML: (element) => parsePixelValue(
|
||||
element.getAttribute?.('data-width')
|
||||
|| element.getAttribute?.('width')
|
||||
|| element.style?.width
|
||||
|| '',
|
||||
),
|
||||
renderHTML: (attributes) => {
|
||||
const width = Number(attributes.width)
|
||||
|
||||
if (!Number.isFinite(width) || width <= 0) {
|
||||
return {}
|
||||
}
|
||||
|
||||
return {
|
||||
'data-width': String(Math.round(width)),
|
||||
style: `width:${Math.round(width)}px;max-width:100%;`,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
parseHTML() {
|
||||
return [
|
||||
{
|
||||
tag: 'figure[data-rich-image]',
|
||||
getAttrs: (element) => readImageAttrs(element),
|
||||
},
|
||||
{
|
||||
tag: 'img[src]',
|
||||
getAttrs: (element) => readImageAttrs(element),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
renderHTML({ node, HTMLAttributes }) {
|
||||
const {
|
||||
src: _src,
|
||||
alt: _alt,
|
||||
title: _title,
|
||||
caption: _caption,
|
||||
width: _width,
|
||||
'data-width': _dataWidth,
|
||||
...figureHTMLAttributes
|
||||
} = HTMLAttributes
|
||||
|
||||
const figureAttributes = mergeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
|
||||
'data-rich-image': 'true',
|
||||
})
|
||||
const imageAttributes = {
|
||||
src: node.attrs.src,
|
||||
alt: node.attrs.alt || '',
|
||||
title: node.attrs.title || '',
|
||||
loading: 'lazy',
|
||||
decoding: 'async',
|
||||
}
|
||||
|
||||
if (Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0) {
|
||||
const width = Math.round(Number(node.attrs.width))
|
||||
imageAttributes.style = `width:${width}px;max-width:100%;`
|
||||
imageAttributes['data-width'] = String(width)
|
||||
}
|
||||
|
||||
const children = [
|
||||
['img', imageAttributes],
|
||||
]
|
||||
|
||||
if (node.attrs.caption) {
|
||||
children.push(['figcaption', { class: 'rich-image-node__caption' }, node.attrs.caption])
|
||||
}
|
||||
|
||||
return ['figure', figureAttributes, ...children]
|
||||
},
|
||||
|
||||
addNodeView() {
|
||||
return ReactNodeViewRenderer(RichImageNodeView)
|
||||
},
|
||||
})
|
||||
|
||||
export default RichImage
|
||||
259
resources/js/components/forum/RichTableControls.jsx
Normal file
259
resources/js/components/forum/RichTableControls.jsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import { BubbleMenu } from '@tiptap/react/menus'
|
||||
|
||||
function TableButton({ onClick, active = false, disabled = false, title, children }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault()
|
||||
}}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={title}
|
||||
className={[
|
||||
'inline-flex h-8 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] transition-colors',
|
||||
'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
|
||||
active
|
||||
? 'bg-sky-600/25 text-sky-300'
|
||||
: 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
|
||||
disabled && 'pointer-events-none opacity-30',
|
||||
].filter(Boolean).join(' ')}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export function TableInsertDialog({
|
||||
open,
|
||||
rows,
|
||||
cols,
|
||||
withHeaderRow,
|
||||
withHeaderColumn,
|
||||
onRowsChange,
|
||||
onColsChange,
|
||||
onHeaderRowChange,
|
||||
onHeaderColumnChange,
|
||||
onClose,
|
||||
onInsert,
|
||||
}) {
|
||||
if (!open) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) {
|
||||
onClose?.()
|
||||
}
|
||||
}}
|
||||
role="presentation"
|
||||
>
|
||||
<div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]">
|
||||
<div className="border-b border-white/[0.06] px-6 py-5">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Table</div>
|
||||
<h3 className="mt-2 text-lg font-semibold text-white">Insert table</h3>
|
||||
<p className="mt-2 text-sm leading-6 text-white/65">Create a table and edit rows and columns directly in the editor.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 px-6 py-5 md:grid-cols-2">
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rows</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="12"
|
||||
value={rows}
|
||||
onChange={(event) => onRowsChange?.(Number.parseInt(event.target.value, 10) || 1)}
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-2 text-sm text-slate-300">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Columns</span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="12"
|
||||
value={cols}
|
||||
onChange={(event) => onColsChange?.(Number.parseInt(event.target.value, 10) || 1)}
|
||||
className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={withHeaderRow}
|
||||
onChange={(event) => onHeaderRowChange?.(event.target.checked)}
|
||||
className="mt-1"
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-semibold text-white">Header row</span>
|
||||
<span className="mt-1 block text-xs leading-5 text-slate-400">Use a header row for column labels.</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={withHeaderColumn}
|
||||
onChange={(event) => onHeaderColumnChange?.(event.target.checked)}
|
||||
className="mt-1"
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-semibold text-white">Header column</span>
|
||||
<span className="mt-1 block text-xs leading-5 text-slate-400">Use a header column for row labels.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
|
||||
<button type="button" onClick={onClose} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" onClick={onInsert} className="rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">
|
||||
Insert table
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function RichTableControls({ editor }) {
|
||||
const isTableActive = Boolean(editor?.isActive('table'))
|
||||
|
||||
const canRun = useCallback((commandName) => {
|
||||
if (!editor) return false
|
||||
|
||||
try {
|
||||
const chain = editor.can().chain().focus()
|
||||
const next = typeof chain[commandName] === 'function' ? chain[commandName]() : null
|
||||
return Boolean(next?.run?.())
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}, [editor])
|
||||
|
||||
const runCommand = useCallback((commandName) => {
|
||||
if (!editor) return
|
||||
|
||||
const chain = editor.chain().focus()
|
||||
if (typeof chain[commandName] !== 'function') return
|
||||
|
||||
chain[commandName]().run()
|
||||
}, [editor])
|
||||
|
||||
const deleteTable = useCallback(() => {
|
||||
if (!editor) return
|
||||
|
||||
editor.chain().focus().deleteTable().run()
|
||||
}, [editor])
|
||||
|
||||
const getActiveTable = useCallback(() => {
|
||||
if (!editor) return null
|
||||
|
||||
const { state } = editor
|
||||
const { $from } = state.selection
|
||||
|
||||
for (let depth = $from.depth; depth >= 0; depth -= 1) {
|
||||
const node = $from.node(depth)
|
||||
if (node?.type?.name !== 'table') {
|
||||
continue
|
||||
}
|
||||
|
||||
return {
|
||||
node,
|
||||
depth,
|
||||
pos: $from.before(depth),
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}, [editor])
|
||||
|
||||
const moveTable = useCallback((direction) => {
|
||||
if (!editor) return
|
||||
|
||||
const tableInfo = getActiveTable()
|
||||
if (!tableInfo) return
|
||||
|
||||
const { state, view } = editor
|
||||
const { doc } = state
|
||||
const tableNode = tableInfo.node
|
||||
const tablePos = tableInfo.pos
|
||||
const tableSize = tableNode.nodeSize
|
||||
|
||||
let childPos = 1
|
||||
let previous = null
|
||||
let current = null
|
||||
let next = null
|
||||
|
||||
for (let index = 0; index < doc.childCount; index += 1) {
|
||||
const child = doc.child(index)
|
||||
if (childPos === tablePos) {
|
||||
current = { node: child, pos: childPos }
|
||||
next = index + 1 < doc.childCount
|
||||
? { node: doc.child(index + 1), pos: childPos + child.nodeSize }
|
||||
: null
|
||||
break
|
||||
}
|
||||
|
||||
previous = { node: child, pos: childPos }
|
||||
childPos += child.nodeSize
|
||||
}
|
||||
|
||||
if (!current) return
|
||||
|
||||
const tr = state.tr.delete(tablePos, tablePos + tableSize)
|
||||
let insertPos = tablePos
|
||||
|
||||
if (direction === 'up') {
|
||||
if (!previous) return
|
||||
insertPos = previous.pos
|
||||
} else if (direction === 'down') {
|
||||
if (!next) return
|
||||
insertPos = next.pos + next.node.nodeSize - tableSize
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
tr.insert(insertPos, tableNode.type.create(tableNode.attrs, tableNode.content, tableNode.marks))
|
||||
view.dispatch(tr)
|
||||
editor.chain().focus().setNodeSelection(insertPos).run()
|
||||
}, [editor, getActiveTable])
|
||||
|
||||
if (!editor) return null
|
||||
|
||||
return (
|
||||
<BubbleMenu
|
||||
editor={editor}
|
||||
shouldShow={({ editor: bubbleEditor }) => Boolean(bubbleEditor?.isActive('table'))}
|
||||
tippyOptions={{
|
||||
placement: 'top-start',
|
||||
offset: [0, 12],
|
||||
duration: 100,
|
||||
}}
|
||||
className="rich-table-toolbar"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2 rounded-2xl border border-sky-300/25 bg-[linear-gradient(180deg,rgba(12,18,29,0.98),rgba(6,10,16,0.98))] px-3 py-2 text-xs text-slate-400 shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
|
||||
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-semibold uppercase tracking-[0.16em] text-slate-300">Table tools</span>
|
||||
<TableButton onClick={() => runCommand('addRowBefore')} disabled={!canRun('addRowBefore')} title="Add row before">Row +</TableButton>
|
||||
<TableButton onClick={() => runCommand('addRowAfter')} disabled={!canRun('addRowAfter')} title="Add row after">Row +</TableButton>
|
||||
<TableButton onClick={() => runCommand('deleteRow')} disabled={!canRun('deleteRow')} title="Delete row">Del row</TableButton>
|
||||
<TableButton onClick={() => runCommand('addColumnBefore')} disabled={!canRun('addColumnBefore')} title="Add column before">Col +</TableButton>
|
||||
<TableButton onClick={() => runCommand('addColumnAfter')} disabled={!canRun('addColumnAfter')} title="Add column after">Col +</TableButton>
|
||||
<TableButton onClick={() => runCommand('deleteColumn')} disabled={!canRun('deleteColumn')} title="Delete column">Del col</TableButton>
|
||||
<TableButton onClick={() => runCommand('mergeCells')} disabled={!canRun('mergeCells')} title="Merge selected cells">Merge</TableButton>
|
||||
<TableButton onClick={() => runCommand('splitCell')} disabled={!canRun('splitCell')} title="Split selected cell">Split</TableButton>
|
||||
<TableButton onClick={() => runCommand('toggleHeaderRow')} disabled={!canRun('toggleHeaderRow')} active={isTableActive} title="Toggle header row">Header row</TableButton>
|
||||
<TableButton onClick={() => runCommand('toggleHeaderColumn')} disabled={!canRun('toggleHeaderColumn')} active={isTableActive} title="Toggle header column">Header col</TableButton>
|
||||
<TableButton onClick={() => moveTable('up')} disabled={!getActiveTable()} title="Move table up">Move up</TableButton>
|
||||
<TableButton onClick={() => moveTable('down')} disabled={!getActiveTable()} title="Move table down">Move down</TableButton>
|
||||
<TableButton onClick={deleteTable} title="Delete table">Delete table</TableButton>
|
||||
</div>
|
||||
</BubbleMenu>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user