inkpen 0.7.1

data/app/assets/javascripts/inkpen/extensions/block_commands.js

@@ -0,0 +1,300 @@
+import { Extension } from "@tiptap/core"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import { Decoration, DecorationSet } from "@tiptap/pm/view"
+
+/**
+ * Block Commands Extension for TipTap
+ *
+ * Adds block-level operations like selection, duplication, and deletion.
+ * Part of Phase 3 polish for BlockNote-style editing experience.
+ *
+ * Features:
+ * - Block selection via gutter click
+ * - Multi-block selection with Shift+Click
+ * - Duplicate block (Cmd+D)
+ * - Delete empty block (Backspace)
+ * - Select all content in block (Cmd+A when block selected)
+ *
+ * @since 0.4.0
+ */
+
+const BLOCK_COMMANDS_KEY = new PluginKey("blockCommands")
+
+export const BlockCommands = Extension.create({
+  name: "blockCommands",
+
+  addOptions() {
+    return {
+      // Class for selected blocks
+      selectedClass: "is-selected",
+      // Enable block selection via gutter
+      enableGutterSelection: true
+    }
+  },
+
+  addCommands() {
+    return {
+      // Duplicate the current block
+      duplicateBlock: () => ({ state, dispatch }) => {
+        const { selection, doc } = state
+        const { $from } = selection
+
+        // Find the current block
+        let blockPos = null
+        let blockNode = null
+
+        for (let d = $from.depth; d > 0; d--) {
+          const node = $from.node(d)
+          const parent = $from.node(d - 1)
+
+          if (parent.type.name === "doc") {
+            blockPos = $from.before(d)
+            blockNode = node
+            break
+          }
+        }
+
+        if (blockPos === null || !blockNode) return false
+
+        if (dispatch) {
+          const insertPos = blockPos + blockNode.nodeSize
+          const tr = state.tr.insert(insertPos, blockNode.copy(blockNode.content))
+
+          // Move cursor to the duplicated block
+          const newBlockStart = insertPos + 1
+          tr.setSelection(state.selection.constructor.near(tr.doc.resolve(newBlockStart)))
+
+          dispatch(tr.scrollIntoView())
+        }
+
+        return true
+      },
+
+      // Delete the current block
+      deleteBlock: () => ({ state, dispatch }) => {
+        const { selection, doc } = state
+        const { $from } = selection
+
+        // Find the current block
+        for (let d = $from.depth; d > 0; d--) {
+          const node = $from.node(d)
+          const parent = $from.node(d - 1)
+
+          if (parent.type.name === "doc") {
+            const pos = $from.before(d)
+
+            // Don't delete if it's the only block
+            if (doc.childCount <= 1) return false
+
+            if (dispatch) {
+              const tr = state.tr.delete(pos, pos + node.nodeSize)
+              dispatch(tr.scrollIntoView())
+            }
+
+            return true
+          }
+        }
+
+        return false
+      },
+
+      // Select the entire current block
+      selectBlock: () => ({ state, dispatch, editor }) => {
+        const { selection, doc } = state
+        const { $from } = selection
+
+        // Find the current block
+        for (let d = $from.depth; d > 0; d--) {
+          const node = $from.node(d)
+          const parent = $from.node(d - 1)
+
+          if (parent.type.name === "doc") {
+            const pos = $from.before(d)
+
+            if (dispatch) {
+              // Use NodeSelection to select the whole block
+              const NodeSelection = state.selection.constructor.name === "NodeSelection"
+                ? state.selection.constructor
+                : require("@tiptap/pm/state").NodeSelection
+
+              const tr = state.tr.setSelection(
+                NodeSelection.create(doc, pos)
+              )
+              dispatch(tr)
+            }
+
+            return true
+          }
+        }
+
+        return false
+      },
+
+      // Select block at a specific position
+      selectBlockAt: (pos) => ({ state, dispatch }) => {
+        const { doc } = state
+        const node = doc.nodeAt(pos)
+
+        if (!node) return false
+
+        if (dispatch) {
+          const { NodeSelection } = require("@tiptap/pm/state")
+          const tr = state.tr.setSelection(NodeSelection.create(doc, pos))
+          dispatch(tr)
+        }
+
+        return true
+      }
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      // Duplicate block
+      "Mod-d": () => {
+        // Prevent default browser bookmark action
+        return this.editor.commands.duplicateBlock()
+      },
+
+      // Delete block when empty
+      Backspace: ({ editor }) => {
+        const { state } = editor
+        const { selection, doc } = state
+        const { $from, empty } = selection
+
+        // Only handle if selection is empty (just cursor)
+        if (!empty) return false
+
+        // Check if we're at the start of an empty block
+        const parentOffset = $from.parentOffset
+
+        if (parentOffset !== 0) return false
+
+        // Check if the parent is empty
+        const parent = $from.parent
+        if (parent.textContent !== "") return false
+
+        // Check if we're in a top-level block
+        const grandParent = $from.node($from.depth - 1)
+        if (grandParent && grandParent.type.name !== "doc") return false
+
+        // Don't delete the last remaining block
+        if (doc.childCount <= 1) return false
+
+        return editor.commands.deleteBlock()
+      }
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const extension = this
+
+    return [
+      new Plugin({
+        key: BLOCK_COMMANDS_KEY,
+
+        state: {
+          init() {
+            return {
+              selectedBlocks: new Set()
+            }
+          },
+          apply(tr, value, oldState, newState) {
+            const meta = tr.getMeta(BLOCK_COMMANDS_KEY)
+            if (meta) {
+              return { ...value, ...meta }
+            }
+            // Clear selection on document change
+            if (tr.docChanged) {
+              return { selectedBlocks: new Set() }
+            }
+            return value
+          }
+        },
+
+        props: {
+          decorations(state) {
+            const pluginState = BLOCK_COMMANDS_KEY.getState(state)
+            if (!pluginState || pluginState.selectedBlocks.size === 0) {
+              return DecorationSet.empty
+            }
+
+            const decorations = []
+
+            pluginState.selectedBlocks.forEach(pos => {
+              const node = state.doc.nodeAt(pos)
+              if (node) {
+                decorations.push(
+                  Decoration.node(pos, pos + node.nodeSize, {
+                    class: extension.options.selectedClass
+                  })
+                )
+              }
+            })
+
+            return DecorationSet.create(state.doc, decorations)
+          },
+
+          handleClick(view, pos, event) {
+            // Handle gutter clicks for block selection
+            const target = event.target
+
+            if (!target.closest(".inkpen-block-gutter__drag")) {
+              return false
+            }
+
+            const gutter = target.closest(".inkpen-block-gutter")
+            if (!gutter) return false
+
+            const blockPos = parseInt(gutter.dataset.pos)
+            if (isNaN(blockPos)) return false
+
+            const { state } = view
+            const pluginState = BLOCK_COMMANDS_KEY.getState(state)
+            const currentSelected = new Set(pluginState.selectedBlocks)
+
+            if (event.shiftKey) {
+              // Toggle selection for multi-select
+              if (currentSelected.has(blockPos)) {
+                currentSelected.delete(blockPos)
+              } else {
+                currentSelected.add(blockPos)
+              }
+            } else {
+              // Single select
+              currentSelected.clear()
+              currentSelected.add(blockPos)
+            }
+
+            view.dispatch(
+              state.tr.setMeta(BLOCK_COMMANDS_KEY, {
+                selectedBlocks: currentSelected
+              })
+            )
+
+            return true
+          },
+
+          handleKeyDown(view, event) {
+            const { state } = view
+            const pluginState = BLOCK_COMMANDS_KEY.getState(state)
+
+            // Clear selection on Escape
+            if (event.key === "Escape" && pluginState.selectedBlocks.size > 0) {
+              view.dispatch(
+                state.tr.setMeta(BLOCK_COMMANDS_KEY, {
+                  selectedBlocks: new Set()
+                })
+              )
+              return true
+            }
+
+            return false
+          }
+        }
+      })
+    ]
+  }
+})
+
+export default BlockCommands

data/app/assets/javascripts/inkpen/extensions/block_gutter.js

@@ -0,0 +1,338 @@
+import { Extension } from "@tiptap/core"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+/**
+ * Block Gutter Extension for TipTap
+ *
+ * Adds a left-side gutter with drag handles and plus buttons for each block.
+ * Similar to Notion/Editor.js block handles.
+ *
+ * Features:
+ * - Drag handle (⋮⋮) for block reordering
+ * - Plus button (+) to insert new block below
+ * - Shows on hover, hides when not focused
+ * - Skips blocks inside tables
+ * - Integrates with slash commands
+ *
+ * @example
+ * // The gutter appears on block hover:
+ * //   ⋮⋮ + │ Heading text
+ * //   ⋮⋮ + │ Paragraph content...
+ *
+ * @since 0.3.1
+ */
+
+const BLOCK_GUTTER_KEY = new PluginKey("blockGutter")
+
+export const BlockGutter = Extension.create({
+  name: "blockGutter",
+
+  addOptions() {
+    return {
+      // Show drag handle
+      showDragHandle: true,
+      // Show plus button
+      showPlusButton: true,
+      // Class for the gutter container
+      gutterClass: "inkpen-block-gutter",
+      // Class for the drag handle
+      dragClass: "inkpen-block-gutter__drag",
+      // Class for the plus button
+      plusClass: "inkpen-block-gutter__plus",
+      // Block types to skip (don't show gutter)
+      skipTypes: ["tableRow", "tableCell", "tableHeader", "listItem", "taskItem"],
+      // Parent types to skip (don't show gutter for children)
+      skipParentTypes: ["table", "tableRow"],
+      // Callback when plus button is clicked
+      onPlusClick: null,
+      // Callback when drag starts
+      onDragStart: null,
+      // Callback when drag ends
+      onDragEnd: null
+    }
+  },
+
+  addProseMirrorPlugins() {
+    const extension = this
+    const editor = this.editor
+
+    return [
+      new Plugin({
+        key: BLOCK_GUTTER_KEY,
+
+        view(editorView) {
+          // Container for all gutters
+          const container = document.createElement("div")
+          container.className = "inkpen-block-gutter-container"
+          container.setAttribute("aria-hidden", "true")
+
+          // Track current gutters
+          let gutters = new Map()
+          let hoveredPos = null
+          let isDragging = false
+
+          // Create gutter element for a block
+          const createGutter = (pos, node) => {
+            const gutter = document.createElement("div")
+            gutter.className = extension.options.gutterClass
+            gutter.dataset.pos = pos.toString()
+            gutter.dataset.nodeType = node.type.name
+
+            // Drag handle
+            if (extension.options.showDragHandle) {
+              const dragHandle = document.createElement("button")
+              dragHandle.type = "button"
+              dragHandle.className = extension.options.dragClass
+              dragHandle.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <circle cx="4" cy="3" r="1.5"/>
+                <circle cx="10" cy="3" r="1.5"/>
+                <circle cx="4" cy="7" r="1.5"/>
+                <circle cx="10" cy="7" r="1.5"/>
+                <circle cx="4" cy="11" r="1.5"/>
+                <circle cx="10" cy="11" r="1.5"/>
+              </svg>`
+              dragHandle.setAttribute("aria-label", "Drag to reorder")
+              dragHandle.setAttribute("draggable", "true")
+
+              dragHandle.addEventListener("mousedown", (e) => {
+                e.preventDefault()
+                // Select the block when clicking drag handle
+                const blockPos = parseInt(gutter.dataset.pos)
+                const $pos = editorView.state.doc.resolve(blockPos)
+                const nodeAtPos = editorView.state.doc.nodeAt(blockPos)
+                if (nodeAtPos) {
+                  const selection = editor.state.selection.constructor.near($pos)
+                  editor.view.dispatch(editor.state.tr.setSelection(selection))
+                }
+              })
+
+              dragHandle.addEventListener("dragstart", (e) => {
+                isDragging = true
+                const blockPos = parseInt(gutter.dataset.pos)
+                const nodeAtPos = editorView.state.doc.nodeAt(blockPos)
+
+                // Set drag data
+                e.dataTransfer.effectAllowed = "move"
+                e.dataTransfer.setData("text/plain", blockPos.toString())
+                e.dataTransfer.setData("application/inkpen-block", JSON.stringify({
+                  pos: blockPos,
+                  type: nodeAtPos?.type.name
+                }))
+
+                // Create custom drag image (ghost)
+                const ghost = document.createElement("div")
+                ghost.className = "inkpen-drag-ghost"
+                ghost.textContent = nodeAtPos?.textContent?.slice(0, 50) || nodeAtPos?.type.name || "Block"
+                document.body.appendChild(ghost)
+                e.dataTransfer.setDragImage(ghost, 0, 0)
+
+                // Remove ghost after drag starts
+                requestAnimationFrame(() => {
+                  ghost.remove()
+                })
+
+                // Add dragging class
+                gutter.classList.add("is-dragging")
+                editorView.dom.classList.add("is-block-dragging")
+
+                // Callback
+                extension.options.onDragStart?.(blockPos, nodeAtPos, e)
+              })
+
+              dragHandle.addEventListener("dragend", (e) => {
+                isDragging = false
+                gutter.classList.remove("is-dragging")
+                editorView.dom.classList.remove("is-block-dragging")
+                extension.options.onDragEnd?.(e)
+              })
+
+              gutter.appendChild(dragHandle)
+            }
+
+            // Plus button
+            if (extension.options.showPlusButton) {
+              const plusBtn = document.createElement("button")
+              plusBtn.type = "button"
+              plusBtn.className = extension.options.plusClass
+              plusBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+                <path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>`
+              plusBtn.setAttribute("aria-label", "Add block below")
+
+              plusBtn.addEventListener("click", (e) => {
+                e.preventDefault()
+                e.stopPropagation()
+
+                const blockPos = parseInt(gutter.dataset.pos)
+                const nodeAtPos = editorView.state.doc.nodeAt(blockPos)
+                const insertPos = blockPos + (nodeAtPos?.nodeSize || 1)
+
+                // Insert a new paragraph and focus it
+                editor.chain()
+                  .focus()
+                  .insertContentAt(insertPos, { type: "paragraph" })
+                  .setTextSelection(insertPos + 1)
+                  .run()
+
+                // If slash commands extension is active, trigger it
+                // by inserting "/" character
+                setTimeout(() => {
+                  if (editor.extensionManager.extensions.find(ext => ext.name === "slashCommands")) {
+                    editor.commands.insertContent("/")
+                  }
+                }, 10)
+
+                // Callback
+                extension.options.onPlusClick?.(insertPos, e)
+              })
+
+              gutter.appendChild(plusBtn)
+            }
+
+            return gutter
+          }
+
+          // Position a gutter element
+          const positionGutter = (gutter, pos) => {
+            try {
+              const coords = editorView.coordsAtPos(pos)
+              const editorRect = editorView.dom.getBoundingClientRect()
+
+              // Position relative to editor
+              gutter.style.top = `${coords.top - editorRect.top}px`
+            } catch (e) {
+              // Position might be invalid
+            }
+          }
+
+          // Update all gutters
+          const updateGutters = () => {
+            const { doc } = editorView.state
+            const newGutters = new Map()
+            const skipTypes = extension.options.skipTypes || []
+            const skipParentTypes = extension.options.skipParentTypes || []
+
+            // Find all top-level blocks
+            doc.forEach((node, pos) => {
+              // Skip certain node types
+              if (skipTypes.includes(node.type.name)) return
+
+              // Check if inside a skipped parent
+              const $pos = doc.resolve(pos)
+              for (let d = $pos.depth; d > 0; d--) {
+                if (skipParentTypes.includes($pos.node(d).type.name)) return
+              }
+
+              // Reuse existing gutter or create new one
+              let gutter = gutters.get(pos)
+              if (!gutter) {
+                gutter = createGutter(pos, node)
+                container.appendChild(gutter)
+              } else {
+                // Update data attributes
+                gutter.dataset.pos = pos.toString()
+                gutter.dataset.nodeType = node.type.name
+              }
+
+              positionGutter(gutter, pos)
+              newGutters.set(pos, gutter)
+            })
+
+            // Remove old gutters
+            for (const [pos, gutter] of gutters) {
+              if (!newGutters.has(pos)) {
+                gutter.remove()
+              }
+            }
+
+            gutters = newGutters
+          }
+
+          // Handle mouse movement to show/hide gutters
+          const handleMouseMove = (e) => {
+            if (isDragging) return
+
+            const target = e.target
+            const editorRect = editorView.dom.getBoundingClientRect()
+
+            // Check if mouse is in gutter area (left side of editor)
+            const isInGutterArea = e.clientX < editorRect.left + 60
+
+            if (!isInGutterArea && !target.closest(".inkpen-block-gutter")) {
+              // Find which block we're hovering
+              const pos = editorView.posAtCoords({ left: editorRect.left + 10, top: e.clientY })
+              if (pos) {
+                try {
+                  const $pos = editorView.state.doc.resolve(pos.pos)
+                  // Get the top-level block position (guard against depth 0)
+                  const blockPos = $pos.depth > 0 ? $pos.before($pos.depth) : 0
+
+                  if (blockPos !== hoveredPos) {
+                    hoveredPos = blockPos
+                    // Show only the hovered gutter
+                    for (const [gpos, gutter] of gutters) {
+                      gutter.classList.toggle("is-visible", gpos === blockPos)
+                    }
+                  }
+                } catch (e) {
+                  // Invalid position, ignore
+                }
+              }
+            }
+          }
+
+          // Handle mouse enter on gutter area
+          const handleGutterEnter = () => {
+            // Show all gutters when in gutter area
+            for (const gutter of gutters.values()) {
+              gutter.classList.add("is-visible")
+            }
+          }
+
+          // Handle mouse leave from gutter area
+          const handleGutterLeave = () => {
+            if (isDragging) return
+            // Hide all gutters
+            for (const gutter of gutters.values()) {
+              gutter.classList.remove("is-visible")
+            }
+            hoveredPos = null
+          }
+
+          // Append container to editor wrapper
+          const editorWrapper = editorView.dom.parentElement
+          if (editorWrapper) {
+            editorWrapper.style.position = "relative"
+            editorWrapper.appendChild(container)
+          }
+
+          // Set up event listeners
+          editorView.dom.addEventListener("mousemove", handleMouseMove)
+          container.addEventListener("mouseenter", handleGutterEnter)
+          container.addEventListener("mouseleave", handleGutterLeave)
+
+          // Initial render
+          updateGutters()
+
+          return {
+            update(view, prevState) {
+              // Only update if document changed
+              if (!prevState.doc.eq(view.state.doc)) {
+                updateGutters()
+              }
+            },
+
+            destroy() {
+              editorView.dom.removeEventListener("mousemove", handleMouseMove)
+              container.removeEventListener("mouseenter", handleGutterEnter)
+              container.removeEventListener("mouseleave", handleGutterLeave)
+              container.remove()
+            }
+          }
+        }
+      })
+    ]
+  }
+})
+
+export default BlockGutter