@crystallize/design-system 1.11.7 → 1.13.0

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import './index.css';
+
 import * as React from 'react';
 import { DragEvent as ReactDragEvent, useEffect, useRef, useState } from 'react';
 import {
@@ -323,15 +323,15 @@ function useDraggableBlockMenu(editor: LexicalEditor, anchorElem: HTMLElement, i
   return createPortal(
     <>
       <div
-        className="icon draggable-block-menu"
+        className="c-rte-draggable-block-menu"
         ref={menuRef}
         draggable={true}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
-        <div className={isEditable ? 'icon' : ''} />
+        <div className={isEditable ? 'c-rte-draggable-block-menu__icon' : ''} />
       </div>
-      <div className="draggable-block-target-line" ref={targetLineRef} />
+      <div className="c-rte-draggable-block-target-line" ref={targetLineRef} />
     </>,
     anchorElem,
   );

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css

@@ -1,4 +1,4 @@
-.link-editor {
+.c-rte-link-editor {
   position: absolute;
   top: 0;
   left: 0;
@@ -11,30 +11,96 @@
   border-radius: 8px;
   transition: opacity 0.5s;
   will-change: transform;
+  @apply !rounded-lg border border-solid border-gray-100-800 !shadow-lg;
 }
 
-.link-editor .button {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  padding: 6px;
-  border-radius: 8px;
-  cursor: pointer;
-  margin: 0 2px;
+.c-rte-link-editor-link-input {
+  @apply my-2 flex max-w-full flex-nowrap items-center justify-between gap-4 border-gray px-6 py-2 text-sm text-s-blue-600-300;
+
+  a {
+    @apply block overflow-hidden text-ellipsis whitespace-nowrap text-s-blue-600-300 no-underline;
+
+    &:hover {
+      @apply underline;
+    }
+  }
+}
+
+.c-rte-link-editor-link-preview {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.c-rte-link-editor-input-group {
+  @apply border-0 border-b border-solid border-gray-100-800 px-3;
 }
 
-.link-editor .button.hovered {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  background-color: #eee;
+.c-rte-link-editor-button-wrap {
+  @apply flex justify-end px-6 py-2;
+}
+
+.c-rte-link-editor-preview-attrs {
+  @apply mt-1 flex gap-1;
+}
+
+.c-rte-link-editor-preview-attr {
+  @apply rounded-md bg-purple-50-900 px-1 py-0.5 text-[10px] text-gray-600-300;
+}
+
+/**
+ * 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 c-rte-glimmer-animation {
+  0% {
+    background: #f9f9f9;
+  }
+  .50% {
+    background: #eeeeee;
+  }
+  .100% {
+    background: #f9f9f9;
+  }
+}
+
+.c-rte-link-preview {
+}
+
+.c-rte-link-preview-image-wrapper {
+  @apply bg-purple-50-900 text-center;
+}
+
+.c-rte-link-preview-image {
+  @apply m-auto block max-h-[250px] max-w-full;
+}
+
+.c-rte-link-preview-title {
+  @apply mx-6 mt-4 font-semibold leading-5 text-gray-700-200;
+}
+
+.c-rte-link-preview-description {
+  @apply mx-6 mb-4 mt-2 text-sm leading-5;
+}
+
+.c-rte-link-preview-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: c-rte-glimmer-animation;
 }
 
-.link-editor .button i,
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  vertical-align: -0.25em;
+.c-rte-link-preview__replace-text-btn {
+  @apply mb-4 ml-5;
 }

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import './index.css';
+
 import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import {
@@ -185,10 +185,10 @@ function FloatingLinkEditor({
   }, [isEditMode]);
 
   return (
-    <div ref={editorRef} className="link-editor">
+    <div ref={editorRef} className="c-rte-link-editor">
       {isEditMode ? (
         <div>
-          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+          <div className="c-rte-link-editor-input-group">
             <InputWithLabel
               label={tr('linkEditorLink')}
               type="text"
@@ -197,7 +197,7 @@ function FloatingLinkEditor({
             />
           </div>
 
-          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+          <div className="c-rte-link-editor-input-group">
             <InputWithLabel
               label={tr('linkEditorRel')}
               type="text"
@@ -205,7 +205,7 @@ function FloatingLinkEditor({
               onChange={e => setRel(e.target.value)}
             />
           </div>
-          <div className="border-0 border-b border-gray-100-800 border-solid px-3">
+          <div className="c-rte-link-editor-input-group">
             <InputWithLabel
               label={tr('linkEditorTarget')}
               type="text"
@@ -213,7 +213,7 @@ function FloatingLinkEditor({
               onChange={e => setTarget(e.target.value)}
             />
           </div>
-          <div className="flex px-6 py-2 justify-end">
+          <div className="c-rte-link-editor-button-wrap">
             <Button
               onClick={() => {
                 if (lastSelection !== null) {
@@ -234,21 +234,15 @@ function FloatingLinkEditor({
         </div>
       ) : (
         <>
-          <div className="link-input !flex flex-nowrap justify-between items-center max-w-full ">
-            <div className="grid">
+          <div className="c-rte-link-editor-link-input">
+            <div className="c-rte-link-editor-link-preview">
               <a href={linkUrl} target="_blank" rel="noopener noreferrer">
                 {linkUrl}
               </a>
               {rel || target ? (
-                <div className="flex mt-1 gap-1">
-                  {rel && (
-                    <div className="text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5">{rel}</div>
-                  )}
-                  {target && (
-                    <div className="text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5">
-                      {target}
-                    </div>
-                  )}
+                <div className="c-rte-link-editor-preview-attrs">
+                  {rel && <div className="c-rte-link-editor-preview-attr">{rel}</div>}
+                  {target && <div className="c-rte-link-editor-preview-attr">{target}</div>}
                 </div>
               ) : null}
             </div>

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.css

@@ -1,11 +1,19 @@
-.c-floating-text-format-popup {
+.c-rte-floating-text-format-tb-plugin {
   vertical-align: middle;
   background-color: #fff;
   transition: opacity 0.5s;
   height: 43px;
   will-change: transform;
   box-sizing: border-box;
-  @apply absolute left-0 top-0 z-10 flex rounded-md bg-elevate p-1 opacity-0 shadow-md;
+  @apply absolute left-0 top-0 z-10 flex gap-0.5 rounded-md bg-elevate p-1 opacity-0 shadow-md;
+
+  &__format-icon {
+    @apply h-full w-full bg-[length:18px_18px] bg-center bg-no-repeat opacity-60;
+
+    &.selected {
+      @apply bg-purple-50-900 opacity-100;
+    }
+  }
 }
 
 .c-floating-text-format-popup button.popup-item {

package/src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -134,7 +134,7 @@ function TextFormatFloatingToolbar({
   }, [editor, updateTextFormatFloatingToolbar]);
 
   return (
-    <div ref={popupCharStylesEditorRef} className="c-floating-text-format-popup gap-0.5">
+    <div ref={popupCharStylesEditorRef} className="c-rte-floating-text-format-tb-plugin">
       {editor.isEditable() && (
         <>
           <IconButton
@@ -146,8 +146,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatAsStrongLabel')}
           >
             <i
-              className={`format bold  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isBold ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${
+                isBold ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -160,8 +160,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatAsEmphasizedLabel')}
           >
             <i
-              className={`format italic  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isItalic ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${
+                isItalic ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -174,8 +174,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatAsUnderlinedLabel')}
           >
             <i
-              className={`format underline  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isUnderline ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${
+                isUnderline ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -188,8 +188,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatWithStrikethroughLabel')}
           >
             <i
-              className={`format strikethrough  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isStrikethrough ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${
+                isStrikethrough ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -202,8 +202,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatWithSubscriptLabel')}
           >
             <i
-              className={`format subscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isSubscript ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${
+                isSubscript ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -216,8 +216,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionFormatWithSuperscriptLabel')}
           >
             <i
-              className={`format superscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isSuperscript ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${
+                isSuperscript ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -229,8 +229,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionInsertCodeBlock')}
           >
             <i
-              className={`format code  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isCode ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${
+                isCode ? 'selected' : ''
               }`}
             />
           </IconButton>
@@ -240,8 +240,8 @@ function TextFormatFloatingToolbar({
             aria-label={tr('actionInsertlink')}
           >
             <i
-              className={`format link  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${
-                isLink ? 'bg-purple-50-900 opacity-100' : 'opacity-60'
+              className={`c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${
+                isLink ? 'selected' : ''
               }`}
             />
           </IconButton>

package/src/rich-text-editor/plugins/LinkPlugin/index.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import * as React from 'react';
+import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 
 import { validateUrl } from '../../utils/url';
 

package/src/rich-text-editor/plugins/ListMaxIndentLevelPlugin/index.ts

@@ -6,10 +6,7 @@
  *
  */
 
-import type {RangeSelection} from 'lexical';
-
-import {$getListDepth, $isListItemNode, $isListNode} from '@lexical/list';
-import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
 import {
   $getSelection,
   $isElementNode,
@@ -17,28 +14,23 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   ElementNode,
   INDENT_CONTENT_COMMAND,
+  type RangeSelection,
 } from 'lexical';
-import {useEffect} from 'react';
+import { $getListDepth, $isListItemNode, $isListNode } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
 type Props = Readonly<{
   maxDepth: number | null | undefined;
 }>;
 
-function getElementNodesInSelection(
-  selection: RangeSelection,
-): Set<ElementNode> {
+function getElementNodesInSelection(selection: RangeSelection): Set<ElementNode> {
   const nodesInSelection = selection.getNodes();
 
   if (nodesInSelection.length === 0) {
-    return new Set([
-      selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow(),
-    ]);
+    return new Set([selection.anchor.getNode().getParentOrThrow(), selection.focus.getNode().getParentOrThrow()]);
   }
 
-  return new Set(
-    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow())),
-  );
+  return new Set(nodesInSelection.map(n => ($isElementNode(n) ? n : n.getParentOrThrow())));
 }
 
 function isIndentPermitted(maxDepth: number): boolean {
@@ -48,8 +40,7 @@ function isIndentPermitted(maxDepth: number): boolean {
     return false;
   }
 
-  const elementNodesInSelection: Set<ElementNode> =
-    getElementNodesInSelection(selection);
+  const elementNodesInSelection: Set<ElementNode> = getElementNodesInSelection(selection);
 
   let totalDepth = 0;
 
@@ -60,9 +51,7 @@ function isIndentPermitted(maxDepth: number): boolean {
       const parent = elementNode.getParent();
 
       if (!$isListNode(parent)) {
-        throw new Error(
-          'ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.',
-        );
+        throw new Error('ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.');
       }
 
       totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
@@ -72,7 +61,7 @@ function isIndentPermitted(maxDepth: number): boolean {
   return totalDepth <= maxDepth;
 }
 
-export default function ListMaxIndentLevelPlugin({maxDepth}: Props): null {
+export default function ListMaxIndentLevelPlugin({ maxDepth }: Props): null {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {

package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.css

@@ -0,0 +1,6 @@
+.c-rte-table-cell-action-button-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}

package/src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx

@@ -396,13 +396,13 @@ function TableCellActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
 
   return (
-    <div className="table-cell-action-button-container" ref={menuButtonRef}>
+    <div className="c-rte-table-cell-action-button-container" ref={menuButtonRef}>
       {tableCellNode != null && (
         <DropdownMenu.Root
           onOpenChange={isOpen => setIsMenuOpen(isOpen)}
           content={<TableActionMenu tableCellNode={tableCellNode} tableStats={tableStats} />}
         >
-          <IconButton size="xs" className="table-cell-action-button" aria-label={tr('actionTableOpenOptions')}>
+          <IconButton size="xs" aria-label={tr('actionTableOpenOptions')}>
             <Icon.Arrow />
           </IconButton>
         </DropdownMenu.Root>

package/src/rich-text-editor/plugins/ToolbarPlugin/index.css

@@ -0,0 +1,115 @@
+.c-rte-toolbar {
+  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md py-1 pl-4 pr-2 align-middle;
+
+  &__inner {
+    @apply flex;
+  }
+
+  &__icon {
+    @apply h-6 w-4 border bg-[length:17px_17px] bg-center bg-no-repeat;
+
+    &.disabled {
+      @apply opacity-30;
+    }
+  }
+
+  &__block-format__icon {
+    @apply h-6 w-6 rounded-md border bg-[length:18px_18px] bg-center bg-no-repeat opacity-60;
+
+    &.selected {
+      @apply bg-purple-50-900 opacity-100;
+    }
+  }
+
+  &__block-format__text {
+    @apply min-w-[150px] px-3 text-sm font-normal;
+
+    &.selected {
+      @apply font-bold;
+    }
+  }
+
+  &__toggle-icon {
+    @apply h-6 w-6 border bg-[length:18px_18px] bg-center bg-no-repeat;
+  }
+
+  &__code-lang {
+    &__button-text {
+      @apply text-sm font-medium;
+    }
+    &__sel-item {
+      @apply block min-w-[200px] px-3 text-sm font-normal opacity-80;
+
+      &.selected {
+        @apply font-bold opacity-100;
+      }
+    }
+  }
+
+  &__divider {
+    width: 1px;
+    background-color: #eee;
+    margin: 0 4px;
+  }
+
+  &__actions-rest {
+    @apply flex gap-1;
+  }
+
+  &__icon-btn {
+    @apply opacity-60;
+
+    &.selected {
+      @apply !bg-purple-50-900 opacity-100;
+    }
+
+    &__icon {
+      @apply h-full w-full border bg-[length:18px_18px] bg-center bg-no-repeat;
+    }
+  }
+
+  &__dd-item {
+    &__icon {
+      @apply h-6 w-6 rounded-sm border bg-[length:16px_16px] bg-center bg-no-repeat opacity-60;
+
+      &.selected {
+        @apply !bg-purple-50-900 opacity-100;
+      }
+    }
+    &__text {
+      @apply px-3 font-sans text-sm font-normal;
+
+      &.selected {
+        @apply font-medium;
+      }
+
+      &--clear {
+        @apply ml-3 text-pink-600-300;
+      }
+    }
+
+    &--table {
+      @apply flex items-center font-sans font-normal;
+    }
+  }
+
+  &__plus {
+    @apply h-full w-full border bg-[length:20px_20px] bg-center bg-no-repeat;
+  }
+}
+
+.c-rte-insert-table {
+  @apply items-center justify-between;
+
+  &__dimensions {
+    @apply grid grid-cols-[1fr_1px_1fr] rounded-md border border-solid border-gray-100-800 shadow-sm;
+
+    &__separator {
+      @apply h-full bg-gray-100-800;
+    }
+  }
+
+  &__actions {
+    @apply mt-3 flex justify-end;
+  }
+}