kritzel-stencil 0.0.141 → 0.0.142

package/dist/cjs/{index-BKstgWru.js → index-SaGfCHX3.js}

@@ -211,18 +211,6 @@ class KritzelBaseObject {
         this.elementRef = element;
         this.isMounted = true;
     }
-    unmount() {
-        if (!this.isMounted) {
-            return;
-        }
-        this.isMounted = false;
-    }
-    remount() {
-        if (!this.isMounted) {
-            return;
-        }
-        this.isMounted = false;
-    }
     generateId() {
         return ObjectHelper.generateUUID();
     }
@@ -268,8 +256,9 @@ class KritzelBaseObject {
         this.rotation = value;
     }
     clone() {
-        const clone = new KritzelBaseObject();
+        const clone = Object.create(Object.getPrototypeOf(this));
         Object.assign(clone, this);
+        clone.id = this.id;
         return clone;
     }
     copy() {
@@ -297,7 +286,7 @@ class KritzelBaseObject {
     isClass(className) {
         return this.__class__ === className;
     }
-    edit() {
+    edit(_event) {
         // This method can be overridden by subclasses to handle edit actions.
     }
     hitTest(_x, _y) {
@@ -312,6 +301,18 @@ class KritzelBaseObject {
         this.translateY = y;
         this._core.store.state.objectsMap.update(this);
     }
+    onExecuteAddCommand(_object) {
+        // This method can be overridden by subclasses to handle actions after an add command is executed.
+    }
+    onUndoAddCommand(_object) {
+        // This method can be overridden by subclasses to handle actions after an add command is undone.
+    }
+    onExecuteUpdateCommand(_updatedProperties) {
+        // This method can be overridden by subclasses to handle actions after an update command is executed.
+    }
+    onUndoUpdateCommand(_previousProperties) {
+        // This method can be overridden by subclasses to handle actions after an update command is undone.
+    }
 }
 
 class KritzelKeyboardHelper {
@@ -367,10 +368,12 @@ class KritzelBaseCommand {
     _core;
     initiator;
     skipHistory;
+    timestamp;
     constructor(core, initiator, skipHistory = false) {
         this._core = core;
         this.initiator = initiator?.constructor?.name ?? 'Unknown';
         this.skipHistory = skipHistory;
+        this.timestamp = new Date();
     }
     execute() {
         throw new Error('Method not implemented.');
@@ -401,6 +404,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.updatedProperties[key];
             }
         }
+        this.object.onExecuteUpdateCommand(this.updatedProperties);
         this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }
@@ -410,6 +414,7 @@ class UpdateObjectCommand extends KritzelBaseCommand {
                 this.object[key] = this.previousProperties[key];
             }
         }
+        this.object.onUndoUpdateCommand(this.previousProperties);
         this._core.store.state.objectsMap.update(this.object);
         this._core.updateObjectInDatabase(this.object);
     }
@@ -7072,27 +7077,6 @@ function createKey(name) {
     keys[name] = 0;
     return name + "$";
 }
-/**
-A key is used to [tag](https://prosemirror.net/docs/ref/#state.PluginSpec.key) plugins in a way
-that makes it possible to find them, given an editor state.
-Assigning a key does mean only one plugin of that type can be
-active in a state.
-*/
-class PluginKey {
-    /**
-    Create a plugin key.
-    */
-    constructor(name = "key") { this.key = createKey(name); }
-    /**
-    Get the active plugin with this key, if any, from an editor
-    state.
-    */
-    get(state) { return state.config.pluginsByKey[this.key]; }
-    /**
-    Get the plugin's state from an editor state.
-    */
-    getState(state) { return state[this.key]; }
-}
 
 const domIndex = function (node) {
     for (var index = 0;; index++) {
@@ -13386,621 +13370,6 @@ function keydownHandler(bindings) {
     };
 }
 
-var GOOD_LEAF_SIZE = 200;
-
-// :: class<T> A rope sequence is a persistent sequence data structure
-// that supports appending, prepending, and slicing without doing a
-// full copy. It is represented as a mostly-balanced tree.
-var RopeSequence = function RopeSequence () {};
-
-RopeSequence.prototype.append = function append (other) {
-  if (!other.length) { return this }
-  other = RopeSequence.from(other);
-
-  return (!this.length && other) ||
-    (other.length < GOOD_LEAF_SIZE && this.leafAppend(other)) ||
-    (this.length < GOOD_LEAF_SIZE && other.leafPrepend(this)) ||
-    this.appendInner(other)
-};
-
-// :: (union<[T], RopeSequence<T>>) → RopeSequence<T>
-// Prepend an array or other rope to this one, returning a new rope.
-RopeSequence.prototype.prepend = function prepend (other) {
-  if (!other.length) { return this }
-  return RopeSequence.from(other).append(this)
-};
-
-RopeSequence.prototype.appendInner = function appendInner (other) {
-  return new Append(this, other)
-};
-
-// :: (?number, ?number) → RopeSequence<T>
-// Create a rope repesenting a sub-sequence of this rope.
-RopeSequence.prototype.slice = function slice (from, to) {
-    if ( from === void 0 ) from = 0;
-    if ( to === void 0 ) to = this.length;
-
-  if (from >= to) { return RopeSequence.empty }
-  return this.sliceInner(Math.max(0, from), Math.min(this.length, to))
-};
-
-// :: (number) → T
-// Retrieve the element at the given position from this rope.
-RopeSequence.prototype.get = function get (i) {
-  if (i < 0 || i >= this.length) { return undefined }
-  return this.getInner(i)
-};
-
-// :: ((element: T, index: number) → ?bool, ?number, ?number)
-// Call the given function for each element between the given
-// indices. This tends to be more efficient than looping over the
-// indices and calling `get`, because it doesn't have to descend the
-// tree for every element.
-RopeSequence.prototype.forEach = function forEach (f, from, to) {
-    if ( from === void 0 ) from = 0;
-    if ( to === void 0 ) to = this.length;
-
-  if (from <= to)
-    { this.forEachInner(f, from, to, 0); }
-  else
-    { this.forEachInvertedInner(f, from, to, 0); }
-};
-
-// :: ((element: T, index: number) → U, ?number, ?number) → [U]
-// Map the given functions over the elements of the rope, producing
-// a flat array.
-RopeSequence.prototype.map = function map (f, from, to) {
-    if ( from === void 0 ) from = 0;
-    if ( to === void 0 ) to = this.length;
-
-  var result = [];
-  this.forEach(function (elt, i) { return result.push(f(elt, i)); }, from, to);
-  return result
-};
-
-// :: (?union<[T], RopeSequence<T>>) → RopeSequence<T>
-// Create a rope representing the given array, or return the rope
-// itself if a rope was given.
-RopeSequence.from = function from (values) {
-  if (values instanceof RopeSequence) { return values }
-  return values && values.length ? new Leaf(values) : RopeSequence.empty
-};
-
-var Leaf = /*@__PURE__*/(function (RopeSequence) {
-  function Leaf(values) {
-    RopeSequence.call(this);
-    this.values = values;
-  }
-
-  if ( RopeSequence ) Leaf.__proto__ = RopeSequence;
-  Leaf.prototype = Object.create( RopeSequence && RopeSequence.prototype );
-  Leaf.prototype.constructor = Leaf;
-
-  var prototypeAccessors = { length: { configurable: true },depth: { configurable: true } };
-
-  Leaf.prototype.flatten = function flatten () {
-    return this.values
-  };
-
-  Leaf.prototype.sliceInner = function sliceInner (from, to) {
-    if (from == 0 && to == this.length) { return this }
-    return new Leaf(this.values.slice(from, to))
-  };
-
-  Leaf.prototype.getInner = function getInner (i) {
-    return this.values[i]
-  };
-
-  Leaf.prototype.forEachInner = function forEachInner (f, from, to, start) {
-    for (var i = from; i < to; i++)
-      { if (f(this.values[i], start + i) === false) { return false } }
-  };
-
-  Leaf.prototype.forEachInvertedInner = function forEachInvertedInner (f, from, to, start) {
-    for (var i = from - 1; i >= to; i--)
-      { if (f(this.values[i], start + i) === false) { return false } }
-  };
-
-  Leaf.prototype.leafAppend = function leafAppend (other) {
-    if (this.length + other.length <= GOOD_LEAF_SIZE)
-      { return new Leaf(this.values.concat(other.flatten())) }
-  };
-
-  Leaf.prototype.leafPrepend = function leafPrepend (other) {
-    if (this.length + other.length <= GOOD_LEAF_SIZE)
-      { return new Leaf(other.flatten().concat(this.values)) }
-  };
-
-  prototypeAccessors.length.get = function () { return this.values.length };
-
-  prototypeAccessors.depth.get = function () { return 0 };
-
-  Object.defineProperties( Leaf.prototype, prototypeAccessors );
-
-  return Leaf;
-}(RopeSequence));
-
-// :: RopeSequence
-// The empty rope sequence.
-RopeSequence.empty = new Leaf([]);
-
-var Append = /*@__PURE__*/(function (RopeSequence) {
-  function Append(left, right) {
-    RopeSequence.call(this);
-    this.left = left;
-    this.right = right;
-    this.length = left.length + right.length;
-    this.depth = Math.max(left.depth, right.depth) + 1;
-  }
-
-  if ( RopeSequence ) Append.__proto__ = RopeSequence;
-  Append.prototype = Object.create( RopeSequence && RopeSequence.prototype );
-  Append.prototype.constructor = Append;
-
-  Append.prototype.flatten = function flatten () {
-    return this.left.flatten().concat(this.right.flatten())
-  };
-
-  Append.prototype.getInner = function getInner (i) {
-    return i < this.left.length ? this.left.get(i) : this.right.get(i - this.left.length)
-  };
-
-  Append.prototype.forEachInner = function forEachInner (f, from, to, start) {
-    var leftLen = this.left.length;
-    if (from < leftLen &&
-        this.left.forEachInner(f, from, Math.min(to, leftLen), start) === false)
-      { return false }
-    if (to > leftLen &&
-        this.right.forEachInner(f, Math.max(from - leftLen, 0), Math.min(this.length, to) - leftLen, start + leftLen) === false)
-      { return false }
-  };
-
-  Append.prototype.forEachInvertedInner = function forEachInvertedInner (f, from, to, start) {
-    var leftLen = this.left.length;
-    if (from > leftLen &&
-        this.right.forEachInvertedInner(f, from - leftLen, Math.max(to, leftLen) - leftLen, start + leftLen) === false)
-      { return false }
-    if (to < leftLen &&
-        this.left.forEachInvertedInner(f, Math.min(from, leftLen), to, start) === false)
-      { return false }
-  };
-
-  Append.prototype.sliceInner = function sliceInner (from, to) {
-    if (from == 0 && to == this.length) { return this }
-    var leftLen = this.left.length;
-    if (to <= leftLen) { return this.left.slice(from, to) }
-    if (from >= leftLen) { return this.right.slice(from - leftLen, to - leftLen) }
-    return this.left.slice(from, leftLen).append(this.right.slice(0, to - leftLen))
-  };
-
-  Append.prototype.leafAppend = function leafAppend (other) {
-    var inner = this.right.leafAppend(other);
-    if (inner) { return new Append(this.left, inner) }
-  };
-
-  Append.prototype.leafPrepend = function leafPrepend (other) {
-    var inner = this.left.leafPrepend(other);
-    if (inner) { return new Append(inner, this.right) }
-  };
-
-  Append.prototype.appendInner = function appendInner (other) {
-    if (this.left.depth >= Math.max(this.right.depth, other.depth) + 1)
-      { return new Append(this.left, new Append(this.right, other)) }
-    return new Append(this, other)
-  };
-
-  return Append;
-}(RopeSequence));
-
-// ProseMirror's history isn't simply a way to roll back to a previous
-// state, because ProseMirror supports applying changes without adding
-// them to the history (for example during collaboration).
-//
-// To this end, each 'Branch' (one for the undo history and one for
-// the redo history) keeps an array of 'Items', which can optionally
-// hold a step (an actual undoable change), and always hold a position
-// map (which is needed to move changes below them to apply to the
-// current document).
-//
-// An item that has both a step and a selection bookmark is the start
-// of an 'event' — a group of changes that will be undone or redone at
-// once. (It stores only the bookmark, since that way we don't have to
-// provide a document until the selection is actually applied, which
-// is useful when compressing.)
-// Used to schedule history compression
-const max_empty_items = 500;
-class Branch {
-    constructor(items, eventCount) {
-        this.items = items;
-        this.eventCount = eventCount;
-    }
-    // Pop the latest event off the branch's history and apply it
-    // to a document transform.
-    popEvent(state, preserveItems) {
-        if (this.eventCount == 0)
-            return null;
-        let end = this.items.length;
-        for (;; end--) {
-            let next = this.items.get(end - 1);
-            if (next.selection) {
-                --end;
-                break;
-            }
-        }
-        let remap, mapFrom;
-        if (preserveItems) {
-            remap = this.remapping(end, this.items.length);
-            mapFrom = remap.maps.length;
-        }
-        let transform = state.tr;
-        let selection, remaining;
-        let addAfter = [], addBefore = [];
-        this.items.forEach((item, i) => {
-            if (!item.step) {
-                if (!remap) {
-                    remap = this.remapping(end, i + 1);
-                    mapFrom = remap.maps.length;
-                }
-                mapFrom--;
-                addBefore.push(item);
-                return;
-            }
-            if (remap) {
-                addBefore.push(new Item(item.map));
-                let step = item.step.map(remap.slice(mapFrom)), map;
-                if (step && transform.maybeStep(step).doc) {
-                    map = transform.mapping.maps[transform.mapping.maps.length - 1];
-                    addAfter.push(new Item(map, undefined, undefined, addAfter.length + addBefore.length));
-                }
-                mapFrom--;
-                if (map)
-                    remap.appendMap(map, mapFrom);
-            }
-            else {
-                transform.maybeStep(item.step);
-            }
-            if (item.selection) {
-                selection = remap ? item.selection.map(remap.slice(mapFrom)) : item.selection;
-                remaining = new Branch(this.items.slice(0, end).append(addBefore.reverse().concat(addAfter)), this.eventCount - 1);
-                return false;
-            }
-        }, this.items.length, 0);
-        return { remaining: remaining, transform, selection: selection };
-    }
-    // Create a new branch with the given transform added.
-    addTransform(transform, selection, histOptions, preserveItems) {
-        let newItems = [], eventCount = this.eventCount;
-        let oldItems = this.items, lastItem = !preserveItems && oldItems.length ? oldItems.get(oldItems.length - 1) : null;
-        for (let i = 0; i < transform.steps.length; i++) {
-            let step = transform.steps[i].invert(transform.docs[i]);
-            let item = new Item(transform.mapping.maps[i], step, selection), merged;
-            if (merged = lastItem && lastItem.merge(item)) {
-                item = merged;
-                if (i)
-                    newItems.pop();
-                else
-                    oldItems = oldItems.slice(0, oldItems.length - 1);
-            }
-            newItems.push(item);
-            if (selection) {
-                eventCount++;
-                selection = undefined;
-            }
-            if (!preserveItems)
-                lastItem = item;
-        }
-        let overflow = eventCount - histOptions.depth;
-        if (overflow > DEPTH_OVERFLOW) {
-            oldItems = cutOffEvents(oldItems, overflow);
-            eventCount -= overflow;
-        }
-        return new Branch(oldItems.append(newItems), eventCount);
-    }
-    remapping(from, to) {
-        let maps = new Mapping;
-        this.items.forEach((item, i) => {
-            let mirrorPos = item.mirrorOffset != null && i - item.mirrorOffset >= from
-                ? maps.maps.length - item.mirrorOffset : undefined;
-            maps.appendMap(item.map, mirrorPos);
-        }, from, to);
-        return maps;
-    }
-    addMaps(array) {
-        if (this.eventCount == 0)
-            return this;
-        return new Branch(this.items.append(array.map(map => new Item(map))), this.eventCount);
-    }
-    // When the collab module receives remote changes, the history has
-    // to know about those, so that it can adjust the steps that were
-    // rebased on top of the remote changes, and include the position
-    // maps for the remote changes in its array of items.
-    rebased(rebasedTransform, rebasedCount) {
-        if (!this.eventCount)
-            return this;
-        let rebasedItems = [], start = Math.max(0, this.items.length - rebasedCount);
-        let mapping = rebasedTransform.mapping;
-        let newUntil = rebasedTransform.steps.length;
-        let eventCount = this.eventCount;
-        this.items.forEach(item => { if (item.selection)
-            eventCount--; }, start);
-        let iRebased = rebasedCount;
-        this.items.forEach(item => {
-            let pos = mapping.getMirror(--iRebased);
-            if (pos == null)
-                return;
-            newUntil = Math.min(newUntil, pos);
-            let map = mapping.maps[pos];
-            if (item.step) {
-                let step = rebasedTransform.steps[pos].invert(rebasedTransform.docs[pos]);
-                let selection = item.selection && item.selection.map(mapping.slice(iRebased + 1, pos));
-                if (selection)
-                    eventCount++;
-                rebasedItems.push(new Item(map, step, selection));
-            }
-            else {
-                rebasedItems.push(new Item(map));
-            }
-        }, start);
-        let newMaps = [];
-        for (let i = rebasedCount; i < newUntil; i++)
-            newMaps.push(new Item(mapping.maps[i]));
-        let items = this.items.slice(0, start).append(newMaps).append(rebasedItems);
-        let branch = new Branch(items, eventCount);
-        if (branch.emptyItemCount() > max_empty_items)
-            branch = branch.compress(this.items.length - rebasedItems.length);
-        return branch;
-    }
-    emptyItemCount() {
-        let count = 0;
-        this.items.forEach(item => { if (!item.step)
-            count++; });
-        return count;
-    }
-    // Compressing a branch means rewriting it to push the air (map-only
-    // items) out. During collaboration, these naturally accumulate
-    // because each remote change adds one. The `upto` argument is used
-    // to ensure that only the items below a given level are compressed,
-    // because `rebased` relies on a clean, untouched set of items in
-    // order to associate old items with rebased steps.
-    compress(upto = this.items.length) {
-        let remap = this.remapping(0, upto), mapFrom = remap.maps.length;
-        let items = [], events = 0;
-        this.items.forEach((item, i) => {
-            if (i >= upto) {
-                items.push(item);
-                if (item.selection)
-                    events++;
-            }
-            else if (item.step) {
-                let step = item.step.map(remap.slice(mapFrom)), map = step && step.getMap();
-                mapFrom--;
-                if (map)
-                    remap.appendMap(map, mapFrom);
-                if (step) {
-                    let selection = item.selection && item.selection.map(remap.slice(mapFrom));
-                    if (selection)
-                        events++;
-                    let newItem = new Item(map.invert(), step, selection), merged, last = items.length - 1;
-                    if (merged = items.length && items[last].merge(newItem))
-                        items[last] = merged;
-                    else
-                        items.push(newItem);
-                }
-            }
-            else if (item.map) {
-                mapFrom--;
-            }
-        }, this.items.length, 0);
-        return new Branch(RopeSequence.from(items.reverse()), events);
-    }
-}
-Branch.empty = new Branch(RopeSequence.empty, 0);
-function cutOffEvents(items, n) {
-    let cutPoint;
-    items.forEach((item, i) => {
-        if (item.selection && (n-- == 0)) {
-            cutPoint = i;
-            return false;
-        }
-    });
-    return items.slice(cutPoint);
-}
-class Item {
-    constructor(
-    // The (forward) step map for this item.
-    map, 
-    // The inverted step
-    step, 
-    // If this is non-null, this item is the start of a group, and
-    // this selection is the starting selection for the group (the one
-    // that was active before the first step was applied)
-    selection, 
-    // If this item is the inverse of a previous mapping on the stack,
-    // this points at the inverse's offset
-    mirrorOffset) {
-        this.map = map;
-        this.step = step;
-        this.selection = selection;
-        this.mirrorOffset = mirrorOffset;
-    }
-    merge(other) {
-        if (this.step && other.step && !other.selection) {
-            let step = other.step.merge(this.step);
-            if (step)
-                return new Item(step.getMap().invert(), step, this.selection);
-        }
-    }
-}
-// The value of the state field that tracks undo/redo history for that
-// state. Will be stored in the plugin state when the history plugin
-// is active.
-class HistoryState {
-    constructor(done, undone, prevRanges, prevTime, prevComposition) {
-        this.done = done;
-        this.undone = undone;
-        this.prevRanges = prevRanges;
-        this.prevTime = prevTime;
-        this.prevComposition = prevComposition;
-    }
-}
-const DEPTH_OVERFLOW = 20;
-// Record a transformation in undo history.
-function applyTransaction(history, state, tr, options) {
-    let historyTr = tr.getMeta(historyKey), rebased;
-    if (historyTr)
-        return historyTr.historyState;
-    if (tr.getMeta(closeHistoryKey))
-        history = new HistoryState(history.done, history.undone, null, 0, -1);
-    let appended = tr.getMeta("appendedTransaction");
-    if (tr.steps.length == 0) {
-        return history;
-    }
-    else if (appended && appended.getMeta(historyKey)) {
-        if (appended.getMeta(historyKey).redo)
-            return new HistoryState(history.done.addTransform(tr, undefined, options, mustPreserveItems(state)), history.undone, rangesFor(tr.mapping.maps), history.prevTime, history.prevComposition);
-        else
-            return new HistoryState(history.done, history.undone.addTransform(tr, undefined, options, mustPreserveItems(state)), null, history.prevTime, history.prevComposition);
-    }
-    else if (tr.getMeta("addToHistory") !== false && !(appended && appended.getMeta("addToHistory") === false)) {
-        // Group transforms that occur in quick succession into one event.
-        let composition = tr.getMeta("composition");
-        let newGroup = history.prevTime == 0 ||
-            (!appended && history.prevComposition != composition &&
-                (history.prevTime < (tr.time || 0) - options.newGroupDelay || !isAdjacentTo(tr, history.prevRanges)));
-        let prevRanges = appended ? mapRanges(history.prevRanges, tr.mapping) : rangesFor(tr.mapping.maps);
-        return new HistoryState(history.done.addTransform(tr, newGroup ? state.selection.getBookmark() : undefined, options, mustPreserveItems(state)), Branch.empty, prevRanges, tr.time, composition == null ? history.prevComposition : composition);
-    }
-    else if (rebased = tr.getMeta("rebased")) {
-        // Used by the collab module to tell the history that some of its
-        // content has been rebased.
-        return new HistoryState(history.done.rebased(tr, rebased), history.undone.rebased(tr, rebased), mapRanges(history.prevRanges, tr.mapping), history.prevTime, history.prevComposition);
-    }
-    else {
-        return new HistoryState(history.done.addMaps(tr.mapping.maps), history.undone.addMaps(tr.mapping.maps), mapRanges(history.prevRanges, tr.mapping), history.prevTime, history.prevComposition);
-    }
-}
-function isAdjacentTo(transform, prevRanges) {
-    if (!prevRanges)
-        return false;
-    if (!transform.docChanged)
-        return true;
-    let adjacent = false;
-    transform.mapping.maps[0].forEach((start, end) => {
-        for (let i = 0; i < prevRanges.length; i += 2)
-            if (start <= prevRanges[i + 1] && end >= prevRanges[i])
-                adjacent = true;
-    });
-    return adjacent;
-}
-function rangesFor(maps) {
-    let result = [];
-    for (let i = maps.length - 1; i >= 0 && result.length == 0; i--)
-        maps[i].forEach((_from, _to, from, to) => result.push(from, to));
-    return result;
-}
-function mapRanges(ranges, mapping) {
-    if (!ranges)
-        return null;
-    let result = [];
-    for (let i = 0; i < ranges.length; i += 2) {
-        let from = mapping.map(ranges[i], 1), to = mapping.map(ranges[i + 1], -1);
-        if (from <= to)
-            result.push(from, to);
-    }
-    return result;
-}
-// Apply the latest event from one branch to the document and shift the event
-// onto the other branch.
-function histTransaction(history, state, redo) {
-    let preserveItems = mustPreserveItems(state);
-    let histOptions = historyKey.get(state).spec.config;
-    let pop = (redo ? history.undone : history.done).popEvent(state, preserveItems);
-    if (!pop)
-        return null;
-    let selection = pop.selection.resolve(pop.transform.doc);
-    let added = (redo ? history.done : history.undone).addTransform(pop.transform, state.selection.getBookmark(), histOptions, preserveItems);
-    let newHist = new HistoryState(redo ? added : pop.remaining, redo ? pop.remaining : added, null, 0, -1);
-    return pop.transform.setSelection(selection).setMeta(historyKey, { redo, historyState: newHist });
-}
-let cachedPreserveItems = false, cachedPreserveItemsPlugins = null;
-// Check whether any plugin in the given state has a
-// `historyPreserveItems` property in its spec, in which case we must
-// preserve steps exactly as they came in, so that they can be
-// rebased.
-function mustPreserveItems(state) {
-    let plugins = state.plugins;
-    if (cachedPreserveItemsPlugins != plugins) {
-        cachedPreserveItems = false;
-        cachedPreserveItemsPlugins = plugins;
-        for (let i = 0; i < plugins.length; i++)
-            if (plugins[i].spec.historyPreserveItems) {
-                cachedPreserveItems = true;
-                break;
-            }
-    }
-    return cachedPreserveItems;
-}
-const historyKey = new PluginKey("history");
-const closeHistoryKey = new PluginKey("closeHistory");
-/**
-Returns a plugin that enables the undo history for an editor. The
-plugin will track undo and redo stacks, which can be used with the
-[`undo`](https://prosemirror.net/docs/ref/#history.undo) and [`redo`](https://prosemirror.net/docs/ref/#history.redo) commands.
-
-You can set an `"addToHistory"` [metadata
-property](https://prosemirror.net/docs/ref/#state.Transaction.setMeta) of `false` on a transaction
-to prevent it from being rolled back by undo.
-*/
-function history(config = {}) {
-    config = { depth: config.depth || 100,
-        newGroupDelay: config.newGroupDelay || 500 };
-    return new Plugin({
-        key: historyKey,
-        state: {
-            init() {
-                return new HistoryState(Branch.empty, Branch.empty, null, 0, -1);
-            },
-            apply(tr, hist, state) {
-                return applyTransaction(hist, state, tr, config);
-            }
-        },
-        config,
-        props: {
-            handleDOMEvents: {
-                beforeinput(view, e) {
-                    let inputType = e.inputType;
-                    let command = inputType == "historyUndo" ? undo : inputType == "historyRedo" ? redo : null;
-                    if (!command)
-                        return false;
-                    e.preventDefault();
-                    return command(view.state, view.dispatch);
-                }
-            }
-        }
-    });
-}
-function buildCommand(redo, scroll) {
-    return (state, dispatch) => {
-        let hist = historyKey.getState(state);
-        if (!hist || (redo ? hist.undone : hist.done).eventCount == 0)
-            return false;
-        if (dispatch) {
-            let tr = histTransaction(hist, state, redo);
-            if (tr)
-                dispatch(scroll ? tr.scrollIntoView() : tr);
-        }
-        return true;
-    };
-}
-/**
-A command function that undoes the last change, if any.
-*/
-const undo = buildCommand(false, true);
-/**
-A command function that redoes the last undone change, if any.
-*/
-const redo = buildCommand(true, true);
-
 /**
 Delete the selection, if there is one.
 */
@@ -14508,6 +13877,23 @@ Depending on the detected platform, this will hold
 */
 const baseKeymap = mac ? macBaseKeymap : pcBaseKeymap;
 
+class AddObjectCommand extends KritzelBaseCommand {
+    object;
+    constructor(core, initiator, object, skipHistory = false) {
+        super(core, initiator, skipHistory);
+        this.object = object;
+    }
+    execute() {
+        this._core.store.state.objectsMap.insert(this.object);
+        this._core.addObjectToDatabase(this.object);
+    }
+    undo() {
+        this.object.isMounted = false;
+        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
+        this._core.deleteObjectFromDatabase(this.object.id);
+    }
+}
+
 class KritzelText extends KritzelBaseObject {
     __class__ = 'KritzelText';
     fontFamily = 'Arial';
@@ -14522,19 +13908,21 @@ class KritzelText extends KritzelBaseObject {
     isEditable = true;
     isEditing = false;
     editor = null;
-    content = null; // Store ProseMirror document content
+    content = null;
+    _schema = new Schema({
+        nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+        marks: schema.spec.marks,
+    });
+    uneditedObject = null;
     rows = 1;
     get isEmpty() {
         if (!this.editor) {
             return true;
         }
         const doc = this.editor.state.doc;
-        // Check if document is empty (only has empty paragraph(s))
-        // A truly empty doc has size of 4: start of doc (1) + paragraph (1) + end of paragraph (1) + end of doc (1)
         if (doc.content.size === 0) {
             return true;
         }
-        // Check if all content is whitespace
         const text = doc.textContent.trim();
         return text.length === 0;
     }
@@ -14569,49 +13957,66 @@ class KritzelText extends KritzelBaseObject {
         object.scaleFactor = 1;
         object.scale = object._core.store.state.scale;
         object.zIndex = core.store.currentZIndex;
+        object.editor = object.createEditor();
         return object;
     }
     mount(element) {
-        if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
+        if (element === null || this.isInViewport() === false) {
+            return;
+        }
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             return;
         }
-        console.log('Mounting text object', this.id);
         this.elementRef = element;
-        setTimeout(() => {
-            const mySchema = new Schema({
-                nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
-                marks: schema.spec.marks,
-            });
-            const doc = this.content
-                ? mySchema.nodeFromJSON(this.content)
-                : mySchema.node('doc', null, [mySchema.node('paragraph')]);
-            this.editor = new EditorView(this.elementRef, {
-                state: EditorState.create({
-                    doc: doc,
-                    plugins: [history(), keymap({ 'Mod-z': undo, 'Mod-y': redo }), keymap(baseKeymap)],
-                }),
-                editable: () => false, // Start disabled, enable in edit()
-                dispatchTransaction: (transaction) => {
-                    const newState = this.editor.state.apply(transaction);
-                    this.editor.updateState(newState);
-                    // Adjust size after content changes
-                    this.adjustSizeOnInput();
-                },
-            });
-        }, 0);
+        this.elementRef.style.fontFamily = this.fontFamily;
+        this.elementRef.style.fontSize = `${this.fontSize}pt`;
+        this.elementRef.style.color = this.fontColor;
+        this.elementRef.style.whiteSpace = 'pre-wrap';
+        this.elementRef.style.wordWrap = 'break-word';
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.editor.dom);
         this.isMounted = true;
+        requestAnimationFrame(() => this.adjustSizeOnInput());
+    }
+    createEditor() {
+        const doc = this._schema.node('doc', null, [this._schema.node('paragraph')]);
+        return new EditorView(null, {
+            state: EditorState.create({
+                doc: doc,
+                plugins: [keymap(baseKeymap)],
+            }),
+            editable: () => false,
+            dispatchTransaction: transaction => {
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
+                this.adjustSizeOnInput();
+                this._core.store.state.objectsMap.update(this);
+                this._core.rerender();
+            },
+        });
+    }
+    setContent(content) {
+        this.content = content;
+        if (this.editor) {
+            const newDoc = this.editor.state.schema.nodeFromJSON(content);
+            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
+            this.editor.dispatch(tr);
+        }
     }
     adjustSizeOnInput() {
         const element = this.elementRef;
-        if (element) {
+        if (element && this.isMounted && element.scrollWidth > 0) {
             const newWidth = element.scrollWidth;
             const newHeight = element.scrollHeight;
             if (this.width !== newWidth * this.scaleFactor || this.height !== newHeight * this.scaleFactor) {
                 this.width = newWidth * this.scaleFactor;
                 this.height = newHeight * this.scaleFactor;
-                this._core.rerender();
             }
         }
+        if (this._core) {
+            this._core.store.state.objectsMap.update(this);
+            this._core.rerender();
+        }
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -14627,38 +14032,56 @@ class KritzelText extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
     }
-    focus() {
+    focus(coords) {
         if (this.editor) {
-            const end = this.editor.state.doc.content.size;
-            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(this.editor.state.doc, end)));
+            const doc = this.editor.state.doc;
+            if (coords) {
+                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();
+                    return;
+                }
+            }
+            const end = Math.max(1, doc.content.size - 1);
+            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
             this.editor.focus();
         }
     }
-    edit() {
-        console.log('Editing text object', this.id);
+    edit(event) {
         KritzelKeyboardHelper.disableInteractiveWidget();
+        this.uneditedObject = this.clone();
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
         this._core.store.state.activeText = this;
-        this._core.clearSelection();
-        // Enable the ProseMirror editor
         if (this.editor) {
             this.editor.setProps({ editable: () => true });
         }
         this.isEditing = true;
-        this.focus();
+        if (event) {
+            this.focus({ x: event.clientX, y: event.clientY });
+        }
+        else {
+            this.focus();
+        }
+        this._core.rerender();
+        requestAnimationFrame(() => this.adjustSizeOnInput());
         KritzelKeyboardHelper.enableInteractiveWidget();
     }
     save() {
-        console.log('Saving text object', this.id);
-        // Store the current editor content
-        if (this.editor) {
-            this.content = this.editor.state.doc.toJSON();
-            // Disable the ProseMirror editor
-            this.editor.setProps({ editable: () => false });
-            this.editor.dom.blur(); // Remove focus
-        }
+        requestAnimationFrame(() => this.adjustSizeOnInput());
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
         this.isEditing = false;
-        this._core.history.executeCommand(new UpdateObjectCommand(this._core, this, this, this));
+        let saveCommand;
+        if (this.isNew) {
+            this.isNew = false;
+            saveCommand = new AddObjectCommand(this._core, this, this);
+        }
+        else {
+            saveCommand = new UpdateObjectCommand(this._core, this, this.uneditedObject, { ...this });
+        }
+        this._core.commandManager.executeCommand(saveCommand);
     }
     handlePointerDown(event) {
         if (!this.isEditing) {
@@ -14678,14 +14101,37 @@ class KritzelText extends KritzelBaseObject {
         }
         event.stopPropagation();
     }
+    copy() {
+        const copiedObject = super.copy();
+        copiedObject.editor = copiedObject.createEditor();
+        if (this.content) {
+            copiedObject.setContent(this.content);
+        }
+        return copiedObject;
+    }
     serialize() {
-        const { _core, _elementRef, element, totalWidth, totalHeight, editor, ...remainingProps } = this;
+        const { _core, _elementRef, _schema, element, totalWidth, totalHeight, editor, uneditedObject, ...remainingProps } = this;
         const clonedProps = structuredClone(remainingProps);
         if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
             clonedProps.element = element.cloneNode(true);
         }
         return clonedProps;
     }
+    deserialize(object) {
+        super.deserialize(object);
+        this.setContent(object.content);
+        return this;
+    }
+    onExecuteUpdateCommand(updatedProperties) {
+        if ('content' in updatedProperties) {
+            this.setContent(updatedProperties.content);
+        }
+    }
+    onUndoUpdateCommand(previousProperties) {
+        if ('content' in previousProperties && this.editor) {
+            this.setContent(previousProperties.content);
+        }
+    }
 }
 
 var cjs = {};
@@ -15089,22 +14535,6 @@ class KritzelEventHelper {
     }
 }
 
-class AddObjectCommand extends KritzelBaseCommand {
-    object;
-    constructor(core, initiator, object, skipHistory = false) {
-        super(core, initiator, skipHistory);
-        this.object = object;
-    }
-    execute() {
-        this._core.store.state.objectsMap.insert(this.object);
-        this._core.addObjectToDatabase(this.object);
-    }
-    undo() {
-        this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._core.deleteObjectFromDatabase(this.object.id);
-    }
-}
-
 class KritzelBaseTool {
     __class__ = this.constructor.name;
     name = 'base-tool';
@@ -15237,7 +14667,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     const currentPath = this._core.store.state.currentPath;
                     currentPath.zIndex = this._core.store.currentZIndex;
                     this._core.store.state.currentPath = currentPath;
-                    this._core.history.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
+                    this._core.commandManager.executeCommand(new AddObjectCommand(this._core, this, this._core.store.state.currentPath));
                 }
                 this._core.store.state.currentPath = undefined;
             }
@@ -15249,7 +14679,7 @@ class KritzelBrushTool extends KritzelBaseTool {
                     const currentPath = this._core.store.state.currentPath;
                     currentPath.zIndex = this._core.store.currentZIndex;
                     this._core.store.state.currentPath = currentPath;
-                    this._core.history.executeCommand(new AddObjectCommand(this._core, this, currentPath));
+                    this._core.commandManager.executeCommand(new AddObjectCommand(this._core, this, currentPath));
                 }
                 this._core.store.state.currentPath = undefined;
                 this._core.rerender();
@@ -15272,59 +14702,6 @@ class BatchCommand extends KritzelBaseCommand {
     }
 }
 
-class KritzelCustomElement extends KritzelBaseObject {
-    __class__ = 'KritzelCustomElement';
-    element;
-    isInteractive = true;
-    constructor(config) {
-        super();
-        if (config) {
-            this.translateX = config.translateX || 0;
-            this.translateY = config.translateY || 0;
-            this.scale = config.scale || 1;
-            this.element = config.element;
-            this.height = config.height || 0;
-            this.width = config.width || 0;
-        }
-    }
-    static create(core, config) {
-        const object = new KritzelCustomElement(config);
-        object._core = core;
-        object.id = object.generateId();
-        object.workspaceId = core.store.state.activeWorkspace.id;
-        return object;
-    }
-    mount(element) {
-        if (this.isMounted) {
-            return;
-        }
-        this.elementRef = element;
-        this.isMounted = true;
-        this.elementRef.appendChild(this.element);
-    }
-    resize(x, y, width, height) {
-        if (width <= 1 || height <= 1) {
-            return;
-        }
-        this.width = width;
-        this.height = height;
-        this.translateX = x;
-        this.translateY = y;
-        if (this.element) {
-            this.element.style.width = `${width}px`;
-            this.element.style.height = `${height}px`;
-        }
-    }
-    copy() {
-        const copiedObject = Object.create(Object.getPrototypeOf(this));
-        Object.assign(copiedObject, this);
-        copiedObject.id = this.generateId();
-        copiedObject.isMounted = false;
-        copiedObject.element = this.element.cloneNode(true);
-        return copiedObject;
-    }
-}
-
 class RemoveObjectCommand extends KritzelBaseCommand {
     object;
     constructor(core, initiator, object, skipHistory = false) {
@@ -15332,13 +14709,12 @@ class RemoveObjectCommand extends KritzelBaseCommand {
         this.object = object;
     }
     execute() {
+        this.object.isMounted = false;
         this._core.store.state.objectsMap.remove(object => object.id === this.object.id);
-        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._core.deleteObjectFromDatabase(this.object.id);
     }
     undo() {
         this._core.store.state.objectsMap.insert(this.object);
-        this._core.store.state.objectsMap.filter(object => object instanceof KritzelCustomElement).forEach(object => object.remount());
         this._core.addObjectToDatabase(this.object);
     }
 }
@@ -15401,7 +14777,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                     return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
+                    this._core.commandManager.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
                 this._core.store.state.isErasing = false;
             }
@@ -15416,7 +14792,7 @@ class KritzelEraserTool extends KritzelBaseTool {
                     return new RemoveObjectCommand(this._core, this, object);
                 });
                 if (removeCommands.length > 0) {
-                    this._core.history.executeCommand(new BatchCommand(this._core, this, removeCommands));
+                    this._core.commandManager.executeCommand(new BatchCommand(this._core, this, removeCommands));
                 }
                 this._core.store.state.isErasing = false;
             }
@@ -15567,10 +14943,15 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const clientY = event.clientY - this._core.store.offsetY;
                 this.endX = clientX;
                 this.endY = clientY;
-                this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
-                this.dragStartX = clientX;
-                this.dragStartY = clientY;
-                this.hasMoved = true;
+                const moveDeltaX = Math.abs(clientX - this.startX);
+                const moveDeltaY = Math.abs(clientY - this.startY);
+                const moveThreshold = 5;
+                if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    this._core.store.state.selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
+                    this.dragStartX = clientX;
+                    this.dragStartY = clientY;
+                    this.hasMoved = true;
+                }
             }
         }
         if (event.pointerType === 'touch') {
@@ -15605,7 +14986,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
-                    this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
+                    this._core.commandManager.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
                     this._core.store.state.hasObjectsChanged = true;
                 }
             }
@@ -15614,7 +14995,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
-                    this._core.history.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
+                    this._core.commandManager.executeCommand(new MoveSelectionGroupCommand(this._core, this, this.endX, this.endY, this.startX, this.startY, true));
                     this._core.store.state.hasObjectsChanged = true;
                 }
             }
@@ -15664,6 +15045,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
     initialMouseY = 0;
     initialSize = { x: 0, y: 0, width: 0, height: 0 };
     newSize = { x: 0, y: 0, width: 0, height: 0 };
+    hasResized = false;
     constructor(core) {
         super(core);
     }
@@ -15672,6 +15054,7 @@ class KritzelResizeHandler extends KritzelBaseHandler {
         this.initialMouseY = 0;
         this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
         this.newSize = { x: 0, y: 0, width: 0, height: 0 };
+        this.hasResized = false;
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
@@ -15718,6 +15101,15 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const clientY = event.clientY - this._core.store.offsetY;
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
@@ -15758,6 +15150,16 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
                 const dx = clientX - this.initialMouseX;
                 const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    clearTimeout(this._core.store.state.longTouchTimeout);
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
                         this.newSize.width = this.initialSize.width - dx;
@@ -15785,24 +15187,27 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                         break;
                 }
                 this._core.store.state.selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
-                clearTimeout(this._core.store.state.longTouchTimeout);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isResizing) {
-                this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
                 this._core.store.state.isResizing = false;
-                this._core.store.state.hasObjectsChanged = true;
+                if (this.hasResized) {
+                    this._core.commandManager.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
+                    this._core.store.state.hasObjectsChanged = true;
+                }
                 this.reset();
             }
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isResizing) {
-                this._core.history.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
                 this._core.store.state.isResizing = false;
-                this._core.store.state.hasObjectsChanged = true;
+                if (this.hasResized) {
+                    this._core.commandManager.executeCommand(new ResizeSelectionGroupCommand(this._core, this, structuredClone(this.initialSize), structuredClone(this.newSize)));
+                    this._core.store.state.hasObjectsChanged = true;
+                }
                 this.reset();
                 clearTimeout(this._core.store.state.longTouchTimeout);
             }
@@ -15928,7 +15333,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isRotating) {
-                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
+                this._core.commandManager.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.state.isRotating = false;
                 this._core.store.state.hasObjectsChanged = true;
                 this.reset();
@@ -15936,7 +15341,7 @@ class KritzelRotationHandler extends KritzelBaseHandler {
         }
         if (event.pointerType === 'touch') {
             if (this._core.store.state.isRotating) {
-                this._core.history.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
+                this._core.commandManager.executeCommand(new RotateSelectionGroupCommand(this._core, this, this.rotation, this.initialSelectionGroupRotation));
                 this._core.store.state.isRotating = false;
                 this._core.store.state.hasObjectsChanged = true;
                 this.reset();
@@ -16040,7 +15445,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             if (KritzelEventHelper.isLeftClick(event)) {
                 const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
                 if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
-                    this._core.store.state.selectionGroup.objects[0].edit();
+                    this._core.store.state.selectionGroup.objects[0].edit(event);
                 }
                 this._core.store.state.hasObjectsChanged = false;
                 if (this._core.store.state.isSelecting) {
@@ -16059,7 +15464,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             clearTimeout(this.touchStartTimeout);
             const hasObjectsMoved = this._core.store.state.hasObjectsChanged;
             if (this._core.store.state.selectionGroup?.objects.length === 1 && hasObjectsMoved === false) {
-                this._core.store.state.selectionGroup.objects[0].edit();
+                this._core.store.state.selectionGroup.objects[0].edit(event);
             }
             this._core.store.state.hasObjectsChanged = false;
             if (this._core.store.state.isSelecting) {
@@ -16202,7 +15607,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         selectionGroup.addOrRemove(object);
         selectionGroup.isSelected = true;
         selectionGroup.rotation = object.rotation;
-        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
+        this._core.commandManager.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
     }
     addSelectedObjectsToSelectionGroup() {
         const selectedObjects = this._core.store.selectedObjects;
@@ -16219,7 +15624,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectionGroup.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
-        this._core.history.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
+        this._core.commandManager.executeCommand(new AddSelectionGroupCommand(this._core, this, selectionGroup));
     }
 }
 
@@ -16268,7 +15673,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.store.state.selectionGroup &&
                     !this._core.store.state.isResizeHandleSelected &&
                     !this._core.store.state.isRotationHandleSelected) {
-                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
+                    this._core.commandManager.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
                 if (selectedObject && selectedObject.isSelected === false && selectedObject?.objects.length === 1 && selectedObject.objects[0].isInteractive) {
                     return;
@@ -16297,7 +15702,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
                     this._core.store.state.selectionGroup &&
                     !this._core.store.state.isResizeHandleSelected &&
                     !this._core.store.state.isRotationHandleSelected) {
-                    this._core.history.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
+                    this._core.commandManager.executeCommand(new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup));
                 }
             }
             this.rotationHandler.handlePointerDown(event);
@@ -16423,14 +15828,15 @@ class KritzelTextTool extends KritzelBaseTool {
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
-            if (object instanceof KritzelText) {
+            if (this._core.store.state.activeText === null && object instanceof KritzelText) {
                 this._core.store.state.activeText = object;
-                object.focus();
+                object.edit(event);
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
+                this._core.store.state.activeText.save();
                 this._core.store.state.activeText = object;
-                object.focus();
+                object.edit(event);
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
@@ -16444,26 +15850,30 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientX = event.clientX - this._core.store.offsetX;
             const clientY = event.clientY - this._core.store.offsetY;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
+            text.isNew = true;
             text.fontColor = this.fontColor;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.activeText = text;
-            this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
+            this._core.store.state.objectsMap.insert(text);
+            this._core.rerender();
+            requestAnimationFrame(() => text.edit(event));
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             const path = event.composedPath().slice(1);
             const objectElement = path.find(element => element.classList && element.classList.contains('object'));
             const object = this._core.findObjectById(objectElement?.id);
-            if (object instanceof KritzelText) {
+            if (this._core.store.state.activeText === null && object instanceof KritzelText) {
                 this._core.store.state.activeText = object;
-                object.focus();
+                object.edit(event);
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText) {
+                this._core.store.state.activeText.save();
                 this._core.store.state.activeText = object;
-                object.focus();
+                object.edit(event);
                 return;
             }
             if (this._core.store.state.activeText !== null && object instanceof KritzelText === false) {
@@ -16478,12 +15888,14 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientX = Math.round(activePointers[0].clientX - this._core.store.offsetX);
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily);
+            text.isNew = true;
             text.fontColor = this.fontColor;
             text.translateX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
             text.translateY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.activeText = text;
-            this._core.history.executeCommand(new AddObjectCommand(this._core, this, text));
+            this._core.store.state.objectsMap.insert(text);
+            this._core.rerender();
         }
     }
     handlePointerUp(event) {
@@ -16491,15 +15903,74 @@ class KritzelTextTool extends KritzelBaseTool {
             event.preventDefault();
         }
         if (event.pointerType === 'mouse') {
-            this._core.store.state.activeText?.edit();
+            this._core.store.state.activeText?.edit(event);
         }
         if (event.pointerType === 'touch') {
-            this._core.store.state.activeText?.edit();
+            this._core.store.state.activeText?.edit(event);
             KritzelKeyboardHelper.enableInteractiveWidget();
         }
     }
 }
 
+class KritzelCustomElement extends KritzelBaseObject {
+    __class__ = 'KritzelCustomElement';
+    element;
+    isInteractive = true;
+    constructor(config) {
+        super();
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.scale = config.scale || 1;
+            this.element = config.element;
+            this.height = config.height || 0;
+            this.width = config.width || 0;
+        }
+    }
+    static create(core, config) {
+        const object = new KritzelCustomElement(config);
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        return object;
+    }
+    mount(element) {
+        if (element === null) {
+            return;
+        }
+        // If already mounted to the same element and content is still attached, skip
+        if (this.isMounted && this.elementRef === element && this.element.parentElement === element) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+        // Clear existing content and append the element
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.element);
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        if (this.element) {
+            this.element.style.width = `${width}px`;
+            this.element.style.height = `${height}px`;
+        }
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        copiedObject.element = this.element.cloneNode(true);
+        return copiedObject;
+    }
+}
+
 const DEFAULT_BRUSH_CONFIG = {
     type: 'pen',
     color: '#000000',
@@ -16941,7 +16412,7 @@ class KritzelImageTool extends KritzelBaseTool {
         selectionGroup.isSelected = true;
         const addImageCommand = new AddObjectCommand(this._core, this, image);
         const addSelectionGroupCommand = new AddSelectionGroupCommand(this._core, this, selectionGroup);
-        this._core.history.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
+        this._core.commandManager.executeCommand(new BatchCommand(this._core, this, [addImageCommand, addSelectionGroupCommand]));
         this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     handleCancel() {
@@ -16976,6 +16447,6 @@ exports.ObjectHelper = ObjectHelper;
 exports.RemoveObjectCommand = RemoveObjectCommand;
 exports.RemoveSelectionGroupCommand = RemoveSelectionGroupCommand;
 exports.UpdateObjectCommand = UpdateObjectCommand;
-//# sourceMappingURL=index-BKstgWru.js.map
+//# sourceMappingURL=index-SaGfCHX3.js.map
 
-//# sourceMappingURL=index-BKstgWru.js.map
+//# sourceMappingURL=index-SaGfCHX3.js.map