5htp-core 0.6.0 → 0.6.1

package/client/components/Rte/ToolbarPlugin/index.tsx

@@ -1,10 +1,6 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
 
 // Core
 import Button from '@client/components/Button';
@@ -49,6 +45,7 @@ import {
 } from '@lexical/utils';
 import {
     $createParagraphNode,
+    $createTextNode,
     $getNodeByKey,
     $getRoot,
     $getSelection,
@@ -94,6 +91,48 @@ import { INSERT_PAGE_BREAK } from '../plugins/PageBreakPlugin';
 import { InsertPollDialog } from '../plugins/PollPlugin';
 import { InsertTableDialog } from '../plugins/TablePlugin';
 
+/*----------------------------------
+- TYPES
+----------------------------------*/
+export type TToolbarDisplay = {
+    // Default to true
+    blocks?: boolean,
+    formatting?: boolean | {
+        bold?: boolean,
+        italic?: boolean,
+        underline?: boolean,
+        code?: boolean,
+        link?: boolean,
+    },
+    styles?: boolean | {
+        strikethrough?: boolean,
+        subscript?: boolean,
+        superscript?: boolean,
+        clear?: boolean,
+    },
+    insert?: boolean | {
+        horizontalRule?: boolean,
+        pageBreak?: boolean,
+        code?: boolean,
+        image?: boolean,
+        inlineImage?: boolean,
+        table?: boolean,
+        list?: boolean,
+        poll?: boolean,
+        columns?: boolean,
+        stickyNote?: boolean,
+        collapsibleContainer?: boolean,
+    },
+    alignment?: boolean,
+    custom?: (
+        editor: LexicalEditor, 
+        getSelection: typeof $getSelection
+    ) => React.JSX.Element,
+}
+
+/*----------------------------------
+- UTILS
+----------------------------------*/
 function getCodeLanguageOptions(): [string, string][] {
     const options: [string, string][] = [];
 
@@ -116,16 +155,18 @@ function dropDownActiveClass(active: boolean) {
     }
 }
 
-
-
 function Divider(): React.JSX.Element {
     return <div className="divider" />;
 }
 
+/*----------------------------------
+- COMPONENT
+----------------------------------*/
 export default function ToolbarPlugin({
-    setIsLinkEditMode,
+    setIsLinkEditMode, display
 }: {
     setIsLinkEditMode: Dispatch<boolean>;
+    display?: TToolbarDisplay
 }): React.JSX.Element {
 
     const { modal } = useContext();
@@ -474,7 +515,7 @@ export default function ToolbarPlugin({
     const canViewerSeeInsertCodeButton = !isImageCaption;
 
     return (
-        <div className="row menu al-left" style={{ 
+        <div className="row menu al-left pdb-05" style={{ 
             position: 'sticky', 
             top: 0, 
             background: 'white', 
@@ -497,7 +538,13 @@ export default function ToolbarPlugin({
 
             <Divider /> */}
 
-            {blockTypeNames.includes(blockType) && activeEditor === editor && (
+            {display?.custom && display?.custom(editor, $getSelection)}
+
+            {(
+                blockTypeNames.includes(blockType)
+                && 
+                display?.blocks
+            ) && activeEditor === editor && (
                 <>
                     <BlockFormatDropDown
                         disabled={!isEditable}
@@ -526,74 +573,78 @@ export default function ToolbarPlugin({
                         ))}
                     </div>
                 </DropDown>
-            ) : (
+            ) : display?.formatting !== false && (
                 <>
-                    <Button icon="bold" size="s"
-                        disabled={!isEditable}
-                        onClick={() => {
-                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-                        }}
-                        active={isBold}
-                        title={IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)'}
-                    />
-                    <Button icon="italic" size="s"
-                        disabled={!isEditable}
-                        onClick={() => {
-                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-                        }}
-                        active={isItalic}
-                        title={IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)'}
-                    />
-                    <Button icon="underline" size="s"
-                        disabled={!isEditable}
-                        onClick={() => {
-                            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
-                        }}
-                        active={isUnderline}
-                        title={IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)'}
-                    />
+                    {display?.formatting === true || display?.formatting?.bold !== false && (
+                        <Button icon="bold" size="s"
+                            disabled={!isEditable}
+                            onClick={() => {
+                                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                            }}
+                            active={isBold}
+                            title={IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)'}
+                        />
+                    )}
+                    {display?.formatting === true || display?.formatting?.italic !== false && (
+                        <Button icon="italic" size="s"
+                            disabled={!isEditable}
+                            onClick={() => {
+                                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                            }}
+                            active={isItalic}
+                            title={IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)'}
+                        />
+                    )}
 
-                    {canViewerSeeInsertCodeButton && (
-                        <Button icon="code" size="s"
+                    {display?.formatting === true || display?.formatting?.underline !== false && (
+                        <Button icon="underline" size="s"
                             disabled={!isEditable}
                             onClick={() => {
-                                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                                activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
                             }}
-                            active={isCode}
-                            title="Insert code block"
+                            active={isUnderline}
+                            title={IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)'}
                         />
                     )}
-                    <Button icon="link" size="s"
-                        disabled={!isEditable}
-                        onClick={insertLink}
-                        active={isLink}
-                        title="Insert link"
-                    />
 
-                    {/* <DropdownColorPicker
-                        disabled={!isEditable}
-                        buttonClassName="toolbar-item color-picker"
-                        buttonAriaLabel="Formatting text color"
-                        buttonIconClassName="icon font-color"
-                        color={fontColor}
-                        onChange={onFontColorSelect}
-                        title="text color"
-                    />
-                    <DropdownColorPicker
-                        disabled={!isEditable}
-                        buttonClassName="toolbar-item color-picker"
-                        buttonAriaLabel="Formatting background color"
-                        buttonIconClassName="icon bg-color"
-                        color={bgColor}
-                        onChange={onBgColorSelect}
-                        title="bg color"
-                    /> */}
-
-                    <DropDown popover={{ tag: 'li' }} icon="font" size="s"
-                        disabled={!isEditable}
-                        hint="Formatting options for additional text styles"
-                    >
+                    {display?.formatting === true || display?.formatting?.link !== false && (
+                        <Button icon="link" size="s"
+                            disabled={!isEditable}
+                            onClick={insertLink}
+                            active={isLink}
+                            title="Insert link"
+                        />
+                    )}
+                </>
+            )}
 
+
+            {/* <DropdownColorPicker
+                disabled={!isEditable}
+                buttonClassName="toolbar-item color-picker"
+                buttonAriaLabel="Formatting text color"
+                buttonIconClassName="icon font-color"
+                color={fontColor}
+                onChange={onFontColorSelect}
+                title="text color"
+            />
+            <DropdownColorPicker
+                disabled={!isEditable}
+                buttonClassName="toolbar-item color-picker"
+                buttonAriaLabel="Formatting background color"
+                buttonIconClassName="icon bg-color"
+                color={bgColor}
+                onChange={onBgColorSelect}
+                title="bg color"
+            /> */}
+
+            {display?.styles !== false && (
+                <DropDown popover={{ tag: 'li' }} icon="font" size="s"
+                    disabled={!isEditable}
+                    hint="Formatting options for additional text styles"
+                >
+
+                    {display?.styles === true || display?.styles?.strikethrough !== false && (
                         <Button icon="strikethrough" size="s"
                             onClick={() => {
                                 activeEditor.dispatchCommand( FORMAT_TEXT_COMMAND, 'strikethrough');
@@ -603,7 +654,9 @@ export default function ToolbarPlugin({
                         >
                             Strikethrough
                         </Button>
+                    )}
 
+                    {display?.styles === true || display?.styles?.subscript !== false && (
                         <Button icon="subscript" size="s"
                             onClick={() => {
                                 activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
@@ -613,7 +666,9 @@ export default function ToolbarPlugin({
                         >
                             Subscript
                         </Button>
+                    )}
 
+                    {display?.styles === true || display?.styles?.superscript !== false && (
                         <Button icon="superscript" size="s"
                             onClick={() => {
                                 activeEditor.dispatchCommand(
@@ -625,137 +680,171 @@ export default function ToolbarPlugin({
                             title="Format text with a superscript">
                             Superscript
                         </Button>
+                    )}
 
+                    {display?.styles === true || display?.styles?.clear !== false && (
                         <Button icon="empty-set" size="s"
                             onClick={clearFormatting}
                             title="Clear all text formatting">
                             Clear Formatting
                         </Button>
+                    )}
 
-                    </DropDown>
+                </DropDown>
+            )}
 
-                    {canViewerSeeInsertDropdown && (
-                        <>
-                            <Divider />
-                            <DropDown popover={{ tag: 'li' }}
+            {(canViewerSeeInsertDropdown && display?.insert !== false) && (
+                <>
+                    <DropDown popover={{ tag: 'li' }}
+                        disabled={!isEditable}
+                        size="s"
+                        icon="plus-circle"
+                        hint="Insert specialized editor node"
+                    >
+
+                        {display?.insert === true || display?.insert?.horizontalRule !== false && (
+                            <Button icon="horizontal-rule" size="s" onClick={() => {
+                                activeEditor.dispatchCommand( INSERT_HORIZONTAL_RULE_COMMAND, undefined, );
+                            }}>
+                                Horizontal Rule
+                            </Button>
+                        )}
+
+                        {display?.insert === true || display?.insert?.pageBreak !== false && (
+                            <Button icon="page-break" size="s" onClick={() => {
+                                activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
+                            }}>
+                                Page Break
+                            </Button>
+                        )}
+
+                        {(canViewerSeeInsertCodeButton && (display?.insert === true || display?.insert?.code !== false)) && (
+                            <Button icon="code" size="s"
                                 disabled={!isEditable}
-                                size="s"
-                                icon="plus-circle"
-                                hint="Insert specialized editor node"
-                            >
+                                onClick={() => {
+                                    activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+                                }}
+                                active={isCode}
+                                title="Insert code block"
+                            />
+                        )}
+
+                        {display?.insert === true || display?.insert?.image !== false && (
+                            <Button icon="image" size="s" onClick={() => {
+                                modal.show('Insert Image', InsertImageDialog, { editor: activeEditor });
+                            }}>
+                                Image
+                            </Button>
+                        )}
 
-                                <Button icon="horizontal-rule" size="s" onClick={() => {
-                                    activeEditor.dispatchCommand( INSERT_HORIZONTAL_RULE_COMMAND, undefined, );
-                                }}>
-                                    Horizontal Rule
-                                </Button>
+                        {display?.insert === true || display?.insert?.inlineImage !== false && (
+                            <Button icon="image" size="s" onClick={() => {
+                                modal.show('Insert Inline Image', InsertInlineImageDialog, { editor: activeEditor });
+                            }}>
+                                Inline Image
+                            </Button>
+                        )}
 
-                                <Button icon="page-break" size="s" onClick={() => {
-                                    activeEditor.dispatchCommand(INSERT_PAGE_BREAK, undefined);
-                                }}>
-                                    Page Break
-                                </Button>
+                        {/* <Button
+                            onClick={() => {
+                                activeEditor.dispatchCommand(
+                                    INSERT_EXCALIDRAW_COMMAND,
+                                    undefined,
+                                );
+                            }}
+                            className="item">
+                            <i className="icon diagram-2" />
+                            <span className="text">Excalidraw</span>
+                        </Button> */}
+
+                        {display?.insert === true || display?.insert?.table !== false && (
+                            <Button icon="table" size="s" onClick={() => {
+                                modal.show('Insert Table', InsertTableDialog, { editor: activeEditor });
+                            }}>
+                                Table
+                            </Button>
+                        )}
 
-                                <Button icon="image" size="s" onClick={() => {
-                                    modal.show('Insert Image', InsertImageDialog, { editor: activeEditor });
-                                }}>
-                                    Image
-                                </Button>
+                        {display?.insert === true || display?.insert?.poll !== false && (
+                            <Button icon="poll" size="s" onClick={() => {
+                                modal.show('Insert Poll', InsertPollDialog, { editor: activeEditor });
+                            }}>
+                                Poll
+                            </Button>
+                        )}
 
-                                <Button icon="image" size="s" onClick={() => {
-                                    modal.show('Insert Inline Image', InsertInlineImageDialog, { editor: activeEditor });
-                                }}>
-                                    Inline Image
-                                </Button>
-
-                                {/* <Button
-                                    onClick={() => {
-                                        activeEditor.dispatchCommand(
-                                            INSERT_EXCALIDRAW_COMMAND,
-                                            undefined,
-                                        );
-                                    }}
-                                    className="item">
-                                    <i className="icon diagram-2" />
-                                    <span className="text">Excalidraw</span>
-                                </Button> */}
-
-                                <Button icon="table" size="s" onClick={() => {
-                                    modal.show('Insert Table', InsertTableDialog, { editor: activeEditor });
-                                }}>
-                                    Table
-                                </Button>
+                        {display?.insert === true || display?.insert?.columns !== false && (
+                            <Button icon="columns" size="s" onClick={() => {
+                                modal.show('Insert Columns Layout', InsertLayoutDialog, { editor: activeEditor });
+                            }} >
+                                Columns Layout
+                            </Button>
+                        )}
 
-                                <Button icon="poll" size="s" onClick={() => {
-                                    modal.show('Insert Poll', InsertPollDialog, { editor: activeEditor });
-                                }}>
-                                   Poll
-                                </Button>
-
-                                <Button icon="columns" size="s" onClick={() => {
-                                    modal.show('Insert Columns Layout', InsertLayoutDialog, { editor: activeEditor });
-                                }} >
-                                    Columns Layout
-                                </Button>
-
-                                {/* <Button
-                                    onClick={() => {
-                                        modal.show('Insert Equation', (onClose) => (
-                                            <InsertEquationDialog
-                                                activeEditor={activeEditor}
-                                                onClose={onClose}
-                                            />
-                                        ));
-                                    }}
-                                    className="item">
-                                    <i className="icon equation" />
-                                    <span className="text">Equation</span>
-                                </Button> */}
-
-                                <Button icon="sticky-note" size="s" onClick={() => {
-                                    editor.update(() => {
-                                        const root = $getRoot();
-                                        const stickyNode = $createStickyNode(0, 0);
-                                        root.append(stickyNode);
-                                    });
-                                }}>
-                                    Sticky Note
-                                </Button>
+                        {/* <Button
+                            onClick={() => {
+                                modal.show('Insert Equation', (onClose) => (
+                                    <InsertEquationDialog
+                                        activeEditor={activeEditor}
+                                        onClose={onClose}
+                                    />
+                                ));
+                            }}
+                            className="item">
+                            <i className="icon equation" />
+                            <span className="text">Equation</span>
+                        </Button> */}
+
+                        {display?.insert === true || display?.insert?.stickyNote !== false && (
+                            <Button icon="sticky-note" size="s" onClick={() => {
+                                editor.update(() => {
+                                    const root = $getRoot();
+                                    const stickyNode = $createStickyNode(0, 0);
+                                    root.append(stickyNode);
+                                });
+                            }}>
+                                Sticky Note
+                            </Button>
+                        )}
 
-                                <Button icon="caret-right" size="s" onClick={() => {
-                                    editor.dispatchCommand(
-                                        INSERT_COLLAPSIBLE_COMMAND,
-                                        undefined,
+                        {display?.insert === true || display?.insert?.collapsibleContainer !== false && (
+                            <Button icon="caret-right" size="s" onClick={() => {
+                                editor.dispatchCommand(
+                                    INSERT_COLLAPSIBLE_COMMAND,
+                                    undefined,
+                                );
+                            }}>
+                                Collapsible container
+                            </Button>
+                        )}
+
+                        {/*EmbedConfigs.map((embedConfig) => (
+                            <Button
+                                key={embedConfig.type}
+                                onClick={() => {
+                                    activeEditor.dispatchCommand(
+                                        INSERT_EMBED_COMMAND,
+                                        embedConfig.type,
                                     );
                                 }}>
-                                    Collapsible container
-                                </Button>
-
-                                {/*EmbedConfigs.map((embedConfig) => (
-                                    <Button
-                                        key={embedConfig.type}
-                                        onClick={() => {
-                                            activeEditor.dispatchCommand(
-                                                INSERT_EMBED_COMMAND,
-                                                embedConfig.type,
-                                            );
-                                        }}>
-                                        {embedConfig.icon}
-                                        <span className="text">{embedConfig.contentName}</span>
-                                    </Button>
-                                ))*/}
-                            </DropDown>
-                        </>
-                    )}
+                                {embedConfig.icon}
+                                <span className="text">{embedConfig.contentName}</span>
+                            </Button>
+                        ))*/}
+                    </DropDown>
                 </>
             )}
-            <Divider />
-            <ElementFormatDropdown
-                disabled={!isEditable}
-                value={elementFormat}
-                editor={activeEditor}
-                isRTL={isRTL}
-            />
+
+            {display?.alignment !== false && <>
+                <Divider />
+                <ElementFormatDropdown
+                    disabled={!isEditable}
+                    value={elementFormat}
+                    editor={activeEditor}
+                    isRTL={isRTL}
+                />
+            </>}
+
         </div>
     );
 }

package/client/components/Rte/currentEditor.ts

@@ -3,7 +3,16 @@ import { $generateHtmlFromNodes } from '@lexical/html';
 import editorNodes from '@common/data/rte/nodes';
 import ExampleTheme from '@client/components/Rte/themes/PlaygroundEditorTheme';
 
-class RichEditorUtils {
+import { 
+    default as RteUtils, 
+    LexicalNode, 
+    LexicalState, 
+    TRenderOptions,
+    TContentAssets
+} from '@common/utils/rte';
+
+
+class RichEditorUtils extends RteUtils {
 
     public active: {
         title: string,
@@ -12,7 +21,7 @@ class RichEditorUtils {
 
     private virtualEditor: LexicalEditor | null = null;
 
-    public async jsonToHtml( value: {} ): Promise<string | null> {
+    public async jsonToHtml( value: LexicalState, options: TRenderOptions = {} ): Promise<string | null> {
 
         if (!this.virtualEditor) {
             // Create a headless Lexical editor instance
@@ -37,6 +46,26 @@ class RichEditorUtils {
         return html;
     }
 
+    protected async processContent( 
+        node: LexicalNode, 
+        parent: LexicalNode | null, 
+        callback: (node: LexicalNode, parent: LexicalNode | null) => Promise<LexicalNode>
+    ): Promise<LexicalNode> {
+        return node;
+    }
+
+    protected async transformNode( node: LexicalNode, parent: LexicalNode | null, assets: TContentAssets, options: TRenderOptions ): Promise<LexicalNode> {
+        return node;
+    }
+
+    protected async deleteUnusedFile( 
+        node: LexicalNode, 
+        assets: TContentAssets, 
+        options: NonNullable<TRenderOptions["attachements"]>
+    ): Promise<LexicalNode> {
+        return node;
+    }
+
 }
 
 export default new RichEditorUtils();

package/client/components/Rte/index.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 // Core libs
 import { useInput, InputBaseProps, InputWrapper } from '../utils';
+import type { TToolbarDisplay } from './ToolbarPlugin';
 
 // Special componets
 import type TEditor from './Editor';
@@ -19,6 +20,8 @@ import './style.less';
 export type Props = {
     preview?: boolean,
     title: string,
+    toolbar?: TToolbarDisplay,
+    decorateText?: boolean
 } 
 
 /*----------------------------------

package/client/components/Rte/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -180,7 +180,10 @@ function TextFormatFloatingToolbar({
     }, [editor, $updateTextFormatFloatingToolbar]);
 
     return (
-        <div ref={popupCharStylesEditorRef} className="floating-text-format-popup card pd-05 row menu">
+        <div ref={popupCharStylesEditorRef} className="floating-text-format-popup card pdv-0 pdh-05 row menu" style={{
+            borderRadius: '2rem',
+            height: '4rem'
+        }}>
             {editor.isEditable() && (
                 <>
                     <Button size="s" icon="bold" active={isBold} onClick={() => {