File size: 6,729 Bytes
4af09f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useCallback, useEffect, useState } from 'react';
import {
FORMAT_TEXT_COMMAND,
$getSelection,
$isRangeSelection,
TextFormatType
} from 'lexical';
import {
TextBoldIcon,
TextItalicIcon,
TextStrikethroughIcon,
MagicWand01Icon,
PaintBucketIcon
} from 'hugeicons-react';
import { $patchStyleText, $getSelectionStyleValueForProperty } from '@lexical/selection';
export default function HoverToolbar() {
const [editor] = useLexicalComposerContext();
const [isBold, setIsBold] = useState(false);
const [isItalic, setIsItalic] = useState(false);
const [isStrikethrough, setIsStrikethrough] = useState(false);
const [position, setPosition] = useState({ top: -10000, left: -10000, visible: false });
const [showColorPicker, setShowColorPicker] = useState(false);
const colors = [
'#000000', '#FF0000', '#00FF00', '#0000FF',
'#FFA500', '#800080', '#008080', '#FF69B4'
];
const updateToolbar = useCallback(() => {
editor.getEditorState().read(() => {
const selection = $getSelection();
if ($isRangeSelection(selection) && !selection.isCollapsed()) {
const nativeSelection = window.getSelection();
if (nativeSelection && nativeSelection.rangeCount > 0) {
const domRange = nativeSelection.getRangeAt(0);
const rect = domRange.getBoundingClientRect();
setPosition({
top: rect.top - 40,
left: rect.left + (rect.width / 2) - 80,
visible: true
});
setIsBold(selection.hasFormat('bold'));
setIsItalic(selection.hasFormat('italic'));
setIsStrikethrough(selection.hasFormat('strikethrough'));
}
} else {
setPosition(p => ({ ...p, visible: false }));
}
});
}, [editor]);
useEffect(() => {
const unregister = editor.registerUpdateListener(() => {
updateToolbar();
});
document.addEventListener('selectionchange', updateToolbar);
return () => {
unregister();
document.removeEventListener('selectionchange', updateToolbar);
};
}, [editor, updateToolbar]);
const applyFormat = (format: TextFormatType) => {
editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
};
const applyPixelize = () => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const currentFilter = $getSelectionStyleValueForProperty(selection, 'filter');
if (currentFilter === 'blur(3px)') {
$patchStyleText(selection, { 'filter': '' });
} else {
$patchStyleText(selection, { 'filter': 'blur(3px)' });
}
}
});
};
const applyColor = (color: string) => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$patchStyleText(selection, { 'color': color });
}
});
setShowColorPicker(false);
};
if (!position.visible) return null;
return (
<div
style={{
position: 'fixed',
top: position.top,
left: position.left,
backgroundColor: 'var(--bg-panel)',
border: '1px solid var(--border-color)',
borderRadius: '6px',
padding: '4px',
display: 'flex',
gap: '4px',
boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
zIndex: 1000,
alignItems: 'center'
}}
>
<button
style={{ padding: 4, background: isBold ? '#eee' : 'transparent', borderRadius: 4 }}
onClick={() => applyFormat('bold')}
>
<TextBoldIcon size={16} />
</button>
<button
style={{ padding: 4, background: isItalic ? '#eee' : 'transparent', borderRadius: 4 }}
onClick={() => applyFormat('italic')}
>
<TextItalicIcon size={16} />
</button>
<button
style={{ padding: 4, background: isStrikethrough ? '#eee' : 'transparent', borderRadius: 4 }}
onClick={() => applyFormat('strikethrough')}
>
<TextStrikethroughIcon size={16} />
</button>
<div style={{ width: 1, height: 16, backgroundColor: '#ddd', margin: '0 4px' }} />
<button
style={{ padding: 4, background: 'transparent', borderRadius: 4, display: 'flex', alignItems: 'center' }}
onClick={applyPixelize}
title="Pixelize / Blur"
>
<MagicWand01Icon size={16} />
</button>
<div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
<button
onClick={() => setShowColorPicker(!showColorPicker)}
style={{ padding: 4, background: 'transparent', borderRadius: 4, display: 'flex', alignItems: 'center' }}
title="Text Color"
>
<PaintBucketIcon size={16} />
</button>
{showColorPicker && (
<div style={{
position: 'absolute', top: 32, left: 0, zIndex: 100,
background: 'var(--bg-panel)', border: '1px solid var(--border-color)',
borderRadius: '6px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px',
boxShadow: '0 4px 12px rgba(0,0,0,0.1)', minWidth: 160
}}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '4px' }}>
{colors.map(c => (
<div
key={c}
onClick={() => applyColor(c)}
style={{ width: 24, height: 24, background: c, borderRadius: '2px', cursor: 'pointer', border: '1px solid rgba(0,0,0,0.05)' }}
/>
))}
</div>
<div style={{ height: 1, backgroundColor: 'var(--border-color)', margin: '4px 0' }} />
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<input
type="color"
onChange={(e) => applyColor(e.target.value)}
style={{ width: 32, height: 32, border: 'none', background: 'none', padding: 0, cursor: 'pointer' }}
/>
<input
type="text"
placeholder="#000000"
style={{ flex: 1, fontSize: '11px', padding: '4px 8px', border: '1px solid var(--border-color)', borderRadius: '4px', outline: 'none' }}
onKeyDown={(e: any) => { if (e.key === 'Enter') applyColor(e.target.value); }}
/>
</div>
<div style={{ fontSize: '9px', opacity: 0.5, textAlign: 'center' }}>Enter to apply Hex</div>
</div>
)}
</div>
</div>
);
}
|