Toggle quotes (#210)

Toggle quotes

src/components/Article/Article.module.scss

@@ -566,10 +566,7 @@ a[data-toggle='tooltip'] {
   .tooltipContent {
     max-height: 300px;
     overflow: auto;
-
+    color: var(--default-color-invert);
-    & * {
-      color: var(--default-color-invert);
-    }
 
     a {
       text-decoration: underline;

src/components/Article/FullArticle.tsx

@@ -145,7 +145,8 @@ export const FullArticle = (props: Props) => {
       tooltip.appendChild(tooltipContent)
 
       document.body.appendChild(tooltip)
-      if (element.tagName === 'a') {
+
+      if (element.hasAttribute('href')) {
         element.setAttribute('href', 'javascript: void(0);')
       }
       createPopper(element, tooltip, {

src/components/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, Show } from 'solid-js'
+import { createEffect, createSignal, onCleanup } from 'solid-js'
 import { createTiptapEditor, useEditorHTML } from 'solid-tiptap'
 import uniqolor from 'uniqolor'
 import * as Y from 'yjs'
@@ -41,10 +41,6 @@ import Article from './extensions/Article'
 import { TextBubbleMenu } from './TextBubbleMenu'
 import { FigureBubbleMenu, BlockquoteBubbleMenu, IncutBubbleMenu } from './BubbleMenu'
 import { EditorFloatingMenu } from './EditorFloatingMenu'
-import { TableOfContents } from '../TableOfContents'
-
-import { isDesktop } from '../../utils/media-query'
-
 import './Prosemirror.scss'
 import { Image } from '@tiptap/extension-image'
 import { Footnote } from './extensions/Footnote'

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -97,6 +97,21 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
     setFootnoteEditorOpen(true)
   }
 
+  const handleSetPunchline = () => {
+    if (isPunchLine()) {
+      props.editor.chain().focus().toggleBlockquote('punchline').run()
+    }
+    props.editor.chain().focus().toggleBlockquote('quote').run()
+    toggleTextSizePopup()
+  }
+  const handleSetQuote = () => {
+    if (isQuote()) {
+      props.editor.chain().focus().toggleBlockquote('quote').run()
+    }
+    props.editor.chain().focus().toggleBlockquote('punchline').run()
+    toggleTextSizePopup()
+  }
+
   onMount(() => {
     window.addEventListener('keydown', handleKeyDown)
   })
@@ -207,11 +222,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isQuote()
                               })}
-                              onClick={() => {
+                              onClick={handleSetPunchline}
-                                if (isPunchLine()) return
-                                props.editor.chain().focus().toggleBlockquote('quote').run()
-                                toggleTextSizePopup()
-                              }}
                             >
                               <Icon name="editor-blockquote" />
                             </button>
@@ -225,11 +236,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isPunchLine()
                               })}
-                              onClick={() => {
+                              onClick={handleSetQuote}
-                                if (isQuote()) return
-                                props.editor.chain().focus().toggleBlockquote('punchline').run()
-                                toggleTextSizePopup()
-                              }}
                             >
                               <Icon name="editor-quote" />
                             </button>

src/components/Views/Author/Author.tsx

@@ -3,7 +3,6 @@ import type { Author, Shout, Topic } from '../../../graphql/types.gen'
 import { Row1 } from '../../Feed/Row1'
 import { Row2 } from '../../Feed/Row2'
 import { Row3 } from '../../Feed/Row3'
-
 import { useAuthorsStore } from '../../../stores/zine/authors'
 import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
 import { useRouter } from '../../../stores/router'
@@ -17,8 +16,6 @@ import { apiClient } from '../../../utils/apiClient'
 import { Comment } from '../../Article/Comment'
 import { useLocalize } from '../../../context/localize'
 import { AuthorRatingControl } from '../../Author/AuthorRatingControl'
-import { TopicCard } from '../../Topic/Card'
-import { Loading } from '../../_shared/Loading'
 import { hideModal } from '../../../stores/ui'
 
 type AuthorProps = {

src/stores/zine/articles.ts

@@ -1,4 +1,4 @@
-import type { Author, Shout, ShoutInput, Topic, LoadShoutsOptions } from '../../graphql/types.gen'
+import type { Author, Shout, ShoutInput, LoadShoutsOptions } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 import { addAuthorsByTopic } from './authors'
 import { byStat } from '../../utils/sortby'

src/stores/zine/authors.ts

@@ -1,6 +1,6 @@
 import { apiClient } from '../../utils/apiClient'
 import type { Author } from '../../graphql/types.gen'
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 import { createLazyMemo } from '@solid-primitives/memo'
 import { byStat } from '../../utils/sortby'