5htp-core 0.4.8 → 0.4.9

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

@@ -0,0 +1,270 @@
+/**
+ * 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 {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalContextMenuPlugin,
+  MenuOption,
+} from '@lexical/react/LexicalContextMenuPlugin';
+import {
+  $getNearestNodeFromDOMNode,
+  $getSelection,
+  $isRangeSelection,
+  COPY_COMMAND,
+  CUT_COMMAND,
+  type LexicalNode,
+  PASTE_COMMAND,
+} from 'lexical';
+import {useCallback, useMemo} from 'react';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+function ContextMenuItem({
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+}: {
+  index: number;
+  isSelected: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+  option: ContextMenuOption;
+}) {
+  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 ContextMenu({
+  options,
+  selectedItemIndex,
+  onOptionClick,
+  onOptionMouseEnter,
+}: {
+  selectedItemIndex: number | null;
+  onOptionClick: (option: ContextMenuOption, index: number) => void;
+  onOptionMouseEnter: (index: number) => void;
+  options: Array<ContextMenuOption>;
+}) {
+  return (
+    <div className="typeahead-popover">
+      <ul>
+        {options.map((option: ContextMenuOption, i: number) => (
+          <ContextMenuItem
+            index={i}
+            isSelected={selectedItemIndex === i}
+            onClick={() => onOptionClick(option, i)}
+            onMouseEnter={() => onOptionMouseEnter(i)}
+            key={option.key}
+            option={option}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export class ContextMenuOption extends MenuOption {
+  title: string;
+  onSelect: (targetNode: LexicalNode | null) => void;
+  constructor(
+    title: string,
+    options: {
+      onSelect: (targetNode: LexicalNode | null) => void;
+    },
+  ) {
+    super(title);
+    this.title = title;
+    this.onSelect = options.onSelect.bind(this);
+  }
+}
+
+export default function ContextMenuPlugin(): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+
+  const defaultOptions = useMemo(() => {
+    return [
+      new ContextMenuOption(`Copy`, {
+        onSelect: (_node) => {
+          editor.dispatchCommand(COPY_COMMAND, null);
+        },
+      }),
+      new ContextMenuOption(`Cut`, {
+        onSelect: (_node) => {
+          editor.dispatchCommand(CUT_COMMAND, null);
+        },
+      }),
+      new ContextMenuOption(`Paste`, {
+        onSelect: (_node) => {
+          navigator.clipboard.read().then(async function (...args) {
+            const data = new DataTransfer();
+
+            const items = await navigator.clipboard.read();
+            const item = items[0];
+
+            const permission = await navigator.permissions.query({
+              // @ts-expect-error These types are incorrect.
+              name: 'clipboard-read',
+            });
+            if (permission.state === 'denied') {
+              alert('Not allowed to paste from clipboard.');
+              return;
+            }
+
+            for (const type of item.types) {
+              const dataString = await (await item.getType(type)).text();
+              data.setData(type, dataString);
+            }
+
+            const event = new ClipboardEvent('paste', {
+              clipboardData: data,
+            });
+
+            editor.dispatchCommand(PASTE_COMMAND, event);
+          });
+        },
+      }),
+      new ContextMenuOption(`Paste as Plain Text`, {
+        onSelect: (_node) => {
+          navigator.clipboard.read().then(async function (...args) {
+            const permission = await navigator.permissions.query({
+              // @ts-expect-error These types are incorrect.
+              name: 'clipboard-read',
+            });
+
+            if (permission.state === 'denied') {
+              alert('Not allowed to paste from clipboard.');
+              return;
+            }
+
+            const data = new DataTransfer();
+            const items = await navigator.clipboard.readText();
+            data.setData('text/plain', items);
+
+            const event = new ClipboardEvent('paste', {
+              clipboardData: data,
+            });
+            editor.dispatchCommand(PASTE_COMMAND, event);
+          });
+        },
+      }),
+      new ContextMenuOption(`Delete Node`, {
+        onSelect: (_node) => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            const currentNode = selection.anchor.getNode();
+            const ancestorNodeWithRootAsParent = currentNode
+              .getParents()
+              .at(-2);
+
+            ancestorNodeWithRootAsParent?.remove();
+          }
+        },
+      }),
+    ];
+  }, [editor]);
+
+  const [options, setOptions] = React.useState(defaultOptions);
+
+  const onSelectOption = useCallback(
+    (
+      selectedOption: ContextMenuOption,
+      targetNode: LexicalNode | null,
+      closeMenu: () => void,
+    ) => {
+      editor.update(() => {
+        selectedOption.onSelect(targetNode);
+        closeMenu();
+      });
+    },
+    [editor],
+  );
+
+  const onWillOpen = (event: MouseEvent) => {
+    let newOptions = defaultOptions;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(event.target as Element);
+      if (node) {
+        const parent = node.getParent();
+        if ($isLinkNode(parent)) {
+          newOptions = [
+            new ContextMenuOption(`Remove Link`, {
+              onSelect: (_node) => {
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+              },
+            }),
+            ...defaultOptions,
+          ];
+        }
+      }
+    });
+    setOptions(newOptions);
+  };
+
+  return (
+    <LexicalContextMenuPlugin
+      options={options}
+      onSelectOption={onSelectOption}
+      onWillOpen={onWillOpen}
+      menuRenderFn={(
+        anchorElementRef,
+        {
+          selectedIndex,
+          options: _options,
+          selectOptionAndCleanUp,
+          setHighlightedIndex,
+        },
+        {setMenuRef},
+      ) =>
+        anchorElementRef.current
+          ? ReactDOM.createPortal(
+              <div
+                className="typeahead-popover auto-embed-menu"
+                style={{
+                  marginLeft: anchorElementRef.current.style.width,
+                  userSelect: 'none',
+                  width: 200,
+                }}
+                ref={setMenuRef}>
+                <ContextMenu
+                  options={options}
+                  selectedItemIndex={selectedIndex}
+                  onOptionClick={(option: ContextMenuOption, index: number) => {
+                    setHighlightedIndex(index);
+                    selectOptionAndCleanUp(option);
+                  }}
+                  onOptionMouseEnter={(index: number) => {
+                    setHighlightedIndex(index);
+                  }}
+                />
+              </div>,
+              anchorElementRef.current,
+            )
+          : null
+      }
+    />
+  );
+}

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

@@ -0,0 +1,20 @@
+/**
+ * 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 * as React from 'react';
+
+export default function DocsPlugin(): JSX.Element {
+  return (
+    <a target="__blank" href="https://lexical.dev/docs/intro">
+      <button
+        id="docs-button"
+        className="editor-dev-button"
+        title="Lexical Docs"
+      />
+    </a>
+  );
+}

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

@@ -0,0 +1,51 @@
+/**
+ * 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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {DRAG_DROP_PASTE} from '@lexical/rich-text';
+import {isMimeType, mediaFileReader} from '@lexical/utils';
+import {COMMAND_PRIORITY_LOW} from 'lexical';
+import {useEffect} from 'react';
+
+import {INSERT_IMAGE_COMMAND} from '../ImagesPlugin';
+
+const ACCEPTABLE_IMAGE_TYPES = [
+  'image/',
+  'image/heic',
+  'image/heif',
+  'image/gif',
+  'image/webp',
+];
+
+export default function DragDropPaste(): null {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      DRAG_DROP_PASTE,
+      (files) => {
+        (async () => {
+          const filesResult = await mediaFileReader(
+            files,
+            [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x),
+          );
+          for (const {file, result} of filesResult) {
+            if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+              editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                altText: file.name,
+                src: result,
+              });
+            }
+          }
+        })();
+        return true;
+      },
+      COMMAND_PRIORITY_LOW,
+    );
+  }, [editor]);
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/DraggableBlockPlugin/index.css

@@ -0,0 +1,36 @@
+.draggable-block-menu {
+  border-radius: 4px;
+  padding: 2px 1px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+}
+
+.draggable-block-menu .icon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.3;
+  background-image: url(../../images/icons/draggable-block-menu.svg);
+}
+
+.draggable-block-menu:active {
+  cursor: grabbing;
+}
+
+.draggable-block-menu:hover {
+  background-color: #efefef;
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * 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 './index.css';
+
+import {DraggableBlockPlugin_EXPERIMENTAL} from '@lexical/react/LexicalDraggableBlockPlugin';
+import {useRef} from 'react';
+
+const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu';
+
+function isOnMenu(element: HTMLElement): boolean {
+  return !!element.closest(`.${DRAGGABLE_BLOCK_MENU_CLASSNAME}`);
+}
+
+export default function DraggableBlockPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): JSX.Element {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const targetLineRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <DraggableBlockPlugin_EXPERIMENTAL
+      anchorElem={anchorElem}
+      menuRef={menuRef}
+      targetLineRef={targetLineRef}
+      menuComponent={
+        <div ref={menuRef} className="icon draggable-block-menu">
+          <div className="icon" />
+        </div>
+      }
+      targetLineComponent={
+        <div ref={targetLineRef} className="draggable-block-target-line" />
+      }
+      isOnMenu={isOnMenu}
+    />
+  );
+}

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

@@ -0,0 +1,198 @@
+/**
+ * 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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  useBasicTypeaheadTriggerMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import {
+  $createTextNode,
+  $getSelection,
+  $isRangeSelection,
+  TextNode,
+} from 'lexical';
+import * as React from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import * as ReactDOM from 'react-dom';
+
+class EmojiOption extends MenuOption {
+  title: string;
+  emoji: string;
+  keywords: Array<string>;
+
+  constructor(
+    title: string,
+    emoji: string,
+    options: {
+      keywords?: Array<string>;
+    },
+  ) {
+    super(title);
+    this.title = title;
+    this.emoji = emoji;
+    this.keywords = options.keywords || [];
+  }
+}
+function EmojiMenuItem({
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+}: {
+  index: number;
+  isSelected: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+  option: EmojiOption;
+}) {
+  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.emoji} {option.title}
+      </span>
+    </li>
+  );
+}
+
+type Emoji = {
+  emoji: string;
+  description: string;
+  category: string;
+  aliases: Array<string>;
+  tags: Array<string>;
+  unicode_version: string;
+  ios_version: string;
+  skin_tones?: boolean;
+};
+
+const MAX_EMOJI_SUGGESTION_COUNT = 10;
+
+export default function EmojiPickerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const [queryString, setQueryString] = useState<string | null>(null);
+  const [emojis, setEmojis] = useState<Array<Emoji>>([]);
+
+  useEffect(() => {
+    import('../../utils/emoji-list').then((file) => setEmojis(file.default));
+  }, []);
+
+  const emojiOptions = useMemo(
+    () =>
+      emojis != null
+        ? emojis.map(
+            ({emoji, aliases, tags}) =>
+              new EmojiOption(aliases[0], emoji, {
+                keywords: [...aliases, ...tags],
+              }),
+          )
+        : [],
+    [emojis],
+  );
+
+  const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(':', {
+    minLength: 0,
+  });
+
+  const options: Array<EmojiOption> = useMemo(() => {
+    return emojiOptions
+      .filter((option: EmojiOption) => {
+        return queryString != null
+          ? new RegExp(queryString, 'gi').exec(option.title) ||
+            option.keywords != null
+            ? option.keywords.some((keyword: string) =>
+                new RegExp(queryString, 'gi').exec(keyword),
+              )
+            : false
+          : emojiOptions;
+      })
+      .slice(0, MAX_EMOJI_SUGGESTION_COUNT);
+  }, [emojiOptions, queryString]);
+
+  const onSelectOption = useCallback(
+    (
+      selectedOption: EmojiOption,
+      nodeToRemove: TextNode | null,
+      closeMenu: () => void,
+    ) => {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if (!$isRangeSelection(selection) || selectedOption == null) {
+          return;
+        }
+
+        if (nodeToRemove) {
+          nodeToRemove.remove();
+        }
+
+        selection.insertNodes([$createTextNode(selectedOption.emoji)]);
+
+        closeMenu();
+      });
+    },
+    [editor],
+  );
+
+  return (
+    <LexicalTypeaheadMenuPlugin
+      onQueryChange={setQueryString}
+      onSelectOption={onSelectOption}
+      triggerFn={checkForTriggerMatch}
+      options={options}
+      menuRenderFn={(
+        anchorElementRef,
+        {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
+      ) => {
+        if (anchorElementRef.current == null || options.length === 0) {
+          return null;
+        }
+
+        return anchorElementRef.current && options.length
+          ? ReactDOM.createPortal(
+              <div className="typeahead-popover emoji-menu">
+                <ul>
+                  {options.map((option: EmojiOption, index) => (
+                    <EmojiMenuItem
+                      key={option.key}
+                      index={index}
+                      isSelected={selectedIndex === index}
+                      onClick={() => {
+                        setHighlightedIndex(index);
+                        selectOptionAndCleanUp(option);
+                      }}
+                      onMouseEnter={() => {
+                        setHighlightedIndex(index);
+                      }}
+                      option={option}
+                    />
+                  ))}
+                </ul>
+              </div>,
+              anchorElementRef.current,
+            )
+          : null;
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,75 @@
+/**
+ * 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 {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {TextNode} from 'lexical';
+import {useEffect} from 'react';
+
+import {$createEmojiNode, EmojiNode} from '../../nodes/EmojiNode';
+
+const emojis: Map<string, [string, string]> = new Map([
+  [':)', ['emoji happysmile', '🙂']],
+  [':D', ['emoji veryhappysmile', '😀']],
+  [':(', ['emoji unhappysmile', '🙁']],
+  ['<3', ['emoji heart', '❤']],
+]);
+
+function $findAndTransformEmoji(node: TextNode): null | TextNode {
+  const text = node.getTextContent();
+
+  for (let i = 0; i < text.length; i++) {
+    const emojiData = emojis.get(text[i]) || emojis.get(text.slice(i, i + 2));
+
+    if (emojiData !== undefined) {
+      const [emojiStyle, emojiText] = emojiData;
+      let targetNode;
+
+      if (i === 0) {
+        [targetNode] = node.splitText(i + 2);
+      } else {
+        [, targetNode] = node.splitText(i, i + 2);
+      }
+
+      const emojiNode = $createEmojiNode(emojiStyle, emojiText);
+      targetNode.replace(emojiNode);
+      return emojiNode;
+    }
+  }
+
+  return null;
+}
+
+function $textNodeTransform(node: TextNode): void {
+  let targetNode: TextNode | null = node;
+
+  while (targetNode !== null) {
+    if (!targetNode.isSimpleText()) {
+      return;
+    }
+
+    targetNode = $findAndTransformEmoji(targetNode);
+  }
+}
+
+function useEmojis(editor: LexicalEditor): void {
+  useEffect(() => {
+    if (!editor.hasNodes([EmojiNode])) {
+      throw new Error('EmojisPlugin: EmojiNode not registered on editor');
+    }
+
+    return editor.registerNodeTransform(TextNode, $textNodeTransform);
+  }, [editor]);
+}
+
+export default function EmojisPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  useEmojis(editor);
+  return null;
+}