feat(tiptap): make heading toolbar more versatile (turn into)

packages/web-pkg/src/editor/composables/strategies/html.ts

@@ -79,19 +79,20 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
     underline,
     strikethrough,
     heading,
+    paragraph,
     heading1,
     heading2,
     heading3,
     heading4,
+    blockquote,
+    codeBlock,
     alignLeft,
     alignCenter,
     alignRight,
     alignJustify,
     bulletList,
     orderedList,
     taskList,
-    blockquote,
-    codeBlock,
     horizontalRule,
     tableMenu,
     createTable,
@@ -119,10 +120,13 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
         title: $gettext('Formatting'),
         actions: [
           heading(),
+          paragraph(),
           heading1(),
           heading2(),
           heading3(),
           heading4(),
+          blockquote(),
+          codeBlock(),
           fontSize(),
           lineHeight(),
           backgroundColor(),
@@ -143,11 +147,6 @@ export const useStrategyHtml = (editorState: TextEditorState): ContentTypeStrate
         title: $gettext('Lists'),
         actions: [bulletList(), orderedList(), taskList()]
       },
-      {
-        id: 'blocks',
-        title: $gettext('Blocks'),
-        actions: [blockquote(), codeBlock()]
-      },
       {
         id: 'insert',
         title: $gettext('Insert'),

packages/web-pkg/src/editor/composables/strategies/markdown.ts

@@ -55,15 +55,16 @@ export const useStrategyMarkdown = (editorState: TextEditorState): ContentTypeSt
     italic,
     strikethrough,
     heading,
+    paragraph,
     heading1,
     heading2,
     heading3,
     heading4,
+    blockquote,
+    codeBlock,
     bulletList,
     orderedList,
     taskList,
-    blockquote,
-    codeBlock,
     horizontalRule,
     image,
     imageUrl,
@@ -94,10 +95,13 @@ export const useStrategyMarkdown = (editorState: TextEditorState): ContentTypeSt
         title: $gettext('Formatting'),
         actions: [
           heading(),
+          paragraph(),
           heading1(),
           heading2(),
           heading3(),
           heading4(),
+          blockquote(),
+          codeBlock(),
           bold(),
           italic(),
           strikethrough()
@@ -108,11 +112,6 @@ export const useStrategyMarkdown = (editorState: TextEditorState): ContentTypeSt
         title: $gettext('Lists'),
         actions: [bulletList(), orderedList(), taskList()]
       },
-      {
-        id: 'blocks',
-        title: $gettext('Blocks'),
-        actions: [blockquote(), codeBlock()]
-      },
       {
         id: 'insert',
         title: $gettext('Insert'),

packages/web-pkg/src/editor/composables/useEditorActions.ts

@@ -253,20 +253,54 @@ export function useEditorActions(
 
   // Heading actions
   const heading = (): EditorAction => ({
-    id: 'heading',
-    title: $gettext('Heading'),
-    icon: 'heading',
+    id: 'turn-into',
+    title: $gettext('Turn into'),
+    icon: 'text',
     activeIcon: (editor) => {
-      for (const level of [1, 2, 3, 4] as const) {
-        if (editor.isActive('heading', { level })) {
-          return { icon: `h-${level}` }
+      for (const action of [
+        heading1(),
+        heading2(),
+        heading3(),
+        heading4(),
+        blockquote(),
+        codeBlock()
+      ]) {
+        if (action.isActive?.(editor)) {
+          return { icon: action.icon }
         }
       }
+
       return undefined
     },
-    isActive: (editor) => editor.isActive('heading'),
+    isActive: (editor) =>
+      editor.isActive('heading') || editor.isActive('blockquote') || editor.isActive('codeBlock'),
     showInSlashCommands: false,
-    childActions: [heading1(), heading2(), heading3(), heading4()]
+    childActions: [
+      paragraph(),
+      heading1(),
+      heading2(),
+      heading3(),
+      heading4(),
+      blockquote(),
+      codeBlock()
+    ]
+  })
+
+  const paragraph = (): EditorAction => ({
+    id: 'paragraph',
+    title: $gettext('Paragraph'),
+    description: $gettext('Text paragraph'),
+    icon: 'text',
+    keywords: ['paragraph', 'text'],
+    toolbarAction: (editor) => editor.chain().focus().setParagraph().run(),
+    slashCommandAction: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('paragraph').run()
+    },
+    isActive: (editor) => {
+      const { $from } = editor.state.selection
+      return $from.parent.type.name === 'paragraph' && $from.depth === 1
+    },
+    showInToolbar: false
   })
 
   const heading1 = (): EditorAction => ({
@@ -350,7 +384,8 @@ export function useEditorActions(
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).toggleBlockquote().run()
     },
-    isActive: (editor) => editor.isActive('blockquote')
+    isActive: (editor) => editor.isActive('blockquote'),
+    showInToolbar: false
   })
 
   const codeBlock = (): EditorAction => ({
@@ -363,7 +398,8 @@ export function useEditorActions(
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
     },
-    isActive: (editor) => editor.isActive('codeBlock')
+    isActive: (editor) => editor.isActive('codeBlock'),
+    showInToolbar: false
   })
 
   // List actions
@@ -679,6 +715,7 @@ export function useEditorActions(
     toggleSourceMode,
     // Text formatting
     heading,
+    paragraph,
     heading1,
     heading2,
     heading3,

packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts

@@ -162,6 +162,27 @@ describe('useEditorActions', () => {
   })
 
   describe('heading', () => {
+    const getParagraphAction = () => {
+      return actions.heading().childActions!.find(({ id }) => id === 'paragraph')!
+    }
+
+    describe('paragraph', () => {
+      it('toolbarAction sets paragraph', () => {
+        const editor = createMockEditor()
+        getParagraphAction().toolbarAction!(editor)
+        expect(editor._chain.setParagraph).toHaveBeenCalled()
+        expect(editor._chain.run).toHaveBeenCalled()
+      })
+
+      it('slashCommandAction deletes range then sets paragraph node', () => {
+        const editor = createMockEditor()
+        getParagraphAction().slashCommandAction!({ editor, range: mockRange })
+        expect(editor._chain.deleteRange).toHaveBeenCalledWith(mockRange)
+        expect(editor._chain.setNode).toHaveBeenCalledWith('paragraph')
+        expect(editor._chain.run).toHaveBeenCalled()
+      })
+    })
+
     const blockActions: ReadonlyArray<{
       name: 'heading1' | 'heading2' | 'heading3' | 'heading4'
       markName: string

packages/web-pkg/tests/unit/editor/strategies/markdown.spec.ts

@@ -53,7 +53,6 @@ describe('useStrategyMarkdown', () => {
       const groupIds = strategy.editorActionGroups().map((g) => g.id)
       expect(groupIds).toContain('formatting')
       expect(groupIds).toContain('lists')
-      expect(groupIds).toContain('blocks')
       expect(groupIds).toContain('insert')
     })
   })