Inline format text (#119)

* add bold button on toolbar

* bold button active/inactive state is set based on selected text

* toggle bold in form data

* update toggleMark to accurately update blocksData with nodeIds

* update the formData at adminUI, to make everything at sync

* add mark (bold) when text is selected

* remove toggleMark from adminUI

* - moving toggleMark to adminUI and using 'slate-hyperscript' to create our own deserializer to convert html string to slate JSON.
- At hydrajs, also updated how we determine if the selected text is Formatted or not and made it more efficient.
- onClick on format btns , we are updating the html node and sending it to adminUI but we are not recieving it back at frontend since we are in inline edit mode .

* move addNodeIds to adminUI and also added functionality to reverse the bold.

* add del & italic formats

* handle ui for active/inactive state of formats:

- at hydrajs, reusing the isFormatted method while deciding active/inactive state of the format btns.

- ALSO as discussed in recent sprint that if the format(s) is(are) active then it should keep typing in that format .

* Improve handling of formatting elements within the selection

* inline edit of other than slate blocks

* fix breaking of hydrajs in handleTextChange

* update readme

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

* Fix example imports

---------

Co-authored-by: [email protected] <[email protected]>

README.md

@@ -338,7 +338,13 @@ Additionally your frontend can
 - determine which types of text format (node) appear on the quanta toolbar when editing rich text, including adding custom formats ([TODO](https://github.com/collective/volto-hydra/issues/109))
 - add a callback of ```onBlockFieldChange``` to rerender just the editable fields more quickly while editing (TODO)
 
-Note Hydra.js knows about the schema of your blocks and based on the field name will determine what what to make your html editable.
+Note Hydra.js knows about the schema of your blocks and based on the field name will determine what to make your html editable.
+
+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))
 

examples/hydra-nextjs/src/components/Menu/Menu.js

@@ -1,7 +1,7 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import { Menu as SemanticMenu } from 'semantic-ui-react';
-import { getTokenFromCookie } from '#utils/hydra';
+import { getTokenFromCookie } from '@volto-hydra/hydra-js';
 import Link from 'next/link';
 import RecursiveMenuItem from '@/components/RecursiveMenuItem';
 import { fetchContent } from '#utils/api';

examples/hydra-nextjs/src/components/RecursiveMenuItem/RecursiveMenuItem.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Menu as SemanticMenu } from 'semantic-ui-react';
 import Link from 'next/link';
 import HoverableDropdown from '@/components/HoverableDropdown';
-import { getTokenFromCookie } from '#utils/hydra';
+import { getTokenFromCookie } from '@volto-hydra/hydra-js';
 import { fetchContent } from '#utils/api';
 import extractEndpoints from '#utils/extractEndpoints';