inkpen 0.7.1

data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_menu.js

@@ -0,0 +1,282 @@
+/**
+ * InkpenTable Menu
+ *
+ * Context menu component for row/column operations.
+ * Follows Fizzy patterns: private fields with #, section comments.
+ *
+ * @since 0.8.0
+ */
+
+import {
+  createElement,
+  positionBelow,
+  positionRight,
+  onClickOutside,
+  onEscapeKey,
+  stopEvent
+} from "inkpen/extensions/inkpen_table/table_helpers"
+
+import {
+  CSS_CLASSES,
+  ROW_MENU_ITEMS,
+  COLUMN_MENU_ITEMS,
+  TEXT_COLORS,
+  BACKGROUND_COLORS,
+  ALIGNMENT_OPTIONS
+} from "inkpen/extensions/inkpen_table/table_constants"
+
+// =============================================================================
+// TableMenu Class
+// =============================================================================
+
+export class TableMenu {
+  #element = null
+  #submenu = null
+  #reference = null
+  #onAction = null
+  #cleanupClickOutside = null
+  #cleanupEscapeKey = null
+  #menuType = null
+
+  // Lifecycle
+
+  constructor(options = {}) {
+    this.#onAction = options.onAction || (() => {})
+  }
+
+  destroy() {
+    this.hide()
+  }
+
+  // Public Methods
+
+  showRowMenu(reference, options = {}) {
+    this.#menuType = "row"
+    this.#show(reference, ROW_MENU_ITEMS, options)
+  }
+
+  showColumnMenu(reference, options = {}) {
+    this.#menuType = "column"
+    this.#show(reference, COLUMN_MENU_ITEMS, options)
+  }
+
+  hide() {
+    this.#hideSubmenu()
+    this.#cleanup()
+  }
+
+  isVisible() {
+    return this.#element !== null
+  }
+
+  // Private
+
+  #show(reference, items, options = {}) {
+    this.hide()
+
+    this.#reference = reference
+    this.#element = this.#createMenu(items, options)
+
+    document.body.appendChild(this.#element)
+    positionBelow(this.#element, reference)
+
+    this.#setupEventHandlers()
+  }
+
+  #createMenu(items, options = {}) {
+    const menu = createElement("div", {
+      className: CSS_CLASSES.menu,
+      role: "menu"
+    })
+
+    for (const item of items) {
+      const element = this.#createMenuItem(item, options)
+      if (element) {
+        menu.appendChild(element)
+      }
+    }
+
+    return menu
+  }
+
+  #createMenuItem(item, options = {}) {
+    if (item.type === "separator") {
+      return createElement("div", {
+        className: CSS_CLASSES.menuSeparator,
+        role: "separator"
+      })
+    }
+
+    if (item.type === "submenu") {
+      return this.#createSubmenuTrigger(item, options)
+    }
+
+    const button = createElement("button", {
+      className: `${CSS_CLASSES.menuItem}${item.danger ? " " + CSS_CLASSES.menuItem + "--danger" : ""}`,
+      role: "menuitem",
+      dataset: { action: item.id }
+    }, [
+      createElement("span", { className: `${CSS_CLASSES.menuItem}__icon` }, [item.icon]),
+      createElement("span", { className: `${CSS_CLASSES.menuItem}__label` }, [item.label])
+    ])
+
+    button.addEventListener("click", (e) => {
+      stopEvent(e)
+      this.#handleAction(item.id)
+    })
+
+    return button
+  }
+
+  #createSubmenuTrigger(item, options = {}) {
+    const trigger = createElement("button", {
+      className: `${CSS_CLASSES.menuItem} ${CSS_CLASSES.menuItem}--has-submenu`,
+      role: "menuitem",
+      "aria-haspopup": "true",
+      dataset: { submenu: item.id }
+    }, [
+      createElement("span", { className: `${CSS_CLASSES.menuItem}__icon` }, [item.icon]),
+      createElement("span", { className: `${CSS_CLASSES.menuItem}__label` }, [item.label]),
+      createElement("span", { className: `${CSS_CLASSES.menuItem}__arrow` }, ["›"])
+    ])
+
+    trigger.addEventListener("mouseenter", () => {
+      this.#showSubmenu(item.id, trigger, options)
+    })
+
+    trigger.addEventListener("click", (e) => {
+      stopEvent(e)
+      this.#showSubmenu(item.id, trigger, options)
+    })
+
+    return trigger
+  }
+
+  #showSubmenu(submenuId, trigger, options = {}) {
+    this.#hideSubmenu()
+
+    let items = []
+    let isColorPicker = false
+
+    switch (submenuId) {
+      case "textColor":
+        items = TEXT_COLORS
+        isColorPicker = true
+        break
+      case "backgroundColor":
+        items = BACKGROUND_COLORS
+        isColorPicker = true
+        break
+      case "alignment":
+        items = ALIGNMENT_OPTIONS
+        break
+      default:
+        return
+    }
+
+    this.#submenu = createElement("div", {
+      className: `${CSS_CLASSES.menu} ${CSS_CLASSES.menuSubmenu}`,
+      role: "menu"
+    })
+
+    if (isColorPicker) {
+      this.#submenu.classList.add(`${CSS_CLASSES.menu}--colors`)
+      const grid = createElement("div", { className: `${CSS_CLASSES.menu}__color-grid` })
+
+      for (const color of items) {
+        const swatch = createElement("button", {
+          className: CSS_CLASSES.colorSwatch,
+          role: "menuitem",
+          title: color.label,
+          dataset: { color: color.name }
+        })
+
+        if (color.value) {
+          swatch.style.backgroundColor = color.value
+        } else {
+          swatch.classList.add(`${CSS_CLASSES.colorSwatch}--none`)
+          swatch.textContent = "∅"
+        }
+
+        swatch.addEventListener("click", (e) => {
+          stopEvent(e)
+          this.#handleAction(submenuId, { color: color.name, value: color.value })
+        })
+
+        grid.appendChild(swatch)
+      }
+
+      this.#submenu.appendChild(grid)
+    } else {
+      for (const item of items) {
+        const button = createElement("button", {
+          className: CSS_CLASSES.menuItem,
+          role: "menuitem",
+          dataset: { value: item.name }
+        }, [
+          createElement("span", { className: `${CSS_CLASSES.menuItem}__icon` }, [item.icon]),
+          createElement("span", { className: `${CSS_CLASSES.menuItem}__label` }, [item.label])
+        ])
+
+        button.addEventListener("click", (e) => {
+          stopEvent(e)
+          this.#handleAction(submenuId, { value: item.name })
+        })
+
+        this.#submenu.appendChild(button)
+      }
+    }
+
+    document.body.appendChild(this.#submenu)
+    positionRight(this.#submenu, trigger)
+  }
+
+  #hideSubmenu() {
+    if (this.#submenu) {
+      this.#submenu.remove()
+      this.#submenu = null
+    }
+  }
+
+  #handleAction(actionId, data = {}) {
+    this.#onAction({
+      action: actionId,
+      menuType: this.#menuType,
+      ...data
+    })
+    this.hide()
+  }
+
+  #setupEventHandlers() {
+    this.#cleanupClickOutside = onClickOutside(this.#element, (e) => {
+      if (this.#submenu && this.#submenu.contains(e.target)) {
+        return
+      }
+      this.hide()
+    })
+
+    this.#cleanupEscapeKey = onEscapeKey(() => {
+      this.hide()
+    })
+  }
+
+  #cleanup() {
+    if (this.#cleanupClickOutside) {
+      this.#cleanupClickOutside()
+      this.#cleanupClickOutside = null
+    }
+
+    if (this.#cleanupEscapeKey) {
+      this.#cleanupEscapeKey()
+      this.#cleanupEscapeKey = null
+    }
+
+    if (this.#element) {
+      this.#element.remove()
+      this.#element = null
+    }
+
+    this.#reference = null
+    this.#menuType = null
+  }
+}

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

@@ -0,0 +1,239 @@
+import { Node, mergeAttributes } from "@tiptap/core"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+
+/**
+ * Preformatted Text Extension for TipTap
+ *
+ * Plain text block that preserves whitespace exactly as typed.
+ * No syntax highlighting - perfect for ASCII art, tables, and diagrams.
+ *
+ * Features:
+ * - Strict monospace font
+ * - Preserves all whitespace (spaces, tabs, newlines)
+ * - No text wrapping by default
+ * - Optional line numbers
+ * - Tab key inserts actual tab character
+ *
+ * @example
+ * editor.commands.insertPreformatted()
+ * editor.commands.togglePreformatted()
+ *
+ * @since 0.3.0
+ */
+export const Preformatted = Node.create({
+  name: "preformatted",
+
+  group: "block",
+  content: "text*",
+  marks: "",  // No marks allowed (bold, italic, etc.)
+  code: true, // Tells ProseMirror to preserve whitespace
+  defining: true,
+
+  // Options
+
+  addOptions() {
+    return {
+      showLineNumbers: false,
+      wrapLines: false,
+      tabSize: 4,
+      showLabel: true,
+      labelText: "Plain Text",
+      HTMLAttributes: {
+        class: "inkpen-preformatted"
+      }
+    }
+  },
+
+  // Attributes
+
+  addAttributes() {
+    return {
+      label: {
+        default: this.options.labelText,
+        parseHTML: element => element.getAttribute("data-label") || this.options.labelText,
+        renderHTML: attributes => ({ "data-label": attributes.label })
+      }
+    }
+  },
+
+  // Parse & Render
+
+  parseHTML() {
+    return [
+      { tag: "pre[data-type='preformatted']" },
+      { tag: "pre.inkpen-preformatted" },
+      // Also capture plain <pre> without code highlighting
+      {
+        tag: "pre",
+        priority: 40, // Lower priority than CodeBlock
+        getAttrs: node => {
+          // Only match if it doesn't have a language class (not a code block)
+          const hasLanguage = node.querySelector("code[class*='language-']") ||
+                              node.classList.contains("hljs") ||
+                              node.hasAttribute("data-language")
+          return hasLanguage ? false : null
+        }
+      }
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const attrs = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+      "data-type": "preformatted",
+      "data-wrap": this.options.wrapLines ? "true" : "false",
+      style: `tab-size: ${this.options.tabSize}; -moz-tab-size: ${this.options.tabSize};`
+    })
+
+    return ["pre", attrs, 0]
+  },
+
+  // NodeView for label display
+
+  addNodeView() {
+    return ({ node, HTMLAttributes, getPos, editor }) => {
+      const dom = document.createElement("div")
+      dom.className = "inkpen-preformatted-wrapper"
+
+      // Label badge
+      if (this.options.showLabel) {
+        const label = document.createElement("span")
+        label.className = "inkpen-preformatted__label"
+        label.textContent = node.attrs.label || this.options.labelText
+        label.contentEditable = "false"
+        dom.appendChild(label)
+      }
+
+      // The actual pre element
+      const pre = document.createElement("pre")
+      pre.className = "inkpen-preformatted"
+      pre.setAttribute("data-type", "preformatted")
+      pre.setAttribute("data-wrap", this.options.wrapLines ? "true" : "false")
+      pre.style.tabSize = this.options.tabSize
+      pre.style.MozTabSize = this.options.tabSize
+      dom.appendChild(pre)
+
+      return {
+        dom,
+        contentDOM: pre,
+        update: (updatedNode) => {
+          if (updatedNode.type !== this.type) return false
+          return true
+        }
+      }
+    }
+  },
+
+  // Commands
+
+  addCommands() {
+    return {
+      setPreformatted: (attributes = {}) => ({ commands }) => {
+        return commands.setNode(this.name, attributes)
+      },
+
+      togglePreformatted: (attributes = {}) => ({ commands }) => {
+        return commands.toggleNode(this.name, "paragraph", attributes)
+      },
+
+      insertPreformatted: (content = "") => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          content: content ? [{ type: "text", text: content }] : []
+        })
+      }
+    }
+  },
+
+  // Keyboard Shortcuts
+
+  addKeyboardShortcuts() {
+    return {
+      // Cmd+Shift+P to toggle preformatted
+      "Mod-Shift-p": () => this.editor.commands.togglePreformatted(),
+
+      // Tab inserts a real tab character (not focus change)
+      Tab: ({ editor }) => {
+        if (!editor.isActive(this.name)) return false
+
+        return editor.commands.insertContent("\t")
+      },
+
+      // Shift+Tab removes a tab if at start of line
+      "Shift-Tab": ({ editor }) => {
+        if (!editor.isActive(this.name)) return false
+
+        const { state } = editor
+        const { selection } = state
+        const { $from } = selection
+
+        // Get text before cursor on current line
+        const lineStart = $from.start()
+        const textBefore = state.doc.textBetween(lineStart, $from.pos)
+
+        // If line starts with tab, remove it
+        if (textBefore.startsWith("\t")) {
+          return editor.commands.command(({ tr }) => {
+            tr.delete(lineStart, lineStart + 1)
+            return true
+          })
+        }
+
+        return false
+      },
+
+      // Enter creates a new line (not a new block)
+      Enter: ({ editor }) => {
+        if (!editor.isActive(this.name)) return false
+
+        return editor.commands.insertContent("\n")
+      },
+
+      // Backspace at start exits the block
+      Backspace: ({ editor }) => {
+        if (!editor.isActive(this.name)) return false
+
+        const { state } = editor
+        const { selection } = state
+        const { $from } = selection
+
+        // If at the very start of the preformatted block and it's empty
+        if ($from.parentOffset === 0 && $from.parent.textContent === "") {
+          return editor.commands.togglePreformatted()
+        }
+
+        return false
+      }
+    }
+  },
+
+  // Input Rules (convert ``` to preformatted if no language specified)
+
+  addInputRules() {
+    return []  // Let CodeBlock handle ``` - we use Cmd+Shift+P
+  },
+
+  // Plugins
+
+  addProseMirrorPlugins() {
+    return [
+      // Plugin to handle paste - preserve whitespace
+      new Plugin({
+        key: new PluginKey("preformattedPaste"),
+        props: {
+          handlePaste: (view, event) => {
+            if (!this.editor.isActive(this.name)) return false
+
+            const text = event.clipboardData?.getData("text/plain")
+            if (!text) return false
+
+            // Insert plain text, preserving whitespace
+            this.editor.commands.insertContent(text)
+            return true
+          }
+        }
+      })
+    ]
+  }
+})
+
+export default Preformatted