@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroEditor/FuroEditorMentionMenu.vue

@@ -0,0 +1,120 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroEditorMentionMenuContext from './FuroEditorMentionMenuContext.js'
+
+export default defineComponent({
+  name: 'FuroEditorMentionMenu',
+
+  props: {
+    items: {
+      /** @type {import('vue').PropType<Array<{ id: string | number, label: string }>>} */
+      type: Array,
+      default: () => [],
+    },
+    command: {
+      type: (/** @type {import('vue').PropType<(mention: { id: string | number, label: string }) => void>} */ (Function)),
+      required: true,
+    },
+  },
+
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroEditorMentionMenuContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="unit-editor-mention-list">
+    <template v-if="context.hasItems()">
+      <button
+        v-for="(mention, index) in context.items"
+        :key="mention.id"
+        type="button"
+        class="item"
+        :class="{
+          selected: context.isSelected({ index }),
+        }"
+        @click="context.selectMention({ index })"
+      >
+        {{ mention.label }}
+      </button>
+    </template>
+
+    <div
+      v-else
+      class="empty"
+    >
+      No matches
+    </div>
+  </div>
+</template>
+
+<style>
+@layer furo {
+  .unit-editor-mention-list {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 10rem;
+    max-height: 16rem;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: 0.375rem;
+
+    padding-block: 0.25rem;
+    padding-inline: 0.25rem;
+
+    background-color: var(--color-popover);
+
+    overflow-y: auto;
+    box-shadow: var(--shadow-strong);
+    font-family: var(--font-family);
+  }
+
+  .unit-editor-mention-list > .item {
+    display: flex;
+    align-items: center;
+
+    border: none;
+    border-radius: 0.25rem;
+
+    padding-block: 0.375rem;
+    padding-inline: 0.5rem;
+
+    background-color: transparent;
+
+    color: var(--color-popover-foreground);
+    font: var(--font-body-medium);
+    text-align: start;
+
+    cursor: pointer;
+  }
+
+  .unit-editor-mention-list > .item:hover,
+  .unit-editor-mention-list > .item.selected {
+    background-color: var(--color-accent);
+  }
+
+  .unit-editor-mention-list > .empty {
+    padding-block: 0.375rem;
+    padding-inline: 0.5rem;
+
+    color: var(--color-muted-foreground);
+    font: var(--font-body-small);
+  }
+}
+</style>

package/lib/components/organisms/FuroEditor/FuroEditorMentionMenuContext.js

@@ -0,0 +1,261 @@
+import {
+  ref,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+/**
+ * Context for the mention suggestion list popup.
+ *
+ * Renders a domain-agnostic list of `{ id, label }` items and forwards the chosen
+ * item back to Tiptap through the injected `command` prop. Keyboard navigation
+ * (up / down / enter) is exposed for the suggestion renderer to drive.
+ *
+ * @extends {BaseFuroContext<null, FuroEditorMentionMenuContextParams['props'], null>}
+ */
+export default class FuroEditorMentionMenuContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroEditorMentionMenuContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroEditorMentionMenuContext ? X : never} T, X
+   * @override
+   * @param {FuroEditorMentionMenuContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroEditorMentionMenuContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      selectedIndexRef: ref(0),
+    }
+  }
+
+  /**
+   * get: mention items.
+   *
+   * @returns {Array<{ id: string | number, label: string }>} - Items.
+   */
+  get items () {
+    return this.props.items
+      ?? []
+  }
+
+  /**
+   * get: currently highlighted index.
+   *
+   * @returns {number} - Selected index.
+   */
+  get selectedIndex () {
+    return this.refHash.selectedIndexRef.value
+  }
+
+  /**
+   * Whether there are any items to show.
+   *
+   * @returns {boolean} - true when non-empty.
+   */
+  hasItems () {
+    return this.items.length > 0
+  }
+
+  /**
+   * Whether the item at the index is highlighted.
+   *
+   * @param {{
+   *   index: number
+   * }} params - Parameters of this method.
+   * @returns {boolean} - true when highlighted.
+   */
+  isSelected ({
+    index,
+  }) {
+    return this.selectedIndex === index
+  }
+
+  /**
+   * Setup component context: expose keyboard handler for the suggestion renderer.
+   *
+   * @template {X extends FuroEditorMentionMenuContext ? X : never} T, X
+   * @override
+   * @returns {T} - For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    this.expose(
+      this.generateExposeHash()
+    )
+
+    return this
+  }
+
+  /** @override */
+  generateExposeHash () {
+    return {
+      /**
+       * @param {{
+       *   targetEvent: KeyboardEvent
+       * }} params - Keyboard event from the suggestion renderer.
+       * @returns {boolean} - true when handled.
+       */
+      onKeyDown: ({
+        targetEvent,
+      }) => this.onKeyDown({
+        targetEvent,
+      }),
+    }
+  }
+
+  /**
+   * Move the highlight up, wrapping to the end.
+   *
+   * @returns {void}
+   */
+  moveUp () {
+    const total = this.items.length
+
+    if (total === 0) {
+      return
+    }
+
+    this.refHash.selectedIndexRef.value = (this.selectedIndex + total - 1) % total
+  }
+
+  /**
+   * Move the highlight down, wrapping to the start.
+   *
+   * @returns {void}
+   */
+  moveDown () {
+    const total = this.items.length
+
+    if (total === 0) {
+      return
+    }
+
+    this.refHash.selectedIndexRef.value = (this.selectedIndex + 1) % total
+  }
+
+  /**
+   * Select the mention at the given index, forwarding it to Tiptap.
+   *
+   * @param {{
+   *   index: number
+   * }} params - Parameters of this method.
+   * @returns {void}
+   */
+  selectMention ({
+    index,
+  }) {
+    const mention = this.items[index]
+
+    if (!mention) {
+      return
+    }
+
+    this.props.command({
+      id: mention.id,
+      label: mention.label,
+    })
+  }
+
+  /**
+   * Select the currently highlighted mention.
+   *
+   * @returns {void}
+   */
+  selectActive () {
+    this.selectMention({
+      index: this.selectedIndex,
+    })
+  }
+
+  /**
+   * Handle a keyboard event from the suggestion renderer.
+   *
+   * @param {{
+   *   targetEvent: KeyboardEvent
+   * }} params - Parameters of this method.
+   * @returns {boolean} - true when the key was handled.
+   */
+  onKeyDown ({
+    targetEvent,
+  }) {
+    const keyHash = {
+      ArrowUp: () => {
+        this.moveUp()
+
+        return true
+      },
+      ArrowDown: () => {
+        this.moveDown()
+
+        return true
+      },
+      Enter: () => {
+        this.selectActive()
+
+        return true
+      },
+    }
+
+    return keyHash[/** @type {keyof typeof keyHash} */ (targetEvent.key)]?.()
+      ?? false
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams<{
+ *   items: Array<{ id: string | number, label: string }>
+ *   command: (mention: { id: string | number, label: string }) => void
+ * }> & {
+ *   refHash: {
+ *     selectedIndexRef: import('vue').Ref<number>
+ *   }
+ * }} FuroEditorMentionMenuContextParams
+ */
+
+/**
+ * @typedef {Omit<FuroEditorMentionMenuContextParams, 'refHash'> & {
+ *   refHash?: FuroEditorMentionMenuContextParams['refHash']
+ * }} FuroEditorMentionMenuContextFactoryParams
+ */

package/lib/components/organisms/FuroEditor/PreserveNewlinesPasteExtension.js

@@ -0,0 +1,267 @@
+import {
+  Extension,
+} from '@tiptap/core'
+import {
+  DOMParser as ProseMirrorDOMParser,
+  Fragment,
+  Slice,
+} from '@tiptap/pm/model'
+import {
+  Plugin as ProseMirrorPlugin,
+  PluginKey as ProseMirrorPluginKey,
+} from '@tiptap/pm/state'
+
+import {
+  extractTextSegmentsFromLine,
+} from './paste-link-segments.js'
+
+/**
+ * Create a text node from a segment.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   segment: import('./paste-link-segments.js').TextSegment
+ * }} params - Parameters of this function.
+ * @returns {import('@tiptap/pm/model').Node | null} - Text node, or null for empty plain text.
+ */
+function createTextNodeFromSegment ({
+  schema,
+  segment,
+}) {
+  const linkMarkType = schema.marks.link
+
+  if (segment.type === 'link' && linkMarkType) {
+    return schema.text(
+      segment.text,
+      [
+        linkMarkType.create({
+          href: segment.href,
+        }),
+      ]
+    )
+  }
+
+  if (segment.text.length === 0) {
+    return null
+  }
+
+  return schema.text(segment.text)
+}
+
+/**
+ * Create inline text nodes with link marks from a single line.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   line: string
+ * }} params - Parameters of this function.
+ * @returns {Array<import('@tiptap/pm/model').Node>} - Inline nodes.
+ */
+function createInlineContentFromLine ({
+  schema,
+  line,
+}) {
+  const segments = extractTextSegmentsFromLine({
+    line,
+  })
+
+  return segments
+    .map(segment => createTextNodeFromSegment({
+      schema,
+      segment,
+    }))
+    .filter(node => node !== null)
+}
+
+/**
+ * Parse HTML clipboard content into paragraph nodes with marks preserved.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   html: string
+ * }} params - Parameters of this function.
+ * @returns {Array<import('@tiptap/pm/model').Node>} - Paragraph nodes parsed from HTML.
+ */
+function parseHtmlParagraphNodes ({
+  schema,
+  html,
+}) {
+  const paragraphType = schema.nodes.paragraph
+
+  if (!paragraphType) {
+    return []
+  }
+
+  const domParser = ProseMirrorDOMParser.fromSchema(schema)
+  const dom = document.implementation.createHTMLDocument()
+  const container = dom.createElement('div')
+
+  container.innerHTML = html
+
+  const parsedDocument = domParser.parse(container)
+
+  return parsedDocument.content.content
+    .filter(node => node.type === paragraphType)
+}
+
+/**
+ * Create a paragraph node from a pasted line.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   line: string
+ *   htmlParagraphNode?: import('@tiptap/pm/model').Node | null
+ * }} params - Parameters of this function.
+ * @returns {import('@tiptap/pm/model').Node} - Paragraph node.
+ */
+function createParagraphNodeFromPasteLine ({
+  schema,
+  line,
+  htmlParagraphNode = null,
+}) {
+  const paragraphType = schema.nodes.paragraph
+
+  if (htmlParagraphNode !== null) {
+    return htmlParagraphNode
+  }
+
+  if (line === '') {
+    return paragraphType.create()
+  }
+
+  const inlineContent = createInlineContentFromLine({
+    schema,
+    line,
+  })
+
+  return paragraphType.create(null, inlineContent)
+}
+
+/**
+ * Create paragraph nodes from pasted plain text while preserving newlines and marks.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   lines: Array<string>
+ *   html?: string
+ * }} params - Parameters of this function.
+ * @returns {Array<import('@tiptap/pm/model').Node>} - Paragraph nodes, one per line.
+ */
+export function createParagraphNodesFromPaste ({
+  schema,
+  lines,
+  html = '',
+}) {
+  const htmlParagraphNodes = html
+    ? parseHtmlParagraphNodes({
+      schema,
+      html,
+    })
+    : []
+
+  const shouldUseHtmlParagraphs = htmlParagraphNodes.length === lines.length
+
+  return lines.map((line, index) => {
+    const htmlParagraphNode = shouldUseHtmlParagraphs
+      ? htmlParagraphNodes[index]
+      : null
+
+    return createParagraphNodeFromPasteLine({
+      schema,
+      line,
+      htmlParagraphNode,
+    })
+  })
+}
+
+/**
+ * Resolve pasted clipboard content into paragraph nodes, or null to defer to
+ * default handling.
+ *
+ * @param {{
+ *   schema: import('@tiptap/pm/model').Schema
+ *   text?: string | null
+ *   html?: string | null
+ * }} params - Parameters of this function.
+ * @returns {Array<import('@tiptap/pm/model').Node> | null} - Paragraph nodes, or null.
+ */
+export function resolvePastedParagraphs ({
+  schema,
+  text = null,
+  html = null,
+}) {
+  // No plain text, no paragraph type, or rich HTML without newlines — defer to default.
+  if (
+    !text
+    || !schema.nodes.paragraph
+    || (html && !text.includes('\n'))
+  ) {
+    return null
+  }
+
+  // Normalize CRLF / CR to LF, then split on each individual newline (not on runs)
+  // so empty lines survive as empty strings.
+  const lines = text
+    .replace(/\r\n/gu, '\n')
+    .replace(/\r/gu, '\n')
+    .split('\n')
+
+  return createParagraphNodesFromPaste({
+    schema,
+    lines,
+    html: html ?? '',
+  })
+}
+
+/**
+ * Extension that preserves multiple consecutive newlines when pasting plain text.
+ *
+ * By default, Tiptap/ProseMirror collapses runs of newlines into single paragraph
+ * breaks because it splits on `/(?:\r\n?|\n)+/` (one or more). This extension splits
+ * on each individual newline so empty lines survive, normalizes Windows line endings,
+ * and reconstructs link marks from Markdown links and bare URLs.
+ *
+ * ref: https://unpkg.com/prosemirror-view@1.27.0/src/clipboard.ts, search for /(?:\r\n?|\n)+/
+ */
+export const PreserveNewlinesPasteExtension = Extension.create({
+  name: 'preserveNewlinesPaste',
+
+  addProseMirrorPlugins () {
+    return [
+      new ProseMirrorPlugin({
+        key: new ProseMirrorPluginKey('preserveNewlinesPaste'),
+        props: {
+          handlePaste: (view, clipboardEvent) => {
+            // Bracket access avoids the Data-suffix identifier lint on native ClipboardEvent APIs.
+            const clipboard = clipboardEvent['clipboardData']
+            const text = clipboard?.['getData']?.('text/plain')
+            const html = clipboard?.['getData']?.('text/html')
+
+            const paragraphs = resolvePastedParagraphs({
+              schema: view.state.schema,
+              text,
+              html,
+            })
+
+            if (!paragraphs) {
+              return false
+            }
+
+            // openStart/openEnd of 1 lets the first/last paragraphs merge with
+            // surrounding content when pasting in the middle of existing text.
+            const fragment = Fragment.fromArray(paragraphs)
+            const slice = new Slice(fragment, 1, 1)
+
+            view.dispatch(
+              view.state.tr
+                .replaceSelection(slice)
+                .scrollIntoView()
+            )
+
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})