@dxos/react-ui-editor 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

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 (131) hide show
  1. package/dist/lib/browser/index.mjs +1664 -1359
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/browser/testing/index.mjs.map +2 -2
  5. package/dist/lib/node/index.cjs +2122 -1819
  6. package/dist/lib/node/index.cjs.map +4 -4
  7. package/dist/lib/node/meta.json +1 -1
  8. package/dist/lib/node/testing/index.cjs.map +2 -2
  9. package/dist/lib/node-esm/index.mjs +1664 -1359
  10. package/dist/lib/node-esm/index.mjs.map +4 -4
  11. package/dist/lib/node-esm/meta.json +1 -1
  12. package/dist/lib/node-esm/testing/index.mjs.map +2 -2
  13. package/dist/types/src/components/EditorToolbar/EditorToolbar.d.ts +1 -1
  14. package/dist/types/src/components/EditorToolbar/EditorToolbar.d.ts.map +1 -1
  15. package/dist/types/src/{stories/InputMode.stories.d.ts → components/EditorToolbar/EditorToolbar.stories.d.ts} +3 -7
  16. package/dist/types/src/components/EditorToolbar/EditorToolbar.stories.d.ts.map +1 -0
  17. package/dist/types/src/components/EditorToolbar/blocks.d.ts +4 -3
  18. package/dist/types/src/components/EditorToolbar/blocks.d.ts.map +1 -1
  19. package/dist/types/src/components/EditorToolbar/comment.d.ts +4 -3
  20. package/dist/types/src/components/EditorToolbar/comment.d.ts.map +1 -1
  21. package/dist/types/src/components/EditorToolbar/formatting.d.ts +4 -3
  22. package/dist/types/src/components/EditorToolbar/formatting.d.ts.map +1 -1
  23. package/dist/types/src/components/EditorToolbar/headings.d.ts +4 -3
  24. package/dist/types/src/components/EditorToolbar/headings.d.ts.map +1 -1
  25. package/dist/types/src/components/EditorToolbar/image.d.ts +16 -0
  26. package/dist/types/src/components/EditorToolbar/image.d.ts.map +1 -0
  27. package/dist/types/src/components/EditorToolbar/lists.d.ts +4 -3
  28. package/dist/types/src/components/EditorToolbar/lists.d.ts.map +1 -1
  29. package/dist/types/src/components/EditorToolbar/search.d.ts +17 -0
  30. package/dist/types/src/components/EditorToolbar/search.d.ts.map +1 -0
  31. package/dist/types/src/components/EditorToolbar/util.d.ts +11 -17
  32. package/dist/types/src/components/EditorToolbar/util.d.ts.map +1 -1
  33. package/dist/types/src/components/EditorToolbar/view-mode.d.ts +4 -3
  34. package/dist/types/src/components/EditorToolbar/view-mode.d.ts.map +1 -1
  35. package/dist/types/src/defaults.d.ts.map +1 -1
  36. package/dist/types/src/extensions/annotations.d.ts.map +1 -1
  37. package/dist/types/src/extensions/autocomplete.d.ts.map +1 -1
  38. package/dist/types/src/extensions/automerge/automerge.d.ts.map +1 -1
  39. package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map +1 -1
  40. package/dist/types/src/extensions/automerge/cursor.d.ts.map +1 -1
  41. package/dist/types/src/extensions/automerge/defs.d.ts +1 -1
  42. package/dist/types/src/extensions/automerge/defs.d.ts.map +1 -1
  43. package/dist/types/src/extensions/automerge/sync.d.ts.map +1 -1
  44. package/dist/types/src/extensions/automerge/update-automerge.d.ts +1 -1
  45. package/dist/types/src/extensions/automerge/update-automerge.d.ts.map +1 -1
  46. package/dist/types/src/extensions/automerge/update-codemirror.d.ts +1 -1
  47. package/dist/types/src/extensions/automerge/update-codemirror.d.ts.map +1 -1
  48. package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -1
  49. package/dist/types/src/extensions/blast.d.ts.map +1 -1
  50. package/dist/types/src/extensions/command/command.d.ts.map +1 -1
  51. package/dist/types/src/extensions/command/hint.d.ts.map +1 -1
  52. package/dist/types/src/extensions/command/menu.d.ts.map +1 -1
  53. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  54. package/dist/types/src/extensions/debug.d.ts.map +1 -1
  55. package/dist/types/src/extensions/dnd.d.ts.map +1 -1
  56. package/dist/types/src/extensions/factories.d.ts.map +1 -1
  57. package/dist/types/src/extensions/folding.d.ts.map +1 -1
  58. package/dist/types/src/extensions/listener.d.ts.map +1 -1
  59. package/dist/types/src/extensions/markdown/bundle.d.ts.map +1 -1
  60. package/dist/types/src/extensions/markdown/changes.d.ts.map +1 -1
  61. package/dist/types/src/extensions/markdown/debug.d.ts.map +1 -1
  62. package/dist/types/src/extensions/markdown/decorate.d.ts +1 -0
  63. package/dist/types/src/extensions/markdown/decorate.d.ts.map +1 -1
  64. package/dist/types/src/extensions/markdown/formatting.d.ts +1 -1
  65. package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -1
  66. package/dist/types/src/extensions/markdown/highlight.d.ts.map +1 -1
  67. package/dist/types/src/extensions/markdown/image.d.ts.map +1 -1
  68. package/dist/types/src/extensions/markdown/index.d.ts +1 -0
  69. package/dist/types/src/extensions/markdown/index.d.ts.map +1 -1
  70. package/dist/types/src/extensions/markdown/link.d.ts.map +1 -1
  71. package/dist/types/src/extensions/markdown/outliner.d.ts +12 -0
  72. package/dist/types/src/extensions/markdown/outliner.d.ts.map +1 -0
  73. package/dist/types/src/extensions/markdown/table.d.ts.map +1 -1
  74. package/dist/types/src/extensions/mention.d.ts.map +1 -1
  75. package/dist/types/src/extensions/modes.d.ts +5 -5
  76. package/dist/types/src/extensions/modes.d.ts.map +1 -1
  77. package/dist/types/src/extensions/preview/preview.d.ts.map +1 -1
  78. package/dist/types/src/extensions/selection.d.ts.map +1 -1
  79. package/dist/types/src/extensions/typewriter.d.ts.map +1 -1
  80. package/dist/types/src/hooks/index.d.ts +0 -1
  81. package/dist/types/src/hooks/index.d.ts.map +1 -1
  82. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -1
  83. package/dist/types/src/stories/TextEditorBasic.stories.d.ts +3 -0
  84. package/dist/types/src/stories/TextEditorBasic.stories.d.ts.map +1 -1
  85. package/dist/types/src/stories/story-utils.d.ts.map +1 -1
  86. package/dist/types/src/styles/theme.d.ts.map +1 -1
  87. package/dist/types/src/testing/RefPopover.d.ts.map +1 -1
  88. package/dist/types/src/util/cursor.d.ts.map +1 -1
  89. package/dist/types/src/util/debug.d.ts.map +1 -1
  90. package/dist/types/src/util/dom.d.ts.map +1 -1
  91. package/dist/types/src/util/facet.d.ts.map +1 -1
  92. package/dist/types/src/util/react.d.ts.map +1 -1
  93. package/dist/types/tsconfig.tsbuildinfo +1 -1
  94. package/package.json +32 -28
  95. package/src/components/EditorToolbar/EditorToolbar.stories.tsx +90 -0
  96. package/src/components/EditorToolbar/EditorToolbar.tsx +31 -32
  97. package/src/components/EditorToolbar/blocks.ts +27 -6
  98. package/src/components/EditorToolbar/comment.ts +11 -4
  99. package/src/components/EditorToolbar/formatting.ts +34 -7
  100. package/src/components/EditorToolbar/headings.ts +9 -8
  101. package/src/components/EditorToolbar/image.ts +16 -0
  102. package/src/components/EditorToolbar/lists.ts +26 -7
  103. package/src/components/EditorToolbar/search.ts +19 -0
  104. package/src/components/EditorToolbar/util.ts +14 -14
  105. package/src/components/EditorToolbar/view-mode.ts +9 -8
  106. package/src/defaults.ts +1 -1
  107. package/src/extensions/automerge/automerge.stories.tsx +9 -7
  108. package/src/extensions/automerge/automerge.test.tsx +4 -4
  109. package/src/extensions/automerge/automerge.ts +2 -2
  110. package/src/extensions/automerge/defs.ts +1 -2
  111. package/src/extensions/automerge/sync.ts +4 -4
  112. package/src/extensions/automerge/update-automerge.ts +1 -1
  113. package/src/extensions/automerge/update-codemirror.ts +3 -4
  114. package/src/extensions/markdown/changes.ts +3 -2
  115. package/src/extensions/markdown/decorate.ts +8 -7
  116. package/src/extensions/markdown/formatting.ts +4 -4
  117. package/src/extensions/markdown/index.ts +1 -0
  118. package/src/extensions/markdown/outliner.ts +235 -0
  119. package/src/extensions/markdown/styles.ts +2 -2
  120. package/src/extensions/modes.ts +5 -6
  121. package/src/extensions/preview/preview.ts +1 -1
  122. package/src/hooks/index.ts +0 -1
  123. package/src/stories/TextEditorBasic.stories.tsx +44 -0
  124. package/src/stories/story-utils.tsx +7 -9
  125. package/src/styles/theme.ts +3 -0
  126. package/src/testing/RefPopover.tsx +4 -4
  127. package/dist/types/src/hooks/useActionHandler.d.ts +0 -4
  128. package/dist/types/src/hooks/useActionHandler.d.ts.map +0 -1
  129. package/dist/types/src/stories/InputMode.stories.d.ts.map +0 -1
  130. package/src/hooks/useActionHandler.ts +0 -12
  131. package/src/stories/InputMode.stories.tsx +0 -124
@@ -1 +1 @@
1
- {"version":3,"file":"story-utils.d.ts","sourceRoot":"","sources":["../../../../src/stories/story-utils.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,OAAO,EACL,KAAK,oBAAoB,EAQ1B,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAIlE,eAAO,MAAM,GAAG,aAAc,MAAM,EAAE,WAAqB,CAAC;AAE5D,eAAO,MAAM,GAAG,cAAiE,CAAC;AAElF,eAAO,MAAM,GAAG,yDAAyD,CAAC;AAE1E,eAAO,MAAM,IAAI,QAOhB,CAAC;AAGF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CA+FnB,CAAC;AAGF,eAAO,MAAM,IAAI,QAwBhB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,UAAU,EAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,UAA4E,CAAC;AAe/F,eAAO,MAAM,iBAAiB;SAVD,MAAM;EAUyB,CAAC;AAU7D,eAAO,MAAM,gBAAgB;SARD,MAAM;EAQwB,CAAC;AAG3D,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAIxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAAS,EAOpC,CAAC;AAGF,eAAO,MAAM,QAAQ,QAEN,CAAC;AAEhB,eAAO,MAAM,eAAe,QAGb,CAAC;AAEhB,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAA0C,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAGtE,eAAO,MAAM,YAAY,uGAWtB,UAAU,sBAsDZ,CAAC"}
1
+ {"version":3,"file":"story-utils.d.ts","sourceRoot":"","sources":["../../../../src/stories/story-utils.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAuC,MAAM,OAAO,CAAC;AAW5D,OAAO,EAEL,KAAK,oBAAoB,EAY1B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAIlE,eAAO,MAAM,GAAG,GAAI,GAAG,OAAO,MAAM,EAAE,WAAqB,CAAC;AAE5D,eAAO,MAAM,GAAG,cAAiE,CAAC;AAElF,eAAO,MAAM,GAAG,yDAAyD,CAAC;AAE1E,eAAO,MAAM,IAAI,QAOhB,CAAC;AAGF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CA+FnB,CAAC;AAGF,eAAO,MAAM,IAAI,QAwBhB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,UAAU,EAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,UAA4E,CAAC;AAe/F,eAAO,MAAM,iBAAiB;SAVD,MAAM;EAUyB,CAAC;AAU7D,eAAO,MAAM,gBAAgB;SARD,MAAM;EAQwB,CAAC;AAG3D,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAIxC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAAS,EAOpC,CAAC;AAGF,eAAO,MAAM,QAAQ,QAEN,CAAC;AAEhB,eAAO,MAAM,eAAe,QAGb,CAAC;AAEhB,eAAO,MAAM,QAAQ,QAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,mCAA0C,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC,GAAG,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAGtE,eAAO,MAAM,YAAY,GAAI,oGAW1B,UAAU,sBAsDZ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WAmN1B,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/styles/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,WAsN1B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"RefPopover.d.ts","sourceRoot":"","sources":["../../../../src/testing/RefPopover.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAMhG,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAKhG,KAAK,eAAe,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,MAAM,EAAE,iBAAiB,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtG,QAAA,MAAkC,aAAa;UAFR,cAAc;YAAU,iBAAiB;aAAW,OAAO;EAEA,CAAC;AAEnG,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AA+C/E,eAAO,MAAM,UAAU;uCA7C6B,uBAAuB;CA+C1E,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,YAAY,EAAE,uBAAuB,EAAE,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"RefPopover.d.ts","sourceRoot":"","sources":["../../../../src/testing/RefPopover.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAMhH,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAKhG,KAAK,eAAe,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,MAAM,EAAE,iBAAiB,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAEtG,QAAA,MAAkC,aAAa;UAFR,cAAc;YAAU,iBAAiB;aAAW,OAAO;EAEA,CAAC;AAEnG,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,aAAa,CAAA;CAAE,CAAC,CAAC;AA+C/E,eAAO,MAAM,UAAU;uCA7C6B,uBAAuB;CA+C1E,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,YAAY,EAAE,uBAAuB,EAAE,eAAe,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,OAAO,MAAO,KAAK,KAAK,KAAK,KAAG,OAA2C,CAAC;AAEzF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,8DAA4C;IAErE,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,SAAS,KAAK,YAKpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,UAAW,WAAW,UAAU,MAAM;;;kBAOtE;CACH"}
1
+ {"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,GAAG,KAAK,EAAE,GAAG,KAAK,KAAG,OAA2C,CAAC;AAEzF;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,qBAAa,MAAM;IACjB,MAAM,CAAC,QAAQ,CAAC,SAAS,8DAA4C;IAErE,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,OAAO,KAAK,YAKpE;IAEF,MAAM,CAAC,QAAQ,CAAC,kBAAkB,GAAI,OAAO,WAAW,EAAE,QAAQ,MAAM;;;kBAOtE;CACH"}
@@ -1 +1 @@
1
- {"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,eAAO,MAAM,aAAa,OAAQ,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,eACtC,GAAG,EAAE,QAOvB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,MAAM,CAAC,KAAG,CAOxC,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAS,SAAS,WAAW,EAAE,QAAQ,UAAU,SAG5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,QAAS,SAAS,WAAW,EAAE,SAmBrD,CAAC"}
1
+ {"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAInD,eAAO,MAAM,aAAa,GAAI,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,MAC/C,GAAG,MAAM,GAAG,EAAE,QAOvB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,EAAE,IAAI,CAAC,KAAG,CAOxC,CAAC;AAErB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,SAAS,WAAW,EAAE,EAAE,MAAM,UAAU,SAG5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,SAAS,WAAW,EAAE,SAmBrD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/util/dom.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,SAAU,IAAI,QAAQ,OAAO;;;;;CAGpD,CAAC;AAIF,eAAO,MAAM,SAAS,SAAU,IAAI,QAAQ,MAAM,uBAKjD,CAAC;AAEF,eAAO,MAAM,cAAc,QAAS,IAAI,gBAQvC,CAAC"}
1
+ {"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../../src/util/dom.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,IAAI;IACnB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,MAAM,OAAO;;;;;CAGpD,CAAC;AAIF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,EAAE,WAAS,UAK5D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,IAAI,gBAQvC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../../../src/util/facet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,qBAAqB,CAAC,gBAMvD,CAAC"}
1
+ {"version":3,"file":"facet.d.ts","sourceRoot":"","sources":["../../../../src/util/facet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,eAAe,CAAC,gBAMvD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../src/util/react.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,YAAY,cAAc,aAAa,SAAS,KAAG,WAU3F,CAAC;AAIF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,QAAQ,CAAC,QAAQ,SAAS,KAAG,CAGxE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACxB,KAAK,SAAS,MAAM,aAAa,EAAE,CAAC,KAAK,CAAC,KAAG,cAAc,CAAC,KAAK,CAUjE,CAAC"}
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../src/util/react.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAI/C,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,UAAU,cAAc,EAAE,WAAW,SAAS,KAAG,WAU3F,CAAC;AAIF,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,SAAS,KAAG,CAGxE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACxB,KAAK,SAAS,MAAM,EAAE,WAAW,EAAE,CAAC,KAAK,CAAC,KAAG,cAAc,CAAC,KAAK,CAUjE,CAAC"}
@@ -1 +1 @@
1
- {"version":"5.7.3"}
1
+ {"version":"5.8.3"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-editor",
3
- "version": "0.8.2-main.f081794",
3
+ "version": "0.8.2-main.fbd8ed0",
4
4
  "description": "Document editing experience within a DXOS shell.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,6 +29,7 @@
29
29
  "src"
30
30
  ],
31
31
  "dependencies": {
32
+ "@automerge/automerge": "3.0.0-beta.0",
32
33
  "@codemirror/autocomplete": "^6.18.1",
33
34
  "@codemirror/commands": "^6.6.2",
34
35
  "@codemirror/lang-javascript": "^6.2.2",
@@ -50,29 +51,32 @@
50
51
  "@replit/codemirror-vim": "^6.2.1",
51
52
  "@replit/codemirror-vscode-keymap": "^6.0.2",
52
53
  "codemirror": "^6.0.1",
54
+ "effect": "3.14.21",
53
55
  "lib0": "^0.2.65",
54
56
  "lodash.defaultsdeep": "^4.6.1",
55
57
  "lodash.get": "^4.4.2",
56
58
  "lodash.merge": "^4.6.2",
57
59
  "lodash.sortby": "^4.7.0",
58
60
  "style-mod": "^4.1.0",
59
- "@dxos/app-graph": "0.8.2-main.f081794",
60
- "@dxos/automerge": "0.8.2-main.f081794",
61
- "@dxos/async": "0.8.2-main.f081794",
62
- "@dxos/context": "0.8.2-main.f081794",
63
- "@dxos/debug": "0.8.2-main.f081794",
64
- "@dxos/display-name": "0.8.2-main.f081794",
65
- "@dxos/invariant": "0.8.2-main.f081794",
66
- "@dxos/live-object": "0.8.2-main.f081794",
67
- "@dxos/lit-ui": "0.8.2-main.f081794",
68
- "@dxos/log": "0.8.2-main.f081794",
69
- "@dxos/protocols": "0.8.2-main.f081794",
70
- "@dxos/echo-schema": "0.8.2-main.f081794",
71
- "@dxos/react-hooks": "0.8.2-main.f081794",
72
- "@dxos/util": "0.8.2-main.f081794",
73
- "@dxos/react-ui-menu": "0.8.2-main.f081794"
61
+ "@dxos/app-graph": "0.8.2-main.fbd8ed0",
62
+ "@dxos/async": "0.8.2-main.fbd8ed0",
63
+ "@dxos/debug": "0.8.2-main.fbd8ed0",
64
+ "@dxos/display-name": "0.8.2-main.fbd8ed0",
65
+ "@dxos/context": "0.8.2-main.fbd8ed0",
66
+ "@dxos/echo-schema": "0.8.2-main.fbd8ed0",
67
+ "@dxos/lit-ui": "0.8.2-main.fbd8ed0",
68
+ "@dxos/invariant": "0.8.2-main.fbd8ed0",
69
+ "@dxos/live-object": "0.8.2-main.fbd8ed0",
70
+ "@dxos/protocols": "0.8.2-main.fbd8ed0",
71
+ "@dxos/log": "0.8.2-main.fbd8ed0",
72
+ "@dxos/react-hooks": "0.8.2-main.fbd8ed0",
73
+ "@dxos/react-ui-menu": "0.8.2-main.fbd8ed0",
74
+ "@dxos/util": "0.8.2-main.fbd8ed0"
74
75
  },
75
76
  "devDependencies": {
77
+ "@automerge/automerge": "3.0.0-beta.0",
78
+ "@automerge/automerge-repo": "2.0.0",
79
+ "@automerge/automerge-repo-network-broadcastchannel": "2.0.0",
76
80
  "@phosphor-icons/react": "^2.1.5",
77
81
  "@types/chai": "^4.2.15",
78
82
  "@types/chai-dom": "^1.11.0",
@@ -94,23 +98,23 @@
94
98
  "vite": "5.4.7",
95
99
  "vite-plugin-top-level-await": "^1.4.1",
96
100
  "vite-plugin-wasm": "^3.3.0",
97
- "@dxos/automerge": "0.8.2-main.f081794",
98
- "@dxos/config": "0.8.2-main.f081794",
99
- "@dxos/echo-signals": "0.8.2-main.f081794",
100
- "@dxos/keyboard": "0.8.2-main.f081794",
101
- "@dxos/random": "0.8.2-main.f081794",
102
- "@dxos/react-client": "0.8.2-main.f081794",
103
- "@dxos/react-ui": "0.8.2-main.f081794",
104
- "@dxos/storybook-utils": "0.8.2-main.f081794",
105
- "@dxos/react-ui-theme": "0.8.2-main.f081794"
101
+ "@dxos/config": "0.8.2-main.fbd8ed0",
102
+ "@dxos/echo-signals": "0.8.2-main.fbd8ed0",
103
+ "@dxos/keyboard": "0.8.2-main.fbd8ed0",
104
+ "@dxos/random": "0.8.2-main.fbd8ed0",
105
+ "@dxos/react-client": "0.8.2-main.fbd8ed0",
106
+ "@dxos/react-ui": "0.8.2-main.fbd8ed0",
107
+ "@dxos/storybook-utils": "0.8.2-main.fbd8ed0",
108
+ "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
106
109
  },
107
110
  "peerDependencies": {
108
111
  "@phosphor-icons/react": "^2.1.5",
112
+ "effect": "^3.13.3",
109
113
  "react": "~18.2.0",
110
114
  "react-dom": "~18.2.0",
111
- "@dxos/react-client": "0.8.2-main.f081794",
112
- "@dxos/react-ui-theme": "0.8.2-main.f081794",
113
- "@dxos/react-ui": "0.8.2-main.f081794"
115
+ "@dxos/react-ui": "0.8.2-main.fbd8ed0",
116
+ "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
117
+ "@dxos/react-client": "0.8.2-main.fbd8ed0"
114
118
  },
115
119
  "publishConfig": {
116
120
  "access": "public"
@@ -0,0 +1,90 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import '@dxos-theme';
6
+
7
+ import React, { useCallback, useState } from 'react';
8
+
9
+ import { invariant } from '@dxos/invariant';
10
+ import { useThemeContext } from '@dxos/react-ui';
11
+ import { attentionSurface, mx } from '@dxos/react-ui-theme';
12
+ import { withLayout, withTheme } from '@dxos/storybook-utils';
13
+
14
+ import { EditorToolbar, useEditorToolbarState } from '..';
15
+ import {
16
+ type EditorInputMode,
17
+ decorateMarkdown,
18
+ createMarkdownExtensions,
19
+ formattingKeymap,
20
+ useFormattingState,
21
+ createBasicExtensions,
22
+ createThemeExtensions,
23
+ InputModeExtensions,
24
+ type EditorViewMode,
25
+ } from '../../extensions';
26
+ import { useTextEditor, type UseTextEditorProps } from '../../hooks';
27
+ import translations from '../../translations';
28
+
29
+ type StoryProps = { placeholder?: string } & UseTextEditorProps;
30
+
31
+ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
32
+ const { themeMode } = useThemeContext();
33
+ const toolbarState = useEditorToolbarState({ viewMode: 'source' });
34
+ const viewMode = toolbarState.viewMode;
35
+ const trackFormatting = useFormattingState(toolbarState);
36
+ // TODO(wittjosiah): Provide way to change the input mode.
37
+ const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
38
+ const { parentRef, view } = useTextEditor(
39
+ () => ({
40
+ autoFocus,
41
+ initialValue,
42
+ moveToEndOfLine: true,
43
+ extensions: [
44
+ editorInputMode ? InputModeExtensions[editorInputMode] : [],
45
+ createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
46
+ createMarkdownExtensions({ themeMode }),
47
+ createThemeExtensions({ themeMode, syntaxHighlighting: true }),
48
+ viewMode === 'source' ? [] : decorateMarkdown(),
49
+ formattingKeymap(),
50
+ trackFormatting,
51
+ ],
52
+ }),
53
+ [editorInputMode, viewMode, themeMode, placeholder],
54
+ );
55
+
56
+ const getView = useCallback(() => {
57
+ invariant(view);
58
+ return view;
59
+ }, [view]);
60
+
61
+ const handleViewModeChange = useCallback((mode: EditorViewMode) => {
62
+ toolbarState.viewMode = mode;
63
+ }, []);
64
+
65
+ // TODO(marijn): This doesn't update the state on view changes.
66
+ // Also not sure if view is even guaranteed to exist at this point.
67
+ return (
68
+ <div role='none' className={mx('fixed inset-0 flex flex-col')}>
69
+ {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
70
+ <div role='none' className='grow overflow-hidden'>
71
+ <div className={attentionSurface} ref={parentRef} />
72
+ </div>
73
+ </div>
74
+ );
75
+ };
76
+
77
+ export const Default = {
78
+ args: {
79
+ autoFocus: true,
80
+ placeholder: 'Text...',
81
+ initialValue: '# Demo\n\nThis is a document.\n\n',
82
+ },
83
+ };
84
+
85
+ export default {
86
+ title: 'ui/react-ui-editor/EditorToolbar',
87
+ render: DefaultStory,
88
+ decorators: [withTheme, withLayout({ fullscreen: true })],
89
+ parameters: { translations, layout: 'fullscreen' },
90
+ };
@@ -2,63 +2,60 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import React, { useCallback } from 'react';
5
+ import React, { memo, useCallback } from 'react';
6
6
 
7
7
  import { type NodeArg } from '@dxos/app-graph';
8
8
  import { ElevationProvider } from '@dxos/react-ui';
9
- import {
10
- type MenuActionHandler,
11
- MenuProvider,
12
- ToolbarMenu,
13
- createGapSeparator,
14
- useMenuActions,
15
- } from '@dxos/react-ui-menu';
9
+ import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
16
10
  import { textBlockWidth } from '@dxos/react-ui-theme';
17
11
 
18
12
  import { createBlocks } from './blocks';
19
13
  import { createComment } from './comment';
20
14
  import { createFormatting } from './formatting';
21
15
  import { createHeadings } from './headings';
16
+ import { createImageUpload } from './image';
22
17
  import { createLists } from './lists';
23
- import {
24
- type EditorToolbarActionGraphProps,
25
- type EditorToolbarFeatureFlags,
26
- type EditorToolbarProps,
27
- editorToolbarSearch,
28
- } from './util';
18
+ import { createSearch } from './search';
19
+ import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
29
20
  import { createViewMode } from './view-mode';
30
21
  import { stackItemContentToolbarClassNames } from '../../defaults';
31
22
 
32
23
  const createToolbar = ({
24
+ getView,
33
25
  state,
34
26
  customActions,
35
27
  ...features
36
- }: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'state' | 'customActions'>): {
28
+ }: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): {
37
29
  nodes: NodeArg<any>[];
38
30
  edges: { source: string; target: string }[];
39
31
  } => {
40
32
  const nodes = [];
41
33
  const edges = [];
42
34
  if (features.headings ?? true) {
43
- const headings = createHeadings(state);
35
+ const headings = createHeadings(state, getView);
44
36
  nodes.push(...headings.nodes);
45
37
  edges.push(...headings.edges);
46
38
  }
47
39
  if (features.formatting ?? true) {
48
- const formatting = createFormatting(state);
40
+ const formatting = createFormatting(state, getView);
49
41
  nodes.push(...formatting.nodes);
50
42
  edges.push(...formatting.edges);
51
43
  }
52
44
  if (features.lists ?? true) {
53
- const lists = createLists(state);
45
+ const lists = createLists(state, getView);
54
46
  nodes.push(...lists.nodes);
55
47
  edges.push(...lists.edges);
56
48
  }
57
49
  if (features.blocks ?? true) {
58
- const blocks = createBlocks(state);
50
+ const blocks = createBlocks(state, getView);
59
51
  nodes.push(...blocks.nodes);
60
52
  edges.push(...blocks.edges);
61
53
  }
54
+ if (features.image) {
55
+ const image = createImageUpload(features.image);
56
+ nodes.push(...image.nodes);
57
+ edges.push(...image.edges);
58
+ }
62
59
  if (customActions) {
63
60
  const custom = customActions();
64
61
  nodes.push(...custom.nodes);
@@ -67,39 +64,41 @@ const createToolbar = ({
67
64
  const editorToolbarGap = createGapSeparator();
68
65
  nodes.push(...editorToolbarGap.nodes);
69
66
  edges.push(...editorToolbarGap.edges);
70
- if (features.comment ?? true) {
71
- const comment = createComment(state);
67
+ if (features.comment) {
68
+ const comment = createComment(state, getView);
72
69
  nodes.push(...comment.nodes);
73
70
  edges.push(...comment.edges);
74
71
  }
75
72
  if (features.search ?? true) {
76
- nodes.push(editorToolbarSearch);
77
- edges.push({ source: 'root', target: editorToolbarSearch.id });
73
+ const search = createSearch(getView);
74
+ nodes.push(...search.nodes);
75
+ edges.push(...search.edges);
78
76
  }
79
- if (features.viewMode ?? true) {
80
- const viewMode = createViewMode(state);
77
+ if (features.viewMode) {
78
+ const viewMode = createViewMode(state, features.viewMode);
81
79
  nodes.push(...viewMode.nodes);
82
80
  edges.push(...viewMode.edges);
83
81
  }
84
82
  return { nodes, edges };
85
83
  };
86
84
 
87
- const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
85
+ // TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
86
+ // E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
87
+ // This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
88
+ const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
88
89
  const menuCreator = useCallback(() => createToolbar(props), [props]);
89
- const { resolveGroupItems } = useMenuActions(menuCreator);
90
-
91
- return { resolveGroupItems, onAction: onAction as MenuActionHandler };
90
+ return useMenuActions(menuCreator);
92
91
  };
93
92
 
94
- export const EditorToolbar = ({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
93
+ export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
95
94
  const menuProps = useEditorToolbarActionGraph(props);
96
95
  return (
97
96
  <div role='none' className={stackItemContentToolbarClassNames(role)}>
98
97
  <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
99
98
  <MenuProvider {...menuProps} attendableId={attendableId}>
100
- <ToolbarMenu classNames={[textBlockWidth, '!bg-transparent', classNames]} />
99
+ <ToolbarMenu classNames={[textBlockWidth, classNames]} />
101
100
  </MenuProvider>
102
101
  </ElevationProvider>
103
102
  </div>
104
103
  );
105
- };
104
+ });
@@ -2,11 +2,13 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ import { type EditorView } from '@codemirror/view';
6
+
5
7
  import { type NodeArg } from '@dxos/app-graph';
6
8
  import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
7
9
 
8
10
  import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
9
- import { type PayloadType } from '../../extensions';
11
+ import { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
10
12
 
11
13
  const createBlockGroupAction = (value: string) =>
12
14
  createEditorActionGroup('block', {
@@ -15,22 +17,41 @@ const createBlockGroupAction = (value: string) =>
15
17
  value,
16
18
  } as ToolbarMenuActionGroupProperties);
17
19
 
18
- const createBlockActions = (value: string, blankLine?: boolean) =>
20
+ const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
19
21
  Object.entries({
20
22
  blockquote: 'ph--quotes--regular',
21
23
  codeblock: 'ph--code-block--regular',
22
24
  table: 'ph--table--regular',
23
25
  }).map(([type, icon]) => {
26
+ const checked = type === value;
24
27
  return createEditorAction(
25
- { type: type as PayloadType, checked: type === value, ...(type === 'table' && { disabled: !!blankLine }) },
26
- icon,
28
+ type,
29
+ () => {
30
+ const view = getView();
31
+ if (!view) {
32
+ return;
33
+ }
34
+
35
+ switch (type) {
36
+ case 'blockquote':
37
+ checked ? removeBlockquote(view) : addBlockquote(view);
38
+ break;
39
+ case 'codeblock':
40
+ checked ? removeCodeblock(view) : addCodeblock(view);
41
+ break;
42
+ case 'table':
43
+ insertTable(view);
44
+ break;
45
+ }
46
+ },
47
+ { checked, ...(type === 'table' && { disabled: !!blankLine }), icon },
27
48
  );
28
49
  });
29
50
 
30
- export const createBlocks = (state: EditorToolbarState) => {
51
+ export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
31
52
  const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
32
53
  const blockGroupAction = createBlockGroupAction(value);
33
- const blockActions = createBlockActions(value, state.blankLine);
54
+ const blockActions = createBlockActions(value, getView, state.blankLine);
34
55
  return {
35
56
  nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
36
57
  edges: [
@@ -2,9 +2,12 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ import { type EditorView } from '@codemirror/view';
6
+
5
7
  import { type Label } from '@dxos/react-ui';
6
8
 
7
9
  import { createEditorAction, type EditorToolbarState } from './util';
10
+ import { createComment as nativeCreateComment } from '../../extensions';
8
11
  import { translationKey } from '../../translations';
9
12
 
10
13
  const commentLabel = (comment?: boolean, selection?: boolean) =>
@@ -14,10 +17,14 @@ const commentLabel = (comment?: boolean, selection?: boolean) =>
14
17
  ? 'select text to comment label'
15
18
  : 'comment label';
16
19
 
17
- const createCommentAction = (label: Label) =>
18
- createEditorAction({ type: 'comment', testId: 'editor.toolbar.comment' }, 'ph--chat-text--regular', label);
20
+ const createCommentAction = (label: Label, getView: () => EditorView) =>
21
+ createEditorAction('comment', () => nativeCreateComment(getView()), {
22
+ testId: 'editor.toolbar.comment',
23
+ icon: 'ph--chat-text--regular',
24
+ label,
25
+ });
19
26
 
20
- export const createComment = (state: EditorToolbarState) => ({
21
- nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }])],
27
+ export const createComment = (state: EditorToolbarState, getView: () => EditorView) => ({
28
+ nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }], getView)],
22
29
  edges: [{ source: 'root', target: 'comment' }],
23
30
  });
@@ -2,11 +2,13 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ import { type EditorView } from '@codemirror/view';
6
+
5
7
  import { type NodeArg } from '@dxos/app-graph';
6
8
  import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
7
9
 
8
10
  import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
9
- import { type Formatting, type PayloadType } from '../../extensions';
11
+ import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
10
12
 
11
13
  const formats = {
12
14
  strong: 'ph--text-b--regular',
@@ -23,14 +25,39 @@ const createFormattingGroup = (formatting: Formatting) =>
23
25
  value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
24
26
  } as ToolbarMenuActionGroupProperties);
25
27
 
26
- const createFormattingActions = (formatting: Formatting) =>
27
- Object.entries(formats).map(([type, icon]) =>
28
- createEditorAction({ type: type as PayloadType, checked: !!formatting[type as keyof Formatting] }, icon),
29
- );
28
+ const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
29
+ Object.entries(formats).map(([type, icon]) => {
30
+ const checked = !!formatting[type as keyof Formatting];
31
+ return createEditorAction(
32
+ type,
33
+ () => {
34
+ const view = getView();
35
+ if (!view) {
36
+ return;
37
+ }
38
+
39
+ if (type === 'link') {
40
+ checked ? removeLink(view) : addLink()(view);
41
+ return;
42
+ }
43
+
44
+ const inlineType =
45
+ type === 'strong'
46
+ ? Inline.Strong
47
+ : type === 'emphasis'
48
+ ? Inline.Emphasis
49
+ : type === 'strikethrough'
50
+ ? Inline.Strikethrough
51
+ : Inline.Code;
52
+ setStyle(inlineType, !checked)(view);
53
+ },
54
+ { checked, icon },
55
+ );
56
+ });
30
57
 
31
- export const createFormatting = (state: EditorToolbarState) => {
58
+ export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
32
59
  const formattingGroupAction = createFormattingGroup(state);
33
- const formattingActions = createFormattingActions(state);
60
+ const formattingActions = createFormattingActions(state, getView);
34
61
  return {
35
62
  nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
36
63
  edges: [
@@ -2,10 +2,13 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
+ import { type EditorView } from '@codemirror/view';
6
+
5
7
  import { type NodeArg } from '@dxos/app-graph';
6
8
  import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
7
9
 
8
10
  import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
11
+ import { setHeading } from '../../extensions';
9
12
  import { translationKey } from '../../translations';
10
13
 
11
14
  const createHeadingGroupAction = (value: string) =>
@@ -20,7 +23,7 @@ const createHeadingGroupAction = (value: string) =>
20
23
  'ph--text-h--regular',
21
24
  );
22
25
 
23
- const createHeadingActions = (value: string) =>
26
+ const createHeadingActions = (getView: () => EditorView) =>
24
27
  Object.entries({
25
28
  '0': 'ph--paragraph--regular',
26
29
  '1': 'ph--text-h-one--regular',
@@ -31,12 +34,10 @@ const createHeadingActions = (value: string) =>
31
34
  '6': 'ph--text-h-six--regular',
32
35
  }).map(([levelStr, icon]) => {
33
36
  const level = parseInt(levelStr);
34
- return createEditorAction(
35
- { type: 'heading', data: level, checked: value === levelStr },
37
+ return createEditorAction(`heading--${levelStr}`, () => setHeading(level)(getView()), {
38
+ label: ['heading level label', { count: level, ns: translationKey }],
36
39
  icon,
37
- ['heading level label', { count: level, ns: translationKey }],
38
- `heading--${levelStr}`,
39
- );
40
+ });
40
41
  });
41
42
 
42
43
  const computeHeadingValue = (state: EditorToolbarState) => {
@@ -45,10 +46,10 @@ const computeHeadingValue = (state: EditorToolbarState) => {
45
46
  return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
46
47
  };
47
48
 
48
- export const createHeadings = (state: EditorToolbarState) => {
49
+ export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
49
50
  const headingValue = computeHeadingValue(state);
50
51
  const headingGroupAction = createHeadingGroupAction(headingValue);
51
- const headingActions = createHeadingActions(headingValue);
52
+ const headingActions = createHeadingActions(getView);
52
53
  return {
53
54
  nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
54
55
  edges: [
@@ -0,0 +1,16 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { createEditorAction } from './util';
6
+
7
+ const createImageUploadAction = (onImageUpload: () => void) =>
8
+ createEditorAction('image', onImageUpload, {
9
+ testId: 'editor.toolbar.image',
10
+ icon: 'ph--image-square--regular',
11
+ });
12
+
13
+ export const createImageUpload = (onImageUpload: () => void) => ({
14
+ nodes: [createImageUploadAction(onImageUpload)],
15
+ edges: [{ source: 'root', target: 'image' }],
16
+ });