style(editor): corrector modal

src/components/editor/project/corrector/EditorProjectCorrector.vue

@@ -3,22 +3,81 @@
     <div
       ref="corrector"
       :style="style"
-      class="fixed flex flex-col w-1/2 h-3/4 bg-gray-800 wb-text p-5 rounded shadow-2xl"
+      class="fixed flex flex-col w-3/4 md:w-1/2 h-3/4 bg-theme-background-1 wb-text rounded shadow-2xl p-5 overflow-y-auto"
     >
-      <EditorAbsoluteHeader :title="'Corretor'" @close="onClose" />
-      Coming soon...
+      <EditorAbsoluteHeader class="pl-5" :title="'Corretor'" @close="onClose" />
+      <div class="flex flex-wrap flex-1 flex-col-reverse lg:flex-row mt-5">
+        <div class="flex flex-1 flex-col p-5">
+          <EditorProjectCorrectorRow
+            v-for="(rule, index) in ADDONS.corrector.options"
+            :key="index"
+            :title="t(rule.title)"
+            @hover="onSet(rule)"
+          >
+            <InputBoolean v-model="rule.option" />
+          </EditorProjectCorrectorRow>
+        </div>
+        <div class="flex justify-start flex-1 flex-col p-3">
+          <div class="w-full">
+            <h2 class="font-bold text-lg lg:text-xl">{{ t(set.title) }}</h2>
+            <p class="mt-3">{{ t(set.description) }}</p>
+          </div>
+          <div class="flex flex-1 flex-col justify-cente mt-5">
+            <div class="w-full my-2 bg-theme-background-2 shadow-lg">
+              <p class="p-2 text-lg text-justify" v-html="set.html.before" />
+            </div>
+            <HeroIcon
+              class="py-2 flex items-center justify-center pointer-events-none"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                aria-hidden="true"
+                role="img"
+                class="iconify iconify--mdi"
+                width="32"
+                height="32"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5m8 1v8.5L7.5 11l-1.42 1.42L12 18.34l5.92-5.92L16.5 11L13 14.5V6h-2z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </HeroIcon>
+            <div class="w-full mt-4 bg-theme-background-2 shadow-lg">
+              <p class="p-2 text-lg text-justify" v-html="set.html.after" />
+            </div>
+          </div>
+          <div class="flex justify-end mt-5">
+            <button
+              class="rounded-full px-4 py-2 bg-theme-background-2 font-bold text-lg"
+            >
+              {{ t('editor.addons.corrector.convert') }}
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </Modal>
 </template>
 
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
+  import { useAddonsStore } from '@/store/addons'
   import { onClickOutside, MaybeElementRef, useDraggable } from '@vueuse/core'
   import { ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { AddonsCorrectorOption } from '@/types/addons'
 
   const ABSOLUTE = useAbsoluteStore()
+  const ADDONS = useAddonsStore()
+
+  const { t } = useI18n()
 
   const corrector = ref<HTMLElement | null>(null)
+  const set = ref<AddonsCorrectorOption>(ADDONS.corrector.options[0])
 
   const { style } = useDraggable(corrector as any, {
     initialValue: { x: window.innerWidth / 4, y: window.innerHeight / 6 },
@@ -31,4 +90,8 @@
   const onClose = () => {
     ABSOLUTE.project.corrector = false
   }
+
+  const onSet = (option: AddonsCorrectorOption) => {
+    set.value = option
+  }
 </script>

src/components/editor/project/corrector/EditorProjectCorrectorRow.vue

@@ -1,19 +1,21 @@
 <template>
-  <div class="flex justify-between wb-text items-center w-72">
-    <p class="text-lg font-poppins">{{ props.title }}</p>
-    <p class="font-bold">{{ props.result }}</p>
+  <div
+    class="flex justify-between wb-text items-center w-auto transition-all hover:bg-black-opacity p-2 mb-2"
+    @mouseenter="emit('hover')"
+    @touchstart="emit('hover')"
+  >
+    <p class="text-base font-poppins pointer-events-none">{{ props.title }}</p>
+    <slot />
   </div>
 </template>
 
 <script setup lang="ts">
+  const emit = defineEmits(['hover'])
+
   const props = defineProps({
     title: {
       required: true,
       type: String,
     },
-    result: {
-      required: true,
-      type: String || Number,
-    },
   })
 </script>

src/components/editor/provider/ProviderEditor.vue

@@ -2,7 +2,7 @@
   <teleport to="body">
     <EditorShortcutsSwitcher v-if="ABSOLUTE.shortcuts.switcher" />
     <EditorShortcutsFinder v-else-if="ABSOLUTE.shortcuts.finder" />
-    <EditorEntityComment v-else-if="ABSOLUTE.entity.comment" />
+    <EditorEntityDefaultComment v-else-if="ABSOLUTE.entity.comment" />
     <EditorPagesDrafts v-else-if="ABSOLUTE.pages.drafts" />
     <ProviderLogger v-else-if="ABSOLUTE.logger" />
     <ProviderProjectCreate v-else-if="ABSOLUTE.project.new" />

src/lang/br/editor.ts

@@ -430,4 +430,19 @@ export default {
       longest: 'Maior Conteúdo',
     },
   },
+  addons: {
+    corrector: {
+      convert: 'Converter',
+      removeStartWhitespace: {
+        title: 'Remover Espaços do Início',
+        description:
+          'Todos os espaços em branco no começo do parágrafo serão removidos.',
+      },
+      removeEndWhitespace: {
+        title: 'Remover Espaços do Final',
+        description:
+          'Todos os espaços em branco no fim do parágrafo serão removidos.',
+      },
+    },
+  },
 }

src/lang/en/editor.ts

@@ -429,4 +429,19 @@ export default {
       longest: 'Longest Content',
     },
   },
+  addons: {
+    corrector: {
+      convert: 'Convert',
+      removeStartWhitespace: {
+        title: 'Remove spaces at the beginning',
+        description:
+          'All white space at the beginning of the paragraph will be removed.',
+      },
+      removeEndWhitespace: {
+        title: 'Remove spaces at the end',
+        description:
+          'All white space at the end of the paragraph will be removed.',
+      },
+    },
+  },
 }

src/store/addons.ts

@@ -0,0 +1,50 @@
+import { useRaw } from '@/use/raw'
+import { defineStore } from 'pinia'
+import { AddonsState } from '../types/addons'
+
+export const useAddonsStore = defineStore('addons', {
+  state: (): AddonsState => {
+    return {
+      corrector: {
+        options: [
+          {
+            title: 'editor.addons.corrector.removeStartWhitespace.title',
+            description:
+              'editor.addons.corrector.removeStartWhitespace.description',
+            option: false,
+            html: {
+              before: `${useRaw()
+                .v2()
+                .html()
+                .error()
+                .item(' ')}Lorem ipsum dolor sit amet, consectetur adi...`,
+              after: `${useRaw()
+                .v2()
+                .html()
+                .correct()
+                .item('Lorem')} ipsum dolor sit amet, consectetur adipis...`,
+            },
+          },
+          {
+            title: 'editor.addons.corrector.removeEndWhitespace.title',
+            description:
+              'editor.addons.corrector.removeEndWhitespace.description',
+            option: false,
+            html: {
+              before: `...sit amet, consectetur adi.${useRaw()
+                .v2()
+                .html()
+                .error()
+                .item('  ')}`,
+              after: `...sit amet, consectetur ${useRaw()
+                .v2()
+                .html()
+                .correct()
+                .item('adi.')}`,
+            },
+          },
+        ],
+      },
+    }
+  },
+})

src/types/addons.ts

@@ -0,0 +1,17 @@
+export interface AddonsState {
+  corrector: AddonsCorrector
+}
+
+export interface AddonsCorrector {
+  options: Array<AddonsCorrectorOption>
+}
+
+export interface AddonsCorrectorOption {
+  title: string
+  description: string
+  option: boolean
+  html: {
+    before: string
+    after: string
+  }
+}

src/use/corrector.ts

@@ -0,0 +1,5 @@
+export const useCorrector = () => {
+  const create = () => {}
+
+  return { create }
+}

src/use/raw.ts

@@ -240,7 +240,47 @@ export const useRaw = () => {
         return { open, close, length }
       }
 
-      return { italic, bold }
+      const error = () => {
+        const open = () => {
+          return '<span style="background-color: rgba(255, 130, 130, 0.2);">'
+        }
+
+        const close = () => {
+          return '</span>'
+        }
+
+        const length = () => {
+          return open().length + close().length
+        }
+
+        const item = (content: string) => {
+          return open() + content + close()
+        }
+
+        return { open, close, length, item }
+      }
+
+      const correct = () => {
+        const open = () => {
+          return '<span style="background-color: rgba(150, 255, 150, 0.2);">'
+        }
+
+        const close = () => {
+          return '</span>'
+        }
+
+        const length = () => {
+          return open().length + close().length
+        }
+
+        const item = (content: string) => {
+          return open() + content + close()
+        }
+
+        return { open, close, length, item }
+      }
+
+      return { italic, bold, error, correct }
     }
 
     const style = (entity: Entity, style: any) => {