feat(editor): icons in paragraph block

packages/better-write-app/src/components/material/Icon.vue

@@ -0,0 +1,5 @@
+<template>
+  <button class="wb-icon">
+    <slot />
+  </button>
+</template>

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

@@ -8,11 +8,22 @@
         .style(computed(() => props.entity))
     "
     :class="raw.v2().block().class(props.entity)"
-    class="w-full relative px-4 md:px-14"
+    class="w-full relative"
     @contextmenu="raw.v2().block().menu($event, _index)"
     @drop="raw.v2().block().drop($event, props.entity)"
   >
-    <slot />
+    <div
+      v-if="isHovered"
+      v-motion
+      :initial="{ opacity: 0, x: 20 }"
+      :enter="{ opacity: 1, x: 0 }"
+      class="absolute z-10 flex gap-1 items-center px-0.5"
+    >
+      <slot name="left" />
+    </div>
+    <div class="md:px-10 px-4">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -22,6 +33,7 @@
   import { useEditorStore } from '@/store/editor'
   import { useRaw } from '@/use/raw'
   import {
+    useElementHover,
     useIntersectionObserver,
     useMousePressed,
     watchDebounced,
@@ -40,7 +52,7 @@
 
   const raw = useRaw()
   const container = ref()
-
+  const isHovered = useElementHover(container)
   const _index = computed(() => CONTEXT.entities.indexOf(props.entity))
 
   const { pressed, sourceType: mouseType } = useMousePressed({

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

@@ -1,13 +1,24 @@
 <template>
   <EditorEntityDefaultContainer :entity="props.entity">
+    <template #left>
+      <Icon @click="entity.base().onParagraphComment(props.entity)">
+        <IconComment class="w-6 h-6 sm:(w-5 h-5)" />
+      </Icon>
+      <Icon @click="entity.base().onParagraphCustomize(props.entity)">
+        <IconEdit class="w-6 h-6 sm:(w-5 h-5)" />
+      </Icon>
+    </template>
     <EditorEntityDefaultText :is-attached="false" :entity="props.entity" />
   </EditorEntityDefaultContainer>
 </template>
 
 <script setup lang="ts">
+  import { useEntity } from '@/use/entity'
   import { Entity } from 'better-write-types'
 
   const props = defineProps<{
     entity: Entity
   }>()
+
+  const entity = useEntity()
 </script>

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

@@ -2,7 +2,7 @@
   <div class="relative w-full">
     <div
       ref="__INPUT__"
-      :class="!isAttached ? 'indent-lg' : ''"
+      :class="!isAttached ? 'indent-xl sm:indent-lg' : ''"
       :style="{
         fontFamily: EDITOR.styles.text.fontFamily,
         fontWeight: EDITOR.styles.text.fontWeight,

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

@@ -2,7 +2,7 @@
   <Modal @close="onClose">
     <div
       ref="custom"
-      class="fixed bg-rgba-blur font-raleway px-2 md:px-10 w-full h-screen overflow-y-auto wb-text bg-theme-background-1 p-2 rounded shadow-2xl"
+      class="fixed bg-rgba-blur font-raleway px-2 md:px-10 w-full h-screen wb-scroll wb-text bg-theme-background-1 p-2 rounded shadow-2xl"
     >
       <div class="flex py-3 items-center justify-between w-full">
         <div class="flex">

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

@@ -159,7 +159,7 @@
         entity.type === 'list' ||
         entity.type === 'checkbox'
       "
-      @action="onText"
+      @action="ent.base().onParagraphCustomize(entity)"
     >
       <template #icon>
         <IconText class="h-5 w-5" />
@@ -402,19 +402,4 @@
     ;(CONTEXT.entities[_index] as any).external.image.size.width =
       image.width as any
   })
-
-  const onText = async () => {
-    const _index: number = CONTEXT.entities.indexOf(entity.value)
-
-    if (!entity.value.external?.paragraph) {
-      CONTEXT.entities[_index].external = {
-        ...CONTEXT.entities[_index].external,
-        ...factory.entity().setText(),
-      }
-    }
-
-    await nextTick
-
-    ABSOLUTE.entity.customize = true
-  }
 </script>

packages/better-write-app/src/use/entity.ts

@@ -7,15 +7,21 @@ import { usePlugin } from 'better-write-plugin-core'
 import { useI18n } from 'vue-i18n'
 import { useStorage } from './storage/storage'
 import { useHistoryStore } from '@/store/history'
+import { useAbsoluteStore } from '@/store/absolute'
+import { useFactory } from './factory'
+import { useEditorStore } from '@/store/editor'
 
 export const useEntity = () => {
   const HISTORY = useHistoryStore()
   const CONTEXT = useContextStore()
+  const ABSOLUTE = useAbsoluteStore()
+  const EDITOR = useEditorStore()
 
   const env = useEnv()
   const emitter = useEmitter()
   const plugin = usePlugin()
   const storage = useStorage()
+  const factory = useFactory()
   const { t } = useI18n()
 
   const utils = () => {
@@ -134,6 +140,31 @@ export const useEntity = () => {
   }
 
   const base = () => {
+    const onParagraphCustomize = async (entity: Entity) => {
+      const _index: number = CONTEXT.entities.indexOf(entity)
+
+      EDITOR.actives.entity.index = _index
+
+      if (!entity.external?.paragraph) {
+        CONTEXT.entities[_index].external = {
+          ...CONTEXT.entities[_index].external,
+          ...factory.entity().setText(),
+        }
+      }
+
+      await nextTick
+
+      ABSOLUTE.entity.customize = true
+    }
+
+    const onParagraphComment = async (entity: Entity) => {
+      EDITOR.actives.entity.index = CONTEXT.entities.indexOf(entity)
+
+      await nextTick
+
+      ABSOLUTE.entity.comment = true
+    }
+
     const onUp = async (entity: Entity, index: number) => {
       CONTEXT.switchInPage({
         entity,
@@ -226,6 +257,8 @@ export const useEntity = () => {
     }
 
     return {
+      onParagraphCustomize,
+      onParagraphComment,
       onUp,
       onDown,
       onDelete,