kritzel-stencil 0.1.81 → 0.1.83

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-BVBITEM5.js');
+var workspace_migrations = require('./workspace.migrations-K5oVASsb.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CFnj_FXt.js');
-var workspace_migrations = require('./workspace.migrations-BVBITEM5.js');
+var workspace_migrations = require('./workspace.migrations-K5oVASsb.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -21354,6 +21354,12 @@ class KritzelObjectMap {
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
+    /**
+     * When true, update() only modifies local state (quadtree + idMap)
+     * without writing to Yjs. Used during drag operations to avoid
+     * redundant full serializations of every child object per frame.
+     */
+    _localOnlyMode = false;
     /**
      * Indicates whether the object map has been initialized and is ready for use.
      * @returns `true` if providers are connected and the map is operational
@@ -21907,6 +21913,25 @@ class KritzelObjectMap {
             this._ydoc.transact(callback, 'local');
         }
     }
+    /**
+     * Executes a callback where all update() calls only modify local state
+     * (quadtree + idMap) without writing to Yjs. This avoids expensive full
+     * serializations during continuous operations like dragging many objects.
+     *
+     * Objects updated inside this callback must be persisted later
+     * (e.g., via a normal update() call at drag end).
+     *
+     * @param callback - The function containing operations to execute locally
+     */
+    withLocalUpdatesOnly(callback) {
+        this._localOnlyMode = true;
+        try {
+            callback();
+        }
+        finally {
+            this._localOnlyMode = false;
+        }
+    }
     /**
      * Loads all objects from the Yjs objects map into the local quadtree.
      * Clears the existing quadtree and repopulates it by deserializing each
@@ -21998,7 +22023,7 @@ class KritzelObjectMap {
         }
         this.quadtree.update(object);
         this._idMap.set(object.id, object);
-        if (this._objectsMap && this.isPersistable(object)) {
+        if (!this._localOnlyMode && this._objectsMap && this.isPersistable(object)) {
             const serialized = object.serialize();
             const origin = options.temporary ? 'temporary' : 'local';
             this._ydoc?.transact(() => {
@@ -28708,7 +28733,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.81';
+const KRITZEL_VERSION = '0.1.83';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 

package/dist/cjs/{workspace.migrations-BVBITEM5.js → workspace.migrations-K5oVASsb.js}

@@ -15250,12 +15250,6 @@ class KritzelText extends KritzelBaseObject {
     isEditing = false;
     editor = null;
     content = null;
-    get _editor() {
-        if (!this._editor) {
-            throw new Error('KritzelShape: editor is not initialized');
-        }
-        return this._editor;
-    }
     _schema = new Schema({
         nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
         marks: schema.spec.marks,
@@ -15267,10 +15261,10 @@ class KritzelText extends KritzelBaseObject {
      * @returns `true` if the editor is empty or contains only whitespace, `false` otherwise.
      */
     get isEmpty() {
-        if (!this._editor) {
+        if (!this.editor) {
             return true;
         }
-        const doc = this._editor.state.doc;
+        const doc = this.editor.state.doc;
         if (doc.content.size === 0) {
             return true;
         }
@@ -15374,7 +15368,7 @@ class KritzelText extends KritzelBaseObject {
         element.style.fontFamily = this.fontFamily;
         element.style.fontSize = `${this.fontSize}pt`;
         element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
-        if (this.isMounted && this.elementRef === element && this._editor.dom.parentElement === element) {
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
                 requestAnimationFrame(() => this.adjustSizeOnInput());
             }
@@ -15384,7 +15378,7 @@ class KritzelText extends KritzelBaseObject {
         this.elementRef.style.whiteSpace = 'pre-wrap';
         this.elementRef.style.wordWrap = 'break-word';
         this.elementRef.innerHTML = '';
-        this.elementRef.appendChild(this._editor.dom);
+        this.elementRef.appendChild(this.editor.dom);
         this.isMounted = true;
         requestAnimationFrame(() => this.adjustSizeOnInput());
     }
@@ -15402,8 +15396,8 @@ class KritzelText extends KritzelBaseObject {
             }),
             editable: () => false,
             dispatchTransaction: transaction => {
-                const newState = this._editor.state.apply(transaction);
-                this._editor.updateState(newState);
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
                 if (transaction.docChanged) {
                     this.content = newState.doc.toJSON();
                     this.adjustSizeOnInput();
@@ -15421,11 +15415,11 @@ class KritzelText extends KritzelBaseObject {
      */
     setContent(content) {
         this.content = content;
-        if (this._editor && content) {
-            const newDoc = this._editor.state.schema.nodeFromJSON(content);
-            const tr = this._editor.state.tr.replaceWith(0, this._editor.state.doc.content.size, newDoc.content);
+        if (this.editor && content) {
+            const newDoc = this.editor.state.schema.nodeFromJSON(content);
+            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
             tr.setMeta('fromRemote', true);
-            this._editor.dispatch(tr);
+            this.editor.dispatch(tr);
         }
     }
     /**
@@ -15490,13 +15484,13 @@ class KritzelText extends KritzelBaseObject {
      * @param coords.y - Y coordinate for cursor placement.
      */
     focus(coords) {
-        if (this._editor) {
-            const doc = this._editor.state.doc;
+        if (this.editor) {
+            const doc = this.editor.state.doc;
             if (coords.x && coords.y && !this.isEmpty) {
-                const pos = this._editor.posAtCoords({ left: coords.x, top: coords.y });
+                const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
                 if (pos) {
-                    this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
-                    this._editor.focus();
+                    this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
+                    this.editor.focus();
                     if (KritzelDevicesHelper.isIOS()) {
                         this.scrollIntoViewOnIOS();
                     }
@@ -15504,8 +15498,8 @@ class KritzelText extends KritzelBaseObject {
                 }
             }
             const end = Math.max(1, doc.content.size - 1);
-            this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, end)));
-            this._editor.focus();
+            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
+            this.editor.focus();
             if (KritzelDevicesHelper.isIOS()) {
                 this.scrollIntoViewOnIOS();
             }
@@ -15517,8 +15511,8 @@ class KritzelText extends KritzelBaseObject {
      */
     scrollIntoViewOnIOS() {
         setTimeout(() => {
-            if (this._editor && this._editor.dom) {
-                this._editor.dom.scrollIntoView({
+            if (this.editor && this.editor.dom) {
+                this.editor.dom.scrollIntoView({
                     behavior: 'smooth',
                     block: 'center',
                     inline: 'nearest',
@@ -15536,7 +15530,7 @@ class KritzelText extends KritzelBaseObject {
         KritzelKeyboardHelper.disableInteractiveWidget();
         this.uneditedObject = this.clone();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-        this._editor.setProps({ editable: () => true });
+        this.editor.setProps({ editable: () => true });
         this.isEditing = true;
         this._core.rerender();
         this.adjustSizeOnInput();
@@ -15552,9 +15546,9 @@ class KritzelText extends KritzelBaseObject {
      */
     save() {
         requestAnimationFrame(() => this.adjustSizeOnInput());
-        this.content = this._editor.state.doc.toJSON();
-        this._editor.setProps({ editable: () => false });
-        this._editor.dom.blur();
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
         this.isEditing = false;
         this._core.store.objects.consolidateTemporaryItems();
         this._core.store.objects.update(this);
@@ -17645,12 +17639,6 @@ class KritzelShape extends KritzelBaseObject {
     get viewBox() {
         return `${this.x} ${this.y} ${this.width} ${this.height}`;
     }
-    get _editor() {
-        if (!this.editor) {
-            throw new Error('KritzelShape: editor is not initialized');
-        }
-        return this.editor;
-    }
     /**
      * Creates a new KritzelShape instance with optional configuration.
      * This constructor initializes the shape with default values that can be
@@ -17758,7 +17746,7 @@ class KritzelShape extends KritzelBaseObject {
         if (element === null || this.isInViewport() === false) {
             return;
         }
-        if (this.isMounted && this.elementRef === element && this._editor.dom.parentElement === element) {
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             return;
         }
         this.elementRef = element;
@@ -17774,7 +17762,7 @@ class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     mountTextEditor(element) {
-        if (element === null || !this.editor) {
+        if (element === null) {
             return;
         }
         element.style.fontFamily = this.fontFamily;
@@ -17805,8 +17793,8 @@ class KritzelShape extends KritzelBaseObject {
             }),
             editable: () => false,
             dispatchTransaction: transaction => {
-                const newState = this._editor.state.apply(transaction);
-                this._editor.updateState(newState);
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
                 if (transaction.docChanged) {
                     this.content = newState.doc.toJSON();
                     if (!transaction.getMeta('fromRemote')) {
@@ -17868,12 +17856,12 @@ class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     focus(coords) {
-        const doc = this._editor.state.doc;
+        const doc = this.editor.state.doc;
         if (coords?.x && coords?.y) {
-            const pos = this._editor.posAtCoords({ left: coords.x, top: coords.y });
+            const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
             if (pos) {
-                this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
-                this._editor.focus();
+                this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
+                this.editor.focus();
                 if (KritzelDevicesHelper.isIOS()) {
                     this.scrollIntoViewOnIOS();
                 }
@@ -17881,8 +17869,8 @@ class KritzelShape extends KritzelBaseObject {
             }
         }
         const end = Math.max(1, doc.content.size - 1);
-        this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, end)));
-        this._editor.focus();
+        this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
+        this.editor.focus();
         if (KritzelDevicesHelper.isIOS()) {
             this.scrollIntoViewOnIOS();
         }
@@ -17920,7 +17908,7 @@ class KritzelShape extends KritzelBaseObject {
         KritzelKeyboardHelper.disableInteractiveWidget();
         this.uneditedObject = this.clone();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('shape'));
-        this._editor.setProps({ editable: () => true });
+        this.editor.setProps({ editable: () => true });
         this.isEditing = true;
         this._core.rerender();
         if (event?.clientX && event?.clientY) {
@@ -17937,9 +17925,9 @@ class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     save() {
-        this.content = this._editor.state.doc.toJSON();
-        this._editor.setProps({ editable: () => false });
-        this._editor.dom.blur();
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
         this.isEditing = false;
         this._core.store.objects.consolidateTemporaryItems();
         this._core.store.objects.update(this);
@@ -18555,6 +18543,10 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     handleColor;
     handleStrokeColor;
     handleSize = 6;
+    /** Timestamp of the last Yjs persist for children during a drag */
+    _lastChildPersistTime = 0;
+    /** Minimum interval (ms) between child Yjs persists during drag */
+    static CHILD_PERSIST_THROTTLE_MS = 100;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -18840,7 +18832,11 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Moves the selection group and all its contained objects by calculating the delta from drag coordinates.
      * Updates anchor points for any lines connected to the moved objects.
-     * Uses a transaction to batch all object updates for performance.
+     *
+     * Child objects are moved locally without writing to Yjs during the drag to avoid
+     * N+1 full serializations per frame, which can overwhelm the WebSocket server.
+     * Children must be persisted at drag end via {@link persistChildren}.
+     *
      * @param startX - The starting x-coordinate of the drag operation (in screen space)
      * @param startY - The starting y-coordinate of the drag operation (in screen space)
      * @param endX - The ending x-coordinate of the drag operation (in screen space)
@@ -18851,21 +18847,51 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.objects.transaction(() => {
+        const now = Date.now();
+        const shouldPersistChildren = now - this._lastChildPersistTime >= KritzelSelectionGroup.CHILD_PERSIST_THROTTLE_MS;
+        if (shouldPersistChildren) {
+            // Periodically persist children to Yjs so remote peers see movement in real-time
+            this._core.store.objects.transaction(() => {
+                this._core.store.objects.update(this);
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+            this._lastChildPersistTime = now;
+        }
+        else {
+            // Between throttle intervals, only persist the selection group itself.
+            // Children are moved locally for smooth local rendering.
             this._core.store.objects.update(this);
-            const children = this.objects;
-            for (const obj of children) {
-                obj.move(startX, startY, endX, endY);
-                // Update any lines that are anchored to this object
-                this._core.anchorManager.updateAnchorsForObject(obj.id);
-            }
-        });
+            this._core.store.objects.withLocalUpdatesOnly(() => {
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+        }
         // Update snapshots
         this.unchangedObjectSnapshots.forEach(snapshot => {
             snapshot.translateX += deltaX;
             snapshot.translateY += deltaY;
         });
     }
+    /**
+     * Persists all child objects to Yjs in a single transaction.
+     * Must be called after a drag operation completes to sync the final
+     * positions of children that were only updated locally during the drag.
+     */
+    persistChildren() {
+        this._core.store.objects.transaction(() => {
+            const children = this.objects;
+            for (const obj of children) {
+                this._core.store.objects.update(obj);
+            }
+        });
+    }
     /**
      * Resizes the selection group and scales all contained objects proportionally.
      * Uses snapshot values to avoid compounding errors during continuous drag operations.
@@ -20379,6 +20405,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;
@@ -20389,6 +20416,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;

package/dist/collection/classes/handlers/move.handler.js

@@ -210,6 +210,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;
@@ -220,6 +221,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;

package/dist/collection/classes/objects/selection-group.class.js

@@ -29,6 +29,10 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     handleColor;
     handleStrokeColor;
     handleSize = 6;
+    /** Timestamp of the last Yjs persist for children during a drag */
+    _lastChildPersistTime = 0;
+    /** Minimum interval (ms) between child Yjs persists during drag */
+    static CHILD_PERSIST_THROTTLE_MS = 100;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -314,7 +318,11 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Moves the selection group and all its contained objects by calculating the delta from drag coordinates.
      * Updates anchor points for any lines connected to the moved objects.
-     * Uses a transaction to batch all object updates for performance.
+     *
+     * Child objects are moved locally without writing to Yjs during the drag to avoid
+     * N+1 full serializations per frame, which can overwhelm the WebSocket server.
+     * Children must be persisted at drag end via {@link persistChildren}.
+     *
      * @param startX - The starting x-coordinate of the drag operation (in screen space)
      * @param startY - The starting y-coordinate of the drag operation (in screen space)
      * @param endX - The ending x-coordinate of the drag operation (in screen space)
@@ -325,21 +333,51 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.objects.transaction(() => {
+        const now = Date.now();
+        const shouldPersistChildren = now - this._lastChildPersistTime >= KritzelSelectionGroup.CHILD_PERSIST_THROTTLE_MS;
+        if (shouldPersistChildren) {
+            // Periodically persist children to Yjs so remote peers see movement in real-time
+            this._core.store.objects.transaction(() => {
+                this._core.store.objects.update(this);
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+            this._lastChildPersistTime = now;
+        }
+        else {
+            // Between throttle intervals, only persist the selection group itself.
+            // Children are moved locally for smooth local rendering.
             this._core.store.objects.update(this);
-            const children = this.objects;
-            for (const obj of children) {
-                obj.move(startX, startY, endX, endY);
-                // Update any lines that are anchored to this object
-                this._core.anchorManager.updateAnchorsForObject(obj.id);
-            }
-        });
+            this._core.store.objects.withLocalUpdatesOnly(() => {
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+        }
         // Update snapshots
         this.unchangedObjectSnapshots.forEach(snapshot => {
             snapshot.translateX += deltaX;
             snapshot.translateY += deltaY;
         });
     }
+    /**
+     * Persists all child objects to Yjs in a single transaction.
+     * Must be called after a drag operation completes to sync the final
+     * positions of children that were only updated locally during the drag.
+     */
+    persistChildren() {
+        this._core.store.objects.transaction(() => {
+            const children = this.objects;
+            for (const obj of children) {
+                this._core.store.objects.update(obj);
+            }
+        });
+    }
     /**
      * Resizes the selection group and scales all contained objects proportionally.
      * Uses snapshot values to avoid compounding errors during continuous drag operations.

package/dist/collection/classes/objects/shape.class.js

@@ -44,12 +44,6 @@ export class KritzelShape extends KritzelBaseObject {
     get viewBox() {
         return `${this.x} ${this.y} ${this.width} ${this.height}`;
     }
-    get _editor() {
-        if (!this.editor) {
-            throw new Error('KritzelShape: editor is not initialized');
-        }
-        return this.editor;
-    }
     /**
      * Creates a new KritzelShape instance with optional configuration.
      * This constructor initializes the shape with default values that can be
@@ -157,7 +151,7 @@ export class KritzelShape extends KritzelBaseObject {
         if (element === null || this.isInViewport() === false) {
             return;
         }
-        if (this.isMounted && this.elementRef === element && this._editor.dom.parentElement === element) {
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             return;
         }
         this.elementRef = element;
@@ -173,7 +167,7 @@ export class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     mountTextEditor(element) {
-        if (element === null || !this.editor) {
+        if (element === null) {
             return;
         }
         element.style.fontFamily = this.fontFamily;
@@ -204,8 +198,8 @@ export class KritzelShape extends KritzelBaseObject {
             }),
             editable: () => false,
             dispatchTransaction: transaction => {
-                const newState = this._editor.state.apply(transaction);
-                this._editor.updateState(newState);
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
                 if (transaction.docChanged) {
                     this.content = newState.doc.toJSON();
                     if (!transaction.getMeta('fromRemote')) {
@@ -267,12 +261,12 @@ export class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     focus(coords) {
-        const doc = this._editor.state.doc;
+        const doc = this.editor.state.doc;
         if (coords?.x && coords?.y) {
-            const pos = this._editor.posAtCoords({ left: coords.x, top: coords.y });
+            const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
             if (pos) {
-                this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
-                this._editor.focus();
+                this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
+                this.editor.focus();
                 if (KritzelDevicesHelper.isIOS()) {
                     this.scrollIntoViewOnIOS();
                 }
@@ -280,8 +274,8 @@ export class KritzelShape extends KritzelBaseObject {
             }
         }
         const end = Math.max(1, doc.content.size - 1);
-        this._editor.dispatch(this._editor.state.tr.setSelection(TextSelection.create(doc, end)));
-        this._editor.focus();
+        this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
+        this.editor.focus();
         if (KritzelDevicesHelper.isIOS()) {
             this.scrollIntoViewOnIOS();
         }
@@ -319,7 +313,7 @@ export class KritzelShape extends KritzelBaseObject {
         KritzelKeyboardHelper.disableInteractiveWidget();
         this.uneditedObject = this.clone();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('shape'));
-        this._editor.setProps({ editable: () => true });
+        this.editor.setProps({ editable: () => true });
         this.isEditing = true;
         this._core.rerender();
         if (event?.clientX && event?.clientY) {
@@ -336,9 +330,9 @@ export class KritzelShape extends KritzelBaseObject {
      * @returns void
      */
     save() {
-        this.content = this._editor.state.doc.toJSON();
-        this._editor.setProps({ editable: () => false });
-        this._editor.dom.blur();
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
         this.isEditing = false;
         this._core.store.objects.consolidateTemporaryItems();
         this._core.store.objects.update(this);