Fixed (hacked) a weird iOS safari bug for read-only mode

packages/web/editor.tsx

@@ -655,6 +655,20 @@ export class Editor {
     contentDOM.setAttribute("autocorrect", "on");
     contentDOM.setAttribute("autocapitalize", "on");
     contentDOM.setAttribute("contenteditable", readOnly ? "false" : "true");
+
+    if (isMobileSafari() && readOnly) {
+      console.log("Safari read only hack");
+      contentDOM.classList.add("ios-safari-readonly");
+    } else {
+      contentDOM.classList.remove("ios-safari-readonly");
+    }
+
+    function isMobileSafari() {
+      return (
+        navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
+        navigator.userAgent.match(/AppleWebKit/)
+      );
+    }
   }
 
   private restoreState(pageName: string) {

packages/web/line_wrapper.ts

@@ -21,48 +21,49 @@ function wrapLines(view: EditorView, wrapElements: WrapElement[]) {
   const doc = view.state.doc;
   // Disabling the visible ranges for now, because it may be a bit buggy.
   // RISK: this may actually become slow for large documents.
-  // for (let { from, to } of view.visibleRanges) {
-  syntaxTree(view.state).iterate({
-    // from,
-    // to,
-    enter: ({ type, from, to }) => {
-      for (let wrapElement of wrapElements) {
-        if (type.name == wrapElement.selector) {
-          if (wrapElement.nesting) {
-            elementStack.push(type.name);
-          }
-          const bodyText = doc.sliceString(from, to);
-          let idx = from;
-          for (let line of bodyText.split("\n")) {
-            let cls = wrapElement.class;
+  for (let { from, to } of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from,
+      to,
+      enter: ({ type, from, to }) => {
+        for (let wrapElement of wrapElements) {
+          if (type.name == wrapElement.selector) {
             if (wrapElement.nesting) {
-              cls = `${cls} ${cls}-${elementStack.length}`;
+              elementStack.push(type.name);
+            }
+            const bodyText = doc.sliceString(from, to);
+            let idx = from;
+            for (let line of bodyText.split("\n")) {
+              let cls = wrapElement.class;
+              if (wrapElement.nesting) {
+                cls = `${cls} ${cls}-${elementStack.length}`;
+              }
+              widgets.push(
+                Decoration.line({
+                  class: cls,
+                }).range(doc.lineAt(idx).from)
+              );
+              idx += line.length + 1;
             }
-            widgets.push(
-              Decoration.line({
-                class: cls,
-              }).range(doc.lineAt(idx).from)
-            );
-            idx += line.length + 1;
           }
         }
-      }
-    },
-    leave({ type }) {
-      for (let wrapElement of wrapElements) {
-        if (type.name == wrapElement.selector && wrapElement.nesting) {
-          elementStack.pop();
+      },
+      leave({ type }) {
+        for (let wrapElement of wrapElements) {
+          if (type.name == wrapElement.selector && wrapElement.nesting) {
+            elementStack.pop();
+          }
         }
-      }
-    },
-  });
-  // }
+      },
+    });
+  }
   // Widgets have to be sorted by `from` in ascending order
   widgets = widgets.sort((a, b) => {
     return a.from < b.from ? -1 : 1;
   });
   return Decoration.set(widgets);
 }
+
 export const lineWrapper = (wrapElements: WrapElement[]) =>
   ViewPlugin.fromClass(
     class {

packages/web/styles/editor.scss

@@ -16,6 +16,11 @@
     outline: none !important;
   }
 
+  // Weird hack to readjust iOS's safari font-size when contenteditable is disabled
+  .ios-safari-readonly {
+    font-size: 60%;
+  }
+
   // Indentation of follow-up lines
   @mixin lineOverflow($baseIndent) {
     text-indent: -1 * ($baseIndent + 2ch);

packages/web/styles/theme.scss

@@ -296,12 +296,13 @@
   background-color: rgba(77, 141, 255, 0.07);
   border-radius: 5px;
   padding: 0 5px;
+  white-space: nowrap;
   cursor: pointer;
 }
 
 .sb-wiki-link {
   cursor: pointer;
-  color: #a8abbd;
+  color: #8f96c2;
 }
 
 .sb-task-marker {