discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fix uploaded image link + editor image align menu

Browse Source
This commit is contained in:
ilya-bkv 2023-05-04 16:36:53 +03:00
parent 2e3e32aabf
commit d9a1f60fc0
10 changed files with 45 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/icons/editor-image-add.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0516 6.57895V10.5132C21.0516 10.5132 18.4332 10.5263 18.42 10.5132V6.57895H14.4727C14.4727 6.57895 14.4858 3.96053 14.4727 3.94737H18.42V0H21.0516V3.94737H24.999V6.57895H21.0516ZM17.1053 11.8421V7.89474H13.1579V3.94737H2.63158C1.18421 3.94737 0 5.13158 0 6.57895V22.3684C0 23.8158 1.18421 25 2.63158 25H18.4211C19.8684 25 21.0526 23.8158 21.0526 22.3684V11.8421H17.1053ZM6.58018 17.1053L2.63281 22.3685H18.4223L13.1591 15.7896L9.21176 21.0527L6.58018 17.1053Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 631 B

3
public/icons/editor-image-align-center.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.44444V0H22V2.44444H0ZM15 13H7V4H15V13ZM17 5H22V7H17V5ZM0 15H22V17H0V15ZM5 5H0V7H5V5ZM17 12H22V10H17V12ZM5 12H0V10H5V12ZM0 21.9999H22V19.5554H0V21.9999Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

3
public/icons/editor-image-align-left.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.44444V0H22V2.44444H0ZM0 13H6V4H0V13ZM8 5H22V7H8V5ZM0 15H22V17H0V15ZM22 12H8V10H22V12ZM0 21.9999H22V19.5554H0V21.9999Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 290 B

3
public/icons/editor-image-align-right.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 2.44444V0H0V2.44444H22ZM22 13H16V4H22V13ZM14 5H0V7H14V5ZM22 15H0V17H22V15ZM0 12H14V10H0V12ZM22 21.9999H0V19.5554H22V21.9999Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

1
src/components/Editor/Editor.tsx
View File

@ -145,7 +145,6 @@ export const Editor = (props: EditorProps) => {
pluginKey: 'textBubbleMenu',
element: textBubbleMenuRef.current,
shouldShow: ({ editor: e, view, state, oldState, from, to }) => {
console.log(view)
return e.isFocused && !e.isActive('image')
}
}),

70
src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss
View File

@ -1,6 +1,8 @@
.bubbleMenu {
background: #fff;
box-shadow: 0 4px 10px rgba(#000, 0.25);
.ImageBubbleMenu {
background: #000;
display: flex;
flex-direction: row;
align-items: center;
.bubbleMenuButton {
display: inline-flex;
@ -10,16 +12,8 @@
opacity: 0.5;
padding: 1rem;
.triangle {
margin-left: 4px;
}
.colorWheel {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #f6e3a1;
img {
display: block;
}
}
@ -28,58 +22,12 @@
}
.delimiter {
background: #999;
background: #fff;
opacity: 0.5;
display: inline-block;
height: 1.4em;
margin: 0 0.2em;
vertical-align: text-bottom;
width: 1px;
}
.dropDownHolder {
position: relative;
cursor: pointer;
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
.dropDown {
position: absolute;
padding: 6px;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
background: #fff;
color: #898c94;
& > header {
font-size: 10px;
border-bottom: 1px solid #898c94;
}
.actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: nowrap;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
.bubbleMenuButton {
min-width: 40px;
}
}
}
}
.dropDownEnter,
.dropDownExit {
height: 0;
color: transparent;
}
}

18
src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx
View File

@ -1,5 +1,7 @@
import type { Editor } from '@tiptap/core'
import styles from './ImageBubbleMenu.module.scss'
import { clsx } from 'clsx'
import { Icon } from '../../_shared/Icon'
type BubbleMenuProps = {
editor: Editor
@ -8,8 +10,20 @@ type BubbleMenuProps = {
export const ImageBubbleMenu = (props: BubbleMenuProps) => {
return (
<div ref={props.ref} class={styles.bubbleMenu}>
test
<div ref={props.ref} class={styles.ImageBubbleMenu}>
<button type="button" class={clsx(styles.bubbleMenuButton)}>
<Icon name="editor-image-align-left" />
</button>
<button type="button" class={clsx(styles.bubbleMenuButton)}>
<Icon name="editor-image-align-center" />
</button>
<button type="button" class={clsx(styles.bubbleMenuButton)}>
<Icon name="editor-image-align-right" />
</button>
<div class={styles.delimiter} />
<button type="button" class={clsx(styles.bubbleMenuButton)}>
<Icon name="editor-image-align-add" />
</button>
</div>
)
}

2
src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss
View File

@ -1,4 +1,4 @@
.bubbleMenu {
.TextBubbleMenu {
background: #fff;
box-shadow: 0 4px 10px rgba(#000, 0.25);

2
src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
View File

@ -75,7 +75,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
}
return (
<div ref={props.ref} class={styles.bubbleMenu}>
<div ref={props.ref} class={styles.TextBubbleMenu}>
<Switch>
<Match when={linkEditorOpen()}>
<InlineForm

7
src/components/Editor/UploadModal/UploadModalContent.tsx
View File

@ -25,7 +25,12 @@ export const UploadModalContent = (props: Props) => {
const [dragError, setDragError] = createSignal<string | undefined>()
const renderImage = (src: string) => {
props.editor.chain().focus().extendMarkRange('link').setImage({ src: src }).run()
props.editor
.chain()
.focus()
.extendMarkRange('link')
.setImage({ src: `/api/image?url=${src}` })
.run()
hideModal()
}
const handleImageFormSubmit = async (value: string) => {