@adecore/editor-react 0.31.12 → 0.32.0

package/dist/rendered-docs.js

@@ -12,28 +12,31 @@ const ESTIMATED_LINE_HEIGHT = 20;
 const MAX_ESTIMATED_LINES = 8;
 const MAX_PARSED = 200;
 function startOf(comment) {
-    return { line: comment.startLine, character: comment.indent.length };
+  return {
+    line: comment.startLine,
+    character: comment.indent.length
+  };
 }
 /* A selection touches a comment unless it merely ends where the comment begins or swallows the comment whole. */
 function touches(range, comment) {
-    if (range.end.line < comment.startLine || range.start.line > comment.endLine) {
-        return false;
-    }
-    const empty = range.start.line === range.end.line && range.start.character === range.end.character;
-    if (!empty && range.end.line === comment.startLine && range.end.character === 0) {
-        return false;
-    }
-    return empty || range.start.line >= comment.startLine || range.end.line <= comment.endLine;
+  if (range.end.line < comment.startLine || range.start.line > comment.endLine) {
+    return false;
+  }
+  const empty = range.start.line === range.end.line && range.start.character === range.end.character;
+  if (!empty && range.end.line === comment.startLine && range.end.character === 0) {
+    return false;
+  }
+  return empty || range.start.line >= comment.startLine || range.end.line <= comment.endLine;
 }
 /* The first words of what a comment says, to tell its row from the others for a person who hears it. */
 function summaryOf(body) {
-    const lead = body.split('\n').findIndex((line) => /^\s*@/.test(line));
-    const text = (lead === -1 ? body : body.split('\n').slice(0, lead).join('\n')).replace(/[`*_#>[\]()]/g, ' ');
-    const words = text.split(/\s+/).filter((word) => word !== '');
-    return words.slice(0, SUMMARY_WORDS).join(' ');
+  const lead = body.split('\n').findIndex(line => /^\s*@/.test(line));
+  const text = (lead === -1 ? body : body.split('\n').slice(0, lead).join('\n')).replace(/[`*_#>[\]()]/g, ' ');
+  const words = text.split(/\s+/).filter(word => word !== '');
+  return words.slice(0, SUMMARY_WORDS).join(' ');
 }
 function samePlace(range, position) {
-    return range !== null && range.start.line === position.line && range.start.character === position.character;
+  return range !== null && range.start.line === position.line && range.start.character === position.character;
 }
 /*
  * Documentation comments drawn as formatted text in place of their lines, the way the Reader mode of the
@@ -42,334 +45,397 @@ function samePlace(range, position) {
  * it can be edited, and shown formatted again when the caret leaves it.
  */
 export class RenderedDocsFeature {
-    language;
-    timers;
-    settings = { renderDocComments: false };
-    enabled = true;
-    comments = [];
-    overrides = [];
-    containers = new Map();
-    markerLines = new Map();
-    parsed = new Map();
-    indexes = new Map();
-    /* Comments a reveal showed as source until the caret has settled where it was going, or the comment has scrolled out of view if the caret never moves. */
-    revealed = new Set();
-    listeners = new Set();
-    version = 0;
-    settleTimer;
-    caretTimer;
-    drawn = '';
-    marked = '';
-    /* The comments are from before the last edit, so nothing is decided from them until they are read again. */
-    stale = false;
-    disposed = false;
-    constructor(language, timers = realTimers) {
-        this.language = language;
-        this.timers = timers;
-        const { editor } = language;
-        const offs = [
-            editor.onTextChange(() => {
-                this.stale = true;
-                this.timers.clear(this.settleTimer);
-                this.settleTimer = this.timers.set(() => this.read(), SETTLE_MS);
-            }),
-            // The caret is told before the text change that moved it, so what the lines are is decided a moment later.
-            editor.onCaret(() => {
-                this.timers.clear(this.caretTimer);
-                this.caretTimer = this.timers.set(() => {
-                    this.revealed.clear();
-                    this.publish();
-                }, 0);
-            }),
-            editor.onGutterMarker((id) => {
-                const line = this.markerLines.get(id);
-                if (line !== undefined) {
-                    this.toggleAt(line);
-                }
-            }),
-            language.onKey((event) => {
-                return isShortcut(this.language.shortcuts.toggleRenderedDocs, event) && this.toggle();
-            }, KEY_PRIORITY.renderedDocs),
-            editor.onViewChange(() => {
-                this.sweep();
-                this.releaseRevealed();
-            })
-        ];
-        language.onDispose(() => {
-            this.disposed = true;
-            for (const off of offs) {
-                off();
-            }
-            this.timers.clear(this.settleTimer);
-            this.timers.clear(this.caretTimer);
-            for (const override of this.overrides) {
-                override.tracked.dispose();
-            }
-            this.overrides = [];
-            editor.setReplacements?.([], OWNER);
-            editor.setGutterMarkers([], OWNER);
-            this.containers.clear();
-            this.bump();
-        });
-        this.read();
-    }
-    /* Whether every documentation comment is drawn as text until a person switches it. Changing it puts every comment back under it. */
-    configure(settings) {
-        const enabled = settings.enabled !== false;
-        if (settings.renderDocComments === this.settings.renderDocComments && enabled === this.enabled) {
-            return;
-        }
-        const sameRendering = settings.renderDocComments === this.settings.renderDocComments;
-        this.settings = settings;
-        this.enabled = enabled;
-        if (!sameRendering) {
-            this.clearOverrides();
-        }
+  language;
+  timers;
+  settings = {
+    renderDocComments: false
+  };
+  enabled = true;
+  comments = [];
+  overrides = [];
+  containers = new Map();
+  markerLines = new Map();
+  parsed = new Map();
+  indexes = new Map();
+  /* Comments a reveal showed as source until the caret has settled where it was going, or the comment has scrolled out of view if the caret never moves. */
+  revealed = new Set();
+  listeners = new Set();
+  version = 0;
+  shown = null;
+  settleTimer;
+  caretTimer;
+  drawn = '';
+  marked = '';
+  /* The comments are from before the last edit, so nothing is decided from them until they are read again. */
+  stale = false;
+  disposed = false;
+  constructor(language, timers = realTimers) {
+    this.language = language;
+    this.timers = timers;
+    const {
+      editor
+    } = language;
+    const offs = [editor.onTextChange(() => {
+      this.stale = true;
+      this.timers.clear(this.settleTimer);
+      this.settleTimer = this.timers.set(() => this.read(), SETTLE_MS);
+    }),
+    // The caret is told before the text change that moved it, so what the lines are is decided a moment later.
+    editor.onCaret(() => {
+      this.timers.clear(this.caretTimer);
+      this.caretTimer = this.timers.set(() => {
+        this.revealed.clear();
         this.publish();
+      }, 0);
+    }), editor.onGutterMarker(id => {
+      const line = this.markerLines.get(id);
+      if (line !== undefined) {
+        this.toggleAt(line);
+      }
+    }), language.onKey(event => {
+      return isShortcut(this.language.shortcuts.toggleRenderedDocs, event) && this.toggle();
+    }, KEY_PRIORITY.renderedDocs), editor.onViewChange(() => {
+      this.sweep();
+      this.releaseRevealed();
+    })];
+    language.onDispose(() => {
+      this.disposed = true;
+      for (const off of offs) {
+        off();
+      }
+      this.timers.clear(this.settleTimer);
+      this.timers.clear(this.caretTimer);
+      for (const override of this.overrides) {
+        override.tracked.dispose();
+      }
+      this.overrides = [];
+      editor.setReplacements?.([], OWNER);
+      editor.setGutterMarkers([], OWNER);
+      this.containers.clear();
+      this.bump();
+    });
+    this.read();
+  }
+  /* Whether every documentation comment is drawn as text until a person switches it. Changing it puts every comment back under it. */
+  configure(settings) {
+    const enabled = settings.enabled !== false;
+    if (settings.renderDocComments === this.settings.renderDocComments && enabled === this.enabled) {
+      return;
     }
-    /* The documentation comments of the document, from the last time it settled. */
-    get all() {
-        return this.comments;
+    const sameRendering = settings.renderDocComments === this.settings.renderDocComments;
+    this.settings = settings;
+    this.enabled = enabled;
+    if (!sameRendering) {
+      this.clearOverrides();
     }
-    /* Whether a comment is drawn as text now: its own switch, else the setting. A comment the caret is in is not, whatever its switch says. */
-    isRendered(comment) {
-        return this.wantsRendered(comment) && !this.touched(comment) && !this.revealed.has(comment);
+    this.publish();
+  }
+  /* The documentation comments of the document, from the last time it settled. */
+  get all() {
+    return this.comments;
+  }
+  /* Whether a comment is drawn as text now: its own switch, else the setting. A comment the caret is in is not, whatever its switch says. */
+  isRendered(comment) {
+    return this.wantsRendered(comment) && !this.touched(comment) && !this.revealed.has(comment);
+  }
+  /* Switches the comment the caret is in between formatted and source. False when the caret is in none. */
+  toggle() {
+    this.settle();
+    const comment = this.at(this.language.editor.getCaret().line);
+    if (!this.enabled || comment === undefined || !this.canRender(comment)) {
+      return false;
     }
-    /* Switches the comment the caret is in between formatted and source. False when the caret is in none. */
-    toggle() {
-        this.settle();
-        const comment = this.at(this.language.editor.getCaret().line);
-        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
-            return false;
-        }
-        this.setRendered(comment, !this.wantsRendered(comment));
-        return true;
+    this.setRendered(comment, !this.wantsRendered(comment));
+    return true;
+  }
+  /* Switches the comment that starts on a line, which is what its gutter button does. */
+  toggleAt(startLine) {
+    this.settle();
+    const comment = this.comments.find(candidate => candidate.startLine === startLine);
+    if (!this.enabled || comment === undefined || !this.canRender(comment)) {
+      return false;
     }
-    /* Switches the comment that starts on a line, which is what its gutter button does. */
-    toggleAt(startLine) {
-        this.settle();
-        const comment = this.comments.find((candidate) => candidate.startLine === startLine);
-        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
-            return false;
-        }
-        this.setRendered(comment, !this.wantsRendered(comment));
-        return true;
+    this.setRendered(comment, !this.wantsRendered(comment));
+    return true;
+  }
+  /* The elements of the rows now in view, for a host that draws them itself; `RenderedDocs` does. */
+  entries() {
+    const result = [];
+    for (const [id, container] of this.containers) {
+      const comment = this.comments[Number(id.slice(DOCS_PREFIX.length))];
+      if (comment !== undefined) {
+        result.push({
+          id,
+          comment,
+          parsed: this.parse(comment),
+          container
+        });
+      }
     }
-    /* The elements of the rows now in view, for a host that draws them itself; `RenderedDocs` does. */
-    entries() {
-        const result = [];
-        for (const [id, container] of this.containers) {
-            const comment = this.comments[Number(id.slice(DOCS_PREFIX.length))];
-            if (comment !== undefined) {
-                result.push({ id, comment, parsed: this.parse(comment), container });
-            }
-        }
-        return result;
+    return result;
+  }
+  getVersion() {
+    return this.version;
+  }
+  /* What `entries` answers, one array until the version moves, so React can read it as a snapshot. */
+  getEntries() {
+    if (this.shown?.version !== this.version) {
+      this.shown = {
+        version: this.version,
+        entries: this.entries()
+      };
     }
-    getVersion = () => this.version;
-    subscribe = (listener) => {
-        this.listeners.add(listener);
-        return () => {
-            this.listeners.delete(listener);
-        };
+    return this.shown.entries;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
     };
-    /* Whether names in `{@link}` and `@see` can be followed, which takes a server that finds symbols by name. */
-    get canFollow() {
-        const { project, uri } = this.language;
-        return project.service.supports('workspace/symbol', uri);
-    }
-    /* Goes to what a link in a comment names. */
-    follow(name, comment) {
-        const member = name.split(/::|[#.\\]/).filter((part) => part !== '');
-        const target = (member.at(-1) ?? name).replace(/\(\)$/, '');
-        void this.language.navigation.goToName(target, startOf(comment), null);
+  }
+  /* Whether names in `{@link}` and `@see` can be followed, which takes a server that finds symbols by name. */
+  get canFollow() {
+    const {
+      project,
+      uri
+    } = this.language;
+    return project.service.supports('workspace/symbol', uri);
+  }
+  /* Goes to what a link in a comment names. */
+  follow(name, comment) {
+    const member = name.split(/::|[#.\\]/).filter(part => part !== '');
+    const target = (member.at(-1) ?? name).replace(/\(\)$/, '');
+    void this.language.navigation.goToName(target, startOf(comment), null);
+  }
+  /* By place in the document, so a row keeps its element when an edit above it moves its lines. */
+  idOf(comment) {
+    return `${DOCS_PREFIX}${this.indexes.get(comment) ?? -1}`;
+  }
+  /* A comment that is all the document has has no line to leave the caret on, so it stays source. */
+  canRender(comment) {
+    return comment.startLine > 0 || comment.endLine < this.language.editor.positionAt(Number.MAX_SAFE_INTEGER).line;
+  }
+  wantsRendered(comment) {
+    if (!this.enabled || !this.canRender(comment)) {
+      return false;
     }
-    /* By place in the document, so a row keeps its element when an edit above it moves its lines. */
-    idOf(comment) {
-        return `${DOCS_PREFIX}${this.indexes.get(comment) ?? -1}`;
+    const start = startOf(comment);
+    const override = this.overrides.find(candidate => samePlace(candidate.tracked.get(), start));
+    return override?.rendered ?? this.settings.renderDocComments;
+  }
+  at(line) {
+    return this.comments.find(comment => line >= comment.startLine && line <= comment.endLine);
+  }
+  touched(comment) {
+    return this.language.editor.getSelections().some(range => touches(range, comment));
+  }
+  setRendered(comment, rendered) {
+    const start = startOf(comment);
+    const existing = this.overrides.find(candidate => samePlace(candidate.tracked.get(), start));
+    if (existing !== undefined) {
+      existing.tracked.dispose();
+      this.overrides = this.overrides.filter(candidate => candidate !== existing);
     }
-    /* A comment that is all the document has has no line to leave the caret on, so it stays source. */
-    canRender(comment) {
-        return comment.startLine > 0 || comment.endLine < this.language.editor.positionAt(Number.MAX_SAFE_INTEGER).line;
+    if (rendered !== this.settings.renderDocComments) {
+      const {
+        editor
+      } = this.language;
+      this.overrides.push({
+        tracked: editor.trackRange({
+          start,
+          end: editor.positionAt(comment.to)
+        }),
+        rendered
+      });
     }
-    wantsRendered(comment) {
-        if (!this.enabled || !this.canRender(comment)) {
-            return false;
-        }
-        const start = startOf(comment);
-        const override = this.overrides.find((candidate) => samePlace(candidate.tracked.get(), start));
-        return override?.rendered ?? this.settings.renderDocComments;
+    if (rendered) {
+      this.leave(comment);
     }
-    at(line) {
-        return this.comments.find((comment) => line >= comment.startLine && line <= comment.endLine);
+    this.publish();
+  }
+  /* Takes the carets and selections that touch a comment about to be drawn as text to the line under it, else the one above it. The others stay. */
+  leave(comment) {
+    const {
+      editor
+    } = this.language;
+    const selections = editor.getSelections();
+    if (!selections.some(range => touches(range, comment))) {
+      return;
     }
-    touched(comment) {
-        return this.language.editor.getSelections().some((range) => touches(range, comment));
+    const count = editor.positionAt(Number.MAX_SAFE_INTEGER).line + 1;
+    const line = comment.endLine + 1 < count ? comment.endLine + 1 : comment.startLine - 1;
+    if (line < 0) {
+      return;
     }
-    setRendered(comment, rendered) {
-        const start = startOf(comment);
-        const existing = this.overrides.find((candidate) => samePlace(candidate.tracked.get(), start));
-        if (existing !== undefined) {
-            existing.tracked.dispose();
-            this.overrides = this.overrides.filter((candidate) => candidate !== existing);
-        }
-        if (rendered !== this.settings.renderDocComments) {
-            const { editor } = this.language;
-            this.overrides.push({ tracked: editor.trackRange({ start, end: editor.positionAt(comment.to) }), rendered });
-        }
-        if (rendered) {
-            this.leave(comment);
-        }
-        this.publish();
-    }
-    /* Takes the carets and selections that touch a comment about to be drawn as text to the line under it, else the one above it. The others stay. */
-    leave(comment) {
-        const { editor } = this.language;
-        const selections = editor.getSelections();
-        if (!selections.some((range) => touches(range, comment))) {
-            return;
-        }
-        const count = editor.positionAt(Number.MAX_SAFE_INTEGER).line + 1;
-        const line = comment.endLine + 1 < count ? comment.endLine + 1 : comment.startLine - 1;
-        if (line < 0) {
-            return;
-        }
-        const text = editor.textInRange({ start: { line, character: 0 }, end: { line, character: Number.MAX_SAFE_INTEGER } });
-        const character = line > comment.endLine ? (/^[ \t]*/.exec(text)?.[0].length ?? 0) : text.length;
-        const place = { line, character };
-        editor.setSelections(selections.map((range) => (touches(range, comment) ? { start: place, end: place } : range)));
+    const text = editor.textInRange({
+      start: {
+        line,
+        character: 0
+      },
+      end: {
+        line,
+        character: Number.MAX_SAFE_INTEGER
+      }
+    });
+    const character = line > comment.endLine ? /^[ \t]*/.exec(text)?.[0].length ?? 0 : text.length;
+    const place = {
+      line,
+      character
+    };
+    editor.setSelections(selections.map(range => touches(range, comment) ? {
+      start: place,
+      end: place
+    } : range));
+  }
+  /* Shows a comment as source for the reveal that is about to scroll into it, since its row would only be in the way. */
+  reveal(comment) {
+    this.revealed.add(comment);
+    this.publish();
+  }
+  releaseRevealed() {
+    if (this.revealed.size === 0) {
+      return;
     }
-    /* Shows a comment as source for the reveal that is about to scroll into it, since its row would only be in the way. */
-    reveal(comment) {
-        this.revealed.add(comment);
-        this.publish();
+    const {
+      start,
+      end
+    } = this.language.editor.getVisibleRange();
+    const away = [...this.revealed].filter(comment => comment.endLine < start.line || comment.startLine > end.line);
+    if (away.length > 0) {
+      away.forEach(comment => this.revealed.delete(comment));
+      this.publish();
     }
-    releaseRevealed() {
-        if (this.revealed.size === 0) {
-            return;
-        }
-        const { start, end } = this.language.editor.getVisibleRange();
-        const away = [...this.revealed].filter((comment) => comment.endLine < start.line || comment.startLine > end.line);
-        if (away.length > 0) {
-            away.forEach((comment) => this.revealed.delete(comment));
-            this.publish();
-        }
+  }
+  clearOverrides() {
+    for (const override of this.overrides) {
+      override.tracked.dispose();
     }
-    clearOverrides() {
-        for (const override of this.overrides) {
-            override.tracked.dispose();
-        }
-        this.overrides = [];
+    this.overrides = [];
+  }
+  /* Reads the comments now when an edit is waiting to be read. */
+  settle() {
+    if (this.stale) {
+      this.timers.clear(this.settleTimer);
+      this.read();
     }
-    /* Reads the comments now when an edit is waiting to be read. */
-    settle() {
-        if (this.stale) {
-            this.timers.clear(this.settleTimer);
-            this.read();
-        }
+  }
+  read() {
+    if (this.disposed) {
+      return;
     }
-    read() {
-        if (this.disposed) {
-            return;
-        }
-        this.stale = false;
-        const { editor, languageId } = this.language;
-        this.comments = findDocComments(editor.getText(), languageId);
-        this.indexes = new Map(this.comments.map((comment, index) => [comment, index]));
-        this.revealed.clear();
-        const starts = this.comments.map(startOf);
-        this.overrides = this.overrides.filter((override) => {
-            const kept = starts.some((start) => samePlace(override.tracked.get(), start));
-            if (!kept) {
-                override.tracked.dispose();
-            }
-            return kept;
-        });
-        // An edit that replaced everything leaves the rows on offsets at the end, which only a new set of rows repairs.
-        this.publish(true);
-        this.bump();
+    this.stale = false;
+    const {
+      editor,
+      languageId
+    } = this.language;
+    this.comments = findDocComments(editor.getText(), languageId);
+    this.indexes = new Map(this.comments.map((comment, index) => [comment, index]));
+    this.revealed.clear();
+    const starts = this.comments.map(startOf);
+    this.overrides = this.overrides.filter(override => {
+      const kept = starts.some(start => samePlace(override.tracked.get(), start));
+      if (!kept) {
+        override.tracked.dispose();
+      }
+      return kept;
+    });
+    // An edit that replaced everything leaves the rows on offsets at the end, which only a new set of rows repairs.
+    this.publish(true);
+    this.bump();
+  }
+  parse(comment) {
+    const key = `${comment.body}`;
+    let result = this.parsed.get(key);
+    if (result === undefined) {
+      if (this.parsed.size >= MAX_PARSED) {
+        this.parsed.delete(this.parsed.keys().next().value);
+      }
+      result = parseDocComment(comment.body, {
+        php: /^php$/i.test(this.language.languageId)
+      });
+      this.parsed.set(key, result);
     }
-    parse(comment) {
-        const key = `${comment.body}`;
-        let result = this.parsed.get(key);
-        if (result === undefined) {
-            if (this.parsed.size >= MAX_PARSED) {
-                this.parsed.delete(this.parsed.keys().next().value);
-            }
-            result = parseDocComment(comment.body, { php: /^php$/i.test(this.language.languageId) });
-            this.parsed.set(key, result);
-        }
-        return result;
+    return result;
+  }
+  /* Hands the editor the rows and the buttons, unless they are what it has already or `force` says to. */
+  publish(force = false) {
+    if (this.disposed || this.stale) {
+      return;
     }
-    /* Hands the editor the rows and the buttons, unless they are what it has already or `force` says to. */
-    publish(force = false) {
-        if (this.disposed || this.stale) {
-            return;
-        }
-        const { editor } = this.language;
-        const t = (key, options) => this.language.project.i18n.t(`editor:language.docs.${key}`, options);
-        const rendered = this.comments.filter((comment) => this.isRendered(comment));
-        const signature = rendered.map((comment) => `${this.idOf(comment)}@${comment.startLine}-${comment.endLine}`).join('|');
-        if (force || signature !== this.drawn) {
-            this.drawn = signature;
-            const lineHeight = Math.max(editor.getBaseLineHeight?.() ?? 0, ESTIMATED_LINE_HEIGHT);
-            const rows = rendered.map((comment) => ({
-                id: this.idOf(comment),
-                startLine: comment.startLine,
-                endLine: comment.endLine,
-                height: Math.min(comment.endLine - comment.startLine + 1, MAX_ESTIMATED_LINES) * lineHeight,
-                label: this.labelOf(comment, t),
-                onReveal: () => this.reveal(comment),
-                render: (container) => this.mounted(this.idOf(comment), container)
-            }));
-            const kept = new Set(rows.map((row) => row.id));
-            for (const id of [...this.containers.keys()]) {
-                if (!kept.has(id)) {
-                    this.containers.delete(id);
-                }
-            }
-            editor.setReplacements?.(rows, OWNER);
-            this.bump();
-        }
-        this.markerLines.clear();
-        const markers = (this.enabled ? this.comments : []).map((comment) => {
-            const id = `docs:${comment.startLine}`;
-            this.markerLines.set(id, comment.startLine);
-            const on = this.wantsRendered(comment);
-            return { id, line: comment.startLine, label: t(on ? 'showSource' : 'render'), icon: 'book-open', pressed: on };
-        });
-        const marking = markers.map((marker) => `${marker.line}${marker.pressed}`).join('|');
-        if (marking !== this.marked) {
-            this.marked = marking;
-            editor.setGutterMarkers(markers, OWNER);
+    const {
+      editor
+    } = this.language;
+    const t = (key, options) => this.language.project.i18n.t(`editor:language.docs.${key}`, options);
+    const rendered = this.comments.filter(comment => this.isRendered(comment));
+    const signature = rendered.map(comment => `${this.idOf(comment)}@${comment.startLine}-${comment.endLine}`).join('|');
+    if (force || signature !== this.drawn) {
+      this.drawn = signature;
+      const lineHeight = Math.max(editor.getBaseLineHeight?.() ?? 0, ESTIMATED_LINE_HEIGHT);
+      const rows = rendered.map(comment => ({
+        id: this.idOf(comment),
+        startLine: comment.startLine,
+        endLine: comment.endLine,
+        height: Math.min(comment.endLine - comment.startLine + 1, MAX_ESTIMATED_LINES) * lineHeight,
+        label: this.labelOf(comment, t),
+        onReveal: () => this.reveal(comment),
+        render: container => this.mounted(this.idOf(comment), container)
+      }));
+      const kept = new Set(rows.map(row => row.id));
+      for (const id of [...this.containers.keys()]) {
+        if (!kept.has(id)) {
+          this.containers.delete(id);
         }
+      }
+      editor.setReplacements?.(rows, OWNER);
+      this.bump();
     }
-    labelOf(comment, t) {
-        const summary = summaryOf(comment.body);
-        return summary === '' ? t('label') : t('labelNamed', { summary });
+    this.markerLines.clear();
+    const markers = (this.enabled ? this.comments : []).map(comment => {
+      const id = `docs:${comment.startLine}`;
+      this.markerLines.set(id, comment.startLine);
+      const on = this.wantsRendered(comment);
+      return {
+        id,
+        line: comment.startLine,
+        label: t(on ? 'showSource' : 'render'),
+        icon: 'book-open',
+        pressed: on
+      };
+    });
+    const marking = markers.map(marker => `${marker.line}${marker.pressed}`).join('|');
+    if (marking !== this.marked) {
+      this.marked = marking;
+      editor.setGutterMarkers(markers, OWNER);
     }
-    mounted(id, container) {
-        this.containers.set(id, container);
-        this.sweep(container);
-        this.bump();
+  }
+  labelOf(comment, t) {
+    const summary = summaryOf(comment.body);
+    return summary === '' ? t('label') : t('labelNamed', {
+      summary
+    });
+  }
+  mounted(id, container) {
+    this.containers.set(id, container);
+    this.sweep(container);
+    this.bump();
+  }
+  /* The editor drops the element of a row that scrolled out of view, and what React drew into it goes with it. The element just made is not in the page yet. */
+  sweep(fresh) {
+    let removed = false;
+    for (const [id, container] of this.containers) {
+      if (container !== fresh && !container.isConnected) {
+        this.containers.delete(id);
+        removed = true;
+      }
     }
-    /* The editor drops the element of a row that scrolled out of view, and what React drew into it goes with it. The element just made is not in the page yet. */
-    sweep(fresh) {
-        let removed = false;
-        for (const [id, container] of this.containers) {
-            if (container !== fresh && !container.isConnected) {
-                this.containers.delete(id);
-                removed = true;
-            }
-        }
-        if (removed && fresh === undefined) {
-            this.bump();
-        }
+    if (removed && fresh === undefined) {
+      this.bump();
     }
-    bump() {
-        this.version++;
-        for (const listener of [...this.listeners]) {
-            listener();
-        }
+  }
+  bump() {
+    this.version++;
+    for (const listener of [...this.listeners]) {
+      listener();
     }
-}
+  }
+}