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