@byline/richtext-lexical 0.9.3

package/src/field/nodes/youtube-node/index.tsx

@@ -0,0 +1,178 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type * as React from 'react'
+
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents'
+import {
+  DecoratorBlockNode,
+  type SerializedDecoratorBlockNode,
+} from '@lexical/react/LexicalDecoratorBlockNode'
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from 'lexical'
+
+type YouTubeComponentProps = Readonly<{
+  className: Readonly<{
+    base: string
+    focus: string
+  }>
+  format: ElementFormatType | null
+  nodeKey: NodeKey
+  videoID: string
+}>
+
+function YouTubeComponent({
+  className,
+  format,
+  nodeKey,
+  videoID,
+}: YouTubeComponentProps): React.JSX.Element {
+  return (
+    <BlockWithAlignableContents className={className} format={format} nodeKey={nodeKey}>
+      <iframe
+        style={{
+          aspectRatio: '16 / 9',
+          width: '100%',
+        }}
+        src={`https://www.youtube-nocookie.com/embed/${videoID}`}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen={true}
+        title="YouTube Video"
+      />
+    </BlockWithAlignableContents>
+  )
+}
+
+export type SerializedYouTubeNode = Spread<
+  {
+    videoID: string
+  },
+  SerializedDecoratorBlockNode
+>
+
+function convertYoutubeElement(domNode: HTMLElement): null | DOMConversionOutput {
+  const videoID = domNode.getAttribute('data-lexical-youtube')
+  if (videoID != null) {
+    const node = $createYouTubeNode(videoID)
+    return { node }
+  }
+  return null
+}
+
+export class YouTubeNode extends DecoratorBlockNode {
+  __id: string
+
+  static getType(): string {
+    return 'youtube'
+  }
+
+  static clone(node: YouTubeNode): YouTubeNode {
+    return new YouTubeNode(node.__id, node.__format, node.__key)
+  }
+
+  static importJSON(serializedNode: SerializedYouTubeNode): YouTubeNode {
+    const node = $createYouTubeNode(serializedNode.videoID)
+    node.setFormat(serializedNode.format)
+    return node
+  }
+
+  exportJSON(): SerializedYouTubeNode {
+    return {
+      ...super.exportJSON(),
+      type: 'youtube',
+      version: 1,
+      videoID: this.__id,
+    }
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key)
+    this.__id = id
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('iframe')
+    element.setAttribute('data-lexical-youtube', this.__id)
+    element.setAttribute('width', '560')
+    element.setAttribute('height', '315')
+    element.setAttribute('src', `https://www.youtube-nocookie.com/embed/${this.__id}`)
+    element.setAttribute('frameborder', '0')
+    element.setAttribute(
+      'allow',
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+    )
+    element.setAttribute('allowfullscreen', 'true')
+    element.setAttribute('title', 'YouTube video')
+    return { element }
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      iframe: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-youtube')) {
+          return null
+        }
+        return {
+          conversion: convertYoutubeElement,
+          priority: 1,
+        }
+      },
+    }
+  }
+
+  updateDOM(): false {
+    return false
+  }
+
+  getId(): string {
+    return this.__id
+  }
+
+  getTextContent(
+    _includeInert?: boolean | undefined,
+    _includeDirectionless?: false | undefined
+  ): string {
+    return `https://www.youtube.com/watch?v=${this.__id}`
+  }
+
+  decorate(_editor: LexicalEditor, config: EditorConfig): React.JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock ?? {}
+    const className = {
+      base: embedBlockTheme.base ?? '',
+      focus: embedBlockTheme.focus ?? '',
+    }
+    return (
+      <YouTubeComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        videoID={this.__id}
+      />
+    )
+  }
+}
+
+export function $createYouTubeNode(videoID: string): YouTubeNode {
+  return new YouTubeNode(videoID)
+}
+
+export function $isYouTubeNode(
+  node: YouTubeNode | LexicalNode | null | undefined
+): node is YouTubeNode {
+  return node instanceof YouTubeNode
+}

package/src/field/plugins/admonition-plugin/admonition-modal.css

@@ -0,0 +1,25 @@
+.admonition-modal-container {
+  max-width: 650px;
+}
+
+.admonition-modal-header h3 {
+  margin: 0;
+}
+
+.admonition-modal-header {
+  padding-bottom: 0.75rem;
+}
+
+.admonition-modal-radio-group {
+  flex-direction: column;
+}
+
+@media screen and (min-width: 640px) {
+  .admonition-modal-radio-group {
+    flex-direction: row;
+  }
+
+  .admonition-modal-actions {
+    margin: 0.75rem 0 0;
+  }
+}

package/src/field/plugins/admonition-plugin/admonition-modal.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+import {
+  Button,
+  CloseIcon,
+  IconButton,
+  Input,
+  Modal,
+  RadioGroup,
+  RadioGroupItem,
+} from '@infonomic/uikit/react'
+
+import { admonitionTypeOptions, getInitialState, validateFields } from './fields'
+import type { AdmonitionType } from '../../nodes/admonition-node/types'
+import type { AdmonitionDrawerProps, AdmonitionFormState } from './types'
+
+import './admonition-modal.css'
+
+function intent(type: AdmonitionType): 'info' | 'success' | 'warning' | 'danger' {
+  switch (type) {
+    case 'note':
+      return 'info'
+    case 'tip':
+      return 'success'
+    case 'warning':
+      return 'warning'
+    case 'danger':
+      return 'danger'
+  }
+}
+
+export function AdmonitionModal({
+  open = false,
+  onSubmit,
+  onClose,
+  data: dataFromProps,
+}: AdmonitionDrawerProps): React.ReactNode {
+  // const { t } = useTranslation()
+
+  const [synchronizedFormState, setSynchronizedFormState] = useState<
+    AdmonitionFormState | undefined
+  >(undefined)
+
+  const handleOnCancel = (): void => {
+    if (onClose != null && typeof onClose === 'function') {
+      onClose()
+    }
+  }
+
+  async function handleOnChange({
+    formState,
+  }: {
+    formState: AdmonitionFormState
+  }): Promise<AdmonitionFormState> {
+    return new Promise((resolve, _reject) => {
+      validateFields(formState)
+      resolve(formState)
+    })
+  }
+
+  const handleOnSubmit = (): void => {
+    const { valid } = validateFields(synchronizedFormState)
+    if (valid === true && synchronizedFormState != null) {
+      if (onSubmit != null) {
+        onSubmit({
+          admonitionType: synchronizedFormState.admonitionType.value as AdmonitionType,
+          title: synchronizedFormState.title.value as string,
+        })
+        setSynchronizedFormState(undefined)
+        if (onClose != null && typeof onClose === 'function') {
+          onClose()
+        }
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (synchronizedFormState == null && open === true) {
+      const formState = getInitialState(dataFromProps)
+      setSynchronizedFormState(formState)
+    }
+  }, [open, synchronizedFormState, dataFromProps])
+
+  if (open === false) {
+    return null
+  }
+
+  return (
+    <Modal isOpen={open} onDismiss={handleOnCancel} closeOnOverlayClick={false}>
+      <Modal.Container className="admonition-modal-container">
+        <Modal.Header className="admonition-modal-header">
+          <h3>Admonition</h3>
+          <IconButton arial-label="Close" size="xs" onClick={handleOnCancel}>
+            <CloseIcon width="15px" height="15px" svgClassName="white-icon" />
+          </IconButton>
+        </Modal.Header>
+        <Modal.Content className="admonition-modal-content">
+          <Input
+            inputWrapperClassName="admonition-modal-title"
+            id="title"
+            name="title"
+            placeholder="Title"
+            label="Title"
+            onChange={(e) => {
+              if (synchronizedFormState != null) {
+                const newState = {
+                  ...synchronizedFormState,
+                  title: { ...synchronizedFormState.title, value: e.target.value },
+                }
+                handleOnChange({ formState: newState }).then((newFormState) => {
+                  setSynchronizedFormState(newFormState)
+                })
+              }
+            }}
+            value={synchronizedFormState?.title.value ?? ''}
+            data-test-id="admonition-modal-title-input"
+          />
+          <RadioGroup
+            className="admonition-modal-radio-group"
+            defaultValue="note"
+            direction="row"
+            id="admonitionType"
+            name="admonitionType"
+            aria-label="Admonition Type"
+            value={synchronizedFormState?.admonitionType.value ?? 'note'}
+            onValueChange={(value: unknown) => {
+              if (synchronizedFormState != null) {
+                const newState = {
+                  ...synchronizedFormState,
+                  admonitionType: {
+                    ...synchronizedFormState.admonitionType,
+                    value: value as AdmonitionType,
+                  },
+                }
+                handleOnChange({ formState: newState }).then((newFormState) => {
+                  setSynchronizedFormState(newFormState)
+                })
+              }
+            }}
+            data-test-id="admonition-modal-type-radio"
+          >
+            {admonitionTypeOptions.map((value) => (
+              <RadioGroupItem
+                intent={intent(value.value as AdmonitionType)}
+                key={value.id}
+                id={value.id}
+                value={value.value}
+                label={value.label}
+              />
+            ))}
+          </RadioGroup>
+        </Modal.Content>
+        <Modal.Actions className="admonition-modal-actions">
+          <Button
+            size="sm"
+            intent="noeffect"
+            onClick={handleOnCancel}
+            data-test-id="admonition-modal-submit-button"
+            data-autofocus
+          >
+            Close
+          </Button>
+          <Button
+            size="sm"
+            intent="primary"
+            onClick={handleOnSubmit}
+            // disabled={isDisabled}
+            data-test-id="admonition-modal-submit-button"
+          >
+            Submit
+          </Button>
+        </Modal.Actions>
+      </Modal.Container>
+    </Modal>
+  )
+}

package/src/field/plugins/admonition-plugin/fields.ts

@@ -0,0 +1,103 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { RadioGroupValue } from '@infonomic/uikit/react'
+
+import type { AdmonitionType } from '../../nodes/admonition-node'
+import type { AdmonitionFormState } from './types'
+
+export const admonitionTypeOptions: RadioGroupValue[] = [
+  {
+    id: 'note',
+    label: 'Note',
+    value: 'note',
+  },
+  {
+    id: 'tip',
+    label: 'Tip',
+    value: 'tip',
+  },
+  {
+    id: 'warning',
+    label: 'Warning',
+    value: 'warning',
+  },
+  {
+    id: 'danger',
+    label: 'Danger',
+    value: 'danger',
+  },
+]
+
+// export const getFields = (): ClientField[] => {
+//   return [
+//     {
+//       name: 'title',
+//       localized: false,
+//       label: 'Title',
+//       required: true,
+//       type: 'text'
+//     },
+//     {
+//       name: 'admonitionType',
+//       localized: false,
+//       type: 'radio',
+//       label: 'Type',
+//       options: admonitionTypeOptions
+//     }
+//   ]
+// }
+
+export function getInitialState(data: {
+  admonitionType?: AdmonitionType
+  title?: string
+}): AdmonitionFormState {
+  return {
+    title: {
+      value: data?.title,
+      initialValue: data?.title,
+      valid: true,
+    },
+    admonitionType: {
+      value: data?.admonitionType ?? 'note',
+      initialValue: data?.admonitionType ?? 'note',
+      valid: true,
+    },
+  }
+}
+
+export function isTitleValid(value: string | undefined): boolean {
+  return value != null && value.length > 0
+}
+
+export function validateFields(fields?: AdmonitionFormState): {
+  valid: boolean
+  fields: AdmonitionFormState
+} {
+  let valid = true
+  if (fields == null) {
+    return {
+      valid: false,
+      fields: getInitialState({}),
+    }
+  }
+
+  if (fields.title != null) {
+    if (isTitleValid(fields.title.value as string | undefined) === false) {
+      fields.title.valid = false
+      valid = false
+    } else {
+      fields.title.valid = true
+    }
+  }
+
+  return {
+    valid,
+    fields,
+  }
+}

package/src/field/plugins/admonition-plugin/index.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import * as React from 'react'
+import { useEffect } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+import {
+  $getSelection,
+  $isRangeSelection,
+  COMMAND_PRIORITY_EDITOR,
+  COMMAND_PRIORITY_NORMAL,
+  createCommand,
+  type LexicalCommand,
+} from 'lexical'
+
+import { $createAdmonitionNode, AdmonitionNode } from '../../nodes/admonition-node'
+import { AdmonitionModal } from './admonition-modal'
+import type { AdmonitionAttributes } from '../../nodes/admonition-node/types'
+import type { AdmonitionData } from './types'
+
+export type InsertAdmonitionPayload = Readonly<AdmonitionAttributes>
+
+export const OPEN_ADMONITION_MODAL_COMMAND: LexicalCommand<null> = createCommand(
+  'OPEN_ADMONITION_MODAL_COMMAND'
+)
+
+export const INSERT_ADMONITION_COMMAND: LexicalCommand<AdmonitionAttributes> = createCommand(
+  'INSERT_ADMONITION_COMMAND'
+)
+
+export function AdmonitionPlugin(): React.JSX.Element {
+  const [editor] = useLexicalComposerContext()
+  const [open, setOpen] = React.useState(false)
+
+  useEffect(() => {
+    if (!editor.hasNodes([AdmonitionNode])) {
+      throw new Error('AdmonitionPlugin: AdmonitionNode not registered on editor')
+    }
+
+    return mergeRegister(
+      // TODO: possibly register this command with insert and edit options?
+      editor.registerCommand<null>(
+        OPEN_ADMONITION_MODAL_COMMAND,
+        () => {
+          setOpen(true)
+          return true
+        },
+        COMMAND_PRIORITY_NORMAL
+      ),
+
+      editor.registerCommand<InsertAdmonitionPayload>(
+        INSERT_ADMONITION_COMMAND,
+        (payload: AdmonitionAttributes) => {
+          // return true
+          const selection = $getSelection()
+
+          if (!$isRangeSelection(selection)) {
+            return false
+          }
+
+          const focusNode = selection.focus.getNode()
+
+          if (focusNode !== null) {
+            const admonitionNode = $createAdmonitionNode(payload)
+            $insertNodeToNearestRoot(admonitionNode)
+          }
+          return true
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    )
+  }, [editor])
+
+  const handleInsertAdmonition = ({ admonitionType, title }: AdmonitionData): void => {
+    if (title != null && admonitionType != null) {
+      const admonitionPayload: AdmonitionAttributes = {
+        admonitionType,
+        title,
+      }
+
+      editor.dispatchCommand(INSERT_ADMONITION_COMMAND, admonitionPayload)
+    } else {
+      console.error('Error: missing title or type for admonition.')
+    }
+    setOpen(false)
+  }
+
+  return (
+    <AdmonitionModal
+      open={open}
+      data={{ title: '', admonitionType: undefined }}
+      onClose={() => setOpen(false)}
+      onSubmit={handleInsertAdmonition}
+    />
+  )
+}

package/src/field/plugins/admonition-plugin/types.ts

@@ -0,0 +1,37 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import type { AdmonitionType } from '../../nodes/admonition-node/types'
+
+export interface AdmonitionFormState {
+  title: {
+    value?: string
+    initialValue?: string
+    valid: boolean
+  }
+  admonitionType: {
+    value?: AdmonitionType
+    initialValue?: AdmonitionType
+    valid: boolean
+  }
+}
+
+export interface AdmonitionData {
+  admonitionType: AdmonitionType
+  title: string
+}
+
+export interface AdmonitionDrawerProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: AdmonitionData) => void
+  data: {
+    admonitionType?: AdmonitionType
+    title?: string
+  }
+}

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

@@ -0,0 +1,15 @@
+.auto-embed-modal-container {
+  min-width: 340px;
+  max-width: 600px;
+}
+
+.auto-embed-modal-header {
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 640px) {
+  .auto-embed-modal-container {
+    min-width: 340px;
+    width: 500px;
+  }
+}