diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.css b/web/src/beta/lib/lexical/RichTextEditor/index.css
index 915ed7ab8c..9e4539a690 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.css
@@ -1,60 +1,33 @@
 @import 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap';
 
-header {
-  max-width: 580px;
-  margin: auto;
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-
-header a {
-  max-width: 220px;
-  margin: 20px 0 0 0;
-  display: block;
-}
-
-header img {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-header h1 {
-  text-align: left;
-  color: #333;
-  display: inline-block;
-  margin: 20px 0 0 0;
-}
-
-.editor-container {
+.lexical .editor-container {
   position: relative;
   display: block;
   width: 100%;
 }
 
-.editor {
+.lexical .editor {
   flex: auto;
   position: relative;
   resize: vertical;
   z-index: -1;
 }
 
-.editor-inner{
+.lexical .editor-inner{
   position: relative;
   cursor: auto;
 }
 
-.editor-input{
+.lexical .editor-input{
   outline: none;
   padding: 8px;
 }
 
-.editor-input-minheight{
+.lexical .editor-input-minheight{
   min-height: 200px;
 }
 
-.editor-placeholder{
+.lexical .editor-placeholder{
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -64,7 +37,7 @@ header h1 {
   pointer-events: none;
 }
 
-pre {
+.lexical pre {
   line-height: 1.1;
   background: #222;
   color: #fff;
@@ -75,16 +48,16 @@ pre {
   max-height: 400px;
 }
 
-pre::-webkit-scrollbar {
+.lexical pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
 }
 
-pre::-webkit-scrollbar-thumb {
+.lexical pre::-webkit-scrollbar-thumb {
   background: #999;
 }
 
-.editor-dev-button {
+.lexical .editor-dev-button {
   position: relative;
   display: block;
   width: 40px;
@@ -98,7 +71,7 @@ pre::-webkit-scrollbar-thumb {
   background-color: #444;
 }
 
-.editor-dev-button::after {
+.lexical .editor-dev-button::after {
   content: '';
   position: absolute;
   top: 10px;
@@ -110,19 +83,19 @@ pre::-webkit-scrollbar-thumb {
   filter: invert(1);
 }
 
-.editor-dev-button:hover {
+.lexical .editor-dev-button:hover {
   background-color: #555;
 }
 
-.editor-dev-button.active {
+.lexical .editor-dev-button.active {
   background-color: rgb(233, 35, 35);
 }
 
-.test-recorder-toolbar {
+.lexical .test-recorder-toolbar {
   display: flex;
 }
 
-.test-recorder-button {
+.lexical .test-recorder-button {
   position: relative;
   display: block;
   width: 32px;
@@ -138,15 +111,15 @@ pre::-webkit-scrollbar-thumb {
   transition: box-shadow 50ms ease-out;
 }
 
-.test-recorder-button:active {
+.lexical .test-recorder-button:active {
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
 }
 
-.test-recorder-button + .test-recorder-button {
+.lexical .test-recorder-button + .test-recorder-button {
   margin-left: 4px;
 }
 
-.test-recorder-button::after {
+.lexical .test-recorder-button::after {
   content: '';
   position: absolute;
   top: 8px;
@@ -158,70 +131,70 @@ pre::-webkit-scrollbar-thumb {
   filter: invert(1);
 }
 
-#options-button {
+.lexical #options-button {
   position: fixed;
   left: 20px;
   bottom: 20px;
 }
 
-#test-recorder-button {
+.lexical #test-recorder-button {
   position: fixed;
   left: 70px;
   bottom: 20px;
 }
 
-#paste-log-button {
+.lexical #paste-log-button {
   position: fixed;
   left: 120px;
   bottom: 20px;
 }
 
-#docs-button {
+.lexical #docs-button {
   position: fixed;
   left: 170px;
   bottom: 20px;
 }
 
-#options-button::after {
+.lexical #options-button::after {
   background-image: url(images/icons/gear.svg);
 }
 
-#test-recorder-button::after {
+.lexical #test-recorder-button::after {
   background-image: url(images/icons/journal-code.svg);
 }
 
-#paste-log-button::after {
+.lexical #paste-log-button::after {
   background-image: url(images/icons/clipboard.svg);
 }
 
-#docs-button::after {
+.lexical #docs-button::after {
   background-image: url(images/icons/file-earmark-text.svg);
 }
 
-#test-recorder-button-snapshot {
+.lexical #test-recorder-button-snapshot {
   margin-right: auto;
 }
 
-#test-recorder-button-snapshot::after {
+.lexical #test-recorder-button-snapshot::after {
   background-image: url(images/icons/camera.svg);
 }
 
-#test-recorder-button-copy::after {
+.lexical #test-recorder-button-copy::after {
   background-image: url(images/icons/clipboard.svg);
 }
 
-#test-recorder-button-download::after {
+.lexical #test-recorder-button-download::after {
   background-image: url(images/icons/download.svg);
 }
 
-.typeahead-popover {
+.lexical .typeahead-popover {
   background: #fff;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 8px;
   margin-top: 25px;
 }
 
-.typeahead-popover ul {
+.lexical .typeahead-popover ul {
   padding: 0;
   list-style: none;
   margin: 0;
@@ -230,16 +203,16 @@ pre::-webkit-scrollbar-thumb {
   overflow-y: scroll;
 }
 
-.typeahead-popover ul::-webkit-scrollbar {
+.lexical .typeahead-popover ul::-webkit-scrollbar {
   display: none;
 }
 
-.typeahead-popover ul {
+.lexical .typeahead-popover ul {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
-.typeahead-popover ul li {
+.lexical .typeahead-popover ul li {
   margin: 0;
   min-width: 180px;
   font-size: 14px;
@@ -248,11 +221,11 @@ pre::-webkit-scrollbar-thumb {
   border-radius: 8px;
 }
 
-.typeahead-popover ul li.selected {
+.lexical .typeahead-popover ul li.selected {
   background: #eee;
 }
 
-.typeahead-popover li {
+.lexical .typeahead-popover li {
   margin: 0 8px 0 8px;
   padding: 8px;
   color: #050505;
@@ -268,33 +241,33 @@ pre::-webkit-scrollbar-thumb {
   border: 0;
 }
 
-.typeahead-popover li.active {
+.lexical .typeahead-popover li.active {
   display: flex;
   width: 20px;
   height: 20px;
   background-size: contain;
 }
 
-.typeahead-popover li:first-child {
+.lexical .typeahead-popover li:first-child {
   border-radius: 8px 8px 0px 0px;
 }
 
-.typeahead-popover li:last-child {
+.lexical .typeahead-popover li:last-child {
   border-radius: 0px 0px 8px 8px;
 }
 
-.typeahead-popover li:hover {
+.lexical .typeahead-popover li:hover {
   background-color: #eee;
 }
 
-.typeahead-popover li .text {
+.lexical .typeahead-popover li .text {
   display: flex;
   line-height: 20px;
   flex-grow: 1;
   min-width: 150px;
 }
 
-.typeahead-popover li .icon {
+.lexical .typeahead-popover li .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -306,95 +279,95 @@ pre::-webkit-scrollbar-thumb {
   background-position: center;
 }
 
-.component-picker-menu {
+.lexical .component-picker-menu {
   width: 200px;
 }
 
-.mentions-menu {
+.lexical .mentions-menu {
   width: 250px;
 }
 
-.auto-embed-menu {
+.lexical .auto-embed-menu {
   width: 150px;
 }
 
-.emoji-menu {
+.lexical .emoji-menu {
   width: 200px;
 }
 
-i.palette {
+.lexical i.palette {
   background-image: url(images/icons/palette.svg);
 }
 
-i.bucket {
+.lexical i.bucket {
   background-image: url(images/icons/paint-bucket.svg);
 }
 
-i.bold {
+.lexical i.bold {
   background-image: url(images/icons/type-bold.svg);
 }
 
-i.italic {
+.lexical i.italic {
   background-image: url(images/icons/type-italic.svg);
 }
 
-i.clear {
+.lexical i.clear {
   background-image: url(images/icons/trash.svg);
 }
 
-i.code {
+.lexical i.code {
   background-image: url(images/icons/code.svg);
 }
 
-i.underline {
+.lexical i.underline {
   background-image: url(images/icons/type-underline.svg);
 }
 
-i.strikethrough {
+.lexical i.strikethrough {
   background-image: url(images/icons/type-strikethrough.svg);
 }
 
-i.subscript {
+.lexical i.subscript {
   background-image: url(images/icons/type-subscript.svg);
 }
 
-i.superscript {
+.lexical i.superscript {
   background-image: url(images/icons/type-superscript.svg);
 }
 
-i.link {
+.lexical i.link {
   background-image: url(images/icons/link.svg);
 }
 
-i.horizontal-rule {
+.lexical i.horizontal-rule {
   background-image: url(images/icons/horizontal-rule.svg);
 }
 
-.icon.plus {
+.lexical .icon.plus {
   background-image: url(images/icons/plus.svg);
 }
 
-.icon.caret-right {
+.lexical .icon.caret-right {
   background-image: url(images/icons/caret-right-fill.svg);
 }
 
-.icon.dropdown-more {
+.lexical .icon.dropdown-more {
   background-image: url(images/icons/dropdown-more.svg);
 }
 
-.icon.font-color {
+.lexical .icon.font-color {
   background-image: url(images/icons/font-color.svg);
 }
 
-.icon.font-family {
+.lexical .icon.font-family {
   background-image: url(images/icons/font-family.svg);
 }
 
-.icon.bg-color {
+.lexical .icon.bg-color {
   background-image: url(images/icons/bg-color.svg);
 }
 
-.icon.table {
+.lexical .icon.table {
   background-color: #6c757d;
   mask-image: url(images/icons/table.svg);
   -webkit-mask-image: url(images/icons/table.svg);
@@ -404,137 +377,137 @@ i.horizontal-rule {
   -webkit-mask-size: contain;
 }
 
-i.image {
+.lexical i.image {
   background-image: url(images/icons/file-image.svg);
 }
 
-i.table {
+.lexical i.table {
   background-image: url(images/icons/table.svg);
 }
 
-i.close {
+.lexical i.close {
   background-image: url(images/icons/close.svg);
 }
 
-i.figma {
+.lexical i.figma {
   background-image: url(images/icons/figma.svg);
 }
 
-i.poll {
+.lexical i.poll {
   background-image: url(images/icons/card-checklist.svg);
 }
 
-i.columns {
+.lexical i.columns {
   background-image: url(images/icons/3-columns.svg);
 }
 
-i.tweet {
+.lexical i.tweet {
   background-image: url(images/icons/tweet.svg);
 }
 
-i.youtube {
+.lexical i.youtube {
   background-image: url(images/icons/youtube.svg);
 }
 
-.icon.left-align,
-i.left-align {
+.lexical .icon.left-align,
+.lexical i.left-align {
   background-image: url(images/icons/text-left.svg);
 }
 
-.icon.center-align,
-i.center-align {
+.lexical .icon.center-align,
+.lexical i.center-align {
   background-image: url(images/icons/text-center.svg);
 }
 
-.icon.right-align,
-i.right-align {
+.lexical .icon.right-align,
+.lexical i.right-align {
   background-image: url(images/icons/text-right.svg);
 }
 
-.icon.justify-align,
-i.justify-align {
+.lexical .icon.justify-align,
+.lexical i.justify-align {
   background-image: url(images/icons/justify.svg);
 }
 
-i.indent {
+.lexical i.indent {
   background-image: url(images/icons/indent.svg);
 }
 
-i.markdown {
+.lexical i.markdown {
   background-image: url(images/icons/markdown.svg);
 }
 
-i.outdent {
+.lexical i.outdent {
   background-image: url(images/icons/outdent.svg);
 }
 
-i.undo {
+.lexical i.undo {
   background-image: url(images/icons/arrow-counterclockwise.svg);
 }
 
-i.redo {
+.lexical i.redo {
   background-image: url(images/icons/arrow-clockwise.svg);
 }
 
-i.sticky {
+.lexical i.sticky {
   background-image: url(images/icons/sticky.svg);
 }
 
-i.mic {
+.lexical i.mic {
   background-image: url(images/icons/mic.svg);
 }
 
-i.import {
+.lexical i.import {
   background-image: url(images/icons/upload.svg);
 }
 
-i.export {
+.lexical i.export {
   background-image: url(images/icons/download.svg);
 }
 
-i.diagram-2 {
+.lexical i.diagram-2 {
   background-image: url(images/icons/diagram-2.svg);
 }
 
-i.user {
+.lexical i.user {
   background-image: url(images/icons/user.svg);
 }
 
-i.equation {
+.lexical i.equation {
   background-image: url(images/icons/plus-slash-minus.svg);
 }
 
-i.gif {
+.lexical i.gif {
   background-image: url(images/icons/filetype-gif.svg);
 }
 
-i.copy {
+.lexical i.copy {
   background-image: url(images/icons/copy.svg);
 }
 
-i.success {
+.lexical i.success {
   background-image: url(images/icons/success.svg);
 }
 
-i.prettier {
+.lexical i.prettier {
   background-image: url(images/icons/prettier.svg);
 }
 
-i.prettier-error {
+.lexical i.prettier-error {
   background-image: url(images/icons/prettier-error.svg);
 }
 
-i.page-break,
-.icon.page-break {
+.lexical i.page-break,
+.lexical .icon.page-break {
   background-image: url(images/icons/scissors.svg);
 }
 
-.link-editor .button.active,
-.toolbar .button.active {
+.lexical .link-editor .button.active,
+.lexical .toolbar .button.active {
   background-color: rgb(223, 232, 250);
 }
 
-.link-editor .link-input {
+.lexical .link-editor .link-input {
   display: block;
   width: calc(100% - 75px);
   box-sizing: border-box;
@@ -550,7 +523,7 @@ i.page-break,
   font-family: inherit;
 }
 
-.link-editor .link-view {
+.lexical .link-editor .link-view {
   display: block;
   width: calc(100% - 24px);
   margin: 8px 12px;
@@ -564,13 +537,13 @@ i.page-break,
   font-family: inherit;
 }
 
-.link-editor .link-view a {
+.lexical .link-editor .link-view a {
   display: block;
   word-break: break-word;
   width: calc(100% - 33px);
 }
 
-.link-editor div.link-edit {
+.lexical .link-editor div.link-edit {
   background-image: url(images/icons/pencil-fill.svg);
   background-size: 16px;
   background-position: center;
@@ -584,7 +557,7 @@ i.page-break,
   cursor: pointer;
 }
 
-.link-editor div.link-trash {
+.lexical .link-editor div.link-trash {
   background-image: url(images/icons/trash.svg);
   background-size: 16px;
   background-position: center;
@@ -598,7 +571,7 @@ i.page-break,
   cursor: pointer;
 }
 
-.link-editor div.link-cancel {
+.lexical .link-editor div.link-cancel {
   background-image: url(images/icons/close.svg);
   background-size: 16px;
   background-position: center;
@@ -613,7 +586,7 @@ i.page-break,
   cursor: pointer;
 }
 
-.link-editor div.link-confirm {
+.lexical .link-editor div.link-confirm {
   background-image: url(images/icons/success-alt.svg);
   background-size: 16px;
   background-position: center;
@@ -628,7 +601,7 @@ i.page-break,
   cursor: pointer;
 }
 
-.link-editor .link-input a {
+.lexical .link-editor .link-input a {
   color: rgb(33, 111, 219);
   text-decoration: underline;
   white-space: nowrap;
@@ -637,29 +610,29 @@ i.page-break,
   text-overflow: ellipsis;
 }
 
-.link-editor .link-input a:hover {
+.lexical .link-editor .link-input a:hover {
   text-decoration: underline;
 }
 
-.link-editor .font-size-wrapper,
-.link-editor .font-family-wrapper {
+.lexical .link-editor .font-size-wrapper,
+.lexical .link-editor .font-family-wrapper {
   display: flex;
   margin: 0 4px;
 }
 
-.link-editor select {
+.lexical .link-editor select {
   padding: 6px;
   border: none;
   background-color: rgba(0, 0, 0, 0.075);
   border-radius: 4px;
 }
 
-.mention:focus {
+.lexical .mention:focus {
   box-shadow: rgb(180 213 255) 0px 0px 0px 2px;
   outline: none;
 }
 
-.characters-limit {
+.lexical .characters-limit {
   color: #888;
   font-size: 12px;
   text-align: right;
@@ -669,15 +642,15 @@ i.page-break,
   bottom: 5px;
 }
 
-.characters-limit.characters-limit-exceeded {
+.lexical .characters-limit.characters-limit-exceeded {
   color: red;
 }
 
-.dropdown-wrapper{
+.lexical .dropdown-wrapper{
   position: relative;
 }
 
-.dropdown {
+.lexical .dropdown {
   z-index: 100;
   display: block;
   position: fixed;
@@ -688,7 +661,7 @@ i.page-break,
   background-color: #fff;
 }
 
-.dropdown .item {
+.lexical .dropdown .item {
   margin: 0 8px 0 8px;
   padding: 8px;
   color: #050505;
@@ -707,38 +680,38 @@ i.page-break,
   min-width: 100px;
 }
 
-.dropdown .item.fontsize-item,
-.dropdown .item.fontsize-item .text {
+.lexical .dropdown .item.fontsize-item,
+.lexical .dropdown .item.fontsize-item .text {
   min-width: unset;
 }
 
-.dropdown .item .active {
+.lexical .dropdown .item .active {
   display: flex;
   width: 20px;
   height: 20px;
   background-size: contain;
 }
 
-.dropdown .item:first-child {
+.lexical .dropdown .item:first-child {
   margin-top: 8px;
 }
 
-.dropdown .item:last-child {
+.lexical .dropdown .item:last-child {
   margin-bottom: 8px;
 }
 
-.dropdown .item:hover {
+.lexical .dropdown .item:hover {
   background-color: #eee;
 }
 
-.dropdown .item .text {
+.lexical .dropdown .item .text {
   display: flex;
   line-height: 20px;
   flex-grow: 1;
   min-width: 150px;
 }
 
-.dropdown .item .icon {
+.lexical .dropdown .item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -750,7 +723,7 @@ i.page-break,
   background-repeat: no-repeat;
 }
 
-.dropdown .divider {
+.lexical .dropdown .divider {
   width: auto;
   background-color: #eee;
   margin: 4px 8px;
@@ -758,71 +731,71 @@ i.page-break,
 }
 
 @media screen and (max-width: 1100px) {
-  .dropdown-button-text {
+  .lexical .dropdown-button-text {
     display: none !important;
   }
 
-  .font-size .dropdown-button-text {
+  .lexical .font-size .dropdown-button-text {
     display: flex !important;
   }
 
-  .code-language .dropdown-button-text {
+  .lexical .code-language .dropdown-button-text {
     display: flex !important;
   }
 }
 
-.icon.paragraph {
+.lexical .icon.paragraph {
   background-image: url(images/icons/text-paragraph.svg);
 }
 
-.icon.h1 {
+.lexical .icon.h1 {
   background-image: url(images/icons/type-h1.svg);
 }
 
-.icon.h2 {
+.lexical .icon.h2 {
   background-image: url(images/icons/type-h2.svg);
 }
 
-.icon.h3 {
+.lexical .icon.h3 {
   background-image: url(images/icons/type-h3.svg);
 }
 
-.icon.h4 {
+.lexical .icon.h4 {
   background-image: url(images/icons/type-h4.svg);
 }
 
-.icon.h5 {
+.lexical .icon.h5 {
   background-image: url(images/icons/type-h5.svg);
 }
 
-.icon.h6 {
+.lexical .icon.h6 {
   background-image: url(images/icons/type-h6.svg);
 }
 
-.icon.bullet-list,
-.icon.bullet {
+.lexical .icon.bullet-list,
+.lexical .icon.bullet {
   background-image: url(images/icons/list-ul.svg);
 }
 
-.icon.check-list,
-.icon.check {
+.lexical .icon.check-list,
+.lexical .icon.check {
   background-image: url(images/icons/square-check.svg);
 }
 
-.icon.numbered-list,
-.icon.number {
+.lexical .icon.numbered-list,
+.lexical .icon.number {
   background-image: url(images/icons/list-ol.svg);
 }
 
-.icon.quote {
+.lexical .icon.quote {
   background-image: url(images/icons/chat-square-quote.svg);
 }
 
-.icon.code {
+.lexical .icon.code {
   background-image: url(images/icons/code.svg);
 }
 
-.switches {
+.lexical .switches {
   z-index: 6;
   position: fixed;
   left: 10px;
@@ -842,7 +815,7 @@ i.page-break,
   }
 }
 
-.switch {
+.lexical .switch {
   display: block;
   color: #444;
   margin: 5px 0;
@@ -851,15 +824,15 @@ i.page-break,
   border-radius: 10px;
 }
 
-#rich-text-switch {
+.lexical #rich-text-switch {
   right: 0;
 }
 
-#character-count-switch {
+.lexical #character-count-switch {
   right: 130px;
 }
 
-.switch label {
+.lexical .switch label {
   margin-right: 5px;
   line-height: 24px;
   width: 100px;
@@ -868,7 +841,7 @@ i.page-break,
   vertical-align: middle;
 }
 
-.switch button {
+.lexical .switch button {
   background-color: rgb(206, 208, 212);
   height: 24px;
   box-sizing: border-box;
@@ -883,11 +856,11 @@ i.page-break,
   border: 2px solid transparent;
 }
 
-.switch button:focus-visible {
+.lexical .switch button:focus-visible {
   border-color: blue;
 }
 
-.switch button span {
+.lexical .switch button span {
   top: 0px;
   left: 0px;
   display: block;
@@ -899,15 +872,15 @@ i.page-break,
   transition: transform 0.2s;
 }
 
-.switch button[aria-checked='true'] {
+.lexical .switch button[aria-checked='true'] {
   background-color: rgb(24, 119, 242);
 }
 
-.switch button[aria-checked='true'] span {
+.lexical .switch button[aria-checked='true'] span {
   transform: translateX(20px);
 }
 
-.emoji {
+.lexical .emoji {
   color: transparent;
   caret-color: rgb(5, 5, 5);
   background-size: 16px 16px;
@@ -917,42 +890,42 @@ i.page-break,
   margin: 0 -1px;
 }
 
-.emoji-inner {
+.lexical .emoji-inner {
   padding: 0 0.15em;
 }
 
-.emoji-inner::selection {
+.lexical .emoji-inner::selection {
   color: transparent;
   background-color: rgba(150, 150, 150, 0.4);
 }
 
-.emoji-inner::moz-selection {
+.lexical .emoji-inner::moz-selection {
   color: transparent;
   background-color: rgba(150, 150, 150, 0.4);
 }
 
-.emoji.happysmile {
+.lexical .emoji.happysmile {
   background-image: url(images/emoji/1F642.png);
 }
 
-.emoji.veryhappysmile {
+.lexical .emoji.veryhappysmile {
   background-image: url(images/emoji/1F600.png);
 }
 
-.emoji.unhappysmile {
+.lexical .emoji.unhappysmile {
   background-image: url(images/emoji/1F641.png);
 }
 
-.emoji.heart {
+.lexical .emoji.heart {
   background-image: url(images/emoji/2764.png);
 }
 
-.keyword {
+.lexical .keyword {
   color: rgb(241, 118, 94);
   font-weight: bold;
 }
 
-.actions {
+.lexical .actions {
   position: absolute;
   text-align: right;
   margin: 10px;
@@ -960,12 +933,12 @@ i.page-break,
   right: 0;
 }
 
-.actions.tree-view {
+.lexical .actions.tree-view {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.actions i {
+.lexical .actions i {
   background-size: contain;
   display: inline-block;
   height: 15px;
@@ -973,62 +946,62 @@ i.page-break,
   vertical-align: -0.25em;
 }
 
-.actions i.indent {
+.lexical .actions i.indent {
   background-image: url(images/icons/indent.svg);
 }
 
-.actions i.outdent {
+.lexical .actions i.outdent {
   background-image: url(images/icons/outdent.svg);
 }
 
-.actions i.lock {
+.lexical .actions i.lock {
   background-image: url(images/icons/lock-fill.svg);
 }
 
-.actions i.image {
+.lexical .actions i.image {
   background-image: url(images/icons/file-image.svg);
 }
 
-.actions i.table {
+.lexical .actions i.table {
   background-image: url(images/icons/table.svg);
 }
 
-.actions i.unlock {
+.lexical .actions i.unlock {
   background-image: url(images/icons/lock.svg);
 }
 
-.actions i.left-align {
+.lexical .actions i.left-align {
   background-image: url(images/icons/text-left.svg);
 }
 
-.actions i.center-align {
+.lexical .actions i.center-align {
   background-image: url(images/icons/text-center.svg);
 }
 
-.actions i.right-align {
+.lexical .actions i.right-align {
   background-image: url(images/icons/text-right.svg);
 }
 
-.actions i.justify-align {
+.lexical .actions i.justify-align {
   background-image: url(images/icons/justify.svg);
 }
 
-.actions i.disconnect {
+.lexical .actions i.disconnect {
   background-image: url(images/icons/plug.svg);
 }
 
-.actions i.connect {
+.lexical .actions i.connect {
   background-image: url(images/icons/plug-fill.svg);
 }
 
-.table-cell-action-button-container {
+.lexical .table-cell-action-button-container {
   position: absolute;
   top: 0;
   left: 0;
   will-change: transform;
 }
 
-.table-cell-action-button {
+.lexical .table-cell-action-button {
   background-color: none;
   display: flex;
   justify-content: center;
@@ -1041,7 +1014,7 @@ i.page-break,
   cursor: pointer;
 }
 
-i.chevron-down {
+.lexical i.chevron-down {
   background-color: transparent;
   background-size: contain;
   display: inline-block;
@@ -1050,7 +1023,7 @@ i.chevron-down {
   background-image: url(images/icons/chevron-down.svg);
 }
 
-.action-button {
+.lexical .action-button {
   background-color: #eee;
   border: 0;
   padding: 8px 12px;
@@ -1062,16 +1035,16 @@ i.chevron-down {
   cursor: pointer;
 }
 
-.action-button:hover {
+.lexical .action-button:hover {
   background-color: #ddd;
   color: #000;
 }
 
-.action-button-mic.active {
+.lexical .action-button-mic.active {
   animation: mic-pulsate-color 3s infinite;
 }
 
-button.action-button:disabled {
+.lexical button.action-button:disabled {
   opacity: 0.6;
   background: #eee;
   cursor: not-allowed;
@@ -1091,19 +1064,19 @@ button.action-button:disabled {
   }
 }
 
-.debug-timetravel-panel {
+.lexical .debug-timetravel-panel {
   overflow: hidden;
   padding: 0 0 10px 0;
   margin: auto;
   display: flex;
 }
 
-.debug-timetravel-panel-slider {
+.lexical .debug-timetravel-panel-slider {
   padding: 0;
   flex: 8;
 }
 
-.debug-timetravel-panel-button {
+.lexical .debug-timetravel-panel-button {
   padding: 0;
   border: 0;
   background: none;
@@ -1112,11 +1085,11 @@ button.action-button:disabled {
   font-size: 12px;
 }
 
-.debug-timetravel-panel-button:hover {
+.lexical .debug-timetravel-panel-button:hover {
   text-decoration: underline;
 }
 
-.debug-timetravel-button {
+.lexical .debug-timetravel-button {
   border: 0;
   padding: 0;
   font-size: 12px;
@@ -1127,11 +1100,11 @@ button.action-button:disabled {
   color: #fff;
 }
 
-.debug-timetravel-button:hover {
+.lexical .debug-timetravel-button:hover {
   text-decoration: underline;
 }
 
-.debug-treetype-button {
+.lexical .debug-treetype-button {
   border: 0;
   padding: 0;
   font-size: 12px;
@@ -1142,11 +1115,11 @@ button.action-button:disabled {
   color: #fff;
 }
 
-.debug-treetype-button:hover {
+.lexical .debug-treetype-button:hover {
   text-decoration: underline;
 }
 
-.connecting {
+.lexical .connecting {
   font-size: 15px;
   color: #999;
   overflow: hidden;
@@ -1160,15 +1133,15 @@ button.action-button:disabled {
   pointer-events: none;
 }
 
-.ltr {
+.lexical .ltr {
   text-align: left;
 }
 
-.rtl {
+.lexical .rtl {
   text-align: right;
 }
 
-.toolbar {
+.lexical .toolbar {
   box-sizing: border-box;
   width: 100%;
   background: #fff;
@@ -1176,12 +1149,12 @@ button.action-button:disabled {
   overflow: hidden;
 }
 
-.toolbar-line{
+.lexical .toolbar-line{
   display: flex;
   vertical-align: middle;
 }
 
-button.toolbar-item {
+.lexical button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
@@ -1194,15 +1167,15 @@ button.toolbar-item {
   justify-content: space-between;
 }
 
-button.toolbar-item:disabled {
+.lexical button.toolbar-item:disabled {
   cursor: not-allowed;
 }
 
-button.toolbar-item.spaced {
+.lexical button.toolbar-item.spaced {
   margin-right: 2px;
 }
 
-button.toolbar-item i.format {
+.lexical button.toolbar-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -1212,35 +1185,35 @@ button.toolbar-item i.format {
   opacity: 0.6;
 }
 
-button.toolbar-item:disabled .icon,
-button.toolbar-item:disabled .text,
-button.toolbar-item:disabled i.format,
-button.toolbar-item:disabled .chevron-down {
+.lexical button.toolbar-item:disabled .icon,
+.lexical button.toolbar-item:disabled .text,
+.lexical button.toolbar-item:disabled i.format,
+.lexical button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
-button.toolbar-item.active {
+.lexical button.toolbar-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-button.toolbar-item.active i {
+.lexical button.toolbar-item.active i {
   opacity: 1;
 }
 
-.toolbar-item:hover:not([disabled]) {
+.lexical .toolbar-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.toolbar-item.font-family .text {
+.lexical .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;
 }
 
-.toolbar .code-language {
+.lexical .toolbar .code-language {
   width: 150px;
 }
 
-.toolbar .toolbar-item .text {
+.lexical .toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
@@ -1253,7 +1226,7 @@ button.toolbar-item.active i {
   padding-right: 10px;
 }
 
-.toolbar .toolbar-item .icon {
+.lexical .toolbar .toolbar-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -1263,8 +1236,8 @@ button.toolbar-item.active i {
   background-size: contain;
 }
 
-.toolbar i.chevron-down,
-.toolbar-item i.chevron-down {
+.lexical .toolbar i.chevron-down,
+.lexical .toolbar-item i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -1272,7 +1245,7 @@ button.toolbar-item.active i {
   user-select: none;
 }
 
-.toolbar i.chevron-down.inside {
+.lexical .toolbar i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -1282,20 +1255,20 @@ button.toolbar-item.active i {
   pointer-events: none;
 }
 
-.toolbar .divider {
+.lexical .toolbar .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
 }
 
-.sticky-note-container {
+.lexical .sticky-note-container {
   position: absolute;
   z-index: 9;
   width: 120px;
   display: inline-block;
 }
 
-.sticky-note {
+.lexical .sticky-note {
   line-height: 1;
   text-align: left;
   width: 120px;
@@ -1309,7 +1282,7 @@ button.toolbar-item.active i {
   cursor: move;
 }
 
-.sticky-note:after {
+.lexical .sticky-note:after {
   content: '';
   position: absolute;
   z-index: -1;
@@ -1322,7 +1295,7 @@ button.toolbar-item.active i {
   transform: matrix(-1, -0.1, 0, 1, 0, 0);
 }
 
-.sticky-note.yellow {
+.lexical .sticky-note.yellow {
   border-top: 1px solid #fdfd86;
   background: linear-gradient(
     135deg,
@@ -1333,7 +1306,7 @@ button.toolbar-item.active i {
   );
 }
 
-.sticky-note.pink {
+.lexical .sticky-note.pink {
   border-top: 1px solid #e7d1e4;
   background: linear-gradient(
     135deg,
@@ -1344,15 +1317,15 @@ button.toolbar-item.active i {
   );
 }
 
-.sticky-note-container.dragging {
+.lexical .sticky-note-container.dragging {
   transition: none !important;
 }
 
-.sticky-note div {
+.lexical .sticky-note div {
   cursor: text;
 }
 
-.sticky-note .delete {
+.lexical .sticky-note .delete {
   border: 0;
   background: none;
   position: absolute;
@@ -1363,12 +1336,12 @@ button.toolbar-item.active i {
   opacity: 0.5;
 }
 
-.sticky-note .delete:hover {
+.lexical .sticky-note .delete:hover {
   font-weight: bold;
   opacity: 1;
 }
 
-.sticky-note .color {
+.lexical .sticky-note .color {
   border: 0;
   background: none;
   position: absolute;
@@ -1378,30 +1351,30 @@ button.toolbar-item.active i {
   opacity: 0.5;
 }
 
-.sticky-note .color:hover {
+.lexical .sticky-note .color:hover {
   opacity: 1;
 }
 
-.sticky-note .color i {
+.lexical .sticky-note .color i {
   display: block;
   width: 12px;
   height: 12px;
   background-size: contain;
 }
 
-.excalidraw-button {
+.lexical .excalidraw-button {
   border: 0;
   padding: 0;
   margin: 0;
   background-color: transparent;
 }
 
-.excalidraw-button.selected {
+.lexical .excalidraw-button.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
 
-.github-corner:hover .octo-arm {
+.lexical .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out;
 }
 
@@ -1423,39 +1396,39 @@ button.toolbar-item.active i {
 }
 
 @media (max-width: 500px) {
-  .github-corner:hover .octo-arm {
+  .lexical .github-corner:hover .octo-arm {
     animation: none;
   }
 
-  .github-corner .octo-arm {
+  .lexical .github-corner .octo-arm {
     animation: octocat-wave 560ms ease-in-out;
   }
 }
 
-.spacer {
+.lexical .spacer {
   letter-spacing: -2px;
 }
 
-button.item i {
+.lexical button.item i {
   opacity: 0.6;
 }
 
-button.item.dropdown-item-active {
+.lexical button.item.dropdown-item-active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-button.item.dropdown-item-active i {
+.lexical button.item.dropdown-item-active i {
   opacity: 1;
 }
 
-hr {
+.lexical hr {
   padding: 2px 2px;
   border: none;
   margin: 1em 0;
   cursor: pointer;
 }
 
-hr:after {
+.lexical hr:after {
   content: '';
   display: block;
   height: 2px;
@@ -1463,50 +1436,12 @@ hr:after {
   line-height: 2px;
 }
 
-hr.selected {
+.lexical hr.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
 
-.TableNode__contentEditable {
-  min-height: 20px;
-  border: 0px;
-  resize: none;
-  cursor: text;
-  display: block;
-  position: relative;
-  outline: 0px;
-  padding: 0;
-  user-select: text;
-  font-size: 15px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  z-index: 3;
-}
-
-.DefaultLexicalEditorTheme__blockCursor {
-  display: block;
-  pointer-events: none;
-  position: absolute;
-}
-
-.DefaultLexicalEditorTheme__blockCursor:after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: -2px;
-  width: 20px;
-  border-top: 1px solid black;
-  animation: CursorBlink 1.1s steps(2, start) infinite;
-}
-
-@keyframes CursorBlink {
-  to {
-    visibility: hidden;
-  }
-}
-
-.dialog-dropdown {
+.lexical .dialog-dropdown {
   background-color: #eee !important;
   margin-bottom: 10px;
   width: 100%;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
index a6c0724c92..317a7bd352 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/index.tsx
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
@@ -74,7 +74,7 @@ const RichTextEditor: React.FC<Props> = ({
 
   return (
     <LexicalComposer initialConfig={editorConfig}>
-      <div className="editor-container" ref={editorRef}>
+      <div className="lexical editor-container" ref={editorRef}>
         {editMode && (
           <ToolbarPlugin containerRef={editorRef} scrollableContainerId={scrollableContainerId} />
         )}
@@ -101,7 +101,12 @@ const RichTextEditor: React.FC<Props> = ({
           <ListMaxIndentLevelPlugin maxDepth={7} />
           <OnChangePlugin onChange={onStateChange} />
           <SwitchEditModePlugin editable={editMode} />
-          <FloatingLinkEditorPlugin scrollableContainerId={scrollableContainerId} />
+          {editorRef.current && (
+            <FloatingLinkEditorPlugin
+              scrollableContainerId={scrollableContainerId}
+              anchorElem={editorRef.current}
+            />
+          )}
         </div>
       </div>
     </LexicalComposer>
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
index 6884df7d3b..816d6724ea 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
@@ -428,3 +428,22 @@
   border: 1px dashed #ddd;
   padding: 8px 16px;
 }
+.DefaultLexicalEditorTheme__blockCursor {
+  display: block;
+  pointer-events: none;
+  position: absolute;
+}
+.DefaultLexicalEditorTheme__blockCursor:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: CursorBlink 1.1s steps(2, start) infinite;
+}
+@keyframes CursorBlink {
+  to {
+    visibility: hidden;
+  }
+}
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css
index 088681c8fc..dd086d1cfc 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css
@@ -1,8 +1,8 @@
-.color-picker-wrapper {
+.lexical .color-picker-wrapper {
   padding: 20px;
 }
 
-.color-picker-basic-color {
+.lexical .color-picker-basic-color {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -10,7 +10,7 @@
   padding: 0;
 }
 
-.color-picker-basic-color button {
+.lexical .color-picker-basic-color button {
   border: 1px solid #ccc;
   border-radius: 4px;
   height: 16px;
@@ -19,11 +19,11 @@
   list-style-type: none;
 }
 
-.color-picker-basic-color button.active {
-  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+.lexical .color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
-.color-picker-saturation {
+.lexical .color-picker-saturation {
   width: 100%;
   position: relative;
   margin-top: 15px;
@@ -32,7 +32,7 @@
     linear-gradient(to right, white, transparent);
   user-select: none;
 }
-.color-picker-saturation_cursor {
+.lexical .color-picker-saturation_cursor {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -42,7 +42,7 @@
   box-sizing: border-box;
   transform: translate(-10px, -10px);
 }
-.color-picker-hue {
+.lexical .color-picker-hue {
   width: 100%;
   position: relative;
   margin-top: 15px;
@@ -61,7 +61,7 @@
   border-radius: 12px;
 }
 
-.color-picker-hue_cursor {
+.lexical .color-picker-hue_cursor {
   position: absolute;
   width: 20px;
   height: 20px;
@@ -72,7 +72,7 @@
   transform: translate(-10px, -4px);
 }
 
-.color-picker-color {
+.lexical .color-picker-color {
   border: 1px solid #ccc;
   margin-top: 15px;
   width: 100%;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css b/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css
index 3000af7186..e8f5ba9c53 100644
--- a/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css
@@ -1,15 +1,15 @@
-.Input__wrapper {
+.lexical .Input__wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 10px;
 }
-.Input__label {
+.lexical .Input__label {
   display: flex;
   flex: 1;
   color: #666;
 }
-.Input__input {
+.lexical .Input__input {
   display: flex;
   flex: 2;
   border: 1px solid #999;