botserver/web/desktop/paper/paper.js

// Paper module JavaScript
document.addEventListener('alpine:init', () => {
  Alpine.data('paper', () => ({
    showToolbar: false,
    selection: null,

    initEditor() {
      const editor = this.$refs.editor;
      
      // Track selection for floating toolbar
      editor.addEventListener('mouseup', this.updateSelection.bind(this));
      editor.addEventListener('keyup', this.updateSelection.bind(this));
      
      // Show/hide toolbar based on selection
      document.addEventListener('selectionchange', () => {
        const selection = window.getSelection();
        this.showToolbar = !selection.isCollapsed && 
                          editor.contains(selection.anchorNode);
      });
    },

    updateSelection() {
      this.selection = window.getSelection();
    },

    formatText(format) {
      document.execCommand(format, false);
      this.updateSelection();
    },

    alignText(align) {
      document.execCommand('justify' + align, false);
      this.updateSelection();
    },

    isActive(format) {
      return document.queryCommandState(format);
    },

    isAligned(align) {
      return document.queryCommandValue('justify' + align) === align;
    },

    addLink() {
      const url = prompt('Enter URL:');
      if (url) {
        document.execCommand('createLink', false, url);
      }
      this.updateSelection();
    }
  }));
});