5htp-core 0.4.8 → 0.4.9-2

package/src/client/components/inputv3/Rte/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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 {$isCodeNode} from '@lexical/code';
+import {
+  $getNearestNodeFromDOMNode,
+  $getSelection,
+  $setSelection,
+  LexicalEditor,
+} from 'lexical';
+import * as React from 'react';
+import {useState} from 'react';
+
+import {useDebounce} from '../../utils';
+
+interface Props {
+  editor: LexicalEditor;
+  getCodeDOMNode: () => HTMLElement | null;
+}
+
+export function CopyButton({editor, getCodeDOMNode}: Props) {
+  const [isCopyCompleted, setCopyCompleted] = useState<boolean>(false);
+
+  const removeSuccessIcon = useDebounce(() => {
+    setCopyCompleted(false);
+  }, 1000);
+
+  async function handleClick(): Promise<void> {
+    const codeDOMNode = getCodeDOMNode();
+
+    if (!codeDOMNode) {
+      return;
+    }
+
+    let content = '';
+
+    editor.update(() => {
+      const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+
+      if ($isCodeNode(codeNode)) {
+        content = codeNode.getTextContent();
+      }
+
+      const selection = $getSelection();
+      $setSelection(selection);
+    });
+
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopyCompleted(true);
+      removeSuccessIcon();
+    } catch (err) {
+      console.error('Failed to copy: ', err);
+    }
+  }
+
+  return (
+    <button className="menu-item" onClick={handleClick} aria-label="copy">
+      {isCopyCompleted ? (
+        <i className="format success" />
+      ) : (
+        <i className="format copy" />
+      )}
+    </button>
+  );
+}

package/src/client/components/inputv3/Rte/plugins/CodeActionMenuPlugin/components/PrettierButton/index.css

@@ -0,0 +1,14 @@
+.code-action-menu-container .prettier-wrapper {
+  position: relative;
+}
+
+.code-action-menu-container .prettier-wrapper .code-error-tips {
+  padding: 5px;
+  border-radius: 4px;
+  color: #fff;
+  background: #222;
+  margin-top: 4px;
+  position: absolute;
+  top: 26px;
+  right: 0;
+}

package/src/client/components/inputv3/Rte/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -0,0 +1,156 @@
+/**
+ * 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 {$isCodeNode} from '@lexical/code';
+import {$getNearestNodeFromDOMNode, LexicalEditor} from 'lexical';
+import {Options} from 'prettier';
+import * as React from 'react';
+import {useState} from 'react';
+
+interface Props {
+  lang: string;
+  editor: LexicalEditor;
+  getCodeDOMNode: () => HTMLElement | null;
+}
+
+const PRETTIER_PARSER_MODULES = {
+  css: () => import('prettier/parser-postcss'),
+  html: () => import('prettier/parser-html'),
+  js: () => import('prettier/parser-babel'),
+  markdown: () => import('prettier/parser-markdown'),
+} as const;
+
+type LanguagesType = keyof typeof PRETTIER_PARSER_MODULES;
+
+async function loadPrettierParserByLang(lang: string) {
+  const dynamicImport = PRETTIER_PARSER_MODULES[lang as LanguagesType];
+  return await dynamicImport();
+}
+
+async function loadPrettierFormat() {
+  const {format} = await import('prettier/standalone');
+  return format;
+}
+
+const PRETTIER_OPTIONS_BY_LANG: Record<string, Options> = {
+  css: {
+    parser: 'css',
+  },
+  html: {
+    parser: 'html',
+  },
+  js: {
+    parser: 'babel',
+  },
+  markdown: {
+    parser: 'markdown',
+  },
+};
+
+const LANG_CAN_BE_PRETTIER = Object.keys(PRETTIER_OPTIONS_BY_LANG);
+
+export function canBePrettier(lang: string): boolean {
+  return LANG_CAN_BE_PRETTIER.includes(lang);
+}
+
+function getPrettierOptions(lang: string): Options {
+  const options = PRETTIER_OPTIONS_BY_LANG[lang];
+  if (!options) {
+    throw new Error(
+      `CodeActionMenuPlugin: Prettier does not support this language: ${lang}`,
+    );
+  }
+
+  return options;
+}
+
+export function PrettierButton({lang, editor, getCodeDOMNode}: Props) {
+  const [syntaxError, setSyntaxError] = useState<string>('');
+  const [tipsVisible, setTipsVisible] = useState<boolean>(false);
+
+  async function handleClick(): Promise<void> {
+    const codeDOMNode = getCodeDOMNode();
+
+    try {
+      const format = await loadPrettierFormat();
+      const options = getPrettierOptions(lang);
+      options.plugins = [await loadPrettierParserByLang(lang)];
+
+      if (!codeDOMNode) {
+        return;
+      }
+
+      editor.update(() => {
+        const codeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+
+        if ($isCodeNode(codeNode)) {
+          const content = codeNode.getTextContent();
+
+          let parsed = '';
+
+          try {
+            parsed = format(content, options);
+          } catch (error: unknown) {
+            setError(error);
+          }
+
+          if (parsed !== '') {
+            const selection = codeNode.select(0);
+            selection.insertText(parsed);
+            setSyntaxError('');
+            setTipsVisible(false);
+          }
+        }
+      });
+    } catch (error: unknown) {
+      setError(error);
+    }
+  }
+
+  function setError(error: unknown) {
+    if (error instanceof Error) {
+      setSyntaxError(error.message);
+      setTipsVisible(true);
+    } else {
+      console.error('Unexpected error: ', error);
+    }
+  }
+
+  function handleMouseEnter() {
+    if (syntaxError !== '') {
+      setTipsVisible(true);
+    }
+  }
+
+  function handleMouseLeave() {
+    if (syntaxError !== '') {
+      setTipsVisible(false);
+    }
+  }
+
+  return (
+    <div className="prettier-wrapper">
+      <button
+        className="menu-item"
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        aria-label="prettier">
+        {syntaxError ? (
+          <i className="format prettier-error" />
+        ) : (
+          <i className="format prettier" />
+        )}
+      </button>
+      {tipsVisible ? (
+        <pre className="code-error-tips">{syntaxError}</pre>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+/**
+ * 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.
+ *
+ */
+
+.code-action-menu-container {
+  height: 35.8px;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  user-select: none;
+}
+
+.code-action-menu-container .code-highlight-language {
+  margin-right: 4px;
+}
+
+.code-action-menu-container button.menu-item {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 4px;
+  background: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.5);
+  text-transform: uppercase;
+}
+
+.code-action-menu-container button.menu-item i.format {
+  height: 16px;
+  width: 16px;
+  opacity: 0.6;
+  display: flex;
+  color: rgba(0, 0, 0, 0.5);
+  background-size: contain;
+}
+
+.code-action-menu-container button.menu-item:hover {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+}
+
+.code-action-menu-container button.menu-item:active {
+  background-color: rgba(223, 232, 250);
+  border: 1px solid rgba(0, 0, 0, 0.45);
+}

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

@@ -0,0 +1,190 @@
+/**
+ * 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 {
+  $isCodeNode,
+  CodeNode,
+  getLanguageFriendlyName,
+  normalizeCodeLang,
+} from '@lexical/code';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$getNearestNodeFromDOMNode} from 'lexical';
+import {useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+
+import {CopyButton} from './components/CopyButton';
+import {canBePrettier, PrettierButton} from './components/PrettierButton';
+import {useDebounce} from './utils';
+
+const CODE_PADDING = 8;
+
+interface Position {
+  top: string;
+  right: string;
+}
+
+function CodeActionMenuContainer({
+  anchorElem,
+}: {
+  anchorElem: HTMLElement;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+
+  const [lang, setLang] = useState('');
+  const [isShown, setShown] = useState<boolean>(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] =
+    useState<boolean>(false);
+  const [position, setPosition] = useState<Position>({
+    right: '0',
+    top: '0',
+  });
+  const codeSetRef = useRef<Set<string>>(new Set());
+  const codeDOMNodeRef = useRef<HTMLElement | null>(null);
+
+  function getCodeDOMNode(): HTMLElement | null {
+    return codeDOMNodeRef.current;
+  }
+
+  const debouncedOnMouseMove = useDebounce(
+    (event: MouseEvent) => {
+      const {codeDOMNode, isOutside} = getMouseInfo(event);
+      if (isOutside) {
+        setShown(false);
+        return;
+      }
+
+      if (!codeDOMNode) {
+        return;
+      }
+
+      codeDOMNodeRef.current = codeDOMNode;
+
+      let codeNode: CodeNode | null = null;
+      let _lang = '';
+
+      editor.update(() => {
+        const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode);
+
+        if ($isCodeNode(maybeCodeNode)) {
+          codeNode = maybeCodeNode;
+          _lang = codeNode.getLanguage() || '';
+        }
+      });
+
+      if (codeNode) {
+        const {y: editorElemY, right: editorElemRight} =
+          anchorElem.getBoundingClientRect();
+        const {y, right} = codeDOMNode.getBoundingClientRect();
+        setLang(_lang);
+        setShown(true);
+        setPosition({
+          right: `${editorElemRight - right + CODE_PADDING}px`,
+          top: `${y - editorElemY}px`,
+        });
+      }
+    },
+    50,
+    1000,
+  );
+
+  useEffect(() => {
+    if (!shouldListenMouseMove) {
+      return;
+    }
+
+    document.addEventListener('mousemove', debouncedOnMouseMove);
+
+    return () => {
+      setShown(false);
+      debouncedOnMouseMove.cancel();
+      document.removeEventListener('mousemove', debouncedOnMouseMove);
+    };
+  }, [shouldListenMouseMove, debouncedOnMouseMove]);
+
+  useEffect(() => {
+    return editor.registerMutationListener(
+      CodeNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            switch (type) {
+              case 'created':
+                codeSetRef.current.add(key);
+                break;
+
+              case 'destroyed':
+                codeSetRef.current.delete(key);
+                break;
+
+              default:
+                break;
+            }
+          }
+        });
+        setShouldListenMouseMove(codeSetRef.current.size > 0);
+      },
+      {skipInitialization: false},
+    );
+  }, [editor]);
+
+  const normalizedLang = normalizeCodeLang(lang);
+  const codeFriendlyName = getLanguageFriendlyName(lang);
+
+  return (
+    <>
+      {isShown ? (
+        <div className="code-action-menu-container" style={{...position}}>
+          <div className="code-highlight-language">{codeFriendlyName}</div>
+          <CopyButton editor={editor} getCodeDOMNode={getCodeDOMNode} />
+          {canBePrettier(normalizedLang) ? (
+            <PrettierButton
+              editor={editor}
+              getCodeDOMNode={getCodeDOMNode}
+              lang={normalizedLang}
+            />
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+function getMouseInfo(event: MouseEvent): {
+  codeDOMNode: HTMLElement | null;
+  isOutside: boolean;
+} {
+  const target = event.target;
+
+  if (target && target instanceof HTMLElement) {
+    const codeDOMNode = target.closest<HTMLElement>(
+      'code.PlaygroundEditorTheme__code',
+    );
+    const isOutside = !(
+      codeDOMNode ||
+      target.closest<HTMLElement>('div.code-action-menu-container')
+    );
+
+    return {codeDOMNode, isOutside};
+  } else {
+    return {codeDOMNode: null, isOutside: true};
+  }
+}
+
+export default function CodeActionMenuPlugin({
+  anchorElem = document.body,
+}: {
+  anchorElem?: HTMLElement;
+}): React.ReactPortal | null {
+  return createPortal(
+    <CodeActionMenuContainer anchorElem={anchorElem} />,
+    anchorElem,
+  );
+}

package/src/client/components/inputv3/Rte/plugins/CodeActionMenuPlugin/utils.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { debounce } from 'lodash';
+import {useMemo, useRef} from 'react';
+
+export function useDebounce<T extends (...args: never[]) => void>(
+  fn: T,
+  ms: number,
+  maxWait?: number,
+) {
+  const funcRef = useRef<T | null>(null);
+  funcRef.current = fn;
+
+  return useMemo(
+    () =>
+      debounce(
+        (...args: Parameters<T>) => {
+          if (funcRef.current) {
+            funcRef.current(...args);
+          }
+        },
+        ms,
+        {maxWait},
+      ),
+    [ms, maxWait],
+  );
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 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 {registerCodeHighlighting} from '@lexical/code';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useEffect} from 'react';
+
+export default function CodeHighlightPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+
+  return null;
+}

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/Collapsible.css

@@ -0,0 +1,57 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Collapsible__container {
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  margin-bottom: 8px;
+}
+
+.Collapsible__title {
+  cursor: pointer;
+  padding: 5px 5px 5px 20px;
+  position: relative;
+  font-weight: bold;
+  list-style: none;
+  outline: none;
+}
+
+.Collapsible__title::marker,
+.Collapsible__title::-webkit-details-marker {
+  display: none;
+}
+
+.Collapsible__title:before {
+  border-style: solid;
+  border-color: transparent;
+  border-width: 4px 6px 4px 6px;
+  border-left-color: #000;
+  display: block;
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.Collapsible__container[open] > .Collapsible__title:before {
+  border-color: transparent;
+  border-width: 6px 4px 0 4px;
+  border-top-color: #000;
+}
+
+.Collapsible__content {
+  padding: 0 5px 5px 20px;
+}
+
+.Collapsible__collapsed .Collapsible__content {
+  display: none;
+  user-select: none;
+}