add setting value fo Unified merge view

packages/editor/src/client/components-internal/playground/Playground.tsx

@@ -22,6 +22,7 @@ export const Playground = (): JSX.Element => {
   const [editorTheme, setEditorTheme] = useState<EditorTheme>('defaultlight');
   const [editorKeymap, setEditorKeymap] = useState<KeyMapMode>('default');
   const [editorPaste, setEditorPaste] = useState<PasteMode>('both');
+  const [unifiedMergeView, setUnifiedMergeView] = useState(false);
   const [editorSettings, setEditorSettings] = useState<EditorSettings>();
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -45,9 +46,10 @@ export const Playground = (): JSX.Element => {
       keymapMode: editorKeymap,
       styleActiveLine: true,
       autoFormatMarkdownTable: true,
+      unifiedMergeView,
       pasteMode: editorPaste,
     });
-  }, [setEditorSettings, editorKeymap, editorTheme, editorPaste]);
+  }, [setEditorSettings, editorKeymap, editorTheme, editorPaste, unifiedMergeView]);
 
   // set handler to save with shortcut key
   const saveHandler = useCallback(() => {
@@ -91,7 +93,12 @@ export const Playground = (): JSX.Element => {
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">
           <Preview markdown={markdownToPreview} />
           <hr />
-          <PlaygroundController setEditorTheme={setEditorTheme} setEditorKeymap={setEditorKeymap} setEditorPaste={setEditorPaste} />
+          <PlaygroundController
+            setEditorTheme={setEditorTheme}
+            setEditorKeymap={setEditorKeymap}
+            setEditorPaste={setEditorPaste}
+            setUnifiedMergeView={setUnifiedMergeView}
+          />
         </div>
       </div>
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>

packages/editor/src/client/components-internal/playground/PlaygroundController.tsx

@@ -6,22 +6,24 @@ import { KeymapControl } from './controller/KeymapControl';
 import { PasteModeControl } from './controller/PasteModeControl';
 import { SetCaretLineRow } from './controller/SetCaretLineRow';
 import { ThemeControl } from './controller/ThemeControl';
+import { UnifiedMergeViewControl } from './controller/UnifiedMergeViewControl';
 
 type PlaygroundControllerProps = {
   setEditorTheme: (value: EditorTheme) => void
   setEditorKeymap: (value: KeyMapMode) => void
   setEditorPaste: (value: PasteMode) => void
+  setUnifiedMergeView: (value: boolean) => void
 };
 
 export const PlaygroundController = (props: PlaygroundControllerProps): JSX.Element => {
-  const { setEditorTheme, setEditorKeymap, setEditorPaste } = props;
   return (
     <div className="container">
       <InitEditorValueRow />
       <SetCaretLineRow />
-      <ThemeControl setEditorTheme={setEditorTheme} />
-      <KeymapControl setEditorKeymap={setEditorKeymap} />
-      <PasteModeControl setEditorPaste={setEditorPaste} />
+      <UnifiedMergeViewControl onChange={bool => props.setUnifiedMergeView(bool)} />
+      <ThemeControl setEditorTheme={props.setEditorTheme} />
+      <KeymapControl setEditorKeymap={props.setEditorKeymap} />
+      <PasteModeControl setEditorPaste={props.setEditorPaste} />
     </div>
   );
 };

packages/editor/src/client/components-internal/playground/controller/UnifiedMergeViewControl.tsx

@@ -0,0 +1,17 @@
+type UnifiedMergeViewControlProps = {
+  onChange: (value: boolean) => void;
+};
+
+export const UnifiedMergeViewControl = ({ onChange }: UnifiedMergeViewControlProps): JSX.Element => {
+  return (
+    <div className="row mt-5">
+      <div className="col">
+        <div className="form-check form-switch">
+          <input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckUnifiedMergeView" onChange={e => onChange(e.target.checked)} />
+          <label className="form-check-label" htmlFor="flexSwitchCheckUnifiedMergeView">Unified Merge View</label>
+        </div>
+
+      </div>
+    </div>
+  );
+};

packages/editor/src/consts/editor-settings.ts

@@ -8,4 +8,5 @@ export interface EditorSettings {
   pasteMode: undefined | PasteMode,
   styleActiveLine: boolean,
   autoFormatMarkdownTable: boolean,
+  unifiedMergeView: boolean,
 }