@byline/richtext-lexical 0.9.3

package/src/field/plugins/layout-plugin/layout-plugin.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect } from 'react'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+import type { ElementNode, LexicalCommand, LexicalNode, NodeKey } from 'lexical'
+import {
+  $createParagraphNode,
+  $getNodeByKey,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_NORMAL,
+  createCommand,
+} from 'lexical'
+
+import {
+  $createLayoutContainerNode,
+  $isLayoutContainerNode,
+  LayoutContainerNode,
+} from '../../nodes/layout-container-node/layout-container-node'
+import {
+  $createLayoutItemNode,
+  $isLayoutItemNode,
+  LayoutItemNode,
+} from '../../nodes/layout-container-node/layout-item-node'
+import { InsertLayoutModal } from './insert-layout-modal'
+
+export const OPEN_INSERT_LAYOUT_MODAL_COMMAND = createCommand('OPEN_INSERT_LAYOUT_MODAL_COMMAND')
+
+export const INSERT_LAYOUT_COMMAND: LexicalCommand<string> = createCommand<string>()
+
+export const UPDATE_LAYOUT_COMMAND: LexicalCommand<{
+  template: string
+  nodeKey: NodeKey
+}> = createCommand<{ template: string; nodeKey: NodeKey }>()
+
+export function LayoutPlugin(): React.JSX.Element {
+  const [editor] = useLexicalComposerContext()
+  const [open, setOpen] = React.useState(false)
+
+  const handleOnClose = (): void => {
+    setOpen(false)
+  }
+
+  const handleOnSubmit = (layout: string) => {
+    if (layout != null) {
+      editor.dispatchCommand(INSERT_LAYOUT_COMMAND, layout)
+    } else {
+      console.error('Error: missing layout for insertion.')
+    }
+    setOpen(false)
+  }
+
+  useEffect(() => {
+    if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
+      throw new Error(
+        'LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor'
+      )
+    }
+
+    return mergeRegister(
+      editor.registerCommand<null>(
+        OPEN_INSERT_LAYOUT_MODAL_COMMAND,
+        () => {
+          setOpen(true)
+          return true
+        },
+        COMMAND_PRIORITY_NORMAL
+      ),
+      editor.registerCommand(
+        INSERT_LAYOUT_COMMAND,
+        (template) => {
+          editor.update(() => {
+            const container = $createLayoutContainerNode(template)
+            const itemsCount = getItemsCountFromTemplate(template)
+
+            for (let i = 0; i < itemsCount; i++) {
+              container.append($createLayoutItemNode().append($createParagraphNode()))
+            }
+
+            $insertNodeToNearestRoot(container)
+            container.selectStart()
+          })
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      editor.registerCommand(
+        UPDATE_LAYOUT_COMMAND,
+        ({ template, nodeKey }) => {
+          editor.update(() => {
+            const container = $getNodeByKey<LexicalNode>(nodeKey)
+
+            if (!$isLayoutContainerNode(container)) {
+              return
+            }
+
+            const itemsCount = getItemsCountFromTemplate(template)
+            const prevItemsCount = getItemsCountFromTemplate(container.getTemplateColumns())
+
+            // Add or remove extra columns if new template does not match existing one
+            if (itemsCount > prevItemsCount) {
+              for (let i = prevItemsCount; i < itemsCount; i++) {
+                container.append($createLayoutItemNode().append($createParagraphNode()))
+              }
+            } else if (itemsCount < prevItemsCount) {
+              for (let i = prevItemsCount - 1; i >= itemsCount; i--) {
+                const layoutItem = container.getChildAtIndex<LexicalNode>(i)
+
+                if ($isLayoutItemNode(layoutItem)) {
+                  layoutItem.remove()
+                }
+              }
+            }
+
+            container.setTemplateColumns(template)
+          })
+
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
+      // Structure enforcing transformers for each node type. In case nesting structure is not
+      // "Container > Item" it'll unwrap nodes and convert it back
+      // to regular content.
+      editor.registerNodeTransform(LayoutItemNode, (node) => {
+        const parent = node.getParent<ElementNode>()
+        if (!$isLayoutContainerNode(parent)) {
+          const children = node.getChildren<LexicalNode>()
+          for (const child of children) {
+            node.insertBefore(child)
+          }
+          node.remove()
+        }
+      }),
+      editor.registerNodeTransform(LayoutContainerNode, (node) => {
+        const children = node.getChildren<LexicalNode>()
+        if (!children.every($isLayoutItemNode)) {
+          for (const child of children) {
+            node.insertBefore(child)
+          }
+          node.remove()
+        }
+      })
+    )
+  }, [editor])
+
+  return <InsertLayoutModal open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} />
+}
+
+function getItemsCountFromTemplate(template: string): number {
+  return template.trim().split(/\s+/).length
+}

package/src/field/plugins/link-plugin/auto-link/auto-link-plugin.tsx

@@ -0,0 +1,327 @@
+'use client'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useEffect } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
+import type { ElementNode, LexicalEditor, LexicalNode } from 'lexical'
+import { $createTextNode, $isElementNode, $isLineBreakNode, $isTextNode, TextNode } from 'lexical'
+
+import {
+  $createAutoLinkNode,
+  $isAutoLinkNode,
+  $isLinkNode,
+  AutoLinkNode,
+  type CustomLinkAttributes,
+  type LinkAttributes,
+} from '../../../nodes/link-nodes'
+import invariant from '../../../shared/invariant'
+
+type ChangeHandler = (url: string | null, prevUrl: string | null) => void
+
+interface LinkMatcherResult {
+  attributes?: LinkAttributes
+  index: number
+  length: number
+  text: string
+  url: string
+}
+
+/**
+ * AutoLink only ever produces `linkType: 'custom'` nodes — narrow at the
+ * read sites so we can access `url` and `rel` without fighting the
+ * discriminated union.
+ */
+function customAttrs(attrs: LinkAttributes | undefined | null): CustomLinkAttributes | null {
+  if (attrs == null || attrs.linkType === 'internal') return null
+  return attrs
+}
+
+export type LinkMatcher = (text: string) => LinkMatcherResult | null
+
+export function createLinkMatcherWithRegExp(
+  regExp: RegExp,
+  urlTransformer: (text: string) => string = (text) => text
+) {
+  return (text: string) => {
+    const match = regExp.exec(text)
+    if (match === null) return null
+    return {
+      index: match.index,
+      length: match[0].length,
+      text: match[0],
+      url: urlTransformer(text),
+    }
+  }
+}
+
+function findFirstMatch(text: string, matchers: LinkMatcher[]): LinkMatcherResult | null {
+  for (let i = 0; i < matchers.length; i++) {
+    const match = matchers[i](text)
+
+    if (match != null) {
+      return match
+    }
+  }
+
+  return null
+}
+
+const PUNCTUATION_OR_SPACE = /[.,;\s]/
+
+function isSeparator(char: string): boolean {
+  return PUNCTUATION_OR_SPACE.test(char)
+}
+
+function endsWithSeparator(textContent: string): boolean {
+  return isSeparator(textContent[textContent.length - 1])
+}
+
+function startsWithSeparator(textContent: string): boolean {
+  return isSeparator(textContent[0])
+}
+
+function isPreviousNodeValid(node: LexicalNode): boolean {
+  let previousNode = node.getPreviousSibling()
+  if ($isElementNode(previousNode)) {
+    previousNode = previousNode.getLastDescendant()
+  }
+  return (
+    previousNode === null ||
+    $isLineBreakNode(previousNode) ||
+    ($isTextNode(previousNode) && endsWithSeparator(previousNode.getTextContent()))
+  )
+}
+
+function isNextNodeValid(node: LexicalNode): boolean {
+  let nextNode = node.getNextSibling()
+  if ($isElementNode(nextNode)) {
+    nextNode = nextNode.getFirstDescendant()
+  }
+  return (
+    nextNode === null ||
+    $isLineBreakNode(nextNode) ||
+    ($isTextNode(nextNode) && startsWithSeparator(nextNode.getTextContent()))
+  )
+}
+
+function isContentAroundIsValid(
+  matchStart: number,
+  matchEnd: number,
+  text: string,
+  node: TextNode
+): boolean {
+  const contentBeforeIsValid =
+    matchStart > 0 ? isSeparator(text[matchStart - 1]) : isPreviousNodeValid(node)
+  if (!contentBeforeIsValid) {
+    return false
+  }
+
+  const contentAfterIsValid =
+    matchEnd < text.length ? isSeparator(text[matchEnd]) : isNextNodeValid(node)
+  return contentAfterIsValid
+}
+
+function handleLinkCreation(
+  node: TextNode,
+  matchers: LinkMatcher[],
+  onChange: ChangeHandler
+): void {
+  const nodeText = node.getTextContent()
+  let text = nodeText
+  let invalidMatchEnd = 0
+  let remainingTextNode = node
+  let match: LinkMatcherResult | null = null
+
+  match = findFirstMatch(text, matchers)
+  while (match != null && match !== null) {
+    const matchStart: number = match.index
+    const matchLength: number = match.length
+    const matchEnd = matchStart + matchLength
+    const isValid = isContentAroundIsValid(
+      invalidMatchEnd + matchStart,
+      invalidMatchEnd + matchEnd,
+      nodeText,
+      node
+    )
+
+    if (isValid) {
+      let linkTextNode: TextNode
+      if (invalidMatchEnd + matchStart === 0) {
+        ;[linkTextNode, remainingTextNode] = remainingTextNode.splitText(
+          invalidMatchEnd + matchLength
+        )
+      } else {
+        ;[, linkTextNode, remainingTextNode] = remainingTextNode.splitText(
+          invalidMatchEnd + matchStart,
+          invalidMatchEnd + matchStart + matchLength
+        )
+      }
+      const attributes: CustomLinkAttributes = {
+        linkType: 'custom',
+        url: match.url,
+        ...(match.attributes as CustomLinkAttributes | undefined),
+      }
+
+      const linkNode = $createAutoLinkNode({ attributes })
+      const textNode = $createTextNode(match.text)
+      textNode.setFormat(linkTextNode.getFormat())
+      textNode.setDetail(linkTextNode.getDetail())
+      linkNode.append(textNode)
+      linkTextNode.replace(linkNode)
+      onChange(match.url, null)
+      invalidMatchEnd = 0
+    } else {
+    }
+
+    text = text.substring(matchEnd)
+    match = findFirstMatch(text, matchers)
+  }
+}
+
+function handleLinkEdit(
+  linkNode: AutoLinkNode,
+  matchers: LinkMatcher[],
+  onChange: ChangeHandler
+): void {
+  // Check children are simple text
+  const children = linkNode.getChildren()
+  const childrenLength = children.length
+  for (let i = 0; i < childrenLength; i++) {
+    const child = children[i]
+    if (!$isTextNode(child) || !child.isSimpleText()) {
+      replaceWithChildren(linkNode)
+      onChange(null, customAttrs(linkNode.getAttributes())?.url ?? null)
+      return
+    }
+  }
+
+  // Check text content fully matches
+  const text = linkNode.getTextContent()
+  const match = findFirstMatch(text, matchers)
+  if (match === null || match.text !== text) {
+    replaceWithChildren(linkNode)
+    onChange(null, customAttrs(linkNode.getAttributes())?.url ?? null)
+    return
+  }
+
+  // Check neighbors
+  if (!isPreviousNodeValid(linkNode) || !isNextNodeValid(linkNode)) {
+    replaceWithChildren(linkNode)
+    onChange(null, customAttrs(linkNode.getAttributes())?.url ?? null)
+    return
+  }
+
+  const url = customAttrs(linkNode.getAttributes())?.url
+  if (url !== match?.url) {
+    const attrs = customAttrs(linkNode.getAttributes())
+    if (attrs != null) {
+      attrs.url = match?.url
+      linkNode.setAttributes(attrs)
+      onChange(match.url, url ?? null)
+    }
+  }
+
+  if (match.attributes != null) {
+    const rel = linkNode.getAttributes().rel
+    if (rel !== match.attributes.rel) {
+      const attrs = linkNode.getAttributes()
+      attrs.rel = match.attributes.rel ?? null
+      linkNode.setAttributes(attrs)
+      onChange(match.attributes.rel ?? null, rel ?? null)
+    }
+  }
+}
+
+// Bad neighbors are edits in neighbor nodes that make AutoLinks incompatible.
+// Given the creation preconditions, these can only be simple text nodes.
+function handleBadNeighbors(
+  textNode: TextNode,
+  matchers: LinkMatcher[],
+  onChange: ChangeHandler
+): void {
+  const previousSibling = textNode.getPreviousSibling()
+  const nextSibling = textNode.getNextSibling()
+  const text = textNode.getTextContent()
+
+  if ($isAutoLinkNode(previousSibling) && !startsWithSeparator(text)) {
+    previousSibling.append(textNode)
+    handleLinkEdit(previousSibling, matchers, onChange)
+    onChange(null, customAttrs(previousSibling.getAttributes())?.url ?? null)
+  }
+
+  if ($isAutoLinkNode(nextSibling) && !endsWithSeparator(text)) {
+    replaceWithChildren(nextSibling)
+    handleLinkEdit(nextSibling, matchers, onChange)
+    onChange(null, customAttrs(nextSibling.getAttributes())?.url ?? null)
+  }
+}
+
+function replaceWithChildren(node: ElementNode): LexicalNode[] {
+  const children = node.getChildren()
+  const childrenLength = children.length
+
+  for (let j = childrenLength - 1; j >= 0; j--) {
+    node.insertAfter(children[j])
+  }
+
+  node.remove()
+  return children.map((child) => child.getLatest())
+}
+
+function useAutoLink(
+  editor: LexicalEditor,
+  matchers: LinkMatcher[],
+  onChange?: ChangeHandler
+): void {
+  useEffect(() => {
+    if (!editor.hasNodes([AutoLinkNode])) {
+      invariant(false, 'LexicalAutoLinkPlugin: AutoLinkNode not registered on editor')
+    }
+
+    const onChangeWrapped = (url: string | null, prevUrl: string | null): void => {
+      if (onChange != null) {
+        onChange(url, prevUrl)
+      }
+    }
+
+    return mergeRegister(
+      editor.registerNodeTransform(TextNode, (textNode: TextNode) => {
+        const parent = textNode.getParentOrThrow()
+        const previous = textNode.getPreviousSibling()
+        if ($isAutoLinkNode(parent)) {
+          handleLinkEdit(parent, matchers, onChangeWrapped)
+        } else if (!$isLinkNode(parent)) {
+          if (
+            textNode.isSimpleText() &&
+            (startsWithSeparator(textNode.getTextContent()) || !$isAutoLinkNode(previous))
+          ) {
+            handleLinkCreation(textNode, matchers, onChangeWrapped)
+          }
+
+          handleBadNeighbors(textNode, matchers, onChangeWrapped)
+        }
+      })
+    )
+  }, [editor, matchers, onChange])
+}
+
+export function AutoLinkPlugin({
+  matchers,
+  onChange,
+}: {
+  matchers: LinkMatcher[]
+  onChange?: ChangeHandler
+}): React.JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+  useAutoLink(editor, matchers, onChange)
+  return null
+}

package/src/field/plugins/link-plugin/auto-link/index.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type * as React from 'react'
+
+import {
+  createLinkMatcherWithRegExp,
+  AutoLinkPlugin as LexicalAutoLinkPlugin,
+} from './auto-link-plugin'
+
+const URL_REGEX =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
+
+const EMAIL_REGEX =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/
+
+const MATCHERS = [
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith('http') ? text : `https://${text}`
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`
+  }),
+]
+
+export function AutoLinkPlugin(): React.JSX.Element {
+  return <LexicalAutoLinkPlugin matchers={MATCHERS} />
+}

package/src/field/plugins/link-plugin/link/floating-link-editor.css

@@ -0,0 +1,128 @@
+.link-editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.link-editor .link-input {
+  display: block;
+  min-height: 26px;
+  box-sizing: border-box;
+  margin: 8px 4px 8px 10px;
+  padding: 2px;
+  border-radius: 8px;
+  background-color: #eee;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor .link-view a {
+  display: block;
+  word-break: break-word;
+  width: calc(100% - 33px);
+}
+
+.link-editor div.link-edit {
+  background-image: url(../../../images/icons/pencil-fill.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 30px;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor div.link-trash {
+  background-image: url(../../../images/icons/trash.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input a {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .font-size-wrapper,
+.link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
+}
+
+.dark {
+  .link-editor {
+    background-color: var(--canvas-800);
+  }
+}