kritzel-vue 0.3.14 → 0.3.15

package/dist/composables.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Resolves the native Kritzel editor element from a specific Vue template ref.
+ *
+ * Because `<KritzelEditor>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * editor always belongs to that exact component instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { KritzelEditor, getEditorRef } from 'kritzel-vue'
+ * import { ref, type ComponentPublicInstance } from 'vue'
+ *
+ * const editorComponent = ref<ComponentPublicInstance | null>(null)
+ * const editor = getEditorRef(editorComponent)
+ *
+ * async function onReady() {
+ *   await editor.value?.addObject(...)
+ * }
+ * </script>
+ *
+ * <template>
+ *   <KritzelEditor ref="editorComponent" @isReady="onReady" />
+ * </template>
+ * ```
+ */
+export declare function getEditorRef(componentRef: string): import("vue").ComputedRef<HTMLKritzelEditorElement | null>;

package/dist/composables.js

@@ -0,0 +1,41 @@
+import { computed, useTemplateRef, } from "vue";
+/**
+ * Resolves the native Kritzel editor element from a specific Vue template ref.
+ *
+ * Because `<KritzelEditor>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * editor always belongs to that exact component instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { KritzelEditor, getEditorRef } from 'kritzel-vue'
+ * import { ref, type ComponentPublicInstance } from 'vue'
+ *
+ * const editorComponent = ref<ComponentPublicInstance | null>(null)
+ * const editor = getEditorRef(editorComponent)
+ *
+ * async function onReady() {
+ *   await editor.value?.addObject(...)
+ * }
+ * </script>
+ *
+ * <template>
+ *   <KritzelEditor ref="editorComponent" @isReady="onReady" />
+ * </template>
+ * ```
+ */
+export function getEditorRef(componentRef) {
+    const editorComponent = useTemplateRef(componentRef);
+    return computed(() => {
+        var _a;
+        const value = editorComponent.value;
+        if (!value) {
+            return null;
+        }
+        return "$el" in value
+            ? ((_a = value.$el) !== null && _a !== void 0 ? _a : null)
+            : value;
+    });
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './composables';
 export * from './plugin';
 export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
 export type { KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, } from 'kritzel-stencil';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './composables';
 export * from './plugin';
 export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-vue",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "homepage": "https://github.com/kasual1/kritzel#readme",
   "license": "ISC",
   "main": "dist/index.js",
@@ -34,6 +34,6 @@
     "@stencil/vue-output-target": "0.11.8"
   },
   "peerDependencies": {
-    "kritzel-stencil": "^0.3.14"
+    "kritzel-stencil": "^0.3.15"
   }
 }