@soul-refiner/design-system 1.1.9 → 1.1.11
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/dist/components/editor/editor.js +3 -8
- package/dist/components/editor/navbar/navbar.js +3 -3
- package/dist/components/editor/plate.d.ts +31 -13
- package/dist/components/editor/plate.js +1 -1
- package/dist/components/editor/plugins/buttons.d.ts +1 -1
- package/dist/components/editor/plugins/image.js +2 -16
- package/dist/components/editor/plugins/index.d.ts +4 -4
- package/dist/components/editor/plugins/index.js +0 -1
- package/dist/components/editor/plugins/list.d.ts +3 -3
- package/dist/components/editor/plugins/resetBlockType.d.ts +1 -1
- package/dist/components/editor/plugins/text.d.ts +7 -7
- package/dist/components/editor/simple_editor/navbar.js +2 -2
- package/dist/components/editor/simple_editor/plugins.d.ts +1 -1
- package/dist/components/editor/simple_editor/plugins.js +0 -1
- package/dist/components/editor/simple_editor/simple_editor.js +3 -8
- package/dist/components/input/search/search.d.ts +2 -1
- package/package.json +32 -26
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { createPlugins, Plate,
|
|
4
|
+
import { createPlugins, Plate, PlateContent } from '@udecode/plate';
|
|
5
5
|
import { DEFAULT_CONTENT, PLACEHOLDER } from './constants';
|
|
6
6
|
import { EditorBar } from './navbar';
|
|
7
7
|
import { plateUI } from './plate';
|
|
@@ -10,15 +10,10 @@ const plugins = createPlugins([...blocks, ...inline, ...marks, ...utils], {
|
|
|
10
10
|
components: plateUI,
|
|
11
11
|
});
|
|
12
12
|
export const Editor = ({ editable, handleUploadImage, onChange, previousContent = DEFAULT_CONTENT, }) => {
|
|
13
|
-
return (React.createElement(
|
|
13
|
+
return (React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
|
|
14
14
|
React.createElement(Wrapper, null,
|
|
15
15
|
editable && React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
|
|
16
|
-
React.createElement(
|
|
17
|
-
readOnly: !editable,
|
|
18
|
-
spellCheck: true,
|
|
19
|
-
autoFocus: true,
|
|
20
|
-
placeholder: PLACEHOLDER,
|
|
21
|
-
} }))));
|
|
16
|
+
React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: PLACEHOLDER, readOnly: !editable, spellCheck: true }))));
|
|
22
17
|
};
|
|
23
18
|
const Wrapper = styled.div `
|
|
24
19
|
* {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { getPluginType, insertImage, insertNodes, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState,
|
|
3
|
+
import { getPluginType, insertImage, insertNodes, toggleNodeType, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, useEditorState, } from '@udecode/plate';
|
|
4
4
|
import { Tooltip } from '../../';
|
|
5
5
|
import { Bold, FileCode, Headphones, Image, Italic, Link, ListOrdered, ListUnordered, Quote, Redo, Strikethrough, Underline, Undo, Video, } from '../../../icons';
|
|
6
6
|
import { ELEMENT_BLOCKQUOTE, ELEMENT_BUTTON, ELEMENT_OL, ELEMENT_UL, MARK_BOLD, MARK_CODE, MARK_ITALIC, MARK_STRIKETHROUGH, MARK_UNDERLINE, } from '../constants';
|
|
@@ -8,8 +8,8 @@ import { AlignmentDropdown } from './alignment_dropdown';
|
|
|
8
8
|
import { ButtonModal } from './button_modal';
|
|
9
9
|
import { StyleDropdown } from './style_dropdown';
|
|
10
10
|
export const EditorBar = ({ handleUploadImage }) => {
|
|
11
|
-
const editorRef =
|
|
12
|
-
const stateEditor =
|
|
11
|
+
const editorRef = useEditorRef('main');
|
|
12
|
+
const stateEditor = useEditorState();
|
|
13
13
|
const audioRef = React.useRef(null);
|
|
14
14
|
const imageRef = React.useRef(null);
|
|
15
15
|
const videoRef = React.useRef(null);
|
|
@@ -1,16 +1,34 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const plateUI: {
|
|
3
|
-
p: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
4
|
-
h1: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
5
|
-
h2: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
6
|
-
h3: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
7
|
-
h4: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
8
|
-
h5: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
9
|
-
h6: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
10
|
-
blockquote: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
11
|
-
a: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate").PlateElementProps<import("@udecode/
|
|
12
|
-
ol: import("react").
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
3
|
+
p: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
4
|
+
h1: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
5
|
+
h2: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
6
|
+
h3: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
7
|
+
h4: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
8
|
+
h5: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
9
|
+
h6: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
10
|
+
blockquote: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
11
|
+
a: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps<import("@udecode/slate").Value, import("@udecode/plate-link").TLinkElement>, "ref"> & import("react").RefAttributes<any>>;
|
|
12
|
+
ol: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
|
|
13
|
+
element: import("@udecode/slate").TElement;
|
|
14
|
+
} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
15
|
+
as?: import("react").ElementType<any> | undefined;
|
|
16
|
+
asChild?: boolean | undefined;
|
|
17
|
+
} & import("react").RefAttributes<any> & {
|
|
18
|
+
elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
|
|
19
|
+
} & {
|
|
20
|
+
variant: "ol" | "ul";
|
|
21
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
22
|
+
ul: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
|
|
23
|
+
element: import("@udecode/slate").TElement;
|
|
24
|
+
} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
25
|
+
as?: import("react").ElementType<any> | undefined;
|
|
26
|
+
asChild?: boolean | undefined;
|
|
27
|
+
} & import("react").RefAttributes<any> & {
|
|
28
|
+
elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
|
|
29
|
+
} & {
|
|
30
|
+
variant: "ol" | "ul";
|
|
31
|
+
}, "ref"> & import("react").RefAttributes<any>>;
|
|
32
|
+
img: ({ ...props }: import("@udecode/plate-utils").PlateElementProps<import("@udecode/slate").Value, import("@udecode/plate-media").TImageElement>) => import("react").JSX.Element;
|
|
33
|
+
button: import("react").ForwardRefExoticComponent<Omit<import("@udecode/plate-utils").PlateElementProps, "ref"> & import("react").RefAttributes<any>>;
|
|
16
34
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PlateElementProps } from '@udecode/plate';
|
|
3
3
|
export declare const Button: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
4
|
-
export declare const createButtonsPlugin: <OP =
|
|
4
|
+
export declare const createButtonsPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import {
|
|
3
|
+
import { Image, PlateElement, Resizable, useMediaState, } from '@udecode/plate';
|
|
4
4
|
import { useReadOnly } from 'slate-react';
|
|
5
5
|
const align = 'center';
|
|
6
6
|
export const ImageElement = ({ ...props }) => {
|
|
@@ -16,14 +16,10 @@ export const ImageElement = ({ ...props }) => {
|
|
|
16
16
|
marginLeft: 'auto',
|
|
17
17
|
marginRight: 'auto',
|
|
18
18
|
}, options: {
|
|
19
|
-
renderHandleLeft: (htmlProps) => React.createElement(Box, { ...htmlProps }),
|
|
20
|
-
renderHandleRight: (htmlProps) => React.createElement(Box, { ...htmlProps }),
|
|
21
19
|
align,
|
|
22
20
|
readOnly,
|
|
23
21
|
} },
|
|
24
|
-
React.createElement(Image, { ...nodeProps })),
|
|
25
|
-
React.createElement(Caption, { className: "HERE" },
|
|
26
|
-
React.createElement(Textarea, { "$readOnly": readOnly, placeholder: "Write a caption...", readOnly: readOnly }))),
|
|
22
|
+
React.createElement(Image, { ...nodeProps }))),
|
|
27
23
|
children));
|
|
28
24
|
};
|
|
29
25
|
const Figure = styled.figure `
|
|
@@ -35,13 +31,3 @@ const Figure = styled.figure `
|
|
|
35
31
|
width: 100%;
|
|
36
32
|
}
|
|
37
33
|
`;
|
|
38
|
-
const Textarea = styled(CaptionTextarea) `
|
|
39
|
-
width: 100%;
|
|
40
|
-
padding: 8px 16px;
|
|
41
|
-
box-sizing: border-box;
|
|
42
|
-
text-align: center;
|
|
43
|
-
resize: none;
|
|
44
|
-
outline: none;
|
|
45
|
-
border: 1px solid
|
|
46
|
-
${({ $readOnly }) => ($readOnly ? 'transparent' : 'var(--color-grey-9)')};
|
|
47
|
-
`;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* ELEMENT TYPES
|
|
3
3
|
*/
|
|
4
|
-
export declare const blocks: (import("@udecode/plate").PlatePlugin<
|
|
5
|
-
export declare const marks: (import("@udecode/plate").PlatePlugin<import("@udecode/
|
|
6
|
-
export declare const inline: (import("@udecode/plate").PlatePlugin<import("@udecode/
|
|
7
|
-
export declare const utils: (import("@udecode/plate").PlatePlugin<
|
|
4
|
+
export declare const blocks: (import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").HotkeyPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-code-block").CodeBlockPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-heading").HeadingsPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").ImagePlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-indent").IndentPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-indent-list").IndentListPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-media").MediaPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-reset-node").ResetNodePlugin<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-table").TablePlugin<import("@udecode/slate").Value>, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];
|
|
5
|
+
export declare const marks: (import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").ToggleMarkPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];
|
|
6
|
+
export declare const inline: (import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-indent").IndentPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-link").LinkPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];
|
|
7
|
+
export declare const utils: (import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-reset-node").ResetNodePlugin<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-break").ExitBreakPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-select").SelectOnBackspacePlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> | import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-break").SoftBreakPlugin, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>)[];
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PlateElementProps } from '@udecode/plate';
|
|
3
|
-
export declare const ListElement: ({ children, variant, ...props }: import("@udecode/plate").PlateRenderNodeProps<import("@udecode/
|
|
4
|
-
element: import("@udecode/
|
|
3
|
+
export declare const ListElement: ({ children, variant, ...props }: import("@udecode/plate-core").PlateRenderNodeProps<import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>> & Omit<import("slate-react").RenderElementProps, "element"> & {
|
|
4
|
+
element: import("@udecode/slate").TElement;
|
|
5
5
|
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
6
6
|
as?: React.ElementType<any> | undefined;
|
|
7
7
|
asChild?: boolean | undefined;
|
|
8
8
|
} & React.RefAttributes<any> & {
|
|
9
|
-
elementToAttributes?: ((element: import("@udecode/
|
|
9
|
+
elementToAttributes?: ((element: import("@udecode/slate").TElement) => any) | undefined;
|
|
10
10
|
} & {
|
|
11
11
|
variant: 'ul' | 'ol';
|
|
12
12
|
}) => React.JSX.Element;
|
|
@@ -2,7 +2,7 @@ export declare const resetBlockTypePlugin: {
|
|
|
2
2
|
options: {
|
|
3
3
|
rules: {
|
|
4
4
|
hotkey: string;
|
|
5
|
-
predicate: <V extends import("@udecode/
|
|
5
|
+
predicate: <V extends import("@udecode/slate").Value>(editor: import("@udecode/slate").TEditor<V>, options?: import("@udecode/slate").GetAboveNodeOptions<V> | undefined) => boolean;
|
|
6
6
|
types: string[];
|
|
7
7
|
defaultType: string;
|
|
8
8
|
}[];
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { PlateElementProps } from '@udecode/plate';
|
|
3
3
|
export declare const ParagraphElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
4
|
-
export declare const createParagraphPlugin: <OP =
|
|
4
|
+
export declare const createParagraphPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
5
5
|
export declare const HOneElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
6
|
-
export declare const createHOnePlugin: <OP =
|
|
6
|
+
export declare const createHOnePlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
7
7
|
export declare const HTwoElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
8
|
-
export declare const createHTwoPlugin: <OP =
|
|
8
|
+
export declare const createHTwoPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
9
9
|
export declare const HThreeElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
10
|
-
export declare const createHThreePlugin: <OP =
|
|
10
|
+
export declare const createHThreePlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
11
11
|
export declare const HFourElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
12
|
-
export declare const createHFourPlugin: <OP =
|
|
12
|
+
export declare const createHFourPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
13
13
|
export declare const HFiveElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
14
|
-
export declare const createHFivePlugin: <OP =
|
|
14
|
+
export declare const createHFivePlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
15
15
|
export declare const HSixElement: React.ForwardRefExoticComponent<Omit<PlateElementProps, "ref"> & React.RefAttributes<any>>;
|
|
16
|
-
export declare const createHSixPlugin: <OP =
|
|
16
|
+
export declare const createHSixPlugin: <OP = import("@udecode/utils").AnyObject, OV extends import("@udecode/slate").Value = import("@udecode/slate").Value, OE extends import("@udecode/plate-core").PlateEditor<OV> = import("@udecode/plate-core").PlateEditor<OV>>(override?: Partial<import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>> | undefined, overrideByKey?: import("@udecode/plate-core").OverrideByKey<OV, OE> | undefined) => import("@udecode/plate-core").PlatePlugin<import("@udecode/plate-core").NoInfer<OP>, OV, OE>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { insertImage, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState,
|
|
3
|
+
import { insertImage, useLinkToolbarButton, useLinkToolbarButtonState, useListToolbarButton, useListToolbarButtonState, useMarkToolbarButton, useMarkToolbarButtonState, useEditorRef, } from '@udecode/plate';
|
|
4
4
|
import { Tooltip } from '../../';
|
|
5
5
|
import { AlignmentDropdown } from '../navbar/alignment_dropdown';
|
|
6
6
|
import { StyleDropdown } from '../navbar/style_dropdown';
|
|
7
7
|
import { Bold, Image, Italic, Link, ListOrdered, ListUnordered, Redo, Underline, Undo, } from '../../../icons';
|
|
8
8
|
import { ELEMENT_OL, ELEMENT_UL, MARK_BOLD, MARK_ITALIC, MARK_UNDERLINE, } from '../constants';
|
|
9
9
|
export const EditorBar = ({ handleUploadImage }) => {
|
|
10
|
-
const editorRef =
|
|
10
|
+
const editorRef = useEditorRef('main');
|
|
11
11
|
const imageRef = React.useRef(null);
|
|
12
12
|
const boldState = useMarkToolbarButtonState({ nodeType: MARK_BOLD });
|
|
13
13
|
const { props: { pressed: currBold, onClick: handleBold }, } = useMarkToolbarButton(boldState);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const plugins: import("@udecode/plate").PlatePlugin<
|
|
1
|
+
export declare const plugins: import("@udecode/plate-core").PlatePlugin<import("@udecode/utils").AnyObject, import("@udecode/slate").Value, import("@udecode/plate-core").PlateEditor<import("@udecode/slate").Value>>[];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { Plate,
|
|
4
|
+
import { Plate, PlateContent } from '@udecode/plate';
|
|
5
5
|
import { plugins } from './plugins';
|
|
6
6
|
import { EditorBar } from './navbar';
|
|
7
7
|
export const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholder = '', previousContent = [
|
|
@@ -14,16 +14,11 @@ export const SimpleEditor = ({ editable, handleUploadImage, onChange, placeholde
|
|
|
14
14
|
],
|
|
15
15
|
},
|
|
16
16
|
], }) => {
|
|
17
|
-
return (React.createElement(
|
|
17
|
+
return (React.createElement(Plate, { id: "main", initialValue: previousContent, onChange: onChange, plugins: plugins },
|
|
18
18
|
React.createElement(Wrapper, null,
|
|
19
19
|
editable && React.createElement(EditorBar, { handleUploadImage: handleUploadImage }),
|
|
20
20
|
React.createElement(InnerWrapper, null,
|
|
21
|
-
React.createElement(
|
|
22
|
-
readOnly: !editable,
|
|
23
|
-
spellCheck: true,
|
|
24
|
-
autoFocus: true,
|
|
25
|
-
placeholder: placeholder,
|
|
26
|
-
} })))));
|
|
21
|
+
React.createElement(PlateContent, { id: "main", autoFocus: true, placeholder: placeholder, readOnly: !editable, spellCheck: true })))));
|
|
27
22
|
};
|
|
28
23
|
const InnerWrapper = styled.div `
|
|
29
24
|
& > div {
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
type NativeProps = Pick<React.HTMLAttributes<HTMLInputElement>, '
|
|
2
|
+
type NativeProps = Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onSubmit'>;
|
|
3
3
|
type SearchSize = 'collapsed' | 'small' | 'medium' | 'large';
|
|
4
4
|
export interface SearchProps extends NativeProps {
|
|
5
5
|
dropdownFilter?: React.ReactElement;
|
|
6
6
|
onClearText?: () => void;
|
|
7
|
+
placeholder?: string;
|
|
7
8
|
size: SearchSize;
|
|
8
9
|
sx?: string;
|
|
9
10
|
value: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soul-refiner/design-system",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.11",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -24,25 +24,25 @@
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@storybook/addon-essentials": "
|
|
28
|
-
"@storybook/addon-interactions": "
|
|
29
|
-
"@storybook/addon-links": "
|
|
30
|
-
"@storybook/addons": "
|
|
31
|
-
"@storybook/blocks": "
|
|
32
|
-
"@storybook/nextjs": "
|
|
33
|
-
"@storybook/react": "
|
|
34
|
-
"@storybook/testing-library": "
|
|
27
|
+
"@storybook/addon-essentials": "~7.2.1",
|
|
28
|
+
"@storybook/addon-interactions": "~7.2.1",
|
|
29
|
+
"@storybook/addon-links": "~7.2.1",
|
|
30
|
+
"@storybook/addons": "~7.2.1",
|
|
31
|
+
"@storybook/blocks": "~7.2.1",
|
|
32
|
+
"@storybook/nextjs": "~7.5.3",
|
|
33
|
+
"@storybook/react": "~7.2.1",
|
|
34
|
+
"@storybook/testing-library": "~0.2.0",
|
|
35
35
|
"@types/react-dom": "18.2.0",
|
|
36
|
-
"@types/styled-components": "
|
|
37
|
-
"chromatic": "
|
|
38
|
-
"husky": "
|
|
39
|
-
"prettier": "
|
|
40
|
-
"pretty-quick": "
|
|
41
|
-
"prop-types": "
|
|
42
|
-
"storybook": "
|
|
43
|
-
"tsconfig-paths-webpack-plugin": "
|
|
44
|
-
"typescript": "
|
|
45
|
-
"webpack": "
|
|
36
|
+
"@types/styled-components": "~5.1.26",
|
|
37
|
+
"chromatic": "~6.17.4",
|
|
38
|
+
"husky": "~8.0.0",
|
|
39
|
+
"prettier": "~2.8.8",
|
|
40
|
+
"pretty-quick": "~3.1.3",
|
|
41
|
+
"prop-types": "~15.8.1",
|
|
42
|
+
"storybook": "~7.5.3",
|
|
43
|
+
"tsconfig-paths-webpack-plugin": "~4.0.1",
|
|
44
|
+
"typescript": "~5.0.4",
|
|
45
|
+
"webpack": "~5.89.0"
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
48
48
|
"build": "tsc -p tsconfig.build.json",
|
|
@@ -54,8 +54,11 @@
|
|
|
54
54
|
},
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@emoji-mart/react": "~1.1.1",
|
|
57
|
-
"@udecode/
|
|
57
|
+
"@udecode/cn": "~29.0.1",
|
|
58
|
+
"@udecode/plate": "~30.0.0",
|
|
59
|
+
"class-variance-authority": "~0.7.0",
|
|
58
60
|
"emoji-mart": "~5.5.2",
|
|
61
|
+
"lucide-react": "~0.307.0",
|
|
59
62
|
"next": "~13.5",
|
|
60
63
|
"react": "18.2.0",
|
|
61
64
|
"react-dnd": "~16.0.1",
|
|
@@ -65,17 +68,20 @@
|
|
|
65
68
|
"react-player": "~2.13.0",
|
|
66
69
|
"react-tooltip": "~5.18.0",
|
|
67
70
|
"scheduler": "~0.23.0",
|
|
68
|
-
"slate": "~0.
|
|
69
|
-
"slate-history": "~0.
|
|
70
|
-
"slate-hyperscript": "~0.
|
|
71
|
-
"slate-react": "~0.
|
|
72
|
-
"styled-components": "~6.1.
|
|
71
|
+
"slate": "~0.101.5",
|
|
72
|
+
"slate-history": "~0.100.0",
|
|
73
|
+
"slate-hyperscript": "~0.100.0",
|
|
74
|
+
"slate-react": "~0.101.5",
|
|
75
|
+
"styled-components": "~6.1.8",
|
|
76
|
+
"tailwind-merge": "~2.2.0",
|
|
77
|
+
"tailwindcss": "~3.4.1",
|
|
78
|
+
"tailwindcss-animate": "~1.0.7"
|
|
73
79
|
},
|
|
74
80
|
"peerDependencies": {
|
|
75
81
|
"next": "~13.5",
|
|
76
82
|
"react": "~18.2.0",
|
|
77
83
|
"react-dom": "~18.2.0",
|
|
78
84
|
"react-player": "~2.13.0",
|
|
79
|
-
"styled-components": "
|
|
85
|
+
"styled-components": "6.1.1"
|
|
80
86
|
}
|
|
81
87
|
}
|