[#366] Fix layout shifting on Viewer

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}

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 (

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,
   });
 };
 

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})`
+  );
+}

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 (