diff --git a/packages/web/editor.tsx b/packages/web/editor.tsx index ec49f5d..4c8aaab 100644 --- a/packages/web/editor.tsx +++ b/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) { diff --git a/packages/web/line_wrapper.ts b/packages/web/line_wrapper.ts index c093396..c16c297 100644 --- a/packages/web/line_wrapper.ts +++ b/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 { diff --git a/packages/web/styles/editor.scss b/packages/web/styles/editor.scss index ae61b68..289fc54 100644 --- a/packages/web/styles/editor.scss +++ b/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); diff --git a/packages/web/styles/theme.scss b/packages/web/styles/theme.scss index 249328c..b7fb734 100644 --- a/packages/web/styles/theme.scss +++ b/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 {