@byline/richtext-lexical 0.9.3

package/src/field/plugins/auto-embed-plugin/auto-embed-modal.tsx

@@ -0,0 +1,110 @@
+import { useMemo, useState } from 'react'
+
+import { Button, CloseIcon, IconButton, Input, Modal } from '@infonomic/uikit/react'
+import { type EmbedMatchResult, URL_MATCHER } from '@lexical/react/LexicalAutoEmbedPlugin'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+import type { AutoEmbedConfig } from './index'
+
+const debounce = (callback: (text: string) => void, delay: number): ((text: string) => void) => {
+  let timeoutId: number
+  return (text: string) => {
+    window.clearTimeout(timeoutId)
+    timeoutId = window.setTimeout(() => {
+      callback(text)
+    }, delay)
+  }
+}
+
+import './auto-embed-modal.css'
+
+export function AutoEmbedModal({
+  open,
+  embedConfig,
+  onClose,
+}: {
+  open: boolean
+  embedConfig: AutoEmbedConfig
+  onClose: () => void
+}): React.JSX.Element | null {
+  const [text, setText] = useState('')
+  const [editor] = useLexicalComposerContext()
+  const [embedResult, setEmbedResult] = useState<EmbedMatchResult | null>(null)
+
+  const validateText = useMemo(
+    () =>
+      debounce((inputText: string) => {
+        const urlMatch = URL_MATCHER.exec(inputText)
+        if (embedConfig != null && inputText != null && urlMatch != null) {
+          void Promise.resolve(embedConfig.parseUrl(inputText)).then((parseResult) => {
+            setEmbedResult(parseResult)
+          })
+        } else if (embedResult == null) {
+          setEmbedResult(null)
+        }
+      }, 200),
+    [embedConfig, embedResult]
+  )
+
+  const handleOnSubmit = (): void => {
+    if (embedResult != null) {
+      embedConfig.insertNode(editor, embedResult)
+      onClose()
+    }
+  }
+
+  const handleOnClose = (): void => {
+    setText('')
+    setEmbedResult(null)
+    onClose()
+  }
+
+  if (embedConfig == null) {
+    return null
+  }
+
+  return (
+    <Modal isOpen={open} onDismiss={handleOnClose} closeOnOverlayClick={false}>
+      <Modal.Container className="auto-embed-modal-container">
+        <Modal.Header className="auto-embed-modal-header">
+          <h3>{embedConfig.contentName}</h3>
+          <IconButton arial-label="Close" size="sm" onClick={handleOnClose}>
+            <CloseIcon width="16px" height="16px" svgClassName="white-icon" />
+          </IconButton>
+        </Modal.Header>
+        <Modal.Content className="auto-embed-modal-content">
+          <Input
+            id="text"
+            name="text"
+            placeholder={embedConfig.exampleUrl}
+            value={text}
+            data-test-id={`${embedConfig.type}-embed-modal-url`}
+            onChange={(e) => {
+              const { value } = e.target
+              setText(value)
+              validateText(value)
+            }}
+          />
+        </Modal.Content>
+        <Modal.Actions className="auto-embed-modal-actions">
+          <Button
+            size="sm"
+            intent="noeffect"
+            onClick={handleOnClose}
+            data-test-id={`${embedConfig.type}-embed-modal-cancel-btn`}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            disabled={embedResult == null}
+            onClick={handleOnSubmit}
+            data-test-id={`${embedConfig.type}-embed-modal-submit-btn`}
+          >
+            Embed
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,323 @@
+'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 { useState } from 'react'
+
+import {
+  AutoEmbedOption,
+  type EmbedConfig,
+  type EmbedMatchResult,
+  LexicalAutoEmbedPlugin,
+} from '@lexical/react/LexicalAutoEmbedPlugin'
+import type { LexicalEditor } from 'lexical'
+import * as ReactDOM from 'react-dom'
+
+import { INSERT_VIMEO_COMMAND } from '../vimeo-plugin'
+import { INSERT_YOUTUBE_COMMAND } from '../youtube-plugin'
+
+// import { INSERT_FIGMA_COMMAND } from '../FigmaPlugin'
+// import { INSERT_TWEET_COMMAND } from '../TwitterPlugin'
+
+import { AutoEmbedModal } from './auto-embed-modal'
+
+export interface AutoEmbedConfig extends EmbedConfig {
+  // Human readable name of the embedded content e.g. Tweet or Google Map.
+  contentName: string
+
+  // Icon for display.
+  icon?: React.JSX.Element
+
+  // An example of a matching url https://twitter.com/jack/status/20
+  exampleUrl: string
+
+  // For extra searching.
+  keywords: string[]
+
+  // Embed a Figma Project.
+  description?: string
+}
+
+export const YoutubeEmbedConfig: AutoEmbedConfig = {
+  contentName: 'Youtube Video',
+
+  exampleUrl: 'https://www.youtube.com/watch?v=jNQXAC9IVRw',
+
+  // Icon for display.
+  icon: <i className="icon youtube" />,
+
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_YOUTUBE_COMMAND, result.id)
+  },
+
+  keywords: ['youtube', 'video'],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: async (url: string) => {
+    const match = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/.exec(url)
+
+    const id = match != null ? (match?.[2].length === 11 ? match[2] : null) : null
+
+    if (id != null) {
+      return {
+        id,
+        url,
+      }
+    }
+
+    return null
+  },
+
+  type: 'youtube-video',
+}
+
+export const VimeoEmbedConfig: AutoEmbedConfig = {
+  contentName: 'Vimeo Video',
+
+  exampleUrl: 'https://vimeo.com/584985260',
+
+  // Icon for display.
+  icon: <i className="icon vimeo" />,
+
+  insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+    editor.dispatchCommand(INSERT_VIMEO_COMMAND, result.id)
+  },
+
+  keywords: ['vimeo', 'video'],
+
+  // Determine if a given URL is a match and return url data.
+  parseUrl: async (url: string) => {
+    const match = /https:\/\/vimeo\.com\/(\d{5,10})/.exec(url)
+    const id = match != null ? match[1] : null
+    if (id != null) {
+      return {
+        id,
+        url,
+      }
+    }
+
+    return null
+  },
+
+  type: 'vimeo-video',
+}
+
+// export const TwitterEmbedConfig: AutoEmbedConfig = {
+//   // e.g. Tweet or Google Map.
+//   contentName: 'Tweet',
+
+//   exampleUrl: 'https://twitter.com/jack/status/20',
+
+//   // Icon for display.
+//   icon: <i className="icon tweet" />,
+
+//   // Create the Lexical embed node from the url data.
+//   insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+//     editor.dispatchCommand(INSERT_TWEET_COMMAND, result.id)
+//   },
+
+//   // For extra searching.
+//   keywords: ['tweet', 'twitter'],
+
+//   // Determine if a given URL is a match and return url data.
+//   parseUrl: (text: string) => {
+//     const match = /^https:\/\/(twitter|x)\.com\/(#!\/)?(\w+)\/status(es)*\/(\d+)/.exec(text)
+
+//     if (match != null) {
+//       return {
+//         id: match[5],
+//         url: match[1]
+//       }
+//     }
+
+//     return null
+//   },
+
+//   type: 'tweet'
+// }
+
+// export const FigmaEmbedConfig: AutoEmbedConfig = {
+//   contentName: 'Figma Document',
+
+//   exampleUrl: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
+
+//   icon: <i className="icon figma" />,
+
+//   insertNode: (editor: LexicalEditor, result: EmbedMatchResult) => {
+//     editor.dispatchCommand(INSERT_FIGMA_COMMAND, result.id)
+//   },
+
+//   keywords: ['figma', 'figma.com', 'mock-up'],
+
+//   // Determine if a given URL is a match and return url data.
+//   parseUrl: (text: string) => {
+//     const match =
+//       /https:\/\/([\w.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/.exec(text)
+
+//     if (match != null) {
+//       return {
+//         id: match[3],
+//         url: match[0]
+//       }
+//     }
+
+//     return null
+//   },
+
+//   type: 'figma'
+// }
+
+// export const EmbedConfigs = [TwitterEmbedConfig, YoutubeEmbedConfig, FigmaEmbedConfig]
+export const EmbedConfigs = [YoutubeEmbedConfig, VimeoEmbedConfig]
+
+function AutoEmbedMenuItem({
+  index,
+  isSelected,
+  onClick,
+  onMouseEnter,
+  option,
+}: {
+  index: number
+  isSelected: boolean
+  onClick: () => void
+  onMouseEnter: () => void
+  option: AutoEmbedOption
+}): React.JSX.Element {
+  let className = 'item'
+  if (isSelected) {
+    className += ' selected'
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onClick()
+    }
+  }
+
+  return (
+    <li
+      key={option.key}
+      className={className}
+      ref={option.setRefElement}
+      id={`typeahead-item-${index}`}
+      onMouseEnter={onMouseEnter}
+      onClick={onClick}
+      onKeyDown={handleKeyDown} // Added keyboard support
+    >
+      <span className="text">{option.title}</span>
+    </li>
+  )
+}
+
+function AutoEmbedMenu({
+  options,
+  selectedItemIndex,
+  onOptionClick,
+  onOptionMouseEnter,
+}: {
+  selectedItemIndex: number | null
+  onOptionClick: (option: AutoEmbedOption, index: number) => void
+  onOptionMouseEnter: (index: number) => void
+  options: AutoEmbedOption[]
+}): React.JSX.Element {
+  return (
+    <div className="typeahead-popover">
+      <ul>
+        {options.map((option: AutoEmbedOption, i: number) => (
+          <AutoEmbedMenuItem
+            index={i}
+            isSelected={selectedItemIndex === i}
+            onClick={() => {
+              onOptionClick(option, i)
+            }}
+            onMouseEnter={() => {
+              onOptionMouseEnter(i)
+            }}
+            key={option.key}
+            option={option}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export function AutoEmbedPlugin(): React.JSX.Element {
+  const [open, setOpen] = useState(false)
+  const [embedConfig, setEmbedConfig] = useState<AutoEmbedConfig | null>(null)
+
+  const handleOnOpenEmbedModalForConfig = (config: AutoEmbedConfig): void => {
+    setEmbedConfig(config)
+    setOpen(true)
+  }
+
+  const getMenuOptions = (
+    activeEmbedConfig: AutoEmbedConfig,
+    embedFn: () => void,
+    dismissFn: () => void
+  ): AutoEmbedOption[] => {
+    return [
+      new AutoEmbedOption('Dismiss', {
+        onSelect: dismissFn,
+      }),
+      new AutoEmbedOption(`Embed ${activeEmbedConfig.contentName}`, {
+        onSelect: embedFn,
+      }),
+    ]
+  }
+
+  return (
+    <>
+      <LexicalAutoEmbedPlugin<AutoEmbedConfig>
+        embedConfigs={EmbedConfigs}
+        onOpenEmbedModalForConfig={handleOnOpenEmbedModalForConfig}
+        getMenuOptions={getMenuOptions}
+        menuRenderFn={(
+          anchorElementRef,
+          { selectedIndex, options, selectOptionAndCleanUp, setHighlightedIndex }
+        ) =>
+          anchorElementRef.current != null
+            ? ReactDOM.createPortal(
+                <div
+                  className="typeahead-popover auto-embed-menu"
+                  style={{
+                    marginLeft: anchorElementRef.current.style.width,
+                    width: 200,
+                  }}
+                >
+                  <AutoEmbedMenu
+                    options={options}
+                    selectedItemIndex={selectedIndex}
+                    onOptionClick={(option: AutoEmbedOption, index: number) => {
+                      setHighlightedIndex(index)
+                      selectOptionAndCleanUp(option)
+                    }}
+                    onOptionMouseEnter={(index: number) => {
+                      setHighlightedIndex(index)
+                    }}
+                  />
+                </div>,
+                anchorElementRef.current
+              )
+            : null
+        }
+      />
+      <AutoEmbedModal
+        open={open}
+        embedConfig={embedConfig as AutoEmbedConfig}
+        onClose={() => {
+          setOpen(false)
+          setEmbedConfig(null)
+        }}
+      />
+    </>
+  )
+}

package/src/field/plugins/code-highlight-plugin/index.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { useEffect } from 'react'
+
+import { registerCodeHighlighting } from '@lexical/code'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+export function CodeHighlightPlugin(): React.JSX.Element | null {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return registerCodeHighlighting(editor)
+  }, [editor])
+
+  return null
+}

package/src/field/plugins/drag-drop-paste-plugin/index.ts

@@ -0,0 +1,47 @@
+// /**
+//  * 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 { DRAG_DROP_PASTE } from '@lexical/rich-text'
+// import { isMimeType, mediaFileReader } from '@lexical/utils'
+// import { COMMAND_PRIORITY_LOW } from 'lexical'
+// import { useEffect } from 'react'
+
+// // import { INSERT_INLINE_IMAGE_COMMAND } from '../inline-image-plugin'
+
+// const ACCEPTABLE_IMAGE_TYPES = ['image/', 'image/heic', 'image/heif', 'image/gif', 'image/webp' , 'image/avif']
+
+// export function DragDropPaste(): null {
+//   const [editor] = useLexicalComposerContext()
+//   useEffect(() => {
+//     return editor.registerCommand(
+//       DRAG_DROP_PASTE,
+//       (files) => {
+//         void (async () => {
+//           const filesResult = await mediaFileReader(
+//             files,
+//             [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x)
+//           )
+//           for (const { file, result } of filesResult) {
+//             if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+//               editor.dispatchCommand(INSERT_INLINE_IMAGE_COMMAND, {
+//                 id: '',
+//                 collection: '',
+//                 src: result,
+//                 altText: file.name
+//               })
+//             }
+//           }
+//         })()
+//         return true
+//       },
+//       COMMAND_PRIORITY_LOW
+//     )
+//   }, [editor])
+//   return null
+// }

package/src/field/plugins/floating-text-format-toolbar-plugin/index.css

@@ -0,0 +1,148 @@
+.floating-text-format-popup {
+  display: flex;
+  background: #fff;
+  padding: 4px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  transition: opacity 0.5s;
+  height: 35px;
+  will-change: transform;
+}
+
+.floating-text-format-popup button.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.floating-text-format-popup button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.popup-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 3px;
+  vertical-align: -0.25em;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.popup-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup select.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 6px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.floating-text-format-popup select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.floating-text-format-popup .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.floating-text-format-popup .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.floating-text-format-popup .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+@media (max-width: 1024px) {
+  .floating-text-format-popup button.insert-comment {
+    display: none;
+  }
+}
+
+.dark {
+  .floating-text-format-popup {
+    background-color: var(--canvas-800);
+    border: 1px solid var(--border-color);
+  }
+
+  .floating-text-format-popup i {
+    filter: invert(1);
+  }
+
+  .floating-text-format-popup .popup-item:hover:not([disabled]) {
+    background-color: #1c1c1c;
+  }
+}