BREAKING CHANGE(decorators): Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies

ts_web/elements/dees-input-wysiwyg/dees-formatting-menu.ts

@@ -30,13 +30,13 @@ export class DeesFormattingMenu extends DeesElement {
   }
 
   @state()
-  public visible: boolean = false;
+  accessor visible: boolean = false;
 
   @state()
-  private position: { x: number; y: number } = { x: 0, y: 0 };
+  accessor position: { x: number; y: number } = { x: 0, y: 0 };
 
   @state()
-  private menuZIndex: number = 1000;
+  accessor menuZIndex: number = 1000;
 
   private callback: ((command: string) => void | Promise<void>) | null = null;
 

ts_web/elements/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -40,13 +40,13 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   public static demo = demoFunc;
 
   @property({ type: String })
-  public value: string = '';
+  accessor value: string = '';
 
   @property({ type: String })
-  public outputFormat: OutputFormat = 'html';
+  accessor outputFormat: OutputFormat = 'html';
 
   @state()
-  public blocks: IBlock[] = [
+  accessor blocks: IBlock[] = [
     {
       id: WysiwygShortcuts.generateBlockId(),
       type: 'paragraph',
@@ -61,19 +61,19 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   public slashMenu = DeesSlashMenu.getInstance();
 
   @state()
-  public draggedBlockId: string | null = null;
+  accessor draggedBlockId: string | null = null;
 
   @state()
-  public dragOverBlockId: string | null = null;
+  accessor dragOverBlockId: string | null = null;
 
   @state()
-  public dragOverPosition: 'before' | 'after' | null = null;
+  accessor dragOverPosition: 'before' | 'after' | null = null;
 
   // Formatting menu is now globally rendered
   public formattingMenu = DeesFormattingMenu.getInstance();
 
   @state()
-  private selectedText: string = '';
+  accessor selectedText: string = '';
 
   public editorContentRef: HTMLDivElement;
   public isComposing: boolean = false;

ts_web/elements/dees-input-wysiwyg/dees-slash-menu.ts

@@ -32,19 +32,19 @@ export class DeesSlashMenu extends DeesElement {
   }
 
   @state()
-  public visible: boolean = false;
+  accessor visible: boolean = false;
 
   @state()
-  private position: { x: number; y: number } = { x: 0, y: 0 };
+  accessor position: { x: number; y: number } = { x: 0, y: 0 };
 
   @state()
-  private filter: string = '';
+  accessor filter: string = '';
 
   @state()
-  private selectedIndex: number = 0;
+  accessor selectedIndex: number = 0;
 
   @state()
-  private menuZIndex: number = 1000;
+  accessor menuZIndex: number = 1000;
 
   private callback: ((type: string) => void) | null = null;
 

ts_web/elements/dees-input-wysiwyg/dees-wysiwyg-block.ts

@@ -32,16 +32,16 @@ export class DeesWysiwygBlock extends DeesElement {
     }
   }
   @property({ type: Object })
-  public block: IBlock;
+  accessor block: IBlock;
 
   @property({ type: Boolean })
-  public isSelected: boolean = false;
+  accessor isSelected: boolean = false;
 
   @property({ type: Object })
-  public handlers: IBlockEventHandlers;
-  
+  accessor handlers: IBlockEventHandlers;
+
   @property({ type: Object })
-  public wysiwygComponent: any; // Reference to parent dees-input-wysiwyg
+  accessor wysiwygComponent: any; // Reference to parent dees-input-wysiwyg
 
   // Reference to the editable block element
   private blockElement: HTMLDivElement | null = null;