Feat/slash command

.changeset/pre.json

@@ -5,7 +5,6 @@
     "web": "1.0.0",
     "eslint-config-custom": "0.0.0",
     "outstatic": "1.0.0-canary.4",
-    "tailwind-config": "0.0.0",
     "tsconfig": "0.0.0"
   },
   "changesets": []

.changeset/tasty-mirrors-check.md

@@ -0,0 +1,5 @@
+---
+'outstatic': patch
+---
+
+Add slash command menu

.lintstagedrc.js

@@ -1,14 +1,11 @@
 module.exports = {
   '(!README)*.(md|json|graphql)': 'prettier --write',
   ...[
-    'apps/dev13',
     'apps/dev',
-    'apps/dev13',
     'apps/web',
     'examples/blog',
     'packages/eslint-custom-config',
     'packages/outstatic',
-    'packages/tailwind-config',
     'packages/tsconfig'
   ].reduce((actions, pkg) => {
     actions[`${pkg}/**/*.{cjs,mjs,js,jsx,ts,tsx}`] = [

apps/web/outstatic/content/docs/the-content-editor.md

@@ -7,7 +7,7 @@ author:
 slug: 'the-content-editor'
 description: ''
 coverImage: ''
-publishedAt: '2022-10-13T12:26:38.000Z'
+publishedAt: '2022-10-20T12:26:38.000Z'
 ---
 
 The content editor is the main tool used for editing documents. It's where you'll be writing your content, adding links, images, etc…
@@ -16,24 +16,26 @@ The content editor is the main tool used for editing documents. It's where you'l
 
 You can write content in the editor as if you would on any other text editor. The editor supports some markdown syntax, for example, typing `##` when starting a new line will transform it into an H2 heading.
 
-![](/images/markdown-example-YzOD.gif)Any text you write inside the content editor can be modified and stylised using the editor menus.
+![](/images/markdown-example-c4MT.gif)
+
+Any text you write inside the content editor can be modified and stylised using the editor menus.
 
 ## Menus
 
-There are two main menus used while editing content. The **selection menu** and the **floating menu.**
+There are two main menus used while editing content. The **selection menu** and the **slash command menu.**
 
 The selection menu appears whenever you select content within the editor. It helps you turn the current selected word or node into other elements. You can easily add bold, italics, links, etc…
 
-![](/images/selection-menu-2-Y2MD.gif)
+![](/api/outstatic/images/selection-menu-2-Y2MD.gif)
 
-The floating menu appears on every new line. It allows you to create headings, add images, code blocks and quotes.
+The slash command menu appears whenever you type `/`. It allows you to create headings, add images, code blocks, quotes, etc... You can either use the arrow keys to navigate the commands or start typing to filter them.
 
-![](/images/floating-menu-g2OT.gif)
+![](/images/slash-command-ex-U1MD.gif)
 
 ## Uploading images
 
-You can add images to your documents by clicking the image button on the menu.
+You can enhance your documents by incorporating images using various methods: choose the 'Image' command from the **slash command menu**, then select if you want to upload or link to the image. You can also paste your desired picture, or simply drag and drop it into the document.
 
-![](/images/image-menu-U2ND.gif)
+![](/images/cleanshot-2023-10-20-at-23.07.12-2x-MzNz.png)
 
-Images are uploaded to your `/public/images` folder. Outstatic fetches the images directly from GitHub so they can be visualised instantly on the editor, even if your website hasn't finished deploying.
+Images are uploaded to your `/public/images` folder. Outstatic fetches the images directly from GitHub so they can be visualised instantly on the editor, even if your website hasn't finished deploying.

apps/web/outstatic/content/metadata.json

@@ -1,6 +1,6 @@
 {
-  "commit": "819d30ab3c7f2796b94bd8fd21e936f7a988b07e",
-  "generated": "2023-10-20T16:38:50.940Z",
+  "commit": "438f8f425e22da276d89c77e8696db13a80a34b7",
+  "generated": "2023-10-20T21:07:43.482Z",
   "metadata": [
     {
       "__outstatic": {
@@ -145,24 +145,6 @@
       "status": "published",
       "title": "Learn how to create your blog with Outstatic"
     },
-    {
-      "__outstatic": {
-        "commit": "e91d3250c8d69aa088b87c0401181136f6859b90",
-        "hash": "3340137951",
-        "path": "/outstatic/content/docs/the-content-editor.md"
-      },
-      "author": {
-        "name": "Andre Vitorio",
-        "picture": "https://avatars.githubusercontent.com/u/1417109?v=4"
-      },
-      "collection": "docs",
-      "coverImage": "",
-      "description": "",
-      "publishedAt": "2022-10-13T12:26:38.000Z",
-      "slug": "the-content-editor",
-      "status": "published",
-      "title": "The content editor"
-    },
     {
       "__outstatic": {
         "commit": "baab0613ec7117304e95b6dbdcd0d84fbab2c45a",
@@ -234,6 +216,24 @@
       "slug": "using-with-next-js-12",
       "status": "published",
       "title": "Using with Next.js 12"
+    },
+    {
+      "__outstatic": {
+        "commit": "438f8f425e22da276d89c77e8696db13a80a34b7",
+        "hash": "3606381726",
+        "path": "outstatic/content/docs/the-content-editor.md"
+      },
+      "author": {
+        "name": "Andre Vitorio",
+        "picture": "https://avatars.githubusercontent.com/u/1417109?v=4"
+      },
+      "collection": "docs",
+      "coverImage": "",
+      "description": "",
+      "publishedAt": "2022-10-20T12:26:38.000Z",
+      "slug": "the-content-editor",
+      "status": "published",
+      "title": "The content editor"
     }
   ]
 }

apps/web/package.json

@@ -35,7 +35,6 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-prism-plus": "^1.5.0",
     "rehype-slug": "^5.0.1",
-    "tailwind-config": "workspace:*",
     "tailwindcss": "^3.1.2",
     "tsconfig": "workspace:*",
     "typescript": "^4.5.3"

packages/outstatic/package.json

@@ -26,14 +26,18 @@
     "@hookform/resolvers": "^2.9.7",
     "@tiptap/core": "2.1.10",
     "@tiptap/extension-bubble-menu": "2.1.10",
+    "@tiptap/extension-code-block": "2.1.10",
     "@tiptap/extension-code-block-lowlight": "2.1.10",
-    "@tiptap/extension-floating-menu": "2.1.10",
+    "@tiptap/extension-highlight": "2.1.10",
+    "@tiptap/extension-horizontal-rule": "2.1.10",
     "@tiptap/extension-image": "2.1.10",
     "@tiptap/extension-link": "2.1.10",
     "@tiptap/extension-placeholder": "2.1.10",
+    "@tiptap/extension-underline": "2.1.10",
     "@tiptap/pm": "2.1.10",
     "@tiptap/react": "2.1.10",
     "@tiptap/starter-kit": "2.1.10",
+    "@tiptap/suggestion": "2.1.10",
     "camelcase": "^6.3.0",
     "clsx": "^1.2.1",
     "cookie": "^0.5.0",
@@ -47,22 +51,29 @@
     "js-cookie": "^3.0.5",
     "json-stable-stringify": "^1.0.2",
     "lowlight": "^1.0",
+    "lucide-react": "^0.260.0",
     "next-connect": "^1.0.0-next.2",
     "next-remove-imports": "^1.0.6",
     "next-session": "^4.0.5",
     "pluralize": "^8.0.0",
+    "postcss": "^8.4.26",
     "react-datepicker": "^4.8.0",
     "react-hook-form": "^7.31.3",
     "react-select": "^5.7.3",
     "react-textarea-autosize": "^8.3.4",
     "schema-to-yup": "^1.12.9",
-    "showdown": "^2.1.0",
     "sift": "^16.0.1",
+    "sonner": "^0.6.2",
     "swr": "^1.3.0",
+    "tailwind-merge": "^1.13.2",
     "thenby": "^1.3.4",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.1",
     "transliteration": "^2.3.5",
     "url-slug": "^3.0.4",
-    "yup": "^0.32.11"
+    "view": "link:@tiptap/pm/view",
+    "yup": "^0.32.11",
+    "zustand": "^4.4.3"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.18.6",
@@ -87,7 +98,6 @@
     "@types/react": "^18.0.15",
     "@types/react-datepicker": "^4.4.2",
     "@types/react-dom": "^18.0.6",
-    "@types/showdown": "^2.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "concurrently": "^7.6.0",
     "encoding": "^0.1.13",
@@ -99,9 +109,9 @@
     "next": "^13.0.0",
     "next-router-mock": "^0.9.7",
     "node-mocks-http": "^1.11.0",
+    "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwind-config": "workspace:*",
     "tailwindcss": "^3.1.5",
     "tsconfig": "workspace:*",
     "tsup": "^6.1.3",

packages/outstatic/src/client/pages/edit-document/index.tsx

@@ -11,7 +11,7 @@ import {
   DocumentTitleInput
 } from '../../../components'
 import { DocumentContext } from '../../../context'
-import { CustomFields, Document, FileType } from '../../../types'
+import { CustomFields, Document } from '../../../types'
 import { useOstSession } from '../../../utils/auth/hooks'
 import { deepReplace } from '../../../utils/deepReplace'
 import useNavigationLock from '../../../utils/hooks/useNavigationLock'
@@ -20,6 +20,7 @@ import { convertSchemaToYup, editDocumentSchema } from '../../../utils/yup'
 import useFileQuery from '../../../utils/hooks/useFileQuery'
 import useSubmitDocument from '../../../utils/hooks/useSubmitDocument'
 import { useDocumentUpdateEffect } from '../../../utils/hooks/useDocumentUpdateEffect'
+import { useFileStore } from '../../../utils/hooks/useFileStore'
 
 export default function EditDocument({ collection }: { collection: string }) {
   const pathname = usePathname()
@@ -29,12 +30,12 @@ export default function EditDocument({ collection }: { collection: string }) {
   const { session } = useOstSession()
   const [loading, setLoading] = useState(false)
   const [hasChanges, setHasChanges] = useState(false)
-  const [files, setFiles] = useState<FileType[]>([])
   const [showDelete, setShowDelete] = useState(false)
   const [documentSchema, setDocumentSchema] = useState(editDocumentSchema)
   const methods = useForm<Document>({ resolver: yupResolver(documentSchema) })
   const { editor } = useTipTap({ ...methods })
   const [customFields, setCustomFields] = useState<CustomFields>({})
+  const files = useFileStore((state) => state.files)
 
   const editDocument = (property: string, value: any) => {
     const formValues = methods.getValues()
@@ -57,7 +58,8 @@ export default function EditDocument({ collection }: { collection: string }) {
     collection,
     customFields,
     setCustomFields,
-    setHasChanges
+    setHasChanges,
+    editor
   })
 
   useEffect(() => {
@@ -75,6 +77,7 @@ export default function EditDocument({ collection }: { collection: string }) {
     setShowDelete
   })
 
+  // Add custom fields
   useEffect(() => {
     const documentQueryObject = schemaQueryData?.repository?.object
     if (documentQueryObject?.__typename === 'Blob') {
@@ -108,8 +111,6 @@ export default function EditDocument({ collection }: { collection: string }) {
           editor,
           document: methods.getValues(),
           editDocument,
-          files,
-          setFiles,
           hasChanges,
           collection
         }}

packages/outstatic/src/components/AdminLayout/index.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react'
 import { useOstSession } from '../../utils/auth/hooks'
 import AdminHeader from '../AdminHeader'
 import Sidebar from '../Sidebar'
+import { Toaster } from 'sonner'
 
 export type AdminLayoutProps = {
   error?: string | ApolloError
@@ -39,6 +40,7 @@ export default function AdminLayout({
         <title>{title ? `${title} | Outstatic` : 'Outstatic'}</title>
       </Head>
       <div id="outstatic">
+        <Toaster richColors />
         {status === 'loading' ? null : (
           <div className="flex h-screen flex-col bg-white text-black">
             <AdminHeader

packages/outstatic/src/components/DocumentSettingsImageSelection/index.tsx

@@ -1,8 +1,9 @@
 import { ChangeEvent, useContext, useEffect, useState } from 'react'
 import { DocumentContext } from '../../context'
-import { Document, FileType } from '../../types'
-import { IMAGES_PATH } from '../../utils/constants'
+import { Document } from '../../types'
+import { API_IMAGES_PATH, IMAGES_PATH } from '../../utils/constants'
 import Input from '../Input'
+import { addImage } from '../../utils/editor/utils/addImage'
 
 type DocumentSettingsImageSelectionProps = {
   name: 'coverImage' | 'author.picture'
@@ -23,7 +24,7 @@ const DocumentSettingsImageSelection = ({
   description,
   label
 }: DocumentSettingsImageSelectionProps) => {
-  const { document, editDocument, setFiles } = useContext(DocumentContext)
+  const { document, editDocument } = useContext(DocumentContext)
   const [showImage, setShowImage] = useState(false)
   const [showImageOptions, setShowImageOptions] = useState(false)
   const [showLink, setShowLink] = useState(false)
@@ -35,7 +36,7 @@ const DocumentSettingsImageSelection = ({
   useEffect(() => {
     const image = resolvedImage?.replace(
       `/${IMAGES_PATH}`,
-      `/api/outstatic/images/`
+      `/${API_IMAGES_PATH}`
     )
     setImage(image || '')
     setShowImageOptions(!resolvedImage)
@@ -47,23 +48,8 @@ const DocumentSettingsImageSelection = ({
   }: ChangeEvent<HTMLInputElement>) => {
     if (currentTarget.files?.length && currentTarget.files?.[0] !== null) {
       const file = currentTarget.files[0]
-      const blob = URL.createObjectURL(file)
-      editDocument(name, blob)
-      const reader = new FileReader()
-      reader.readAsArrayBuffer(file)
-      reader.onloadend = () => {
-        const bytes = reader.result as string
-        const buffer = Buffer.from(bytes, 'binary')
-        setFiles((files: FileType[]) => [
-          ...files,
-          {
-            type: 'images',
-            blob,
-            filename: file.name,
-            content: buffer.toString('base64')
-          }
-        ])
-      }
+      const image = addImage(file)
+      editDocument(name, image)
     }
   }