@crystallize/design-system 1.4.0 → 1.4.1

package/src/rich-text-editor/themes/PlaygroundEditorTheme.css

@@ -0,0 +1,433 @@
+/**
+ * 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.
+ *
+ *
+ */
+.PlaygroundEditorTheme__ltr {
+  @apply text-left;
+}
+.PlaygroundEditorTheme__rtl {
+  @apply text-right;
+}
+.PlaygroundEditorTheme__paragraph {
+  font-size: 15px;
+  @apply relative m-0 mt-2 leading-6 text-gray-600-300;
+}
+.PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
+  @apply relative m-0 mt-4;
+}
+.PlaygroundEditorTheme__quote {
+  font-size: 15px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  @apply m-0 ml-5 pl-4;
+
+  @apply my-6 border-l-purple-700-200 font-normal text-gray-800-100;
+}
+
+.PlaygroundEditorTheme__h1 {
+  font-size: 20px;
+
+  @apply m-0 mb-1 mt-2 font-medium leading-6
+    text-gray-800-100;
+}
+.PlaygroundEditorTheme__h2 {
+  font-size: 19px;
+  @apply m-0 mb-1 mt-2 text-lg font-medium leading-6 text-gray-800-100;
+}
+.PlaygroundEditorTheme__h3 {
+  font-size: 18px;
+  @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
+}
+.PlaygroundEditorTheme__h4 {
+  font-size: 17px;
+  @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
+}
+.PlaygroundEditorTheme__h5 {
+  font-size: 16px;
+  @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
+}
+.PlaygroundEditorTheme__h6 {
+  font-size: 16px;
+  @apply m-0 mb-1 mt-2 font-medium leading-6 text-gray-800-100;
+}
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 20px;
+}
+.PlaygroundEditorTheme__textBold {
+  @apply font-bold;
+}
+.PlaygroundEditorTheme__textItalic {
+  @apply italic;
+}
+.PlaygroundEditorTheme__textUnderline {
+  @apply underline;
+}
+.PlaygroundEditorTheme__textStrikethrough {
+  @apply line-through;
+}
+.PlaygroundEditorTheme__textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+.PlaygroundEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.PlaygroundEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+.PlaygroundEditorTheme__textCode {
+  padding: 2px 0.5rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 13px;
+  border-width: 1px;
+  border-style: solid;
+  @apply rounded-md border-gray-100-800 bg-purple-50-900;
+}
+.PlaygroundEditorTheme__hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.PlaygroundEditorTheme__link {
+  text-decoration: none;
+  box-shadow: #5d96fd 0 -2px inset;
+  @apply !text-gray-600-300;
+}
+.PlaygroundEditorTheme__link:hover {
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__code {
+  @apply relative my-2 mx-0 block overflow-x-auto rounded-md border border-solid border-gray-100-800 bg-purple-50-900 p-2 pl-14 text-sm leading-5;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 12px;
+  tab-size: 2;
+}
+.PlaygroundEditorTheme__code:before {
+  @apply absolute top-0 left-0 border-0 border-r-[1px] border-solid border-gray-100-800 bg-purple-100-800 p-2 text-right text-gray-400-500;
+  content: attr(data-gutter);
+  white-space: pre-wrap;
+  min-width: 25px;
+}
+.PlaygroundEditorTheme__table {
+  /* border-collapse: collapse; */
+  border-spacing: 0;
+  max-width: 100%;
+  overflow-y: scroll;
+  table-layout: fixed;
+  width: calc(100% - 25px);
+  margin: 30px 0;
+  overflow: hidden;
+  border-width: 1px 1px 0 0;
+  border-style: solid;
+  @apply rounded-md border-gray-100-800;
+}
+
+.PlaygroundEditorTheme__tableSelected {
+  @apply outline-2 outline-purple-200-700;
+}
+.PlaygroundEditorTheme__tableCell {
+  @apply relative cursor-default border border-solid border-gray-100-800 px-2 py-0 text-start align-top outline-none;
+  min-width: 75px;
+  border-width: 0 0 1px 1px;
+}
+
+.PlaygroundEditorTheme__tableCell .PlaygroundEditorTheme__paragraph {
+  @apply my-2 text-sm;
+}
+.PlaygroundEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  @apply bg-purple-50-900;
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableCellPrimarySelected {
+  @apply border-2 border-solid border-purple-200-700;
+
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.PlaygroundEditorTheme__tableCellEditing {
+  @apply shadow-md;
+  border-radius: 3px;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  height: 100%;
+  right: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+  @apply bg-purple-50-900;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover {
+  @apply rounded-sm border-purple-200-700;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  @apply bg-purple-50-900;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+}
+.PlaygroundEditorTheme__tableAddRows:hover {
+  @apply rounded-sm border-purple-200-700;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.PlaygroundEditorTheme__characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.PlaygroundEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ul {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__listItem {
+  @apply my-0 mx-5 leading-6 text-gray-600-300;
+}
+.PlaygroundEditorTheme__listItemChecked,
+.PlaygroundEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
+.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+.PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.PlaygroundEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.PlaygroundEditorTheme__listItemChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.PlaygroundEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}
+.PlaygroundEditorTheme__tokenComment {
+  color: slategray;
+}
+.PlaygroundEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.PlaygroundEditorTheme__tokenProperty {
+  color: #905;
+}
+.PlaygroundEditorTheme__tokenSelector {
+  color: #690;
+}
+.PlaygroundEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.PlaygroundEditorTheme__tokenAttr {
+  color: #07a;
+}
+.PlaygroundEditorTheme__tokenVariable {
+  color: #e90;
+}
+.PlaygroundEditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+.PlaygroundEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.PlaygroundEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.PlaygroundEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}

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

@@ -0,0 +1,113 @@
+/**
+ * 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 { EditorThemeClasses } from 'lexical';
+
+import './PlaygroundEditorTheme.css';
+
+const theme: EditorThemeClasses = {
+  blockCursor: 'PlaygroundEditorTheme__blockCursor',
+  characterLimit: 'PlaygroundEditorTheme__characterLimit',
+  code: 'PlaygroundEditorTheme__code',
+  codeHighlight: {
+    atrule: 'PlaygroundEditorTheme__tokenAttr',
+    attr: 'PlaygroundEditorTheme__tokenAttr',
+    boolean: 'PlaygroundEditorTheme__tokenProperty',
+    builtin: 'PlaygroundEditorTheme__tokenSelector',
+    cdata: 'PlaygroundEditorTheme__tokenComment',
+    char: 'PlaygroundEditorTheme__tokenSelector',
+    class: 'PlaygroundEditorTheme__tokenFunction',
+    'class-name': 'PlaygroundEditorTheme__tokenFunction',
+    comment: 'PlaygroundEditorTheme__tokenComment',
+    constant: 'PlaygroundEditorTheme__tokenProperty',
+    deleted: 'PlaygroundEditorTheme__tokenProperty',
+    doctype: 'PlaygroundEditorTheme__tokenComment',
+    entity: 'PlaygroundEditorTheme__tokenOperator',
+    function: 'PlaygroundEditorTheme__tokenFunction',
+    important: 'PlaygroundEditorTheme__tokenVariable',
+    inserted: 'PlaygroundEditorTheme__tokenSelector',
+    keyword: 'PlaygroundEditorTheme__tokenAttr',
+    namespace: 'PlaygroundEditorTheme__tokenVariable',
+    number: 'PlaygroundEditorTheme__tokenProperty',
+    operator: 'PlaygroundEditorTheme__tokenOperator',
+    prolog: 'PlaygroundEditorTheme__tokenComment',
+    property: 'PlaygroundEditorTheme__tokenProperty',
+    punctuation: 'PlaygroundEditorTheme__tokenPunctuation',
+    regex: 'PlaygroundEditorTheme__tokenVariable',
+    selector: 'PlaygroundEditorTheme__tokenSelector',
+    string: 'PlaygroundEditorTheme__tokenSelector',
+    symbol: 'PlaygroundEditorTheme__tokenProperty',
+    tag: 'PlaygroundEditorTheme__tokenProperty',
+    url: 'PlaygroundEditorTheme__tokenOperator',
+    variable: 'PlaygroundEditorTheme__tokenVariable',
+  },
+  embedBlock: {
+    base: 'PlaygroundEditorTheme__embedBlock',
+    focus: 'PlaygroundEditorTheme__embedBlockFocus',
+  },
+  hashtag: 'PlaygroundEditorTheme__hashtag',
+  heading: {
+    h1: 'PlaygroundEditorTheme__h1',
+    h2: 'PlaygroundEditorTheme__h2',
+    h3: 'PlaygroundEditorTheme__h3',
+    h4: 'PlaygroundEditorTheme__h4',
+    h5: 'PlaygroundEditorTheme__h5',
+    h6: 'PlaygroundEditorTheme__h6',
+  },
+  image: 'editor-image',
+  indent: 'PlaygroundEditorTheme__indent',
+  link: 'PlaygroundEditorTheme__link',
+  list: {
+    listitem: 'PlaygroundEditorTheme__listItem',
+    listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
+    listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+    nested: {
+      listitem: 'PlaygroundEditorTheme__nestedListItem',
+    },
+    olDepth: [
+      'PlaygroundEditorTheme__ol1',
+      'PlaygroundEditorTheme__ol2',
+      'PlaygroundEditorTheme__ol3',
+      'PlaygroundEditorTheme__ol4',
+      'PlaygroundEditorTheme__ol5',
+    ],
+    ul: 'PlaygroundEditorTheme__ul',
+  },
+  ltr: 'PlaygroundEditorTheme__ltr',
+  mark: 'PlaygroundEditorTheme__mark',
+  markOverlap: 'PlaygroundEditorTheme__markOverlap',
+  paragraph: 'PlaygroundEditorTheme__paragraph',
+  quote: 'PlaygroundEditorTheme__quote',
+  rtl: 'PlaygroundEditorTheme__rtl',
+  table: 'PlaygroundEditorTheme__table',
+  tableAddColumns: 'PlaygroundEditorTheme__tableAddColumns',
+  tableAddRows: 'PlaygroundEditorTheme__tableAddRows',
+  tableCell: 'PlaygroundEditorTheme__tableCell',
+  tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer: 'PlaygroundEditorTheme__tableCellActionButtonContainer',
+  tableCellEditing: 'PlaygroundEditorTheme__tableCellEditing',
+  tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
+  tableCellPrimarySelected: 'PlaygroundEditorTheme__tableCellPrimarySelected',
+  tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
+  tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
+  tableCellSortedIndicator: 'PlaygroundEditorTheme__tableCellSortedIndicator',
+  tableResizeRuler: 'PlaygroundEditorTheme__tableCellResizeRuler',
+  tableSelected: 'PlaygroundEditorTheme__tableSelected',
+  text: {
+    bold: 'PlaygroundEditorTheme__textBold',
+    code: 'PlaygroundEditorTheme__textCode',
+    italic: 'PlaygroundEditorTheme__textItalic',
+    strikethrough: 'PlaygroundEditorTheme__textStrikethrough',
+    subscript: 'PlaygroundEditorTheme__textSubscript',
+    superscript: 'PlaygroundEditorTheme__textSuperscript',
+    underline: 'PlaygroundEditorTheme__textUnderline',
+    underlineStrikethrough: 'PlaygroundEditorTheme__textUnderlineStrikethrough',
+  },
+};
+
+export default theme;

package/src/rich-text-editor/types.ts

@@ -0,0 +1,5 @@
+export type CrystallizeRichTextActionMenuItem = {
+  title: string;
+  action: () => void;
+  type?: 'default' | 'danger';
+};

package/src/rich-text-editor/ui/ContentEditable.css

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ *
+ *
+ */
+.ContentEditable__root {
+  tab-size: 1;
+  min-height: calc(100% - 16px);
+  @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * 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 './ContentEditable.css';
+import * as React from 'react';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+
+export default function LexicalContentEditable({ className }: { className?: string }): JSX.Element {
+  return <ContentEditable className={className || 'ContentEditable__root'} />;
+}

package/src/rich-text-editor/ui/LinkPreview.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.
+ *
+ *
+ */
+
+@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;
+}