@dxos/react-ui-editor 0.4.8-main.5f46a83 → 0.4.8-main.6304ea3

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 (77) hide show
  1. package/dist/lib/browser/index.mjs +2285 -2106
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/types/src/components/TextEditor/TextEditor.d.ts +2 -2
  5. package/dist/types/src/components/TextEditor/TextEditor.d.ts.map +1 -1
  6. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts +3 -2
  7. package/dist/types/src/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
  8. package/dist/types/src/components/Toolbar/Toolbar.d.ts +11 -5
  9. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  10. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +4 -2
  11. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  12. package/dist/types/src/extensions/automerge/automerge.stories.d.ts +1 -0
  13. package/dist/types/src/extensions/automerge/automerge.stories.d.ts.map +1 -1
  14. package/dist/types/src/{hooks → extensions/awareness}/awareness-provider.d.ts +1 -1
  15. package/dist/types/src/extensions/awareness/awareness-provider.d.ts.map +1 -0
  16. package/dist/types/src/extensions/awareness/awareness.d.ts.map +1 -0
  17. package/dist/types/src/extensions/awareness/index.d.ts +3 -0
  18. package/dist/types/src/extensions/awareness/index.d.ts.map +1 -0
  19. package/dist/types/src/extensions/comments.d.ts +1 -1
  20. package/dist/types/src/extensions/comments.d.ts.map +1 -1
  21. package/dist/types/src/extensions/cursor.d.ts +1 -1
  22. package/dist/types/src/extensions/cursor.d.ts.map +1 -1
  23. package/dist/types/src/{hooks/extension-utils.d.ts → extensions/factories.d.ts} +2 -7
  24. package/dist/types/src/extensions/factories.d.ts.map +1 -0
  25. package/dist/types/src/extensions/index.d.ts +3 -0
  26. package/dist/types/src/extensions/index.d.ts.map +1 -1
  27. package/dist/types/src/extensions/markdown/formatting.d.ts +7 -4
  28. package/dist/types/src/extensions/markdown/formatting.d.ts.map +1 -1
  29. package/dist/types/src/extensions/markdown/image.d.ts +6 -0
  30. package/dist/types/src/extensions/markdown/image.d.ts.map +1 -1
  31. package/dist/types/src/extensions/modes.d.ts +1 -0
  32. package/dist/types/src/extensions/modes.d.ts.map +1 -1
  33. package/dist/types/src/extensions/state.d.ts +20 -0
  34. package/dist/types/src/extensions/state.d.ts.map +1 -0
  35. package/dist/types/src/{hooks/defs.d.ts → extensions/types.d.ts} +1 -1
  36. package/dist/types/src/extensions/types.d.ts.map +1 -0
  37. package/dist/types/src/hooks/index.d.ts +1 -3
  38. package/dist/types/src/hooks/index.d.ts.map +1 -1
  39. package/dist/types/src/hooks/useActionHandler.d.ts.map +1 -1
  40. package/dist/types/src/hooks/useDocAccessor.d.ts +7 -0
  41. package/dist/types/src/hooks/useDocAccessor.d.ts.map +1 -0
  42. package/dist/types/src/hooks/useTextEditor.d.ts.map +1 -1
  43. package/dist/types/src/hooks/useTextEditor.stories.d.ts +1 -0
  44. package/dist/types/src/hooks/useTextEditor.stories.d.ts.map +1 -1
  45. package/dist/types/src/translations.d.ts +1 -0
  46. package/dist/types/src/translations.d.ts.map +1 -1
  47. package/package.json +25 -27
  48. package/src/components/TextEditor/TextEditor.stories.tsx +21 -11
  49. package/src/components/TextEditor/TextEditor.tsx +13 -12
  50. package/src/components/Toolbar/Toolbar.stories.tsx +28 -33
  51. package/src/components/Toolbar/Toolbar.tsx +101 -35
  52. package/src/extensions/automerge/automerge.stories.tsx +2 -1
  53. package/src/{hooks → extensions/awareness}/awareness-provider.ts +1 -1
  54. package/src/extensions/{awareness.ts → awareness/awareness.ts} +1 -1
  55. package/src/extensions/awareness/index.ts +6 -0
  56. package/src/extensions/comments.ts +3 -3
  57. package/src/extensions/cursor.ts +1 -1
  58. package/src/{hooks/extension-utils.ts → extensions/factories.ts} +3 -21
  59. package/src/extensions/index.ts +3 -0
  60. package/src/extensions/markdown/decorate.ts +1 -1
  61. package/src/extensions/markdown/formatting.test.ts +13 -13
  62. package/src/extensions/markdown/formatting.ts +91 -83
  63. package/src/extensions/markdown/image.ts +6 -0
  64. package/src/extensions/modes.ts +3 -1
  65. package/src/extensions/state.ts +90 -0
  66. package/src/{hooks/defs.ts → extensions/types.ts} +1 -0
  67. package/src/hooks/index.ts +1 -4
  68. package/src/hooks/useActionHandler.ts +5 -1
  69. package/src/hooks/useDocAccessor.ts +21 -0
  70. package/src/hooks/useTextEditor.stories.tsx +4 -4
  71. package/src/hooks/useTextEditor.ts +3 -0
  72. package/src/translations.ts +1 -0
  73. package/dist/types/src/extensions/awareness.d.ts.map +0 -1
  74. package/dist/types/src/hooks/awareness-provider.d.ts.map +0 -1
  75. package/dist/types/src/hooks/defs.d.ts.map +0 -1
  76. package/dist/types/src/hooks/extension-utils.d.ts.map +0 -1
  77. /package/dist/types/src/extensions/{awareness.d.ts → awareness/awareness.d.ts} +0 -0
@@ -11,7 +11,7 @@ export type Formatting = {
11
11
  link: boolean;
12
12
  listStyle: null | 'ordered' | 'bullet' | 'task';
13
13
  };
14
- export declare const compareFormatting: (a: Formatting, b: Formatting) => boolean;
14
+ export declare const formattingEquals: (a: Formatting, b: Formatting) => boolean;
15
15
  export declare enum Inline {
16
16
  Strong = 0,
17
17
  Emphasis = 1,
@@ -34,7 +34,10 @@ export declare const toggleStrikethrough: StateCommand;
34
34
  export declare const toggleInlineCode: StateCommand;
35
35
  export declare const insertTable: (view: EditorView) => void;
36
36
  export declare const removeLink: StateCommand;
37
- export declare const addLink: StateCommand;
37
+ export declare const addLink: ({ url, image }?: {
38
+ url?: string | undefined;
39
+ image?: boolean | undefined;
40
+ }) => StateCommand;
38
41
  export declare const addList: (type: List) => StateCommand;
39
42
  export declare const removeList: (type: List) => StateCommand;
40
43
  export declare const toggleList: (type: List) => StateCommand;
@@ -52,7 +55,7 @@ export declare const formattingKeymap: (options?: FormattingOptions) => Extensio
52
55
  */
53
56
  export declare const getFormatting: (state: EditorState) => Formatting;
54
57
  /**
55
- * Hook computes the current formatting state.
58
+ * Hook provides an extension to compute the current formatting state.
56
59
  */
57
- export declare const useFormattingState: () => [Formatting | null, Extension];
60
+ export declare const useFormattingState: () => [Formatting | undefined, Extension];
58
61
  //# sourceMappingURL=formatting.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/formatting.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,WAAW,EAKjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAU,MAAM,kBAAkB,CAAC;AAYtD,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,OAAO,CAAC;IAGnB,SAAS,EACL,WAAW,GACX,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,IAAI,CAAC;IAET,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,OAAO,CAAC;IAEhB,QAAQ,EAAE,OAAO,CAAC;IAElB,aAAa,EAAE,OAAO,CAAC;IAEvB,IAAI,EAAE,OAAO,CAAC;IAEd,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,UAAU,KAAK,UAAU,YAQ/B,CAAC;AAEhC,oBAAY,MAAM;IAChB,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,aAAa,IAAI;IACjB,IAAI,IAAI;CACT;AAED,oBAAY,IAAI;IACd,OAAO,IAAA;IACP,MAAM,IAAA;IACN,IAAI,IAAA;CACL;AAMD,eAAO,MAAM,UAAU,UACb,MAAM,KAAG,YAkEhB,CAAC;AAMJ,eAAO,MAAM,QAAQ,SACZ,MAAM,UAAU,OAAO,KAAG,YAoKhC,CAAC;AAEJ,eAAO,MAAM,QAAQ,UAAW,MAAM,KAAG,YAAqC,CAAC;AAE/E,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,YAAsC,CAAC;AAEnF,eAAO,MAAM,WAAW,UACd,MAAM,KAAG,YAahB,CAAC;AAEJ,eAAO,MAAM,YAAY,cAA6B,CAAC;AACvD,eAAO,MAAM,cAAc,cAA+B,CAAC;AAC3D,eAAO,MAAM,mBAAmB,cAAoC,CAAC;AACrE,eAAO,MAAM,gBAAgB,cAA2B,CAAC;AA0EzD,eAAO,MAAM,WAAW,SAAU,UAAU,SAS3C,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,YAUxB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,YAmFrB,CAAC;AAMF,eAAO,MAAM,OAAO,SACX,IAAI,KAAG,YAmJb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAwDb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAMb,CAAC;AAqBJ,eAAO,MAAM,aAAa,WACf,OAAO,KAAG,YAwElB,CAAC;AAEJ,eAAO,MAAM,aAAa,cAAsB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,cAAuB,CAAC;AAErD,eAAO,MAAM,gBAAgB,EAAE,YAE9B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,YAsD1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAyC7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAE7B,CAAC;AAMF,MAAM,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEnC,eAAO,MAAM,gBAAgB,aAAa,iBAAiB,KAAQ,SASlE,CAAC;AA4CF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,WAAW,KAAG,UAqKlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,QAAO,CAAC,UAAU,GAAG,IAAI,EAAE,SAAS,CAgBlE,CAAC"}
1
+ {"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/formatting.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,WAAW,EAKjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAU,MAAM,kBAAkB,CAAC;AActD,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,OAAO,CAAC;IAGnB,SAAS,EACL,WAAW,GACX,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,GACX,WAAW,GACX,IAAI,CAAC;IAET,UAAU,EAAE,OAAO,CAAC;IAEpB,MAAM,EAAE,OAAO,CAAC;IAEhB,QAAQ,EAAE,OAAO,CAAC;IAElB,aAAa,EAAE,OAAO,CAAC;IAEvB,IAAI,EAAE,OAAO,CAAC;IAEd,IAAI,EAAE,OAAO,CAAC;IAEd,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,MAAO,UAAU,KAAK,UAAU,YAQ9B,CAAC;AAEhC,oBAAY,MAAM;IAChB,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,aAAa,IAAI;IACjB,IAAI,IAAI;CACT;AAED,oBAAY,IAAI;IACd,OAAO,IAAA;IACP,MAAM,IAAA;IACN,IAAI,IAAA;CACL;AAMD,eAAO,MAAM,UAAU,UACb,MAAM,KAAG,YAkEhB,CAAC;AAMJ,eAAO,MAAM,QAAQ,SACZ,MAAM,UAAU,OAAO,KAAG,YAoKhC,CAAC;AAEJ,eAAO,MAAM,QAAQ,UAAW,MAAM,KAAG,YAAqC,CAAC;AAE/E,eAAO,MAAM,WAAW,UAAW,MAAM,KAAG,YAAsC,CAAC;AAEnF,eAAO,MAAM,WAAW,UACd,MAAM,KAAG,YAahB,CAAC;AAEJ,eAAO,MAAM,YAAY,cAA6B,CAAC;AACvD,eAAO,MAAM,cAAc,cAA+B,CAAC;AAC3D,eAAO,MAAM,mBAAmB,cAAoC,CAAC;AACrE,eAAO,MAAM,gBAAgB,cAA2B,CAAC;AA0EzD,eAAO,MAAM,WAAW,SAAU,UAAU,SAS3C,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,YAUxB,CAAC;AAGF,eAAO,MAAM,OAAO;;;MACwC,YAsFzD,CAAC;AAMJ,eAAO,MAAM,OAAO,SACX,IAAI,KAAG,YAmJb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAwDb,CAAC;AAEJ,eAAO,MAAM,UAAU,SACd,IAAI,KAAG,YAMb,CAAC;AAqBJ,eAAO,MAAM,aAAa,WACf,OAAO,KAAG,YAwElB,CAAC;AAEJ,eAAO,MAAM,aAAa,cAAsB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,cAAuB,CAAC;AAErD,eAAO,MAAM,gBAAgB,EAAE,YAE9B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,YAsD1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAyC7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,YAE7B,CAAC;AAMF,MAAM,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEnC,eAAO,MAAM,gBAAgB,aAAa,iBAAiB,KAAQ,SASlE,CAAC;AA4CF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,WAAW,KAAG,UAqKlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,QAAO,CAAC,UAAU,GAAG,SAAS,EAAE,SAAS,CAkBvE,CAAC"}
@@ -1,4 +1,10 @@
1
1
  import { type Extension } from '@codemirror/state';
2
2
  export type ImageOptions = {};
3
3
  export declare const image: (options?: ImageOptions) => Extension;
4
+ export type ImageUploadOptions = {
5
+ onSelect: () => {
6
+ url: string;
7
+ };
8
+ };
9
+ export declare const imageUpload: (options?: ImageOptions) => void;
4
10
  //# sourceMappingURL=image.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC"}
1
+ {"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC;AA4DF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,WAAW,aAAa,YAAY,SAAY,CAAC"}
@@ -1,4 +1,5 @@
1
1
  import { type Extension, Facet } from '@codemirror/state';
2
+ export declare const focusEvent = "focus.container";
2
3
  export type EditorMode = 'default' | 'vim' | undefined;
3
4
  export type EditorConfig = {
4
5
  type: string;
@@ -1 +1 @@
1
- {"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAgBpD,CAAC"}
1
+ {"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAgBpD,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { type Extension } from '@codemirror/state';
2
+ export type SelectionState = {
3
+ scrollTo: {
4
+ from: number;
5
+ };
6
+ selection: {
7
+ anchor: number;
8
+ head?: number;
9
+ };
10
+ };
11
+ export type StateOptions = {
12
+ setState: (id: string, state: SelectionState) => void;
13
+ getState: (id: string) => SelectionState | undefined;
14
+ };
15
+ export declare const localStorageStateStoreAdapter: StateOptions;
16
+ /**
17
+ * Track scrolling and selection state to be restored when switching to document.
18
+ */
19
+ export declare const state: ({ getState, setState }?: Partial<StateOptions>) => Extension;
20
+ //# sourceMappingURL=state.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../src/extensions/state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAe,MAAM,mBAAmB,CAAC;AAYhE,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,SAAS,EAAE;QACT,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,cAAc,GAAG,SAAS,CAAC;CACtD,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,YAU3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,4BAA4B,QAAQ,YAAY,CAAC,KAAQ,SA0C1E,CAAC"}
@@ -6,4 +6,4 @@ export type Comment = {
6
6
  id: string;
7
7
  cursor?: string;
8
8
  };
9
- //# sourceMappingURL=defs.d.ts.map
9
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/extensions/types.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAIF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}
@@ -1,6 +1,4 @@
1
- export * from './awareness-provider';
2
- export * from './defs';
3
- export * from './extension-utils';
4
1
  export * from './useActionHandler';
2
+ export * from './useDocAccessor';
5
3
  export * from './useTextEditor';
6
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAElC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqBlD,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,KAAG,YAAY,CAAC,UAAU,CAiElF,CAAC"}
1
+ {"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqBlD,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,KAAG,YAAY,CAAC,UAAU,CAqElF,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { type DocAccessor, type TextObject } from '@dxos/echo-schema';
2
+ export declare const useDocAccessor: <T = any>(text: TextObject) => {
3
+ id: string;
4
+ doc: string | undefined;
5
+ accessor: DocAccessor<T>;
6
+ };
7
+ //# sourceMappingURL=useDocAccessor.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,WAAW,EAAkB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGzG,eAAO,MAAM,cAAc,kBACnB,UAAU;QACT,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAKlG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aAyEpG,CAAC"}
1
+ {"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAKlG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aA4EpG,CAAC"}
@@ -24,6 +24,7 @@ declare const _default: {
24
24
  'blockquote label': string;
25
25
  'codeblock label': string;
26
26
  'comment label': string;
27
+ 'image label': string;
27
28
  'heading label': string;
28
29
  'table label': string;
29
30
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAwBpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBA2Ee,UAAU;;;;;;;;;;;;;;;;;;;;;;;;AAH3B,wBASE;AAEF,eAAO,MAAM,OAAO;;CAKnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}
1
+ {"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAwBpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBA2Ee,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;AAH3B,wBASE;AAEF,eAAO,MAAM,OAAO;;CAKnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}
@@ -13,6 +13,7 @@ declare const _default: {
13
13
  'blockquote label': string;
14
14
  'codeblock label': string;
15
15
  'comment label': string;
16
+ 'image label': string;
16
17
  'heading label': string;
17
18
  'table label': string;
18
19
  };
@@ -1 +1 @@
1
- {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;AAEhD,wBAoBE"}
1
+ {"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;AAEhD,wBAqBE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-editor",
3
- "version": "0.4.8-main.5f46a83",
3
+ "version": "0.4.8-main.6304ea3",
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",
@@ -36,21 +36,22 @@
36
36
  "lodash.get": "^4.4.2",
37
37
  "lodash.pick": "^4.4.0",
38
38
  "lodash.sortby": "^4.7.0",
39
+ "react-dropzone": "^14.2.3",
39
40
  "style-mod": "^4.1.0",
40
- "@dxos/async": "0.4.8-main.5f46a83",
41
- "@dxos/context": "0.4.8-main.5f46a83",
42
- "@dxos/debug": "0.4.8-main.5f46a83",
43
- "@dxos/automerge": "0.4.8-main.5f46a83",
44
- "@dxos/echo-schema": "0.4.8-main.5f46a83",
45
- "@dxos/display-name": "0.4.8-main.5f46a83",
46
- "@dxos/invariant": "0.4.8-main.5f46a83",
47
- "@dxos/protocols": "0.4.8-main.5f46a83",
48
- "@dxos/react-async": "0.4.8-main.5f46a83",
49
- "@dxos/log": "0.4.8-main.5f46a83",
50
- "@dxos/react-ui": "0.4.8-main.5f46a83",
51
- "@dxos/react-ui-theme": "0.4.8-main.5f46a83",
52
- "@dxos/text-model": "0.4.8-main.5f46a83",
53
- "@dxos/util": "0.4.8-main.5f46a83"
41
+ "@dxos/context": "0.4.8-main.6304ea3",
42
+ "@dxos/async": "0.4.8-main.6304ea3",
43
+ "@dxos/debug": "0.4.8-main.6304ea3",
44
+ "@dxos/automerge": "0.4.8-main.6304ea3",
45
+ "@dxos/display-name": "0.4.8-main.6304ea3",
46
+ "@dxos/echo-schema": "0.4.8-main.6304ea3",
47
+ "@dxos/protocols": "0.4.8-main.6304ea3",
48
+ "@dxos/log": "0.4.8-main.6304ea3",
49
+ "@dxos/invariant": "0.4.8-main.6304ea3",
50
+ "@dxos/react-async": "0.4.8-main.6304ea3",
51
+ "@dxos/react-ui": "0.4.8-main.6304ea3",
52
+ "@dxos/react-ui-theme": "0.4.8-main.6304ea3",
53
+ "@dxos/text-model": "0.4.8-main.6304ea3",
54
+ "@dxos/util": "0.4.8-main.6304ea3"
54
55
  },
55
56
  "devDependencies": {
56
57
  "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -68,7 +69,6 @@
68
69
  "@types/react-test-renderer": "^17.0.2",
69
70
  "@vitest/browser": "^1.3.1",
70
71
  "@vitest/ui": "^1.3.1",
71
- "deepsignal": "^1.5.0",
72
72
  "happy-dom": "^13.3.1",
73
73
  "jsdom": "^20.0.1",
74
74
  "react": "^18.2.0",
@@ -78,22 +78,20 @@
78
78
  "vite-plugin-top-level-await": "^1.4.1",
79
79
  "vite-plugin-wasm": "^3.3.0",
80
80
  "vitest": "^1.3.1",
81
- "@dxos/config": "0.4.8-main.5f46a83",
82
- "@dxos/echo-signals": "0.4.8-main.5f46a83",
83
- "@dxos/echo-typegen": "0.4.8-main.5f46a83",
84
- "@dxos/random": "0.4.8-main.5f46a83",
85
- "@dxos/keyboard": "0.4.8-main.5f46a83",
86
- "@dxos/react-client": "0.4.8-main.5f46a83",
87
- "@dxos/react-ui": "0.4.8-main.5f46a83",
88
- "@dxos/storybook-utils": "0.4.8-main.5f46a83"
81
+ "@dxos/config": "0.4.8-main.6304ea3",
82
+ "@dxos/echo-signals": "0.4.8-main.6304ea3",
83
+ "@dxos/echo-typegen": "0.4.8-main.6304ea3",
84
+ "@dxos/keyboard": "0.4.8-main.6304ea3",
85
+ "@dxos/react-client": "0.4.8-main.6304ea3",
86
+ "@dxos/random": "0.4.8-main.6304ea3",
87
+ "@dxos/storybook-utils": "0.4.8-main.6304ea3",
88
+ "@dxos/react-ui": "0.4.8-main.6304ea3"
89
89
  },
90
90
  "peerDependencies": {
91
91
  "@phosphor-icons/react": "^2.0.5",
92
- "@vitest/browser": "^1.3.1",
93
- "@vitest/ui": "^1.3.1",
94
92
  "react": "^18.2.0",
95
93
  "react-dom": "^18.2.0",
96
- "@dxos/react-client": "0.4.8-main.5f46a83"
94
+ "@dxos/react-client": "0.4.8-main.6304ea3"
97
95
  },
98
96
  "publishConfig": {
99
97
  "access": "public"
@@ -20,12 +20,16 @@ import { withTheme } from '@dxos/storybook-utils';
20
20
 
21
21
  import { TextEditor, type TextEditorProps } from './TextEditor';
22
22
  import {
23
+ EditorModes,
23
24
  annotations,
24
25
  autocomplete,
25
26
  blast,
26
27
  command,
27
28
  comments,
29
+ createBasicExtensions,
30
+ createDataExtensions,
28
31
  createMarkdownExtensions,
32
+ createThemeExtensions,
29
33
  decorateMarkdown,
30
34
  defaultOptions,
31
35
  dnd,
@@ -34,21 +38,17 @@ import {
34
38
  linkTooltip,
35
39
  listener,
36
40
  mention,
37
- useComments,
41
+ state,
38
42
  table,
39
43
  typewriter,
40
- EditorModes,
44
+ useComments,
41
45
  type CommandAction,
42
46
  type CommandOptions,
47
+ type Comment,
43
48
  type CommentsOptions,
49
+ type SelectionState,
44
50
  } from '../../extensions';
45
- import {
46
- type Comment,
47
- createBasicExtensions,
48
- createDataExtensions,
49
- createThemeExtensions,
50
- useDocAccessor,
51
- } from '../../hooks';
51
+ import { useDocAccessor } from '../../hooks';
52
52
  import translations from '../../translations';
53
53
 
54
54
  faker.seed(101);
@@ -243,7 +243,7 @@ type StoryProps = {
243
243
  } & Pick<TextEditorProps, 'extensions'>;
244
244
 
245
245
  const Story = ({
246
- id = 'test',
246
+ id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
247
247
  text,
248
248
  comments,
249
249
  extensions: _extensions = [],
@@ -327,8 +327,18 @@ export const Empty = {
327
327
  render: () => <Story />,
328
328
  };
329
329
 
330
+ const global = new Map<string, SelectionState>();
331
+
330
332
  export const Scrolling = {
331
- render: () => <Story text={str('# Large Document', '', large)} />,
333
+ render: () => (
334
+ <Story
335
+ text={str('# Large Document', '', large)}
336
+ extensions={state({
337
+ setState: (id, state) => global.set(id, state),
338
+ getState: (id) => global.get(id),
339
+ })}
340
+ />
341
+ ),
332
342
  };
333
343
 
334
344
  export const ScrollingWithImages = {
@@ -18,7 +18,7 @@ import React, {
18
18
  import { log } from '@dxos/log';
19
19
  import { isNotFalsy } from '@dxos/util';
20
20
 
21
- import { documentId, editorMode } from '../../extensions';
21
+ import { documentId, editorMode, focusEvent } from '../../extensions';
22
22
  import { logChanges } from '../../util';
23
23
 
24
24
  export type CursorInfo = {
@@ -34,7 +34,7 @@ export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'ext
34
34
  id?: string;
35
35
  className?: string;
36
36
  autoFocus?: boolean;
37
- scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
37
+ scrollTo?: StateEffect<unknown>;
38
38
  moveToEndOfLine?: boolean;
39
39
  debug?: boolean;
40
40
  dataTestId?: string;
@@ -56,14 +56,14 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
56
56
  extensions,
57
57
  className,
58
58
  autoFocus,
59
- scrollTo = EditorView.scrollIntoView(0),
59
+ scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
60
60
  moveToEndOfLine,
61
61
  debug,
62
62
  dataTestId,
63
63
  },
64
64
  forwardedRef,
65
65
  ) => {
66
- // TODO(burdon): Increments by 2!
66
+ // NOTE: Increments by 2 in strict mode.
67
67
  const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
68
68
 
69
69
  // TODO(burdon): Make tabster optional.
@@ -85,7 +85,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
85
85
  // Create editor state and view.
86
86
  // The view is recreated if the model or extensions are changed.
87
87
  useEffect(() => {
88
- log('updating', { id, instanceId });
88
+ log('create', { id, instanceId });
89
89
 
90
90
  //
91
91
  // EditorState
@@ -104,7 +104,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
104
104
  // Focus.
105
105
  EditorView.updateListener.of((update) => {
106
106
  update.transactions.forEach((transaction) => {
107
- if (transaction.isUserEvent('focus.container')) {
107
+ if (transaction.isUserEvent(focusEvent)) {
108
108
  rootRef.current?.focus();
109
109
  }
110
110
  });
@@ -122,6 +122,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
122
122
  state,
123
123
  parent: rootRef.current!,
124
124
  scrollTo,
125
+
125
126
  // NOTE: Uncomment to debug/monitor all transactions.
126
127
  // https://codemirror.net/docs/ref/#view.EditorView.dispatch
127
128
  dispatchTransactions: (trs, view) => {
@@ -132,12 +133,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
132
133
  },
133
134
  });
134
135
 
135
- setView(view);
136
-
137
- // Position cursor at end of line.
138
- if (moveToEndOfLine) {
136
+ // Position cursor at end of first line.
137
+ if (moveToEndOfLine && !(scrollTo || selection)) {
139
138
  const { to } = view.state.doc.lineAt(0);
140
- view?.dispatch({ selection: { anchor: to } });
139
+ view.dispatch({ selection: { anchor: to } });
141
140
  }
142
141
 
143
142
  // Remove tabster attribute (rely on custom keymap).
@@ -145,9 +144,11 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
145
144
  rootRef.current?.removeAttribute('data-tabster');
146
145
  }
147
146
 
147
+ setView(view);
148
+
148
149
  return () => {
150
+ log('destroy', { id, instanceId });
149
151
  view?.destroy();
150
- setView(null);
151
152
  };
152
153
  }, [doc, selection, extensions]);
153
154
 
@@ -15,38 +15,36 @@ import { withTheme } from '@dxos/storybook-utils';
15
15
 
16
16
  import { Toolbar } from './Toolbar';
17
17
  import {
18
- decorateMarkdown,
18
+ type Comment,
19
19
  comments,
20
+ createBasicExtensions,
21
+ createDataExtensions,
22
+ createMarkdownExtensions,
23
+ createThemeExtensions,
24
+ decorateMarkdown,
20
25
  formattingKeymap,
26
+ image,
21
27
  table,
22
28
  useComments,
23
29
  useFormattingState,
24
- createMarkdownExtensions,
25
- image,
26
30
  } from '../../extensions';
27
- import {
28
- type Comment,
29
- createBasicExtensions,
30
- createDataExtensions,
31
- createThemeExtensions,
32
- useActionHandler,
33
- useDocAccessor,
34
- useTextEditor,
35
- } from '../../hooks';
31
+ import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
36
32
  import translations from '../../translations';
37
33
 
38
34
  faker.seed(101);
39
35
 
40
36
  const Story: FC<{ content: string }> = ({ content }) => {
37
+ console.log('STORY');
41
38
  const { themeMode } = useThemeContext();
42
39
  const [item] = useState({ text: new TextObject(content) });
43
40
  const { id, doc, accessor } = useDocAccessor(item.text);
44
41
  const [formattingState, formattingObserver] = useFormattingState();
45
- const { parentRef, view } = useTextEditor(
46
- () => ({
42
+ const { parentRef, view } = useTextEditor(() => {
43
+ return {
47
44
  id,
48
45
  doc,
49
46
  extensions: [
47
+ formattingObserver,
50
48
  createBasicExtensions(),
51
49
  createMarkdownExtensions({ themeMode }),
52
50
  createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
@@ -62,39 +60,36 @@ const Story: FC<{ content: string }> = ({ content }) => {
62
60
  formattingKeymap(),
63
61
  image(),
64
62
  table(),
65
- formattingObserver,
66
63
  ],
67
- }),
68
- [id, accessor, themeMode],
69
- );
64
+ };
65
+ }, [id, accessor, formattingObserver, themeMode]);
66
+
67
+ const handleAction = useActionHandler(view);
70
68
 
71
69
  const [_comments, setComments] = useState<Comment[]>([]);
72
70
  useComments(view, id, _comments);
73
71
 
74
- const handleAction = useActionHandler(view);
75
-
76
72
  return (
77
- <div role='none' className='fixed inset-0 flex flex-col'>
78
- <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
79
- <Toolbar.Markdown />
80
- <Toolbar.Separator />
81
- <Toolbar.Extended />
82
- </Toolbar.Root>
83
- <div role='textbox' ref={parentRef} className={textBlockWidth} />;
84
- </div>
73
+ <Tooltip.Provider>
74
+ <div role='none' className='fixed inset-0 flex flex-col'>
75
+ <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
76
+ <Toolbar.Markdown />
77
+ <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
78
+ <Toolbar.Separator />
79
+ <Toolbar.Actions />
80
+ </Toolbar.Root>
81
+ <div ref={parentRef} className={textBlockWidth} />
82
+ </div>
83
+ </Tooltip.Provider>
85
84
  );
86
85
  };
87
86
 
88
87
  export default {
89
88
  title: 'react-ui-editor/Toolbar',
90
89
  component: Toolbar,
91
- render: (args: any) => (
92
- <Tooltip.Provider>
93
- <Story {...args} />
94
- </Tooltip.Provider>
95
- ),
96
90
  decorators: [withTheme],
97
91
  parameters: { translations, layout: 'fullscreen' },
92
+ render: (args: any) => <Story {...args} />,
98
93
  };
99
94
 
100
95
  const content = [