@yoopta/editor 4.8.5-rc.8 → 4.9.0
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.
- package/README.md +46 -24
- package/dist/components/Block/Block.d.ts +2 -1
- package/dist/components/Block/Block.d.ts.map +1 -1
- package/dist/components/Block/FloatingBlockActions.d.ts +14 -0
- package/dist/components/Block/FloatingBlockActions.d.ts.map +1 -0
- package/dist/components/Block/hooks.d.ts +838 -0
- package/dist/components/Block/hooks.d.ts.map +1 -1
- package/dist/components/Editor/RenderBlocks.d.ts.map +1 -1
- package/dist/editor/blocks/focusBlock.d.ts +1 -1
- package/dist/editor/blocks/focusBlock.d.ts.map +1 -1
- package/dist/editor/types.d.ts +23 -19
- package/dist/editor/types.d.ts.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/plugins/SlateEditorComponent.d.ts.map +1 -1
- package/dist/utils/editorBuilders.d.ts.map +1 -1
- package/dist/utils/throttle.d.ts +8 -0
- package/dist/utils/throttle.d.ts.map +1 -0
- package/package.json +2 -2
- package/dist/components/Block/BlockActions.d.ts +0 -11
- package/dist/components/Block/BlockActions.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -20,8 +20,11 @@ const plugins = [Paragraph];
|
|
|
20
20
|
const Editor = () => {
|
|
21
21
|
// create instance
|
|
22
22
|
const editor: YooEditor = useMemo(() => createYooptaEditor(), []);
|
|
23
|
+
const [value, setValue] = useState();
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
const onChange = (newValue) => setValue(newValue);
|
|
26
|
+
|
|
27
|
+
return <YooptaEditor editor={editor} plugins={plugins} value={value} onChange={onChange} />;
|
|
25
28
|
};
|
|
26
29
|
```
|
|
27
30
|
|
|
@@ -76,40 +79,48 @@ type Props = {
|
|
|
76
79
|
### Editor API
|
|
77
80
|
|
|
78
81
|
```tsx
|
|
79
|
-
export type YooEditor
|
|
82
|
+
export type YooEditor = {
|
|
80
83
|
id: string;
|
|
81
|
-
// Method to check if editor is empty
|
|
82
|
-
// [NOTE] - Empty editor means the next: If the Editor has one block with the default type "Paragraph", and this block does not contain text content
|
|
83
|
-
isEmpty: () => boolean;
|
|
84
84
|
readOnly: boolean;
|
|
85
|
-
|
|
85
|
+
isEmpty: () => boolean;
|
|
86
|
+
|
|
87
|
+
// block handlers
|
|
88
|
+
insertBlock: WithoutFirstArg<typeof insertBlock>;
|
|
89
|
+
updateBlock: WithoutFirstArg<typeof updateBlock>;
|
|
90
|
+
deleteBlock: WithoutFirstArg<typeof deleteBlock>;
|
|
91
|
+
duplicateBlock: WithoutFirstArg<typeof duplicateBlock>;
|
|
92
|
+
toggleBlock: WithoutFirstArg<typeof toggleBlock>;
|
|
93
|
+
increaseBlockDepth: WithoutFirstArg<typeof increaseBlockDepth>;
|
|
94
|
+
decreaseBlockDepth: WithoutFirstArg<typeof decreaseBlockDepth>;
|
|
95
|
+
moveBlock: WithoutFirstArg<typeof moveBlock>;
|
|
96
|
+
focusBlock: WithoutFirstArg<typeof focusBlock>;
|
|
97
|
+
mergeBlock: () => void;
|
|
86
98
|
splitBlock: (options?: SplitBlockOptions) => void;
|
|
87
|
-
updateBlock: (id: string, data: Partial<YooptaBlockData>) => void;
|
|
88
|
-
deleteBlock: (options?: DeleteBlockOptions) => void;
|
|
89
|
-
duplicateBlock: (options: DuplicateBlockOptions) => void;
|
|
90
|
-
toggleBlock: (toBlockType: string, options?: ToggleBlockOptions) => void;
|
|
91
|
-
increaseBlockDepth: (options?: BlockDepthOptions) => void;
|
|
92
|
-
decreaseBlockDepth: (options?: BlockDepthOptions) => void;
|
|
93
|
-
moveBlock: (blockId: string, to: YooptaPath) => void;
|
|
94
|
-
focusBlock: (id: string, options?: FocusBlockOptions) => void;
|
|
95
99
|
getBlock: (options: GetBlockOptions) => YooptaBlockData | null;
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
getEditorValue: () => TNodes;
|
|
99
|
-
setEditorValue: (value: YooptaContentValue) => void;
|
|
100
|
+
|
|
101
|
+
// path handlers
|
|
100
102
|
path: YooptaPath;
|
|
101
|
-
setPath: (path: YooptaPath
|
|
103
|
+
setPath: (path: YooptaPath) => void;
|
|
104
|
+
|
|
105
|
+
children: YooptaContentValue;
|
|
106
|
+
getEditorValue: () => YooptaContentValue;
|
|
107
|
+
setEditorValue: WithoutFirstArg<typeof setEditorValue>;
|
|
102
108
|
blockEditorsMap: YooptaPluginsEditorMap;
|
|
103
109
|
blocks: YooptaBlocks;
|
|
104
110
|
formats: YooptaFormats;
|
|
105
111
|
shortcuts: Record<string, YooptaBlock>;
|
|
106
|
-
plugins: Record<string, Plugin<string, unknown>>;
|
|
112
|
+
plugins: Record<string, Plugin<Record<string, SlateElement>, unknown>>;
|
|
113
|
+
commands: Record<string, (...args: any[]) => any>;
|
|
114
|
+
|
|
115
|
+
// core handlers
|
|
116
|
+
applyTransforms: WithoutFirstArg<typeof applyTransforms>;
|
|
117
|
+
batchOperations: (fn: () => void) => void;
|
|
107
118
|
|
|
108
119
|
// events handlers
|
|
109
|
-
on: (event:
|
|
110
|
-
once: (event:
|
|
111
|
-
off: (event:
|
|
112
|
-
emit: (event:
|
|
120
|
+
on: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
|
|
121
|
+
once: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
|
|
122
|
+
off: <K extends keyof YooptaEventsMap>(event: K, fn: (payload: YooptaEventsMap[K]) => void) => void;
|
|
123
|
+
emit: <K extends keyof YooptaEventsMap>(event: K, payload: YooptaEventsMap[K]) => void;
|
|
113
124
|
|
|
114
125
|
// focus handlers
|
|
115
126
|
isFocused: () => boolean;
|
|
@@ -121,6 +132,17 @@ export type YooEditor<TNodes> = {
|
|
|
121
132
|
getMarkdown: (content: YooptaContentValue) => string;
|
|
122
133
|
getPlainText: (content: YooptaContentValue) => string;
|
|
123
134
|
|
|
135
|
+
// history
|
|
136
|
+
historyStack: Record<HistoryStackName, HistoryStack[]>;
|
|
137
|
+
isSavingHistory: WithoutFirstArg<typeof YooptaHistory.isSavingHistory>;
|
|
138
|
+
isMergingHistory: WithoutFirstArg<typeof YooptaHistory.isMergingHistory>;
|
|
139
|
+
withoutSavingHistory: WithoutFirstArg<typeof YooptaHistory.withoutSavingHistory>;
|
|
140
|
+
withoutMergingHistory: WithoutFirstArg<typeof YooptaHistory.withoutMergingHistory>;
|
|
141
|
+
withMergingHistory: WithoutFirstArg<typeof YooptaHistory.withMergingHistory>;
|
|
142
|
+
withSavingHistory: WithoutFirstArg<typeof YooptaHistory.withSavingHistory>;
|
|
143
|
+
redo: WithoutFirstArg<typeof YooptaHistory.redo>;
|
|
144
|
+
undo: WithoutFirstArg<typeof YooptaHistory.undo>;
|
|
145
|
+
|
|
124
146
|
// ref to editor element
|
|
125
147
|
refElement: HTMLElement | null;
|
|
126
148
|
};
|
|
@@ -4,7 +4,8 @@ type BlockProps = {
|
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
block: YooptaBlockData;
|
|
6
6
|
blockId: string;
|
|
7
|
+
onActiveDragHandleChange: (props: any) => void;
|
|
7
8
|
};
|
|
8
|
-
declare const Block: ({ children, block, blockId }: BlockProps) => import("react/jsx-runtime").JSX.Element
|
|
9
|
+
declare const Block: React.MemoExoticComponent<({ children, block, blockId, onActiveDragHandleChange }: BlockProps) => import("react/jsx-runtime").JSX.Element>;
|
|
9
10
|
export { Block };
|
|
10
11
|
//# sourceMappingURL=Block.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Block/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Block/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,KAAK,qFAAiE,UAAU,6CAmCpF,CAAC;AAIH,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { YooEditor } from '../../editor/types';
|
|
3
|
+
type dragHandleProps = {
|
|
4
|
+
attributes: any;
|
|
5
|
+
listeners: any;
|
|
6
|
+
setActivatorNodeRef: any;
|
|
7
|
+
};
|
|
8
|
+
type FloatingBlockActionsProps = {
|
|
9
|
+
editor: YooEditor;
|
|
10
|
+
dragHandleProps: dragHandleProps | null;
|
|
11
|
+
};
|
|
12
|
+
export declare const FloatingBlockActions: import("react").MemoExoticComponent<({ editor, dragHandleProps }: FloatingBlockActionsProps) => import("react/jsx-runtime").JSX.Element>;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=FloatingBlockActions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FloatingBlockActions.d.ts","sourceRoot":"","sources":["../../../src/components/Block/FloatingBlockActions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAmB,MAAM,oBAAoB,CAAC;AAehE,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,mBAAmB,EAAE,GAAG,CAAC;CAC1B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAC;IAClB,eAAe,EAAE,eAAe,GAAG,IAAI,CAAC;CACzC,CAAC;AAoBF,eAAO,MAAM,oBAAoB,oEAAsC,yBAAyB,6CAsL9F,CAAC"}
|