Add Link editor

2023-03-20 12:19:14 +03:00 · 2023-03-20 12:19:14 +03:00 · 5b4b4e8f2d
commit 5b4b4e8f2d
parent 293e7a06e4
9 changed files with 1028 additions and 53 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/icons/status-cancel.svg
+++ b/public/icons/status-cancel.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1512 4.42386L4.42326 17.1518L6.84763 19.5761L19.5756 6.84822L17.1512 4.42386Z" fill="#393840"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5755 17.1518L6.84763 4.42386L4.42326 6.84822L17.1512 19.5761L19.5755 17.1518Z" fill="#393840"/>
+</svg>
--- a/public/icons/status-done.svg
+++ b/public/icons/status-done.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 6.73787L19.2621 4L9.78964 13.4725L5.73787 9.42071L3 12.1586L9.78964 18.9482L22 6.73787Z" fill="#393840"/>
+</svg>
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -233,5 +233,7 @@
  "By time": "By time",
  "New only": "New only",
  "Short opening": "Short opening",
-  "Write an article": "Write an article"
+  "Write an article": "Write an article",
+  "Enter URL address": "Enter URL address",
+  "Invalid url format": "Invalid url format"
 }
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@ -251,5 +251,7 @@
  "By time": "По порядку",
  "New only": "Только новые",
  "Short opening": "Небольшое вступление, чтобы заинтересовать читателя",
-  "Write an article": "Написать статью"
+  "Write an article": "Написать статью",
+  "Enter URL address": "Введите адрес ссылки",
+  "Invalid url format": "Неверный формат ссылки"
 }
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@ -1,11 +1,8 @@
 import { createTiptapEditor } from 'solid-tiptap'
-import { clsx } from 'clsx'
 import { useLocalize } from '../../context/localize'
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { Bold } from '@tiptap/extension-bold'
 import { BubbleMenu } from '@tiptap/extension-bubble-menu'
-import * as Y from 'yjs'
-import { WebrtcProvider } from 'y-webrtc'
 import { Dropcursor } from '@tiptap/extension-dropcursor'
 import { Italic } from '@tiptap/extension-italic'
 import { Strike } from '@tiptap/extension-strike'
@ -16,8 +13,6 @@ import { BulletList } from '@tiptap/extension-bullet-list'
 import { OrderedList } from '@tiptap/extension-ordered-list'
 import { ListItem } from '@tiptap/extension-list-item'
 import { CharacterCount } from '@tiptap/extension-character-count'
-import { Collaboration } from '@tiptap/extension-collaboration'
-import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor'
 import { Placeholder } from '@tiptap/extension-placeholder'
 import { Gapcursor } from '@tiptap/extension-gapcursor'
 import { HardBreak } from '@tiptap/extension-hard-break'
@ -28,7 +23,6 @@ import { Youtube } from '@tiptap/extension-youtube'
 import { Document } from '@tiptap/extension-document'
 import { Text } from '@tiptap/extension-text'
 import { Image } from '@tiptap/extension-image'
-import { History } from '@tiptap/extension-history'
 import { Paragraph } from '@tiptap/extension-paragraph'
 import Focus from '@tiptap/extension-focus'
 import { TrailingNode } from './extensions/TrailingNode'
@ -78,6 +72,9 @@ export const Editor = (props: EditorProps) => {
      Strike,
      HorizontalRule,
      Underline,
+      Link.configure({
+        openOnClick: false
+      }),
      BubbleMenu.configure({
        element: bubbleMenuRef.current
      }),
--- a/src/components/Editor/EditorBubbleMenu.module.scss
+++ b/src/components/Editor/EditorBubbleMenu.module.scss
@ -1,22 +1,51 @@
 .bubbleMenu {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
-}

-.bubbleMenuButton {
-  opacity: 0.5;
-  padding: 1rem;
-}
+  .bubbleMenuButton {
+    opacity: 0.5;
+    padding: 1rem;
+  }

-.bubbleMenuButtonActive {
-  opacity: 1;
-}
+  .bubbleMenuButtonActive {
+    opacity: 1;
+  }

-.delimiter {
-  background: #999;
-  display: inline-block;
-  height: 1.4em;
-  margin: 0 0.2em;
-  vertical-align: text-bottom;
-  width: 1px;
+  .delimiter {
+    background: #999;
+    display: inline-block;
+    height: 1.4em;
+    margin: 0 0.2em;
+    vertical-align: text-bottom;
+    width: 1px;
+  }
+
+  .linkForm {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 6px 11px;
+
+    input {
+      margin: 0 12px 0 0;
+      padding: 0;
+      flex: 1;
+      border: none;
+      min-width: 200px;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: rgba(#000, 0.3);
+      }
+    }
+  }
+
+  .linkError {
+    padding: 6px 11px;
+    color: red;
+    font-size: 0.7em;
+  }
 }
--- a/src/components/Editor/EditorBubbleMenu.tsx
+++ b/src/components/Editor/EditorBubbleMenu.tsx
@ -3,6 +3,9 @@ import styles from './EditorBubbleMenu.module.scss'
 import { Icon } from '../_shared/Icon'
 import { clsx } from 'clsx'
 import { createEditorTransaction } from 'solid-tiptap'
+import { createSignal } from 'solid-js'
+import { useLocalize } from '../../context/localize'
+import validateUrl from '../../utils/validateUrl'

 type BubbleMenuProps = {
  editor: Editor
@ -10,41 +13,111 @@ type BubbleMenuProps = {
 }

 export const EditorBubbleMenu = (props: BubbleMenuProps) => {
+  const { t } = useLocalize()
+  const [linkEditorOpen, setLinkEditorOpen] = createSignal<boolean>(false)
+  const [url, setUrl] = createSignal<string>('')
+  const [prevUrl, setPrevUrl] = createSignal<string | null>(null)
+  const [linkError, setLinkError] = createSignal<string | null>(null)
+
  const isBold = createEditorTransaction(
    () => props.editor,
    (editor) => editor && editor.isActive('bold')
  )
+  const isLink = createEditorTransaction(
+    () => props.editor,
+    (editor) => {
+      editor && editor.isActive('link')
+      setPrevUrl(editor && editor.getAttributes('link').href)
+    }
+  )
+
+  const clearLinkForm = () => {
+    setUrl('')
+    setLinkEditorOpen(false)
+  }
+
+  const handleSubmitLink = (e) => {
+    e.preventDefault()
+    if (url().length === 0) {
+      props.editor.chain().focus().unsetLink().run()
+      clearLinkForm()
+      return
+    }
+
+    if (url().length > 1 && validateUrl(url())) {
+      props.editor.commands.toggleLink({ href: url() })
+      clearLinkForm()
+    } else {
+      setLinkError(t('Invalid url format'))
+    }
+  }

  return (
-    <div ref={props.ref} class={styles.bubbleMenu}>
-      <button class={clsx(styles.bubbleMenuButton)}>
-        <Icon name="editor-text-size" />
-      </button>
-      <button
-        class={clsx(styles.bubbleMenuButton, {
-          [styles.bubbleMenuButtonActive]: isBold()
-        })}
-        onClick={(e) => {
-          e.preventDefault()
-          props.editor.commands.toggleBold()
-        }}
-      >
-        <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>
+    <>
+      <div ref={props.ref} class={styles.bubbleMenu}>
+        {linkEditorOpen() ? (
+          <>
+            <form onSubmit={(e) => handleSubmitLink(e)} class={styles.linkForm}>
+              <input
+                type="text"
+                placeholder={t('Enter URL address')}
+                autofocus
+                value={prevUrl() ? prevUrl() : null}
+                onChange={(e) => setUrl(e.currentTarget.value)}
+              />
+              <button type="submit">
+                <Icon name="status-done" />
+              </button>
+              <button role="button" onClick={() => clearLinkForm()}>
+                <Icon name="status-cancel" />
+              </button>
+            </form>
+            {linkError() && <div class={styles.linkError}>{linkError()}</div>}
+          </>
+        ) : (
+          <>
+            <button
+              onClick={(e) => {
+                e.preventDefault()
+                setLinkEditorOpen(true)
+              }}
+              class={clsx(styles.bubbleMenuButton, {
+                [styles.bubbleMenuButtonActive]: isLink()
+              })}
+            >
+              <Icon name="editor-link" />
+            </button>
+            <button class={clsx(styles.bubbleMenuButton)}>
+              <Icon name="editor-text-size" />
+            </button>
+            <button
+              class={clsx(styles.bubbleMenuButton, {
+                [styles.bubbleMenuButtonActive]: isBold()
+              })}
+              onClick={(e) => {
+                e.preventDefault()
+                props.editor.commands.toggleBold()
+              }}
+            >
+              <Icon name="editor-bold" />
+            </button>
+            <button class={styles.bubbleMenuButton}>
+              <Icon name="editor-italic" />
+            </button>
+            <div class={styles.delimiter}>D</div>
+            <button class={styles.bubbleMenuButton}>
+              <Icon name="editor-link" />
+            </button>
+            <button class={styles.bubbleMenuButton}>
+              <Icon name="editor-footnote" />
+            </button>
+            <div class={styles.delimiter} />
+            <button class={styles.bubbleMenuButton}>
+              <Icon name="editor-ul" />
+            </button>
+          </>
+        )}
+      </div>
+    </>
  )
 }
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -153,6 +153,7 @@ a:visited,
 a:link {
  border-bottom: 1px solid rgb(0 0 0 / 30%);
  text-decoration: none;
+  cursor: pointer;
 }

 a {