@crystallize/design-system 1.4.0 → 1.4.2

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx

@@ -0,0 +1,60 @@
+/**
+ * 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 { useDebouncedCallback } from 'use-debounce';
+
+interface Props {
+  editor: LexicalEditor;
+  getCodeDOMNode: () => HTMLElement | null;
+}
+
+export function CopyButton({ editor, getCodeDOMNode }: Props) {
+  const [isCopyCompleted, setCopyCompleted] = useState<boolean>(false);
+
+  const removeSuccessIcon = useDebouncedCallback(() => {
+    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/rich-text-editor/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/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -0,0 +1,140 @@
+/**
+ * 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 * as React from 'react';
+import { useState } from 'react';
+import { $getNearestNodeFromDOMNode, LexicalEditor } from 'lexical';
+import type { Options } from 'prettier';
+import { $isCodeNode } from '@lexical/code';
+
+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 = '';
+
+          parsed = format(content, options);
+
+          if (parsed !== '') {
+            const selection = codeNode.select(0);
+            selection.insertText(parsed);
+            setSyntaxError('');
+            setTipsVisible(false);
+          }
+        }
+      });
+    } catch (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/rich-text-editor/plugins/CodeActionMenuPlugin/index.css

@@ -0,0 +1,46 @@
+.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/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -0,0 +1,155 @@
+/**
+ * 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 { useEffect, useRef, useState } from 'react';
+import { $getNearestNodeFromDOMNode } from 'lexical';
+import { createPortal } from 'react-dom';
+import { useDebouncedCallback } from 'use-debounce';
+import { $isCodeNode, CodeNode, getLanguageFriendlyName, normalizeCodeLang } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+import { CopyButton } from './components/CopyButton';
+import { canBePrettier, PrettierButton } from './components/PrettierButton';
+
+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 = useDebouncedCallback((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);
+
+  useEffect(() => {
+    if (!shouldListenMouseMove) {
+      return;
+    }
+
+    document.addEventListener('mousemove', debouncedOnMouseMove);
+
+    return () => {
+      setShown(false);
+      debouncedOnMouseMove.cancel();
+      document.removeEventListener('mousemove', debouncedOnMouseMove);
+    };
+  }, [shouldListenMouseMove, debouncedOnMouseMove]);
+
+  editor.registerMutationListener(CodeNode, mutations => {
+    editor.getEditorState().read(() => {
+      for (const [key, type] of mutations) {
+        switch (type) {
+          case 'created':
+            codeSetRef.current.add(key);
+            setShouldListenMouseMove(codeSetRef.current.size > 0);
+            break;
+
+          case 'destroyed':
+            codeSetRef.current.delete(key);
+            setShouldListenMouseMove(codeSetRef.current.size > 0);
+            break;
+
+          default:
+            break;
+        }
+      }
+    });
+  });
+  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/rich-text-editor/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 { useEffect } from 'react';
+import { registerCodeHighlighting } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
+export default function CodeHighlightPlugin(): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+
+  return null;
+}