Separate blockquote and punchline logic (#207)

public/icons/editor-blockquote.svg

@@ -1,3 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 16H0V0H2V16ZM4 5V3H16V5H4ZM4 7V9H16V7H4ZM4 13V11H16V13H4Z" fill="#898C94"/>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M2 16H0V0H2V16ZM4 5V3H16V5H4ZM4 7V9H16V7H4ZM4 13V11H16V13H4Z"
+        fill="currentColor"/>
 </svg>

public/icons/editor-squib.svg

@@ -1,3 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.77779V0H16.0001V1.77779H0ZM10.9092 9.4546H5.09094V2.90911H10.9092V9.4546ZM12.3637 3.63638H16.0001V5.09094H12.3637V3.63638ZM0 10.9092H16.0001V12.3637H0V10.9092ZM3.63638 3.63638H0V5.09094H3.63638V3.63638ZM12.3637 8.72732H16.0001V7.27277H12.3637V8.72732ZM3.63638 8.72732H0V7.27277H3.63638V8.72732ZM0 16H16.0001V14.2222H0V16Z" fill="#898C94"/>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M0 1.77779V0H16.0001V1.77779H0ZM10.9092 9.4546H5.09094V2.90911H10.9092V9.4546ZM12.3637 3.63638H16.0001V5.09094H12.3637V3.63638ZM0 10.9092H16.0001V12.3637H0V10.9092ZM3.63638 3.63638H0V5.09094H3.63638V3.63638ZM12.3637 8.72732H16.0001V7.27277H12.3637V8.72732ZM3.63638 8.72732H0V7.27277H3.63638V8.72732ZM0 16H16.0001V14.2222H0V16Z"
+        fill="currentColor"/>
 </svg>

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -1,4 +1,4 @@
-import { Switch, Match, createSignal, Show, onMount, onCleanup } from 'solid-js'
+import { Switch, Match, createSignal, Show, onMount, onCleanup, createEffect } from 'solid-js'
 import type { Editor } from '@tiptap/core'
 import styles from './TextBubbleMenu.module.scss'
 import { Icon } from '../../_shared/Icon'
@@ -23,10 +23,9 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   const isActive = (name: string, attributes?: unknown) =>
     createEditorTransaction(
       () => props.editor,
-      (editor) => {
+      (editor) => editor && editor.isActive(name, attributes)
-        return editor && editor.isActive(name, attributes)
-      }
     )
+
   const [textSizeBubbleOpen, setTextSizeBubbleOpen] = createSignal(false)
   const [listBubbleOpen, setListBubbleOpen] = createSignal(false)
   const [linkEditorOpen, setLinkEditorOpen] = createSignal(false)
@@ -38,12 +37,14 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
   const isH1 = isActive('heading', { level: 2 })
   const isH2 = isActive('heading', { level: 3 })
   const isH3 = isActive('heading', { level: 4 })
-  const isBlockQuote = isActive('blockquote')
+  const isQuote = isActive('blockquote', { 'data-type': 'quote' })
+  const isPunchLine = isActive('blockquote', { 'data-type': 'punchline' })
   const isOrderedList = isActive('isOrderedList')
   const isBulletList = isActive('isBulletList')
   const isLink = isActive('link')
   const isHighlight = isActive('highlight')
   const isFootnote = isActive('footnote')
+  const isIncut = isActive('article')
 
   const toggleTextSizePopup = () => {
     if (listBubbleOpen()) {
@@ -66,9 +67,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
 
   const currentFootnoteValue = createEditorTransaction(
     () => props.editor,
-    (ed) => {
+    (ed) => (ed && ed.getAttributes('footnote').value) || ''
-      return (ed && ed.getAttributes('footnote').value) || ''
-    }
   )
 
   const handleAddFootnote = (footnote) => {
@@ -193,9 +192,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isBlockQuote()
+                                [styles.bubbleMenuButtonActive]: isQuote()
                               })}
                               onClick={() => {
+                                if (isPunchLine()) return
                                 props.editor.chain().focus().toggleBlockquote('quote').run()
                                 toggleTextSizePopup()
                               }}
@@ -210,9 +210,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isBlockQuote()
+                                [styles.bubbleMenuButtonActive]: isPunchLine()
                               })}
                               onClick={() => {
+                                if (isQuote()) return
                                 props.editor.chain().focus().toggleBlockquote('punchline').run()
                                 toggleTextSizePopup()
                               }}
@@ -230,7 +231,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                               ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
-                                [styles.bubbleMenuButtonActive]: isBlockQuote()
+                                [styles.bubbleMenuButtonActive]: isIncut()
                               })}
                               onClick={() => {
                                 props.editor.chain().focus().toggleArticle().run()

src/components/Editor/extensions/Article.ts

@@ -12,7 +12,6 @@ declare module '@tiptap/core' {
 
 export default Node.create({
   name: 'article',
-
   defaultOptions: {
     HTMLAttributes: {
       'data-type': 'incut'

src/components/Editor/extensions/CustomBlockquote.ts

@@ -14,10 +14,10 @@ declare module '@tiptap/core' {
 export const CustomBlockquote = Blockquote.extend({
   name: 'blockquote',
   defaultOptions: {
-    HTMLAttributes: {},
+    HTMLAttributes: {}
-    group: 'block',
-    content: 'block+'
   },
+  group: 'block',
+  content: 'block+',
   addAttributes() {
     return {
       'data-float': {