5htp-core 0.4.8-3 → 0.4.9-1

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/index.ts

@@ -0,0 +1,284 @@
+/**
+ * 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.
+ *
+ */
+
+import './Collapsible.css';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  $findMatchingParent,
+  $insertNodeToNearestRoot,
+  mergeRegister,
+} from '@lexical/utils';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_LOW,
+  createCommand,
+  DELETE_CHARACTER_COMMAND,
+  ElementNode,
+  INSERT_PARAGRAPH_COMMAND,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  LexicalNode,
+} from 'lexical';
+import {useEffect} from 'react';
+
+import {
+  $createCollapsibleContainerNode,
+  $isCollapsibleContainerNode,
+  CollapsibleContainerNode,
+} from './CollapsibleContainerNode';
+import {
+  $createCollapsibleContentNode,
+  $isCollapsibleContentNode,
+  CollapsibleContentNode,
+} from './CollapsibleContentNode';
+import {
+  $createCollapsibleTitleNode,
+  $isCollapsibleTitleNode,
+  CollapsibleTitleNode,
+} from './CollapsibleTitleNode';
+
+export const INSERT_COLLAPSIBLE_COMMAND = createCommand<void>();
+
+export default function CollapsiblePlugin(): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (
+      !editor.hasNodes([
+        CollapsibleContainerNode,
+        CollapsibleTitleNode,
+        CollapsibleContentNode,
+      ])
+    ) {
+      throw new Error(
+        'CollapsiblePlugin: CollapsibleContainerNode, CollapsibleTitleNode, or CollapsibleContentNode not registered on editor',
+      );
+    }
+
+    const $onEscapeUp = () => {
+      const selection = $getSelection();
+      if (
+        $isRangeSelection(selection) &&
+        selection.isCollapsed() &&
+        selection.anchor.offset === 0
+      ) {
+        const container = $findMatchingParent(
+          selection.anchor.getNode(),
+          $isCollapsibleContainerNode,
+        );
+
+        if ($isCollapsibleContainerNode(container)) {
+          const parent = container.getParent<ElementNode>();
+          if (
+            parent !== null &&
+            parent.getFirstChild<LexicalNode>() === container &&
+            selection.anchor.key ===
+              container.getFirstDescendant<LexicalNode>()?.getKey()
+          ) {
+            container.insertBefore($createParagraphNode());
+          }
+        }
+      }
+
+      return false;
+    };
+
+    const $onEscapeDown = () => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) && selection.isCollapsed()) {
+        const container = $findMatchingParent(
+          selection.anchor.getNode(),
+          $isCollapsibleContainerNode,
+        );
+
+        if ($isCollapsibleContainerNode(container)) {
+          const parent = container.getParent<ElementNode>();
+          if (
+            parent !== null &&
+            parent.getLastChild<LexicalNode>() === container
+          ) {
+            const titleParagraph = container.getFirstDescendant<LexicalNode>();
+            const contentParagraph = container.getLastDescendant<LexicalNode>();
+
+            if (
+              (contentParagraph !== null &&
+                selection.anchor.key === contentParagraph.getKey() &&
+                selection.anchor.offset ===
+                  contentParagraph.getTextContentSize()) ||
+              (titleParagraph !== null &&
+                selection.anchor.key === titleParagraph.getKey() &&
+                selection.anchor.offset === titleParagraph.getTextContentSize())
+            ) {
+              container.insertAfter($createParagraphNode());
+            }
+          }
+        }
+      }
+
+      return false;
+    };
+
+    return mergeRegister(
+      // Structure enforcing transformers for each node type. In case nesting structure is not
+      // "Container > Title + Content" it'll unwrap nodes and convert it back
+      // to regular content.
+      editor.registerNodeTransform(CollapsibleContentNode, (node) => {
+        const parent = node.getParent<ElementNode>();
+        if (!$isCollapsibleContainerNode(parent)) {
+          const children = node.getChildren<LexicalNode>();
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        }
+      }),
+
+      editor.registerNodeTransform(CollapsibleTitleNode, (node) => {
+        const parent = node.getParent<ElementNode>();
+        if (!$isCollapsibleContainerNode(parent)) {
+          node.replace(
+            $createParagraphNode().append(...node.getChildren<LexicalNode>()),
+          );
+          return;
+        }
+      }),
+
+      editor.registerNodeTransform(CollapsibleContainerNode, (node) => {
+        const children = node.getChildren<LexicalNode>();
+        if (
+          children.length !== 2 ||
+          !$isCollapsibleTitleNode(children[0]) ||
+          !$isCollapsibleContentNode(children[1])
+        ) {
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        }
+      }),
+
+      // This handles the case when container is collapsed and we delete its previous sibling
+      // into it, it would cause collapsed content deleted (since it's display: none, and selection
+      // swallows it when deletes single char). Instead we expand container, which is although
+      // not perfect, but avoids bigger problem
+      editor.registerCommand(
+        DELETE_CHARACTER_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if (
+            !$isRangeSelection(selection) ||
+            !selection.isCollapsed() ||
+            selection.anchor.offset !== 0
+          ) {
+            return false;
+          }
+
+          const anchorNode = selection.anchor.getNode();
+          const topLevelElement = anchorNode.getTopLevelElement();
+          if (topLevelElement === null) {
+            return false;
+          }
+
+          const container = topLevelElement.getPreviousSibling<LexicalNode>();
+          if (!$isCollapsibleContainerNode(container) || container.getOpen()) {
+            return false;
+          }
+
+          container.setOpen(true);
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+
+      // When collapsible is the last child pressing down/right arrow will insert paragraph
+      // below it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if trailing paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        $onEscapeDown,
+        COMMAND_PRIORITY_LOW,
+      ),
+
+      editor.registerCommand(
+        KEY_ARROW_RIGHT_COMMAND,
+        $onEscapeDown,
+        COMMAND_PRIORITY_LOW,
+      ),
+
+      // When collapsible is the first child pressing up/left arrow will insert paragraph
+      // above it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if leading paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        $onEscapeUp,
+        COMMAND_PRIORITY_LOW,
+      ),
+
+      editor.registerCommand(
+        KEY_ARROW_LEFT_COMMAND,
+        $onEscapeUp,
+        COMMAND_PRIORITY_LOW,
+      ),
+
+      // Enter goes from Title to Content rather than a new line inside Title
+      editor.registerCommand(
+        INSERT_PARAGRAPH_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const titleNode = $findMatchingParent(
+              selection.anchor.getNode(),
+              (node) => $isCollapsibleTitleNode(node),
+            );
+
+            if ($isCollapsibleTitleNode(titleNode)) {
+              const container = titleNode.getParent<ElementNode>();
+              if (container && $isCollapsibleContainerNode(container)) {
+                if (!container.getOpen()) {
+                  container.toggleOpen();
+                }
+                titleNode.getNextSibling()?.selectEnd();
+                return true;
+              }
+            }
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        INSERT_COLLAPSIBLE_COMMAND,
+        () => {
+          editor.update(() => {
+            const title = $createCollapsibleTitleNode();
+            const paragraph = $createParagraphNode();
+            $insertNodeToNearestRoot(
+              $createCollapsibleContainerNode(true).append(
+                title.append(paragraph),
+                $createCollapsibleContentNode().append($createParagraphNode()),
+              ),
+            );
+            paragraph.select();
+          });
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [editor]);
+
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/ComponentPickerPlugin/index.tsx

@@ -0,0 +1,370 @@
+/**
+ * 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.
+ *
+ */
+
+import { $createCodeNode } from '@lexical/code';
+import {
+    INSERT_CHECK_LIST_COMMAND,
+    INSERT_ORDERED_LIST_COMMAND,
+    INSERT_UNORDERED_LIST_COMMAND,
+} from '@lexical/list';
+import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
+import {
+    LexicalTypeaheadMenuPlugin,
+    MenuOption,
+    useBasicTypeaheadTriggerMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
+import {
+    $createParagraphNode,
+    $getSelection,
+    $isRangeSelection,
+    FORMAT_ELEMENT_COMMAND,
+    LexicalEditor,
+    TextNode,
+} from 'lexical';
+import { useCallback, useMemo, useState } from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// Core
+import useContext from '@/client/context';
+
+import { EmbedConfigs } from '../AutoEmbedPlugin';
+import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
+import { INSERT_IMAGE_COMMAND, InsertImageDialog } from '../ImagesPlugin';
+import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog';
+import { INSERT_PAGE_BREAK } from '../PageBreakPlugin';
+import { InsertPollDialog } from '../PollPlugin';
+import { InsertTableDialog } from '../TablePlugin';
+
+class ComponentPickerOption extends MenuOption {
+    // What shows up in the editor
+    title: string;
+    // Icon for display
+    icon?: JSX.Element;
+    // For extra searching.
+    keywords: Array<string>;
+    // TBD
+    keyboardShortcut?: string;
+    // What happens when you select this option?
+    onSelect: (queryString: string) => void;
+
+    constructor(
+        title: string,
+        options: {
+            icon?: JSX.Element;
+            keywords?: Array<string>;
+            keyboardShortcut?: string;
+            onSelect: (queryString: string) => void;
+        },
+    ) {
+        super(title);
+        this.title = title;
+        this.keywords = options.keywords || [];
+        this.icon = options.icon;
+        this.keyboardShortcut = options.keyboardShortcut;
+        this.onSelect = options.onSelect.bind(this);
+    }
+}
+
+function ComponentPickerMenuItem({
+    index,
+    isSelected,
+    onClick,
+    onMouseEnter,
+    option,
+}: {
+    index: number;
+    isSelected: boolean;
+    onClick: () => void;
+    onMouseEnter: () => void;
+    option: ComponentPickerOption;
+}) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (
+        <li
+            key={option.key}
+            tabIndex={-1}
+            className={className}
+            ref={option.setRefElement}
+            role="option"
+            aria-selected={isSelected}
+            id={'typeahead-item-' + index}
+            onMouseEnter={onMouseEnter}
+            onClick={onClick}>
+            {option.icon}
+            <span className="text">{option.title}</span>
+        </li>
+    );
+}
+
+function getDynamicOptions(editor: LexicalEditor, queryString: string) {
+    const options: Array<ComponentPickerOption> = [];
+
+    if (queryString == null) {
+        return options;
+    }
+
+    const tableMatch = queryString.match(/^([1-9]\d?)(?:x([1-9]\d?)?)?$/);
+
+    if (tableMatch !== null) {
+        const rows = tableMatch[1];
+        const colOptions = tableMatch[2]
+            ? [tableMatch[2]]
+            : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
+
+        options.push(
+            ...colOptions.map(
+                (columns) =>
+                    new ComponentPickerOption(`${rows}x${columns} Table`, {
+                        icon: <i className="icon table" />,
+                        keywords: ['table'],
+                        onSelect: () =>
+                            editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+                    }),
+            ),
+        );
+    }
+
+    return options;
+}
+
+function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
+    return [
+        new ComponentPickerOption('Paragraph', {
+            icon: <i className="icon paragraph" />,
+            keywords: ['normal', 'paragraph', 'p', 'text'],
+            onSelect: () =>
+                editor.update(() => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        $setBlocksType(selection, () => $createParagraphNode());
+                    }
+                }),
+        }),
+        ...([1, 2, 3] as const).map(
+            (n) =>
+                new ComponentPickerOption(`Heading ${n}`, {
+                    icon: <i className={`icon h${n}`} />,
+                    keywords: ['heading', 'header', `h${n}`],
+                    onSelect: () =>
+                        editor.update(() => {
+                            const selection = $getSelection();
+                            if ($isRangeSelection(selection)) {
+                                $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                            }
+                        }),
+                }),
+        ),
+        new ComponentPickerOption('Table', {
+            icon: <i className="icon table" />,
+            keywords: ['table', 'grid', 'spreadsheet', 'rows', 'columns'],
+            onSelect: () => modal.show('Insert Table', InsertTableDialog, { editor }),
+        }),
+        new ComponentPickerOption('Numbered List', {
+            icon: <i className="icon number" />,
+            keywords: ['numbered list', 'ordered list', 'ol'],
+            onSelect: () =>
+                editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Bulleted List', {
+            icon: <i className="icon bullet" />,
+            keywords: ['bulleted list', 'unordered list', 'ul'],
+            onSelect: () =>
+                editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Check List', {
+            icon: <i className="icon check" />,
+            keywords: ['check list', 'todo list'],
+            onSelect: () =>
+                editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Quote', {
+            icon: <i className="icon quote" />,
+            keywords: ['block quote'],
+            onSelect: () =>
+                editor.update(() => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        $setBlocksType(selection, () => $createQuoteNode());
+                    }
+                }),
+        }),
+        new ComponentPickerOption('Code', {
+            icon: <i className="icon code" />,
+            keywords: ['javascript', 'python', 'js', 'codeblock'],
+            onSelect: () =>
+                editor.update(() => {
+                    const selection = $getSelection();
+
+                    if ($isRangeSelection(selection)) {
+                        if (selection.isCollapsed()) {
+                            $setBlocksType(selection, () => $createCodeNode());
+                        } else {
+                            // Will this ever happen?
+                            const textContent = selection.getTextContent();
+                            const codeNode = $createCodeNode();
+                            selection.insertNodes([codeNode]);
+                            selection.insertRawText(textContent);
+                        }
+                    }
+                }),
+        }),
+        new ComponentPickerOption('Divider', {
+            icon: <i className="icon horizontal-rule" />,
+            keywords: ['horizontal rule', 'divider', 'hr'],
+            onSelect: () =>
+                editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Page Break', {
+            icon: <i className="icon page-break" />,
+            keywords: ['page break', 'divider'],
+            onSelect: () => editor.dispatchCommand(INSERT_PAGE_BREAK, undefined),
+        }),
+        new ComponentPickerOption('Poll', {
+            icon: <i className="icon poll" />,
+            keywords: ['poll', 'vote'],
+            onSelect: () => modal.show('Insert Poll', InsertPollDialog, { editor }),
+        }),
+        ...EmbedConfigs.map(
+            (embedConfig) =>
+                new ComponentPickerOption(`Embed ${embedConfig.contentName}`, {
+                    icon: embedConfig.icon,
+                    keywords: [...embedConfig.keywords, 'embed'],
+                    onSelect: () =>
+                        editor.dispatchCommand(INSERT_EMBED_COMMAND, embedConfig.type),
+                }),
+        ),
+        // new ComponentPickerOption('Equation', {
+        //   icon: <i className="icon equation" />,
+        //   keywords: ['equation', 'latex', 'math'],
+        //   onSelect: () =>
+        //     showModal('Insert Equation', (onClose) => (
+        //       <InsertEquationDialog activeEditor={editor} onClose={onClose} />
+        //     )),
+        // }),
+        new ComponentPickerOption('Image', {
+            icon: <i className="icon image" />,
+            keywords: ['image', 'photo', 'picture', 'file'],
+            onSelect: () => modal.show('Insert Image', InsertImageDialog, { editor }),
+        }),
+        new ComponentPickerOption('Collapsible', {
+            icon: <i className="icon caret-right" />,
+            keywords: ['collapse', 'collapsible', 'toggle'],
+            onSelect: () => editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
+        }),
+        new ComponentPickerOption('Columns Layout', {
+            icon: <i className="icon columns" />,
+            keywords: ['columns', 'layout', 'grid'],
+            onSelect: () => modal.show('Insert Columns Layout', InsertLayoutDialog, { editor }),
+        }),
+        ...(['left', 'center', 'right', 'justify'] as const).map(
+            (alignment) =>
+                new ComponentPickerOption(`Align ${alignment}`, {
+                    icon: <i className={`icon ${alignment}-align`} />,
+                    keywords: ['align', 'justify', alignment],
+                    onSelect: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment),
+                }),
+        ),
+    ];
+}
+
+export default function ComponentPickerMenuPlugin(): JSX.Element {
+    
+    const [editor] = useLexicalComposerContext();
+    const { modal, context } = useContext();
+
+    const [queryString, setQueryString] = useState<string | null>(null);
+
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch('/', {
+        minLength: 0,
+    });
+
+    const options = useMemo(() => {
+
+        const baseOptions = getBaseOptions(editor, context);
+
+        if (!queryString) {
+            return baseOptions;
+        }
+
+        const regex = new RegExp(queryString, 'i');
+
+        return [
+            ...getDynamicOptions(editor, queryString),
+            ...baseOptions.filter(
+                (option) =>
+                    regex.test(option.title) ||
+                    option.keywords.some((keyword) => regex.test(keyword)),
+            ),
+        ];
+    }, [editor, queryString]);
+
+    const onSelectOption = useCallback(
+        (
+            selectedOption: ComponentPickerOption,
+            nodeToRemove: TextNode | null,
+            closeMenu: () => void,
+            matchingString: string,
+        ) => {
+            editor.update(() => {
+                nodeToRemove?.remove();
+                selectedOption.onSelect(matchingString);
+                closeMenu();
+            });
+        },
+        [editor],
+    );
+
+    return (
+        <>
+            <LexicalTypeaheadMenuPlugin<ComponentPickerOption>
+                onQueryChange={setQueryString}
+                onSelectOption={onSelectOption}
+                triggerFn={checkForTriggerMatch}
+                options={options}
+                menuRenderFn={(
+                    anchorElementRef,
+                    { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
+                ) =>
+                    anchorElementRef.current && options.length
+                        ? ReactDOM.createPortal(
+                            <div className="typeahead-popover component-picker-menu">
+                                <ul>
+                                    {options.map((option, i: number) => (
+                                        <ComponentPickerMenuItem
+                                            index={i}
+                                            isSelected={selectedIndex === i}
+                                            onClick={() => {
+                                                setHighlightedIndex(i);
+                                                selectOptionAndCleanUp(option);
+                                            }}
+                                            onMouseEnter={() => {
+                                                setHighlightedIndex(i);
+                                            }}
+                                            key={option.key}
+                                            option={option}
+                                        />
+                                    ))}
+                                </ul>
+                            </div>,
+                            anchorElementRef.current,
+                        )
+                        : null
+                }
+            />
+        </>
+    );
+}