59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
|
import { Editor } from '@tiptap/core'
|
|||
|
|
import Image from '@tiptap/extension-image'
|
|||
|
|
import StarterKit from '@tiptap/starter-kit'
|
|||
|
|
import { createSignal } from 'solid-js'
|
|||
|
|
import type { Meta, StoryObj } from 'storybook-solidjs'
|
|||
|
|
import { FigureBubbleMenu } from './FigureBubbleMenu'
|
|||
|
|
|
|||
|
|
const meta: Meta<typeof FigureBubbleMenu> = {
|
|||
|
|
title: 'Editor/Toolbar/FigureBubbleMenu',
|
|||
|
|
component: FigureBubbleMenu,
|
|||
|
|
tags: ['autodocs']
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default meta
|
|||
|
|
type Story = StoryObj<typeof FigureBubbleMenu>
|
|||
|
|
|
|||
|
|
const createMockEditor = () => {
|
|||
|
|
return new Editor({
|
|||
|
|
extensions: [StarterKit, Image],
|
|||
|
|
content:
|
|||
|
|
'<figure><img src="https://example.com/image.jpg" alt="Пример изображения" /><figcaption>Подпись к изображению</figcaption></figure>'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const Default: Story = {
|
|||
|
|
render: () => {
|
|||
|
|
const [editor] = createSignal(createMockEditor())
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: '20px' }}>
|
|||
|
|
<FigureBubbleMenu editor={editor()} ref={(el) => console.log('Ref:', el)} />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const WithAlignment: Story = {
|
|||
|
|
render: () => {
|
|||
|
|
const [editor] = createSignal(createMockEditor())
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: '20px' }}>
|
|||
|
|
<FigureBubbleMenu editor={editor()} ref={(el) => console.log('Ref:', el)} />
|
|||
|
|
<p>Используйте кнопки выравнивания для изменения позиции изображения</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const WithCaption: Story = {
|
|||
|
|
render: () => {
|
|||
|
|
const [editor] = createSignal(createMockEditor())
|
|||
|
|
return (
|
|||
|
|
<div style={{ padding: '20px' }}>
|
|||
|
|
<FigureBubbleMenu editor={editor()} ref={(el) => console.log('Ref:', el)} />
|
|||
|
|
<p>Нажмите на кнопку "Добавить подпись" для добавления подписи к изображению</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|