Landing page (#200)

* landing page

package.json

@@ -9,7 +9,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --parallel --ignore development",
     "build": "yarn clean && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",
     "serve": "yarn lerna run dev --scope=development",

packages/development/src/pages/dev/index.tsx

@@ -39,22 +39,8 @@ const BasicExample = () => {
     console.log('EDITOR DATA', editorData);
   };
 
-  useEffect(() => {
-    setTimeout(() => {
-      Elements.insertElementText(editor, 'Super text', {
-        blockId: '7453ac69-0d2a-4a27-ac48-21de5021c432',
-      });
-    }, 1000);
-  }, [editor]);
-
   return (
     <>
-      {/* <div>
-        <MarkdownPreview />
-      </div> */}
-      {/* <div>
-        <HtmlPreview />
-      </div> */}
       <div className="px-[100px] max-w-[900px] mx-auto my-10 flex flex-col items-center" ref={rectangleSelectionRef}>
         <YooptaEditor
           editor={editor}
@@ -65,6 +51,10 @@ const BasicExample = () => {
           placeholder="Type / to open menu"
           tools={TOOLS}
           readOnly={readOnly}
+          blockActionButtons={{
+            // drag: null,
+            plus: null,
+          }}
           value={{
             '7453ac69-0d2a-4a27-ac48-21de5021c432': {
               id: '7453ac69-0d2a-4a27-ac48-21de5021c432',
@@ -328,12 +318,9 @@ const BasicExample = () => {
 
 const Buttons = ({ onSubmit }: any) => {
   const editor = useYooptaEditor();
-  const isFocused = useYooptaFocused();
-  const [mdValue, setMdValue] = useState('');
 
   return (
     <div className="flex mt-4 mb-8">
-      <textarea value={mdValue} onChange={(e) => setMdValue(e.target.value)} />
       <button
         className="bg-[#007aff] mr-4 text-[#fff] px-4 py-2 rounded-md"
         onClick={() => {

web/next-example/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

web/next-example/public/manifest.json

@@ -0,0 +1 @@
+{}

web/next-example/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

web/next-example/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "Yoopta Editor",
+  "short_name": "Yoopta Editor",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

web/next-example/src/components/LandingEditor/LandingEditor.tsx

@@ -0,0 +1,121 @@
+import YooptaEditor, { createYooptaEditor, Elements, YooEditor } from '@yoopta/editor';
+
+import Paragraph from '@yoopta/paragraph';
+import Blockquote from '@yoopta/blockquote';
+import Embed from '@yoopta/embed';
+import Image from '@yoopta/image';
+import Link from '@yoopta/link';
+import Callout from '@yoopta/callout';
+import Video from '@yoopta/video';
+import File from '@yoopta/file';
+import Accordion from '@yoopta/accordion';
+import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
+import { Bold, Italic, CodeMark, Underline, Strike, Highlight } from '@yoopta/marks';
+import { HeadingOne, HeadingThree, HeadingTwo } from '@yoopta/headings';
+import Code from '@yoopta/code';
+import ActionMenuList, { DefaultActionMenuRender } from '@yoopta/action-menu-list';
+import Toolbar, { DefaultToolbarRender } from '@yoopta/toolbar';
+import LinkTool, { DefaultLinkToolRender } from '@yoopta/link-tool';
+
+import { uploadToCloudinary } from '@/utils/cloudinary';
+import { value } from './value';
+
+const plugins = [
+  Paragraph,
+  Accordion,
+  HeadingOne,
+  HeadingTwo,
+  HeadingThree,
+  Blockquote.extend({
+    options: {
+      HTMLAttributes: {
+        className: 'yoopta-main-page-blockquote',
+        spellCheck: true,
+      },
+      shortcuts: ['>', 'bq'],
+    },
+  }),
+  Callout,
+  NumberedList,
+  BulletedList,
+  TodoList,
+  Code,
+  Link,
+  Embed,
+  Image.extend({
+    options: {
+      async onUpload(file) {
+        const data = await uploadToCloudinary(file, 'image');
+
+        return {
+          src: data.secure_url,
+          alt: 'cloudinary',
+          sizes: {
+            width: data.width,
+            height: data.height,
+          },
+        };
+      },
+    },
+  }),
+  Video.extend({
+    options: {
+      onUpload: async (file) => {
+        const data = await uploadToCloudinary(file, 'video');
+        return {
+          src: data.secure_url,
+          alt: 'cloudinary',
+          sizes: {
+            width: data.width,
+            height: data.height,
+          },
+        };
+      },
+    },
+  }),
+  File.extend({
+    options: {
+      onUpload: async (file) => {
+        const response = await uploadToCloudinary(file, 'auto');
+        return { src: response.url };
+      },
+    },
+  }),
+];
+
+const TOOLS = {
+  ActionMenu: {
+    render: DefaultActionMenuRender,
+    tool: ActionMenuList,
+  },
+  Toolbar: {
+    render: DefaultToolbarRender,
+    tool: Toolbar,
+  },
+  LinkTool: {
+    render: DefaultLinkToolRender,
+    tool: LinkTool,
+  },
+};
+
+const MARKS = [Bold, Italic, CodeMark, Underline, Strike, Highlight];
+
+type Props = {
+  editor: YooEditor;
+  selectionRef: React.RefObject<HTMLDivElement>;
+};
+
+export const LandingEditor = ({ selectionRef, editor }: Props) => {
+  return (
+    <YooptaEditor
+      editor={editor}
+      plugins={plugins}
+      marks={MARKS}
+      tools={TOOLS}
+      selectionBoxRoot={selectionRef}
+      value={value}
+      autoFocus={false}
+      className="py-4 !h-full md:max-w-none max-w-[100vw] md:px-0 px-2"
+    />
+  );
+};