@mekari/pixel3-rich-text-editor 0.0.18 → 0.1.0-dev.1

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 (67) hide show
  1. package/dist/chunk-4KJOYLJI.mjs +168 -0
  2. package/dist/{chunk-JAKI6TU2.mjs → chunk-4SN6MBXS.mjs} +8 -22
  3. package/dist/chunk-4TUA5VF4.mjs +173 -0
  4. package/dist/{chunk-2OCRJNTJ.mjs → chunk-7RMCTPMN.mjs} +2 -2
  5. package/dist/{chunk-RNQQ7LGC.mjs → chunk-C7IUW3FX.mjs} +73 -1
  6. package/dist/{chunk-ES3FCTTF.mjs → chunk-JE7IG7UU.mjs} +27 -6
  7. package/dist/{chunk-73N5SLQ5.mjs → chunk-MGNW6NK2.mjs} +82 -25
  8. package/dist/{chunk-FZPMIQTC.mjs → chunk-OZGNQAK5.mjs} +2 -1
  9. package/dist/{chunk-VK7QDWXR.mjs → chunk-PTKS3BYW.mjs} +18 -5
  10. package/dist/{chunk-V52XUOVW.mjs → chunk-SBD2AUDA.mjs} +10 -2
  11. package/dist/{chunk-GVMGRBDI.mjs → chunk-TNDDXUVW.mjs} +5 -1
  12. package/dist/{chunk-WBMECFO3.mjs → chunk-X25J3BAC.mjs} +18 -46
  13. package/dist/{chunk-HF36L4GZ.mjs → chunk-ZAXJ3BEP.mjs} +2 -0
  14. package/dist/{chunk-5IPS4HT7.mjs → chunk-ZRAXSVO5.mjs} +1 -1
  15. package/dist/editor-toolbar.d.mts +9 -5
  16. package/dist/editor-toolbar.d.ts +9 -5
  17. package/dist/editor-toolbar.js +193 -92
  18. package/dist/editor-toolbar.mjs +7 -7
  19. package/dist/extensions/align-extension.js +75 -21
  20. package/dist/extensions/align-extension.mjs +2 -2
  21. package/dist/extensions/color-extension.js +69 -0
  22. package/dist/extensions/color-extension.mjs +2 -2
  23. package/dist/extensions/heading-extension.js +85 -45
  24. package/dist/extensions/heading-extension.mjs +2 -2
  25. package/dist/extensions/icons.d.mts +5 -1
  26. package/dist/extensions/icons.d.ts +5 -1
  27. package/dist/extensions/icons.js +76 -0
  28. package/dist/extensions/icons.mjs +9 -1
  29. package/dist/extensions/index.js +115 -71
  30. package/dist/extensions/index.mjs +6 -6
  31. package/dist/extensions/link-extension.js +85 -4
  32. package/dist/extensions/link-extension.mjs +2 -2
  33. package/dist/extensions/mention-list-extension.d.mts +33 -0
  34. package/dist/extensions/mention-list-extension.d.ts +33 -0
  35. package/dist/extensions/mention-list-extension.js +194 -0
  36. package/dist/extensions/mention-list-extension.mjs +7 -0
  37. package/dist/extensions/single-extension.d.mts +1 -1
  38. package/dist/extensions/single-extension.d.ts +1 -1
  39. package/dist/extensions/single-extension.js +73 -1
  40. package/dist/extensions/single-extension.mjs +2 -2
  41. package/dist/index.d.mts +1 -1
  42. package/dist/index.d.ts +1 -1
  43. package/dist/index.js +552 -104
  44. package/dist/index.mjs +14 -12
  45. package/dist/metafile-cjs.json +1 -1
  46. package/dist/metafile-esm.json +1 -1
  47. package/dist/modules/rich-text-editor.connects.js +2 -0
  48. package/dist/modules/rich-text-editor.connects.mjs +1 -1
  49. package/dist/modules/rich-text-editor.hooks.js +2 -0
  50. package/dist/modules/rich-text-editor.hooks.mjs +2 -2
  51. package/dist/modules/rich-text-editor.props.d.mts +7 -3
  52. package/dist/modules/rich-text-editor.props.d.ts +7 -3
  53. package/dist/modules/rich-text-editor.props.js +5 -1
  54. package/dist/modules/rich-text-editor.props.mjs +1 -1
  55. package/dist/modules/rich-text-editor.types.d.mts +18 -4
  56. package/dist/modules/rich-text-editor.types.d.ts +18 -4
  57. package/dist/rich-text-editor.d.mts +15 -4
  58. package/dist/rich-text-editor.d.ts +15 -4
  59. package/dist/rich-text-editor.js +552 -104
  60. package/dist/rich-text-editor.mjs +14 -12
  61. package/dist/rte-style-provider.js +1 -1
  62. package/dist/rte-style-provider.mjs +4 -4
  63. package/dist/rte-suggestion.d.mts +7 -0
  64. package/dist/rte-suggestion.d.ts +7 -0
  65. package/dist/rte-suggestion.js +354 -0
  66. package/dist/rte-suggestion.mjs +8 -0
  67. package/package.json +15 -11
package/dist/modules/rich-text-editor.types.d.mts CHANGED
@@ -4,12 +4,19 @@ import { Optional, PropTypes } from '@mekari/pixel3-utils';
4
4
  * Exported rich text editor types.
5
5
  */
6
6
 
7
+ interface MentionSuggestionItem {
8
+ id: string;
9
+ name: string;
10
+ description?: string;
11
+ avatar?: string;
12
+ }
7
13
  interface RichTextEditorProps {
8
14
  id?: string;
9
15
  value?: string;
10
16
  placeholder?: string;
11
17
  maxlength?: number;
12
- options?: Items[][];
18
+ options?: ToolbarOption[][];
19
+ suggestions?: MentionSuggestionItem[];
13
20
  isInvalid: boolean;
14
21
  isDisabled: boolean;
15
22
  hasBorder?: boolean;
@@ -26,7 +33,8 @@ interface RichTextEditorApiMachine<T extends PropTypes = PropTypes> {
26
33
  editor?: unknown;
27
34
  placeholder?: string;
28
35
  maxlength?: number;
29
- options?: Items[][];
36
+ options?: ToolbarOption[][];
37
+ suggestions?: MentionSuggestionItem[];
30
38
  isInvalid?: boolean;
31
39
  isDisabled?: boolean;
32
40
  rootProps?: T['element'];
@@ -46,7 +54,12 @@ interface RTEStyleProviderApiMachine<T extends PropTypes = PropTypes> {
46
54
  interface RTEStyleProviderState extends RteStyleProviderProps {
47
55
  }
48
56
  type RTEStyleProviderClasses = string;
49
- type Items = 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'blockquote' | 'bulletList' | 'orderedList' | 'textColor' | 'fillColor' | 'textLink' | 'align' | 'undo' | 'redo' | 'clear';
57
+ type Items = 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'blockquote' | 'bulletList' | 'orderedList' | 'textColor' | 'fillColor' | 'textLink' | 'align' | 'undo' | 'redo' | 'clear' | 'image' | 'file' | 'audio' | 'mention';
58
+ interface ToolbarOptionObject {
59
+ value: string;
60
+ tooltip?: string;
61
+ }
62
+ type ToolbarOption = Items | ToolbarOptionObject;
50
63
  interface ItemOptions {
51
64
  name?: string;
52
65
  tooltipLabel?: string;
@@ -54,5 +67,6 @@ interface ItemOptions {
54
67
  type?: 'text' | 'fill';
55
68
  editor?: unknown;
56
69
  }
70
+ type ActionTypes = 'image' | 'file' | 'audio';
57
71
 
58
- export { ItemOptions, Items, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps };
72
+ export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject };
package/dist/modules/rich-text-editor.types.d.ts CHANGED
@@ -4,12 +4,19 @@ import { Optional, PropTypes } from '@mekari/pixel3-utils';
4
4
  * Exported rich text editor types.
5
5
  */
6
6
 
7
+ interface MentionSuggestionItem {
8
+ id: string;
9
+ name: string;
10
+ description?: string;
11
+ avatar?: string;
12
+ }
7
13
  interface RichTextEditorProps {
8
14
  id?: string;
9
15
  value?: string;
10
16
  placeholder?: string;
11
17
  maxlength?: number;
12
- options?: Items[][];
18
+ options?: ToolbarOption[][];
19
+ suggestions?: MentionSuggestionItem[];
13
20
  isInvalid: boolean;
14
21
  isDisabled: boolean;
15
22
  hasBorder?: boolean;
@@ -26,7 +33,8 @@ interface RichTextEditorApiMachine<T extends PropTypes = PropTypes> {
26
33
  editor?: unknown;
27
34
  placeholder?: string;
28
35
  maxlength?: number;
29
- options?: Items[][];
36
+ options?: ToolbarOption[][];
37
+ suggestions?: MentionSuggestionItem[];
30
38
  isInvalid?: boolean;
31
39
  isDisabled?: boolean;
32
40
  rootProps?: T['element'];
@@ -46,7 +54,12 @@ interface RTEStyleProviderApiMachine<T extends PropTypes = PropTypes> {
46
54
  interface RTEStyleProviderState extends RteStyleProviderProps {
47
55
  }
48
56
  type RTEStyleProviderClasses = string;
49
- type Items = 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'blockquote' | 'bulletList' | 'orderedList' | 'textColor' | 'fillColor' | 'textLink' | 'align' | 'undo' | 'redo' | 'clear';
57
+ type Items = 'heading' | 'bold' | 'italic' | 'underline' | 'strike' | 'blockquote' | 'bulletList' | 'orderedList' | 'textColor' | 'fillColor' | 'textLink' | 'align' | 'undo' | 'redo' | 'clear' | 'image' | 'file' | 'audio' | 'mention';
58
+ interface ToolbarOptionObject {
59
+ value: string;
60
+ tooltip?: string;
61
+ }
62
+ type ToolbarOption = Items | ToolbarOptionObject;
50
63
  interface ItemOptions {
51
64
  name?: string;
52
65
  tooltipLabel?: string;
@@ -54,5 +67,6 @@ interface ItemOptions {
54
67
  type?: 'text' | 'fill';
55
68
  editor?: unknown;
56
69
  }
70
+ type ActionTypes = 'image' | 'file' | 'audio';
57
71
 
58
- export { ItemOptions, Items, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps };
72
+ export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject };
package/dist/rich-text-editor.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as vue_jsx_runtime from 'vue/jsx-runtime';
2
+ import { ToolbarOption, MentionSuggestionItem } from './modules/rich-text-editor.types.mjs';
2
3
  import * as vue from 'vue';
3
- import { Items } from './modules/rich-text-editor.types.mjs';
4
4
  import '@mekari/pixel3-utils';
5
5
 
6
6
  declare const MpRichTextEditor: vue.DefineComponent<{
@@ -17,7 +17,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
17
17
  type: vue.PropType<number | undefined>;
18
18
  };
19
19
  options: {
20
- type: vue.PropType<Items[][] | undefined>;
20
+ type: vue.PropType<ToolbarOption[][] | undefined>;
21
21
  };
22
22
  isInvalid: {
23
23
  type: vue.PropType<boolean>;
@@ -31,7 +31,11 @@ declare const MpRichTextEditor: vue.DefineComponent<{
31
31
  type: vue.PropType<boolean | undefined>;
32
32
  default: boolean;
33
33
  };
34
- }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus")[], "change" | "blur" | "focus", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
34
+ suggestions: {
35
+ type: vue.PropType<MentionSuggestionItem[] | undefined>;
36
+ default: () => never[];
37
+ };
38
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste")[], "change" | "blur" | "focus" | "action" | "paste", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
35
39
  id: {
36
40
  type: vue.PropType<string | undefined>;
37
41
  };
@@ -45,7 +49,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
45
49
  type: vue.PropType<number | undefined>;
46
50
  };
47
51
  options: {
48
- type: vue.PropType<Items[][] | undefined>;
52
+ type: vue.PropType<ToolbarOption[][] | undefined>;
49
53
  };
50
54
  isInvalid: {
51
55
  type: vue.PropType<boolean>;
@@ -59,11 +63,18 @@ declare const MpRichTextEditor: vue.DefineComponent<{
59
63
  type: vue.PropType<boolean | undefined>;
60
64
  default: boolean;
61
65
  };
66
+ suggestions: {
67
+ type: vue.PropType<MentionSuggestionItem[] | undefined>;
68
+ default: () => never[];
69
+ };
62
70
  }>> & {
71
+ onPaste?: ((...args: any[]) => any) | undefined;
63
72
  onFocus?: ((...args: any[]) => any) | undefined;
64
73
  onBlur?: ((...args: any[]) => any) | undefined;
65
74
  onChange?: ((...args: any[]) => any) | undefined;
75
+ onAction?: ((...args: any[]) => any) | undefined;
66
76
  }, {
77
+ suggestions: MentionSuggestionItem[] | undefined;
67
78
  isInvalid: boolean;
68
79
  isDisabled: boolean;
69
80
  hasBorder: boolean | undefined;
package/dist/rich-text-editor.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as vue_jsx_runtime from 'vue/jsx-runtime';
2
+ import { ToolbarOption, MentionSuggestionItem } from './modules/rich-text-editor.types.js';
2
3
  import * as vue from 'vue';
3
- import { Items } from './modules/rich-text-editor.types.js';
4
4
  import '@mekari/pixel3-utils';
5
5
 
6
6
  declare const MpRichTextEditor: vue.DefineComponent<{
@@ -17,7 +17,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
17
17
  type: vue.PropType<number | undefined>;
18
18
  };
19
19
  options: {
20
- type: vue.PropType<Items[][] | undefined>;
20
+ type: vue.PropType<ToolbarOption[][] | undefined>;
21
21
  };
22
22
  isInvalid: {
23
23
  type: vue.PropType<boolean>;
@@ -31,7 +31,11 @@ declare const MpRichTextEditor: vue.DefineComponent<{
31
31
  type: vue.PropType<boolean | undefined>;
32
32
  default: boolean;
33
33
  };
34
- }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus")[], "change" | "blur" | "focus", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
34
+ suggestions: {
35
+ type: vue.PropType<MentionSuggestionItem[] | undefined>;
36
+ default: () => never[];
37
+ };
38
+ }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste")[], "change" | "blur" | "focus" | "action" | "paste", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
35
39
  id: {
36
40
  type: vue.PropType<string | undefined>;
37
41
  };
@@ -45,7 +49,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
45
49
  type: vue.PropType<number | undefined>;
46
50
  };
47
51
  options: {
48
- type: vue.PropType<Items[][] | undefined>;
52
+ type: vue.PropType<ToolbarOption[][] | undefined>;
49
53
  };
50
54
  isInvalid: {
51
55
  type: vue.PropType<boolean>;
@@ -59,11 +63,18 @@ declare const MpRichTextEditor: vue.DefineComponent<{
59
63
  type: vue.PropType<boolean | undefined>;
60
64
  default: boolean;
61
65
  };
66
+ suggestions: {
67
+ type: vue.PropType<MentionSuggestionItem[] | undefined>;
68
+ default: () => never[];
69
+ };
62
70
  }>> & {
71
+ onPaste?: ((...args: any[]) => any) | undefined;
63
72
  onFocus?: ((...args: any[]) => any) | undefined;
64
73
  onBlur?: ((...args: any[]) => any) | undefined;
65
74
  onChange?: ((...args: any[]) => any) | undefined;
75
+ onAction?: ((...args: any[]) => any) | undefined;
66
76
  }, {
77
+ suggestions: MentionSuggestionItem[] | undefined;
67
78
  isInvalid: boolean;
68
79
  isDisabled: boolean;
69
80
  hasBorder: boolean | undefined;