Refactor HeadingBlock using tiptap

src/components/Block.vue

@@ -97,12 +97,18 @@ function getInnerContent () {
 }
 
 function getTextContent () {
+ if (props.block.type === BlockType.Text || props.block.type === BlockType.Quote || props.block.type === BlockType.H1) {
+ return content.value.$el.querySelector('.ProseMirror').editor.getText()
+ }
  const innerContent = getInnerContent()
  if (innerContent) return innerContent.parentElement ? innerContent.parentElement.textContent : innerContent.textContent
  else return ''
 }
 
 function getHtmlContent () {
+ if (props.block.type === BlockType.Text || props.block.type === BlockType.Quote || props.block.type === BlockType.H1) {
+ return content.value.$el.querySelector('.ProseMirror').editor.getHTML()
+ }
  const innerContent = getInnerContent()
  if (innerContent) return innerContent.parentElement.innerHTML
  else return ''
@@ -299,9 +305,9 @@ function getCaretCoordinates () {
 function getCaretPos () {
  const selection = window.getSelection()
  if (selection) {
+ let selectedNode = selection.anchorNode
  if (props.block.type === BlockType.Text || props.block.type === BlockType.Quote) {
  let offsetNode, offset = 0, tag = null
- let selectedNode = selection.anchorNode
  if (['STRONG', 'EM'].includes(selectedNode?.parentElement?.tagName as string)) {
  selectedNode = selectedNode?.parentElement as Node
  tag = (selectedNode as HTMLElement).tagName.toLowerCase()
@@ -323,7 +329,7 @@ function getCaretPos () {
  }
  return { pos: offset + selection.anchorOffset + (selectedNode?.parentElement?.tagName === 'P' ? 3 : 0), tag }
  } else {
- return { pos: selection.anchorOffset }
+ return { pos: selection.anchorOffset + (selectedNode?.parentElement?.tagName === 'H1' ? 4 : 0) }
  }
  } else {
  return { pos: 0 }
@@ -365,7 +371,7 @@ function getCaretPosWithoutTags () {
 function setCaretPos (caretPos:number) {
  const innerContent = getInnerContent()
  if (innerContent) {
- if (props.block.type === BlockType.Text || props.block.type === BlockType.Quote) {
+ if (props.block.type === BlockType.Text || props.block.type === BlockType.Quote || props.block.type === BlockType.H1) {
  let offsetNode, offset = 0
  const numNodes = (content.value as any).$el.firstChild.firstChild.childNodes.length
  for (const [i, node] of (content.value as any).$el.firstChild.firstChild.childNodes.entries()) {

src/components/Lotion.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeUpdate, PropType } from 'vue'
+import { ref, onBeforeUpdate, PropType, nextTick } from 'vue'
 import { VueDraggableNext as draggable } from 'vue-draggable-next'
-import { Block, BlockType } from '@/utils/types'
+import { Block, BlockType, blockTagMap } from '@/utils/types'
 import BlockComponent from './Block.vue'
 
 const props = defineProps({
@@ -97,33 +97,65 @@ function merge (blockIdx: number) {
 
  if (props.page.blocks[blockIdx-1].type === BlockType.Text || props.page.blocks[blockIdx-1].type === BlockType.Quote) {
  const prevBlockContentLength = blockElements.value[blockIdx-1].getTextContent().length
- props.page.blocks[blockIdx-1].details.value = ('<p>' + (props.page.blocks[blockIdx-1] as any).details.value.replace('<p>', '').replace('</p>', '') + blockElements.value[blockIdx].getHtmlContent().replaceAll(/\<br.*?\>/g, '').replace('<p>', '').replace('</p>', '') + '</p>').replace('</strong><strong>', '').replace('</em><em>', '')
- setTimeout(() => {
+ props.page.blocks[blockIdx-1].details.value = replaceTag(
+ (removeTag(props.page.blocks[blockIdx-1].details.value) + removeTag(blockElements.value[blockIdx].getHtmlContent())).replace('</strong><strong>', '').replace('</em><em>', ''),
+ blockTagMap[props.page.blocks[blockIdx-1].type],
+ )
+ 
+ nextTick(() => {
  blockElements.value[blockIdx-1].setCaretPos(prevBlockContentLength)
  props.page.blocks.splice(blockIdx, 1)
  })
- } else if ([BlockType.H1, BlockType.H2, BlockType.H3].includes(props.page.blocks[blockIdx-1].type)) {
+ } else if (props.page.blocks[blockIdx-1].type === BlockType.H1) {
+ const prevBlockContentLength = blockElements.value[blockIdx-1].getTextContent().length
+ props.page.blocks[blockIdx-1].details.value = replaceTag(
+ removeTag(props.page.blocks[blockIdx-1].details.value) + blockElements.value[blockIdx].getTextContent(),
+ blockTagMap[props.page.blocks[blockIdx-1].type],
+ )
+ nextTick(() => {
+ blockElements.value[blockIdx-1].setCaretPos(prevBlockContentLength)
+ props.page.blocks.splice(blockIdx, 1)
+ })
+ } else if ([BlockType.H2, BlockType.H3].includes(props.page.blocks[blockIdx-1].type)) {
  const prevBlockContentLength = (props.page.blocks[blockIdx-1] as any).details.value.length
  props.page.blocks[blockIdx-1].details.value += blockElements.value[blockIdx].getTextContent()
- setTimeout(() => {
+ nextTick(() => {
  blockElements.value[blockIdx-1].setCaretPos(prevBlockContentLength)
  props.page.blocks.splice(blockIdx, 1)
  })
  } else {
  props.page.blocks.splice(blockIdx-1, 1)
- setTimeout(() => blockElements.value[blockIdx-1].moveToStart())
+ nextTick(() => blockElements.value[blockIdx-1].moveToStart())
  }
 }
 
 function split (blockIdx: number) {
  const caretPos = blockElements.value[blockIdx].getCaretPos()
  insertBlock(blockIdx)
- props.page.blocks[blockIdx+1].details.value = (caretPos.tag ? `<p><${caretPos.tag}>` : '<p>') + props.page.blocks[blockIdx].details.value?.slice(caretPos.pos)
- if (props.page.blocks[blockIdx].type === BlockType.Text || props.page.blocks[blockIdx].type === BlockType.Quote) {
- props.page.blocks[blockIdx].details.value = props.page.blocks[blockIdx].details.value?.slice(0, caretPos.pos) + (caretPos.tag ? `</${caretPos.tag}></p>` : '</p>')
- } else {
- props.page.blocks[blockIdx].details.value = props.page.blocks[blockIdx].details.value?.slice(0, caretPos.pos) + (caretPos.tag ? `</${caretPos.tag}></p>` : '')
- }
- setTimeout(() => blockElements.value[blockIdx+1].moveToStart())
+ const [prevContent, nextContent] = splitContentByIndex(props.page.blocks[blockIdx].details.value, caretPos.pos)
+
+ props.page.blocks[blockIdx+1].details.value = replaceTag(caretPos.tag ? `<${caretPos.tag}>${nextContent}` : nextContent, 'p')
+
+ props.page.blocks[blockIdx].details.value = replaceTag(caretPos.tag ? `${prevContent}</${caretPos.tag}>` : prevContent, blockTagMap[props.page.blocks[blockIdx].type])
+
+ nextTick(() => blockElements.value[blockIdx+1].moveToStart())
+}
+
+
+function splitContentByIndex(content: string | undefined, index: number) {
+ if (!content) return ['', '']
+ return [content.slice(0, index), content.slice(index)];
+}
+
+function removeTag(content: string | undefined) {
+ if (!content) return ''
+ return content.replace(/^<(p|h[123])>/, '').replace(/<\/(p|h[123])>$/, '')
+}
+
+function replaceTag(content: string, tag: string) {
+ const text = removeTag(content)
+
+ if (!tag) return text
+ return `<${tag}>${text}</${tag}>`
 }
 </script>

src/components/Main.vue

@@ -20,7 +20,7 @@ const page = ref({
  blocks:[{
  type: BlockType.H1,
  details: {
- value: 'Get Started'
+ value: '<h1>Get Started</h1>'
  },
  }, {
  type: BlockType.Divider,

src/components/Markdown.vue

@@ -17,13 +17,15 @@ const props = defineProps({
 
 const markdownBlocks = computed(() => {
  return props.page.blocks.map(block => {
- if (block.type === BlockType.Text || block.type === BlockType.Quote) {
+ if (block.type === BlockType.Text || block.type === BlockType.Quote || block.type === BlockType.H1) {
  return {
  type: block.type,
  details: {
  value: (block.details.value as string)
  .replaceAll('<p>', '')
  .replaceAll('</p>', '')
+ .replaceAll('<h1>', '')
+ .replaceAll('</h1>', '')
  .replaceAll('<strong>', '**')
  .replaceAll('</strong>', '**')
  .replaceAll('<em>', '*')

src/components/blocks/TextBlock.vue

@@ -1,11 +1,13 @@
 <template>
  <Editor v-model="props.block.details.value"
- class="py-1.5" />
+ class="py-1.5 "
+ :class="textConfig[props.block.type]?.class"
+ />
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { Block } from '@/utils/types'
+import { Block, BlockType } from '@/utils/types'
 import Editor from '../elements/Editor.vue'
 
 const props = defineProps({
@@ -14,4 +16,22 @@ const props = defineProps({
  required: true,
  }
 })
+
+const textConfig = {
+ [BlockType.Text]: {
+ class: '',
+ },
+ [BlockType.H1]: {
+ class: 'text-4xl font-semibold',
+ },
+ [BlockType.H2]: {
+ class: 'text-3xl font-medium',
+ },
+ [BlockType.H3]: {
+ class: 'text-2xl font-medium',
+ },
+ // Irrelevant BlockTypes
+ [BlockType.Divider]: null,
+ [BlockType.Quote]: null,
+}
 </script>

src/components/elements/Editor.vue

@@ -8,6 +8,7 @@ import { watch } from 'vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import Heading from '@tiptap/extension-heading'
 import Bold from '@tiptap/extension-bold'
 import Italic from '@tiptap/extension-italic'
 import History from '@tiptap/extension-history'
@@ -27,6 +28,9 @@ const editor = useEditor({
  Document,
  Paragraph,
  Text,
+ Heading.configure({
+ levels: [1],
+ }),
  Bold,
  Italic,
  History,

src/utils/types.ts

@@ -24,9 +24,18 @@ export interface Details {
 
 export const BlockComponents = {
  [BlockType.Text]: TextBlock,
- [BlockType.H1]: HeadingBlock,
+ [BlockType.H1]: TextBlock,
  [BlockType.H2]: HeadingBlock,
  [BlockType.H3]: HeadingBlock,
  [BlockType.Divider]: DividerBlock,
  [BlockType.Quote]: QuoteBlock,
 }
+
+export const blockTagMap = {
+ [BlockType.Text]: 'p',
+ [BlockType.H1]: 'h1',
+ [BlockType.H2]: '',
+ [BlockType.H3]: '',
+ [BlockType.Quote]: 'p',
+ [BlockType.Divider]: '',
+}