SDK: Enable Inline editing in text fields for React SDK

[fmontes]

As a author, I want to be able to enable inline editing in text fields for pages being in Universal Visual Editor, so that users can easily edit text content directly on the page.

Acceptance Criteria

Preview Give feedback

1. Create a component <EditableText /> to add to components
2. Users should be able to click on "texts" in the Universal Visual Editor and edit the content directly in the page with TinyMCE.
3. Changes made in the inline editing mode should be saved and reflected on the page.
4. The inline editing feature should work seamlessly across different browsers and devices.
5. Only loads on EDIT_MODE

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.:

The way that this works in the traditional approach is that developers needs to "mark" the sections of the contentlet being rendered that can be inline edited.

The way that is marked is like this:

<h1 
    #if ($EDIT_MODE) 
        data-language="${CONTENT_LANGUAGE}"
        data-mode="minimal"
        data-inode="${ContentInode}"
        data-field-name="title"      
    #end
>
    $!{title}
</h1>

This will show a blue border around the text to indicate to the user that this is editable and when the user clicks it will start TinyMCE floating on top of the element.

Warning

If the contentlet lives in more than one page, it will pop up the corresponding dialog.

Developers needs to pass 4 data attributes to their HTML in the container:

1. language: well, you know
2. mode: this will set up the TinyMCE toolbar, big or small, see image here.
3. inode: you know
4. field-name: the var name of the field of the contentlet user can edit.

With this information, we can trigger a workflow action (REST) to save/update the corresponding contentlet field, like this:

fetch("http://localhost:8080/api/v1/workflow/actions/default/fire/EDIT?inode=a196bf08-a1bd-4c1c-8709-786b6385545d", {
  "body": "{\"contentlet\":{\"inode\":\"a196bf08-a1bd-4c1c-8709-786b6385545d\",\"title\":\"Explore the World 123\"}}",
  "method": "PUT",
});

And this will edit the contentlet and save the new text.

Headless

Since we should not inject anything yo our customer headless implementations, we need to write a component in our SDK that allow developers to "mark" the text they want to be editable.

We need to provide a <EditableText / > component.

It should work the same BUT we have a new mode: plain which is no TinyMCE but to use the attribute contenteditable, also plain should be default, meaning if no mode is passed, it defaults to plain. So now we will have 3 modes:

1. full: TinyMCE big toolbar
2. minimal: TinyMCE small toolbar
3. plain: NO TinyMCE and contenteditable (this is the default mode)

And in our React application, developers can use like this:

diff --git a/examples/nextjs/src/components/content-types/banner.js b/examples/nextjs/src/components/content-types/banner.js
index f21f339ca7..f512bf2534 100644
--- a/examples/nextjs/src/components/content-types/banner.js
+++ b/examples/nextjs/src/components/content-types/banner.js
@@ -1,8 +1,8 @@
 import Image from "next/image";
 import Link from "next/link";
-import { useDotcmsPageContext } from "@dotcms/react";
+import { useDotcmsPageContext, EditableText } from "@dotcms/react";
 
-function Banner({ title, image, caption, buttonText, link }) {
+function Banner({ title, image, caption, buttonText, link, inode }) {
     const {
         pageAsset: {
             viewAs: { language },
@@ -19,7 +19,9 @@ function Banner({ title, image, caption, buttonText, link }) {
                 alt={title}
             />
             <div className="absolute inset-0 flex flex-col items-center justify-center p-4 text-center text-white">
-                <h2 className="mb-2 text-6xl font-bold text-shadow">{title}</h2>
+                <h2 className="mb-2 text-6xl font-bold text-shadow">
+                    <EditableText mode="minimal" inode={inode} field="title" lang={language}>{title}</EditableText>
+                </h2>
                 <p className="mb-4 text-xl text-shadow">{caption}</p>
                 <Link
                     className="p-4 text-xl transition duration-300 bg-purple-500 rounded hover:bg-purple-600"

EditableText Component

1. It will show a blue border to indicate that it is editable.
2. OnClick, it will initialize TinyMCE if the mode is full or minimal, or use the contenteditable attribute for plain.
3. OnBlur, it will save the content by posting a message with the required information to the UVE.
4. If the user deletes all text and blurs out, we don't emit anything and just return the old text.
5. If the user clicks, changes nothing, and blurs out, we do nothing.
6. Undo/Redo: should work, TinyCME might handle this.
7. Error handling: if the request to save fails, we need to show a toast with the error and return to the previours text.
8. ESC key: should cancel the editing and no save changes.

Loading TinyMCE

1. TinyMCE has an official React component we can use
2. We only load TinyMCE in EDIT_MODE
3. In LIVE_MODE no trace of TinyMCE should be in the bundle
4. You might probably want to dynamic load this if possible.

Assumptions & Initiation Needs

1. This includes traditional and headless rendering
2. It should NOT BREAK the API we had for the old editor in traditional mode
3. It should use the new version of TinyMCE.
4. This doesn't include inline editing for block editor fields.

Quality Assurance Notes & Workarounds

N/A

[KevinDavilaDotCMS]

Passed IQA

Tested in master

Screen.Recording.2024-09-03.at.11.49.02.AM.mov

[bryanboza]

Fixed, tested on trunk // Docker // FF