@beyondwork/docx-react-component 1.0.31 → 1.0.33

package/src/ui/headless/selection-tool-types.ts

@@ -3,7 +3,6 @@ import type {
   CommentSidebarThreadSnapshot,
   FormattingStateSnapshot,
   InteractionGuardSnapshot,
-  StyleCatalogSnapshot,
   TableStructureContextSnapshot,
   SuggestionsSnapshot,
   TrackedChangeEntrySnapshot,
@@ -79,7 +78,7 @@ export type StructureContextKind = "table" | "image" | "object" | "list";
 export interface StructureContextSelectionToolModel extends BaseSelectionToolModel {
   kind: "structure-context";
   structureKind: StructureContextKind;
-  tableStyles?: StyleCatalogSnapshot["tables"];
+  tableStyles?: Array<{ styleId: string; displayName: string }>;
   activeTable?: TableStructureContextSnapshot | null;
   activeImage?: ActiveImageContext;
   activeObject?: ActiveObjectContext;

package/src/ui/workflow-surface-blocked-rails.ts

@@ -3,6 +3,7 @@ import type {
   RuntimeRenderSnapshot,
   SurfaceBlockSnapshot,
   WorkflowBlockedCommandReason,
+  WorkflowLockedZone,
   WorkflowMarkupSnapshot,
 } from "../api/public-types";
 
@@ -10,6 +11,21 @@ export function deriveVisibleWorkflowBlockedRails(
   surface: RuntimeRenderSnapshot["surface"] | undefined,
   markupSnapshot: WorkflowMarkupSnapshot | null,
 ): WorkflowBlockedCommandReason[] {
+  return deriveVisibleWorkflowLockedZones(surface, markupSnapshot).map((zone) => ({
+    code: zone.code,
+    message: zone.detail,
+    fragmentId: zone.fragmentId,
+    label: zone.label,
+    detail: zone.detail,
+    anchor: zone.anchor,
+    storyTarget: zone.storyTarget,
+  }));
+}
+
+export function deriveVisibleWorkflowLockedZones(
+  surface: RuntimeRenderSnapshot["surface"] | undefined,
+  markupSnapshot: WorkflowMarkupSnapshot | null,
+): WorkflowLockedZone[] {
   if (!surface || !markupSnapshot) {
     return [];
   }
@@ -22,8 +38,10 @@ export function deriveVisibleWorkflowBlockedRails(
       ),
     )
     .map((fragment) => ({
+      fragmentId: fragment.fragmentId,
       code: fragment.blockedReasonCode,
-      message: fragment.detail,
+      label: fragment.label,
+      detail: fragment.detail,
       anchor: fragment.anchor,
       storyTarget: fragment.storyTarget,
     }));

package/src/ui-tailwind/chrome/tw-selection-tool-structure.tsx

@@ -52,8 +52,7 @@ export function TwSelectionToolStructure(props: TwSelectionToolStructureProps) {
       return (
         <TwTableContextToolbar
           disabled={!props.model.canMutate}
-          tableContext={props.model.activeTable ?? null}
-          tableStyles={props.model.tableStyles ?? []}
+          tableContext={props.model.activeTable ?? null}          tableStyles={props.model.tableStyles ?? []}
           onSetTableStyle={props.onSetTableStyle}
           onAddRowBefore={props.onAddRowBefore}
           onAddRowAfter={props.onAddRowAfter}

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import type {
-  StyleCatalogSnapshot,
   TableOperationCapabilitySnapshot,
   TableStructureContextSnapshot,
 } from "../../api/public-types";
@@ -10,7 +9,7 @@ import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-edi
 export interface TwTableContextToolbarProps {
   disabled: boolean;
   tableContext: TableStructureContextSnapshot | null;
-  tableStyles: StyleCatalogSnapshot["tables"];
+  tableStyles: Array<{ styleId: string; displayName: string }>;
   onSetTableStyle?: (styleId: string) => void;
   onAddRowBefore?: () => void;
   onAddRowAfter?: () => void;

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -9,6 +9,7 @@ import type {
   EditorStoryTarget,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowLockedZone,
   WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../../api/public-types";
@@ -81,16 +82,16 @@ function getWorkflowMetadataInlineClass(): string {
 
 function getWorkflowBlockedInlineClass(reason: WorkflowBlockedCommandReason): string {
   if (reason.code === "workflow_blocked_import") {
-    return "wre-workflow-inline wre-workflow-inline-blocked-import";
+    return "wre-workflow-inline wre-workflow-inline-locked-zone wre-workflow-inline-blocked-import";
   }
-  return "wre-workflow-inline wre-workflow-inline-preserve-only";
+  return "wre-workflow-inline wre-workflow-inline-locked-zone wre-workflow-inline-preserve-only";
 }
 
 function getWorkflowBlockedRailClass(reason: WorkflowBlockedCommandReason): string {
   if (reason.code === "workflow_blocked_import") {
-    return "wre-workflow-rail wre-workflow-rail-blocked-import";
+    return "wre-workflow-rail wre-workflow-rail-locked-zone wre-workflow-rail-blocked-import";
   }
-  return "wre-workflow-rail wre-workflow-rail-preserve-only";
+  return "wre-workflow-rail wre-workflow-rail-locked-zone wre-workflow-rail-preserve-only";
 }
 
 function hasBlockChildren(node: PMNode): boolean {
@@ -172,6 +173,56 @@ function buildAnchorPmRange(
   };
 }
 
+function collectLockedPmRanges(
+  lockedZones: readonly WorkflowLockedZone[] | undefined,
+  activeStory: EditorStoryTarget,
+  positionMap: PositionMap,
+): Array<{ from: number; to: number; zone: WorkflowLockedZone }> {
+  if (!lockedZones || lockedZones.length === 0) {
+    return [];
+  }
+  const ranges: Array<{ from: number; to: number; zone: WorkflowLockedZone }> = [];
+  for (const zone of lockedZones) {
+    const zoneStoryTarget = zone.storyTarget ?? MAIN_STORY_TARGET;
+    if (!storyTargetsEqual(zoneStoryTarget, activeStory)) {
+      continue;
+    }
+    const pmRange = buildAnchorPmRange(zone.anchor, positionMap);
+    if (!pmRange || !pmRange.allowInline || pmRange.from >= pmRange.to) {
+      continue;
+    }
+    ranges.push({ from: pmRange.from, to: pmRange.to, zone });
+  }
+  return ranges;
+}
+
+function subtractInlineOverlaps(
+  baseRange: { from: number; to: number },
+  blockedRanges: Array<{ from: number; to: number }>,
+): Array<{ from: number; to: number }> {
+  let segments = [baseRange];
+  for (const blockedRange of blockedRanges) {
+    const nextSegments: Array<{ from: number; to: number }> = [];
+    for (const segment of segments) {
+      if (blockedRange.to <= segment.from || blockedRange.from >= segment.to) {
+        nextSegments.push(segment);
+        continue;
+      }
+      if (blockedRange.from > segment.from) {
+        nextSegments.push({ from: segment.from, to: blockedRange.from });
+      }
+      if (blockedRange.to < segment.to) {
+        nextSegments.push({ from: blockedRange.to, to: segment.to });
+      }
+    }
+    segments = nextSegments;
+    if (segments.length === 0) {
+      break;
+    }
+  }
+  return segments.filter((segment) => segment.from < segment.to);
+}
+
 function pushRailDecorations(
   decorations: Decoration[],
   doc: PMNode,
@@ -210,10 +261,12 @@ export function buildDecorations(
   revisionModel: RevisionDecorationModel | undefined,
   markupDisplay: MarkupDisplay,
   showTrackedChanges = true,
+  suggestionsEnabled = false,
   workflowScopes?: readonly WorkflowScope[],
   activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
   workflowCandidates?: readonly WorkflowCandidateRange[],
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
+  workflowLockedZones?: readonly WorkflowLockedZone[],
   activeWorkflowWorkItemId?: string | null,
   activeWorkflowScopeIds?: readonly string[],
   workflowMetadata?: readonly WorkflowMetadataMarkup[],
@@ -221,6 +274,7 @@ export function buildDecorations(
   const decorations: Decoration[] = [];
   const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
   const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
+  const lockedPmRanges = collectLockedPmRanges(workflowLockedZones, activeStory, positionMap);
 
   // Walk comment threads and create inline decorations
   if (commentModel) {
@@ -271,6 +325,47 @@ export function buildDecorations(
       // Skip visual styling when tracked changes display is off
       if (!showTrackedChanges) continue;
 
+      const pmFrom = positionMap.runtimeToPm(rev.from);
+      const pmTo = positionMap.runtimeToPm(rev.to);
+      if (pmFrom >= pmTo) continue;
+
+      if (suggestionsEnabled) {
+        if (rev.kind === "insertion") {
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: "text-insert",
+              "data-revision-id": rev.revisionId,
+            }),
+          );
+          decorations.push(
+            Decoration.widget(pmFrom, () => {
+              const el = document.createElement("span");
+              el.textContent = "[";
+              el.className = "text-insert";
+              el.setAttribute("contenteditable", "false");
+              return el;
+            }, { side: -1, key: `${rev.revisionId}-open` }),
+          );
+          decorations.push(
+            Decoration.widget(pmTo, () => {
+              const el = document.createElement("span");
+              el.textContent = "]";
+              el.className = "text-insert";
+              el.setAttribute("contenteditable", "false");
+              return el;
+            }, { side: 1, key: `${rev.revisionId}-close` }),
+          );
+        } else if (rev.kind === "deletion") {
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: "text-danger line-through decoration-danger/80 decoration-1",
+              "data-revision-id": rev.revisionId,
+            }),
+          );
+        }
+        continue;
+      }
+
       const cls = getRevisionHighlightClass(
         revisionModel,
         rev.from,
@@ -279,16 +374,12 @@ export function buildDecorations(
       );
       if (!cls) continue;
 
-      const pmFrom = positionMap.runtimeToPm(rev.from);
-      const pmTo = positionMap.runtimeToPm(rev.to);
-      if (pmFrom < pmTo) {
-        decorations.push(
-          Decoration.inline(pmFrom, pmTo, {
-            class: cls,
-            "data-revision-id": rev.revisionId,
-          }),
-        );
-      }
+      decorations.push(
+        Decoration.inline(pmFrom, pmTo, {
+          class: cls,
+          "data-revision-id": rev.revisionId,
+        }),
+      );
     }
   }
 
@@ -307,15 +398,21 @@ export function buildDecorations(
         );
 
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
-        decorations.push(
-          Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
-            "data-workflow-scope-id": scope.scopeId,
-            "data-workflow-scope-mode": scope.mode,
-            "data-workflow-active": isActiveWorkItem ? "true" : "false",
-            ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
-          }),
+        const visibleScopeSegments = subtractInlineOverlaps(
+          { from: pmRange.from, to: pmRange.to },
+          lockedPmRanges.filter((range) => range.to > pmRange.from && range.from < pmRange.to),
         );
+        for (const visibleSegment of visibleScopeSegments) {
+          decorations.push(
+            Decoration.inline(visibleSegment.from, visibleSegment.to, {
+              class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
+              "data-workflow-scope-id": scope.scopeId,
+              "data-workflow-scope-mode": scope.mode,
+              "data-workflow-active": isActiveWorkItem ? "true" : "false",
+              ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
+            }),
+          );
+        }
       }
 
       pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
@@ -375,8 +472,19 @@ export function buildDecorations(
     }
   }
 
-  if (workflowBlockedReasons) {
-    for (const reason of workflowBlockedReasons) {
+  if ((workflowLockedZones && workflowLockedZones.length > 0) || workflowBlockedReasons) {
+    const blockedReasonsToRender = workflowLockedZones && workflowLockedZones.length > 0
+      ? workflowLockedZones.map((zone) => ({
+        code: zone.code,
+        message: zone.detail,
+        anchor: zone.anchor,
+        storyTarget: zone.storyTarget,
+        fragmentId: zone.fragmentId,
+        label: zone.label,
+        detail: zone.detail,
+      }))
+      : workflowBlockedReasons ?? [];
+    for (const reason of blockedReasonsToRender) {
       if (
         reason.code !== "workflow_preserve_only" &&
         reason.code !== "workflow_blocked_import"
@@ -393,6 +501,8 @@ export function buildDecorations(
           Decoration.inline(pmRange.from, pmRange.to, {
             class: getWorkflowBlockedInlineClass(reason),
             "data-workflow-blocked-code": reason.code,
+            ...(reason.fragmentId ? { "data-workflow-fragment-id": reason.fragmentId } : {}),
+            "data-workflow-zone": "locked",
           }),
         );
       }
@@ -402,6 +512,8 @@ export function buildDecorations(
         className: getWorkflowBlockedRailClass(reason),
         attrs: {
           "data-workflow-blocked-code": reason.code,
+          ...(reason.fragmentId ? { "data-workflow-fragment-id": reason.fragmentId } : {}),
+          "data-workflow-zone": "locked",
         },
       }, railRangeCache);
     }

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -489,6 +489,7 @@ export const editorSchema = new Schema({
         label: { default: "Locked" },
         detail: { default: "" },
         presentation: { default: "inline-chip" },
+        displayText: { default: null },
       },
       toDOM(node) {
         const presentation = node.attrs.presentation as string;
@@ -505,6 +506,34 @@ export const editorSchema = new Schema({
             },
           ];
         }
+        if (presentation === "text-box") {
+          return [
+            "span",
+            {
+              class: "mx-0.5 inline-flex max-w-full whitespace-pre-wrap rounded border border-slate-300 bg-slate-50 px-2 py-1 align-top text-sm leading-snug text-slate-700 shadow-sm",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "text-box",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+            (node.attrs.displayText as string | null) ?? (node.attrs.label as string),
+          ];
+        }
+        if (presentation === "checkbox") {
+          return [
+            "span",
+            {
+              class: "mx-0.5 inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-slate-300 bg-white px-1 align-text-bottom text-sm leading-none text-slate-700",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "checkbox",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+            (node.attrs.displayText as string | null) ?? "☐",
+          ];
+        }
         return [
           "span",
           {

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -508,6 +508,17 @@ function buildOpaqueInlineOrComplexAtom(
   const label = segment.label;
   const detail = segment.detail;
 
+  if (segment.presentation === "text-box" || segment.presentation === "checkbox") {
+    return editorSchema.nodes.opaque_inline.create({
+      fragmentId: segment.fragmentId,
+      warningId: segment.warningId,
+      label,
+      detail,
+      presentation: segment.presentation,
+      displayText: segment.displayText ?? null,
+    });
+  }
+
   if (showUnsupportedObjectPreviews && label === "Embedded chart") {
     return editorSchema.nodes.chart_atom.create({ detail });
   }
@@ -548,6 +559,7 @@ function buildOpaqueInlineOrComplexAtom(
     label,
     detail,
     presentation: segment.presentation ?? "inline-chip",
+    displayText: segment.displayText ?? null,
   });
 }
 

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -43,6 +43,7 @@ export function createSurfaceDecorationKey(input: {
   workflowScopeSignature?: string;
   workflowCandidateSignature?: string;
   workflowBlockedSignature?: string;
+  workflowLockedZoneSignature?: string;
   workflowMetadataSignature?: string;
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
@@ -56,6 +57,7 @@ export function createSurfaceDecorationKey(input: {
     workflowScopeSignature: input.workflowScopeSignature ?? null,
     workflowCandidateSignature: input.workflowCandidateSignature ?? null,
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+    workflowLockedZoneSignature: input.workflowLockedZoneSignature ?? null,
     workflowMetadataSignature: input.workflowMetadataSignature ?? null,
     activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
     activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],

package/src/ui-tailwind/editor-surface/tw-inline-token.tsx

@@ -106,6 +106,26 @@ export function TwInlineToken(props: TwInlineTokenProps) {
       );
     }
 
+    if (segment.presentation === "checkbox") {
+      return (
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            props.onSelectionChange?.(createSelectionSnapshot(segment.from, segment.to));
+          }}
+          className={`inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-slate-300 bg-white px-1 text-sm leading-none text-slate-700 ${commentClass} ${selected ? "ring-1 ring-accent/30" : ""} ${focusRingClass}`}
+          title={segment.detail}
+          data-inline-presentation="checkbox"
+        >
+          {renderTwCaret(selection, segment.from)}
+          {segment.displayText ?? "☐"}
+          {renderTwCaret(selection, segment.to)}
+        </button>
+      );
+    }
+
     return (
       <button
         type="button"

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -18,6 +18,7 @@ import type {
   SelectionSnapshot,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowLockedZone,
   WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../../api/public-types";
@@ -79,6 +80,7 @@ export interface TwProseMirrorSurfaceProps {
   activeRevisionId?: string;
   activeSelectionToolKind?: ActiveSelectionToolModel["kind"] | null;
   showTrackedChanges?: boolean;
+  suggestionsEnabled?: boolean;
   /** When true, the surface renders inside the page workspace (vs canvas). */
   isPageWorkspace?: boolean;
   onFocus: FocusEventHandler<HTMLDivElement>;
@@ -101,6 +103,7 @@ export interface TwProseMirrorSurfaceProps {
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  workflowLockedZones?: readonly WorkflowLockedZone[];
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
   workflowMetadata?: readonly WorkflowMetadataMarkup[];
@@ -194,6 +197,7 @@ export const TwProseMirrorSurface = forwardRef<
     [snapshot.comments],
   );
   const showTrackedChanges = props.showTrackedChanges !== false;
+  const suggestionsEnabled = props.suggestionsEnabled ?? false;
   // Always create the revision model — needed for deletion hiding in clean mode
   // even when the tracked changes display toggle is off.
   const revisionModel = useMemo(
@@ -221,6 +225,7 @@ export const TwProseMirrorSurface = forwardRef<
         workflowScopeSignature: createWorkflowScopeSignature(props.workflowScopes),
         workflowCandidateSignature: createWorkflowCandidateSignature(props.workflowCandidates),
         workflowBlockedSignature: createWorkflowBlockedSignature(props.workflowBlockedReasons),
+        workflowLockedZoneSignature: createWorkflowLockedZoneSignature(props.workflowLockedZones),
         workflowMetadataSignature: createWorkflowMetadataSignature(props.workflowMetadata),
         activeWorkflowWorkItemId: props.activeWorkflowWorkItemId ?? null,
         activeWorkflowScopeIds: props.activeWorkflowScopeIds ?? [],
@@ -231,6 +236,7 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeRevisionId,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.workflowLockedZones,
       props.workflowMetadata,
       props.activeWorkflowWorkItemId,
       props.activeWorkflowScopeIds,
@@ -276,10 +282,12 @@ export const TwProseMirrorSurface = forwardRef<
         revisionModel,
         markupDisplay,
         showTrackedChanges,
+        suggestionsEnabled,
         props.workflowScopes,
         snapshot.activeStory,
         props.workflowCandidates,
         props.workflowBlockedReasons,
+        props.workflowLockedZones,
         props.activeWorkflowWorkItemId,
         props.activeWorkflowScopeIds,
         props.workflowMetadata,
@@ -300,11 +308,13 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeWorkflowScopeIds,
       props.activeWorkflowWorkItemId,
       props.workflowBlockedReasons,
+      props.workflowLockedZones,
       props.workflowMetadata,
       props.workflowCandidates,
       props.workflowScopes,
       revisionModel,
       showTrackedChanges,
+      suggestionsEnabled,
     ],
   );
 
@@ -331,10 +341,12 @@ export const TwProseMirrorSurface = forwardRef<
       revisionModel,
       markupDisplay,
       showTrackedChanges,
+      suggestionsEnabled,
       props.workflowScopes,
       snapshot.activeStory,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.workflowLockedZones,
       props.activeWorkflowWorkItemId,
       props.activeWorkflowScopeIds,
       props.workflowMetadata,
@@ -898,6 +910,24 @@ function createWorkflowBlockedSignature(
   ).join("|");
 }
 
+function createWorkflowLockedZoneSignature(
+  lockedZones: readonly WorkflowLockedZone[] | undefined,
+): string {
+  if (!lockedZones || lockedZones.length === 0) {
+    return "";
+  }
+  return lockedZones.map((zone) =>
+    [
+      zone.fragmentId,
+      zone.code,
+      zone.label,
+      zone.detail,
+      serializeAnchorSignature(zone.anchor),
+      serializeStoryTargetSignature(zone.storyTarget),
+    ].join(":")
+  ).join("|");
+}
+
 function createWorkflowMetadataSignature(
   metadata: readonly WorkflowMetadataMarkup[] | undefined,
 ): string {
@@ -922,6 +952,7 @@ function serializeAnchorSignature(
     | WorkflowScope["anchor"]
     | WorkflowCandidateRange["anchor"]
     | WorkflowBlockedCommandReason["anchor"]
+    | WorkflowLockedZone["anchor"]
     | WorkflowMetadataMarkup["anchor"]
     | undefined,
 ): string {

package/src/ui-tailwind/theme/editor-theme.css

@@ -326,6 +326,10 @@
   text-underline-offset: 0.18em;
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-inline-locked-zone {
+  border-radius: 0.35rem;
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail {
   position: relative;
   padding-left: 0.875rem;
@@ -421,6 +425,10 @@
     );
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-rail-locked-zone {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-danger)) 10%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone {
   background: transparent;
 }