Removed add-block from demo

johannes-editor · Jul 14, 2024 · 9fa28e8 · 9fa28e8
1 parent b4f2a7f
commit 9fa28e8
Show file tree

Hide file tree

Showing 14 changed files with 569 additions and 155 deletions.
diff --git a/demo/assets/bundle.js b/demo/assets/bundle.js
diff --git a/demo/index.html b/demo/index.html
@@ -41,13 +41,13 @@ <h1 contenteditable="true" data-placeholder="Untitled"></h1>
                 </div>
             </div>
 
-            <div class="add-block-wrapper">
+            <!-- <div class="add-block-wrapper">
                 <button class="add-block block-operation" data-block-operation="create-new-element">
                     <svg width="24" height="24" fill="currentColor">
                         <use href="#icon-add-block"></use>
                     </svg>
                 </button>
-            </div>
+            </div> -->
 
             <!-- <div id="blockOptionsWrapper" class="block-options-wrapper soft-box-shadow" style="display: none;">
                 <div class="block-options" style="position: relative;">

diff --git a/src/builders/FloatingToolbarBuilder.ts b/src/builders/FloatingToolbarBuilder.ts
@@ -10,7 +10,7 @@ import ColorIcon from "../components/floating-toolbar/dropdown-tool/ColorIcon";
 import TextOperationService from "../services/text-operations/TextOperationService";
 import ElementFactoryService from "../services/element-factory/ElementFactoryService";
 import DropdownMenuButton from "../components/floating-toolbar/dropdown-tool/DropdownMenuButton";
-import BlockOperationsService, { BlockOperations } from "../services/block-operations/BlockOperationsService";
+import BlockOperationsService, { BLOCK_OPERATIONS } from "../services/block-operations/BlockOperationsService";
 
 class FloatingToolbarBuilder {
 
@@ -30,23 +30,21 @@ class FloatingToolbarBuilder {
 
     static turnIntoDropdown(): DropdownMenu {
 
-        const elementFactoryService = new ElementFactoryService();
-
         const turnIntoBarList = new DropdownMenuList("turnIntoSelect", "Turn into");
         const turnIntoBarButton = new DropdownMenuButton("turnIntoButton", "Text", turnIntoBarList);
         const turnIntoDropdown = new DropdownMenu(turnIntoBarButton, turnIntoBarList);
 
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoParagraph, elementFactoryService), SVGIcons.paragraph.htmlElement, "Text"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoParagraph, elementFactoryService), SVGIcons.b_list.htmlElement, "Bulleted list"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoParagraph, elementFactoryService), SVGIcons.n_list.htmlElement, "Numbered list"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoParagraph, elementFactoryService), SVGIcons.code.htmlElement, "Code"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoParagraph, elementFactoryService), SVGIcons.quote.htmlElement, "Quote"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH1, elementFactoryService), SVGIcons.head1.htmlElement, "Heading 1"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH2, elementFactoryService), SVGIcons.head2.htmlElement, "Heading 2"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH3, elementFactoryService), SVGIcons.head3.htmlElement, "Heading 3"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH4, elementFactoryService), SVGIcons.head4.htmlElement, "Heading 4"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH5, elementFactoryService), SVGIcons.head5.htmlElement, "Heading 5"));
-        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, new BlockOperationsService(BlockOperations.TurnIntoH6, elementFactoryService), SVGIcons.head6.htmlElement, "Heading 6"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "p", null, SVGIcons.paragraph.htmlElement, "Text"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "bulleted-list", null, SVGIcons.b_list.htmlElement, "Bulleted list"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "numbered-list", null, SVGIcons.n_list.htmlElement, "Numbered list"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(),"code", null, SVGIcons.code.htmlElement, "Code"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "quote", null, SVGIcons.quote.htmlElement, "Quote"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h1", null, SVGIcons.head1.htmlElement, "Heading 1"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h2", null, SVGIcons.head2.htmlElement, "Heading 2"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h3", null, SVGIcons.head3.htmlElement, "Heading 3"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h4", null, SVGIcons.head4.htmlElement, "Heading 4"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h5", null, SVGIcons.head5.htmlElement, "Heading 5"));
+        turnIntoBarList.append(new DropdownMenuListItem(turnIntoBarList, BlockOperationsService.getInstance(), "h6", null, SVGIcons.head6.htmlElement, "Heading 6"));
 
         return turnIntoDropdown;
     }
@@ -59,13 +57,13 @@ class FloatingToolbarBuilder {
 
         const groupButton = new GroupButton();
 
-        new GroupedButton(new TextOperationService("link"), "Link", "icon-material-link").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("bold"), "Bold", "icon-wordpress-bold").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("italic"), "Italic", "icon-material-italic").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("underline"), "Underline", "icon-material-underline").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("copy"), "Code", "icon-wordpress-code-mark").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("strikeThrough"), "Strike-through", "icon-wordpress-strike-through").documentAppendTo(groupButton.htmlElement);
-        new GroupedButton(new TextOperationService("copy"), "Equation", "icon-wordpress-equation-mark").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(),"link", "Link", "icon-material-link").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "bold", "Bold", "icon-wordpress-bold").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "italic", "Italic", "icon-material-italic").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "underline", "Underline", "icon-material-underline").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "copy", "Code", "icon-wordpress-code-mark").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "strikeThrough", "Strike-through", "icon-wordpress-strike-through").documentAppendTo(groupButton.htmlElement);
+        new GroupedButton(TextOperationService.getInstance(), "copy", "Equation", "icon-wordpress-equation-mark").documentAppendTo(groupButton.htmlElement);
 
         return groupButton;
     }
@@ -76,12 +74,12 @@ class FloatingToolbarBuilder {
         const colorButton = new DropdownMenuButton("colorTextButton", new ColorIcon("#FAF4D1").htmlElement, colorDropdownList);
         const colorDropdown = new DropdownMenu(colorButton, colorDropdownList);
 
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "#FDDEDE"), new ColorIcon("#FDDEDE").htmlElement, "Red"));
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "#D7F7DC"), new ColorIcon("#D7F7DC").htmlElement, "Green"));
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "#D9EDF6"), new ColorIcon("#D9EDF6").htmlElement, "Blue"));
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "#FAF4D1"), new ColorIcon("#FAF4D1").htmlElement, "Yellow"));
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "#E1E0E0"), new ColorIcon("#E1E0E0").htmlElement, "Grey"));
-        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, new TextOperationService("hiliteColor", "transparent"), new ColorIcon("transparent").htmlElement, "None"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "#FDDEDE", new ColorIcon("#FDDEDE").htmlElement, "Red"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "#D7F7DC", new ColorIcon("#D7F7DC").htmlElement, "Green"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "#D9EDF6", new ColorIcon("#D9EDF6").htmlElement, "Blue"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "#FAF4D1", new ColorIcon("#FAF4D1").htmlElement, "Yellow"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "#E1E0E0", new ColorIcon("#E1E0E0").htmlElement, "Grey"));
+        colorDropdownList.append(new DropdownMenuListItem(colorDropdownList, BlockOperationsService.getInstance(), "hiliteColor", "transparent", new ColorIcon("transparent").htmlElement, "None"));
 
         return colorDropdown;
     }
@@ -94,8 +92,8 @@ class FloatingToolbarBuilder {
         const moreOptionsButton = new DropdownMenuButton("moreTextOptionButton", icon.htmlElement, moreOptionsList, false);
         const moreOptionsDropdown = new DropdownMenu(moreOptionsButton, moreOptionsList);
 
-        moreOptionsList.append(new DropdownMenuListItem(moreOptionsList, new TextOperationService("duplicate"), SVGIcons.duplicate.htmlElement, "Duplicate"));
-        moreOptionsList.append(new DropdownMenuListItem(moreOptionsList, new TextOperationService("delete"), SVGIcons.delete.htmlElement, "Delete"));
+        moreOptionsList.append(new DropdownMenuListItem(moreOptionsList, BlockOperationsService.getInstance(), "duplicate", null, SVGIcons.duplicate.htmlElement, "Duplicate"));
+        moreOptionsList.append(new DropdownMenuListItem(moreOptionsList, BlockOperationsService.getInstance(), "delete", null, SVGIcons.delete.htmlElement, "Delete"));
 
         return moreOptionsDropdown;
     }

diff --git a/src/components/add-block/AddBlock.ts b/src/components/add-block/AddBlock.ts
@@ -0,0 +1,27 @@
+import BaseUIComponent from "../common/BaseUIComponent";
+import AddBlockButton from "./AddBlockButton";
+
+class AddBlock extends BaseUIComponent {
+
+    display: string;
+
+    constructor() {
+        super({});
+        this.display = "block"
+    }
+
+    init(): HTMLElement {
+        const htmlElement = document.createElement("div");
+
+        htmlElement.classList.add("add-block-wrapper");
+
+        const button = new AddBlockButton();
+
+        htmlElement.appendChild(button.htmlElement);
+
+        return htmlElement;
+    }
+
+}
+
+export default AddBlock;
diff --git a/src/components/add-block/AddBlockButton.ts b/src/components/add-block/AddBlockButton.ts
@@ -0,0 +1,38 @@
+import ICommand from "services/common/ICommand";
+import BaseUIComponent from "../common/BaseUIComponent";
+import SVGIcon from "../common/SVGIcon";
+import BlockOperationsService, { BLOCK_OPERATIONS } from "../../services/block-operations/BlockOperationsService";
+
+class AddBlockButton extends BaseUIComponent {
+
+    display: string;
+    private readonly _commandService: ICommand;
+
+    constructor() {
+        super({});
+
+        this.display = "block";
+        this._commandService = BlockOperationsService.getInstance();
+        this.attachEvents();
+    }
+
+    init(): HTMLElement {
+        const htmlElement = document.createElement("button");
+
+        htmlElement.classList.add("add-block", "block-operation");
+
+        const svg = new SVGIcon("icon-add-block", "24", "24");
+
+        htmlElement.appendChild(svg.htmlElement);
+
+        return htmlElement;
+    }
+
+    attachEvents(): void {
+        this.htmlElement.addEventListener("click", () => {
+            this._commandService.execCommand(BLOCK_OPERATIONS.CREATE_DEFAULT_BLOCK, "");
+        })
+    }
+}
+
+export default AddBlockButton;
diff --git a/src/components/floating-toolbar/dropdown-tool/DropdownMenuListItem.ts b/src/components/floating-toolbar/dropdown-tool/DropdownMenuListItem.ts
@@ -5,18 +5,22 @@ import DropdownMenuList from "./DropdownMenuList";
 class DropdownMenuListItem extends BaseUIComponent {
 
     private readonly _commandService: ICommand;
+    private readonly _command: string;
+    private readonly _value: string | null;
 
     parentDropdownMenuList: DropdownMenuList;
 
     display: string;
 
-    constructor(parentDropdownMenuList: DropdownMenuList, commandService: ICommand, leftIcon: HTMLElement | SVGElement, title: string) {
+    constructor(parentDropdownMenuList: DropdownMenuList, commandService: ICommand, command: string, value: string | null, leftIcon: HTMLElement | SVGElement, title: string) {
         super({
             leftIcon: leftIcon,
             title: title
         });
 
         this.display = 'block';
+        this._command = command;
+        this._value = value;
         this._commandService = commandService;
         this.parentDropdownMenuList = parentDropdownMenuList;
 
@@ -50,7 +54,7 @@ class DropdownMenuListItem extends BaseUIComponent {
 
             setTimeout(() => {
 
-                this._commandService.execCommand();
+                this._commandService.execCommand(this._command, this._value);
 
                 // const selectionEvent = new CustomEvent('selectionChangeAfterExecCommand', {
                 //     detail: { message: 'selectionChangeAfterExecCommand' },

diff --git a/src/components/floating-toolbar/group-button/GroupedButton.ts b/src/components/floating-toolbar/group-button/GroupedButton.ts
@@ -5,10 +5,11 @@ import ICommand from "../../../services/common/ICommand";
 class GroupedButton extends BaseUIComponent {
 
     private readonly _commandService: ICommand;
+    private readonly _command: string;
 
     display: string;
 
-    constructor(commandService: ICommand, title: string, svgUseHref: string) {
+    constructor(commandService: ICommand, command: string, title: string, svgUseHref: string) {
 
         super({
             title: title,
@@ -17,6 +18,7 @@ class GroupedButton extends BaseUIComponent {
 
         this.display = "block";
         this._commandService = commandService;
+        this._command = command;
 
         this.attachEvents();
     }
@@ -42,7 +44,7 @@ class GroupedButton extends BaseUIComponent {
 
             const editableElement = this.getParentEditable();
 
-            this._commandService.execCommand();
+            this._commandService.execCommand(this._command);
 
             setTimeout(() => {
                 editableElement?.normalize();
@@ -55,7 +57,7 @@ class GroupedButton extends BaseUIComponent {
                 const selection = window.getSelection();
 
                 if (!selection?.isCollapsed) {
-                    if (this._commandService.queryCommandState()) {
+                    if (this._commandService.queryCommandState(this._command)) {
                         this.htmlElement.style.color = "#2382e2";
                     } else {
                         this.htmlElement.style.color = "";

diff --git a/src/components/quick-menu/QuickMenu.ts b/src/components/quick-menu/QuickMenu.ts
@@ -4,7 +4,7 @@ import QuickMenuItem from './QuickMenuItem';
 import BaseUIComponent from '../common/BaseUIComponent';
 import CircularDoublyLinkedList from '../../common/CircularDoublyLinkedList';
 import IBlockOperationsService from '../../services/block-operations/IBlockOperationsService';
-import JNode from 'common/JNode';
+import JNode from "../../common/JNode";
 
 class QuickMenu extends BaseUIComponent {