@beyondwork/docx-react-component 1.0.23 → 1.0.24

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

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

@@ -21,7 +21,22 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
-function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+function isSelectionZoneScope(scope: WorkflowScope): boolean {
+  return (
+    scope.scopeId.startsWith("scope-lab-") ||
+    scope.scopeId.startsWith("metadata-lab-") ||
+    scope.workItemId?.startsWith("scope-lab-") === true ||
+    scope.workItemId?.startsWith("metadata-lab-") === true ||
+    scope.label?.toLowerCase().includes("scope lab") === true ||
+    scope.label?.toLowerCase().includes("metadata lab") === true
+  );
+}
+
+function getWorkflowInlineClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
   const base =
     scope.mode === "edit"
       ? "wre-workflow-inline wre-workflow-inline-edit"
@@ -30,10 +45,15 @@ function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean)
         : scope.mode === "comment"
           ? "wre-workflow-inline wre-workflow-inline-comment"
           : "wre-workflow-inline wre-workflow-inline-view";
-  return isActiveWorkItem ? `${base} wre-workflow-inline-active` : base;
+  const withZone = isSelectionZone ? `${base} wre-workflow-inline-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-inline-active` : withZone;
 }
 
-function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+function getWorkflowRailClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
   const base =
     scope.mode === "edit"
       ? "wre-workflow-rail wre-workflow-rail-edit"
@@ -42,7 +62,8 @@ function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean):
         : scope.mode === "comment"
           ? "wre-workflow-rail wre-workflow-rail-comment"
           : "wre-workflow-rail wre-workflow-rail-view";
-  return isActiveWorkItem ? `${base} wre-workflow-rail-active` : base;
+  const withZone = isSelectionZone ? `${base} wre-workflow-rail-selection-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-rail-active` : withZone;
 }
 
 function getWorkflowCandidateInlineClass(): string {
@@ -271,6 +292,7 @@ export function buildDecorations(
       if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
       const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
       if (!pmRange) continue;
+      const isSelectionZone = isSelectionZoneScope(scope);
       const isActiveWorkItem =
         Boolean(activeWorkflowWorkItemId) &&
         (
@@ -281,21 +303,23 @@ export function buildDecorations(
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
         decorations.push(
           Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope, isActiveWorkItem),
+            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, {
         railKind: "scope",
-        className: getWorkflowRailClass(scope, isActiveWorkItem),
+        className: getWorkflowRailClass(scope, isActiveWorkItem, isSelectionZone),
         attrs: {
           "data-workflow-scope-id": scope.scopeId,
           "data-workflow-scope-mode": scope.mode,
           "data-workflow-active": isActiveWorkItem ? "true" : "false",
+          ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
         },
       }, railRangeCache);
     }

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

@@ -261,6 +261,8 @@
 .prosemirror-surface .ProseMirror .wre-workflow-inline {
   border-radius: 0.25rem;
   box-shadow: inset 0 0 0 1px transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
@@ -333,6 +335,13 @@
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 28%, transparent);
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-inline-zone {
+  border-radius: 0.35rem;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 18%, transparent),
+    inset 0 0 0 999px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 8%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
   --wre-workflow-rail-color: var(--color-accent);
   background: color-mix(in srgb, var(--color-accent) 7%, transparent);
@@ -394,6 +403,15 @@
     );
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone {
+  background: transparent;
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone::before {
+  width: 0.25rem;
+  opacity: 0.95;
+}
+
 .prosemirror-surface:focus-visible {
   outline: none;
 }