@beyondwork/docx-react-component 1.0.20 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +682 -0
  2. package/package.json +9 -1
  3. package/src/io/docx-session.ts +1 -1
  4. package/src/runtime/document-runtime.ts +2 -2
  5. package/src/ui/WordReviewEditor.tsx +66 -0
  6. package/src/ui/editor-runtime-boundary.ts +27 -1
  7. package/src/ui/editor-surface-controller.tsx +4 -0
  8. package/src/ui/workflow-surface-blocked-rails.ts +94 -0
  9. package/src/ui-tailwind/editor-surface/pm-decorations.ts +225 -23
  10. package/src/ui-tailwind/editor-surface/surface-build-keys.ts +4 -0
  11. package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx +16 -0
  12. package/src/ui-tailwind/theme/editor-theme.css +126 -0
package/src/ui-tailwind/theme/editor-theme.css CHANGED
@@ -258,6 +258,132 @@
258
258
  outline: none;
259
259
  }
260
260
 
261
+ .prosemirror-surface .ProseMirror .wre-workflow-inline {
262
+ border-radius: 0.25rem;
263
+ box-shadow: inset 0 0 0 1px transparent;
264
+ }
265
+
266
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
267
+ background: color-mix(in srgb, var(--color-accent) 10%, transparent);
268
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent);
269
+ }
270
+
271
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-suggest {
272
+ background: color-mix(in srgb, var(--color-warning) 12%, transparent);
273
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 20%, transparent);
274
+ }
275
+
276
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-comment {
277
+ background: color-mix(in srgb, var(--color-insert) 10%, transparent);
278
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-insert) 18%, transparent);
279
+ }
280
+
281
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-view {
282
+ background: color-mix(in srgb, var(--color-secondary) 7%, transparent);
283
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-secondary) 14%, transparent);
284
+ }
285
+
286
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-candidate {
287
+ background: color-mix(in srgb, var(--color-warning) 6%, transparent);
288
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-warning) 18%, transparent);
289
+ text-decoration: underline;
290
+ text-decoration-style: dashed;
291
+ text-decoration-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
292
+ text-underline-offset: 0.18em;
293
+ }
294
+
295
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-preserve-only {
296
+ background: color-mix(in srgb, var(--color-danger) 7%, transparent);
297
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 18%, transparent);
298
+ }
299
+
300
+ .prosemirror-surface .ProseMirror .wre-workflow-inline-blocked-import {
301
+ background: color-mix(in srgb, var(--color-danger) 8%, transparent);
302
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 24%, transparent);
303
+ text-decoration: underline;
304
+ text-decoration-style: wavy;
305
+ text-decoration-color: color-mix(in srgb, var(--color-danger) 70%, transparent);
306
+ text-underline-offset: 0.18em;
307
+ }
308
+
309
+ .prosemirror-surface .ProseMirror .wre-workflow-rail {
310
+ position: relative;
311
+ padding-left: 0.875rem;
312
+ border-radius: 0.25rem;
313
+ }
314
+
315
+ .prosemirror-surface .ProseMirror .wre-workflow-rail::before {
316
+ content: "";
317
+ position: absolute;
318
+ left: 0;
319
+ top: 0.2rem;
320
+ bottom: 0.2rem;
321
+ width: 0.3rem;
322
+ border-radius: 999px;
323
+ background: var(--wre-workflow-rail-color, var(--color-border-strong));
324
+ }
325
+
326
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
327
+ --wre-workflow-rail-color: var(--color-accent);
328
+ background: color-mix(in srgb, var(--color-accent) 7%, transparent);
329
+ }
330
+
331
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-suggest {
332
+ --wre-workflow-rail-color: var(--color-warning);
333
+ background: color-mix(in srgb, var(--color-warning) 8%, transparent);
334
+ }
335
+
336
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-comment {
337
+ --wre-workflow-rail-color: var(--color-insert);
338
+ background: color-mix(in srgb, var(--color-insert) 7%, transparent);
339
+ }
340
+
341
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-view {
342
+ --wre-workflow-rail-color: var(--color-secondary);
343
+ background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
344
+ }
345
+
346
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-candidate {
347
+ --wre-workflow-rail-color: var(--color-warning);
348
+ background: color-mix(in srgb, var(--color-warning) 4%, transparent);
349
+ }
350
+
351
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-candidate::before {
352
+ background:
353
+ repeating-linear-gradient(
354
+ to bottom,
355
+ var(--wre-workflow-rail-color, var(--color-warning)) 0,
356
+ var(--wre-workflow-rail-color, var(--color-warning)) 6px,
357
+ transparent 6px,
358
+ transparent 10px
359
+ );
360
+ }
361
+
362
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-preserve-only {
363
+ --wre-workflow-rail-color: var(--color-danger);
364
+ background: color-mix(in srgb, var(--color-danger) 5%, transparent);
365
+ }
366
+
367
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-preserve-only::before {
368
+ opacity: 0.85;
369
+ }
370
+
371
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-blocked-import {
372
+ --wre-workflow-rail-color: var(--color-danger);
373
+ background: color-mix(in srgb, var(--color-danger) 8%, transparent);
374
+ }
375
+
376
+ .prosemirror-surface .ProseMirror .wre-workflow-rail-blocked-import::before {
377
+ background:
378
+ repeating-linear-gradient(
379
+ to bottom,
380
+ var(--wre-workflow-rail-color, var(--color-danger)) 0,
381
+ var(--wre-workflow-rail-color, var(--color-danger)) 4px,
382
+ transparent 4px,
383
+ transparent 8px
384
+ );
385
+ }
386
+
261
387
  .prosemirror-surface:focus-visible {
262
388
  outline: none;
263
389
  }