From d9a1f60fc04f847e0ad8ad207e94ef84f9fbf09a Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 4 May 2023 16:36:53 +0300 Subject: [PATCH] fix uploaded image link + editor image align menu --- public/icons/editor-image-add.svg | 3 + public/icons/editor-image-align-center.svg | 3 + public/icons/editor-image-align-left.svg | 3 + public/icons/editor-image-align-right.svg | 3 + src/components/Editor/Editor.tsx | 1 - .../ImageBubbleMenu.module.scss | 70 +++---------------- .../ImageBubbleMenu/ImageBubbleMenu.tsx | 18 ++++- .../TextBubbleMenu/TextBubbleMenu.module.scss | 2 +- .../Editor/TextBubbleMenu/TextBubbleMenu.tsx | 2 +- .../Editor/UploadModal/UploadModalContent.tsx | 7 +- 10 files changed, 45 insertions(+), 67 deletions(-) create mode 100644 public/icons/editor-image-add.svg create mode 100644 public/icons/editor-image-align-center.svg create mode 100644 public/icons/editor-image-align-left.svg create mode 100644 public/icons/editor-image-align-right.svg diff --git a/public/icons/editor-image-add.svg b/public/icons/editor-image-add.svg new file mode 100644 index 00000000..2f0b11fd --- /dev/null +++ b/public/icons/editor-image-add.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/editor-image-align-center.svg b/public/icons/editor-image-align-center.svg new file mode 100644 index 00000000..52ff856e --- /dev/null +++ b/public/icons/editor-image-align-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/editor-image-align-left.svg b/public/icons/editor-image-align-left.svg new file mode 100644 index 00000000..f5c0e52a --- /dev/null +++ b/public/icons/editor-image-align-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/editor-image-align-right.svg b/public/icons/editor-image-align-right.svg new file mode 100644 index 00000000..137db907 --- /dev/null +++ b/public/icons/editor-image-align-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx index 4722a1ff..1dded32f 100644 --- a/src/components/Editor/Editor.tsx +++ b/src/components/Editor/Editor.tsx @@ -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') } }), diff --git a/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss b/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss index 12eb9215..1f32a873 100644 --- a/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss +++ b/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.module.scss @@ -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; - } } diff --git a/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx b/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx index dc29029f..92b57012 100644 --- a/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx +++ b/src/components/Editor/ImageBubbleMenu/ImageBubbleMenu.tsx @@ -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 ( -
- test +
+ + + +
+
) } diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss index 12eb9215..1de40e2b 100644 --- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss +++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss @@ -1,4 +1,4 @@ -.bubbleMenu { +.TextBubbleMenu { background: #fff; box-shadow: 0 4px 10px rgba(#000, 0.25); diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx index 3ffa2d08..a282a05f 100644 --- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx +++ b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx @@ -75,7 +75,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => { } return ( -
+
{ const [dragError, setDragError] = createSignal() 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) => {