@portone/docx-editor 0.4.0 → 0.5.0

package/dist/schema/preservedGuards.js

@@ -1,9 +1,26 @@
 // src/schema/preservedGuards.ts
+import {
+  AddMarkStep,
+  AddNodeMarkStep,
+  AttrStep,
+  RemoveMarkStep,
+  RemoveNodeMarkStep,
+  ReplaceAroundStep,
+  ReplaceStep
+} from "prosemirror-transform";
+import { W_NS } from "../ooxml/names.js";
 import { parseProps, propsChild } from "../ooxml/props.js";
+import {
+  COMMENT_RANGE_MARKERS,
+  PERMISSION_MARKERS,
+  RANGE_MARKERS
+} from "../ooxml/rangeMarkers.js";
+import { parseAttrs } from "../ooxml/tagScan.js";
 import {
   rangeHolds,
   transactionReaches
 } from "./editGuard.js";
+import { visitPreservedFragments } from "./preservedFragments.js";
 function signatures(doc, holds, signature) {
   const found = [];
   doc.descendants((node) => {
@@ -23,19 +40,103 @@ function preservedNodeGuard(name, holds, signature) {
     shuts: (intent, state) => intent.kind === "replace" && rangeHolds(state.doc, intent.from, intent.to, holds)
   };
 }
-var BOOKMARK_XML = /<(?:[\w.-]+:)?bookmark(?:Start|End)\b/;
-function isBookmarkMarker(node) {
-  if (node.type.name === "bookmarkBlock") return true;
-  return node.type.name === "rawInline" && typeof node.attrs.xml === "string" && BOOKMARK_XML.test(node.attrs.xml);
+function isGuardedFragment(node) {
+  return node.attrs.guarded === true;
 }
-function bookmarkSignature(node) {
-  return node.type.name === "bookmarkBlock" ? `block:${node.attrs.srcId}:${node.attrs.name}` : `inline:${node.attrs.xml}`;
+function preservedSignature(node) {
+  return `${node.type.name}:${node.attrs.name}:${node.attrs.srcId}:${node.attrs.xml}`;
 }
-var bookmarkGuard = preservedNodeGuard(
-  "bookmark",
-  isBookmarkMarker,
-  bookmarkSignature
+var guardedNodes = preservedNodeGuard(
+  "preserved",
+  isGuardedFragment,
+  preservedSignature
 );
+var rangeMarkers = /* @__PURE__ */ new Set([
+  ...RANGE_MARKERS,
+  ...PERMISSION_MARKERS,
+  ...COMMENT_RANGE_MARKERS
+]);
+function markerFragments(xml) {
+  const children = parseProps(`<markers>${xml}</markers>`)?.children ?? [];
+  return children.flatMap((child) => {
+    if (!rangeMarkers.has(child.name)) return [];
+    const props = parseProps(child.xml);
+    if (!props) return [];
+    const prefixEnd = props.tag.indexOf(":");
+    const binding = prefixEnd < 0 ? "xmlns" : `xmlns:${props.tag.slice(0, prefixEnd)}`;
+    const namespace = parseAttrs(props.attrs ?? "")?.find(
+      ([name]) => name === binding
+    )?.[1];
+    if (namespace !== void 0 && namespace !== W_NS) return [];
+    return [child.xml];
+  });
+}
+function hasMarkerAttrs(node) {
+  return (node.type.name === "table" || node.type.name === "tableRow") && typeof node.attrs.leadingXml === "string" || (node.type.name === "tableCell" || node.type.name === "tableRow") && typeof node.attrs.trailingXml === "string";
+}
+function carrierBoundaryIn(doc, from, to) {
+  let found = false;
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (hasMarkerAttrs(node) && (from <= pos || to >= pos + node.nodeSize)) {
+      found = true;
+    }
+    return !found;
+  });
+  return found;
+}
+function markerAttrsReached(tr) {
+  return tr.steps.some((step, index) => {
+    const before = tr.docs[index];
+    const after = tr.docs[index + 1] ?? tr.doc;
+    if (step instanceof AttrStep || step instanceof AddNodeMarkStep || step instanceof RemoveNodeMarkStep) {
+      const old = before.nodeAt(step.pos);
+      const next = after.nodeAt(step.pos);
+      return old !== null && hasMarkerAttrs(old) || next !== null && hasMarkerAttrs(next);
+    }
+    if (step instanceof AddMarkStep || step instanceof RemoveMarkStep)
+      return false;
+    if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep))
+      return true;
+    let reached = false;
+    step.getMap().forEach((oldStart, oldEnd, newStart, newEnd) => {
+      reached ||= carrierBoundaryIn(before, oldStart, oldEnd) || carrierBoundaryIn(after, newStart, newEnd);
+    });
+    return reached;
+  });
+}
+function preservedFragments(doc) {
+  const found = [];
+  visitPreservedFragments(doc, (node, _pos, xml, attr) => {
+    if (attr !== void 0 && xml !== null) {
+      found.push(
+        ...markerFragments(xml).map((fragment) => `marker:${fragment}`)
+      );
+    } else if (isGuardedFragment(node)) {
+      found.push(preservedSignature(node));
+    }
+  });
+  return found;
+}
+var preservedGuard = {
+  name: "preserved",
+  change: (tr) => !(transactionReaches(tr, isGuardedFragment) || markerAttrsReached(tr)) || same(preservedFragments(tr.before), preservedFragments(tr.doc)),
+  shuts: (intent, state) => {
+    if (guardedNodes.shuts(intent, state)) return true;
+    if (intent.kind !== "replace") return false;
+    let shut = false;
+    state.doc.nodesBetween(intent.from, intent.to, (node, pos) => {
+      if (intent.from > pos && intent.to < pos + node.nodeSize) return true;
+      if (!hasMarkerAttrs(node)) return true;
+      for (const attr of ["leadingXml", "trailingXml"]) {
+        const xml = node.attrs[attr];
+        if (typeof xml === "string" && markerFragments(xml).length > 0)
+          shut = true;
+      }
+      return !shut;
+    });
+    return shut;
+  }
+};
 function isNoteReference(node) {
   return node.type.name === "noteReference";
 }
@@ -73,8 +174,8 @@ var sectionGuard = {
   }
 };
 export {
-  bookmarkGuard,
   noteGuard,
+  preservedGuard,
   preservedNodeGuard,
   sectionGuard
 };

package/dist/schema/protection.d.ts

@@ -44,6 +44,11 @@ export declare function withoutComments(node: PMNode): PMNode;
  * The comparison is by source (`./sourceEquality`): a display value worked out again beside a
  * comment is no content change, so it neither turns a comment edit into a body edit nor takes the
  * ownership question off it.
+ *
+ * What a comment says is a story on the document node (`./stories`), so the comment stories come
+ * off before the markers do; without that, writing one of them would move the document node and
+ * every comment edit would read as a body edit. The footnote and header stories stay: rewriting
+ * one of those is a change to what the document says, and a comment protection turns it down.
  */
 export declare function changesOnlyComments(before: PMNode, after: PMNode): boolean;
 /**
@@ -82,9 +87,33 @@ export declare function commentEditsOwned(before: PMNode, after: PMNode, rules:
  */
 export declare function protectionAllows(before: PMNode, after: PMNode, rules: ProtectionState): boolean;
 /**
- * Whether every comment and reply that appeared between the two documents was written under this
- * identity, and every one that was already there kept the identity it was written under. The
- * editor takes an addition from anyone, since it writes the author itself; a server taking a file
- * back does not, since the file could claim any author.
+ * The display names these comment bodies write under while recording nobody for them.
+ *
+ * A name here is one no comment in the file can be attributed through, so a comment that appears
+ * under it names no more of a person than the ones already there do.
+ */
+export declare function unattributedCommentAuthors(bodies: Iterable<{
+    author: string | null;
+    authorId: string | null;
+}>): ReadonlySet<string>;
+/**
+ * Whether a comment or reply that appeared is one this author was in a position to write.
+ *
+ * One carrying this identity is, since a file can claim any author and only the requester's own
+ * identity vouches for itself. So is one carrying no identity at all under a name the original
+ * already holds unattributed: the writer records no person for such a name, precisely so that the
+ * comments already written under it are not handed to whoever comments next (`docx/comments/people`),
+ * and a submission the writer produced has to be one the verifier takes. Such a comment claims
+ * nobody and stays everyone's to edit, and the name it shows was already in the file.
+ */
+export declare function commentAdditionAllowed(added: {
+    author: string | null;
+    authorId: string | null;
+}, authorId: string, unattributed: ReadonlySet<string>): boolean;
+/**
+ * Whether every comment and reply that appeared between the two documents was one this identity
+ * could have written, and every one that was already there kept the identity it was written under.
+ * The editor takes an addition from anyone, since it writes the author itself; a server taking a
+ * file back does not, since the file could claim any author.
  */
-export declare function commentAdditionsBy(before: PMNode, after: PMNode, authorId: string): boolean;
+export declare function commentAdditionsBy(before: PMNode, after: PMNode, authorId: string, unattributed?: ReadonlySet<string>): boolean;

package/dist/schema/protection.js

@@ -1,6 +1,12 @@
 // src/schema/protection.ts
 import { Fragment } from "prosemirror-model";
 import { sameSource } from "./sourceEquality.js";
+import {
+  sameStory,
+  storyKey,
+  storyNodeOf,
+  withoutCommentStories
+} from "./stories.js";
 var COMMENT_NODES = /* @__PURE__ */ new Set([
   "commentStart",
   "commentEnd",
@@ -18,21 +24,25 @@ function withoutComments(node) {
   return node.copy(Fragment.fromArray(kept));
 }
 function changesOnlyComments(before, after) {
-  return sameSource(withoutComments(before), withoutComments(after));
+  return sameSource(
+    withoutComments(withoutCommentStories(before)),
+    withoutComments(withoutCommentStories(after))
+  );
 }
 function stringOrNull(value) {
   return typeof value === "string" ? value : null;
 }
-function bodyOf(attrs) {
+function bodyOf(attrs, doc) {
+  const id = stringOrNull(attrs.id);
   return {
     authorId: stringOrNull(attrs.authorId),
     author: stringOrNull(attrs.author),
     initials: stringOrNull(attrs.initials),
     date: stringOrNull(attrs.date),
-    text: stringOrNull(attrs.text) ?? ""
+    body: id === null ? null : storyNodeOf(doc, storyKey("comment", id))
   };
 }
-function replyBodies(value) {
+function replyBodies(value, doc) {
   const replies = /* @__PURE__ */ new Map();
   if (!Array.isArray(value)) return replies;
   for (const entry of value) {
@@ -40,7 +50,7 @@ function replyBodies(value) {
     const reply = entry;
     const id = stringOrNull(reply.id);
     if (id === null) continue;
-    replies.set(id, bodyOf(reply));
+    replies.set(id, bodyOf(reply, doc));
   }
   return replies;
 }
@@ -51,8 +61,8 @@ function threadsIn(doc) {
     const id = stringOrNull(node.attrs.id);
     if (id === null || threads.has(id)) return true;
     threads.set(id, {
-      ...bodyOf(node.attrs),
-      replies: replyBodies(node.attrs.replies)
+      ...bodyOf(node.attrs, doc),
+      replies: replyBodies(node.attrs.replies, doc)
     });
     return true;
   });
@@ -90,7 +100,7 @@ function sameIdentity(was, now) {
   return was.authorId === now.authorId && was.author === now.author;
 }
 function sameWords(was, now) {
-  return was.text === now.text && was.initials === now.initials && was.date === now.date;
+  return sameStory(was.body, now.body) && was.initials === now.initials && was.date === now.date;
 }
 function commentIdentitiesKept(before, after) {
   const now = threadsIn(after);
@@ -140,33 +150,51 @@ function protectionAllows(before, after, rules) {
     }
   }
 }
-function commentAdditionsBy(before, after, authorId) {
+function unattributedCommentAuthors(bodies) {
+  const names = /* @__PURE__ */ new Set();
+  for (const body of bodies) {
+    if (body.authorId === null && body.author !== null) names.add(body.author);
+  }
+  return names;
+}
+function commentAdditionAllowed(added, authorId, unattributed) {
+  if (added.authorId !== null) return added.authorId === authorId;
+  return added.author !== null && unattributed.has(added.author);
+}
+function commentAdditionsBy(before, after, authorId, unattributed) {
   if (!commentIdentitiesKept(before, after)) return false;
   const was = threadsIn(before);
+  const names = unattributed ?? unattributedCommentAuthors(
+    Array.from(was.values()).flatMap((thread) => [
+      thread,
+      ...thread.replies.values()
+    ])
+  );
+  const allowed = (added) => commentAdditionAllowed(added, authorId, names);
   for (const [id, thread] of threadsIn(after)) {
     const earlier = was.get(id);
     if (earlier === void 0) {
-      if (thread.authorId !== authorId) return false;
+      if (!allowed(thread)) return false;
       for (const reply of thread.replies.values()) {
-        if (reply.authorId !== authorId) return false;
+        if (!allowed(reply)) return false;
       }
       continue;
     }
     for (const [replyId, reply] of thread.replies) {
-      if (!earlier.replies.has(replyId) && reply.authorId !== authorId) {
-        return false;
-      }
+      if (!earlier.replies.has(replyId) && !allowed(reply)) return false;
     }
   }
   return true;
 }
 export {
   changesOnlyComments,
+  commentAdditionAllowed,
   commentAdditionsBy,
   commentEditsOwned,
   commentIdentitiesKept,
   commentOwned,
   isCommentNode,
   protectionAllows,
+  unattributedCommentAuthors,
   withoutComments
 };

package/dist/schema/rendering.js

@@ -20,7 +20,9 @@ function runMarkSpec(attrs, fontFallbacks) {
       lang: format?.lang,
       "data-rattrs": text(attrs.rAttrs),
       "data-rpr": text(attrs.rPr),
-      "data-fmt": formatJson(format)
+      "data-fmt": formatJson(format),
+      // Read by `styles/editor.css` to stand a link's own line down
+      "data-underline": format?.underline && format.underline !== "none" ? "" : void 0
     },
     0
   ];

package/dist/schema/stories.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The side stories a document holds beside its body: a comment's text, a footnote's, a header's.
+ *
+ * Each is a document of this same schema, held on the document node under the key that names it,
+ * so an edit to one rides a transaction and lands in the history the way a body edit does. What
+ * turns one into XML and back is `docx/story`; here is only what the schema layer needs, which is
+ * the key, the value on the node, and the two comparisons the protection rules are written over.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+export type StoryKind = "comment" | "footnote" | "endnote" | "header" | "footer";
+/** `comment:4`, `footnote:2`, `header:word/header1.xml` */
+export type StoryKey = `${StoryKind}:${string}`;
+/** One story as the document node holds it, which is `Node.toJSON` of a document of this schema */
+export interface StoryJson {
+    readonly type: string;
+    readonly attrs?: Readonly<Record<string, unknown>>;
+    readonly content?: readonly unknown[];
+}
+/** The attr the stories stand on, named here so the schema and the readers cannot spell it apart */
+export declare const STORIES_ATTR = "stories";
+export declare function storyKey(kind: StoryKind, id: string): StoryKey;
+/**
+ * The key this text spells, or null for one that names no kind of story.
+ *
+ * An id carries colons of its own - a header is named by its part path - so the kind is read off
+ * the front and everything after the first colon is the id.
+ */
+export declare function asStoryKey(text: string): StoryKey | null;
+/** The stories this document holds, under the key naming each */
+export declare function storiesOf(doc: PMNode): Readonly<Record<string, StoryJson>>;
+/** The story this key names as a document node, and null where the document holds none */
+export declare function storyNodeOf(doc: PMNode, key: StoryKey): PMNode | null;
+/**
+ * Whether the two stories say the same thing.
+ *
+ * The block keys are left out of it, because they name the document each story was read from and
+ * two files opened side by side never share one. Everything else a block would be written back as
+ * is compared (`./sourceEquality`), so a body that gained a bold run reads as changed and one
+ * whose display values were worked out again does not.
+ */
+export declare function sameStory(a: PMNode | null, b: PMNode | null): boolean;
+/**
+ * The document with its comment stories taken out of it, replies included.
+ *
+ * A comment edit now moves the document node, and a comparison that could not see past that would
+ * call every comment edit a body edit. The footnote and header stories stay: changing one of them
+ * is a change to what the document says, and a comment protection is meant to turn it down.
+ */
+export declare function withoutCommentStories(doc: PMNode): PMNode;

package/dist/schema/stories.js

@@ -0,0 +1,78 @@
+// src/schema/stories.ts
+import { sameSource } from "./sourceEquality.js";
+var STORIES_ATTR = "stories";
+var STORY_KINDS = [
+  "comment",
+  "footnote",
+  "endnote",
+  "header",
+  "footer"
+];
+function storyKey(kind, id) {
+  return `${kind}:${id}`;
+}
+function asStoryKey(text) {
+  const at = text.indexOf(":");
+  if (at < 1) return null;
+  const named = text.slice(0, at);
+  const kind = STORY_KINDS.find((candidate) => candidate === named);
+  return kind === void 0 ? null : storyKey(kind, text.slice(at + 1));
+}
+function isStoryJson(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "type") === "string";
+}
+function storiesOf(doc) {
+  const held = doc.attrs[STORIES_ATTR];
+  if (typeof held !== "object" || held === null) return {};
+  const stories = {};
+  for (const [key, value] of Object.entries(held)) {
+    if (asStoryKey(key) !== null && isStoryJson(value)) stories[key] = value;
+  }
+  return stories;
+}
+var built = /* @__PURE__ */ new WeakMap();
+function storyNodeOf(doc, key) {
+  const json = storiesOf(doc)[key];
+  if (json === void 0) return null;
+  const cached = built.get(json);
+  if (cached) return cached;
+  const node = doc.type.schema.nodeFromJSON(json);
+  built.set(json, node);
+  return node;
+}
+var unkeyed = /* @__PURE__ */ new WeakMap();
+function withoutBlockKeys(node) {
+  if (node.isText) return node;
+  const cached = unkeyed.get(node);
+  if (cached) return cached;
+  const children = node.children.map(withoutBlockKeys);
+  const attrs = node.attrs.srcId === null || node.attrs.srcId === void 0 ? node.attrs : { ...node.attrs, srcId: null };
+  const stripped = attrs === node.attrs && children.every((child, at) => child === node.child(at)) ? node : node.type.create(attrs, children, node.marks);
+  unkeyed.set(node, stripped);
+  return stripped;
+}
+function sameStory(a, b) {
+  if (a === null || b === null) return a === b;
+  return sameSource(withoutBlockKeys(a), withoutBlockKeys(b));
+}
+function withoutCommentStories(doc) {
+  const stories = storiesOf(doc);
+  const kept = Object.fromEntries(
+    Object.entries(stories).filter(([key]) => !key.startsWith("comment:"))
+  );
+  if (Object.keys(kept).length === Object.keys(stories).length) return doc;
+  return doc.type.create(
+    { ...doc.attrs, [STORIES_ATTR]: kept },
+    doc.content,
+    doc.marks
+  );
+}
+export {
+  STORIES_ATTR,
+  asStoryKey,
+  sameStory,
+  storiesOf,
+  storyKey,
+  storyNodeOf,
+  withoutCommentStories
+};

package/dist/styles/classNames.d.ts

@@ -46,13 +46,11 @@ export declare const editorClassNames: {
     readonly commentMarker: "docx-editor-comment-marker";
     /** A superscript footnote or endnote reference */
     readonly noteReference: "docx-editor-note-reference";
-    /** An invisible bookmark marker that occurs between body blocks */
-    readonly bookmarkBlock: "docx-editor-bookmark-block";
     readonly rawInline: "docx-editor-raw-inline";
+    /** A preserved child of a run, drawn by the `display` its policy gave it */
+    readonly rawRunContent: "docx-editor-raw-run";
+    /** A preserved block, drawn by the `display` its policy gave it */
     readonly rawBlock: "docx-editor-raw-block";
-    /** A preserved block that carries the original XML directly (inside a table cell, and so on) */
-    readonly rawXmlBlock: "docx-editor-raw-xml";
-    readonly tablePlaceholder: "docx-editor-table";
     /** The box holding both the paper and the marks overlaid on it */
     readonly pageLayer: "docx-editor-page-layer";
     /** All of the page marks drawn over the paper */

package/dist/styles/classNames.js

@@ -41,13 +41,11 @@ var editorClassNames = {
   commentMarker: `${PREFIX}-comment-marker`,
   /** A superscript footnote or endnote reference */
   noteReference: `${PREFIX}-note-reference`,
-  /** An invisible bookmark marker that occurs between body blocks */
-  bookmarkBlock: `${PREFIX}-bookmark-block`,
   rawInline: `${PREFIX}-raw-inline`,
+  /** A preserved child of a run, drawn by the `display` its policy gave it */
+  rawRunContent: `${PREFIX}-raw-run`,
+  /** A preserved block, drawn by the `display` its policy gave it */
   rawBlock: `${PREFIX}-raw-block`,
-  /** A preserved block that carries the original XML directly (inside a table cell, and so on) */
-  rawXmlBlock: `${PREFIX}-raw-xml`,
-  tablePlaceholder: `${PREFIX}-table`,
   /** The box holding both the paper and the marks overlaid on it */
   pageLayer: `${PREFIX}-page-layer`,
   /** All of the page marks drawn over the paper */

package/dist/styles.css

@@ -62,11 +62,6 @@
   overflow: hidden;
 }
 
-/* A body-level bookmark occupies a document-model position but draws no placeholder. */
-.docx-editor-bookmark-block {
-  display: none;
-}
-
 .docx-editor-comment-range {
   background: #fff2a8;
   box-shadow: inset 0 -2px #e2b714;
@@ -588,10 +583,12 @@ button.docx-editor-comment-body {
    * is the same paper `A4_PORTRAIT` names in `docx/pageGeometry.ts`.
    *
    * The height is used only as a minimum, so that even short text feels like a full
-   * sheet and longer text simply grows it.
-   * The body left inside these margins is the width of a new table and the height
-   * between page boundaries; `page/pageLayout.ts` works both out from the very same
-   * geometry, so the divider on screen lands where the sheet actually ends.
+   * sheet and longer text simply grows it, and the editor supplies one grown to the
+   * last page's own bottom margin where a later section's is deeper than this one's.
+   * The body left inside these margins is what the sheet itself is drawn at. The width
+   * of a new table and the height between two page boundaries come from the paper of
+   * the section they stand in, which `page/pageLayout.ts` works out from the very same
+   * kind of geometry, so the divider on screen lands where that page actually ends.
    */
   --docx-editor-page-width: 21cm;
   --docx-editor-page-height: 29.7cm;
@@ -677,7 +674,10 @@ button.docx-editor-comment-body {
   border-top: 1px dotted rgb(26 79 208 / 40%);
 }
 
-/* Display-only projections of the first section's header and footer stories. */
+/*
+ * Display-only projections of the header and footer stories of the section each page
+ * belongs to (`page/PageGuides.tsx`).
+ */
 .docx-editor-page-header,
 .docx-editor-page-footer {
   position: absolute;
@@ -928,12 +928,21 @@ button.docx-editor-comment-body {
  * held as data rather than as an `href`, so a click here places the caret the way a click on any
  * other text does, and opening the address is the link panel's business.
  * A color the run itself carries paints over this one, the same as any other run formatting.
+ * The line is a border rather than an underline so that it runs on across a tab, which a text
+ * decoration is not painted over.
  */
 .docx-editor-link {
   color: #1a56db;
   border-bottom: 1px solid currentcolor;
 }
 
+/* A word processor underlines a link through the `Hyperlink` style, so the line above would be a second one */
+.docx-editor-link:has([data-underline]):not(
+  :has(.docx-editor-run:not([data-underline]))
+) {
+  border-bottom: none;
+}
+
 /*
  * A content control that says its contents may not be edited (`editor/plugins/lockedContent` refuses
  * the edits). Yellow is what the contract templates already paint their settled parts with.
@@ -957,15 +966,63 @@ button.docx-editor-comment-body {
   cursor: not-allowed;
 }
 
+/*
+ * A preserved fragment inside a paragraph or inside a run. What it draws is the `display` the
+ * preservation rule gave it (`docx/importPolicy`), so the rule is read here as an attribute
+ * rather than as a second list of element names.
+ */
+.docx-editor-raw-inline,
+.docx-editor-raw-run {
+  vertical-align: baseline;
+}
+
 /* Elements that, like bookmarks, must not be visible */
-.docx-editor-raw-inline {
+.docx-editor-raw-inline[data-display="hidden"],
+.docx-editor-raw-run[data-display="hidden"] {
   display: inline-block;
   width: 0;
   overflow: hidden;
+}
+
+/* A character the file stands for and the editor cannot type, drawn as itself */
+.docx-editor-raw-inline[data-display="text"],
+.docx-editor-raw-run[data-display="text"] {
+  white-space: pre;
+}
+
+/*
+ * Content carried through whole that the editor has no model for: a field, a tracked change, a
+ * symbol. Small enough to read the line around it, outlined so it is plainly not ordinary text.
+ *
+ * Deliberately not `user-select: none`. A chip that carries its content whole can be selected and
+ * deleted whole, and taking it out of the selection would leave a reader dragging across it with
+ * no way to reach it.
+ */
+.docx-editor-raw-inline[data-display="chip"],
+.docx-editor-raw-run[data-display="chip"] {
+  display: inline-block;
+  max-width: 16em;
+  overflow: hidden;
+  padding: 0 3px;
+  border: 1px dashed #9a9a9a;
+  border-radius: 3px;
+  background: #f2f2f2;
+  color: #595959;
+  font-size: 0.85em;
+  font-family: system-ui, sans-serif;
+  line-height: 1.4;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   vertical-align: baseline;
 }
 
-.docx-editor-table,
+/* The chip while it is the selection, which is how a reader sees what a delete would take */
+.docx-editor-raw-inline[data-display="chip"].ProseMirror-selectednode,
+.docx-editor-raw-run[data-display="chip"].ProseMirror-selectednode {
+  outline: 2px solid #1a73e8;
+  outline-offset: 1px;
+}
+
 .docx-editor-raw-block {
   margin: 8pt 0;
   padding: 10pt 12pt;
@@ -978,6 +1035,11 @@ button.docx-editor-comment-body {
   user-select: none;
 }
 
+/* A range marker holds a spot between blocks and stands for nothing on the page. */
+.docx-editor-raw-block[data-display="hidden"] {
+  display: none;
+}
+
 /*
  * The toolbar.
  *

package/dist/table/resize.d.ts

@@ -29,7 +29,8 @@ export interface ColumnEdge {
 /**
  * The limit a table can be widened to (dxa).
  *
- * The body width of the paper the document names, minus the table indent (`w:tblInd`).
+ * The body width of the paper handed in, which is the section's the table stands in, minus
+ * the table indent (`w:tblInd`).
  * For a table already stored wider than that, its current width is the limit, so
  * dragging can only narrow it.
  */
@@ -49,7 +50,8 @@ export declare function resizedGridCols(gridCols: number[], col: number, width:
  * Because it is one single transaction, a single undo returns everything to the state
  * before the drag.
  *
- * The geometry is the paper the open document names, which is what the table is kept
- * inside. The editor layer reads it off the state; this layer is handed it.
+ * The geometry is the paper of the section the table stands in, which is what the table is
+ * kept inside. The editor layer reads it off the state (`editor/documentStyles`); this layer
+ * is handed it.
  */
 export declare function buildResizeColumnTransaction(state: EditorState, edge: ColumnEdge, geometry: PageGeometry): Transaction | null;