Merge pull request #399 from qoretechnologies/feature/rich-text-editor

Rich Text Editor V1
qoretechnologies · Jul 18, 2024 · 05b84e6 · 05b84e6
2 parents 6170c28 + 5c00565
commit 05b84e6
Show file tree

Hide file tree

Showing 16 changed files with 781 additions and 129 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.47.4",
+  "version": "0.48.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -115,6 +115,9 @@
     "react-window": "^1.8.6",
     "scheduler": "^0.23.0",
     "shortid": "^2.2.16",
+    "slate": "^0.103.0",
+    "slate-history": "^0.100.0",
+    "slate-react": "^0.107.0",
     "styled-components": "^5.3.6",
     "thenby": "^1.3.4",
     "use-context-selector": "^1.4.1",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -321,7 +321,7 @@ export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButton
         minimal={!(content as IReqoreTagProps)?.effect?.gradient}
         {...(typeof content === 'string' || typeof content === 'number'
           ? { label: content }
-          : content)}
+          : (content as IReqoreTagProps))}
       />
     ),
     [props]

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -73,6 +73,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
   isDefaultOpen = false,
   onItemSelect,
   closeOnOutsideClick,
+  closeOnInsideClick,
   blur,
   closeOnAnyClick,
   delay,
@@ -100,7 +101,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
         style: buttonStyle || rest.style,
         disabled: !size(items) || (rest as any).disabled,
         className: `${(rest as any)?.className || ''} reqore-dropdown-control`,
-      }) as T,
+      } as T),
     [items, icon, rightIcon, buttonStyle, caretPosition, rest]
   );
 
@@ -127,6 +128,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
   return (
     <ReqorePopover
       closeOnOutsideClick={closeOnOutsideClick}
+      closeOnInsideClick={closeOnInsideClick}
       blur={blur}
       closeOnAnyClick={closeOnAnyClick}
       delay={delay}

diff --git a/src/components/Effect/index.tsx b/src/components/Effect/index.tsx
@@ -437,7 +437,7 @@ export const StyledEffect = styled.span`
 `;
 
 export const StyledTextEffect = styled(StyledEffect).attrs((props) => ({ ...props, isText: true }))`
-  display: ${({ inline }) => (inline ? 'inline' : 'inline-block')};
+  display: ${({ inline, block }) => (inline ? 'inline' : block ? 'block' : 'inline-block')};
 
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.gradient

diff --git a/src/components/Paragraph/index.tsx b/src/components/Paragraph/index.tsx
@@ -12,6 +12,8 @@ export interface IReqoreParagraphProps
     IWithReqoreEffect,
     IReqoreIntent {
   size?: TSizes | string;
+  block?: boolean;
+  inline?: boolean;
 }
 
 export const StyledParagraph = styled(StyledTextEffect)`
@@ -24,7 +26,18 @@ export const StyledParagraph = styled(StyledTextEffect)`
 
 export const ReqoreP = memo(
   forwardRef(
-    ({ size, children, customTheme, intent, className, ...props }: IReqoreParagraphProps, ref) => {
+    (
+      {
+        size,
+        children,
+        customTheme,
+        intent,
+        className,
+        block = true,
+        ...props
+      }: IReqoreParagraphProps,
+      ref
+    ) => {
       const theme = useReqoreTheme('main', customTheme, intent);
 
       return (
@@ -34,6 +47,7 @@ export const ReqoreP = memo(
           theme={theme}
           color={theme.text.color}
           intent={intent}
+          block={block}
           {...props}
           _size={size}
           className={`${className || ''} reqore-paragraph`}