fix: multiple editor instances conflict

[xavier711]

version

latest

Link to minimal reproduction

No response

Steps to reproduce

import Editor from "@hufe921/canvas-editor"
const editor1 = new Editor(document.querySelector('#editor1'), [{
    value: 'first editor'
}])
const editor2 = new Editor(document.querySelector('#editor2'), [{
     value: 'second editor'
}])

Then execute editor1.command.getValue(), it returned data from the second editor.

What is expected?

data from editor1

What is actually happening?

data from editor2

System Info

No response

Any additional comments?

Here is the solution that I think will work:

// original code
class Command {
  private static execute: CommandAdapt['execute']
  constructor(adapt: CommandAdapt) {
    Command.execute = adapt.execute.bind(adapt)
  }
  public execute() {
    return Command.execute()
  }
}

// solution 1
// class Command {
//   private static execute: CommandAdapt['execute']
//   constructor(adapt: CommandAdapt) {
//     this.execute = adapt.execute.bind(adapt)
//   }
//   public execute() {
//     return Command.execute()
//   }
// }

// solution 2
// class Command {
//   private adapt: CommandAdapt
//   constructor(adapt: CommandAdapt) {
//     this.adapt = adapt
//   }
//   public execute() {
//     return this.adapt.execute()
//   }
// }

class CommandAdapt {
  private draw: Draw
  constructor(draw: Draw) {
    this.draw = draw
  }
  public execute() {
    console.log(this.draw.execute())
  }
}

class Draw {
  public data: string[]
  constructor(data: string[]) {
    this.data = data
  }
  public execute() {
    return this.data
  }
}

class Editor {
  public command: Command
  constructor(data: string[]) {
    const draw = new Draw(data)
    this.command = new Command(new CommandAdapt(draw))
  }
}

const editor1 = new Editor(['editor-1'])
const editor2 = new Editor(['editor-2'])

editor1.command.execute()
editor2.command.execute()
// expect console [ 'editor-1' ]
// actual console [ 'editor-2' ]