toggle/untoggle format to continue typing in format/non-format

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))
 

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 {