Quick commit with sort-of working WYSiWYG and moving chit

1 files changed, 58 insertions, 0 deletions

diff --git a/src/modules/WYSiWYG.ts b/src/modules/WYSiWYG.ts
new file mode 100644
index 0000000..1161cde
--- /dev/null
+++ b/src/modules/WYSiWYG.ts
@@ -0,0 +1,58 @@
+import tinymce, { Editor } from 'tinymce';
+import 'tinymce/icons/default';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import Chit from './Chit';
+
+export default class WYSiWYG {
+  #id = 'tinymce'
+  #bSave: HTMLButtonElement
+  #bCancel: HTMLButtonElement
+
+  constructor() {
+    tinymce.init({
+      selector: this.idAsSel,
+    });
+
+    const s = document.getElementsByClassName("tox-statusbar__branding")[0] as HTMLSpanElement;
+    const t = document.getElementsByClassName("tox-tinymce")[0] as HTMLDivElement;
+    const tf = s.parentElement as HTMLDivElement
+    const tfp = tf.parentElement as HTMLDivElement
+    tf.removeChild(s)
+
+    t.id = "wysiwyg"
+    tfp.id = "tfp";
+
+    this.#bSave = document.createElement("button")
+    this.#bCancel = document.createElement("button")
+    this.#bSave.id = "save"
+    this.#bCancel.id = "cancel"
+    tf.append(this.#bSave, this.#bCancel)
+
+    this.#bSave.onclick = () => this.setContent(this.content + "asd");
+    this.#bCancel.onclick = () => this.hide();
+    this.hide()
+  }
+
+  get #tmce(): Editor {
+    return tinymce.get(this.#id);
+  }
+  show(c: Chit) {
+    console.log(c.txt)
+    this.#tmce.show();
+    this.setContent(c.txt)
+  }
+  hide() {
+    this.#tmce.hide();
+  }
+  setContent(c: string) {
+    this.#tmce.setContent(c);
+  }
+  get content(): string {
+    return this.#tmce.getContent()
+  }
+
+  get idAsSel() {
+    return '#' + this.#id;
+  }
+}