From 24a6e5df15d2298ce9fdd6b425c4c13c09a438df Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sat, 11 May 2024 06:48:35 +0900
Subject: [PATCH 1/3] fix: apply same wrapper div as editor on ssr'd review
 html

---
 ui/src/components/review/server/viewer.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/review/server/viewer.tsx b/ui/src/components/review/server/viewer.tsx
index d4732429..35ec0c19 100644
--- a/ui/src/components/review/server/viewer.tsx
+++ b/ui/src/components/review/server/viewer.tsx
@@ -12,7 +12,13 @@ export async function Viewer({ content }: { content: string }) {
 
   const Editor = dynamic(() => import('@/editor'), {
     ssr: false,
-    loading: () => <div className="editor" dangerouslySetInnerHTML={{ __html: html }} />,
+    loading: () => (
+      <div className="editor">
+        <div className="content-editable-wrapper">
+          <div className="content-editable" dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </div>
+    ),
   });
 
   return (

From c2eb250d8db3da61a60ee0903d2ccf2e2ef7cfc3 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sat, 11 May 2024 08:31:00 +0900
Subject: [PATCH 2/3] fix: apply indent base value from theme on exported dom
 on paragraphNode

---
 ui/src/editor/headless/index.tsx   |  2 ++
 ui/src/editor/html-config/index.ts | 57 ++++++++++++++++++++++++++++++
 ui/src/editor/index.tsx            |  2 ++
 3 files changed, 61 insertions(+)
 create mode 100644 ui/src/editor/html-config/index.ts

diff --git a/ui/src/editor/headless/index.tsx b/ui/src/editor/headless/index.tsx
index 84de0d07..4f9cd5a6 100644
--- a/ui/src/editor/headless/index.tsx
+++ b/ui/src/editor/headless/index.tsx
@@ -1,5 +1,6 @@
 import { createHeadlessEditor as _createHeadlessEditor } from '@lexical/headless';
 
+import { htmlConfig } from '@/editor/html-config';
 import nodes from '@/editor/nodes';
 import theme from '@/editor/theme';
 
@@ -11,6 +12,7 @@ const createHeadlessEditor = ({ namespace }: { namespace: string }) => {
     onError: (error) => {
       throw error;
     },
+    html: htmlConfig,
   });
 };
 
diff --git a/ui/src/editor/html-config/index.ts b/ui/src/editor/html-config/index.ts
new file mode 100644
index 00000000..4a69f653
--- /dev/null
+++ b/ui/src/editor/html-config/index.ts
@@ -0,0 +1,57 @@
+import type { HTMLConfig } from 'lexical';
+import { ParagraphNode, isHTMLElement } from 'lexical';
+
+export const htmlConfig: HTMLConfig = {
+  export: new Map([
+    [
+      ParagraphNode,
+      (editor, node) => {
+        const targetNode = node as ParagraphNode;
+        const element = document.createElement('p');
+
+        if (element && isHTMLElement(element)) {
+          if (targetNode.isEmpty()) {
+            element.append(document.createElement('br'));
+          }
+
+          const formatType = targetNode.getFormatType();
+          element.style.textAlign = formatType;
+
+          const direction = targetNode.getDirection();
+          if (direction) {
+            element.dir = direction;
+          }
+          const indent = targetNode.getIndent();
+          setElementIndent(element, indent, editor._config.theme.indent);
+        }
+
+        return {
+          element,
+        };
+      },
+    ],
+  ]),
+};
+
+const DEFAULT_INDENT_VALUE = '40px';
+
+function setElementIndent(dom: HTMLElement, indent: number, indentClassName?: string): void {
+  if (indent < 1) {
+    return;
+  }
+
+  if (typeof indentClassName === 'string') {
+    dom.classList.add(indentClassName);
+  }
+
+  const indentationBaseValue =
+    global.window.getComputedStyle(dom).getPropertyValue('--lexical-indent-base-value') ||
+    DEFAULT_INDENT_VALUE;
+
+  dom.style.setProperty(
+    // padding-inline-start is not widely supported in email HTML, but
+    // Lexical Reconciler uses padding-inline-start. Using text-indent instead.
+    'text-indent',
+    `calc(${indent} * ${indentationBaseValue})`
+  );
+}
diff --git a/ui/src/editor/index.tsx b/ui/src/editor/index.tsx
index 23940490..32bf4f04 100644
--- a/ui/src/editor/index.tsx
+++ b/ui/src/editor/index.tsx
@@ -5,6 +5,7 @@ import type { SerializedEditorState } from 'lexical';
 
 import { EditorHistoryContext } from '@/context/editor/editor-history-context';
 
+import { htmlConfig } from '@/editor/html-config';
 import nodes from '@/editor/nodes';
 import { Plugins } from '@/editor/plugins';
 import theme from '@/editor/theme';
@@ -32,6 +33,7 @@ export default function Editor({
     },
     theme,
     editable: isNew,
+    html: htmlConfig,
   };
 
   return (

From 24ffb84a5034a49d61e7a4eec6fd934af916d791 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Sat, 11 May 2024 08:41:30 +0900
Subject: [PATCH 3/3] fix: adjust subtitle height

---
 ui/src/components/common/client/title.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/components/common/client/title.tsx b/ui/src/components/common/client/title.tsx
index ba1349b2..c67a7cb7 100644
--- a/ui/src/components/common/client/title.tsx
+++ b/ui/src/components/common/client/title.tsx
@@ -44,7 +44,7 @@ export default forwardRef<TitleRef, TitleProps>(function Title(
         `w-full resize-none overflow-hidden bg-transparent focus-visible:outline-none`,
         {
           'PlaygroundEditorTheme__h1 h-9': subtitle === false,
-          'PlaygroundEditorTheme__h2 h-5': subtitle === true,
+          'PlaygroundEditorTheme__h2 h-[23px]': subtitle === true,
         }
       )}
       placeholder={placeholder}