diff --git a/demo/assets/bundle.js b/demo/assets/bundle.js index 77dceea..7d8365e 100644 --- a/demo/assets/bundle.js +++ b/demo/assets/bundle.js @@ -9,17 +9,6 @@ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ -/***/ "./src/add-block.css": -/*!***************************!*\ - !*** ./src/add-block.css ***! - \***************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack://johannes/./src/add-block.css?"); - -/***/ }), - /***/ "./src/style.css": /*!***********************!*\ !*** ./src/style.css ***! @@ -38,28 +27,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ createADefaultBlock: () => (/* binding */ createADefaultBlock),\n/* harmony export */ createListItem: () => (/* binding */ createListItem),\n/* harmony export */ createNewElement: () => (/* binding */ createNewElement),\n/* harmony export */ deleteAndFocusOnNext: () => (/* binding */ deleteAndFocusOnNext),\n/* harmony export */ deleteAndFocusOnPrevious: () => (/* binding */ deleteAndFocusOnPrevious),\n/* harmony export */ deleteDraggableParentBlock: () => (/* binding */ deleteDraggableParentBlock),\n/* harmony export */ duplicateBlock: () => (/* binding */ duplicateBlock),\n/* harmony export */ moveDownBlock: () => (/* binding */ moveDownBlock),\n/* harmony export */ moveUpBlock: () => (/* binding */ moveUpBlock),\n/* harmony export */ transformBlock: () => (/* binding */ transformBlock)\n/* harmony export */ });\n/* harmony import */ var _add_block_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./add-block.css */ \"./src/add-block.css\");\n/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./element-factory */ \"./src/element-factory.js\");\n/* harmony import */ var _j_selection__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./j-selection */ \"./src/j-selection.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n//** Create a default block or a element list */\r\nfunction createNewElement(element) {\r\n let contentElement = element.closest('.johannes-content-element');\r\n\r\n if (contentElement.classList.contains('list')) {\r\n createListItem(contentElement);\r\n } else {\r\n createADefaultBlock(contentElement);\r\n }\r\n}\r\n\r\n//** Just create a new paragraph draggable block and insert in the DOM */\r\nfunction createADefaultBlock(eventParagraph) {\r\n\r\n const newBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewDraggableParagraphElement();\r\n\r\n if (eventParagraph && eventParagraph.closest('.draggable-block')) {\r\n const sibling = eventParagraph.closest('.draggable-block');\r\n sibling.insertAdjacentElement('afterend', newBlock);\r\n } else {\r\n document.querySelector('.johannes-editor > .content').appendChild(newBlock);\r\n }\r\n\r\n const focusable = newBlock.querySelector('.johannes-content-element');\r\n // focusable.focus();\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.focusOnTheEndOfTheText)(focusable);\r\n}\r\n\r\nfunction createListItem(element) {\r\n\r\n let newContentElement = null;\r\n\r\n let activeElement = document.activeElement;\r\n let contentElement = element.closest('.johannes-content-element');\r\n\r\n if (contentElement.classList.contains('checkbox-list')) {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewCheckboxLiElement)();\r\n } else if (contentElement.classList.contains('list')) {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewLiElement)();\r\n } else {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewDraggableParagraphElement)();\r\n }\r\n\r\n let parentBlock = null;\r\n\r\n if (contentElement.classList.contains('list')) {\r\n\r\n parentBlock = contentElement;\r\n\r\n const textContent = activeElement.textContent.trim();\r\n\r\n if (textContent === '') {\r\n\r\n parentBlock = element.closest('.draggable-block');\r\n\r\n element.closest('.deletable').remove();\r\n\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewDraggableParagraphElement)();\r\n parentBlock.insertAdjacentElement('afterend', newContentElement);\r\n\r\n } else {\r\n const activeElement = document.activeElement.closest('.list-item');\r\n activeElement.insertAdjacentElement('afterend', newContentElement);\r\n }\r\n\r\n } else {\r\n parentBlock = element.closest('.draggable-block');\r\n\r\n if (parentBlock) {\r\n if (parentBlock.nextSibling) {\r\n parentBlock.parentNode.insertBefore(newContentElement, parentBlock.nextSibling);\r\n } else {\r\n parentBlock.parentNode.appendChild(newContentElement);\r\n }\r\n }\r\n }\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.focusOnTheEndOfTheText)(newContentElement);\r\n}\r\n\r\n//** Delete the closest draggable-block parent of a child. Take the current selection if a child is not passed. */\r\nfunction deleteDraggableParentBlock(child) {\r\n\r\n let draggableBlockToRemove = null;\r\n\r\n if (child && child.closest('.draggable-block')) {\r\n draggableBlockToRemove = child.closest('.draggable-block');\r\n } else {\r\n draggableBlockToRemove = _j_selection__WEBPACK_IMPORTED_MODULE_2__.getCurrentDraggableBlockFocused();\r\n }\r\n\r\n if (draggableBlockToRemove) {\r\n draggableBlockToRemove.remove();\r\n } else {\r\n throw new Error('Focusable Element Not Found Exception');\r\n }\r\n\r\n clearAllAfterDelete();\r\n}\r\n\r\nfunction deleteAndFocusOnPrevious(){\r\n\r\n const currentActiveElement = document.activeElement;\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.focusOnPrevious)(currentActiveElement);\r\n deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentActiveElement);\r\n}\r\n\r\nfunction deleteAndFocusOnNext(){\r\n\r\n const currentActiveElement = document.activeElement;\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.focusOnNext)(currentActiveElement);\r\n deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentActiveElement);\r\n}\r\n\r\n\r\n//** Delete the current element and the draggable-block parent if empty. A block is empty if has no editable element inside. */\r\nfunction deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentElement) {\r\n\r\n const parentBlock = currentElement.closest('.draggable-block');\r\n const actual = currentElement.closest('.deletable');\r\n\r\n actual.remove();\r\n\r\n if (parentBlock && parentBlock.querySelectorAll('.editable').length == 0) {\r\n parentBlock.remove();\r\n }\r\n}\r\n\r\n/** Transform a block type into another */\r\nfunction transformBlock(blockElement, type) {\r\n\r\n let contentElement = blockElement.querySelector('.swittable');\r\n let content = contentElement.innerText;\r\n\r\n // if (content.endsWith('/')) {\r\n // content = content.slice(0, -1); // Remove the last '/'\r\n // }\r\n\r\n let newContentBlock;\r\n\r\n switch (type) {\r\n case 'p':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewParagraphElement();\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h1':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(1);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h2':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(2);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h3':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(3);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h4':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(4);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h5':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(5);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h6':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewHeadingElement(6);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'code':\r\n newContentBlock = document.createElement('pre');\r\n const code = document.createElement('code');\r\n code.innerText = content;\r\n newContentBlock.appendChild(code);\r\n break;\r\n case 'image':\r\n newContentBlock = document.createElement('img');\r\n newContentBlock.src = content;\r\n newContentBlock.alt = \"Descriptive text\";\r\n break;\r\n case 'quote':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewQuoteElement(content);\r\n\r\n break;\r\n }\r\n case 'bulleted-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewListElement(content);\r\n\r\n break;\r\n }\r\n\r\n case 'numbered-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewListElement(content, 'ol');\r\n\r\n break;\r\n }\r\n case 'todo-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewTodoListElement(content, 'ul');\r\n\r\n break;\r\n }\r\n\r\n case 'separator':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_1__.createNewSeparatorElement();\r\n break;\r\n }\r\n\r\n default:\r\n console.error('Unsupported type');\r\n return;\r\n }\r\n\r\n blockElement.replaceChild(newContentBlock, contentElement);\r\n\r\n const focusable = newContentBlock.closest('.focusable') || blockElement.querySelector('.focusable');\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.focusOnTheEndOfTheText)(focusable);\r\n}\r\n\r\n\r\nfunction moveDownBlock() {\r\n\r\n}\r\n\r\nfunction moveUpBlock() {\r\n\r\n}\r\n\r\nfunction duplicateBlock(block) {\r\n\r\n}\r\n\r\nfunction clearAllAfterDelete() {\r\n _j_selection__WEBPACK_IMPORTED_MODULE_2__.clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_3__.closeAll)();\r\n}\n\n//# sourceURL=webpack://johannes/./src/block-operation.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ createListItem: () => (/* binding */ createListItem),\n/* harmony export */ createNewElement: () => (/* binding */ createNewElement),\n/* harmony export */ deleteAndFocusOnNext: () => (/* binding */ deleteAndFocusOnNext),\n/* harmony export */ deleteAndFocusOnPrevious: () => (/* binding */ deleteAndFocusOnPrevious),\n/* harmony export */ deleteDraggableParentBlock: () => (/* binding */ deleteDraggableParentBlock),\n/* harmony export */ duplicateBlock: () => (/* binding */ duplicateBlock),\n/* harmony export */ moveDownBlock: () => (/* binding */ moveDownBlock),\n/* harmony export */ moveUpBlock: () => (/* binding */ moveUpBlock),\n/* harmony export */ transformBlock: () => (/* binding */ transformBlock)\n/* harmony export */ });\n/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./element-factory */ \"./src/element-factory.js\");\n/* harmony import */ var _j_selection__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-selection */ \"./src/j-selection.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n/* harmony import */ var _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-formatting-bar-operation */ \"./src/text-formatting-bar-operation.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n//** Create a default block or a element list */\r\nfunction createNewElement(event) {\r\n\r\n const element = event.target;\r\n\r\n const contentElement = element.closest('.johannes-content-element');\r\n\r\n if (contentElement && contentElement.classList.contains('list')) {\r\n createListItem(contentElement);\r\n } else {\r\n createADefaultBlock(contentElement);\r\n }\r\n}\r\n\r\n//** Just create a new paragraph draggable block and insert in the DOM */\r\nfunction createADefaultBlock(eventParagraph) {\r\n\r\n const newBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewDraggableParagraphElement();\r\n\r\n if (eventParagraph && eventParagraph.closest('.draggable-block')) {\r\n const sibling = eventParagraph.closest('.draggable-block');\r\n sibling.insertAdjacentElement('afterend', newBlock);\r\n } else {\r\n document.querySelector('.johannes-editor > .content').appendChild(newBlock);\r\n }\r\n\r\n const focusable = newBlock.querySelector('.johannes-content-element');\r\n // focusable.focus();\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_2__.focusOnTheEndOfTheText)(focusable);\r\n}\r\n\r\nfunction createListItem(element) {\r\n\r\n let newContentElement = null;\r\n\r\n let activeElement = document.activeElement;\r\n let contentElement = element.closest('.johannes-content-element');\r\n\r\n if (contentElement.classList.contains('checkbox-list')) {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewCheckboxLiElement)();\r\n } else if (contentElement.classList.contains('list')) {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewLiElement)();\r\n } else {\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewDraggableParagraphElement)();\r\n }\r\n\r\n let parentBlock = null;\r\n\r\n if (contentElement.classList.contains('list')) {\r\n\r\n parentBlock = contentElement;\r\n\r\n const textContent = activeElement.textContent.trim();\r\n\r\n if (textContent === '') {\r\n\r\n parentBlock = element.closest('.draggable-block');\r\n\r\n element.closest('.deletable').remove();\r\n\r\n newContentElement = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewDraggableParagraphElement)();\r\n parentBlock.insertAdjacentElement('afterend', newContentElement);\r\n\r\n } else {\r\n const activeElement = document.activeElement.closest('.list-item');\r\n activeElement.insertAdjacentElement('afterend', newContentElement);\r\n }\r\n\r\n } else {\r\n parentBlock = element.closest('.draggable-block');\r\n\r\n if (parentBlock) {\r\n if (parentBlock.nextSibling) {\r\n parentBlock.parentNode.insertBefore(newContentElement, parentBlock.nextSibling);\r\n } else {\r\n parentBlock.parentNode.appendChild(newContentElement);\r\n }\r\n }\r\n }\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_2__.focusOnTheEndOfTheText)(newContentElement);\r\n}\r\n\r\n//** Delete the closest draggable-block parent of a child. Take the current selection if a child is not passed. */\r\nfunction deleteDraggableParentBlock(child) {\r\n\r\n let draggableBlockToRemove = null;\r\n\r\n if (child && child instanceof HTMLElement && child.closest('.draggable-block')) {\r\n draggableBlockToRemove = child.closest('.draggable-block');\r\n } else {\r\n draggableBlockToRemove = _j_selection__WEBPACK_IMPORTED_MODULE_1__.getCurrentDraggableBlockFocused();\r\n }\r\n\r\n if (draggableBlockToRemove) {\r\n draggableBlockToRemove.remove();\r\n } else {\r\n throw new Error('Focusable Element Not Found Exception');\r\n }\r\n\r\n clearAllAfterDelete();\r\n}\r\n\r\nfunction deleteAndFocusOnPrevious() {\r\n\r\n const currentActiveElement = document.activeElement;\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_2__.focusOnPrevious)(currentActiveElement);\r\n deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentActiveElement);\r\n}\r\n\r\nfunction deleteAndFocusOnNext() {\r\n\r\n const currentActiveElement = document.activeElement;\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_2__.focusOnNext)(currentActiveElement);\r\n deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentActiveElement);\r\n}\r\n\r\n\r\n//** Delete the current element and the draggable-block parent if empty. A block is empty if has no editable element inside. */\r\nfunction deleteTheCurrentElementAndTheDraggableBlockIfEmpty(currentElement) {\r\n\r\n const parentBlock = currentElement.closest('.draggable-block');\r\n const actual = currentElement.closest('.deletable');\r\n\r\n actual.remove();\r\n\r\n if (parentBlock && parentBlock.querySelectorAll('.editable').length == 0) {\r\n parentBlock.remove();\r\n }\r\n}\r\n\r\n/** Transform a block type into another */\r\nfunction transformBlock(blockElement, type) {\r\n\r\n //blockElement, type\r\n\r\n\r\n let contentElement = blockElement.querySelector('.swittable');\r\n let content = contentElement.innerText;\r\n\r\n // if (content.endsWith('/')) {\r\n // content = content.slice(0, -1); // Remove the last '/'\r\n // }\r\n\r\n let newContentBlock;\r\n\r\n switch (type) {\r\n case 'p':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewParagraphElement();\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h1':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(1);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h2':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(2);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h3':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(3);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h4':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(4);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h5':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(5);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'h6':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewHeadingElement(6);\r\n newContentBlock.innerText = content;\r\n break;\r\n }\r\n case 'code':\r\n newContentBlock = document.createElement('pre');\r\n const code = document.createElement('code');\r\n code.innerText = content;\r\n newContentBlock.appendChild(code);\r\n break;\r\n case 'image':\r\n newContentBlock = document.createElement('img');\r\n newContentBlock.src = content;\r\n newContentBlock.alt = \"Descriptive text\";\r\n break;\r\n case 'quote':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewQuoteElement(content);\r\n\r\n break;\r\n }\r\n case 'bulleted-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewListElement(content);\r\n\r\n break;\r\n }\r\n\r\n case 'numbered-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewListElement(content, 'ol');\r\n\r\n break;\r\n }\r\n case 'todo-list':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewTodoListElement(content, 'ul');\r\n\r\n break;\r\n }\r\n\r\n case 'separator':\r\n {\r\n newContentBlock = _element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewSeparatorElement();\r\n break;\r\n }\r\n\r\n default:\r\n console.error('Unsupported type');\r\n return;\r\n }\r\n\r\n blockElement.replaceChild(newContentBlock, contentElement);\r\n\r\n const focusable = newContentBlock.closest('.focusable') || blockElement.querySelector('.focusable');\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_2__.focusOnTheEndOfTheText)(focusable);\r\n}\r\n\r\n\r\nfunction moveDownBlock() {\r\n\r\n}\r\n\r\nfunction moveUpBlock() {\r\n\r\n}\r\n\r\nfunction duplicateBlock(block) {\r\n\r\n}\r\n\r\nfunction clearAllAfterDelete() {\r\n _j_selection__WEBPACK_IMPORTED_MODULE_1__.clearAllSelection();\r\n\r\n (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.hideAllDependentBox)();\r\n (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.hideTextFormattingBar)();\r\n}\n\n//# sourceURL=webpack://johannes/./src/block-operation.js?"); /***/ }), -/***/ "./src/block-options-operations.js": -/*!*****************************************!*\ - !*** ./src/block-options-operations.js ***! - \*****************************************/ +/***/ "./src/block-options-operation.js": +/*!****************************************!*\ + !*** ./src/block-options-operation.js ***! + \****************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ applySelectedFakeFocusType: () => (/* binding */ applySelectedFakeFocusType),\n/* harmony export */ clear: () => (/* binding */ clear),\n/* harmony export */ filterContact: () => (/* binding */ filterContact),\n/* harmony export */ filterRemoveLast: () => (/* binding */ filterRemoveLast),\n/* harmony export */ hideAndClearBlockOptions: () => (/* binding */ hideAndClearBlockOptions),\n/* harmony export */ isShowingBlockOptions: () => (/* binding */ isShowingBlockOptions),\n/* harmony export */ moveTheFakeFocusToPreviousBlockOption: () => (/* binding */ moveTheFakeFocusToPreviousBlockOption),\n/* harmony export */ moveTheFakeFocusToTheNextBlockOption: () => (/* binding */ moveTheFakeFocusToTheNextBlockOption),\n/* harmony export */ removeDisplayNoneFromAllBlockOptions: () => (/* binding */ removeDisplayNoneFromAllBlockOptions),\n/* harmony export */ setCurrentDraggableBlock: () => (/* binding */ setCurrentDraggableBlock),\n/* harmony export */ setCurrentFakeFocusElement: () => (/* binding */ setCurrentFakeFocusElement),\n/* harmony export */ setRealFocusedElement: () => (/* binding */ setRealFocusedElement),\n/* harmony export */ showBlockOptions: () => (/* binding */ showBlockOptions)\n/* harmony export */ });\n/* harmony import */ var _block_operation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./block-operation */ \"./src/block-operation.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n\r\n\r\n\r\nlet currentDraggableBlock = null; //This element represents the block where block-options will be displayed close to\r\nlet currentFakeFocusedOption = null; //Fake focus is where the visual focus in on\r\nlet realFocusedElement = null; // This element is where the real/actual focus is on / TODO: change the name\r\nlet filterText = '';\r\n\r\n\r\nfunction isShowingBlockOptions() {\r\n return blockOptionsWrapper.style.display !== 'none'\r\n}\r\n\r\nfunction setCurrentDraggableBlock(element) {\r\n if (!element.classList.contains('draggable-block')) {\r\n throw new Error('The Element is Not a Draggable Block');\r\n }\r\n\r\n currentDraggableBlock = element;\r\n}\r\n\r\nfunction setRealFocusedElement(element) {\r\n realFocusedElement = element;\r\n}\r\n\r\nfunction setCurrentFakeFocusElement(element) {\r\n currentFakeFocusedOption = element;\r\n}\r\n\r\nfunction filterContact(event) {\r\n\r\n filterText += event.key.toLowerCase();\r\n\r\n updateBlockVisibility(filterText);\r\n\r\n const firstVisibleOption = getTheFirstVisibleBlockOption();\r\n removeAllVisualFakeFocus();\r\n\r\n setCurrentFakeFocusElement(firstVisibleOption);\r\n applyVisualFakeFocus(realFocusedElement, firstVisibleOption);\r\n}\r\n\r\nfunction filterRemoveLast() {\r\n\r\n if (filterText.length > 0) {\r\n\r\n filterText = filterText.slice(0, -1);\r\n\r\n updateBlockVisibility(filterText);\r\n\r\n const firstVisibleOption = getTheFirstVisibleBlockOption();\r\n removeAllVisualFakeFocus();\r\n\r\n setCurrentFakeFocusElement(firstVisibleOption);\r\n applyVisualFakeFocus(realFocusedElement, firstVisibleOption);\r\n\r\n } else {\r\n hideAndClearBlockOptions();\r\n }\r\n}\r\n\r\nfunction clear() {\r\n throw new Error('Not Implement Exception')\r\n}\r\n\r\nfunction showBlockOptions() {\r\n\r\n // The timeout in necessary to wait the browser process the selection before show the Block Options\r\n setTimeout(() => {\r\n\r\n const realFocusedElement = document.activeElement;\r\n const currentDraggableBlock = realFocusedElement.closest('.draggable-block');\r\n const firstBlockOption = getTheFirstVisibleBlockOption();\r\n\r\n setRealFocusedElement(realFocusedElement);\r\n setCurrentDraggableBlock(currentDraggableBlock);\r\n setCurrentFakeFocusElement(firstBlockOption);\r\n\r\n applyVisualFakeFocus(realFocusedElement, firstBlockOption);\r\n\r\n\r\n //TODO: create a clear filter\r\n // removeDisplayNoneFromAllBlockOptions();\r\n\r\n const range = document.getSelection().getRangeAt(0);\r\n const cursorPos = range.getBoundingClientRect();\r\n\r\n const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\r\n const menuWidth = 19 * remSize;\r\n\r\n let xPosition = cursorPos.right;\r\n let yPosition = cursorPos.bottom + window.scrollY;\r\n\r\n const margin = remSize * 1.25;\r\n\r\n blockOptionsWrapper.style.display = 'block';\r\n\r\n let blockWidth = blockOptionsWrapper.offsetWidth;\r\n\r\n\r\n if (xPosition + blockWidth + margin > window.innerWidth) {\r\n xPosition = cursorPos.left - menuWidth;\r\n if (xPosition < 0) xPosition = 0;\r\n }\r\n\r\n blockOptionsWrapper.style.left = `${xPosition}px`;\r\n blockOptionsWrapper.style.top = `${yPosition}px`;\r\n\r\n\r\n }, 10);\r\n}\r\n\r\nfunction hideAndClearBlockOptions(elementToFocus) {\r\n\r\n if (elementToFocus) {\r\n elementToFocus.focus();\r\n }\r\n\r\n blockOptionsWrapper.style.display = 'none';\r\n clearFilter();\r\n\r\n //TODO: rename this\r\n removeDisplayNoneFromAllBlockOptions();\r\n}\r\n\r\n\r\n\r\n// TODO:Rename this function\r\nfunction removeDisplayNoneFromAllBlockOptions() {\r\n let sections = document.querySelectorAll('.johannes-editor .block-options-wrapper section');\r\n\r\n sections.forEach(section => {\r\n let options = section.querySelectorAll('.option');\r\n\r\n options.forEach(option => {\r\n option.style.display = '';\r\n });\r\n\r\n section.style.display = '';\r\n });\r\n}\r\n\r\nfunction moveTheFakeFocusToPreviousBlockOption() {\r\n let previous = currentFakeFocusedOption.previousElementSibling;\r\n\r\n while (previous && (!previous.classList.contains('option') || !isElementVisible(previous))) {\r\n previous = previous.previousElementSibling;\r\n }\r\n\r\n if (!previous) {\r\n let currentSection = currentFakeFocusedOption.closest('section');\r\n let siblingSection = currentSection.previousElementSibling;\r\n\r\n while (siblingSection) {\r\n let options = siblingSection.querySelectorAll('.option');\r\n for (let i = options.length - 1; i >= 0; i--) {\r\n if (isElementVisible(options[i])) {\r\n previous = options[i];\r\n break;\r\n }\r\n }\r\n if (previous) break;\r\n siblingSection = siblingSection.previousElementSibling;\r\n }\r\n\r\n if (!previous) {\r\n let options = document.querySelectorAll('.block-options-wrapper .option');\r\n for (let i = options.length - 1; i >= 0; i--) {\r\n if (isElementVisible(options[i])) {\r\n previous = options[i];\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n removeAllVisualFakeFocus();\r\n setCurrentFakeFocusElement(previous);\r\n applyVisualFakeFocus(realFocusedElement, previous);\r\n}\r\n\r\nfunction moveTheFakeFocusToTheNextBlockOption() {\r\n\r\n let next = currentFakeFocusedOption.nextElementSibling;\r\n\r\n while (next && (!next.classList.contains('option') || !isElementVisible(next))) {\r\n next = next.nextElementSibling;\r\n }\r\n\r\n if (!next) {\r\n let currentSection = currentFakeFocusedOption.closest('section');\r\n let siblingSection = currentSection.nextElementSibling;\r\n\r\n while (siblingSection) {\r\n next = siblingSection.querySelector('.option');\r\n if (next && isElementVisible(next)) {\r\n break;\r\n }\r\n siblingSection = siblingSection.nextElementSibling;\r\n }\r\n\r\n if (!next) {\r\n next = document.querySelector('.block-options-wrapper .option');\r\n while (next && !isElementVisible(next)) {\r\n next = next.nextElementSibling;\r\n }\r\n }\r\n }\r\n\r\n removeAllVisualFakeFocus();\r\n setCurrentFakeFocusElement(next);\r\n applyVisualFakeFocus(realFocusedElement, next);\r\n}\r\n\r\n\r\nfunction applySelectedFakeFocusType() {\r\n\r\n const draggableBlock = realFocusedElement.closest('.draggable-block');\r\n const newBlockType = currentFakeFocusedOption.getAttribute('data-type');\r\n\r\n const lastSlashIndex = realFocusedElement.innerText.lastIndexOf('/');\r\n realFocusedElement.innerText = lastSlashIndex !== -1 ? realFocusedElement.innerText.slice(0, lastSlashIndex) : realFocusedElement.innerText;\r\n\r\n\r\n (0,_block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock)(draggableBlock, newBlockType);\r\n\r\n // focusOnTheEndOfTheText(realFocusedElement);\r\n hideAndClearBlockOptions();\r\n}\r\n\r\nfunction clearFilter() {\r\n filterText = '';\r\n}\r\n\r\nfunction isElementVisible(element) {\r\n return element && element.style.display !== 'none' && element.style.visibility !== 'hidden' && element.offsetParent !== null;\r\n}\r\n\r\nfunction getTheFirstVisibleBlockOption() {\r\n\r\n let options = blockOptionsWrapper.querySelectorAll('.option');\r\n\r\n for (let option of options) {\r\n if (option.style.display !== 'none') {\r\n return option;\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n\r\nfunction applyVisualFakeFocus(realFocusedElement, elementToApplyFakeFocus) {\r\n\r\n if (elementToApplyFakeFocus) {\r\n elementToApplyFakeFocus.focus();\r\n elementToApplyFakeFocus.classList.add('block-options-focused');\r\n }\r\n\r\n realFocusedElement.focus();\r\n}\r\n\r\nfunction removeAllVisualFakeFocus() {\r\n let focusedElements = blockOptionsWrapper.querySelectorAll('.block-options-focused');\r\n\r\n focusedElements.forEach(element => {\r\n element.classList.remove('block-options-focused');\r\n });\r\n}\r\n\r\nfunction updateBlockVisibility(filter) {\r\n\r\n let sections = blockOptionsWrapper.querySelectorAll('section');\r\n\r\n sections.forEach(section => {\r\n let options = section.querySelectorAll('.option');\r\n let allHidden = true;\r\n\r\n options.forEach(option => {\r\n const type = option.getAttribute('data-type');\r\n const title = option.querySelector('.block-title').textContent.toLowerCase();\r\n\r\n if (type.includes(filter) || title.includes(filter.toLowerCase())) {\r\n option.style.display = '';\r\n allHidden = false;\r\n } else {\r\n option.style.display = 'none';\r\n }\r\n });\r\n\r\n section.style.display = allHidden ? 'none' : '';\r\n });\r\n\r\n let emptyListIndicator = document.querySelector('.empty-block-options');\r\n\r\n let allOptions = blockOptionsWrapper.querySelectorAll('.option');\r\n\r\n let hasVisibleOption = Array.from(allOptions).some(option => {\r\n let style = window.getComputedStyle(option);\r\n return style.display !== 'none';\r\n });\r\n\r\n if (hasVisibleOption) {\r\n emptyListIndicator.style.display = 'none';\r\n\r\n } else {\r\n emptyListIndicator.style.display = 'block';\r\n }\r\n}\n\n//# sourceURL=webpack://johannes/./src/block-options-operations.js?"); - -/***/ }), - -/***/ "./src/clear-form-pasting.js": -/*!***********************************!*\ - !*** ./src/clear-form-pasting.js ***! - \***********************************/ -/***/ (() => { - -eval("document.addEventListener('DOMContentLoaded', function () {\r\n\r\n const editor = document.querySelector('.johannes-editor');\r\n\r\n if (editor) {\r\n document.addEventListener('paste', function (e) {\r\n if (e.target.getAttribute('contenteditable') === 'true') {\r\n e.preventDefault();\r\n const text = (e.clipboardData || window.clipboardData).getData('text/plain');\r\n insertTextAtCursor(text);\r\n }\r\n }, true);\r\n\r\n function insertTextAtCursor(text) {\r\n const sel = window.getSelection();\r\n if (sel.rangeCount > 0) {\r\n const range = sel.getRangeAt(0);\r\n range.deleteContents();\r\n\r\n const textNode = document.createTextNode(text);\r\n range.insertNode(textNode);\r\n\r\n range.setStartAfter(textNode);\r\n range.setEndAfter(textNode);\r\n sel.removeAllRanges();\r\n sel.addRange(range);\r\n }\r\n }\r\n }\r\n});\n\n//# sourceURL=webpack://johannes/./src/clear-form-pasting.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ applySelectedBlockType: () => (/* binding */ applySelectedBlockType),\n/* harmony export */ clear: () => (/* binding */ clear),\n/* harmony export */ filterContact: () => (/* binding */ filterContact),\n/* harmony export */ filterRemoveLast: () => (/* binding */ filterRemoveLast),\n/* harmony export */ hideAndClearBlockOptions: () => (/* binding */ hideAndClearBlockOptions),\n/* harmony export */ isShowingBlockOptions: () => (/* binding */ isShowingBlockOptions),\n/* harmony export */ moveTheFakeFocusToPreviousBlockOption: () => (/* binding */ moveTheFakeFocusToPreviousBlockOption),\n/* harmony export */ moveTheFakeFocusToTheNextBlockOption: () => (/* binding */ moveTheFakeFocusToTheNextBlockOption),\n/* harmony export */ removeDisplayNoneFromAllBlockOptions: () => (/* binding */ removeDisplayNoneFromAllBlockOptions),\n/* harmony export */ setCurrentDraggableBlock: () => (/* binding */ setCurrentDraggableBlock),\n/* harmony export */ setCurrentFakeFocusElement: () => (/* binding */ setCurrentFakeFocusElement),\n/* harmony export */ setRealFocusedElement: () => (/* binding */ setRealFocusedElement),\n/* harmony export */ showDependentBlockOptions: () => (/* binding */ showDependentBlockOptions),\n/* harmony export */ showMainBlockOptions: () => (/* binding */ showMainBlockOptions)\n/* harmony export */ });\n/* harmony import */ var _block_operation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./block-operation */ \"./src/block-operation.js\");\n/* harmony import */ var _j_selection__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-selection */ \"./src/j-selection.js\");\n/* harmony import */ var _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./text-formatting-bar-operation */ \"./src/text-formatting-bar-operation.js\");\n\r\n\r\n\r\n\r\n\r\nlet currentDraggableBlock = null; //This element represents the block where block-options will be displayed close to\r\nlet currentFakeFocusedOption = null; //Fake focus is where the visual focus in on\r\nlet realFocusedElement = null; // This element is where the real/actual focus is on / TODO: change the name\r\nlet filterText = '';\r\n\r\nfunction isShowingBlockOptions() {\r\n return blockOptionsWrapper.style.display !== 'none'\r\n}\r\n\r\nfunction setCurrentDraggableBlock(element) {\r\n if (!element.classList.contains('draggable-block')) {\r\n throw new Error('The Element is Not a Draggable Block');\r\n }\r\n\r\n currentDraggableBlock = element;\r\n}\r\n\r\nfunction setRealFocusedElement(element) {\r\n realFocusedElement = element;\r\n}\r\n\r\nfunction setCurrentFakeFocusElement(element) {\r\n currentFakeFocusedOption = element;\r\n}\r\n\r\nfunction filterContact(event) {\r\n\r\n filterText += event.key.toLowerCase();\r\n\r\n updateBlockVisibility(filterText);\r\n\r\n const firstVisibleOption = getTheFirstVisibleBlockOption();\r\n removeAllVisualFakeFocus();\r\n\r\n setCurrentFakeFocusElement(firstVisibleOption);\r\n applyVisualFakeFocus(realFocusedElement, firstVisibleOption);\r\n}\r\n\r\nfunction filterRemoveLast() {\r\n\r\n if (filterText.length > 0) {\r\n\r\n filterText = filterText.slice(0, -1);\r\n\r\n updateBlockVisibility(filterText);\r\n\r\n const firstVisibleOption = getTheFirstVisibleBlockOption();\r\n removeAllVisualFakeFocus();\r\n\r\n setCurrentFakeFocusElement(firstVisibleOption);\r\n applyVisualFakeFocus(realFocusedElement, firstVisibleOption);\r\n\r\n } else {\r\n hideAndClearBlockOptions();\r\n }\r\n}\r\n\r\nfunction clear() {\r\n throw new Error('Not Implement Exception')\r\n}\r\n\r\nfunction showDependentBlockOptions(element) {\r\n // The timeout in necessary to wait the browser process the selection before show the Block Options\r\n setTimeout(() => {\r\n\r\n removeAllVisualFakeFocus();\r\n\r\n let draggableBlock = (0,_j_selection__WEBPACK_IMPORTED_MODULE_1__.getCurrentDraggableBlockFocused)();\r\n\r\n const realFocusedElement = draggableBlock.querySelector('.focusable');\r\n const currentDraggableBlock = draggableBlock;\r\n const firstBlockOption = getTheFirstVisibleBlockOptionV2(element);\r\n\r\n setRealFocusedElement(realFocusedElement);\r\n setCurrentDraggableBlock(currentDraggableBlock);\r\n setCurrentFakeFocusElement(null);\r\n\r\n applyVisualFakeFocus(realFocusedElement, null);\r\n\r\n }, 10);\r\n}\r\n\r\nfunction showMainBlockOptions() {\r\n\r\n // The timeout in necessary to wait the browser process the selection before show the Block Options\r\n setTimeout(() => {\r\n\r\n const realFocusedElement = document.activeElement;\r\n const currentDraggableBlock = realFocusedElement.closest('.draggable-block');\r\n const firstBlockOption = getTheFirstVisibleBlockOption();\r\n\r\n setRealFocusedElement(realFocusedElement);\r\n setCurrentDraggableBlock(currentDraggableBlock);\r\n setCurrentFakeFocusElement(firstBlockOption);\r\n\r\n applyVisualFakeFocus(realFocusedElement, firstBlockOption);\r\n\r\n\r\n //TODO: create a clear filter\r\n // removeDisplayNoneFromAllBlockOptions();\r\n\r\n const range = document.getSelection().getRangeAt(0);\r\n const cursorPos = range.getBoundingClientRect();\r\n\r\n const remSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\r\n const menuWidth = 19 * remSize;\r\n\r\n let xPosition = cursorPos.right;\r\n let yPosition = cursorPos.bottom + window.scrollY;\r\n\r\n const margin = remSize * 1.25;\r\n\r\n blockOptionsWrapper.style.display = 'block';\r\n\r\n let blockWidth = blockOptionsWrapper.offsetWidth;\r\n\r\n\r\n if (xPosition + blockWidth + margin > window.innerWidth) {\r\n xPosition = cursorPos.left - menuWidth;\r\n if (xPosition < 0) xPosition = 0;\r\n }\r\n\r\n blockOptionsWrapper.style.left = `${xPosition}px`;\r\n blockOptionsWrapper.style.top = `${yPosition}px`;\r\n\r\n\r\n }, 10);\r\n}\r\n\r\nfunction hideAndClearBlockOptions(elementToFocus) {\r\n\r\n if (elementToFocus) {\r\n elementToFocus.focus();\r\n }\r\n\r\n blockOptionsWrapper.style.display = 'none';\r\n clearFilter();\r\n\r\n //TODO: rename this\r\n removeDisplayNoneFromAllBlockOptions();\r\n}\r\n\r\n\r\n\r\n// TODO:Rename this function\r\nfunction removeDisplayNoneFromAllBlockOptions() {\r\n let sections = document.querySelectorAll('.johannes-editor .block-options-wrapper section');\r\n\r\n sections.forEach(section => {\r\n let options = section.querySelectorAll('.option');\r\n\r\n options.forEach(option => {\r\n option.style.display = '';\r\n });\r\n\r\n section.style.display = '';\r\n });\r\n}\r\n\r\nfunction moveTheFakeFocusToPreviousBlockOption() {\r\n\r\n if (!currentFakeFocusedOption) {\r\n let options = document.getElementById(getVisibleSelectionId()).querySelectorAll('.option');\r\n currentFakeFocusedOption = options[options.length - 1];\r\n\r\n applyVisualFakeFocus(realFocusedElement, currentFakeFocusedOption);\r\n\r\n return;\r\n }\r\n\r\n let previous = currentFakeFocusedOption.previousElementSibling;\r\n\r\n while (previous && (!previous.classList.contains('option') || !isElementVisible(previous))) {\r\n previous = previous.previousElementSibling;\r\n }\r\n\r\n if (!previous) {\r\n let currentSection = currentFakeFocusedOption.closest('section');\r\n let siblingSection;\r\n\r\n if (currentSection) {\r\n siblingSection = currentSection.previousElementSibling;\r\n } else {\r\n siblingSection = currentFakeFocusedOption.closest('ul');\r\n }\r\n\r\n while (siblingSection) {\r\n let options = siblingSection.querySelectorAll('.option');\r\n for (let i = options.length - 1; i >= 0; i--) {\r\n if (isElementVisible(options[i])) {\r\n previous = options[i];\r\n break;\r\n }\r\n }\r\n if (previous) break;\r\n siblingSection = siblingSection.previousElementSibling;\r\n }\r\n\r\n if (!previous) {\r\n let options = document.querySelectorAll('.block-options-wrapper .option');\r\n for (let i = options.length - 1; i >= 0; i--) {\r\n if (isElementVisible(options[i])) {\r\n previous = options[i];\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n removeAllVisualFakeFocus();\r\n setCurrentFakeFocusElement(previous);\r\n applyVisualFakeFocus(realFocusedElement, previous);\r\n}\r\n\r\n\r\nfunction getVisibleSelectionId() {\r\n if (turnIntoSelect.style.display !== 'none') {\r\n return 'turnIntoSelect';\r\n }\r\n\r\n if (colorTextOptionSelect.style.display !== 'none') {\r\n return 'colorTextOptionSelect';\r\n }\r\n\r\n if (moreTextOptionSelect.style.display !== 'none') {\r\n return 'moreTextOptionSelect';\r\n }\r\n}\r\n\r\nfunction moveTheFakeFocusToTheNextBlockOption() {\r\n\r\n if (!currentFakeFocusedOption) {\r\n currentFakeFocusedOption = document.getElementById(getVisibleSelectionId()).querySelectorAll('.option')[0];\r\n\r\n applyVisualFakeFocus(realFocusedElement, currentFakeFocusedOption);\r\n\r\n return;\r\n }\r\n\r\n let next = currentFakeFocusedOption.nextElementSibling;\r\n\r\n while (next && (!next.classList.contains('option') || !isElementVisible(next))) {\r\n next = next.nextElementSibling;\r\n }\r\n\r\n if (!next) {\r\n let currentSection = currentFakeFocusedOption.closest('section');\r\n let siblingSection;\r\n\r\n if (currentSection) {\r\n siblingSection = currentSection.nextElementSibling;\r\n } else {\r\n siblingSection = currentFakeFocusedOption.closest('ul');\r\n }\r\n\r\n while (siblingSection) {\r\n next = siblingSection.querySelector('.option');\r\n if (next && isElementVisible(next)) {\r\n break;\r\n }\r\n siblingSection = siblingSection.nextElementSibling;\r\n }\r\n\r\n if (!next) {\r\n next = document.querySelector('.block-options-wrapper .option');\r\n while (next && !isElementVisible(next)) {\r\n next = next.nextElementSibling;\r\n }\r\n }\r\n }\r\n\r\n removeAllVisualFakeFocus();\r\n setCurrentFakeFocusElement(next);\r\n applyVisualFakeFocus(realFocusedElement, next);\r\n}\r\n\r\n\r\nfunction applySelectedBlockType(event) {\r\n\r\n const draggableBlock = realFocusedElement.closest('.draggable-block');\r\n const newBlockType = event.target.closest('.option') ?\r\n event.target.closest('.option').getAttribute('data-type') :\r\n currentFakeFocusedOption.getAttribute('data-type');\r\n\r\n const lastSlashIndex = realFocusedElement.innerText.lastIndexOf('/');\r\n realFocusedElement.innerText = lastSlashIndex !== -1 ? realFocusedElement.innerText.slice(0, lastSlashIndex) : realFocusedElement.innerText;\r\n\r\n\r\n (0,_block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock)(draggableBlock, newBlockType);\r\n\r\n hideAndClearBlockOptions();\r\n (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_2__.hideAllDependentBox)();\r\n (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_2__.hideTextFormattingBar)();\r\n}\r\n\r\nfunction clearFilter() {\r\n filterText = '';\r\n}\r\n\r\nfunction isElementVisible(element) {\r\n return element && element.style.display !== 'none' && element.style.visibility !== 'hidden' && element.offsetParent !== null;\r\n}\r\n\r\nfunction getTheFirstVisibleBlockOptionV2(element) {\r\n\r\n let button = element.closest('button');\r\n let listId = button.getAttribute('aria-controls');\r\n let list = document.querySelector(`#${listId}`);\r\n\r\n let options = list.querySelectorAll('.option');\r\n\r\n // for (let option of options) {\r\n // if (option.style.display !== 'none') {\r\n // return option;\r\n // }\r\n // }\r\n\r\n return options[0];\r\n\r\n}\r\n\r\nfunction getTheFirstVisibleBlockOption() {\r\n\r\n let options = blockOptionsWrapper.querySelectorAll('.option');\r\n\r\n for (let option of options) {\r\n if (option.style.display !== 'none') {\r\n return option;\r\n }\r\n }\r\n\r\n return null;\r\n}\r\n\r\nfunction applyVisualFakeFocus(realFocusedElement, elementToApplyFakeFocus) {\r\n\r\n if (elementToApplyFakeFocus) {\r\n elementToApplyFakeFocus.focus();\r\n elementToApplyFakeFocus.classList.add('block-options-focused');\r\n }\r\n\r\n realFocusedElement.focus();\r\n}\r\n\r\n// function applyVisualFakeAndRealFocus(elementToApplyFakeFocus) {\r\n\r\n// if (elementToApplyFakeFocus) {\r\n// elementToApplyFakeFocus.focus();\r\n// elementToApplyFakeFocus.classList.add('block-options-focused');\r\n// }\r\n// }\r\n\r\nfunction removeAllVisualFakeFocus() {\r\n let focusedElements = document.querySelectorAll('.block-options-focused');\r\n\r\n focusedElements.forEach(element => {\r\n element.classList.remove('block-options-focused');\r\n });\r\n}\r\n\r\nfunction updateBlockVisibility(filter) {\r\n\r\n let sections = blockOptionsWrapper.querySelectorAll('section');\r\n\r\n sections.forEach(section => {\r\n let options = section.querySelectorAll('.option');\r\n let allHidden = true;\r\n\r\n options.forEach(option => {\r\n const type = option.getAttribute('data-type');\r\n const title = option.querySelector('.block-title').textContent.toLowerCase();\r\n\r\n if (type.includes(filter) || title.includes(filter.toLowerCase())) {\r\n option.style.display = '';\r\n allHidden = false;\r\n } else {\r\n option.style.display = 'none';\r\n }\r\n });\r\n\r\n section.style.display = allHidden ? 'none' : '';\r\n });\r\n\r\n let emptyListIndicator = document.querySelector('.empty-block-options');\r\n\r\n let allOptions = blockOptionsWrapper.querySelectorAll('.option');\r\n\r\n let hasVisibleOption = Array.from(allOptions).some(option => {\r\n let style = window.getComputedStyle(option);\r\n return style.display !== 'none';\r\n });\r\n\r\n if (hasVisibleOption) {\r\n emptyListIndicator.style.display = 'none';\r\n\r\n } else {\r\n emptyListIndicator.style.display = 'block';\r\n }\r\n}\n\n//# sourceURL=webpack://johannes/./src/block-options-operation.js?"); /***/ }), @@ -70,7 +49,7 @@ eval("document.addEventListener('DOMContentLoaded', function () {\r\n\r\n con /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _command_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./command-factory */ \"./src/command-factory.js\");\n// The start point for click events\r\n\r\n\r\n\r\n// Block operations events\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n if (johannesEditor) {\r\n document.querySelectorAll('.block-operation').forEach(option => {\r\n option.addEventListener('click', function () {\r\n\r\n const operation = this.getAttribute('data-block-operation');\r\n\r\n const command = (0,_command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand)(operation);\r\n\r\n command.execute();\r\n\r\n });\r\n });\r\n }\r\n});\r\n\r\n\r\n// Text operations events\r\n//CODE...\n\n//# sourceURL=webpack://johannes/./src/click-events.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _command_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./command-factory */ \"./src/command-factory.js\");\n/* harmony import */ var _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./text-formatting-bar-operation */ \"./src/text-formatting-bar-operation.js\");\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helper */ \"./src/helper.js\");\n// The start point for click events\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nlet isMousedownKeyTrigger = false;\r\n\r\n// Block operations events\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n if (johannesEditor) {\r\n document.querySelectorAll('.block-operation').forEach(option => {\r\n option.addEventListener('click', function (event) {\r\n\r\n const operation = this.getAttribute('data-block-operation');\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(operation, [event]);\r\n\r\n command.execute();\r\n });\r\n });\r\n }\r\n});\r\n\r\n\r\n// Text operations events\r\n//CODE...\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n if (johannesEditor) {\r\n document.querySelectorAll('.text-formatting-operation').forEach(option => {\r\n option.addEventListener('click', function (event) {\r\n\r\n const operation = this.getAttribute('data-text-formatting-operation');\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(operation, [event]);\r\n\r\n command.execute();\r\n\r\n });\r\n });\r\n }\r\n});\r\n\r\n\r\n\r\n\r\ndocument.addEventListener('mousedown', function(event){\r\n if((0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event)){\r\n isMousedownKeyTrigger = true;\r\n }\r\n});\r\n\r\n//Mouse up + selection event\r\ndocument.addEventListener('mouseup', function (event) {\r\n if (window.getSelection().toString().trim() !== '' && isMousedownKeyTrigger && !(0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingTextFormattingBar)()) {\r\n\r\n setTimeout(() => {\r\n if (window.getSelection().toString().trim() !== '') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.SHOW_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n }, 10);\r\n\r\n // clearTextFormattingButtonActive();\r\n // showTextFormattingBar(event);\r\n // updateTextFormattingActiveButtons();\r\n\r\n }\r\n});\r\n\r\n\r\n//\r\ndocument.addEventListener('mouseup', function (event) {\r\n if ((0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingTextFormattingBar)() && (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_1__.canHideTextFormattingBar)() && (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_1__.isOutOfTextFormattingBar)(event)) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.HIDE_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n});\n\n//# sourceURL=webpack://johannes/./src/click-events.js?"); /***/ }), @@ -81,7 +60,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _com /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ OPERATIONS: () => (/* binding */ OPERATIONS),\n/* harmony export */ createCommand: () => (/* binding */ createCommand),\n/* harmony export */ getBlockOperationFunction: () => (/* binding */ getBlockOperationFunction),\n/* harmony export */ operationMap: () => (/* binding */ operationMap)\n/* harmony export */ });\n/* harmony import */ var _block_operation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./block-operation */ \"./src/block-operation.js\");\n/* harmony import */ var _block_options_operations__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./block-options-operations */ \"./src/block-options-operations.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n\r\n\r\n\r\n\r\nfunction createCommand(operationName, elements = null) {\r\n return new Command(operationName, elements);\r\n}\r\n\r\nclass Command {\r\n\r\n constructor(operationName, elements) {\r\n this.elements = elements;\r\n this.operation = getBlockOperationFunction(operationName);\r\n }\r\n\r\n execute() {\r\n if (this.elements !== null) {\r\n this.operation(...this.elements);\r\n } else {\r\n this.operation();\r\n }\r\n }\r\n}\r\n\r\nconst OPERATIONS = {\r\n BLOCK: {\r\n CREATE_DEFAULT_BLOCK: 'create-default-block',\r\n CREATE_LIST_ELEMENT: 'create-list-element',\r\n CREATE_NEW_ELEMENT: 'create-new-element',\r\n DELETE_DRAGGABLE_BLOCK: 'delete-draggable-block',\r\n DELETE_AND_FOCUS_ON_NEXT: 'delete-and-focus-on-next',\r\n DELETE_AND_FOCUS_ON_PREVIOUS: 'delete-and-focus-on-previous',\r\n DUPLICATE_BLOCK: 'duplicate-block',\r\n TRANSFORM_BLOCK: 'transform-block',\r\n MOVE_UP_BLOCK: 'move-up-block',\r\n MOVE_DOWN_BLOCK: 'move-down-block',\r\n SHOW_TURN_INTO_BOX: 'show-turn-into-box',\r\n SHOW_COLOR_BOX: 'show-color-box',\r\n SHOW_MORE_OPTIONS_BOX: 'show-more-options-box'\r\n },\r\n BLOCK_OPTIONS: {\r\n SHOW_BLOCK_OPTIONS: 'show-block-options',\r\n HIDE_CLEAR_BLOCK_OPTIONS: 'hide-clear-block-options',\r\n MOVE_FAKE_FOCUS_TO_NEXT_OPTION: 'move-fake-focus-to-next-option',\r\n MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION: 'move-fake-focus-to-previous-option',\r\n APPLY_SELECTED_FAKE_FOCUS_TYPE: 'apply-selected-fake-focus-type',\r\n FILTER_CONCAT: 'filter-contact',\r\n FILTER_REMOVE_LAST: 'filter-remove-last',\r\n },\r\n FORMATTING_BAR: {\r\n SHOW_TEXT_FORMATTING_BAR: 'show-text-formatting-bar',\r\n },\r\n\r\n};\r\n\r\nconst operationMap = {\r\n [OPERATIONS.BLOCK.CREATE_DEFAULT_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.createADefaultBlock,\r\n [OPERATIONS.BLOCK.CREATE_LIST_ELEMENT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.createListItem,\r\n [OPERATIONS.BLOCK.CREATE_NEW_ELEMENT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.createNewElement,\r\n [OPERATIONS.BLOCK.DELETE_DRAGGABLE_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteDraggableParentBlock,\r\n [OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_NEXT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteAndFocusOnNext,\r\n [OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_PREVIOUS]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteAndFocusOnPrevious,\r\n [OPERATIONS.BLOCK.DUPLICATE_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.duplicateBlock,\r\n [OPERATIONS.BLOCK.TRANSFORM_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.BLOCK.MOVE_UP_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.moveUpBlock,\r\n [OPERATIONS.BLOCK.MOVE_DOWN_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.moveDownBlock,\r\n [OPERATIONS.BLOCK_OPTIONS.SHOW_BLOCK_OPTIONS]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.showBlockOptions,\r\n [OPERATIONS.BLOCK_OPTIONS.HIDE_CLEAR_BLOCK_OPTIONS]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.hideAndClearBlockOptions,\r\n [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.moveTheFakeFocusToTheNextBlockOption,\r\n [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.moveTheFakeFocusToPreviousBlockOption,\r\n [OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_FAKE_FOCUS_TYPE]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.applySelectedFakeFocusType,\r\n [OPERATIONS.BLOCK_OPTIONS.FILTER_CONCAT]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.filterContact,\r\n [OPERATIONS.BLOCK_OPTIONS.FILTER_REMOVE_LAST]: _block_options_operations__WEBPACK_IMPORTED_MODULE_1__.filterRemoveLast,\r\n [OPERATIONS.SHOW_TEXT_FORMATTING_BAR]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.SHOW_TURN_INTO_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.SHOW_COLOR_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.SHOW_MORE_OPTIONS_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock\r\n};\r\n\r\nfunction getBlockOperationFunction(blockOperation) {\r\n const operationFunction = operationMap[blockOperation];\r\n if (!operationFunction) {\r\n throw new Error('Operation Not Found Exception');\r\n }\r\n return operationFunction;\r\n}\n\n//# sourceURL=webpack://johannes/./src/command-factory.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ OPERATIONS: () => (/* binding */ OPERATIONS),\n/* harmony export */ createCommand: () => (/* binding */ createCommand),\n/* harmony export */ getBlockOperationFunction: () => (/* binding */ getBlockOperationFunction),\n/* harmony export */ operationMap: () => (/* binding */ operationMap)\n/* harmony export */ });\n/* harmony import */ var _block_operation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./block-operation */ \"./src/block-operation.js\");\n/* harmony import */ var _block_options_operation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./block-options-operation */ \"./src/block-options-operation.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n/* harmony import */ var _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-formatting-bar-operation */ \"./src/text-formatting-bar-operation.js\");\n\r\n\r\n\r\n\r\n\r\n\r\nfunction createCommand(operationName, elements = null) {\r\n return new Command(operationName, elements);\r\n}\r\n\r\nclass Command {\r\n\r\n constructor(operationName, elements) {\r\n this.elements = elements;\r\n this.operation = getBlockOperationFunction(operationName);\r\n }\r\n\r\n execute() {\r\n if (this.elements !== null) {\r\n this.operation(...this.elements);\r\n } else {\r\n this.operation();\r\n }\r\n }\r\n}\r\n\r\nconst OPERATIONS = {\r\n BLOCK: {\r\n CREATE_LIST_ELEMENT: 'create-list-element',\r\n CREATE_NEW_ELEMENT: 'create-new-element',\r\n DELETE_DRAGGABLE_BLOCK: 'delete-draggable-block',\r\n DELETE_AND_FOCUS_ON_NEXT: 'delete-and-focus-on-next',\r\n DELETE_AND_FOCUS_ON_PREVIOUS: 'delete-and-focus-on-previous',\r\n DUPLICATE_BLOCK: 'duplicate-block',\r\n TRANSFORM_BLOCK: 'transform-block',\r\n MOVE_UP_BLOCK: 'move-up-block',\r\n MOVE_DOWN_BLOCK: 'move-down-block',\r\n SHOW_TURN_INTO_BOX: 'show-turn-into-box',\r\n SHOW_COLOR_BOX: 'show-color-box',\r\n SHOW_MORE_OPTIONS_BOX: 'show-more-options-box'\r\n },\r\n BLOCK_OPTIONS: {\r\n SHOW_BLOCK_OPTIONS: 'show-block-options',\r\n HIDE_CLEAR_BLOCK_OPTIONS: 'hide-clear-block-options',\r\n MOVE_FAKE_FOCUS_TO_NEXT_OPTION: 'move-fake-focus-to-next-option',\r\n MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION: 'move-fake-focus-to-previous-option',\r\n APPLY_SELECTED_BLOCK_TYPE: 'apply-selected-block-type',\r\n FILTER_CONCAT: 'filter-contact',\r\n FILTER_REMOVE_LAST: 'filter-remove-last',\r\n },\r\n FORMATTING_BAR: {\r\n SHOW_TEXT_FORMATTING_BAR: 'show-text-formatting-bar',\r\n HIDE_TEXT_FORMATTING_BAR: 'hide-text-formatting-bar',\r\n TOGGLE_MORE_OPTIONS_BOX: 'toggle-more-options-box',\r\n TOGGLE_CHANGE_COLOR_BOX: 'toggle-change-color-box',\r\n TOGGLE_TURN_INTO_BOX: 'toggle-turn-into-box',\r\n TOGGLE_INPUT_LINK_BOX: 'toggle-input-link-box',\r\n INPUT_LINK_URL: 'input-link-url', \r\n TOGGLE_ENCLOSE_SELECTED_TEXT_TO: 'toggle-enclose-selected-text-to',\r\n },\r\n\r\n};\r\n\r\nconst operationMap = {\r\n [OPERATIONS.BLOCK.CREATE_LIST_ELEMENT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.createListItem,\r\n [OPERATIONS.BLOCK.CREATE_NEW_ELEMENT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.createNewElement,\r\n [OPERATIONS.BLOCK.DELETE_DRAGGABLE_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteDraggableParentBlock,\r\n [OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_NEXT]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteAndFocusOnNext,\r\n [OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_PREVIOUS]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.deleteAndFocusOnPrevious,\r\n [OPERATIONS.BLOCK.DUPLICATE_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.duplicateBlock,\r\n [OPERATIONS.BLOCK.TRANSFORM_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.BLOCK.MOVE_UP_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.moveUpBlock,\r\n [OPERATIONS.BLOCK.MOVE_DOWN_BLOCK]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.moveDownBlock,\r\n [OPERATIONS.BLOCK_OPTIONS.SHOW_BLOCK_OPTIONS]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.showMainBlockOptions,\r\n [OPERATIONS.BLOCK_OPTIONS.HIDE_CLEAR_BLOCK_OPTIONS]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.hideAndClearBlockOptions,\r\n [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.moveTheFakeFocusToTheNextBlockOption,\r\n [OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.moveTheFakeFocusToPreviousBlockOption,\r\n [OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_BLOCK_TYPE]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.applySelectedBlockType,\r\n [OPERATIONS.BLOCK_OPTIONS.FILTER_CONCAT]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.filterContact,\r\n [OPERATIONS.BLOCK_OPTIONS.FILTER_REMOVE_LAST]: _block_options_operation__WEBPACK_IMPORTED_MODULE_1__.filterRemoveLast,\r\n [OPERATIONS.FORMATTING_BAR.SHOW_TEXT_FORMATTING_BAR]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.showTextFormattingBar,\r\n [OPERATIONS.FORMATTING_BAR.HIDE_TEXT_FORMATTING_BAR]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.hideTextFormattingBar,\r\n [OPERATIONS.FORMATTING_BAR.TOGGLE_MORE_OPTIONS_BOX]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.toggleMoreOptionsBox,\r\n [OPERATIONS.FORMATTING_BAR.TOGGLE_CHANGE_COLOR_BOX]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.toggleChangeColorBox,\r\n [OPERATIONS.FORMATTING_BAR.TOGGLE_TURN_INTO_BOX]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.toggleTurnIntoBox,\r\n [OPERATIONS.FORMATTING_BAR.TOGGLE_INPUT_LINK_BOX]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.toggleInputLinkBox,\r\n [OPERATIONS.FORMATTING_BAR.INPUT_LINK_URL]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.inputLinkUrl,\r\n [OPERATIONS.FORMATTING_BAR.TOGGLE_ENCLOSE_SELECTED_TEXT_TO]: _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.toggleEncloseSelectedTextTo,\r\n [OPERATIONS.SHOW_TURN_INTO_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.SHOW_COLOR_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock,\r\n [OPERATIONS.SHOW_MORE_OPTIONS_BOX]: _block_operation__WEBPACK_IMPORTED_MODULE_0__.transformBlock\r\n};\r\n\r\nfunction getBlockOperationFunction(blockOperation) {\r\n const operationFunction = operationMap[blockOperation];\r\n if (!operationFunction) {\r\n throw new Error('Operation Not Found Exception');\r\n }\r\n return operationFunction;\r\n}\n\n//# sourceURL=webpack://johannes/./src/command-factory.js?"); /***/ }), @@ -102,17 +81,7 @@ eval("document.addEventListener('DOMContentLoaded', function () {\r\n const c /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ createNewCheckboxLiElement: () => (/* binding */ createNewCheckboxLiElement),\n/* harmony export */ createNewDraggableParagraphElement: () => (/* binding */ createNewDraggableParagraphElement),\n/* harmony export */ createNewHeadingElement: () => (/* binding */ createNewHeadingElement),\n/* harmony export */ createNewLiElement: () => (/* binding */ createNewLiElement),\n/* harmony export */ createNewListElement: () => (/* binding */ createNewListElement),\n/* harmony export */ createNewParagraphElement: () => (/* binding */ createNewParagraphElement),\n/* harmony export */ createNewQuoteElement: () => (/* binding */ createNewQuoteElement),\n/* harmony export */ createNewSeparatorElement: () => (/* binding */ createNewSeparatorElement),\n/* harmony export */ createNewTodoListElement: () => (/* binding */ createNewTodoListElement)\n/* harmony export */ });\nfunction createNewHeadingElement(number = 2) {\r\n\r\n let newElement = document.createElement(`h${number}`);\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('swittable');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('focus');\r\n newElement.classList.add('key-trigger');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.setAttribute('data-placeholder', `Heading ${number}`);\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewParagraphElement(text) {\r\n\r\n let newElement = document.createElement('p');\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('swittable');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('key-trigger');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', 'Write something or type / (slash) to choose a block...');\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewDraggableParagraphElement() {\r\n\r\n let newDiv = document.createElement('div');\r\n let newElement = createNewParagraphElement();\r\n\r\n let newButton = document.createElement('button');\r\n newButton.innerHTML = '';\r\n\r\n newDiv.appendChild(newButton);\r\n newDiv.appendChild(newElement);\r\n\r\n newDiv.classList.add('draggable-block');\r\n newDiv.classList.add('deletable');\r\n newButton.classList.add('drag-handler');\r\n newButton.classList.add('button-reset');\r\n newButton.draggable = true;\r\n\r\n return newDiv;\r\n}\r\n\r\nfunction createNewListElement(text, type = 'ul') {\r\n const newList = document.createElement(type);\r\n newList.classList.add('johannes-content-element');\r\n newList.classList.add('swittable');\r\n newList.classList.add('list');\r\n\r\n const initialItem = createNewLiElement(text);\r\n\r\n newList.appendChild(initialItem);\r\n\r\n return newList;\r\n}\r\n\r\nfunction createNewTodoListElement(text, type = 'ul') {\r\n const newList = document.createElement(type);\r\n newList.classList.add('johannes-content-element');\r\n newList.classList.add('checkbox-list');\r\n newList.classList.add('list');\r\n\r\n const initialItem = createNewCheckboxLiElement(text);\r\n\r\n newList.appendChild(initialItem);\r\n\r\n return newList;\r\n}\r\n\r\n\r\nfunction createNewLiElement(text = '') {\r\n\r\n let initialItem = document.createElement('li');\r\n\r\n initialItem.classList.add('focusable');\r\n initialItem.classList.add('deletable');\r\n initialItem.classList.add('editable');\r\n initialItem.classList.add('focus');\r\n initialItem.classList.add('key-trigger');\r\n initialItem.classList.add('list-item');\r\n\r\n initialItem.innerText = text;\r\n\r\n initialItem.contentEditable = true;\r\n initialItem.setAttribute('data-placeholder', 'Item');\r\n\r\n return initialItem;\r\n\r\n}\r\n\r\nfunction createNewCheckboxLiElement(text = '') {\r\n\r\n let li = document.createElement('li');\r\n li.classList.add('deletable');\r\n li.classList.add('list-item');\r\n initialItem.classList.add('key-trigger');\r\n\r\n let checkbox = document.createElement('input');\r\n checkbox.setAttribute('type', 'checkbox');\r\n\r\n let span = document.createElement('span');\r\n span.textContent = text || \"\";\r\n span.setAttribute('data-placeholder', 'To-do');\r\n span.contentEditable = true;\r\n\r\n span.classList.add('focusable');\r\n span.classList.add('editable'); \r\n span.classList.add('focus'); \r\n\r\n li.appendChild(checkbox);\r\n li.appendChild(span);\r\n\r\n return li;\r\n}\r\n\r\nfunction createNewSeparatorElement() {\r\n let newElement = document.createElement('hr');\r\n return newElement;\r\n}\r\n\r\n\r\nfunction createNewQuoteElement(text) {\r\n const quote = document.createElement('blockquote');\r\n quote.classList.add('swittable');\r\n quote.classList.add('johannes-content-element');\r\n\r\n const p = createNewNoSwittableParagraphElement(text);\r\n const cite = createNewNoSwittableCiteElement();\r\n\r\n quote.appendChild(p);\r\n quote.appendChild(cite);\r\n\r\n return quote;\r\n}\r\n\r\nfunction createNewNoSwittableParagraphElement(text) {\r\n\r\n let newElement = document.createElement('p');\r\n newElement.classList.add('focus');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('editable');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', '”To be, or not to be, that is the question”');\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewNoSwittableCiteElement(text) {\r\n\r\n let newElement = document.createElement('cite');\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('deletable');\r\n newElement.classList.add('editable');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', '— Socrates');\r\n\r\n return newElement;\r\n}\n\n//# sourceURL=webpack://johannes/./src/element-factory.js?"); - -/***/ }), - -/***/ "./src/focus-on-p.js": -/*!***************************!*\ - !*** ./src/focus-on-p.js ***! - \***************************/ -/***/ (() => { - -eval("document.addEventListener('DOMContentLoaded', function(){\r\n const editor = document.querySelector('.johannes-editor');\r\n\r\n if(editor){\r\n let blocks = editor.querySelectorAll('.draggable-block');\r\n\r\n if(blocks.length == 1){\r\n\r\n const p = blocks[0].querySelector('.johannes-content-element'); \r\n if(p.innerText == ''){\r\n p.focus();\r\n }\r\n }\r\n }\r\n});\n\n//# sourceURL=webpack://johannes/./src/focus-on-p.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ createNewCheckboxLiElement: () => (/* binding */ createNewCheckboxLiElement),\n/* harmony export */ createNewDraggableParagraphElement: () => (/* binding */ createNewDraggableParagraphElement),\n/* harmony export */ createNewHeadingElement: () => (/* binding */ createNewHeadingElement),\n/* harmony export */ createNewLiElement: () => (/* binding */ createNewLiElement),\n/* harmony export */ createNewListElement: () => (/* binding */ createNewListElement),\n/* harmony export */ createNewParagraphElement: () => (/* binding */ createNewParagraphElement),\n/* harmony export */ createNewQuoteElement: () => (/* binding */ createNewQuoteElement),\n/* harmony export */ createNewSeparatorElement: () => (/* binding */ createNewSeparatorElement),\n/* harmony export */ createNewTodoListElement: () => (/* binding */ createNewTodoListElement)\n/* harmony export */ });\nfunction createNewHeadingElement(number = 2) {\r\n\r\n let newElement = document.createElement(`h${number}`);\r\n newElement.setAttribute('data-type', `h${number}`);\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('swittable');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('focus');\r\n newElement.classList.add('key-trigger');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.setAttribute('data-placeholder', `Heading ${number}`);\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewParagraphElement(text) {\r\n\r\n let newElement = document.createElement('p');\r\n newElement.setAttribute('data-type', 'p');\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('swittable');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('key-trigger');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', 'Write something or type / (slash) to choose a block...');\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewDraggableParagraphElement() {\r\n\r\n let newDiv = document.createElement('div');\r\n let newElement = createNewParagraphElement();\r\n\r\n let newButton = document.createElement('button');\r\n newButton.innerHTML = '';\r\n\r\n newDiv.appendChild(newButton);\r\n newDiv.appendChild(newElement);\r\n\r\n newDiv.classList.add('draggable-block');\r\n newDiv.classList.add('deletable');\r\n newButton.classList.add('drag-handler');\r\n newButton.classList.add('button-reset');\r\n newButton.draggable = true;\r\n\r\n return newDiv;\r\n}\r\n\r\nfunction createNewListElement(text, type = 'ul') {\r\n const newList = document.createElement(type);\r\n newList.classList.add('johannes-content-element');\r\n newList.classList.add('swittable');\r\n newList.classList.add('list');\r\n\r\n if (type == 'ul') {\r\n newList.setAttribute('data-type', 'bulleted-list');\r\n } else {\r\n newList.setAttribute('data-type', 'numbered-list');\r\n }\r\n\r\n const initialItem = createNewLiElement(text);\r\n\r\n newList.appendChild(initialItem);\r\n\r\n return newList;\r\n}\r\n\r\nfunction createNewTodoListElement(text, type = 'ul') {\r\n const newList = document.createElement(type);\r\n newList.classList.add('johannes-content-element');\r\n newList.classList.add('checkbox-list');\r\n newList.classList.add('list');\r\n newList.setAttribute('data-type', 'todo-list');\r\n\r\n const initialItem = createNewCheckboxLiElement(text);\r\n\r\n newList.appendChild(initialItem);\r\n\r\n return newList;\r\n}\r\n\r\n\r\nfunction createNewLiElement(text = '') {\r\n\r\n let initialItem = document.createElement('li');\r\n\r\n initialItem.classList.add('focusable');\r\n initialItem.classList.add('deletable');\r\n initialItem.classList.add('editable');\r\n initialItem.classList.add('focus');\r\n initialItem.classList.add('key-trigger');\r\n initialItem.classList.add('list-item');\r\n\r\n initialItem.innerText = text;\r\n\r\n initialItem.contentEditable = true;\r\n initialItem.setAttribute('data-placeholder', 'Item');\r\n\r\n return initialItem;\r\n\r\n}\r\n\r\nfunction createNewCheckboxLiElement(text = '') {\r\n\r\n let li = document.createElement('li');\r\n li.classList.add('deletable');\r\n li.classList.add('list-item');\r\n\r\n initialItem.classList.add('key-trigger');\r\n\r\n let checkbox = document.createElement('input');\r\n checkbox.setAttribute('type', 'checkbox');\r\n\r\n let span = document.createElement('span');\r\n span.textContent = text || \"\";\r\n span.setAttribute('data-placeholder', 'To-do');\r\n span.contentEditable = true;\r\n\r\n span.classList.add('focusable');\r\n span.classList.add('editable');\r\n span.classList.add('focus');\r\n\r\n li.appendChild(checkbox);\r\n li.appendChild(span);\r\n\r\n return li;\r\n}\r\n\r\nfunction createNewSeparatorElement() {\r\n let newElement = document.createElement('hr');\r\n return newElement;\r\n}\r\n\r\n\r\nfunction createNewQuoteElement(text) {\r\n\r\n const quote = document.createElement('blockquote');\r\n quote.classList.add('swittable');\r\n quote.classList.add('johannes-content-element');\r\n quote.setAttribute('data-type', 'quote');\r\n\r\n const p = createNewNoSwittableParagraphElement(text);\r\n const cite = createNewNoSwittableCiteElement();\r\n\r\n quote.appendChild(p);\r\n quote.appendChild(cite);\r\n\r\n return quote;\r\n}\r\n\r\nfunction createNewNoSwittableParagraphElement(text) {\r\n\r\n let newElement = document.createElement('p');\r\n newElement.classList.add('focus');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('editable');\r\n newElement.classList.add('key-trigger');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', '”To be, or not to be, that is the question”');\r\n\r\n return newElement;\r\n}\r\n\r\nfunction createNewNoSwittableCiteElement(text) {\r\n\r\n let newElement = document.createElement('cite');\r\n newElement.classList.add('johannes-content-element');\r\n newElement.classList.add('focusable');\r\n newElement.classList.add('deletable');\r\n newElement.classList.add('editable');\r\n\r\n newElement.contentEditable = true;\r\n\r\n newElement.innerText = text || \"\";\r\n\r\n newElement.setAttribute('data-placeholder', '— Socrates');\r\n\r\n return newElement;\r\n}\n\n//# sourceURL=webpack://johannes/./src/element-factory.js?"); /***/ }), @@ -120,9 +89,10 @@ eval("document.addEventListener('DOMContentLoaded', function(){\r\n const edi /*!***********************!*\ !*** ./src/helper.js ***! \***********************/ -/***/ (() => { +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("\r\n\r\n\n\n//# sourceURL=webpack://johannes/./src/helper.js?"); +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ isTriggable: () => (/* binding */ isTriggable)\n/* harmony export */ });\n\r\n\r\nfunction isTriggable(event) {\r\n // Verifica se o target ou qualquer ancestral tem a classe 'key-trigger'\r\n return event.target.closest('.key-trigger') !== null;\r\n}\n\n//# sourceURL=webpack://johannes/./src/helper.js?"); /***/ }), @@ -133,7 +103,7 @@ eval("\r\n\r\n\n\n//# sourceURL=webpack://johannes/./src/helper.js?"); /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _block_operation_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./block-operation.js */ \"./src/block-operation.js\");\n/* harmony import */ var _drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./drag-and-drop.js */ \"./src/drag-and-drop.js\");\n/* harmony import */ var _drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _switch_block_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./switch-block.js */ \"./src/switch-block.js\");\n/* harmony import */ var _switch_block_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_switch_block_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _keyboard_navigation_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./keyboard-navigation.js */ \"./src/keyboard-navigation.js\");\n/* harmony import */ var _text_blocks_from_newlines_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./text-blocks-from-newlines.js */ \"./src/text-blocks-from-newlines.js\");\n/* harmony import */ var _focus_on_p_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./focus-on-p.js */ \"./src/focus-on-p.js\");\n/* harmony import */ var _focus_on_p_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_focus_on_p_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _clear_form_pasting_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./clear-form-pasting.js */ \"./src/clear-form-pasting.js\");\n/* harmony import */ var _clear_form_pasting_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_clear_form_pasting_js__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _rich_text_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./rich-text.js */ \"./src/rich-text.js\");\n/* harmony import */ var _click_events_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./click-events.js */ \"./src/click-events.js\");\n/* harmony import */ var _memento_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./memento.js */ \"./src/memento.js\");\n/* harmony import */ var _memento_js__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_memento_js__WEBPACK_IMPORTED_MODULE_10__);\n/* harmony import */ var _keypress_events_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./keypress-events.js */ \"./src/keypress-events.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\n//# sourceURL=webpack://johannes/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _block_operation_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./block-operation.js */ \"./src/block-operation.js\");\n/* harmony import */ var _drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./drag-and-drop.js */ \"./src/drag-and-drop.js\");\n/* harmony import */ var _drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_drag_and_drop_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _switch_block_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./switch-block.js */ \"./src/switch-block.js\");\n/* harmony import */ var _switch_block_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_switch_block_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _keyboard_navigation_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./keyboard-navigation.js */ \"./src/keyboard-navigation.js\");\n/* harmony import */ var _keyboard_navigation_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_keyboard_navigation_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _text_blocks_from_newlines_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./text-blocks-from-newlines.js */ \"./src/text-blocks-from-newlines.js\");\n/* harmony import */ var _click_events_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./click-events.js */ \"./src/click-events.js\");\n/* harmony import */ var _memento_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./memento.js */ \"./src/memento.js\");\n/* harmony import */ var _memento_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_memento_js__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _keypress_events_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./keypress-events.js */ \"./src/keypress-events.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\n//# sourceURL=webpack://johannes/./src/index.js?"); /***/ }), @@ -144,7 +114,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sty /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ any: () => (/* binding */ any),\n/* harmony export */ clear: () => (/* binding */ clear),\n/* harmony export */ save: () => (/* binding */ save),\n/* harmony export */ setURL: () => (/* binding */ setURL)\n/* harmony export */ });\nlet anchorElement = null;\r\n\r\nfunction save(a){\r\n anchorElement = a;\r\n}\r\n\r\nfunction clear(){\r\n anchorElement = null;\r\n}\r\n\r\nfunction any(){\r\n anchorElement == null;\r\n}\r\n\r\nfunction setURL(url){\r\n anchorElement.href = url;\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-anchor.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ any: () => (/* binding */ any),\n/* harmony export */ clear: () => (/* binding */ clear),\n/* harmony export */ setAnchor: () => (/* binding */ setAnchor),\n/* harmony export */ setURL: () => (/* binding */ setURL)\n/* harmony export */ });\nlet anchorElement = null;\r\n\r\nfunction setAnchor(a) {\r\n anchorElement = a;\r\n}\r\n\r\nfunction clear() {\r\n\r\n if (anchorElement && (anchorElement.href == '' || anchorElement.href == null)) {\r\n const parent = anchorElement.parentNode;\r\n while (anchorElement.firstChild) {\r\n parent.insertBefore(anchorElement.firstChild, anchorElement);\r\n }\r\n\r\n if (parent) {\r\n parent.removeChild(anchorElement);\r\n parent.normalize();\r\n }\r\n }\r\n\r\n anchorElement = null;\r\n}\r\n\r\nfunction any() {\r\n anchorElement == null;\r\n}\r\n\r\nfunction setURL(url) {\r\n anchorElement.href = url;\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-anchor.js?"); /***/ }), @@ -155,7 +125,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ clearSelection: () => (/* binding */ clearSelection),\n/* harmony export */ getCurrentDraggableBlockFocused: () => (/* binding */ getCurrentDraggableBlockFocused),\n/* harmony export */ restoreSelection: () => (/* binding */ restoreSelection),\n/* harmony export */ saveSelection: () => (/* binding */ saveSelection),\n/* harmony export */ savedSelection: () => (/* binding */ savedSelection)\n/* harmony export */ });\nlet savedSelection = null;\r\n\r\nfunction saveSelection() {\r\n if (window.getSelection) {\r\n const sel = window.getSelection();\r\n if (sel.rangeCount > 0) {\r\n savedSelection = sel.getRangeAt(0).cloneRange();\r\n }\r\n }\r\n}\r\n\r\nfunction restoreSelection() {\r\n const selection = window.getSelection();\r\n if (savedSelection) {\r\n selection.removeAllRanges();\r\n selection.addRange(savedSelection);\r\n }\r\n}\r\n\r\nfunction clearSelection() {\r\n savedSelection = null;\r\n window.getSelection().removeAllRanges();\r\n}\r\n\r\nfunction getCurrentDraggableBlockFocused() {\r\n\r\n let currentBlockRange = window.getSelection().getRangeAt(0);\r\n\r\n let commonAncestor = currentBlockRange.commonAncestorContainer;\r\n\r\n if (commonAncestor.nodeType === 3) { //* text node */\r\n commonAncestor = commonAncestor.parentNode;\r\n }\r\n\r\n const currentBlock = commonAncestor.closest('.draggable-block');\r\n\r\n return currentBlock;\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-selection.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ clearAllSelection: () => (/* binding */ clearAllSelection),\n/* harmony export */ getCurrentDraggableBlockFocused: () => (/* binding */ getCurrentDraggableBlockFocused),\n/* harmony export */ getSavedRange: () => (/* binding */ getSavedRange),\n/* harmony export */ hasSelection: () => (/* binding */ hasSelection),\n/* harmony export */ removeSavedSelection: () => (/* binding */ removeSavedSelection),\n/* harmony export */ restoreSelection: () => (/* binding */ restoreSelection),\n/* harmony export */ saveSelection: () => (/* binding */ saveSelection),\n/* harmony export */ savedRange: () => (/* binding */ savedRange),\n/* harmony export */ temporarySelectContentFromCurrentSelection: () => (/* binding */ temporarySelectContentFromCurrentSelection)\n/* harmony export */ });\nlet savedRange = null;\r\n\r\nfunction saveSelection() {\r\n if (window.getSelection) {\r\n const sel = window.getSelection();\r\n if (sel.rangeCount > 0) {\r\n savedRange = sel.getRangeAt(0).cloneRange();\r\n }\r\n }\r\n}\r\n\r\nfunction temporarySelectContentFromCurrentSelection() {\r\n\r\n setTimeout(() => {\r\n console.log('select all content temporarrly')\r\n if (window.getSelection) {\r\n const selection = window.getSelection();\r\n\r\n if (selection.rangeCount > 0) {\r\n const range = selection.getRangeAt(0);\r\n let container = range.commonAncestorContainer;\r\n\r\n if (container.nodeType !== 1) {\r\n container = container.parentNode;\r\n }\r\n\r\n const contentElement = container.closest('.johannes-content-element');\r\n\r\n if (contentElement) {\r\n selection.removeAllRanges();\r\n\r\n const newRange = document.createRange();\r\n newRange.selectNodeContents(contentElement);\r\n\r\n selection.addRange(newRange);\r\n } else {\r\n console.log(\"Nenhum elemento '.content' envolvendo a seleção atual foi encontrado.\");\r\n }\r\n }\r\n }\r\n }, 11);\r\n}\r\n\r\nfunction restoreSelection() {\r\n\r\n setTimeout(() => {\r\n console.log('restore selection');\r\n\r\n const selection = window.getSelection();\r\n if (savedRange) {\r\n selection.removeAllRanges();\r\n selection.addRange(savedRange);\r\n }\r\n }, 10);\r\n}\r\n\r\nfunction getSavedRange() {\r\n return savedRange;\r\n}\r\n\r\nfunction clearAllSelection() {\r\n savedRange = null;\r\n window.getSelection().removeAllRanges();\r\n}\r\n\r\nfunction removeSavedSelection() {\r\n savedRange = null;\r\n}\r\n\r\nfunction getCurrentDraggableBlockFocused() {\r\n\r\n let currentBlockRange = window.getSelection().getRangeAt(0);\r\n\r\n let commonAncestor = currentBlockRange.commonAncestorContainer;\r\n\r\n if (commonAncestor.nodeType === 3) { //* text node */\r\n commonAncestor = commonAncestor.parentNode;\r\n }\r\n\r\n const currentBlock = commonAncestor.closest('.draggable-block');\r\n\r\n return currentBlock;\r\n}\r\n\r\n\r\nfunction hasSelection(){\r\n savedRange != null;\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-selection.js?"); /***/ }), @@ -166,7 +136,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ closeAll: () => (/* binding */ closeAll),\n/* harmony export */ closeAllDependentBox: () => (/* binding */ closeAllDependentBox),\n/* harmony export */ closeBlockOptions: () => (/* binding */ closeBlockOptions),\n/* harmony export */ closeColorBox: () => (/* binding */ closeColorBox),\n/* harmony export */ closeMoreOptionsBox: () => (/* binding */ closeMoreOptionsBox),\n/* harmony export */ closeTextFormattingBar: () => (/* binding */ closeTextFormattingBar),\n/* harmony export */ closeTurnIntoBox: () => (/* binding */ closeTurnIntoBox),\n/* harmony export */ focusOnNext: () => (/* binding */ focusOnNext),\n/* harmony export */ focusOnPrevious: () => (/* binding */ focusOnPrevious),\n/* harmony export */ focusOnTheEndOfTheText: () => (/* binding */ focusOnTheEndOfTheText),\n/* harmony export */ focusOnTheStartOfTheText: () => (/* binding */ focusOnTheStartOfTheText),\n/* harmony export */ showInputLinkBox: () => (/* binding */ showInputLinkBox),\n/* harmony export */ tryHideTextFormattingBar: () => (/* binding */ tryHideTextFormattingBar)\n/* harmony export */ });\n//**Show */\r\nfunction showInputLinkBox() {\r\n\r\n const rect = window.getSelection().getRangeAt(0).getBoundingClientRect();\r\n\r\n const containerWidth = textFormattingBar.offsetWidth;\r\n const linkInputDivWidth = linkBox.offsetWidth;\r\n const containerCenter = (textFormattingBar.getBoundingClientRect().left + containerWidth) / 2;\r\n const linkInputDivCenter = (linkBox.getBoundingClientRect().left + linkInputDivWidth) / 2;\r\n\r\n linkBox.style.position = 'absolute';\r\n linkBox.style.left = `${containerCenter - linkInputDivCenter + window.scrollX}px`;\r\n linkBox.style.top = `${rect.bottom + window.scrollY + 5}px`;\r\n linkBox.style.display = 'block';\r\n\r\n linkBoxInput.focus();\r\n}\r\n\r\n\r\n\r\nfunction closeAll() {\r\n closeAllDependentBox();\r\n closeTextFormattingBar();\r\n closeBlockOptions();\r\n}\r\n\r\nfunction closeBlockOptions() {\r\n\r\n}\r\n\r\nfunction closeTextFormattingBar() {\r\n textFormattingBar.style.display = 'none';\r\n}\r\n\r\nfunction closeAllDependentBox() {\r\n\r\n const dependentBoxes = document.querySelectorAll('.dependent-box');\r\n\r\n for (let box of dependentBoxes) {\r\n box.style.display = 'none';\r\n }\r\n}\r\n\r\nfunction closeTurnIntoBox() {\r\n\r\n}\r\n\r\nfunction closeColorBox() {\r\n\r\n}\r\n\r\nfunction closeMoreOptionsBox() {\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction tryHideTextFormattingBar() {\r\n\r\n // check before if a dependent box is opened, then close the dependent box\r\n\r\n //1. try close text-formatting-bar before linkBox (the actual only one dependency box)\r\n if (textFormattingBoxVisible() && !anyDependentBoxVisible()) {\r\n // only hide if the dependency box is closed\r\n textFormattingBar.style.display = 'none';\r\n // restoreSelection();\r\n }\r\n\r\n // 2. close the dependency box (linkBox)\r\n if (anyDependentBoxVisible()) {\r\n\r\n // Remove a if has no href attribute or if href is empty\r\n if (anchorElement && (anchorElement.href == '' || anchorElement.href == null)) {\r\n const parent = anchorElement.parentNode;\r\n while (anchorElement.firstChild) {\r\n parent.insertBefore(anchorElement.firstChild, anchorElement);\r\n }\r\n\r\n if (parent) {\r\n parent.removeChild(anchorElement);\r\n parent.normalize(); // Mesclar nós de texto adjacentes, se necessário\r\n }\r\n }\r\n\r\n // linkBox.style.display = 'none';\r\n // closeAllDependentBox();\r\n // restoreSelection();\r\n }\r\n}\r\n\r\nfunction textFormattingBoxVisible() {\r\n return textFormattingBar.style.display != 'none';\r\n}\r\n\r\n\r\nfunction anyDependentBoxVisible() {\r\n const dependentBoxes = document.querySelectorAll('.dependent-box');\r\n\r\n for (const box of dependentBoxes) {\r\n if (box.style.display !== 'none') {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n}\r\n\r\nfunction focusOnTheEndOfTheText(contentBlock) {\r\n setTimeout(() => {\r\n const range = document.createRange();\r\n const selection = window.getSelection();\r\n\r\n range.selectNodeContents(contentBlock);\r\n\r\n let lastChild = contentBlock;\r\n while (lastChild.lastChild && lastChild.lastChild.nodeType === Node.ELEMENT_NODE) {\r\n lastChild = lastChild.lastChild;\r\n }\r\n if (lastChild.lastChild) {\r\n lastChild = lastChild.lastChild;\r\n }\r\n\r\n range.setEnd(lastChild, lastChild.textContent.length);\r\n range.collapse(false);\r\n\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n\r\n contentBlock.focus();\r\n }, 10);\r\n}\r\n\r\nfunction focusOnTheStartOfTheText(contentBlock) {\r\n\r\n setTimeout(() => {\r\n const range = document.createRange();\r\n const selection = window.getSelection();\r\n\r\n range.selectNodeContents(contentBlock);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n\r\n contentBlock.focus();\r\n }, 10);\r\n}\r\n\r\nfunction focusOnNext(actualElement, position) {\r\n let tag = actualElement.tagName.toUpperCase();\r\n let focusedElement = null;\r\n\r\n if (tag === 'LI') {\r\n let nextElement = actualElement.nextElementSibling;\r\n\r\n if (nextElement && nextElement.classList.contains('focusable')) {\r\n focusedElement = nextElement;\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n if (actualElement.parentNode.tagName.toUpperCase() === 'LI' /* focusable SPAN inside LI*/) {\r\n let nextElement = actualElement.closest('li').nextElementSibling?.querySelector('.focusable');\r\n\r\n if (nextElement && nextElement.classList.contains('focusable')) {\r\n focusedElement = nextElement;\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n let parent = actualElement.closest('.draggable-block');\r\n let sibling = parent.nextElementSibling;\r\n\r\n while (sibling) {\r\n let focusableCandidates = sibling.querySelectorAll('.focusable');\r\n if (focusableCandidates.length > 0) {\r\n focusedElement = focusableCandidates[0];\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n\r\n sibling = sibling.nextElementSibling;\r\n }\r\n\r\n return focusedElement;\r\n}\r\n\r\n\r\nfunction focusOnPrevious(actualElement, position) {\r\n let tag = actualElement.tagName.toUpperCase();\r\n let focusedElement = null;\r\n\r\n if (tag === 'LI') {\r\n let previousElement = actualElement.previousElementSibling;\r\n\r\n if (previousElement && previousElement.classList.contains('focusable')) {\r\n focusedElement = previousElement;\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n if (actualElement.parentNode.tagName.toUpperCase() === 'LI' /* focusable SPAN inside LI*/) {\r\n let previousElement = actualElement.closest('li').previousElementSibling?.querySelector('.focusable');\r\n\r\n if (previousElement && previousElement.classList.contains('focusable')) {\r\n focusedElement = previousElement;\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n let parent = actualElement.closest('.draggable-block');\r\n let sibling = parent.previousElementSibling;\r\n\r\n while (sibling) {\r\n let focusableCandidates = sibling.querySelectorAll('.focusable');\r\n if (focusableCandidates.length > 0) {\r\n focusedElement = focusableCandidates[focusableCandidates.length - 1];\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n\r\n sibling = sibling.previousElementSibling;\r\n }\r\n\r\n return focusedElement;\r\n}\r\n\r\n\r\nfunction adjustCursorOffset(node, xPosition) {\r\n let range = document.createRange();\r\n let closestNode = node;\r\n let closestOffset = 0;\r\n let closestDiff = Infinity;\r\n\r\n for (let i = 0; i < node.textContent.length; i++) {\r\n range.setStart(node, i);\r\n range.setEnd(node, i + 1);\r\n const rect = range.getBoundingClientRect();\r\n const leftDiff = Math.abs(rect.left - xPosition);\r\n const rightDiff = Math.abs(rect.right - xPosition);\r\n\r\n if (leftDiff < closestDiff || rightDiff < closestDiff) {\r\n closestDiff = Math.min(leftDiff, rightDiff);\r\n closestOffset = i + (rightDiff < leftDiff ? 1 : 0);\r\n }\r\n }\r\n\r\n if (xPosition > range.getBoundingClientRect().right) {\r\n closestOffset = node.textContent.length;\r\n }\r\n\r\n return { closestNode, closestOffset };\r\n}\r\n\r\nfunction applyCursorXStartPosition(element, xPosition) {\r\n const selection = window.getSelection();\r\n const range = document.createRange();\r\n\r\n let currentNode = element.firstChild;\r\n let result = null;\r\n\r\n while (currentNode) {\r\n if (currentNode.nodeType === Node.TEXT_NODE) {\r\n result = adjustCursorOffset(currentNode, xPosition);\r\n break;\r\n }\r\n currentNode = currentNode.nextSibling;\r\n }\r\n\r\n if (result && result.closestNode) {\r\n range.setStart(result.closestNode, result.closestOffset);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n } else {\r\n range.selectNodeContents(element);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n }\r\n}\r\n\r\nfunction applyCursorXEndPosition(element, xPosition) {\r\n const selection = window.getSelection();\r\n const range = document.createRange();\r\n\r\n let currentNode = element.lastChild;\r\n let result = null;\r\n\r\n while (currentNode) {\r\n if (currentNode.nodeType === Node.TEXT_NODE) {\r\n result = adjustCursorOffset(currentNode, xPosition);\r\n break;\r\n } else if (currentNode.nodeName.toUpperCase() === 'BR') {\r\n currentNode = currentNode.previousSibling;\r\n continue;\r\n }\r\n currentNode = currentNode.previousSibling;\r\n }\r\n\r\n if (result && result.closestNode) {\r\n range.setStart(result.closestNode, result.closestOffset);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n } else {\r\n range.selectNodeContents(element);\r\n range.collapse(false);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n }\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-window.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ closeBlockOptions: () => (/* binding */ closeBlockOptions),\n/* harmony export */ closeTextFormattingBar: () => (/* binding */ closeTextFormattingBar),\n/* harmony export */ focusOnNext: () => (/* binding */ focusOnNext),\n/* harmony export */ focusOnPrevious: () => (/* binding */ focusOnPrevious),\n/* harmony export */ focusOnTheEndOfTheText: () => (/* binding */ focusOnTheEndOfTheText),\n/* harmony export */ focusOnTheStartOfTheText: () => (/* binding */ focusOnTheStartOfTheText)\n/* harmony export */ });\n\r\nfunction closeBlockOptions() {\r\n\r\n}\r\n\r\nfunction closeTextFormattingBar() {\r\n textFormattingBar.style.display = 'none';\r\n}\r\n\r\n\r\nfunction focusOnTheEndOfTheText(contentBlock) {\r\n setTimeout(() => {\r\n const range = document.createRange();\r\n const selection = window.getSelection();\r\n\r\n range.selectNodeContents(contentBlock);\r\n\r\n let lastChild = contentBlock;\r\n while (lastChild.lastChild && lastChild.lastChild.nodeType === Node.ELEMENT_NODE) {\r\n lastChild = lastChild.lastChild;\r\n }\r\n if (lastChild.lastChild) {\r\n lastChild = lastChild.lastChild;\r\n }\r\n\r\n range.setEnd(lastChild, lastChild.textContent.length);\r\n range.collapse(false);\r\n\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n\r\n contentBlock.focus();\r\n }, 10);\r\n}\r\n\r\nfunction focusOnTheStartOfTheText(contentBlock) {\r\n\r\n setTimeout(() => {\r\n const range = document.createRange();\r\n const selection = window.getSelection();\r\n\r\n range.selectNodeContents(contentBlock);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n\r\n contentBlock.focus();\r\n }, 10);\r\n}\r\n\r\nfunction focusOnNext(actualElement, position) {\r\n let tag = actualElement.tagName.toUpperCase();\r\n let focusedElement = null;\r\n\r\n if (tag === 'LI') {\r\n let nextElement = actualElement.nextElementSibling;\r\n\r\n if (nextElement && nextElement.classList.contains('focusable')) {\r\n focusedElement = nextElement;\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n if (actualElement.parentNode.tagName.toUpperCase() === 'LI' /* focusable SPAN inside LI*/) {\r\n let nextElement = actualElement.closest('li').nextElementSibling?.querySelector('.focusable');\r\n\r\n if (nextElement && nextElement.classList.contains('focusable')) {\r\n focusedElement = nextElement;\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n let parent = actualElement.closest('.draggable-block');\r\n let sibling = parent.nextElementSibling;\r\n\r\n while (sibling) {\r\n let focusableCandidates = sibling.querySelectorAll('.focusable');\r\n if (focusableCandidates.length > 0) {\r\n focusedElement = focusableCandidates[0];\r\n if (position) {\r\n applyCursorXStartPosition(focusedElement, position);\r\n } else {\r\n focusOnTheStartOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n\r\n sibling = sibling.nextElementSibling;\r\n }\r\n\r\n return focusedElement;\r\n}\r\n\r\n\r\nfunction focusOnPrevious(actualElement, position) {\r\n let tag = actualElement.tagName.toUpperCase();\r\n let focusedElement = null;\r\n\r\n if (tag === 'LI') {\r\n let previousElement = actualElement.previousElementSibling;\r\n\r\n if (previousElement && previousElement.classList.contains('focusable')) {\r\n focusedElement = previousElement;\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n if (actualElement.parentNode.tagName.toUpperCase() === 'LI' /* focusable SPAN inside LI*/) {\r\n let previousElement = actualElement.closest('li').previousElementSibling?.querySelector('.focusable');\r\n\r\n if (previousElement && previousElement.classList.contains('focusable')) {\r\n focusedElement = previousElement;\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n }\r\n\r\n let parent = actualElement.closest('.draggable-block');\r\n let sibling = parent.previousElementSibling;\r\n\r\n while (sibling) {\r\n let focusableCandidates = sibling.querySelectorAll('.focusable');\r\n if (focusableCandidates.length > 0) {\r\n focusedElement = focusableCandidates[focusableCandidates.length - 1];\r\n if (position) {\r\n applyCursorXEndPosition(focusedElement, position);\r\n } else {\r\n focusOnTheEndOfTheText(focusedElement);\r\n }\r\n return focusedElement;\r\n }\r\n\r\n sibling = sibling.previousElementSibling;\r\n }\r\n\r\n return focusedElement;\r\n}\r\n\r\n\r\nfunction adjustCursorOffset(node, xPosition) {\r\n let range = document.createRange();\r\n let closestNode = node;\r\n let closestOffset = 0;\r\n let closestDiff = Infinity;\r\n\r\n for (let i = 0; i < node.textContent.length; i++) {\r\n range.setStart(node, i);\r\n range.setEnd(node, i + 1);\r\n const rect = range.getBoundingClientRect();\r\n const leftDiff = Math.abs(rect.left - xPosition);\r\n const rightDiff = Math.abs(rect.right - xPosition);\r\n\r\n if (leftDiff < closestDiff || rightDiff < closestDiff) {\r\n closestDiff = Math.min(leftDiff, rightDiff);\r\n closestOffset = i + (rightDiff < leftDiff ? 1 : 0);\r\n }\r\n }\r\n\r\n if (xPosition > range.getBoundingClientRect().right) {\r\n closestOffset = node.textContent.length;\r\n }\r\n\r\n return { closestNode, closestOffset };\r\n}\r\n\r\nfunction applyCursorXStartPosition(element, xPosition) {\r\n const selection = window.getSelection();\r\n const range = document.createRange();\r\n\r\n let currentNode = element.firstChild;\r\n let result = null;\r\n\r\n while (currentNode) {\r\n if (currentNode.nodeType === Node.TEXT_NODE) {\r\n result = adjustCursorOffset(currentNode, xPosition);\r\n break;\r\n }\r\n currentNode = currentNode.nextSibling;\r\n }\r\n\r\n if (result && result.closestNode) {\r\n range.setStart(result.closestNode, result.closestOffset);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n } else {\r\n range.selectNodeContents(element);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n }\r\n}\r\n\r\nfunction applyCursorXEndPosition(element, xPosition) {\r\n const selection = window.getSelection();\r\n const range = document.createRange();\r\n\r\n let currentNode = element.lastChild;\r\n let result = null;\r\n\r\n while (currentNode) {\r\n if (currentNode.nodeType === Node.TEXT_NODE) {\r\n result = adjustCursorOffset(currentNode, xPosition);\r\n break;\r\n } else if (currentNode.nodeName.toUpperCase() === 'BR') {\r\n currentNode = currentNode.previousSibling;\r\n continue;\r\n }\r\n currentNode = currentNode.previousSibling;\r\n }\r\n\r\n if (result && result.closestNode) {\r\n range.setStart(result.closestNode, result.closestOffset);\r\n range.collapse(true);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n } else {\r\n range.selectNodeContents(element);\r\n range.collapse(false);\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n element.focus();\r\n }\r\n}\n\n//# sourceURL=webpack://johannes/./src/j-window.js?"); /***/ }), @@ -174,10 +144,9 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /*!************************************!*\ !*** ./src/keyboard-navigation.js ***! \************************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { +/***/ (() => { -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helper */ \"./src/helper.js\");\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_helper__WEBPACK_IMPORTED_MODULE_0__);\n\r\n\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', (event) => {\r\n \r\n const content = document.querySelector('.johannes-editor > .content');\r\n const blockSelection = document.querySelector('.block-options-wrapper');\r\n\r\n\r\n content.addEventListener('keydown', function (event) {\r\n const target = event.target;\r\n if (blockSelection.style.display === 'none') {\r\n if (event.key === 'ArrowRight' && isCursorAtEnd(target)) {\r\n event.preventDefault();\r\n\r\n (0,_helper__WEBPACK_IMPORTED_MODULE_0__.focusOnNext)(target);\r\n\r\n } else if (event.key === 'ArrowLeft' && isCursorAtStart(target)) {\r\n event.preventDefault();\r\n\r\n (0,_helper__WEBPACK_IMPORTED_MODULE_0__.focusOnPrevious)(target);\r\n\r\n } else if (event.key === 'ArrowDown' && isAtLastVisibleLine(target)) {\r\n event.preventDefault();\r\n\r\n let position = getCursorXPosition();\r\n (0,_helper__WEBPACK_IMPORTED_MODULE_0__.focusOnNext)(target, position);\r\n\r\n\r\n } else if (event.key === 'ArrowUp' && isAtFirstVisibleLine(target)) {\r\n event.preventDefault();\r\n\r\n let position = getCursorXPosition();\r\n (0,_helper__WEBPACK_IMPORTED_MODULE_0__.focusOnPrevious)(target, position);\r\n }\r\n }\r\n });\r\n});\r\n\r\n\r\nfunction getCursorXPosition() {\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) {\r\n return 0;\r\n }\r\n\r\n const range = selection.getRangeAt(0).cloneRange();\r\n const rect = range.getBoundingClientRect();\r\n return rect.left;\r\n}\r\n\r\nfunction isCursorAtEnd(target) {\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return false;\r\n\r\n const range = selection.getRangeAt(0);\r\n if (!range.collapsed) return false;\r\n\r\n let node = range.endContainer;\r\n while (node != target && node.nextSibling == null) {\r\n node = node.parentNode;\r\n }\r\n return node == target && range.endOffset == range.endContainer.textContent.length;\r\n}\r\n\r\nfunction isCursorAtStart(target) {\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return false;\r\n\r\n const range = selection.getRangeAt(0);\r\n if (!range.collapsed) return false;\r\n\r\n let node = range.startContainer;\r\n while (node != target && node.previousSibling == null) {\r\n node = node.parentNode;\r\n }\r\n return node == target && range.startOffset == 0;\r\n}\r\n\r\nfunction isAtFirstVisibleLine(target) {\r\n const selection = window.getSelection();\r\n\r\n if (!selection.rangeCount || selection.anchorNode.parentNode !== target) {\r\n return target.childNodes.length === 0;\r\n }\r\n\r\n const range = selection.getRangeAt(0);\r\n const rect = range.getBoundingClientRect();\r\n const contentRect = target.getBoundingClientRect();\r\n\r\n return rect.top === contentRect.top;\r\n}\r\n\r\nfunction isAtLastVisibleLine(target) {\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) {\r\n return target.textContent.length === 0;\r\n }\r\n\r\n const originalRange = selection.getRangeAt(0).cloneRange();\r\n const originalRect = originalRange.getBoundingClientRect();\r\n\r\n selection.modify('move', 'forward', 'line');\r\n const newRect = selection.getRangeAt(0).getBoundingClientRect();\r\n\r\n const isLastLine = originalRect.top === newRect.top;\r\n\r\n selection.removeAllRanges();\r\n selection.addRange(originalRange);\r\n\r\n return isLastLine;\r\n}\n\n//# sourceURL=webpack://johannes/./src/keyboard-navigation.js?"); +eval("// import { focusOnPrevious } from './j-window';\r\n// import { focusOnNext } from './j-window';\r\n\r\n\r\n// document.addEventListener('DOMContentLoaded', (event) => {\r\n \r\n// const content = document.querySelector('.johannes-editor > .content');\r\n// const blockSelection = document.querySelector('.block-options-wrapper');\r\n\r\n\r\n// content.addEventListener('keydown', function (event) {\r\n// const target = event.target;\r\n// if (blockSelection.style.display === 'none') {\r\n// if (event.key === 'ArrowRight' && isCursorAtEnd(target)) {\r\n// event.preventDefault();\r\n\r\n// focusOnNext(target);\r\n\r\n// } else if (event.key === 'ArrowLeft' && isCursorAtStart(target)) {\r\n// event.preventDefault();\r\n\r\n// focusOnPrevious(target);\r\n\r\n// } else if (event.key === 'ArrowDown' && isAtLastVisibleLine(target)) {\r\n// event.preventDefault();\r\n\r\n// let position = getCursorXPosition();\r\n// focusOnNext(target, position);\r\n\r\n\r\n// } else if (event.key === 'ArrowUp' && isAtFirstVisibleLine(target)) {\r\n// event.preventDefault();\r\n\r\n// let position = getCursorXPosition();\r\n// focusOnPrevious(target, position);\r\n// }\r\n// }\r\n// });\r\n// });\r\n\r\n\r\n// function getCursorXPosition() {\r\n// const selection = window.getSelection();\r\n// if (!selection.rangeCount) {\r\n// return 0;\r\n// }\r\n\r\n// const range = selection.getRangeAt(0).cloneRange();\r\n// const rect = range.getBoundingClientRect();\r\n// return rect.left;\r\n// }\r\n\r\n// function isCursorAtEnd(target) {\r\n// const selection = window.getSelection();\r\n// if (!selection.rangeCount) return false;\r\n\r\n// const range = selection.getRangeAt(0);\r\n// if (!range.collapsed) return false;\r\n\r\n// let node = range.endContainer;\r\n// while (node != target && node.nextSibling == null) {\r\n// node = node.parentNode;\r\n// }\r\n// return node == target && range.endOffset == range.endContainer.textContent.length;\r\n// }\r\n\r\n// function isCursorAtStart(target) {\r\n// const selection = window.getSelection();\r\n// if (!selection.rangeCount) return false;\r\n\r\n// const range = selection.getRangeAt(0);\r\n// if (!range.collapsed) return false;\r\n\r\n// let node = range.startContainer;\r\n// while (node != target && node.previousSibling == null) {\r\n// node = node.parentNode;\r\n// }\r\n// return node == target && range.startOffset == 0;\r\n// }\r\n\r\n// function isAtFirstVisibleLine(target) {\r\n// const selection = window.getSelection();\r\n\r\n// if (!selection.rangeCount || selection.anchorNode.parentNode !== target) {\r\n// return target.childNodes.length === 0;\r\n// }\r\n\r\n// const range = selection.getRangeAt(0);\r\n// const rect = range.getBoundingClientRect();\r\n// const contentRect = target.getBoundingClientRect();\r\n\r\n// return rect.top === contentRect.top;\r\n// }\r\n\r\n// function isAtLastVisibleLine(target) {\r\n// const selection = window.getSelection();\r\n// if (!selection.rangeCount) {\r\n// return target.textContent.length === 0;\r\n// }\r\n\r\n// const originalRange = selection.getRangeAt(0).cloneRange();\r\n// const originalRect = originalRange.getBoundingClientRect();\r\n\r\n// selection.modify('move', 'forward', 'line');\r\n// const newRect = selection.getRangeAt(0).getBoundingClientRect();\r\n\r\n// const isLastLine = originalRect.top === newRect.top;\r\n\r\n// selection.removeAllRanges();\r\n// selection.addRange(originalRange);\r\n\r\n// return isLastLine;\r\n// }\n\n//# sourceURL=webpack://johannes/./src/keyboard-navigation.js?"); /***/ }), @@ -188,7 +157,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _hel /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _block_options_operations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./block-options-operations */ \"./src/block-options-operations.js\");\n/* harmony import */ var _command_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./command-factory */ \"./src/command-factory.js\");\n//The start point for key press events\r\n// import * as jWindow from './j-window';\r\n\r\n// import * as blockOperation from './block-operation';\r\n\r\n\r\n\r\n\r\n// Block operations is operations related to the block it self. Create a block, delete a block, change the block type, etc...\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n document.addEventListener('keydown', function (event) {\r\n\r\n if (event.target.classList.contains('key-trigger') && !(0,_block_options_operations__WEBPACK_IMPORTED_MODULE_0__.isShowingBlockOptions)()) {\r\n if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n //TODO: pass the event not event.target/it`s more simple to deal with event when create a click eventListener\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK.CREATE_NEW_ELEMENT, [event.target]);\r\n command.execute();\r\n\r\n } else if (event.key === 'Backspace' && isActiveContentBlank(event) && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_PREVIOUS);\r\n command.execute();\r\n\r\n } else if (event.key === 'Delete' && isActiveContentBlank() && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_NEXT);\r\n command.execute();\r\n\r\n } else if (event.key === 'Escape' && isActiveContentBlank() && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n //TODO: write the code to select the all text\r\n\r\n }\r\n }\r\n });\r\n});\r\n\r\n// Block options operations is operations related to the Block Options. Show the block options, hide the block options, filter, ...\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n document.addEventListener('keydown', function (event) {\r\n\r\n if (event.target.classList.contains('key-trigger') && !(0,_block_options_operations__WEBPACK_IMPORTED_MODULE_0__.isShowingBlockOptions)()) {\r\n\r\n if (event.key === '/' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.SHOW_BLOCK_OPTIONS);\r\n command.execute();\r\n }\r\n }\r\n\r\n if (event.target.classList.contains('key-trigger') && (0,_block_options_operations__WEBPACK_IMPORTED_MODULE_0__.isShowingBlockOptions)()) {\r\n\r\n if (event.key === 'Escape' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const elementToFocusAfterHide = event.target;\r\n\r\n //TODO: pass the event not event.target/it`s more simple to deal with event when create a click eventListener\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.HIDE_CLEAR_BLOCK_OPTIONS, [elementToFocusAfterHide]);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowDown' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowUp' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_FAKE_FOCUS_TYPE);\r\n command.execute();\r\n\r\n } else if (/^[a-z0-9]$/i.test(event.key) && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.FILTER_CONCAT, [event]);\r\n command.execute();\r\n\r\n } else if (event.key === 'Backspace') {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_1__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_1__.OPERATIONS.BLOCK_OPTIONS.FILTER_REMOVE_LAST);\r\n command.execute();\r\n }\r\n }\r\n });\r\n});\r\n\r\nfunction isActiveContentBlank() {\r\n return document.activeElement.textContent.trim() === '';\r\n}\n\n//# sourceURL=webpack://johannes/./src/keypress-events.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _command_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./command-factory */ \"./src/command-factory.js\");\n/* harmony import */ var _block_options_operation__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./block-options-operation */ \"./src/block-options-operation.js\");\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helper */ \"./src/helper.js\");\n/* harmony import */ var _text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./text-formatting-bar-operation */ \"./src/text-formatting-bar-operation.js\");\n//The start point for key press events\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n// Block operations is operations related to the block it self. Create a block, delete a block, change the block type, etc...\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n\r\n document.addEventListener('keydown', function (event) {\r\n\r\n if ((0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event) && !(0,_block_options_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingBlockOptions)()) {\r\n\r\n if (event.key === 'Enter' && !(0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingSelectableDependentBox)() && !(0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingBar)() && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n //TODO: pass the event not event.target/it`s more simple to deal with event when create a click eventListener\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK.CREATE_NEW_ELEMENT, [event]);\r\n command.execute();\r\n\r\n } else if (event.key === 'Backspace' && isActiveContentBlank(event) && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_PREVIOUS);\r\n command.execute();\r\n\r\n } else if (event.key === 'Delete' && isActiveContentBlank() && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK.DELETE_AND_FOCUS_ON_NEXT);\r\n command.execute();\r\n\r\n }\r\n }\r\n });\r\n\r\n document.addEventListener('keyup', function (event) {\r\n\r\n if ((0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event) && !(0,_block_options_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingBlockOptions)()) {\r\n if (event.key === 'Escape' && isActiveContentBlank() && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n //TODO: write the code to select the all text\r\n\r\n }\r\n }\r\n });\r\n});\r\n\r\n// Block options operations is operations related to the Block Options. Show the block options, hide the block options, filter, ...\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n document.addEventListener('keydown', function (event) {\r\n\r\n if ((0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event) && !(0,_block_options_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingBlockOptions)()) {\r\n\r\n if (event.key === '/' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.SHOW_BLOCK_OPTIONS);\r\n command.execute();\r\n }\r\n }\r\n\r\n if ((0,_block_options_operation__WEBPACK_IMPORTED_MODULE_1__.isShowingBlockOptions)()) {\r\n\r\n if (event.key === 'Escape' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const elementToFocusAfterHide = event.target;\r\n\r\n //TODO: pass the event not event.target/it`s more simple to deal with event when create a click eventListener\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.HIDE_CLEAR_BLOCK_OPTIONS, [elementToFocusAfterHide]);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowDown' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowUp' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_BLOCK_TYPE, [event]);\r\n command.execute();\r\n\r\n } else if (/^[a-z0-9]$/i.test(event.key) && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.FILTER_CONCAT, [event]);\r\n command.execute();\r\n\r\n } else if (event.key === 'Backspace') {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.FILTER_REMOVE_LAST);\r\n command.execute();\r\n }\r\n }\r\n\r\n\r\n if ((0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingSelectableDependentBox)()) {\r\n\r\n if (event.key === 'Escape' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.HIDE_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowDown' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_NEXT_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'ArrowUp' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.MOVE_FAKE_FOCUS_TO_PREVIOUS_OPTION);\r\n command.execute();\r\n\r\n } else if (event.key === 'Enter' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.BLOCK_OPTIONS.APPLY_SELECTED_BLOCK_TYPE, [event]);\r\n command.execute();\r\n\r\n }\r\n }\r\n });\r\n});\r\n\r\n\r\n// Text formatting bar operations is operations related to text presentation, color, show or hide text formatting dependent boxes,...\r\ndocument.addEventListener('keyup', function (event) {\r\n if (event.key === 'Shift' && (0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event)) {\r\n\r\n setTimeout(() => {\r\n if (window.getSelection().toString().trim() !== '') {\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.SHOW_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n }, 10);\r\n\r\n }\r\n});\r\n\r\ndocument.addEventListener('keydown', function (event) {\r\n if (event.ctrlKey && event.key.toLowerCase() === 'a' && (0,_helper__WEBPACK_IMPORTED_MODULE_2__.isTriggable)(event)) {\r\n\r\n setTimeout(() => {\r\n if (window.getSelection().toString().trim() !== '') {\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.SHOW_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n }, 10);\r\n\r\n } else if (event.key === 'Escape' && (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.canHideTextFormattingBar)() && (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingBar)()) {\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.HIDE_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n});\r\n\r\n\r\n\r\nfunction isActiveContentBlank() {\r\n return document.activeElement.textContent.trim() === '';\r\n}\r\n\r\n\r\n// Listen a input link\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n linkBoxInput.addEventListener('keydown', function (event) {\r\n if (event.key === 'Enter') {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.INPUT_LINK_URL);\r\n command.execute();\r\n }\r\n });\r\n});\r\n\r\n\r\n// Lock left and right key when is showing the dependent box\r\ndocument.addEventListener('keydown', function (event) {\r\n if ((0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingSelectableDependentBox)() &&\r\n (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n }\r\n});\r\n\r\n\r\ndocument.addEventListener('keyup', function (event) {\r\n if ((0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingBar)() && (0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.canHideTextFormattingBar)() && !(0,_text_formatting_bar_operation__WEBPACK_IMPORTED_MODULE_3__.isShowingTextFormattingSelectableDependentBox)() &&\r\n (event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\r\n\r\n setTimeout(() => {\r\n if (window.getSelection().toString().trim() == '') {\r\n const command = _command_factory__WEBPACK_IMPORTED_MODULE_0__.createCommand(_command_factory__WEBPACK_IMPORTED_MODULE_0__.OPERATIONS.FORMATTING_BAR.HIDE_TEXT_FORMATTING_BAR, [event]);\r\n command.execute();\r\n }\r\n }, 10);\r\n }\r\n});\n\n//# sourceURL=webpack://johannes/./src/keypress-events.js?"); /***/ }), @@ -202,24 +171,13 @@ eval("// Pilhas para undo e redo\r\nlet undoStack = [];\r\nlet redoStack = [];\r /***/ }), -/***/ "./src/rich-text.js": -/*!**************************!*\ - !*** ./src/rich-text.js ***! - \**************************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n/* harmony import */ var _j_selection__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-selection */ \"./src/j-selection.js\");\n/* harmony import */ var _j_anchor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./j-anchor */ \"./src/j-anchor.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction showTextFormattingBar(event) {\r\n\r\n (0,_j_selection__WEBPACK_IMPORTED_MODULE_1__.saveSelection)();\r\n\r\n changeTurnIntoButtonText();\r\n\r\n const selection = window.getSelection();\r\n\r\n if (selection.rangeCount > 0 && document.querySelector('.johannes-editor').contains(selection.anchorNode) && selection.toString().trim() !== '') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n let range = selection.getRangeAt(0);\r\n let rect = range.getBoundingClientRect();\r\n\r\n textFormattingBar.style.display = 'flex';\r\n textFormattingBar.style.left = `${rect.left + window.scrollX - 50}px`;\r\n textFormattingBar.style.top = `${rect.top + window.scrollY - textFormattingBar.offsetHeight - 10}px`;\r\n }\r\n}\r\n\r\n\r\n\r\nfunction clearTextFormattingButtonActive() {\r\n linkTextButton.classList.remove('text-formatting-button-active');\r\n boldTextButton.classList.remove('text-formatting-button-active');\r\n italicTextButton.classList.remove('text-formatting-button-active');\r\n underlineTextButton.classList.remove('text-formatting-button-active');\r\n codeTextButton.classList.remove('text-formatting-button-active');\r\n strikeThroughTextButton.classList.remove('text-formatting-button-active');\r\n mathTextButton.classList.remove('text-formatting-button-active');\r\n}\r\n\r\nfunction updateTextFormattingActiveButtons() {\r\n\r\n const selectedTags = getSelectedTags();\r\n\r\n selectedTags.forEach(tag => {\r\n\r\n if (tag == \"a\") {\r\n linkTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"strong\") {\r\n boldTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"em\") {\r\n italicTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"u\") {\r\n underlineTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"s\") {\r\n strikeThroughTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"code\") {\r\n codeTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"math\") {\r\n mathTextButton.classList.add('text-formatting-button-active');\r\n }\r\n });\r\n}\r\n\r\nfunction getSelectedTags() {\r\n const selection = window.getSelection();\r\n const tags = [];\r\n\r\n const tagNames = [\"STRONG\", \"S\", \"EM\", \"U\", \"CODE\", \"MATH\", \"A\"];\r\n\r\n if (selection.rangeCount) {\r\n const range = selection.getRangeAt(0);\r\n const startContainer = range.startContainer;\r\n const endContainer = range.endContainer;\r\n\r\n if (startContainer !== endContainer) {\r\n const commonAncestor = range.commonAncestorContainer;\r\n const elements = commonAncestor.nodeType === 1 ? commonAncestor.querySelectorAll(\"*\") : [];\r\n\r\n elements.forEach(el => {\r\n if (tagNames.includes(el.tagName) && selection.containsNode(el, true)) {\r\n tags.push(el.tagName.toLowerCase());\r\n }\r\n });\r\n } else {\r\n let node = startContainer.nodeType === 1 ? startContainer : startContainer.parentNode;\r\n while (node && node !== document) {\r\n if (tagNames.includes(node.tagName)) {\r\n tags.push(node.tagName.toLowerCase());\r\n }\r\n node = node.parentNode;\r\n }\r\n }\r\n }\r\n\r\n return [...new Set(tags)];\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n boldTextButton.addEventListener('click', function (event) {\r\n toggleSelectedTextTo('strong');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n italicTextButton.addEventListener('click', function () {\r\n toggleSelectedTextTo('em');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n underlineTextButton.addEventListener('click', function () {\r\n toggleSelectedTextTo('u');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n codeTextButton.addEventListener('click', function () {\r\n toggleSelectedTextTo('code');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n strikeThroughTextButton.addEventListener('click', function () {\r\n toggleSelectedTextTo('s');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n mathTextButton.addEventListener('click', function () {\r\n toggleSelectedTextTo('math');\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n\r\n linkTextButton.addEventListener('click', function () {\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_2__.save(toggleSelectedTextTo('a'));\r\n\r\n if (_j_anchor__WEBPACK_IMPORTED_MODULE_2__.any()) {\r\n showInputLinkBox();\r\n }\r\n });\r\n\r\n linkBoxInput.addEventListener('keypress', function (event) {\r\n if (event.key === 'Enter') {\r\n urlInsert();\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n }\r\n });\r\n});\r\n\r\n\r\n\r\nfunction urlInsert() {\r\n const url = linkBoxInput.value.trim();\r\n if (!url) return;\r\n\r\n // Simples verificação de URL\r\n if (!url.match(/^https?:\\/\\/.+/)) {\r\n alert('Please enter a valid URL.');\r\n return;\r\n }\r\n\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_2__.setURL(url);\r\n\r\n //Move this to windows manager\r\n linkBox.style.display = 'none';\r\n\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_2__.clear();\r\n\r\n\r\n //Ops\r\n linkBoxInput.value = '';\r\n}\r\n\r\n\r\nfunction toggleSelectedTextTo(tagName, classList = '') {\r\n let newElement = null;\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return;\r\n\r\n const range = selection.getRangeAt(0);\r\n const selectedText = range.toString().trim();\r\n if (!selectedText) return;\r\n\r\n const container = range.commonAncestorContainer;\r\n\r\n // Verificar se a seleção atual está dentro de uma tag específica\r\n let formattedElement = null;\r\n\r\n if (container.nodeType === 3) { // Nó de texto\r\n formattedElement = container.parentNode.tagName.toLowerCase() === tagName.toLowerCase() ? container.parentNode : null;\r\n } else {\r\n formattedElement = container.tagName.toLowerCase() === tagName.toLowerCase() ? container : container.querySelector(tagName);\r\n }\r\n\r\n if (formattedElement) {\r\n // A seleção está dentro da formatação especificada, então devemos remover\r\n const parent = formattedElement.parentNode;\r\n while (formattedElement.firstChild) {\r\n parent.insertBefore(formattedElement.firstChild, formattedElement);\r\n }\r\n parent.removeChild(formattedElement);\r\n\r\n // Mesclar nós de texto adjacentes\r\n parent.normalize();\r\n\r\n // Atualizar a seleção para refletir as mudanças\r\n range.setStart(parent, 0);\r\n range.setEnd(parent, parent.childNodes.length);\r\n } else {\r\n // A seleção não está na formatação especificada, então adicionar\r\n newElement = document.createElement(tagName);\r\n\r\n if (tagName == 'mark') {\r\n let classes = classList.split(',').filter(e => e.length > 0);\r\n\r\n for (let className of classes) {\r\n newElement.classList.add(className);\r\n }\r\n }\r\n\r\n try {\r\n range.surroundContents(newElement);\r\n } catch (e) {\r\n console.error(\"Erro ao aplicar a tag:\", e);\r\n return;\r\n }\r\n\r\n // Atualizar a seleção para refletir as mudanças\r\n range.selectNodeContents(newElement);\r\n }\r\n\r\n // Restaurar a seleção\r\n selection.removeAllRanges();\r\n selection.addRange(range);\r\n\r\n return newElement;\r\n}\r\n\r\n\r\nfunction clearSelection() {\r\n const selection = window.getSelection();\r\n selection.removeAllRanges();\r\n}\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n\r\n //MOUSE-UP\r\n document.addEventListener('mouseup', function (event) {\r\n if (window.getSelection().toString().trim() !== '') {\r\n\r\n clearTextFormattingButtonActive();\r\n showTextFormattingBar(event);\r\n updateTextFormattingActiveButtons();\r\n\r\n } else if (!event.target.closest('#linkBox') && !event.target.closest('#link-text-button')) {\r\n\r\n console.log('MOUSEUP ocultar tool text-formatting-bar e link-box');\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n }\r\n });\r\n\r\n //KEY\r\n document.addEventListener('keyup', function (event) {\r\n if (event.key === 'Shift' && window.getSelection().toString().trim() !== '') {\r\n // text selected\r\n\r\n showTextFormattingBar(event);\r\n\r\n } else if (event.key === 'Escape') {\r\n // scape hide the link-box and text-formatting-bar\r\n console.log('ESC ocultar tool text-formatting-bar e link-box');\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n }\r\n });\r\n\r\n});\r\n\r\n\r\n\r\n\r\n// function adjustWidth() {\r\n// const selectedOption = turnIntoSelect.options[turnIntoSelect.selectedIndex];\r\n// const tempSpan = document.createElement(\"span\");\r\n// tempSpan.style.visibility = \"hidden\";\r\n// tempSpan.style.position = \"fixed\";\r\n// tempSpan.style.whiteSpace = \"nowrap\";\r\n// tempSpan.innerText = selectedOption.text;\r\n// document.body.appendChild(tempSpan);\r\n// turnIntoSelect.style.width = tempSpan.offsetWidth + 24 + \"px\"; // +20 para incluir o padding e o botão de dropdown\r\n// document.body.removeChild(tempSpan);\r\n// }\r\n\r\n\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n turnIntoButton.addEventListener('click', function () {\r\n\r\n if (turnIntoSelect.style.display == 'none') {\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.closeAllDependentBox)();\r\n turnIntoSelect.style.display = 'flex';\r\n } else {\r\n turnIntoSelect.style.display = 'none';\r\n }\r\n });\r\n});\r\n\r\n\r\nfunction changeTurnIntoButtonText() {\r\n\r\n let text = getBlockTypeText();\r\n\r\n turnIntoButton.querySelector('span').innerText = text;\r\n}\r\n\r\nfunction getBlockTypeText() {\r\n let currentBlockRange = window.getSelection().getRangeAt(0);\r\n\r\n let commonAncestor = currentBlockRange.commonAncestorContainer;\r\n\r\n if (commonAncestor.nodeType === 3) { //* text node */\r\n commonAncestor = commonAncestor.parentNode;\r\n }\r\n\r\n const currentBlock = commonAncestor.closest('.johannes-content-element');\r\n\r\n if (currentBlock.tagName === 'H1') {\r\n return 'Heading 1';\r\n } else if (currentBlock.tagName === 'H2') {\r\n return 'Heading 2';\r\n } else if (currentBlock.tagName === 'H3') {\r\n return 'Heading 3';\r\n } else if (currentBlock.tagName === 'H4') {\r\n return 'Heading 4';\r\n } else if (currentBlock.tagName === 'H5') {\r\n return 'Heading 5';\r\n } else if (currentBlock.tagName === 'H6') {\r\n return 'Heading 6';\r\n } else if (currentBlock.tagName === 'P') {\r\n return 'Text';\r\n } else if (currentBlock.tagName === 'UL' && currentBlock.classList.contains('checkbox-list')) {\r\n return 'Todo list';\r\n } else if (currentBlock.tagName === 'UL') {\r\n return 'Bulleted list';\r\n } else if (currentBlock.tagName === 'OL') {\r\n return 'Numbered list';\r\n } else if (currentBlock.tagName === 'BLOCKQUOTE') {\r\n return 'Quote';\r\n } else if (currentBlock.tagName === 'PRE') {\r\n return 'Code';\r\n } else {\r\n return '';\r\n }\r\n\r\n}\r\n\r\n\r\n//Show more options\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n moreTextOptionButton.addEventListener('click', function () {\r\n if (moreTextOptionSelect.style.display == 'none') {\r\n showMoreOptions();\r\n } else {\r\n hideMoreOptions();\r\n }\r\n });\r\n});\r\n\r\n\r\n\r\nfunction showMoreOptions() {\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.closeAllDependentBox)();\r\n moreTextOptionSelect.style.display = 'flex';\r\n}\r\n\r\nfunction hideMoreOptions() {\r\n moreTextOptionSelect.style.display = 'none';\r\n\r\n}\r\n\r\n//Show color options\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n colorTextButton.addEventListener('click', function () {\r\n if (colorTextOptionSelect.style.display == 'none') {\r\n showColorOptions();\r\n } else {\r\n hideColorOptions();\r\n }\r\n });\r\n});\r\n\r\n\r\n\r\nfunction showColorOptions() {\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.closeAllDependentBox)();\r\n colorTextOptionSelect.style.display = 'flex';\r\n}\r\n\r\nfunction hideColorOptions() {\r\n colorTextOptionSelect.style.display = 'none';\r\n\r\n}\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n colorTextOptionSelect.querySelectorAll('.option').forEach(option => {\r\n option.addEventListener('click', function (event) {\r\n let background = event.target.closest('.option').getAttribute('data-color');\r\n toggleSelectedTextTo('mark', background);\r\n clearSelection();\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_0__.tryHideTextFormattingBar)();\r\n });\r\n });\r\n});\n\n//# sourceURL=webpack://johannes/./src/rich-text.js?"); - -/***/ }), - /***/ "./src/switch-block.js": /*!*****************************!*\ !*** ./src/switch-block.js ***! \*****************************/ /***/ (() => { -eval("// import * as factory from './element-factory.js';\r\n\r\n// import { focusOnTheEndOfTheText } from './helper.js';\r\n// import { changeVirtualFocus } from './helper.js';\r\n\r\n// import { showBlockOptions } from './j-window.js';\r\n\r\n\r\n// import { tryHideTextFormattingBar } from './j-window.js';\r\n// import { closeAllDependentBox } from './j-window.js';\r\n\r\n// import './switch-block.css';\r\n\r\n\r\n// //Close the options wrapper when click out\r\n// document.addEventListener('DOMContentLoaded', (event) => {\r\n// const editor = document.querySelector('.johannes-editor');\r\n\r\n// if (editor) {\r\n// document.addEventListener('mousedown', function (event) {\r\n// const optionsWrapper = document.querySelector('.block-options-wrapper');\r\n\r\n// if (optionsWrapper) {\r\n// const isClickInsideOptions = optionsWrapper.contains(event.target);\r\n// const mainMouseButton = event.button === 0;\r\n\r\n// if (!isClickInsideOptions && mainMouseButton) {\r\n// optionsWrapper.style.display = 'none';\r\n// }\r\n// }\r\n// });\r\n// }\r\n// });\r\n\r\n// document.addEventListener('DOMContentLoaded', () => {\r\n\r\n// const editor = document.querySelector('.johannes-editor');\r\n\r\n// const blockOptions = document.querySelector('.johannes-editor > .block-options-wrapper');\r\n// let triggerElement = null;\r\n// let currentDraggableBlock = null;\r\n// let currentFocusedOption = null;\r\n// let filterText = '';\r\n\r\n// if (editor) {\r\n// editor.addEventListener('keydown', function (event) {\r\n\r\n// if (event.key === '/' && event.target.isContentEditable && blockOptions.style.display === 'none' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n// // setTimeout(() => {\r\n\r\n// // const target = event.target;\r\n\r\n// // if (target.closest('.draggable-block')) {\r\n// // event.preventDefault(); // Avoid / be inserted\r\n// // currentDraggableBlock = target.closest('.draggable-block');\r\n// // triggerElement = target;\r\n\r\n// // removeDisplayNoneFromAllBlockOptions();\r\n\r\n// // filterText = '';\r\n// // showBlockOptions();\r\n// // let firstOption = blockOptions.querySelector('.option');\r\n// // removeAllVirtualFocus();\r\n// // currentFocusedOption = changeVirtualFocus(triggerElement, firstOption);\r\n// // }\r\n\r\n// // }, 0);\r\n\r\n// } else if (event.key === 'Escape' && event.target.isContentEditable && blockOptions.style.display !== 'none' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n// // event.preventDefault();\r\n// // if (triggerElement) {\r\n// // triggerElement.focus();\r\n\r\n// // currentFocusedOption.classList.remove('block-options-focused');\r\n// // }\r\n\r\n// // document.querySelector('.block-options-wrapper').style.display = 'none';\r\n// // filterText = '';\r\n// // removeDisplayNoneFromAllBlockOptions();\r\n\r\n// } else if (event.key === 'Enter' && event.target.isContentEditable && (blockOptions.style.display !== 'none' && blockOptions.style.display !== '')) {\r\n\r\n// // event.preventDefault();\r\n\r\n// // currentFocusedOption.classList.remove('block-options-focused');\r\n// // let option = currentFocusedOption;\r\n\r\n// // if (option) {\r\n\r\n// // const block = triggerElement.closest('.draggable-block');\r\n// // const blockType = option.getAttribute('data-type');\r\n\r\n// // const lastSlashIndex = triggerElement.innerText.lastIndexOf('/');\r\n// // triggerElement.innerText = lastSlashIndex !== -1 ? triggerElement.innerText.slice(0, lastSlashIndex) : triggerElement.innerText;\r\n\r\n// // transformBlock(block, blockType);\r\n// // }\r\n\r\n// } else if (event.key === 'ArrowDown' && event.target.isContentEditable && blockOptions.style.display !== 'none') {\r\n// // event.preventDefault();\r\n\r\n// // currentFocusedOption = moveToNextOption(currentFocusedOption, triggerElement);\r\n\r\n// } else if (event.key === 'ArrowUp' && event.target.isContentEditable && blockOptions.style.display !== 'none') {\r\n// // event.preventDefault();\r\n\r\n// // currentFocusedOption = moveToPreviousOption(currentFocusedOption, triggerElement);\r\n\r\n// } else if (event.key === 'Backspace' && event.target.isContentEditable && (blockOptions.style.display !== 'none' && blockOptions.style.display !== '')) {\r\n\r\n// // if (filterText.length > 0) {\r\n\r\n// // filterText = filterText.slice(0, -1);\r\n\r\n// // updateBlockVisibility(filterText);\r\n\r\n// // let firstVisibleOption = findFirstVisibleOption();\r\n\r\n// // removeAllVirtualFocus();\r\n\r\n// // currentFocusedOption = changeVirtualFocus(triggerElement, firstVisibleOption);\r\n\r\n// // } else {\r\n// // blockOptions.style.display = 'none';\r\n// // }\r\n\r\n\r\n// } else if (/^[a-z0-9]$/i.test(event.key) && event.target.isContentEditable && blockOptions.style.display !== 'none' && !event.ctrlKey && !event.shiftKey && !event.altKey) {\r\n\r\n// // filterText += event.key.toLowerCase();\r\n// // updateBlockVisibility(filterText);\r\n\r\n// // let firstVisibleOption = findFirstVisibleOption();\r\n// // removeAllVirtualFocus();\r\n// // currentFocusedOption = changeVirtualFocus(triggerElement, firstVisibleOption);\r\n// }\r\n\r\n// });\r\n\r\n\r\n// // Added listeners in options\r\n// document.querySelectorAll('.block-options .option').forEach(option => {\r\n// option.addEventListener('click', function () {\r\n// const type = this.getAttribute('data-type');\r\n// if (currentDraggableBlock) {\r\n// transformBlock(currentDraggableBlock, type);\r\n// }\r\n// });\r\n// });\r\n// }\r\n// });\r\n\r\n\r\n// function updateBlockVisibility(filter) {\r\n// let sections = document.querySelectorAll('.johannes-editor .block-options-wrapper section');\r\n\r\n// sections.forEach(section => {\r\n// let options = section.querySelectorAll('.option');\r\n// let allHidden = true;\r\n\r\n// options.forEach(option => {\r\n// const type = option.getAttribute('data-type');\r\n// const title = option.querySelector('.block-title').textContent.toLowerCase();\r\n\r\n// if (type.includes(filter) || title.includes(filter.toLowerCase())) {\r\n// option.style.display = '';\r\n// allHidden = false;\r\n// } else {\r\n// option.style.display = 'none';\r\n// }\r\n// });\r\n\r\n// section.style.display = allHidden ? 'none' : '';\r\n// });\r\n\r\n// let emptyListIndicator = document.querySelector('.empty-block-options');\r\n\r\n// let allOptions = document.querySelectorAll('.johannes-editor .block-options-wrapper .option');\r\n\r\n// let hasVisibleOption = Array.from(allOptions).some(option => {\r\n// let style = window.getComputedStyle(option);\r\n// return style.display !== 'none';\r\n// });\r\n\r\n// if (hasVisibleOption) {\r\n// emptyListIndicator.style.display = 'none';\r\n\r\n// } else {\r\n// emptyListIndicator.style.display = 'block';\r\n// }\r\n// }\r\n\r\n\r\n// function removeDisplayNoneFromAllBlockOptions() {\r\n// let sections = document.querySelectorAll('.johannes-editor .block-options-wrapper section');\r\n\r\n// sections.forEach(section => {\r\n// let options = section.querySelectorAll('.option');\r\n\r\n// options.forEach(option => {\r\n// option.style.display = '';\r\n// });\r\n\r\n// section.style.display = '';\r\n// });\r\n// }\r\n\r\n\r\n\r\n// function isElementVisible(element) {\r\n// return element && element.style.display !== 'none' && element.style.visibility !== 'hidden' && element.offsetParent !== null;\r\n// }\r\n\r\n\r\n\r\n// //Added event to listen turnIntoSelect options\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n// turnIntoSelect.querySelectorAll('.option').forEach(option => {\r\n// option.addEventListener('click', function (event) {\r\n\r\n// let type = this.getAttribute('data-type');\r\n// let selection = window.getSelection();\r\n\r\n// if (!selection.rangeCount) return;\r\n// let selectedNode = selection.getRangeAt(0).startContainer;\r\n\r\n// let currentDraggableBlock = selectedNode.nodeType === 3 ?\r\n// selectedNode.parentNode.closest('.draggable-block') :\r\n// selectedNode.closest('.draggable-block');\r\n// if (currentDraggableBlock) {\r\n// transformBlock(currentDraggableBlock, type);\r\n// }\r\n\r\n// closeAllDependentBox();\r\n// tryHideTextFormattingBar();\r\n\r\n// // turnIntoSelect.style.display = 'none';\r\n// // blockOptionsWrapper.style.display = 'none';\r\n// });\r\n// });\r\n// });\n\n//# sourceURL=webpack://johannes/./src/switch-block.js?"); +eval("// //Close the options wrapper when click out\r\n// document.addEventListener('DOMContentLoaded', (event) => {\r\n// const editor = document.querySelector('.johannes-editor');\r\n\r\n// if (editor) {\r\n// document.addEventListener('mousedown', function (event) {\r\n// const optionsWrapper = document.querySelector('.block-options-wrapper');\r\n\r\n// if (optionsWrapper) {\r\n// const isClickInsideOptions = optionsWrapper.contains(event.target);\r\n// const mainMouseButton = event.button === 0;\r\n\r\n// if (!isClickInsideOptions && mainMouseButton) {\r\n// optionsWrapper.style.display = 'none';\r\n// }\r\n// }\r\n// });\r\n// }\r\n// });\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n// //Added event to listen turnIntoSelect options\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n// turnIntoSelect.querySelectorAll('.option').forEach(option => {\r\n// option.addEventListener('click', function (event) {\r\n\r\n// let type = this.getAttribute('data-type');\r\n// let selection = window.getSelection();\r\n\r\n// if (!selection.rangeCount) return;\r\n// let selectedNode = selection.getRangeAt(0).startContainer;\r\n\r\n// let currentDraggableBlock = selectedNode.nodeType === 3 ?\r\n// selectedNode.parentNode.closest('.draggable-block') :\r\n// selectedNode.closest('.draggable-block');\r\n// if (currentDraggableBlock) {\r\n// transformBlock(currentDraggableBlock, type);\r\n// }\r\n\r\n// closeAllDependentBox();\r\n// tryHideTextFormattingBar();\r\n\r\n// // turnIntoSelect.style.display = 'none';\r\n// // blockOptionsWrapper.style.display = 'none';\r\n// });\r\n// });\r\n// });\n\n//# sourceURL=webpack://johannes/./src/switch-block.js?"); /***/ }), @@ -230,7 +188,18 @@ eval("// import * as factory from './element-factory.js';\r\n\r\n// import { foc /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./element-factory */ \"./src/element-factory.js\");\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helper */ \"./src/helper.js\");\n/* harmony import */ var _helper__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_helper__WEBPACK_IMPORTED_MODULE_1__);\n\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const content = document.querySelector('.johannes-editor > .content');\r\n\r\n content.addEventListener('paste', function (event) {\r\n\r\n if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n\r\n const target = event.target;\r\n\r\n if (target.tagName === 'P' && target.isContentEditable) {\r\n const clipboardData = event.clipboardData || window.clipboardData;\r\n const pastedText = clipboardData.getData('text');\r\n\r\n const blocks = pastedText.split('\\n').filter(block => block.trim() !== '');\r\n\r\n target.innerText = blocks[0];\r\n\r\n let currentTarget = target.closest('.draggable-block');\r\n\r\n for (let i = 1; i < blocks.length; i++) {\r\n const newParagraph = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewDraggableParagraphElement)();\r\n const lastContentBlock = newParagraph.querySelector('.johannes-content-element');\r\n lastContentBlock.innerText = blocks[i];\r\n currentTarget.insertAdjacentElement('afterend', newParagraph);\r\n currentTarget = newParagraph;\r\n }\r\n\r\n (0,_helper__WEBPACK_IMPORTED_MODULE_1__.focusOnTheEndOfTheText)(currentTarget.querySelector('.johannes-content-element'));\r\n }\r\n });\r\n});\n\n//# sourceURL=webpack://johannes/./src/text-blocks-from-newlines.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./element-factory */ \"./src/element-factory.js\");\n/* harmony import */ var _j_window__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-window */ \"./src/j-window.js\");\n\r\n\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const content = document.querySelector('.johannes-editor > .content');\r\n\r\n content.addEventListener('paste', function (event) {\r\n\r\n if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n\r\n const target = event.target;\r\n\r\n if (target.tagName === 'P' && target.isContentEditable) {\r\n const clipboardData = event.clipboardData || window.clipboardData;\r\n const pastedText = clipboardData.getData('text');\r\n\r\n const blocks = pastedText.split('\\n').filter(block => block.trim() !== '');\r\n\r\n target.innerText = blocks[0];\r\n\r\n let currentTarget = target.closest('.draggable-block');\r\n\r\n for (let i = 1; i < blocks.length; i++) {\r\n const newParagraph = (0,_element_factory__WEBPACK_IMPORTED_MODULE_0__.createNewDraggableParagraphElement)();\r\n const lastContentBlock = newParagraph.querySelector('.johannes-content-element');\r\n lastContentBlock.innerText = blocks[i];\r\n currentTarget.insertAdjacentElement('afterend', newParagraph);\r\n currentTarget = newParagraph;\r\n }\r\n\r\n (0,_j_window__WEBPACK_IMPORTED_MODULE_1__.focusOnTheEndOfTheText)(currentTarget.querySelector('.johannes-content-element'));\r\n }\r\n });\r\n});\n\n//# sourceURL=webpack://johannes/./src/text-blocks-from-newlines.js?"); + +/***/ }), + +/***/ "./src/text-formatting-bar-operation.js": +/*!**********************************************!*\ + !*** ./src/text-formatting-bar-operation.js ***! + \**********************************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ canHideTextFormattingBar: () => (/* binding */ canHideTextFormattingBar),\n/* harmony export */ hideAllDependentBox: () => (/* binding */ hideAllDependentBox),\n/* harmony export */ hideTextFormattingBar: () => (/* binding */ hideTextFormattingBar),\n/* harmony export */ inputLinkUrl: () => (/* binding */ inputLinkUrl),\n/* harmony export */ isOutOfTextFormattingBar: () => (/* binding */ isOutOfTextFormattingBar),\n/* harmony export */ isShowingTextFormattingBar: () => (/* binding */ isShowingTextFormattingBar),\n/* harmony export */ isShowingTextFormattingSelectableDependentBox: () => (/* binding */ isShowingTextFormattingSelectableDependentBox),\n/* harmony export */ showTextFormattingBar: () => (/* binding */ showTextFormattingBar),\n/* harmony export */ toggleChangeColorBox: () => (/* binding */ toggleChangeColorBox),\n/* harmony export */ toggleEncloseSelectedTextTo: () => (/* binding */ toggleEncloseSelectedTextTo),\n/* harmony export */ toggleInputLinkBox: () => (/* binding */ toggleInputLinkBox),\n/* harmony export */ toggleMoreOptionsBox: () => (/* binding */ toggleMoreOptionsBox),\n/* harmony export */ toggleTurnIntoBox: () => (/* binding */ toggleTurnIntoBox)\n/* harmony export */ });\n/* harmony import */ var _j_selection__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./j-selection */ \"./src/j-selection.js\");\n/* harmony import */ var _j_anchor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./j-anchor */ \"./src/j-anchor.js\");\n/* harmony import */ var _block_options_operation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./block-options-operation */ \"./src/block-options-operation.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nlet textFormattingBarVisible = false;\r\nlet textFormattingBarPreventHide = false;\r\n\r\n\r\n\r\nfunction isShowingTextFormattingSelectableDependentBox() {\r\n let isShowing = (\r\n turnIntoSelect.style.display !== 'none' ||\r\n moreTextOptionSelect.style.display !== 'none' ||\r\n colorTextOptionSelect.style.display !== 'none');\r\n return isShowing;\r\n}\r\n\r\nfunction isOutOfTextFormattingBar(event) {\r\n\r\n if (!event.target.closest('#textFormattingBar') && !event.target.closest('#linkBox')) {\r\n return true;\r\n }\r\n\r\n return false;\r\n}\r\n\r\nfunction canHideTextFormattingBar() {\r\n return !textFormattingBarPreventHide;\r\n}\r\n\r\nfunction isShowingTextFormattingBar() {\r\n return textFormattingBar.style.display !== 'none';\r\n}\r\n\r\nfunction showTextFormattingBar(event) {\r\n\r\n console.log('show text formatting bar');\r\n\r\n hideAllDependentBox();\r\n\r\n textFormattingBarVisible = true;\r\n textFormattingBarPreventHide = true;\r\n\r\n setTimeout(() => {\r\n textFormattingBarPreventHide = false;\r\n }, 300);\r\n\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.removeSavedSelection();\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.saveSelection();\r\n\r\n clearTextFormattingButtonActive();\r\n updateTextFormattingActiveButtons();\r\n\r\n changeTurnIntoButtonText();\r\n removeAllSVGsFromTextOptions();\r\n setCurrentSelectedBlockOptionIcon();\r\n\r\n const selection = window.getSelection();\r\n\r\n if (selection.rangeCount > 0 && document.querySelector('.johannes-editor').contains(selection.anchorNode) && selection.toString().trim() !== '') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n let range = selection.getRangeAt(0);\r\n let rect = range.getBoundingClientRect();\r\n\r\n textFormattingBar.style.display = 'flex';\r\n textFormattingBar.style.left = `${rect.left + window.scrollX - 50}px`;\r\n textFormattingBar.style.top = `${rect.top + window.scrollY - textFormattingBar.offsetHeight - 10}px`;\r\n }\r\n}\r\n\r\nfunction hideTextFormattingBar() {\r\n\r\n console.log('hide text formatting bar ');\r\n\r\n // textFormattingBar.style.display = 'none';\r\n\r\n tryHideTextFormattingBar();\r\n}\r\n\r\n\r\nfunction clearTextFormattingButtonActive() {\r\n linkTextButton.classList.remove('text-formatting-button-active');\r\n boldTextButton.classList.remove('text-formatting-button-active');\r\n italicTextButton.classList.remove('text-formatting-button-active');\r\n underlineTextButton.classList.remove('text-formatting-button-active');\r\n codeTextButton.classList.remove('text-formatting-button-active');\r\n strikeThroughTextButton.classList.remove('text-formatting-button-active');\r\n mathTextButton.classList.remove('text-formatting-button-active');\r\n colorCircle.classList.remove('text-formatting-circle-active');\r\n}\r\n\r\nfunction updateTextFormattingActiveButtons() {\r\n\r\n const selectedTags = getSelectedTags();\r\n\r\n selectedTags.forEach(tag => {\r\n\r\n if (tag == \"a\") {\r\n linkTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"strong\") {\r\n boldTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"em\") {\r\n italicTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"u\") {\r\n underlineTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"s\") {\r\n strikeThroughTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"code\") {\r\n codeTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"math\") {\r\n mathTextButton.classList.add('text-formatting-button-active');\r\n }\r\n\r\n if (tag == \"mark\") {\r\n colorCircle.classList.add('text-formatting-circle-active');\r\n }\r\n });\r\n}\r\n\r\nfunction getSelectedTags() {\r\n const selection = window.getSelection();\r\n const tags = [];\r\n\r\n const tagNames = [\"STRONG\", \"S\", \"EM\", \"U\", \"CODE\", \"MATH\", \"A\", \"MARK\"];\r\n\r\n if (selection.rangeCount) {\r\n const range = selection.getRangeAt(0);\r\n const startContainer = range.startContainer;\r\n const endContainer = range.endContainer;\r\n\r\n if (startContainer !== endContainer) {\r\n const commonAncestor = range.commonAncestorContainer;\r\n const elements = commonAncestor.nodeType === 1 ? commonAncestor.querySelectorAll(\"*\") : [];\r\n\r\n elements.forEach(el => {\r\n if (tagNames.includes(el.tagName) && selection.containsNode(el, true)) {\r\n tags.push(el.tagName.toLowerCase());\r\n }\r\n });\r\n } else {\r\n let node = startContainer.nodeType === 1 ? startContainer : startContainer.parentNode;\r\n while (node && node !== document) {\r\n if (tagNames.includes(node.tagName)) {\r\n tags.push(node.tagName.toLowerCase());\r\n }\r\n node = node.parentNode;\r\n }\r\n }\r\n }\r\n\r\n return [...new Set(tags)];\r\n}\r\n\r\n\r\nfunction toggleEncloseSelectedTextTo(event) {\r\n const dataTag = event.target.closest('.entry').getAttribute('data-tag');\r\n const dataClass = event.target.closest('.entry').getAttribute('data-class');\r\n\r\n if (dataClass) {\r\n toggleSelectedTextTo(dataTag, dataClass);\r\n } else {\r\n toggleSelectedTextTo(dataTag);\r\n }\r\n\r\n hideAllDependentBox();\r\n hideTextFormattingBar();\r\n\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.restoreSelection();\r\n}\r\n\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n\r\n// boldTextButton.addEventListener('click', function (event) {\r\n// toggleSelectedTextTo('strong');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// italicTextButton.addEventListener('click', function () {\r\n// toggleSelectedTextTo('em');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// underlineTextButton.addEventListener('click', function () {\r\n// toggleSelectedTextTo('u');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// codeTextButton.addEventListener('click', function () {\r\n// toggleSelectedTextTo('code');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// strikeThroughTextButton.addEventListener('click', function () {\r\n// toggleSelectedTextTo('s');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// mathTextButton.addEventListener('click', function () {\r\n// toggleSelectedTextTo('math');\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n\r\n// linkTextButton.addEventListener('click', function () {\r\n// jAnchor.save(toggleSelectedTextTo('a'));\r\n\r\n// if (jAnchor.any()) {\r\n// showInputLinkBox();\r\n// }\r\n// });\r\n\r\n// linkBoxInput.addEventListener('keypress', function (event) {\r\n// if (event.key === 'Enter') {\r\n// urlInsert();\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// }\r\n// });\r\n// });\r\n\r\n\r\n\r\nfunction inputLinkUrl() {\r\n const url = linkBoxInput.value.trim();\r\n if (!url) return;\r\n\r\n // Simples verificação de URL\r\n if (!url.match(/^https?:\\/\\/.+/)) {\r\n alert('Please enter a valid URL.');\r\n return;\r\n }\r\n\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_1__.setURL(url);\r\n\r\n //Move this to windows manager\r\n hideLinkBox();\r\n\r\n // jAnchor.clear();\r\n // jSelection.clearAllSelection();\r\n\r\n\r\n //Ops\r\n linkBoxInput.value = '';\r\n}\r\n\r\n\r\nfunction toggleSelectedTextTo(tagName, classList = '') {\r\n let newElement = null;\r\n\r\n const range = _j_selection__WEBPACK_IMPORTED_MODULE_0__.getSavedRange();\r\n const selectedText = range.toString().trim();\r\n if (!selectedText) return;\r\n\r\n const container = range.commonAncestorContainer;\r\n\r\n // Encontrar o elemento formatado mais próximo\r\n let formattedElement = null;\r\n if (container.nodeType === 3) { // Nó de texto\r\n formattedElement = container.parentNode.tagName.toLowerCase() === tagName.toLowerCase() ? container.parentNode : null;\r\n } else {\r\n formattedElement = container.tagName.toLowerCase() === tagName.toLowerCase() ? container : container.querySelector(tagName);\r\n }\r\n\r\n if (formattedElement) {\r\n // Remover todos os irmãos dentro da seleção que correspondem ao tagName\r\n const siblings = Array.from(formattedElement.parentNode.childNodes).filter(child =>\r\n child.nodeType === 1 && // Element node\r\n child.tagName.toLowerCase() === tagName.toLowerCase() &&\r\n range.intersectsNode(child) // Verifica se o nó está dentro da seleção\r\n );\r\n\r\n const parent = formattedElement.parentNode;\r\n siblings.forEach(sibling => {\r\n while (sibling.firstChild) {\r\n parent.insertBefore(sibling.firstChild, sibling);\r\n }\r\n parent.removeChild(sibling);\r\n });\r\n\r\n parent.normalize();\r\n\r\n // Atualizar a seleção para refletir as mudanças\r\n range.setStart(parent, 0);\r\n range.setEnd(parent, parent.childNodes.length);\r\n } else {\r\n // A seleção não está na formatação especificada, então adicionar\r\n newElement = document.createElement(tagName);\r\n if (tagName === 'mark') {\r\n let classes = classList.split(',').filter(e => e.length > 0);\r\n classes.forEach(className => {\r\n newElement.classList.add(className);\r\n });\r\n }\r\n\r\n try {\r\n range.surroundContents(newElement);\r\n } catch (e) {\r\n console.error(\"Erro ao aplicar a tag:\", e);\r\n return;\r\n }\r\n\r\n range.selectNodeContents(newElement);\r\n }\r\n\r\n // Restaurar a seleção\r\n // selection.removeAllRanges();\r\n // selection.addRange(range);\r\n\r\n return newElement;\r\n}\r\n\r\n//original funcional\r\n// function toggleSelectedTextTo(tagName, classList = '') {\r\n\r\n// let newElement = null;\r\n\r\n\r\n\r\n// const range = jSelection.getSavedRange();\r\n// const selectedText = range.toString().trim();\r\n// if (!selectedText) return;\r\n\r\n// const container = range.commonAncestorContainer;\r\n\r\n// // Verificar se a seleção atual está dentro de uma tag específica\r\n// let formattedElement = null;\r\n\r\n// if (container.nodeType === 3) { // Nó de texto\r\n// formattedElement = container.parentNode.tagName.toLowerCase() === tagName.toLowerCase() ? container.parentNode : null;\r\n// } else {\r\n// formattedElement = container.tagName.toLowerCase() === tagName.toLowerCase() ? container : container.querySelector(tagName);\r\n// }\r\n\r\n// if (formattedElement) {\r\n// // A seleção está dentro da formatação especificada, então devemos remover\r\n// const parent = formattedElement.parentNode;\r\n// while (formattedElement.firstChild) {\r\n// parent.insertBefore(formattedElement.firstChild, formattedElement);\r\n// }\r\n// parent.removeChild(formattedElement);\r\n\r\n// // Mesclar nós de texto adjacentes\r\n// parent.normalize();\r\n\r\n// // Atualizar a seleção para refletir as mudanças\r\n// range.setStart(parent, 0);\r\n// range.setEnd(parent, parent.childNodes.length);\r\n// } else {\r\n// // A seleção não está na formatação especificada, então adicionar\r\n// newElement = document.createElement(tagName);\r\n\r\n// if (tagName == 'mark') {\r\n// let classes = classList.split(',').filter(e => e.length > 0);\r\n\r\n// for (let className of classes) {\r\n// newElement.classList.add(className);\r\n// }\r\n// }\r\n\r\n// try {\r\n// range.surroundContents(newElement);\r\n// } catch (e) {\r\n// console.error(\"Erro ao aplicar a tag:\", e);\r\n// return;\r\n// }\r\n\r\n// // Atualizar a seleção para refletir as mudanças\r\n// range.selectNodeContents(newElement);\r\n// }\r\n\r\n// // Restaurar a seleção\r\n// // selection.removeAllRanges();\r\n// // selection.addRange(range);\r\n\r\n// return newElement;\r\n// }\r\n\r\n\r\n// function clearSelection() {\r\n// const selection = window.getSelection();\r\n// selection.removeAllRanges();\r\n// }\r\n\r\n\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n\r\n// //MOUSE-UP\r\n// document.addEventListener('mouseup', function (event) {\r\n// if (window.getSelection().toString().trim() !== '') {\r\n\r\n// clearTextFormattingButtonActive();\r\n// showTextFormattingBar(event);\r\n// updateTextFormattingActiveButtons();\r\n\r\n// } else if (!event.target.closest('#linkBox') && !event.target.closest('#link-text-button')) {\r\n\r\n// console.log('MOUSEUP ocultar tool text-formatting-bar e link-box');\r\n\r\n// tryHideTextFormattingBar();\r\n// }\r\n// });\r\n\r\n// //KEY\r\n// document.addEventListener('keyup', function (event) {\r\n// if (event.key === 'Shift' && window.getSelection().toString().trim() !== '') {\r\n// // text selected\r\n\r\n// showTextFormattingBar(event);\r\n\r\n// } else if (event.key === 'Escape') {\r\n// // scape hide the link-box and text-formatting-bar\r\n// console.log('ESC ocultar tool text-formatting-bar e link-box');\r\n\r\n// tryHideTextFormattingBar();\r\n// }\r\n// });\r\n\r\n// });\r\n\r\n\r\n\r\n\r\n// function adjustWidth() {\r\n// const selectedOption = turnIntoSelect.options[turnIntoSelect.selectedIndex];\r\n// const tempSpan = document.createElement(\"span\");\r\n// tempSpan.style.visibility = \"hidden\";\r\n// tempSpan.style.position = \"fixed\";\r\n// tempSpan.style.whiteSpace = \"nowrap\";\r\n// tempSpan.innerText = selectedOption.text;\r\n// document.body.appendChild(tempSpan);\r\n// turnIntoSelect.style.width = tempSpan.offsetWidth + 24 + \"px\"; // +20 para incluir o padding e o botão de dropdown\r\n// document.body.removeChild(tempSpan);\r\n// }\r\n\r\n\r\n\r\n\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n// turnIntoButton.addEventListener('click', function () {\r\n\r\n// if (turnIntoSelect.style.display == 'none') {\r\n// closeAllDependentBox();\r\n// turnIntoSelect.style.display = 'flex';\r\n// } else {\r\n// turnIntoSelect.style.display = 'none';\r\n// }\r\n// });\r\n// });\r\n\r\n\r\nfunction changeTurnIntoButtonText() {\r\n\r\n let text = getBlockTypeText();\r\n\r\n turnIntoButton.querySelector('span').innerText = text;\r\n}\r\n\r\nfunction getBlockTypeText() {\r\n let currentBlockRange = window.getSelection().getRangeAt(0);\r\n\r\n let commonAncestor = currentBlockRange.commonAncestorContainer;\r\n\r\n if (commonAncestor.nodeType === 3) { //* text node */\r\n commonAncestor = commonAncestor.parentNode;\r\n }\r\n\r\n const currentBlock = commonAncestor.closest('.johannes-content-element');\r\n\r\n if (currentBlock.tagName === 'H1') {\r\n return 'Heading 1';\r\n } else if (currentBlock.tagName === 'H2') {\r\n return 'Heading 2';\r\n } else if (currentBlock.tagName === 'H3') {\r\n return 'Heading 3';\r\n } else if (currentBlock.tagName === 'H4') {\r\n return 'Heading 4';\r\n } else if (currentBlock.tagName === 'H5') {\r\n return 'Heading 5';\r\n } else if (currentBlock.tagName === 'H6') {\r\n return 'Heading 6';\r\n } else if (currentBlock.tagName === 'P') {\r\n return 'Text';\r\n } else if (currentBlock.tagName === 'UL' && currentBlock.classList.contains('checkbox-list')) {\r\n return 'Todo list';\r\n } else if (currentBlock.tagName === 'UL') {\r\n return 'Bulleted list';\r\n } else if (currentBlock.tagName === 'OL') {\r\n return 'Numbered list';\r\n } else if (currentBlock.tagName === 'BLOCKQUOTE') {\r\n return 'Quote';\r\n } else if (currentBlock.tagName === 'PRE') {\r\n return 'Code';\r\n } else {\r\n return '';\r\n }\r\n\r\n}\r\n\r\nfunction setCurrentSelectedBlockOptionIcon() {\r\n let block = (0,_j_selection__WEBPACK_IMPORTED_MODULE_0__.getCurrentDraggableBlockFocused)().querySelector('.johannes-content-element');\r\n\r\n if (block) {\r\n let type = block.getAttribute('data-type');\r\n let option = turnIntoSelect.querySelector(`[data-type=\"${type}\"]`);\r\n\r\n if (option) {\r\n let svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\r\n let use = document.createElementNS(\"http://www.w3.org/2000/svg\", \"use\");\r\n use.setAttributeNS(\"http://www.w3.org/1999/xlink\", \"href\", \"#icon-material-small-check\");\r\n\r\n svg.appendChild(use);\r\n svg.setAttribute('width', '24');\r\n svg.setAttribute('height', '24');\r\n svg.setAttribute('fill', 'currentColor');\r\n\r\n let textOption = option.querySelector('.text-option');\r\n textOption.appendChild(svg);\r\n }\r\n }\r\n}\r\n\r\nfunction removeAllSVGsFromTextOptions() {\r\n const textOptions = turnIntoSelect.querySelectorAll('.text-option');\r\n\r\n textOptions.forEach(textOption => {\r\n const svgs = textOption.querySelectorAll('svg');\r\n\r\n svgs.forEach(svg => {\r\n svg.parentNode.removeChild(svg);\r\n });\r\n });\r\n}\r\n\r\n\r\n\r\n\r\n\r\nfunction toggleMoreOptionsBox(event) {\r\n\r\n console.log('toggle more options');\r\n\r\n const isHidden = moreTextOptionSelect.style.display == 'none';\r\n\r\n if (isHidden) {\r\n moreTextOptionSelect.style.display = 'flex';\r\n (0,_block_options_operation__WEBPACK_IMPORTED_MODULE_2__.showDependentBlockOptions)(event.target);\r\n\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.temporarySelectContentFromCurrentSelection();\r\n\r\n } else {\r\n hideMoreOptionsBox();\r\n }\r\n\r\n hideChangeColorBox();\r\n hideTurnIntoBox();\r\n hideLinkBox();\r\n}\r\n\r\nfunction toggleChangeColorBox(event) {\r\n\r\n console.log('toggle change color');\r\n\r\n const isHidden = colorTextOptionSelect.style.display == 'none';\r\n\r\n if (isHidden) {\r\n colorTextOptionSelect.style.display = 'flex';\r\n (0,_block_options_operation__WEBPACK_IMPORTED_MODULE_2__.showDependentBlockOptions)(event.target);\r\n } else {\r\n colorTextOptionSelect.style.display = 'none';\r\n }\r\n\r\n hideTurnIntoBox();\r\n hideMoreOptionsBox();\r\n hideLinkBox();\r\n}\r\n\r\nfunction toggleTurnIntoBox(event) {\r\n\r\n console.log('toggle turn into box');\r\n\r\n const isHidden = turnIntoSelect.style.display == 'none';\r\n\r\n if (isHidden) {\r\n turnIntoSelect.style.display = 'flex';\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.temporarySelectContentFromCurrentSelection();\r\n\r\n (0,_block_options_operation__WEBPACK_IMPORTED_MODULE_2__.showDependentBlockOptions)(event.target);\r\n } else {\r\n hideTurnIntoBox();\r\n }\r\n\r\n hideChangeColorBox();\r\n hideMoreOptionsBox();\r\n hideLinkBox();\r\n}\r\n\r\n//**Show */\r\nfunction toggleInputLinkBox() {\r\n\r\n\r\n console.log('toggle input link box');\r\n\r\n const isHidden = linkBox.style.display == 'none';\r\n\r\n if (isHidden) {\r\n // turnIntoSelect.style.display = 'flex';\r\n\r\n showInputLinkBox();\r\n\r\n } else {\r\n turnIntoSelect.style.display = 'none';\r\n }\r\n\r\n hideChangeColorBox();\r\n hideMoreOptionsBox();\r\n hideTurnIntoBox();\r\n}\r\n\r\n\r\n\r\nfunction showInputLinkBox() {\r\n\r\n const rect = _j_selection__WEBPACK_IMPORTED_MODULE_0__.getSavedRange().getBoundingClientRect();\r\n\r\n const containerWidth = textFormattingBar.offsetWidth;\r\n const linkInputDivWidth = linkBox.offsetWidth;\r\n const containerCenter = (textFormattingBar.getBoundingClientRect().left + containerWidth) / 2;\r\n const linkInputDivCenter = (linkBox.getBoundingClientRect().left + linkInputDivWidth) / 2;\r\n\r\n linkBox.style.position = 'absolute';\r\n linkBox.style.left = `${containerCenter - linkInputDivCenter + window.scrollX}px`;\r\n linkBox.style.top = `${rect.bottom + window.scrollY + 5}px`;\r\n linkBox.style.display = 'block';\r\n\r\n // linkBoxInput.focus();\r\n\r\n highlightTheSelectionText();\r\n\r\n}\r\n\r\n//The highlight is added using a anchor. It's ok? I swap to span\r\nfunction highlightTheSelectionText() {\r\n const a = toggleSelectedTextTo('a');\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_1__.setAnchor(a);\r\n}\r\n\r\n\r\n\r\n\r\n// toggle-change-color-formatting-bar\r\n\r\n//Show color options\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n// colorTextButton.addEventListener('click', function () {\r\n// if (colorTextOptionSelect.style.display == 'none') {\r\n// showColorOptions();\r\n// } else {\r\n// hideColorOptions();\r\n// }\r\n// });\r\n// });\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction showColorOptions() {\r\n hideAllDependentBox();\r\n colorTextOptionSelect.style.display = 'flex';\r\n}\r\n\r\n\r\n\r\n// document.addEventListener('DOMContentLoaded', function () {\r\n// colorTextOptionSelect.querySelectorAll('.option').forEach(option => {\r\n// option.addEventListener('click', function (event) {\r\n// let background = event.target.closest('.option').getAttribute('data-color');\r\n// toggleSelectedTextTo('mark', background);\r\n// clearSelection();\r\n// tryHideTextFormattingBar();\r\n// });\r\n// });\r\n// });\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction tryHideTextFormattingBar() {\r\n\r\n // check before if a dependent box is opened, then close the dependent box\r\n\r\n //1. try close text-formatting-bar before linkBox (the actual only one dependency box)\r\n if (isShowingTextFormattingBar() && !anyDependentBoxVisible()) {\r\n // only hide if the dependency box is closed\r\n textFormattingBar.style.display = 'none';\r\n // restoreSelection();\r\n }\r\n\r\n // 2. close the dependency box (linkBox)\r\n if (anyDependentBoxVisible()) {\r\n\r\n // Remove a if has no href attribute or if href is empty\r\n //Move this to a logic inside the linking box\r\n // if (anchorElement && (anchorElement.href == '' || anchorElement.href == null)) {\r\n // const parent = anchorElement.parentNode;\r\n // while (anchorElement.firstChild) {\r\n // parent.insertBefore(anchorElement.firstChild, anchorElement);\r\n // }\r\n\r\n // if (parent) {\r\n // parent.removeChild(anchorElement);\r\n // parent.normalize(); // Mesclar nós de texto adjacentes, se necessário\r\n // }\r\n // }\r\n\r\n // linkBox.style.display = 'none';\r\n hideAllDependentBox();\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.restoreSelection();\r\n }\r\n}\r\n\r\nfunction anyDependentBoxVisible() {\r\n const dependentBoxes = document.querySelectorAll('.dependent-box');\r\n\r\n for (const box of dependentBoxes) {\r\n if (box.style.display !== 'none') {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\nfunction hideMoreOptionsBox() {\r\n\r\n if (moreTextOptionSelect.style.display == 'none') {\r\n return;\r\n }\r\n\r\n console.log('hide more options');\r\n\r\n moreTextOptionSelect.style.display = 'none';\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.restoreSelection();\r\n}\r\n\r\nfunction hideTurnIntoBox() {\r\n\r\n if (turnIntoSelect.style.display == 'none') {\r\n return;\r\n }\r\n\r\n console.log('hide turn into box');\r\n turnIntoSelect.style.display = 'none';\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.restoreSelection();\r\n //jSelection.restoreSelection(); //TODO. Do I need this?\r\n //jSelection.removeSavedSelection();\r\n}\r\n\r\nfunction hideChangeColorBox() {\r\n\r\n if (colorTextOptionSelect.style.display == 'none') {\r\n return;\r\n }\r\n\r\n console.log('hide change color box');\r\n colorTextOptionSelect.style.display = 'none';\r\n}\r\n\r\nfunction hideLinkBox() {\r\n\r\n if (linkBox.style.display == 'none') {\r\n return;\r\n }\r\n\r\n console.log('hide link box');\r\n\r\n // if(linkBox.style.display != 'none'){\r\n\r\n // }\r\n _j_anchor__WEBPACK_IMPORTED_MODULE_1__.clear();\r\n _j_selection__WEBPACK_IMPORTED_MODULE_0__.restoreSelection();\r\n linkBox.style.display = 'none';\r\n}\r\n\r\n\r\n\r\nfunction hideAllDependentBox() {\r\n hideMoreOptionsBox();\r\n hideTurnIntoBox();\r\n hideChangeColorBox();\r\n hideLinkBox();\r\n}\r\n\n\n//# sourceURL=webpack://johannes/./src/text-formatting-bar-operation.js?"); /***/ }) diff --git a/demo/assets/style.css b/demo/assets/style.css index 660acc7..0827d5f 100644 --- a/demo/assets/style.css +++ b/demo/assets/style.css @@ -20,6 +20,102 @@ +/** add block */ +.add-block { + margin: 0; + padding: 0; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #000; + background-color: white; + transition: all 0.3s ease; + box-sizing: border-box; + margin-left: 1.3rem; +} + +.add-block-wrapper { + width: 100%; + height: 3.125rem; +} + +.add-block-wrapper:hover .add-block { + display: flex; +} + +/** and add block */ + + + +/** List **/ +ol.johannes-content-element, +ul.johannes-content-element { + padding-left: 1rem !important; +} + + + +.johannes-content-element li>button { + /* display: none; */ + display: none; + position: absolute; + margin-left: 10px; + top: 0; + + flex-direction: row; + align-items: start; + justify-content: start; + +} + +.johannes-content-element li { + position: relative; +} + +.johannes-content-element li::before { + margin-left: 4px; +} + +.johannes-content-element li:hover>button { + /* display: inline-block; */ + display: inline-flex; + +} + +p.johannes-content-element { + display: inline-block; + line-height: 1; + margin: 0; + padding: 0; +} + +.johannes-content-element .checkbox-list { + list-style-type: none; + padding-left: 0 !important; +} + + +.johannes-content-element .checkbox-list li { + display: flex; + flex-direction: row; + justify-content: left; +} + + +.johannes-content-element ul.checkbox-list input[type="checkbox"]:checked+span { + text-decoration: line-through; +} + +ul.johannes-content-element:not(.checkbox-list), +ol.johannes-content-element:not(.checkbox-list) { + padding-left: 1.5rem !important; +} + +/** and list **/ + + .draggable-block>.drag-handler { color: #84888d; @@ -274,30 +370,21 @@ p { #textFormattingBar { - /* display: flex; */ justify-content: space-between; padding: 8px 16px; background-color: #f9f9f9; - - background: #f9f9f9 !important; - width: fit-content; z-index: 999999; position: absolute; - + user-select: none; } - +/* TODO: remove this*/ span { font-family: Arial, sans-serif; } - -/* #textFormattingBar .xpy { - display: inline-block; -}*/ - #textFormattingBar .item { color: rgb(120, 119, 116); display: flex; @@ -312,37 +399,11 @@ span { } -/* -#textFormattingBar .item .xpy { - display: flex; - flex-direction: row; - gap: 10px; - border-radius: 5px; -} */ - - -#textFormattingBar .item .xpy :hover { - background-color: rgba(55, 53, 47, 0.08); - border-radius: 3px; -} - #textFormattingBar select { color: rgb(120, 119, 116); border: none; font-size: 0.85rem; - /* background-position: calc(100% - 4px) center; */ background-color: inherit; - - /* background-color: red; */ - - /* display: flex; - justify-content: start; - text-align: center; */ -} - - -#textFormattingBar select option { - /* padding: 10px 15px ; */ } .select-wrapper { @@ -438,30 +499,13 @@ a:not([href]) { } .text-formatting-button-active { - color: blue; + color: #2382e2; } - - - -/* #Seeessdas svg{ - display: inline-flex !important; - justify-content: center !important; - align-items: center !important; - background-color: red; - vertical-align: center !important; - flex-direction: row !important; +.text-formatting-circle-active { + border-color: #2382e2 !important; } -#Seeessdas svg use{ - display: inline-flex !important; - justify-content: center !important; - align-items: center !important; - background-color: red; - vertical-align: center !important; - flex-direction: row !important; -} */ - #moreTextOptionSelect { @@ -512,7 +556,7 @@ mark { } #turnIntoSelect .option-image { - display: none !important; + /* display: none !important; */ } .border-less-image { @@ -586,7 +630,7 @@ mark { .block-options-focused { outline: none; background-color: #e9e9e9; - border: inherit; + border: none; } @@ -598,8 +642,34 @@ mark { border: inherit; } -.option-hover:hover { +/* .option-hover:hover { + background-color: #e9e9e9; + box-shadow: 0px 0px 0px 2px #e9e9e9; + border-radius: 1px; + transition: 0.1s ease; +} */ + +/* .select-wrapper>button, */ + +#turnIntoButton, +#colorTextButton{ + padding-left: 4px; +} + +#turnIntoButton:not([disabled]):hover, +#colorTextButton:not([disabled]):hover, +#moreTextOptionButton:not([disabled]):hover, +#textFormattingBar .item>button:not([disabled]):hover { background-color: #e9e9e9; + box-shadow: 0px 0px 0px 2px #e9e9e9; + border-radius: 1px; + transition: 0.1s ease; +} + +ul .option-hover:not([disabled]):hover { + background-color: #e9e9e9; + border-radius: 1px; + transition: 0.1s ease; } @@ -658,29 +728,33 @@ mark { } /** End Block Options **/ -/*!*********************************************************************!*\ - !*** css ./node_modules/css-loader/dist/cjs.js!./src/add-block.css ***! - \*********************************************************************/ -.add-block { - margin: 0; - padding: 0; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #000; - background-color: white; - transition: all 0.3s ease; - box-sizing: border-box; - margin-left: 1.3rem; + + + +#deleteBlockButton:hover svg, +#deleteBlockButton:hover { + color: rgb(235, 87, 87) !important; } -.add-block-wrapper { - width: 100%; - height: 3.125rem; + + + + + + +.johannes-editor *::selection { + background-color: #d3e3fd !important; } -.add-block-wrapper:hover .add-block { +.johannes-editor * { + line-height: 1.5; +} + + +.text-option { + width: 100%; display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } diff --git a/demo/index.html b/demo/index.html index aa3fca6..8601680 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,21 +29,20 @@

-
-

+

-
-
+
+ Code +
-
  • +
  • - Quote +
    + Quote +
    • -
  • +
  • -
    Heading 1 + +
    + Heading 1 +
    • -
  • +
  • -
    Heading 2 + +
    + Heading 2 +
    • -
  • +
  • -
    Heading 3 + +
    + Heading 3 +
    • -
  • +
  • -
    Heading 4 + +
    + Heading 4 +
    • -
  • +
  • -
    Heading 5 + +
    + Heading 5 +
    • -
  • +
  • -
    Heading 6 + +
    + Heading 6 +
    • @@ -452,37 +522,57 @@

    Turn into

    - - - - - - -
    + +