Fix playground build

editor-js · Dec 26, 2023 · 6fe9d0a · 6fe9d0a
1 parent dd6baa5
commit 6fe9d0a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/model/src/EditorJSModel.ts b/packages/model/src/EditorJSModel.ts
@@ -7,6 +7,11 @@ import { BaseDocumentEvent } from './utils/EventBus/events/BaseEvent.js';
 import type { Constructor } from './utils/types.js';
 import { CaretManager } from './caret/index.js';
 
+export interface EditorJSModel {
+  addEventListener<K extends keyof ModelEvents>(type: EventType.Changed, listener: (event: ModelEvents[K]) => void): void;
+  addEventListener(type: EventType.CaretUpdated, listener: (event: CaretUpdatedEvent) => void): void;
+}
+
 /**
  * EditorJSModel is a wrapper around EditorDocument that prevent access to  internal structures
  */

diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Node, Input } from './components';
-import { EditorDocument, EditorJSModel } from '@editorjs/model';
+import { EditorDocument, EditorJSModel, EventType } from '@editorjs/model';
 // import { data } from '@editorjs/model/dist/mocks/data.js';
 import { ref } from 'vue';
 
@@ -19,13 +19,11 @@ const document = ref(new EditorDocument(model.serialized));
 
 const serialized = ref(model.serialized);
 
-model.addEventListener('changed', () => {
+model.addEventListener(EventType.Changed, () => {
   serialized.value = model.serialized;
   document.value = new EditorDocument(model.serialized);
 });
 
-window.model = model;
-
 </script>
 
 <template>

diff --git a/packages/playground/src/components/Input.vue b/packages/playground/src/components/Input.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { BlockToolAdapter } from '@editorjs/dom-adapters';
-import { CaretUpdatedEvent, createDataKey, type EditorJSModel, type TextIndex, type TextRange } from '@editorjs/model';
+import {
+  CaretUpdatedEvent,
+  createDataKey,
+  type EditorJSModel,
+  EventType,
+  type TextIndex,
+  type TextRange
+} from '@editorjs/model';
 
 const input = ref<HTMLElement | null>(null);
 const index = ref<TextRange | null>(null);
@@ -19,7 +26,7 @@ onMounted(() => {
   if (input.value !== null) {
     blockToolAdapter.attachInput(createDataKey('text'), input.value);
 
-    props.model.addEventListener('caret-updated', (evt: CaretUpdatedEvent) => {
+    props.model.addEventListener(EventType.CaretUpdated, (evt: CaretUpdatedEvent) => {
       index.value = (evt.detail.index as TextIndex)[0];
     });
   }