kritzel-stencil 0.0.141 → 0.0.143

package/dist/esm/{index-D0Q2MKPn.js → index-Bj5QIJYQ.js}

@@ -209,18 +209,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();
     }
@@ -266,8 +254,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() {
@@ -295,7 +284,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) {
@@ -310,6 +299,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 {
@@ -365,10 +366,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.');
@@ -399,6 +402,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);
     }
@@ -408,6 +412,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);
     }
@@ -7070,27 +7075,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++) {
@@ -13384,621 +13368,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.
 */
@@ -14506,6 +13875,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';
@@ -14520,19 +13906,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;
     }
@@ -14567,49 +13955,80 @@ 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 previousTotalWidth = this.totalWidth;
+            const previousTotalHeight = this.totalHeight;
             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();
+            this.width = newWidth * this.scaleFactor;
+            this.height = newHeight * this.scaleFactor;
+            if (this.rotation !== 0) {
+                const newTotalWidth = this.totalWidth;
+                const newTotalHeight = this.totalHeight;
+                const deltaWidth = (newTotalWidth - previousTotalWidth) / 2;
+                const deltaHeight = (newTotalHeight - previousTotalHeight) / 2;
+                if (deltaWidth !== 0 || deltaHeight !== 0) {
+                    const cos = Math.cos(this.rotation);
+                    const sin = Math.sin(this.rotation);
+                    const rotatedDeltaX = cos * deltaWidth - sin * deltaHeight;
+                    const rotatedDeltaY = sin * deltaWidth + cos * deltaHeight;
+                    this.translateX += rotatedDeltaX - deltaWidth;
+                    this.translateY += rotatedDeltaY - deltaHeight;
+                }
             }
         }
+        if (this._core) {
+            this._core.store.state.objectsMap.update(this);
+            this._core.rerender();
+        }
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -14625,38 +14044,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) {
@@ -14676,14 +14113,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 = {};
@@ -15041,9 +14501,6 @@ class KritzelEventHelper {
     static isLeftClick(ev) {
         return ev.button === KritzelMouseButton.Left;
     }
-    static isMainMouseWheel(event) {
-        return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
-    }
     static isPointerEventOnContextMenu(event) {
         const path = event.composedPath();
         const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
@@ -15087,22 +14544,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';
@@ -15235,7 +14676,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;
             }
@@ -15247,7 +14688,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();
@@ -15270,59 +14711,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) {
@@ -15330,13 +14718,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);
     }
 }
@@ -15399,7 +14786,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;
             }
@@ -15414,7 +14801,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;
             }
@@ -15565,10 +14952,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') {
@@ -15603,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;
                 }
             }
@@ -15612,7 +15004,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;
                 }
             }
@@ -15662,6 +15054,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);
     }
@@ -15670,6 +15063,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') {
@@ -15716,6 +15110,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;
@@ -15756,6 +15159,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;
@@ -15783,24 +15196,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);
             }
@@ -15926,7 +15342,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();
@@ -15934,7 +15350,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();
@@ -16038,7 +15454,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) {
@@ -16057,7 +15473,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) {
@@ -16200,7 +15616,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;
@@ -16217,7 +15633,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));
     }
 }
 
@@ -16266,7 +15682,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;
@@ -16295,7 +15711,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);
@@ -16421,14 +15837,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) {
@@ -16442,26 +15859,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) {
@@ -16476,12 +15897,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) {
@@ -16489,15 +15912,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',
@@ -16939,7 +16421,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() {
@@ -16947,7 +16429,7 @@ class KritzelImageTool extends KritzelBaseTool {
     }
 }
 
-export { AddSelectionGroupCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelWorkspace as g, KritzelKeyboardHelper as h, KritzelEventHelper as i, KritzelBaseHandler as j, KritzelToolRegistry as k, KrtizelSelectionBox as l, KritzelSelectionGroup as m, KritzelBaseCommand as n, KritzelReviver as o, RemoveObjectCommand as p, AddObjectCommand as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
-//# sourceMappingURL=index-D0Q2MKPn.js.map
+export { AddSelectionGroupCommand as A, BatchCommand as B, DEFAULT_BRUSH_CONFIG as D, KritzelBrushTool as K, ObjectHelper as O, RemoveSelectionGroupCommand as R, UpdateObjectCommand as U, KritzelTextTool as a, KritzelMouseButton as b, KritzelSelectionTool as c, KritzelEraserTool as d, DEFAULT_TEXT_CONFIG as e, KritzelImageTool as f, KritzelWorkspace as g, KritzelKeyboardHelper as h, KritzelBaseHandler as i, KritzelToolRegistry as j, KrtizelSelectionBox as k, KritzelSelectionGroup as l, KritzelBaseCommand as m, KritzelReviver as n, RemoveObjectCommand as o, AddObjectCommand as p, KritzelEventHelper as q, KritzelBaseTool as r, KritzelText as s, KritzelPath as t, KritzelImage as u };
+//# sourceMappingURL=index-Bj5QIJYQ.js.map
 
-//# sourceMappingURL=index-D0Q2MKPn.js.map
+//# sourceMappingURL=index-Bj5QIJYQ.js.map