feat(editor): special blocks for fixed items

packages/better-write-app/src/components/page/editor/entity/default/EditorEntityDefault.vue

@@ -15,6 +15,14 @@
     v-else-if="entity.type === 'drau'"
     :entity="entity"
   />
+  <EditorEntityDefaultLineBreak
+    v-else-if="entity.type === 'line-break'"
+    :entity="entity"
+  />
+  <EditorEntityDefaultPageBreak
+    v-else-if="entity.type === 'page-break'"
+    :entity="entity"
+  />
   <EditorEntityDefaultHeading
     v-else-if="
       entity.type === 'heading-one' ||
@@ -23,7 +31,10 @@
     "
     :entity="entity"
   />
-  <EditorEntityDefaultParagraph v-else :entity="entity" />
+  <EditorEntityDefaultParagraph
+    v-else-if="entity.type === 'paragraph'"
+    :entity="entity"
+  />
 </template>
 
 <script setup lang="ts">

packages/better-write-app/src/components/page/editor/entity/default/EditorEntityDefaultContainer.vue

@@ -11,17 +11,21 @@
 </template>
 
 <script setup lang="ts">
+  import { useAbsoluteStore } from '@/store/absolute'
   import { useContextStore } from '@/store/context'
+  import { useEditorStore } from '@/store/editor'
   import { useRaw } from '@/use/raw'
   import { useMousePressed, watchDebounced } from '@vueuse/core'
   import { Entity } from 'better-write-types'
-  import { computed, ref } from 'vue'
+  import { computed, ref, watch } from 'vue'
 
   const props = defineProps<{
     entity: Entity
   }>()
 
   const CONTEXT = useContextStore()
+  const EDITOR = useEditorStore()
+  const ABSOLUTE = useAbsoluteStore()
 
   const raw = useRaw()
   const container = ref()
@@ -33,6 +37,18 @@
     target: container,
   })
 
+  const target = computed(
+    () => EDITOR.actives.entity.index === _index.value && ABSOLUTE.entity.menu
+  )
+
+  /* info */
+  watch(target, (_target) => {
+    // for delete mutate
+    if (!CONTEXT.entities[_index.value]) return
+
+    CONTEXT.entities[_index.value].visual.info = _target
+  })
+
   // mobile contextmenu open
   watchDebounced(
     pressed,

packages/better-write-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultLineBreak.vue

@@ -0,0 +1,17 @@
+<template>
+  <EditorEntityDefaultContainer :entity="props.entity">
+    <div class="flex items-center py-6 justify-center w-full">
+      <div
+        class="cursor-default border-b-8 border-dashed border-theme-editor-entity-line w-full"
+      />
+    </div>
+  </EditorEntityDefaultContainer>
+</template>
+
+<script setup lang="ts">
+  import { Entity } from 'better-write-types'
+
+  const props = defineProps<{
+    entity: Entity
+  }>()
+</script>

packages/better-write-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultPageBreak.vue

@@ -0,0 +1,17 @@
+<template>
+  <EditorEntityDefaultContainer :entity="props.entity">
+    <div class="flex items-center py-6 justify-center w-full">
+      <div
+        class="cursor-default h-2 border-b-8 border-theme-border-1 border-theme-editor-entity-page w-full"
+      />
+    </div>
+  </EditorEntityDefaultContainer>
+</template>
+
+<script setup lang="ts">
+  import { Entity } from 'better-write-types'
+
+  const props = defineProps<{
+    entity: Entity
+  }>()
+</script>

packages/better-write-app/src/components/page/editor/entity/default/blocks/EditorEntityDefaultText.vue

@@ -36,7 +36,6 @@
   import { useProject } from '@/use/project'
   import useEmitter from '@/use/emitter'
   import { useUtils } from '@/use/utils'
-  import { useScroll } from '@/use/scroll'
 
   const props = defineProps<{
     entity: Entity
@@ -55,12 +54,8 @@
   const emitter = useEmitter()
   const raw = useRaw()
   const utils = useUtils()
-  const scroll = useScroll()
 
   const _index = computed(() => CONTEXT.entities.indexOf(props.entity))
-  const target = computed(
-    () => EDITOR.actives.entity.index === _index.value && ABSOLUTE.entity.menu
-  )
 
   const { focused } = useFocus(__INPUT__)
 
@@ -83,14 +78,6 @@
     }
   })
 
-  /* info */
-  watch(target, (_target) => {
-    // for delete mutate
-    if (!CONTEXT.entities[_index.value]) return
-
-    CONTEXT.entities[_index.value].visual.info = _target
-  })
-
   onMounted(() => {
     emitter.on('entity-text-focus', (index: ID<number>) => {
       if (CONTEXT.entities[index] === props.entity) {