chore(monorepo): handlers in plugins

Author: Novout

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

@@ -15,7 +15,6 @@ import { Calls, usePlugin } from 'better-write-plugin-core'
 import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { onBeforeRouteLeave } from 'vue-router'
-import { useListener } from './listener'
 import { useStorage } from './storage/storage'
 import { useEditorStore } from '@/store/editor'
 import { useAbsoluteStore } from '@/store/absolute'
@@ -32,7 +31,6 @@ export const useEditor = () => {
   const entity = useEntity()
   const local = useLocalStorage()
   const plugin = usePlugin()
-  const listener = useListener()
   const { t } = useI18n()
   const { toggle } = useFullscreen()
   const storage = useStorage()
@@ -86,12 +84,6 @@ export const useEditor = () => {
       { deep: true }
     )
 
-    // window events
-    listener.window().start()
-
-    // editor emitter and events
-    listener.editor().start()
-
     // theme loader
     plugin.emit('plugin-theme-set')
 

packages/better-write-app/src/use/initializer/plugin.ts

@@ -35,6 +35,7 @@ import { useHistoryStore } from '@/store/history'
 import * as VUEUSE_CORE from '@vueuse/core'
 import useEmitter from '../emitter'
 import { useSupabase } from '../storage/supabase'
+import { useCharacters } from '../characters'
 
 export const usePluginInitializer = () => {
   const core = useCore()
@@ -79,6 +80,7 @@ export const usePluginInitializer = () => {
         toast: useToast(),
         breakpoints: useBreakpoint(),
         transformer: useTransformer(),
+        characters: useCharacters(),
         vueuse: {
           core: VUEUSE_CORE,
           integration: {

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

@@ -7,7 +7,7 @@ import {
 } from 'better-write-types'
 import { ASTUtils } from 'better-write-contenteditable-ast'
 
-export const BackgroundColorSet = (
+export const PluginBackgroundColorSet = (
   emitter: PluginTypes.PluginEmitter,
   stores: PluginTypes.PluginStores,
   hooks: PluginTypes.PluginHooks

packages/better-write-plugin-characters/src/color.ts

@@ -0,0 +1,19 @@
+import { PluginTypes } from 'better-write-types'
+
+export const PluginHandlerSet = (
+  emitter: PluginTypes.PluginEmitter,
+  stores: PluginTypes.PluginStores,
+  hooks: PluginTypes.PluginHooks
+) => {
+  emitter.on('call-editor-mounted', () => {
+    // for set color in all entities with character exists
+    hooks.characters.handler()
+
+    hooks.emitter.on(
+      'characters-handler',
+      ({ index, inner }: { index: number; inner: string }) => {
+        hooks.characters.handler(index, inner)
+      }
+    )
+  })
+}

packages/better-write-plugin-characters/src/handler.ts

@@ -1,6 +1,10 @@
 import { PluginTypes } from 'better-write-types'
 import { createPlugin } from 'better-write-plugin-core'
-import { BackgroundColorSet } from './color'
+import { PluginBackgroundColorSet } from './color'
+import { PluginHandlerSet } from './handler'
 
 export const CharactersPlugin = (): PluginTypes.Plugin =>
-  createPlugin({ name: 'characters' }, [BackgroundColorSet])
+  createPlugin({ name: 'characters' }, [
+    PluginHandlerSet,
+    PluginBackgroundColorSet,
+  ])

packages/better-write-plugin-characters/src/index.ts

@@ -0,0 +1,21 @@
+import { PluginTypes } from 'better-write-types'
+
+export const PluginHandlerSet = (
+  emitter: PluginTypes.PluginEmitter,
+  stores: PluginTypes.PluginStores,
+  hooks: PluginTypes.PluginHooks
+) => {
+  emitter.on('call-editor-mounted', () => {
+    hooks.vueuse.core.useEventListener('dragover', (e: DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+
+    hooks.vueuse.core.useEventListener('drop', (event: DragEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      hooks.plugin.emit('plugin-window-drop', event)
+    })
+  })
+}

packages/better-write-plugin-window/src/handler.ts

@@ -1,6 +1,7 @@
 import { PluginTypes } from 'better-write-types'
 import { createPlugin } from 'better-write-plugin-core'
 import { PluginDropSet } from './drop'
+import { PluginHandlerSet } from './handler'
 
 export const WindowPlugin = (): PluginTypes.Plugin =>
-  createPlugin({ name: 'window' }, [PluginDropSet])
+  createPlugin({ name: 'window' }, [PluginHandlerSet, PluginDropSet])

packages/better-write-plugin-window/src/index.ts

@@ -136,6 +136,7 @@ export interface PluginHooks {
   toast: PluginHook
   breakpoints: PluginHook
   transformer: PluginHook
+  characters: PluginHook
   vueuse: {
     core: PluginHook
     integration: {