5htp-core 0.4.8 → 0.4.9

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

@@ -0,0 +1,334 @@
+/**
+ * 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 type { LexicalEditor } from 'lexical';
+
+import { $createCodeNode, $isCodeNode } from '@lexical/code';
+import {
+    editorStateFromSerializedDocument,
+    exportFile,
+    importFile,
+    SerializedDocument,
+    serializedDocumentFromEditorState,
+} from '@lexical/file';
+import {
+    $convertFromMarkdownString,
+    $convertToMarkdownString,
+} from '@lexical/markdown';
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { CONNECTED_COMMAND, TOGGLE_CONNECT_COMMAND } from '@lexical/yjs';
+import {
+    $createTextNode,
+    $getRoot,
+    $isParagraphNode,
+    CLEAR_EDITOR_COMMAND,
+    CLEAR_HISTORY_COMMAND,
+    COMMAND_PRIORITY_EDITOR,
+} from 'lexical';
+import { useCallback, useEffect, useState, JSX } from 'react';
+
+// Core
+import useContext from '@/client/context';
+import Button from '@client/components/button';
+
+import { INITIAL_SETTINGS } from '../../appSettings';
+import useFlashMessage from '../../hooks/useFlashMessage';
+import { docFromHash, docToHash } from '../../utils/docSerialization';
+import { PLAYGROUND_TRANSFORMERS } from '../MarkdownTransformers';
+import {
+    SPEECH_TO_TEXT_COMMAND,
+    SUPPORT_SPEECH_RECOGNITION,
+} from '../SpeechToTextPlugin';
+
+async function sendEditorState(editor: LexicalEditor): Promise<void> {
+    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
+    try {
+        await fetch('http://localhost:1235/setEditorState', {
+            body: stringifiedEditorState,
+            headers: {
+                Accept: 'application/json',
+                'Content-type': 'application/json',
+            },
+            method: 'POST',
+        });
+    } catch {
+        // NO-OP
+    }
+}
+
+async function validateEditorState(editor: LexicalEditor): Promise<void> {
+    const stringifiedEditorState = JSON.stringify(editor.getEditorState());
+    let response = null;
+    try {
+        response = await fetch('http://localhost:1235/validateEditorState', {
+            body: stringifiedEditorState,
+            headers: {
+                Accept: 'application/json',
+                'Content-type': 'application/json',
+            },
+            method: 'POST',
+        });
+    } catch {
+        // NO-OP
+    }
+    if (response !== null && response.status === 403) {
+        throw new Error(
+            'Editor state validation failed! Server did not accept changes.',
+        );
+    }
+}
+
+async function shareDoc(doc: SerializedDocument): Promise<void> {
+    const url = new URL(window.location.toString());
+    url.hash = await docToHash(doc);
+    const newUrl = url.toString();
+    window.history.replaceState({}, '', newUrl);
+    await window.navigator.clipboard.writeText(newUrl);
+}
+
+export default function ActionsPlugin({
+    isRichText,
+    shouldPreserveNewLinesInMarkdown,
+}: {
+    isRichText: boolean;
+    shouldPreserveNewLinesInMarkdown: boolean;
+}): JSX.Element {
+
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    const [isSpeechToText, setIsSpeechToText] = useState(false);
+    const [connected, setConnected] = useState(false);
+    const [isEditorEmpty, setIsEditorEmpty] = useState(true);
+    const showFlashMessage = useFlashMessage();
+    const { isCollabActive } = useCollaborationContext();
+
+    const { modal } = useContext();
+
+    useEffect(() => {
+        if (INITIAL_SETTINGS.isCollab) {
+            return;
+        }
+        docFromHash(window.location.hash).then((doc) => {
+            if (doc && doc.source === 'Playground') {
+                editor.setEditorState(editorStateFromSerializedDocument(editor, doc));
+                editor.dispatchCommand(CLEAR_HISTORY_COMMAND, undefined);
+            }
+        });
+    }, [editor]);
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerEditableListener((editable) => {
+                setIsEditable(editable);
+            }),
+            editor.registerCommand<boolean>(
+                CONNECTED_COMMAND,
+                (payload) => {
+                    const isConnected = payload;
+                    setConnected(isConnected);
+                    return false;
+                },
+                COMMAND_PRIORITY_EDITOR,
+            ),
+        );
+    }, [editor]);
+
+    useEffect(() => {
+        return editor.registerUpdateListener(
+            ({ dirtyElements, prevEditorState, tags }) => {
+                // If we are in read only mode, send the editor state
+                // to server and ask for validation if possible.
+                if (
+                    !isEditable &&
+                    dirtyElements.size > 0 &&
+                    !tags.has('historic') &&
+                    !tags.has('collaboration')
+                ) {
+                    validateEditorState(editor);
+                }
+                editor.getEditorState().read(() => {
+                    const root = $getRoot();
+                    const children = root.getChildren();
+
+                    if (children.length > 1) {
+                        setIsEditorEmpty(false);
+                    } else {
+                        if ($isParagraphNode(children[0])) {
+                            const paragraphChildren = children[0].getChildren();
+                            setIsEditorEmpty(paragraphChildren.length === 0);
+                        } else {
+                            setIsEditorEmpty(false);
+                        }
+                    }
+                });
+            },
+        );
+    }, [editor, isEditable]);
+
+    const handleMarkdownToggle = useCallback(() => {
+        editor.update(() => {
+            const root = $getRoot();
+            const firstChild = root.getFirstChild();
+            if ($isCodeNode(firstChild) && firstChild.getLanguage() === 'markdown') {
+                $convertFromMarkdownString(
+                    firstChild.getTextContent(),
+                    PLAYGROUND_TRANSFORMERS,
+                    undefined, // node
+                    shouldPreserveNewLinesInMarkdown,
+                );
+            } else {
+                const markdown = $convertToMarkdownString(
+                    PLAYGROUND_TRANSFORMERS,
+                    undefined, //node
+                    shouldPreserveNewLinesInMarkdown,
+                );
+                const codeNode = $createCodeNode('markdown');
+                codeNode.append($createTextNode(markdown));
+                root.clear().append(codeNode);
+                if (markdown.length === 0) {
+                    codeNode.select();
+                }
+            }
+        });
+    }, [editor, shouldPreserveNewLinesInMarkdown]);
+
+    return (
+        <div className="actions">
+            {SUPPORT_SPEECH_RECOGNITION && (
+                <button
+                    onClick={() => {
+                        editor.dispatchCommand(SPEECH_TO_TEXT_COMMAND, !isSpeechToText);
+                        setIsSpeechToText(!isSpeechToText);
+                    }}
+                    className={
+                        'action-button action-button-mic ' +
+                        (isSpeechToText ? 'active' : '')
+                    }
+                    title="Speech To Text"
+                    aria-label={`${isSpeechToText ? 'Enable' : 'Disable'
+                        } speech to text`}>
+                    <i className="mic" />
+                </button>
+            )}
+            <button
+                className="action-button import"
+                onClick={() => importFile(editor)}
+                title="Import"
+                aria-label="Import editor state from JSON">
+                <i className="import" />
+            </button>
+
+            <button
+                className="action-button export"
+                onClick={() =>
+                    exportFile(editor, {
+                        fileName: `Playground ${new Date().toISOString()}`,
+                        source: 'Playground',
+                    })
+                }
+                title="Export"
+                aria-label="Export editor state to JSON">
+                <i className="export" />
+            </button>
+            <button
+                className="action-button share"
+                disabled={isCollabActive || INITIAL_SETTINGS.isCollab}
+                onClick={() =>
+                    shareDoc(
+                        serializedDocumentFromEditorState(editor.getEditorState(), {
+                            source: 'Playground',
+                        }),
+                    ).then(
+                        () => showFlashMessage('URL copied to clipboard'),
+                        () => showFlashMessage('URL could not be copied to clipboard'),
+                    )
+                }
+                title="Share"
+                aria-label="Share Playground link to current editor state">
+                <i className="share" />
+            </button>
+            <button
+                className="action-button clear"
+                disabled={isEditorEmpty}
+                onClick={() => {
+                    modal.show('Clear editor', ShowClearDialog, { editor });
+                }}
+                title="Clear"
+                aria-label="Clear editor contents">
+                <i className="clear" />
+            </button>
+            <button
+                className={`action-button ${!isEditable ? 'unlock' : 'lock'}`}
+                onClick={() => {
+                    // Send latest editor state to commenting validation server
+                    if (isEditable) {
+                        sendEditorState(editor);
+                    }
+                    editor.setEditable(!editor.isEditable());
+                }}
+                title="Read-Only Mode"
+                aria-label={`${!isEditable ? 'Unlock' : 'Lock'} read-only mode`}>
+                <i className={!isEditable ? 'unlock' : 'lock'} />
+            </button>
+            <button
+                className="action-button"
+                onClick={handleMarkdownToggle}
+                title="Convert From Markdown"
+                aria-label="Convert from markdown">
+                <i className="markdown" />
+            </button>
+            {isCollabActive && (
+                <button
+                    className="action-button connect"
+                    onClick={() => {
+                        editor.dispatchCommand(TOGGLE_CONNECT_COMMAND, !connected);
+                    }}
+                    title={`${connected ? 'Disconnect' : 'Connect'
+                        } Collaborative Editing`}
+                    aria-label={`${connected ? 'Disconnect from' : 'Connect to'
+                        } a collaborative editing server`}>
+                    <i className={connected ? 'disconnect' : 'connect'} />
+                </button>
+            )}
+        </div>
+    );
+}
+
+function ShowClearDialog({
+    editor,
+    close,
+}: {
+    editor: LexicalEditor;
+    close: () => void;
+}): JSX.Element {
+    return (
+        <>
+            Are you sure you want to clear the editor?
+
+            <div className="row fill">
+                <Button type="primary"
+                    onClick={() => {
+                        editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+                        editor.focus();
+                        close();
+                    }}>
+                    Clear
+                </Button>{' '}
+                <Button
+                    onClick={() => {
+                        editor.focus();
+                        close();
+                    }}>
+                    Cancel
+                </Button>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,352 @@
+/**
+ * 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 type { LexicalEditor } from 'lexical';
+
+import {
+    AutoEmbedOption,
+    EmbedConfig,
+    EmbedMatchResult,
+    LexicalAutoEmbedPlugin,
+    URL_MATCHER,
+} from '@lexical/react/LexicalAutoEmbedPlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo, useState, JSX } from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// Core
+import useContext from '@/client/context';
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+import { INSERT_FIGMA_COMMAND } from '../FigmaPlugin';
+import { INSERT_TWEET_COMMAND } from '../TwitterPlugin';
+import { INSERT_YOUTUBE_COMMAND } from '../YouTubePlugin';
+
+interface PlaygroundEmbedConfig extends EmbedConfig {
+    // Human readable name of the embeded content e.g. Tweet or Google Map.
+    contentName: string;
+
+    // Icon for display.
+    icon?: JSX.Element;
+
+    // An example of a matching url https://twitter.com/jack/status/20
+    exampleUrl: string;
+
+    // For extra searching.
+    keywords: Array<string>;
+
+    // Embed a Figma Project.
+    description?: string;
+}
+
+export const YoutubeEmbedConfig: PlaygroundEmbedConfig = {
+    contentName: 'Youtube Video',
+
+    exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
+
+    // Icon for display.
+    icon: <i className="icon youtube" />,
+
+    insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+        editor.dispatchCommand(INSERT_YOUTUBE_COMMAND, result.id);
+    },
+
+    keywords: ['youtube', 'video'],
+
+    // Determine if a given URL is a match and return url data.
+    parseUrl: async (url: string) => {
+        const match =
+            /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url);
+
+        const id = match ? (match?.[2].length === 11 ? match[2] : null) : null;
+
+        if (id != null) {
+            return {
+                id,
+                url,
+            };
+        }
+
+        return null;
+    },
+
+    type: 'youtube-video',
+};
+
+export const TwitterEmbedConfig: PlaygroundEmbedConfig = {
+    // e.g. Tweet or Google Map.
+    contentName: 'Tweet',
+
+    exampleUrl: 'https://twitter.com/jack/status/20',
+
+    // Icon for display.
+    icon: <i className="icon tweet" />,
+
+    // Create the Lexical embed node from the url data.
+    insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+        editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id);
+    },
+
+    // For extra searching.
+    keywords: ['tweet', 'twitter'],
+
+    // Determine if a given URL is a match and return url data.
+    parseUrl: (text: string) => {
+        const match =
+            /^https:\/\/(twitter|x)\.com\/(#!\/)?(\w+)\/status(es)*\/(\d+)/.exec(
+                text,
+            );
+
+        if (match != null) {
+            return {
+                id: match[5],
+                url: match[1],
+            };
+        }
+
+        return null;
+    },
+
+    type: 'tweet',
+};
+
+export const FigmaEmbedConfig: PlaygroundEmbedConfig = {
+    contentName: 'Figma Document',
+
+    exampleUrl: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
+
+    icon: <i className="icon figma" />,
+
+    insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+        editor.dispatchCommand(INSERT_FIGMA_COMMAND, result.id);
+    },
+
+    keywords: ['figma', 'figma.com', 'mock-up'],
+
+    // Determine if a given URL is a match and return url data.
+    parseUrl: (text: string) => {
+        const match =
+            /https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.exec(
+                text,
+            );
+
+        if (match != null) {
+            return {
+                id: match[3],
+                url: match[0],
+            };
+        }
+
+        return null;
+    },
+
+    type: 'figma',
+};
+
+export const EmbedConfigs = [
+    TwitterEmbedConfig,
+    YoutubeEmbedConfig,
+    FigmaEmbedConfig,
+];
+
+function AutoEmbedMenuItem({
+    index,
+    isSelected,
+    onClick,
+    onMouseEnter,
+    option,
+}: {
+    index: number;
+    isSelected: boolean;
+    onClick: () => void;
+    onMouseEnter: () => void;
+    option: AutoEmbedOption;
+}) {
+    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}>
+            <span className="text">{option.title}</span>
+        </li>
+    );
+}
+
+function AutoEmbedMenu({
+    options,
+    selectedItemIndex,
+    onOptionClick,
+    onOptionMouseEnter,
+}: {
+    selectedItemIndex: number | null;
+    onOptionClick: (option: AutoEmbedOption, index: number) => void;
+    onOptionMouseEnter: (index: number) => void;
+    options: Array<AutoEmbedOption>;
+}) {
+    return (
+        <div className="typeahead-popover">
+            <ul>
+                {options.map((option: AutoEmbedOption, i: number) => (
+                    <AutoEmbedMenuItem
+                        index={i}
+                        isSelected={selectedItemIndex === i}
+                        onClick={() => onOptionClick(option, i)}
+                        onMouseEnter={() => onOptionMouseEnter(i)}
+                        key={option.key}
+                        option={option}
+                    />
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+const debounce = (callback: (text: string) => void, delay: number) => {
+    let timeoutId: number;
+    return (text: string) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback(text);
+        }, delay);
+    };
+};
+
+export function AutoEmbedDialog({
+    embedConfig,
+    close,
+}: {
+    embedConfig: PlaygroundEmbedConfig;
+    close: () => void;
+}): JSX.Element {
+    
+    const [text, setText] = useState('');
+    const [editor] = useLexicalComposerContext();
+    const [embedResult, setEmbedResult] = useState<EmbedMatchResult | null>(null);
+
+    const validateText = useMemo(
+        () =>
+            debounce((inputText: string) => {
+                const urlMatch = URL_MATCHER.exec(inputText);
+                if (embedConfig != null && inputText != null && urlMatch != null) {
+                    Promise.resolve(embedConfig.parseUrl(inputText)).then(
+                        (parseResult) => {
+                            setEmbedResult(parseResult);
+                        },
+                    );
+                } else if (embedResult != null) {
+                    setEmbedResult(null);
+                }
+            }, 200),
+        [embedConfig, embedResult],
+    );
+
+    const onClick = () => {
+        if (embedResult != null) {
+            embedConfig.insertNode(editor, embedResult);
+            close();
+        }
+    };
+
+    return (
+        <div style={{ width: '600px' }}>
+            <div className="Input__wrapper">
+                <Input
+                    title="URL"
+                    placeholder={embedConfig.exampleUrl}
+                    value={text}
+                    onChange={(value) => {
+                        setText(value);
+                        validateText(value);
+                    }}
+                />
+            </div>
+            <Button type="primary"
+                disabled={!embedResult}
+                onClick={onClick}>
+                Embed
+            </Button>
+        </div>
+    );
+}
+
+export default function AutoEmbedPlugin(): JSX.Element {
+
+    const { modal } = useContext();
+
+    const openEmbedModal = (embedConfig: PlaygroundEmbedConfig) => {
+        modal.show(`Embed ${embedConfig.contentName}`, AutoEmbedDialog, { embedConfig });
+    };
+
+    const getMenuOptions = (
+        activeEmbedConfig: PlaygroundEmbedConfig,
+        embedFn: () => void,
+        dismissFn: () => void,
+    ) => {
+        return [
+            new AutoEmbedOption('Dismiss', {
+                onSelect: dismissFn,
+            }),
+            new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
+                onSelect: embedFn,
+            }),
+        ];
+    };
+
+    return (
+        <>
+            <LexicalAutoEmbedPlugin<PlaygroundEmbedConfig>
+                embedConfigs={EmbedConfigs}
+                onOpenEmbedModalForConfig={openEmbedModal}
+                getMenuOptions={getMenuOptions}
+                menuRenderFn={(
+                    anchorElementRef,
+                    { selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex },
+                ) =>
+                    anchorElementRef.current
+                        ? ReactDOM.createPortal(
+                            <div
+                                className="typeahead-popover auto-embed-menu"
+                                style={{
+                                    marginLeft: `${Math.max(
+                                        parseFloat(anchorElementRef.current.style.width) - 200,
+                                        0,
+                                    )}px`,
+                                    width: 200,
+                                }}>
+                                <AutoEmbedMenu
+                                    options={options}
+                                    selectedItemIndex={selectedIndex}
+                                    onOptionClick={(option: AutoEmbedOption, index: number) => {
+                                        setHighlightedIndex(index);
+                                        selectOptionAndCleanUp(option);
+                                    }}
+                                    onOptionMouseEnter={(index: number) => {
+                                        setHighlightedIndex(index);
+                                    }}
+                                />
+                            </div>,
+                            anchorElementRef.current,
+                        )
+                        : null
+                }
+            />
+        </>
+    );
+}