Create a component structure for QuickMenuInsert. Create a linked lis…

…t and circular linked list to allow move the focus easily. Improve the folder structire.

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "Triggable"
+    ]
+}

demo/index.html

@@ -35,7 +35,7 @@ <h1 contenteditable="true" data-placeholder="Untitled"></h1>
                             <use href="#icon-material-drag"></use>
                         </svg>
                     </button>
-                    <p class="johannes-content-element focusable swittable key-trigger" data-type="p"
+                    <p class="johannes-content-element focusable swittable key-trigger editable" data-type="p"
                         contenteditable="true" data-placeholder="Write something or type / (slash) to choose a block..."
                         tabindex="0"></p>
                 </div>
@@ -49,7 +49,7 @@ <h1 contenteditable="true" data-placeholder="Untitled"></h1>
                 </button>
             </div>
 
-            <div id="blockOptionsWrapper" class="block-options-wrapper soft-box-shadow" style="display: none;">
+            <!-- <div id="blockOptionsWrapper" class="block-options-wrapper soft-box-shadow" style="display: none;">
                 <div class="block-options" style="position: relative;">
                     <section class="basic-section">
                         <h2>Basic blocks</h2>
@@ -368,7 +368,7 @@ <h2>Embed</h2>
                     <span class="empty-block-options" style="display: none; padding: 10px;">(˚Δ˚)b</span>
 
                 </div>
-            </div>
+            </div> -->
 
             <div id="textFormattingBar" style="display: none;" class="soft-box-shadow">
 

src/block-operation.js

@@ -9,8 +9,8 @@ import { createNewLiElement } from './element-factory';
 import { createNewCheckboxLiElement } from './element-factory';
 import { createNewDraggableParagraphElement } from './element-factory';
 
-import { hideAllDependentBox } from './text-formatting-bar-operation';
-import { hideTextFormattingBar } from './text-formatting-bar-operation';
+import { hideAllDependentBox } from './components/text-formatting-bar/text-formatting-bar';
+import { hideTextFormattingBar } from './components/text-formatting-bar/text-formatting-bar';
 
 //** Create a default block or a element list */
 export function createNewElement(event) {

src/command-factory.js → src/commands/command-factory.js

@@ -1,8 +1,10 @@
-import * as blockOperation from "./block-operation";
-import * as blockOptionOperation from './block-options-operation';
-import * as jWindow from './j-window';
+import * as blockOperation from "../block-operation";
+import * as blockOptionOperation from '../components/quick-insert-menu/quick-insert-menu';
+import * as jWindow from '../j-window';
 
-import * as textFormattingBarOperation from './text-formatting-bar-operation';
+import instance from "../components/quick-insert-menu/QuickInsertMenu";
+
+import * as textFormattingBarOperation from '../components/text-formatting-bar/text-formatting-bar';
 
 export function createCommand(operationName, elements = null) {
     return new Command(operationName, elements);
@@ -73,7 +75,7 @@ export const operationMap = {
     [OPERATIONS.BLOCK.MOVE_DOWN_BLOCK]: blockOperation.moveDownBlock,
     [OPERATIONS.BLOCK_OPTIONS.SHOW_BLOCK_OPTIONS]: blockOptionOperation.showMainBlockOptions,
     [OPERATIONS.BLOCK_OPTIONS.HIDE_CLEAR_BLOCK_OPTIONS]: blockOptionOperation.hideAndClearBlockOptions,
-    [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION]: blockOptionOperation.moveTheFakeFocusToTheNextBlockOption,
+    [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION]: instance.moveTheFakeFocusToTheNextMenuItem,   // blockOptionOperation.moveTheFakeFocusToTheNextBlockOption,
     [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION]: blockOptionOperation.moveTheFakeFocusToPreviousBlockOption,
     [OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_BLOCK_TYPE]: blockOptionOperation.applySelectedBlockType,
     [OPERATIONS.BLOCK_OPTIONS.FILTER_CONCAT]: blockOptionOperation.filterContact,

src/common/JCircularLinkedList.js

@@ -0,0 +1,55 @@
+import JNode from './JNode';
+
+class JCircularLinkedList {
+
+    constructor() {
+        this.head = null;
+        this.tail = null;
+        this.length = 0;
+    }
+
+    /**
+     * Append a new node with the given value to the end of the list.
+     * @param {JNode} node - The node to append.
+     */
+    append(node) {
+        if (!(node instanceof JNode)) {
+            throw new TypeError("Expected an instance of JNode.");
+        }
+
+        if (this.length === 0) {
+            this.head = node;
+            this.tail = node;
+
+            this.head.setNext(this.tail);
+            this.head.setPrevious(this.tail);
+        } else {
+            node.setPrevious(this.tail);
+            node.setNext(this.head);
+
+            this.tail.setNext(node);
+            this.head.setPrevious(node);
+
+            this.tail = node;
+        }
+        this.length++;
+    }
+
+    /**
+     * Get the first node (head) of the list.
+     * @returns {JNode} The first node.
+     */
+    getFirst() {
+        return this.head;
+    }
+
+    /**
+     * Get the last node (tail) of the list.
+     * @returns {JNode} The last node.
+     */
+    getLast() {
+        return this.tail;
+    }
+}
+
+export default JCircularLinkedList;

src/common/JLinkedList.js

@@ -0,0 +1,53 @@
+import JNode from './JNode';
+
+class JLinkedList {
+
+    constructor() {
+        this.head = null;
+        this.tail = null;
+        this.length = 0;
+    }
+
+    /**
+     * Append a new node with the given value to the end of the list.
+     * @param {*} HTMLElement - The value to store in the new node.
+     */
+    append(node) {
+
+        if (!(node instanceof JNode)) {
+            throw new TypeError("Expected an instance of JNode.");
+        }
+
+        if (this.length === 0) {
+            this.head = node;
+            this.tail = node;
+        } else {
+
+            this.tail.setNext(node);
+            node.setPrevious(this.tail);
+
+            this.tail = node;
+        }
+
+        this.length++;
+
+
+        /**
+        * Get the node in the head.
+        * @returns {JNode} node.
+        */
+        this.getFirst = () => {
+            return this.head;
+        }
+
+        /**
+        * Get the node in the tail.
+        * @returns {JNode} node.
+        */
+        this.getLast = () => {
+            return this.tail;
+        }
+    }
+}
+
+export default JLinkedList;

src/common/JNode.js

@@ -0,0 +1,49 @@
+/**
+ * JNode is custom generic Johannes node
+ */
+class JNode {
+
+    constructor(htmlElement) {
+        this.previousNode;
+        this.nextNode;
+
+        /**
+        * The HTML element of the component in the DOM.
+        * @type {HTMLElement}
+        */
+        this.htmlElement = htmlElement;
+
+
+        /**
+        * Sets the next node.
+        * If the input is not a JNode, an error is thrown.
+        *
+        * @param {JNode} node - The node to be set as the next item.
+        * @throws {TypeError} Throws an error if the provided node is not an instance of JNode.
+        */
+        this.setNext = (node) => {
+            if (!(node instanceof JNode)) {
+                throw new TypeError("Expected an instance of JNode.");
+            }
+
+            this.nextNode = node;
+        }
+
+        /**
+        * Sets the previous node.
+        * If the input is not a JNode, an error is thrown.
+        *
+        * @param {JNode} node - The node to be set as the previous item.
+        * @throws {TypeError} Throws an error if the provided node is not an instance of JNode.
+        */
+        this.setPrevious = (node) => {
+            if (!(node instanceof JNode)) {
+                throw new TypeError("Expected an instance of JNode.");
+            }
+
+            this.previousNode = node;
+        }
+    }
+}
+
+export default JNode;