From 5b9d59de125115c5928b5c74e08085ad3dd0a10a Mon Sep 17 00:00:00 2001
From: Artem Nistuley <artem@harbourshare.com>
Date: Mon, 1 Jul 2024 21:54:48 +0300
Subject: [PATCH] toolbar example

---
 packages/super-editor/src/extensions/index.js |  1 +
 .../src/extensions/toolbar-menu/index.js      |  1 +
 .../extensions/toolbar-menu/toolbar-menu.js   | 88 +++++++++++++++++++
 3 files changed, 90 insertions(+)
 create mode 100644 packages/super-editor/src/extensions/toolbar-menu/index.js
 create mode 100644 packages/super-editor/src/extensions/toolbar-menu/toolbar-menu.js

diff --git a/packages/super-editor/src/extensions/index.js b/packages/super-editor/src/extensions/index.js
index ed65421f08..cfa1431804 100644
--- a/packages/super-editor/src/extensions/index.js
+++ b/packages/super-editor/src/extensions/index.js
@@ -1,4 +1,5 @@
 // Extensions
+export { ToolbarMenu } from './toolbar-menu/index.js';
 
 // Nodes extensions
 export { Document } from './document/index.js';
diff --git a/packages/super-editor/src/extensions/toolbar-menu/index.js b/packages/super-editor/src/extensions/toolbar-menu/index.js
new file mode 100644
index 0000000000..525de1e859
--- /dev/null
+++ b/packages/super-editor/src/extensions/toolbar-menu/index.js
@@ -0,0 +1 @@
+export * from './toolbar-menu.js';
diff --git a/packages/super-editor/src/extensions/toolbar-menu/toolbar-menu.js b/packages/super-editor/src/extensions/toolbar-menu/toolbar-menu.js
new file mode 100644
index 0000000000..2ed30b8623
--- /dev/null
+++ b/packages/super-editor/src/extensions/toolbar-menu/toolbar-menu.js
@@ -0,0 +1,88 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Extension } from '@core/Extension.js';
+
+export const ToolbarMenu = Extension.create({
+  name: 'toolbar-menu',
+
+  addPmPlugins() {
+    const icon = (text, name, attrs = {}) => {
+      let button = document.createElement("div")
+      let buttonInner = document.createElement("span")
+      buttonInner.textContent = text
+      button.appendChild(buttonInner)
+      button.className = "menuicon " + name
+      button.title = name
+      for (let key in attrs) {
+        button.setAttribute(key, attrs[key])
+      }
+      return button
+    };
+
+    // const setAttributes = (editorView, attrs) => {
+    //   return () => {
+    //     const mark = DocxSchema.marks.span.create({
+    //       attributes: {...attrs}
+    //     });
+    //     const range = editorView.state.selection.ranges[0];
+    //     const frag = editorView.state.doc.cut(range.$from.pos, range.$to.pos)
+    //     const firstChild = frag.content.firstChild || null;
+    //     if (!firstChild) return;
+
+    //     const content = frag.content.firstChild.textContent;
+    //     const textNode = editorView.state.schema.text(content, [mark]);
+
+    //     editorView.dispatch(
+    //       editorView.state.tr.replaceSelectionWith(textNode, false)
+    //     );
+    //   };
+    // };
+    
+    const toolbarItems = [
+      { command: () => { this.editor.commands.toggleBold() }, dom: icon("B", "strong") },
+      { command: () => { this.editor.commands.toggleItalic() }, dom: icon("i", "em") },
+      { command: () => { this.editor.commands.toggleUnderline() }, dom: icon("u", "underline") },
+    ];
+
+    const createToolbarPlugin = (items) => {
+      return new Plugin({
+        key: new PluginKey('toolbar-menu'),
+
+        view(editorView) {
+          const toolbar = document.createElement('div');
+          toolbar.className = 'super-editor-toolbar';
+          editorView.dom.parentNode.prepend(toolbar);
+          items.forEach(({command, dom}) => {
+            dom.style.cursor = "pointer"
+            dom.addEventListener("mousedown", e => {
+              e.preventDefault()
+
+              command(editorView.state, editorView.dispatch, editorView)
+
+              editorView.focus()
+            })
+            toolbar.appendChild(dom)
+          })
+
+          return {
+            update(view) {
+              const marks = view.state.selection.$head.marks();
+              // get all buttons
+              const buttons = toolbar.querySelectorAll('.menuicon');
+              // remove active class from all buttons
+              buttons.forEach(button => button.classList.remove('active'));
+              marks.forEach(mark => {
+                const name = mark.type.name;
+                const button = toolbar.querySelector(`.${name}`);
+                if (button) {
+                  button.classList.add('active');
+                }
+              });
+            }
+          };
+        }
+      });
+    };
+
+    return [createToolbarPlugin(toolbarItems)];
+  },
+});