From 23a9b9d98a7b242ee6eb7819a7040208feb7ff92 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 4 Sep 2023 09:06:12 +0300
Subject: [PATCH] Separate blockquote and punchline logic (#207)
---
public/icons/editor-blockquote.svg | 4 +++-
public/icons/editor-squib.svg | 4 +++-
.../Editor/TextBubbleMenu/TextBubbleMenu.tsx | 23 ++++++++++---------
src/components/Editor/extensions/Article.ts | 1 -
.../Editor/extensions/CustomBlockquote.ts | 6 ++---
5 files changed, 21 insertions(+), 17 deletions(-)
diff --git a/public/icons/editor-blockquote.svg b/public/icons/editor-blockquote.svg
index b6e52b40..67c1ae6c 100644
--- a/public/icons/editor-blockquote.svg
+++ b/public/icons/editor-blockquote.svg
@@ -1,3 +1,5 @@
diff --git a/public/icons/editor-squib.svg b/public/icons/editor-squib.svg
index 519a3975..db5e4a79 100644
--- a/public/icons/editor-squib.svg
+++ b/public/icons/editor-squib.svg
@@ -1,3 +1,5 @@
diff --git a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx b/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
index 99eee252..65b91f4a 100644
--- a/src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx
+++ b/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) => {
- return editor && editor.isActive(name, attributes)
- }
+ (editor) => 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) => {
- return (ed && ed.getAttributes('footnote').value) || ''
- }
+ (ed) => (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()
diff --git a/src/components/Editor/extensions/Article.ts b/src/components/Editor/extensions/Article.ts
index 6a50a528..0f5b1ba0 100644
--- a/src/components/Editor/extensions/Article.ts
+++ b/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'
diff --git a/src/components/Editor/extensions/CustomBlockquote.ts b/src/components/Editor/extensions/CustomBlockquote.ts
index 51b77796..8f436e4b 100644
--- a/src/components/Editor/extensions/CustomBlockquote.ts
+++ b/src/components/Editor/extensions/CustomBlockquote.ts
@@ -14,10 +14,10 @@ declare module '@tiptap/core' {
export const CustomBlockquote = Blockquote.extend({
name: 'blockquote',
defaultOptions: {
- HTMLAttributes: {},
- group: 'block',
- content: 'block+'
+ HTMLAttributes: {}
},
+ group: 'block',
+ content: 'block+',
addAttributes() {
return {
'data-float': {