From ab500a4c12f5c99a78bcf4e9006523c58a0b59c9 Mon Sep 17 00:00:00 2001
From: MAX-786 <hussainmohammad328@gmail.com>
Date: Wed, 14 Aug 2024 05:44:08 +0530
Subject: [PATCH] toggle/untoggle format to continue typing in
 format/non-format

---
 README.md                  |  7 ++++---
 packages/hydra-js/hydra.js | 11 +++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 55554a1..22ca8c6 100644
--- a/README.md
+++ b/README.md
@@ -336,10 +336,11 @@ Additionally your frontend can
 
 Note Hydra.js knows about the schema of your blocks and based on the field name will determine what to make your html editable.
 
-Currently, Hydra.js supports BOLD, ITALIC & STRIKETHROUGH formats on slate blocks and following are the conditions when it breaks slate:
-- if you select the whole text and change its formats your frontend might throw slate error saying `Cannot get the leaf node at path [0,0] because it refers to a non-leaf node: ` but it is due to proper syncing of json b/w hydrajs & adminUI.
-- if you select text at the end of the line samething will happen.
+IMPORTANT: Currently, Hydra.js supports BOLD, ITALIC & STRIKETHROUGH formats on slate blocks and following are the conditions when it breaks slate:
+- if you select the whole text and change its formats your frontend might throw slate error saying `Cannot get the leaf node at path [0,0] because it refers to a non-leaf node:` but it is due to proper syncing of json b/w hydrajs & adminUI.
+- At the endline if you press format button then it will change the state (active/inactive) but frontend might throw slate error/warning that `Error: Cannot find a descendant at path [0,4,0] in node:` 
 - pressing ENTER is not implemented so, pressing it will have abnormal changes & error ([TODO](https://github.com/collective/volto-hydra/issues/33))
+These will not break the codebase completely as deserializer at the adminUI cleans up the html and make a proper
 
 #### Inline media uploading ([TODO](https://github.com/collective/volto-hydra/issues/36))
 
diff --git a/packages/hydra-js/hydra.js b/packages/hydra-js/hydra.js
index 0955544..4520cc0 100644
--- a/packages/hydra-js/hydra.js
+++ b/packages/hydra-js/hydra.js
@@ -212,8 +212,7 @@ class Bridge {
       const handleSelectionChange = () => {
         const selection = window.getSelection();
         const range = selection.getRangeAt(0);
-        const selectedText = selection.toString();
-        console.log(selectedText);
+
         // Append the bold button only if text is selected and the block has the data-editable-field="value" attribute
 
         const formats = this.isFormatted(range);
@@ -576,7 +575,7 @@ class Bridge {
 
           if (targetElement && this.isInlineEditing) {
             this.handleTextChangeOnSlate(targetElement);
-          } else {
+          } else if (this.isInlineEditing) {
             const targetElement = mutation.target?.parentElement.closest(
               '[data-editable-field]',
             );
@@ -762,7 +761,7 @@ class Bridge {
 
     const range = selection.getRangeAt(0);
     const currentFormats = this.isFormatted(range);
-    console.log(currentFormats);
+
     if (currentFormats[format].present) {
       this.unwrapFormatting(range, format);
     } else {
@@ -790,7 +789,7 @@ class Bridge {
       italic: ['EM', 'I'],
       del: ['DEL'],
     };
-
+    const selection = window.getSelection();
     // Check if the selection is entirely within a formatting element of the specified type
     let container = range.commonAncestorContainer;
     while (
@@ -804,7 +803,7 @@ class Bridge {
           range.startOffset === 0 &&
           range.endOffset === container.textContent.length;
 
-        if (isEntireContentSelected) {
+        if (isEntireContentSelected || selection.isCollapsed) {
           // Unwrap the entire element
           this.unwrapElement(container);
         } else {