diff --git a/web/package.json b/web/package.json
index 2e34ea14aa..13bdd56d82 100644
--- a/web/package.json
+++ b/web/package.json
@@ -106,6 +106,7 @@
         "@emotion/react": "11.11.0",
         "@emotion/styled": "11.11.0",
         "@floating-ui/react": "0.24.7",
+        "@lexical/react": "0.12.0",
         "@mapbox/vector-tile": "1.3.1",
         "@monaco-editor/react": "4.5.1",
         "@popperjs/core": "2.11.7",
@@ -144,6 +145,7 @@
         "jsonpath-plus": "7.2.0",
         "jszip": "3.10.1",
         "leaflet": "1.9.3",
+        "lexical": "0.12.0",
         "localforage": "1.10.0",
         "lodash-es": "4.17.21",
         "lru-cache": "8.0.4",
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/Editor.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/Editor.tsx
new file mode 100644
index 0000000000..919eb496d1
--- /dev/null
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/Editor.tsx
@@ -0,0 +1,31 @@
+import { debounce } from "lodash-es";
+import { useMemo, useContext } from "react";
+
+import RichTextEditor from "@reearth/beta/lib/lexical/RichTextEditor";
+
+import { BlockContext } from "../common/Wrapper";
+
+export type Props = {
+  text?: string;
+  onUpdate?: (text: string) => void;
+};
+
+const TextBlockEditor: React.FC<Props> = ({ text, onUpdate }) => {
+  const debouncedHandleTextUpdate = useMemo(
+    () => (onUpdate ? debounce(onUpdate, 1000) : undefined),
+    [onUpdate],
+  );
+
+  const context = useContext(BlockContext);
+
+  return (
+    <RichTextEditor
+      editMode={!!context?.editMode}
+      text={text}
+      onChange={debouncedHandleTextUpdate}
+      scrollableContainerId="story-page"
+    />
+  );
+};
+
+export default TextBlockEditor;
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
index 50b3ef25f2..7324fc9e68 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/Text/index.tsx
@@ -1,20 +1,38 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
-import Text from "@reearth/beta/components/Text";
 import { ValueTypes } from "@reearth/beta/utils/value";
 
 import { getFieldValue } from "../../../utils";
 import { CommonProps as BlockProps } from "../../types";
+import usePropertyValueUpdate from "../common/usePropertyValueUpdate";
 import BlockWrapper from "../common/Wrapper";
 
+import TextBlockEditor from "./Editor";
+
 export type Props = BlockProps;
 
+// Text block is very special, it will not edit values with field components
+// from the common editor panel, but manage it by itself directly.
+
 const TextBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
   const text = useMemo(
     () => getFieldValue(block?.property?.items ?? [], "text") as ValueTypes["string"],
     [block?.property?.items],
   );
 
+  const { handlePropertyValueUpdate } = usePropertyValueUpdate();
+
+  const handleTextUpdate = useCallback(
+    (text: string) => {
+      const schemaGroup = block?.property?.items?.find(
+        i => i.schemaGroup === "default",
+      )?.schemaGroup;
+      if (!block?.property?.id || !schemaGroup) return;
+      handlePropertyValueUpdate(schemaGroup, block?.property?.id, "text", "string")(text);
+    },
+    [block?.property?.id, block?.property?.items, handlePropertyValueUpdate],
+  );
+
   return (
     <BlockWrapper
       title={block?.title}
@@ -22,12 +40,9 @@ const TextBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
       isSelected={isSelected}
       propertyId={block?.property?.id}
       propertyItems={block?.property?.items}
+      settingsEnabled={false}
       {...props}>
-      {text && (
-        <Text size="body" customColor>
-          {text}
-        </Text>
-      )}
+      <TextBlockEditor text={text} onUpdate={handleTextUpdate} />
     </BlockWrapper>
   );
 };
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
index 6589a2f304..7b1087d7db 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, createContext } from "react";
 
 import FieldComponents from "@reearth/beta/components/fields/PropertyFields";
 import { stopClickPropagation } from "@reearth/beta/utils/events";
@@ -10,6 +10,8 @@ import Template from "../../Template";
 
 import useHooks from "./hooks";
 
+export const BlockContext = createContext<{ editMode?: boolean } | undefined>(undefined);
+
 type Spacing = {
   top: number;
   bottom: number;
@@ -25,6 +27,7 @@ type Props = {
   propertyId?: string;
   propertyItems?: Item[];
   dndEnabled?: boolean;
+  settingsEnabled?: boolean;
   onClick?: () => void;
   onClickAway?: () => void;
   onRemove?: () => void;
@@ -38,6 +41,7 @@ const BlockWrapper: React.FC<Props> = ({
   propertyId,
   propertyItems,
   dndEnabled = true,
+  settingsEnabled = true,
   onClick,
   onClickAway,
   onRemove,
@@ -58,29 +62,31 @@ const BlockWrapper: React.FC<Props> = ({
   });
 
   return (
-    <SelectableArea
-      title={title}
-      icon={icon}
-      isSelected={isSelected}
-      propertyId={propertyId}
-      dndEnabled={dndEnabled}
-      showSettings={showSettings}
-      propertyItems={propertyItems}
-      editMode={editMode}
-      setEditMode={setEditMode}
-      onEditModeToggle={handleEditModeToggle}
-      onSettingsToggle={handleSettingsToggle}
-      onRemove={onRemove}
-      onClickAway={onClickAway}>
-      <Block padding={padding} onClick={handleBlockClick}>
-        {children ?? <Template icon={icon} />}
-      </Block>
-      {editMode && propertyId && defaultSettings && (
-        <EditorPanel onClick={stopClickPropagation}>
-          <FieldComponents propertyId={propertyId} item={defaultSettings} />
-        </EditorPanel>
-      )}
-    </SelectableArea>
+    <BlockContext.Provider value={{ editMode }}>
+      <SelectableArea
+        title={title}
+        icon={icon}
+        isSelected={isSelected}
+        propertyId={propertyId}
+        dndEnabled={dndEnabled}
+        showSettings={showSettings}
+        propertyItems={propertyItems}
+        editMode={editMode}
+        setEditMode={setEditMode}
+        onEditModeToggle={handleEditModeToggle}
+        onSettingsToggle={handleSettingsToggle}
+        onRemove={onRemove}
+        onClickAway={onClickAway}>
+        <Block padding={padding} onClick={handleBlockClick}>
+          {children ?? <Template icon={icon} />}
+        </Block>
+        {editMode && propertyId && defaultSettings && settingsEnabled && (
+          <EditorPanel onClick={stopClickPropagation}>
+            <FieldComponents propertyId={propertyId} item={defaultSettings} />
+          </EditorPanel>
+        )}
+      </SelectableArea>
+    </BlockContext.Provider>
   );
 };
 
@@ -99,11 +105,5 @@ const Block = styled.div<{ padding?: Spacing }>`
 const EditorPanel = styled.div`
   background: ${({ theme }) => theme.bg[1]};
   color: ${({ theme }) => theme.content.main};
-  height: 100px;
   padding: 12px;
-  z-index: 100;
-  position: absolute;
-  top: 100%;
-  left: -1px;
-  right: -1px;
 `;
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
index 5d5c08295b..a7205a755a 100644
--- a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/hooks.ts
@@ -24,10 +24,10 @@ export default ({ isSelected, propertyItems, onClick }: Props) => {
   const handleBlockClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
-      if (showSettings && isSelected) return;
+      if ((showSettings && isSelected) || editMode) return;
       onClick?.();
     },
-    [onClick, showSettings, isSelected],
+    [onClick, showSettings, isSelected, editMode],
   );
 
   const defaultSettings: Item | undefined = useMemo(
diff --git a/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/usePropertyValueUpdate.ts b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/usePropertyValueUpdate.ts
new file mode 100644
index 0000000000..9817f182d6
--- /dev/null
+++ b/web/src/beta/features/Editor/StoryPanel/Block/builtin/common/usePropertyValueUpdate.ts
@@ -0,0 +1,29 @@
+import { useCallback } from "react";
+
+import { ValueType, ValueTypes } from "@reearth/beta/utils/value";
+import { usePropertyFetcher } from "@reearth/services/api";
+
+// Unlick common story blocks which will use the auto generted field components editor,
+// Some special story blocks will use the custom editor components and need to update date directly.
+export default () => {
+  const { useUpdatePropertyValue } = usePropertyFetcher();
+
+  const handlePropertyValueUpdate = useCallback(
+    (
+      schemaGroupId: string,
+      propertyId: string,
+      fieldId: string,
+      vt: ValueType,
+      itemId?: string,
+    ) => {
+      return async (v?: ValueTypes[ValueType]) => {
+        await useUpdatePropertyValue(propertyId, schemaGroupId, itemId, fieldId, "en", v, vt);
+      };
+    },
+    [useUpdatePropertyValue],
+  );
+
+  return {
+    handlePropertyValueUpdate,
+  };
+};
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/3-columns.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/3-columns.svg
new file mode 100644
index 0000000000..06496e2e0a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/3-columns.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layout-three-columns" viewBox="0 0 16 16">
+  <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z"/>
+</svg>
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/LICENSE.md b/web/src/beta/lib/lexical/RichTextEditor/images/icons/LICENSE.md
new file mode 100644
index 0000000000..ce74f6abee
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/LICENSE.md
@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-clockwise.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-clockwise.svg
new file mode 100644
index 0000000000..80b3ad066e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-clockwise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-counterclockwise.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-counterclockwise.svg
new file mode 100644
index 0000000000..46d3581d8e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/arrow-counterclockwise.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/bg-color.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/bg-color.svg
new file mode 100644
index 0000000000..ae08b2c1d8
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/bg-color.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" fill-opacity=".01" d="M0 0h48v48H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37a4 4 0 0 0 4-4c0-1.473-1.333-3.473-4-6-2.667 2.527-4 4.527-4 6a4 4 0 0 0 4 4Z" fill="#777"/><path d="m20.854 5.504 3.535 3.536" stroke="#777" stroke-width="4" stroke-linecap="round"/><path d="M23.682 8.333 8.125 23.889 19.44 35.203l15.556-15.557L23.682 8.333Z" stroke="#777" stroke-width="4" stroke-linejoin="round"/><path d="m12 20.073 16.961 5.577M4 43h40" stroke="#777" stroke-width="4" stroke-linecap="round"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/camera.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/camera.svg
new file mode 100755
index 0000000000..968ebf4eb3
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera"><path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1v6zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4H2z"/><path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zm0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/card-checklist.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/card-checklist.svg
new file mode 100644
index 0000000000..f81734be43
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/card-checklist.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/caret-right-fill.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/caret-right-fill.svg
new file mode 100644
index 0000000000..04c258e6d1
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/caret-right-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-left-text.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-left-text.svg
new file mode 100644
index 0000000000..7c7acc2397
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-left-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-left-text"><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-dots.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-dots.svg
new file mode 100644
index 0000000000..110925a122
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-dots.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right-dots"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-text.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-text.svg
new file mode 100644
index 0000000000..08daa52bc7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right-text"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right.svg
new file mode 100644
index 0000000000..d9c2b110e7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-right"><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-square-quote.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-square-quote.svg
new file mode 100755
index 0000000000..5501848a57
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chat-square-quote.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-quote"><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/chevron-down.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chevron-down.svg
new file mode 100644
index 0000000000..ef1a6ba3b7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/clipboard.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/clipboard.svg
new file mode 100755
index 0000000000..f09e1a1c9b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/close.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/close.svg
new file mode 100644
index 0000000000..4f5bb39382
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--><path d="M0 256C0 114.6 114.6 0 256 0s256 114.6 256 256-114.6 256-256 256S0 397.4 0 256zm175-47.9 47.1 47L175 303c-9.3 9.4-9.3 24.6 0 33.1 9.4 10.2 24.6 10.2 33.1 0l47-46.2 47.9 46.2c9.4 10.2 24.6 10.2 33.1 0 10.2-8.5 10.2-23.7 0-33.1l-46.2-47.9 46.2-47c10.2-8.5 10.2-23.7 0-33.1-8.5-9.3-23.7-9.3-33.1 0l-47.9 47.1-47-47.1c-8.5-9.3-23.7-9.3-33.1 0-9.3 9.4-9.3 24.6 0 33.1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/code.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/code.svg
new file mode 100755
index 0000000000..c9070bf06e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code"><path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/comments.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/comments.svg
new file mode 100644
index 0000000000..6a23ac5463
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/comments.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 5.885v1.166a3.95 3.95 0 0 1-3.949 3.95H6.917a.748.748 0 0 0-.45.15l-1.345 1.007a.752.752 0 0 0-.032 1.181A2.933 2.933 0 0 0 6.95 14h2.716l2.534 1.901a.506.506 0 0 0 .524.047A.501.501 0 0 0 13 15.5V14h.051a2.949 2.949 0 0 0 2.95-2.949v-3.05a3.002 3.002 0 0 0-2.002-2.83.756.756 0 0 0-.999.714" fill="#050505"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.05 1H2.95A2.952 2.952 0 0 0 0 3.949v3.102A2.952 2.952 0 0 0 2.949 10H3v1.5a.502.502 0 0 0 .8.4L6.334 10H9.05A2.952 2.952 0 0 0 12 7.05V3.95A2.952 2.952 0 0 0 9.05 1" fill="#050505"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/copy.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/copy.svg
new file mode 100644
index 0000000000..e757cdfe5d
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path d="M710 10H360c-38.6 0-70 31.4-70 70v630c0 38.6 31.4 70 70 70h490c38.6 0 70-31.4 70-70V220L710 10zm0 99 111 111H710V109zm140 601H360V80h280v210h210v420z"/><path d="M430 360h350v70H430v-70zm0 140h350v70H430v-70z"/><path d="M640 920H150V290h70v-70h-70c-38.6 0-70 31.4-70 70v630c0 38.6 31.4 70 70 70h490c38.6 0 70-31.4 70-70v-70h-70v70z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/diagram-2.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/diagram-2.svg
new file mode 100644
index 0000000000..7b7b696d0e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/diagram-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-diagram-2"><path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM3 11.5A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/download.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/download.svg
new file mode 100755
index 0000000000..cd27d96c10
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/draggable-block-menu.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/draggable-block-menu.svg
new file mode 100644
index 0000000000..7086d2990a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/draggable-block-menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" fill="currentColor"><path stroke="currentColor" d="M8.5 10a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0 7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7-10a2 2 0 1 0-2-2 2 2 0 0 0 2 2Zm-7-4a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0-7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/dropdown-more.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/dropdown-more.svg
new file mode 100644
index 0000000000..399ea8de5f
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/dropdown-more.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.648 4.475 1.824 12.25H.67l3.252-8.531h.744l-.018.756Zm2.368 7.775-2.83-7.775-.018-.756h.744l3.264 8.531h-1.16Zm-.147-3.158v.926H2.076v-.926H6.87Zm6.024 2.074V7.902c0-.25-.051-.466-.153-.65a.997.997 0 0 0-.445-.434c-.2-.101-.445-.152-.738-.152-.274 0-.514.047-.721.14a1.255 1.255 0 0 0-.48.37.809.809 0 0 0-.17.492H9.101c0-.227.058-.451.175-.674.118-.223.286-.424.504-.603.223-.184.489-.329.797-.434.313-.11.66-.164 1.043-.164.461 0 .867.078 1.219.234.355.157.633.393.832.71.203.312.305.704.305 1.177v2.953c0 .211.017.436.052.674.04.238.096.443.17.615v.094h-1.13a2.022 2.022 0 0 1-.13-.498 4.011 4.011 0 0 1-.046-.586Zm.187-2.76.012.762h-1.096c-.309 0-.584.025-.826.076a1.89 1.89 0 0 0-.61.217.979.979 0 0 0-.504.879c0 .2.046.38.135.545a.98.98 0 0 0 .405.392c.183.094.408.141.674.141.332 0 .625-.07.878-.211a1.83 1.83 0 0 0 .604-.516c.152-.203.234-.4.246-.591l.463.521a1.572 1.572 0 0 1-.223.545 2.607 2.607 0 0 1-1.2 1.025 2.328 2.328 0 0 1-.927.176c-.43 0-.806-.084-1.13-.252a1.933 1.933 0 0 1-.75-.674 1.784 1.784 0 0 1-.264-.955c0-.34.066-.638.199-.896a1.73 1.73 0 0 1 .574-.65c.25-.176.551-.31.903-.399a4.76 4.76 0 0 1 1.177-.135h1.26Z" fill="#000"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-earmark-text.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-earmark-text.svg
new file mode 100644
index 0000000000..0d60c7957a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-earmark-text.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
+  <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
+  <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-image.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-image.svg
new file mode 100644
index 0000000000..73a9ff15f1
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/file-image.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-image"><path d="M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12V2z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/filetype-gif.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/filetype-gif.svg
new file mode 100644
index 0000000000..12acb80f39
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/filetype-gif.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-filetype-gif"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2H9v-1h3a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.278 13.124a1.403 1.403 0 0 0-.14-.492 1.317 1.317 0 0 0-.314-.407 1.447 1.447 0 0 0-.48-.275 1.88 1.88 0 0 0-.636-.1c-.361 0-.67.076-.926.229a1.48 1.48 0 0 0-.583.632 2.136 2.136 0 0 0-.199.95v.506c0 .272.035.52.105.745.07.224.177.417.32.58.142.162.32.288.533.377.215.088.466.132.753.132.268 0 .5-.037.697-.111a1.29 1.29 0 0 0 .788-.77c.065-.174.097-.358.097-.551v-.797H1.717v.589h.823v.255c0 .132-.03.254-.09.363a.67.67 0 0 1-.273.264.967.967 0 0 1-.457.096.87.87 0 0 1-.519-.146.881.881 0 0 1-.305-.413 1.785 1.785 0 0 1-.096-.615v-.499c0-.365.078-.648.234-.85.158-.2.38-.301.665-.301a.96.96 0 0 1 .3.044c.09.03.17.071.236.126a.689.689 0 0 1 .17.19.797.797 0 0 1 .097.25h.776Zm1.353 2.801v-3.999H3.84v4h.79Zm1.493-1.59v1.59h-.791v-3.999H7.88v.653H6.124v1.117h1.605v.638H6.124Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-color.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-color.svg
new file mode 100644
index 0000000000..1ac53f7ac5
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-color.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512"><path fill="#777" d="M221.631 109 109.92 392h58.055l24.079-61h127.892l24.079 61h58.055L290.369 109Zm-8.261 168L256 169l42.63 108Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-family.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-family.svg
new file mode 100644
index 0000000000..a13f5ad1ef
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/font-family.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fonts"><path d="M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/gear.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/gear.svg
new file mode 100755
index 0000000000..ee6efa0441
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/gear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear"><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/horizontal-rule.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/horizontal-rule.svg
new file mode 100644
index 0000000000..cb84970fb1
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/horizontal-rule.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-break"><path d="M0 10.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zM12 0H4a2 2 0 0 0-2 2v7h1V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v7h1V2a2 2 0 0 0-2-2zm2 12h-1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-2H2v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/indent.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/indent.svg
new file mode 100644
index 0000000000..c9c5df7bf6
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/indent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-left"><path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708zM7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-code.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-code.svg
new file mode 100755
index 0000000000..9db6666a7c
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-text.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-text.svg
new file mode 100755
index 0000000000..9defed2c3e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/journal-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text"><path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/justify.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/justify.svg
new file mode 100644
index 0000000000..6c5f8d0f7e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/justify.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/link.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/link.svg
new file mode 100755
index 0000000000..bc38ff5d4b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ol.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ol.svg
new file mode 100755
index 0000000000..ad288e8ea4
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ol.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/><path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ul.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ul.svg
new file mode 100755
index 0000000000..6d7aae75d7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/list-ul.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock-fill.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock-fill.svg
new file mode 100644
index 0000000000..466ca138f9
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock.svg
new file mode 100644
index 0000000000..3e19e71b51
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/lock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock"><path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/markdown.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/markdown.svg
new file mode 100644
index 0000000000..310bff6d55
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/markdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-markdown"><path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/><path fill-rule="evenodd" d="M9.146 8.146a.5.5 0 0 1 .708 0L11.5 9.793l1.646-1.647a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M11.5 5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5z"/><path d="M3.56 11V7.01h.056l1.428 3.239h.774l1.42-3.24h.056V11h1.073V5.001h-1.2l-1.71 3.894h-.039l-1.71-3.894H2.5V11h1.06z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/mic.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/mic.svg
new file mode 100644
index 0000000000..afdb58da9b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/mic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic"><path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/><path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/outdent.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/outdent.svg
new file mode 100644
index 0000000000..a98e0e1921
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/outdent.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-right"><path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/paint-bucket.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/paint-bucket.svg
new file mode 100644
index 0000000000..baa02d3b31
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/paint-bucket.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paint-bucket"><path d="M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a2.972 2.972 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1.01 1.01 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4.322 4.322 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067-.707-.707-1.441-1.279-2.068-1.627-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219l-.217.216zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.283 3.283 0 0 1-.131-.673c.091.061.204.15.337.274zm.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088c.054.12.115.243.183.365.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626.122.068.244.13.365.183l-4.861 4.862a.571.571 0 0 1-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46-.66-.66-1.168-1.32-1.46-1.846-.147-.265-.225-.47-.251-.607a.573.573 0 0 1-.01-.068l3.048-3.047zm2.87-1.935a2.44 2.44 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.497 3.497 0 0 0-1.066.091 11.27 11.27 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/palette.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/palette.svg
new file mode 100644
index 0000000000..338222ec61
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/palette.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette"><path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/pencil-fill.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/pencil-fill.svg
new file mode 100755
index 0000000000..eb01fb2a41
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/pencil-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill"><path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug-fill.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug-fill.svg
new file mode 100644
index 0000000000..3863ef8400
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug-fill"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug.svg
new file mode 100644
index 0000000000..de8d4c80b0
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plug.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plug"><path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus-slash-minus.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus-slash-minus.svg
new file mode 100644
index 0000000000..40ff781e5a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus-slash-minus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-slash-minus"><path d="m1.854 14.854 13-13a.5.5 0 0 0-.708-.708l-13 13a.5.5 0 0 0 .708.708ZM4 1a.5.5 0 0 1 .5.5v2h2a.5.5 0 0 1 0 1h-2v2a.5.5 0 0 1-1 0v-2h-2a.5.5 0 0 1 0-1h2v-2A.5.5 0 0 1 4 1Zm5 11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 9 12Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus.svg
new file mode 100644
index 0000000000..1a26928a16
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/scissors.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/scissors.svg
new file mode 100644
index 0000000000..80a76cdb57
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/scissors.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-scissors" viewBox="0 0 16 16" transform="matrix(-1, 0, 0, 1, 0, 0)rotate(270)">
+  <path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61 3.5 3.5zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zm7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
+</svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/send.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/send.svg
new file mode 100644
index 0000000000..04e9f29836
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send"><path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/square-check.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/square-check.svg
new file mode 100644
index 0000000000..352ba61582
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/square-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/sticky.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/sticky.svg
new file mode 100644
index 0000000000..2b14115cdb
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/sticky.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sticky"><path d="M2.5 1A1.5 1.5 0 0 0 1 2.5v11A1.5 1.5 0 0 0 2.5 15h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 15 8.586V2.5A1.5 1.5 0 0 0 13.5 1h-11zM2 2.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V8H9.5A1.5 1.5 0 0 0 8 9.5V14H2.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V9.5a.5.5 0 0 1 .5-.5h4.293L9 13.793z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/success-alt.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/success-alt.svg
new file mode 100644
index 0000000000..c9d4ad9c23
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/success-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="#000"/><path fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M38 15 22 33l-10-8"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/success.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/success.svg
new file mode 100644
index 0000000000..8e11879e07
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/success.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="#25ae88"/><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M38 15 22 33l-10-8"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/table.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/table.svg
new file mode 100644
index 0000000000..e514555c7f
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/table.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-center.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-center.svg
new file mode 100644
index 0000000000..97ced49e63
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-center.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center"><path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-left.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-left.svg
new file mode 100644
index 0000000000..5fe4cc4452
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-paragraph.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-paragraph.svg
new file mode 100755
index 0000000000..1b943ab44e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-paragraph.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-right.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-right.svg
new file mode 100644
index 0000000000..de984517f9
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/text-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right"><path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash.svg
new file mode 100644
index 0000000000..75680bb7ad
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash3.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash3.svg
new file mode 100644
index 0000000000..5c38b387e6
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/trash3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3"><path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-bold.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-bold.svg
new file mode 100755
index 0000000000..ec0dc2ec0d
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold"><path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h1.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h1.svg
new file mode 100755
index 0000000000..379da930d8
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1"><path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h2.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h2.svg
new file mode 100755
index 0000000000..e724a0be39
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2"><path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h3.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h3.svg
new file mode 100755
index 0000000000..02d4a06c5a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h3"><path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.625-4.272h1.018c1.142 0 1.935.67 1.949 1.674.013 1.005-.78 1.737-2.01 1.73-1.08-.007-1.853-.588-1.935-1.32H9.108c.069 1.327 1.224 2.386 3.083 2.386 1.935 0 3.343-1.155 3.309-2.789-.027-1.51-1.251-2.16-2.037-2.249v-.068c.704-.123 1.764-.91 1.723-2.229-.035-1.353-1.176-2.4-2.954-2.385-1.873.006-2.857 1.162-2.898 2.358h1.196c.062-.69.711-1.299 1.696-1.299.998 0 1.695.622 1.695 1.525.007.922-.718 1.592-1.695 1.592h-.964v1.074z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h4.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h4.svg
new file mode 100755
index 0000000000..eb950c9ed4
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1"><path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13Zm5.337.2v-2.328H9.108V9.828l3.441-6.35h1.632v6.141H15.5v1.253h-1.319V13.2Zm-2.615-3.581h2.615V6.7L13 4.689l-.872 1.7z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h5.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h5.svg
new file mode 100755
index 0000000000..5d565639cf
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1"><path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13Zm2.755-5.791a3.763 3.763 0 0 1 2.113-.517 2.973 2.973 0 0 1 2.995 3.1 3.45 3.45 0 0 1-.9 2.442 3.111 3.111 0 0 1-2.393.968 3.327 3.327 0 0 1-2.094-.671 2.758 2.758 0 0 1-1.007-2h1.284a1.387 1.387 0 0 0 .511 1.1 2.384 2.384 0 0 0 1.4.421 1.819 1.819 0 0 0 1.479-.638 2.042 2.042 0 0 0 .437-1.514 2.17 2.17 0 0 0-.567-1.584 1.958 1.958 0 0 0-1.468-.58 2.358 2.358 0 0 0-1.79.789H9.108V3.478h5.931v1.134h-4.647Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h6.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h6.svg
new file mode 100755
index 0000000000..8274acacd5
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-h6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1"><path d="M7.637 13V3.669H6.379V7.62H1.758V3.67H.5V13h1.258V8.728h4.62V13Zm5.039-6.13a2.823 2.823 0 0 1 1.419.364 2.69 2.69 0 0 1 1.022 1.05 3.327 3.327 0 0 1 .383 1.642 3.594 3.594 0 0 1-.39 1.7 2.878 2.878 0 0 1-1.1 1.158 3.165 3.165 0 0 1-1.635.416 2.812 2.812 0 0 1-1.734-.545A3.49 3.49 0 0 1 9.51 11.1a6.515 6.515 0 0 1-.4-2.411A7.726 7.726 0 0 1 9.542 6a4.289 4.289 0 0 1 1.233-1.851 2.831 2.831 0 0 1 1.889-.673A2.7 2.7 0 0 1 13.8 3.7a2.463 2.463 0 0 1 .812.586 2.886 2.886 0 0 1 .514.8 2.768 2.768 0 0 1 .223.861H14a1.488 1.488 0 0 0-.453-.923 1.346 1.346 0 0 0-.935-.329 1.509 1.509 0 0 0-1.072.425 2.839 2.839 0 0 0-.71 1.18 6.808 6.808 0 0 0-.323 1.771 2.639 2.639 0 0 1 .918-.889 2.48 2.48 0 0 1 1.251-.312Zm-.285 5.117a1.617 1.617 0 0 0 .91-.256 1.752 1.752 0 0 0 .614-.713 2.336 2.336 0 0 0 .223-1.037 2.211 2.211 0 0 0-.217-1.01 1.6 1.6 0 0 0-.6-.666 1.671 1.671 0 0 0-.892-.236 1.833 1.833 0 0 0-1.164.377 2.4 2.4 0 0 0-.743 1.009 3.749 3.749 0 0 0 .6 1.845 1.5 1.5 0 0 0 1.269.687Z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-italic.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-italic.svg
new file mode 100755
index 0000000000..ac139f3cc9
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-italic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic"><path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-strikethrough.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-strikethrough.svg
new file mode 100755
index 0000000000..a0d7e17e2d
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-strikethrough.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough"><path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-subscript.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-subscript.svg
new file mode 100644
index 0000000000..f6ebe4b6f6
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-subscript.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.354 14.5v-.665l1.553-1.438c.132-.128.243-.243.332-.345.091-.102.16-.203.207-.3.047-.1.07-.207.07-.322a.574.574 0 0 0-.326-.546.748.748 0 0 0-.343-.077.721.721 0 0 0-.35.082.557.557 0 0 0-.23.232.753.753 0 0 0-.08.36h-.876c0-.286.065-.534.194-.744.13-.21.31-.373.543-.488.233-.115.502-.172.806-.172.312 0 .584.055.816.166.233.11.414.261.543.456.13.194.194.418.194.669 0 .165-.033.327-.098.488-.064.16-.178.339-.343.535a7.918 7.918 0 0 1-.697.7l-.637.625v.03h1.832v.754h-3.11ZM5.04 4.273 6.96 7.469h.068l1.93-3.196h1.803L8.073 8.636 10.805 13H8.972L7.03 9.825h-.068L5.018 13H3.194l2.757-4.364-2.723-4.363H5.04Z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-superscript.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-superscript.svg
new file mode 100644
index 0000000000..bed98f9d80
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-superscript.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.354 6v-.665l1.553-1.438c.132-.128.243-.243.332-.345a1.31 1.31 0 0 0 .207-.3c.047-.1.07-.207.07-.322a.574.574 0 0 0-.326-.545.748.748 0 0 0-.343-.077.721.721 0 0 0-.35.08.557.557 0 0 0-.23.233.753.753 0 0 0-.08.36h-.876c0-.286.065-.534.194-.744.13-.21.31-.373.543-.488.233-.115.502-.172.806-.172.312 0 .584.055.816.166.233.11.414.261.543.456.13.194.194.417.194.669 0 .165-.033.327-.098.488-.064.16-.178.339-.343.535a7.92 7.92 0 0 1-.697.7l-.637.625v.03h1.832V6h-3.11ZM5.04 4.273 6.96 7.469h.068l1.93-3.196h1.803L8.073 8.636 10.805 13H8.972L7.03 9.825h-.068L5.018 13H3.194l2.757-4.364-2.723-4.363H5.04Z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-underline.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-underline.svg
new file mode 100755
index 0000000000..d5c7046ee3
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/type-underline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline"><path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/upload.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/upload.svg
new file mode 100644
index 0000000000..81328ddbca
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/upload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/images/icons/user.svg b/web/src/beta/lib/lexical/RichTextEditor/images/icons/user.svg
new file mode 100644
index 0000000000..823b72d1e6
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/images/icons/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 128c39.77 0 72 32.24 72 72s-32.2 72-72 72c-39.76 0-72-32.24-72-72s32.2-72 72-72zm0 320c-52.93 0-100.9-21.53-135.7-56.29C136.5 349.9 176.5 320 224 320h64c47.54 0 87.54 29.88 103.7 71.71C356.9 426.5 308.9 448 256 448z"/></svg>
\ No newline at end of file
diff --git a/web/src/beta/lib/lexical/RichTextEditor/index.css b/web/src/beta/lib/lexical/RichTextEditor/index.css
new file mode 100644
index 0000000000..915ed7ab8c
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.css
@@ -0,0 +1,1513 @@
+@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 {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.editor {
+  flex: auto;
+  position: relative;
+  resize: vertical;
+  z-index: -1;
+}
+
+.editor-inner{
+  position: relative;
+  cursor: auto;
+}
+
+.editor-input{
+  outline: none;
+  padding: 8px;
+}
+
+.editor-input-minheight{
+  min-height: 200px;
+}
+
+.editor-placeholder{
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 8px;
+  left: 8px;
+  user-select: none;
+  pointer-events: none;
+}
+
+pre {
+  line-height: 1.1;
+  background: #222;
+  color: #fff;
+  margin: 0;
+  padding: 10px;
+  font-size: 12px;
+  overflow: auto;
+  max-height: 400px;
+}
+
+pre::-webkit-scrollbar {
+  background: transparent;
+  width: 10px;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: #999;
+}
+
+.editor-dev-button {
+  position: relative;
+  display: block;
+  width: 40px;
+  height: 40px;
+  font-size: 12px;
+  border-radius: 20px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
+  background-color: #444;
+}
+
+.editor-dev-button::after {
+  content: '';
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  display: block;
+  background-size: contain;
+  filter: invert(1);
+}
+
+.editor-dev-button:hover {
+  background-color: #555;
+}
+
+.editor-dev-button.active {
+  background-color: rgb(233, 35, 35);
+}
+
+.test-recorder-toolbar {
+  display: flex;
+}
+
+.test-recorder-button {
+  position: relative;
+  display: block;
+  width: 32px;
+  height: 32px;
+  font-size: 10px;
+  padding: 6px 6px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
+  background-color: #222;
+  transition: box-shadow 50ms ease-out;
+}
+
+.test-recorder-button:active {
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.test-recorder-button + .test-recorder-button {
+  margin-left: 4px;
+}
+
+.test-recorder-button::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  bottom: 8px;
+  left: 8px;
+  display: block;
+  background-size: contain;
+  filter: invert(1);
+}
+
+#options-button {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+}
+
+#test-recorder-button {
+  position: fixed;
+  left: 70px;
+  bottom: 20px;
+}
+
+#paste-log-button {
+  position: fixed;
+  left: 120px;
+  bottom: 20px;
+}
+
+#docs-button {
+  position: fixed;
+  left: 170px;
+  bottom: 20px;
+}
+
+#options-button::after {
+  background-image: url(images/icons/gear.svg);
+}
+
+#test-recorder-button::after {
+  background-image: url(images/icons/journal-code.svg);
+}
+
+#paste-log-button::after {
+  background-image: url(images/icons/clipboard.svg);
+}
+
+#docs-button::after {
+  background-image: url(images/icons/file-earmark-text.svg);
+}
+
+#test-recorder-button-snapshot {
+  margin-right: auto;
+}
+
+#test-recorder-button-snapshot::after {
+  background-image: url(images/icons/camera.svg);
+}
+
+#test-recorder-button-copy::after {
+  background-image: url(images/icons/clipboard.svg);
+}
+
+#test-recorder-button-download::after {
+  background-image: url(images/icons/download.svg);
+}
+
+.typeahead-popover {
+  background: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  margin-top: 25px;
+}
+
+.typeahead-popover ul {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+  border-radius: 8px;
+  max-height: 200px;
+  overflow-y: scroll;
+}
+
+.typeahead-popover ul::-webkit-scrollbar {
+  display: none;
+}
+
+.typeahead-popover ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.typeahead-popover ul li {
+  margin: 0;
+  min-width: 180px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.typeahead-popover ul li.selected {
+  background: #eee;
+}
+
+.typeahead-popover li {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+}
+
+.typeahead-popover li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.typeahead-popover li:first-child {
+  border-radius: 8px 8px 0px 0px;
+}
+
+.typeahead-popover li:last-child {
+  border-radius: 0px 0px 8px 8px;
+}
+
+.typeahead-popover li:hover {
+  background-color: #eee;
+}
+
+.typeahead-popover li .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.typeahead-popover li .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.component-picker-menu {
+  width: 200px;
+}
+
+.mentions-menu {
+  width: 250px;
+}
+
+.auto-embed-menu {
+  width: 150px;
+}
+
+.emoji-menu {
+  width: 200px;
+}
+
+i.palette {
+  background-image: url(images/icons/palette.svg);
+}
+
+i.bucket {
+  background-image: url(images/icons/paint-bucket.svg);
+}
+
+i.bold {
+  background-image: url(images/icons/type-bold.svg);
+}
+
+i.italic {
+  background-image: url(images/icons/type-italic.svg);
+}
+
+i.clear {
+  background-image: url(images/icons/trash.svg);
+}
+
+i.code {
+  background-image: url(images/icons/code.svg);
+}
+
+i.underline {
+  background-image: url(images/icons/type-underline.svg);
+}
+
+i.strikethrough {
+  background-image: url(images/icons/type-strikethrough.svg);
+}
+
+i.subscript {
+  background-image: url(images/icons/type-subscript.svg);
+}
+
+i.superscript {
+  background-image: url(images/icons/type-superscript.svg);
+}
+
+i.link {
+  background-image: url(images/icons/link.svg);
+}
+
+i.horizontal-rule {
+  background-image: url(images/icons/horizontal-rule.svg);
+}
+
+.icon.plus {
+  background-image: url(images/icons/plus.svg);
+}
+
+.icon.caret-right {
+  background-image: url(images/icons/caret-right-fill.svg);
+}
+
+.icon.dropdown-more {
+  background-image: url(images/icons/dropdown-more.svg);
+}
+
+.icon.font-color {
+  background-image: url(images/icons/font-color.svg);
+}
+
+.icon.font-family {
+  background-image: url(images/icons/font-family.svg);
+}
+
+.icon.bg-color {
+  background-image: url(images/icons/bg-color.svg);
+}
+
+.icon.table {
+  background-color: #6c757d;
+  mask-image: url(images/icons/table.svg);
+  -webkit-mask-image: url(images/icons/table.svg);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
+i.image {
+  background-image: url(images/icons/file-image.svg);
+}
+
+i.table {
+  background-image: url(images/icons/table.svg);
+}
+
+i.close {
+  background-image: url(images/icons/close.svg);
+}
+
+i.figma {
+  background-image: url(images/icons/figma.svg);
+}
+
+i.poll {
+  background-image: url(images/icons/card-checklist.svg);
+}
+
+i.columns {
+  background-image: url(images/icons/3-columns.svg);
+}
+
+i.tweet {
+  background-image: url(images/icons/tweet.svg);
+}
+
+i.youtube {
+  background-image: url(images/icons/youtube.svg);
+}
+
+.icon.left-align,
+i.left-align {
+  background-image: url(images/icons/text-left.svg);
+}
+
+.icon.center-align,
+i.center-align {
+  background-image: url(images/icons/text-center.svg);
+}
+
+.icon.right-align,
+i.right-align {
+  background-image: url(images/icons/text-right.svg);
+}
+
+.icon.justify-align,
+i.justify-align {
+  background-image: url(images/icons/justify.svg);
+}
+
+i.indent {
+  background-image: url(images/icons/indent.svg);
+}
+
+i.markdown {
+  background-image: url(images/icons/markdown.svg);
+}
+
+i.outdent {
+  background-image: url(images/icons/outdent.svg);
+}
+
+i.undo {
+  background-image: url(images/icons/arrow-counterclockwise.svg);
+}
+
+i.redo {
+  background-image: url(images/icons/arrow-clockwise.svg);
+}
+
+i.sticky {
+  background-image: url(images/icons/sticky.svg);
+}
+
+i.mic {
+  background-image: url(images/icons/mic.svg);
+}
+
+i.import {
+  background-image: url(images/icons/upload.svg);
+}
+
+i.export {
+  background-image: url(images/icons/download.svg);
+}
+
+i.diagram-2 {
+  background-image: url(images/icons/diagram-2.svg);
+}
+
+i.user {
+  background-image: url(images/icons/user.svg);
+}
+
+i.equation {
+  background-image: url(images/icons/plus-slash-minus.svg);
+}
+
+i.gif {
+  background-image: url(images/icons/filetype-gif.svg);
+}
+
+i.copy {
+  background-image: url(images/icons/copy.svg);
+}
+
+i.success {
+  background-image: url(images/icons/success.svg);
+}
+
+i.prettier {
+  background-image: url(images/icons/prettier.svg);
+}
+
+i.prettier-error {
+  background-image: url(images/icons/prettier-error.svg);
+}
+
+i.page-break,
+.icon.page-break {
+  background-image: url(images/icons/scissors.svg);
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 75px);
+  box-sizing: border-box;
+  margin: 12px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  background-color: #eee;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor .link-view {
+  display: block;
+  width: calc(100% - 24px);
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor .link-view a {
+  display: block;
+  word-break: break-word;
+  width: calc(100% - 33px);
+}
+
+.link-editor div.link-edit {
+  background-image: url(images/icons/pencil-fill.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 30px;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-trash {
+  background-image: url(images/icons/trash.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-cancel {
+  background-image: url(images/icons/close.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  margin-right: 28px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-confirm {
+  background-image: url(images/icons/success-alt.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  margin-right: 2px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input a {
+  color: rgb(33, 111, 219);
+  text-decoration: underline;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .font-size-wrapper,
+.link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
+}
+
+.mention:focus {
+  box-shadow: rgb(180 213 255) 0px 0px 0px 2px;
+  outline: none;
+}
+
+.characters-limit {
+  color: #888;
+  font-size: 12px;
+  text-align: right;
+  display: block;
+  position: absolute;
+  left: 12px;
+  bottom: 5px;
+}
+
+.characters-limit.characters-limit-exceeded {
+  color: red;
+}
+
+.dropdown-wrapper{
+  position: relative;
+}
+
+.dropdown {
+  z-index: 100;
+  display: block;
+  position: fixed;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-height: 40px;
+  background-color: #fff;
+}
+
+.dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.dropdown .item.fontsize-item,
+.dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.dropdown .item:hover {
+  background-color: #eee;
+}
+
+.dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.dropdown .divider {
+  width: auto;
+  background-color: #eee;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+.icon.paragraph {
+  background-image: url(images/icons/text-paragraph.svg);
+}
+
+.icon.h1 {
+  background-image: url(images/icons/type-h1.svg);
+}
+
+.icon.h2 {
+  background-image: url(images/icons/type-h2.svg);
+}
+
+.icon.h3 {
+  background-image: url(images/icons/type-h3.svg);
+}
+
+.icon.h4 {
+  background-image: url(images/icons/type-h4.svg);
+}
+
+.icon.h5 {
+  background-image: url(images/icons/type-h5.svg);
+}
+
+.icon.h6 {
+  background-image: url(images/icons/type-h6.svg);
+}
+
+.icon.bullet-list,
+.icon.bullet {
+  background-image: url(images/icons/list-ul.svg);
+}
+
+.icon.check-list,
+.icon.check {
+  background-image: url(images/icons/square-check.svg);
+}
+
+.icon.numbered-list,
+.icon.number {
+  background-image: url(images/icons/list-ol.svg);
+}
+
+.icon.quote {
+  background-image: url(images/icons/chat-square-quote.svg);
+}
+
+.icon.code {
+  background-image: url(images/icons/code.svg);
+}
+
+.switches {
+  z-index: 6;
+  position: fixed;
+  left: 10px;
+  bottom: 70px;
+  animation: slide-in 0.4s ease;
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.switch {
+  display: block;
+  color: #444;
+  margin: 5px 0;
+  background-color: rgba(238, 238, 238, 0.7);
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+
+#rich-text-switch {
+  right: 0;
+}
+
+#character-count-switch {
+  right: 130px;
+}
+
+.switch label {
+  margin-right: 5px;
+  line-height: 24px;
+  width: 100px;
+  font-size: 14px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.switch button {
+  background-color: rgb(206, 208, 212);
+  height: 24px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  width: 44px;
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border: 2px solid transparent;
+}
+
+.switch button:focus-visible {
+  border-color: blue;
+}
+
+.switch button span {
+  top: 0px;
+  left: 0px;
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 12px;
+  background-color: white;
+  transition: transform 0.2s;
+}
+
+.switch button[aria-checked='true'] {
+  background-color: rgb(24, 119, 242);
+}
+
+.switch button[aria-checked='true'] span {
+  transform: translateX(20px);
+}
+
+.emoji {
+  color: transparent;
+  caret-color: rgb(5, 5, 5);
+  background-size: 16px 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  margin: 0 -1px;
+}
+
+.emoji-inner {
+  padding: 0 0.15em;
+}
+
+.emoji-inner::selection {
+  color: transparent;
+  background-color: rgba(150, 150, 150, 0.4);
+}
+
+.emoji-inner::moz-selection {
+  color: transparent;
+  background-color: rgba(150, 150, 150, 0.4);
+}
+
+.emoji.happysmile {
+  background-image: url(images/emoji/1F642.png);
+}
+
+.emoji.veryhappysmile {
+  background-image: url(images/emoji/1F600.png);
+}
+
+.emoji.unhappysmile {
+  background-image: url(images/emoji/1F641.png);
+}
+
+.emoji.heart {
+  background-image: url(images/emoji/2764.png);
+}
+
+.keyword {
+  color: rgb(241, 118, 94);
+  font-weight: bold;
+}
+
+.actions {
+  position: absolute;
+  text-align: right;
+  margin: 10px;
+  bottom: 0;
+  right: 0;
+}
+
+.actions.tree-view {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  vertical-align: -0.25em;
+}
+
+.actions i.indent {
+  background-image: url(images/icons/indent.svg);
+}
+
+.actions i.outdent {
+  background-image: url(images/icons/outdent.svg);
+}
+
+.actions i.lock {
+  background-image: url(images/icons/lock-fill.svg);
+}
+
+.actions i.image {
+  background-image: url(images/icons/file-image.svg);
+}
+
+.actions i.table {
+  background-image: url(images/icons/table.svg);
+}
+
+.actions i.unlock {
+  background-image: url(images/icons/lock.svg);
+}
+
+.actions i.left-align {
+  background-image: url(images/icons/text-left.svg);
+}
+
+.actions i.center-align {
+  background-image: url(images/icons/text-center.svg);
+}
+
+.actions i.right-align {
+  background-image: url(images/icons/text-right.svg);
+}
+
+.actions i.justify-align {
+  background-image: url(images/icons/justify.svg);
+}
+
+.actions i.disconnect {
+  background-image: url(images/icons/plug.svg);
+}
+
+.actions i.connect {
+  background-image: url(images/icons/plug-fill.svg);
+}
+
+.table-cell-action-button-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+
+.table-cell-action-button {
+  background-color: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  position: relative;
+  border-radius: 15px;
+  color: #222;
+  display: inline-block;
+  cursor: pointer;
+}
+
+i.chevron-down {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url(images/icons/chevron-down.svg);
+}
+
+.action-button {
+  background-color: #eee;
+  border: 0;
+  padding: 8px 12px;
+  position: relative;
+  margin-left: 5px;
+  border-radius: 15px;
+  color: #222;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.action-button:hover {
+  background-color: #ddd;
+  color: #000;
+}
+
+.action-button-mic.active {
+  animation: mic-pulsate-color 3s infinite;
+}
+
+button.action-button:disabled {
+  opacity: 0.6;
+  background: #eee;
+  cursor: not-allowed;
+}
+
+@keyframes mic-pulsate-color {
+  0% {
+    background-color: #ffdcdc;
+  }
+
+  50% {
+    background-color: #ff8585;
+  }
+
+  100% {
+    background-color: #ffdcdc;
+  }
+}
+
+.debug-timetravel-panel {
+  overflow: hidden;
+  padding: 0 0 10px 0;
+  margin: auto;
+  display: flex;
+}
+
+.debug-timetravel-panel-slider {
+  padding: 0;
+  flex: 8;
+}
+
+.debug-timetravel-panel-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  flex: 1;
+  color: #fff;
+  font-size: 12px;
+}
+
+.debug-timetravel-panel-button:hover {
+  text-decoration: underline;
+}
+
+.debug-timetravel-button {
+  border: 0;
+  padding: 0;
+  font-size: 12px;
+  top: 10px;
+  right: 15px;
+  position: absolute;
+  background: none;
+  color: #fff;
+}
+
+.debug-timetravel-button:hover {
+  text-decoration: underline;
+}
+
+.debug-treetype-button {
+  border: 0;
+  padding: 0;
+  font-size: 12px;
+  top: 10px;
+  right: 85px;
+  position: absolute;
+  background: none;
+  color: #fff;
+}
+
+.debug-treetype-button:hover {
+  text-decoration: underline;
+}
+
+.connecting {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 10px;
+  left: 10px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.ltr {
+  text-align: left;
+}
+
+.rtl {
+  text-align: right;
+}
+
+.toolbar {
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  padding: 4px;
+  overflow: hidden;
+}
+
+.toolbar-line{
+  display: flex;
+  vertical-align: middle;
+}
+
+button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  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 {
+  opacity: 0.2;
+}
+
+button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.toolbar .code-language {
+  width: 150px;
+}
+
+.toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+  padding-right: 10px;
+}
+
+.toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.toolbar i.chevron-down,
+.toolbar-item i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+.sticky-note-container {
+  position: absolute;
+  z-index: 9;
+  width: 120px;
+  display: inline-block;
+}
+
+.sticky-note {
+  line-height: 1;
+  text-align: left;
+  width: 120px;
+  margin: 25px;
+  padding: 20px 10px;
+  position: relative;
+  border: 1px solid #e8e8e8;
+  font-size: 24px;
+  border-bottom-right-radius: 60px 5px;
+  display: block;
+  cursor: move;
+}
+
+.sticky-note:after {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  right: -0px;
+  bottom: 20px;
+  width: 120px;
+  height: 25px;
+  background: rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.4);
+  transform: matrix(-1, -0.1, 0, 1, 0, 0);
+}
+
+.sticky-note.yellow {
+  border-top: 1px solid #fdfd86;
+  background: linear-gradient(
+    135deg,
+    #ffff88 81%,
+    #ffff88 82%,
+    #ffff88 82%,
+    #ffffc6 100%
+  );
+}
+
+.sticky-note.pink {
+  border-top: 1px solid #e7d1e4;
+  background: linear-gradient(
+    135deg,
+    #f7cbe8 81%,
+    #f7cbe8 82%,
+    #f7cbe8 82%,
+    #e7bfe1 100%
+  );
+}
+
+.sticky-note-container.dragging {
+  transition: none !important;
+}
+
+.sticky-note div {
+  cursor: text;
+}
+
+.sticky-note .delete {
+  border: 0;
+  background: none;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 10px;
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.sticky-note .delete:hover {
+  font-weight: bold;
+  opacity: 1;
+}
+
+.sticky-note .color {
+  border: 0;
+  background: none;
+  position: absolute;
+  top: 8px;
+  right: 25px;
+  cursor: pointer;
+  opacity: 0.5;
+}
+
+.sticky-note .color:hover {
+  opacity: 1;
+}
+
+.sticky-note .color i {
+  display: block;
+  width: 12px;
+  height: 12px;
+  background-size: contain;
+}
+
+.excalidraw-button {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+.excalidraw-button.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
+
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+.spacer {
+  letter-spacing: -2px;
+}
+
+button.item i {
+  opacity: 0.6;
+}
+
+button.item.dropdown-item-active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+button.item.dropdown-item-active i {
+  opacity: 1;
+}
+
+hr {
+  padding: 2px 2px;
+  border: none;
+  margin: 1em 0;
+  cursor: pointer;
+}
+
+hr:after {
+  content: '';
+  display: block;
+  height: 2px;
+  background-color: #ccc;
+  line-height: 2px;
+}
+
+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 {
+  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
new file mode 100644
index 0000000000..a6c0724c92
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/index.tsx
@@ -0,0 +1,133 @@
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { EditorState } from "lexical";
+import { useMemo, useCallback, useRef } from "react";
+
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import "./index.css";
+
+import Nodes from "./nodes";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
+import LinkPlugin from "./plugins/LinkPlugin";
+import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
+import SwitchEditModePlugin from "./plugins/SwitchEditModePlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import DefaultLexicalEditorTheme from "./themes/DefaultLexicalEditorTheme";
+
+type EditorStateJSONString = string;
+
+type Props = {
+  editMode?: boolean;
+  text?: EditorStateJSONString;
+  scrollableContainerId?: string;
+  onChange?: (text: EditorStateJSONString) => void;
+};
+
+const RichTextEditor: React.FC<Props> = ({
+  editMode = true,
+  text,
+  scrollableContainerId,
+  onChange,
+}) => {
+  const t = useT();
+  const editorStateJSONStringRef = useRef<EditorStateJSONString>();
+
+  const editorConfig = useMemo(
+    () => ({
+      namespace: "richtext-editor",
+      editable: false,
+      theme: DefaultLexicalEditorTheme,
+      editorState: isEditorStateJSONString(text)
+        ? text
+        : `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"${
+            text ?? ""
+          }","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}`,
+      onError(error: Error) {
+        console.error(error);
+      },
+      nodes: [...Nodes],
+    }),
+    [text],
+  );
+
+  const isEmpty = useMemo(() => isContentEmpty(text), [text]);
+
+  const onStateChange = useCallback(
+    (editorState: EditorState) => {
+      const editorStateJSONString = JSON.stringify(editorState);
+      if (editorStateJSONString !== editorStateJSONStringRef.current) {
+        editorStateJSONStringRef.current = editorStateJSONString;
+        onChange?.(editorStateJSONString);
+      }
+    },
+    [editorStateJSONStringRef, onChange],
+  );
+
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <LexicalComposer initialConfig={editorConfig}>
+      <div className="editor-container" ref={editorRef}>
+        {editMode && (
+          <ToolbarPlugin containerRef={editorRef} scrollableContainerId={scrollableContainerId} />
+        )}
+        <div className="editor-inner">
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                className={`editor-input ${isEmpty || editMode ? "editor-input-minheight" : ""}`}
+              />
+            }
+            placeholder={
+              <StyledPlaceholder className="editor-placeholder">
+                {editMode
+                  ? t("Write your story :)")
+                  : t("Double click to start to write your story :)")}
+              </StyledPlaceholder>
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <HistoryPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <AutoLinkPlugin />
+          <ListMaxIndentLevelPlugin maxDepth={7} />
+          <OnChangePlugin onChange={onStateChange} />
+          <SwitchEditModePlugin editable={editMode} />
+          <FloatingLinkEditorPlugin scrollableContainerId={scrollableContainerId} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+export default RichTextEditor;
+
+const StyledPlaceholder = styled.div`
+  color: ${({ theme }) => theme.content.weaker};
+`;
+
+const isEditorStateJSONString = (str?: string) => {
+  if (!str) return false;
+  try {
+    return JSON.parse(str).root !== undefined;
+  } catch (e) {
+    return false;
+  }
+};
+
+const isContentEmpty = (str?: string) => {
+  if (!str) return true;
+  try {
+    return JSON.parse(str).root.children[0].children[0].text === "";
+  } catch (e) {
+    return true;
+  }
+};
diff --git a/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
new file mode 100644
index 0000000000..ec75b6d75e
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/nodes/index.ts
@@ -0,0 +1,30 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { HashtagNode } from "@lexical/hashtag";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { MarkNode } from "@lexical/mark";
+import { OverflowNode } from "@lexical/overflow";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import type { Klass, LexicalNode } from "lexical";
+
+const PlaygroundNodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  HashtagNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+  HorizontalRuleNode,
+  MarkNode,
+];
+
+export default PlaygroundNodes;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
new file mode 100644
index 0000000000..fa7ff040d3
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/AutoLinkPlugin.tsx
@@ -0,0 +1,57 @@
+import { AutoLinkNode } from "@lexical/link";
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text: string) => {
+    const match = URL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: match[0],
+        attributes: {
+          target: "_blank",
+        },
+      }
+    );
+  },
+  (text: string) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`,
+        attributes: {
+          target: "_blank",
+        },
+      }
+    );
+  },
+];
+
+export default function AutoLinkPluginWithMathers() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor) return;
+    const removeNodeListener = editor.registerNodeTransform(AutoLinkNode, node => {
+      if (!node) return;
+      const dom = editor.getElementByKey(node.__key);
+      if (!dom) return;
+      dom.setAttribute("target", "_blank");
+    });
+    return () => removeNodeListener();
+  }, [editor]);
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.css b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.css
new file mode 100644
index 0000000000..0ac8b50935
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.css
@@ -0,0 +1,41 @@
+.link-editor {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
new file mode 100644
index 0000000000..dc14f6a39b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/FloatingLinkEditorPlugin/index.tsx
@@ -0,0 +1,313 @@
+import "./index.css";
+
+import { $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  GridSelection,
+  KEY_ESCAPE_COMMAND,
+  LexicalEditor,
+  NodeSelection,
+  RangeSelection,
+  SELECTION_CHANGE_COMMAND,
+} from "lexical";
+import { Dispatch, useCallback, useEffect, useRef, useState } from "react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
+import { sanitizeUrl } from "../../utils/url";
+
+function FloatingLinkEditor({
+  editor,
+  isLink,
+  setIsLink,
+  anchorElem,
+  scrollableContainerId,
+}: {
+  editor: LexicalEditor;
+  isLink: boolean;
+  setIsLink: Dispatch<boolean>;
+  anchorElem: HTMLElement;
+  scrollableContainerId?: string;
+}): JSX.Element {
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [editedLinkUrl, setEditedLinkUrl] = useState("");
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<
+    RangeSelection | GridSelection | NodeSelection | null
+  >(null);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl("");
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+
+    if (
+      selection !== null &&
+      nativeSelection !== null &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode) &&
+      editor.isEditable()
+    ) {
+      const domRect: DOMRect | undefined =
+        nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
+      if (domRect) {
+        domRect.y += 40;
+        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      if (rootElement !== null) {
+        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
+      }
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl("");
+    }
+
+    return true;
+  }, [anchorElem, editor]);
+
+  useEffect(() => {
+    const scrollerElem =
+      document.getElementById(scrollableContainerId ?? "") ?? anchorElem.parentElement;
+
+    const update = () => {
+      editor.getEditorState().read(() => {
+        updateLinkEditor();
+      });
+    };
+
+    window.addEventListener("resize", update);
+
+    if (scrollerElem) {
+      scrollerElem.addEventListener("scroll", update);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+
+      if (scrollerElem) {
+        scrollerElem.removeEventListener("scroll", update);
+      }
+    };
+  }, [anchorElem.parentElement, editor, scrollableContainerId, updateLinkEditor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        () => {
+          if (isLink) {
+            setIsLink(false);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_HIGH,
+      ),
+    );
+  }, [editor, updateLinkEditor, setIsLink, isLink]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  const monitorInputInteraction = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleLinkSubmission();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setEditMode(false);
+    }
+  };
+
+  const handleLinkSubmission = () => {
+    if (lastSelection !== null) {
+      if (linkUrl !== "") {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+      }
+      setEditMode(false);
+    }
+  };
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {!isLink ? null : isEditMode ? (
+        <>
+          <input
+            ref={inputRef}
+            className="link-input"
+            value={editedLinkUrl}
+            onChange={event => {
+              setEditedLinkUrl(event.target.value);
+            }}
+            onKeyDown={event => {
+              monitorInputInteraction(event);
+            }}
+          />
+          <div>
+            <div
+              className="link-cancel"
+              role="button"
+              tabIndex={0}
+              onMouseDown={event => event.preventDefault()}
+              onClick={() => {
+                setEditMode(false);
+              }}
+            />
+
+            <div
+              className="link-confirm"
+              role="button"
+              tabIndex={0}
+              onMouseDown={event => event.preventDefault()}
+              onClick={handleLinkSubmission}
+            />
+          </div>
+        </>
+      ) : (
+        <div className="link-view">
+          <a href={sanitizeUrl(linkUrl)} target="_blank" rel="noopener noreferrer">
+            {linkUrl}
+          </a>
+          <div
+            className="link-edit"
+            role="button"
+            tabIndex={0}
+            onMouseDown={event => event.preventDefault()}
+            onClick={() => {
+              setEditedLinkUrl(linkUrl);
+              setEditMode(true);
+            }}
+          />
+          <div
+            className="link-trash"
+            role="button"
+            tabIndex={0}
+            onMouseDown={event => event.preventDefault()}
+            onClick={() => {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useFloatingLinkEditorToolbar(
+  editor: LexicalEditor,
+  anchorElem: HTMLElement,
+  scrollableContainerId?: string,
+): JSX.Element | null {
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [isLink, setIsLink] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const linkParent = $findMatchingParent(node, $isLinkNode);
+      const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
+
+      // We don't want this menu to open for auto links.
+      if (linkParent != null && autoLinkParent == null) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          setActiveEditor(newEditor);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+    );
+  }, [editor, updateToolbar]);
+
+  return createPortal(
+    <FloatingLinkEditor
+      editor={activeEditor}
+      isLink={isLink}
+      anchorElem={anchorElem}
+      scrollableContainerId={scrollableContainerId}
+      setIsLink={setIsLink}
+    />,
+    anchorElem,
+  );
+}
+
+export default function FloatingLinkEditorPlugin({
+  anchorElem = document.body,
+  scrollableContainerId,
+}: {
+  anchorElem?: HTMLElement;
+  scrollableContainerId?: string;
+}): JSX.Element | null {
+  const [editor] = useLexicalComposerContext();
+  return useFloatingLinkEditorToolbar(editor, anchorElem, scrollableContainerId);
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
new file mode 100644
index 0000000000..c0116f531b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/LinkPlugin.tsx
@@ -0,0 +1,20 @@
+import { LinkNode } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { useEffect } from "react";
+
+export default function LinkOnBlankPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor) return;
+    const removeNodeListener = editor.registerNodeTransform(LinkNode, node => {
+      if (!node) return;
+      const dom = editor.getElementByKey(node.__key);
+      if (!dom) return;
+      dom.setAttribute("target", "_blank");
+    });
+    return () => removeNodeListener();
+  }, [editor]);
+  return <LinkPlugin />;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
new file mode 100644
index 0000000000..8b85d28fd7
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ListMaxIndentLevelPlugin.tsx
@@ -0,0 +1,67 @@
+import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  INDENT_CONTENT_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  RangeSelection,
+} from "lexical";
+import { useEffect } from "react";
+
+function getElementNodesInSelection(selection: RangeSelection) {
+  const nodesInSelection = selection.getNodes();
+
+  if (nodesInSelection.length === 0) {
+    return new Set([
+      selection.anchor.getNode().getParentOrThrow(),
+      selection.focus.getNode().getParentOrThrow(),
+    ]);
+  }
+
+  return new Set(nodesInSelection.map(n => ($isElementNode(n) ? n : n.getParentOrThrow())));
+}
+
+function isIndentPermitted(maxDepth: number) {
+  const selection = $getSelection();
+
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+
+  const elementNodesInSelection = getElementNodesInSelection(selection);
+
+  let totalDepth = 0;
+
+  for (const elementNode of elementNodesInSelection) {
+    if ($isListNode(elementNode)) {
+      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
+    } else if ($isListItemNode(elementNode)) {
+      const parent = elementNode.getParent();
+      if (!$isListNode(parent)) {
+        throw new Error(
+          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.",
+        );
+      }
+
+      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
+    }
+  }
+
+  return totalDepth <= maxDepth;
+}
+
+export default function ListMaxIndentLevelPlugin({ maxDepth }: { maxDepth?: number }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      INDENT_CONTENT_COMMAND,
+      () => !isIndentPermitted(maxDepth ?? 7),
+      COMMAND_PRIORITY_HIGH,
+    );
+  }, [editor, maxDepth]);
+
+  return null;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
new file mode 100644
index 0000000000..1919ae7a40
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/SwitchEditModePlugin.tsx
@@ -0,0 +1,10 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+
+export default function CodeHighlightPlugin({ editable }: { editable: boolean }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor?.setEditable(editable);
+  }, [editor, editable]);
+  return null;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
new file mode 100644
index 0000000000..6258e43767
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/plugins/ToolbarPlugin.tsx
@@ -0,0 +1,825 @@
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND,
+} from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+  $isQuoteNode,
+  HeadingTagType,
+} from "@lexical/rich-text";
+import {
+  $getSelectionStyleValueForProperty,
+  $isParentElementRTL,
+  $patchStyleText,
+  $setBlocksType,
+} from "@lexical/selection";
+import { $isTableNode } from "@lexical/table";
+import {
+  $findMatchingParent,
+  $getNearestBlockElementAncestorOrThrow,
+  $getNearestNodeOfType,
+  mergeRegister,
+} from "@lexical/utils";
+import type { ElementFormatType, LexicalEditor } from "lexical";
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  $isTextNode,
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  COMMAND_PRIORITY_CRITICAL,
+  COMMAND_PRIORITY_NORMAL,
+  DEPRECATED_$isGridSelection,
+  FORMAT_ELEMENT_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  INDENT_CONTENT_COMMAND,
+  KEY_MODIFIER_COMMAND,
+  OUTDENT_CONTENT_COMMAND,
+  REDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  UNDO_COMMAND,
+} from "lexical";
+import { useCallback, useEffect, useState, useMemo, RefObject } from "react";
+
+import { useT } from "@reearth/services/i18n";
+
+import DropDown, { DropDownItem } from "../ui/DropDown";
+import DropdownColorPicker from "../ui/DropdownColorPicker";
+import { getSelectedNode } from "../utils/getSelectedNode";
+import { sanitizeUrl } from "../utils/url";
+
+const IS_APPLE = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+
+const rootTypeToRootName = {
+  root: "Root",
+  table: "Table",
+};
+
+const FONT_FAMILY_OPTIONS: [string, string][] = [
+  ["Arial", "Arial"],
+  ["Courier New", "Courier New"],
+  ["Georgia", "Georgia"],
+  ["Times New Roman", "Times New Roman"],
+  ["Trebuchet MS", "Trebuchet MS"],
+  ["Verdana", "Verdana"],
+  ["Noto Sans JP", "Noto Sans JP"],
+];
+
+const FONT_SIZE_OPTIONS: [string, string][] = [
+  ["10px", "10px"],
+  ["11px", "11px"],
+  ["12px", "12px"],
+  ["13px", "13px"],
+  ["14px", "14px"],
+  ["15px", "15px"],
+  ["16px", "16px"],
+  ["17px", "17px"],
+  ["18px", "18px"],
+  ["19px", "19px"],
+  ["20px", "20px"],
+];
+
+function dropDownActiveClass(active: boolean) {
+  if (active) return "active dropdown-item-active";
+  else return "";
+}
+
+function BlockFormatDropDown({
+  containerRef,
+  scrollableContainerId,
+  blockTypeToBlockName,
+  editor,
+  blockType,
+  disabled = false,
+}: {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  blockTypeToBlockName: { [key: string]: string };
+  blockType: keyof typeof blockTypeToBlockName;
+  rootType: keyof typeof rootTypeToRootName;
+  editor: LexicalEditor;
+  disabled?: boolean;
+}): JSX.Element {
+  const t = useT();
+  const formatParagraph = () => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+        $setBlocksType(selection, () => $createParagraphNode());
+      }
+    });
+  };
+
+  const formatHeading = (headingSize: HeadingTagType) => {
+    if (blockType !== headingSize) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "bullet") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "number") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
+          $setBlocksType(selection, () => $createQuoteNode());
+        }
+      });
+    }
+  };
+
+  return (
+    <DropDown
+      disabled={disabled}
+      containerRef={containerRef}
+      scrollableContainerId={scrollableContainerId}
+      buttonClassName="toolbar-item block-controls"
+      buttonIconClassName={"icon block-type " + blockType}
+      buttonLabel={blockTypeToBlockName[blockType]}
+      buttonAriaLabel="Formatting options for text style">
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "paragraph")}
+        onClick={formatParagraph}>
+        <i className="icon paragraph" />
+        <span className="text">{t("Normal")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "h1")}
+        onClick={() => formatHeading("h1")}>
+        <i className="icon h1" />
+        <span className="text">{t("Heading 1")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "h2")}
+        onClick={() => formatHeading("h2")}>
+        <i className="icon h2" />
+        <span className="text">{t("Heading 2")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "h3")}
+        onClick={() => formatHeading("h3")}>
+        <i className="icon h3" />
+        <span className="text">{t("Heading 3")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "bullet")}
+        onClick={formatBulletList}>
+        <i className="icon bullet-list" />
+        <span className="text">{t("Bullet List")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "number")}
+        onClick={formatNumberedList}>
+        <i className="icon numbered-list" />
+        <span className="text">{t("Numbered List")}</span>
+      </DropDownItem>
+      <DropDownItem
+        className={"item " + dropDownActiveClass(blockType === "quote")}
+        onClick={formatQuote}>
+        <i className="icon quote" />
+        <span className="text">{t("Quote")}</span>
+      </DropDownItem>
+    </DropDown>
+  );
+}
+
+function Divider(): JSX.Element {
+  return <div className="divider" />;
+}
+
+function FontDropDown({
+  containerRef,
+  scrollableContainerId,
+  editor,
+  value,
+  style,
+  disabled = false,
+}: {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  editor: LexicalEditor;
+  value: string;
+  style: string;
+  disabled?: boolean;
+}): JSX.Element {
+  const t = useT();
+  const handleClick = useCallback(
+    (option: string) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $patchStyleText(selection, {
+            [style]: option,
+          });
+        }
+      });
+    },
+    [editor, style],
+  );
+
+  const buttonAriaLabel = useMemo(
+    () =>
+      style === "font-family"
+        ? t("Formatting options for font family")
+        : t("Formatting options for font size"),
+    [style, t],
+  );
+  return (
+    <DropDown
+      containerRef={containerRef}
+      scrollableContainerId={scrollableContainerId}
+      disabled={disabled}
+      buttonClassName={"toolbar-item " + style}
+      buttonLabel={value}
+      buttonIconClassName={style === "font-family" ? "icon block-type font-family" : ""}
+      buttonAriaLabel={buttonAriaLabel}>
+      {(style === "font-family" ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (
+        <DropDownItem
+          className={`item ${dropDownActiveClass(value === option)} ${
+            style === "font-size" ? "fontsize-item" : ""
+          }`}
+          onClick={() => handleClick(option)}
+          key={option}>
+          <span className="text">{text}</span>
+        </DropDownItem>
+      ))}
+    </DropDown>
+  );
+}
+
+function ElementFormatDropdown({
+  containerRef,
+  scrollableContainerId,
+  editor,
+  value,
+  isRTL,
+  disabled = false,
+}: {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  editor: LexicalEditor;
+  value: ElementFormatType;
+  isRTL: boolean;
+  disabled: boolean;
+}) {
+  const t = useT();
+
+  const formatOptions: {
+    [key: string]: { icon: string; name: string };
+  } = useMemo(
+    () => ({
+      center: {
+        icon: "center-align",
+        name: t("Center Align"),
+      },
+      justify: {
+        icon: "justify-align",
+        name: t("Justify Align"),
+      },
+      left: {
+        icon: "left-align",
+        name: t("Left Align"),
+      },
+      right: {
+        icon: "right-align",
+        name: t("Right Align"),
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <DropDown
+      containerRef={containerRef}
+      scrollableContainerId={scrollableContainerId}
+      disabled={disabled}
+      buttonLabel={formatOptions[value].name}
+      buttonIconClassName={`icon ${formatOptions[value].icon}`}
+      buttonClassName="toolbar-item spaced alignment"
+      buttonAriaLabel="Formatting options for text alignment">
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+        }}
+        className="item">
+        <i className="icon left-align" />
+        <span className="text">{t("Left Align")}</span>
+      </DropDownItem>
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+        }}
+        className="item">
+        <i className="icon center-align" />
+        <span className="text">{t("Center Align")}</span>
+      </DropDownItem>
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+        }}
+        className="item">
+        <i className="icon right-align" />
+        <span className="text">{t("Right Align")}</span>
+      </DropDownItem>
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+        }}
+        className="item">
+        <i className="icon justify-align" />
+        <span className="text">{t("Justify Align")}</span>
+      </DropDownItem>
+      <Divider />
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+        }}
+        className="item">
+        <i className={"icon " + (isRTL ? "indent" : "outdent")} />
+        <span className="text">{t("Outdent")}</span>
+      </DropDownItem>
+      <DropDownItem
+        onClick={() => {
+          editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+        }}
+        className="item">
+        <i className={"icon " + (isRTL ? "outdent" : "indent")} />
+        <span className="text">{t("Indent")}</span>
+      </DropDownItem>
+    </DropDown>
+  );
+}
+
+export default function ToolbarPlugin({
+  containerRef,
+  scrollableContainerId,
+}: {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const [activeEditor, setActiveEditor] = useState(editor);
+  const [blockType, setBlockType] = useState<keyof typeof blockTypeToBlockName>("paragraph");
+  const [rootType, setRootType] = useState<keyof typeof rootTypeToRootName>("root");
+  const [fontSize, setFontSize] = useState<string>("15px");
+  const [fontColor, setFontColor] = useState<string>("#000");
+  const [bgColor, setBgColor] = useState<string>("#fff");
+  const [fontFamily, setFontFamily] = useState<string>("Arial");
+  const [elementFormat, setElementFormat] = useState<ElementFormatType>("left");
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isSubscript, setIsSubscript] = useState(false);
+  const [isSuperscript, setIsSuperscript] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [isRTL, setIsRTL] = useState(false);
+  const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+  const t = useT();
+
+  const blockTypeToBlockName = useMemo(
+    () => ({
+      paragraph: t("Normal"),
+      h1: t("Heading 1"),
+      h2: t("Heading 2"),
+      h3: t("Heading 3"),
+      bullet: t("Bulleted List"),
+      number: t("Numbered List"),
+      quote: t("Quote"),
+    }),
+    [t],
+  );
+
+  const $updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      let element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : $findMatchingParent(anchorNode, e => {
+              const parent = e.getParent();
+              return parent !== null && $isRootOrShadowRoot(parent);
+            });
+
+      if (element === null) {
+        element = anchorNode.getTopLevelElementOrThrow();
+      }
+
+      const elementKey = element.getKey();
+      const elementDOM = activeEditor.getElementByKey(elementKey);
+
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsSubscript(selection.hasFormat("subscript"));
+      setIsSuperscript(selection.hasFormat("superscript"));
+      setIsCode(selection.hasFormat("code"));
+      setIsRTL($isParentElementRTL(selection));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+
+      const tableNode = $findMatchingParent(node, $isTableNode);
+      if ($isTableNode(tableNode)) {
+        setRootType("table");
+      } else {
+        setRootType("root");
+      }
+
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
+          const type = parentList ? parentList.getListType() : element.getListType();
+          if (type in blockTypeToBlockName) {
+            setBlockType(type as keyof typeof blockTypeToBlockName);
+          }
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          if (type in blockTypeToBlockName) {
+            setBlockType(type as keyof typeof blockTypeToBlockName);
+          }
+        }
+      }
+      // Handle buttons
+      setFontSize($getSelectionStyleValueForProperty(selection, "font-size", "15px"));
+      setFontColor($getSelectionStyleValueForProperty(selection, "color", "#000"));
+      setBgColor($getSelectionStyleValueForProperty(selection, "background-color", "#fff"));
+      setFontFamily($getSelectionStyleValueForProperty(selection, "font-family", "Arial"));
+      setElementFormat(
+        ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) || "left",
+      );
+    }
+  }, [activeEditor, blockTypeToBlockName]);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        $updateToolbar();
+        setActiveEditor(newEditor);
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL,
+    );
+  }, [editor, $updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerEditableListener(editable => {
+        setIsEditable(editable);
+      }),
+      activeEditor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          $updateToolbar();
+        });
+      }),
+      activeEditor.registerCommand<boolean>(
+        CAN_UNDO_COMMAND,
+        payload => {
+          setCanUndo(payload);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+      activeEditor.registerCommand<boolean>(
+        CAN_REDO_COMMAND,
+        payload => {
+          setCanRedo(payload);
+          return false;
+        },
+        COMMAND_PRIORITY_CRITICAL,
+      ),
+    );
+  }, [$updateToolbar, activeEditor, editor]);
+
+  useEffect(() => {
+    return activeEditor.registerCommand(
+      KEY_MODIFIER_COMMAND,
+      payload => {
+        const event: KeyboardEvent = payload;
+        const { code, ctrlKey, metaKey } = event;
+
+        if (code === "KeyK" && (ctrlKey || metaKey)) {
+          event.preventDefault();
+          return activeEditor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_NORMAL,
+    );
+  }, [activeEditor, isLink]);
+
+  const applyStyleText = useCallback(
+    (styles: Record<string, string>) => {
+      activeEditor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $patchStyleText(selection, styles);
+        }
+      });
+    },
+    [activeEditor],
+  );
+
+  const clearFormatting = useCallback(() => {
+    activeEditor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        const anchor = selection.anchor;
+        const focus = selection.focus;
+        const nodes = selection.getNodes();
+
+        if (anchor.key === focus.key && anchor.offset === focus.offset) {
+          return;
+        }
+
+        nodes.forEach((node, idx) => {
+          // We split the first and last node by the selection
+          // So that we don't format unselected text inside those nodes
+          if ($isTextNode(node)) {
+            if (idx === 0 && anchor.offset !== 0) {
+              node = node.splitText(anchor.offset)[1] || node;
+            }
+            if (idx === nodes.length - 1) {
+              node = node.splitText(focus.offset)[0] || node;
+            }
+
+            if (node.__style !== "") {
+              node.setStyle("");
+            }
+            if (node.__format !== 0) {
+              node.setFormat(0);
+              $getNearestBlockElementAncestorOrThrow(node).setFormat("");
+            }
+          } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+            node.replace($createParagraphNode(), true);
+          } else if ($isDecoratorBlockNode(node)) {
+            node.setFormat("");
+          }
+        });
+      }
+    });
+  }, [activeEditor]);
+
+  const onFontColorSelect = useCallback(
+    (value: string) => {
+      applyStyleText({ color: value });
+    },
+    [applyStyleText],
+  );
+
+  const onBgColorSelect = useCallback(
+    (value: string) => {
+      applyStyleText({ "background-color": value });
+    },
+    [applyStyleText],
+  );
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  return (
+    <div className="toolbar">
+      <div className="toolbar-line">
+        <button
+          disabled={!canUndo || !isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(UNDO_COMMAND, undefined);
+          }}
+          title={IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)"}
+          type="button"
+          className="toolbar-item spaced"
+          aria-label="Undo">
+          <i className="format undo" />
+        </button>
+        <button
+          disabled={!canRedo || !isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(REDO_COMMAND, undefined);
+          }}
+          title={IS_APPLE ? "Redo (⌘Y)" : "Redo (Ctrl+Y)"}
+          type="button"
+          className="toolbar-item"
+          aria-label="Redo">
+          <i className="format redo" />
+        </button>
+        <Divider />
+        {blockType in blockTypeToBlockName && activeEditor === editor && (
+          <>
+            <BlockFormatDropDown
+              containerRef={containerRef}
+              scrollableContainerId={scrollableContainerId}
+              disabled={!isEditable}
+              blockType={blockType}
+              rootType={rootType}
+              editor={editor}
+              blockTypeToBlockName={blockTypeToBlockName}
+            />
+            <Divider />
+          </>
+        )}
+        <ElementFormatDropdown
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          value={elementFormat}
+          editor={editor}
+          isRTL={isRTL}
+        />
+      </div>
+
+      <div className="toolbar-line">
+        <FontDropDown
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          style={"font-family"}
+          value={fontFamily}
+          editor={editor}
+        />
+        <FontDropDown
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          style={"font-size"}
+          value={fontSize}
+          editor={editor}
+        />
+        <Divider />
+      </div>
+
+      <div className="toolbar-line">
+        <button
+          disabled={!isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+          }}
+          className={"toolbar-item spaced " + (isBold ? "active" : "")}
+          title={IS_APPLE ? "Bold (⌘B)" : "Bold (Ctrl+B)"}
+          type="button"
+          aria-label={`Format text as bold. Shortcut: ${IS_APPLE ? "⌘B" : "Ctrl+B"}`}>
+          <i className="format bold" />
+        </button>
+        <button
+          disabled={!isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+          }}
+          className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+          title={IS_APPLE ? "Italic (⌘I)" : "Italic (Ctrl+I)"}
+          type="button"
+          aria-label={`Format text as italics. Shortcut: ${IS_APPLE ? "⌘I" : "Ctrl+I"}`}>
+          <i className="format italic" />
+        </button>
+        <button
+          disabled={!isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+          }}
+          className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
+          title={IS_APPLE ? "Underline (⌘U)" : "Underline (Ctrl+U)"}
+          type="button"
+          aria-label={`Format text to underlined. Shortcut: ${IS_APPLE ? "⌘U" : "Ctrl+U"}`}>
+          <i className="format underline" />
+        </button>
+        <button
+          disabled={!isEditable}
+          onClick={() => {
+            activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+          }}
+          className={"toolbar-item spaced " + (isCode ? "active" : "")}
+          title={t("Insert Code Block")}
+          type="button"
+          aria-label="Insert code block">
+          <i className="format code" />
+        </button>
+        <button
+          disabled={!isEditable}
+          onClick={insertLink}
+          className={"toolbar-item spaced " + (isLink ? "active" : "")}
+          aria-label="Insert link"
+          title={t("Insert Link")}
+          type="button">
+          <i className="format link" />
+        </button>
+        <DropdownColorPicker
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          buttonClassName="toolbar-item color-picker"
+          buttonAriaLabel="Formatting text color"
+          buttonIconClassName="icon font-color"
+          color={fontColor}
+          onChange={onFontColorSelect}
+          title={t("Text Color")}
+        />
+        <DropdownColorPicker
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          buttonClassName="toolbar-item color-picker"
+          buttonAriaLabel="Formatting background color"
+          buttonIconClassName="icon bg-color"
+          color={bgColor}
+          onChange={onBgColorSelect}
+          title={t("Background Color")}
+        />
+        <DropDown
+          containerRef={containerRef}
+          scrollableContainerId={scrollableContainerId}
+          disabled={!isEditable}
+          buttonClassName="toolbar-item spaced"
+          buttonLabel=""
+          buttonAriaLabel="Formatting options for additional text styles"
+          buttonIconClassName="icon dropdown-more">
+          <DropDownItem
+            onClick={() => {
+              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+            }}
+            className={"item " + dropDownActiveClass(isStrikethrough)}
+            title="Strikethrough"
+            aria-label="Format text with a strikethrough">
+            <i className="icon strikethrough" />
+            <span className="text">{t("Strikethrough")}</span>
+          </DropDownItem>
+          <DropDownItem
+            onClick={() => {
+              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+            }}
+            className={"item " + dropDownActiveClass(isSubscript)}
+            title="Subscript"
+            aria-label="Format text with a subscript">
+            <i className="icon subscript" />
+            <span className="text">{t("Subscript")}</span>
+          </DropDownItem>
+          <DropDownItem
+            onClick={() => {
+              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+            }}
+            className={"item " + dropDownActiveClass(isSuperscript)}
+            title="Superscript"
+            aria-label="Format text with a superscript">
+            <i className="icon superscript" />
+            <span className="text">{t("Superscript")}</span>
+          </DropDownItem>
+          <DropDownItem
+            onClick={clearFormatting}
+            className="item"
+            title="Clear text formatting"
+            aria-label="Clear all text formatting">
+            <i className="icon clear" />
+            <span className="text">{t("Clear Formatting")}</span>
+          </DropDownItem>
+        </DropDown>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
new file mode 100644
index 0000000000..6884df7d3b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.css
@@ -0,0 +1,430 @@
+.DefaultLexicalEditorTheme__ltr {
+  text-align: left;
+}
+.DefaultLexicalEditorTheme__rtl {
+  text-align: right;
+}
+.DefaultLexicalEditorTheme__paragraph {
+  margin: 0;
+  position: relative;
+}
+.DefaultLexicalEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}
+.DefaultLexicalEditorTheme__h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+}
+.DefaultLexicalEditorTheme__h2 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+}
+.DefaultLexicalEditorTheme__h3 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 700;
+}
+.DefaultLexicalEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
+.DefaultLexicalEditorTheme__textBold {
+  font-weight: bold;
+}
+.DefaultLexicalEditorTheme__textItalic {
+  font-style: italic;
+}
+.DefaultLexicalEditorTheme__textUnderline {
+  text-decoration: underline;
+}
+.DefaultLexicalEditorTheme__textStrikethrough {
+  text-decoration: line-through;
+}
+.DefaultLexicalEditorTheme__textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+.DefaultLexicalEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.DefaultLexicalEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+.DefaultLexicalEditorTheme__textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.DefaultLexicalEditorTheme__hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.DefaultLexicalEditorTheme__link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+.DefaultLexicalEditorTheme__link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.DefaultLexicalEditorTheme__code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  position: relative;
+  tab-size: 2;
+}
+.DefaultLexicalEditorTheme__code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.DefaultLexicalEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: max-content;
+  margin: 30px 0;
+}
+.DefaultLexicalEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.DefaultLexicalEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.DefaultLexicalEditorTheme__tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+.DefaultLexicalEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.DefaultLexicalEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.DefaultLexicalEditorTheme__tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.DefaultLexicalEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.DefaultLexicalEditorTheme__tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.DefaultLexicalEditorTheme__tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.DefaultLexicalEditorTheme__tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.DefaultLexicalEditorTheme__tableAddColumns:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.DefaultLexicalEditorTheme__tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+.DefaultLexicalEditorTheme__tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.DefaultLexicalEditorTheme__tableAddRows:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.DefaultLexicalEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.DefaultLexicalEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.DefaultLexicalEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.DefaultLexicalEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.DefaultLexicalEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.DefaultLexicalEditorTheme__characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.DefaultLexicalEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__ul {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.DefaultLexicalEditorTheme__listItem {
+  margin: 0 32px;
+}
+.DefaultLexicalEditorTheme__listItemChecked,
+.DefaultLexicalEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.DefaultLexicalEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.DefaultLexicalEditorTheme__listItemUnchecked:before,
+.DefaultLexicalEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.DefaultLexicalEditorTheme__listItemUnchecked[dir='rtl']:before,
+.DefaultLexicalEditorTheme__listItemChecked[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+.DefaultLexicalEditorTheme__listItemUnchecked:focus:before,
+.DefaultLexicalEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.DefaultLexicalEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.DefaultLexicalEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.DefaultLexicalEditorTheme__listItemChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.DefaultLexicalEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.DefaultLexicalEditorTheme__nestedListItem:before,
+.DefaultLexicalEditorTheme__nestedListItem:after {
+  display: none;
+}
+.DefaultLexicalEditorTheme__tokenComment {
+  color: slategray;
+}
+.DefaultLexicalEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.DefaultLexicalEditorTheme__tokenProperty {
+  color: #905;
+}
+.DefaultLexicalEditorTheme__tokenSelector {
+  color: #690;
+}
+.DefaultLexicalEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.DefaultLexicalEditorTheme__tokenAttr {
+  color: #07a;
+}
+.DefaultLexicalEditorTheme__tokenVariable {
+  color: #e90;
+}
+.DefaultLexicalEditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+.DefaultLexicalEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.DefaultLexicalEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.DefaultLexicalEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.DefaultLexicalEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.DefaultLexicalEditorTheme__embedBlock {
+  user-select: none;
+}
+.DefaultLexicalEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.DefaultLexicalEditorTheme__layoutContaner {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.DefaultLexicalEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
new file mode 100644
index 0000000000..d887b12468
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/themes/DefaultLexicalEditorTheme.ts
@@ -0,0 +1,109 @@
+import type { EditorThemeClasses } from "lexical";
+
+import "./DefaultLexicalEditorTheme.css";
+
+const theme: EditorThemeClasses = {
+  blockCursor: "DefaultLexicalEditorTheme__blockCursor",
+  characterLimit: "DefaultLexicalEditorTheme__characterLimit",
+  code: "DefaultLexicalEditorTheme__code",
+  codeHighlight: {
+    atrule: "DefaultLexicalEditorTheme__tokenAttr",
+    attr: "DefaultLexicalEditorTheme__tokenAttr",
+    boolean: "DefaultLexicalEditorTheme__tokenProperty",
+    builtin: "DefaultLexicalEditorTheme__tokenSelector",
+    cdata: "DefaultLexicalEditorTheme__tokenComment",
+    char: "DefaultLexicalEditorTheme__tokenSelector",
+    class: "DefaultLexicalEditorTheme__tokenFunction",
+    "class-name": "DefaultLexicalEditorTheme__tokenFunction",
+    comment: "DefaultLexicalEditorTheme__tokenComment",
+    constant: "DefaultLexicalEditorTheme__tokenProperty",
+    deleted: "DefaultLexicalEditorTheme__tokenProperty",
+    doctype: "DefaultLexicalEditorTheme__tokenComment",
+    entity: "DefaultLexicalEditorTheme__tokenOperator",
+    function: "DefaultLexicalEditorTheme__tokenFunction",
+    important: "DefaultLexicalEditorTheme__tokenVariable",
+    inserted: "DefaultLexicalEditorTheme__tokenSelector",
+    keyword: "DefaultLexicalEditorTheme__tokenAttr",
+    namespace: "DefaultLexicalEditorTheme__tokenVariable",
+    number: "DefaultLexicalEditorTheme__tokenProperty",
+    operator: "DefaultLexicalEditorTheme__tokenOperator",
+    prolog: "DefaultLexicalEditorTheme__tokenComment",
+    property: "DefaultLexicalEditorTheme__tokenProperty",
+    punctuation: "DefaultLexicalEditorTheme__tokenPunctuation",
+    regex: "DefaultLexicalEditorTheme__tokenVariable",
+    selector: "DefaultLexicalEditorTheme__tokenSelector",
+    string: "DefaultLexicalEditorTheme__tokenSelector",
+    symbol: "DefaultLexicalEditorTheme__tokenProperty",
+    tag: "DefaultLexicalEditorTheme__tokenProperty",
+    url: "DefaultLexicalEditorTheme__tokenOperator",
+    variable: "DefaultLexicalEditorTheme__tokenVariable",
+  },
+  embedBlock: {
+    base: "DefaultLexicalEditorTheme__embedBlock",
+    focus: "DefaultLexicalEditorTheme__embedBlockFocus",
+  },
+  hashtag: "DefaultLexicalEditorTheme__hashtag",
+  heading: {
+    h1: "DefaultLexicalEditorTheme__h1",
+    h2: "DefaultLexicalEditorTheme__h2",
+    h3: "DefaultLexicalEditorTheme__h3",
+    h4: "DefaultLexicalEditorTheme__h4",
+    h5: "DefaultLexicalEditorTheme__h5",
+    h6: "DefaultLexicalEditorTheme__h6",
+  },
+  image: "editor-image",
+  indent: "DefaultLexicalEditorTheme__indent",
+  inlineImage: "inline-editor-image",
+  layoutContainer: "DefaultLexicalEditorTheme__layoutContaner",
+  layoutItem: "DefaultLexicalEditorTheme__layoutItem",
+  link: "DefaultLexicalEditorTheme__link",
+  list: {
+    listitem: "DefaultLexicalEditorTheme__listItem",
+    listitemChecked: "DefaultLexicalEditorTheme__listItemChecked",
+    listitemUnchecked: "DefaultLexicalEditorTheme__listItemUnchecked",
+    nested: {
+      listitem: "DefaultLexicalEditorTheme__nestedListItem",
+    },
+    olDepth: [
+      "DefaultLexicalEditorTheme__ol1",
+      "DefaultLexicalEditorTheme__ol2",
+      "DefaultLexicalEditorTheme__ol3",
+      "DefaultLexicalEditorTheme__ol4",
+      "DefaultLexicalEditorTheme__ol5",
+    ],
+    ul: "DefaultLexicalEditorTheme__ul",
+  },
+  ltr: "DefaultLexicalEditorTheme__ltr",
+  mark: "DefaultLexicalEditorTheme__mark",
+  markOverlap: "DefaultLexicalEditorTheme__markOverlap",
+  paragraph: "DefaultLexicalEditorTheme__paragraph",
+  quote: "DefaultLexicalEditorTheme__quote",
+  rtl: "DefaultLexicalEditorTheme__rtl",
+  table: "DefaultLexicalEditorTheme__table",
+  tableAddColumns: "DefaultLexicalEditorTheme__tableAddColumns",
+  tableAddRows: "DefaultLexicalEditorTheme__tableAddRows",
+  tableCell: "DefaultLexicalEditorTheme__tableCell",
+  tableCellActionButton: "DefaultLexicalEditorTheme__tableCellActionButton",
+  tableCellActionButtonContainer: "DefaultLexicalEditorTheme__tableCellActionButtonContainer",
+  tableCellEditing: "DefaultLexicalEditorTheme__tableCellEditing",
+  tableCellHeader: "DefaultLexicalEditorTheme__tableCellHeader",
+  tableCellPrimarySelected: "DefaultLexicalEditorTheme__tableCellPrimarySelected",
+  tableCellResizer: "DefaultLexicalEditorTheme__tableCellResizer",
+  tableCellSelected: "DefaultLexicalEditorTheme__tableCellSelected",
+  tableCellSortedIndicator: "DefaultLexicalEditorTheme__tableCellSortedIndicator",
+  tableResizeRuler: "DefaultLexicalEditorTheme__tableCellResizeRuler",
+  tableSelected: "DefaultLexicalEditorTheme__tableSelected",
+  tableSelection: "DefaultLexicalEditorTheme__tableSelection",
+  text: {
+    bold: "DefaultLexicalEditorTheme__textBold",
+    code: "DefaultLexicalEditorTheme__textCode",
+    italic: "DefaultLexicalEditorTheme__textItalic",
+    strikethrough: "DefaultLexicalEditorTheme__textStrikethrough",
+    subscript: "DefaultLexicalEditorTheme__textSubscript",
+    superscript: "DefaultLexicalEditorTheme__textSuperscript",
+    underline: "DefaultLexicalEditorTheme__textUnderline",
+    underlineStrikethrough: "DefaultLexicalEditorTheme__textUnderlineStrikethrough",
+  },
+};
+
+export default theme;
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css
new file mode 100644
index 0000000000..088681c8fc
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.css
@@ -0,0 +1,80 @@
+.color-picker-wrapper {
+  padding: 20px;
+}
+
+.color-picker-basic-color {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.color-picker-basic-color button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 150px;
+  background-image: linear-gradient(transparent, black),
+    linear-gradient(to right, white, transparent);
+  user-select: none;
+}
+.color-picker-saturation_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00000026;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 12px;
+  background-image: linear-gradient(
+    to right,
+    rgb(255, 0, 0),
+    rgb(255, 255, 0),
+    rgb(0, 255, 0),
+    rgb(0, 255, 255),
+    rgb(0, 0, 255),
+    rgb(255, 0, 255),
+    rgb(255, 0, 0)
+  );
+  user-select: none;
+  border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: #0003 0 0 0 0.5px;
+  box-sizing: border-box;
+  transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  margin-top: 15px;
+  width: 100%;
+  height: 20px;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
new file mode 100644
index 0000000000..56fd6ca62b
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/ColorPicker.tsx
@@ -0,0 +1,319 @@
+import "./ColorPicker.css";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as React from "react";
+
+import TextInput from "./TextInput";
+
+interface ColorPickerProps {
+  color: string;
+  onChange?: (color: string) => void;
+}
+
+const basicColors = [
+  "#d0021b",
+  "#f5a623",
+  "#f8e71c",
+  "#8b572a",
+  "#7ed321",
+  "#417505",
+  "#bd10e0",
+  "#9013fe",
+  "#4a90e2",
+  "#50e3c2",
+  "#b8e986",
+  "#000000",
+  "#4a4a4a",
+  "#9b9b9b",
+  "#ffffff",
+];
+
+const WIDTH = 214;
+const HEIGHT = 150;
+
+export default function ColorPicker({ color, onChange }: Readonly<ColorPickerProps>): JSX.Element {
+  const [selfColor, setSelfColor] = useState(transformColor("hex", color));
+  const [inputColor, setInputColor] = useState(color);
+  const innerDivRef = useRef(null);
+
+  const saturationPosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.s / 100) * WIDTH,
+      y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+    }),
+    [selfColor.hsv.s, selfColor.hsv.v],
+  );
+
+  const huePosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.h / 360) * WIDTH,
+    }),
+    [selfColor.hsv],
+  );
+
+  const onSetHex = (hex: string) => {
+    setInputColor(hex);
+    if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+      const newColor = transformColor("hex", hex);
+      setSelfColor(newColor);
+    }
+  };
+
+  const onMoveSaturation = ({ x, y }: Position) => {
+    const newHsv = {
+      ...selfColor.hsv,
+      s: (x / WIDTH) * 100,
+      v: 100 - (y / HEIGHT) * 100,
+    };
+    const newColor = transformColor("hsv", newHsv);
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  };
+
+  const onMoveHue = ({ x }: Position) => {
+    const newHsv = { ...selfColor.hsv, h: (x / WIDTH) * 360 };
+    const newColor = transformColor("hsv", newHsv);
+
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  };
+
+  useEffect(() => {
+    // Check if the dropdown is actually active
+    if (innerDivRef.current !== null && onChange) {
+      onChange(selfColor.hex);
+      setInputColor(selfColor.hex);
+    }
+  }, [selfColor, onChange]);
+
+  useEffect(() => {
+    if (color === undefined) return;
+    const newColor = transformColor("hex", color);
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  }, [color]);
+
+  return (
+    <div className="color-picker-wrapper" style={{ width: WIDTH }} ref={innerDivRef}>
+      <TextInput label="Hex" onChange={onSetHex} value={inputColor} />
+      <div className="color-picker-basic-color">
+        {basicColors.map(basicColor => (
+          <button
+            className={basicColor === selfColor.hex ? " active" : ""}
+            key={basicColor}
+            style={{ backgroundColor: basicColor }}
+            onClick={() => {
+              setInputColor(basicColor);
+              setSelfColor(transformColor("hex", basicColor));
+            }}
+          />
+        ))}
+      </div>
+      <MoveWrapper
+        className="color-picker-saturation"
+        style={{ backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }}
+        onChange={onMoveSaturation}>
+        <div
+          className="color-picker-saturation_cursor"
+          style={{
+            backgroundColor: selfColor.hex,
+            left: saturationPosition.x,
+            top: saturationPosition.y,
+          }}
+        />
+      </MoveWrapper>
+      <MoveWrapper className="color-picker-hue" onChange={onMoveHue}>
+        <div
+          className="color-picker-hue_cursor"
+          style={{
+            backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
+            left: huePosition.x,
+          }}
+        />
+      </MoveWrapper>
+      <div className="color-picker-color" style={{ backgroundColor: selfColor.hex }} />
+    </div>
+  );
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+interface MoveWrapperProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onChange: (position: Position) => void;
+  children: JSX.Element;
+}
+
+function MoveWrapper({ className, style, onChange, children }: MoveWrapperProps) {
+  const divRef = useRef<HTMLDivElement>(null);
+
+  const move = (e: React.MouseEvent | MouseEvent): void => {
+    if (divRef.current) {
+      const { current: div } = divRef;
+      const { width, height, left, top } = div.getBoundingClientRect();
+
+      const x = clamp(e.clientX - left, width, 0);
+      const y = clamp(e.clientY - top, height, 0);
+
+      onChange({ x, y });
+    }
+  };
+
+  const onMouseDown = (e: React.MouseEvent): void => {
+    if (e.button !== 0) return;
+
+    move(e);
+
+    const onMouseMove = (_e: MouseEvent): void => {
+      move(_e);
+    };
+
+    const onMouseUp = (_e: MouseEvent): void => {
+      document.removeEventListener("mousemove", onMouseMove, false);
+      document.removeEventListener("mouseup", onMouseUp, false);
+
+      move(_e);
+    };
+
+    document.addEventListener("mousemove", onMouseMove, false);
+    document.addEventListener("mouseup", onMouseUp, false);
+  };
+
+  return (
+    <div ref={divRef} className={className} style={style} onMouseDown={onMouseDown}>
+      {children}
+    </div>
+  );
+}
+
+function clamp(value: number, max: number, min: number) {
+  return value > max ? max : value < min ? min : value;
+}
+
+interface RGB {
+  b: number;
+  g: number;
+  r: number;
+}
+interface HSV {
+  h: number;
+  s: number;
+  v: number;
+}
+interface Color {
+  hex: string;
+  hsv: HSV;
+  rgb: RGB;
+}
+
+export function toHex(value: string): string {
+  if (!value.startsWith("#")) {
+    const ctx = document.createElement("canvas").getContext("2d");
+
+    if (!ctx) {
+      throw new Error("2d context not supported or canvas already initialized");
+    }
+
+    ctx.fillStyle = value;
+
+    return ctx.fillStyle;
+  } else if (value.length === 4 || value.length === 5) {
+    value = value
+      .split("")
+      .map((v, i) => (i ? v + v : "#"))
+      .join("");
+
+    return value;
+  } else if (value.length === 7 || value.length === 9) {
+    return value;
+  }
+
+  return "#000000";
+}
+
+function hex2rgb(hex: string): RGB {
+  const rbgArr = (
+    hex
+      .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => "#" + r + r + g + g + b + b)
+      .substring(1)
+      .match(/.{2}/g) || []
+  ).map(x => parseInt(x, 16));
+
+  return {
+    b: rbgArr[2],
+    g: rbgArr[1],
+    r: rbgArr[0],
+  };
+}
+
+function rgb2hsv({ r, g, b }: RGB): HSV {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const d = max - Math.min(r, g, b);
+
+  const h = d
+    ? (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) *
+      60
+    : 0;
+  const s = max ? (d / max) * 100 : 0;
+  const v = max * 100;
+
+  return { h, s, v };
+}
+
+function hsv2rgb({ h, s, v }: HSV): RGB {
+  s /= 100;
+  v /= 100;
+
+  const i = ~~(h / 60);
+  const f = h / 60 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - s * f);
+  const t = v * (1 - s * (1 - f));
+  const index = i % 6;
+
+  const r = Math.round([v, q, p, p, t, v][index] * 255);
+  const g = Math.round([t, v, v, q, p, p][index] * 255);
+  const b = Math.round([p, p, t, v, v, q][index] * 255);
+
+  return { b, g, r };
+}
+
+function rgb2hex({ b, g, r }: RGB): string {
+  return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("");
+}
+
+function transformColor<M extends keyof Color, C extends Color[M]>(format: M, color: C): Color {
+  let hex: Color["hex"] = toHex("#121212");
+  let rgb: Color["rgb"] = hex2rgb(hex);
+  let hsv: Color["hsv"] = rgb2hsv(rgb);
+
+  if (format === "hex") {
+    const value = color as Color["hex"];
+
+    hex = toHex(value);
+    rgb = hex2rgb(hex);
+    hsv = rgb2hsv(rgb);
+  } else if (format === "rgb") {
+    const value = color as Color["rgb"];
+
+    rgb = value;
+    hex = rgb2hex(rgb);
+    hsv = rgb2hsv(rgb);
+  } else if (format === "hsv") {
+    const value = color as Color["hsv"];
+
+    hsv = value;
+    rgb = hsv2rgb(hsv);
+    hex = rgb2hex(rgb);
+  }
+
+  return { hex, hsv, rgb };
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
new file mode 100644
index 0000000000..80847cdd9a
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/DropDown.tsx
@@ -0,0 +1,232 @@
+import * as React from "react";
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+type DropDownContextType = {
+  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
+};
+
+const DropDownContext = React.createContext<DropDownContextType | null>(null);
+
+const dropDownPadding = 4;
+
+export function DropDownItem({
+  children,
+  className,
+  onClick,
+  title,
+}: {
+  children: React.ReactNode;
+  className: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  title?: string;
+}) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const dropDownContext = React.useContext(DropDownContext);
+
+  if (dropDownContext === null) {
+    throw new Error("DropDownItem must be used within a DropDown");
+  }
+
+  const { registerItem } = dropDownContext;
+
+  useEffect(() => {
+    if (ref?.current) {
+      registerItem(ref);
+    }
+  }, [ref, registerItem]);
+
+  return (
+    <button className={className} onClick={onClick} ref={ref} title={title} type="button">
+      {children}
+    </button>
+  );
+}
+
+function DropDownItems({
+  children,
+  dropDownRef,
+  onClose,
+}: {
+  children: React.ReactNode;
+  dropDownRef: React.Ref<HTMLDivElement>;
+  onClose: () => void;
+}) {
+  const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
+  const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();
+
+  const registerItem = useCallback(
+    (itemRef: React.RefObject<HTMLButtonElement>) => {
+      setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));
+    },
+    [setItems],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!items) return;
+
+    const key = event.key;
+
+    if (["Escape", "ArrowUp", "ArrowDown", "Tab"].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (key === "Escape" || key === "Tab") {
+      onClose();
+    } else if (key === "ArrowUp") {
+      setHighlightedItem(prev => {
+        if (!prev) return items[0];
+        const index = items.indexOf(prev) - 1;
+        return items[index === -1 ? items.length - 1 : index];
+      });
+    } else if (key === "ArrowDown") {
+      setHighlightedItem(prev => {
+        if (!prev) return items[0];
+        return items[items.indexOf(prev) + 1];
+      });
+    }
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      registerItem,
+    }),
+    [registerItem],
+  );
+
+  useEffect(() => {
+    if (items && !highlightedItem) {
+      setHighlightedItem(items[0]);
+    }
+
+    if (highlightedItem?.current) {
+      highlightedItem.current.focus();
+    }
+  }, [items, highlightedItem]);
+
+  return (
+    <DropDownContext.Provider value={contextValue}>
+      <div className="dropdown" ref={dropDownRef} onKeyDown={handleKeyDown}>
+        {children}
+      </div>
+    </DropDownContext.Provider>
+  );
+}
+
+export default function DropDown({
+  disabled = false,
+  containerRef,
+  scrollableContainerId,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonClassName,
+  buttonIconClassName,
+  children,
+  stopCloseOnClickSelf,
+}: {
+  disabled?: boolean;
+  containerRef?: React.RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  buttonAriaLabel?: string;
+  buttonClassName: string;
+  buttonIconClassName?: string;
+  buttonLabel?: string;
+  children: ReactNode;
+  stopCloseOnClickSelf?: boolean;
+}): JSX.Element {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [showDropDown, setShowDropDown] = useState(false);
+
+  const handleClose = () => {
+    setShowDropDown(false);
+    if (buttonRef?.current) {
+      buttonRef.current.focus();
+    }
+  };
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (showDropDown && button !== null && dropDown !== null) {
+      const { top, left } = button.getBoundingClientRect();
+      dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
+      dropDown.style.left = `${Math.min(left, window.innerWidth - dropDown.offsetWidth - 20)}px`;
+    }
+  }, [dropDownRef, buttonRef, showDropDown]);
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    const container = containerRef?.current;
+    if (!button || !showDropDown || !container) return;
+
+    const handle = (event: MouseEvent) => {
+      const target = event.target;
+      if (stopCloseOnClickSelf) {
+        if (dropDownRef.current?.contains(target as Node)) return;
+      }
+      if (!button.contains(target as Node)) {
+        setShowDropDown(false);
+      }
+    };
+    container.addEventListener("click", handle);
+
+    return () => {
+      container.removeEventListener("click", handle);
+    };
+  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf, containerRef]);
+
+  useEffect(() => {
+    const container = scrollableContainerId
+      ? document.getElementById(scrollableContainerId)
+      : document.body;
+    if (!container) return;
+
+    const handleButtonPositionUpdate = () => {
+      if (showDropDown) {
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (button !== null && dropDown !== null) {
+          const { top } = button.getBoundingClientRect();
+          const newPosition = top + button.offsetHeight + dropDownPadding;
+          if (newPosition !== dropDown.getBoundingClientRect().top) {
+            dropDown.style.top = `${newPosition}px`;
+          }
+        }
+      }
+    };
+
+    container.addEventListener("scroll", handleButtonPositionUpdate);
+
+    return () => {
+      container.removeEventListener("scroll", handleButtonPositionUpdate);
+    };
+  }, [buttonRef, dropDownRef, showDropDown, scrollableContainerId]);
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={buttonAriaLabel || buttonLabel}
+        className={buttonClassName}
+        onClick={() => setShowDropDown(!showDropDown)}
+        ref={buttonRef}>
+        {buttonIconClassName && <span className={buttonIconClassName} />}
+        {buttonLabel && <span className="text dropdown-button-text">{buttonLabel}</span>}
+        <i className="chevron-down" />
+      </button>
+
+      {showDropDown &&
+        containerRef?.current &&
+        createPortal(
+          <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
+            {children}
+          </DropDownItems>,
+          containerRef.current,
+        )}
+    </>
+  );
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx
new file mode 100644
index 0000000000..110676d6bf
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/DropdownColorPicker.tsx
@@ -0,0 +1,39 @@
+import { RefObject } from "react";
+
+import ColorPicker from "./ColorPicker";
+import DropDown from "./DropDown";
+
+type Props = {
+  containerRef: RefObject<HTMLDivElement>;
+  scrollableContainerId?: string;
+  disabled?: boolean;
+  buttonAriaLabel?: string;
+  buttonClassName: string;
+  buttonIconClassName?: string;
+  buttonLabel?: string;
+  title?: string;
+  stopCloseOnClickSelf?: boolean;
+  color: string;
+  onChange?: (color: string) => void;
+};
+
+export default function DropdownColorPicker({
+  containerRef,
+  scrollableContainerId,
+  disabled = false,
+  stopCloseOnClickSelf = true,
+  color,
+  onChange,
+  ...rest
+}: Props) {
+  return (
+    <DropDown
+      {...rest}
+      disabled={disabled}
+      containerRef={containerRef}
+      scrollableContainerId={scrollableContainerId}
+      stopCloseOnClickSelf={stopCloseOnClickSelf}>
+      <ColorPicker color={color} onChange={onChange} />
+    </DropDown>
+  );
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css b/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css
new file mode 100644
index 0000000000..3000af7186
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/Input.css
@@ -0,0 +1,23 @@
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
new file mode 100644
index 0000000000..3139c978e3
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/ui/TextInput.tsx
@@ -0,0 +1,37 @@
+import "./Input.css";
+
+import { HTMLInputTypeAttribute } from "react";
+
+type Props = Readonly<{
+  "data-test-id"?: string;
+  label: string;
+  onChange: (val: string) => void;
+  placeholder?: string;
+  value: string;
+  type?: HTMLInputTypeAttribute;
+}>;
+
+export default function TextInput({
+  label,
+  value,
+  onChange,
+  placeholder = "",
+  "data-test-id": dataTestId,
+  type = "text",
+}: Props): JSX.Element {
+  return (
+    <div className="Input__wrapper">
+      <label className="Input__label">{label}</label>
+      <input
+        type={type}
+        className="Input__input"
+        placeholder={placeholder}
+        value={value}
+        onChange={e => {
+          onChange(e.target.value);
+        }}
+        data-test-id={dataTestId}
+      />
+    </div>
+  );
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
new file mode 100644
index 0000000000..78a99a1685
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/getSelectedNode.ts
@@ -0,0 +1,18 @@
+import { $isAtNodeEnd } from "@lexical/selection";
+import { ElementNode, RangeSelection, TextNode } from "lexical";
+
+export function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+  }
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts
new file mode 100644
index 0000000000..7d2216752f
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/setFloatingElemPositionForLinkEditor.ts
@@ -0,0 +1,39 @@
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPositionForLinkEditor(
+  targetRect: ClientRect | null,
+  floatingElem: HTMLElement,
+  anchorElem: HTMLElement,
+  verticalGap: number = VERTICAL_GAP,
+  horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+  const scrollerElem = anchorElem.parentElement;
+
+  if (targetRect === null || !scrollerElem) {
+    floatingElem.style.opacity = "0";
+    floatingElem.style.transform = "translate(-10000px, -10000px)";
+    return;
+  }
+
+  const floatingElemRect = floatingElem.getBoundingClientRect();
+  const anchorElementRect = anchorElem.getBoundingClientRect();
+  const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+  let top = targetRect.top - verticalGap;
+  let left = targetRect.left - horizontalOffset;
+
+  if (top < editorScrollerRect.top) {
+    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  }
+
+  if (left + floatingElemRect.width > editorScrollerRect.right) {
+    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  }
+
+  top -= anchorElementRect.top;
+  left -= anchorElementRect.left;
+
+  floatingElem.style.opacity = "1";
+  floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
diff --git a/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
new file mode 100644
index 0000000000..5e026ddd52
--- /dev/null
+++ b/web/src/beta/lib/lexical/RichTextEditor/utils/url.ts
@@ -0,0 +1,24 @@
+const SUPPORTED_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "sms:", "tel:"]);
+
+export function sanitizeUrl(url: string): string {
+  try {
+    const parsedUrl = new URL(url);
+    // eslint-disable-next-line no-script-url
+    if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+      return "about:blank";
+    }
+  } catch {
+    return url;
+  }
+  return url;
+}
+
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp = new RegExp(
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+);
+export function validateUrl(url: string): boolean {
+  // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+  // Maybe show a dialog where they user can type the URL before inserting it.
+  return url === "https://" || urlRegExp.test(url);
+}
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index ffe3259d39..e80d2c0dcd 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -1,6 +1,8 @@
 Color Picker: ''
 Cancel: Cancel
 Apply: Apply
+You have passed the maximum value.: You have passed the maximum value.
+You have passed the minimum value.: You have passed the minimum value.
 Not found: Not found
 Padding settings: Padding settings
 Remove: Remove
@@ -152,6 +154,32 @@ Play timeline: Play timeline
 ellipse: ellipse
 Open timeline: Open timeline
 Drop here: Drop here
+Write your story :): Write your story :)
+Double click to start to write your story :): Double click to start to write your story :)
+Normal: Normal
+Heading 1: Heading 1
+Heading 2: Heading 2
+Heading 3: Heading 3
+Bullet List: Bullet List
+Numbered List: Numbered List
+Quote: Quote
+Formatting options for font family: Formatting options for font family
+Formatting options for font size: Formatting options for font size
+Center Align: Center Align
+Justify Align: Justify Align
+Left Align: Left Align
+Right Align: Right Align
+Outdent: Outdent
+Indent: Indent
+Bulleted List: Bulleted List
+Insert Code Block: Insert Code Block
+Insert Link: Insert Link
+Text Color: Text Color
+Background Color: Background Color
+Strikethrough: Strikethrough
+Subscript: Subscript
+Superscript: Superscript
+Clear Formatting: Clear Formatting
 not set: not set
 Welcome: Welcome
 Log in to Re:Earth to continue.: Log in to Re:Earth to continue.
@@ -305,7 +333,6 @@ List: List
 Padding: ''
 Gap Spacing: ''
 Align Center: ''
-Background Color: ''
 Enable Editor Mode: Enable Editor Mode
 Close: Close
 Add a tag group: Add a tag group
@@ -454,5 +481,3 @@ Failed to update widget.: Failed to update widget.
 Failed to remove widget.: Failed to remove widget.
 Failed to update widget alignment.: Failed to update widget alignment.
 Failed to update the widget align system.: Failed to update the widget align system.
-You have passed the maximum value.: You have passed the maximum value.
-You have passed the minimum value.: You have passed the minimum value.
\ No newline at end of file
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 96d4a8d3f2..679da7f255 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -1,6 +1,8 @@
 Color Picker: カラーピッカー
 Cancel: キャンセル
 Apply: Apply
+You have passed the maximum value.: You have passed the maximum value.
+You have passed the minimum value.: You have passed the minimum value.
 Not found: ページが見つかりません
 Padding settings: ''
 Remove: 削除
@@ -133,6 +135,32 @@ Play timeline: タイムラインを再生する
 ellipse: 円錐
 Open timeline: タイムラインを開く
 Drop here: ここにドロップ
+Write your story :): ''
+Double click to start to write your story :): ''
+Normal: ''
+Heading 1: ''
+Heading 2: ''
+Heading 3: ''
+Bullet List: ''
+Numbered List: ''
+Quote: ''
+Formatting options for font family: ''
+Formatting options for font size: ''
+Center Align: ''
+Justify Align: ''
+Left Align: ''
+Right Align: ''
+Outdent: ''
+Indent: ''
+Bulleted List: ''
+Insert Code Block: ''
+Insert Link: ''
+Text Color: ''
+Background Color: 背景色
+Strikethrough: ''
+Subscript: ''
+Superscript: ''
+Clear Formatting: ''
 not set: 未設定
 Welcome: ようこそ
 Log in to Re:Earth to continue.: Re:Earthにログイン
@@ -274,7 +302,6 @@ List: リスト
 Padding: 余白
 Gap Spacing: 間隔
 Align Center: 中央に配置
-Background Color: 背景色
 Enable Editor Mode: ウィジェットの配置を編集
 Close: 閉じる
 Add a tag group: タググループを追加
@@ -415,5 +442,3 @@ Failed to update widget.: ウィジェットのアップデートに失敗しま
 Failed to remove widget.: ウィジェットの削除に失敗しました。
 Failed to update widget alignment.: ウィジェットのアラインメントのアップデートに失敗しました。
 Failed to update the widget align system.: ウィジェットのアラインシステムのアップデートに失敗しました。
-You have passed the maximum value.: You have passed the maximum value.
-You have passed the minimum value.: You have passed the minimum value.
\ No newline at end of file
diff --git a/web/yarn.lock b/web/yarn.lock
index 156f5d5400..f8ca1d6ed5 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -4566,6 +4566,160 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@lexical/clipboard@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/clipboard/-/clipboard-0.12.0.tgz#db81dfe883430186f710d18bfc4b55c78ddc664a"
+  integrity sha512-nCoZku0G8OwzY92yeDBsEZW0BpbJoM/QtvzGAgLZ32+3dOR7JmcnWSXPGusm8ogCEOhMAL8aqqvGrFNZ++YFtg==
+  dependencies:
+    "@lexical/html" "0.12.0"
+    "@lexical/list" "0.12.0"
+    "@lexical/selection" "0.12.0"
+    "@lexical/utils" "0.12.0"
+
+"@lexical/code@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/code/-/code-0.12.0.tgz#e0ae57ec7ed9008b410e77dbccd31f975d688b36"
+  integrity sha512-Mdq1lTQV6KIrmF7O+LE9A57gI2T0PTfC1/uWZ7ikxVpSFVt10mn+8WSyAk7kO+ltEbL/aW7PJHEqMsuEfJH7kw==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+    prismjs "^1.27.0"
+
+"@lexical/dragon@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/dragon/-/dragon-0.12.0.tgz#67df1527f6d215fa52e00c219b243cadc000a59a"
+  integrity sha512-3orn5Hq68i5MjcqA9cY3Ed1AMJDQGWkWlPv37gxgnTbpj0hhipwT2W7G2mVeWNfKvSd9OZLXnz6jYCHFmkBdww==
+
+"@lexical/hashtag@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/hashtag/-/hashtag-0.12.0.tgz#ea4809da38a6c9053aa0859f1ffd42da416b4463"
+  integrity sha512-qkryF9nCNCrJy2SjDAPxOfJl+SsvWLb8axrxMC9To3uC7RwJ1HsbaJ5oFK/6NCtkB+MjtYy7o6jGCfvdXDqi9g==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/history@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/history/-/history-0.12.0.tgz#f7d62fedcc2c96dda5bf26f7af923ec1de4f68a6"
+  integrity sha512-dK8jDnqF66BdEg1hrfLI1z4CGOIXmx7MBr1x8aC1u2pUaz+GsWV56UOvahAPmTwP6K1ZyMSYy8NM9BLxjRiEVg==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/html@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/html/-/html-0.12.0.tgz#008929ef2ee7114772c00bb1fd07df721f0e6e53"
+  integrity sha512-90KKtMDMElS7AD3nYzknYe6eiu7/lw1neXFWc74XI4YLiYBD14Pb/FrEvGnQ+P1voGtr4sPk3KEf8huHdM9sJw==
+  dependencies:
+    "@lexical/selection" "0.12.0"
+
+"@lexical/link@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/link/-/link-0.12.0.tgz#6d5757ae0694d3e09cfac16b8220232ab29bc67a"
+  integrity sha512-5oGvOgUi+IghnHtQ7bo0yPkgYW7FdT0YMPj2Ucsje8srt8BaZKgbrm7D/ZsXPV4XljVJZce7HLT46KJzs2SDYA==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/list@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/list/-/list-0.12.0.tgz#076a99f6a7541db49cf139d71fc5cd1b555d3b09"
+  integrity sha512-l+5H753UQpmsqD8aEZ/LZd3YNysZ1SH693aEIgM1VIKmTftzd9+MTcqovnLNBzZQ98a5e4i1xgapOGIWkJ/MrQ==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/mark@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/mark/-/mark-0.12.0.tgz#49829cb5e5e30580f3b4a8d6f9994bf458c36518"
+  integrity sha512-69OzKajOpR96tIBwaXQCaFaWh4thBTZmRa1tVcZ3CpA95OjP2715BGP2+k0yK5yaZVCA79WcyjMp3Xr88DXNkw==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/markdown@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/markdown/-/markdown-0.12.0.tgz#fe6ce4e5316d7b97e19aec3001b5022fbc23058a"
+  integrity sha512-Qx3ZjXVxH4Nsp87RYdOsmxZc007qN24DGursw9ljaJibZVatjIRP9VtgAPF0ybg0Y0fwUpVqE7qL4XkaiL8oxQ==
+  dependencies:
+    "@lexical/code" "0.12.0"
+    "@lexical/link" "0.12.0"
+    "@lexical/list" "0.12.0"
+    "@lexical/rich-text" "0.12.0"
+    "@lexical/text" "0.12.0"
+    "@lexical/utils" "0.12.0"
+
+"@lexical/offset@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/offset/-/offset-0.12.0.tgz#be6fb0ab81da7dc5dbf5064a3b76d43975869212"
+  integrity sha512-ao9nJTaDIcpk7PFAFzJ+yJ1ILmlq1jHG7JocoEblzAu9BrGUcHn3aVoEL12vcuxjLTlyILAsoeIzTHJKw/NWQA==
+
+"@lexical/overflow@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/overflow/-/overflow-0.12.0.tgz#31a6f5d39b8f0955c4453a27a3057be683545aec"
+  integrity sha512-SDoWMn3QJI8eVi/V581EpmBcc4N/vTZ5eDtlaDGV8kzRhVNwdogcWfe/cSbp1A0prYPjB/AkFPTvXdyOARcVog==
+
+"@lexical/plain-text@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/plain-text/-/plain-text-0.12.0.tgz#a21b6674f14e3cbde3003b959ab1877e2cbc5cec"
+  integrity sha512-1cKzVO+76EgPKDJcq/tzy+6sigjkFKfinfmi46RjRfsglE7mxaCfSjHyBhMvxu+v1gXyMH8XxeJsfoSFOfltrw==
+
+"@lexical/react@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/react/-/react-0.12.0.tgz#db63895370087748a826f0595bad27093b77a4e8"
+  integrity sha512-iH1SdO6XpvuNpQrVRKDIvtcskbIUuImi4abyjlwZqC2oE/jK261G9McQqzv/6b+IN9iKWGcoSnmVtnWGPHCfOw==
+  dependencies:
+    "@lexical/clipboard" "0.12.0"
+    "@lexical/code" "0.12.0"
+    "@lexical/dragon" "0.12.0"
+    "@lexical/hashtag" "0.12.0"
+    "@lexical/history" "0.12.0"
+    "@lexical/link" "0.12.0"
+    "@lexical/list" "0.12.0"
+    "@lexical/mark" "0.12.0"
+    "@lexical/markdown" "0.12.0"
+    "@lexical/overflow" "0.12.0"
+    "@lexical/plain-text" "0.12.0"
+    "@lexical/rich-text" "0.12.0"
+    "@lexical/selection" "0.12.0"
+    "@lexical/table" "0.12.0"
+    "@lexical/text" "0.12.0"
+    "@lexical/utils" "0.12.0"
+    "@lexical/yjs" "0.12.0"
+    react-error-boundary "^3.1.4"
+
+"@lexical/rich-text@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/rich-text/-/rich-text-0.12.0.tgz#6bbb8cccfd0a521bda3ea2f6200896823755cc07"
+  integrity sha512-Rhz3tzzTQFZX5k5XJSlJgyy8BJPz+/Jmw7RuEXzVTGxniAcovEll9TLXbZQ7SJLeHkPmJ65PdXR0om29KhjFVg==
+
+"@lexical/selection@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/selection/-/selection-0.12.0.tgz#d8ffd95f6aa6c3ae74da89f9ecf416f01e9794d7"
+  integrity sha512-0JpwYHwQ3wTsP98hR9xbx7GhWayERQ7rOvzmPOim7FRXQHEdqzxek5imxwyCPL4cTgHY5y+zrnCXluLeSLd57Q==
+
+"@lexical/table@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/table/-/table-0.12.0.tgz#5576fa60ee1c8f36ad6c207b896776056de674bd"
+  integrity sha512-YVPuHJdE7yTi0vqzYiL6tjLy9aOixiSuGu+Tv4ohqpz4RMlG8ewoOrHy8losUdA26YHGPLGxwMN6QmtpW/8iPg==
+  dependencies:
+    "@lexical/utils" "0.12.0"
+
+"@lexical/text@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/text/-/text-0.12.0.tgz#ab14ebb4e8e89c9339252fe15c0a6b09f101b794"
+  integrity sha512-kem90E1R+anQBePR/3KzUtmBgkmtmjTfSuozCfRbKR7otivciGPek4pc+J3MvqW0UVLCnDfptWSoj4+YRz1BRA==
+
+"@lexical/utils@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/utils/-/utils-0.12.0.tgz#0550f492baddf68a3ea70f2a6754953a7e684403"
+  integrity sha512-ESAKn4GsSUyBXbebSWT0ZoSrLQ5RRdGXh3MERENystbr33cwSVZ1NEzHnQAy6KxCUZVuuFjUusQo7T/qQzLFYw==
+  dependencies:
+    "@lexical/list" "0.12.0"
+    "@lexical/selection" "0.12.0"
+    "@lexical/table" "0.12.0"
+
+"@lexical/yjs@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@lexical/yjs/-/yjs-0.12.0.tgz#551ffb0cad031e82bf240e33a18680dbe5c17c49"
+  integrity sha512-3dV2GuBERiZPjSA5VyYIAAGQ0bVeihYsEBEF52SMwRanM9uqhUIHWMK808e8xDbk406dIIx8CSP2AUMaPW2lRg==
+  dependencies:
+    "@lexical/offset" "0.12.0"
+
 "@mapbox/point-geometry@~0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
@@ -13342,6 +13496,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lexical@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/lexical/-/lexical-0.12.0.tgz#b715fb061f6394814761a07ba5b4fd4c2aa3f9cd"
+  integrity sha512-ixp8+5D9UJueZSjh9a7Z0eiiKm8MZmf//+mr0rZSCXermhdIcn1lglDGbff1KGwO1ONnFlycWJV12m8Zvtgggg==
+
 lie@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
@@ -15208,6 +15367,11 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -15644,6 +15808,13 @@ react-error-boundary@4.0.4:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-error-boundary@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
+  integrity sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-fast-compare@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"