Added buttons to the bubble menu
This commit is contained in:
parent
195781741c
commit
3d6d64bf23
3
public/icons/editor-bold.svg
Normal file
3
public/icons/editor-bold.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82857 7.76C10.9371 6.99429 11.7143 5.73714 11.7143 4.57143C11.7143 1.98857 9.71428 0 7.14286 0H0V16H8.04571C10.4343 16 12.2857 14.0571 12.2857 11.6686C12.2857 9.93143 11.3029 8.44571 9.82857 7.76ZM3.42799 2.85708H6.85656C7.80513 2.85708 8.57085 3.6228 8.57085 4.57137C8.57085 5.51994 7.80513 6.28565 6.85656 6.28565H3.42799V2.85708ZM3.42799 13.1429H7.42799C8.37656 13.1429 9.14228 12.3772 9.14228 11.4286C9.14228 10.4801 8.37656 9.71434 7.42799 9.71434H3.42799V13.1429Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 648 B |
3
public/icons/editor-footnote.svg
Normal file
3
public/icons/editor-footnote.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.66106 15.5L8.02241 10.0122L11.3838 15.5L14.0728 13.5793L10.1737 8.73171L16 7.26829L14.8796 4.06707L9.27731 6.30793L9.68067 0.5H6.36415L6.72269 6.30793L1.16527 4.06707L0 7.26829L5.82633 8.73171L1.92717 13.5793L4.66106 15.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.71 5C1.71 3.461 2.961 2.21 4.5 2.21H8.1V0.5H4.5C2.016 0.5 0 2.516 0 5C0 7.484 2.016 9.5 4.5 9.5H8.1V7.79H4.5C2.961 7.79 1.71 6.539 1.71 5ZM5.39844 5.90156H12.5984V4.10156H5.39844V5.90156ZM9.89941 0.5H13.4994C15.9834 0.5 17.9994 2.516 17.9994 5C17.9994 7.484 15.9834 9.5 13.4994 9.5H9.89941V7.79H13.4994C15.0384 7.79 16.2894 6.539 16.2894 5C16.2894 3.461 15.0384 2.21 13.4994 2.21H9.89941V0.5Z" fill="currentColor"/>
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.27177 14.7277C2.06258 13.5186 2.06258 11.5527 3.27177 10.3435L6.10029 7.51502L4.75675 6.17148L1.92823 9C-0.0234511 10.9517 -0.0234511 14.1196 1.92823 16.0713C3.87991 18.023 7.04785 18.023 8.99952 16.0713L11.828 13.2428L10.4845 11.8992L7.65598 14.7277C6.44679 15.9369 4.48097 15.9369 3.27177 14.7277ZM6.87756 12.536L12.5346 6.87895L11.1203 5.46469L5.4633 11.1217L6.87756 12.536ZM6.17055 4.75768L8.99907 1.92916C10.9507 -0.0225206 14.1187 -0.0225201 16.0704 1.92916C18.022 3.88084 18.022 7.04878 16.0704 9.00046L13.2418 11.829L11.8983 10.4854L14.7268 7.65691C15.936 6.44772 15.936 4.4819 14.7268 3.27271C13.5176 2.06351 11.5518 2.06351 10.3426 3.2727L7.51409 6.10122L6.17055 4.75768Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 860 B |
4
public/icons/editor-plus.svg
Normal file
4
public/icons/editor-plus.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 9L0 9L1.50847e-07 13L21 13V9Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21.5L12.5 0.5L8.5 0.5L8.5 21.5H12.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 324 B |
3
public/icons/editor-text-size.svg
Normal file
3
public/icons/editor-text-size.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 318 B |
3
public/icons/editor-ul.svg
Normal file
3
public/icons/editor-ul.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000114441 1.6C0.000114441 0.714665 0.71478 0 1.60011 0C2.48544 0 3.20011 0.714665 3.20011 1.6C3.20011 2.48533 2.48544 3.19999 1.60011 3.19999C0.71478 3.19999 0.000114441 2.48533 0.000114441 1.6ZM0 8.00013C0 7.1148 0.714665 6.40014 1.6 6.40014C2.48533 6.40014 3.19999 7.1148 3.19999 8.00013C3.19999 8.88547 2.48533 9.60013 1.6 9.60013C0.714665 9.60013 0 8.88547 0 8.00013ZM1.6 12.8C0.714665 12.8 0 13.5254 0 14.4C0 15.2747 0.725332 16 1.6 16C2.47466 16 3.19999 15.2747 3.19999 14.4C3.19999 13.5254 2.48533 12.8 1.6 12.8ZM19.7333 15.4662H4.79999V13.3329H19.7333V15.4662ZM4.79999 9.06677H19.7333V6.93344H4.79999V9.06677ZM4.79999 2.66664V0.533307H19.7333V2.66664H4.79999Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 846 B |
|
|
@ -0,0 +1,22 @@
|
|||
.bubbleMenu {
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.bubbleMenuButton {
|
||||
opacity: 0.5;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.bubbleMenuButtonActive {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.delimiter {
|
||||
background: #999;
|
||||
display: inline-block;
|
||||
height: 1.4em;
|
||||
margin: 0 0.2em;
|
||||
vertical-align: text-bottom;
|
||||
width: 1px;
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
import type { Editor } from '@tiptap/core'
|
||||
import styles from './EditorBubbleMenu.module.scss'
|
||||
import { Icon } from '../_shared/Icon'
|
||||
import { clsx } from 'clsx'
|
||||
|
||||
type BubbleMenuProps = {
|
||||
editor: Editor
|
||||
|
|
@ -7,8 +10,27 @@ type BubbleMenuProps = {
|
|||
|
||||
export const EditorBubbleMenu = (props: BubbleMenuProps) => {
|
||||
return (
|
||||
<div ref={props.ref}>
|
||||
<button>bold</button>
|
||||
<div ref={props.ref} class={styles.bubbleMenu}>
|
||||
<button class={clsx(styles.bubbleMenuButton, styles.bubbleMenuButtonActive)}>
|
||||
<Icon name="editor-text-size" />
|
||||
</button>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-bold" />
|
||||
</button>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-italic" />
|
||||
</button>
|
||||
<div class={styles.delimiter}></div>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-link" />
|
||||
</button>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-footnote" />
|
||||
</button>
|
||||
<div class={styles.delimiter}></div>
|
||||
<button class={styles.bubbleMenuButton}>
|
||||
<Icon name="editor-ul" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
.editorFloatingMenu {
|
||||
left: 0;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
vertical-align: middle;
|
||||
|
||||
button {
|
||||
opacity: 0.3;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import type { Editor } from '@tiptap/core'
|
||||
import styles from './EditorFloatingMenu.module.scss'
|
||||
import { Icon } from '../_shared/Icon'
|
||||
|
||||
type FloatingMenuProps = {
|
||||
editor: Editor
|
||||
|
|
@ -9,7 +10,9 @@ type FloatingMenuProps = {
|
|||
export const EditorFloatingMenu = (props: FloatingMenuProps) => {
|
||||
return (
|
||||
<div ref={props.ref} class={styles.editorFloatingMenu}>
|
||||
<button>+</button>
|
||||
<button>
|
||||
<Icon name="editor-plus" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user