feat: implement enhanced bubble menu with text styles and color pickers
- Add ComposerBubbleMenu with formatting tools and dropdowns - Create BubbleTextStyleMenu for paragraph/heading/list selection - Add BubbleColorPicker with preset palettes and custom color selection - Use lighter pastel colors for highlight presets - Implement circle color swatches with even grid spacing - Add strikethrough support and improved hover states - Use absolute positioning to prevent scroll issues - Integrate with existing editor configuration 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
250b5cc611
commit
82c39de7ea
3 changed files with 932 additions and 0 deletions
357
src/lib/components/admin/composer/BubbleColorPicker.svelte
Normal file
357
src/lib/components/admin/composer/BubbleColorPicker.svelte
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
<script lang="ts">
|
||||
import type { Editor } from '@tiptap/core'
|
||||
import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker'
|
||||
|
||||
interface Props {
|
||||
editor: Editor
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
mode: 'text' | 'highlight'
|
||||
currentColor?: string
|
||||
}
|
||||
|
||||
const { editor, isOpen, onClose, mode, currentColor = '#000000' }: Props = $props()
|
||||
|
||||
let color = $state(currentColor)
|
||||
let showPicker = $state(false)
|
||||
|
||||
// Preset colors - different sets for text and highlight
|
||||
const textPresetColors = [
|
||||
'#000000', // Black
|
||||
'#4D4D4D', // Gray
|
||||
'#999999', // Light Gray
|
||||
'#F44336', // Red
|
||||
'#E91E63', // Pink
|
||||
'#9C27B0', // Purple
|
||||
'#673AB7', // Deep Purple
|
||||
'#3F51B5', // Indigo
|
||||
'#2196F3', // Blue
|
||||
'#03A9F4', // Light Blue
|
||||
'#00BCD4', // Cyan
|
||||
'#009688', // Teal
|
||||
'#4CAF50', // Green
|
||||
'#8BC34A', // Light Green
|
||||
'#CDDC39', // Lime
|
||||
'#FFEB3B', // Yellow
|
||||
'#FFC107', // Amber
|
||||
'#FF9800', // Orange
|
||||
'#FF5722', // Deep Orange
|
||||
'#795548' // Brown
|
||||
]
|
||||
|
||||
// Lighter, pastel colors for highlighting
|
||||
const highlightPresetColors = [
|
||||
'#FFF3E0', // Pale Orange
|
||||
'#FFEBEE', // Pale Red
|
||||
'#FCE4EC', // Pale Pink
|
||||
'#F3E5F5', // Pale Purple
|
||||
'#EDE7F6', // Pale Deep Purple
|
||||
'#E8EAF6', // Pale Indigo
|
||||
'#E3F2FD', // Pale Blue
|
||||
'#E1F5FE', // Pale Light Blue
|
||||
'#E0F7FA', // Pale Cyan
|
||||
'#E0F2F1', // Pale Teal
|
||||
'#E8F5E9', // Pale Green
|
||||
'#F1F8E9', // Pale Light Green
|
||||
'#F9FBE7', // Pale Lime
|
||||
'#FFFDE7', // Pale Yellow
|
||||
'#FFF8E1', // Pale Amber
|
||||
'#FFECB3', // Light Amber
|
||||
'#FFE0B2', // Light Orange
|
||||
'#FFCCBC', // Light Deep Orange
|
||||
'#D7CCC8', // Light Brown
|
||||
'#F5F5F5' // Light Gray
|
||||
]
|
||||
|
||||
const presetColors = $derived(mode === 'text' ? textPresetColors : highlightPresetColors)
|
||||
|
||||
$effect(() => {
|
||||
// Update local color when currentColor prop changes
|
||||
color = currentColor || (mode === 'text' ? '#000000' : '#FFEB3B')
|
||||
})
|
||||
|
||||
function applyColor(selectedColor: string) {
|
||||
if (mode === 'text') {
|
||||
editor.chain().focus().setColor(selectedColor).run()
|
||||
} else {
|
||||
editor.chain().focus().setHighlight({ color: selectedColor }).run()
|
||||
}
|
||||
color = selectedColor
|
||||
}
|
||||
|
||||
function removeColor() {
|
||||
if (mode === 'text') {
|
||||
editor.chain().focus().unsetColor().run()
|
||||
} else {
|
||||
editor.chain().focus().unsetHighlight().run()
|
||||
}
|
||||
onClose()
|
||||
}
|
||||
|
||||
function handlePresetClick(presetColor: string) {
|
||||
applyColor(presetColor)
|
||||
onClose()
|
||||
}
|
||||
|
||||
function handleCustomColor() {
|
||||
applyColor(color)
|
||||
onClose()
|
||||
}
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (isOpen) {
|
||||
// Check if click is inside the color picker popup
|
||||
const pickerElement = document.querySelector('.bubble-color-picker')
|
||||
if (pickerElement && !pickerElement.contains(e.target as Node)) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (isOpen) {
|
||||
// Add a small delay to prevent immediate closing
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
}, 10)
|
||||
return () => document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="bubble-color-picker">
|
||||
<div class="color-picker-header">
|
||||
<span>{mode === 'text' ? 'Text Color' : 'Highlight Color'}</span>
|
||||
<button class="remove-color-btn" onclick={removeColor}>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="preset-colors">
|
||||
{#each presetColors as presetColor}
|
||||
<button
|
||||
class="color-preset"
|
||||
style="background-color: {presetColor}"
|
||||
onclick={() => handlePresetClick(presetColor)}
|
||||
title={presetColor}
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="custom-color-section">
|
||||
{#if !showPicker}
|
||||
<button class="custom-color-btn" onclick={() => showPicker = true}>
|
||||
Custom color...
|
||||
</button>
|
||||
{:else}
|
||||
<div class="custom-picker">
|
||||
<ColorPicker
|
||||
bind:hex={color}
|
||||
components={ChromeVariant}
|
||||
sliderDirection="horizontal"
|
||||
isAlpha={false}
|
||||
/>
|
||||
<button class="apply-custom-btn" onclick={handleCustomColor}>
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import '$styles/variables';
|
||||
@import '$styles/mixins';
|
||||
|
||||
.bubble-color-picker {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 4px;
|
||||
z-index: 50;
|
||||
background: rgba($white, 0.98);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
border-radius: $corner-radius-md;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
padding: 12px;
|
||||
width: 260px;
|
||||
animation: dropdownFadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dropdownFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid rgba($gray-85, 0.3);
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $gray-10;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-color-btn {
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 12px;
|
||||
color: $gray-30;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba($gray-90, 0.5);
|
||||
color: $gray-20;
|
||||
}
|
||||
}
|
||||
|
||||
.preset-colors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 40px);
|
||||
grid-auto-rows: 40px;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.color-preset {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-color-section {
|
||||
border-top: 1px solid rgba($gray-85, 0.3);
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.custom-color-btn {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 13px;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba($gray-90, 0.5);
|
||||
border-color: rgba($gray-80, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.apply-custom-btn {
|
||||
padding: 8px 16px;
|
||||
background: $blue-50;
|
||||
border: none;
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: $blue-40;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Override svelte-awesome-color-picker styles
|
||||
:global(.bubble-color-picker .color-picker) {
|
||||
--picker-height: 150px !important;
|
||||
--picker-width: 100% !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:global(.bubble-color-picker .picker) {
|
||||
width: 100% !important;
|
||||
height: 150px !important;
|
||||
margin-bottom: 8px;
|
||||
border-radius: $corner-radius-sm;
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
}
|
||||
|
||||
:global(.bubble-color-picker .chrome-picker) {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
:global(.bubble-color-picker .slider) {
|
||||
margin-top: 8px;
|
||||
height: 12px !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:global(.bubble-color-picker .color-button) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:global(.bubble-color-picker .input) {
|
||||
margin-top: 8px;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: rgba($gray-95, 0.5);
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 13px;
|
||||
color: $gray-10;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
|
||||
&:focus {
|
||||
background: rgba($gray-90, 0.5);
|
||||
border-color: rgba($blue-50, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
Normal file
138
src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<script lang="ts">
|
||||
import type { Editor } from '@tiptap/core'
|
||||
|
||||
interface Props {
|
||||
editor: Editor
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
features: any
|
||||
}
|
||||
|
||||
const { editor, isOpen, onClose, features }: Props = $props()
|
||||
|
||||
// Text style options
|
||||
const textStyles = [
|
||||
{ name: 'paragraph', label: 'Paragraph', action: () => editor.chain().focus().setParagraph().run() },
|
||||
{ name: 'heading1', label: 'Heading 1', action: () => editor.chain().focus().toggleHeading({ level: 1 }).run() },
|
||||
{ name: 'heading2', label: 'Heading 2', action: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
|
||||
{ name: 'heading3', label: 'Heading 3', action: () => editor.chain().focus().toggleHeading({ level: 3 }).run() },
|
||||
{ name: 'bulletList', label: 'Bullet List', action: () => editor.chain().focus().toggleBulletList().run() },
|
||||
{ name: 'orderedList', label: 'Ordered List', action: () => editor.chain().focus().toggleOrderedList().run() },
|
||||
{ name: 'taskList', label: 'Task List', action: () => editor.chain().focus().toggleTaskList().run() },
|
||||
{ name: 'blockquote', label: 'Blockquote', action: () => editor.chain().focus().toggleBlockquote().run() }
|
||||
]
|
||||
|
||||
// Add code block if feature is enabled
|
||||
if (features?.codeBlocks) {
|
||||
textStyles.push({
|
||||
name: 'codeBlock',
|
||||
label: 'Code Block',
|
||||
action: () => editor.chain().focus().toggleCodeBlock().run()
|
||||
})
|
||||
}
|
||||
|
||||
function handleSelect(action: () => void) {
|
||||
action()
|
||||
onClose()
|
||||
}
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (isOpen) {
|
||||
const menu = e.currentTarget as HTMLElement
|
||||
if (!menu?.contains(e.target as Node)) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (isOpen) {
|
||||
// Small delay to prevent immediate closing
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
}, 10)
|
||||
return () => document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div class="bubble-text-style-menu">
|
||||
{#each textStyles as style}
|
||||
<button
|
||||
class="text-style-option"
|
||||
class:active={
|
||||
(style.name === 'paragraph' && !editor.isActive('heading') && !editor.isActive('bulletList') && !editor.isActive('orderedList') && !editor.isActive('taskList') && !editor.isActive('blockquote') && !editor.isActive('codeBlock')) ||
|
||||
(style.name === 'heading1' && editor.isActive('heading', { level: 1 })) ||
|
||||
(style.name === 'heading2' && editor.isActive('heading', { level: 2 })) ||
|
||||
(style.name === 'heading3' && editor.isActive('heading', { level: 3 })) ||
|
||||
(style.name === 'bulletList' && editor.isActive('bulletList')) ||
|
||||
(style.name === 'orderedList' && editor.isActive('orderedList')) ||
|
||||
(style.name === 'taskList' && editor.isActive('taskList')) ||
|
||||
(style.name === 'blockquote' && editor.isActive('blockquote')) ||
|
||||
(style.name === 'codeBlock' && editor.isActive('codeBlock'))
|
||||
}
|
||||
onclick={() => handleSelect(style.action)}
|
||||
>
|
||||
{style.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
@import '$styles/variables';
|
||||
@import '$styles/mixins';
|
||||
|
||||
.bubble-text-style-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 4px;
|
||||
z-index: 50;
|
||||
background: rgba($white, 0.98);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
border-radius: $corner-radius-md;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
padding: 4px;
|
||||
min-width: 180px;
|
||||
animation: dropdownFadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dropdownFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-style-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $corner-radius-sm;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
color: $gray-10;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba($gray-90, 0.5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($blue-50, 0.1);
|
||||
color: $blue-40;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
437
src/lib/components/admin/composer/ComposerBubbleMenu.svelte
Normal file
437
src/lib/components/admin/composer/ComposerBubbleMenu.svelte
Normal file
|
|
@ -0,0 +1,437 @@
|
|||
<script lang="ts">
|
||||
import { BubbleMenu } from 'svelte-tiptap'
|
||||
import { isTextSelection, type Editor } from '@tiptap/core'
|
||||
import type { ShouldShowProps } from '$lib/components/edra/utils'
|
||||
import EdraToolBarIcon from '$lib/components/edra/headless/components/EdraToolBarIcon.svelte'
|
||||
import type { ComposerFeatures } from './types'
|
||||
import { getBubbleMenuCommands, getCurrentTextStyle } from './editorConfig'
|
||||
import Link from 'lucide-svelte/icons/link'
|
||||
import Check from 'lucide-svelte/icons/check'
|
||||
import X from 'lucide-svelte/icons/x'
|
||||
import ChevronDown from 'lucide-svelte/icons/chevron-down'
|
||||
import Type from 'lucide-svelte/icons/type'
|
||||
import Palette from 'lucide-svelte/icons/palette'
|
||||
import Highlighter from 'lucide-svelte/icons/highlighter'
|
||||
import BubbleTextStyleMenu from './BubbleTextStyleMenu.svelte'
|
||||
import BubbleColorPicker from './BubbleColorPicker.svelte'
|
||||
|
||||
interface Props {
|
||||
editor: Editor
|
||||
features: ComposerFeatures
|
||||
}
|
||||
|
||||
const { editor, features }: Props = $props()
|
||||
|
||||
let isLinkMode = $state(false)
|
||||
let linkInput = $state('')
|
||||
let linkInputElement = $state<HTMLInputElement>()
|
||||
let showTextStyleMenu = $state(false)
|
||||
let showColorPicker = $state(false)
|
||||
let showHighlightPicker = $state(false)
|
||||
let textStyleButtonRef = $state<HTMLElement>()
|
||||
let colorButtonRef = $state<HTMLElement>()
|
||||
let highlightButtonRef = $state<HTMLElement>()
|
||||
|
||||
// Get commands for bubble menu
|
||||
const bubbleMenuCommands = getBubbleMenuCommands()
|
||||
|
||||
// Filter out link command as we'll handle it specially
|
||||
const formattingCommands = bubbleMenuCommands.filter((cmd) => cmd.name !== 'link')
|
||||
|
||||
// Get current text style
|
||||
const currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
|
||||
|
||||
function shouldShow(props: ShouldShowProps) {
|
||||
const { editor, state } = props
|
||||
const { selection } = state
|
||||
const { empty, from, to } = selection
|
||||
|
||||
// Don't show if not editable
|
||||
if (!editor.isEditable) return false
|
||||
|
||||
// Don't show if selection is empty
|
||||
if (empty) return false
|
||||
|
||||
// Don't show if selection is not text
|
||||
if (!isTextSelection(selection)) return false
|
||||
|
||||
// Don't show in code blocks
|
||||
if (editor.isActive('codeBlock')) return false
|
||||
|
||||
// Don't show if we're in a table (has its own menus)
|
||||
if (editor.isActive('table')) return false
|
||||
|
||||
// Don't show if link menu is already showing
|
||||
if (editor.isActive('link') && !isLinkMode) return false
|
||||
|
||||
// Check if selection contains only whitespace
|
||||
const text = state.doc.textBetween(from, to)
|
||||
if (!text.trim()) return false
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
function handleLinkClick() {
|
||||
if (editor.isActive('link')) {
|
||||
// If already a link, remove it
|
||||
editor.chain().focus().unsetLink().run()
|
||||
} else {
|
||||
// Enter link mode
|
||||
isLinkMode = true
|
||||
linkInput = ''
|
||||
// Focus input after render
|
||||
setTimeout(() => linkInputElement?.focus(), 0)
|
||||
}
|
||||
}
|
||||
|
||||
function applyLink() {
|
||||
if (linkInput.trim()) {
|
||||
let href = linkInput.trim()
|
||||
// Add protocol if missing
|
||||
if (!/^https?:\/\//i.test(href)) {
|
||||
href = 'https://' + href
|
||||
}
|
||||
editor.chain().focus().setLink({ href, target: '_blank' }).run()
|
||||
}
|
||||
cancelLinkMode()
|
||||
}
|
||||
|
||||
function cancelLinkMode() {
|
||||
isLinkMode = false
|
||||
linkInput = ''
|
||||
editor.commands.focus()
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
applyLink()
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
cancelLinkMode()
|
||||
}
|
||||
}
|
||||
|
||||
// Close all menus when bubble menu hides
|
||||
$effect(() => {
|
||||
return () => {
|
||||
showTextStyleMenu = false
|
||||
showColorPicker = false
|
||||
showHighlightPicker = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<BubbleMenu
|
||||
{editor}
|
||||
class="composer-bubble-menu"
|
||||
{shouldShow}
|
||||
pluginKey="composer-bubble-menu"
|
||||
updateDelay={100}
|
||||
tippyOptions={{
|
||||
popperOptions: {
|
||||
placement: 'top',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
boundary: 'viewport',
|
||||
padding: 8
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
fallbackPlacements: ['bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
maxWidth: 'calc(100vw - 16px)',
|
||||
duration: [200, 150],
|
||||
animation: 'fade'
|
||||
}}
|
||||
>
|
||||
<div class="bubble-menu-content">
|
||||
{#if isLinkMode}
|
||||
<div class="link-input-container">
|
||||
<input
|
||||
bind:this={linkInputElement}
|
||||
bind:value={linkInput}
|
||||
type="url"
|
||||
placeholder="Enter URL..."
|
||||
class="link-input"
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<button
|
||||
class="bubble-menu-button"
|
||||
onclick={applyLink}
|
||||
disabled={!linkInput.trim()}
|
||||
title="Apply link"
|
||||
>
|
||||
<Check size={16} />
|
||||
</button>
|
||||
<button class="bubble-menu-button" onclick={cancelLinkMode} title="Cancel">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="formatting-buttons">
|
||||
<!-- Block type indicator -->
|
||||
<div class="dropdown-wrapper">
|
||||
<button
|
||||
bind:this={textStyleButtonRef}
|
||||
class="bubble-menu-button text-style-button"
|
||||
onclick={() => {
|
||||
showTextStyleMenu = !showTextStyleMenu
|
||||
showColorPicker = false
|
||||
showHighlightPicker = false
|
||||
}}
|
||||
title="Text style"
|
||||
>
|
||||
<Type size={16} />
|
||||
<span class="text-style-label">{currentTextStyle}</span>
|
||||
<ChevronDown size={12} />
|
||||
</button>
|
||||
|
||||
<!-- Text Style Dropdown -->
|
||||
<BubbleTextStyleMenu
|
||||
{editor}
|
||||
isOpen={showTextStyleMenu}
|
||||
onClose={() => showTextStyleMenu = false}
|
||||
{features}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
{#each formattingCommands as command}
|
||||
<EdraToolBarIcon {command} {editor} />
|
||||
{/each}
|
||||
|
||||
<button
|
||||
class="bubble-menu-button"
|
||||
class:active={editor.isActive('link')}
|
||||
onclick={handleLinkClick}
|
||||
title="Link (Cmd/Ctrl+K)"
|
||||
>
|
||||
<Link size={16} />
|
||||
</button>
|
||||
|
||||
<span class="separator"></span>
|
||||
|
||||
<!-- Color options -->
|
||||
<div class="dropdown-wrapper">
|
||||
<button
|
||||
bind:this={colorButtonRef}
|
||||
class="bubble-menu-button"
|
||||
onclick={() => {
|
||||
showColorPicker = !showColorPicker
|
||||
showTextStyleMenu = false
|
||||
showHighlightPicker = false
|
||||
}}
|
||||
title="Text color"
|
||||
style={editor.getAttributes('textStyle').color ? `color: ${editor.getAttributes('textStyle').color}` : ''}
|
||||
>
|
||||
<Palette size={16} />
|
||||
</button>
|
||||
|
||||
<!-- Text Color Picker -->
|
||||
<BubbleColorPicker
|
||||
{editor}
|
||||
isOpen={showColorPicker}
|
||||
onClose={() => showColorPicker = false}
|
||||
mode="text"
|
||||
currentColor={editor.getAttributes('textStyle').color}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-wrapper">
|
||||
<button
|
||||
bind:this={highlightButtonRef}
|
||||
class="bubble-menu-button"
|
||||
onclick={() => {
|
||||
showHighlightPicker = !showHighlightPicker
|
||||
showTextStyleMenu = false
|
||||
showColorPicker = false
|
||||
}}
|
||||
title="Highlight color"
|
||||
style={editor.getAttributes('highlight').color ? `background-color: ${editor.getAttributes('highlight').color}` : ''}
|
||||
>
|
||||
<Highlighter size={16} />
|
||||
</button>
|
||||
|
||||
<!-- Highlight Color Picker -->
|
||||
<BubbleColorPicker
|
||||
{editor}
|
||||
isOpen={showHighlightPicker}
|
||||
onClose={() => showHighlightPicker = false}
|
||||
mode="highlight"
|
||||
currentColor={editor.getAttributes('highlight').color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</BubbleMenu>
|
||||
|
||||
<style lang="scss">
|
||||
@import '$styles/variables';
|
||||
@import '$styles/mixins';
|
||||
|
||||
:global(.composer-bubble-menu) {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.bubble-menu-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
background: rgba($white, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba($gray-85, 0.5);
|
||||
border-radius: $corner-radius;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
animation: bubbleMenuFadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes bubbleMenuFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.formatting-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.bubble-menu-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
padding: 0 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: $corner-radius-sm;
|
||||
color: $gray-20;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba($gray-85, 0.6);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba($gray-85, 0.7);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($blue-50, 0.1);
|
||||
color: $blue-40;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.text-style-button {
|
||||
min-width: auto;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-style-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba($gray-85, 0.3);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.link-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.link-input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
background: rgba($gray-95, 0.5);
|
||||
border: 1px solid rgba($gray-85, 0.3);
|
||||
border-radius: $corner-radius-sm;
|
||||
font-size: 13px;
|
||||
color: $gray-10;
|
||||
outline: none;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:focus {
|
||||
background: rgba($gray-90, 0.5);
|
||||
border-color: rgba($blue-50, 0.5);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
// Override EdraToolBarIcon styles for bubble menu
|
||||
:global(.bubble-menu-content .edra-command-button) {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
background-color: transparent;
|
||||
border-radius: $corner-radius-sm;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($gray-85, 0.6);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($gray-85, 0.7);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba($blue-50, 0.1);
|
||||
color: $blue-40;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($blue-50, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.bubble-menu-content .edra-toolbar-icon) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue