Fix Pack (#148)

src/components/Editor/InlineForm/InlineForm.tsx

@@ -1,6 +1,6 @@
 import styles from './InlineForm.module.scss'
 import { Icon } from '../../_shared/Icon'
-import { createSignal } from 'solid-js'
+import { createSignal, onMount } from 'solid-js'
 import { clsx } from 'clsx'
 import { Popover } from '../../_shared/Popover'
 import { useLocalize } from '../../../context/localize'
@@ -13,7 +13,6 @@ type Props = {
   initialValue?: string
   showInput?: boolean
   placeholder: string
-  autoFocus?: boolean
 }
 
 export const InlineForm = (props: Props) => {
@@ -21,6 +20,7 @@ export const InlineForm = (props: Props) => {
   const [formValue, setFormValue] = createSignal(props.initialValue || '')
   const [formValueError, setFormValueError] = createSignal<string | undefined>()
 
+  const inputRef: { current: HTMLInputElement } = { current: null }
   const handleFormInput = (e) => {
     const value = e.currentTarget.value
     setFormValueError()
@@ -57,11 +57,15 @@ export const InlineForm = (props: Props) => {
     props.initialValue ? props.onClear() : props.onClose()
   }
 
+  onMount(() => {
+    inputRef.current.focus()
+  })
+
   return (
     <div class={styles.InlineForm}>
       <div class={styles.form}>
         <input
-          autofocus={props.autoFocus ?? true}
+          ref={(el) => (inputRef.current = el)}
           type="text"
           value={props.initialValue ?? ''}
           placeholder={props.placeholder}

src/components/Editor/InsertLinkForm/InsertLinkForm.tsx

@@ -1,12 +1,12 @@
 import { Editor } from '@tiptap/core'
 import { validateUrl } from '../../../utils/validateUrl'
-import { hideModal } from '../../../stores/ui'
 import { InlineForm } from '../InlineForm'
 import { useLocalize } from '../../../context/localize'
 import { createEditorTransaction } from 'solid-tiptap'
 
 type Props = {
   editor: Editor
+  onClose: () => void
 }
 
 export const checkUrl = (url) => {
@@ -48,7 +48,7 @@ export const InsertLinkForm = (props: Props) => {
         onClear={handleClearLinkForm}
         validate={(value) => (validateUrl(value) ? '' : t('Invalid url format'))}
         onSubmit={handleLinkFormSubmit}
-        onClose={() => hideModal()}
+        onClose={() => props.onClose()}
       />
     </div>
   )

src/components/Editor/SimplifiedEditor.tsx

@@ -138,6 +138,7 @@ const SimplifiedEditor = (props: Props) => {
     }
 
     if (event.code === 'KeyK' && (event.metaKey || event.ctrlKey) && !editor().state.selection.empty) {
+      event.preventDefault()
       showModal('editorInsertLink')
     }
   }
@@ -149,7 +150,7 @@ const SimplifiedEditor = (props: Props) => {
   onCleanup(() => {
     window.removeEventListener('keydown', handleKeyDown)
   })
-  const handleToggleBlockquote = () => editor().chain().focus().toggleBlockquote().run()
+
   const handleInsertLink = () => !editor().state.selection.empty && showModal('editorInsertLink')
   return (
     <div
@@ -190,7 +191,7 @@ const SimplifiedEditor = (props: Props) => {
               <button
                 ref={triggerRef}
                 type="button"
-                onClick={() => handleInsertLink}
+                onClick={handleInsertLink}
                 class={clsx(styles.actionButton, { [styles.active]: isLink() })}
               >
                 <Icon name="editor-link" />
@@ -203,7 +204,7 @@ const SimplifiedEditor = (props: Props) => {
                 <button
                   ref={triggerRef}
                   type="button"
-                  onClick={handleToggleBlockquote}
+                  onClick={() => editor().chain().focus().toggleBlockquote().run()}
                   class={clsx(styles.actionButton, { [styles.active]: isBlockquote() })}
                 >
                   <Icon name="editor-quote" />
@@ -237,7 +238,7 @@ const SimplifiedEditor = (props: Props) => {
         </div>
       </div>
       <Modal variant="narrow" name="editorInsertLink">
-        <InsertLinkForm editor={editor()} />
+        <InsertLinkForm editor={editor()} onClose={() => hideModal()} />
       </Modal>
       <Show when={props.imageEnabled}>
         <Modal variant="narrow" name="uploadImage">

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -1,4 +1,4 @@
-import { Switch, Match, createSignal, Show } from 'solid-js'
+import { Switch, Match, createSignal, Show, onMount, onCleanup } from 'solid-js'
 import type { Editor } from '@tiptap/core'
 import styles from './TextBubbleMenu.module.scss'
 import { Icon } from '../../_shared/Icon'
@@ -51,12 +51,26 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
     }
     setListBubbleOpen((prev) => !prev)
   }
+  const handleKeyDown = async (event) => {
+    if (event.code === 'KeyK' && (event.metaKey || event.ctrlKey) && !props.editor.state.selection.empty) {
+      event.preventDefault()
+      setLinkEditorOpen(true)
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeyDown)
+  })
+
+  onCleanup(() => {
+    window.removeEventListener('keydown', handleKeyDown)
+  })
 
   return (
     <div ref={props.ref} class={styles.TextBubbleMenu}>
       <Switch>
         <Match when={linkEditorOpen()}>
-          <InsertLinkForm editor={props.editor} />
+          <InsertLinkForm editor={props.editor} onClose={() => setLinkEditorOpen(false)} />
         </Match>
         <Match when={!linkEditorOpen()}>
           <>

src/components/Editor/UploadModalContent/UploadModalContent.tsx

@@ -106,7 +106,6 @@ export const UploadModalContent = (props: Props) => {
           </Show>
           <div class={styles.formHolder}>
             <InlineForm
-              autoFocus={false}
               placeholder={t('Or paste a link to an image')}
               showInput={true}
               onClose={() => {

src/components/_shared/SolidSwiper/SolidSwiper.tsx

@@ -304,29 +304,31 @@ export const SolidSwiper = (props: Props) => {
           </div>
         }
       >
-        <div class={styles.description}>
-          <input
-            type="text"
-            class={clsx(styles.input, styles.title)}
-            placeholder={t('Enter image title')}
-            value={props.images[slideIndex()].title}
-            onChange={(event) => handleSlideDescriptionChange(slideIndex(), 'title', event.target.value)}
-          />
-          <input
-            type="text"
-            class={styles.input}
-            placeholder={t('Specify the source and the name of the author')}
-            value={props.images[slideIndex()].source}
-            onChange={(event) => handleSlideDescriptionChange(slideIndex(), 'source', event.target.value)}
-          />
-          <SimplifiedEditor
-            initialContent={props.images[slideIndex()].body}
-            smallHeight={true}
-            placeholder={t('Enter image description')}
-            onSubmit={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
-            submitButtonText={t('Save')}
-          />
-        </div>
+        <Show when={props.images.length > 0}>
+          <div class={styles.description}>
+            <input
+              type="text"
+              class={clsx(styles.input, styles.title)}
+              placeholder={t('Enter image title')}
+              value={props.images[slideIndex()].title}
+              onChange={(event) => handleSlideDescriptionChange(slideIndex(), 'title', event.target.value)}
+            />
+            <input
+              type="text"
+              class={styles.input}
+              placeholder={t('Specify the source and the name of the author')}
+              value={props.images[slideIndex()].source}
+              onChange={(event) => handleSlideDescriptionChange(slideIndex(), 'source', event.target.value)}
+            />
+            <SimplifiedEditor
+              initialContent={props.images[slideIndex()].body}
+              smallHeight={true}
+              placeholder={t('Enter image description')}
+              onSubmit={(value) => handleSlideDescriptionChange(slideIndex(), 'body', value)}
+              submitButtonText={t('Save')}
+            />
+          </div>
+        </Show>
       </Show>
     </div>
   )

src/pages/create.page.tsx

@@ -30,10 +30,10 @@ export const CreatePage = () => {
             </div>
           </li>
           <li>
-            <a href="#">
+            <div class={styles.link} onClick={() => handleCreate('literature')}>
               <Icon name="create-books" class={styles.icon} />
               <div>{t('literature')}</div>
-            </a>
+            </div>
           </li>
           <li>
             <div class={styles.link} onClick={() => handleCreate('image')}>