added docs for starter-kit

yoopta-editor · Jul 21, 2024 · bf82748 · bf82748
1 parent 1eedd61
commit bf82748
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,7 @@ All of this is customizable, extensible, and easy to set up!
 
   - [**@yoopta/editor**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/editor/README.md)
   - [**@yoopta/exports**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/exports/README.md)
+  - [**@yoopta/starter-kit**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/starter-kit/README.md)
 
 - Plugins
 

diff --git a/packages/core/starter-kit/README.md b/packages/core/starter-kit/README.md
@@ -1,6 +1,7 @@
 # StarterKit plugin
 
-StarterKit is plugin for Yoopta-Editor
+StarterKit is package for quick start with full setup
+It includes all plugins, tools and marks
 
 ### Installation
 
@@ -13,9 +14,69 @@ yarn add @yoopta/starter-kit
 ```jsx
 import StarterKit from '@yoopta/starter-kit';
 
-const plugins = [StarterKit];
-
 const Editor = () => {
-  return <YooptaEditor plugins={plugins} />;
+  const [value, setValue] = useState<YooptaContentValue>();
+  const selectionRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <div
+      ref={selectionRef}
+      className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center"
+    >
+      <YooptaStarterKit
+        value={value}
+        onChange={(data) => setValue(data)}
+        style={{ width: 650 }}
+        selectionRef={selectionRef}
+        placeholder="Start typing here..."
+        media={{
+          imageUpload: async (file) => {
+            const data = await uploadToCloudinary(file, 'image');
+
+            return {
+              src: data.secure_url,
+              alt: 'cloudinary',
+              sizes: {
+                width: data.width,
+                height: data.height,
+              },
+            };
+          },
+          fileUpload: async (file) => {
+            const response = await uploadToCloudinary(file, 'auto');
+            return { src: response.url, name: response.name };
+          },
+          videoUpload: async (file) => {
+            const data = await uploadToCloudinary(file, 'video');
+            return {
+              src: data.secure_url,
+              alt: 'cloudinary',
+              sizes: {
+                width: data.width,
+                height: data.height,
+              },
+            };
+          },
+        }}
+      />
+    </div>
+  );
+};
+```
+
+### Props
+
+```ts
+type StarterKitProps = {
+  id?: string;
+  value?: YooptaContentValue;
+  onChange?: (value: YooptaContentValue) => void;
+  readOnly?: boolean;
+  autoFocus?: boolean;
+  className?: string;
+  placeholder?: string;
+  style?: CSSProperties;
+  selectionRef?: React.RefObject<HTMLDivElement> | false;
+  media?: MediaUploadsFn;
 };
 ```
diff --git a/web/next-example/package.json b/web/next-example/package.json
@@ -23,25 +23,25 @@
     "@types/js-beautify": "^1.14.3",
     "@uiw/codemirror-theme-vscode": "^4.21.24",
     "@uiw/react-codemirror": "^4.21.25",
-    "@yoopta/accordion": "^4.6.5-rc.3",
-    "@yoopta/action-menu-list": "^4.6.5-rc.3",
-    "@yoopta/blockquote": "^4.6.5-rc.3",
-    "@yoopta/callout": "^4.6.5-rc.3",
-    "@yoopta/code": "^4.6.5-rc.3",
-    "@yoopta/editor": "^4.6.5-rc.3",
-    "@yoopta/embed": "^4.6.5-rc.3",
-    "@yoopta/exports": "^4.6.5-rc.3",
-    "@yoopta/file": "^4.6.5-rc.3",
-    "@yoopta/headings": "^4.6.5-rc.3",
-    "@yoopta/image": "^4.6.5-rc.3",
-    "@yoopta/link": "^4.6.5-rc.3",
-    "@yoopta/link-tool": "^4.6.5-rc.3",
-    "@yoopta/lists": "^4.6.5-rc.3",
-    "@yoopta/marks": "^4.6.5-rc.3",
-    "@yoopta/paragraph": "^4.6.5-rc.3",
-    "@yoopta/starter-kit": "^4.6.5-rc.3",
-    "@yoopta/toolbar": "^4.6.5-rc.3",
-    "@yoopta/video": "^4.6.5-rc.3",
+    "@yoopta/accordion": "^4.6.5",
+    "@yoopta/action-menu-list": "^4.6.5",
+    "@yoopta/blockquote": "^4.6.5",
+    "@yoopta/callout": "^4.6.5",
+    "@yoopta/code": "^4.6.5",
+    "@yoopta/editor": "^4.6.5",
+    "@yoopta/embed": "^4.6.5",
+    "@yoopta/exports": "^4.6.5",
+    "@yoopta/file": "^4.6.5",
+    "@yoopta/headings": "^4.6.5",
+    "@yoopta/image": "^4.6.5",
+    "@yoopta/link": "^4.6.5",
+    "@yoopta/link-tool": "^4.6.5",
+    "@yoopta/lists": "^4.6.5",
+    "@yoopta/marks": "^4.6.5",
+    "@yoopta/paragraph": "^4.6.5",
+    "@yoopta/starter-kit": "^4.6.5",
+    "@yoopta/toolbar": "^4.6.5",
+    "@yoopta/video": "^4.6.5",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.0",

diff --git a/web/next-example/src/components/examples/withStarterKit/index.tsx b/web/next-example/src/components/examples/withStarterKit/index.tsx
@@ -13,6 +13,7 @@ const WithStarterKit = () => {
       className="md:py-[100px] md:pl-[200px] md:pr-[80px] px-[20px] pt-[80px] pb-[40px] flex justify-center"
     >
       <YooptaStarterKit
+        id="starter-kit"
         value={value}
         onChange={(data) => setValue(data)}
         style={{ width: 650 }}

diff --git a/web/next-example/src/components/ui/sheet.tsx b/web/next-example/src/components/ui/sheet.tsx
@@ -32,7 +32,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'overflow-y-auto fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
@@ -135,7 +135,7 @@ const Sheet = ({ items, path, title, description }: SheetProps) => {
   }
 
   return (
-    <div className="fixed left-0 top-0 h-auto px-4 py-4 border-r border-b flex items-center w-[100vw] bg-white md:bg-transparent md:w-auto md:h-full md:block">
+    <div className="overflow-auto fixed left-0 top-0 h-auto px-4 py-4 border-r border-b flex items-center w-[100vw] bg-white md:bg-transparent md:w-auto md:h-full md:block">
       <SheetRoot defaultOpen={!isMobile} open={isOpen} {...rootProps}>
         <SheetTrigger onClick={() => onOpenChange((p) => !p)}>
           <Sidebar size={24} />
@@ -167,7 +167,7 @@ const Sheet = ({ items, path, title, description }: SheetProps) => {
                     <div key={item.id}>
                       <Link
                         href={item.href}
-                        className="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground transition-all"
+                        className="group flex w-full items-center text-start rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground transition-all"
                         onClick={() => setTheme('light')}
                         style={isCurrent ? { color: '#007aff', textDecoration: 'underline' } : undefined}
                       >

diff --git a/web/next-example/src/pages/examples/[example].tsx b/web/next-example/src/pages/examples/[example].tsx
@@ -18,7 +18,7 @@ import withLargeDocuments from '@/components/examples/withLargeDocuments';
 import withChatSlack from '@/components/examples/withChatSlack';
 // import withCraftExample from '@/components/examples/withCraftExample';
 import withCustomStyles from '@/components/examples/withCustomStyles';
-import withEditorFocusBlur from '@/components/examples/withEditorFocusBlur';
+// import withEditorFocusBlur from '@/components/examples/withEditorFocusBlur';
 import withCustomRenders from '@/components/examples/withCustomRenders';
 import withMultiPageEditors from '@/components/examples/withMultiPageEditors';
 import WithStarterKit from '@/components/examples/withStarterKit';
@@ -37,9 +37,10 @@ export const EXAMPLES: Record<string, () => React.JSX.Element> = {
   withNotionActionMenu,
   withExports,
   withCustomRenders,
+  withExtendedPlugin,
+  WithStarterKit,
   withDarkTheme,
   withMediaAndVoids,
-  withExtendedPlugin,
   withReadOnly,
   withEditorControl,
   // withCustomHTMLAttributes,
@@ -49,9 +50,8 @@ export const EXAMPLES: Record<string, () => React.JSX.Element> = {
   withCustomStyles,
   withLargeDocuments,
   withMultiPageEditors,
-  WithStarterKit,
   withChatSlack,
-  withEditorFocusBlur,
+  // withEditorFocusBlur,
   // withCraftExample,
   // withOffline,
   // withCustomComponent,
@@ -130,10 +130,10 @@ const EXAMPLE_MAP: Record<keyof typeof EXAMPLES, any> = {
     title: 'Migration Guide from v2 to v4',
     description: '',
   },
-  withEditorFocusBlur: {
-    title: 'Example with focus/blur',
-    description: '',
-  },
+  // withEditorFocusBlur: {
+  //   title: 'Example with focus/blur',
+  //   description: '',
+  // },
   withExports: {
     title: 'HTML/Markdown exports',
     description: '',
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,6 +47,7 @@ All of this is customizable, extensible, and easy to set up! @@
       - [**@yoopta/editor**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/editor/README.md)
       - [**@yoopta/exports**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/exports/README.md)
+      - [**@yoopta/starter-kit**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/starter-kit/README.md)
     - Plugins
@@ Expand Down @@