Add maximum width to inline images

packages/web/inline_image.ts

@@ -1,6 +1,13 @@
 import { syntaxTree } from "@codemirror/language";
 import { Range } from "@codemirror/state";
-import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType } from "@codemirror/view";
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view";
 
 class InlineImageWidget extends WidgetType {
   constructor(readonly url: string, readonly title: string) {
@@ -12,11 +19,12 @@ class InlineImageWidget extends WidgetType {
   }
 
   toDOM() {
-    const img = document.createElement('img')
+    const img = document.createElement("img");
     img.src = this.url;
     img.alt = this.title;
     img.title = this.title;
-    img.style.display = 'block';
+    img.style.display = "block";
+    img.className = "sb-inline-img";
 
     return img;
   }
@@ -26,31 +34,34 @@ const inlineImages = (view: EditorView) => {
   let widgets: Range<Decoration>[] = [];
   const imageRegex = /!\[(?<title>[^\]]*)\]\((?<url>.+)\)/;
 
-  for (let {from, to} of view.visibleRanges) {
+  for (let { from, to } of view.visibleRanges) {
     syntaxTree(view.state).iterate({
-      from, to,
+      from,
+      to,
       enter: (node) => {
-        if (node.name !== 'Image') {
+        if (node.name !== "Image") {
-          return
+          return;
         }
-        
+
-        const imageRexexResult = imageRegex.exec(view.state.sliceDoc(node.from, node.to));
+        const imageRexexResult = imageRegex.exec(
+          view.state.sliceDoc(node.from, node.to)
+        );
         if (imageRexexResult === null || !imageRexexResult.groups) {
           return;
         }
-        
+
         const url = imageRexexResult.groups.url;
         const title = imageRexexResult.groups.title;
         let deco = Decoration.widget({
           widget: new InlineImageWidget(url, title),
         });
         widgets.push(deco.range(node.to));
-      }
+      },
     });
   }
 
   return Decoration.set(widgets, true);
-}
+};
 
 export const inlineImagesPlugin = () =>
   ViewPlugin.fromClass(

packages/web/styles/editor.scss

@@ -1,10 +1,15 @@
 .cm-editor {
   font-size: 18px;
   padding: 0 20px;
+  --max-width: 800px;
 
   .cm-content {
     margin: auto;
-    max-width: 800px;
+    max-width: var(--max-width);
+  }
+
+  .sb-inline-img {
+    max-width: calc(var(--max-width) * 0.9);
   }
 
   &.cm-focused {

website/CHANGELOG.md

@@ -1,8 +1,10 @@
 An attempt at documenting of the changes/new features introduced in each (pre) release.
 
 ## 0.0.32
-* Inline image previews are now implemented, use the standard `![alt text](https://url.com/image.jpg)` notation and a preview of the image will appear automatically
+* Inline image previews are now implemented, use the standard `![alt text](https://url.com/image.jpg)` notation and a preview of the image will appear automatically. Example:
+  ![Inline image preview](https://user-images.githubusercontent.com/812886/186218876-6d8a4a71-af8b-4e9e-83eb-4ac89607a6b4.png)
 * Dark mode! Toggle between the dark and light mode using a new button, top-right.
+  ![Dark mode screenshot](https://user-images.githubusercontent.com/6335792/187000151-ba06ce55-ad27-494b-bfe9-6b19ef62145b.png)
 
 ## 0.0.31
 * Update to the query language: the `render` clause now uses page reference syntax `[[page]]`. For example `render [[template/task]]` rather than `render "template/task"`. The old syntax still works, but is deprecated, completion for the old syntax has been removed.