@brett_lamy/docstream-editor 0.1.0 → 0.3.0

package/src/editor/slash-menu.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react"
@@ -219,17 +220,41 @@ const SlashMenuView = forwardRef<MenuHandle, MenuProps>(function SlashMenuView(
     },
   }))
 
+  const menuRef = useRef<HTMLDivElement>(null)
   const rect = clientRect?.()
-  if (!rect) return null
+  const [pos, setPos] = useState<{ left: number; top: number }>(() => ({
+    left: rect ? rect.left : 0,
+    top: rect ? rect.bottom + 6 : 0,
+  }))
 
-  const style: React.CSSProperties = {
-    position: "fixed",
-    left: rect.left,
-    top: rect.bottom + 6,
-  }
+  // Position below the cursor, but flip above when there isn't room below
+  // (e.g. triggered near the bottom of the viewport). Measured after render.
+  useLayoutEffect(() => {
+    const r = clientRect?.()
+    const el = menuRef.current
+    if (!r || !el) return
+    const margin = 6
+    const menuH = el.offsetHeight
+    const menuW = el.offsetWidth
+    const spaceBelow = window.innerHeight - r.bottom
+    let top = r.bottom + margin
+    if (spaceBelow < menuH + margin && r.top - margin > menuH) {
+      top = r.top - menuH - margin
+    }
+    top = Math.max(margin, Math.min(top, window.innerHeight - menuH - margin))
+    let left = Math.min(r.left, window.innerWidth - menuW - margin)
+    left = Math.max(margin, left)
+    if (left !== pos.left || top !== pos.top) setPos({ left, top })
+  }, [clientRect, items, pos.left, pos.top])
+
+  if (!rect) return null
 
   return (
-    <div className="slash-menu" style={style}>
+    <div
+      ref={menuRef}
+      className="slash-menu"
+      style={{ position: "fixed", left: pos.left, top: pos.top }}
+    >
       {items.length === 0 && <div className="slash-empty">No matching blocks</div>}
       {items.map((item, i) => (
         <button
@@ -252,19 +277,26 @@ const SlashMenuView = forwardRef<MenuHandle, MenuProps>(function SlashMenuView(
   )
 })
 
-export const SlashMenu = Extension.create({
-  name: "slashMenu",
-  addProseMirrorPlugins() {
-    let renderer: ReactRenderer<MenuHandle, MenuProps> | null = null
-    return [
-      Suggestion<SlashItem>({
-        editor: this.editor,
-        char: "/",
-        startOfLine: false,
-        items: ({ query }) =>
-          SLASH_ITEMS.filter((item) =>
-            `${item.title} ${item.keywords}`.toLowerCase().includes(query.toLowerCase())
-          ),
+export type { SlashItem }
+
+/**
+ * Build a slash-command extension. Pass a custom `items` list to override the
+ * default GitBook blocks. The default instance is exported as `SlashMenu`.
+ */
+export function createSlashMenu(items: SlashItem[] = SLASH_ITEMS) {
+  return Extension.create({
+    name: "slashMenu",
+    addProseMirrorPlugins() {
+      let renderer: ReactRenderer<MenuHandle, MenuProps> | null = null
+      return [
+        Suggestion<SlashItem>({
+          editor: this.editor,
+          char: "/",
+          startOfLine: false,
+          items: ({ query }) =>
+            items.filter((item) =>
+              `${item.title} ${item.keywords}`.toLowerCase().includes(query.toLowerCase())
+            ),
         command: ({ editor, range, props }) => {
           editor.chain().focus().deleteRange(range as Range).run()
           props.run(editor as Editor)
@@ -302,8 +334,11 @@ export const SlashMenu = Extension.create({
             renderer?.destroy()
             renderer = null
           },
+          }),
         }),
-      }),
-    ]
-  },
-})
+      ]
+    },
+  })
+}
+
+export const SlashMenu = createSlashMenu()

package/src/index.ts

@@ -2,3 +2,13 @@ export { GitbookEditor } from "./editor/Editor"
 export type { GitbookEditorProps } from "./editor/Editor"
 export { astToTiptap, tiptapToAst } from "./editor/convert"
 export type { PMNode } from "./editor/convert"
+
+// Building blocks for composing a custom editor (e.g. with Yjs collaboration
+// or a bespoke slash menu) instead of the batteries-included GitbookEditor.
+export { createGitbookExtensions, getGitbookSchema, GbTable } from "./editor/extensions"
+export type { GitbookExtensionOptions } from "./editor/extensions"
+export { gitbookNodes, GbCodeBlock } from "./editor/nodes"
+export { SlashMenu, createSlashMenu, SLASH_ITEMS } from "./editor/slash-menu"
+export type { SlashItem } from "./editor/slash-menu"
+export { ReactDemoEditor } from "./editor/ReactDemoEditor"
+export type { ReactDemoEditorProps } from "./editor/ReactDemoEditor"