@crystallize/design-system 1.4.1 → 1.4.3

package/dist/index.css

@@ -2104,16 +2104,16 @@ button {
 }
 
 /* src/rich-text-editor/rich-text-editor.css */
-.editor-shell {
+.c-rich-text-editor {
   margin: 0px auto;
   max-width: 1100px;
   position: relative;
   line-height: 1.7;
 }
-.editor-shell > * {
+.c-rich-text-editor > * {
   box-sizing: border-box;
 }
-.editor-shell {
+.c-rich-text-editor {
   font-family:
     Roboto,
     ui-sans-serif,
@@ -2134,7 +2134,7 @@ button {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
-.editor-shell .editor-container {
+.c-rich-text-editor .editor-container {
   background: #fff;
   position: relative;
   cursor: text;
@@ -2142,11 +2142,113 @@ button {
   border-bottom-left-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
-.editor-shell .editor-container.plain-text {
+.c-rich-text-editor .editor-container.plain-text {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
 }
-.editor-scroller {
+.c-rich-text-editor span.editor-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  user-select: none;
+}
+.c-rich-text-editor .editor-image img {
+  max-width: 100%;
+  cursor: default;
+}
+.c-rich-text-editor .editor-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
+.c-rich-text-editor .editor-image img.focused.draggable {
+  cursor: grab;
+}
+.c-rich-text-editor .editor-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+.c-rich-text-editor .editor-image .image-caption-container {
+  display: block;
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+  border-top: 1px solid #fff;
+  background-color: rgba(255, 255, 255, 0.9);
+  min-width: 100px;
+  color: #000;
+  overflow: hidden;
+}
+.c-rich-text-editor .editor-image .image-caption-button {
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  width: 30%;
+  padding: 10px;
+  margin: 0 auto;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  min-width: 100px;
+  color: #fff;
+  cursor: pointer;
+  user-select: none;
+}
+.c-rich-text-editor .editor-image .image-caption-button:hover {
+  background-color: rgba(60, 132, 244, 0.5);
+}
+.c-rich-text-editor .editor-image .image-resizer {
+  display: block;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-color: rgb(60, 132, 244);
+  border: 1px solid #fff;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-n {
+  top: -6px;
+  left: 48%;
+  cursor: n-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-ne {
+  top: -6px;
+  right: -6px;
+  cursor: ne-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-e {
+  bottom: 48%;
+  right: -6px;
+  cursor: e-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-se {
+  bottom: -2px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-s {
+  bottom: -2px;
+  left: 48%;
+  cursor: s-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-sw {
+  bottom: -2px;
+  left: -6px;
+  cursor: sw-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-w {
+  bottom: 48%;
+  left: -6px;
+  cursor: w-resize;
+}
+.c-rich-text-editor .editor-image .image-resizer.image-resizer-nw {
+  top: -6px;
+  left: -6px;
+  cursor: nw-resize;
+}
+.c-rich-text-editor .editor-scroller {
   min-height: 150px;
   border: 0;
   resize: none;
@@ -2156,15 +2258,15 @@ button {
   outline: 0;
   resize: vertical;
 }
-.editor {
+.c-rich-text-editor .editor {
   height: 100%;
   position: relative;
 }
-.test-recorder-output {
+.c-rich-text-editor .test-recorder-output {
   margin: 20px auto 20px auto;
   width: 100%;
 }
-pre {
+.c-rich-text-editor pre {
   line-height: 1.1;
   color: #fff;
   margin: 0;
@@ -2176,14 +2278,14 @@ pre {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-pre::-webkit-scrollbar {
+.c-rich-text-editor pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
 }
-pre::-webkit-scrollbar-thumb {
+.c-rich-text-editor pre::-webkit-scrollbar-thumb {
   background: #999;
 }
-.editor-dev-button {
+.c-rich-text-editor .editor-dev-button {
   position: relative;
   display: block;
   width: 40px;
@@ -2196,7 +2298,7 @@ pre::-webkit-scrollbar-thumb {
   box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
   background-color: #444;
 }
-.editor-dev-button::after {
+.c-rich-text-editor .editor-dev-button::after {
   content: "";
   position: absolute;
   top: 10px;
@@ -2207,16 +2309,16 @@ pre::-webkit-scrollbar-thumb {
   background-size: contain;
   filter: invert(1);
 }
-.editor-dev-button:hover {
+.c-rich-text-editor .editor-dev-button:hover {
   background-color: #555;
 }
-.editor-dev-button.active {
+.c-rich-text-editor .editor-dev-button.active {
   background-color: rgb(233, 35, 35);
 }
-.test-recorder-toolbar {
+.c-rich-text-editor .test-recorder-toolbar {
   display: flex;
 }
-.test-recorder-button {
+.c-rich-text-editor .test-recorder-button {
   position: relative;
   display: block;
   width: 32px;
@@ -2231,13 +2333,13 @@ pre::-webkit-scrollbar-thumb {
   background-color: #222;
   transition: box-shadow 50ms ease-out;
 }
-.test-recorder-button:active {
+.c-rich-text-editor .test-recorder-button:active {
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
 }
-.test-recorder-button + .test-recorder-button {
+.c-rich-text-editor .test-recorder-button + .test-recorder-button {
   margin-left: 4px;
 }
-.test-recorder-button::after {
+.c-rich-text-editor .test-recorder-button::after {
   content: "";
   position: absolute;
   top: 8px;
@@ -2248,49 +2350,49 @@ pre::-webkit-scrollbar-thumb {
   background-size: contain;
   filter: invert(1);
 }
-#options-button {
+.c-rich-text-editor #options-button {
   position: fixed;
   left: 20px;
   bottom: 20px;
 }
-#test-recorder-button {
+.c-rich-text-editor #test-recorder-button {
   position: fixed;
   left: 70px;
   bottom: 20px;
 }
-#paste-log-button {
+.c-rich-text-editor #paste-log-button {
   position: fixed;
   left: 120px;
   bottom: 20px;
 }
-#options-button::after {
+.c-rich-text-editor #options-button::after {
   background-image: url(./gear-ICMT4NTP.svg);
 }
-#test-recorder-button::after {
+.c-rich-text-editor #test-recorder-button::after {
   background-image: url(./journal-code-XUT44HDV.svg);
 }
-#paste-log-button::after {
+.c-rich-text-editor #paste-log-button::after {
   background-image: url(./clipboard-OSEFDF25.svg);
 }
-#test-recorder-button-snapshot {
+.c-rich-text-editor #test-recorder-button-snapshot {
   margin-right: auto;
 }
-#test-recorder-button-snapshot::after {
+.c-rich-text-editor #test-recorder-button-snapshot::after {
   background-image: url(./camera-CR7D2PNH.svg);
 }
-#test-recorder-button-copy::after {
+.c-rich-text-editor #test-recorder-button-copy::after {
   background-image: url(./clipboard-OSEFDF25.svg);
 }
-#test-recorder-button-download::after {
+.c-rich-text-editor #test-recorder-button-download::after {
   background-image: url(./download-JXUGIUCX.svg);
 }
-.typeahead-popover {
+.c-rich-text-editor .typeahead-popover {
   background: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   margin-top: 25px;
 }
-.typeahead-popover ul {
+.c-rich-text-editor .typeahead-popover ul {
   padding: 0;
   list-style: none;
   margin: 0;
@@ -2298,14 +2400,14 @@ pre::-webkit-scrollbar-thumb {
   max-height: 200px;
   overflow-y: scroll;
 }
-.typeahead-popover ul::-webkit-scrollbar {
+.c-rich-text-editor .typeahead-popover ul::-webkit-scrollbar {
   display: none;
 }
-.typeahead-popover ul {
+.c-rich-text-editor .typeahead-popover ul {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-.typeahead-popover ul li {
+.c-rich-text-editor .typeahead-popover ul li {
   margin: 0;
   min-width: 180px;
   font-size: 14px;
@@ -2313,10 +2415,10 @@ pre::-webkit-scrollbar-thumb {
   cursor: pointer;
   border-radius: 8px;
 }
-.typeahead-popover ul li.selected {
+.c-rich-text-editor .typeahead-popover ul li.selected {
   background: #eee;
 }
-.typeahead-popover li {
+.c-rich-text-editor .typeahead-popover li {
   margin: 0 8px 0 8px;
   padding: 8px;
   color: #050505;
@@ -2331,28 +2433,28 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 8px;
   border: 0;
 }
-.typeahead-popover li.active {
+.c-rich-text-editor .typeahead-popover li.active {
   display: flex;
   width: 20px;
   height: 20px;
   background-size: contain;
 }
-.typeahead-popover li:first-child {
+.c-rich-text-editor .typeahead-popover li:first-child {
   border-radius: 8px 8px 0px 0px;
 }
-.typeahead-popover li:last-child {
+.c-rich-text-editor .typeahead-popover li:last-child {
   border-radius: 0px 0px 8px 8px;
 }
-.typeahead-popover li:hover {
+.c-rich-text-editor .typeahead-popover li:hover {
   background-color: #eee;
 }
-.typeahead-popover li .text {
+.c-rich-text-editor .typeahead-popover li .text {
   display: flex;
   line-height: 20px;
   flex-grow: 1;
   min-width: 150px;
 }
-.typeahead-popover li .icon {
+.c-rich-text-editor .typeahead-popover li .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -2363,145 +2465,145 @@ pre::-webkit-scrollbar-thumb {
   background-repeat: no-repeat;
   background-position: center;
 }
-.component-picker-menu {
+.c-rich-text-editor .component-picker-menu {
   width: 200px;
 }
-.auto-embed-menu {
+.c-rich-text-editor .auto-embed-menu {
   width: 150px;
 }
-i.palette {
+.c-rich-text-editor i.palette {
   background-image: url(./palette-SWGFPRWZ.svg);
 }
-i.bucket {
+.c-rich-text-editor i.bucket {
   background-image: url(./paint-bucket-VCISMZTH.svg);
 }
-i.bold {
+.c-rich-text-editor i.bold {
   background-image: url(./type-bold-PY7COC3N.svg);
 }
-i.italic {
+.c-rich-text-editor i.italic {
   background-image: url(./type-italic-3DSFOSG2.svg);
 }
-i.clear {
+.c-rich-text-editor i.clear {
   background-image: url(./trash-UOM6D7TD.svg);
 }
-i.code {
+.c-rich-text-editor i.code {
   background-image: url(./code-SEVR6TIQ.svg);
 }
-i.underline {
+.c-rich-text-editor i.underline {
   background-image: url(./type-underline-CBFA5VLF.svg);
 }
-i.strikethrough {
+.c-rich-text-editor i.strikethrough {
   background-image: url(./type-strikethrough-E2KKQFSX.svg);
 }
-i.subscript {
+.c-rich-text-editor i.subscript {
   background-image: url(./type-subscript-BMPTRIBU.svg);
 }
-i.superscript {
+.c-rich-text-editor i.superscript {
   background-image: url(./type-superscript-EDF6EPAA.svg);
 }
-i.link {
+.c-rich-text-editor i.link {
   background-image: url(./link-W52N4JKZ.svg);
 }
-i.horizontal-rule {
+.c-rich-text-editor i.horizontal-rule {
   background-image: url(./horizontal-rule-N6RD2V7H.svg);
 }
-.icon.plus {
+.c-rich-text-editor .icon.plus {
   background-image: url(./plus-CQISIKEC.svg);
 }
-.icon.caret-right {
+.c-rich-text-editor .icon.caret-right {
   background-image: url(./caret-right-fill-FFBNEXVX.svg);
 }
-.icon.dropdown-more {
+.c-rich-text-editor .icon.dropdown-more {
   background-image: url(./dropdown-more-BHZ5COKX.svg);
 }
-.icon.font-color {
+.c-rich-text-editor .icon.font-color {
   background-image: url(./font-color-J4GA3ZJO.svg);
 }
-.icon.font-family {
+.c-rich-text-editor .icon.font-family {
   background-image: url(./font-family-ZU5N6TTE.svg);
 }
-.icon.bg-color {
+.c-rich-text-editor .icon.bg-color {
   background-image: url(./bg-color-HB2WDYGO.svg);
 }
-i.image {
+.c-rich-text-editor i.image {
   background-image: url(./file-image-TIQPFJX4.svg);
 }
-i.table {
+.c-rich-text-editor i.table {
   background-image: url(./table-BR6DI4ZQ.svg);
 }
-i.close {
+.c-rich-text-editor i.close {
   background-image: url(./close-FH57ZMJF.svg);
 }
-.icon.left-align,
-i.left-align {
+.c-rich-text-editor .icon.left-align,
+.c-rich-text-editor i.left-align {
   background-image: url(./text-left-KT2B6TR3.svg);
 }
-i.center-align {
+.c-rich-text-editor i.center-align {
   background-image: url(./text-center-UQI6PAEF.svg);
 }
-i.right-align {
+.c-rich-text-editor i.right-align {
   background-image: url(./text-right-SKELPISG.svg);
 }
-i.justify-align {
+.c-rich-text-editor i.justify-align {
   background-image: url(./justify-J7X5JEEX.svg);
 }
-i.indent {
+.c-rich-text-editor i.indent {
   background-image: url(./indent-MJ6JIMCK.svg);
 }
-i.markdown {
+.c-rich-text-editor i.markdown {
   background-image: url(./markdown-4BGQNLLT.svg);
 }
-i.outdent {
+.c-rich-text-editor i.outdent {
   background-image: url(./outdent-2LUMUMIP.svg);
 }
-i.undo {
+.c-rich-text-editor i.undo {
   background-image: url(./arrow-counterclockwise-2O5EYVJT.svg);
 }
-i.redo {
+.c-rich-text-editor i.redo {
   background-image: url(./arrow-clockwise-Z2G6UEGP.svg);
 }
-i.mic {
+.c-rich-text-editor i.mic {
   background-image: url(./mic-H5FNOMM7.svg);
 }
-i.import {
+.c-rich-text-editor i.import {
   background-image: url(./upload-Q6KICGZW.svg);
 }
-i.export {
+.c-rich-text-editor i.export {
   background-image: url(./download-JXUGIUCX.svg);
 }
-i.diagram-2 {
+.c-rich-text-editor i.diagram-2 {
   background-image: url(./diagram-2-CEJUD2B4.svg);
 }
-i.user {
+.c-rich-text-editor i.user {
   background-image: url(./user-EOI2NEFZ.svg);
 }
-i.equation {
+.c-rich-text-editor i.equation {
   background-image: url(./plus-slash-minus-N22JU4TI.svg);
 }
-i.gif {
+.c-rich-text-editor i.gif {
   background-image: url(./filetype-gif-OG2BEYYK.svg);
 }
-i.copy {
+.c-rich-text-editor i.copy {
   background-image: url(./copy-DMGDODUL.svg);
 }
-i.success {
+.c-rich-text-editor i.success {
   background-image: url(./success-YVXUMPEZ.svg);
 }
-i.prettier {
+.c-rich-text-editor i.prettier {
   background-image: url(./prettier-WUJ7B5NV.svg);
 }
-i.prettier-error {
+.c-rich-text-editor i.prettier-error {
   background-image: url(./prettier-error-DYJSLYDP.svg);
 }
-.link-editor {
+.c-rich-text-editor .link-editor {
   box-sizing: border-box;
 }
-.link-editor .button.active,
-.toolbar .button.active {
+.c-rich-text-editor .link-editor .button.active,
+.c-rich-text-editor .toolbar .button.active {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.link-editor {
+.c-rich-text-editor .link-editor {
   border-radius: 0.5rem !important;
   border-width: 1px;
   border-style: solid;
@@ -2514,7 +2616,7 @@ i.prettier-error {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow) !important;
 }
-.link-editor .link-input {
+.c-rich-text-editor .link-editor .link-input {
   width: 100%;
   box-sizing: border-box;
   margin: 8px 0;
@@ -2530,7 +2632,7 @@ i.prettier-error {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
 }
-.link-editor div.link-edit {
+.c-rich-text-editor .link-editor div.link-edit {
   background-image: url(./pencil-fill-STFSC26F.svg);
   background-size: 12px;
   background-position: center;
@@ -2543,10 +2645,10 @@ i.prettier-error {
   bottom: 0;
   cursor: pointer;
 }
-.link-editor .link-input {
+.c-rich-text-editor .link-editor .link-input {
   box-sizing: border-box;
 }
-.link-editor .link-input a {
+.c-rich-text-editor .link-editor .link-input a {
   color: rgb(33, 111, 219);
   text-decoration: none;
   display: block;
@@ -2556,21 +2658,21 @@ i.prettier-error {
   --tw-text-opacity: 1;
   color: rgb(var(--c-color-s-blue-600-300) / var(--tw-text-opacity));
 }
-.link-editor .link-input a:hover {
+.c-rich-text-editor .link-editor .link-input a:hover {
   text-decoration: underline;
 }
-.link-editor .font-size-wrapper,
-.link-editor .font-family-wrapper {
+.c-rich-text-editor .link-editor .font-size-wrapper,
+.c-rich-text-editor .link-editor .font-family-wrapper {
   display: flex;
   margin: 0 4px;
 }
-.link-editor select {
+.c-rich-text-editor .link-editor select {
   padding: 6px;
   border: none;
   background-color: rgba(0, 0, 0, 0.075);
   border-radius: 4px;
 }
-#block-controls {
+.c-rich-text-editor #block-controls {
   display: block;
   position: absolute;
   right: 10px;
@@ -2584,7 +2686,7 @@ i.prettier-error {
   border: 1px solid rgb(206, 208, 212);
   overflow: hidden;
 }
-#block-controls button {
+.c-rich-text-editor #block-controls button {
   border: 1px solid white;
   background-color: #fff;
   display: block;
@@ -2594,41 +2696,41 @@ i.prettier-error {
   border-radius: 8px;
   padding: 3px;
 }
-#block-controls button:hover {
+.c-rich-text-editor #block-controls button:hover {
   background-color: #efefef;
 }
-#block-controls button:focus-visible {
+.c-rich-text-editor #block-controls button:focus-visible {
   border-color: blue;
 }
-#block-controls span.block-type {
+.c-rich-text-editor #block-controls span.block-type {
   background-size: contain;
   display: block;
   width: 18px;
   height: 18px;
   margin: 2px;
 }
-#block-controls span.block-type.paragraph {
+.c-rich-text-editor #block-controls span.block-type.paragraph {
   background-image: url(./text-paragraph-MFTUIIQG.svg);
 }
-#block-controls span.block-type.h1 {
+.c-rich-text-editor #block-controls span.block-type.h1 {
   background-image: url(./type-h1-6KJP7YOM.svg);
 }
-#block-controls span.block-type.h2 {
+.c-rich-text-editor #block-controls span.block-type.h2 {
   background-image: url(./type-h2-VHI2USC3.svg);
 }
-#block-controls span.block-type.quote {
+.c-rich-text-editor #block-controls span.block-type.quote {
   background-image: url(./chat-square-quote-CI6PUJHH.svg);
 }
-#block-controls span.block-type.ul {
+.c-rich-text-editor #block-controls span.block-type.ul {
   background-image: url(./list-ul-DVKNUP47.svg);
 }
-#block-controls span.block-type.ol {
+.c-rich-text-editor #block-controls span.block-type.ol {
   background-image: url(./list-ol-2ZEUN4Z7.svg);
 }
-#block-controls span.block-type.code {
+.c-rich-text-editor #block-controls span.block-type.code {
   background-image: url(./code-SEVR6TIQ.svg);
 }
-.characters-limit {
+.c-rich-text-editor .characters-limit {
   color: #888;
   font-size: 12px;
   text-align: right;
@@ -2637,10 +2739,10 @@ i.prettier-error {
   left: 12px;
   bottom: 5px;
 }
-.characters-limit.characters-limit-exceeded {
+.c-rich-text-editor .characters-limit.characters-limit-exceeded {
   color: red;
 }
-.dropdown {
+.c-rich-text-editor .dropdown {
   z-index: 10;
   display: block;
   position: fixed;
@@ -2652,7 +2754,7 @@ i.prettier-error {
   min-height: 40px;
   background-color: #fff;
 }
-.dropdown .item {
+.c-rich-text-editor .dropdown .item {
   margin: 0 8px 0 8px;
   padding: 8px;
   color: #050505;
@@ -2670,32 +2772,32 @@ i.prettier-error {
   max-width: 250px;
   min-width: 100px;
 }
-.dropdown .item.fontsize-item,
-.dropdown .item.fontsize-item .text {
+.c-rich-text-editor .dropdown .item.fontsize-item,
+.c-rich-text-editor .dropdown .item.fontsize-item .text {
   min-width: unset;
 }
-.dropdown .item .active {
+.c-rich-text-editor .dropdown .item .active {
   display: flex;
   width: 20px;
   height: 20px;
   background-size: contain;
 }
-.dropdown .item:first-child {
+.c-rich-text-editor .dropdown .item:first-child {
   margin-top: 8px;
 }
-.dropdown .item:last-child {
+.c-rich-text-editor .dropdown .item:last-child {
   margin-bottom: 8px;
 }
-.dropdown .item:hover {
+.c-rich-text-editor .dropdown .item:hover {
   background-color: #eee;
 }
-.dropdown .item .text {
+.c-rich-text-editor .dropdown .item .text {
   display: flex;
   line-height: 20px;
   flex-grow: 1;
   min-width: 150px;
 }
-.dropdown .item .icon {
+.c-rich-text-editor .dropdown .item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -2706,63 +2808,63 @@ i.prettier-error {
   background-position: center;
   background-repeat: no-repeat;
 }
-.dropdown .divider {
+.c-rich-text-editor .dropdown .divider {
   width: auto;
   background-color: #eee;
   margin: 4px 8px;
   height: 1px;
 }
 @media screen and (max-width: 1100px) {
-  .dropdown-button-text {
+  .c-rich-text-editor .dropdown-button-text {
     display: none !important;
   }
-  .font-size .dropdown-button-text {
+  .c-rich-text-editor .font-size .dropdown-button-text {
     display: flex !important;
   }
-  .code-language .dropdown-button-text {
+  .c-rich-text-editor .code-language .dropdown-button-text {
     display: flex !important;
   }
 }
-.icon.paragraph {
+.c-rich-text-editor .icon.paragraph {
   background-image: url(./text-paragraph-MFTUIIQG.svg);
 }
-.icon.h1 {
+.c-rich-text-editor .icon.h1 {
   background-image: url(./type-h1-6KJP7YOM.svg);
 }
-.icon.h2 {
+.c-rich-text-editor .icon.h2 {
   background-image: url(./type-h2-VHI2USC3.svg);
 }
-.icon.h3 {
+.c-rich-text-editor .icon.h3 {
   background-image: url(./type-h3-JIU77CHO.svg);
 }
-.icon.h4 {
+.c-rich-text-editor .icon.h4 {
   background-image: url(./type-h4-P5EHKDAL.svg);
 }
-.icon.h5 {
+.c-rich-text-editor .icon.h5 {
   background-image: url(./type-h5-CS2KYVRG.svg);
 }
-.icon.h6 {
+.c-rich-text-editor .icon.h6 {
   background-image: url(./type-h6-J2O74LJZ.svg);
 }
-.icon.bullet-list,
-.icon.bullet {
+.c-rich-text-editor .icon.bullet-list,
+.c-rich-text-editor .icon.bullet {
   background-image: url(./list-ul-DVKNUP47.svg);
 }
-.icon.check-list,
-.icon.check {
+.c-rich-text-editor .icon.check-list,
+.c-rich-text-editor .icon.check {
   background-image: url(./square-check-UTG6FU6D.svg);
 }
-.icon.numbered-list,
-.icon.number {
+.c-rich-text-editor .icon.numbered-list,
+.c-rich-text-editor .icon.number {
   background-image: url(./list-ol-2ZEUN4Z7.svg);
 }
-.icon.quote {
+.c-rich-text-editor .icon.quote {
   background-image: url(./chat-square-quote-CI6PUJHH.svg);
 }
-.icon.code {
+.c-rich-text-editor .icon.code {
   background-image: url(./code-SEVR6TIQ.svg);
 }
-.switches {
+.c-rich-text-editor .switches {
   z-index: 6;
   position: fixed;
   left: 10px;
@@ -2779,7 +2881,7 @@ i.prettier-error {
     transform: translateX(0);
   }
 }
-.switch {
+.c-rich-text-editor .switch {
   display: block;
   color: #444;
   margin: 5px 0;
@@ -2787,13 +2889,13 @@ i.prettier-error {
   padding: 5px 10px;
   border-radius: 10px;
 }
-#rich-text-switch {
+.c-rich-text-editor #rich-text-switch {
   right: 0;
 }
-#character-count-switch {
+.c-rich-text-editor #character-count-switch {
   right: 130px;
 }
-.switch label {
+.c-rich-text-editor .switch label {
   margin-right: 5px;
   line-height: 24px;
   width: 100px;
@@ -2801,7 +2903,7 @@ i.prettier-error {
   display: inline-block;
   vertical-align: middle;
 }
-.switch button {
+.c-rich-text-editor .switch button {
   background-color: rgb(206, 208, 212);
   height: 24px;
   box-sizing: border-box;
@@ -2815,10 +2917,10 @@ i.prettier-error {
   transition: background-color 0.1s;
   border: 2px solid transparent;
 }
-.switch button:focus-visible {
+.c-rich-text-editor .switch button:focus-visible {
   border-color: blue;
 }
-.switch button span {
+.c-rich-text-editor .switch button span {
   top: 0px;
   left: 0px;
   display: block;
@@ -2829,155 +2931,53 @@ i.prettier-error {
   background-color: white;
   transition: transform 0.2s;
 }
-.switch button[aria-checked=true] {
+.c-rich-text-editor .switch button[aria-checked=true] {
   background-color: rgb(24, 119, 242);
 }
-.switch button[aria-checked=true] span {
+.c-rich-text-editor .switch button[aria-checked=true] span {
   transform: translateX(20px);
 }
-.editor-shell span.editor-image {
-  cursor: default;
-  display: inline-block;
-  position: relative;
-  user-select: none;
-}
-.editor-shell .editor-image img {
-  max-width: 100%;
-  cursor: default;
-}
-.editor-shell .editor-image img.focused {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-.editor-shell .editor-image img.focused.draggable {
-  cursor: grab;
-}
-.editor-shell .editor-image img.focused.draggable:active {
-  cursor: grabbing;
-}
-.editor-shell .editor-image .image-caption-container {
-  display: block;
-  position: absolute;
-  bottom: 4px;
-  left: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  border-top: 1px solid #fff;
-  background-color: rgba(255, 255, 255, 0.9);
-  min-width: 100px;
-  color: #000;
-  overflow: hidden;
-}
-.editor-shell .editor-image .image-caption-button {
-  display: block;
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  width: 30%;
-  padding: 10px;
-  margin: 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  min-width: 100px;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-.editor-shell .editor-image .image-caption-button:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-.editor-shell .editor-image .image-resizer {
-  display: block;
-  width: 7px;
-  height: 7px;
-  position: absolute;
-  background-color: rgb(60, 132, 244);
-  border: 1px solid #fff;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-n {
-  top: -6px;
-  left: 48%;
-  cursor: n-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-ne {
-  top: -6px;
-  right: -6px;
-  cursor: ne-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-e {
-  bottom: 48%;
-  right: -6px;
-  cursor: e-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-se {
-  bottom: -2px;
-  right: -6px;
-  cursor: nwse-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-s {
-  bottom: -2px;
-  left: 48%;
-  cursor: s-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-sw {
-  bottom: -2px;
-  left: -6px;
-  cursor: sw-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-w {
-  bottom: 48%;
-  left: -6px;
-  cursor: w-resize;
-}
-.editor-shell .editor-image .image-resizer.image-resizer-nw {
-  top: -6px;
-  left: -6px;
-  cursor: nw-resize;
-}
-.keyword {
+.c-rich-text-editor .keyword {
   color: rgb(241, 118, 94);
   font-weight: bold;
 }
-.actions i.indent {
+.c-rich-text-editor .actions i.indent {
   background-image: url(./indent-MJ6JIMCK.svg);
 }
-.actions i.outdent {
+.c-rich-text-editor .actions i.outdent {
   background-image: url(./outdent-2LUMUMIP.svg);
 }
-.actions i.lock {
+.c-rich-text-editor .actions i.lock {
   background-image: url(./lock-fill-JZSKOSHK.svg);
 }
-.actions i.image {
+.c-rich-text-editor .actions i.image {
   background-image: url(./file-image-TIQPFJX4.svg);
 }
-.actions i.table {
+.c-rich-text-editor .actions i.table {
   background-image: url(./table-BR6DI4ZQ.svg);
 }
-.actions i.unlock {
+.c-rich-text-editor .actions i.unlock {
   background-image: url(./lock-WCYOZOHW.svg);
 }
-.actions i.left-align {
+.c-rich-text-editor .actions i.left-align {
   background-image: url(./text-left-KT2B6TR3.svg);
 }
-.actions i.center-align {
+.c-rich-text-editor .actions i.center-align {
   background-image: url(./text-center-UQI6PAEF.svg);
 }
-.actions i.right-align {
+.c-rich-text-editor .actions i.right-align {
   background-image: url(./text-right-SKELPISG.svg);
 }
-.actions i.justify-align {
+.c-rich-text-editor .actions i.justify-align {
   background-image: url(./justify-J7X5JEEX.svg);
 }
-.actions i.disconnect {
+.c-rich-text-editor .actions i.disconnect {
   background-image: url(./plug-HGGGEVS3.svg);
 }
-.actions i.connect {
+.c-rich-text-editor .actions i.connect {
   background-image: url(./plug-fill-OTG3U4TN.svg);
 }
-table.disable-selection {
+.c-rich-text-editor table.disable-selection {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -2985,19 +2985,19 @@ table.disable-selection {
   -ms-user-select: none;
   user-select: none;
 }
-table.disable-selection span::selection {
+.c-rich-text-editor table.disable-selection span::selection {
   background-color: transparent;
 }
-table.disable-selection br::selection {
+.c-rich-text-editor table.disable-selection br::selection {
   background-color: transparent;
 }
-.table-cell-action-button-container {
+.c-rich-text-editor .table-cell-action-button-container {
   position: absolute;
   top: 0;
   left: 0;
   will-change: transform;
 }
-.table-cell-action-button {
+.c-rich-text-editor .table-cell-action-button {
   background-color: none;
   display: flex;
   justify-content: center;
@@ -3009,7 +3009,7 @@ table.disable-selection br::selection {
   display: inline-block;
   cursor: pointer;
 }
-i.chevron-down {
+.c-rich-text-editor i.chevron-down {
   background-color: transparent;
   background-size: contain;
   display: inline-block;
@@ -3017,7 +3017,7 @@ i.chevron-down {
   width: 8px;
   background-image: url(./chevron-down-3FRWSIKS.svg);
 }
-.action-button {
+.c-rich-text-editor .action-button {
   background-color: #eee;
   border: 0;
   padding: 8px 12px;
@@ -3028,14 +3028,14 @@ i.chevron-down {
   display: inline-block;
   cursor: pointer;
 }
-.action-button:hover {
+.c-rich-text-editor .action-button:hover {
   background-color: #ddd;
   color: #000;
 }
-.action-button-mic.active {
+.c-rich-text-editor .action-button-mic.active {
   animation: mic-pulsate-color 3s infinite;
 }
-button.action-button:disabled {
+.c-rich-text-editor button.action-button:disabled {
   opacity: 0.6;
   background: #eee;
   cursor: not-allowed;
@@ -3051,17 +3051,17 @@ button.action-button:disabled {
     background-color: #ffdcdc;
   }
 }
-.debug-timetravel-panel {
+.c-rich-text-editor .debug-timetravel-panel {
   overflow: hidden;
   padding: 0 0 10px 0;
   margin: auto;
   display: flex;
 }
-.debug-timetravel-panel-slider {
+.c-rich-text-editor .debug-timetravel-panel-slider {
   padding: 0;
   flex: 8;
 }
-.debug-timetravel-panel-button {
+.c-rich-text-editor .debug-timetravel-panel-button {
   padding: 0;
   border: 0;
   background: none;
@@ -3069,10 +3069,10 @@ button.action-button:disabled {
   color: #fff;
   font-size: 12px;
 }
-.debug-timetravel-panel-button:hover {
+.c-rich-text-editor .debug-timetravel-panel-button:hover {
   text-decoration: underline;
 }
-.debug-timetravel-button {
+.c-rich-text-editor .debug-timetravel-button {
   border: 0;
   padding: 0;
   font-size: 12px;
@@ -3082,10 +3082,10 @@ button.action-button:disabled {
   background: none;
   color: #fff;
 }
-.debug-timetravel-button:hover {
+.c-rich-text-editor .debug-timetravel-button:hover {
   text-decoration: underline;
 }
-.connecting {
+.c-rich-text-editor .connecting {
   font-size: 15px;
   color: #999;
   overflow: hidden;
@@ -3098,13 +3098,13 @@ button.action-button:disabled {
   display: inline-block;
   pointer-events: none;
 }
-.ltr {
+.c-rich-text-editor .ltr {
   text-align: left;
 }
-.rtl {
+.c-rich-text-editor .rtl {
   text-align: right;
 }
-.toolbar {
+.c-rich-text-editor .toolbar {
   display: flex;
   height: 3rem;
   width: 100%;
@@ -3118,7 +3118,7 @@ button.action-button:disabled {
   padding-left: 1rem;
   vertical-align: middle;
 }
-.toolbar button.toolbar-item {
+.c-rich-text-editor .toolbar button.toolbar-item {
   display: flex;
   flex-shrink: 0;
   cursor: pointer;
@@ -3130,13 +3130,13 @@ button.action-button:disabled {
   padding: 0.5rem;
   vertical-align: middle;
 }
-.toolbar button.toolbar-item:disabled {
+.c-rich-text-editor .toolbar button.toolbar-item:disabled {
   cursor: not-allowed;
 }
-.toolbar button.toolbar-item.spaced {
+.c-rich-text-editor .toolbar button.toolbar-item.spaced {
   margin-right: 0.125rem;
 }
-.toolbar button.toolbar-item i.format {
+.c-rich-text-editor .toolbar button.toolbar-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -3145,31 +3145,31 @@ button.action-button:disabled {
   display: flex;
   opacity: 0.6;
 }
-.toolbar button.toolbar-item:disabled .icon,
-.toolbar button.toolbar-item:disabled .text,
-.toolbar button.toolbar-item:disabled i.format,
-.toolbar button.toolbar-item:disabled .chevron-down {
+.c-rich-text-editor .toolbar button.toolbar-item:disabled .icon,
+.c-rich-text-editor .toolbar button.toolbar-item:disabled .text,
+.c-rich-text-editor .toolbar button.toolbar-item:disabled i.format,
+.c-rich-text-editor .toolbar button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
-.toolbar button.toolbar-item.active {
+.c-rich-text-editor .toolbar button.toolbar-item.active {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.toolbar button.toolbar-item.active i {
+.c-rich-text-editor .toolbar button.toolbar-item.active i {
   opacity: 1;
 }
-.toolbar .toolbar-item:hover:not([disabled]) {
+.c-rich-text-editor .toolbar .toolbar-item:hover:not([disabled]) {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
 }
-.toolbar .toolbar-item.font-family .text {
+.c-rich-text-editor .toolbar .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;
 }
-.toolbar .code-language {
+.c-rich-text-editor .toolbar .code-language {
   width: 150px;
 }
-.toolbar .toolbar-item .text {
+.c-rich-text-editor .toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
@@ -3181,7 +3181,7 @@ button.action-button:disabled {
   text-align: left;
   padding-right: 10px;
 }
-.toolbar .toolbar-item .icon {
+.c-rich-text-editor .toolbar .toolbar-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -3190,14 +3190,14 @@ button.action-button:disabled {
   line-height: 16px;
   background-size: contain;
 }
-.toolbar i.chevron-down {
+.c-rich-text-editor .toolbar i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
   display: flex;
   user-select: none;
 }
-.toolbar i.chevron-down.inside {
+.c-rich-text-editor .toolbar i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -3206,12 +3206,12 @@ button.action-button:disabled {
   margin-right: 10px;
   pointer-events: none;
 }
-.toolbar .divider {
+.c-rich-text-editor .toolbar .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
 }
-.github-corner:hover .octo-arm {
+.c-rich-text-editor .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out;
 }
 @keyframes octocat-wave {
@@ -3226,33 +3226,33 @@ button.action-button:disabled {
   }
 }
 @media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
+  .c-rich-text-editor .github-corner:hover .octo-arm {
     animation: none;
   }
-  .github-corner .octo-arm {
+  .c-rich-text-editor .github-corner .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }
 }
-.spacer {
+.c-rich-text-editor .spacer {
   letter-spacing: -2px;
 }
-button.item i {
+.c-rich-text-editor button.item i {
   opacity: 0.6;
 }
-button.item.dropdown-item-active {
+.c-rich-text-editor button.item.dropdown-item-active {
   background-color: rgba(223, 232, 250, 0.3);
 }
-button.item.dropdown-item-active i {
+.c-rich-text-editor button.item.dropdown-item-active i {
   opacity: 1;
 }
-hr {
+.c-rich-text-editor hr {
   padding: 4px 0;
   border: 1px solid red;
   border: none;
   margin: 1em 0;
   cursor: pointer;
 }
-hr:after {
+.c-rich-text-editor hr:after {
   content: "";
   display: block;
   height: 1px;
@@ -3261,11 +3261,11 @@ hr:after {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
-hr.selected {
+.c-rich-text-editor hr.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
-.TableNode__contentEditable {
+.c-rich-text-editor .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
   resize: none;
@@ -3282,15 +3282,15 @@ hr.selected {
   word-break: break-word;
   z-index: 3;
 }
-.TableNode__contentEditable .PlaygroundEditorTheme__paragraph {
+.c-rich-text-editor .TableNode__contentEditable .PlaygroundEditorTheme__paragraph {
   margin-top: 0px;
 }
-.PlaygroundEditorTheme__blockCursor {
+.c-rich-text-editor .PlaygroundEditorTheme__blockCursor {
   display: block;
   pointer-events: none;
   position: absolute;
 }
-.PlaygroundEditorTheme__blockCursor:after {
+.c-rich-text-editor .PlaygroundEditorTheme__blockCursor:after {
   content: "";
   display: block;
   position: absolute;