@crystallize/design-system 1.12.0 → 1.13.0

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -182,6 +182,17 @@ const fullModel: CrystallizeRichText = [
       },
     ],
   },
+  {
+    kind: 'block',
+    type: 'quote',
+    textContent:
+      'We hold these truths to be self-evident: all men and women are created, by the, you know the, you know the thing.',
+  },
+  {
+    kind: 'block',
+    type: 'paragraph',
+    textContent: 'Joe Biden',
+  },
 ];
 
 export const AllElements: Story = {

package/src/rich-text-editor/rich-text-editor.tsx

@@ -13,6 +13,7 @@ import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 
 import './rich-text-editor.css';
+import './plugins/FloatingLinkEditorPlugin/index.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 
@@ -25,6 +26,7 @@ import { BaseNodes } from './nodes/BaseNodes';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
 import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
+import { DimensionDetectorPlugin } from './plugins/DimensionsDetectorPlugin';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
@@ -60,6 +62,7 @@ type TRichTextBase = {
   editable?: boolean;
   language?: SupportedLanguages;
   labelTranslations?: I18N;
+  id?: string;
 };
 
 export function RichTextEditor({
@@ -109,13 +112,10 @@ function RichTextEditorWithoutContext({
   slotPreContent,
   maxLength,
   editable,
+  id,
 }: TRichTextBase): JSX.Element {
   const { historyState } = useSharedHistoryContext();
-  const placeholder = (
-    <div className="text-[14px] font-normal text-gray-300-600 italic absolute overflow-hidden text-ellipsis top-0 left-6 right-10 select-none whitespace-nowrap inline-block pointer-events-none ">
-      {placeholderText ?? ''}
-    </div>
-  );
+  const placeholder = <div className="c-rte-placeholder">{placeholderText ?? ''}</div>;
 
   const [editor] = useLexicalComposerContext();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
@@ -133,23 +133,6 @@ function RichTextEditorWithoutContext({
     editor.setEditable(editable || false);
   }, [editable, editor]);
 
-  // Deal with different window sizes
-  useEffect(() => {
-    const updateViewPortWidth = () => {
-      const isNextSmallWidthViewport = window.matchMedia('(max-width: 1025px)').matches;
-
-      if (isNextSmallWidthViewport !== isSmallWidthViewport) {
-        setIsSmallWidthViewport(isNextSmallWidthViewport);
-      }
-    };
-
-    window.addEventListener('resize', updateViewPortWidth);
-
-    return () => {
-      window.removeEventListener('resize', updateViewPortWidth);
-    };
-  }, [isSmallWidthViewport]);
-
   function onLocalChange(editorState: EditorState) {
     if (onChange) {
       if (triggerOnChangeOnAutoFocus || firstOnChangeTriggeredRef.current) {
@@ -163,9 +146,12 @@ function RichTextEditorWithoutContext({
   return (
     <>
       <OnChangePlugin onChange={onLocalChange} ignoreSelectionChange />
-      <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
+      <DimensionDetectorPlugin onChange={d => setIsSmallWidthViewport(d.isSmallWidth)} />
+      {isSmallWidthViewport ? null : (
+        <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
+      )}
       {slotPreContent}
-      <div className="editor-container">
+      <div className="c-rte-editor-container">
         {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />
@@ -175,9 +161,9 @@ function RichTextEditorWithoutContext({
 
         <RichTextPlugin
           contentEditable={
-            <div className="editor-scroller">
-              <div className="editor" ref={onRef}>
-                <ContentEditable className="ContentEditable__root" />
+            <div className="c-rte-editor-scroller">
+              <div className="c-rte-editor" ref={onRef}>
+                <ContentEditable className="c-rte-contenteditable-root" id={id} />
               </div>
             </div>
           }

package/src/rich-text-editor/themes/CrystallizeRTEditorTheme.ts

@@ -59,7 +59,7 @@ const theme: EditorThemeClasses = {
     h5: 'CrystallizeRTEditorTheme__h5',
     h6: 'CrystallizeRTEditorTheme__h6',
   },
-  image: 'editor-image',
+  image: '',
   indent: 'CrystallizeRTEditorTheme__indent',
   link: 'CrystallizeRTEditorTheme__link',
   list: {

package/src/rich-text-editor/ui/LinkPreview.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import './LinkPreview.css';
 import { CSSProperties, Suspense, useEffect, useState } from 'react';
 import { $getSelection, $isTextNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -120,16 +119,16 @@ function LinkPreviewContent({
   }
 
   return (
-    <div className="LinkPreview__container">
+    <div className="c-rte-link-preview">
       {preview.google.image && (
-        <div className="LinkPreview__imageWrapper bg-purple-50-900">
-          <img src={preview.google.image} alt={preview.google.title} className="LinkPreview__image" />
+        <div className="c-rte-link-preview-image-wrapper">
+          <img src={preview.google.image} alt={preview.google.title} className="c-rte-link-preview-image" />
         </div>
       )}
-      {preview.google.title && <div className="LinkPreview__title">{preview.google.title}</div>}
-      {preview.google.description && <div className="LinkPreview__description">{preview.google.description}</div>}
+      {preview.google.title && <div className="c-rte-link-preview-title">{preview.google.title}</div>}
+      {preview.google.description && <div className="c-rte-link-preview-description">{preview.google.description}</div>}
       {textContent && textContent !== preview.google.title ? (
-        <Button className="mb-4 ml-5" onClick={useTitleForText}>
+        <Button className="c-rte-link-preview__replace-text-btn" onClick={useTitleForText}>
           {tr('linkPreviewReplaceTextWithTitle')}
         </Button>
       ) : null}
@@ -140,7 +139,7 @@ function LinkPreviewContent({
 function Glimmer(props: { style: CSSProperties; index: number }): JSX.Element {
   return (
     <div
-      className="LinkPreview__glimmer"
+      className="c-rte-link-preview-glimmer"
       {...props}
       style={{
         animationDelay: String((props.index || 0) * 300),

package/src/rich-text-editor/utils/getSelectedNode.ts

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {$isAtNodeEnd} from '@lexical/selection';
-import {ElementNode, RangeSelection, TextNode} from 'lexical';
 
-export function getSelectedNode(
-  selection: RangeSelection,
-): TextNode | ElementNode {
+import type { ElementNode, RangeSelection, TextNode } from 'lexical';
+import { $isAtNodeEnd } from '@lexical/selection';
+
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = selection.anchor.getNode();

package/src/rich-text-editor/utils/point.ts

@@ -22,15 +22,15 @@ export class Point {
     return this._y;
   }
 
-  public equals({x, y}: Point): boolean {
+  public equals({ x, y }: Point): boolean {
     return this.x === x && this.y === y;
   }
 
-  public calcDeltaXTo({x}: Point): number {
+  public calcDeltaXTo({ x }: Point): number {
     return this.x - x;
   }
 
-  public calcDeltaYTo({y}: Point): number {
+  public calcDeltaYTo({ y }: Point): number {
     return this.y - y;
   }
 
@@ -43,10 +43,7 @@ export class Point {
   }
 
   public calcDistanceTo(point: Point): number {
-    return Math.sqrt(
-      Math.pow(this.calcDeltaXTo(point), 2) +
-        Math.pow(this.calcDeltaYTo(point), 2),
-    );
+    return Math.sqrt(Math.pow(this.calcDeltaXTo(point), 2) + Math.pow(this.calcDeltaYTo(point), 2));
   }
 }
 

package/src/rich-text-editor/utils/rect.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {isPoint, Point} from './point';
+import { isPoint, Point } from './point';
 
 type ContainsPointReturn = {
   result: boolean;
@@ -24,11 +24,9 @@ export class Rect {
   private readonly _bottom: number;
 
   constructor(left: number, top: number, right: number, bottom: number) {
-    const [physicTop, physicBottom] =
-      top <= bottom ? [top, bottom] : [bottom, top];
+    const [physicTop, physicBottom] = top <= bottom ? [top, bottom] : [bottom, top];
 
-    const [physicLeft, physicRight] =
-      left <= right ? [left, right] : [right, left];
+    const [physicLeft, physicRight] = left <= right ? [left, right] : [right, left];
 
     this._top = physicTop;
     this._right = physicRight;
@@ -60,28 +58,22 @@ export class Rect {
     return Math.abs(this._bottom - this._top);
   }
 
-  public equals({top, left, bottom, right}: Rect): boolean {
-    return (
-      top === this._top &&
-      bottom === this._bottom &&
-      left === this._left &&
-      right === this._right
-    );
+  public equals({ top, left, bottom, right }: Rect): boolean {
+    return top === this._top && bottom === this._bottom && left === this._left && right === this._right;
   }
 
-  public contains({x, y}: Point): ContainsPointReturn;
-  public contains({top, left, bottom, right}: Rect): boolean;
+  public contains({ x, y }: Point): ContainsPointReturn;
+  public contains({ top, left, bottom, right }: Rect): boolean;
   public contains(target: Point | Rect): boolean | ContainsPointReturn {
     if (isPoint(target)) {
-      const {x, y} = target;
+      const { x, y } = target;
 
       const isOnTopSide = y < this._top;
       const isOnBottomSide = y > this._bottom;
       const isOnLeftSide = x < this._left;
       const isOnRightSide = x > this._right;
 
-      const result =
-        !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
+      const result = !isOnTopSide && !isOnBottomSide && !isOnLeftSide && !isOnRightSide;
 
       return {
         reason: {
@@ -93,7 +85,7 @@ export class Rect {
         result,
       };
     } else {
-      const {top, left, bottom, right} = target;
+      const { top, left, bottom, right } = target;
 
       return (
         top >= this._top &&
@@ -109,8 +101,8 @@ export class Rect {
   }
 
   public intersectsWith(rect: Rect): boolean {
-    const {left: x1, top: y1, width: w1, height: h1} = rect;
-    const {left: x2, top: y2, width: w2, height: h2} = this;
+    const { left: x1, top: y1, width: w1, height: h1 } = rect;
+    const { left: x2, top: y2, width: w2, height: h2 } = this;
     const maxX = x1 + w1 >= x2 + w2 ? x1 + w1 : x2 + w2;
     const maxY = y1 + h1 >= y2 + h2 ? y1 + h1 : y2 + h2;
     const minX = x1 <= x2 ? x1 : x2;
@@ -118,41 +110,26 @@ export class Rect {
     return maxX - minX <= w1 + w2 && maxY - minY <= h1 + h2;
   }
 
-  public generateNewRect({
-    left = this.left,
-    top = this.top,
-    right = this.right,
-    bottom = this.bottom,
-  }): Rect {
+  public generateNewRect({ left = this.left, top = this.top, right = this.right, bottom = this.bottom }): Rect {
     return new Rect(left, top, right, bottom);
   }
 
-  static fromLTRB(
-    left: number,
-    top: number,
-    right: number,
-    bottom: number,
-  ): Rect {
+  static fromLTRB(left: number, top: number, right: number, bottom: number): Rect {
     return new Rect(left, top, right, bottom);
   }
 
-  static fromLWTH(
-    left: number,
-    width: number,
-    top: number,
-    height: number,
-  ): Rect {
+  static fromLWTH(left: number, width: number, top: number, height: number): Rect {
     return new Rect(left, top, left + width, top + height);
   }
 
   static fromPoints(startPoint: Point, endPoint: Point): Rect {
-    const {y: top, x: left} = startPoint;
-    const {y: bottom, x: right} = endPoint;
+    const { y: top, x: left } = startPoint;
+    const { y: bottom, x: right } = endPoint;
     return Rect.fromLTRB(left, top, right, bottom);
   }
 
   static fromDOM(dom: HTMLElement): Rect {
-    const {top, width, left, height} = dom.getBoundingClientRect();
+    const { top, width, left, height } = dom.getBoundingClientRect();
     return Rect.fromLWTH(left, width, top, height);
   }
 }

package/src/rich-text-editor/utils/url.ts

@@ -8,8 +8,7 @@
 
 export function sanitizeUrl(url: string): string {
   /** A pattern that matches safe  URLs. */
-  const SAFE_URL_PATTERN =
-    /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^&:/?#]*(?:[/?#]|$))/gi;
+  const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^&:/?#]*(?:[/?#]|$))/gi;
 
   /** A pattern that matches safe data URLs. */
   const DATA_URL_PATTERN =

package/src/select/select-root.tsx

@@ -1,6 +1,6 @@
 import { ComponentProps, forwardRef } from 'react';
-import * as SelectPrimitives from '@radix-ui/react-select';
 import { cva, VariantProps } from 'class-variance-authority';
+import * as SelectPrimitives from '@radix-ui/react-select';
 
 import { Icon } from '../iconography';
 

package/src/select/select.stories.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { Meta } from '@storybook/react';
 
-import { Select } from './select';
 import { Label } from '../label';
+import { Select } from './select';
 
 export default {
   title: 'Components/Select',

package/src/select/select.ts

@@ -1,6 +1,5 @@
 import { SelectItem } from './select-item';
 import { SelectContainer } from './select-root';
-
 import './select.css';
 
 export const Select = {

package/src/slider/Slider.stories.tsx

@@ -1,5 +1,6 @@
-import type { StoryObj, Meta } from '@storybook/react';
 import { useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
 import { Slider } from '.';
 
 const meta: Meta<typeof Slider> = {

package/src/slider/slider.tsx

@@ -1,6 +1,6 @@
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import { cx } from 'class-variance-authority';
 import { forwardRef } from 'react';
+import { cx } from 'class-variance-authority';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
 import './slider.css';
 

package/src/spinner/Spinner.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { Spinner } from '.';
 
 const meta: Meta<typeof Spinner> = {

package/src/spinner/index.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'class-variance-authority';
 import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
+import { cx } from 'class-variance-authority';
 
 import './spinner.css';
 

package/src/tag/Tag.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { Tag } from '.';
 
 const meta: Meta<typeof Tag> = {

package/dist/camera-CR7D2PNH.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera"><path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/><path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>

package/dist/clipboard-OSEFDF25.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>

package/dist/gear-ICMT4NTP.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/></svg>

package/dist/journal-code-XUT44HDV.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>

package/dist/lock-WCYOZOHW.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/></svg>

package/dist/lock-fill-JZSKOSHK.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/></svg>

package/dist/pencil-fill-STFSC26F.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill"><path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/></svg>

package/dist/plug-HGGGEVS3.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/></svg>

package/dist/plug-fill-OTG3U4TN.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug-fill"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0z"/></svg>

package/src/rich-text-editor/hooks/useReport.ts

@@ -1,64 +0,0 @@
-/**
- * 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 {useCallback, useEffect, useRef} from 'react';
-
-const getElement = (): HTMLElement => {
-  let element = document.getElementById('report-container');
-
-  if (element === null) {
-    element = document.createElement('div');
-    element.id = 'report-container';
-    element.style.position = 'fixed';
-    element.style.top = '50%';
-    element.style.left = '50%';
-    element.style.fontSize = '32px';
-    element.style.transform = 'translate(-50%, -50px)';
-    element.style.padding = '20px';
-    element.style.background = 'rgba(240, 240, 240, 0.4)';
-    element.style.borderRadius = '20px';
-
-    if (document.body) {
-      document.body.appendChild(element);
-    }
-  }
-
-  return element;
-};
-
-export default function useReport(): (
-  arg0: string,
-) => ReturnType<typeof setTimeout> {
-  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const cleanup = useCallback(() => {
-    if (timer !== null) {
-      clearTimeout(timer.current as ReturnType<typeof setTimeout>);
-    }
-
-    if (document.body) {
-      document.body.removeChild(getElement());
-    }
-  }, []);
-
-  useEffect(() => {
-    return cleanup;
-  }, [cleanup]);
-
-  return useCallback(
-    (content) => {
-      // eslint-disable-next-line no-console
-      console.log(content);
-      const element = getElement();
-      clearTimeout(timer.current as ReturnType<typeof setTimeout>);
-      element.innerHTML = content;
-      timer.current = setTimeout(cleanup, 1000);
-      return timer.current;
-    },
-    [cleanup],
-  );
-}

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.css

@@ -1,14 +0,0 @@
-.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/ui/LinkPreview.css

@@ -1,57 +0,0 @@
-/**
- * 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.
- *
- *
- */
-
-@keyframes glimmer-animation {
-  0% {
-    background: #f9f9f9;
-  }
-  .50% {
-    background: #eeeeee;
-  }
-  .100% {
-    background: #f9f9f9;
-  }
-}
-
-.LinkPreview__container {
-  /* @apply pb-3; */
-}
-
-.LinkPreview__imageWrapper {
-  @apply text-center;
-}
-
-.LinkPreview__image {
-  @apply m-auto max-h-[250px] max-w-full;
-}
-
-.LinkPreview__title {
-  @apply mx-6 mt-2 font-serif font-semibold leading-5 text-gray-700-200;
-}
-
-.LinkPreview__description {
-  @apply mx-6 mt-2 mb-4 text-sm leading-5;
-}
-
-.LinkPreview__domain {
-  @apply mx-6 mt-2 text-sm text-gray-700-200;
-}
-
-.LinkPreview__glimmer {
-  background: #f9f9f9;
-  border-radius: 8px;
-  height: 18px;
-  margin-bottom: 8px;
-  margin-left: 12px;
-  margin-right: 12px;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  animation-name: glimmer-animation;
-}

package/src/rich-text-editor/utils/isMobileWidth.ts

@@ -1,7 +0,0 @@
-/**
- * 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.
- *
- */

package/src/rich-text-editor/utils/joinClasses.ts

@@ -1,13 +0,0 @@
-/**
- * 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.
- *
- */
-
-export default function joinClasses(
-  ...args: Array<string | boolean | null | undefined>
-) {
-  return args.filter(Boolean).join(' ');
-}