From 708133327151ef7d9020588bfd451e3f08e23b1a Mon Sep 17 00:00:00 2001
From: Vincent Chan <okcdz@diverse.space>
Date: Wed, 6 Dec 2023 15:48:17 +0800
Subject: [PATCH] chore: adjust css for mobile

---
 packages/blocky-core/css/blocky-core.css      | 23 +++++++++++++++++++
 packages/blocky-core/src/view/controller.ts   |  6 -----
 packages/blocky-core/src/view/editor.ts       | 21 +----------------
 packages/blocky-core/src/view/renderer.ts     | 12 +---------
 .../blocky-example/app/loro/loroBlock.tsx     |  2 +-
 .../app/loro/loroExample.module.scss          |  1 +
 6 files changed, 27 insertions(+), 38 deletions(-)

diff --git a/packages/blocky-core/css/blocky-core.css b/packages/blocky-core/css/blocky-core.css
index 36d524d..1b6e2e5 100644
--- a/packages/blocky-core/css/blocky-core.css
+++ b/packages/blocky-core/css/blocky-core.css
@@ -54,6 +54,8 @@
   font-size: 32px;
   font-weight: 700;
   color: var(--blocky-primary-color);
+  padding-left: 56px;
+  padding-right: 56px;
 }
 
 .blocky-editor-title-container:empty::before {
@@ -230,3 +232,24 @@
   left: 0px;
   height: 2px;
 }
+
+.blocky-editor-blocks-container {
+  padding: 12px 56px 72px;
+}
+
+
+@media only screen and (max-width: 600px) {
+
+.blocky-editor-title-container {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--blocky-primary-color);
+  padding-left: 42px;
+  padding-right: 42px;
+}
+  
+.blocky-editor-blocks-container {
+  padding: 12px 42px 72px;
+}
+
+}
diff --git a/packages/blocky-core/src/view/controller.ts b/packages/blocky-core/src/view/controller.ts
index 8acf588..0c0f171 100644
--- a/packages/blocky-core/src/view/controller.ts
+++ b/packages/blocky-core/src/view/controller.ts
@@ -1,6 +1,5 @@
 import { isUpperCase } from "blocky-common/es";
 import { Subject } from "rxjs";
-import { type Padding } from "blocky-common/es/dom";
 import { EditorState, NodeTraverser } from "@pkg/model";
 import {
   AttributesObject,
@@ -90,11 +89,6 @@ export interface IEditorControllerOptions {
   idGenerator?: IdGenerator;
   toolbarFactory?: ToolbarFactory;
 
-  /**
-   * The inner padding of the editor
-   */
-  padding?: Partial<Padding>;
-
   collaborativeCursorFactory?: CollaborativeCursorFactory;
 
   emptyPlaceholder?: string;
diff --git a/packages/blocky-core/src/view/editor.ts b/packages/blocky-core/src/view/editor.ts
index 0896edd..54aae81 100644
--- a/packages/blocky-core/src/view/editor.ts
+++ b/packages/blocky-core/src/view/editor.ts
@@ -1,4 +1,4 @@
-import { isContainNode, removeNode, type Padding } from "blocky-common/es/dom";
+import { isContainNode, removeNode } from "blocky-common/es/dom";
 import {
   isUpperCase,
   areEqualShallow,
@@ -84,7 +84,6 @@ export interface IEditorOptions {
   container: HTMLDivElement;
   idGenerator?: IdGenerator;
   toolbarFactory?: ToolbarFactory;
-  padding?: Partial<Padding>;
   collaborativeCursorFactory?: CollaborativeCursorFactory;
 }
 
@@ -93,15 +92,6 @@ enum MineType {
   Html = "text/html",
 }
 
-function makeDefaultPadding(): Padding {
-  return {
-    top: 12,
-    right: 56,
-    bottom: 72,
-    left: 56,
-  };
-}
-
 interface BlockSizeInfo {
   id: string;
   rect: DOMRect;
@@ -201,8 +191,6 @@ export class Editor {
 
   readonly collaborativeCursorManager: CollaborativeCursorManager;
 
-  readonly padding: Padding;
-
   composing = false;
   private disposables: IDisposable[] = [];
 
@@ -219,7 +207,6 @@ export class Editor {
       },
       state: controller.state,
       toolbarFactory: controller.options?.toolbarFactory,
-      padding: controller.options?.padding,
       collaborativeCursorFactory:
         controller.options?.collaborativeCursorFactory,
     });
@@ -234,7 +221,6 @@ export class Editor {
       registry,
       idGenerator,
       toolbarFactory,
-      padding,
       collaborativeCursorFactory,
     } = options;
     this.state = state;
@@ -242,11 +228,6 @@ export class Editor {
     this.container = container;
     this.idGenerator = idGenerator ?? makeDefaultIdGenerator();
 
-    this.padding = {
-      ...makeDefaultPadding(),
-      ...padding,
-    };
-
     this.collaborativeCursorManager = new CollaborativeCursorManager(
       collaborativeCursorFactory
     );
diff --git a/packages/blocky-core/src/view/renderer.ts b/packages/blocky-core/src/view/renderer.ts
index e76cd1f..26b6ec2 100644
--- a/packages/blocky-core/src/view/renderer.ts
+++ b/packages/blocky-core/src/view/renderer.ts
@@ -171,11 +171,6 @@ export class DocRenderer {
         "div",
         `${clsPrefix}-editor-title-container ${this.blockClassName}`,
         (elem: HTMLElement) => {
-          const { padding } = this.editor;
-          const { right, left } = padding;
-          elem.style.paddingLeft = `${left}px`;
-          elem.style.paddingRight = `${right}px`;
-
           if (this.editor.controller?.options?.titleEditable === false) {
             elem.contentEditable = "false";
           }
@@ -187,12 +182,7 @@ export class DocRenderer {
       dom,
       renderCounter++,
       "div",
-      `${clsPrefix}-editor-blocks-container`,
-      (elem: HTMLElement) => {
-        const { padding } = this.editor;
-        const { top, right, bottom, left } = padding;
-        elem.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;
-      }
+      `${clsPrefix}-editor-blocks-container`
     );
 
     this.renderBlocks(
diff --git a/packages/blocky-example/app/loro/loroBlock.tsx b/packages/blocky-example/app/loro/loroBlock.tsx
index 5e4d8ee..e6c260c 100644
--- a/packages/blocky-example/app/loro/loroBlock.tsx
+++ b/packages/blocky-example/app/loro/loroBlock.tsx
@@ -79,7 +79,7 @@ function LoroBlock(props: LoroBlockProps) {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Canel</Button>
+          <Button onClick={handleClose}>Cancel</Button>
           <Button onClick={handleConfirm} color="error" autoFocus>
             Confirm
           </Button>
diff --git a/packages/blocky-example/app/loro/loroExample.module.scss b/packages/blocky-example/app/loro/loroExample.module.scss
index c58a1cf..42018c2 100644
--- a/packages/blocky-example/app/loro/loroExample.module.scss
+++ b/packages/blocky-example/app/loro/loroExample.module.scss
@@ -5,6 +5,7 @@
 
   :global(.blocky-editor-container) {
     flex: 1;
+    max-width: 100%;
   }
 
   :global(.blocky-documents) {