@crystallize/design-system 1.4.3 → 1.6.1

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

@@ -1,7 +1,6 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import type { EditorState } from 'lexical';
 import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
 import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
@@ -14,20 +13,18 @@ import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin
 import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
 
 import './rich-text-editor.css';
-import { useSettings } from './context/SettingsContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+
 import { SharedHistoryContext, useSharedHistoryContext } from './context/SharedHistoryContext';
-import type { CrystallizeRichText } from './model/crystallize-rich-text-types';
 import { composeInitialState } from './model/crystallize-to-lexical';
 import { lexicalToCrystallizeRichText } from './model/lexical-to-crystallize';
 import { BaseNodes } from './nodes/BaseNodes';
 import { BaseNodes as TableCellNodes } from './nodes/TableCellNodes';
 import AutoLinkPlugin from './plugins/AutoLinkPlugin';
-import AutocompletePlugin from './plugins/AutocompletePlugin';
 import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
 import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
 import DragDropPaste from './plugins/DragDropPastePlugin';
-import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
 import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
 import LinkPlugin from './plugins/LinkPlugin';
@@ -40,13 +37,21 @@ import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
 import TableCellResizer from './plugins/TableCellResizer';
 import { TableContext, TablePlugin as NewTablePlugin } from './plugins/TablePlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
-import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
-import type { CrystallizeRichTextActionMenuItem } from './types';
+import CrystallizeRTEditorTheme from './themes/CrystallizeRTEditorTheme';
+import type { CrystallizeRichText } from './types/crystallize-rich-text-types';
+import type { CrystallizeRichTextActionMenuItem } from './types/types';
 import ContentEditable from './ui/ContentEditable';
 
-// Types
-export type { CrystallizeRichText } from './model/crystallize-rich-text-types';
-export * from './types';
+/**
+ * Currently disabling this as there is a conflict with someting within
+ * the app. @hk have done 15minutes of debugging without finding out what
+ * causes the conflict. We can re-visit this at some later time.
+ */
+// import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
+
+// Export types
+export type { CrystallizeRichText } from './types/crystallize-rich-text-types';
+export * from './types/types';
 
 type TRichTextBase = {
   placeholder?: string;
@@ -56,6 +61,8 @@ type TRichTextBase = {
   actionsMenuPrepend?: CrystallizeRichTextActionMenuItem[];
   actionsMenuAppend?: CrystallizeRichTextActionMenuItem[];
   slotPreContent?: ReactNode;
+  maxLength?: number;
+  editable?: boolean;
 };
 
 export function RichTextEditor({
@@ -64,7 +71,6 @@ export function RichTextEditor({
   ...rest
 }: TRichTextBase & {
   initialData?: CrystallizeRichText;
-  editable?: boolean;
 }) {
   return (
     <LexicalComposer
@@ -75,7 +81,7 @@ export function RichTextEditor({
         onError: (error: Error) => {
           throw error;
         },
-        theme: PlaygroundEditorTheme,
+        theme: CrystallizeRTEditorTheme,
         editorState: initialData
           ? composeInitialState({
               richText: initialData,
@@ -86,7 +92,7 @@ export function RichTextEditor({
       <SharedHistoryContext>
         <TableContext>
           <div className="c-rich-text-editor">
-            <RichTextEditorWithoutContext {...rest} />
+            <RichTextEditorWithoutContext {...rest} editable={editable} />
           </div>
         </TableContext>
       </SharedHistoryContext>
@@ -102,17 +108,17 @@ function RichTextEditorWithoutContext({
   actionsMenuPrepend,
   actionsMenuAppend,
   slotPreContent,
+  maxLength,
+  editable,
 }: TRichTextBase): JSX.Element {
   const { historyState } = useSharedHistoryContext();
-  const {
-    settings: { isAutocomplete, isMaxLength, isCharLimit, isCharLimitUtf8 },
-  } = useSettings();
   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 [editor] = useLexicalComposerContext();
   const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null);
   const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false);
   const firstOnChangeTriggeredRef = useRef(!autoFocus);
@@ -123,6 +129,11 @@ function RichTextEditorWithoutContext({
     }
   };
 
+  // Listen for editable change
+  useEffect(() => {
+    editor.setEditable(editable || false);
+  }, [editable, editor]);
+
   // Deal with different window sizes
   useEffect(() => {
     const updateViewPortWidth = () => {
@@ -156,7 +167,7 @@ function RichTextEditorWithoutContext({
       <ToolbarPlugin actionsMenuPrepend={actionsMenuPrepend} actionsMenuAppend={actionsMenuAppend} />
       {slotPreContent}
       <div className="editor-container">
-        {isMaxLength && <MaxLengthPlugin maxLength={30} />}
+        {maxLength != null ? <MaxLengthPlugin maxLength={maxLength} /> : null}
         <DragDropPaste />
         {!autoFocus ? null : <AutoFocusPlugin />}
         <ClearEditorPlugin />
@@ -190,7 +201,7 @@ function RichTextEditorWithoutContext({
             onError: (error: Error) => {
               throw error;
             },
-            theme: PlaygroundEditorTheme,
+            theme: CrystallizeRTEditorTheme,
           }}
         >
           {!autoFocus ? <></> : <AutoFocusPlugin />}
@@ -210,18 +221,13 @@ function RichTextEditorWithoutContext({
         <TabIndentationPlugin />
         {floatingAnchorElem && !isSmallWidthViewport && (
           <>
-            <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
+            {/* <DraggableBlockPlugin anchorElem={floatingAnchorElem} /> */}
             <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />
             <FloatingLinkEditorPlugin anchorElem={floatingAnchorElem} />
             <TableCellActionMenuPlugin anchorElem={floatingAnchorElem} />
             <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
           </>
         )}
-
-        {(isCharLimit || isCharLimitUtf8) && (
-          <CharacterLimitPlugin charset={isCharLimit ? 'UTF-16' : 'UTF-8'} maxLength={5} />
-        )}
-        {isAutocomplete && <AutocompletePlugin />}
       </div>
     </>
   );

package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import { render, screen } from '@testing-library/react';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
 const emptyParagraph: CrystallizeRichText = [{ kind: 'block', type: 'paragraph', textContent: 'rabbit' }];

package/src/rich-text-editor/tests/rich-text-editor-model-basics.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
 describe('RichTextEditor model basics', () => {

package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 
-import type { CrystallizeRichText, CrystallizeRichTextNode } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
 import { sleep } from './utils';
 
 /**

package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx

@@ -2,8 +2,8 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import type { CrystallizeRichText } from '../model/crystallize-rich-text-types';
 import { RichTextEditor } from '../rich-text-editor';
+import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
 import { selectTextInElement } from './utils';
 
 describe('RichTextEditor text formats', () => {

package/src/rich-text-editor/themes/{PlaygroundEditorTheme.css → CrystallizeRTEditorTheme.css}

@@ -6,20 +6,20 @@
  *
  *
  */
-.PlaygroundEditorTheme__ltr {
+.CrystallizeRTEditorTheme__ltr {
   @apply text-left;
 }
-.PlaygroundEditorTheme__rtl {
+.CrystallizeRTEditorTheme__rtl {
   @apply text-right;
 }
-.PlaygroundEditorTheme__paragraph {
+.CrystallizeRTEditorTheme__paragraph {
   font-size: 15px;
   @apply relative m-0 mt-2 leading-6 text-gray-600-300;
 }
-.PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
+.CrystallizeRTEditorTheme__paragraph + .CrystallizeRTEditorTheme__paragraph {
   @apply relative m-0 mt-4;
 }
-.PlaygroundEditorTheme__quote {
+.CrystallizeRTEditorTheme__quote {
   font-size: 15px;
   border-left-width: 4px;
   border-left-style: solid;
@@ -28,59 +28,59 @@
   @apply my-6 border-l-purple-700-200 font-normal text-gray-800-100;
 }
 
-.PlaygroundEditorTheme__h1 {
+.CrystallizeRTEditorTheme__h1 {
   font-size: 20px;
 
   @apply m-0 mb-1 mt-2 font-medium leading-6
     text-gray-800-100;
 }
-.PlaygroundEditorTheme__h2 {
+.CrystallizeRTEditorTheme__h2 {
   font-size: 19px;
   @apply m-0 mb-1 mt-2 text-lg font-medium leading-6 text-gray-800-100;
 }
-.PlaygroundEditorTheme__h3 {
+.CrystallizeRTEditorTheme__h3 {
   font-size: 18px;
   @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
 }
-.PlaygroundEditorTheme__h4 {
+.CrystallizeRTEditorTheme__h4 {
   font-size: 17px;
   @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
 }
-.PlaygroundEditorTheme__h5 {
+.CrystallizeRTEditorTheme__h5 {
   font-size: 16px;
   @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
 }
-.PlaygroundEditorTheme__h6 {
+.CrystallizeRTEditorTheme__h6 {
   font-size: 16px;
   @apply m-0 mb-1 mt-2 font-medium leading-6 text-gray-800-100;
 }
-.PlaygroundEditorTheme__indent {
+.CrystallizeRTEditorTheme__indent {
   --lexical-indent-base-value: 20px;
 }
-.PlaygroundEditorTheme__textBold {
+.CrystallizeRTEditorTheme__textBold {
   @apply font-bold;
 }
-.PlaygroundEditorTheme__textItalic {
+.CrystallizeRTEditorTheme__textItalic {
   @apply italic;
 }
-.PlaygroundEditorTheme__textUnderline {
+.CrystallizeRTEditorTheme__textUnderline {
   @apply underline;
 }
-.PlaygroundEditorTheme__textStrikethrough {
+.CrystallizeRTEditorTheme__textStrikethrough {
   @apply line-through;
 }
-.PlaygroundEditorTheme__textUnderlineStrikethrough {
+.CrystallizeRTEditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
-.PlaygroundEditorTheme__textSubscript {
+.CrystallizeRTEditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
 }
-.PlaygroundEditorTheme__textSuperscript {
+.CrystallizeRTEditorTheme__textSuperscript {
   font-size: 0.8em;
   vertical-align: super;
 }
-.PlaygroundEditorTheme__textCode {
+.CrystallizeRTEditorTheme__textCode {
   padding: 2px 0.5rem;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 13px;
@@ -88,31 +88,27 @@
   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 {
+.CrystallizeRTEditorTheme__link {
   text-decoration: none;
   box-shadow: #5d96fd 0 -2px inset;
   @apply !text-gray-600-300;
 }
-.PlaygroundEditorTheme__link:hover {
+.CrystallizeRTEditorTheme__link:hover {
   cursor: pointer;
 }
-.PlaygroundEditorTheme__code {
+.CrystallizeRTEditorTheme__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 {
+.CrystallizeRTEditorTheme__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 {
+.CrystallizeRTEditorTheme__table {
   /* border-collapse: collapse; */
   border-spacing: 0;
   max-width: 100%;
@@ -126,19 +122,19 @@
   @apply rounded-md border-gray-100-800;
 }
 
-.PlaygroundEditorTheme__tableSelected {
+.CrystallizeRTEditorTheme__tableSelected {
   @apply outline-2 outline-purple-200-700;
 }
-.PlaygroundEditorTheme__tableCell {
+.CrystallizeRTEditorTheme__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 {
+.CrystallizeRTEditorTheme__tableCell .CrystallizeRTEditorTheme__paragraph {
   @apply my-2 text-sm;
 }
-.PlaygroundEditorTheme__tableCellSortedIndicator {
+.CrystallizeRTEditorTheme__tableCellSortedIndicator {
   display: block;
   opacity: 0.5;
   position: absolute;
@@ -148,7 +144,7 @@
   height: 4px;
   background-color: #999;
 }
-.PlaygroundEditorTheme__tableCellResizer {
+.CrystallizeRTEditorTheme__tableCellResizer {
   position: absolute;
   right: -4px;
   height: 100%;
@@ -157,14 +153,14 @@
   z-index: 10;
   top: 0;
 }
-.PlaygroundEditorTheme__tableCellHeader {
+.CrystallizeRTEditorTheme__tableCellHeader {
   @apply bg-purple-50-900;
   text-align: start;
 }
-.PlaygroundEditorTheme__tableCellSelected {
+.CrystallizeRTEditorTheme__tableCellSelected {
   background-color: #c9dbf0;
 }
-.PlaygroundEditorTheme__tableCellPrimarySelected {
+.CrystallizeRTEditorTheme__tableCellPrimarySelected {
   @apply border-2 border-solid border-purple-200-700;
 
   display: block;
@@ -175,11 +171,11 @@
   top: -1px;
   z-index: 2;
 }
-.PlaygroundEditorTheme__tableCellEditing {
+.CrystallizeRTEditorTheme__tableCellEditing {
   @apply shadow-md;
   border-radius: 3px;
 }
-.PlaygroundEditorTheme__tableAddColumns {
+.CrystallizeRTEditorTheme__tableAddColumns {
   position: absolute;
   top: 0;
   width: 20px;
@@ -191,7 +187,7 @@
   border: 1px solid transparent;
   @apply bg-purple-50-900;
 }
-.PlaygroundEditorTheme__tableAddColumns:after {
+.CrystallizeRTEditorTheme__tableAddColumns:after {
   background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
@@ -205,10 +201,10 @@
   height: 100%;
   opacity: 1;
 }
-.PlaygroundEditorTheme__tableAddColumns:hover {
+.CrystallizeRTEditorTheme__tableAddColumns:hover {
   @apply rounded-sm border-purple-200-700;
 }
-.PlaygroundEditorTheme__tableAddRows {
+.CrystallizeRTEditorTheme__tableAddRows {
   position: absolute;
   bottom: -25px;
   width: calc(100% - 25px);
@@ -221,7 +217,7 @@
 
   @apply bg-purple-50-900;
 }
-.PlaygroundEditorTheme__tableAddRows:after {
+.CrystallizeRTEditorTheme__tableAddRows:after {
   background-image: url(../images/icons/plus.svg);
   background-size: contain;
   background-position: center;
@@ -235,7 +231,7 @@
   height: 100%;
   opacity: 1;
 }
-.PlaygroundEditorTheme__tableAddRows:hover {
+.CrystallizeRTEditorTheme__tableAddRows:hover {
   @apply rounded-sm border-purple-200-700;
 }
 @keyframes table-controls {
@@ -246,7 +242,7 @@
     opacity: 1;
   }
 }
-.PlaygroundEditorTheme__tableCellResizeRuler {
+.CrystallizeRTEditorTheme__tableCellResizeRuler {
   display: block;
   position: absolute;
   width: 1px;
@@ -254,7 +250,7 @@
   height: 100%;
   top: 0;
 }
-.PlaygroundEditorTheme__tableCellActionButtonContainer {
+.CrystallizeRTEditorTheme__tableCellActionButtonContainer {
   display: block;
   right: 5px;
   top: 6px;
@@ -263,7 +259,7 @@
   width: 20px;
   height: 20px;
 }
-.PlaygroundEditorTheme__tableCellActionButton {
+.CrystallizeRTEditorTheme__tableCellActionButton {
   background-color: #eee;
   display: block;
   border: 0;
@@ -273,52 +269,52 @@
   color: #222;
   cursor: pointer;
 }
-.PlaygroundEditorTheme__tableCellActionButton:hover {
+.CrystallizeRTEditorTheme__tableCellActionButton:hover {
   background-color: #ddd;
 }
-.PlaygroundEditorTheme__characterLimit {
+.CrystallizeRTEditorTheme__characterLimit {
   display: inline;
   background-color: #ffbbbb !important;
 }
-.PlaygroundEditorTheme__ol1 {
+.CrystallizeRTEditorTheme__ol1 {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__ol2 {
+.CrystallizeRTEditorTheme__ol2 {
   padding: 0;
   margin: 0;
   list-style-type: upper-alpha;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__ol3 {
+.CrystallizeRTEditorTheme__ol3 {
   padding: 0;
   margin: 0;
   list-style-type: lower-alpha;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__ol4 {
+.CrystallizeRTEditorTheme__ol4 {
   padding: 0;
   margin: 0;
   list-style-type: upper-roman;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__ol5 {
+.CrystallizeRTEditorTheme__ol5 {
   padding: 0;
   margin: 0;
   list-style-type: lower-roman;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__ul {
+.CrystallizeRTEditorTheme__ul {
   padding: 0;
   margin: 0;
   list-style-position: inside;
 }
-.PlaygroundEditorTheme__listItem {
+.CrystallizeRTEditorTheme__listItem {
   @apply my-0 mx-5 leading-6 text-gray-600-300;
 }
-.PlaygroundEditorTheme__listItemChecked,
-.PlaygroundEditorTheme__listItemUnchecked {
+.CrystallizeRTEditorTheme__listItemChecked,
+.CrystallizeRTEditorTheme__listItemUnchecked {
   position: relative;
   margin-left: 8px;
   margin-right: 8px;
@@ -327,11 +323,11 @@
   list-style-type: none;
   outline: none;
 }
-.PlaygroundEditorTheme__listItemChecked {
+.CrystallizeRTEditorTheme__listItemChecked {
   text-decoration: line-through;
 }
-.PlaygroundEditorTheme__listItemUnchecked:before,
-.PlaygroundEditorTheme__listItemChecked:before {
+.CrystallizeRTEditorTheme__listItemUnchecked:before,
+.CrystallizeRTEditorTheme__listItemChecked:before {
   content: '';
   width: 16px;
   height: 16px;
@@ -342,27 +338,27 @@
   background-size: cover;
   position: absolute;
 }
-.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
-.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+.CrystallizeRTEditorTheme__listItemUnchecked[dir='rtl']:before,
+.CrystallizeRTEditorTheme__listItemChecked[dir='rtl']:before {
   left: auto;
   right: 0;
 }
-.PlaygroundEditorTheme__listItemUnchecked:focus:before,
-.PlaygroundEditorTheme__listItemChecked:focus:before {
+.CrystallizeRTEditorTheme__listItemUnchecked:focus:before,
+.CrystallizeRTEditorTheme__listItemChecked:focus:before {
   box-shadow: 0 0 0 2px #a6cdfe;
   border-radius: 2px;
 }
-.PlaygroundEditorTheme__listItemUnchecked:before {
+.CrystallizeRTEditorTheme__listItemUnchecked:before {
   border: 1px solid #999;
   border-radius: 2px;
 }
-.PlaygroundEditorTheme__listItemChecked:before {
+.CrystallizeRTEditorTheme__listItemChecked:before {
   border: 1px solid rgb(61, 135, 245);
   border-radius: 2px;
   background-color: #3d87f5;
   background-repeat: no-repeat;
 }
-.PlaygroundEditorTheme__listItemChecked:after {
+.CrystallizeRTEditorTheme__listItemChecked:after {
   content: '';
   cursor: pointer;
   border-color: #fff;
@@ -377,57 +373,57 @@
   transform: rotate(45deg);
   border-width: 0 2px 2px 0;
 }
-.PlaygroundEditorTheme__nestedListItem {
+.CrystallizeRTEditorTheme__nestedListItem {
   list-style-type: none;
 }
-.PlaygroundEditorTheme__nestedListItem:before,
-.PlaygroundEditorTheme__nestedListItem:after {
+.CrystallizeRTEditorTheme__nestedListItem:before,
+.CrystallizeRTEditorTheme__nestedListItem:after {
   display: none;
 }
-.PlaygroundEditorTheme__tokenComment {
+.CrystallizeRTEditorTheme__tokenComment {
   color: slategray;
 }
-.PlaygroundEditorTheme__tokenPunctuation {
+.CrystallizeRTEditorTheme__tokenPunctuation {
   color: #999;
 }
-.PlaygroundEditorTheme__tokenProperty {
+.CrystallizeRTEditorTheme__tokenProperty {
   color: #905;
 }
-.PlaygroundEditorTheme__tokenSelector {
+.CrystallizeRTEditorTheme__tokenSelector {
   color: #690;
 }
-.PlaygroundEditorTheme__tokenOperator {
+.CrystallizeRTEditorTheme__tokenOperator {
   color: #9a6e3a;
 }
-.PlaygroundEditorTheme__tokenAttr {
+.CrystallizeRTEditorTheme__tokenAttr {
   color: #07a;
 }
-.PlaygroundEditorTheme__tokenVariable {
+.CrystallizeRTEditorTheme__tokenVariable {
   color: #e90;
 }
-.PlaygroundEditorTheme__tokenFunction {
+.CrystallizeRTEditorTheme__tokenFunction {
   color: #dd4a68;
 }
-.PlaygroundEditorTheme__mark {
+.CrystallizeRTEditorTheme__mark {
   background: rgba(255, 212, 0, 0.14);
   border-bottom: 2px solid rgba(255, 212, 0, 0.3);
   padding-bottom: 2px;
 }
-.PlaygroundEditorTheme__markOverlap {
+.CrystallizeRTEditorTheme__markOverlap {
   background: rgba(255, 212, 0, 0.3);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
-.PlaygroundEditorTheme__mark.selected {
+.CrystallizeRTEditorTheme__mark.selected {
   background: rgba(255, 212, 0, 0.5);
   border-bottom: 2px solid rgba(255, 212, 0, 1);
 }
-.PlaygroundEditorTheme__markOverlap.selected {
+.CrystallizeRTEditorTheme__markOverlap.selected {
   background: rgba(255, 212, 0, 0.7);
   border-bottom: 2px solid rgba(255, 212, 0, 0.7);
 }
-.PlaygroundEditorTheme__embedBlock {
+.CrystallizeRTEditorTheme__embedBlock {
   user-select: none;
 }
-.PlaygroundEditorTheme__embedBlockFocus {
+.CrystallizeRTEditorTheme__embedBlockFocus {
   outline: 2px solid rgb(60, 132, 244);
 }